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

Fixed #6000 - Remove .p-fluid and add new fluid property

pull/6011/head
tugcekucukoglu 2024-07-02 12:53:07 +03:00
parent f85d3a5c1c
commit 544fe3fbb5
41 changed files with 183 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -81,6 +81,10 @@ export default {
plain: {
type: Boolean,
default: false
},
fluid: {
type: Boolean,
default: false
}
},
style: ButtonStyle,

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

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

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

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

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

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

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

@ -232,6 +232,10 @@ export default {
return { severity: 'secondary', text: true, rounded: true };
}
},
fluid: {
type: Boolean,
default: false
},
ariaLabelledby: {
type: String,
default: null

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

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

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

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

4
packages/primevue/src/inlinemessage/style/InlineMessageStyle.js
View File

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

4
packages/primevue/src/inputchips/style/InputChipsStyle.js
View File

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

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

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

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

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

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

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

4
packages/primevue/src/inputmask/BaseInputMask.vue
View File

@ -46,6 +46,10 @@ export default {
variant: {
type: String,
default: null
},
fluid: {
type: Boolean,
default: false
}
},
style: InputMaskStyle,

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

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

1
packages/primevue/src/inputmask/InputMask.vue
View File

@ -7,6 +7,7 @@
:invalid="invalid"
:variant="variant"
:placeholder="placeholder"
:fluid="fluid"
:unstyled="unstyled"
@input="onInput"
@focus="onFocus"

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

@ -133,6 +133,10 @@ export default {
type: String,
default: null
},
fluid: {
type: Boolean,
default: false
},
inputId: {
type: String,
default: null

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

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

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

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

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

@ -18,6 +18,10 @@ export default {
variant: {
type: String,
default: null
},
fluid: {
type: Boolean,
default: false
}
},
style: InputTextStyle,

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

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

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

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

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

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

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

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

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

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

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

@ -79,6 +79,10 @@ export default {
type: Boolean,
default: false
},
fluid: {
type: Boolean,
default: false
},
inputId: {
type: String,
default: null

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

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

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

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

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

@ -50,6 +50,10 @@ export default {
type: Boolean,
default: false
},
fluid: {
type: Boolean,
default: false
},
inputId: {
type: String,
default: null

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

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

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

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

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

@ -34,6 +34,10 @@ export default {
type: Boolean,
default: false
},
fluid: {
type: Boolean,
default: false
},
class: {
type: null,
default: null

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

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

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

@ -10,6 +10,7 @@
:icon="icon"
:outlined="outlined"
:size="size"
:fluid="fluid"
:aria-label="label"
@click="onDefaultButtonClick"
v-bind="buttonProps"

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

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

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

@ -15,6 +15,10 @@ export default {
variant: {
type: String,
default: null
},
fluid: {
type: Boolean,
default: false
}
},
style: TextareaStyle,

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

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

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

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

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

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

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

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

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

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