@eslamdevui/ui 3.3.3 → 4.0.0-beta

package/README.md

@@ -14,16 +14,25 @@
 Nuxt UI harnesses the combined strengths of [Reka UI](https://reka-ui.com/), [Tailwind CSS](https://tailwindcss.com/), and [Tailwind Variants](https://www.tailwind-variants.org/) to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.
 
 > [!NOTE]
-> You are on the `v3` development branch, check out the [v2 branch](https://github.com/nuxt/ui/tree/v2) for Nuxt UI v2.
-
-> [!TIP]
-> **Looking for more components ?**
-> Check out [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of premium Vue components, composables, and utilities built on top of Nuxt UI for faster and more powerful app development.
+> You are on the `v4` branch, check out the [v3 branch](https://github.com/nuxt/ui/tree/v3) for Nuxt UI v3 or [v2 branch](https://github.com/nuxt/ui/tree/v2) for Nuxt UI v2.
 
 ## Documentation
 
 Visit https://ui.nuxt.com to explore the documentation.
 
+## Templates
+
+Kickstart your project with one of our ready-to-use Nuxt UI templates or follow the [Installation Guide](https://ui.nuxt.com/getting-started/installation/nuxt). Explore all available templates on the [official templates page](https://ui.nuxt.com/templates).
+
+- [Starter](https://github.com/nuxt-ui-templates/starter) — A minimal template to get started with Nuxt UI.
+- [Landing](https://github.com/nuxt-ui-templates/landing) — A modern landing page template powered by Nuxt Content.
+- [Docs](https://github.com/nuxt-ui-templates/docs) — A documentation template powered by Nuxt Content.
+- [SaaS](https://github.com/nuxt-ui-templates/saas) — A SaaS template with landing, pricing, docs and blog powered by Nuxt Content.
+- [Dashboard](https://github.com/nuxt-ui-templates/dashboard) — A dashboard template with multi-column layout.
+- [Chat](https://github.com/nuxt-ui-templates/chat) — An AI chatbot template with GitHub authentication and persistent chat history powered by Vercel AI SDK.
+- [Portfolio](https://github.com/nuxt-ui-templates/portfolio) — A sleek portfolio template to showcase your work, skills and blog powered by Nuxt Content.
+- [Changelog](https://github.com/nuxt-ui-templates/changelog) — A changelog template to display your repository releases notes from GitHub powered by Nuxt MDC.
+
 ## Installation
 
 ```bash [pnpm]
@@ -59,7 +68,7 @@ export default defineNuxtConfig({
 @import "@eslamdevui/ui";
 ```
 
-Learn more in the [installation guide](https://ui.nuxt.com/getting-started/installation/nuxt).
+Learn more in the [installation guide](https://ui.nuxt.com/docs/getting-started/installation/nuxt).
 
 ### Vue
 
@@ -106,18 +115,18 @@ app.mount('#app')
 @import "@eslamdevui/ui";
 ```
 
-Learn more in the [installation guide](https://ui.nuxt.com/getting-started/installation/vue).
+Learn more in the [installation guide](https://ui.nuxt.com/docs/getting-started/installation/vue).
 
 ## Contribution
 
 Thank you for considering contributing to Nuxt UI. Here are a few ways you can get involved:
 
 - Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.
-- Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the [contribution guide](https://ui.nuxt.com/getting-started/contribution) to share your suggestions.
+- Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the [contribution guide](https://ui.nuxt.com/docs/getting-started/contribution) to share your suggestions.
 
 ## Local Development
 
-Follow the docs to [set up your local development environment](https://ui.nuxt.com/getting-started/contribution#local-development) and contribute.
+Follow the docs to [set up your local development environment](https://ui.nuxt.com/docs/getting-started/contribution#local-development) and contribute.
 
 ## Credits
 
@@ -131,17 +140,17 @@ Follow the docs to [set up your local development environment](https://ui.nuxt.c
 
 ## License
 
-Licensed under the [MIT license](https://github.com/nuxt/ui/blob/v3/LICENSE.md).
+Licensed under the [MIT license](https://github.com/nuxt/ui/blob/v4/LICENSE.md).
 
 <!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/@eslamdevui/ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-src]: https://img.shields.io/npm/v/@eslamdevui/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
 [npm-version-href]: https://npmjs.com/package/@eslamdevui/ui
 
 [npm-downloads-src]: https://img.shields.io/npm/dm/@eslamdevui/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
 [npm-downloads-href]: https://npm.chart.dev/@eslamdevui/ui
 
 [license-src]: https://img.shields.io/github/license/nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://github.com/nuxt/ui/blob/v3/LICENSE.md
+[license-href]: https://github.com/nuxt/ui/blob/v4/LICENSE.md
 
 [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
 [nuxt-href]: https://nuxt.com

package/cli/commands/make/component.mjs

@@ -21,17 +21,13 @@ export default defineCommand({
       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).'
+      description: 'Create a prose component.'
     },
     content: {
       type: 'boolean',
-      description: 'Create a content component (with --pro).'
+      description: 'Create a content component.'
     },
     template: {
       type: 'string',
@@ -45,15 +41,6 @@ export default defineCommand({
       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)) {

package/cli/templates.mjs

@@ -1,16 +1,12 @@
 import { splitByCase, upperFirst, camelCase, kebabCase } from 'scule'
 
-const playground = ({ name, pro }) => {
-  const upperName = splitByCase(name)
-    .map(p => upperFirst(p))
-    .join('')
+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: pro
-      ? undefined
-      : `
+    filename: `playgrounds/nuxt/app/pages/components/${kebabName}.vue`,
+    contents: `
 <template>
   <div>
     <U${upperName} />
@@ -20,14 +16,10 @@ const playground = ({ name, pro }) => {
   }
 }
 
-const component = ({ name, primitive, pro, prose, content }) => {
-  const upperName = splitByCase(name)
-    .map(p => upperFirst(p))
-    .join('')
+const component = ({ name, primitive, 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`,
@@ -35,11 +27,10 @@ const component = ({ name, primitive, pro, prose, content }) => {
       ? `
 <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'` : ''}
+import theme from '#build/ui/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
+import type { ComponentConfig } from '../types/tv'
 
-type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'${pro ? `, '${key}'` : ''}>
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'>
 
 export interface ${upperName}Props {
   /**
@@ -67,7 +58,7 @@ defineSlots<${upperName}Slots>()
 
 const appConfig = useAppConfig() as ${upperName}['AppConfig']
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro' : 'ui'}?.${camelName} || {}) })())
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
 </script>
 
 <template>
@@ -80,11 +71,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro'
 <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'` : ''}
+import theme from '#build/ui/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
+import type { ComponentConfig } from '../types/tv'
 
-type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'${pro ? `, '${key}'` : ''}>
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'>
 
 export interface ${upperName}Props extends Pick<${upperName}RootProps> {
   class?: any
@@ -111,7 +101,7 @@ const appConfig = useAppConfig() as ${upperName}['AppConfig']
 
 const rootProps = useForwardPropsEmits(reactivePick(props), emits)
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro' : 'ui'}?.${camelName} || {}) })())
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
 </script>
 
 <template>
@@ -143,9 +133,7 @@ export default {
 }
 
 const test = ({ name, prose, content }) => {
-  const upperName = splitByCase(name)
-    .map(p => upperFirst(p))
-    .join('')
+  const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
 
   return {
     filename: `test/components/${content ? 'content/' : ''}${upperName}.spec.ts`,
@@ -174,33 +162,25 @@ describe('${upperName}', () => {
   }
 }
 
-const docs = ({ name, pro, primitive }) => {
+const docs = ({ name, primitive }) => {
   const kebabName = kebabCase(name)
-  const upperName = splitByCase(name)
-    .map(p => upperFirst(p))
-    .join('')
+  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
-    ? ''
-    : `
+description: ''
+links:${primitive
+  ? ''
+  : `
   - label: ${upperName}
     icon: i-custom-reka-ui
-    to: https://reka-ui.com/docs/components/${kebabName}`
-}
+    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
+    to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/${upperName}.vue
+navigation.badge: Soon
 ---
 
 ## Usage
@@ -211,19 +191,23 @@ links:${
 
 ### Props
 
-:component-props${pro ? '{pro}' : ''}
+:component-props
 
 ### Slots
 
-:component-slots${pro ? '{pro}' : ''}
+:component-slots
 
 ### Emits
 
-:component-emits${pro ? '{pro}' : ''}
+:component-emits
 
 ## Theme
 
-:component-theme${pro ? '{pro}' : ''}
+:component-theme
+
+## Changelog
+
+:component-changelog
 `
   }
 }

package/dist/module.d.mts

@@ -8,36 +8,36 @@ interface ModuleOptions {
     /**
      * Prefix for components
      * @defaultValue `U`
-     * @link https://ui.nuxt.com/getting-started/installation/nuxt#prefix
+     * @see https://ui.nuxt.com/docs/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
+     * @see https://ui.nuxt.com/docs/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
+     * @see https://ui.nuxt.com/docs/getting-started/installation/nuxt#colormode
      */
     colorMode?: boolean;
     /**
      * Customize how the theme is generated
-     * @link https://ui.nuxt.com/getting-started/theme
+     * @see https://ui.nuxt.com/docs/getting-started/theme/design-system
      */
     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
+         * @see https://ui.nuxt.com/docs/getting-started/installation/nuxt#themecolors
          */
         colors?: Color[];
         /**
          * Enable or disable transitions on components
          * @defaultValue `true`
-         * @link https://ui.nuxt.com/getting-started/installation/nuxt#themetransitions
+         * @see https://ui.nuxt.com/docs/getting-started/installation/nuxt#themetransitions
          */
         transitions?: boolean;
         defaultVariants?: {
@@ -54,12 +54,12 @@ interface ModuleOptions {
         };
     };
     /**
-     * Force the import of prose components even if @nuxtjs/mdc or @nuxt/content is not installed
+     * Force the import of prose components even if `@nuxtjs/mdc` or `@nuxt/content` are not installed
      * @defaultValue false
      */
     mdc?: boolean;
     /**
-     * Force the import of content & prose components even if @nuxt/content is not installed
+     * Force the import of content & prose components even if `@nuxt/content` is not installed
      * @defaultValue false
      */
     content?: boolean;

package/dist/module.json

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

package/dist/module.mjs

@@ -1,55 +1,23 @@
-import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit';
 import { defu } from 'defu';
-import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.CgUuvRXi.mjs';
+import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit';
+import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.BBlr3wu_.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
-import 'tailwindcss/colors';
 import 'knitwork';
+import 'tailwindcss/colors';
 
 const name = "@eslamdevui/ui";
-const version = "3.3.3";
+const version = "4.0.0-beta";
 
-function generateProseComponentMap(components) {
-  return components.reduce((map, component) => {
-    const pascalCase = component.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
-    map[component] = `Prose${pascalCase}`;
-    return map;
-  }, {});
-}
-const proseComponents = [
-  "accordion",
-  "accordion-item",
-  "badge",
-  "callout",
-  "card",
-  "card-group",
-  "caution",
-  "code-collapse",
-  "code-group",
-  "code-icon",
-  "code-preview",
-  "code-tree",
-  "collapsible",
-  "field",
-  "field-group",
-  "icon",
-  "kbd",
-  "note",
-  "steps",
-  "tabs",
-  "tabs-item",
-  "tip",
-  "warning"
-];
 const module = defineNuxtModule({
   meta: {
     name,
     version,
-    docs: "https://ui.nuxt.com/getting-started/installation/nuxt",
+    docs: "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
     configKey: "ui",
     compatibility: {
-      nuxt: ">=3.16.0"
+      nuxt: ">=4.0.0"
     }
   },
   defaults: defaultOptions,
@@ -59,19 +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(" ");
-    if (nuxt.options.builder === "@nuxt/vite-builder") {
+    nuxt.options.app.rootAttrs.class = [nuxt.options.app.rootAttrs.class, "isolate"].filter(Boolean).join(" ");
+    nuxt.hook("vite:extend", async ({ config }) => {
       const plugin = await import('@tailwindcss/vite').then((r) => r.default);
-      addVitePlugin(plugin());
-    } else {
+      config.plugins ||= [];
+      config.plugins.push(plugin());
+    });
+    if (nuxt.options.builder !== "@nuxt/vite-builder") {
       nuxt.options.postcss.plugins["@tailwindcss/postcss"] = {};
     }
     async function registerModule(name2, key, options2) {
@@ -98,7 +62,7 @@ const module = defineNuxtModule({
       });
     }
     addPlugin({ src: resolve("./runtime/plugins/colors") });
-    if (hasNuxtModule("@nuxtjs/mdc") || options.mdc || hasNuxtModule("@nuxt/content") || options.content) {
+    if (hasNuxtModule("@nuxtjs/mdc") || options.mdc || (hasNuxtModule("@nuxt/content") || options.content)) {
       nuxt.options.mdc = defu(nuxt.options.mdc, {
         highlight: {
           theme: {
@@ -108,36 +72,60 @@ const module = defineNuxtModule({
           }
         },
         components: {
-          map: generateProseComponentMap(proseComponents)
+          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"),
+        pathPrefix: false,
+        prefix: "Prose",
+        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"),
         pathPrefix: false,
-        prefix: nuxt.options.ui?.prefix || "U"
+        prefix: options.prefix
       });
     }
     if (hasNuxtModule("@nuxtjs/color-mode")) {
       addComponentsDir({
         path: resolve("./runtime/components/color-mode"),
         pathPrefix: false,
-        prefix: nuxt.options.ui?.prefix || "U"
+        prefix: options.prefix
       });
     } else {
       addImportsDir(resolve("./runtime/composables/color-mode"));
     }
     addComponentsDir({
       path: resolve("./runtime/components"),
-      prefix: nuxt.options.ui?.prefix || "U",
       pathPrefix: false,
+      prefix: options.prefix,
       ignore: ["color-mode/**", "content/**", "prose/**"]
     });
     addImportsDir(resolve("./runtime/composables"));

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

@@ -0,0 +1,79 @@
+import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/accordion';
+import type { IconProps } from '../types';
+import type { DynamicSlots, GetItemKeys } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
+type Accordion = ComponentConfig<typeof theme, AppConfig, 'accordion'>;
+export interface AccordionItem {
+    label?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /**
+     * @IconifyIcon
+     */
+    trailingIcon?: IconProps['name'];
+    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?: IconProps['name'];
+    /**
+     * The key used to get the label from the item.
+     * @defaultValue 'label'
+     */
+    labelKey?: GetItemKeys<T>;
+    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> & {}> & 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 as K]: T[K];
+} & {};

package/dist/runtime/components/Accordion.vue

@@ -13,8 +13,8 @@ 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" },
+  trailingIcon: { type: [String, Object], required: false },
+  labelKey: { type: null, required: false, default: "label" },
   class: { type: null, required: false },
   ui: { type: null, required: false },
   collapsible: { type: Boolean, required: false, default: true },
@@ -27,14 +27,14 @@ const props = defineProps({
 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 rootProps = useForwardPropsEmits(reactivePick(props, "as", "collapsible", "defaultValue", "disabled", "modelValue", "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] })">
+  <AccordionRoot v-bind="rootProps" :type="type" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <AccordionItem
       v-for="(item, index) in props.items"
       v-slot="{ open }"