feat(module)!: use tailwind-merge for app.config & move config to components & type props

[benjamincanac]

Resolves #703
Resolves #628
Resolves #669
Resolves #442

1. This PR will reduce the overall bundle size by only loading the config of the components you're actually using.

2. Props having a validator are now typed to have autocomplete:

3. app.config.ts is now smartly merged with the default config using tailwind-merge (like the ui prop`)

This will allow you (like explained in #509) to configure the components without rewriting everything:

export default defineAppConfig({
  ui: {
    primary: 'green',
    gray: 'slate',
    button: {
      color: {
        white: {
          solid: 'shadow-none'
        }
      }
    }
  }
})

The button.color.white.solid is 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400', doing so will only remove the shadow-sm.

The merging strategy defaults to merge but can be changed to its previous behaviour override to avoid breaking changes.

export default defineAppConfig({
  ui: {
    strategy: 'override',
    primary: 'green'
  }
})

It is now also possible to configure the strategy per component instance using the ui prop:

<UButton
  to="https://github.com/nuxt/ui"
  :ui="{
    strategy: 'override',
    color: {
      white: {
        solid: 'bg-white dark:bg-gray-900'
      }
    }
  }"
/>

This will override the solid variant of the button completely instead of merging the classes.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	Sep 20, 2023 3:59pm

[benjamincanac]

@romhml @aditio-eka To let you know, I just merged dev into this PR with #638 and I had to change a few things already due to my refactor:

• https://github.com/nuxt/ui/pull/692/files#diff-c15d350a9e18b6dd254123eb544293f650d3cdddb6dd1c51bd36f596c20d6351R4
• https://github.com/nuxt/ui/pull/692/files#diff-c15d350a9e18b6dd254123eb544293f650d3cdddb6dd1c51bd36f596c20d6351R160
• https://github.com/nuxt/ui/pull/692/files#diff-c15d350a9e18b6dd254123eb544293f650d3cdddb6dd1c51bd36f596c20d6351R264

Long story short, instead of omitting id from attrs, I override the id prop by the one from useFormGroup composable. Let me know if you see any issue with this!

[aditio-eka]

Hello @benjamincanac, I found a bug caused by this function. You can see the details here: #742. It's missing reactivity from the ui prop and the class attribute.

I suggest changing this source code to

type UIProps<T> = {
  ui: Partial<T & { strategy: Strategy }>
}

export const useUI = <T>(key, $props: UIProps<T>, $config?: T, { mergeWrapper = false }: { mergeWrapper?: boolean } = {}) => {
  const $attrs = useAttrs()
  const appConfig = useAppConfig()

  const ui = computed(() => {
    return mergeConfig<T>(
      $props.ui?.strategy || (appConfig.ui?.strategy as Strategy),
      mergeWrapper ? { wrapper: $attrs?.class } : {},
      $props.ui || {},
      process.dev ? get(appConfig.ui, key, {}) : {},
      toValue($config || {})
    )
  })
  const attrs = computed(() => omit($attrs, ['class']))
  const attrsClass = computed(() => mergeWrapper ? undefined : $attrs?.class as string)

  return {
    ui,
    attrs,
    attrsClass
  }
}

So, useUI should be used like this

const { ui, attrs, attrsClass } = useUI('button', props, config)

[benjamincanac]

This does makes sense, do you plan to open a PR to fix this?

[aditio-eka]

Yes, I have created a PR. You can view it here.