@nuxt/ui 2.18.3 → 3.0.0-alpha.0

package/README.md

@@ -27,7 +27,24 @@ Read more on [ui.nuxt.com](https://ui.nuxt.com)
 ## Installation
 
 ```bash
-npx nuxi@latest module add ui
+# npm
+npm install @nuxt/ui
+# yarn
+yarn add @nuxt/ui
+# pnpm
+pnpm add @nuxt/ui
+# bun
+bun add @nuxt/ui
+```
+
+Then, register the module in your `nuxt.config.ts`:
+
+```js
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ]
+})
 ```
 
 If you want latest updates, please use `@nuxt/ui-edge` in your `package.json`:

package/cli/commands/init.mjs

@@ -0,0 +1,83 @@
+import { existsSync, promises as fsp } from 'node:fs'
+import { resolve } from 'pathe'
+import { defineCommand } from 'citty'
+import { consola } from 'consola'
+import { splitByCase, upperFirst, camelCase, kebabCase } from 'scule'
+import { appendFile, sortFile } from '../utils.mjs'
+import templates from '../templates.mjs'
+
+export default defineCommand({
+  meta: {
+    name: 'init',
+    description: 'Init a new component.'
+  },
+  args: {
+    name: {
+      type: 'positional',
+      required: true,
+      description: 'Name of the component.'
+    },
+    primitive: {
+      type: 'boolean',
+      description: 'Create a primitive component.'
+    },
+    pro: {
+      type: 'boolean',
+      description: 'Create a pro component.'
+    },
+    prose: {
+      type: 'boolean',
+      description: 'Create a prose component (with --pro).'
+    },
+    content: {
+      type: 'boolean',
+      description: 'Create a content component (with --pro).'
+    }
+  },
+  async setup({ args }) {
+    const name = args.name
+    if (!name) {
+      consola.error('`name` argument is missing!')
+      process.exit(1)
+    }
+
+    if (args.prose && !args.pro) {
+      consola.error('`--prose` flag can only be used with `--pro` flag!')
+      process.exit(1)
+    }
+    if (args.content && !args.pro) {
+      consola.error('`--content` flag can only be used with `--pro` flag!')
+      process.exit(1)
+    }
+
+    const path = resolve('.')
+
+    for (const template of Object.keys(templates)) {
+      const { filename, contents } = templates[template](args)
+      if (!contents) {
+        continue
+      }
+
+      const filePath = resolve(path, filename)
+
+      if (existsSync(filePath)) {
+        consola.error(`🚨 ${filePath} already exists!`)
+        continue
+      }
+
+      await fsp.writeFile(filePath, contents.trim() + '\n')
+
+      consola.success(`🪄 Generated ${filePath}!`)
+    }
+
+    const themePath = resolve(path, `src/theme/${args.prose ? 'prose/' : ''}${args.content ? 'content/' : ''}index.ts`)
+    await appendFile(themePath, `export { default as ${camelCase(name)} } from './${kebabCase(name)}'`)
+    await sortFile(themePath)
+
+    if (!args.prose) {
+      const typesPath = resolve(path, 'src/runtime/types/index.d.ts')
+      await appendFile(typesPath, `export * from '../components/${args.content ? 'content/' : ''}${splitByCase(name).map(p => upperFirst(p)).join('')}.vue'`)
+      await sortFile(typesPath)
+    }
+  }
+})

package/cli/index.mjs

@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+import { defineCommand, runMain } from 'citty'
+import init from './commands/init.mjs'
+
+const main = defineCommand({
+  meta: {
+    name: 'nuxt-ui',
+    description: 'Nuxt UI CLI'
+  },
+  subCommands: {
+    init
+  }
+})
+
+runMain(main)

package/cli/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@nuxt/ui-cli",
+  "type": "module",
+  "exports": {
+    ".": "./index.mjs"
+  },
+  "dependencies": {
+    "citty": "^0.1.6",
+    "consola": "^3.2.3",
+    "pathe": "^1.1.2",
+    "scule": "^1.3.0"
+  }
+}

package/cli/templates.mjs

