@nuxt/ui 4.0.0-alpha.0 → 4.0.0-alpha.2

package/dist/runtime/components/Tree.vue

@@ -17,9 +17,9 @@ const props = defineProps({
   size: { type: null, required: false },
   valueKey: { type: null, required: false, default: "value" },
   labelKey: { type: null, required: false, default: "label" },
-  trailingIcon: { type: String, required: false },
-  expandedIcon: { type: String, required: false },
-  collapsedIcon: { type: String, required: false },
+  trailingIcon: { type: [String, Object], required: false },
+  expandedIcon: { type: [String, Object], required: false },
+  collapsedIcon: { type: [String, Object], required: false },
   items: { type: null, required: false },
   modelValue: { type: null, required: false },
   defaultValue: { type: null, required: false },
@@ -60,56 +60,84 @@ const defaultExpanded = computed(
 
 <template>
   <DefineTreeTemplate v-slot="{ items, level }">
-    <li
+    <TreeItem
       v-for="(item, index) in items"
       :key="`${level}-${index}`"
-      :class="level > 0 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
+      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"
     >
-      <TreeItem
-        v-slot="{ isExpanded, isSelected }"
-        as-child
-        :level="level"
-        :value="item"
-        @toggle="item.onToggle"
-        @select="item.onSelect"
+      <slot
+        :name="item.slot ? `${item.slot}-wrapper` : 'item-wrapper'"
+        v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }"
       >
-        <slot :name="item.slot ? `${item.slot}-wrapper` : 'item-wrapper'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }" :item="item">
-          <button type="button" :disabled="item.disabled || disabled" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })">
-            <slot :name="item.slot || 'item'" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="item">
-              <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="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'" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="item">
+            <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :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="{ item, index, level, expanded: isExpanded, selected: isSelected }"
+              >
+                {{ 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="{ item, index, level, expanded: isExpanded, selected: isSelected }"
+              >
                 <UIcon
-                  v-if="item.icon"
-                  :name="item.icon"
-                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
+                  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="isExpanded ? expandedIcon ?? appConfig.ui.icons.folderOpen : collapsedIcon ?? appConfig.ui.icons.folder"
-                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
+                  :name="trailingIcon ?? appConfig.ui.icons.chevronDown"
+                  :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
                 />
               </slot>
+            </span>
+          </slot>
+        </button>
+      </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="{ item, 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="{ item, index, level, expanded: isExpanded, selected: isSelected }" :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>
-          </button>
-        </slot>
-
-        <ul v-if="item.children?.length && isExpanded" :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })">
-          <ReuseTreeTemplate :items="item.children" :level="level + 1" />
-        </ul>
-      </TreeItem>
-    </li>
+      <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>
   </DefineTreeTemplate>
 
   <TreeRoot
