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

… components & type props (#692)

Co-authored-by: Pooya Parsa <pooya@pi0.io>

.github/workflows/ci-dev.yml

@@ -52,12 +52,12 @@ jobs:
       - name: Lint
         run: pnpm run lint
 
-      - name: Build
-        run: pnpm run build
-
       - name: Typecheck
         run: pnpm run typecheck
 
+      - name: Build
+        run: pnpm run build
+
       - name: Release Edge
         if: github.event_name == 'push'
         run: ./scripts/release-edge.sh

.github/workflows/ci.yml

@@ -52,12 +52,12 @@ jobs:
       - name: Lint
         run: pnpm run lint
 
-      - name: Build
-        run: pnpm run build
-
       - name: Typecheck
         run: pnpm run typecheck
 
+      - name: Build
+        run: pnpm run build
+
       - name: Version Check
         id: check
         uses: EndBug/version-check@v2

.nuxtrc

@@ -0,0 +1,3 @@
+imports.autoImport=false
+typescript.includeWorkspace=true
+typescript.strict=false

docs/.nuxtrc

@@ -0,0 +1 @@
+imports.autoImport=true

docs/components/Footer.vue

@@ -24,10 +24,14 @@
     </template>
 
     <template #right>
-      <UButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" target="_blank" v-bind="$elements.button.secondary" />
-      <UButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxt_js" target="_blank" v-bind="$elements.button.secondary" />
-      <UButton aria-label="Nuxt UI on Discord" icon="i-simple-icons-discord" to="https://discord.com/channels/473401852243869706/1153996761426300948" target="_blank" v-bind="$elements.button.secondary" />
-      <UButton aria-label="Nuxt UI on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" target="_blank" v-bind="$elements.button.secondary" />
+      <UButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" target="_blank" v-bind="($elements.button.secondary as any)" />
+      <UButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxt_js" target="_blank" v-bind="($elements.button.secondary as any)" />
+      <UButton aria-label="Nuxt UI on Discord" icon="i-simple-icons-discord" to="https://discord.com/channels/473401852243869706/1153996761426300948" target="_blank" v-bind="($elements.button.secondary as any)" />
+      <UButton aria-label="Nuxt UI on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" target="_blank" v-bind="($elements.button.secondary as any)" />
     </template>
   </UFooter>
 </template>
+
+<script setup lang="ts">
+// force typescript
+</script>

docs/components/Header.vue

@@ -27,7 +27,7 @@
         icon="i-simple-icons-github"
         aria-label="GitHub"
         class="hidden lg:inline-flex"
-        v-bind="$elements.button.secondary"
+        v-bind="($elements.button.secondary as any)"
       />
     </template>
 

docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue

@@ -27,17 +27,15 @@ const links = [{
   to: 'https://github.com/smarroufin',
   target: '_blank'
 }]
-
-const { ui } = useAppConfig()
 </script>
 
 <template>
   <UVerticalNavigation :links="links">
     <template #avatar="{ link }">
       <UAvatar
         v-if="link.avatar"
-        v-bind="{ size: ui.verticalNavigation.avatar.size, ...link.avatar }"
-        :class="[ui.verticalNavigation.avatar.base]"
+        v-bind="link.avatar"
+        size="3xs"
         loading="lazy"
       />
       <UIcon v-else name="i-heroicons-user-circle-20-solid" class="text-lg" />

docs/content/1.getting-started/3.theming.md

@@ -1,5 +1,7 @@
 ---
 description: 'Learn how to customize the look and feel of the components.'
+navigation:
+  badge: New
 ---
 
 ## Overview
@@ -79,7 +81,7 @@ This can also happen when you bind a dynamic color to a component: `<UBadge :col
 
 ### `app.config.ts`
 
-Components are styled with Tailwind CSS but classes are all defined in the default [app.config.ts](https://github.com/nuxt/ui/blob/dev/src/runtime/app.config.ts) file. You can override those in your own `app.config.ts`.
+Components are styled with Tailwind CSS but classes are all defined in the default [ui.config.ts](https://github.com/nuxt/ui/blob/dev/src/runtime/ui.config.ts) file. You can override those in your own `app.config.ts`.
 
 ```ts [app.config.ts]
 export default defineAppConfig({
@@ -91,6 +93,25 @@ export default defineAppConfig({
 })
 ```
 
+Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `app.config.ts` is smartly merged with the default config. This means you don't have to rewrite everything.
+
+You can change this behaviour by setting `strategy` to `override` in your `app.config.ts`: :u-badge{label="New" class="!rounded-full" variant="subtle"}
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    strategy: 'override',
+    button: {
+      color: {
+        white: {
+          solid: 'bg-white dark:bg-gray-900'
+        }
+      }
+    }
+  }
+})
+```
+
 ### `ui` prop
 
 Each component has a `ui` prop that allows you to customize everything specifically.
@@ -113,25 +134,36 @@ For example, the default preset of the `FormGroup` component looks like this:
 
 ```json
 {
-  ...
   "label": {
-    "base": "block font-medium text-gray-700 dark:text-gray-200",
-    ...
+    "base": "block font-medium text-gray-700 dark:text-gray-200"
   }
-  ...
 }
 ```
 
 To change the font of the `label`, you only need to write:
 
 ```vue
-<UFormGroup name="email" label="Email" :ui="{ label: { base: 'font-semibold' } }">
-  ...
-</UFormGroup>
+<UFormGroup name="email" label="Email" :ui="{ label: { base: 'font-semibold' } }" />
 ```
 
 This will smartly replace the `font-medium` by `font-semibold` and prevent any class duplication and any class priority issue.
 
+You can change this behaviour by setting `strategy` to `override` inside the `ui` prop: :u-badge{label="New" class="!rounded-full" variant="subtle"}
+
+```vue
+<UButton
+  to="https://github.com/nuxt/ui"
+  :ui="{
+    strategy: 'override',
+    color: {
+      white: {
+        solid: 'bg-white dark:bg-gray-900'
+      }
+    }
+  }"
+/>
+```
+
 ### `class` attribute
 
 You can also use the `class` attribute to add classes to the component.

docs/content/5.navigation/1.vertical-navigation.md

@@ -125,17 +125,15 @@ const links = [{
   to: 'https://github.com/benjamincanac',
   target: '_blank'
 }, ...]
-
-const { ui } = useAppConfig()
 </script>
 
 <template>
   <UVerticalNavigation :links="links">
     <template #avatar="{ link }">
       <UAvatar
         v-if="link.avatar"
-        v-bind="{ size: ui.verticalNavigation.avatar.size, ...link.avatar }"
-        :class="[ui.verticalNavigation.avatar.base]"
+        v-bind="link.avatar"
+        size="3xs"
       />
       <UIcon v-else name="i-heroicons-user-circle-20-solid" class="text-lg" />
     </template>

docs/nuxt.config.ts

@@ -76,10 +76,6 @@ export default defineNuxtConfig({
       exposed: false
     }
   },
-  typescript: {
-    strict: false,
-    includeWorkspace: true
-  },
   hooks: {
     // Related to https://github.com/nuxt/nuxt/pull/22558
     'components:extend': (components) => {

docs/package.json

@@ -10,7 +10,7 @@
     "@nuxt/content": "npm:@nuxt/content-edge@2.8.2-28246255.cae34d7",
     "@nuxt/devtools": "^0.8.3",
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28246521.0e46d44",
+    "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28253627.e4bd6ad",
     "@nuxthq/studio": "^0.14.1",
     "@nuxtjs/fontaine": "^0.4.1",
     "@nuxtjs/google-fonts": "^3.0.2",

package.json

@@ -25,8 +25,8 @@
     "build:docs": "nuxi generate docs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "typecheck": "nuxi typecheck",
-    "prepare": "nuxi prepare docs",
+    "typecheck": "vue-tsc --noEmit && nuxi typecheck docs",
+    "prepare": "nuxt-module-build --stub && nuxt-module-build prepare && nuxi prepare docs",
     "release": "release-it"
   },
   "dependencies": {
@@ -45,9 +45,10 @@
     "@vueuse/integrations": "^10.4.1",
     "@vueuse/math": "^10.4.1",
     "defu": "^6.1.2",
+    "fuse.js": "^6.6.2",
     "ohash": "^1.1.3",
+    "pathe": "^1.1.1",
     "scule": "^1.0.0",
-    "fuse.js": "^6.6.2",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.3"
   },
@@ -61,9 +62,9 @@
     "release-it": "^16.1.5",
     "typescript": "^5.2.2",
     "unbuild": "^2.0.0",
+    "valibot": "^0.15.0",
     "vue-tsc": "^1.8.11",
     "yup": "^1.2.0",
-    "zod": "^3.22.2",
-    "valibot": "^0.15.0"
+    "zod": "^3.22.2"
   }
 }

src/module.ts

@@ -1,12 +1,12 @@
-import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, createResolver, addPlugin, resolvePath } from '@nuxt/kit'
+import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, createResolver, addPlugin } from '@nuxt/kit'
 import defaultColors from 'tailwindcss/colors.js'
 import { defaultExtractor as createDefaultExtractor } from 'tailwindcss/lib/lib/defaultExtractor.js'
 import { iconsPlugin, getIconCollections } from '@egoist/tailwindcss-icons'
 import { name, version } from '../package.json'
 import { generateSafelist, excludeColors, customSafelistExtractor } from './colors'
