@eslamdevui/ui 4.0.0 → 4.1.1-rc.1

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

@@ -46,29 +46,31 @@ export interface DashboardSidebarSlots {
     'toggle'(props: {
         open: boolean;
         toggle: () => void;
+        ui: DashboardSidebar['ui'];
+    }): any;
+    'content'(props: {
+        close?: () => void;
     }): any;
-    'content'(props?: {}): any;
     'resize-handle'(props: {
         onMouseDown: (e: MouseEvent) => void;
         onTouchStart: (e: TouchEvent) => void;
         onDoubleClick: (e: MouseEvent) => void;
+        ui: DashboardSidebar['ui'];
     }): any;
 }
-declare const _default: <T extends DashboardSidebarMode>(__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:open"?: ((value: boolean) => any) | undefined;
-        readonly "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:open" | "onUpdate:collapsed"> & (DashboardSidebarProps<T> & {
+declare const __VLS_export: <T extends DashboardSidebarMode>(__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<(DashboardSidebarProps<T> & {
         open?: boolean;
         collapsed?: boolean;
-    }) & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:open", value: boolean) => void) & ((evt: "update:collapsed", value: boolean) => void)>>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: DashboardSidebarSlots;
     emit: ((evt: "update:open", value: boolean) => void) & ((evt: "update:collapsed", value: boolean) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

package/dist/runtime/components/DashboardSidebar.vue

@@ -80,7 +80,7 @@ function toggleOpen() {
 
 <template>
   <DefineToggleTemplate>
-    <slot name="toggle" :open="open" :toggle="toggleOpen">
+    <slot name="toggle" :open="open" :toggle="toggleOpen" :ui="ui">
       <UDashboardSidebarToggle
         v-if="toggle"
         v-bind="typeof toggle === 'object' ? toggle : {}"
@@ -91,7 +91,7 @@ function toggleOpen() {
   </DefineToggleTemplate>
 
   <DefineResizeHandleTemplate>
-    <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart" :on-double-click="onDoubleClick">
+    <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart" :on-double-click="onDoubleClick" :ui="ui">
       <UDashboardResizeHandle
         v-if="resizable"
         :aria-controls="id"
@@ -139,8 +139,8 @@ function toggleOpen() {
   content: ui.content({ class: props.ui?.content })
 }"
   >
-    <template #content>
-      <slot name="content">
+    <template #content="contentData">
+      <slot name="content" v-bind="contentData">
         <div v-if="!!slots.header || mode !== 'drawer'" :class="ui.header({ class: props.ui?.header, menu: true })">
           <ReuseToggleTemplate v-if="mode !== 'drawer' && toggleSide === 'left'" />
 

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

@@ -46,29 +46,31 @@ export interface DashboardSidebarSlots {
     'toggle'(props: {
         open: boolean;
         toggle: () => void;
+        ui: DashboardSidebar['ui'];
+    }): any;
+    'content'(props: {
+        close?: () => void;
     }): any;
-    'content'(props?: {}): any;
     'resize-handle'(props: {
         onMouseDown: (e: MouseEvent) => void;
         onTouchStart: (e: TouchEvent) => void;
         onDoubleClick: (e: MouseEvent) => void;
+        ui: DashboardSidebar['ui'];
     }): any;
 }
-declare const _default: <T extends DashboardSidebarMode>(__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:open"?: ((value: boolean) => any) | undefined;
-        readonly "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:open" | "onUpdate:collapsed"> & (DashboardSidebarProps<T> & {
+declare const __VLS_export: <T extends DashboardSidebarMode>(__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<(DashboardSidebarProps<T> & {
         open?: boolean;
         collapsed?: boolean;
-    }) & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:open", value: boolean) => void) & ((evt: "update:collapsed", value: boolean) => void)>>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: DashboardSidebarSlots;
     emit: ((evt: "update:open", value: boolean) => void) & ((evt: "update:collapsed", value: boolean) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

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

@@ -11,9 +11,10 @@ export interface DashboardSidebarCollapseProps extends /** @vue-ignore */ Pick<B
     variant?: ButtonProps['variant'];
     class?: any;
 }
-declare const _default: import("vue").DefineComponent<DashboardSidebarCollapseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarCollapseProps> & Readonly<{}>, {
+declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarCollapseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarCollapseProps> & Readonly<{}>, {
     color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     side: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -11,9 +11,10 @@ export interface DashboardSidebarCollapseProps extends /** @vue-ignore */ Pick<B
     variant?: ButtonProps['variant'];
     class?: any;
 }
-declare const _default: import("vue").DefineComponent<DashboardSidebarCollapseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarCollapseProps> & Readonly<{}>, {
+declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarCollapseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarCollapseProps> & Readonly<{}>, {
     color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     side: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -11,9 +11,10 @@ export interface DashboardSidebarToggleProps extends /** @vue-ignore */ Pick<But
     variant?: ButtonProps['variant'];
     class?: any;
 }
-declare const _default: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {
+declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {
     color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     side: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -11,9 +11,10 @@ export interface DashboardSidebarToggleProps extends /** @vue-ignore */ Pick<But
     variant?: ButtonProps['variant'];
     class?: any;
 }
-declare const _default: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {
+declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {
     color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     side: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -16,7 +16,8 @@ export interface DashboardToolbarSlots {
     left(props?: {}): any;
     right(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DashboardToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardToolbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardToolbarSlots>;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardToolbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardToolbarSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -16,7 +16,8 @@ export interface DashboardToolbarSlots {
     left(props?: {}): any;
     right(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DashboardToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardToolbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardToolbarSlots>;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardToolbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardToolbarSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -44,6 +44,7 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
     ui?: Drawer['slots'];
 }
 export interface DrawerEmits extends DrawerRootEmits {
+    (e: 'close:prevent'): void;
 }
 export interface DrawerSlots {
     default(props?: {}): any;
@@ -54,10 +55,11 @@ export interface DrawerSlots {
     body(props?: {}): any;
     footer(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     close: () => any;
     drag: (percentageDragged: number) => any;
     "update:open": (open: boolean) => any;
+    "close:prevent": () => any;
     release: (open: boolean) => any;
     "update:activeSnapPoint": (val: string | number) => any;
     animationEnd: (open: boolean) => any;
@@ -65,6 +67,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DrawerProp
     onClose?: (() => any) | undefined;
     onDrag?: ((percentageDragged: number) => any) | undefined;
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    "onClose:prevent"?: (() => any) | undefined;
     onRelease?: ((open: boolean) => any) | undefined;
     "onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
     onAnimationEnd?: ((open: boolean) => any) | undefined;
@@ -76,6 +79,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DrawerProp
     handle: boolean;
     dismissible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DrawerSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Drawer.vue

@@ -38,18 +38,29 @@ const props = defineProps({
   preventScrollRestoration: { type: Boolean, required: false },
   snapPoints: { type: Array, required: false }
 });
-const emits = defineEmits(["drag", "release", "close", "update:open", "update:activeSnapPoint", "animationEnd"]);
+const emits = defineEmits(["close:prevent", "drag", "release", "close", "update:open", "update:activeSnapPoint", "animationEnd"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(reactivePick(props, "activeSnapPoint", "closeThreshold", "shouldScaleBackground", "setBackgroundColorOnScale", "scrollLockTimeout", "fixed", "dismissible", "modal", "open", "defaultOpen", "nested", "direction", "noBodyStyles", "handleOnly", "preventScrollRestoration", "snapPoints"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => props.content);
-const contentEvents = {
-  closeAutoFocus: (e) => e.preventDefault()
-};
+const contentEvents = computed(() => {
+  if (!props.dismissible) {
+    const events = ["pointerDownOutside", "interactOutside", "escapeKeyDown"];
+    return events.reduce((acc, curr) => {
+      acc[curr] = (e) => {
+        e.preventDefault();
+        emits("close:prevent");
+      };
+      return acc;
+    }, {});
+  }
+  return {};
+});
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {} })({
   direction: props.direction,
-  inset: props.inset
+  inset: props.inset,
+  snapPoints: props.snapPoints && props.snapPoints.length > 0
 }));
 </script>
 

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

@@ -44,6 +44,7 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
     ui?: Drawer['slots'];
 }
 export interface DrawerEmits extends DrawerRootEmits {
+    (e: 'close:prevent'): void;
 }
 export interface DrawerSlots {
     default(props?: {}): any;
@@ -54,10 +55,11 @@ export interface DrawerSlots {
     body(props?: {}): any;
     footer(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     close: () => any;
     drag: (percentageDragged: number) => any;
     "update:open": (open: boolean) => any;
+    "close:prevent": () => any;
     release: (open: boolean) => any;
     "update:activeSnapPoint": (val: string | number) => any;
     animationEnd: (open: boolean) => any;
@@ -65,6 +67,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DrawerProp
     onClose?: (() => any) | undefined;
     onDrag?: ((percentageDragged: number) => any) | undefined;
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    "onClose:prevent"?: (() => any) | undefined;
     onRelease?: ((open: boolean) => any) | undefined;
     "onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
     onAnimationEnd?: ((open: boolean) => any) | undefined;
@@ -76,6 +79,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DrawerProp
     handle: boolean;
     dismissible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DrawerSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -7,13 +7,16 @@ import type { ComponentConfig } from '../types/tv';
 type DropdownMenu = ComponentConfig<typeof theme, AppConfig, 'dropdownMenu'>;
 export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
     label?: string;
+    description?: string;
     /**
      * @IconifyIcon
      */
     icon?: IconProps['name'];
     color?: DropdownMenu['variants']['color'];
     avatar?: AvatarProps;
-    content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>;
+    content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & {
+        class?: any;
+    } & Partial<EmitsToProps<DropdownMenuContentEmits>>;
     kbds?: KbdProps['value'][] | KbdProps[];
     /**
      * The item type.
@@ -27,10 +30,10 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
     open?: boolean;
     defaultOpen?: boolean;
     children?: ArrayOrNested<DropdownMenuItem>;
-    onSelect?(e: Event): void;
-    onUpdateChecked?(checked: boolean): void;
+    onSelect?: (e: Event) => void;
+    onUpdateChecked?: (checked: boolean) => void;
     class?: any;
-    ui?: Pick<DropdownMenu['slots'], 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLabel' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>;
+    ui?: Pick<DropdownMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>;
     [key: string]: any;
 }
 export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>> extends Omit<DropdownMenuRootProps, 'dir'> {
@@ -78,6 +81,11 @@ export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = A
      * @defaultValue 'label'
      */
     labelKey?: GetItemKeys<T>;
+    /**
+     * The key used to get the description from the item.
+     * @defaultValue 'description'
+     */
+    descriptionKey?: GetItemKeys<T>;
     disabled?: boolean;
     class?: any;
     ui?: DropdownMenu['slots'];
@@ -88,6 +96,7 @@ type SlotProps<T extends DropdownMenuItem> = (props: {
     item: T;
     active?: boolean;
     index: number;
+    ui: DropdownMenu['ui'];
 }) => any;
 export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>, T extends NestedItem<A> = NestedItem<A>> = {
     'default'(props: {
@@ -95,25 +104,37 @@ export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
     }): any;
     'item': SlotProps<T>;
     'item-leading': SlotProps<T>;
-    'item-label': SlotProps<T>;
+    'item-label': (props: {
+        item: T;
+        active?: boolean;
+        index: number;
+    }) => any;
+    'item-description': (props: {
+        item: T;
+        active?: boolean;
+        index: number;
+    }) => any;
     'item-trailing': SlotProps<T>;
     'content-top': (props?: {}) => any;
     'content-bottom': (props?: {}) => any;
-} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing', {
+} & DynamicSlots<MergeTypes<T>, 'label' | 'description', {
+    active?: boolean;
+    index: number;
+}> & DynamicSlots<MergeTypes<T>, 'leading' | 'trailing', {
     active?: boolean;
     index: number;
+    ui: DropdownMenu['ui'];
 }>;
-declare const _default: <T extends ArrayOrNested<DropdownMenuItem>>(__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:open"?: ((payload: boolean) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:open"> & DropdownMenuProps<T> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__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<DropdownMenuProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:open", payload: boolean) => void>>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: DropdownMenuSlots<T, NestedItem<T>>;
     emit: (evt: "update:open", payload: boolean) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

package/dist/runtime/components/DropdownMenu.vue

@@ -21,6 +21,7 @@ const props = defineProps({
   arrow: { type: [Boolean, Object], required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   labelKey: { type: null, required: false, default: "label" },
+  descriptionKey: { type: null, required: false, default: "description" },
   disabled: { type: Boolean, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
@@ -54,6 +55,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dropdownMenu
       :items="items"
       :portal="portal"
       :label-key="labelKey"
+      :description-key="descriptionKey"
       :checked-icon="checkedIcon"
       :loading-icon="loadingIcon"
       :external-icon="externalIcon"

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

@@ -7,13 +7,16 @@ import type { ComponentConfig } from '../types/tv';
 type DropdownMenu = ComponentConfig<typeof theme, AppConfig, 'dropdownMenu'>;
 export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
     label?: string;
+    description?: string;
     /**
      * @IconifyIcon
      */
     icon?: IconProps['name'];
     color?: DropdownMenu['variants']['color'];
     avatar?: AvatarProps;
-    content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>;
+    content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & {
+        class?: any;
+    } & Partial<EmitsToProps<DropdownMenuContentEmits>>;
     kbds?: KbdProps['value'][] | KbdProps[];
     /**
      * The item type.
@@ -27,10 +30,10 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
     open?: boolean;
     defaultOpen?: boolean;
     children?: ArrayOrNested<DropdownMenuItem>;
-    onSelect?(e: Event): void;
-    onUpdateChecked?(checked: boolean): void;
+    onSelect?: (e: Event) => void;
+    onUpdateChecked?: (checked: boolean) => void;
     class?: any;
-    ui?: Pick<DropdownMenu['slots'], 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLabel' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>;
+    ui?: Pick<DropdownMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>;
     [key: string]: any;
 }
 export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>> extends Omit<DropdownMenuRootProps, 'dir'> {
@@ -78,6 +81,11 @@ export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = A
      * @defaultValue 'label'
      */
     labelKey?: GetItemKeys<T>;
+    /**
+     * The key used to get the description from the item.
+     * @defaultValue 'description'
+     */
+    descriptionKey?: GetItemKeys<T>;
     disabled?: boolean;
     class?: any;
     ui?: DropdownMenu['slots'];
@@ -88,6 +96,7 @@ type SlotProps<T extends DropdownMenuItem> = (props: {
     item: T;
     active?: boolean;
     index: number;
+    ui: DropdownMenu['ui'];
 }) => any;
 export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>, T extends NestedItem<A> = NestedItem<A>> = {
     'default'(props: {
@@ -95,25 +104,37 @@ export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
     }): any;
     'item': SlotProps<T>;
     'item-leading': SlotProps<T>;
-    'item-label': SlotProps<T>;
+    'item-label': (props: {
+        item: T;
+        active?: boolean;
+        index: number;
+    }) => any;
+    'item-description': (props: {
+        item: T;
+        active?: boolean;
+        index: number;
+    }) => any;
     'item-trailing': SlotProps<T>;
     'content-top': (props?: {}) => any;
     'content-bottom': (props?: {}) => any;
-} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing', {
+} & DynamicSlots<MergeTypes<T>, 'label' | 'description', {
+    active?: boolean;
+    index: number;
+}> & DynamicSlots<MergeTypes<T>, 'leading' | 'trailing', {
     active?: boolean;
     index: number;
+    ui: DropdownMenu['ui'];
 }>;
-declare const _default: <T extends ArrayOrNested<DropdownMenuItem>>(__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:open"?: ((payload: boolean) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:open"> & DropdownMenuProps<T> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__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<DropdownMenuProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:open", payload: boolean) => void>>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: DropdownMenuSlots<T, NestedItem<T>>;
     emit: (evt: "update:open", payload: boolean) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

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

@@ -11,6 +11,7 @@ interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> ex
     portal?: boolean | string | HTMLElement;
     sub?: boolean;
     labelKey: GetItemKeys<T>;
+    descriptionKey: GetItemKeys<T>;
     /**
      * @IconifyIcon
      */
@@ -24,32 +25,29 @@ interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> ex
      */
     externalIcon?: boolean | IconProps['name'];
     class?: any;
-    ui: {
-        [K in keyof Required<DropdownMenu['slots']>]: (props?: Record<string, any>) => string;
-    };
+    ui: DropdownMenu['ui'];
     uiOverride?: DropdownMenu['slots'];
 }
-type DropdownMenuContentSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>, T extends NestedItem<A> = NestedItem<A>> = Pick<DropdownMenuSlots<A>, 'item' | 'item-leading' | 'item-label' | 'item-trailing' | 'content-top' | 'content-bottom'> & {
+type DropdownMenuContentSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>, T extends NestedItem<A> = NestedItem<A>> = Pick<DropdownMenuSlots<A>, 'item' | 'item-leading' | 'item-label' | 'item-description' | 'item-trailing' | 'content-top' | 'content-bottom'> & {
     default(props?: {}): any;
-} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing', {
+} & DynamicSlots<MergeTypes<T>, 'label' | 'description', {
     active?: boolean;
     index: number;
+}> & DynamicSlots<MergeTypes<T>, 'leading' | 'trailing', {
+    active?: boolean;
+    index: number;
+    ui: DropdownMenu['ui'];
 }>;
-declare const _default: <T extends ArrayOrNested<DropdownMenuItem>>(__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 onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
-        readonly onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
-        readonly onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
-        readonly onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-        readonly onCloseAutoFocus?: ((event: Event) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "onCloseAutoFocus"> & DropdownMenuContentProps<T> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__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<DropdownMenuContentProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void)>>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: DropdownMenuContentSlots<T, NestedItem<T>>;
     emit: ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];