From c1ad5de0e20160b2e2e49f82ab5bf4cdeb28c490 Mon Sep 17 00:00:00 2001
From: khairulhaaziq <rhycoz@yahoo.com>
Date: Thu, 20 Jul 2023 00:37:14 +0800
Subject: [PATCH] fixed

---
 packages/radix-vue/src/Switch/SwitchRoot.vue  | 10 +--
 packages/radix-vue/src/Switch/SwitchThumb.vue |  5 +-
 .../vue3/src/components/Demo/SwitchDemo.vue   |  2 +-
 pnpm-lock.yaml                                | 80 ++++++++++++++++++-
 4 files changed, 87 insertions(+), 10 deletions(-)

diff --git a/packages/radix-vue/src/Switch/SwitchRoot.vue b/packages/radix-vue/src/Switch/SwitchRoot.vue
index 7353c7c78..37040b66a 100644
--- a/packages/radix-vue/src/Switch/SwitchRoot.vue
+++ b/packages/radix-vue/src/Switch/SwitchRoot.vue
@@ -18,7 +18,7 @@ export const SWITCH_INJECTION_KEY =
 
 export interface SwitchProvideValue {
   open?: Readonly<Ref<boolean>>;
-  toggleOpen: (value: string) => void;
+  toggleOpen: () => void;
   disabled: boolean;
 }
 </script>
@@ -53,7 +53,7 @@ provide<SwitchProvideValue>(SWITCH_INJECTION_KEY, {
 });
 
 function handleKeydown(e: KeyboardEvent) {
-  if (e.key === "Enter" || e.keyCode === 32) {
+  if (e.key === "Enter") {
     toggleOpen();
   }
 }
@@ -62,20 +62,21 @@ function handleKeydown(e: KeyboardEvent) {
 <template>
   <PrimitiveDiv
     :value="open"
-    role="checkbox"
+    role="switch"
     :aria-checked="open"
     :data-state="open ? 'checked' : 'unchecked'"
     :data-disabled="props.disabled ? '' : undefined"
     :as-child="props.asChild"
     style="position: relative"
   >
+    <slot />
     <input
       type="checkbox"
       :id="props.id"
       v-bind="open"
-      @change="toggleOpen"
       :checked="open"
       :name="props.name"
+      @click="toggleOpen"
       @keydown="handleKeydown"
       aria-hidden="true"
       :disabled="props.disabled"
@@ -84,6 +85,5 @@ function handleKeydown(e: KeyboardEvent) {
       :data-disabled="props.disabled ? '' : undefined"
       style="opacity: 0; position: absolute; inset: 0"
     />
-    <slot />
   </PrimitiveDiv>
 </template>
diff --git a/packages/radix-vue/src/Switch/SwitchThumb.vue b/packages/radix-vue/src/Switch/SwitchThumb.vue
index ca63f303a..2e64a6cf2 100644
--- a/packages/radix-vue/src/Switch/SwitchThumb.vue
+++ b/packages/radix-vue/src/Switch/SwitchThumb.vue
@@ -11,15 +11,14 @@ import {
 } from "./SwitchRoot.vue";
 
 const injectedValue = inject<SwitchProvideValue>(SWITCH_INJECTION_KEY);
-const props = defineProps<SwitchThumbProps>();
+defineProps<SwitchThumbProps>();
 </script>
 
 <template>
   <PrimitiveSpan
     :data-state="injectedValue?.open?.value ? 'checked' : 'unchecked'"
     :data-disabled="injectedValue?.disabled ? '' : undefined"
-    :as-child="props.asChild"
-    @click="injectedValue?.toggleOpen"
+    :as-child="asChild"
   >
     <slot />
   </PrimitiveSpan>
diff --git a/playground/vue3/src/components/Demo/SwitchDemo.vue b/playground/vue3/src/components/Demo/SwitchDemo.vue
index aa8cb7232..db4e2b07d 100644
--- a/playground/vue3/src/components/Demo/SwitchDemo.vue
+++ b/playground/vue3/src/components/Demo/SwitchDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SwitchRoot, SwitchThumb } from 'radix-vue'
+import { SwitchRoot, SwitchThumb } from '../../../../../packages/radix-vue/src'
 import { ref } from 'vue'
 
 const switchState = ref(true)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4ed105204..a99fa1db0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -150,6 +150,52 @@ importers:
         specifier: ^1.8.1
         version: 1.8.1(typescript@5.1.3)
 
+  playground/vue3:
+    dependencies:
+      radix-vue:
+        specifier: link:../../packages/radix-vue
+        version: link:../../packages/radix-vue
+      vue:
+        specifier: ^3.2.47
+        version: 3.3.4
+    devDependencies:
+      '@antfu/eslint-config':
+        specifier: ^0.39.7
+        version: 0.39.7(eslint@8.43.0)(typescript@5.1.3)
+      '@iconify/vue':
+        specifier: ^4.1.1
+        version: 4.1.1(vue@3.3.4)
+      '@radix-ui/colors':
+        specifier: ^1.0.0
+        version: 1.0.0
+      '@rollup/plugin-alias':
+        specifier: ^5.0.0
+        version: 5.0.0
+      '@vitejs/plugin-vue':
+        specifier: ^4.1.0
+        version: 4.2.3(vite@4.3.9)(vue@3.3.4)
+      autoprefixer:
+        specifier: ^10.4.14
+        version: 10.4.14(postcss@8.4.26)
+      eslint:
+        specifier: ^8.43.0
+        version: 8.43.0
+      postcss:
+        specifier: ^8.4.24
+        version: 8.4.26
+      tailwindcss:
+        specifier: ^3.3.2
+        version: 3.3.3
+      typescript:
+        specifier: ^5.0.2
+        version: 5.1.3
+      vite:
+        specifier: ^4.3.9
+        version: 4.3.9
+      vue-tsc:
+        specifier: ^1.4.2
+        version: 1.8.1(typescript@5.1.3)
+
 packages:
 
   /@aashutoshrathi/word-wrap@1.2.6:
@@ -1490,7 +1536,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.3.9(@types/node@18.16.18)
+      vite: 4.3.9
       vue: 3.3.4
     dev: true
 
@@ -5887,6 +5933,38 @@ packages:
       - supports-color
     dev: true
 
+  /vite@4.3.9:
+    resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.17.19
+      postcss: 8.4.26
+      rollup: 3.26.2
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /vite@4.3.9(@types/node@18.16.18):
     resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
     engines: {node: ^14.18.0 || >=16.0.0}