[Bug]: Checkbox and other controls have use of computed which is causing compiler error

[juliusfriedman]

Reproduction

Build a project and share the components via a package. See error below.

Describe the bug

const delegatedProps = computed(() => {
  const { class: cls, ...delegated } = props;

  return delegated;
});

Consider the above code which is always passed to

const forwarded = useForwardPropsEmits(delegatedProps, emits);

1) Why is this a computed? Removing class is not a good enough reason IMHO. 2) Why can't the transform step just put the following code instead?

const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>();
const emits = defineEmits<CheckboxRootEmits>();
const forwarded = useForwardPropsEmits(props, emits);

Error recieved during compilation

error TS2345: Argument of type '{ value: { defaultChecked: boolean; checked: boolean | "indeterminate" | undefined; disabled: boolean; required: boolean; name: string | undefined; value: string | undefined; id: string | undefined; asChild: boolean; as: AsTag | ... 1 more ... | undefined; }; [ComputedRefSymbol]: true; effect: ReactiveEffect<...>; [...' is not assignable to parameter of type 'Partial<{ value: string; as: Component<any, any, any, ComputedOptions, MethodOptions, {}, any> | AsTag; checked: boolean | "indeterminate"; }> & Omit<...> & Record<...>'.
Type '{ value: { defaultChecked: boolean; checked: boolean | "indeterminate" | undefined; disabled: boolean; required: boolean; name: string | undefined; value: string | undefined; id: string | undefined; asChild: boolean; as: AsTag | ... 1 more ... | undefined; }; [ComputedRefSymbol]: true; effect: ReactiveEffect<...>; [...' is not assignable to type 'Partial<{ value: string; as: Component<any, any, any, ComputedOptions, MethodOptions, {}, any> | AsTag; checked: boolean | "indeterminate"; }>'.
Types of property 'value' are incompatible.
Type '{ defaultChecked: boolean; checked: boolean | "indeterminate" | undefined; disabled: boolean; required: boolean; name: string | undefined; value: string | undefined; id: string | undefined; asChild: boolean; as: AsTag | ... 1 more ... | undefined; }' is not assignable to type 'string'.

With latest radix-vue I think the problem is resolved.... at least I don't seem to get errors like this anymore

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'.ts-plugin(2345)

It looked to me like a bug in the transformer called by the add step but I was not sure...

Thanks for your help!

p.s. Just as FYI I see it done the way I expect in most other places in Github(https://github.com/zernonia/vue0/blob/2b70e106c70c9d0a95229f0342f1a6e21bfb3962/components/ui/checkbox/Checkbox.vue)

System Info

shadcn-vue@latest

 System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 12.20 GB / 31.73 GB
  Binaries:
    Node: 20.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (125.0.2535.92)
    Internet Explorer: 11.0.19041.4355

Contributes

• [X] I am willing to submit a PR to fix this issue
• [X] I am willing to submit a PR with failing tests

[sadeghbarati]

Can you share your radix-vue version?

[juliusfriedman]

"radix-vue": "^1.4.1" has the bug where as "radix-vue": "^1.8.3" does not seem to have it...

[sadeghbarati]

Ok, nice 👍

Use this amazing tool to keep your dependencies fresh

https://github.com/antfu-collective/taze