@nuxt/ui 4.0.1 → 4.1.0

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

@@ -1,4 +1,4 @@
-import type { TreeRootProps, TreeRootEmits } from 'reka-ui';
+import type { TreeRootProps, TreeRootEmits, TreeItemSelectEvent, TreeItemToggleEvent } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tree';
 import type { IconProps } from '../types';
@@ -19,8 +19,8 @@ export type TreeItem = {
     disabled?: boolean;
     slot?: string;
     children?: TreeItem[];
-    onToggle?(e: Event): void;
-    onSelect?(e?: Event): void;
+    onToggle?: (e: TreeItemToggleEvent<TreeItem>) => void;
+    onSelect?: (e: TreeItemSelectEvent<TreeItem>) => void;
     class?: any;
     ui?: Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>;
     [key: string]: any;
@@ -30,7 +30,10 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], M extends boolean
      * The element or component this component should render as.
      * @defaultValue 'ul'
      */
-    as?: any;
+    as?: any | {
+        root?: any;
+        link?: any;
+    };
     /**
      * @defaultValue 'primary'
      */
@@ -71,6 +74,31 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], M extends boolean
     defaultValue?: M extends true ? T[number][] : T[number];
     /** Whether multiple options can be selected or not. */
     multiple?: M & boolean;
+    /**
+     * Use nested DOM structure (children inside parents) vs flattened structure (all items at same level).
+     * When `virtualize` is enabled, this is automatically set to `false`.
+     * @defaultValue true
+     */
+    nested?: boolean;
+    /**
+     * Enable virtualization for large lists.
+     * Note: when enabled, the tree structure is flattened like if `nested` was set to `false`.
+     * @defaultValue false
+     */
+    virtualize?: boolean | {
+        /**
+         * Number of items rendered outside the visible area
+         * @defaultValue 12
+         */
+        overscan?: number;
+        /**
+         * Estimated size (in px) of each item
+         * @defaultValue 32
+         */
+        estimateSize?: number;
+    };
+    onSelect?: (e: TreeItemSelectEvent<T[number]>, item: T[number]) => void;
+    onToggle?: (e: TreeItemToggleEvent<T[number]>, item: T[number]) => void;
     class?: any;
     ui?: Tree['slots'];
 }
@@ -81,6 +109,10 @@ type SlotProps<T extends TreeItem> = (props: {
     level: number;
     expanded: boolean;
     selected: boolean;
+    indeterminate: boolean | undefined;
+    handleSelect: () => void;
+    handleToggle: () => void;
+    ui: Tree['ui'];
 }) => any;
 export type TreeSlots<T extends TreeItem[] = TreeItem[]> = {
     'item-wrapper': SlotProps<T[number]>;
@@ -92,14 +124,20 @@ export type TreeSlots<T extends TreeItem[] = TreeItem[]> = {
     index: number;
     level: number;
     expanded: boolean;
+    ui: Tree['ui'];
     selected: boolean;
+    indeterminate: boolean | undefined;
+    handleSelect: () => void;
+    handleToggle: () => void;
 }>;
 declare const __VLS_export: <T extends TreeItem[], M extends boolean = false>(__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<TreeProps<T, M> & {
         "onUpdate:modelValue"?: ((val: M extends true ? T[number][] : T[number]) => any) | undefined;
         "onUpdate:expanded"?: ((val: string[]) => any) | undefined;
     }> & import("vue").PublicProps;
-    expose: (exposed: {}) => void;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        readonly $el: any;
+    }>) => void;
     attrs: any;
     slots: TreeSlots<T>;
     emit: ((evt: "update:modelValue", val: M extends true ? T[number][] : T[number]) => void) & ((evt: "update:expanded", val: string[]) => void);

package/dist/runtime/components/Tree.vue

@@ -3,9 +3,10 @@ import theme from "#build/ui/tree";
 </script>
 
 <script setup>
