feat(BaseSwitchThin): update BaseSwitchThin component, app.config.ts …

…and nuxt.schema.ts
shuriken-ui · Dec 18, 2023 · 6067a7c · 6067a7c
1 parent a3ef45b
commit 6067a7c
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 9 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -134,6 +134,9 @@ export default defineAppConfig({
     BaseSwitchBall: {
       color: 'primary',
     },
+    BaseSwitchThin: {
+      color: 'primary',
+    },
     BaseTabs: {
       type: 'tabs',
       justify: 'start',

diff --git a/components/form/BaseSwitchThin.vue b/components/form/BaseSwitchThin.vue
@@ -6,14 +6,14 @@ defineOptions({
 const props = withDefaults(
   defineProps<{
     /**
-     * The form input identifier.
+     * The model value of the switch.
      */
-    id?: string
+    modelValue?: boolean
 
     /**
-     * The model value of the switch.
+     * The form input identifier.
      */
-    modelValue?: boolean
+    id?: string
 
     /**
      * Accessible label of the switch.
@@ -27,15 +27,17 @@ const props = withDefaults(
 
     /**
      * Main color of the switch.
+     *
+     * @default 'primary'
      */
     color?: 'primary' | 'info' | 'success' | 'warning' | 'danger'
   }>(),
   {
-    id: undefined,
     modelValue: undefined,
+    id: undefined,
     label: undefined,
     sublabel: undefined,
-    color: 'primary',
+    color: undefined,
   },
 )
 const emits = defineEmits<{
@@ -47,13 +49,15 @@ const value = useVModel(props, 'modelValue', emits, {
 
 const id = useNinjaId(() => props.id)
 
-const colorStyle = {
+const color = useNuiDefaultProperty(props, 'BaseSwitchThin', 'color')
+
+const colors = {
   primary: 'nui-switch-thin-primary',
   info: 'nui-switch-thin-info',
   success: 'nui-switch-thin-success',
   warning: 'nui-switch-thin-warning',
   danger: 'nui-switch-thin-danger',
-}
+} as Record<string, string>
 
 const inputRef = ref<HTMLInputElement>()
 defineExpose({
@@ -65,7 +69,7 @@ defineExpose({
 </script>
 
 <template>
-  <label :for="id" class="nui-switch-thin" :class="colorStyle[props.color]">
+  <label :for="id" class="nui-switch-thin" :class="color && colors[color]">
     <span class="nui-switch-thin-outer">
       <input
         :id="id"

diff --git a/nuxt.schema.ts b/nuxt.schema.ts
@@ -541,6 +541,14 @@ export default defineNuxtSchema({
          */
         color: 'primary',
       },
+      BaseSwitchThin: {
+        /**
+         * The color of the switch.
+         *
+         * @type {'primary' | 'info' | 'success' | 'warning' | 'danger'}
+         */
+        color: 'primary',
+      },
       BaseTabs: {
         /**
          * The type of the tabs.