@nuxt/ui 4.5.0 → 4.6.0

package/dist/runtime/components/InputTime.vue

@@ -4,8 +4,9 @@ import theme from "#build/ui/input-time";
 
 <script setup>
 import { computed, onMounted, ref } from "vue";
-import { TimeFieldRoot, TimeFieldInput, useForwardPropsEmits } from "reka-ui";
-import { reactiveOmit } from "@vueuse/core";
+import { TimeRangeFieldRoot, TimeRangeFieldInput, useForwardPropsEmits } from "reka-ui";
+import { TimeField as SingleTimeField } from "reka-ui/namespaced";
+import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentUI } from "../composables/useComponentUI";
 import { useFieldGroup } from "../composables/useFieldGroup";
@@ -14,6 +15,7 @@ import { useFormField } from "../composables/useFormField";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },
   color: { type: null, required: false },
@@ -23,12 +25,22 @@ const props = defineProps({
   fixed: { type: Boolean, required: false },
   autofocus: { type: Boolean, required: false },
   autofocusDelay: { type: Number, required: false, default: 0 },
+  separatorIcon: { type: null, required: false },
+  range: { type: Boolean, required: false },
+  defaultValue: { type: null, required: false },
+  modelValue: { type: null, required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false },
-  defaultValue: { type: Object, required: false },
+  icon: { type: null, required: false },
+  avatar: { type: Object, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: null, required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: null, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: null, required: false },
   defaultPlaceholder: { type: Object, required: false },
   placeholder: { type: Object, required: false },
-  modelValue: { type: [Object, null], required: false },
   hourCycle: { type: null, required: false },
   step: { type: Object, required: false },
   stepSnapping: { type: Boolean, required: false },
@@ -41,20 +53,13 @@ const props = defineProps({
   id: { type: String, required: false },
   name: { type: String, required: false },
   required: { type: Boolean, required: false },
-  icon: { type: null, required: false },
-  avatar: { type: Object, required: false },
-  leading: { type: Boolean, required: false },
-  leadingIcon: { type: null, required: false },
-  trailing: { type: Boolean, required: false },
-  trailingIcon: { type: null, required: false },
-  loading: { type: Boolean, required: false },
-  loadingIcon: { type: null, required: false }
+  isTimeUnavailable: { type: Function, required: false }
 });
-const emits = defineEmits(["change", "blur", "focus", "update:modelValue", "update:placeholder"]);
+const emits = defineEmits(["update:modelValue", "change", "blur", "focus", "update:placeholder"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("inputTime", props);
-const rootProps = useForwardPropsEmits(reactiveOmit(props, "id", "name", "color", "variant", "size", "highlight", "fixed", "disabled", "autofocus", "autofocusDelay", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "class", "ui"), emits);
+const rootProps = useForwardPropsEmits(reactiveOmit(props, "id", "name", "range", "modelValue", "defaultValue", "color", "variant", "size", "highlight", "fixed", "disabled", "autofocus", "autofocusDelay", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "separatorIcon", "class", "ui"), emits);
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField(props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
@@ -70,7 +75,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputTime ||
   trailing: isTrailing.value || !!slots.trailing,
   fieldGroup: orientation.value
 }));
+const [DefineSegmentsTemplate, ReuseSegmentsTemplate] = createReusableTemplate();
 const inputsRef = ref([]);
+const RangeTimeField = { Root: TimeRangeFieldRoot, Input: TimeRangeFieldInput };
+const TimeField = computed(() => props.range ? RangeTimeField : SingleTimeField);
 function setInputRef(index, el) {
   inputsRef.value[index] = el;
 }
@@ -104,28 +112,45 @@ defineExpose({
 </script>
 
 <template>
-  <TimeFieldRoot
-    v-bind="{ ...rootProps, ...ariaAttrs }"
+  <DefineSegmentsTemplate v-slot="{ segments, type }">
+    <TimeField.Input
+      v-for="(segment, index) in segments"
+      :key="`${segment.part}-${index}`"
+      :ref="(el) => setInputRef(index, el)"
+      :type="type"
+      :part="segment.part"
+      data-slot="segment"
+      :class="ui.segment({ class: uiProp?.segment })"
+      :data-segment="segment.part"
+    >
+      {{ segment.value.trim() }}
+    </TimeField.Input>
+  </DefineSegmentsTemplate>
+
+  <TimeField.Root
+    v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
     :id="id"
     v-slot="{ segments }"
     :name="name"
     :disabled="disabled"
+    :model-value="modelValue"
+    :default-value="defaultValue"
     data-slot="base"
     :class="ui.base({ class: [uiProp?.base, props.class] })"
     @update:model-value="onUpdate"
     @blur="onBlur"
     @focus="onFocus"
   >
-    <TimeFieldInput
-      v-for="(segment, index) in segments"
-      :key="`${segment.part}-${index}`"
-      :ref="(el) => setInputRef(index, el)"
-      :part="segment.part"
-      data-slot="segment"
-      :class="ui.segment({ class: uiProp?.segment })"
-    >
-      {{ segment.value.trim() }}
-    </TimeFieldInput>
+    <template v-if="Array.isArray(segments)">
+      <ReuseSegmentsTemplate :segments="segments" />
+    </template>
+    <template v-else>
+      <ReuseSegmentsTemplate :segments="segments.start" type="start" />
+      <slot name="separator" :ui="ui">
+        <UIcon :name="separatorIcon || appConfig.ui.icons.minus" data-slot="separatorIcon" :class="ui.separatorIcon({ class: uiProp?.separatorIcon })" />
+      </slot>
+      <ReuseSegmentsTemplate :segments="segments.end" type="end" />
+    </template>
 
     <slot :ui="ui" />
 
@@ -141,5 +166,5 @@ defineExpose({
         <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon })" />
       </slot>
     </span>
-  </TimeFieldRoot>
+  </TimeField.Root>
 </template>

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

@@ -1,11 +1,16 @@
-import type { ComponentPublicInstance } from 'vue';
-import type { TimeFieldRootProps, TimeFieldRootEmits } from 'reka-ui';
+import type { ComponentPublicInstance, VNode } from 'vue';
+import type { TimeFieldRootEmits, TimeFieldRootProps, TimeRangeFieldRootEmits, TimeRangeFieldRootProps, TimeValue } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/input-time';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { IconProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type InputTime = ComponentConfig<typeof theme, AppConfig, 'inputTime'>;
-export interface InputTimeProps extends Omit<TimeFieldRootProps, 'as' | 'asChild' | 'locale' | 'dir'>, UseComponentIconsProps {
+type InputTimeDefaultValue<R extends boolean = false> = R extends true ? TimeRangeFieldRootProps['defaultValue'] : TimeFieldRootProps['defaultValue'];
+type InputTimeModelValue<R extends boolean = false> = (R extends true ? TimeRangeFieldRootProps['modelValue'] : TimeFieldRootProps['modelValue']) | undefined;
+type _TimeFieldRootProps = Omit<TimeFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale'>;
+type _TimeRangeFieldRootProps = Omit<TimeRangeFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale'>;
+export interface InputTimeProps<R extends boolean = false> extends UseComponentIconsProps, _TimeFieldRootProps, _TimeRangeFieldRootProps {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -29,46 +34,67 @@ export interface InputTimeProps extends Omit<TimeFieldRootProps, 'as' | 'asChild
     fixed?: boolean;
     autofocus?: boolean;
     autofocusDelay?: number;
+    /**
+     * The icon to use as a range separator.
+     * @defaultValue appConfig.ui.icons.minus
+     * @IconifyIcon
+     */
+    separatorIcon?: IconProps['name'];
+    /**
+     * Enable time range selection.
+     * @defaultValue false
+     */
+    range?: R & boolean;
+    /** The value of the input when initially rendered. Use when you do not need to control the state of the input. */
+    defaultValue?: InputTimeDefaultValue<R>;
+    /** The controlled value of the input. Can be bind as `v-model`. */
+    modelValue?: InputTimeModelValue<R>;
     class?: any;
     ui?: InputTime['slots'];
 }
-export interface InputTimeEmits extends TimeFieldRootEmits {
-    change: [event: Event];
-    blur: [event: FocusEvent];
-    focus: [event: FocusEvent];
+export interface InputTimeEmits<R extends boolean = false> extends Omit<TimeFieldRootEmits & TimeRangeFieldRootEmits, 'update:modelValue'> {
+    'update:modelValue': [value: InputTimeModelValue<R>];
+    'change': [event: Event];
+    'blur': [event: FocusEvent];
+    'focus': [event: FocusEvent];
 }
 export interface InputTimeSlots {
-    leading(props: {
+    leading?(props: {
+        ui: InputTime['ui'];
+    }): VNode[];
+    default?(props: {
         ui: InputTime['ui'];
-    }): any;
-    default(props: {
+    }): VNode[];
+    trailing?(props: {
         ui: InputTime['ui'];
-    }): any;
-    trailing(props: {
+    }): VNode[];
+    separator?(props: {
         ui: InputTime['ui'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<InputTimeProps, {
-    inputsRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    blur: (event: FocusEvent) => any;
-    change: (event: Event) => any;
-    focus: (event: FocusEvent) => any;
-    "update:modelValue": (date: import("reka-ui").TimeValue | undefined) => any;
-    "update:placeholder": (date: import("reka-ui").TimeValue) => any;
-}, string, import("vue").PublicProps, Readonly<InputTimeProps> & Readonly<{
-    onBlur?: ((event: FocusEvent) => any) | undefined;
-    onChange?: ((event: Event) => any) | undefined;
-    onFocus?: ((event: FocusEvent) => any) | undefined;
-    "onUpdate:modelValue"?: ((date: import("reka-ui").TimeValue | undefined) => any) | undefined;
-    "onUpdate:placeholder"?: ((date: import("reka-ui").TimeValue) => any) | undefined;
-}>, {
-    autofocusDelay: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, InputTimeSlots>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+declare const __VLS_export: <R extends boolean>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<InputTimeProps<R> & {
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        onFocus?: ((event: FocusEvent) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: InputTimeModelValue<R>) => any) | undefined;
+        "onUpdate:placeholder"?: ((...args: TimeValue[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        inputsRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
+    }>) => void;
+    attrs: any;
+    slots: InputTimeSlots;
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:modelValue", value: InputTimeModelValue<R>) => void) & ((evt: "update:placeholder", ...args: [date: TimeValue] & [date: TimeValue]) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/kbd';
 import type { KbdKey } from '../composables/useKbd';
@@ -28,7 +29,7 @@ export interface KbdProps {
     };
 }
 export interface KbdSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Kbd.vue

@@ -7,8 +7,8 @@ import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { useKbd } from "../composables/useKbd";
-import { tv } from "../utils/tv";
 import { useComponentUI } from "../composables/useComponentUI";
+import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false, default: "kbd" },
   value: { type: null, required: false },

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/kbd';
 import type { KbdKey } from '../composables/useKbd';
@@ -28,7 +29,7 @@ export interface KbdProps {
     };
 }
 export interface KbdSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { RouterLinkProps, RouteLocationRaw } from 'vue-router';
 import type { ButtonHTMLAttributes, AnchorHTMLAttributes } from '../types/html';
 interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
@@ -83,9 +84,9 @@ export interface LinkProps extends NuxtLinkProps, /** @vue-ignore */ Omit<Button
  */
 export type LinkPropsKeys = 'to' | 'href' | 'target' | 'rel' | 'noRel' | 'external' | 'prefetch' | 'prefetchOn' | 'prefetchedClass' | 'noPrefetch' | 'trailingSlash' | 'replace' | 'ariaCurrentValue' | 'active' | 'activeClass' | 'exact' | 'exactQuery' | 'exactHash' | 'inactiveClass' | 'download' | 'ping' | 'referrerpolicy' | 'hreflang' | 'media';
 export interface LinkSlots {
-    default(props: {
+    default?(props: {
         active: boolean;
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { RouterLinkProps, RouteLocationRaw } from 'vue-router';
 import type { ButtonHTMLAttributes, AnchorHTMLAttributes } from '../types/html';
 interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
@@ -83,9 +84,9 @@ export interface LinkProps extends NuxtLinkProps, /** @vue-ignore */ Omit<Button
  */
 export type LinkPropsKeys = 'to' | 'href' | 'target' | 'rel' | 'noRel' | 'external' | 'prefetch' | 'prefetchOn' | 'prefetchedClass' | 'noPrefetch' | 'trailingSlash' | 'replace' | 'ariaCurrentValue' | 'active' | 'activeClass' | 'exact' | 'exactQuery' | 'exactHash' | 'inactiveClass' | 'download' | 'ping' | 'referrerpolicy' | 'hreflang' | 'media';
 export interface LinkSlots {
-    default(props: {
+    default?(props: {
         active: boolean;
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 export interface MainProps {
     /**
      * The element or component this component should render as.
@@ -10,7 +11,7 @@ export interface MainProps {
     };
 }
 export interface MainSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 export interface MainProps {
     /**
      * The element or component this component should render as.
@@ -10,7 +11,7 @@ export interface MainProps {
     };
 }
 export interface MainSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/marquee';
 import type { ComponentConfig } from '../types/tv';
@@ -37,7 +38,7 @@ export interface MarqueeProps {
     ui?: Marquee['slots'];
 }
 export interface MarqueeSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/marquee';
 import type { ComponentConfig } from '../types/tv';
@@ -37,7 +38,7 @@ export interface MarqueeProps {
     ui?: Marquee['slots'];
 }
 export interface MarqueeSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,4 +1,5 @@
 import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/modal';
 import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
@@ -61,27 +62,27 @@ export interface ModalEmits extends DialogRootEmits {
     'close:prevent': [];
 }
 export interface ModalSlots {
-    default(props: {
+    default?(props: {
         open: boolean;
-    }): any;
-    content(props: {
+    }): VNode[];
+    content?(props: {
         close: () => void;
-    }): any;
-    header(props: {
+    }): VNode[];
+    header?(props: {
         close: () => void;
-    }): any;
-    title(props?: {}): any;
-    description(props?: {}): any;
-    actions(props?: {}): any;
-    close(props: {
+    }): VNode[];
+    title?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
+    actions?(props?: {}): VNode[];
+    close?(props: {
         ui: Modal['ui'];
-    }): any;
-    body(props: {
+    }): VNode[];
+    body?(props: {
         close: () => void;
-    }): any;
-    footer(props: {
+    }): VNode[];
+    footer?(props: {
         close: () => void;
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Modal.vue

@@ -41,7 +41,7 @@ const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => props.content);
 const contentEvents = computed(() => {
   if (!props.dismissible) {
-    const events = ["pointerDownOutside", "interactOutside", "escapeKeyDown"];
+    const events = ["interactOutside", "escapeKeyDown"];
     return events.reduce((acc, curr) => {
       acc[curr] = (e) => {
         e.preventDefault();

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

@@ -1,4 +1,5 @@
 import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/modal';
 import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
@@ -61,27 +62,27 @@ export interface ModalEmits extends DialogRootEmits {
     'close:prevent': [];
 }
 export interface ModalSlots {
-    default(props: {
+    default?(props: {
         open: boolean;
-    }): any;
-    content(props: {
+    }): VNode[];
+    content?(props: {
         close: () => void;
-    }): any;
-    header(props: {
+    }): VNode[];
+    header?(props: {
         close: () => void;
-    }): any;
-    title(props?: {}): any;
-    description(props?: {}): any;
-    actions(props?: {}): any;
-    close(props: {
+    }): VNode[];
+    title?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
+    actions?(props?: {}): VNode[];
+    close?(props: {
         ui: Modal['ui'];
-    }): any;
-    body(props: {
+    }): VNode[];
+    body?(props: {
         close: () => void;
-    }): any;
-    footer(props: {
+    }): VNode[];
+    footer?(props: {
         close: () => void;
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,4 +1,5 @@
 import type { NavigationMenuRootProps, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/navigation-menu';
 import type { AvatarProps, BadgeProps, ChipProps, IconProps, LinkProps, PopoverProps, TooltipProps } from '../types';
@@ -187,30 +188,34 @@ export type NavigationMenuEmits<K extends SingleOrMultipleType = SingleOrMultipl
 type SlotProps<T extends NavigationMenuItem> = (props: {
     item: T;
     index: number;
-    active?: boolean;
+    active: boolean;
     ui: NavigationMenu['ui'];
-}) => any;
+}) => VNode[];
 export type NavigationMenuSlots<A extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>, T extends NestedItem<A> = NestedItem<A>> = {
-    'item': SlotProps<T>;
-    'item-leading': SlotProps<T>;
-    'item-label': (props: {
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?: (props: {
         item: T;
         index: number;
-        active?: boolean;
-    }) => any;
-    'item-trailing': SlotProps<T>;
-    'item-content': SlotProps<T> & {
-        close?: () => void;
-    };
-    'list-leading': (props?: {}) => any;
-    'list-trailing': (props?: {}) => any;
+        active: boolean;
+    }) => VNode[];
+    'item-trailing'?: SlotProps<T>;
+    'item-content'?: (props: {
+        item: T;
+        index: number;
+        active: boolean;
+        ui: NavigationMenu['ui'];
+        close: (() => void) | undefined;
+    }) => VNode[];
+    'list-leading'?: (props?: {}) => VNode[];
+    'list-trailing'?: (props?: {}) => VNode[];
 } & DynamicSlots<MergeTypes<T>, 'label', {
     index: number;
-    active?: boolean;
+    active: boolean;
     ui: NavigationMenu['ui'];
 }> & DynamicSlots<MergeTypes<T>, 'leading' | 'trailing' | 'content', {
     index: number;
-    active?: boolean;
+    active: boolean;
     ui: NavigationMenu['ui'];
 }>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/NavigationMenu.vue

@@ -105,6 +105,17 @@ function getAccordionDefaultValue(list, level = 0, listIndex = 0) {
   }, []);
   return props.type === "single" ? indexes[0] : indexes;
 }
+function onLinkTrailingClick(e, item) {
+  if (!item.children?.length) {
+    return;
+  }
+  if (props.orientation === "horizontal") {
+    e.preventDefault();
+  } else if (props.orientation === "vertical" && !props.collapsed) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+}
 </script>
 
 <template>
@@ -142,12 +153,7 @@ function getAccordionDefaultValue(list, level = 0, listIndex = 0) {
         :as="orientation === 'vertical' && item.children?.length && !collapsed ? 'span' : void 0"
         data-slot="linkTrailing"
         :class="ui.linkTrailing({ class: [uiProp?.linkTrailing, item.ui?.linkTrailing] })"
-        @click="(e) => {
-  if (orientation === 'vertical' && item.children?.length && !collapsed) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
-}"
+        @click="(e) => onLinkTrailingClick(e, item)"
       >
         <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index" :ui="ui">
           <UBadge
@@ -171,6 +177,7 @@ function getAccordionDefaultValue(list, level = 0, listIndex = 0) {
     <component
       :is="orientation === 'vertical' && !collapsed ? AccordionItem : NavigationMenuItem"
       as="li"
+      v-bind="orientation === 'vertical' && !collapsed ? { disabled: !!item.disabled } : {}"
       :value="getItemValue(item, index, level, listIndex)"
     >
       <div v-if="orientation === 'vertical' && item.type === 'label' && !collapsed" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label, item.class] })">