-import { computed } from "vue";
-import { TreeRoot, TreeItem, useForwardPropsEmits } from "reka-ui";
+import { computed, toRef, ref } from "vue";
+import { TreeRoot, TreeItem, TreeVirtualizer, useForwardPropsEmits } from "reka-ui";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
+import { defu } from "defu";
 import { useAppConfig } from "#imports";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
@@ -24,6 +25,10 @@ const props = defineProps({
   modelValue: { type: null, required: false },
   defaultValue: { type: null, required: false },
   multiple: { type: Boolean, required: false },
+  nested: { type: Boolean, required: false, default: true },
+  virtualize: { type: [Boolean, Object], required: false, default: false },
+  onSelect: { type: Function, required: false },
+  onToggle: { type: Function, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
   expanded: { type: Array, required: false },
@@ -36,12 +41,62 @@ const props = defineProps({
 const emits = defineEmits(["update:modelValue", "update:expanded"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "items", "multiple", "expanded", "disabled", "propagateSelect", "bubbleSelect"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "items", "multiple", "expanded", "disabled", "propagateSelect", "bubbleSelect"), emits);
+const as = computed(() => {
+  if (typeof props.as === "string" || typeof props.as?.render === "function") {
+    return { root: props.as, link: "button" };
+  }
+  return defu(props.as, { root: "ul", link: "button" });
+});
+const nested = computed(() => props.virtualize ? false : props.nested);
+const flattenedPaddingFormula = computed(() => {
+  const sizeConfig = {
+    xs: { base: 2, perLevel: 5.5 },
+    // px-2, ms-4 + ps-1.5
+    sm: { base: 2.5, perLevel: 6 },
+    // px-2.5, ms-4.5 + ps-1.5
+    md: { base: 2.5, perLevel: 6.5 },
+    // px-2.5, ms-5 + ps-1.5
+    lg: { base: 3, perLevel: 7 },
+    // px-3, ms-5.5 + ps-1.5
+    xl: { base: 3, perLevel: 7.5 }
+    // px-3, ms-6 + ps-1.5
+  };
+  const config = sizeConfig[props.size || "md"];
+  return (level) => `calc(var(--spacing) * ${(level - 1) * config.perLevel + config.base})`;
+});
+const virtualizerProps = toRef(() => !!props.virtualize && defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
+  estimateSize: {
+    xs: 24,
+    sm: 28,
+    md: 32,
+    lg: 36,
+    xl: 40
+  }[props.size || "md"]
+}));
 const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate();
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    level: {
+      type: Number,
+      required: true
+    }
+  }
+});
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tree || {} })({
   color: props.color,
-  size: props.size
+  size: props.size,
+  virtualize: !!props.virtualize
 }));
+const rootRef = ref();
 function getItemLabel(item) {
   return get(item, props.labelKey);
 }
@@ -53,106 +108,120 @@ function getDefaultOpenedItems(item) {
   const childItems = item.children?.flatMap((child) => getDefaultOpenedItems(child)) ?? [];
   return [currentItem, ...childItems].filter(Boolean);
 }
-const defaultExpanded = computed(
-  () => props.defaultExpanded ?? props.items?.flatMap((item) => getDefaultOpenedItems(item))
-);
+const defaultExpanded = computed(() => props.defaultExpanded ?? props.items?.flatMap((item) => getDefaultOpenedItems(item)));
+defineExpose({
+  get $el() {
+    return rootRef.value?.$el;
+  }
+});
 </script>
 
 <template>
-  <DefineTreeTemplate v-slot="{ items, level }">
-    <TreeItem
-      v-for="(item, index) in items"
-      :key="`${level}-${index}`"
-      v-slot="{ isExpanded, isSelected }"
-      :level="level"
-      :value="item"
-      :class="level > 1 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
-      @toggle="item.onToggle"
-      @select="item.onSelect"
+  <DefineItemTemplate v-slot="{ item, index, level }">
+    <li
+      role="presentation"
+      :class="!!nested && level > 1 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
     >
