From 544fe3fbb5aa765e2c7dd027daefcd55cef5e072 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Tue, 2 Jul 2024 12:53:07 +0300 Subject: [PATCH] Fixed #6000 - Remove .p-fluid and add new fluid property --- .../primevue/src/autocomplete/AutoComplete.d.ts | 10 +++++----- packages/primevue/src/button/BaseButton.vue | 4 ++++ packages/primevue/src/button/Button.d.ts | 5 +++++ packages/primevue/src/button/style/ButtonStyle.js | 11 ++++++++++- .../primevue/src/cascadeselect/CascadeSelect.d.ts | 10 +++++----- .../primevue/src/datepicker/BaseDatePicker.vue | 4 ++++ packages/primevue/src/datepicker/DatePicker.d.ts | 5 +++++ .../src/datepicker/style/DatePickerStyle.js | 5 +++-- .../src/inlinemessage/style/InlineMessageStyle.js | 4 ---- .../src/inputchips/style/InputChipsStyle.js | 4 ---- .../primevue/src/inputgroup/BaseInputGroup.vue | 6 ++++++ packages/primevue/src/inputgroup/InputGroup.d.ts | 9 +++++++++ .../src/inputgroup/style/InputGroupStyle.js | 15 ++++++++++----- packages/primevue/src/inputmask/BaseInputMask.vue | 4 ++++ packages/primevue/src/inputmask/InputMask.d.ts | 5 +++++ packages/primevue/src/inputmask/InputMask.vue | 1 + .../primevue/src/inputnumber/BaseInputNumber.vue | 4 ++++ .../primevue/src/inputnumber/InputNumber.d.ts | 5 +++++ .../src/inputnumber/style/InputNumberStyle.js | 9 +++++---- packages/primevue/src/inputtext/BaseInputText.vue | 4 ++++ packages/primevue/src/inputtext/InputText.d.ts | 5 +++++ .../src/inputtext/style/InputTextStyle.js | 5 +++-- .../primevue/src/multiselect/BaseMultiSelect.vue | 9 ++++++++- .../primevue/src/multiselect/MultiSelect.d.ts | 5 +++++ .../src/multiselect/style/MultiSelectStyle.js | 5 +++-- packages/primevue/src/password/BasePassword.vue | 4 ++++ packages/primevue/src/password/Password.d.ts | 5 +++++ .../primevue/src/password/style/PasswordStyle.js | 9 +++++++-- packages/primevue/src/select/BaseSelect.vue | 4 ++++ packages/primevue/src/select/Select.d.ts | 5 +++++ packages/primevue/src/select/style/SelectStyle.js | 9 +++------ .../primevue/src/splitbutton/BaseSplitButton.vue | 4 ++++ .../primevue/src/splitbutton/SplitButton.d.ts | 5 +++++ packages/primevue/src/splitbutton/SplitButton.vue | 1 + .../src/splitbutton/style/SplitButtonStyle.js | 5 +++-- packages/primevue/src/textarea/BaseTextarea.vue | 4 ++++ packages/primevue/src/textarea/Textarea.d.ts | 5 +++++ .../primevue/src/textarea/style/TextareaStyle.js | 5 +++-- .../primevue/src/treeselect/BaseTreeSelect.vue | 4 ++++ packages/primevue/src/treeselect/TreeSelect.d.ts | 5 +++++ .../src/treeselect/style/TreeSelectStyle.js | 5 +++-- 41 files changed, 183 insertions(+), 49 deletions(-) diff --git a/packages/primevue/src/autocomplete/AutoComplete.d.ts b/packages/primevue/src/autocomplete/AutoComplete.d.ts index 56e7c152c..1d99208e4 100755 --- a/packages/primevue/src/autocomplete/AutoComplete.d.ts +++ b/packages/primevue/src/autocomplete/AutoComplete.d.ts @@ -501,6 +501,11 @@ export interface AutoCompleteProps { * Index of the element in tabbing order. */ tabindex?: number | string | undefined; + /** + * Spans 100% width of the container when enabled. + * @defaultValue false + */ + fluid?: boolean; /** * Defines a string value that labels an interactive element. */ @@ -528,11 +533,6 @@ export interface AutoCompleteProps { * @defaultValue false */ unstyled?: boolean; - /** - * Spans 100% width of the container when enabled. - * @defaultValue false - */ - fluid?: boolean; } /** diff --git a/packages/primevue/src/button/BaseButton.vue b/packages/primevue/src/button/BaseButton.vue index 41e168608..a15be6bb2 100644 --- a/packages/primevue/src/button/BaseButton.vue +++ b/packages/primevue/src/button/BaseButton.vue @@ -81,6 +81,10 @@ export default { plain: { type: Boolean, default: false + }, + fluid: { + type: Boolean, + default: false } }, style: ButtonStyle, diff --git a/packages/primevue/src/button/Button.d.ts b/packages/primevue/src/button/Button.d.ts index a9c41b30a..e4a9e5ea3 100755 --- a/packages/primevue/src/button/Button.d.ts +++ b/packages/primevue/src/button/Button.d.ts @@ -177,6 +177,11 @@ export interface ButtonProps extends ButtonHTMLAttributes { * @defaultValue false */ plain?: boolean | undefined; + /** + * Spans 100% width of the container when enabled. + * @defaultValue false + */ + fluid?: boolean; /** * It generates scoped CSS variables using design tokens for the component. */ diff --git a/packages/primevue/src/button/style/ButtonStyle.js b/packages/primevue/src/button/style/ButtonStyle.js index e5fe97698..9ab25c5eb 100644 --- a/packages/primevue/src/button/style/ButtonStyle.js +++ b/packages/primevue/src/button/style/ButtonStyle.js @@ -78,6 +78,14 @@ const theme = ({ dt }) => ` font-weight: ${dt('button.label.font.weight')}; } +.p-button-fluid { + width: 100%; +} + +.p-button-fluid.p-button-icon-only { + width: ${dt('button.icon.only.width')}; +} + .p-button:not(:disabled):hover { background: ${dt('button.primary.hover.background')}; border: 1px solid ${dt('button.primary.hover.border.color')}; @@ -607,7 +615,8 @@ const classes = { 'p-button-outlined': props.outlined, 'p-button-sm': props.size === 'small', 'p-button-lg': props.size === 'large', - 'p-button-plain': props.plain + 'p-button-plain': props.plain, + 'p-button-fluid': props.fluid } ], loadingIcon: 'p-button-loading-icon', diff --git a/packages/primevue/src/cascadeselect/CascadeSelect.d.ts b/packages/primevue/src/cascadeselect/CascadeSelect.d.ts index 6aa2be654..89d530782 100644 --- a/packages/primevue/src/cascadeselect/CascadeSelect.d.ts +++ b/packages/primevue/src/cascadeselect/CascadeSelect.d.ts @@ -415,6 +415,11 @@ export interface CascadeSelectProps { * Index of the element in tabbing order. */ tabindex?: number | string | undefined; + /** + * Spans 100% width of the container when enabled. + * @defaultValue false + */ + fluid?: boolean; /** * Establishes relationships between the component and label(s) where its value should be one or more element IDs. */ @@ -442,11 +447,6 @@ export interface CascadeSelectProps { * @defaultValue false */ unstyled?: boolean; - /** - * Spans 100% width of the container when enabled. - * @defaultValue false - */ - fluid?: boolean; } /** diff --git a/packages/primevue/src/datepicker/BaseDatePicker.vue b/packages/primevue/src/datepicker/BaseDatePicker.vue index 1a1939e99..75607bff5 100644 --- a/packages/primevue/src/datepicker/BaseDatePicker.vue +++ b/packages/primevue/src/datepicker/BaseDatePicker.vue @@ -232,6 +232,10 @@ export default { return { severity: 'secondary', text: true, rounded: true }; } }, + fluid: { + type: Boolean, + default: false + }, ariaLabelledby: { type: String, default: null diff --git a/packages/primevue/src/datepicker/DatePicker.d.ts b/packages/primevue/src/datepicker/DatePicker.d.ts index d1fdc28db..49f5d110c 100755 --- a/packages/primevue/src/datepicker/DatePicker.d.ts +++ b/packages/primevue/src/datepicker/DatePicker.d.ts @@ -784,6 +784,11 @@ export interface DatePickerProps { * @defaultValue { severity: 'secondary', text: true } */ timepickerButtonProps?: object | undefined; + /** + * Spans 100% width of the container when enabled. + * @defaultValue false + */ + fluid?: boolean; /** * Establishes relationships between the component and label(s) where its value should be one or more element IDs. */ diff --git a/packages/primevue/src/datepicker/style/DatePickerStyle.js b/packages/primevue/src/datepicker/style/DatePickerStyle.js index 130f5f6ac..a4a167dea 100644 --- a/packages/primevue/src/datepicker/style/DatePickerStyle.js +++ b/packages/primevue/src/datepicker/style/DatePickerStyle.js @@ -71,11 +71,11 @@ const theme = ({ dt }) => ` color: ${dt('datepicker.input.icon.color')}; } -.p-fluid .p-datepicker { +.p-datepicker-fluid { display: flex; } -.p-fluid .p-datepicker-input { +.p-datepicker-fluid .p-datepicker-input { width: 1%; } @@ -374,6 +374,7 @@ const classes = { 'p-datepicker p-component p-inputwrapper', { 'p-invalid': props.invalid, + 'p-datepicker-fluid': props.fluid, 'p-inputwrapper-filled': props.modelValue, 'p-inputwrapper-focus': state.focused, 'p-focus': state.focused || state.overlayVisible diff --git a/packages/primevue/src/inlinemessage/style/InlineMessageStyle.js b/packages/primevue/src/inlinemessage/style/InlineMessageStyle.js index 4d1c7d3dd..dc6e3b6e6 100644 --- a/packages/primevue/src/inlinemessage/style/InlineMessageStyle.js +++ b/packages/primevue/src/inlinemessage/style/InlineMessageStyle.js @@ -26,10 +26,6 @@ const theme = ({ dt }) => ` width: 0; } -.p-fluid .p-inlinemessage { - display: flex; -} - .p-inlinemessage-info { background: ${dt('inlinemessage.info.background')}; border: 1px solid ${dt('inlinemessage.info.border.color')}; diff --git a/packages/primevue/src/inputchips/style/InputChipsStyle.js b/packages/primevue/src/inputchips/style/InputChipsStyle.js index a87edb5cc..fe393ad45 100644 --- a/packages/primevue/src/inputchips/style/InputChipsStyle.js +++ b/packages/primevue/src/inputchips/style/InputChipsStyle.js @@ -98,10 +98,6 @@ const theme = ({ dt }) => ` .p-inputchips-input-item input::placeholder { color: ${dt('inputchips.placeholder.color')}; } - -.p-fluid .p-inputchips { - display: flex; -} `; const classes = { diff --git a/packages/primevue/src/inputgroup/BaseInputGroup.vue b/packages/primevue/src/inputgroup/BaseInputGroup.vue index a6d45bf96..05fc62e9b 100644 --- a/packages/primevue/src/inputgroup/BaseInputGroup.vue +++ b/packages/primevue/src/inputgroup/BaseInputGroup.vue @@ -5,6 +5,12 @@ import InputGroupStyle from 'primevue/inputgroup/style'; export default { name: 'BaseInputGroup', extends: BaseComponent, + props: { + fluid: { + type: Boolean, + default: false + } + }, style: InputGroupStyle, provide() { return { diff --git a/packages/primevue/src/inputgroup/InputGroup.d.ts b/packages/primevue/src/inputgroup/InputGroup.d.ts index 45ac2b771..6080ac0f9 100644 --- a/packages/primevue/src/inputgroup/InputGroup.d.ts +++ b/packages/primevue/src/inputgroup/InputGroup.d.ts @@ -22,6 +22,10 @@ export interface InputGroupPassThroughMethodOptions { * Defines instance. */ instance: any; + /** + * Defines valid properties. + */ + props: InputGroupProps; /** * Defines valid attributes. */ @@ -63,6 +67,11 @@ export interface InputGroupPassThroughAttributes { * Defines valid properties in InputGroup component. */ export interface InputGroupProps { + /** + * Spans 100% width of the container when enabled. + * @defaultValue false + */ + fluid?: boolean; /** * It generates scoped CSS variables using design tokens for the component. */ diff --git a/packages/primevue/src/inputgroup/style/InputGroupStyle.js b/packages/primevue/src/inputgroup/style/InputGroupStyle.js index 3494628ec..d5d836be8 100644 --- a/packages/primevue/src/inputgroup/style/InputGroupStyle.js +++ b/packages/primevue/src/inputgroup/style/InputGroupStyle.js @@ -28,9 +28,9 @@ const theme = ({ dt }) => ` } .p-inputgroup .p-inputtext, -.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup-fluid .p-inputtext, .p-inputgroup .p-inputwrapper, -.p-fluid .p-inputgroup .p-input { +.p-inputgroup-fluid .p-input { flex: 1 1 auto; width: 1%; } @@ -92,17 +92,22 @@ const theme = ({ dt }) => ` border-bottom-right-radius: ${dt('inputgroup.addon.border.radius')}; } -.p-fluid .p-inputgroup .p-button { +.p-inputgroup-fluid .p-button { width: auto; } -.p-fluid .p-inputgroup .p-button.p-button-icon-only { +.p-inputgroup-fluid .p-button.p-button-icon-only { width: 2.5rem; } `; const classes = { - root: 'p-inputgroup' + root: ({ props }) => [ + 'p-inputgroup', + { + 'p-inputgroup-fluid': props.fluid + } + ] }; export default BaseStyle.extend({ diff --git a/packages/primevue/src/inputmask/BaseInputMask.vue b/packages/primevue/src/inputmask/BaseInputMask.vue index 5786066d0..15e9a177e 100644 --- a/packages/primevue/src/inputmask/BaseInputMask.vue +++ b/packages/primevue/src/inputmask/BaseInputMask.vue @@ -46,6 +46,10 @@ export default { variant: { type: String, default: null + }, + fluid: { + type: Boolean, + default: false } }, style: InputMaskStyle, diff --git a/packages/primevue/src/inputmask/InputMask.d.ts b/packages/primevue/src/inputmask/InputMask.d.ts index 64872ac6d..9bd4a0f76 100755 --- a/packages/primevue/src/inputmask/InputMask.d.ts +++ b/packages/primevue/src/inputmask/InputMask.d.ts @@ -144,6 +144,11 @@ export interface InputMaskProps { * @defaultValue outlined */ variant?: 'outlined' | 'filled' | undefined; + /** + * Spans 100% width of the container when enabled. + * @defaultValue false + */ + fluid?: boolean; /** * When present, it specifies that the component should be disabled. * @defaultValue false diff --git a/packages/primevue/src/inputmask/InputMask.vue b/packages/primevue/src/inputmask/InputMask.vue index 3c19ddb84..de6f1fd8f 100755 --- a/packages/primevue/src/inputmask/InputMask.vue +++ b/packages/primevue/src/inputmask/InputMask.vue @@ -7,6 +7,7 @@ :invalid="invalid" :variant="variant" :placeholder="placeholder" + :fluid="fluid" :unstyled="unstyled" @input="onInput" @focus="onFocus" diff --git a/packages/primevue/src/inputnumber/BaseInputNumber.vue b/packages/primevue/src/inputnumber/BaseInputNumber.vue index 21a5cb507..9448dfeeb 100644 --- a/packages/primevue/src/inputnumber/BaseInputNumber.vue +++ b/packages/primevue/src/inputnumber/BaseInputNumber.vue @@ -133,6 +133,10 @@ export default { type: String, default: null }, + fluid: { + type: Boolean, + default: false + }, inputId: { type: String, default: null diff --git a/packages/primevue/src/inputnumber/InputNumber.d.ts b/packages/primevue/src/inputnumber/InputNumber.d.ts index b8066387b..558904fe1 100755 --- a/packages/primevue/src/inputnumber/InputNumber.d.ts +++ b/packages/primevue/src/inputnumber/InputNumber.d.ts @@ -334,6 +334,11 @@ export interface InputNumberProps { * Placeholder text for the input. */ placeholder?: string | undefined; + /** + * Spans 100% width of the container when enabled. + * @defaultValue false + */ + fluid?: boolean; /** * Identifier of the focus input to match a label defined for the chips. */ diff --git a/packages/primevue/src/inputnumber/style/InputNumberStyle.js b/packages/primevue/src/inputnumber/style/InputNumberStyle.js index 77bad1532..c08f06932 100644 --- a/packages/primevue/src/inputnumber/style/InputNumberStyle.js +++ b/packages/primevue/src/inputnumber/style/InputNumberStyle.js @@ -131,15 +131,15 @@ const theme = ({ dt }) => ` flex: 1 1 auto; } -.p-fluid .p-inputnumber { +.p-inputnumber-fluid { width: 100%; } -.p-fluid .p-inputnumber .p-inputnumber-input { +.p-inputnumber-fluid .p-inputnumber-input { width: 1%; } -.p-fluid .p-inputnumber-vertical .p-inputnumber-input { +.p-inputnumber-fluid.p-inputnumber-vertical .p-inputnumber-input { width: 100%; } `; @@ -152,7 +152,8 @@ const classes = { 'p-inputwrapper-focus': instance.focused, 'p-inputnumber-stacked': props.showButtons && props.buttonLayout === 'stacked', 'p-inputnumber-horizontal': props.showButtons && props.buttonLayout === 'horizontal', - 'p-inputnumber-vertical': props.showButtons && props.buttonLayout === 'vertical' + 'p-inputnumber-vertical': props.showButtons && props.buttonLayout === 'vertical', + 'p-inputnumber-fluid': instance.fluid } ], pcInput: 'p-inputnumber-input', diff --git a/packages/primevue/src/inputtext/BaseInputText.vue b/packages/primevue/src/inputtext/BaseInputText.vue index 8a9123b09..05da21cc0 100644 --- a/packages/primevue/src/inputtext/BaseInputText.vue +++ b/packages/primevue/src/inputtext/BaseInputText.vue @@ -18,6 +18,10 @@ export default { variant: { type: String, default: null + }, + fluid: { + type: Boolean, + default: false } }, style: InputTextStyle, diff --git a/packages/primevue/src/inputtext/InputText.d.ts b/packages/primevue/src/inputtext/InputText.d.ts index 2d94077fb..b6784dcff 100755 --- a/packages/primevue/src/inputtext/InputText.d.ts +++ b/packages/primevue/src/inputtext/InputText.d.ts @@ -101,6 +101,11 @@ export interface InputTextProps extends InputHTMLAttributes { * @defaultValue outlined */ variant?: 'outlined' | 'filled' | undefined; + /** + * Spans 100% width of the container when enabled. + * @defaultValue false + */ + fluid?: boolean; /** * It generates scoped CSS variables using design tokens for the component. */ diff --git a/packages/primevue/src/inputtext/style/InputTextStyle.js b/packages/primevue/src/inputtext/style/InputTextStyle.js index c7aae48f2..a62b77730 100644 --- a/packages/primevue/src/inputtext/style/InputTextStyle.js +++ b/packages/primevue/src/inputtext/style/InputTextStyle.js @@ -61,7 +61,7 @@ const theme = ({ dt }) => ` padding: ${dt('inputtext.lg.padding.y')} ${dt('inputtext.lg.padding.x')}; } -.p-fluid .p-inputtext { +.p-inputtext-fluid { width: 100%; } `; @@ -74,7 +74,8 @@ const classes = { 'p-inputtext-sm': props.size === 'small', 'p-inputtext-lg': props.size === 'large', 'p-invalid': props.invalid, - 'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled' + 'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled', + 'p-inputtext-fluid': props.fluid } ] }; diff --git a/packages/primevue/src/multiselect/BaseMultiSelect.vue b/packages/primevue/src/multiselect/BaseMultiSelect.vue index 6f457c46d..bdbec7cee 100644 --- a/packages/primevue/src/multiselect/BaseMultiSelect.vue +++ b/packages/primevue/src/multiselect/BaseMultiSelect.vue @@ -26,7 +26,14 @@ export default { type: Boolean, default: false }, - disabled: Boolean, + disabled: { + type: Boolean, + default: false + }, + fluid: { + type: Boolean, + default: false + }, inputId: { type: String, default: null diff --git a/packages/primevue/src/multiselect/MultiSelect.d.ts b/packages/primevue/src/multiselect/MultiSelect.d.ts index 2d0bc843b..8526ec949 100755 --- a/packages/primevue/src/multiselect/MultiSelect.d.ts +++ b/packages/primevue/src/multiselect/MultiSelect.d.ts @@ -364,6 +364,11 @@ export interface MultiSelectProps { * @defaultValue outlined */ variant?: 'outlined' | 'filled' | undefined; + /** + * Spans 100% width of the container when enabled. + * @defaultValue false + */ + fluid?: boolean; /** * Identifier of the underlying input element. */ diff --git a/packages/primevue/src/multiselect/style/MultiSelectStyle.js b/packages/primevue/src/multiselect/style/MultiSelectStyle.js index e9136142e..ef9ef3f9b 100644 --- a/packages/primevue/src/multiselect/style/MultiSelectStyle.js +++ b/packages/primevue/src/multiselect/style/MultiSelectStyle.js @@ -191,7 +191,7 @@ const theme = ({ dt }) => ` padding: calc(${dt('multiselect.padding.y')} / 2) calc(${dt('multiselect.padding.x')} / 2); } -.p-fluid .p-multiselect { +.p-multiselect-fluid { display: flex; } `; @@ -211,7 +211,8 @@ const classes = { 'p-focus': instance.focused, 'p-inputwrapper-filled': props.modelValue && props.modelValue.length, 'p-inputwrapper-focus': instance.focused || instance.overlayVisible, - 'p-multiselect-open': instance.overlayVisible + 'p-multiselect-open': instance.overlayVisible, + 'p-multiselect-fluid': props.fluid } ], labelContainer: 'p-multiselect-label-container', diff --git a/packages/primevue/src/password/BasePassword.vue b/packages/primevue/src/password/BasePassword.vue index 0f2d2d67d..ec24b08bb 100644 --- a/packages/primevue/src/password/BasePassword.vue +++ b/packages/primevue/src/password/BasePassword.vue @@ -79,6 +79,10 @@ export default { type: Boolean, default: false }, + fluid: { + type: Boolean, + default: false + }, inputId: { type: String, default: null diff --git a/packages/primevue/src/password/Password.d.ts b/packages/primevue/src/password/Password.d.ts index d0290ff3e..de2c4947c 100755 --- a/packages/primevue/src/password/Password.d.ts +++ b/packages/primevue/src/password/Password.d.ts @@ -247,6 +247,11 @@ export interface PasswordProps extends InputHTMLAttributes { * @defaultValue false */ required?: boolean | undefined; + /** + * Spans 100% width of the container when enabled. + * @defaultValue false + */ + fluid?: boolean; /** * Identifier of the underlying input element. */ diff --git a/packages/primevue/src/password/style/PasswordStyle.js b/packages/primevue/src/password/style/PasswordStyle.js index 8f35a5acd..a4f0fc8f0 100644 --- a/packages/primevue/src/password/style/PasswordStyle.js +++ b/packages/primevue/src/password/style/PasswordStyle.js @@ -35,10 +35,14 @@ const theme = ({ dt }) => ` background: ${dt('password.strength.strong.background')}; } -.p-fluid .p-password { +.p-password-fluid { display: flex; } +.p-password-fluid .p-password-input { + width: 100%; +} + .p-password-input::-ms-reveal, .p-password-input::-ms-clear { display: none; @@ -83,7 +87,8 @@ const classes = { 'p-password p-component p-inputwrapper', { 'p-inputwrapper-filled': instance.filled, - 'p-inputwrapper-focus': instance.focused + 'p-inputwrapper-focus': instance.focused, + 'p-password-fluid': props.fluid } ], pcInput: 'p-password-input', diff --git a/packages/primevue/src/select/BaseSelect.vue b/packages/primevue/src/select/BaseSelect.vue index 9c44d6413..41d58fa9c 100644 --- a/packages/primevue/src/select/BaseSelect.vue +++ b/packages/primevue/src/select/BaseSelect.vue @@ -50,6 +50,10 @@ export default { type: Boolean, default: false }, + fluid: { + type: Boolean, + default: false + }, inputId: { type: String, default: null diff --git a/packages/primevue/src/select/Select.d.ts b/packages/primevue/src/select/Select.d.ts index ba505aa18..3bcd3485b 100755 --- a/packages/primevue/src/select/Select.d.ts +++ b/packages/primevue/src/select/Select.d.ts @@ -375,6 +375,11 @@ export interface SelectProps { * @defaultValue false */ showClear?: boolean | undefined; + /** + * Spans 100% width of the container when enabled. + * @defaultValue false + */ + fluid?: boolean; /** * @deprecated since v4.0. Use 'labelId' instead. * Identifier of the underlying input element. diff --git a/packages/primevue/src/select/style/SelectStyle.js b/packages/primevue/src/select/style/SelectStyle.js index 6874a5aff..31e3ab8b6 100644 --- a/packages/primevue/src/select/style/SelectStyle.js +++ b/packages/primevue/src/select/style/SelectStyle.js @@ -188,13 +188,9 @@ input.p-select-label { padding: ${dt('select.empty.message.padding')}; } -.p-fluid .p-select { +.p-select-fluid { display: flex; } - -.p-fluid .p-select-label { - width: 1%; -} `; const classes = { @@ -207,7 +203,8 @@ const classes = { 'p-focus': state.focused, 'p-inputwrapper-filled': instance.hasSelectedOption, 'p-inputwrapper-focus': state.focused || state.overlayVisible, - 'p-select-open': state.overlayVisible + 'p-select-open': state.overlayVisible, + 'p-select-fluid': props.fluid } ], label: ({ instance, props }) => [ diff --git a/packages/primevue/src/splitbutton/BaseSplitButton.vue b/packages/primevue/src/splitbutton/BaseSplitButton.vue index 15cce4e16..b764097b7 100644 --- a/packages/primevue/src/splitbutton/BaseSplitButton.vue +++ b/packages/primevue/src/splitbutton/BaseSplitButton.vue @@ -34,6 +34,10 @@ export default { type: Boolean, default: false }, + fluid: { + type: Boolean, + default: false + }, class: { type: null, default: null diff --git a/packages/primevue/src/splitbutton/SplitButton.d.ts b/packages/primevue/src/splitbutton/SplitButton.d.ts index ba7fa7b0c..5d13d0963 100755 --- a/packages/primevue/src/splitbutton/SplitButton.d.ts +++ b/packages/primevue/src/splitbutton/SplitButton.d.ts @@ -147,6 +147,11 @@ export interface SplitButtonProps { * @defaultValue false */ disabled?: boolean | undefined; + /** + * Spans 100% width of the container when enabled. + * @defaultValue false + */ + fluid?: boolean; /** * Style class of the component. */ diff --git a/packages/primevue/src/splitbutton/SplitButton.vue b/packages/primevue/src/splitbutton/SplitButton.vue index 57ffc62ff..6d1ceec29 100755 --- a/packages/primevue/src/splitbutton/SplitButton.vue +++ b/packages/primevue/src/splitbutton/SplitButton.vue @@ -10,6 +10,7 @@ :icon="icon" :outlined="outlined" :size="size" + :fluid="fluid" :aria-label="label" @click="onDefaultButtonClick" v-bind="buttonProps" diff --git a/packages/primevue/src/splitbutton/style/SplitButtonStyle.js b/packages/primevue/src/splitbutton/style/SplitButtonStyle.js index ca3809bdb..f4e2dd029 100644 --- a/packages/primevue/src/splitbutton/style/SplitButtonStyle.js +++ b/packages/primevue/src/splitbutton/style/SplitButtonStyle.js @@ -32,7 +32,7 @@ const theme = ({ dt }) => ` min-width: 100%; } -.p-fluid .p-splitbutton { +.p-splitbutton-fluid { display: flex; } @@ -56,7 +56,8 @@ const classes = { 'p-splitbutton p-component', { 'p-splitbutton-raised': props.raised, - 'p-splitbutton-rounded': props.rounded + 'p-splitbutton-rounded': props.rounded, + 'p-splitbutton-fluid': props.fluid } ], pcButton: 'p-splitbutton-button', diff --git a/packages/primevue/src/textarea/BaseTextarea.vue b/packages/primevue/src/textarea/BaseTextarea.vue index 2e82e3941..b068bfd49 100644 --- a/packages/primevue/src/textarea/BaseTextarea.vue +++ b/packages/primevue/src/textarea/BaseTextarea.vue @@ -15,6 +15,10 @@ export default { variant: { type: String, default: null + }, + fluid: { + type: Boolean, + default: false } }, style: TextareaStyle, diff --git a/packages/primevue/src/textarea/Textarea.d.ts b/packages/primevue/src/textarea/Textarea.d.ts index 611388cf3..9625a6562 100755 --- a/packages/primevue/src/textarea/Textarea.d.ts +++ b/packages/primevue/src/textarea/Textarea.d.ts @@ -107,6 +107,11 @@ export interface TextareaProps extends TextareaHTMLAttributes { * @defaultValue outlined */ variant?: 'outlined' | 'filled' | undefined; + /** + * Spans 100% width of the container when enabled. + * @defaultValue false + */ + fluid?: boolean; /** * It generates scoped CSS variables using design tokens for the component. */ diff --git a/packages/primevue/src/textarea/style/TextareaStyle.js b/packages/primevue/src/textarea/style/TextareaStyle.js index f44692f90..39ab06915 100644 --- a/packages/primevue/src/textarea/style/TextareaStyle.js +++ b/packages/primevue/src/textarea/style/TextareaStyle.js @@ -51,7 +51,7 @@ const theme = ({ dt }) => ` color: ${dt('textarea.placeholder.color')}; } -.p-fluid .p-textarea { +.p-textarea-fluid { width: 100%; } @@ -68,7 +68,8 @@ const classes = { 'p-filled': instance.filled, 'p-textarea-resizable ': props.autoResize, 'p-invalid': props.invalid, - 'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled' + 'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled', + 'p-textarea-fluid': props.fluid } ] }; diff --git a/packages/primevue/src/treeselect/BaseTreeSelect.vue b/packages/primevue/src/treeselect/BaseTreeSelect.vue index 5cceb451b..af9304b49 100644 --- a/packages/primevue/src/treeselect/BaseTreeSelect.vue +++ b/packages/primevue/src/treeselect/BaseTreeSelect.vue @@ -52,6 +52,10 @@ export default { type: Boolean, default: false }, + fluid: { + type: Boolean, + default: false + }, inputId: { type: String, default: null diff --git a/packages/primevue/src/treeselect/TreeSelect.d.ts b/packages/primevue/src/treeselect/TreeSelect.d.ts index b5a1bb87d..f0e64c50c 100644 --- a/packages/primevue/src/treeselect/TreeSelect.d.ts +++ b/packages/primevue/src/treeselect/TreeSelect.d.ts @@ -204,6 +204,11 @@ export interface TreeSelectProps { * Defines the selection mode. */ selectionMode?: 'single' | 'multiple' | 'checkbox' | undefined; + /** + * Spans 100% width of the container when enabled. + * @defaultValue false + */ + fluid?: boolean; /** * Style class of the overlay panel. */ diff --git a/packages/primevue/src/treeselect/style/TreeSelectStyle.js b/packages/primevue/src/treeselect/style/TreeSelectStyle.js index 4b562ccb3..0f8b2612a 100644 --- a/packages/primevue/src/treeselect/style/TreeSelectStyle.js +++ b/packages/primevue/src/treeselect/style/TreeSelectStyle.js @@ -113,7 +113,7 @@ const theme = ({ dt }) => ` background: transparent; } -.p-fluid .p-treeselect { +.p-treeselect-fluid { display: flex; } @@ -147,7 +147,8 @@ const classes = { 'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled', 'p-inputwrapper-filled': !instance.emptyValue, 'p-inputwrapper-focus': instance.focused || instance.overlayVisible, - 'p-treeselect-open': instance.overlayVisible + 'p-treeselect-open': instance.overlayVisible, + 'p-treeselect-fluid': props.fluid } ], labelContainer: 'p-treeselect-label-container',