vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #6122 - New Fluid component

pull/5861/head^2
tugcekucukoglu 2024-07-26 14:14:05 +03:00
parent d66b0f37c7
commit 1d79237d11
61 changed files with 367 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/metadata/src/components/index.ts
View File

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

4
packages/primevue/src/autocomplete/AutoComplete.d.ts vendored
View File

@ -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.
*/

13
packages/primevue/src/autocomplete/AutoComplete.vue
View File

@ -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 { focus, addStyle, relativePosition, getOuterWidth, absolutePosition, isTouchDevice, findSingle } from '@primeuix/utils/dom';
import { resolveFieldData, isEmpty, isNotEmpty, equals, findLastIndex } from '@primeuix/utils/object';
import { absolutePosition, addStyle, findSingle, focus, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
import { equals, findLastIndex, isEmpty, isNotEmpty, resolveFieldData } 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: {

2
packages/primevue/src/autocomplete/BaseAutoComplete.vue
View File

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

2
packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
View File

@ -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',

2
packages/primevue/src/button/BaseButton.vue
View File

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

4
packages/primevue/src/button/Button.d.ts vendored
View File

@ -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.
*/

7
packages/primevue/src/button/Button.vue
View File

@ -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: {

2
packages/primevue/src/button/style/ButtonStyle.js
View File

@ -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',

2
packages/primevue/src/cascadeselect/BaseCascadeSelect.vue
View File

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

4
packages/primevue/src/cascadeselect/CascadeSelect.d.ts vendored
View File

@ -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.
*/

6
packages/primevue/src/cascadeselect/CascadeSelect.vue
View File

@ -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: {

2
packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
View File

@ -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 }) => [

2
packages/primevue/src/datepicker/BaseDatePicker.vue
View File

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

4
packages/primevue/src/datepicker/DatePicker.d.ts vendored
View File

@ -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.
*/

9
packages/primevue/src/datepicker/DatePicker.vue
View File

@ -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: {

6
packages/primevue/src/datepicker/style/DatePickerStyle.js
View File

@ -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',

16
packages/primevue/src/fluid/BaseFluid.vue Normal file
View File

@ -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>

130
packages/primevue/src/fluid/Fluid.d.ts vendored Normal file
View File

@ -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;

15
packages/primevue/src/fluid/Fluid.vue Normal file
View File

@ -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>

11
packages/primevue/src/fluid/package.json Normal file
View File

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

19
packages/primevue/src/fluid/style/FluidStyle.d.ts vendored Normal file
View File

@ -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 {}

10
packages/primevue/src/fluid/style/FluidStyle.js Normal file
View File

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

6
packages/primevue/src/fluid/style/package.json Normal file
View File

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

2
packages/primevue/src/inputgroup/BaseInputGroup.vue
View File

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

4
packages/primevue/src/inputgroup/InputGroup.d.ts vendored
View File

@ -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.
*/

11
packages/primevue/src/inputgroup/InputGroup.vue
View File

@ -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>

4
packages/primevue/src/inputgroup/style/InputGroupStyle.js
View File

@ -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
}
]
};

4
packages/primevue/src/inputmask/InputMask.d.ts vendored
View File

@ -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

2
packages/primevue/src/inputnumber/BaseInputNumber.vue
View File

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

4
packages/primevue/src/inputnumber/InputNumber.d.ts vendored
View File

@ -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.
*/

10
packages/primevue/src/inputnumber/InputNumber.vue
View File

@ -72,8 +72,8 @@
</template>
<script>
import { getSelection, clearSelection } from '@primeuix/utils/dom';
import { isNotEmpty } from '@primeuix/utils/object';
import { clearSelection, getSelection } from '@primeuix/utils/dom';
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: {

2
packages/primevue/src/inputnumber/style/InputNumberStyle.js
View File

@ -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',

2
packages/primevue/src/inputtext/BaseInputText.vue
View File

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

4
packages/primevue/src/inputtext/InputText.d.ts vendored
View File

@ -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.
*/

7
packages/primevue/src/inputtext/InputText.vue
View File

@ -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;
}
}
};

2
packages/primevue/src/inputtext/style/InputTextStyle.js
View File

@ -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
}
]
};

2
packages/primevue/src/multiselect/BaseMultiSelect.vue
View File

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

4
packages/primevue/src/multiselect/MultiSelect.d.ts vendored
View File

@ -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.
*/

8
packages/primevue/src/multiselect/MultiSelect.vue
View File

@ -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: {

2
packages/primevue/src/multiselect/style/MultiSelectStyle.js
View File

@ -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',

2
packages/primevue/src/password/BasePassword.vue
View File

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

4
packages/primevue/src/password/Password.d.ts vendored
View File

@ -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.
*/

7
packages/primevue/src/password/Password.vue
View File

@ -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: {

4
packages/primevue/src/password/style/PasswordStyle.js
View File

@ -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',

2
packages/primevue/src/select/BaseSelect.vue
View File

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

4
packages/primevue/src/select/Select.d.ts vendored
View File

@ -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.

8
packages/primevue/src/select/Select.vue
View File

@ -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: {

2
packages/primevue/src/select/style/SelectStyle.js
View File

@ -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 }) => [

2
packages/primevue/src/splitbutton/BaseSplitButton.vue
View File

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

4
packages/primevue/src/splitbutton/SplitButton.d.ts vendored
View File

@ -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.
*/

7
packages/primevue/src/splitbutton/SplitButton.vue
View File

@ -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: {

4
packages/primevue/src/splitbutton/style/SplitButtonStyle.js
View File

@ -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',

2
packages/primevue/src/textarea/BaseTextarea.vue
View File

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

4
packages/primevue/src/textarea/Textarea.d.ts vendored
View File

@ -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.
*/

7
packages/primevue/src/textarea/Textarea.vue
View File

@ -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;
}
}
};

2
packages/primevue/src/textarea/style/TextareaStyle.js
View File

@ -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
}
]
};

2
packages/primevue/src/treeselect/BaseTreeSelect.vue
View File

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

4
packages/primevue/src/treeselect/TreeSelect.d.ts vendored
View File

@ -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.
*/

11
packages/primevue/src/treeselect/TreeSelect.vue
View File

@ -111,9 +111,10 @@
</template>
<script>
import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import { focus, getFirstFocusableElement, getLastFocusableElement, find, findSingle, getFocusableElements, addStyle, relativePosition, getOuterWidth, absolutePosition, isTouchDevice } from '@primeuix/utils/dom';
import { absolutePosition, addStyle, find, findSingle, focus, getFirstFocusableElement, getFocusableElements, getLastFocusableElement, 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 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: {

2
packages/primevue/src/treeselect/style/TreeSelectStyle.js
View File

@ -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',