-      <slot
-        :name="item.slot ? `${item.slot}-wrapper` : 'item-wrapper'"
-        v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
-        :item="item"
+      <TreeItem
+        v-slot="{ isExpanded, isSelected, isIndeterminate, handleSelect, handleToggle }"
+        :level="level"
+        :value="item"
+        as-child
+        @toggle="(item.onToggle ?? props.onToggle)?.($event, item)"
+        @select="(item.onSelect ?? props.onSelect)?.($event, item)"
       >
-        <button
-          type="button"
-          :disabled="item.disabled || disabled"
-          :data-expanded="isExpanded"
-          :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })"
+        <slot
+          :name="item.slot ? `${item.slot}-wrapper` : 'item-wrapper'"
+          v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
+          :item="item"
         >
-          <slot
-            :name="item.slot || 'item'"
-            v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
-            :item="item"
+          <component
+            :is="as.link"
+            :type="as.link === 'button' ? 'button' : void 0"
+            :disabled="item.disabled || disabled"
+            :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })"
+            :style="!nested && level > 1 ? { paddingLeft: flattenedPaddingFormula(level) } : void 0"
           >
             <slot
-              :name="item.slot ? `${item.slot}-leading` : 'item-leading'"
-              v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
+              :name="item.slot || 'item'"
+              v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
               :item="item"
-            >
-              <UIcon
-                v-if="item.icon"
-                :name="item.icon"
-                :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
-              />
-              <UIcon
-                v-else-if="item.children?.length"
-                :name="isExpanded ? expandedIcon ?? appConfig.ui.icons.folderOpen : collapsedIcon ?? appConfig.ui.icons.folder"
-                :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
-              />
-            </slot>
-
-            <span
-              v-if="getItemLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']"
-              :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
             >
               <slot
-                :name="item.slot ? `${item.slot}-label` : 'item-label'"
-                v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
-                :item="item"
-              >
-                {{ getItemLabel(item) }}
-              </slot>
-            </span>
-
-            <span
-              v-if="item.trailingIcon || item.children?.length || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']"
-              :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
-            >
-              <slot
-                :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'"
-                v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
+                :name="item.slot ? `${item.slot}-leading` : 'item-leading'"
+                v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
                 :item="item"
               >
                 <UIcon
-                  v-if="item.trailingIcon"
-                  :name="item.trailingIcon"
-                  :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
+                  v-if="item.icon"
+                  :name="item.icon"
+                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
                 />
                 <UIcon
                   v-else-if="item.children?.length"
-                  :name="trailingIcon ?? appConfig.ui.icons.chevronDown"
-                  :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
+                  :name="isExpanded ? expandedIcon ?? appConfig.ui.icons.folderOpen : collapsedIcon ?? appConfig.ui.icons.folder"
+                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
                 />
               </slot>
-            </span>
-          </slot>
-        </button>
-      </slot>
 
-      <ul
-        v-if="item.children?.length && isExpanded"
-        role="group"
-        :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })"
-      >
-        <ReuseTreeTemplate :items="item.children" :level="level + 1" />
-      </ul>
-    </TreeItem>
+              <span
+                v-if="getItemLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']"
+                :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
+              >
+                <slot
+                  :name="item.slot ? `${item.slot}-label` : 'item-label'"
+                  v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
+                  :item="item"
+                >
+                  {{ getItemLabel(item) }}
+                </slot>
+              </span>
+
+              <span
+                v-if="item.trailingIcon || item.children?.length || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']"
+                :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
+              >
+                <slot
+                  :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'"
+                  v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
+                  :item="item"
+                >
+                  <UIcon
+                    v-if="item.trailingIcon"
+                    :name="item.trailingIcon"
+                    :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
+                  />
+                  <UIcon
+                    v-else-if="item.children?.length"
+                    :name="trailingIcon ?? appConfig.ui.icons.chevronDown"
+                    :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
+                  />
+                </slot>
+              </span>
+            </slot>
+          </component>
+        </slot>
+
+        <ul
+          v-if="nested && item.children?.length && isExpanded"
+          role="group"
+          :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })"
+        >
+          <ReuseTreeTemplate :items="item.children" :level="level + 1" />
+        </ul>
+      </TreeItem>
+    </li>
+  </DefineItemTemplate>
+
+  <DefineTreeTemplate v-slot="{ items, level }">
+    <ReuseItemTemplate v-for="(item, index) in items" :key="`${level}-${index}`" :item="item" :index="index" :level="level" />
   </DefineTreeTemplate>
 
   <TreeRoot
