@eslamdevui/ui 3.2.0-beta.1 → 3.2.0-beta.2

package/cli/templates.mjs

@@ -1,228 +1,236 @@
-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: `playground/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 path = 'ui'
-
-  return {
-    filename: `src/runtime/components/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${upperName}.vue`,
-    contents: primitive
-      ? `
-<script lang="ts">
-import type { AppConfig } from '@nuxt/schema'
-import type { ComponentConfig } from '@eslamdevui/ui'
-import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import type { ComponentConfig as LocalConfig } from '../types/utils'
-
-type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'>
-
-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?: {}): any
-}
-</script>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { Primitive } from 'reka-ui'
-import { useAppConfig } from '#imports'
-import { tv } from '../utils/tv'
-
-const props = defineProps<${upperName}Props>()
-defineSlots<${upperName}Slots>()
-
-const appConfig = useAppConfig() as ${upperName}['AppConfig']
-
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
-</script>
-
-<template>
-  <Primitive :as="as" :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 { AppConfig } from '@nuxt/schema'
-import type { ComponentConfig } from '@eslamdevui/ui'
-import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import type { ComponentConfig as LocalConfig } from '../types/utils'
-
-type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'>
-
-export interface ${upperName}Props extends Pick<${upperName}RootProps> {
-  class?: any
-  ui?: ${upperName}['slots']
-}
-
-export interface ${upperName}Emits extends ${upperName}RootEmits {}
-
-export interface ${upperName}Slots {}
-</script>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { ${upperName}Root, useForwardPropsEmits } from 'reka-ui'
-import { reactivePick } from '@vueuse/core'
-import { useAppConfig } from '#imports'
-import { tv } from '../utils/tv'
-
-const props = defineProps<${upperName}Props>()
-const emits = defineEmits<${upperName}Emits>()
-const slots = defineSlots<${upperName}Slots>()
-
-const appConfig = useAppConfig() as ${upperName}['AppConfig']
-
-const rootProps = useForwardPropsEmits(reactivePick(props), emits)
-
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
-</script>
-
-<template>
-  <${upperName}Root v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })" />
-</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: 'section' } }],
-    ['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()
-  })
-})
-`
-  }
-}
-
-const docs = ({ name, 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: ''
-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/MohamedEslam04/ui/tree/v3/src/runtime/components/${upperName}.vue
----
-
-## Usage
-
-## Examples
-
-## API
-
-### Props
-
-:component-props
-
-### Slots
-
-:component-slots
-
-### Emits
-
-:component-emits
-
-## Theme
-
-:component-theme
-`
-  }
-}
-
-export default {
-  playground,
-  component,
-  theme,
-  test,
-  docs
-}
+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/app/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 type { AppConfig } from '@nuxt/schema'
+${pro ? `import type { ComponentConfig } from '@eslamdevui/ui'` : ''}
+import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
+${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
+
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
+
+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?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+import { useAppConfig } from '#imports'
+import { tv } from '../utils/tv'
+
+const props = defineProps<${upperName}Props>()
+defineSlots<${upperName}Slots>()
+
+const appConfig = useAppConfig() as ${upperName}['AppConfig']
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro' : 'ui'}?.${camelName} || {}) })())
+</script>
+
+<template>
+  <Primitive :as="as" :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 { AppConfig } from '@nuxt/schema'
+${pro ? `import type { ComponentConfig } from '@eslamdevui/ui'` : ''}
+import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
+${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
+
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
+
+export interface ${upperName}Props extends Pick<${upperName}RootProps> {
+  class?: any
+  ui?: ${upperName}['slots']
+}
+
+export interface ${upperName}Emits extends ${upperName}RootEmits {}
+
+export interface ${upperName}Slots {}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ${upperName}Root, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import { tv } from '../utils/tv'
+
+const props = defineProps<${upperName}Props>()
+const emits = defineEmits<${upperName}Emits>()
+const slots = defineSlots<${upperName}Slots>()
+
+const appConfig = useAppConfig() as ${upperName}['AppConfig']
+
+const rootProps = useForwardPropsEmits(reactivePick(props), emits)
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro' : 'ui'}?.${camelName} || {}) })())
+</script>
+
+<template>
+  <${upperName}Root v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })" />
+</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: 'section' } }],
+    ['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()
+  })
+})
+`
+  }
+}
+
+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/MohamedEslam04/${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,
+  docs
+}

package/cli/utils.mjs

@@ -1,31 +1,31 @@
-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')
-  }
-}
-
-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()
-}
+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')
+  }
+}
+
+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.json

@@ -1,6 +1,6 @@
 {
   "name": "@eslamdevui/ui",
-  "version": "3.2.0-beta.1",
+  "version": "3.2.0-beta.2",
   "docs": "https://ui.nuxt.com/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.BcVNrqyb.mjs';
+import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.DQZ75GCP.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -8,7 +8,7 @@ import 'tailwindcss/colors';
 import 'knitwork';
 
 const name = "@eslamdevui/ui";
-const version = "3.2.0-beta.1";
+const version = "3.2.0-beta.2";
 
 const module = defineNuxtModule({
   meta: {
@@ -27,9 +27,15 @@ const module = defineNuxtModule({
     options.theme.colors = resolveColors(options.theme.colors);
     nuxt.options.ui = options;
     nuxt.options.alias["#ui"] = resolve("./runtime");
-    nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, getDefaultUiConfig(options.theme.colors));
+    nuxt.options.appConfig.ui = defu(
+      nuxt.options.appConfig.ui || {},
+      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(" ");
+    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);
       addVitePlugin(plugin());
@@ -59,10 +65,9 @@ const module = defineNuxtModule({
         disableTransition: true
       });
     }
-    await registerModule("@nuxt/content", "content", {});
     addPlugin({ src: resolve("./runtime/plugins/colors") });
-    if (hasNuxtModule("@nuxtjs/mdc") || options.mdc || (hasNuxtModule("@nuxt/content") || options.content)) {
-      nuxt.options.mdc = defu(nuxt.options.mdc, {
+    if (hasNuxtModule("@nuxtjs/mdc") || options.mdc || hasNuxtModule("@nuxt/content") || options.content) {
+      nuxt.options.mdc = defu(options.mdc, {
         highlight: {
           theme: {
             light: "material-theme-lighter",
@@ -98,13 +103,13 @@ const module = defineNuxtModule({
           }
         }
       });
-      addComponentsDir({
-        path: resolve("./runtime/components/prose"),
-        prefix: "Prose",
-        pathPrefix: false,
-        global: true
-      });
     }
+    addComponentsDir({
+      path: resolve("./runtime/components/prose"),
+      prefix: "Prose",
+      pathPrefix: false,
+      global: true
+    });
     if (hasNuxtModule("@nuxt/content") || options.content) {
       addComponentsDir({
         path: resolve("./runtime/components/content"),