add invalid to inputnumber #133

primefaces · Feb 23, 2024 · 16e70e1 · 16e70e1
1 parent e0b67cc
commit 16e70e1
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 16 deletions.
diff --git a/doc/inputnumber/InvalidDoc.vue b/doc/inputnumber/InvalidDoc.vue
@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <InputNumber v-model="value" :inputClass="'border !border-red-300 !dark:border-red-400'" mode="decimal" :minFractionDigits="2" />
+        <InputNumber v-model="value" invalid mode="decimal" :minFractionDigits="2" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             value: null,
             code: {
                 basic: `
-<InputNumber v-model="value" :inputClass="'border !border-red-300 !dark:border-red-400'" mode="decimal" :minFractionDigits="2" />
+<InputNumber v-model="value" invalid mode="decimal" :minFractionDigits="2" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
-        <InputNumber v-model="value" :inputClass="'border !border-red-300 !dark:border-red-400'" mode="decimal" :minFractionDigits="2" />
+        <InputNumber v-model="value" invalid mode="decimal" :minFractionDigits="2" />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <InputNumber v-model="value" :inputClass="'border !border-red-300 !dark:border-red-400'" mode="decimal" :minFractionDigits="2" />
+        <InputNumber v-model="value" invalid mode="decimal" :minFractionDigits="2" />
     </div>
 </template>
 

diff --git a/pages/inputnumber/index.vue b/pages/inputnumber/index.vue
@@ -12,6 +12,7 @@ import LocaleDoc from '@/doc/inputnumber/LocaleDoc.vue';
 import NumeralsDoc from '@/doc/inputnumber/NumeralsDoc.vue';
 import PrefixSuffixDoc from '@/doc/inputnumber/PrefixSuffixDoc.vue';
 import VerticalDoc from '@/doc/inputnumber/VerticalDoc.vue';
+import InvalidDoc from '../../doc/inputnumber/InvalidDoc.vue';
 
 export default {
     data() {
@@ -57,11 +58,11 @@ export default {
                 //     label: 'Float Label',
                 //     component: FloatLabelDoc
                 // },
-                // {
-                //     id: 'invalid',
-                //     label: 'Invalid',
-                //     component: InvalidDoc
-                // },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
                 {
                     id: 'disabled',
                     label: 'Disabled',

diff --git a/presets/lara/inputnumber/index.js b/presets/lara/inputnumber/index.js
@@ -40,14 +40,18 @@ export default {
                 { '!rounded-none': parent.instance.$parentInstance?.$name == 'InputGroup' && !parent.props.showButtons },
                 { 'border-0': parent.instance.$parentInstance?.$name == 'InputGroup' && !parent.props.showButtons },
 
-                // Colorsh
+                // Colors
                 'text-surface-600 dark:text-surface-200',
                 'placeholder:text-surface-400 dark:placeholder:text-surface-500',
                 'bg-surface-0 dark:bg-surface-900',
-                'border border-surface-300 dark:border-surface-600',
+                'border',
+                { 'border-surface-300 dark:border-surface-600': !parent.props.invalid },
+
+                // Invalid State
+                { 'border-red-500 dark:border-red-400': parent.props.invalid },
 
                 // States
-                'hover:border-primary-500 dark:hover:border-primary-400',
+                { 'hover:border-primary-500 dark:hover:border-primary-400': !parent.props.invalid },
                 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10',
                 { 'opacity-60 select-none pointer-events-none cursor-default': context.disabled },
 

diff --git a/presets/wind/inputnumber/index.js b/presets/wind/inputnumber/index.js
@@ -42,10 +42,14 @@ export default {
                 'text-surface-900 dark:text-surface-0',
                 'placeholder:text-surface-400 dark:placeholder:text-surface-500',
                 'bg-surface-0 dark:bg-surface-900',
-                { 'border-r border-surface-300 dark:border-surface-700': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
-                { 'border-x border-surface-300 dark:border-surface-700': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
-                { 'border-y border-surface-300 dark:border-surface-700': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+                { 'border-r': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
+                { 'border-x': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
+                { 'border-y': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
 
+                { 'border-surface-300 dark:border-surface-700': !parent.props.invalid },
+
+                // Invalid State
+                { 'border border-red-500 dark:border-red-400': parent.props.invalid },
                 // States
                 'outline-none focus:ring-primary-600 dark:focus:ring-primary-500',
                 'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:focus:ring-primary-500',