+    ref="rootRef"
+    v-slot="{ flattenItems }"
     v-bind="{ ...rootProps, ...$attrs }"
+    :as="as.root"
     :model-value="modelValue"
     :default-value="defaultValue"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
@@ -160,6 +229,25 @@ const defaultExpanded = computed(
     :default-expanded="defaultExpanded"
     :selection-behavior="selectionBehavior"
   >
-    <ReuseTreeTemplate :items="items" :level="1" />
+    <TreeVirtualizer
+      v-if="!!virtualize"
+      v-slot="{ item, virtualItem }"
+      :text-content="(item2) => getItemLabel(item2.value)"
+      v-bind="virtualizerProps"
+    >
+      <ReuseItemTemplate :item="item.value" :index="virtualItem.index" :level="item.level" />
+    </TreeVirtualizer>
+
+    <template v-else-if="!nested">
+      <ReuseItemTemplate
+        v-for="(item, index) in flattenItems"
+        :key="item._id"
+        :item="item.value"
+        :index="index"
+        :level="item.level"
+      />
+    </template>
+
+    <ReuseTreeTemplate v-else :items="items" :level="1" />
   </TreeRoot>
 </template>

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

@@ -1,4 +1,4 @@
-import type { TreeRootProps, TreeRootEmits } from 'reka-ui';
+import type { TreeRootProps, TreeRootEmits, TreeItemSelectEvent, TreeItemToggleEvent } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tree';
 import type { IconProps } from '../types';
@@ -19,8 +19,8 @@ export type TreeItem = {
     disabled?: boolean;
     slot?: string;
     children?: TreeItem[];
-    onToggle?(e: Event): void;
-    onSelect?(e?: Event): void;
+    onToggle?: (e: TreeItemToggleEvent<TreeItem>) => void;
+    onSelect?: (e: TreeItemSelectEvent<TreeItem>) => void;
     class?: any;
     ui?: Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>;
     [key: string]: any;
@@ -30,7 +30,10 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], M extends boolean
      * The element or component this component should render as.
      * @defaultValue 'ul'
      */
-    as?: any;
+    as?: any | {
+        root?: any;
+        link?: any;
+    };
     /**
      * @defaultValue 'primary'
      */
@@ -71,6 +74,31 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], M extends boolean
     defaultValue?: M extends true ? T[number][] : T[number];
     /** Whether multiple options can be selected or not. */
     multiple?: M & boolean;
+    /**
+     * Use nested DOM structure (children inside parents) vs flattened structure (all items at same level).
+     * When `virtualize` is enabled, this is automatically set to `false`.
+     * @defaultValue true
+     */
+    nested?: boolean;
+    /**
+     * Enable virtualization for large lists.
+     * Note: when enabled, the tree structure is flattened like if `nested` was set to `false`.
+     * @defaultValue false
+     */
+    virtualize?: boolean | {
+        /**
+         * Number of items rendered outside the visible area
+         * @defaultValue 12
+         */
+        overscan?: number;
+        /**
+         * Estimated size (in px) of each item
+         * @defaultValue 32
+         */
+        estimateSize?: number;
+    };
+    onSelect?: (e: TreeItemSelectEvent<T[number]>, item: T[number]) => void;
+    onToggle?: (e: TreeItemToggleEvent<T[number]>, item: T[number]) => void;
     class?: any;
     ui?: Tree['slots'];
 }
