@eslamdevui/ui 3.2.0-beta.2 → 3.2.0

package/cli/templates.mjs

@@ -1,236 +1,236 @@
-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
-}
+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.2",
+  "version": "3.2.0",
   "docs": "https://ui.nuxt.com/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {

package/dist/module.mjs

@@ -8,7 +8,7 @@ import 'tailwindcss/colors';
 import 'knitwork';
 
 const name = "@eslamdevui/ui";
-const version = "3.2.0-beta.2";
+const version = "3.2.0";
 
 const module = defineNuxtModule({
   meta: {

package/dist/runtime/components/Accordion.vue

@@ -34,40 +34,40 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.accordion ||
 </script>
 
 <template>
-  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <AccordionItem
-      v-for="(item, index) in props.items"
-      v-slot="{ open }"
-      :key="index"
-      :value="item.value || String(index)"
-      :disabled="item.disabled"
-      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
-    >
-      <AccordionHeader as="div" :class="ui.header({ class: [props.ui?.header, item.ui?.header] })">
-        <AccordionTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger], disabled: item.disabled })">
-          <slot name="leading" :item="item" :index="index" :open="open">
-            <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item?.ui?.leadingIcon] })" />
-          </slot>
-
-          <span v-if="get(item, props.labelKey) || !!slots.default" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
-            <slot :item="item" :index="index" :open="open">{{ get(item, props.labelKey) }}</slot>
-          </span>
-
-          <slot name="trailing" :item="item" :index="index" :open="open">
-            <UIcon :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: [props.ui?.trailingIcon, item.ui?.trailingIcon] })" />
-          </slot>
-        </AccordionTrigger>
-      </AccordionHeader>
-
-      <AccordionContent v-if="item.content || !!slots.content || item.slot && !!slots[item.slot] || !!slots.body || item.slot && !!slots[`${item.slot}-body`]" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
-        <slot :name="item.slot || 'content'" :item="item" :index="index" :open="open">
-          <div :class="ui.body({ class: [props.ui?.body, item.ui?.body] })">
-            <slot :name="item.slot ? `${item.slot}-body` : 'body'" :item="item" :index="index" :open="open">
-              {{ item.content }}
-            </slot>
-          </div>
-        </slot>
-      </AccordionContent>
-    </AccordionItem>
-  </AccordionRoot>
+  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <AccordionItem
+      v-for="(item, index) in props.items"
+      v-slot="{ open }"
+      :key="index"
+      :value="item.value || String(index)"
+      :disabled="item.disabled"
+      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
+    >
+      <AccordionHeader as="div" :class="ui.header({ class: [props.ui?.header, item.ui?.header] })">
+        <AccordionTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger], disabled: item.disabled })">
+          <slot name="leading" :item="item" :index="index" :open="open">
+            <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item?.ui?.leadingIcon] })" />
+          </slot>
+
+          <span v-if="get(item, props.labelKey) || !!slots.default" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
+            <slot :item="item" :index="index" :open="open">{{ get(item, props.labelKey) }}</slot>
+          </span>
+
+          <slot name="trailing" :item="item" :index="index" :open="open">
+            <UIcon :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: [props.ui?.trailingIcon, item.ui?.trailingIcon] })" />
+          </slot>
+        </AccordionTrigger>
+      </AccordionHeader>
+
+      <AccordionContent v-if="item.content || !!slots.content || item.slot && !!slots[item.slot] || !!slots.body || item.slot && !!slots[`${item.slot}-body`]" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
+        <slot :name="item.slot || 'content'" :item="item" :index="index" :open="open">
+          <div :class="ui.body({ class: [props.ui?.body, item.ui?.body] })">
+            <slot :name="item.slot ? `${item.slot}-body` : 'body'" :item="item" :index="index" :open="open">
+              {{ item.content }}
+            </slot>
+          </div>
+        </slot>
+      </AccordionContent>
+    </AccordionItem>
+  </AccordionRoot>
 </template>