refactor(base-switch): migrate component to vue3

packages/_vue3-migration-test/src/components/index.ts

@@ -19,3 +19,4 @@ export { default as TestTagging } from './tagging/test-tagging.vue';
 export { default as TestRenderlessExtraParam } from './extra-params/test-renderless-extra-param.vue';
 export { default as TestIcons } from './icons/test-icons.vue';
 export { default as TestDisplayEmitter } from './test-display-emitter.vue';
+export { default as TestBaseSwitch } from './test-base-switch.vue';

packages/_vue3-migration-test/src/components/test-base-switch.vue

@@ -0,0 +1,18 @@
+<template>
+  <p>Using props and events:</p>
+  <BaseSwitch @change="value = !value" :value="value" />
+  {{ value }}
+  <br />
+  <p>Using the `v-model` directive:</p>
+  <BaseSwitch v-model="value2" />
+  {{ value2 }}
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+
+  import BaseSwitch from '../../../x-components/src/components/base-switch.vue';
+
+  const value = ref(true);
+  const value2 = ref(true);
+</script>

packages/_vue3-migration-test/src/router.ts

@@ -49,7 +49,8 @@ import {
   TestRenderlessExtraParam,
   TestAnimationFactory,
   TestIcons,
-  TestDisplayEmitter
+  TestDisplayEmitter,
+  TestBaseSwitch
 } from './';
 
 const routes = [
@@ -302,6 +303,11 @@ const routes = [
     path: '/display-emitter',
     name: 'DisplayEmitter',
     component: TestDisplayEmitter
+  },
+  {
+    path: '/base-switch',
+    name: 'BaseSwitch',
+    component: TestBaseSwitch
   }
 ];
 

packages/x-components/src/components/__tests__/base-switch.spec.ts

@@ -1,4 +1,4 @@
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount, VueWrapper } from '@vue/test-utils';
 import BaseSwitch from '../base-switch.vue';
 
 function renderBaseSwitch({ template, value }: RenderBaseSwitchOptions): RenderBaseSwitchApi {
@@ -27,7 +27,7 @@ describe('testing Switch component', () => {
     });
 
     expect(wrapper.attributes('role')).toBe('switch');
-    expect(wrapper.attributes('aria-checked')).toBe('false');
+    expect(wrapper.attributes('aria-checked')).toBeFalsy();
     expect(wrapper.classes('x-switch--is-selected')).toBe(false);
     expect(wrapper.classes('x-selected')).toBe(false);
 
@@ -43,7 +43,7 @@ describe('testing Switch component', () => {
       value: false
     });
     expect(wrapper.attributes('role')).toBe('switch');
-    expect(wrapper.attributes('aria-checked')).toBe('false');
+    expect(wrapper.attributes('aria-checked')).toBeFalsy();
     expect(wrapper.classes('x-switch--is-selected')).toBe(false);
     expect(wrapper.classes('x-selected')).toBe(false);
 
@@ -69,5 +69,5 @@ interface RenderBaseSwitchApi {
   /**
    * The wrapper testing component instance.
    */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
 }

packages/x-components/src/components/base-switch.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     @click="toggle"
-    :aria-checked="value.toString()"
+    :aria-checked="currentValue || undefined"
     :class="cssClasses"
     class="x-switch"
     role="switch"
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent, ref, computed } from 'vue';
   import { VueCSSClasses } from '../utils/types';
 
   /**
@@ -32,11 +32,17 @@
     props: {
       value: {
         type: Boolean,
-        required: true
+        default: false
+      },
+      modelValue: {
+        type: Boolean,
+        default: false
       }
     },
-    emits: ['change', 'input'],
+    emits: ['change', 'update:modelValue'],
     setup(props, { emit }) {
+      const currentValue = computed(() => props.modelValue || props.value);
+
       /**
        * Dynamic CSS classes to add to the switch component
        * depending on its internal state.
@@ -45,7 +51,7 @@
        * @internal
        */
       const cssClasses = ref<VueCSSClasses>({
-        'x-switch--is-selected x-selected': props.value
+        'x-switch--is-selected x-selected': currentValue.value
       });
 
       /**
@@ -54,17 +60,18 @@
        * @internal
        */
       const toggle = (): void => {
-        const newValue = !props.value;
+        const newValue = !currentValue.value;
         cssClasses.value = {
           'x-switch--is-selected': newValue,
           'x-selected': newValue
         };
 
-        emit('input', newValue);
+        emit('update:modelValue', newValue);
         emit('change', newValue);
       };
 
       return {
+        currentValue,
         cssClasses,
         toggle
       };