@@ -81,6 +109,10 @@ type SlotProps<T extends TreeItem> = (props: {
     level: number;
     expanded: boolean;
     selected: boolean;
+    indeterminate: boolean | undefined;
+    handleSelect: () => void;
+    handleToggle: () => void;
+    ui: Tree['ui'];
 }) => any;
 export type TreeSlots<T extends TreeItem[] = TreeItem[]> = {
     'item-wrapper': SlotProps<T[number]>;
@@ -92,14 +124,20 @@ export type TreeSlots<T extends TreeItem[] = TreeItem[]> = {
     index: number;
     level: number;
     expanded: boolean;
+    ui: Tree['ui'];
     selected: boolean;
+    indeterminate: boolean | undefined;
+    handleSelect: () => void;
+    handleToggle: () => void;
 }>;
 declare const __VLS_export: <T extends TreeItem[], M extends boolean = false>(__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<TreeProps<T, M> & {
         "onUpdate:modelValue"?: ((val: M extends true ? T[number][] : T[number]) => any) | undefined;
         "onUpdate:expanded"?: ((val: string[]) => any) | undefined;
     }> & import("vue").PublicProps;
-    expose: (exposed: {}) => void;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        readonly $el: any;
+    }>) => void;
     attrs: any;
     slots: TreeSlots<T>;
     emit: ((evt: "update:modelValue", val: M extends true ? T[number][] : T[number]) => void) & ((evt: "update:expanded", val: string[]) => void);

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

@@ -31,7 +31,9 @@ export interface UserProps {
     ui?: User['slots'];
 }
 export interface UserSlots {
-    avatar(props?: {}): any;
+    avatar(props: {
+        ui: User['ui'];
+    }): any;
     name(props?: {}): any;
     description(props?: {}): any;
     default(props?: {}): any;

package/dist/runtime/components/User.vue

@@ -36,7 +36,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.user || {} })
 
 <template>
   <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
-    <slot name="avatar">
+    <slot name="avatar" :ui="ui">
       <UChip v-if="chip && avatar" inset v-bind="typeof chip === 'object' ? chip : {}" :size="size">
         <UAvatar :alt="name" v-bind="avatar" :size="size" :class="ui.avatar({ class: props.ui?.avatar })" />
       </UChip>

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

