@nuxt/ui 4.0.1 → 4.2.0

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

@@ -7,13 +7,16 @@ import type { ComponentConfig } from '../types/tv';
 type ContextMenu = ComponentConfig<typeof theme, AppConfig, 'contextMenu'>;
 export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
     label?: string;
+    description?: string;
     /**
      * @IconifyIcon
      */
     icon?: IconProps['name'];
     color?: ContextMenu['variants']['color'];
     avatar?: AvatarProps;
-    content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<ContextMenuContentEmits>>;
+    content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> & {
+        class?: any;
+    } & Partial<EmitsToProps<ContextMenuContentEmits>>;
     kbds?: KbdProps['value'][] | KbdProps[];
     /**
      * The item type.
@@ -27,10 +30,10 @@ export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custo
     open?: boolean;
     defaultOpen?: boolean;
     children?: ArrayOrNested<ContextMenuItem>;
-    onSelect?(e: Event): void;
-    onUpdateChecked?(checked: boolean): void;
+    onSelect?: (e: Event) => void;
+    onUpdateChecked?: (checked: boolean) => void;
     class?: any;
-    ui?: Pick<ContextMenu['slots'], 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLabel' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>;
+    ui?: Pick<ContextMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>;
     [key: string]: any;
 }
 export interface ContextMenuProps<T extends ArrayOrNested<ContextMenuItem> = ArrayOrNested<ContextMenuItem>> extends Omit<ContextMenuRootProps, 'dir'> {
@@ -70,6 +73,11 @@ export interface ContextMenuProps<T extends ArrayOrNested<ContextMenuItem> = Arr
      * @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?: ContextMenu['slots'];
@@ -80,18 +88,32 @@ type SlotProps<T extends ContextMenuItem> = (props: {
     item: T;
     active?: boolean;
     index: number;
+    ui: ContextMenu['ui'];
 }) => any;
 export type ContextMenuSlots<A extends ArrayOrNested<ContextMenuItem> = ArrayOrNested<ContextMenuItem>, T extends NestedItem<A> = NestedItem<A>> = {
     'default'(props?: {}): 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: ContextMenu['ui'];
 }>;
 declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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<ContextMenuProps<T> & {

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

@@ -11,6 +11,7 @@ interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> exte
     portal?: boolean | string | HTMLElement;
     sub?: boolean;
     labelKey: GetItemKeys<T>;
+    descriptionKey: GetItemKeys<T>;
     /**
      * @IconifyIcon
      */
@@ -24,9 +25,7 @@ interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> exte
      */
     externalIcon?: boolean | IconProps['name'];
     class?: any;
-    ui: {
-        [K in keyof Required<ContextMenu['slots']>]: (props?: Record<string, any>) => string;
-    };
+    ui: ContextMenu['ui'];
     uiOverride?: ContextMenu['slots'];
 }
 declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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<{

package/dist/runtime/components/ContextMenuContent.vue

@@ -23,6 +23,7 @@ const props = defineProps({
   portal: { type: [Boolean, String], required: false, skipCheck: true },
   sub: { type: Boolean, required: false },
   labelKey: { type: null, required: true },
+  descriptionKey: { type: null, required: true },
   checkedIcon: { type: [String, Object], required: false },
   loadingIcon: { type: [String, Object], required: false },
   externalIcon: { type: [Boolean, String, Object], required: false },
@@ -48,7 +49,7 @@ const slots = defineSlots();
 const { dir } = useLocale();
 const appConfig = useAppConfig();
 const portalProps = usePortal(toRef(() => props.portal));
-const contentProps = useForwardPropsEmits(reactiveOmit(props, "sub", "items", "portal", "labelKey", "checkedIcon", "loadingIcon", "externalIcon", "class", "ui", "uiOverride"), emits);
+const contentProps = useForwardPropsEmits(reactiveOmit(props, "sub", "items", "portal", "labelKey", "descriptionKey", "checkedIcon", "loadingIcon", "externalIcon", "class", "ui", "uiOverride"), emits);
 const getProxySlots = () => omit(slots, ["default"]);
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate();
 const childrenIcon = computed(() => dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight);
@@ -59,53 +60,62 @@ const groups = computed(
 
 <template>
   <DefineItemTemplate v-slot="{ item, active, index }">
-    <slot :name="item.slot || 'item'" :item="item" :index="index">
-      <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index">
-        <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
-        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
-        <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
+    <slot :name="item.slot || 'item'" :item="item" :index="index" :ui="ui">
+      <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index" :ui="ui">
+        <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
+        <UIcon v-else-if="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
+        <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
       </slot>
 
-      <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
-        <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
-          {{ get(item, props.labelKey) }}
-        </slot>
+      <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'] || (get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : 'item-description'])" data-slot="itemWrapper" :class="ui.itemWrapper({ class: [uiOverride?.itemWrapper, item.ui?.itemWrapper] })">
+        <span data-slot="itemLabel" :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
+          <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
+            {{ get(item, props.labelKey) }}
+          </slot>
+
+          <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" data-slot="itemLabelExternalIcon" :class="ui.itemLabelExternalIcon({ class: [uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item?.color, active })" />
+        </span>
 
-        <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: [uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item?.color, active })" />
+        <span v-if="get(item, props.descriptionKey)" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiOverride?.itemDescription, item.ui?.itemDescription] })">
+          <slot :name="item.slot ? `${item.slot}-description` : 'item-description'" :item="item" :active="active" :index="index">
+            {{ get(item, props.descriptionKey) }}
+          </slot>
+        </span>
       </span>
 
-      <span :class="ui.itemTrailing({ class: [uiOverride?.itemTrailing, item.ui?.itemTrailing] })">
-        <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
-          <UIcon v-if="item.children?.length" :name="childrenIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
-          <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
+      <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [uiOverride?.itemTrailing, item.ui?.itemTrailing] })">
+        <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index" :ui="ui">
+          <UIcon v-if="item.children?.length" :name="childrenIcon" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
+          <span v-else-if="item.kbds?.length" data-slot="itemTrailingKbds" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
             <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
           </span>
         </slot>
 
         <ContextMenu.ItemIndicator as-child>
