@nuxt/ui 3.1.0 → 3.1.2

package/dist/runtime/components/Link.vue

@@ -5,11 +5,12 @@ import theme from "#build/ui/link";
 <script setup>
 import { computed } from "vue";
 import { defu } from "defu";
-import { isEqual, diff } from "ohash/utils";
+import { isEqual } from "ohash/utils";
 import { useForwardProps } from "reka-ui";
 import { reactiveOmit } from "@vueuse/core";
 import { useRoute, useAppConfig } from "#imports";
 import { tv } from "../utils/tv";
+import { isPartiallyEqual } from "../utils/link";
 import ULinkBase from "./LinkBase.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -43,7 +44,7 @@ const props = defineProps({
 defineSlots();
 const route = useRoute();
 const appConfig = useAppConfig();
-const nuxtLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "exactQuery", "exactHash", "activeClass", "inactiveClass", "raw", "class"));
+const nuxtLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "exactQuery", "exactHash", "activeClass", "inactiveClass", "to", "href", "raw", "custom", "class"));
 const ui = computed(() => tv({
   extend: tv(theme),
   ...defu({
@@ -55,17 +56,7 @@ const ui = computed(() => tv({
     }
   }, appConfig.ui?.link || {})
 }));
-function isPartiallyEqual(item1, item2) {
-  const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
-    if (q.type === "added") {
-      filtered.add(q.key);
-    }
-    return filtered;
-  }, /* @__PURE__ */ new Set());
-  const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key)));
-  const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key)));
-  return isEqual(item1Filtered, item2Filtered);
-}
+const to = computed(() => props.to ?? props.href);
 function isLinkActive({ route: linkRoute, isActive, isExactActive }) {
   if (props.active !== void 0) {
     return props.active;
@@ -96,7 +87,7 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
 </script>
 
 <template>
-  <NuxtLink v-slot="{ href, navigate, route: linkRoute, rel, target, isExternal, isActive, isExactActive }" v-bind="nuxtLinkProps" custom>
+  <NuxtLink v-slot="{ href, navigate, route: linkRoute, rel, target, isExternal, isActive, isExactActive }" v-bind="nuxtLinkProps" :to="to" custom>
     <template v-if="custom">
       <slot
         v-bind="{

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

@@ -77,48 +77,17 @@ export interface LinkSlots {
         active: boolean;
     }): any;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<LinkProps>, {
-    as: string;
-    type: string;
-    ariaCurrentValue: string;
-    active: undefined;
-    activeClass: string;
-    inactiveClass: string;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<LinkProps>, {
-    as: string;
-    type: string;
-    ariaCurrentValue: string;
-    active: undefined;
-    activeClass: string;
-    inactiveClass: string;
-}>>> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<LinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkProps> & Readonly<{}>, {
     type: "reset" | "submit" | "button";
     as: any;
     activeClass: string;
     ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
     active: boolean;
     inactiveClass: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<LinkSlots> & LinkSlots>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
 export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

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

@@ -11,38 +11,15 @@ export interface LinkBaseProps {
     active?: boolean;
     isExternal?: boolean;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<LinkBaseProps>, {
-    as: string;
-    type: string;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<LinkBaseProps>, {
-    as: string;
-    type: string;
-}>>> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<LinkBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkBaseProps> & Readonly<{}>, {
     type: string;
     as: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
-    default?(_: {}): any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
 }>;
 export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

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

@@ -69,41 +69,25 @@ export interface ModalSlots {
     body(props?: {}): any;
     footer(props?: {}): any;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<ModalProps>, {
-    close: boolean;
-    portal: boolean;
-    overlay: boolean;
-    transition: boolean;
-    modal: boolean;
-    dismissible: boolean;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    "after:leave": () => any;
+    "close:prevent": () => any;
+}, string, import("vue").PublicProps, Readonly<ModalProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onAfter:leave"?: (() => any) | undefined;
+    "onClose:prevent"?: (() => any) | undefined;
+}>, {
     close: boolean | Partial<ButtonProps>;
     modal: boolean;
-    transition: boolean;
     portal: boolean | string | HTMLElement;
     overlay: boolean;
+    transition: boolean;
     dismissible: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<ModalSlots> & ModalSlots>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ModalSlots>;
 export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/dist/runtime/components/NavigationMenu.vue

@@ -16,6 +16,7 @@ import UAvatar from "./Avatar.vue";
 import UIcon from "./Icon.vue";
 import UBadge from "./Badge.vue";
 import UCollapsible from "./Collapsible.vue";
+import UTooltip from "./Tooltip.vue";
 const props = defineProps({
   as: { type: null, required: false },
   trailingIcon: { type: String, required: false },
@@ -84,34 +85,34 @@ const lists = computed(
   <DefineLinkTemplate v-slot="{ item, active, index }">
     <slot :name="item.slot || 'item'" :item="item" :index="index">
       <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index">
-        <UAvatar v-if="item.avatar" :size="props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: props.ui?.linkLeadingAvatar, active, disabled: !!item.disabled })" />
-        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon, active, disabled: !!item.disabled })" />
+        <UAvatar v-if="item.avatar" :size="item.ui?.linkLeadingAvatarSize || props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active, disabled: !!item.disabled })" />
+        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active, disabled: !!item.disabled })" />
       </slot>
 
       <span
         v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'])"
-        :class="ui.linkLabel({ class: props.ui?.linkLabel })"
+        :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
       >
         <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
           {{ get(item, props.labelKey) }}
         </slot>
 
-        <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: props.ui?.linkLabelExternalIcon, active })" />
+        <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, item.ui?.linkLabelExternalIcon], active })" />
       </span>
 
