add invalid to dropdown #133

primefaces · Feb 23, 2024 · aa71914 · aa71914
1 parent b66ee49
commit aa71914
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 12 deletions.
diff --git a/doc/dropdown/InvalidDoc.vue b/doc/dropdown/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="!border !border-red-300 !dark:border-red-400 w-full md:w-[14rem]" />
+        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-[14rem]" invalid />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,12 +22,12 @@ export default {
             ],
             code: {
                 basic: `
-<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="!border !border-red-300 !dark:border-red-400 w-full md:w-[14rem]" />
+<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-[14rem]" invalid />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
-        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="!border !border-red-300 !dark:border-red-400 w-full md:w-[14rem]" />
+        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-[14rem]" invalid />
     </div>
 </template>
 
@@ -51,7 +51,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="!border !border-red-300 !dark:border-red-400 w-full md:w-[14rem]" />
+        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-[14rem]" invalid />
     </div>
 </template>
 

diff --git a/pages/dropdown/index.vue b/pages/dropdown/index.vue
@@ -20,6 +20,7 @@ import FilterDoc from '@/doc/dropdown/FilterDoc.vue';
 // import FloatLabelDoc from '@/doc/dropdown/FloatLabelDoc.vue';
 import GroupDoc from '@/doc/dropdown/GroupDoc.vue';
 import ImportDoc from '@/doc/dropdown/ImportDoc.vue';
+import InvalidDoc from '@/doc/dropdown/InvalidDoc.vue';
 import LazyVirtualScrollDoc from '@/doc/dropdown/LazyVirtualScrollDoc.vue';
 import LoadingStateDoc from '@/doc/dropdown/LoadingStateDoc.vue';
 import TemplateDoc from '@/doc/dropdown/TemplateDoc.vue';
@@ -84,11 +85,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/dropdown/index.js b/presets/lara/dropdown/index.js
@@ -10,14 +10,18 @@ export default {
 
             // Color and Background
             'bg-surface-0 dark:bg-surface-900',
-            'border border-surface-300 dark:border-surface-700',
+            'border',
+            { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
 
             // Transitions
             'transition-all',
             'duration-200',
 
             // States
-            'hover:border-primary-500 dark:hover:border-primary-300',
+            { 'hover:border-primary-500 dark:hover:border-primary-300': !props.invalid },
             { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused },
 
             // Misc

diff --git a/presets/wind/dropdown/index.js b/presets/wind/dropdown/index.js
@@ -13,7 +13,12 @@ export default {
             'bg-surface-0 dark:bg-surface-900',
 
             // States
-            { 'ring-1 ring-inset ring-surface-300 dark:ring-surface-700': !state.focused, 'ring-2 ring-inset ring-primary-500 dark:ring-primary-400': state.focused },
+            { 'ring-1 ring-inset': !state.focused, 'ring-2 ring-inset ring-primary-500 dark:ring-primary-400': state.focused },
+
+            { 'ring-surface-300 dark:ring-surface-600': !props.invalid && !state.focused },
+
+            // Invalid State
+            { 'ring-red-500 dark:ring-red-400': props.invalid && !state.focused },
 
             // Misc
             'cursor-default',