Type the size prop according to the available sizes

[thunfisch987]

Is your feature request related to a problem? Please describe.

It's not a problem per se but it would be nice to get autocomplete on the size prop.

Describe the solution you'd like

type all size props to the available sizes:
size: "3xs" | "xs" | "md" | "lg" aaand so on

Describe alternatives you've considered

I don't know if the solution above works, because i don't know if you can set your own sizes (did not find anything in the docs).
In that case you'd probably have to read in the tailwind.config.ts 🤔

Additional context

[thunfisch987]

i'm willing to make a PR to set it for every component, but i don't know if the sizes are customizable

[benjamincanac]

The size and all the other props depends on your app.config.ts:

• https://github.com/nuxtlabs/ui/blob/dev/src/runtime/app.config.ts#L148
• https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Button.vue#L67

However, you can override the app.config.ts entirely and make your own sizes.

Maybe it would work to type it with something like this?

  size: {
      type: String as PropType<typeof appConfig.ui.button.size>,
      default: () => appConfig.ui.button.default.size,
      validator (value: string) {
        return Object.keys(appConfig.ui.button.size).includes(value)
      }
    }

[thunfisch987]

i wanted to test it out locally so i forked and cloned it, but couldn't test it / run it because i need the Token 🤔
am i doing something wrong?

[benjamincanac]

You can run the docs and the playground in dev mode, you just can't generate the docs.

[ItMaga]

I think if import appConfig from '#build/app.config' is typed, it should work, won't it?

  size: {
      type: String as PropType<keyof typeof appConfig.ui.button.size>,
      default: () => appConfig.ui.button.default.size,
      validator (value: string) {
        return Object.keys(appConfig.ui.button.size).includes(value)
      }
    }