@@ -31,7 +31,9 @@ export interface UserProps {
     ui?: User['slots'];
 }
 export interface UserSlots {
-    avatar(props?: {}): any;
+    avatar(props: {
+        ui: User['ui'];
+    }): any;
     name(props?: {}): any;
     description(props?: {}): any;
     default(props?: {}): any;

package/dist/runtime/components/content/ContentNavigation.d.vue.ts

@@ -78,6 +78,7 @@ export interface ContentNavigationEmits extends AccordionRootEmits {
 type SlotProps<T> = (props: {
     link: T;
     active?: boolean;
+    ui: ContentNavigation['ui'];
 }) => any;
 export interface ContentNavigationSlots<T extends ContentNavigationLink = ContentNavigationLink> {
     'link': SlotProps<T>;

package/dist/runtime/components/content/ContentNavigation.vue

@@ -71,13 +71,13 @@ const defaultValue = computed(() => {
 
 <template>
   <DefineLinkTemplate v-slot="{ link, active }">
-    <slot name="link" :link="link" :active="active">
-      <slot name="link-leading" :link="link" :active="active">
+    <slot name="link" :link="link" :active="active" :ui="ui">
+      <slot name="link-leading" :link="link" :active="active" :ui="ui">
         <UIcon v-if="link.icon" :name="link.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
       </slot>
 
       <span v-if="link.title || !!slots['link-title']" :class="ui.linkTitle({ class: [props.ui?.linkTitle, link.ui?.linkTitle], active })">
-        <slot name="link-title" :link="link" :active="active">
+        <slot name="link-title" :link="link" :active="active" :ui="ui">
           {{ link.title }}
         </slot>
 
@@ -85,7 +85,7 @@ const defaultValue = computed(() => {
       </span>
 
       <span v-if="link.badge || link.children?.length && !disabled || link.trailingIcon || !!slots['link-trailing']" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, link.ui?.linkTrailing] })">
-        <slot name="link-trailing" :link="link" :active="active">
+        <slot name="link-trailing" :link="link" :active="active" :ui="ui">
           <UBadge
             v-if="link.badge"
             color="neutral"
@@ -129,7 +129,7 @@ const defaultValue = computed(() => {
               :ui="props.ui"
             >
               <template v-for="(_, name) in slots" #[name]="slotData">
-                <slot :name="name" :link="slotData.link" :active="slotData.active" />
+                <slot :name="name" v-bind="{ ...slotData, link }" />
               </template>
             </UContentNavigation>
           </AccordionContent>

package/dist/runtime/components/content/ContentNavigation.vue.d.ts

@@ -78,6 +78,7 @@ export interface ContentNavigationEmits extends AccordionRootEmits {
 type SlotProps<T> = (props: {
     link: T;
     active?: boolean;
+    ui: ContentNavigation['ui'];
 }) => any;
 export interface ContentNavigationSlots<T extends ContentNavigationLink = ContentNavigationLink> {
     'link': SlotProps<T>;

package/dist/runtime/components/content/ContentSearch.d.vue.ts

@@ -91,7 +91,9 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
     ui?: ContentSearch['slots'] & CommandPaletteProps<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem>['ui'];
 }
 export type ContentSearchSlots = CommandPaletteSlots<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem> & {
-    content(props?: {}): any;
+    content(props: {
+        close: () => void;
+    }): any;
 };
 declare const __VLS_export: <T extends ContentSearchLink>(__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<(ContentSearchProps<T> & {

package/dist/runtime/components/content/ContentSearch.vue

@@ -62,11 +62,13 @@ function mapLinksItems(links) {
   return links.flatMap((link) => [{
     ...link,
     suffix: link.description,
+    description: void 0,
     icon: link.icon || appConfig.ui.icons.file
   }, ...link.children?.map((child) => ({
     ...child,
     prefix: link.label + " >",
     suffix: child.description,
+    description: void 0,
     icon: child.icon || link.icon || appConfig.ui.icons.file
   })) || []]);
 }
@@ -165,8 +167,8 @@ defineExpose({
     v-bind="modalProps"
     :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/content/ContentSearch.vue.d.ts

@@ -91,7 +91,9 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
     ui?: ContentSearch['slots'] & CommandPaletteProps<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem>['ui'];
 }
 export type ContentSearchSlots = CommandPaletteSlots<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem> & {
-    content(props?: {}): any;
+    content(props: {
+        close: () => void;
+    }): any;
 };
 declare const __VLS_export: <T extends ContentSearchLink>(__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<(ContentSearchProps<T> & {

package/dist/runtime/components/content/ContentSearchButton.vue

@@ -62,9 +62,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSearch
         <slot :name="name" v-bind="slotData" />
       </template>
 
-      <template v-if="!collapsed" #trailing>
+      <template v-if="!collapsed" #trailing="{ ui: uiProxy }">
         <div :class="ui.trailing({ class: props.ui?.trailing })">
-          <slot name="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/content/ContentSurround.d.vue.ts

@@ -37,6 +37,7 @@ export interface ContentSurroundProps<T extends ContentSurroundLink = ContentSur
 }
 type SlotProps<T> = (props: {
     link: T;
+    ui: ContentSurround['ui'];
 }) => any;
 export interface ContentSurroundSlots<T extends ContentSurroundLink = ContentSurroundLink> {
     'link': SlotProps<T>;