@eslamdevui/ui 3.2.0-beta.1

package/cli/templates.mjs

@@ -0,0 +1,228 @@
+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
+}

package/cli/utils.mjs

@@ -0,0 +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()
+}

package/dist/module.d.mts

@@ -0,0 +1,63 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { HookResult } from '@nuxt/schema';
+export * from '../dist/runtime/types/index.js';
+
+interface ModuleOptions {
+    /**
+     * Prefix for components
+     * @defaultValue `U`
+     * @link https://ui.nuxt.com/getting-started/installation/nuxt#prefix
+     */
+    prefix?: string;
+    /**
+     * Enable or disable `@nuxt/fonts` module
+     * @defaultValue `true`
+     * @link https://ui.nuxt.com/getting-started/installation/nuxt#fonts
+     */
+    fonts?: boolean;
+    /**
+     * Enable or disable `@nuxtjs/color-mode` module
+     * @defaultValue `true`
+     * @link https://ui.nuxt.com/getting-started/installation/nuxt#colormode
+     */
+    colorMode?: boolean;
+    /**
+     * Customize how the theme is generated
+     * @link https://ui.nuxt.com/getting-started/theme
+     */
+    theme?: {
+        /**
+         * Define the color aliases available for components
+         * @defaultValue `['primary', 'secondary', 'success', 'info', 'warning', 'error']`
+         * @link https://ui.nuxt.com/getting-started/installation/nuxt#themecolors
+         */
+        colors?: string[];
+        /**
+         * Enable or disable transitions on components
+         * @defaultValue `true`
+         * @link https://ui.nuxt.com/getting-started/installation/nuxt#themetransitions
+         */
+        transitions?: boolean;
+    };
+    /**
+     * Force the import of prose components even if @nuxtjs/mdc or @nuxt/content is not installed
+     * @defaultValue false
+     */
+    mdc?: boolean;
+    /**
+     * Force the import of content & prose components even if @nuxt/content is not installed
+     * @defaultValue false
+     */
+    content?: boolean;
+}
+declare module '#app' {
+    interface RuntimeNuxtHooks {
+        'dashboard:search:toggle': () => HookResult;
+        'dashboard:sidebar:toggle': () => HookResult;
+        'dashboard:sidebar:collapse': (value: boolean) => HookResult;
+    }
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,13 @@
+{
+  "name": "@eslamdevui/ui",
+  "version": "3.2.0-beta.1",
+  "docs": "https://ui.nuxt.com/getting-started/installation/nuxt",
+  "configKey": "ui",
+  "compatibility": {
+    "nuxt": ">=3.16.0"
+  },
+  "builder": {
+    "@nuxt/module-builder": "1.0.1",
+    "unbuild": "3.5.0"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,135 @@
+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 '../dist/runtime/utils/index.js';
+import 'node:url';
+import 'scule';
+import 'tailwindcss/colors';
+import 'knitwork';
+
+const name = "@eslamdevui/ui";
+const version = "3.2.0-beta.1";
+
+const module = defineNuxtModule({
+  meta: {
+    name,
+    version,
+    docs: "https://ui.nuxt.com/getting-started/installation/nuxt",
+    configKey: "ui",
+    compatibility: {
+      nuxt: ">=3.16.0"
+    }
+  },
+  defaults: defaultOptions,
+  async setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    options.theme = options.theme || {};
+    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.app.rootAttrs = nuxt.options.app.rootAttrs || {};
+    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());
+    } else {
+      nuxt.options.postcss.plugins["@tailwindcss/postcss"] = {};
+    }
+    async function registerModule(name2, key, options2) {
+      if (!hasNuxtModule(name2)) {
+        await installModule(name2, options2);
+      } else {
+        nuxt.options[key] = defu(nuxt.options[key], options2);
+      }
+    }
+    await registerModule("@nuxt/icon", "icon", {
+      cssLayer: "components"
+    });
+    if (options.fonts) {
+      await registerModule("@nuxt/fonts", "fonts", {
+        defaults: {
+          weights: [400, 500, 600, 700]
+        }
+      });
+    }
+    if (options.colorMode) {
+      await registerModule("@nuxtjs/color-mode", "colorMode", {
+        classSuffix: "",
+        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, {
+        highlight: {
+          theme: {
+            light: "material-theme-lighter",
+            default: "material-theme",
+            dark: "material-theme-palenight"
+          }
+        },
+        components: {
+          map: {
+            "accordion": "ProseAccordion",
+            "accordion-item": "ProseAccordionItem",
+            "badge": "ProseBadge",
+            "callout": "ProseCallout",
+            "card": "ProseCard",
+            "card-group": "ProseCardGroup",
+            "caution": "ProseCaution",
+            "code-collapse": "ProseCodeCollapse",
+            "code-group": "ProseCodeGroup",
+            "code-icon": "ProseCodeIcon",
+            "code-preview": "ProseCodePreview",
+            "code-tree": "ProseCodeTree",
+            "collapsible": "ProseCollapsible",
+            "field": "ProseField",
+            "field-group": "ProseFieldGroup",
+            "icon": "ProseIcon",
+            "kbd": "ProseKbd",
+            "note": "ProseNote",
+            "steps": "ProseSteps",
+            "tabs": "ProseTabs",
+            "tabs-item": "ProseTabsItem",
+            "tip": "ProseTip",
+            "warning": "ProseWarning"
+          }
+        }
+      });
+      addComponentsDir({
+        path: resolve("./runtime/components/prose"),
+        prefix: "Prose",
+        pathPrefix: false,
+        global: true
+      });
+    }
+    if (hasNuxtModule("@nuxt/content") || options.content) {
+      addComponentsDir({
+        path: resolve("./runtime/components/content"),
+        pathPrefix: false,
+        prefix: nuxt.options.ui?.prefix || "U"
+      });
+    }
+    if (hasNuxtModule("@nuxtjs/color-mode")) {
+      addComponentsDir({
+        path: resolve("./runtime/components/color-mode"),
+        pathPrefix: false,
+        prefix: nuxt.options.ui?.prefix || "U"
+      });
+    } else {
+      addImportsDir(resolve("./runtime/composables/color-mode"));
+    }
+    addComponentsDir({
+      path: resolve("./runtime/components"),
+      prefix: nuxt.options.ui?.prefix || "U",
+      pathPrefix: false,
+      ignore: ["color-mode/**", "content/**", "prose/**"]
+    });
+    addImportsDir(resolve("./runtime/composables"));
+    addTemplates(options, nuxt, resolve);
+  }
+});
+
+export { module as default };

package/dist/runtime/components/Accordion.vue

@@ -0,0 +1,73 @@
+<script>
+import theme from "#build/ui/accordion";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, useForwardPropsEmits } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { get } from "../utils";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  items: { type: Array, required: false },
+  trailingIcon: { type: String, required: false },
+  labelKey: { type: String, required: false, default: "label" },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  collapsible: { type: Boolean, required: false, default: true },
+  defaultValue: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  type: { type: String, required: false, default: "single" },
+  disabled: { type: Boolean, required: false },
+  unmountOnHide: { type: Boolean, required: false, default: true }
+});
+const emits = defineEmits(["update:modelValue"]);
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "collapsible", "defaultValue", "disabled", "modelValue", "type", "unmountOnHide"), emits);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.accordion || {} })({
+  disabled: props.disabled
+}));
+</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>
+</template>

