@nuxt/ui 4.11.1 → 4.11.3

package/cli/commands/make/locale.mjs

@@ -1,93 +0,0 @@
-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 or en_gb.',
-      required: true
-    },
-    name: {
-      description: 'Locale name in its own language. Defaults to the CLDR name for the code.'
-    },
-    dir: {
-      description: 'Locale direction. Defaults to the CLDR direction for the code.'
-    }
-  },
-  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 (!args.code.match(/^[a-z]{2,3}(?:_(?:[a-z]{2}|\d{3}))?$/)) {
-      consola.error(`🚨 ${args.code} is not a valid locale code!\nExample: en, en_gb or es_419`)
-      process.exit(1)
-    }
-
-    const code = normalizeLocale(args.code)
-    const language = code.split('-')[0]
-
-    // `Intl.DisplayNames` echoes the input back when the code is unknown to CLDR
-    if (new Intl.DisplayNames(['en'], { type: 'language' }).of(language) === language) {
-      consola.error(`🚨 ${language} is not a known ISO 639 language code!\nFor example, the code for Tajik is tg, not tj.`)
-      process.exit(1)
-    }
-
-    const region = code.split('-')[1]
-    if (region && new Intl.DisplayNames(['en'], { type: 'region' }).of(region) === region) {
-      consola.error(`🚨 ${region} is not a known region code!\nExample: en_gb or pt_br`)
-      process.exit(1)
-    }
-
-    let name = args.name
-    if (!name) {
-      const cldrName = new Intl.DisplayNames([code], { type: 'language', languageDisplay: 'standard' }).of(code)
-      name = cldrName.charAt(0).toLocaleUpperCase(code) + cldrName.slice(1)
-      consola.info(`🌍 Using CLDR name for ${code}: ${name}`)
-    }
-
-    let dir = args.dir
-    if (!dir) {
-      const intlLocale = new Intl.Locale(code)
-      dir = (intlLocale.getTextInfo?.() ?? intlLocale.textInfo)?.direction ?? 'ltr'
-      if (dir === 'rtl') {
-        consola.info(`🌍 Using CLDR direction for ${code}: ${dir}`)
-      }
-    }
-
-    if (!['ltr', 'rtl'].includes(dir)) {
-      consola.error(`🚨 Direction ${dir} not supported!`)
-      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: '${name}',`)
-      .replace(/code: '(.*)',/, `code: '${code}',${dir !== 'ltr' ? `\n  dir: '${dir}',` : ''}`)
-    await fsp.writeFile(newLocaleFilePath, rewrittenLocaleFile)
-
-    consola.success(`🪄 Generated ${newLocaleFilePath}`)
-  }
-})

package/cli/index.mjs

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

package/cli/package.json

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

package/cli/templates.mjs

@@ -1,256 +0,0 @@
-import { splitByCase, upperFirst, camelCase, kebabCase } from 'scule'
-
-const playground = ({ name }) => {
-  const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
-  const kebabName = kebabCase(name)
-
-  return {
-    filename: `playgrounds/nuxt/app/pages/components/${kebabName}.vue`,
-    contents: `
-<template>
-  <div>
-    <U${upperName} />
-  </div>
-</template>
-`
-  }
-}
-
-const component = ({ name, primitive, prose, content }) => {
-  const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
-  const camelName = camelCase(name)
-  const kebabName = kebabCase(name)
-  const nested = prose || content
-  const dirPrefix = prose ? 'prose/' : (content ? 'content/' : '')
-  const importPrefix = nested ? '../..' : '..'
-  const componentKey = prose ? `prose.${camelName}` : camelName
-  const componentConfigArgs = prose
-    ? `typeof theme, AppConfig, '${camelName}', 'ui.prose'`
-    : `typeof theme, AppConfig, '${camelName}'`
-  const appConfigLookup = prose
-    ? `appConfig.ui?.prose?.${camelName}`
-    : `appConfig.ui?.${camelName}`
-
-  return {
-    filename: `src/runtime/components/${dirPrefix}${upperName}.vue`,
-    contents: primitive
-      ? `
-<script lang="ts">
-import type { VNode } from 'vue'
-import type { AppConfig } from '@nuxt/schema'
-import theme from '#build/ui/${dirPrefix}${kebabName}'
-import type { ComponentConfig } from '${importPrefix}/types/tv'
-
-type ${upperName} = ComponentConfig<${componentConfigArgs}>
-
-export interface ${upperName}Props {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  class?: any
-  ui?: ${upperName}['slots']
-}
-
-export interface ${upperName}Slots {
-  default?(props?: {}): VNode[]
-}
-</script>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { Primitive } from 'reka-ui'
-import { useAppConfig } from '#imports'
-import { useComponentProps } from '${importPrefix}/composables/useComponentProps'
-import { tv } from '${importPrefix}/utils/tv'
-
-const _props = defineProps<${upperName}Props>()
-defineSlots<${upperName}Slots>()
-
-const props = useComponentProps('${componentKey}', _props)
-
-const appConfig = useAppConfig() as ${upperName}['AppConfig']
-
-// eslint-disable-next-line vue/no-dupe-keys
-const ui = computed(() => tv({ extend: theme, ...(${appConfigLookup} || {}) })())
-</script>
-
-<template>
-  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <slot />
-  </Primitive>
-</template>
-`
-      : `
-<script lang="ts">
-import type { ${upperName}RootProps, ${upperName}RootEmits } from 'reka-ui'
-import type { VNode } from 'vue'
-import type { AppConfig } from '@nuxt/schema'
-import theme from '#build/ui/${dirPrefix}${kebabName}'
-import type { ComponentConfig } from '${importPrefix}/types/tv'
-
-type ${upperName} = ComponentConfig<${componentConfigArgs}>
-
-// TODO: narrow with \`Pick<${upperName}RootProps, '...' | '...'>\` to expose only the props you need.
-export interface ${upperName}Props extends ${upperName}RootProps {
-  class?: any
-  ui?: ${upperName}['slots']
-}
-
-export interface ${upperName}Emits extends ${upperName}RootEmits {}
-
-export interface ${upperName}Slots {
-  default?(props?: {}): VNode[]
-}
-</script>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { ${upperName}Root } from 'reka-ui'
-import { reactivePick } from '@vueuse/core'
-import { useAppConfig } from '#imports'
-import { useComponentProps } from '${importPrefix}/composables/useComponentProps'
-import { useForwardProps } from '${importPrefix}/composables/useForwardProps'
-import { tv } from '${importPrefix}/utils/tv'
-
-const _props = defineProps<${upperName}Props>()
-const emits = defineEmits<${upperName}Emits>()
-defineSlots<${upperName}Slots>()
-
-const props = useComponentProps('${componentKey}', _props)
-
-const appConfig = useAppConfig() as ${upperName}['AppConfig']
-
-// TODO: list the same keys as in \`${upperName}Props\` Pick.
-const rootProps = useForwardProps(reactivePick(props, 'as'), emits)
-
-// eslint-disable-next-line vue/no-dupe-keys
-const ui = computed(() => tv({ extend: theme, ...(${appConfigLookup} || {}) })())
-</script>
-
-<template>
-  <${upperName}Root v-bind="rootProps" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <slot />
-  </${upperName}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 { axe } from 'vitest-axe'
-import { mountSuspended } from '@nuxt/test-utils/runtime'
-import ${upperName} from '../../${content ? '../' : ''}src/runtime/components/${content ? 'content/' : ''}${upperName}.vue'
-import { renderEach } from '../${content ? '../' : ''}component-render'
-
-describe('${upperName}', () => {
-  const props = {}
-
-  renderEach(${upperName}, [
-    // Props
-    ['with as', { props: { as: 'section' } }],
-    ['with class', { props: { class: '' } }],
-    ['with ui', { props: { ui: {} } }],
-    // Slots
-    ['with default slot', { props, slots: { default: () => 'Default slot' } }]
-  ])
-
-  it('passes accessibility tests', async () => {
-    const wrapper = await mountSuspended(${upperName}, {
-      props
-    })
-
-    expect(await axe(wrapper.element)).toHaveNoViolations()
-  })
-})
-`
-  }
-}
-
-const docs = ({ name, primitive }) => {
-  const kebabName = kebabCase(name)
-  const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
-
-  return {
-    filename: `docs/content/docs/2.components/${kebabName}.md`,
-    contents: `---
-title: ${upperName}
-description: ''
-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/ui/blob/v4/src/runtime/components/${upperName}.vue
-navigation.badge: Soon
----
-
-## Usage
-
-## Examples
-
-## API
-
-### Props
-
-:component-props
-
-### Slots
-
-:component-slots
-
-### Emits
-
-:component-emits
-
-## Theme
-
-:component-theme
-
-## Changelog
-
-:component-changelog
-`
-  }
-}
-
-export default {
-  playground,
-  component,
-  theme,
-  test,
-  docs
-}

package/cli/utils.mjs

@@ -1,50 +0,0 @@
-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')
-  }
-}
-
-/**
- * Insert a `key?: Partial<ComponentTypes.XProps>` entry into the `ThemeDefaults`
- * interface in `src/runtime/composables/useComponentProps.ts`, keeping entries
- * sorted alphabetically and avoiding duplicates.
- */
-export async function appendThemeDefault(path, key, propsType) {
-  const file = await fsp.readFile(path, 'utf-8')
-  const entry = `  ${key}?: Partial<ComponentTypes.${propsType}>`
-
-  const match = file.match(/(export interface ThemeDefaults \{\n)([\s\S]*?)(\n\})/)
-  if (!match) return
-
-  const [, header, body, footer] = match
-  if (body.split('\n').includes(entry)) return
-
-  const sorted = [...body.split('\n'), entry].sort().join('\n')
-  await fsp.writeFile(path, file.replace(match[0], header + sorted + footer))
-}
-
-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()
-}