@nuxt/ui 3.0.0-alpha.8 → 3.0.0-beta.1

package/cli/commands/make/locale.mjs

@@ -0,0 +1,64 @@
+import { existsSync, promises as fsp } from 'node:fs'
+import { resolve } from 'pathe'
+import { consola } from 'consola'
+import { appendFile, sortFile, normalizeLocale } from '../../utils.mjs'
+import { defineCommand } from 'citty'
+
+export default defineCommand({
+  meta: {
+    name: 'locale',
+    description: 'Make a new locale.'
+  },
+  args: {
+    code: {
+      description: 'Locale code to create. For example: en.',
+      required: true
+    },
+    name: {
+      description: 'Locale name to create. For example: English.',
+      required: true
+    },
+    dir: {
+      description: 'Locale direction. For example: rtl.',
+      default: 'ltr'
+    }
+  },
+  async setup({ args }) {
+    const path = resolve('.')
+    const localePath = resolve(path, `src/runtime/locale`)
+
+    const originLocaleFilePath = resolve(localePath, 'en.ts')
+    const newLocaleFilePath = resolve(localePath, `${args.code}.ts`)
+
+    // Validate locale code
+    if (existsSync(newLocaleFilePath)) {
+      consola.error(`🚨 ${args.code} already exists!`)
+      process.exit(1)
+    }
+
+    if (!['ltr', 'rtl'].includes(args.dir)) {
+      consola.error(`🚨 Direction ${args.dir} not supported!`)
+      process.exit(1)
+    }
+
+    if (!args.code.match(/^[a-z]{2}(?:_[a-z]{2,4})?$/)) {
+      consola.error(`🚨 ${args.code} is not a valid locale code!\nExample: en or en_us`)
+      process.exit(1)
+    }
+
+    // Create new locale export
+    const localeExportFile = resolve(localePath, `index.ts`)
+    await appendFile(localeExportFile, `export { default as ${args.code} } from './${args.code}'`)
+    await sortFile(localeExportFile)
+
+    // Create new locale file
+    await fsp.copyFile(originLocaleFilePath, newLocaleFilePath)
+    const localeFile = await fsp.readFile(newLocaleFilePath, 'utf-8')
+    const rewrittenLocaleFile = localeFile
+      .replace(/name: '(.*)',/, `name: '${args.name}',`)
+      .replace(/code: '(.*)',/, `code: '${normalizeLocale(args.code)}',${(args.dir && args.dir !== 'ltr') ? `\n  dir: '${args.dir}',` : ''}`)
+    await fsp.writeFile(newLocaleFilePath, rewrittenLocaleFile)
+
+    consola.success(`🪄 Generated ${newLocaleFilePath}`)
+  }
+})

package/cli/index.mjs

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import { defineCommand, runMain } from 'citty'
-import init from './commands/init.mjs'
+import make from './commands/make/index.mjs'
 
 const main = defineCommand({
   meta: {
@@ -8,7 +8,7 @@ const main = defineCommand({
     description: 'Nuxt UI CLI'
   },
   subCommands: {
-    init
+    make
   }
 })
 

package/cli/package.json

@@ -6,8 +6,8 @@
   },
   "dependencies": {
     "citty": "^0.1.6",
-    "consola": "^3.2.3",
-    "pathe": "^1.1.2",
+    "consola": "^3.4.0",
+    "pathe": "^2.0.3",
     "scule": "^1.3.0"
   }
 }

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,9 +164,58 @@ describe('${upperName}', () => {
   }
 }
 
+const docs = ({ name, pro, primitive }) => {
+  const kebabName = kebabCase(name)
+  const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
+
+  return {
+    filename: `docs/content/3.components/${kebabName}.md`,
+    contents: `---
+title: ${upperName}
+description: ''${pro
+  ? `
+module: ui-pro`
+  : ''}
+links:${primitive
+  ? ''
+  : `
+  - label: ${upperName}
+    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
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props${pro ? '{pro}' : ''}
+
+### Slots
+
+:component-slots${pro ? '{pro}' : ''}
+
+### Emits
+
+:component-emits${pro ? '{pro}' : ''}
+
+## Theme
+
+:component-theme${pro ? '{pro}' : ''}
+`
+  }
+}
+
 export default {
   playground,
   component,
   theme,
-  test
+  test,
+  docs
 }

package/cli/utils.mjs

@@ -15,3 +15,17 @@ export async function appendFile(path, contents) {
     await fsp.writeFile(path, file.trim() + '\n' + contents + '\n')
   }
 }
+
+export function normalizeLocale(locale) {
+  if (!locale) {
+    return ''
+  }
+
+  if (locale.includes('_')) {
+    return locale.split('_')
+      .map((part, index) => index === 0 ? part.toLowerCase() : part.toUpperCase())
+      .join('-')
+  }
+
+  return locale.toLowerCase()
+}

package/dist/module.cjs

@@ -2,137 +2,13 @@
 
 const defu = require('defu');
 const kit = require('@nuxt/kit');
-const templates = require('./shared/ui.BU7wzH0D.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,41 +56,6 @@ const module$1 = kit.defineNuxtModule({
     });
     kit.addImportsDir(resolve("./runtime/composables"));
     templates.addTemplates(options, nuxt, resolve);
-    nuxt.options.vite = defu.defu(nuxt.options?.vite, { optimizeDeps: { include: ["fast-deep-equal"] } });
-    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) => {
-        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.8",
+  "docs": "https://ui3.nuxt.dev/getting-started/installation/nuxt",
+  "version": "3.0.0-beta.1",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"