From 5e22ffc03770660b8f159b06c2129dba17aa22a2 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Sat, 30 Dec 2023 00:24:20 +0330
Subject: [PATCH] fix: toggle not setting pressed property on init (#223)

* fix: toggle not setting pressed property on init

* refactor: move class outside of toggleVariants
---
 .../lib/registry/default/ui/toggle/Toggle.vue | 17 +++++++++++++----
 .../registry/new-york/ui/toggle/Toggle.vue    | 19 ++++++++++++++-----
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue b/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue
index 3797d38a..bb15d616 100644
--- a/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue
+++ b/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue
@@ -2,7 +2,7 @@
 import type { ToggleEmits, ToggleProps } from 'radix-vue'
 import { Toggle, useForwardPropsEmits } from 'radix-vue'
 import type { VariantProps } from 'class-variance-authority'
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 import { toggleVariants } from '.'
 import { cn } from '@/lib/utils'
 
@@ -13,6 +13,11 @@ interface Props extends ToggleProps {
   size?: ToggleVariantProps['size']
   disabled?: boolean
 }
+
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<Props>(), {
   variant: 'default',
   size: 'default',
@@ -26,13 +31,17 @@ const toggleProps = computed(() => {
   return otherProps
 })
 
-const forwarded = useForwardPropsEmits(toggleProps, emits)
+const { class: className, ...rest } = useAttrs()
+const forwarded = useForwardPropsEmits(toggleProps.value, emits)
 </script>
 
 <template>
   <Toggle
-    v-bind="forwarded"
-    :class="cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))"
+    v-bind="{
+      ...forwarded,
+      ...rest,
+    }"
+    :class="cn(toggleVariants({ variant, size }), className ?? '')"
     :disabled="props.disabled"
   >
     <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue b/apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue
index ab02b84b..bb15d616 100644
--- a/apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue
@@ -2,7 +2,7 @@
 import type { ToggleEmits, ToggleProps } from 'radix-vue'
 import { Toggle, useForwardPropsEmits } from 'radix-vue'
 import type { VariantProps } from 'class-variance-authority'
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 import { toggleVariants } from '.'
 import { cn } from '@/lib/utils'
 
@@ -13,6 +13,11 @@ interface Props extends ToggleProps {
   size?: ToggleVariantProps['size']
   disabled?: boolean
 }
+
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<Props>(), {
   variant: 'default',
   size: 'default',
@@ -22,17 +27,21 @@ const emits = defineEmits<ToggleEmits>()
 
 const toggleProps = computed(() => {
   // eslint-disable-next-line unused-imports/no-unused-vars
-  const { variant, size, ...otherProps } = props
+  const { variant, size, disabled, ...otherProps } = props
   return otherProps
 })
 
-const forwarded = useForwardPropsEmits(toggleProps, emits)
+const { class: className, ...rest } = useAttrs()
+const forwarded = useForwardPropsEmits(toggleProps.value, emits)
 </script>
 
 <template>
   <Toggle
-    v-bind="forwarded"
-    :class="cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))"
+    v-bind="{
+      ...forwarded,
+      ...rest,
+    }"
+    :class="cn(toggleVariants({ variant, size }), className ?? '')"
     :disabled="props.disabled"
   >
     <slot />