Fixed #5176 - variant added

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

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

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
         }
     ],

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

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

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
         }
     ],

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

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

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
         }
     ],

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

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

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

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

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

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

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

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

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
         }
     ],

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

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}

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

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

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

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

components/lib/inputtext/BaseInputText.vue

@@ -14,6 +14,10 @@ export default {
         invalid: {
             type: Boolean,
             default: false
+        },
+        variant: {
+            type: String,
+            default: 'outlined'
         }
     },
     style: InputTextStyle,

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}

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

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

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

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
         }
     ],

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

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

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
         }
     ],

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

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

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

components/lib/textarea/BaseTextarea.vue

@@ -11,6 +11,10 @@ export default {
         invalid: {
             type: Boolean,
             default: false
+        },
+        variant: {
+            type: String,
+            default: 'outlined'
         }
     },
     style: TextareaStyle,

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}

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

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

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

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
         }
     ],

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

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

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