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

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

@@ -0,0 +1,116 @@
+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'>;
+export type TreeItem = {
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    label?: string;
+    /**
+     * @IconifyIcon
+     */
+    trailingIcon?: IconProps['name'];
+    defaultExpanded?: boolean;
+    disabled?: boolean;
+    value?: string;
+    slot?: string;
+    children?: TreeItem[];
+    onToggle?(e: Event): void;
+    onSelect?(e?: Event): void;
+    class?: any;
+    ui?: Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>;
+    [key: string]: any;
+};
+export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItemKeys<T> = 'value', M extends boolean = false> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled' | 'bubbleSelect'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'ul'
+     */
+    as?: any;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Tree['variants']['color'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: Tree['variants']['size'];
+    /**
+     * The key used to get the value from the item.
+     * @defaultValue 'value'
+     */
+    valueKey?: VK;
+    /**
+     * The key used to get the label from the item.
+     * @defaultValue 'label'
+     */
+    labelKey?: GetItemKeys<T>;
+    /**
+     * The icon displayed on the right side of a parent node.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     * @IconifyIcon
+     */
+    trailingIcon?: IconProps['name'];
+    /**
+     * The icon displayed when a parent node is expanded.
+     * @defaultValue appConfig.ui.icons.folderOpen
+     * @IconifyIcon
+     */
+    expandedIcon?: IconProps['name'];
+    /**
+     * The icon displayed when a parent node is collapsed.
+     * @defaultValue appConfig.ui.icons.folder
+     * @IconifyIcon
+     */
+    collapsedIcon?: IconProps['name'];
+    items?: T;
+    /** The controlled value of the Tree. Can be bind as `v-model`. */
+    modelValue?: GetModelValue<T, VK, M>;
+    /** The value of the Tree when initially rendered. Use when you do not need to control the state of the Tree. */
+    defaultValue?: GetModelValue<T, VK, M>;
+    /** Whether multiple options can be selected or not. */
+    multiple?: M & boolean;
+    class?: any;
+    ui?: Tree['slots'];
+}
+export type TreeEmits<A extends TreeItem[], VK extends GetItemKeys<A> | undefined, M extends boolean> = Omit<TreeRootEmits, 'update:modelValue'> & GetModelValueEmits<A, VK, M>;
+type SlotProps<T extends TreeItem> = (props: {
+    item: T;
+    index: number;
+    level: number;
+    expanded: boolean;
+    selected: boolean;
+}) => any;
+export type TreeSlots<A extends TreeItem[] = TreeItem[], T extends NestedItem<A> = NestedItem<A>> = {
+    'item-wrapper': SlotProps<T>;
+    'item': SlotProps<T>;
+    'item-leading': SlotProps<T>;
+    'item-label': SlotProps<T>;
+    'item-trailing': SlotProps<T>;
+} & DynamicSlots<T, undefined, {
+    index: number;
+    level: number;
+    expanded: boolean;
+    selected: boolean;
+}>;
+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"?: ((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> & {}> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: TreeSlots<T, NestedItem<T>>;
+    emit: ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "update:expanded", val: string[]) => 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/Tree.vue

@@ -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

@@ -49,7 +49,7 @@ 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

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/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/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/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/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/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/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

@@ -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

@@ -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;

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

@@ -0,0 +1,114 @@
+import type { ContentNavigationItem } from '@nuxt/content';
+import type { AppConfig } from '@nuxt/schema';
+import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
+import theme from '#build/ui/content/content-search';
+import type { ButtonProps, InputProps, LinkProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps } from '../../types';
+import type { ComponentConfig } from '../../types/tv';
+type ContentSearch = ComponentConfig<typeof theme, AppConfig, 'contentSearch'>;
+export interface ContentSearchLink extends Omit<LinkProps, 'custom'> {
+    label?: string;
+    description?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    children?: ContentSearchLink[];
+}
+export interface ContentSearchFile {
+    id: string;
+    title: string;
+    titles: string[];
+    level: number;
+    content: string;
+}
+export interface ContentSearchItem extends Omit<LinkProps, 'custom'>, CommandPaletteItem {
+    level?: number;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+}
+export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchLink> extends /* @vue-ignore */ Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'> {
+    /**
+     * The icon displayed in the input.
+     * @defaultValue appConfig.ui.icons.search
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /**
+     * The placeholder text for the input.
+     * @defaultValue t('commandPalette.placeholder')
+     */
+    placeholder?: InputProps['placeholder'];
+    /**
+     * Automatically focus the input when component is mounted.
+     * @defaultValue true
+     */
+    autofocus?: boolean;
+    /** When `true`, the loading icon will be displayed. */
+    loading?: boolean;
+    /**
+     * The icon when the `loading` prop is `true`.
+     * @defaultValue appConfig.ui.icons.loading
+     * @IconifyIcon
+     */
+    loadingIcon?: IconProps['name'];
+    /**
+     * Display a close button in the input (useful when inside a Modal for example).
+     * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+     * @emits 'update:open'
+     * @defaultValue true
+     */
+    close?: boolean | Partial<ButtonProps>;
+    /**
+     * The icon displayed in the close button.
+     * @defaultValue appConfig.ui.icons.close
+     * @IconifyIcon
+     */
+    closeIcon?: IconProps['name'];
+    /**
+     * Keyboard shortcut to open the search (used by [`defineShortcuts`](https://ui.nuxt.com/docs/composables/define-shortcuts))
+     * @defaultValue 'meta_k'
+     */
+    shortcut?: string;
+    /** Links group displayed as the first group in the command palette. */
+    links?: T[];
+    navigation?: ContentNavigationItem[];
+    /** Custom groups displayed between navigation and color mode group. */
+    groups?: CommandPaletteGroup<ContentSearchItem>[];
+    files?: ContentSearchFile[];
+    /**
+     * Options for [useFuse](https://vueuse.org/integrations/useFuse) passed to the [CommandPalette](https://ui.nuxt.com/docs/components/command-palette).
+     * @defaultValue { fuseOptions: { includeMatches: true } }
+     */
+    fuse?: UseFuseOptions<T>;
+    /**
+     * When `true`, the theme command will be added to the groups.
+     * @defaultValue true
+     */
+    colorMode?: boolean;
+    class?: any;
+    ui?: ContentSearch['slots'] & CommandPaletteProps<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem>['ui'];
+}
+export type ContentSearchSlots = CommandPaletteSlots<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem> & {
+    content(props?: {}): any;
+};
+declare const _default: <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<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:searchTerm"> & (ContentSearchProps<T> & {
+        searchTerm?: string;
+    }) & {}> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        commandPaletteRef: Readonly<import("vue").ShallowRef<import("vue").ShallowUnwrapRef<{}> | null>>;
+    }>): void;
+    attrs: any;
+    slots: ContentSearchSlots;
+    emit: (evt: "update:searchTerm", value: string) => 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/ContentSearch.vue

@@ -39,7 +39,7 @@ const { open } = useContentSearch();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
 const commandPaletteProps = useForwardProps(reactivePick(props, "icon", "placeholder", "autofocus", "loading", "loadingIcon", "close", "closeIcon"));
-const proxySlots = omit(slots, ["content"]);
+const getProxySlots = () => omit(slots, ["content"]);
 const fuse = computed(() => defu({}, props.fuse, {
   fuseOptions: {
     includeMatches: true
@@ -164,7 +164,7 @@ defineExpose({
           @update:model-value="onSelect"
           @update:open="open = $event"
         >
-          <template v-for="(_, name) in proxySlots" #[name]="slotData">
+          <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
             <slot :name="name" v-bind="slotData" />
           </template>
         </UCommandPalette>