From ff22cfe15e618d4f5682e6d8d2bcfb36a36dde47 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Wed, 31 Jan 2024 11:02:53 +0300 Subject: [PATCH] Fixed #5176 - variant added --- components/lib/autocomplete/AutoComplete.d.ts | 5 +++++ components/lib/autocomplete/BaseAutoComplete.vue | 4 ++++ components/lib/autocomplete/style/AutoCompleteStyle.js | 5 +++-- components/lib/calendar/BaseCalendar.vue | 4 ++++ components/lib/calendar/Calendar.d.ts | 5 +++++ components/lib/calendar/style/CalendarStyle.js | 3 ++- components/lib/cascadeselect/BaseCascadeSelect.vue | 4 ++++ components/lib/cascadeselect/CascadeSelect.d.ts | 5 +++++ .../lib/cascadeselect/style/CascadeSelectStyle.js | 5 +++-- components/lib/checkbox/BaseCheckbox.vue | 4 ++++ components/lib/checkbox/Checkbox.d.ts | 5 +++++ components/lib/checkbox/style/CheckboxStyle.js | 3 ++- components/lib/chips/BaseChips.vue | 4 ++++ components/lib/chips/Chips.d.ts | 5 +++++ components/lib/chips/style/ChipsStyle.js | 1 + components/lib/dropdown/BaseDropdown.vue | 4 ++++ components/lib/dropdown/Dropdown.d.ts | 5 +++++ components/lib/dropdown/style/DropdownStyle.js | 5 +++-- components/lib/inputmask/BaseInputMask.vue | 8 ++++++++ components/lib/inputmask/InputMask.d.ts | 10 ++++++++++ components/lib/inputmask/style/InputMaskStyle.js | 6 ++++-- components/lib/inputnumber/BaseInputNumber.vue | 4 ++++ components/lib/inputnumber/InputNumber.d.ts | 5 +++++ components/lib/inputnumber/style/InputNumberStyle.js | 3 ++- components/lib/inputtext/BaseInputText.vue | 4 ++++ components/lib/inputtext/InputText.d.ts | 5 +++++ components/lib/inputtext/style/InputTextStyle.js | 3 ++- components/lib/multiselect/BaseMultiSelect.vue | 4 ++++ components/lib/multiselect/MultiSelect.d.ts | 5 +++++ components/lib/multiselect/style/MultiSelectStyle.js | 5 +++-- components/lib/password/BasePassword.vue | 4 ++++ components/lib/password/Password.d.ts | 5 +++++ components/lib/password/style/PasswordStyle.js | 7 ++++--- components/lib/radiobutton/BaseRadioButton.vue | 4 ++++ components/lib/radiobutton/RadioButton.d.ts | 5 +++++ components/lib/radiobutton/style/RadioButtonStyle.js | 3 ++- components/lib/textarea/BaseTextarea.vue | 4 ++++ components/lib/textarea/Textarea.d.ts | 5 +++++ components/lib/textarea/style/TextareaStyle.js | 3 ++- components/lib/treeselect/BaseTreeSelect.vue | 4 ++++ components/lib/treeselect/TreeSelect.d.ts | 5 +++++ components/lib/treeselect/style/TreeSelectStyle.js | 5 +++-- .../lib/tristatecheckbox/BaseTriStateCheckbox.vue | 4 ++++ components/lib/tristatecheckbox/TriStateCheckbox.d.ts | 5 +++++ .../tristatecheckbox/style/TriStateCheckboxStyle.js | 3 ++- 45 files changed, 182 insertions(+), 22 deletions(-) diff --git a/components/lib/autocomplete/AutoComplete.d.ts b/components/lib/autocomplete/AutoComplete.d.ts index d8d691efd6..ea0b357ec3 100755 --- a/components/lib/autocomplete/AutoComplete.d.ts +++ b/components/lib/autocomplete/AutoComplete.d.ts @@ -360,6 +360,11 @@ export interface AutoCompleteProps { * @defaultValue false */ disabled?: boolean | undefined; + /** + * Specifies the input variant of the component. + * @defaultValue outlined + */ + variant?: 'outlined' | 'filled' | undefined; /** * A property to uniquely identify an option. */ diff --git a/components/lib/autocomplete/BaseAutoComplete.vue b/components/lib/autocomplete/BaseAutoComplete.vue index c2ea6414a2..376709671e 100644 --- a/components/lib/autocomplete/BaseAutoComplete.vue +++ b/components/lib/autocomplete/BaseAutoComplete.vue @@ -45,6 +45,10 @@ export default { type: Boolean, default: false }, + variant: { + type: String, + default: 'outlined' + }, invalid: { type: Boolean, default: false diff --git a/components/lib/autocomplete/style/AutoCompleteStyle.js b/components/lib/autocomplete/style/AutoCompleteStyle.js index d92d31ef29..9c1cb7f200 100644 --- a/components/lib/autocomplete/style/AutoCompleteStyle.js +++ b/components/lib/autocomplete/style/AutoCompleteStyle.js @@ -111,6 +111,7 @@ const classes = { { 'p-disabled': props.disabled, 'p-invalid': props.invalid, + 'p-variant': props.variant === 'filled', 'p-focus': instance.focused, 'p-autocomplete-dd': props.dropdown, 'p-autocomplete-multiple': props.multiple, @@ -127,10 +128,10 @@ const classes = { inputToken: 'p-autocomplete-input-token', loadingIcon: 'p-autocomplete-loader', dropdownButton: 'p-autocomplete-dropdown', - panel: ({ instance }) => [ + panel: ({ props, instance }) => [ 'p-autocomplete-panel p-component', { - 'p-input-filled': instance.$primevue.config.inputStyle === 'filled', + 'p-input-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled', 'p-ripple-disabled': instance.$primevue.config.ripple === false } ], diff --git a/components/lib/calendar/BaseCalendar.vue b/components/lib/calendar/BaseCalendar.vue index ac1b8d90b9..668a3ef286 100644 --- a/components/lib/calendar/BaseCalendar.vue +++ b/components/lib/calendar/BaseCalendar.vue @@ -176,6 +176,10 @@ export default { type: [String, Object], default: 'body' }, + variant: { + type: String, + default: 'outlined' + }, invalid: { type: Boolean, default: false diff --git a/components/lib/calendar/Calendar.d.ts b/components/lib/calendar/Calendar.d.ts index 9b8540d985..f210b7b79b 100755 --- a/components/lib/calendar/Calendar.d.ts +++ b/components/lib/calendar/Calendar.d.ts @@ -721,6 +721,11 @@ export interface CalendarProps { * @defaultValue false */ disabled?: boolean | undefined; + /** + * Specifies the input variant of the component. + * @defaultValue outlined + */ + variant?: 'outlined' | 'filled' | undefined; /** * When present, it specifies that an input field is read-only. * @defaultValue false diff --git a/components/lib/calendar/style/CalendarStyle.js b/components/lib/calendar/style/CalendarStyle.js index c354ff993b..95c5c731d9 100644 --- a/components/lib/calendar/style/CalendarStyle.js +++ b/components/lib/calendar/style/CalendarStyle.js @@ -167,6 +167,7 @@ const classes = { 'p-calendar-timeonly': props.timeOnly, 'p-calendar-disabled': props.disabled, 'p-invalid': props.invalid, + 'p-variant': props.variant === 'filled', 'p-inputwrapper-filled': props.modelValue, 'p-inputwrapper-focus': state.focused, 'p-focus': state.focused || state.overlayVisible @@ -186,7 +187,7 @@ const classes = { 'p-datepicker-monthpicker': state.currentView === 'month', 'p-datepicker-yearpicker': state.currentView === 'year', 'p-datepicker-touch-ui': props.touchUI, - 'p-input-filled': instance.$primevue.config.inputStyle === 'filled', + 'p-input-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled', 'p-ripple-disabled': instance.$primevue.config.ripple === false } ], diff --git a/components/lib/cascadeselect/BaseCascadeSelect.vue b/components/lib/cascadeselect/BaseCascadeSelect.vue index dbc69654cf..7bb86bf304 100644 --- a/components/lib/cascadeselect/BaseCascadeSelect.vue +++ b/components/lib/cascadeselect/BaseCascadeSelect.vue @@ -14,6 +14,10 @@ export default { optionGroupLabel: null, optionGroupChildren: null, placeholder: String, + variant: { + type: String, + default: 'outlined' + }, invalid: { type: Boolean, default: false diff --git a/components/lib/cascadeselect/CascadeSelect.d.ts b/components/lib/cascadeselect/CascadeSelect.d.ts index 3e5a6e2bc0..f7380ec7a5 100644 --- a/components/lib/cascadeselect/CascadeSelect.d.ts +++ b/components/lib/cascadeselect/CascadeSelect.d.ts @@ -281,6 +281,11 @@ export interface CascadeSelectProps { * @defaultValue false */ disabled?: boolean | undefined; + /** + * Specifies the input variant of the component. + * @defaultValue outlined + */ + variant?: 'outlined' | 'filled' | undefined; /** * A property to uniquely identify an option. */ diff --git a/components/lib/cascadeselect/style/CascadeSelectStyle.js b/components/lib/cascadeselect/style/CascadeSelectStyle.js index 85f54f3b0e..d851e42944 100644 --- a/components/lib/cascadeselect/style/CascadeSelectStyle.js +++ b/components/lib/cascadeselect/style/CascadeSelectStyle.js @@ -104,6 +104,7 @@ const classes = { { 'p-disabled': props.disabled, 'p-invalid': props.invalid, + 'p-variant': props.variant === 'filled', 'p-focus': instance.focused, 'p-inputwrapper-filled': props.modelValue, 'p-inputwrapper-focus': instance.focused || instance.overlayVisible, @@ -120,10 +121,10 @@ const classes = { dropdownButton: 'p-cascadeselect-trigger', loadingIcon: 'p-cascadeselect-trigger-icon', dropdownIcon: 'p-cascadeselect-trigger-icon', - panel: ({ instance }) => [ + panel: ({ props, instance }) => [ 'p-cascadeselect-panel p-component', { - 'p-input-filled': instance.$primevue.config.inputStyle === 'filled', + 'p-input-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled', 'p-ripple-disabled': instance.$primevue.config.ripple === false } ], diff --git a/components/lib/checkbox/BaseCheckbox.vue b/components/lib/checkbox/BaseCheckbox.vue index fb434f62f1..4d9c6aba1d 100644 --- a/components/lib/checkbox/BaseCheckbox.vue +++ b/components/lib/checkbox/BaseCheckbox.vue @@ -21,6 +21,10 @@ export default { type: null, default: false }, + variant: { + type: String, + default: 'outlined' + }, invalid: { type: Boolean, default: false diff --git a/components/lib/checkbox/Checkbox.d.ts b/components/lib/checkbox/Checkbox.d.ts index d513b1e912..2b0266c6af 100755 --- a/components/lib/checkbox/Checkbox.d.ts +++ b/components/lib/checkbox/Checkbox.d.ts @@ -121,6 +121,11 @@ export interface CheckboxProps { * @default false */ disabled?: boolean | undefined; + /** + * Specifies the input variant of the component. + * @defaultValue outlined + */ + variant?: 'outlined' | 'filled' | undefined; /** * When present, it specifies that an input field is read-only. * @default false diff --git a/components/lib/checkbox/style/CheckboxStyle.js b/components/lib/checkbox/style/CheckboxStyle.js index b720000b0b..78caf15aec 100644 --- a/components/lib/checkbox/style/CheckboxStyle.js +++ b/components/lib/checkbox/style/CheckboxStyle.js @@ -27,7 +27,8 @@ const classes = { { 'p-highlight': instance.checked, 'p-disabled': props.disabled, - 'p-invalid': props.invalid + 'p-invalid': props.invalid, + 'p-variant': props.variant === 'filled' } ], box: 'p-checkbox-box', diff --git a/components/lib/chips/BaseChips.vue b/components/lib/chips/BaseChips.vue index 4a2fd9f6c2..362adc41b2 100644 --- a/components/lib/chips/BaseChips.vue +++ b/components/lib/chips/BaseChips.vue @@ -30,6 +30,10 @@ export default { type: String, default: null }, + variant: { + type: String, + default: 'outlined' + }, invalid: { type: Boolean, default: false diff --git a/components/lib/chips/Chips.d.ts b/components/lib/chips/Chips.d.ts index cd951fe260..30a30a59b6 100755 --- a/components/lib/chips/Chips.d.ts +++ b/components/lib/chips/Chips.d.ts @@ -194,6 +194,11 @@ export interface ChipsProps { * @defaultValue false */ disabled?: boolean | undefined; + /** + * Specifies the input variant of the component. + * @defaultValue outlined + */ + variant?: 'outlined' | 'filled' | undefined; /** * Placeholder text for the input. */ diff --git a/components/lib/chips/style/ChipsStyle.js b/components/lib/chips/style/ChipsStyle.js index 1c7cfdab2c..367d200507 100644 --- a/components/lib/chips/style/ChipsStyle.js +++ b/components/lib/chips/style/ChipsStyle.js @@ -56,6 +56,7 @@ const classes = { { 'p-disabled': props.disabled, 'p-invalid': props.invalid, + 'p-variant': props.variant === 'filled', 'p-focus': instance.focused, 'p-inputwrapper-filled': (props.modelValue && props.modelValue.length) || (instance.inputValue && instance.inputValue.length), 'p-inputwrapper-focus': instance.focused diff --git a/components/lib/dropdown/BaseDropdown.vue b/components/lib/dropdown/BaseDropdown.vue index 5499fef1d6..978b4f8819 100644 --- a/components/lib/dropdown/BaseDropdown.vue +++ b/components/lib/dropdown/BaseDropdown.vue @@ -33,6 +33,10 @@ export default { type: String, default: null }, + variant: { + type: String, + default: 'outlined' + }, invalid: { type: Boolean, default: false diff --git a/components/lib/dropdown/Dropdown.d.ts b/components/lib/dropdown/Dropdown.d.ts index 53ff934606..b6e2e47dac 100755 --- a/components/lib/dropdown/Dropdown.d.ts +++ b/components/lib/dropdown/Dropdown.d.ts @@ -329,6 +329,11 @@ export interface DropdownProps { * @defaultValue false */ disabled?: boolean | undefined; + /** + * Specifies the input variant of the component. + * @defaultValue outlined + */ + variant?: 'outlined' | 'filled' | undefined; /** * A property to uniquely identify an option. */ diff --git a/components/lib/dropdown/style/DropdownStyle.js b/components/lib/dropdown/style/DropdownStyle.js index 7857cd7e5d..e2733cbeeb 100644 --- a/components/lib/dropdown/style/DropdownStyle.js +++ b/components/lib/dropdown/style/DropdownStyle.js @@ -105,6 +105,7 @@ const classes = { { 'p-disabled': props.disabled, 'p-invalid': props.invalid, + 'p-variant': props.variant === 'filled', 'p-dropdown-clearable': props.showClear, 'p-focus': state.focused, 'p-inputwrapper-filled': instance.hasSelectedOption, @@ -123,10 +124,10 @@ const classes = { trigger: 'p-dropdown-trigger', loadingicon: 'p-dropdown-trigger-icon', dropdownIcon: 'p-dropdown-trigger-icon', - panel: ({ instance }) => [ + panel: ({ props, instance }) => [ 'p-dropdown-panel p-component', { - 'p-input-filled': instance.$primevue.config.inputStyle === 'filled', + 'p-input-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled', 'p-ripple-disabled': instance.$primevue.config.ripple === false } ], diff --git a/components/lib/inputmask/BaseInputMask.vue b/components/lib/inputmask/BaseInputMask.vue index 44befb029a..4a3349d5b4 100644 --- a/components/lib/inputmask/BaseInputMask.vue +++ b/components/lib/inputmask/BaseInputMask.vue @@ -26,6 +26,14 @@ export default { readonly: { type: Boolean, default: false + }, + invalid: { + type: Boolean, + default: false + }, + variant: { + type: String, + default: 'outlined' } }, style: InputMaskStyle diff --git a/components/lib/inputmask/InputMask.d.ts b/components/lib/inputmask/InputMask.d.ts index 6e48ae1c1a..9f24848947 100755 --- a/components/lib/inputmask/InputMask.d.ts +++ b/components/lib/inputmask/InputMask.d.ts @@ -114,6 +114,16 @@ export interface InputMaskProps { * @defaultValue false */ readonly?: boolean | undefined; + /** + * When present, it specifies that the component should have invalid state style. + * @defaultValue false + */ + invalid?: boolean | undefined; + /** + * Specifies the input variant of the component. + * @defaultValue outlined + */ + variant?: 'outlined' | 'filled' | undefined; /** * Used to pass attributes to DOM elements inside the component. * @type {InputMaskPassThroughOptions} diff --git a/components/lib/inputmask/style/InputMaskStyle.js b/components/lib/inputmask/style/InputMaskStyle.js index d9c27984b9..c3ab1eb329 100644 --- a/components/lib/inputmask/style/InputMaskStyle.js +++ b/components/lib/inputmask/style/InputMaskStyle.js @@ -1,10 +1,12 @@ import BaseStyle from 'primevue/base/style'; const classes = { - root: ({ instance }) => [ + root: ({ props, instance }) => [ 'p-inputmask p-inputtext p-component', { - 'p-filled': instance.filled + 'p-filled': instance.filled, + 'p-invalid': props.invalid, + 'p-variant': props.variant === 'filled' } ] }; diff --git a/components/lib/inputnumber/BaseInputNumber.vue b/components/lib/inputnumber/BaseInputNumber.vue index b78bf4fd13..0ed253d7bd 100644 --- a/components/lib/inputnumber/BaseInputNumber.vue +++ b/components/lib/inputnumber/BaseInputNumber.vue @@ -109,6 +109,10 @@ export default { type: Boolean, default: false }, + variant: { + type: String, + default: 'outlined' + }, invalid: { type: Boolean, default: false diff --git a/components/lib/inputnumber/InputNumber.d.ts b/components/lib/inputnumber/InputNumber.d.ts index c96e26685c..fdf35efd3d 100755 --- a/components/lib/inputnumber/InputNumber.d.ts +++ b/components/lib/inputnumber/InputNumber.d.ts @@ -272,6 +272,11 @@ export interface InputNumberProps { * @defaultValue false */ disabled?: boolean | undefined; + /** + * Specifies the input variant of the component. + * @defaultValue outlined + */ + variant?: 'outlined' | 'filled' | undefined; /** * When present, it specifies that an input field is read-only. * @defaultValue false diff --git a/components/lib/inputnumber/style/InputNumberStyle.js b/components/lib/inputnumber/style/InputNumberStyle.js index 4a88f544a5..0614a77307 100644 --- a/components/lib/inputnumber/style/InputNumberStyle.js +++ b/components/lib/inputnumber/style/InputNumberStyle.js @@ -114,7 +114,8 @@ const classes = { 'p-inputnumber-buttons-stacked': props.showButtons && props.buttonLayout === 'stacked', 'p-inputnumber-buttons-horizontal': props.showButtons && props.buttonLayout === 'horizontal', 'p-inputnumber-buttons-vertical': props.showButtons && props.buttonLayout === 'vertical', - 'p-invalid': props.invalid + 'p-invalid': props.invalid, + 'p-variant': props.variant === 'filled' } ], input: 'p-inputnumber-input', diff --git a/components/lib/inputtext/BaseInputText.vue b/components/lib/inputtext/BaseInputText.vue index 2615f2860a..ac94e0904f 100644 --- a/components/lib/inputtext/BaseInputText.vue +++ b/components/lib/inputtext/BaseInputText.vue @@ -14,6 +14,10 @@ export default { invalid: { type: Boolean, default: false + }, + variant: { + type: String, + default: 'outlined' } }, style: InputTextStyle, diff --git a/components/lib/inputtext/InputText.d.ts b/components/lib/inputtext/InputText.d.ts index 25eb76a328..9255d07b5e 100755 --- a/components/lib/inputtext/InputText.d.ts +++ b/components/lib/inputtext/InputText.d.ts @@ -96,6 +96,11 @@ export interface InputTextProps extends InputHTMLAttributes { * @defaultValue false */ invalid?: boolean | undefined; + /** + * Specifies the input variant of the component. + * @defaultValue outlined + */ + variant?: 'outlined' | 'filled' | undefined; /** * Used to pass attributes to DOM elements inside the component. * @type {InputTextPassThroughOptions} diff --git a/components/lib/inputtext/style/InputTextStyle.js b/components/lib/inputtext/style/InputTextStyle.js index a86b3baa8d..b6abf9e2a6 100644 --- a/components/lib/inputtext/style/InputTextStyle.js +++ b/components/lib/inputtext/style/InputTextStyle.js @@ -7,7 +7,8 @@ const classes = { 'p-filled': instance.filled, 'p-inputtext-sm': props.size === 'small', 'p-inputtext-lg': props.size === 'large', - 'p-invalid': props.invalid + 'p-invalid': props.invalid, + 'p-variant': props.variant === 'filled' } ] }; diff --git a/components/lib/multiselect/BaseMultiSelect.vue b/components/lib/multiselect/BaseMultiSelect.vue index 8dc2f30ae7..1cb8106468 100644 --- a/components/lib/multiselect/BaseMultiSelect.vue +++ b/components/lib/multiselect/BaseMultiSelect.vue @@ -18,6 +18,10 @@ export default { default: '200px' }, placeholder: String, + variant: { + type: String, + default: 'outlined' + }, invalid: { type: Boolean, default: false diff --git a/components/lib/multiselect/MultiSelect.d.ts b/components/lib/multiselect/MultiSelect.d.ts index a30fa31d2e..45a37fc508 100755 --- a/components/lib/multiselect/MultiSelect.d.ts +++ b/components/lib/multiselect/MultiSelect.d.ts @@ -341,6 +341,11 @@ export interface MultiSelectProps { * @defaultValue false */ disabled?: boolean | undefined; + /** + * Specifies the input variant of the component. + * @defaultValue outlined + */ + variant?: 'outlined' | 'filled' | undefined; /** * Identifier of the underlying input element. */ diff --git a/components/lib/multiselect/style/MultiSelectStyle.js b/components/lib/multiselect/style/MultiSelectStyle.js index 98ecb08fc1..632c75c61e 100644 --- a/components/lib/multiselect/style/MultiSelectStyle.js +++ b/components/lib/multiselect/style/MultiSelectStyle.js @@ -121,6 +121,7 @@ const classes = { 'p-multiselect-chip': props.display === 'chip', 'p-disabled': props.disabled, 'p-invalid': props.invalid, + 'p-variant': props.variant === 'filled', 'p-focus': instance.focused, 'p-inputwrapper-filled': props.modelValue && props.modelValue.length, 'p-inputwrapper-focus': instance.focused || instance.overlayVisible, @@ -141,10 +142,10 @@ const classes = { trigger: 'p-multiselect-trigger', loadingIcon: 'p-multiselect-trigger-icon', dropdownIcon: 'p-multiselect-trigger-icon', - panel: ({ instance }) => [ + panel: ({ props, instance }) => [ 'p-multiselect-panel p-component', { - 'p-input-filled': instance.$primevue.config.inputStyle === 'filled', + 'p-input-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled', 'p-ripple-disabled': instance.$primevue.config.ripple === false } ], diff --git a/components/lib/password/BasePassword.vue b/components/lib/password/BasePassword.vue index d5ecb6d97e..1fd6532eb3 100644 --- a/components/lib/password/BasePassword.vue +++ b/components/lib/password/BasePassword.vue @@ -51,6 +51,10 @@ export default { type: String, default: undefined }, + variant: { + type: String, + default: 'outlined' + }, invalid: { type: Boolean, default: false diff --git a/components/lib/password/Password.d.ts b/components/lib/password/Password.d.ts index 90531ab47e..1b9de5e3b3 100755 --- a/components/lib/password/Password.d.ts +++ b/components/lib/password/Password.d.ts @@ -231,6 +231,11 @@ export interface PasswordProps extends InputHTMLAttributes { * @defaultValue false */ disabled?: boolean | undefined; + /** + * Specifies the input variant of the component. + * @defaultValue outlined + */ + variant?: 'outlined' | 'filled' | undefined; /** * Placeholder text for the input. */ diff --git a/components/lib/password/style/PasswordStyle.js b/components/lib/password/style/PasswordStyle.js index b2138697b3..522caf2a06 100644 --- a/components/lib/password/style/PasswordStyle.js +++ b/components/lib/password/style/PasswordStyle.js @@ -42,7 +42,8 @@ const classes = { 'p-inputwrapper-filled': instance.filled, 'p-inputwrapper-focus': instance.focused, 'p-input-icon-right': props.toggleMask, - 'p-invalid': props.invalid + 'p-invalid': props.invalid, + 'p-variant': props.variant === 'filled' } ], input: ({ props }) => [ @@ -51,10 +52,10 @@ const classes = { 'p-disabled': props.disabled } ], - panel: ({ instance }) => [ + panel: ({ props, instance }) => [ 'p-password-panel p-component', { - 'p-input-filled': instance.$primevue.config.inputStyle === 'filled', + 'p-input-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled', 'p-ripple-disabled': instance.$primevue.config.ripple === false } ], diff --git a/components/lib/radiobutton/BaseRadioButton.vue b/components/lib/radiobutton/BaseRadioButton.vue index 378c172b50..1f7ea053be 100644 --- a/components/lib/radiobutton/BaseRadioButton.vue +++ b/components/lib/radiobutton/BaseRadioButton.vue @@ -13,6 +13,10 @@ export default { type: String, default: null }, + variant: { + type: String, + default: 'outlined' + }, invalid: { type: Boolean, default: false diff --git a/components/lib/radiobutton/RadioButton.d.ts b/components/lib/radiobutton/RadioButton.d.ts index 6bc2fa0d32..8f2573c565 100755 --- a/components/lib/radiobutton/RadioButton.d.ts +++ b/components/lib/radiobutton/RadioButton.d.ts @@ -120,6 +120,11 @@ export interface RadioButtonProps { * @defaultValue false */ disabled?: boolean | undefined; + /** + * Specifies the input variant of the component. + * @defaultValue outlined + */ + variant?: 'outlined' | 'filled' | undefined; /** * When present, it specifies that an input field is read-only. * @default false diff --git a/components/lib/radiobutton/style/RadioButtonStyle.js b/components/lib/radiobutton/style/RadioButtonStyle.js index 4b920ea05f..86c0f32fe7 100644 --- a/components/lib/radiobutton/style/RadioButtonStyle.js +++ b/components/lib/radiobutton/style/RadioButtonStyle.js @@ -40,7 +40,8 @@ const classes = { { 'p-highlight': instance.checked, 'p-disabled': props.disabled, - 'p-invalid': props.invalid + 'p-invalid': props.invalid, + 'p-variant': props.variant === 'filled' } ], box: 'p-radiobutton-box', diff --git a/components/lib/textarea/BaseTextarea.vue b/components/lib/textarea/BaseTextarea.vue index 3f39b3a2a6..9feba9f555 100644 --- a/components/lib/textarea/BaseTextarea.vue +++ b/components/lib/textarea/BaseTextarea.vue @@ -11,6 +11,10 @@ export default { invalid: { type: Boolean, default: false + }, + variant: { + type: String, + default: 'outlined' } }, style: TextareaStyle, diff --git a/components/lib/textarea/Textarea.d.ts b/components/lib/textarea/Textarea.d.ts index 492bdfd28f..21e86e43b0 100755 --- a/components/lib/textarea/Textarea.d.ts +++ b/components/lib/textarea/Textarea.d.ts @@ -102,6 +102,11 @@ export interface TextareaProps extends TextareaHTMLAttributes { * @defaultValue false */ invalid?: boolean | undefined; + /** + * Specifies the input variant of the component. + * @defaultValue outlined + */ + variant?: 'outlined' | 'filled' | undefined; /** * Used to pass attributes to DOM elements inside the component. * @type {TextareaPassThroughOptions} diff --git a/components/lib/textarea/style/TextareaStyle.js b/components/lib/textarea/style/TextareaStyle.js index aa6e19a593..d809a3ca51 100644 --- a/components/lib/textarea/style/TextareaStyle.js +++ b/components/lib/textarea/style/TextareaStyle.js @@ -19,7 +19,8 @@ const classes = { { 'p-filled': instance.filled, 'p-inputtextarea-resizable ': props.autoResize, - 'p-invalid': props.invalid + 'p-invalid': props.invalid, + 'p-variant': props.variant === 'filled' } ] }; diff --git a/components/lib/treeselect/BaseTreeSelect.vue b/components/lib/treeselect/BaseTreeSelect.vue index a9b125eb60..7b0ec23976 100644 --- a/components/lib/treeselect/BaseTreeSelect.vue +++ b/components/lib/treeselect/BaseTreeSelect.vue @@ -16,6 +16,10 @@ export default { type: String, default: null }, + variant: { + type: String, + default: 'outlined' + }, invalid: { type: Boolean, default: false diff --git a/components/lib/treeselect/TreeSelect.d.ts b/components/lib/treeselect/TreeSelect.d.ts index c7c590717e..cdf66c25ce 100644 --- a/components/lib/treeselect/TreeSelect.d.ts +++ b/components/lib/treeselect/TreeSelect.d.ts @@ -189,6 +189,11 @@ export interface TreeSelectProps { * @defaultValue false */ disabled?: boolean | undefined; + /** + * Specifies the input variant of the component. + * @defaultValue outlined + */ + variant?: 'outlined' | 'filled' | undefined; /** * Index of the element in tabbing order. */ diff --git a/components/lib/treeselect/style/TreeSelectStyle.js b/components/lib/treeselect/style/TreeSelectStyle.js index 4e6b5ba14e..32532cf128 100644 --- a/components/lib/treeselect/style/TreeSelectStyle.js +++ b/components/lib/treeselect/style/TreeSelectStyle.js @@ -66,6 +66,7 @@ const classes = { 'p-treeselect-chip': props.display === 'chip', 'p-disabled': props.disabled, 'p-invalid': props.invalid, + 'p-variant': props.variant === 'filled', 'p-focus': instance.focused, 'p-inputwrapper-filled': !instance.emptyValue, 'p-inputwrapper-focus': instance.focused || instance.overlayVisible @@ -83,10 +84,10 @@ const classes = { tokenLabel: 'p-treeselect-token-label', trigger: 'p-treeselect-trigger', triggerIcon: 'p-treeselect-trigger-icon', - panel: ({ instance }) => [ + panel: ({ props, instance }) => [ 'p-treeselect-panel p-component', { - 'p-input-filled': instance.$primevue.config.inputStyle === 'filled', + 'p-input-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled', 'p-ripple-disabled': instance.$primevue.config.ripple === false } ], diff --git a/components/lib/tristatecheckbox/BaseTriStateCheckbox.vue b/components/lib/tristatecheckbox/BaseTriStateCheckbox.vue index d880843cd6..040426d3a9 100644 --- a/components/lib/tristatecheckbox/BaseTriStateCheckbox.vue +++ b/components/lib/tristatecheckbox/BaseTriStateCheckbox.vue @@ -7,6 +7,10 @@ export default { extends: BaseComponent, props: { modelValue: null, + variant: { + type: String, + default: 'outlined' + }, invalid: { type: Boolean, default: false diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.d.ts b/components/lib/tristatecheckbox/TriStateCheckbox.d.ts index 083acd51b9..d65a96c878 100755 --- a/components/lib/tristatecheckbox/TriStateCheckbox.d.ts +++ b/components/lib/tristatecheckbox/TriStateCheckbox.d.ts @@ -137,6 +137,11 @@ export interface TriStateCheckboxProps { * @defaultValue false */ disabled?: boolean | undefined; + /** + * Specifies the input variant of the component. + * @defaultValue outlined + */ + variant?: 'outlined' | 'filled' | undefined; /** * When present, it specifies that an input field is read-only. * @default false diff --git a/components/lib/tristatecheckbox/style/TriStateCheckboxStyle.js b/components/lib/tristatecheckbox/style/TriStateCheckboxStyle.js index 597cb24e4f..057fc8f3a5 100644 --- a/components/lib/tristatecheckbox/style/TriStateCheckboxStyle.js +++ b/components/lib/tristatecheckbox/style/TriStateCheckboxStyle.js @@ -27,7 +27,8 @@ const classes = { { 'p-highlight': instance.active, 'p-disabled': props.disabled, - 'p-invalid': props.invalid + 'p-invalid': props.invalid, + 'p-variant': props.variant === 'filled' } ], box: 'p-checkbox-box',