-      <span v-if="(!collapsed || orientation !== 'vertical') && (item.badge || orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length || item.trailingIcon || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing'])" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
+      <span v-if="(!collapsed || orientation !== 'vertical') && (item.badge || orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length || item.trailingIcon || !!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'" :item="item" :active="active" :index="index">
           <UBadge
             v-if="item.badge"
             color="neutral"
             variant="outline"
-            :size="props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()"
+            :size="item.ui?.linkTrailingBadgeSize || props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()"
             v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
-            :class="ui.linkTrailingBadge({ class: props.ui?.linkTrailingBadge })"
+            :class="ui.linkTrailingBadge({ class: [props.ui?.linkTrailingBadge, item.ui?.linkTrailingBadge] })"
           />
 
-          <UIcon v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length" :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon, active })" />
-          <UIcon v-else-if="item.trailingIcon" :name="item.trailingIcon" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon, active })" />
+          <UIcon v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length && item.collapsible !== false" :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })" />
+          <UIcon v-else-if="item.trailingIcon" :name="item.trailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })" />
         </slot>
       </span>
     </slot>
@@ -119,17 +120,18 @@ const lists = computed(
 
   <DefineItemTemplate v-slot="{ item, index, level = 0 }">
     <component
-      :is="orientation === 'vertical' && item.children?.length && !collapsed ? UCollapsible : NavigationMenuItem"
+      :is="orientation === 'vertical' && item.children?.length ? UCollapsible : NavigationMenuItem"
       as="li"
-      :value="item.value || String(index)"
+      :value="item.value || `item-${index}`"
       :default-open="item.defaultOpen"
-      :unmount-on-hide="orientation === 'vertical' && item.children?.length && !collapsed ? unmountOnHide : void 0"
+      :disabled="orientation === 'vertical' && item.children?.length ? item.collapsible === false : void 0"
+      :unmount-on-hide="orientation === 'vertical' && item.children?.length ? unmountOnHide : void 0"
       :open="item.open"
     >
-      <div v-if="orientation === 'vertical' && item.type === 'label'" :class="ui.label({ class: props.ui?.label })">
+      <div v-if="orientation === 'vertical' && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
         <ReuseLinkTemplate :item="item" :index="index" />
       </div>
-      <ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="orientation === 'vertical' && item.children?.length && !collapsed ? {} : pickLinkProps(item)" custom>
+      <ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="orientation === 'vertical' && item.children?.length && item.collapsible !== false ? {} : pickLinkProps(item)" custom>
         <component
           :is="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) ? NavigationMenuTrigger : NavigationMenuLink"
           as-child
@@ -137,27 +139,32 @@ const lists = computed(
           :disabled="item.disabled"
           @select="item.onSelect"
         >
-          <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
+          <UTooltip v-if="!!item.tooltip" :content="{ side: 'right' }" v-bind="item.tooltip">
+            <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
+              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
+            </ULinkBase>
+          </UTooltip>
+          <ULinkBase v-else v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
             <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
           </ULinkBase>
         </component>
 
-        <NavigationMenuContent v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])" v-bind="contentProps" :class="ui.content({ class: props.ui?.content })">
+        <NavigationMenuContent v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])" v-bind="contentProps" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
           <slot :name="item.slot ? `${item.slot}-content` : 'item-content'" :item="item" :active="active" :index="index">
-            <ul :class="ui.childList({ class: props.ui?.childList })">
-              <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: props.ui?.childItem })">
+            <ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })">
+              <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })">
                 <ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
                   <NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
