[Bug]: Switch component applying wrong prop types
RazorSiM opened this issue · comments
Reproduction
Describe the bug
I'm currently exploring shadcn-vue and I found a problem with typings in the Switch component.
In the original code, the props are passed and defined as following:
const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<SwitchRootEmits>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwarded = useForwardPropsEmits(delegatedProps, emits)The way the delegatedProps is defined, makes the SwitchRoot from radix-vue go crazy:
Argument of type '{ class: string; value: { defaultChecked: boolean; checked: boolean; disabled: boolean; required: boolean; name: string | undefined; id: string | undefined; value: string | undefined; asChild: boolean; as: AsTag | ... 1 more ... | undefined; }; [ComputedRefSymbol]: true; effect: ReactiveEffect<...>; [RefSymbol]: tru...' is not assignable to parameter of type 'Partial<{ value: string; as: AsTag | Component<any, any, any, ComputedOptions, MethodOptions, {}, any>; checked: boolean; }> & Omit<...> & Record<...>'.
Type '{ class: string; value: { defaultChecked: boolean; checked: boolean; disabled: boolean; required: boolean; name: string | undefined; id: string | undefined; value: string | undefined; asChild: boolean; as: AsTag | ... 1 more ... | undefined; }; [ComputedRefSymbol]: true; effect: ReactiveEffect<...>; [RefSymbol]: tru...' is not assignable to type 'Partial<{ value: string; as: AsTag | Component<any, any, any, ComputedOptions, MethodOptions, {}, any>; checked: boolean; }>'.
Types of property 'value' are incompatible.
Type '{ defaultChecked: boolean; checked: boolean; disabled: boolean; required: boolean; name: string | undefined; id: string | undefined; value: string | undefined; asChild: boolean; as: AsTag | Component | undefined; }' is not assignable to type 'string'.
Even though I checked how the useForwardPropsEmits() works, I couldn't find why the need of the delegatedProps composable.
I could solve my issue by:
const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<SwitchRootEmits>()
const forwarded = useForwardPropsEmits(props, emits)Am I missing anything here?
I can confirm the component is working correctly inside a form handled by vee-validate.
PS: I've set the reproduction link as the component itself. You should be able to check the type error by simply cloning and opening the Switch component.
System Info
System:
OS: Linux 6.9 Arch Linux
CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
Memory: 21.51 GB / 31.27 GB
Container: Yes
Shell: 5.9 - /usr/bin/zsh
Binaries:
Node: 20.13.1 - /run/user/1000/fnm_multishells/28698_1716837794409/bin/node
npm: 10.5.2 - /run/user/1000/fnm_multishells/28698_1716837794409/bin/npm
pnpm: 9.1.0 - /run/user/1000/fnm_multishells/28698_1716837794409/bin/pnpm
bun: 1.1.3 - ~/.bun/bin/bun
npmPackages:
@vueuse/core: ^10.10.0 => 10.10.0
nuxt: ^3.11.2 => 3.11.2
radix-vue: ^1.8.2 => 1.8.2
shadcn-nuxt: ^0.10.4 => 0.10.4Contributes
- I am willing to submit a PR to fix this issue
- I am willing to submit a PR with failing tests
This same issue exists in https://github.com/radix-vue/shadcn-vue/blob/dev/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue also.
