Refactor #5176 - invalid property added

components/lib/autocomplete/AutoComplete.d.ts

@@ -350,6 +350,11 @@ export interface AutoCompleteProps {
      * @defaultValue false
      */
     loading?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false

components/lib/autocomplete/BaseAutoComplete.vue

@@ -45,6 +45,10 @@ export default {
             type: Boolean,
             default: false
         },
+        invalid: {
+            type: Boolean,
+            default: false
+        },
         disabled: {
             type: Boolean,
             default: false

components/lib/autocomplete/style/AutoCompleteStyle.js

@@ -110,6 +110,7 @@ const classes = {
         'p-autocomplete p-component p-inputwrapper',
         {
             'p-disabled': props.disabled,
+            'p-invalid': props.invalid,
             'p-focus': instance.focused,
             'p-autocomplete-dd': props.dropdown,
             'p-autocomplete-multiple': props.multiple,

components/lib/calendar/BaseCalendar.vue

@@ -176,6 +176,10 @@ export default {
             type: [String, Object],
             default: 'body'
         },
+        invalid: {
+            type: Boolean,
+            default: false
+        },
         disabled: {
             type: Boolean,
             default: false

components/lib/calendar/Calendar.d.ts

@@ -711,6 +711,11 @@ export interface CalendarProps {
      * @defaultValue true
      */
     manualInput?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false

components/lib/calendar/style/CalendarStyle.js

@@ -166,6 +166,7 @@ const classes = {
             'p-input-icon-right': props.showIcon && props.iconDisplay === 'input',
             'p-calendar-timeonly': props.timeOnly,
             'p-calendar-disabled': props.disabled,
+            'p-invalid': props.invalid,
             'p-inputwrapper-filled': props.modelValue,
             'p-inputwrapper-focus': state.focused,
             'p-focus': state.focused || state.overlayVisible

components/lib/cascadeselect/BaseCascadeSelect.vue

@@ -14,6 +14,10 @@ export default {
         optionGroupLabel: null,
         optionGroupChildren: null,
         placeholder: String,
+        invalid: {
+            type: Boolean,
+            default: false
+        },
         disabled: Boolean,
         dataKey: null,
         inputId: {

components/lib/cascadeselect/CascadeSelect.d.ts

@@ -271,6 +271,11 @@ export interface CascadeSelectProps {
      * Default text to display when no option is selected.
      */
     placeholder?: string | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false

components/lib/cascadeselect/style/CascadeSelectStyle.js

@@ -103,6 +103,7 @@ const classes = {
         'p-cascadeselect p-component p-inputwrapper',
         {
             'p-disabled': props.disabled,
+            'p-invalid': props.invalid,
             'p-focus': instance.focused,
             'p-inputwrapper-filled': props.modelValue,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,

components/lib/checkbox/BaseCheckbox.vue

@@ -21,6 +21,10 @@ export default {
             type: null,
             default: false
         },
+        invalid: {
+            type: Boolean,
+            default: false
+        },
         disabled: {
             type: Boolean,
             default: false

components/lib/checkbox/Checkbox.d.ts

@@ -111,6 +111,11 @@ export interface CheckboxProps {
      * @default false
      */
     binary?: boolean;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the element should be disabled.
      * @default false

components/lib/checkbox/style/CheckboxStyle.js

@@ -26,7 +26,8 @@ const classes = {
         'p-checkbox p-component',
         {
             'p-highlight': instance.checked,
-            'p-disabled': props.disabled
+            'p-disabled': props.disabled,
+            'p-invalid': props.invalid
         }
     ],
     box: 'p-checkbox-box',

components/lib/chips/BaseChips.vue

@@ -30,6 +30,10 @@ export default {
             type: String,
             default: null
         },
+        invalid: {
+            type: Boolean,
+            default: false
+        },
         disabled: {
             type: Boolean,
             default: false

components/lib/chips/Chips.d.ts

@@ -184,8 +184,14 @@ export interface ChipsProps {
      * @deprecated since v3.27.0. Use 'removetokenicon' slot.
      */
     removeTokenIcon?: string | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the element should be disabled.
+     * @defaultValue false
      */
     disabled?: boolean | undefined;
     /**

components/lib/chips/style/ChipsStyle.js

@@ -55,6 +55,7 @@ const classes = {
         'p-chips p-component p-inputwrapper',
         {
             'p-disabled': props.disabled,
+            'p-invalid': props.invalid,
             '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
         },
+        invalid: {
+            type: Boolean,
+            default: false
+        },
         disabled: {
             type: Boolean,
             default: false

components/lib/dropdown/Dropdown.d.ts

@@ -319,6 +319,11 @@ export interface DropdownProps {
      * Default text to display when no option is selected.
      */
     placeholder?: string | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false

components/lib/dropdown/style/DropdownStyle.js

@@ -104,6 +104,7 @@ const classes = {
         'p-dropdown p-component p-inputwrapper',
         {
             'p-disabled': props.disabled,
+            'p-invalid': props.invalid,
             'p-dropdown-clearable': props.showClear,
             'p-focus': state.focused,
             'p-inputwrapper-filled': instance.hasSelectedOption,

components/lib/inputnumber/BaseInputNumber.vue

@@ -109,6 +109,10 @@ export default {
             type: Boolean,
             default: false
         },
+        invalid: {
+            type: Boolean,
+            default: false
+        },
         disabled: {
             type: Boolean,
             default: false

components/lib/inputnumber/InputNumber.d.ts

@@ -262,6 +262,11 @@ export interface InputNumberProps {
      * @defaultValue false
      */
     highlightOnFocus?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false

components/lib/inputnumber/style/InputNumberStyle.js

@@ -113,7 +113,8 @@ const classes = {
             'p-inputwrapper-focus': instance.focused,
             '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-inputnumber-buttons-vertical': props.showButtons && props.buttonLayout === 'vertical',
+            'p-invalid': props.invalid
         }
     ],
     input: 'p-inputnumber-input',

components/lib/inputswitch/BaseInputSwitch.vue

@@ -18,6 +18,10 @@ export default {
             type: null,
             default: false
         },
+        invalid: {
+            type: Boolean,
+            default: false
+        },
         disabled: {
             type: Boolean,
             default: false

components/lib/inputswitch/InputSwitch.d.ts

@@ -105,6 +105,11 @@ export interface InputSwitchProps {
      * @defaultValue false
      */
     falseValue?: any;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false

components/lib/inputswitch/style/InputSwitchStyle.js

@@ -37,7 +37,8 @@ const classes = {
         'p-inputswitch p-component',
         {
             'p-highlight': instance.checked,
-            'p-disabled': props.disabled
+            'p-disabled': props.disabled,
+            'p-invalid': props.invalid
         }
     ],
     input: 'p-inputswitch-input',

components/lib/inputtext/BaseInputText.vue

@@ -10,6 +10,10 @@ export default {
         size: {
             type: String,
             default: null
+        },
+        invalid: {
+            type: Boolean,
+            default: false
         }
     },
     style: InputTextStyle,

components/lib/inputtext/InputText.d.ts

@@ -91,6 +91,11 @@ export interface InputTextProps extends InputHTMLAttributes {
      * Defines the size of the component.
      */
     size?: 'small' | 'large' | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * Used to pass attributes to DOM elements inside the component.
      * @type {InputTextPassThroughOptions}

components/lib/inputtext/style/InputTextStyle.js

@@ -6,7 +6,8 @@ const classes = {
         {
             'p-filled': instance.filled,
             'p-inputtext-sm': props.size === 'small',
-            'p-inputtext-lg': props.size === 'large'
+            'p-inputtext-lg': props.size === 'large',
+            'p-invalid': props.invalid
         }
     ]
 };

components/lib/listbox/BaseListbox.vue

@@ -14,6 +14,10 @@ export default {
         optionGroupLabel: null,
         optionGroupChildren: null,
         listStyle: null,
+        invalid: {
+            type: Boolean,
+            default: false
+        },
         disabled: {
             type: Boolean,
             default: false

components/lib/listbox/Listbox.d.ts

@@ -240,6 +240,11 @@ export interface ListboxProps {
      * Inline style of inner list element.
      */
     listStyle?: string | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When specified, disables the component.
      * @defaultValue false

components/lib/listbox/style/ListboxStyle.js

@@ -42,7 +42,8 @@ const classes = {
     root: ({ instance, props }) => [
         'p-listbox p-component',
         {
-            'p-disabled': props.disabled
+            'p-disabled': props.disabled,
+            'p-invalid': props.invalid
         }
     ],
     header: 'p-listbox-header',

components/lib/multiselect/BaseMultiSelect.vue

@@ -18,6 +18,10 @@ export default {
             default: '200px'
         },
         placeholder: String,
+        invalid: {
+            type: Boolean,
+            default: false
+        },
         disabled: Boolean,
         inputId: {
             type: String,

components/lib/multiselect/MultiSelect.d.ts

@@ -331,6 +331,11 @@ export interface MultiSelectProps {
      * Label to display when there are no selections.
      */
     placeholder?: string | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false

components/lib/multiselect/style/MultiSelectStyle.js

@@ -120,6 +120,7 @@ const classes = {
         {
             'p-multiselect-chip': props.display === 'chip',
             'p-disabled': props.disabled,
+            'p-invalid': props.invalid,
             'p-focus': instance.focused,
             'p-inputwrapper-filled': props.modelValue && props.modelValue.length,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,

components/lib/password/BasePassword.vue

@@ -51,6 +51,10 @@ export default {
             type: String,
             default: undefined
         },
+        invalid: {
+            type: Boolean,
+            default: false
+        },
         disabled: {
             type: Boolean,
             default: false

components/lib/password/Password.d.ts

@@ -221,6 +221,11 @@ export interface PasswordProps extends InputHTMLAttributes {
      * @deprecated since v3.27.0. Use 'showicon' slot.
      */
     showIcon?: string | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false

components/lib/password/style/PasswordStyle.js

@@ -41,7 +41,8 @@ const classes = {
         {
             'p-inputwrapper-filled': instance.filled,
             'p-inputwrapper-focus': instance.focused,
-            'p-input-icon-right': props.toggleMask
+            'p-input-icon-right': props.toggleMask,
+            'p-invalid': props.invalid
         }
     ],
     input: ({ props }) => [

components/lib/radiobutton/BaseRadioButton.vue

@@ -13,6 +13,10 @@ export default {
             type: String,
             default: null
         },
+        invalid: {
+            type: Boolean,
+            default: false
+        },
         disabled: {
             type: Boolean,
             default: false

components/lib/radiobutton/RadioButton.d.ts

@@ -110,6 +110,11 @@ export interface RadioButtonProps {
      * @default false
      */
     binary?: boolean;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false

components/lib/radiobutton/style/RadioButtonStyle.js

@@ -39,7 +39,8 @@ const classes = {
         'p-radiobutton p-component',
         {
             'p-highlight': instance.checked,
-            'p-disabled': props.disabled
+            'p-disabled': props.disabled,
+            'p-invalid': props.invalid
         }
     ],
     box: 'p-radiobutton-box',

components/lib/selectbutton/BaseSelectButton.vue

@@ -20,6 +20,10 @@ export default {
             type: Boolean,
             default: true
         },
+        invalid: {
+            type: Boolean,
+            default: false
+        },
         disabled: Boolean,
         dataKey: null,
         ariaLabelledby: {

components/lib/selectbutton/SelectButton.d.ts

@@ -153,6 +153,11 @@ export interface SelectButtonProps {
      * @defaultValue false
      */
     multiple?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the element should be disabled.
      * @defaultValue false

components/lib/selectbutton/style/SelectButtonStyle.js

@@ -1,7 +1,13 @@
 import BaseStyle from 'primevue/base/style';
 
 const classes = {
-    root: ({ props }) => ['p-selectbutton p-buttonset p-component', { 'p-disabled': props.disabled }],
+    root: ({ props }) => [
+        'p-selectbutton p-buttonset p-component',
+        {
+            'p-disabled': props.disabled,
+            'p-invalid': props.invalid
+        }
+    ],
     button: ({ instance, option }) => [
         'p-button p-component',
         {

components/lib/textarea/BaseTextarea.vue

@@ -7,7 +7,11 @@ export default {
     extends: BaseComponent,
     props: {
         modelValue: null,
-        autoResize: Boolean
+        autoResize: Boolean,
+        invalid: {
+            type: Boolean,
+            default: false
+        }
     },
     style: TextareaStyle,
     provide() {

components/lib/textarea/Textarea.d.ts

@@ -97,6 +97,11 @@ export interface TextareaProps extends TextareaHTMLAttributes {
      * @defaultValue false
      */
     autoResize?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * Used to pass attributes to DOM elements inside the component.
      * @type {TextareaPassThroughOptions}

components/lib/textarea/style/TextareaStyle.js

@@ -18,7 +18,8 @@ const classes = {
         'p-inputtextarea p-inputtext p-component',
         {
             'p-filled': instance.filled,
-            'p-inputtextarea-resizable ': props.autoResize
+            'p-inputtextarea-resizable ': props.autoResize,
+            'p-invalid': props.invalid
         }
     ]
 };

components/lib/togglebutton/BaseToggleButton.vue

@@ -21,6 +21,10 @@ export default {
             type: String,
             default: 'left'
         },
+        invalid: {
+            type: Boolean,
+            default: false
+        },
         disabled: {
             type: Boolean,
             default: false

components/lib/togglebutton/ToggleButton.d.ts

@@ -144,6 +144,11 @@ export interface ToggleButtonProps {
      * @defaultValue left
      */
     iconPos?: 'left' | 'right' | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the element should be disabled.
      * @defaultValue false

components/lib/togglebutton/style/ToggleButtonStyle.js

@@ -24,7 +24,8 @@ const classes = {
         'p-togglebutton p-component',
         {
             'p-disabled': props.disabled,
-            'p-highlight': instance.active
+            'p-highlight': instance.active,
+            'p-invalid': props.invalid
         }
     ],
     input: 'p-togglebutton-input',

components/lib/treeselect/BaseTreeSelect.vue

@@ -16,6 +16,10 @@ export default {
             type: String,
             default: null
         },
+        invalid: {
+            type: Boolean,
+            default: false
+        },
         disabled: {
             type: Boolean,
             default: false

components/lib/treeselect/TreeSelect.d.ts

@@ -179,6 +179,11 @@ export interface TreeSelectProps {
      * Label to display when there are no selections.
      */
     placeholder?: string | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false

components/lib/treeselect/style/TreeSelectStyle.js

@@ -65,6 +65,7 @@ const classes = {
         {
             'p-treeselect-chip': props.display === 'chip',
             'p-disabled': props.disabled,
+            'p-invalid': props.invalid,
             'p-focus': instance.focused,
             'p-inputwrapper-filled': !instance.emptyValue,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible

components/lib/tristatecheckbox/BaseTriStateCheckbox.vue

@@ -7,6 +7,10 @@ export default {
     extends: BaseComponent,
     props: {
         modelValue: null,
+        invalid: {
+            type: Boolean,
+            default: false
+        },
         disabled: {
             type: Boolean,
             default: false

components/lib/tristatecheckbox/TriStateCheckbox.d.ts

@@ -127,6 +127,11 @@ export interface TriStateCheckboxProps {
      * @defaultValue null
      */
     modelValue?: Nullable<boolean>;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false

components/lib/tristatecheckbox/style/TriStateCheckboxStyle.js

@@ -26,7 +26,8 @@ const classes = {
         'p-tristatecheckbox p-checkbox p-component',
         {
             'p-highlight': instance.active,
-            'p-disabled': props.disabled
+            'p-disabled': props.disabled,
+            'p-invalid': props.invalid
         }
     ],
     box: 'p-checkbox-box',