-          <UIcon :name="checkedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color })" />
+          <UIcon :name="checkedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color })" />
         </ContextMenu.ItemIndicator>
       </span>
     </slot>
   </DefineItemTemplate>
 
   <ContextMenu.Portal v-bind="portalProps">
-    <component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" :class="props.class" v-bind="contentProps">
+    <component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" data-slot="content" :class="ui.content({ class: [uiOverride?.content, props.class] })" v-bind="contentProps">
       <slot name="content-top" />
 
-      <div role="presentation" :class="ui.viewport({ class: uiOverride?.viewport })">
-        <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
+      <div role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiOverride?.viewport })">
+        <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiOverride?.group })">
           <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-            <ContextMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
+            <ContextMenu.Label v-if="item.type === 'label'" data-slot="label" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
               <ReuseItemTemplate :item="item" :index="index" />
             </ContextMenu.Label>
-            <ContextMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
+            <ContextMenu.Separator v-else-if="item.type === 'separator'" data-slot="separator" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
             <ContextMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
               <ContextMenu.SubTrigger
                 as="button"
                 type="button"
                 :disabled="item.disabled"
                 :text-value="get(item, props.labelKey)"
+                data-slot="item"
                 :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
               >
                 <ReuseItemTemplate :item="item" :index="index" />
@@ -113,13 +123,14 @@ const groups = computed(
 
               <UContextMenuContent
                 sub
-                :class="props.class"
+                :class="item.ui?.content"
                 :ui="ui"
                 :ui-override="uiOverride"
                 :portal="portal"
                 :items="item.children"
                 :align-offset="-4"
                 :label-key="labelKey"
+                :description-key="descriptionKey"
                 :checked-icon="checkedIcon"
                 :loading-icon="loadingIcon"
                 :external-icon="externalIcon"
@@ -135,6 +146,7 @@ const groups = computed(
               :model-value="item.checked"
               :disabled="item.disabled"
               :text-value="get(item, props.labelKey)"
+              data-slot="item"
               :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
               @update:model-value="item.onUpdateChecked"
               @select="item.onSelect"
@@ -149,7 +161,7 @@ const groups = computed(
               @select="item.onSelect"
             >
               <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-                <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], active, color: item?.color })">
+                <ULinkBase v-bind="slotProps" data-slot="item" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], active, color: item?.color })">
                   <ReuseItemTemplate :item="item" :active="active" :index="index" />
                 </ULinkBase>
               </ULink>

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

@@ -11,6 +11,7 @@ interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> exte
     portal?: boolean | string | HTMLElement;
     sub?: boolean;
     labelKey: GetItemKeys<T>;
+    descriptionKey: GetItemKeys<T>;
     /**
      * @IconifyIcon
      */
@@ -24,9 +25,7 @@ interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> exte
      */
     externalIcon?: boolean | IconProps['name'];
     class?: any;
