feat(switch): added on-value and off-value props (#136)

IcetCode · jd-solanki · web-flow · commit 355a5fcc0ccd · 2023-03-01T14:53:32.000+05:30
Co-authored-by: jd-solanki &lt;jdsolanki0001@gmail.com&gt;
diff --git a/docs/components/demos/switch/DemoSwitchCustomModelValue.vue b/docs/components/demos/switch/DemoSwitchCustomModelValue.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const status = ref('enabled')
+const onValue = ref('enabled')
+const offValue = ref('disabled')
+</script>
+
+<template>
+  <div class="grid-row">
+    <ASwitch
+      v-model="status"
+      :on-value="onValue"
+      :off-value="offValue"
+    />
+    <span>Status: "{{ status }}"</span>
+  </div>
+</template>
diff --git a/docs/guide/components/switch.md b/docs/guide/components/switch.md
@@ -56,6 +56,17 @@ Use `on-icon` & `off-icon` prop to render icons inside switch dot.
 
 ::::
 
+<!-- Custom model values -->
+::::card Custom model values
+
+You can use `on-value` and `off-value` props to set custom `v-model` value.
+
+:::code DemoSwitchCustomModelValue
+<<< @/components/demos/switch/DemoSwitchCustomModelValue.vue{13,14}
+:::
+
+::::
+
 <!-- 👉 Sizing -->
 ::::card Sizing
 
diff --git a/packages/anu-vue/src/components/switch/ASwitch.vue b/packages/anu-vue/src/components/switch/ASwitch.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { defu } from 'defu'
-import type { ExtractPropTypes, PropType } from 'vue'
+import type { ExtractPropTypes } from 'vue'
 import { color as colorProp, disabled as disabledProp } from '@/composables/useProps'
 
 const props = defineProps({
@@ -20,7 +20,23 @@ const props = defineProps({
      * Bind v-model value
      */
   modelValue: {
-    type: [Boolean, Array, Set] as PropType<any[] | Set<any> | boolean>,
+    type: [Boolean, Number, String],
+    default: true,
+  },
+
+  /**
+   * Switch value when in on state
+   */
+  onValue: {
+    type: [Boolean, Number, String],
+    default: true,
+  },
+
+  /**
+   * Switch value when in off state
+   */
+  offValue: {
+    type: [Boolean, Number, String],
     default: false,
   },
 
@@ -39,7 +55,6 @@ const props = defineProps({
      */
   disabled: disabledProp,
 })
-
 const emit = defineEmits<{
   (e: 'update:modelValue', value: (ExtractPropTypes<typeof props>)['modelValue']): void
 }>()
@@ -50,11 +65,17 @@ defineOptions({
 
 const attrs = useAttrs()
 
+const isChecked = computed(() => props.modelValue === props.onValue)
+
+const handleChange = () => {
+  const val = isChecked.value ? props.offValue : props.onValue
+  emit('update:modelValue', val)
+}
+
 const elementId = `a-switch-${attrs.id || attrs.value}-${Math.random().toString(36).slice(2, 7)}`
-const data = useVModel(props, 'modelValue', emit)
 
 const dotPosition = computed(() => {
-  if (!data.value)
+  if (!isChecked.value)
     return { transform: 'translateX(0)' }
   else return { transform: 'translateX(calc(var(--a-switch-track-size) - 100% - (var(--a-switch-thumb-margin) *2 )))' }
 })
@@ -74,10 +95,10 @@ const dotPosition = computed(() => {
 
     <input
       :id="elementId"
-      v-model="data"
       class="hidden"
       role="switch"
       type="checkbox"
+      @change="handleChange"
     >
 
     <!-- 👉 Label -->
@@ -89,7 +110,7 @@ const dotPosition = computed(() => {
     <!-- min width should be double the dot size -->
     <div
       class="a-switch-toggle flex rounded-inherit min-w-$a-switch-track-size"
-      :class="data
+      :class="isChecked
         ? `bg-${props.color}`
         : 'bg-[hsl(var(--a-switch-default-color))]'"
     >
@@ -100,7 +121,7 @@ const dotPosition = computed(() => {
         <div
           class="a-switch-icon color-$a-switch-icon-color"
           :class="[
-            data
+            isChecked
               ? `${props.onIcon} text-${props.color}`
               : props.offIcon,
           ]"
diff --git a/packages/anu-vue/test/ASwitch.test.tsx b/packages/anu-vue/test/ASwitch.test.tsx
@@ -0,0 +1,30 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { ref } from 'vue'
+import { ASwitch } from '../src/components'
+
+describe('Testing ASwitch', () => {
+  it('expand switch value', async () => {
+    const modelValue = ref('100')
+    const onValue = ref('100')
+    const offValue = ref('0')
+
+    const wrapper = mount(() => (
+      <ASwitch
+        v-model={modelValue.value}
+        onValue={onValue.value}
+        offValue={offValue.value}
+      />
+    ), {
+      // trigger click on a label have an issue
+      // https://github.com/vuejs/vue-test-utils/issues/760
+      attachTo: document.body,
+    })
+
+    const coreWrapper = wrapper.find('.a-switch')
+    await coreWrapper.trigger('click')
+    expect(modelValue.value).toBe('0')
+    await wrapper.trigger('click')
+    expect(modelValue.value).toBe('100')
+  })
+})
diff --git a/packages/anu-vue/vite.config.ts b/packages/anu-vue/vite.config.ts
@@ -4,6 +4,7 @@ import vue from '@vitejs/plugin-vue'
 import AutoImport from 'unplugin-auto-import/vite'
 import VueMacros from 'unplugin-vue-macros/vite'
 import { defineConfig } from 'vitest/config'
+import vueJsx from '@vitejs/plugin-vue-jsx'
 
 const externals = [
   'vue',
@@ -44,6 +45,7 @@ export default defineConfig({
         vue: vue(),
       },
     }),
+    vueJsx(),
     AutoImport({
       imports: ['vue', '@vueuse/core'],
     }),
