feat: match switch-thin component to related plugin (#69)

shuriken-ui · Aug 7, 2023 · 3e658a4 · 3e658a4
1 parent e608d4a
commit 3e658a4
Showing 1 changed file with 17 additions and 25 deletions.
diff --git a/components/form/BaseSwitchThin.vue b/components/form/BaseSwitchThin.vue
@@ -46,6 +46,14 @@ const value = useVModel(props, 'modelValue', emits)
 
 const id = useNinjaId(() => props.id)
 
+const colorStyle = {
+  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',
+}
+
 const inputRef = ref<HTMLInputElement>()
 defineExpose({
   /**
@@ -56,44 +64,28 @@ defineExpose({
 </script>
 
 <template>
-  <label :for="id" class="flex cursor-pointer items-center">
-    <span class="relative block h-4">
+  <label :for="id" class="nui-switch-thin" :class="colorStyle[props.color]">
+    <span class="nui-switch-thin-outer">
       <input
         :id="id"
         ref="inputRef"
         :checked="value"
         v-bind="$attrs"
         type="checkbox"
-        class="peer absolute z-20 h-full w-full cursor-pointer opacity-0"
+        class="nui-switch-thin-input peer"
         @change="value = !value"
       />
-      <span
-        class="border-muted-300 dark:border-muted-600 dark:bg-muted-700 absolute -start-1 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full border bg-white shadow transition peer-checked:-translate-y-1/2 peer-checked:translate-x-full rtl:peer-checked:-translate-x-full"
-      ></span>
-      <span
-        class="bg-muted-300 peer-focus:outline-muted-300 dark:bg-muted-600 dark:peer-focus:outline-muted-600 block h-4 w-10 rounded-full shadow-inner outline-1 outline-transparent transition-all duration-300 peer-focus:outline-dashed peer-focus:outline-offset-2 peer-focus:ring-0"
-        :class="[
-          props.color === 'primary' && 'peer-checked:bg-primary-400',
-          props.color === 'info' && 'peer-checked:bg-info-400',
-          props.color === 'success' && 'peer-checked:bg-success-400',
-          props.color === 'warning' && 'peer-checked:bg-warning-400',
-          props.color === 'danger' && 'peer-checked:bg-danger-400',
-        ]"
-      ></span>
+      <span class="nui-switch-thin-handle"></span>
+      <span class="nui-switch-thin-track"></span>
     </span>
-    <span
-      v-if="!props.sublabel"
-      class="text-muted-400 relative ms-3 cursor-pointer select-none font-sans text-sm"
-    >
+    <span v-if="!props.sublabel" class="nui-switch-thin-single-label">
       {{ props.label }}
     </span>
-    <span v-else class="ms-3">
-      <span
-        class="font-heading text-muted-800 block text-sm font-medium dark:text-white"
-      >
+    <span v-else class="nui-switch-thin-dual-label">
+      <span class="nui-switch-label">
         {{ props.label }}
       </span>
-      <span class="text-muted-400 block font-sans text-xs">
+      <span class="nui-switch-sublabel">
         {{ props.sublabel }}
       </span>
     </span>