-import appConfig from './runtime/app.config'
-
-type DeepPartial<T> = Partial<{ [P in keyof T]: DeepPartial<T[P]> | { [key: string]: string } }>
+import createTemplates from './templates'
+import * as config from './runtime/ui.config'
+import type { DeepPartial, Strategy } from './runtime/types/utils'
 
 const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
 
@@ -16,13 +16,21 @@ delete defaultColors.trueGray
 delete defaultColors.coolGray
 delete defaultColors.blueGray
 
+type UI = {
+  primary?: string
+  gray?: string
+  colors?: string[]
+  strategy?: Strategy
+} & DeepPartial<typeof config>
+
+declare module 'nuxt/schema' {
+  interface AppConfigInput {
+    ui?: UI
+  }
+}
 declare module '@nuxt/schema' {
   interface AppConfigInput {
-    ui?: {
-      primary?: string
-      gray?: string
-      colors?: string[]
-    } & DeepPartial<typeof appConfig.ui>
+    ui?: UI
   }
 }
 
@@ -64,12 +72,9 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.options.build.transpile.push(runtimeDir)
     nuxt.options.build.transpile.push('@popperjs/core', '@headlessui/vue')
 
-    nuxt.options.css.push(resolve(runtimeDir, 'ui.css'))
+    nuxt.options.alias['#ui'] = runtimeDir
 
-    const appConfigFile = await resolvePath(resolve(runtimeDir, 'app.config'))
-    nuxt.hook('app:resolve', (app) => {
-      app.configs.push(appConfigFile)
-    })
+    nuxt.options.css.push(resolve(runtimeDir, 'ui.css'))
 
     nuxt.hook('tailwindcss:config', function (tailwindConfig) {
       const globalColors: any = {
@@ -117,10 +122,10 @@ export default defineNuxtModule<ModuleOptions>({
       const colors = excludeColors(globalColors)
 
       nuxt.options.appConfig.ui = {
-        ...nuxt.options.appConfig.ui,
         primary: 'green',
         gray: 'cool',
-        colors
+        colors,
+        strategy: 'merge'
       }
 
       tailwindConfig.safelist = tailwindConfig.safelist || []
@@ -130,6 +135,8 @@ export default defineNuxtModule<ModuleOptions>({
       tailwindConfig.plugins.push(iconsPlugin({ collections: getIconCollections(options.icons as any[]) }))
     })
 
+    createTemplates(nuxt)
+
     // Modules
 
     await installModule('@nuxtjs/color-mode', { classSuffix: '' })