From 0ad6743e969b74e5301a94bdfcecf958e8faca48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20CG?= <victorcg@empathy.co>
Date: Tue, 6 Aug 2024 15:31:00 +0200
Subject: [PATCH] refactor(base-switch): migrate component to vue3

---
 .../src/components/index.ts                   |  1 +
 .../src/components/test-base-switch.vue       | 18 ++++++++++++++++
 packages/_vue3-migration-test/src/router.ts   |  8 ++++++-
 .../components/__tests__/base-switch.spec.ts  |  8 +++----
 .../src/components/base-switch.vue            | 21 ++++++++++++-------
 5 files changed, 44 insertions(+), 12 deletions(-)
 create mode 100644 packages/_vue3-migration-test/src/components/test-base-switch.vue

diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index 02759c42c3..d9005ffb9a 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/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';
diff --git a/packages/_vue3-migration-test/src/components/test-base-switch.vue b/packages/_vue3-migration-test/src/components/test-base-switch.vue
new file mode 100644
index 0000000000..a7cc3cb9b3
--- /dev/null
+++ b/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>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index c188737156..d08a611bd9 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/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
   }
 ];
 
diff --git a/packages/x-components/src/components/__tests__/base-switch.spec.ts b/packages/x-components/src/components/__tests__/base-switch.spec.ts
index 99369a9465..b0037b71a9 100644
--- a/packages/x-components/src/components/__tests__/base-switch.spec.ts
+++ b/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;
 }
diff --git a/packages/x-components/src/components/base-switch.vue b/packages/x-components/src/components/base-switch.vue
index d6c305db12..3367793d7c 100644
--- a/packages/x-components/src/components/base-switch.vue
+++ b/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
       };