feat(BaseAutocomplete): update class bindings, add color-focus prop

shuriken-ui · Feb 22, 2024 · 8cff245 · 8cff245
1 parent 2c45109
commit 8cff245
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/.playground/pages/tests/form/autocomplete.vue b/.playground/pages/tests/form/autocomplete.vue
@@ -443,6 +443,7 @@ const people = ref([
               rounded="md"
               placeholder="e.g. Nuxt"
               label="Framework"
+              color-focus
             />
           </div>
           <div class="flex-1">
@@ -453,6 +454,7 @@ const people = ref([
               rounded="md"
               placeholder="e.g. Nuxt"
               label="Framework"
+              color-focus
             />
           </div>
           <div class="flex-1">
@@ -464,6 +466,7 @@ const people = ref([
               rounded="md"
               placeholder="e.g. Nuxt"
               label="Framework"
+              color-focus
             />
           </div>
         </div>

diff --git a/components/form/BaseAutocomplete.vue b/components/form/BaseAutocomplete.vue
@@ -157,6 +157,11 @@ const props = withDefaults(
      */
     clearable?: boolean
 
+    /**
+     * Wether the border should change color when focused
+     */
+    colorFocus?: boolean
+
     /**
      * Display a chevron icon to open suggestions
      */
@@ -234,6 +239,7 @@ const props = withDefaults(
     loading: false,
     disabled: false,
     clearable: false,
+    colorFocus: false,
     clearValue: undefined,
     clearIcon: 'lucide:x',
     chipClearIcon: 'lucide:x',
@@ -494,6 +500,7 @@ const internal = ref<any>(modelValue)
       props.icon && 'nui-has-icon',
       props.labelFloat && 'nui-autocomplete-label-float',
       props.loading && 'nui-autocomplete-loading',
+      props.colorFocus && 'nui-autocomplete-focus',
     ]"
     as="div"
   >