@@ -0,0 +1,171 @@
+import { splitByCase, upperFirst, camelCase, kebabCase } from 'scule'
+
+const playground = ({ name, pro }) => {
+  const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
+  const kebabName = kebabCase(name)
+
+  return {
+    filename: `playground/pages/components/${kebabName}.vue`,
+    contents: pro
+      ? undefined
+      : `
+<template>
+  <div>
+    <U${upperName} />
+  </div>
+</template>
+`
+  }
+}
+
+const component = ({ name, primitive, pro, prose, content }) => {
+  const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
+  const camelName = camelCase(name)
+  const kebabName = kebabCase(name)
+  const key = pro ? 'uiPro' : 'ui'
+  const path = pro ? 'ui-pro' : 'ui'
+
+  return {
+    filename: `src/runtime/components/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${upperName}.vue`,
+    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}'
+
+const appConfig = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}
+
+const ${camelName} = tv({ extend: tv(theme), ...(appConfig.${key}?.${prose ? 'prose?.' : ''}${camelName} || {}) })
+
+export interface ${upperName}Props {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue \`div\`
+   */
+  as?: any
+  class?: any
+  ui?: Partial<typeof ${camelName}.slots>
+}
+
+export interface ${upperName}Slots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'radix-vue'
+
+const props = withDefaults(defineProps<${upperName}Props>(), { as: 'div' })
+defineSlots<${upperName}Slots>()
+
+const ui = ${camelName}()
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <slot />
+  </Primitive>
+</template>
+`
+      : `
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { ${upperName}RootProps, ${upperName}RootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
+
+const appConfig = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}
+
+const ${camelName} = tv({ extend: tv(theme), ...(appConfig.${key}?.${prose ? 'prose?.' : ''}${camelName} || {}) })
+
+type ${upperName}Variants = VariantProps<typeof ${camelName}>
+
+export interface ${upperName}Props extends Pick<${upperName}RootProps> {
+  class?: any
+  ui?: Partial<typeof ${camelName}.slots>
+}
+
+export interface ${upperName}Emits extends ${upperName}RootEmits {}
+
+export interface ${upperName}Slots {}
+</script>
+
+<script setup lang="ts">
+import { ${upperName}Root, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+
+const props = defineProps<${upperName}Props>()
+const emits = defineEmits<${upperName}Emits>()
+const slots = defineSlots<${upperName}Slots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props), emits)
+
+const ui = ${camelName}()
+</script>
+
+<template>
+  <${upperName}Root v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })" />
+</template>
+`
+  }
+}
+
+const theme = ({ name, prose, content }) => {
+  const kebabName = kebabCase(name)
+
+  return {
+    filename: `src/theme/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}.ts`,
+    contents: prose
+      ? `
+export default {
+  base: ''
+}
+`
+      : `
+export default {
+  slots: {
+    root: ''
+  }
+}
+`
+  }
+}
+
+const test = ({ name, prose, content }) => {
+  const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
+
+  return {
+    filename: `test/components/${content ? 'content/' : ''}${upperName}.spec.ts`,
+    contents: prose
+      ? undefined
+      : `
+import { describe, it, expect } from 'vitest'
+import ${upperName}, { type ${upperName}Props, type ${upperName}Slots } from '../../${content ? '../' : ''}src/runtime/components/${content ? 'content/' : ''}${upperName}.vue'
+import ComponentRender from '../${content ? '../' : ''}component-render'
+
+describe('${upperName}', () => {
+  it.each([
+    // Props
+    ['with as', { props: { as: 'div' } }],
+    ['with class', { props: { class: '' } }],
+    ['with ui', { props: { ui: {} } }],
+    // Slots
+    ['with default slot', { slots: { default: () => 'Default slot' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: ${upperName}Props, slots?: Partial<${upperName}Slots> }) => {
+    const html = await ComponentRender(nameOrHtml, options, ${upperName})
+    expect(html).toMatchSnapshot()
+  })
+})
+`
+  }
+}
+
+export default {
+  playground,
+  component,
+  theme,
+  test
+}

package/cli/utils.mjs

@@ -0,0 +1,17 @@
+import { promises as fsp } from 'node:fs'
+
+export async function sortFile(path) {
+  const file = await fsp.readFile(path, 'utf-8')
+
+  const lines = file.trim().split('\n').sort()
+
+  await fsp.writeFile(path, lines.join('\n') + '\n')
+}
+
+export async function appendFile(path, contents) {
+  const file = await fsp.readFile(path, 'utf-8')
+
+  if (!file.includes(contents)) {
+    await fsp.writeFile(path, file.trim() + '\n' + contents + '\n')
+  }
+}

package/dist/module.d.mts

@@ -1,39 +1,23 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import * as config from '../dist/runtime/ui.config/index.js';
-import { Strategy, DeepPartial } from '../dist/runtime/types/index.js';
+export * from '../dist/runtime/types/index.js';
 
-type UI = {
-    primary?: string;
-    gray?: string;
-    colors?: string[];
-    strategy?: Strategy;
-    [key: string]: any;
-} & DeepPartial<typeof config, string>;
-declare module 'nuxt/schema' {
-    interface AppConfigInput {
-        ui?: UI;
-    }
-}
-declare module '@nuxt/schema' {
-    interface AppConfigInput {
-        ui?: UI;
-    }
-}
 interface ModuleOptions {
     /**
-     * @default 'u'
+     * Prefix for components
+     * @defaultValue U
      */
     prefix?: string;
     /**
-     * @default false
+     * 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']
      */
-    global?: boolean;
-    safelistColors?: string[];
+    colors?: string[];
     /**
-     * Disables the global css styles added by the module.
+     * Disable color transitions
+     * @defaultValue true
      */
-    disableGlobalStyles?: boolean;
+    transitions?: boolean;
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { type ModuleOptions, _default as default };

package/dist/module.d.ts

@@ -1,39 +1,23 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import * as config from '../dist/runtime/ui.config/index.js';
-import { Strategy, DeepPartial } from '../dist/runtime/types/index.js';
+export * from '../dist/runtime/types/index.js';
 
-type UI = {
-    primary?: string;
-    gray?: string;
-    colors?: string[];
-    strategy?: Strategy;
-    [key: string]: any;
-} & DeepPartial<typeof config, string>;
-declare module 'nuxt/schema' {
-    interface AppConfigInput {
-        ui?: UI;
-    }
-}
-declare module '@nuxt/schema' {
-    interface AppConfigInput {
-        ui?: UI;
-    }
-}
 interface ModuleOptions {
     /**
-     * @default 'u'
+     * Prefix for components
+     * @defaultValue U
      */
     prefix?: string;
     /**
-     * @default false
+     * 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']
      */
-    global?: boolean;
-    safelistColors?: string[];
+    colors?: string[];
     /**
-     * Disables the global css styles added by the module.
+     * Disable color transitions
+     * @defaultValue true
      */
-    disableGlobalStyles?: boolean;
+    transitions?: boolean;
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { type ModuleOptions, _default as default };

package/dist/module.json

@@ -1,12 +1,12 @@
 {
-  "name": "@nuxt/ui",
-  "version": "2.18.3",
+  "name": "ui",
   "configKey": "ui",
   "compatibility": {
     "nuxt": ">=3.10.0"
   },
+  "version": "3.0.0-alpha.0",
   "builder": {
-    "@nuxt/module-builder": "0.8.1",
+    "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.0.0"
   }
 }