feat(BaseSwitch): add colors, update class bindings

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

Hide file tree

Showing 3 changed files with 132 additions and 11 deletions.
diff --git a/.playground/pages/tests/form/switch.vue b/.playground/pages/tests/form/switch.vue
@@ -12,6 +12,8 @@ const thinValues = reactive({
   success: true,
   warning: true,
   danger: true,
+  dark: true,
+  black: true,
 })
 
 const ballValues = reactive({
@@ -20,6 +22,8 @@ const ballValues = reactive({
   success: true,
   warning: true,
   danger: true,
+  dark: true,
+  black: true,
 })
 
 const thinSublabelValue = ref(true)
@@ -54,6 +58,12 @@ const ballSublabelValue = ref(true)
             label="Danger"
             color="danger"
           />
+          <BaseSwitchThin v-model="thinValues.dark" label="Dark" color="dark" />
+          <BaseSwitchThin
+            v-model="thinValues.black"
+            label="Black"
+            color="black"
+          />
         </BaseFocusLoop>
       </NuiPreview>
 
@@ -93,6 +103,16 @@ const ballSublabelValue = ref(true)
             label="Danger"
             color="danger"
           />
+          <BaseSwitchBall
+            v-model="ballValues.dark"
+            label="Darning"
+            color="dark"
+          />
+          <BaseSwitchBall
+            v-model="ballValues.black"
+            label="Black"
+            color="black"
+          />
         </BaseFocusLoop>
       </NuiPreview>
 

diff --git a/components/form/BaseSwitchBall.vue b/components/form/BaseSwitchBall.vue
@@ -25,13 +25,56 @@ const props = withDefaults(
      *
      * @default 'primary'
      */
-    color?: 'primary' | 'info' | 'success' | 'warning' | 'danger'
+    color?:
+      | 'primary'
+      | 'info'
+      | 'success'
+      | 'warning'
+      | 'danger'
+      | 'dark'
+      | 'black'
+
+    /**
+     * Optional CSS classes to apply to the component inner elements.
+     */
+    classes?: {
+      /**
+       * CSS classes to apply to the wrapper element.
+       */
+      wrapper?: string | string[]
+
+      /**
+       * CSS classes to apply to the outer element.
+       */
+      outer?: string | string[]
+
+      /**
+       * CSS classes to apply to the input element.
+       */
+      input?: string | string[]
+
+      /**
+       * CSS classes to apply to the handle element.
+       */
+      handle?: string | string[]
+
+      /**
+       * CSS classes to apply to the track element.
+       */
+      track?: string | string[]
+
+      /**
+       * CSS classes to apply to the icon element.
+       */
+      icon?: string | string[]
+    }
   }>(),
   {
     id: undefined,
     label: undefined,
     sublabel: undefined,
     color: undefined,
+    classes: () => ({}),
   },
 )
 
@@ -48,6 +91,8 @@ const colors = {
   success: 'nui-switch-ball-success',
   warning: 'nui-switch-ball-warning',
   danger: 'nui-switch-ball-danger',
+  dark: 'nui-switch-ball-dark',
+  black: 'nui-switch-ball-black',
 } as Record<string, string>
 
 defineExpose({
@@ -64,20 +109,28 @@ defineExpose({
 </script>
 
 <template>
-  <label :for="id" class="nui-switch-ball" :class="color && colors[color]">
-    <span class="nui-switch-ball-outer">
+  <label
+    :for="id"
+    class="nui-switch-ball"
+    :class="[color && colors[color], props.classes?.wrapper]"
+  >
+    <span class="nui-switch-ball-outer" :class="props.classes?.outer">
       <input
         :id="id"
         ref="inputRef"
         :checked="modelValue"
         v-bind="$attrs"
         type="checkbox"
         class="nui-switch-ball-input peer"
+        :class="props.classes?.input"
         @change="modelValue = !modelValue"
       />
-      <span class="nui-switch-ball-handle"></span>
-      <span class="nui-switch-ball-track"></span>
-      <IconCheck class="nui-switch-ball-icon" />
+      <span
+        class="nui-switch-ball-handle"
+        :class="props.classes?.handle"
+      ></span>
+      <span class="nui-switch-ball-track" :class="props.classes?.track"></span>
+      <IconCheck class="nui-switch-ball-icon" :class="props.classes?.icon" />
     </span>
     <span v-if="!props.sublabel" class="nui-switch-ball-single-label">
       {{ props.label }}

diff --git a/components/form/BaseSwitchThin.vue b/components/form/BaseSwitchThin.vue
@@ -25,13 +25,51 @@ const props = withDefaults(
      *
      * @default 'primary'
      */
-    color?: 'primary' | 'info' | 'success' | 'warning' | 'danger'
+    color?:
+      | 'primary'
+      | 'info'
+      | 'success'
+      | 'warning'
+      | 'danger'
+      | 'dark'
+      | 'black'
+
+    /**
+     * Optional CSS classes to apply to the component inner elements.
+     */
+    classes?: {
+      /**
+       * CSS classes to apply to the wrapper element.
+       */
+      wrapper?: string | string[]
+
+      /**
+       * CSS classes to apply to the outer element.
+       */
+      outer?: string | string[]
+
+      /**
+       * CSS classes to apply to the input element.
+       */
+      input?: string | string[]
+
+      /**
+       * CSS classes to apply to the handle element.
+       */
+      handle?: string | string[]
+
+      /**
+       * CSS classes to apply to the track element.
+       */
+      track?: string | string[]
+    }
   }>(),
   {
     id: undefined,
     label: undefined,
     sublabel: undefined,
     color: undefined,
+    classes: () => ({}),
   },
 )
 
@@ -48,6 +86,8 @@ const colors = {
   success: 'nui-switch-thin-success',
   warning: 'nui-switch-thin-warning',
   danger: 'nui-switch-thin-danger',
+  dark: 'nui-switch-thin-dark',
+  black: 'nui-switch-thin-black',
 } as Record<string, string>
 
 defineExpose({
@@ -64,19 +104,27 @@ defineExpose({
 </script>
 
 <template>
-  <label :for="id" class="nui-switch-thin" :class="color && colors[color]">
-    <span class="nui-switch-thin-outer">
+  <label
+    :for="id"
+    class="nui-switch-thin"
+    :class="[color && colors[color], props.classes?.wrapper]"
+  >
+    <span class="nui-switch-thin-outer" :class="props.classes?.outer">
       <input
         :id="id"
         ref="inputRef"
         :checked="modelValue"
         v-bind="$attrs"
         type="checkbox"
         class="nui-switch-thin-input peer"
+        :class="props.classes?.input"
         @change="modelValue = !modelValue"
       />
-      <span class="nui-switch-thin-handle"></span>
-      <span class="nui-switch-thin-track"></span>
+      <span
+        class="nui-switch-thin-handle"
+        :class="props.classes?.handle"
+      ></span>
+      <span class="nui-switch-thin-track" :class="props.classes?.track"></span>
     </span>
     <span v-if="!props.sublabel" class="nui-switch-thin-single-label">
       {{ props.label }}