Attribute shorthand not working with Indexed Access Types
Vue version
^3.2.47 and ^3.3.4
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-tkdgyx?file=src%2FApp.vue
Steps to reproduce
type ButtonProps = {
size: 'small' | 'medium';
disabled: boolean;
// disabled: boolean | undefined; // Index access types are not working
};
const props = withDefaults(
defineProps<{
size: ButtonProps['size'];
disabled?: ButtonProps['disabled']; // Index access types are not working
loading?: boolean | undefined; // Same as above but works (don't worry about undefined)
}>(),
{
size: 'medium',
disabled: undefined,
}
);
What is expected?
V-bind attribute with true value usually can be written in shorthand form.
<Button disabled size="medium" />
=> Button component have to receive disabled = true
I don't know if that's an issue or not fully supported yet. Thanks for watching and replying
What is actually happening?
I tried to inspect with vite-plugin-inspect
and see
mport { defineComponent as _defineComponent } from "vue";
const _sfc_main = /* @__PURE__ */ _defineComponent({
__name: "Button",
props: {
size: { type: null, required: true, default: "medium" },
disabled: { type: null, required: false, default: void 0 },
loading: { type: [Boolean, null], required: false }
},
setup(__props, { expose }) {
expose();
const props = __props;
console.log("### :: file: Button.vue:37 :: props:", props);
const __returned__ = { props };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
**});**
It looks like it's been normalized to null
by compiler-sfc
(I'm not sure )
System Info
No response
Any additional comments?
No response
It is functioning properly. see as well as your reproduction.
@edison1105 Maybe I made a mistake somewhere example above. But help me let check other reproduction:
A lot of libs like Vanilla-extra
, Class Variance Authority
, and Panda CSS
was the same issue as that