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

shuriken-ui · Feb 22, 2024 · a494e2b · a494e2b
1 parent f342e8b
commit a494e2b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/.playground/pages/tests/form/select.vue b/.playground/pages/tests/form/select.vue
@@ -78,7 +78,8 @@ const options = reactive({
               v-model="options.first"
               size="sm"
               rounded="md"
-              label="Rounded: md"
+              label="Size: sm"
+              color-focus
             >
               <option value="">Select a hero</option>
               <option value="Superman">Superman</option>
@@ -94,7 +95,8 @@ const options = reactive({
               v-model="options.second"
               size="md"
               rounded="md"
-              label="Rounded: md"
+              label="Size: md"
+              color-focus
             >
               <option value="">Select a hero</option>
               <option value="Superman">Superman</option>
@@ -110,7 +112,8 @@ const options = reactive({
               v-model="options.third"
               size="lg"
               rounded="md"
-              label="Rounded: md"
+              label="Size: lg"
+              color-focus
             >
               <option value="">Select a hero</option>
               <option value="Superman">Superman</option>

diff --git a/components/form/BaseSelect.vue b/components/form/BaseSelect.vue
@@ -62,6 +62,11 @@ const props = withDefaults(
      */
     disabled?: boolean
 
+    /**
+     * Whether the color of the input should change when it is focused.
+     */
+    colorFocus?: boolean
+
     /**
      * An error message to display, or a boolean indicating whether there is an error.
      */
@@ -126,10 +131,10 @@ const id = useNinjaId(() => props.id)
 
 const radiuses = {
   none: '',
-  sm: 'nui-select-rounded',
-  md: 'nui-select-smooth',
-  lg: 'nui-select-curved',
-  full: 'nui-select-full',
+  sm: 'nui-select-rounded-sm',
+  md: 'nui-select-rounded-md',
+  lg: 'nui-select-rounded-lg',
+  full: 'nui-select-rounded-full',
 } as Record<string, string>
 
 const sizes = {
@@ -180,6 +185,7 @@ const placeholder = computed(() => {
       props.loading && 'nui-select-loading',
       props.labelFloat && 'nui-select-label-float',
       props.icon && 'nui-has-icon',
+      props.colorFocus && 'nui-select-focus',
       props.classes?.wrapper,
     ]"
   >
@@ -190,7 +196,7 @@ const placeholder = computed(() => {
       "
       class="nui-select-label"
       :for="id"
-      :class="props.classes.label"
+      :class="props.classes?.label"
     >
       <slot name="label">{{ props.label }}</slot>
     </label>
@@ -202,7 +208,7 @@ const placeholder = computed(() => {
         v-bind="$attrs"
         :disabled="props.disabled"
         class="nui-select"
-        :class="props.classes.select"
+        :class="props.classes?.select"
       >
         <option v-if="placeholder" value="" disabled hidden>
           {{ placeholder }}
@@ -216,7 +222,7 @@ const placeholder = computed(() => {
         "
         :for="id"
         class="nui-label-float"
-        :class="props.classes.label"
+        :class="props.classes?.label"
       >
         <slot name="label">{{ props.label }}</slot>
       </label>
@@ -226,7 +232,7 @@ const placeholder = computed(() => {
       <div
         v-if="props.icon"
         class="nui-select-icon"
-        :class="props.classes.icon"
+        :class="props.classes?.icon"
       >
         <slot name="icon">
           <Icon class="nui-select-icon-inner" :name="props.icon" />