fix(theme): dynamic template updates

build.config.ts

@@ -11,7 +11,7 @@ export default defineBuildConfig({
       delimiters: ['', ''],
       values: {
         // Used in development to import directly from theme
-        'process.argv.includes(\'--uiDev\')': 'false'
+        'const isUiDev = true': 'const isUiDev = false'
       }
     }
   },

docs/app/components/content/examples/modal/ModalProgrammaticExample.vue

@@ -13,9 +13,7 @@ const modal = overlay.create(LazyModalExample, {
 })
 
 async function open() {
-  const instance = modal.open()
+  const shouldIncrement = await modal.open()
-
-  const shouldIncrement = await instance.result
 
   if (shouldIncrement) {
     count.value++

docs/app/components/content/examples/slideover/SlideoverProgrammaticExample.vue

@@ -13,9 +13,7 @@ const slideover = overlay.create(LazySlideoverExample, {
 })
 
 async function open() {
-  const instance = slideover.open()
+  const shouldIncrement = await slideover.open()
-
-  const shouldIncrement = await instance.result
 
   if (shouldIncrement) {
     count.value++

docs/content/2.composables/use-overlay.md

@@ -66,13 +66,6 @@ Update an overlay using its `id`
 
 Removes the overlay from the DOM using its `id`
 
-- Parameters:
-  - `id`: The identifier of the overlay
-
-### `isOpen(id: symbol): boolean`
-
-Checks if an overlay its open using its `id`
-
 - Parameters:
   - `id`: The identifier of the overlay
 

package.json

@@ -86,7 +86,6 @@
   },
   "style": "./dist/runtime/index.css",
   "main": "./dist/module.mjs",
-  "types": "./dist/types.d.mts",
   "files": [
     ".nuxt/ui",
     ".nuxt/ui.css",
@@ -97,12 +96,12 @@
   "scripts": {
     "build": "nuxt-module-build build",
     "prepack": "pnpm build",
-    "dev": "nuxi dev playground --uiDev",
+    "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
-    "dev:vue": "vite playground-vue -- --uiDev",
+    "dev:vue": "vite playground-vue",
     "dev:vue:build": "vite build playground-vue",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare docs && vite build playground-vue",
-    "docs": "nuxi dev docs --uiDev",
+    "docs": "nuxi dev docs",
     "docs:build": "nuxi build docs",
     "docs:prepare": "nuxt-component-meta docs",
     "lint": "eslint .",

src/runtime/composables/useOverlay.ts

@@ -122,12 +122,6 @@ function _useOverlay() {
     return overlay
   }
 
-  const isOpen = (id: symbol): boolean => {
-    const overlay = getOverlay(id)
-
-    return overlay.isOpen
-  }
-
   return {
     overlays,
     open,
@@ -135,8 +129,7 @@ function _useOverlay() {
     closeAll,
     create,
     patch,
-    unMount,
+    unMount
-    isOpen
   }
 }
 

src/templates.ts

@@ -1,6 +1,5 @@
-import { fileURLToPath } from 'node:url'
 import { kebabCase } from 'scule'
-import { addTemplate, addTypeTemplate } from '@nuxt/kit'
+import { addTemplate, addTypeTemplate, updateTemplates } from '@nuxt/kit'
 import type { Nuxt, NuxtTemplate, NuxtTypeTemplate } from '@nuxt/schema'
 import type { Resolver } from '@nuxt/kit'
 import type { ModuleOptions } from './module'
@@ -50,19 +49,6 @@ export function getTemplates(options: ModuleOptions, uiConfig: Record<string, an
           })
         }
 
-        // For local development, import directly from theme
-        if (process.argv.includes('--uiDev')) {
-          const templatePath = fileURLToPath(new URL(`./theme/${kebabCase(component)}`, import.meta.url))
-          return [
-            `import template from ${JSON.stringify(templatePath)}`,
-            ...generateVariantDeclarations(variants),
-            `const result = typeof template === 'function' ? (template as Function)(${JSON.stringify(options, null, 2)}) : template`,
-            `const theme = ${json}`,
-            `export default result as typeof theme`
-          ].join('\n\n')
-        }
-
-        // For production build
         return [
           ...generateVariantDeclarations(variants),
           `export default ${json}`
@@ -196,6 +182,7 @@ export {}
 
 export function addTemplates(options: ModuleOptions, nuxt: Nuxt, resolve: Resolver['resolve']) {
   const templates = getTemplates(options, nuxt.options.appConfig.ui)
+
   for (const template of templates) {
     if (template.filename!.endsWith('.d.ts')) {
       addTypeTemplate(template as NuxtTypeTemplate)
@@ -204,6 +191,28 @@ export function addTemplates(options: ModuleOptions, nuxt: Nuxt, resolve: Resolv
     }
   }
 
+  // For local module development, watch changes in themes
+  const isUiDev = true
+  if (isUiDev) {
+    nuxt.options.watch.push(resolve('./theme'))
+
+    nuxt.hook('builder:watch', async (event, path) => {
+      await updateTemplates({
+        filter: (template) => {
+          if (template.filename.startsWith('ui/') && template.filename !== 'ui/index.ts') {
+            const templatePath = template.filename.replace(/^ui/, 'src/theme')
+
+            if (path.endsWith(templatePath)) {
+              console.log(`[nuxt-ui] template ${templatePath} changed`)
+              return true
+            }
+          }
+          return false
+        }
+      })
+    })
+  }
+
   nuxt.hook('prepare:types', ({ references }) => {
     references.push({ path: resolve('./runtime/types/app.config.d.ts') })
   })

src/theme/calendar.ts

@@ -7,7 +7,7 @@ export default (options: Required<ModuleOptions>) => ({
     body: 'flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0',
     heading: 'text-center font-medium truncate mx-auto',
     grid: 'w-full border-collapse select-none space-y-1 focus:outline-none',
-    gridRow: 'grid grid-cols-7 place-items-center',
+    gridRow: 'grid grid-cols-7',
     gridWeekDaysRow: 'mb-1 grid w-full grid-cols-7',
     gridBody: 'grid',
     headCell: 'rounded-md',