@nuxt/ui 3.0.0-alpha.1 → 3.0.0-alpha.11

package/dist/devtools/runtime/examples/TooltipExample.vue

@@ -0,0 +1,5 @@
+<template>
+  <UTooltip>
+    <div class="bg-[var(--ui-bg-accented)]/40 size-20" />
+  </UTooltip>
+</template>

package/dist/module.cjs

@@ -1,5 +1,224 @@
-module.exports = function(...args) {
-  return import('./module.mjs').then(m => m.default.call(this, ...args))
+'use strict';
+
+const defu = require('defu');
+const kit = require('@nuxt/kit');
+const templates = require('./shared/ui.DCjJwb6l.cjs');
+const devtoolsKit = require('@nuxt/devtools-kit');
+const sirv = require('sirv');
+require('get-port-please');
+const scule = require('scule');
+const fs = require('node:fs');
+require('../dist/runtime/utils/index.js');
+require('node:url');
+
+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();
 }
-const _meta = module.exports.meta = require('./module.json')
-module.exports.getMeta = () => Promise.resolve(_meta)
+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",
+    configKey: "ui",
+    compatibility: {
+      nuxt: ">=3.13.1"
+    },
+    docs: "https://ui3.nuxt.dev/getting-started/installation/nuxt"
+  },
+  defaults: templates.defaultOptions,
+  async setup(options, nuxt) {
+    const { resolve } = kit.createResolver((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('module.cjs', document.baseURI).href)));
+    options.theme = options.theme || {};
+    options.theme.colors = templates.resolveColors(options.theme.colors);
+    nuxt.options.ui = options;
+    nuxt.options.alias["#ui"] = resolve("./runtime");
+    nuxt.options.appConfig.ui = defu.defu(nuxt.options.appConfig.ui || {}, templates.getDefaultUiConfig(options.theme.colors));
+    nuxt.options.app.rootAttrs = nuxt.options.app.rootAttrs || {};
+    nuxt.options.app.rootAttrs.class = [nuxt.options.app.rootAttrs.class, "isolate"].filter(Boolean).join(" ");
+    if (nuxt.options.builder === "@nuxt/vite-builder") {
+      const plugin = await import('@tailwindcss/vite').then((r) => r.default);
+      kit.addVitePlugin(plugin());
+    } else {
+      nuxt.options.postcss.plugins["@tailwindcss/postcss"] = {};
+    }
+    async function registerModule(name, options2) {
+      if (!kit.hasNuxtModule(name)) {
+        await kit.installModule(name, options2);
+      } else {
+        nuxt.options[name] = defu.defu(nuxt.options[name], options2);
+      }
+    }
+    await registerModule("@nuxt/icon", { cssLayer: "components" });
+    if (options.fonts) {
+      await registerModule("@nuxt/fonts", { experimental: { processCSSVariables: true } });
+    }
+    if (options.colorMode) {
+      await registerModule("@nuxtjs/color-mode", { 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,
+      pathPrefix: false
+    });
+    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"
+        }
+      });
+    }
+  }
+});
+
+module.exports = module$1;

package/dist/module.d.cts

@@ -0,0 +1,54 @@
+import * as _nuxt_schema from '@nuxt/schema';
+export * from '../dist/runtime/types/index.js';
+
+interface ModuleOptions {
+    /**
+     * Prefix for components
+     * @defaultValue `U`
+     * @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/nuxt#fonts
+     */
+    fonts?: boolean;
+    /**
+     * Enable or disable `@nuxtjs/color-mode` module
+     * @defaultValue `true`
+     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#colormode
+     */
+    colorMode?: boolean;
+    /**
+     * Customize how the theme is generated
+     * @link https://ui3.nuxt.dev/getting-started/theme
+     */
+    theme?: {
+        /**
+         * Define the color aliases available for components
+         * @defaultValue `['primary', 'secondary', 'success', 'info', 'warning', 'error']`
+         * @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/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>;
+
+export { type ModuleOptions, _default as default };

package/dist/module.d.mts

@@ -4,19 +4,50 @@ export * from '../dist/runtime/types/index.js';
 interface ModuleOptions {
     /**
      * Prefix for components
-     * @defaultValue U
+     * @defaultValue `U`
+     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#prefix
      */
     prefix?: string;
     /**
-     * Colors to generate classes for (based on TailwindCSS colors)
-     * @defaultValue ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
+     * Enable or disable `@nuxt/fonts` module
+     * @defaultValue `true`
+     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#fonts
      */
-    colors?: string[];
+    fonts?: boolean;
     /**
-     * Disable color transitions
-     * @defaultValue true
+     * Enable or disable `@nuxtjs/color-mode` module
+     * @defaultValue `true`
+     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#colormode
      */
-    transitions?: boolean;
+    colorMode?: boolean;
+    /**
+     * Customize how the theme is generated
+     * @link https://ui3.nuxt.dev/getting-started/theme
+     */
+    theme?: {
+        /**
+         * Define the color aliases available for components
+         * @defaultValue `['primary', 'secondary', 'success', 'info', 'warning', 'error']`
+         * @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/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

@@ -4,19 +4,50 @@ export * from '../dist/runtime/types/index.js';
 interface ModuleOptions {
     /**
      * Prefix for components
-     * @defaultValue U
+     * @defaultValue `U`
+     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#prefix
      */
     prefix?: string;
     /**
-     * Colors to generate classes for (based on TailwindCSS colors)
-     * @defaultValue ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
+     * Enable or disable `@nuxt/fonts` module
+     * @defaultValue `true`
+     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#fonts
      */
-    colors?: string[];
+    fonts?: boolean;
     /**
-     * Disable color transitions
-     * @defaultValue true
+     * Enable or disable `@nuxtjs/color-mode` module
+     * @defaultValue `true`
+     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#colormode
      */
-    transitions?: boolean;
+    colorMode?: boolean;
+    /**
+     * Customize how the theme is generated
+     * @link https://ui3.nuxt.dev/getting-started/theme
+     */
+    theme?: {
+        /**
+         * Define the color aliases available for components
+         * @defaultValue `['primary', 'secondary', 'success', 'info', 'warning', 'error']`
+         * @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/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,7 +4,8 @@
   "compatibility": {
     "nuxt": ">=3.13.1"
   },
-  "version": "3.0.0-alpha.1",
+  "docs": "https://ui3.nuxt.dev/getting-started/installation/nuxt",
+  "version": "3.0.0-alpha.11",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"