-                    <ULinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, childItem.class], active: childActive })">
-                      <UIcon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: props.ui?.childLinkIcon, active: childActive })" />
+                    <ULinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })">
+                      <UIcon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" />
 
-                      <div :class="ui.childLinkWrapper({ class: props.ui?.childLinkWrapper })">
-                        <p :class="ui.childLinkLabel({ class: props.ui?.childLinkLabel, active: childActive })">
+                      <div :class="ui.childLinkWrapper({ class: [props.ui?.childLinkWrapper, item.ui?.childLinkWrapper] })">
+                        <p :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })">
                           {{ get(childItem, props.labelKey) }}
 
-                          <UIcon v-if="childItem.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: props.ui?.childLinkLabelExternalIcon, active: childActive })" />
+                          <UIcon v-if="childItem.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" />
                         </p>
-                        <p v-if="childItem.description" :class="ui.childLinkDescription({ class: props.ui?.childLinkDescription, active: childActive })">
+                        <p v-if="childItem.description" :class="ui.childLinkDescription({ class: [props.ui?.childLinkDescription, item.ui?.childLinkDescription], active: childActive })">
                           {{ childItem.description }}
                         </p>
                       </div>
@@ -170,7 +177,7 @@ const lists = computed(
         </NavigationMenuContent>
       </ULink>
 
-      <template v-if="orientation === 'vertical' && item.children?.length && !collapsed" #content>
+      <template v-if="orientation === 'vertical' && item.children?.length" #content>
         <ul :class="ui.childList({ class: props.ui?.childList })">
           <ReuseItemTemplate
             v-for="(childItem, childIndex) in item.children"
@@ -178,19 +185,19 @@ const lists = computed(
             :item="childItem"
             :index="childIndex"
             :level="level + 1"
-            :class="ui.childItem({ class: props.ui?.childItem })"
+            :class="ui.childItem({ class: [props.ui?.childItem, childItem.ui?.childItem] })"
           />
         </ul>
       </template>
     </component>
   </DefineItemTemplate>
 
-  <NavigationMenuRoot v-bind="rootProps" :data-collapsed="collapsed" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <NavigationMenuRoot v-bind="rootProps" :data-collapsed="collapsed" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="list-leading" />
 
     <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
       <NavigationMenuList :class="ui.list({ class: props.ui?.list })">
-        <ReuseItemTemplate v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :item="item" :index="index" :class="ui.item({ class: props.ui?.item })" />
+        <ReuseItemTemplate v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :item="item" :index="index" :class="ui.item({ class: [props.ui?.item, item.ui?.item] })" />
       </NavigationMenuList>
 
       <div v-if="orientation === 'vertical' && listIndex < lists.length - 1" :class="ui.separator({ class: props.ui?.separator })" />

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

@@ -1,10 +1,10 @@
 import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, CollapsibleRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/navigation-menu';
-import type { AvatarProps, BadgeProps, LinkProps } from '../types';
+import type { AvatarProps, BadgeProps, LinkProps, TooltipProps } from '../types';
 import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils';
 type NavigationMenu = ComponentConfig<typeof theme, AppConfig, 'navigationMenu'>;
-export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'type'> {
+export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'type' | 'ui'> {
     /** Description is only used when `orientation` is `horizontal`. */
     description?: string;
     [key: string]: any;
@@ -21,6 +21,12 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
      * `{ size: 'sm', color: 'neutral', variant: 'outline' }`{lang="ts-type"}
      */
     badge?: string | number | BadgeProps;
+    /**
+     * Display a tooltip on the item.
+     * Only works when `type` is `link`.
+     * `{ content: { side: 'right' } }`{lang="ts-type"}
+     */
+    tooltip?: TooltipProps;
     /**
      * @IconifyIcon
      */
@@ -32,9 +38,21 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
      */
     type?: 'label' | 'link';
     slot?: string;
+    /**
+     * The value of the item. Avoid using `index` as the value to prevent conflicts in horizontal orientation with Reka UI.
+     * @defaultValue `item-${index}`
+     */
     value?: string;
+    /**
+     * Make the item collapsible.
+     * Only works when `orientation` is `vertical`.
+     * @defaultValue true
+     */
+    collapsible?: boolean;
     children?: NavigationMenuChildItem[];
     onSelect?(e: Event): void;
+    class?: any;
+    ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkTrailingBadgeSize' | 'linkTrailingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'childLinkDescription'>;
     [key: string]: any;
 }
 export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'> {
@@ -123,32 +141,12 @@ export type NavigationMenuSlots<A extends ArrayOrNested<NavigationMenuItem> = Ar
     active?: boolean;
 }>;
 declare const _default: <T extends ArrayOrNested<NavigationMenuItem>>(__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<any & NavigationMenuProps<T> & Partial<{}>> & (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps);
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & NavigationMenuProps<T> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
-    slots: Readonly<{
-        item: SlotProps<NestedItem<T>>;
-        'item-leading': SlotProps<NestedItem<T>>;
-        'item-label': SlotProps<NestedItem<T>>;
-        'item-trailing': SlotProps<NestedItem<T>>;
-        'item-content': SlotProps<NestedItem<T>>;
-        'list-leading': (props?: {}) => any;
-        'list-trailing': (props?: {}) => any;
-    } & DynamicSlots<MergeTypes<NestedItem<T>>, "trailing" | "leading" | "content" | "label", {
-        index: number;
-        active?: boolean;
-    }>> & {
-        item: SlotProps<NestedItem<T>>;
-        'item-leading': SlotProps<NestedItem<T>>;
-        'item-label': SlotProps<NestedItem<T>>;
-        'item-trailing': SlotProps<NestedItem<T>>;
-        'item-content': SlotProps<NestedItem<T>>;
-        'list-leading': (props?: {}) => any;
-        'list-trailing': (props?: {}) => any;
-    } & DynamicSlots<MergeTypes<NestedItem<T>>, "trailing" | "leading" | "content" | "label", {
-        index: number;
-        active?: boolean;
-    }>;
+    slots: NavigationMenuSlots<T, NestedItem<T>>;
     emit: (evt: "update:modelValue", value: string) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/runtime/components/Pagination.vue

@@ -47,7 +47,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pagination ||
 </script>
 
 <template>
-  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <PaginationList v-slot="{ items }" :class="ui.list({ class: props.ui?.list })">
       <PaginationFirst v-if="showControls || !!slots.first" as-child :class="ui.first({ class: props.ui?.first })">
         <slot name="first">

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

@@ -95,49 +95,25 @@ export interface PaginationSlots {
         index: number;
     }): any;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<PaginationProps>, {
-    size: string;
-    color: string;
-    variant: string;
-    activeColor: string;
-    activeVariant: string;
-    showControls: boolean;
-    showEdges: boolean;
-    itemsPerPage: number;
-    siblingCount: number;
-    total: number;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
-    size: "md" | "xs" | "sm" | "lg" | "xl";
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PaginationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:page": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<PaginationProps> & Readonly<{
+    "onUpdate:page"?: ((value: number) => any) | undefined;
+}>, {
+    size: "xs" | "sm" | "md" | "lg" | "xl";
     color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
-    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     activeColor: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     activeVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     itemsPerPage: number;
     showEdges: boolean;
     siblingCount: number;
     total: number;
     showControls: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<PaginationSlots> & PaginationSlots>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PaginationSlots>;
 export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/dist/runtime/components/PinInput.vue

@@ -75,7 +75,7 @@ defineExpose({
     v-bind="{ ...rootProps, ...ariaAttrs }"
     :id="id"
     :name="name"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="emitFormInput()"
     @complete="onComplete"
   >

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

@@ -37,32 +37,21 @@ export type PinInputEmits = PinInputRootEmits & {
     change: [payload: Event];
     blur: [payload: Event];
 };
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<PinInputProps>, {
-    type: string;
-    length: number;
-    autofocusDelay: number;
-}>>, {
+declare const _default: import("vue").DefineComponent<PinInputProps, {
     inputsRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (payload: Event) => any;
+    complete: (value: string[]) => any;
+    change: (payload: Event) => any;
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<PinInputProps> & Readonly<{
+    onBlur?: ((payload: Event) => any) | undefined;
+    onComplete?: ((value: string[]) => any) | undefined;
+    onChange?: ((payload: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
     length: number | string;
     type: "text" | "number";
     autofocusDelay: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

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

@@ -42,39 +42,22 @@ export interface PopoverSlots {
     }): any;
     content(props?: {}): any;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<PopoverProps>, {
-    portal: boolean;
-    mode: string;
-    openDelay: number;
-    closeDelay: number;
-    dismissible: boolean;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    "close:prevent": () => any;
+}, string, import("vue").PublicProps, Readonly<PopoverProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onClose:prevent"?: (() => any) | undefined;
+}>, {
     mode: "click" | "hover";
     portal: boolean | string | HTMLElement;
     dismissible: boolean;
     openDelay: number;
     closeDelay: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<PopoverSlots> & PopoverSlots>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PopoverSlots>;
 export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/dist/runtime/components/Progress.vue

@@ -109,7 +109,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.progress || {
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div v-if="!isIndeterminate && (status || !!slots.status)" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
       <slot name="status" :percent="percent">
         {{ percent }}%