chore(module): update

src/module.ts

@@ -1,11 +1,12 @@
 import { defu } from 'defu'
 import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addVitePlugin, addPlugin, installModule } from '@nuxt/kit'
 import tailwindcss from '@tailwindcss/vite'
-import createTemplates from './templates'
+import addTemplates from './templates'
 import icons from './theme/icons'
 
 export interface ModuleOptions {
-  colors: string[]
+  prefix?: string
+  colors?: string[]
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -17,6 +18,7 @@ export default defineNuxtModule<ModuleOptions>({
     }
   },
   defaults: {
+    prefix: 'U',
     colors: ['primary', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchia', 'pink', 'rose']
   },
   async setup (options, nuxt) {
@@ -30,7 +32,7 @@ export default defineNuxtModule<ModuleOptions>({
       icons
     })
 
-    createTemplates(options, nuxt)
+    addTemplates(options, nuxt)
 
     addVitePlugin(tailwindcss)
 
@@ -43,7 +45,7 @@ export default defineNuxtModule<ModuleOptions>({
 
     addComponentsDir({
       path: resolve('./runtime/components'),
-      prefix: 'U',
+      prefix: options.prefix,
       pathPrefix: false
     })
 

src/runtime/components/Button.vue

@@ -4,9 +4,7 @@ import appConfig from '#build/app.config'
 import type { LinkProps } from '#ui/components/Link.vue'
 import theme from '#build/ui/button'
 
-// @ts-ignore
-const button = tv(theme)
-// const button = tv({ extend: tv(theme), ...(appConfig.ui?.button || {}) })
+const button = tv({ extend: tv(theme), ...(appConfig.ui?.button || {}) })
 
 type ButtonVariants = VariantProps<typeof button>
 

src/runtime/components/Tooltip.vue

@@ -1,11 +1,10 @@
 <script lang="ts">
 import { tv } from 'tailwind-variants'
 import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps } from 'radix-vue'
-// import appConfig from '#build/app.config'
+import appConfig from '#build/app.config'
 import theme from '#build/ui/tooltip'
 
-const tooltip = tv(theme)
-// const tooltip = tv({ extend: tv(theme), ...(appConfig.ui?.tooltip || {}) })
+const tooltip = tv({ extend: tv(theme), ...(appConfig.ui?.tooltip || {}) })
 
 export interface TooltipProps extends TooltipRootProps, Omit<TooltipContentProps, 'as' | 'asChild'> {
   text?: string
@@ -35,7 +34,7 @@ const props = withDefaults(defineProps<TooltipProps>(), {
   text: '',
   side: 'bottom',
   delayDuration: 0,
-
+  sideOffset: 8,
   class: undefined,
   ui: undefined
 })

src/templates.ts

@@ -25,8 +25,8 @@ export default function createTemplates (options: ModuleOptions, nuxt: Nuxt) {
         --color-cool-900: #111827;
         --color-cool-950: #030712;
 
-        ${shades.map(shade => `--color-primary-${shade}: var(--color-${nuxt.options.appConfig.ui.primary}-${shade});`).join('\n')}
-        ${shades.map(shade => `--color-gray-${shade}: var(--color-${nuxt.options.appConfig.ui.gray}-${shade});`).join('\n')}
+        ${shades.map(shade => `--color-primary-${shade}: var(--color-primary-${shade});`).join('\n')}
+        ${shades.map(shade => `--color-gray-${shade}: var(--color-gray-${shade});`).join('\n')}
       }
     `
   })
@@ -37,10 +37,18 @@ export default function createTemplates (options: ModuleOptions, nuxt: Nuxt) {
     const template = (theme as any)[component]
     const result = typeof template === 'function' ? template({ colors: options.colors }) : template
 
+    const variants = Object.keys(result.variants || {})
+
+    let json = JSON.stringify(result, null, 2)
+
+    for (const variant of variants) {
+      json = json.replaceAll(new RegExp(`("${variant}": "[0-9a-z]+")`, 'g'), '$1 as const')
+    }
+
     addTemplate({
       filename: `ui/${component}.ts`,
       write: true,
-      getContents: () => `export default ${JSON.stringify(result, null, 2)}`
+      getContents: () => `export default ${json}`
     })
   }