-    ui: {
-        [K in keyof Required<ContextMenu['slots']>]: (props?: Record<string, any>) => string;
-    };
+    ui: ContextMenu['ui'];
     uiOverride?: ContextMenu['slots'];
 }
 declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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<{

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

@@ -33,12 +33,18 @@ export interface DashboardNavbarProps {
 type DashboardNavbarSlotsProps = Omit<DashboardContext, 'storage' | 'storageKey' | 'persistent' | 'unit'>;
 export interface DashboardNavbarSlots {
     title(props?: {}): any;
-    leading(props: DashboardNavbarSlotsProps): any;
-    trailing(props: DashboardNavbarSlotsProps): any;
+    leading(props: DashboardNavbarSlotsProps & {
+        ui: DashboardNavbar['ui'];
+    }): any;
+    trailing(props: DashboardNavbarSlotsProps & {
+        ui: DashboardNavbar['ui'];
+    }): any;
     left(props: DashboardNavbarSlotsProps): any;
     default(props: DashboardNavbarSlotsProps): any;
     right(props: DashboardNavbarSlotsProps): any;
-    toggle(props: DashboardNavbarSlotsProps): any;
+    toggle(props: DashboardNavbarSlotsProps & {
+        ui: DashboardNavbar['ui'];
+    }): any;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardNavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardNavbarProps> & Readonly<{}>, {
     toggle: boolean | Partial<ButtonProps>;

package/dist/runtime/components/DashboardNavbar.vue

@@ -30,40 +30,41 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardNavb
 
 <template>
   <DefineToggleTemplate>
-    <slot name="toggle" v-bind="dashboardContext">
+    <slot name="toggle" v-bind="{ ...dashboardContext, ui }">
       <UDashboardSidebarToggle
         v-if="toggle"
         v-bind="typeof toggle === 'object' ? toggle : {}"
         :side="toggleSide"
+        data-slot="toggle"
         :class="ui.toggle({ class: props.ui?.toggle, toggleSide })"
       />
     </slot>
   </DefineToggleTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.left({ class: props.ui?.left })">
+  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="left" :class="ui.left({ class: props.ui?.left })">
       <ReuseToggleTemplate v-if="toggleSide === 'left'" />
 
       <slot name="left" v-bind="dashboardContext">
-        <slot name="leading" v-bind="dashboardContext">
-          <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+        <slot name="leading" v-bind="{ ...dashboardContext, ui }">
+          <UIcon v-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
         </slot>
 
-        <h1 :class="ui.title({ class: props.ui?.title })">
+        <h1 data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
             {{ title }}
           </slot>
         </h1>
 
-        <slot name="trailing" v-bind="dashboardContext" />
+        <slot name="trailing" v-bind="{ ...dashboardContext, ui }" />
       </slot>
     </div>
 
-    <div v-if="!!slots.default" :class="ui.center({ class: props.ui?.center })">
+    <div v-if="!!slots.default" data-slot="center" :class="ui.center({ class: props.ui?.center })">
       <slot v-bind="dashboardContext" />
     </div>
 
-    <div :class="ui.right({ class: props.ui?.right })">
+    <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
       <slot name="right" v-bind="dashboardContext" />
 
       <ReuseToggleTemplate v-if="toggleSide === 'right'" />

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

@@ -33,12 +33,18 @@ export interface DashboardNavbarProps {
 type DashboardNavbarSlotsProps = Omit<DashboardContext, 'storage' | 'storageKey' | 'persistent' | 'unit'>;
 export interface DashboardNavbarSlots {
     title(props?: {}): any;
-    leading(props: DashboardNavbarSlotsProps): any;
-    trailing(props: DashboardNavbarSlotsProps): any;
+    leading(props: DashboardNavbarSlotsProps & {
+        ui: DashboardNavbar['ui'];
+    }): any;
+    trailing(props: DashboardNavbarSlotsProps & {
+        ui: DashboardNavbar['ui'];
+    }): any;
     left(props: DashboardNavbarSlotsProps): any;
     default(props: DashboardNavbarSlotsProps): any;
     right(props: DashboardNavbarSlotsProps): any;
-    toggle(props: DashboardNavbarSlotsProps): any;
+    toggle(props: DashboardNavbarSlotsProps & {
+        ui: DashboardNavbar['ui'];
+    }): any;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardNavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardNavbarProps> & Readonly<{}>, {
     toggle: boolean | Partial<ButtonProps>;

package/dist/runtime/components/DashboardPanel.vue

@@ -35,13 +35,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardPane
     ref="el"
     v-bind="$attrs"
     :data-dragging="isDragging"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="[size ? { '--width': `${size}${dashboardContext.unit}` } : void 0]"
   >
     <slot>
       <slot name="header" />
 
-      <div :class="ui.body({ class: props.ui?.body })">
+      <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
         <slot name="body" />
       </div>
 
@@ -53,6 +54,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardPane
     <UDashboardResizeHandle
       v-if="resizable"
       :aria-controls="id"
+      data-slot="handle"
       :class="ui.handle({ class: props.ui?.handle })"
       @mousedown="onMouseDown"
       @touchstart="onTouchStart"

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

@@ -62,7 +62,9 @@ export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPale
     ui?: DashboardSearch['slots'] & CommandPaletteProps<CommandPaletteGroup<CommandPaletteItem>, CommandPaletteItem>['ui'];
 }
 export type DashboardSearchSlots = CommandPaletteSlots<CommandPaletteGroup<CommandPaletteItem>, CommandPaletteItem> & {
-    content(props?: {}): any;
+    content(props: {
+        close: () => void;
+    }): any;
 };
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchProps<CommandPaletteItem> & {
     open?: boolean;

package/dist/runtime/components/DashboardSearch.vue

@@ -88,6 +88,7 @@ const groups = computed(() => {
   }
   return groups2;
 });
+const commandPaletteRef = useTemplateRef("commandPaletteRef");
 function onSelect(item) {
   if (item.disabled) {
     return;
@@ -101,7 +102,6 @@ defineShortcuts({
     handler: () => open.value = !open.value
   }
 });
-const commandPaletteRef = useTemplateRef("commandPaletteRef");
 defineExpose({
   commandPaletteRef
 });
@@ -113,10 +113,11 @@ defineExpose({
     :title="title || t('dashboardSearch.title')"
     :description="description || t('dashboardSearch.description')"
     v-bind="modalProps"
+    data-slot="modal"
     :class="ui.modal({ class: [props.ui?.modal, props.class] })"
   >
-    <template #content>
-      <slot name="content">
+    <template #content="contentData">
+      <slot name="content" v-bind="contentData">
         <UCommandPalette
           ref="commandPaletteRef"
           v-model:search-term="searchTerm"

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

@@ -62,7 +62,9 @@ export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPale
     ui?: DashboardSearch['slots'] & CommandPaletteProps<CommandPaletteGroup<CommandPaletteItem>, CommandPaletteItem>['ui'];
 }
 export type DashboardSearchSlots = CommandPaletteSlots<CommandPaletteGroup<CommandPaletteItem>, CommandPaletteItem> & {
-    content(props?: {}): any;
+    content(props: {
+        close: () => void;
+    }): any;
 };
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchProps<CommandPaletteItem> & {
     open?: boolean;

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

@@ -3,7 +3,7 @@ import theme from '#build/ui/dashboard-search-button';
 import type { ButtonProps, ButtonSlots, IconProps, KbdProps, TooltipProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type DashboardSearchButton = ComponentConfig<typeof theme, AppConfig, 'dashboardSearchButton'>;
-export interface DashboardSearchButtonProps {
+export interface DashboardSearchButtonProps extends Omit<ButtonProps, 'icon' | 'label' | 'color' | 'variant'> {
     /**
      * The icon displayed in the button.
      * @defaultValue appConfig.ui.icons.search
@@ -25,7 +25,6 @@ export interface DashboardSearchButtonProps {
      * Defaults to 'outline' when not collapsed, 'ghost' when collapsed.
      */
     variant?: ButtonProps['variant'];
-    size?: ButtonProps['size'];
     /**
      * Whether the button is collapsed.
      * @defaultValue false
@@ -46,7 +45,7 @@ export interface DashboardSearchButtonProps {
     class?: any;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSearchButtonProps> & Readonly<{}>, {
-    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
     tooltip: boolean | TooltipProps;
     kbds: KbdProps["value"][] | KbdProps[];
     collapsed: boolean;

package/dist/runtime/components/DashboardSearchButton.vue

@@ -6,7 +6,7 @@ import theme from "#build/ui/dashboard-search-button";
 import { computed, toRef } from "vue";
 import { useForwardProps } from "reka-ui";
 import { defu } from "defu";
-import { reactivePick, createReusableTemplate } from "@vueuse/core";
+import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
 import { useDashboard } from "../utils/dashboard";
@@ -21,23 +21,62 @@ const props = defineProps({
   label: { type: String, required: false },
   color: { type: null, required: false, default: "neutral" },
   variant: { type: null, required: false },
-  size: { type: null, required: false },
   collapsed: { type: Boolean, required: false, default: false },
   tooltip: { type: [Boolean, Object], required: false, default: false },
   kbds: { type: Array, required: false, default: () => ["meta", "k"] },
   ui: { type: void 0, required: false },
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  activeColor: { type: null, required: false },
+  activeVariant: { type: null, required: false },
+  size: { type: null, required: false },
+  square: { type: Boolean, required: false },
+  block: { type: Boolean, required: false },
+  loadingAuto: { type: Boolean, required: false },
+  onClick: { type: [Function, Array], required: false },
+  avatar: { type: Object, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: [String, Object], required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: [String, Object], required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: [String, Object], required: false },
+  as: { type: null, required: false },
+  type: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  active: { type: Boolean, required: false },
+  exact: { type: Boolean, required: false },
+  exactQuery: { type: [Boolean, String], required: false },
+  exactHash: { type: Boolean, required: false },
+  inactiveClass: { type: String, required: false },
+  to: { type: null, required: false },
+  href: { type: null, required: false },
+  external: { type: Boolean, required: false },
+  target: { type: [String, Object, null], required: false },
+  rel: { type: [String, Object, null], required: false },
+  noRel: { type: Boolean, required: false },
+  prefetchedClass: { type: String, required: false },
+  prefetch: { type: Boolean, required: false },
+  prefetchOn: { type: [String, Object], required: false },
+  noPrefetch: { type: Boolean, required: false },
+  trailingSlash: { type: String, required: false },
+  activeClass: { type: String, required: false },
+  exactActiveClass: { type: String, required: false },
+  ariaCurrentValue: { type: String, required: false },
+  viewTransition: { type: Boolean, required: false },
+  replace: { type: Boolean, required: false }
 });
 const slots = defineSlots();
 const [DefineButtonTemplate, ReuseButtonTemplate] = createReusableTemplate();
 const getProxySlots = () => omit(slots, ["trailing"]);
-const rootProps = useForwardProps(reactivePick(props, "color", "size"));
+const buttonProps = useForwardProps(reactiveOmit(props, "icon", "label", "variant", "collapsed", "tooltip", "kbds", "class", "ui"));
 const tooltipProps = toRef(() => defu(typeof props.tooltip === "boolean" ? {} : props.tooltip, { delayDuration: 0, content: { side: "right" } }));
 const { t } = useLocale();
 const appConfig = useAppConfig();
 const { toggleSearch } = useDashboard({ toggleSearch: () => {
 } });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSearchButton || {} })());
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSearchButton || {} })({
+  collapsed: props.collapsed
+}));
 </script>
 
 <template>
@@ -47,10 +86,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSear
       :label="label || t('dashboardSearchButton.label')"
       :variant="variant || (collapsed ? 'ghost' : 'outline')"
       v-bind="{
-  ...rootProps,
+  ...buttonProps,
   ...collapsed ? {
     'square': true,
-    'label': void 0,
     'aria-label': label || t('dashboardSearchButton.label')
   } : {},
   ...$attrs
@@ -63,9 +101,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSear
         <slot :name="name" v-bind="slotData" />
       </template>
 
-      <template v-if="!collapsed" #trailing>
-        <div :class="ui.trailing({ class: props.ui?.trailing })">
-          <slot name="trailing">
+      <template #trailing="{ ui: uiProxy }">
+        <div data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+          <slot name="trailing" :ui="uiProxy">
             <template v-if="kbds?.length">
               <UKbd v-for="(kbd, index) in kbds" :key="index" variant="subtle" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
             </template>

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

@@ -3,7 +3,7 @@ import theme from '#build/ui/dashboard-search-button';
 import type { ButtonProps, ButtonSlots, IconProps, KbdProps, TooltipProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type DashboardSearchButton = ComponentConfig<typeof theme, AppConfig, 'dashboardSearchButton'>;
-export interface DashboardSearchButtonProps {
+export interface DashboardSearchButtonProps extends Omit<ButtonProps, 'icon' | 'label' | 'color' | 'variant'> {
     /**
      * The icon displayed in the button.
      * @defaultValue appConfig.ui.icons.search
@@ -25,7 +25,6 @@ export interface DashboardSearchButtonProps {
      * Defaults to 'outline' when not collapsed, 'ghost' when collapsed.
      */
     variant?: ButtonProps['variant'];
-    size?: ButtonProps['size'];
     /**
      * Whether the button is collapsed.
      * @defaultValue false
@@ -46,7 +45,7 @@ export interface DashboardSearchButtonProps {
     class?: any;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSearchButtonProps> & Readonly<{}>, {
-    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
     tooltip: boolean | TooltipProps;
     kbds: KbdProps["value"][] | KbdProps[];
     collapsed: boolean;

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

@@ -46,12 +46,16 @@ 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 __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<{