feat: Warpify Switch component (#35)

components/switch/w-switch.vue

@@ -1,42 +1,57 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { switchToggle as ccSwitch } from '@warp-ds/component-classes'
+import { createModel, modelProps } from 'create-v-model'
+import { id } from '#util'
+
+const p = defineProps({
+  id,
+  disabled: Boolean,
+  ...modelProps(),
+});
+
+const model = createModel({ props: p });
+const inputEl = ref(null);
+
+const switchClasses = computed(() => [
+  ccSwitch.label,
+  {
+    [ccSwitch.labelDisabled]: p.disabled
+  }
+]);
+
+const trackClasses = computed(() => [
+  ccSwitch.track,
+  {
+    [ccSwitch.trackActive]: model && !p.disabled,
+    [ccSwitch.trackInactive]: !model && !p.disabled,
+    [ccSwitch.trackDisabled]: p.disabled,
+  }
+]);
+
+const handleClasses = computed(() => [
+  ccSwitch.handle,
+  p.disabled ? ccSwitch.handleDisabled : ccSwitch.handleNotDisabled,
+  {
+    [ccSwitch.handleSelected]: model.value,
+  }
+]);
+
+const simulateClick = () => inputEl.value.click();
+</script>
+
 <template>
-  <div class="tap-highlight-transparent">
-    <input type="checkbox" class="sr-only" :id="id" v-model="model" :disabled="disabled" ref="inputEl" />
-    <div @click="simulateClick" :class="{ [c.label]: true, [c.labelDisabled]: disabled }">
-      <div :class="{
-        [c.switchTrack]: true,
-        [c.switchTrackSelected]: model && !disabled,
-        [c.switchTrackUnselected]: !model && !disabled,
-        [c.switchTrackDisabled]: disabled
-      }" />
-      <div :class="{
-        [c.switchThumb]: true,
-        [c.switchThumbSelected]: model,
-        [disabled ? c.switchThumbDisabled : c.switchThumbNotDisabled]: true
-      }" />
+  <div :class="ccSwitch.switch">
+    <input ref="inputEl" type="checkbox" :id="p.id" v-model="model" :class="ccSwitch.a11y" :disabled="p.disabled" />
+    <div @click="simulateClick" :class="switchClasses">
+      <div :class="trackClasses" />
+      <div :class="handleClasses" />
     </div>
   </div>
 </template>
 
 <script>
-import { ref } from 'vue'
-import { switchToggle as c } from '@fabric-ds/css/component-classes'
-import { createModel, modelProps } from 'create-v-model'
-import { id } from '#util'
-
 export default {
-  name: 'wSwitch',
-  props: {
-    id,
-    disabled: Boolean,
-    ...modelProps()
-  },
-  setup(props) {
-    const model = createModel({ props })
-    const inputEl = ref(null)
-
-    const simulateClick = () => inputEl.value.click()
-
-    return { model, c, inputEl, simulateClick }
-  }
-}
+  name: 'wSwitch'
+};
 </script>

dev/src/sidebar-config.js

@@ -27,6 +27,7 @@ export const sidebarConfig = [
       { to: 'input', title: 'Input' },
       { to: 'select', title: 'Select' },
       { to: 'slider', title: 'Slider' },
+      { to: 'switch', title: 'Switch' },
       { to: 'textarea', title: 'Textarea' },
       { to: 'toggle', title: 'Toggle' }
     ]

package.json

@@ -49,7 +49,7 @@
     "@vue/test-utils": "^2.0.2",
     "@warp-ds/core": "^1.0.0",
     "@warp-ds/component-classes": "^1.0.0-alpha.87",
-    "@warp-ds/uno": "1.0.0-alpha.28",
+    "@warp-ds/uno": "1.0.0-alpha.31",
     "cleave-lite": "^1.0.0",
     "cz-conventional-changelog": "^3.3.0",
     "drnm": "^0.9.0",