Fixed #6122 - New Fluid component

packages/metadata/src/components/index.ts

@@ -11,6 +11,7 @@ export const form: MetaType[] = toMeta([
     'Dropdown',
     'Editor',
     'FloatLabel',
+    'Fluid',
     'IconField',
     'InputChips',
     'InputGroup',

packages/primevue/src/autocomplete/AutoComplete.d.ts

@@ -503,9 +503,9 @@ export interface AutoCompleteProps {
     tabindex?: number | string | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * Defines a string value that labels an interactive element.
      */

packages/primevue/src/autocomplete/AutoComplete.vue

@@ -10,6 +10,7 @@
             :value="inputValue"
             :placeholder="placeholder"
             :tabindex="!disabled ? tabindex : -1"
+            :fluid="hasFluid"
             :disabled="disabled"
             :invalid="invalid"
             :variant="variant"
@@ -180,10 +181,10 @@
 </template>
 
 <script>
-import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
+import { absolutePosition, addStyle, findSingle, focus, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
-import { focus, addStyle, relativePosition, getOuterWidth, absolutePosition, isTouchDevice, findSingle } from '@primeuix/utils/dom';
+import { equals, findLastIndex, isEmpty, isNotEmpty, resolveFieldData } from '@primeuix/utils/object';
-import { resolveFieldData, isEmpty, isNotEmpty, equals, findLastIndex } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
+import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import SpinnerIcon from '@primevue/icons/spinner';
 import Chip from 'primevue/chip';
@@ -199,6 +200,9 @@ export default {
     extends: BaseAutoComplete,
     inheritAttrs: false,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'item-select', 'item-unselect', 'option-select', 'option-unselect', 'dropdown-click', 'clear', 'complete', 'before-show', 'before-hide', 'show', 'hide'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     outsideClickListener: null,
     resizeListener: null,
     scrollHandler: null,
@@ -973,6 +977,9 @@ export default {
         },
         panelId() {
             return this.id + '_panel';
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {

packages/primevue/src/autocomplete/BaseAutoComplete.vue

@@ -181,7 +181,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         }
     },
     style: AutoCompleteStyle,

packages/primevue/src/autocomplete/style/AutoCompleteStyle.js

@@ -252,7 +252,7 @@ const classes = {
             'p-inputwrapper-filled': props.modelValue || isNotEmpty(instance.inputValue),
             'p-inputwrapper-focus': instance.focused,
             'p-autocomplete-open': instance.overlayVisible,
-            'p-autocomplete-fluid': props.fluid
+            'p-autocomplete-fluid': instance.hasFluid
         }
     ],
     pcInput: 'p-autocomplete-input',

packages/primevue/src/button/BaseButton.vue

@@ -84,7 +84,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         }
     },
     style: ButtonStyle,

packages/primevue/src/button/Button.d.ts

@@ -179,9 +179,9 @@ export interface ButtonProps extends ButtonHTMLAttributes {
     plain?: boolean | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */

packages/primevue/src/button/Button.vue

@@ -16,6 +16,7 @@
 </template>
 
 <script>
+import { isEmpty } from '@primeuix/utils/object';
 import SpinnerIcon from '@primevue/icons/spinner';
 import Badge from 'primevue/badge';
 import Ripple from 'primevue/ripple';
@@ -26,6 +27,9 @@ export default {
     name: 'Button',
     extends: BaseButton,
     inheritAttrs: false,
+    inject: {
+        $pcFluid: { default: null }
+    },
     methods: {
         getPTOptions(key) {
             const _ptm = key === 'root' ? this.ptmi : this.ptm;
@@ -60,6 +64,9 @@ export default {
                 'data-p-disabled': this.disabled,
                 'data-p-severity': this.severity
             };
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {

packages/primevue/src/button/style/ButtonStyle.js

@@ -616,7 +616,7 @@ const classes = {
             'p-button-sm': props.size === 'small',
             'p-button-lg': props.size === 'large',
             'p-button-plain': props.plain,
-            'p-button-fluid': props.fluid
+            'p-button-fluid': instance.hasFluid
         }
     ],
     loadingIcon: 'p-button-loading-icon',

packages/primevue/src/cascadeselect/BaseCascadeSelect.vue

@@ -134,7 +134,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         }
     },
     style: CascadeSelectStyle,

packages/primevue/src/cascadeselect/CascadeSelect.d.ts

@@ -421,9 +421,9 @@ export interface CascadeSelectProps {
     tabindex?: number | string | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */

packages/primevue/src/cascadeselect/CascadeSelect.vue

@@ -103,6 +103,9 @@ export default {
     extends: BaseCascadeSelect,
     inheritAttrs: false,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'click', 'group-change', 'before-show', 'before-hide', 'hide', 'show'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     outsideClickListener: null,
     scrollHandler: null,
     resizeListener: null,
@@ -774,6 +777,9 @@ export default {
         },
         focusedOptionId() {
             return this.focusedOptionInfo.index !== -1 ? `${this.id}${isNotEmpty(this.focusedOptionInfo.parentKey) ? '_' + this.focusedOptionInfo.parentKey : ''}_${this.focusedOptionInfo.index}` : null;
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {

packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js

@@ -201,7 +201,7 @@ const classes = {
             'p-inputwrapper-filled': props.modelValue,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
             'p-cascadeselect-open': instance.overlayVisible,
-            'p-cascadeselect-fluid': props.fluid
+            'p-cascadeselect-fluid': instance.hasFluid
         }
     ],
     label: ({ instance, props }) => [

packages/primevue/src/datepicker/BaseDatePicker.vue

@@ -234,7 +234,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         },
         ariaLabelledby: {
             type: String,

packages/primevue/src/datepicker/DatePicker.d.ts

@@ -786,9 +786,9 @@ export interface DatePickerProps {
     timepickerButtonProps?: object | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */

packages/primevue/src/datepicker/DatePicker.vue

@@ -12,6 +12,7 @@
             :name="name"
             :invalid="invalid"
             :variant="variant"
+            :fluid="fluid"
             :unstyled="unstyled"
             autocomplete="off"
             aria-autocomplete="none"
@@ -531,7 +532,7 @@
 
 <script>
 import { absolutePosition, addStyle, find, findSingle, getAttribute, getFocusableElements, getIndex, getOuterWidth, isTouchDevice, relativePosition, setAttribute } from '@primeuix/utils/dom';
-import { localeComparator } from '@primeuix/utils/object';
+import { isEmpty, localeComparator } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
 import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
 import CalendarIcon from '@primevue/icons/calendar';
@@ -551,6 +552,9 @@ export default {
     extends: BaseDatePicker,
     inheritAttrs: false,
     emits: ['show', 'hide', 'input', 'month-change', 'year-change', 'date-select', 'update:modelValue', 'today-click', 'clear-click', 'focus', 'blur', 'keydown'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     navigationState: null,
     timePickerChange: false,
     scrollHandler: null,
@@ -2943,6 +2947,9 @@ export default {
         },
         panelId() {
             return this.d_id + '_panel';
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {

packages/primevue/src/datepicker/style/DatePickerStyle.js

@@ -370,14 +370,14 @@ const inlineStyles = {
 };
 
 const classes = {
-    root: ({ props, state }) => [
+    root: ({ instance, props, state }) => [
         '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
+            'p-focus': state.focused || state.overlayVisible,
+            'p-datepicker-fluid': instance.hasFluid
         }
     ],
     pcInput: 'p-datepicker-input',

packages/primevue/src/fluid/BaseFluid.vue

@@ -0,0 +1,16 @@
+<script>
+import BaseComponent from '@primevue/core/basecomponent';
+import FluidStyle from 'primevue/fluid/style';
+
+export default {
+    name: 'BaseFluid',
+    extends: BaseComponent,
+    style: FluidStyle,
+    provide() {
+        return {
+            $pcFluid: this,
+            $parentInstance: this
+        };
+    }
+};
+</script>

packages/primevue/src/fluid/Fluid.d.ts

@@ -0,0 +1,130 @@
+/**
+ *
+ * Fluid spans 100% width of the container.
+ *
+ * [Live Demo](https://www.primevue.org/fluid/)
+ *
+ * @module fluid
+ *
+ */
+import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '@primevue/core';
+import type { ComponentHooks } from '@primevue/core/basecomponent';
+import type { PassThroughOptions } from 'primevue/passthrough';
+import { TransitionProps, VNode } from 'vue';
+
+export declare type FluidPassThroughOptionType = FluidPassThroughAttributes | ((options: FluidPassThroughMethodOptions) => FluidPassThroughAttributes | string) | string | null | undefined;
+
+export declare type FluidPassThroughTransitionType = TransitionProps | ((options: FluidPassThroughMethodOptions) => TransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface FluidPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: FluidProps;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link FluidProps.pt}
+ */
+export interface FluidPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: FluidPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface FluidPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in Fluid component.
+ */
+export interface FluidProps {
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {FluidPassThroughOptions}
+     */
+    pt?: PassThrough<FluidPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines valid slots in Fluid component.
+ */
+export interface FluidSlots {
+    /**
+     * Default content slot.
+     */
+    default: () => VNode[];
+}
+
+/**
+ * Defines valid emits in Fluid component.
+ */
+export interface FluidEmitsOptions {}
+
+export declare type FluidEmits = EmitFn<FluidEmitsOptions>;
+
+/**
+ * **PrimeVue - Fluid**
+ *
+ * _Fluid spans 100% width of the container._
+ *
+ * [Live Demo](https://www.primevue.org/fluid/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare const Fluid: DefineComponent<FluidProps, FluidSlots, FluidEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        Fluid: GlobalComponentConstructor<FluidProps, FluidSlots, FluidEmits>;
+    }
+}
+
+export default Fluid;

packages/primevue/src/fluid/Fluid.vue

@@ -0,0 +1,15 @@
+<template>
+    <div :class="cx('root')" v-bind="ptmi('root')">
+        <slot />
+    </div>
+</template>
+
+<script>
+import BaseFluid from './BaseFluid.vue';
+
+export default {
+    name: 'Fluid',
+    extends: BaseFluid,
+    inheritAttrs: false
+};
+</script>

packages/primevue/src/fluid/package.json

@@ -0,0 +1,11 @@
+{
+    "main": "./Fluid.vue",
+    "module": "./Fluid.vue",
+    "types": "./Fluid.d.ts",
+    "browser": {
+        "./sfc": "./Fluid.vue"
+    },
+    "sideEffects": [
+        "*.vue"
+    ]
+}

packages/primevue/src/fluid/style/FluidStyle.d.ts

@@ -0,0 +1,19 @@
+/**
+ *
+ * Fluid spans 100% width of the container.
+ *
+ * [Live Demo](https://www.primevue.org/fluid/)
+ *
+ * @module fluidstyle
+ *
+ */
+import type { BaseStyle } from '@primevue/core/base/style';
+
+export enum FluidClasses {
+    /**
+     * Class name of the root element
+     */
+    root = 'p-fluid'
+}
+
+export interface FluidStyle extends BaseStyle {}

packages/primevue/src/fluid/style/FluidStyle.js

@@ -0,0 +1,10 @@
+import BaseStyle from '@primevue/core/base/style';
+
+const classes = {
+    root: 'p-fluid'
+};
+
+export default BaseStyle.extend({
+    name: 'fluid',
+    classes
+});

packages/primevue/src/fluid/style/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./FluidStyle.js",
+    "module": "./FluidStyle.js",
+    "types": "./FluidStyle.d.ts",
+    "sideEffects": false
+}

packages/primevue/src/inputgroup/BaseInputGroup.vue

@@ -8,7 +8,7 @@ export default {
     props: {
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         }
     },
     style: InputGroupStyle,

packages/primevue/src/inputgroup/InputGroup.d.ts

@@ -69,9 +69,9 @@ export interface InputGroupPassThroughAttributes {
 export interface InputGroupProps {
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */

packages/primevue/src/inputgroup/InputGroup.vue

@@ -5,11 +5,20 @@
 </template>
 
 <script>
+import { isEmpty } from '@primeuix/utils/object';
 import BaseInputGroup from './BaseInputGroup.vue';
 
 export default {
     name: 'InputGroup',
     extends: BaseInputGroup,
-    inheritAttrs: false
+    inheritAttrs: false,
+    inject: {
+        $pcFluid: { default: null }
+    },
+    computed: {
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
+        }
+    }
 };
 </script>

packages/primevue/src/inputgroup/style/InputGroupStyle.js

@@ -102,10 +102,10 @@ const theme = ({ dt }) => `
 `;
 
 const classes = {
-    root: ({ props }) => [
+    root: ({ instance }) => [
         'p-inputgroup',
         {
-            'p-inputgroup-fluid': props.fluid
+            'p-inputgroup-fluid': instance.hasFluid
         }
     ]
 };

packages/primevue/src/inputmask/InputMask.d.ts

@@ -151,9 +151,9 @@ export interface InputMaskProps {
     variant?: 'outlined' | 'filled' | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false

packages/primevue/src/inputnumber/BaseInputNumber.vue

@@ -135,7 +135,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         },
         inputId: {
             type: String,

packages/primevue/src/inputnumber/InputNumber.d.ts

@@ -336,9 +336,9 @@ export interface InputNumberProps {
     placeholder?: string | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * 	Identifier of the focus input to match a label defined for the chips.
      */

packages/primevue/src/inputnumber/InputNumber.vue

@@ -72,8 +72,8 @@
 </template>
 
 <script>
-import { getSelection, clearSelection } from '@primeuix/utils/dom';
+import { clearSelection, getSelection } from '@primeuix/utils/dom';
-import { isNotEmpty } from '@primeuix/utils/object';
+import { isEmpty, isNotEmpty } from '@primeuix/utils/object';
 import AngleDownIcon from '@primevue/icons/angledown';
 import AngleUpIcon from '@primevue/icons/angleup';
 import InputText from 'primevue/inputtext';
@@ -84,6 +84,9 @@ export default {
     extends: BaseInputNumber,
     inheritAttrs: false,
     emits: ['update:modelValue', 'input', 'focus', 'blur'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     numberFormat: null,
     _numeral: null,
     _decimal: null,
@@ -977,6 +980,9 @@ export default {
         },
         getFormatter() {
             return this.numberFormat;
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {

packages/primevue/src/inputnumber/style/InputNumberStyle.js

@@ -153,7 +153,7 @@ const classes = {
             '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-fluid': instance.fluid
+            'p-inputnumber-fluid': instance.hasFluid
         }
     ],
     pcInput: 'p-inputnumber-input',

packages/primevue/src/inputtext/BaseInputText.vue

@@ -21,7 +21,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         }
     },
     style: InputTextStyle,

packages/primevue/src/inputtext/InputText.d.ts

@@ -103,9 +103,9 @@ export interface InputTextProps extends InputHTMLAttributes {
     variant?: 'outlined' | 'filled' | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */

packages/primevue/src/inputtext/InputText.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script>
+import { isEmpty } from '@primeuix/utils/object';
 import BaseInputText from './BaseInputText.vue';
 
 export default {
@@ -10,6 +11,9 @@ export default {
     extends: BaseInputText,
     inheritAttrs: false,
     emits: ['update:modelValue'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     methods: {
         getPTOptions(key) {
             const _ptm = key === 'root' ? this.ptmi : this.ptm;
@@ -28,6 +32,9 @@ export default {
     computed: {
         filled() {
             return this.modelValue != null && this.modelValue.toString().length > 0;
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     }
 };

packages/primevue/src/inputtext/style/InputTextStyle.js

@@ -75,7 +75,7 @@ const classes = {
             '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-inputtext-fluid': props.fluid
+            'p-inputtext-fluid': instance.hasFluid
         }
     ]
 };

packages/primevue/src/multiselect/BaseMultiSelect.vue

@@ -32,7 +32,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         },
         inputId: {
             type: String,

packages/primevue/src/multiselect/MultiSelect.d.ts

@@ -370,9 +370,9 @@ export interface MultiSelectProps {
     variant?: 'outlined' | 'filled' | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * Identifier of the underlying input element.
      */

packages/primevue/src/multiselect/MultiSelect.vue

@@ -206,7 +206,7 @@
 
 <script>
 import { absolutePosition, addStyle, findSingle, focus, getFirstFocusableElement, getFocusableElements, getLastFocusableElement, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
-import { equals, findLastIndex, isNotEmpty, isPrintableCharacter, resolveFieldData } from '@primeuix/utils/object';
+import { equals, findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, resolveFieldData } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
 import { FilterService } from '@primevue/core/api';
 import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
@@ -231,6 +231,9 @@ export default {
     extends: BaseMultiSelect,
     inheritAttrs: false,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter', 'selectall-change'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     outsideClickListener: null,
     scrollHandler: null,
     resizeListener: null,
@@ -1111,6 +1114,9 @@ export default {
         },
         virtualScrollerDisabled() {
             return !this.virtualScrollerOptions;
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     directives: {

packages/primevue/src/multiselect/style/MultiSelectStyle.js

@@ -212,7 +212,7 @@ const classes = {
             'p-inputwrapper-filled': props.modelValue && props.modelValue.length,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
             'p-multiselect-open': instance.overlayVisible,
-            'p-multiselect-fluid': props.fluid
+            'p-multiselect-fluid': instance.hasFluid
         }
     ],
     labelContainer: 'p-multiselect-label-container',

packages/primevue/src/password/BasePassword.vue

@@ -81,7 +81,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         },
         inputId: {
             type: String,

packages/primevue/src/password/Password.d.ts

@@ -249,9 +249,9 @@ export interface PasswordProps extends InputHTMLAttributes {
     required?: boolean | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * Identifier of the underlying input element.
      */

packages/primevue/src/password/Password.vue

@@ -66,6 +66,7 @@
 
 <script>
 import { absolutePosition, addStyle, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
+import { isEmpty } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
 import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
 import EyeIcon from '@primevue/icons/eye';
@@ -80,6 +81,9 @@ export default {
     extends: BasePassword,
     inheritAttrs: false,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'invalid'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     data() {
         return {
             id: this.$attrs.id,
@@ -319,6 +323,9 @@ export default {
         },
         overlayUniqueId() {
             return this.id + '_overlay';
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {

packages/primevue/src/password/style/PasswordStyle.js

@@ -83,12 +83,12 @@ const inlineStyles = {
 };
 
 const classes = {
-    root: ({ instance, props }) => [
+    root: ({ instance }) => [
         'p-password p-component p-inputwrapper',
         {
             'p-inputwrapper-filled': instance.filled,
             'p-inputwrapper-focus': instance.focused,
-            'p-password-fluid': props.fluid
+            'p-password-fluid': instance.hasFluid
         }
     ],
     pcInput: 'p-password-input',

packages/primevue/src/select/BaseSelect.vue

@@ -52,7 +52,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         },
         inputId: {
             type: String,

packages/primevue/src/select/Select.d.ts

@@ -377,9 +377,9 @@ export interface SelectProps {
     showClear?: boolean | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * @deprecated since v4.0. Use 'labelId' instead.
      * Identifier of the underlying input element.

packages/primevue/src/select/Select.vue

@@ -191,7 +191,7 @@
 
 <script>
 import { absolutePosition, addStyle, findSingle, focus, getFirstFocusableElement, getFocusableElements, getLastFocusableElement, getOuterWidth, isAndroid, isTouchDevice, isVisible, relativePosition } from '@primeuix/utils/dom';
-import { equals, findLastIndex, isNotEmpty, isPrintableCharacter, resolveFieldData } from '@primeuix/utils/object';
+import { equals, findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, resolveFieldData } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
 import { FilterService } from '@primevue/core/api';
 import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
@@ -215,6 +215,9 @@ export default {
     extends: BaseSelect,
     inheritAttrs: false,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     outsideClickListener: null,
     scrollHandler: null,
     resizeListener: null,
@@ -995,6 +998,9 @@ export default {
         },
         virtualScrollerDisabled() {
             return !this.virtualScrollerOptions;
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     directives: {

packages/primevue/src/select/style/SelectStyle.js

@@ -204,7 +204,7 @@ const classes = {
             'p-inputwrapper-filled': instance.hasSelectedOption,
             'p-inputwrapper-focus': state.focused || state.overlayVisible,
             'p-select-open': state.overlayVisible,
-            'p-select-fluid': props.fluid
+            'p-select-fluid': instance.hasFluid
         }
     ],
     label: ({ instance, props }) => [

packages/primevue/src/splitbutton/BaseSplitButton.vue

@@ -36,7 +36,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         },
         class: {
             type: null,

packages/primevue/src/splitbutton/SplitButton.d.ts

@@ -149,9 +149,9 @@ export interface SplitButtonProps {
     disabled?: boolean | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * Style class of the component.
      */

packages/primevue/src/splitbutton/SplitButton.vue

@@ -63,6 +63,7 @@
 </template>
 
 <script>
+import { isEmpty } from '@primeuix/utils/object';
 import { UniqueComponentId } from '@primevue/core/utils';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import Button from 'primevue/button';
@@ -74,6 +75,9 @@ export default {
     extends: BaseSplitButton,
     inheritAttrs: false,
     emits: ['click'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     data() {
         return {
             id: this.$attrs.id,
@@ -118,6 +122,9 @@ export default {
     computed: {
         containerClass() {
             return [this.cx('root'), this.class];
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {

packages/primevue/src/splitbutton/style/SplitButtonStyle.js

@@ -52,12 +52,12 @@ const theme = ({ dt }) => `
 `;
 
 const classes = {
-    root: ({ props }) => [
+    root: ({ instance, props }) => [
         'p-splitbutton p-component',
         {
             'p-splitbutton-raised': props.raised,
             'p-splitbutton-rounded': props.rounded,
-            'p-splitbutton-fluid': props.fluid
+            'p-splitbutton-fluid': instance.hasFluid
         }
     ],
     pcButton: 'p-splitbutton-button',

packages/primevue/src/textarea/BaseTextarea.vue

@@ -18,7 +18,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         }
     },
     style: TextareaStyle,

packages/primevue/src/textarea/Textarea.d.ts

@@ -109,9 +109,9 @@ export interface TextareaProps extends TextareaHTMLAttributes {
     variant?: 'outlined' | 'filled' | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */

packages/primevue/src/textarea/Textarea.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script>
+import { isEmpty } from '@primeuix/utils/object';
 import BaseTextarea from './BaseTextarea.vue';
 
 export default {
@@ -10,6 +11,9 @@ export default {
     extends: BaseTextarea,
     inheritAttrs: false,
     emits: ['update:modelValue'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     mounted() {
         if (this.$el.offsetParent && this.autoResize) {
             this.resize();
@@ -50,6 +54,9 @@ export default {
                     disabled: this.$attrs.disabled || this.$attrs.disabled === ''
                 }
             };
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     }
 };

packages/primevue/src/textarea/style/TextareaStyle.js

@@ -69,7 +69,7 @@ const classes = {
             '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-textarea-fluid': props.fluid
+            'p-textarea-fluid': instance.hasFluid
         }
     ]
 };

packages/primevue/src/treeselect/BaseTreeSelect.vue

@@ -54,7 +54,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         },
         inputId: {
             type: String,

packages/primevue/src/treeselect/TreeSelect.d.ts

@@ -206,9 +206,9 @@ export interface TreeSelectProps {
     selectionMode?: 'single' | 'multiple' | 'checkbox' | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * Style class of the overlay panel.
      */

packages/primevue/src/treeselect/TreeSelect.vue

@@ -111,9 +111,10 @@
 </template>
 
 <script>
-import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
+import { absolutePosition, addStyle, find, findSingle, focus, getFirstFocusableElement, getFocusableElements, getLastFocusableElement, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
-import { focus, getFirstFocusableElement, getLastFocusableElement, find, findSingle, getFocusableElements, addStyle, relativePosition, getOuterWidth, absolutePosition, isTouchDevice } from '@primeuix/utils/dom';
+import { isEmpty } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
+import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import Chip from 'primevue/chip';
 import OverlayEventBus from 'primevue/overlayeventbus';
@@ -127,6 +128,9 @@ export default {
     extends: BaseTreeSelect,
     inheritAttrs: false,
     emits: ['update:modelValue', 'before-show', 'before-hide', 'change', 'show', 'hide', 'node-select', 'node-unselect', 'node-expand', 'node-collapse', 'focus', 'blur'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     data() {
         return {
             id: this.$attrs.id,
@@ -502,6 +506,9 @@ export default {
         },
         listId() {
             return this.id + '_list';
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {

packages/primevue/src/treeselect/style/TreeSelectStyle.js

@@ -148,7 +148,7 @@ const classes = {
             'p-inputwrapper-filled': !instance.emptyValue,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
             'p-treeselect-open': instance.overlayVisible,
-            'p-treeselect-fluid': props.fluid
+            'p-treeselect-fluid': instance.hasFluid
         }
     ],
     labelContainer: 'p-treeselect-label-container',