@@ -119,6 +147,6 @@ const defaultExpanded = computed(
     :default-expanded="defaultExpanded"
     :selection-behavior="selectionBehavior"
   >
-    <ReuseTreeTemplate :items="items" :level="0" />
+    <ReuseTreeTemplate :items="items" :level="1" />
   </TreeRoot>
 </template>

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

@@ -1,6 +1,7 @@
 import type { TreeRootProps, TreeRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tree';
+import type { IconProps } from '../types';
 import type { DynamicSlots, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Tree = ComponentConfig<typeof theme, AppConfig, 'tree'>;
@@ -8,12 +9,12 @@ export type TreeItem = {
     /**
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     label?: string;
     /**
      * @IconifyIcon
      */
-    trailingIcon?: string;
+    trailingIcon?: IconProps['name'];
     defaultExpanded?: boolean;
     disabled?: boolean;
     value?: string;
@@ -48,25 +49,25 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItem
      * The key used to get the label from the item.
      * @defaultValue 'label'
      */
-    labelKey?: keyof NestedItem<T>;
+    labelKey?: GetItemKeys<T>;
     /**
      * The icon displayed on the right side of a parent node.
      * @defaultValue appConfig.ui.icons.chevronDown
      * @IconifyIcon
      */
-    trailingIcon?: string;
+    trailingIcon?: IconProps['name'];
     /**
      * The icon displayed when a parent node is expanded.
      * @defaultValue appConfig.ui.icons.folderOpen
      * @IconifyIcon
      */
-    expandedIcon?: string;
+    expandedIcon?: IconProps['name'];
     /**
      * The icon displayed when a parent node is collapsed.
      * @defaultValue appConfig.ui.icons.folder
      * @IconifyIcon
      */
-    collapsedIcon?: string;
+    collapsedIcon?: IconProps['name'];
     items?: T;
     /** The controlled value of the Tree. Can be bind as `v-model`. */
     modelValue?: GetModelValue<T, VK, M>;
@@ -99,13 +100,13 @@ export type TreeSlots<A extends TreeItem[] = TreeItem[], T extends NestedItem<A>
 }>;
 declare const _default: <T extends TreeItem[], VK extends GetItemKeys<T> = "value", 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<Pick<Partial<{}> & Omit<{
-        readonly "onUpdate:modelValue"?: ((payload: GetModelValue<T, VK, M>) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: GetModelValue<T, VK, M>) => any) | undefined;
         readonly "onUpdate:expanded"?: ((val: string[]) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:expanded"> & TreeProps<T, VK, M> & Partial<{}>> & import("vue").PublicProps;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:expanded"> & TreeProps<T, VK, M> & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: TreeSlots<T, NestedItem<T>>;
-    emit: ((evt: "update:modelValue", payload: GetModelValue<T, VK, M>) => void) & ((evt: "update:expanded", val: string[]) => void);
+    emit: ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "update:expanded", val: string[]) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -0,0 +1,47 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/user';
+import type { AvatarProps, ChipProps, LinkProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type User = ComponentConfig<typeof theme, AppConfig, 'user'>;
+export interface UserProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    name?: string;
+    description?: string;
+    avatar?: Omit<AvatarProps, 'size'> & {
+        [key: string]: any;
+    };
+    chip?: boolean | Omit<ChipProps, 'size' | 'inset'>;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: User['variants']['size'];
+    /**
+     * The orientation of the user.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: User['variants']['orientation'];
+    to?: LinkProps['to'];
+    target?: LinkProps['target'];
+    onClick?: (event: MouseEvent) => void | Promise<void>;
+    class?: any;
+    ui?: User['slots'];
+}
+export interface UserSlots {
+    avatar(props?: {}): any;
+    name(props?: {}): any;
+    description(props?: {}): any;
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<UserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UserProps> & Readonly<{}>, {
+    orientation: User["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, UserSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -36,7 +36,7 @@ export interface UserSlots {
     description(props?: {}): any;
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<UserProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UserProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<UserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UserProps> & Readonly<{}>, {
     orientation: User["variants"]["orientation"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, UserSlots>;
 export default _default;

package/dist/runtime/components/color-mode/ColorModeAvatar.d.vue.ts

@@ -0,0 +1,7 @@
+import type { AvatarProps } from '@nuxt/ui';
+export interface ColorModeAvatarProps extends /** @vue-ignore */ Omit<AvatarProps, 'src'> {
+    light: string;
+    dark: string;
+}
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/color-mode/ColorModeAvatar.vue.d.ts

@@ -3,5 +3,5 @@ export interface ColorModeAvatarProps extends /** @vue-ignore */ Omit<AvatarProp
     light: string;
     dark: string;
 }
-declare const _default: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/color-mode/ColorModeButton.d.vue.ts

@@ -0,0 +1,23 @@
+import type { ButtonProps } from '@nuxt/ui';
+export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * @defaultValue 'ghost'
+     */
+    variant?: ButtonProps['variant'];
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
+    color: ButtonProps["color"];
+    variant: ButtonProps["variant"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    fallback(props?: {}): any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/color-mode/ColorModeButton.vue.d.ts

@@ -9,7 +9,7 @@ export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProp
      */
     variant?: ButtonProps['variant'];
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ColorModeButtonProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
     color: ButtonProps["color"];
     variant: ButtonProps["variant"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

package/dist/runtime/components/color-mode/ColorModeImage.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    dark: string;
+    light: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/color-mode/ColorModeImage.vue.d.ts

@@ -2,5 +2,5 @@ type __VLS_Props = {
     dark: string;
     light: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/color-mode/ColorModeSelect.d.vue.ts

@@ -0,0 +1,5 @@
+import type { SelectMenuProps } from '@nuxt/ui';
+export interface ColorModeSelectProps extends /** @vue-ignore */ Pick<SelectMenuProps<any>, 'color' | 'variant' | 'size' | 'trailingIcon' | 'selectedIcon' | 'content' | 'arrow' | 'portal' | 'disabled' | 'ui'> {
+}
+declare const _default: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/color-mode/ColorModeSelect.vue.d.ts

@@ -1,5 +1,5 @@
 import type { SelectMenuProps } from '@nuxt/ui';
 export interface ColorModeSelectProps extends /** @vue-ignore */ Pick<SelectMenuProps<any>, 'color' | 'variant' | 'size' | 'trailingIcon' | 'selectedIcon' | 'content' | 'arrow' | 'portal' | 'disabled' | 'ui'> {
 }
-declare const _default: import("vue").DefineComponent<ColorModeSelectProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/color-mode/ColorModeSwitch.d.vue.ts

@@ -0,0 +1,5 @@
+import type { SwitchProps } from '@nuxt/ui';
+export interface ColorModeSwitchProps extends /** @vue-ignore */ Pick<SwitchProps, 'as' | 'color' | 'size' | 'disabled' | 'ui'> {
+}
+declare const _default: import("vue").DefineComponent<ColorModeSwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSwitchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/color-mode/ColorModeSwitch.vue.d.ts

@@ -1,5 +1,5 @@
 import type { SwitchProps } from '@nuxt/ui';
 export interface ColorModeSwitchProps extends /** @vue-ignore */ Pick<SwitchProps, 'as' | 'color' | 'size' | 'disabled' | 'ui'> {
 }
-declare const _default: import("vue").DefineComponent<ColorModeSwitchProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSwitchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<ColorModeSwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSwitchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -0,0 +1,102 @@
+import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import type { ContentNavigationItem } from '@nuxt/content';
+import theme from '#build/ui/content/content-navigation';
+import type { BadgeProps, IconProps, LinkProps } from '../../types';
+import type { ComponentConfig } from '../../types/tv';
+type ContentNavigation = ComponentConfig<typeof theme, AppConfig, 'contentNavigation'>;
+export interface ContentNavigationLink extends ContentNavigationItem {
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /**
+     * Display a badge on the link.
+     * `{ color: 'neutral', variant: 'outline', size: 'sm' }`{lang="ts-type"}
+     */
+    badge?: string | number | BadgeProps;
+    target?: LinkProps['target'];
+    /**
+     * @IconifyIcon
+     */
+    trailingIcon?: IconProps['name'];
+    disabled?: boolean;
+    children?: ContentNavigationLink[];
+    defaultOpen?: boolean;
+    active?: boolean;
+    class?: any;
+    ui?: Pick<ContentNavigation['slots'], 'link' | 'linkLeadingIcon' | 'linkTitle' | 'linkTrailing' | 'linkTrailingIcon' | 'linkTrailingBadge' | 'linkTrailingBadgeSize' | 'linkTrailingIcon' | 'linkTitleExternalIcon' | 'trigger' | 'content' | 'item' | 'itemWithChildren'>;
+}
+export interface ContentNavigationProps<T extends ContentNavigationLink = ContentNavigationLink> extends Pick<AccordionRootProps, 'disabled' | 'type' | 'unmountOnHide'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'nav'
+     */
+    as?: any;
+    /**
+     * When `true`, the tree will be opened based on the current route.
+     * When `false`, the tree will be closed.
+     * When `undefined` (default), the first item will be opened with `type="single"` and the first level will be opened with `type="multiple"`.
+     */
+    defaultOpen?: boolean;
+    /**
+     * The icon displayed to toggle the accordion.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     * @IconifyIcon
+     */
+    trailingIcon?: IconProps['name'];
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: ContentNavigation['variants']['color'];
+    /**
+     * @defaultValue 'pill'
+     */
+    variant?: ContentNavigation['variants']['variant'];
+    /**
+     * Display a line next to the active link.
+     * @defaultValue false
+     */
+    highlight?: boolean;
+    /**
+     * @defaultValue 'primary'
+     */
+    highlightColor?: ContentNavigation['variants']['highlightColor'];
+    /**
+     * When type is "single", prevents closing the open item when clicking its trigger.
+     * When type is "multiple", disables the collapsible behavior.
+     * @defaultValue true
+     */
+    collapsible?: boolean;
+    level?: number;
+    navigation?: T[];
+    class?: any;
+    ui?: ContentNavigation['slots'];
+}
+export interface ContentNavigationEmits extends AccordionRootEmits {
+}
+type SlotProps<T> = (props: {
+    link: T;
+    active?: boolean;
+}) => any;
+export interface ContentNavigationSlots<T extends ContentNavigationLink = ContentNavigationLink> {
+    'link': SlotProps<T>;
+    'link-leading': SlotProps<T>;
+    'link-title': SlotProps<T>;
+    'link-trailing': SlotProps<T>;
+}
+declare const _default: <T extends ContentNavigationLink>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & ContentNavigationProps<T> & {}> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: ContentNavigationSlots<T>;
+    emit: (evt: "update:modelValue", value: string | string[] | undefined) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

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

@@ -19,7 +19,7 @@ defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "nav" },
   defaultOpen: { type: Boolean, required: false, default: void 0 },
-  trailingIcon: { type: String, required: false },
+  trailingIcon: { type: [String, Object], required: false },
   color: { type: null, required: false },
   variant: { type: null, required: false },
   highlight: { type: Boolean, required: false, default: false },
@@ -35,7 +35,7 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
-const rootProps = useForwardPropsEmits(reactivePick(props, "collapsible", "disabled", "type", "unmountOnHide"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "collapsible", "type", "unmountOnHide"), emits);
 const route = useRoute();
 const appConfig = useAppConfig();
 const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate();
@@ -45,6 +45,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentNaviga
   highlight: props.highlight,
   highlightColor: props.highlightColor || props.color
 }));
+const disabled = computed(() => props.disabled || props.type === "multiple" && props.collapsible === false);
 const defaultValue = computed(() => {
   if (props.defaultOpen === false) {
     return void 0;
@@ -91,14 +92,14 @@ const defaultValue = computed(() => {
   </DefineLinkTemplate>
 
   <Primitive :as="as" v-bind="$attrs" :as-child="level > 0" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <AccordionRoot as="ul" v-bind="rootProps" :default-value="defaultValue" :class="level > 0 ? ui.listWithChildren({ class: props.ui?.listWithChildren }) : ui.list({ class: props.ui?.list })">
+    <AccordionRoot as="ul" :disabled="disabled" v-bind="rootProps" :default-value="defaultValue" :class="level > 0 ? ui.listWithChildren({ class: props.ui?.listWithChildren }) : ui.list({ class: props.ui?.list })">
       <template v-for="(link, index) in navigation" :key="index">
         <AccordionItem v-if="link.children?.length" as="li" :class="ui.itemWithChildren({ class: [props.ui?.itemWithChildren, link.ui?.itemWithChildren], level: level > 0 })" :value="String(index)">
           <AccordionTrigger
             as="button"
             :class="[
-  ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active: link.active, disabled: !!link.disabled }),
-  ui.trigger({ class: [props.ui?.trigger, link.ui?.trigger] })
+  ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active: link.active, disabled: !!link.disabled || disabled }),
+  ui.trigger({ class: [props.ui?.trigger, link.ui?.trigger], disabled })
 ]"
           >
             <ReuseLinkTemplate :link="link" :active="link.active" />

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

@@ -2,14 +2,14 @@ import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import type { ContentNavigationItem } from '@nuxt/content';
 import theme from '#build/ui/content/content-navigation';
-import type { BadgeProps, LinkProps } from '../../types';
+import type { BadgeProps, IconProps, LinkProps } from '../../types';
 import type { ComponentConfig } from '../../types/tv';
 type ContentNavigation = ComponentConfig<typeof theme, AppConfig, 'contentNavigation'>;
 export interface ContentNavigationLink extends ContentNavigationItem {
     /**
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     /**
      * Display a badge on the link.
      * `{ color: 'neutral', variant: 'outline', size: 'sm' }`{lang="ts-type"}
@@ -19,7 +19,7 @@ export interface ContentNavigationLink extends ContentNavigationItem {
     /**
      * @IconifyIcon
      */
-    trailingIcon?: string;
+    trailingIcon?: IconProps['name'];
     disabled?: boolean;
     children?: ContentNavigationLink[];
     defaultOpen?: boolean;
@@ -44,7 +44,7 @@ export interface ContentNavigationProps<T extends ContentNavigationLink = Conten
      * @defaultValue appConfig.ui.icons.chevronDown
      * @IconifyIcon
      */
-    trailingIcon?: string;
+    trailingIcon?: IconProps['name'];
     /**
      * @defaultValue 'primary'
      */
@@ -63,8 +63,8 @@ export interface ContentNavigationProps<T extends ContentNavigationLink = Conten
      */
     highlightColor?: ContentNavigation['variants']['highlightColor'];
     /**
-     * When type is "single", allows closing content when clicking trigger for an open item.
-     * When type is "multiple", this prop has no effect.
+     * When type is "single", prevents closing the open item when clicking its trigger.
+     * When type is "multiple", disables the collapsible behavior.
      * @defaultValue true
      */
     collapsible?: boolean;
@@ -88,7 +88,7 @@ export interface ContentNavigationSlots<T extends ContentNavigationLink = Conten
 declare const _default: <T extends ContentNavigationLink>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & ContentNavigationProps<T> & Partial<{}>> & import("vue").PublicProps;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & ContentNavigationProps<T> & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: ContentNavigationSlots<T>;