package/dist/runtime/components/Accordion.vue.d.ts

@@ -0,0 +1,77 @@
+import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/accordion';
+import type { DynamicSlots, ComponentConfig } from '../types/utils';
+type Accordion = ComponentConfig<typeof theme, AppConfig, 'accordion'>;
+export interface AccordionItem {
+    label?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: string;
+    /**
+     * @IconifyIcon
+     */
+    trailingIcon?: string;
+    slot?: string;
+    content?: string;
+    /** A unique value for the accordion item. Defaults to the index. */
+    value?: string;
+    disabled?: boolean;
+    class?: any;
+    ui?: Pick<Accordion['slots'], 'item' | 'header' | 'trigger' | 'leadingIcon' | 'label' | 'trailingIcon' | 'content' | 'body'>;
+    [key: string]: any;
+}
+export interface AccordionProps<T extends AccordionItem = AccordionItem> extends Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    items?: T[];
+    /**
+     * The icon displayed on the right side of the trigger.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     * @IconifyIcon
+     */
+    trailingIcon?: string;
+    /**
+     * The key used to get the label from the item.
+     * @defaultValue 'label'
+     */
+    labelKey?: string;
+    class?: any;
+    ui?: Accordion['slots'];
+}
+export interface AccordionEmits extends AccordionRootEmits {
+}
+type SlotProps<T extends AccordionItem> = (props: {
+    item: T;
+    index: number;
+    open: boolean;
+}) => any;
+export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
+    leading: SlotProps<T>;
+    default: SlotProps<T>;
+    trailing: SlotProps<T>;
+    content: SlotProps<T>;
+    body: SlotProps<T>;
+} & DynamicSlots<T, 'body', {
+    index: number;
+    open: boolean;
+}>;
+declare const _default: <T extends AccordionItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & AccordionProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: AccordionSlots<T>;
+    emit: (evt: "update:modelValue", value: string | string[] | undefined) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};