@nuxt/ui 3.0.0-alpha.9 → 3.0.0-beta.2

package/cli/templates.mjs

@@ -30,14 +30,14 @@ const component = ({ name, primitive, pro, prose, content }) => {
     contents: primitive
       ? `
 <script lang="ts">
-import { tv } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
+import { tv } from '${pro ? '#ui/utils/tv' : '../utils/tv'}'
 
-const appConfig = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}
+const appConfig${camelName} = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}
 
-const ${camelName} = tv({ extend: tv(theme), ...(appConfig.${key}?.${prose ? 'prose?.' : ''}${camelName} || {}) })
+const ${camelName} = tv({ extend: tv(theme), ...(appConfig${camelName}.${key}?.${prose ? 'prose?.' : ''}${camelName} || {}) })
 
 export interface ${upperName}Props {
   /**
@@ -55,9 +55,9 @@ export interface ${upperName}Slots {
 </script>
 
 <script setup lang="ts">
-import { Primitive } from 'radix-vue'
+import { Primitive } from 'reka-ui'
 
-const props = withDefaults(defineProps<${upperName}Props>(), { as: 'div' })
+const props = defineProps<${upperName}Props>()
 defineSlots<${upperName}Slots>()
 
 const ui = ${camelName}()
@@ -71,15 +71,16 @@ const ui = ${camelName}()
 `
       : `
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
-import type { ${upperName}RootProps, ${upperName}RootEmits } from 'radix-vue'
+import type { VariantProps } from 'tailwind-variants'
+import type { ${upperName}RootProps, ${upperName}RootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
+import { tv } from '${pro ? '#ui/utils/tv' : '../utils/tv'}'
 
-const appConfig = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}
+const appConfig${camelName} = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}
 
-const ${camelName} = tv({ extend: tv(theme), ...(appConfig.${key}?.${prose ? 'prose?.' : ''}${camelName} || {}) })
+const ${camelName} = tv({ extend: tv(theme), ...(appConfig${camelName}.${key}?.${prose ? 'prose?.' : ''}${camelName} || {}) })
 
 type ${upperName}Variants = VariantProps<typeof ${camelName}>
 
@@ -94,7 +95,7 @@ export interface ${upperName}Slots {}
 </script>
 
 <script setup lang="ts">
-import { ${upperName}Root, useForwardPropsEmits } from 'radix-vue'
+import { ${upperName}Root, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 
 const props = defineProps<${upperName}Props>()
@@ -149,7 +150,7 @@ import ComponentRender from '../${content ? '../' : ''}component-render'
 describe('${upperName}', () => {
   it.each([
     // Props
-    ['with as', { props: { as: 'div' } }],
+    ['with as', { props: { as: 'section' } }],
     ['with class', { props: { class: '' } }],
     ['with ui', { props: { ui: {} } }],
     // Slots
@@ -163,20 +164,24 @@ describe('${upperName}', () => {
   }
 }
 
-const doc = ({ name, pro }) => {
+const docs = ({ name, pro, primitive }) => {
   const kebabName = kebabCase(name)
   const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
 
   return {
-    filename: `docs/content/${pro ? 'pro' : '3.components'}/${kebabName}.md`,
+    filename: `docs/content/3.components/${kebabName}.md`,
     contents: `---
-description:
-links: ${pro
+title: ${upperName}
+description: ''${pro
+  ? `
+module: ui-pro`
+  : ''}
+links:${primitive
   ? ''
   : `
   - label: ${upperName}
-    icon: i-custom-radix-vue
-    to: https://www.radix-vue.com/components/${kebabName}.html`}
+    icon: i-custom-reka-ui
+    to: https://reka-ui.com/docs/components/${kebabName}`}
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/${pro ? 'ui-pro' : 'ui'}/tree/v3/src/runtime/components/${upperName}.vue
@@ -190,19 +195,19 @@ links: ${pro
 
 ### Props
 
-:component-props
+:component-props${pro ? '{pro}' : ''}
 
 ### Slots
 
-:component-slots
+:component-slots${pro ? '{pro}' : ''}
 
 ### Emits
 
-:component-emits
+:component-emits${pro ? '{pro}' : ''}
 
 ## Theme
 
-:component-theme
+:component-theme${pro ? '{pro}' : ''}
 `
   }
 }
@@ -212,5 +217,5 @@ export default {
   component,
   theme,
   test,
-  doc
+  docs
 }

package/dist/module.cjs

@@ -2,137 +2,13 @@
 
 const defu = require('defu');
 const kit = require('@nuxt/kit');
-const templates = require('./shared/ui.BPnAe4QS.cjs');
-const devtoolsKit = require('@nuxt/devtools-kit');
-const sirv = require('sirv');
-require('get-port-please');
-const scule = require('scule');
-const fs = require('node:fs');
+const templates = require('./shared/ui.DfK2RX6G.cjs');
 require('../dist/runtime/utils/index.js');
 require('node:url');
+require('scule');
+require('tailwindcss/colors');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
-
-const defu__default = /*#__PURE__*/_interopDefaultCompat(defu);
-const sirv__default = /*#__PURE__*/_interopDefaultCompat(sirv);
-const fs__default = /*#__PURE__*/_interopDefaultCompat(fs);
-
-const devtoolsComponentMeta = {};
-function extractDevtoolsMeta(code) {
-  const match = code.match(/extendDevtoolsMeta(?:<.*?>)?\(/);
-  if (!match)
-    return null;
-  const startIndex = code.indexOf(match[0]) + match[0].length;
-  let openBraceCount = 0;
-  let closeBraceCount = 0;
-  let endIndex = startIndex;
-  for (let i = startIndex; i < code.length; i++) {
-    if (code[i] === "{")
-      openBraceCount++;
-    if (code[i] === "}")
-      closeBraceCount++;
-    if (openBraceCount > 0 && openBraceCount === closeBraceCount) {
-      endIndex = i + 1;
-      break;
-    }
-  }
-  return code.slice(startIndex, endIndex).trim();
-}
-function devtoolsMetaPlugin({ resolve, options, templates }) {
-  return {
-    name: "ui-devtools-component-meta",
-    enforce: "pre",
-    async transform(code, id) {
-      if (!id.match(/\/runtime\/components\/\w+.vue/))
-        return;
-      const fileName = id.split("/")[id.split("/").length - 1];
-      if (code && fileName) {
-        const slug = scule.kebabCase(fileName.replace(/\..*/, ""));
-        const match = extractDevtoolsMeta(code);
-        if (match) {
-          const metaObject = new Function(`return ${match}`)();
-          devtoolsComponentMeta[slug] = { meta: { devtools: { ...metaObject } } };
-        }
-      }
-      return {
-        code
-      };
-    },
-    configureServer(server) {
-      server.middlewares.use("/__nuxt_ui__/devtools/api/component-meta", async (_req, res) => {
-        res.setHeader("Content-Type", "application/json");
-        try {
-          const componentMeta = await import('./chunks/component-meta.cjs');
-          const meta = defu__default(
-            Object.entries(componentMeta.default).reduce((acc, [key, value]) => {
-              if (!key.startsWith("U"))
-                return acc;
-              const name = key.substring(1);
-              const slug = scule.kebabCase(name);
-              const template = templates?.[scule.camelCase(name)];
-              if (devtoolsComponentMeta[slug] === void 0) {
-                const path = resolve(`./runtime/components/${name}.vue`);
-                const code = fs__default.readFileSync(path, "utf-8");
-                const match = extractDevtoolsMeta(code);
-                if (match) {
-                  const metaObject = new Function(`return ${match}`)();
-                  devtoolsComponentMeta[slug] = { meta: { devtools: { ...metaObject } } };
-                } else {
-                  devtoolsComponentMeta[slug] = null;
-                }
-              }
-              value.meta.props = value.meta.props.map((prop) => {
-                let defaultValue = prop.default ? prop.default : prop?.tags?.find((tag) => tag.name === "defaultValue" && !tag.text?.includes("appConfig"))?.text ?? template?.defaultVariants?.[prop.name];
-                if (typeof defaultValue === "string")
-                  defaultValue = defaultValue?.replaceAll(/["'`]/g, "");
-                if (defaultValue === "true")
-                  defaultValue = true;
-                if (defaultValue === "false")
-                  defaultValue = false;
-                if (!Number.isNaN(Number.parseInt(defaultValue)))
-                  defaultValue = Number.parseInt(defaultValue);
-                return {
-                  ...prop,
-                  default: defaultValue
-                };
-              });
-              const label = key.replace(/^U/, options.prefix ?? "U");
-              acc[scule.kebabCase(key.replace(/^U/, ""))] = { ...value, label, slug };
-              return acc;
-            }, {}),
-            devtoolsComponentMeta
-          );
-          res.end(JSON.stringify(meta));
-        } catch (error) {
-          console.error(`Failed to fetch component meta`, error);
-          res.statusCode = 500;
-          res.end(JSON.stringify({ error: "Failed to fetch component meta" }));
-        }
-      });
-      server.middlewares.use("/__nuxt_ui__/devtools/api/component-example", async (req, res) => {
-        const query = new URL(req.url, "http://localhost").searchParams;
-        const name = query.get("component");
-        if (!name) {
-          res.statusCode = 400;
-          res.end(JSON.stringify({ error: "Component name is required" }));
-          return;
-        }
-        try {
-          const path = resolve(`./devtools/runtime/examples/${name}.vue`);
-          const source = fs__default.readFileSync(path, "utf-8");
-          res.setHeader("Content-Type", "application/json");
-          res.end(JSON.stringify({ component: name, source }));
-        } catch (error) {
-          console.error(`Failed to read component source for ${name}:`, error);
-          res.statusCode = 500;
-          res.end(JSON.stringify({ error: "Failed to read component source" }));
-        }
-      });
-    }
-  };
-}
-
 const module$1 = kit.defineNuxtModule({
   meta: {
     name: "ui",
@@ -140,7 +16,7 @@ const module$1 = kit.defineNuxtModule({
     compatibility: {
       nuxt: ">=3.13.1"
     },
-    docs: "https://ui3.nuxt.dev/getting-started/installation"
+    docs: "https://ui3.nuxt.dev/getting-started/installation/nuxt"
   },
   defaults: templates.defaultOptions,
   async setup(options, nuxt) {
@@ -158,23 +34,21 @@ const module$1 = kit.defineNuxtModule({
     } else {
       nuxt.options.postcss.plugins["@tailwindcss/postcss"] = {};
     }
-    async function registerModule(name, options2) {
+    async function registerModule(name, key, options2) {
       if (!kit.hasNuxtModule(name)) {
         await kit.installModule(name, options2);
       } else {
-        nuxt.options[name] = defu.defu(nuxt.options[name], options2);
+        nuxt.options[key] = defu.defu(nuxt.options[key], options2);
       }
     }
-    await registerModule("@nuxt/icon", { cssLayer: "components" });
+    await registerModule("@nuxt/icon", "icon", { cssLayer: "components" });
     if (options.fonts) {
-      await registerModule("@nuxt/fonts", { experimental: { processCSSVariables: true } });
+      await registerModule("@nuxt/fonts", "fonts", { experimental: { processCSSVariables: true } });
     }
     if (options.colorMode) {
-      await registerModule("@nuxtjs/color-mode", { classSuffix: "", disableTransition: true });
+      await registerModule("@nuxtjs/color-mode", "colorMode", { classSuffix: "", disableTransition: true });
     }
     kit.addPlugin({ src: resolve("./runtime/plugins/colors") });
-    kit.addPlugin({ src: resolve("./runtime/plugins/modal") });
-    kit.addPlugin({ src: resolve("./runtime/plugins/slideover") });
     kit.addComponentsDir({
       path: resolve("./runtime/components"),
       prefix: options.prefix,
@@ -182,42 +56,6 @@ const module$1 = kit.defineNuxtModule({
     });
     kit.addImportsDir(resolve("./runtime/composables"));
     templates.addTemplates(options, nuxt, resolve);
-    if (nuxt.options.dev && nuxt.options.devtools.enabled && options.devtools?.enabled) {
-      const templates$1 = templates.buildTemplates(options);
-      nuxt.options.vite = defu.defu(nuxt.options?.vite, { plugins: [devtoolsMetaPlugin({ resolve, templates: templates$1, options })] });
-      {
-        nuxt.hook("vite:serverCreated", async (server) => {
-          server.middlewares.use("/__nuxt_ui__/devtools", sirv__default(resolve("../dist/client/devtools"), {
-            single: true,
-            dev: true
-          }));
-        });
-      }
-      nuxt.options.routeRules = defu.defu(nuxt.options.routeRules, { "/__nuxt_ui__/**": { ssr: false } });
-      kit.extendPages((pages) => {
-        if (pages.length) {
-          pages.unshift({
-            name: "ui-devtools",
-            path: "/__nuxt_ui__/components/:slug",
-            file: resolve("./devtools/runtime/DevtoolsRenderer.vue"),
-            meta: {
-              // https://github.com/nuxt/nuxt/pull/29366
-              // isolate: true
-              layout: false
-            }
-          });
-        }
-      });
-      devtoolsKit.addCustomTab({
-        name: "nuxt-ui",
-        title: "Nuxt UI",
-        icon: "/__nuxt_ui__/devtools/favicon.svg",
-        view: {
-          type: "iframe",
-          src: "/__nuxt_ui__/devtools"
-        }
-      });
-    }
   }
 });
 

package/dist/module.d.cts

@@ -5,19 +5,19 @@ interface ModuleOptions {
     /**
      * Prefix for components
      * @defaultValue `U`
-     * @link https://ui3.nuxt.dev/getting-started/installation#prefix
+     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#prefix
      */
     prefix?: string;
     /**
      * Enable or disable `@nuxt/fonts` module
      * @defaultValue `true`
-     * @link https://ui3.nuxt.dev/getting-started/installation#fonts
+     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#fonts
      */
     fonts?: boolean;
     /**
      * Enable or disable `@nuxtjs/color-mode` module
      * @defaultValue `true`
-     * @link https://ui3.nuxt.dev/getting-started/installation#colormode
+     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#colormode
      */
     colorMode?: boolean;
     /**
@@ -28,26 +28,16 @@ interface ModuleOptions {
         /**
          * Define the color aliases available for components
          * @defaultValue `['primary', 'secondary', 'success', 'info', 'warning', 'error']`
-         * @link https://ui3.nuxt.dev/getting-started/installation#themecolors
+         * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#themecolors
          */
         colors?: string[];
         /**
          * Enable or disable transitions on components
          * @defaultValue `true`
-         * @link https://ui3.nuxt.dev/getting-started/installation#themetransitions
+         * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#themetransitions
          */
         transitions?: boolean;
     };
-    /**
-     * Configuration for the Nuxt UI devtools.
-     */
-    devtools?: {
-        /**
-         * Enable or disable Nuxt UI devtools.
-         * @defaultValue `true`
-         */
-        enabled?: boolean;
-    };
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.d.mts

@@ -5,19 +5,19 @@ interface ModuleOptions {
     /**
      * Prefix for components
      * @defaultValue `U`
-     * @link https://ui3.nuxt.dev/getting-started/installation#prefix
+     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#prefix
      */
     prefix?: string;
     /**
      * Enable or disable `@nuxt/fonts` module
      * @defaultValue `true`
-     * @link https://ui3.nuxt.dev/getting-started/installation#fonts
+     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#fonts
      */
     fonts?: boolean;
     /**
      * Enable or disable `@nuxtjs/color-mode` module
      * @defaultValue `true`
-     * @link https://ui3.nuxt.dev/getting-started/installation#colormode
+     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#colormode
      */
     colorMode?: boolean;
     /**
@@ -28,26 +28,16 @@ interface ModuleOptions {
         /**
          * Define the color aliases available for components
          * @defaultValue `['primary', 'secondary', 'success', 'info', 'warning', 'error']`
-         * @link https://ui3.nuxt.dev/getting-started/installation#themecolors
+         * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#themecolors
          */
         colors?: string[];
         /**
          * Enable or disable transitions on components
          * @defaultValue `true`
-         * @link https://ui3.nuxt.dev/getting-started/installation#themetransitions
+         * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#themetransitions
          */
         transitions?: boolean;
     };
-    /**
-     * Configuration for the Nuxt UI devtools.
-     */
-    devtools?: {
-        /**
-         * Enable or disable Nuxt UI devtools.
-         * @defaultValue `true`
-         */
-        enabled?: boolean;
-    };
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.d.ts

@@ -5,19 +5,19 @@ interface ModuleOptions {
     /**
      * Prefix for components
      * @defaultValue `U`
-     * @link https://ui3.nuxt.dev/getting-started/installation#prefix
+     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#prefix
      */
     prefix?: string;
     /**
      * Enable or disable `@nuxt/fonts` module
      * @defaultValue `true`
-     * @link https://ui3.nuxt.dev/getting-started/installation#fonts
+     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#fonts
      */
     fonts?: boolean;
     /**
      * Enable or disable `@nuxtjs/color-mode` module
      * @defaultValue `true`
-     * @link https://ui3.nuxt.dev/getting-started/installation#colormode
+     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#colormode
      */
     colorMode?: boolean;
     /**
@@ -28,26 +28,16 @@ interface ModuleOptions {
         /**
          * Define the color aliases available for components
          * @defaultValue `['primary', 'secondary', 'success', 'info', 'warning', 'error']`
-         * @link https://ui3.nuxt.dev/getting-started/installation#themecolors
+         * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#themecolors
          */
         colors?: string[];
         /**
          * Enable or disable transitions on components
          * @defaultValue `true`
-         * @link https://ui3.nuxt.dev/getting-started/installation#themetransitions
+         * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#themetransitions
          */
         transitions?: boolean;
     };
-    /**
-     * Configuration for the Nuxt UI devtools.
-     */
-    devtools?: {
-        /**
-         * Enable or disable Nuxt UI devtools.
-         * @defaultValue `true`
-         */
-        enabled?: boolean;
-    };
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

@@ -4,8 +4,8 @@
   "compatibility": {
     "nuxt": ">=3.13.1"
   },
-  "docs": "https://ui3.nuxt.dev/getting-started/installation",
-  "version": "3.0.0-alpha.9",
+  "docs": "https://ui3.nuxt.dev/getting-started/installation/nuxt",
+  "version": "3.0.0-beta.2",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"