@nuxt/ui 3.1.2 → 3.1.3

package/dist/runtime/components/InputMenu.vue

@@ -4,7 +4,7 @@ import theme from "#build/ui/input-menu";
 
 <script setup>
 import { computed, ref, toRef, onMounted, toRaw } from "vue";
-import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits, useFilter } from "reka-ui";
+import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits, useFilter } from "reka-ui";
 import { defu } from "defu";
 import { isEqual } from "ohash/utils";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
@@ -311,7 +311,7 @@ defineExpose({
           </slot>
         </ComboboxEmpty>
 
-        <ComboboxViewport :class="ui.viewport({ class: props.ui?.viewport })">
+        <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
           <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
 
           <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
@@ -362,7 +362,7 @@ defineExpose({
           </ComboboxGroup>
 
           <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
-        </ComboboxViewport>
+        </div>
 
         <slot name="content-bottom" />
 

package/dist/runtime/components/Modal.vue

@@ -28,7 +28,7 @@ const props = defineProps({
   defaultOpen: { type: Boolean, required: false },
   modal: { type: Boolean, required: false, default: true }
 });
-const emits = defineEmits(["after:leave", "close:prevent", "update:open"]);
+const emits = defineEmits(["after:leave", "after:enter", "close:prevent", "update:open"]);
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
@@ -66,7 +66,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.modal || {} }
     <DialogPortal v-bind="portalProps">
       <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
-      <DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-leave="emits('after:leave')" v-on="contentEvents">
+      <DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-enter="emits('after:enter')" @after-leave="emits('after:leave')" v-on="contentEvents">
         <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
           <DialogTitle v-if="title || !!slots.title">
             <slot name="title">

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

@@ -51,6 +51,7 @@ export interface ModalProps extends DialogRootProps {
 }
 export interface ModalEmits extends DialogRootEmits {
     'after:leave': [];
+    'after:enter': [];
     'close:prevent': [];
 }
 export interface ModalSlots {
@@ -72,10 +73,12 @@ export interface ModalSlots {
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
     "after:leave": () => any;
+    "after:enter": () => any;
     "close:prevent": () => any;
 }, string, import("vue").PublicProps, Readonly<ModalProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onAfter:leave"?: (() => any) | undefined;
+    "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
 }>, {
     close: boolean | Partial<ButtonProps>;

package/dist/runtime/components/NavigationMenu.vue

@@ -4,8 +4,9 @@ import theme from "#build/ui/navigation-menu";
 
 <script setup>
 import { computed, toRef } from "vue";
-import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, useForwardPropsEmits } from "reka-ui";
-import { createReusableTemplate } from "@vueuse/core";
+import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, useForwardPropsEmits } from "reka-ui";
+import { defu } from "defu";
+import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { get, isArrayOfArray } from "../utils";
 import { tv } from "../utils/tv";
@@ -15,7 +16,7 @@ import ULink from "./Link.vue";
 import UAvatar from "./Avatar.vue";
 import UIcon from "./Icon.vue";
 import UBadge from "./Badge.vue";
-import UCollapsible from "./Collapsible.vue";
+import UPopover from "./Popover.vue";
 import UTooltip from "./Tooltip.vue";
 const props = defineProps({
   as: { type: null, required: false },
@@ -26,6 +27,8 @@ const props = defineProps({
   variant: { type: null, required: false },
   orientation: { type: null, required: false, default: "horizontal" },
   collapsed: { type: Boolean, required: false },
+  tooltip: { type: [Boolean, Object], required: false },
+  popover: { type: [Boolean, Object], required: false },
   highlight: { type: Boolean, required: false },
   highlightColor: { type: null, required: false },
   content: { type: Object, required: false },
@@ -41,7 +44,10 @@ const props = defineProps({
   disableHoverTrigger: { type: Boolean, required: false },
   skipDelayDuration: { type: Number, required: false },
   disablePointerLeaveClose: { type: Boolean, required: false },
-  unmountOnHide: { type: Boolean, required: false, default: true }
+  unmountOnHide: { type: Boolean, required: false, default: true },
+  disabled: { type: Boolean, required: false },
+  type: { type: String, required: false, default: "multiple" },
+  collapsible: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
@@ -58,7 +64,10 @@ const rootProps = useForwardPropsEmits(computed(() => ({
   disablePointerLeaveClose: props.disablePointerLeaveClose,
   unmountOnHide: props.unmountOnHide
 })), emits);
+const accordionProps = useForwardPropsEmits(reactivePick(props, "collapsible", "disabled", "type", "unmountOnHide"), emits);
 const contentProps = toRef(() => props.content);
+const tooltipProps = toRef(() => defu(typeof props.tooltip === "boolean" ? {} : props.tooltip, { delayDuration: 0, content: { side: "right" } }));
+const popoverProps = toRef(() => defu(typeof props.popover === "boolean" ? {} : props.popover, { mode: "hover", content: { side: "right", align: "start", alignOffset: 2 } }));
 const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate();
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   props: {
@@ -69,7 +78,7 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
 });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.navigationMenu || {} })({
   orientation: props.orientation,
-  contentOrientation: props.contentOrientation,
+  contentOrientation: props.orientation === "vertical" ? void 0 : props.contentOrientation,
   collapsed: props.collapsed,
   color: props.color,
   variant: props.variant,
@@ -79,6 +88,21 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.navigationMen
 const lists = computed(
   () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
 );
+function getAccordionDefaultValue(list) {
+  function findItemsWithDefaultOpen(items, level = 0) {
+    return items.reduce((acc, item, index) => {
+      if (item.defaultOpen || item.open) {
+        acc.push(item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`));
+      }
+      if (item.children?.length) {
+        acc.push(...findItemsWithDefaultOpen(item.children, level + 1));
+      }
+      return acc;
+    }, []);
+  }
+  const indexes = findItemsWithDefaultOpen(list);
+  return props.type === "single" ? indexes[0] : indexes;
+}
 </script>
 
 <template>
@@ -100,7 +124,7 @@ const lists = computed(
         <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, item.ui?.linkTrailing] })">
+      <component :is="orientation === 'vertical' && item.children?.length && !collapsed ? AccordionTrigger : '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'])" as="span" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })" @click.stop.prevent>
         <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
           <UBadge
             v-if="item.badge"
@@ -111,36 +135,62 @@ const lists = computed(
             :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 && item.collapsible !== false" :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })" />
+          <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, 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>
+      </component>
     </slot>
   </DefineLinkTemplate>
 
   <DefineItemTemplate v-slot="{ item, index, level = 0 }">
     <component
-      :is="orientation === 'vertical' && item.children?.length ? UCollapsible : NavigationMenuItem"
+      :is="orientation === 'vertical' && !collapsed ? AccordionItem : NavigationMenuItem"
       as="li"
-      :value="item.value || `item-${index}`"
-      :default-open="item.defaultOpen"
-      :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"
+      :value="item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`)"
     >
-      <div v-if="orientation === 'vertical' && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
+      <div v-if="orientation === 'vertical' && item.type === 'label' && !collapsed" :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 && item.collapsible !== false ? {} : pickLinkProps(item)" custom>
+      <ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="orientation === 'vertical' && item.children?.length && !collapsed && item.type === 'trigger' ? {} : pickLinkProps(item)" custom>
         <component
-          :is="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) ? NavigationMenuTrigger : NavigationMenuLink"
+          :is="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) ? NavigationMenuTrigger : orientation === 'vertical' && item.children?.length && !collapsed && !slotProps.href ? AccordionTrigger : NavigationMenuLink"
           as-child
           :active="active || item.active"
           :disabled="item.disabled"
           @select="item.onSelect"
         >
-          <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 })">
+          <UPopover v-if="orientation === 'vertical' && collapsed && item.children?.length && (!!props.popover || !!item.popover)" v-bind="{ ...popoverProps, ...typeof item.popover === 'boolean' ? {} : item.popover || {} }" :ui="{ content: ui.content({ class: [props.ui?.content, item.ui?.content] }) }">
+            <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: level > 0 })">
+              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
+            </ULinkBase>
+
+            <template #content>
+              <slot :name="item.slot ? `${item.slot}-content` : 'item-content'" :item="item" :active="active || item.active" :index="index">
+                <ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })">
+                  <li :class="ui.childLabel({ class: [props.ui?.childLabel, item.ui?.childLabel] })">
+                    {{ get(item, props.labelKey) }}
+                  </li>
+                  <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, 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 })" />
+
+                          <span :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, item.ui?.childLinkLabelExternalIcon], active: childActive })" />
+                          </span>
+                        </ULinkBase>
+                      </NavigationMenuLink>
+                    </ULink>
+                  </li>
+                </ul>
+              </slot>
+            </template>
+          </UPopover>
+          <UTooltip v-else-if="orientation === 'vertical' && collapsed && (!!props.tooltip || !!item.tooltip)" :text="get(item, props.labelKey)" v-bind="{ ...tooltipProps, ...typeof item.tooltip === 'boolean' ? {} : 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: level > 0 })">
               <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
             </ULinkBase>
           </UTooltip>
@@ -150,7 +200,7 @@ const lists = computed(
         </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, item.ui?.content] })">
-          <slot :name="item.slot ? `${item.slot}-content` : 'item-content'" :item="item" :active="active" :index="index">
+          <slot :name="item.slot ? `${item.slot}-content` : 'item-content'" :item="item" :active="active || item.active" :index="index">
             <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>
@@ -177,7 +227,7 @@ const lists = computed(
         </NavigationMenuContent>
       </ULink>
 
-      <template v-if="orientation === 'vertical' && item.children?.length" #content>
+      <AccordionContent v-if="orientation === 'vertical' && item.children?.length && !collapsed" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
         <ul :class="ui.childList({ class: props.ui?.childList })">
           <ReuseItemTemplate
             v-for="(childItem, childIndex) in item.children"
@@ -188,7 +238,7 @@ const lists = computed(
             :class="ui.childItem({ class: [props.ui?.childItem, childItem.ui?.childItem] })"
           />
         </ul>
-      </template>
+      </AccordionContent>
     </component>
   </DefineItemTemplate>
 
@@ -196,9 +246,17 @@ const lists = computed(
     <slot name="list-leading" />
 
     <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
-      <NavigationMenuList :class="ui.list({ class: props.ui?.list })">
+      <component
+        v-bind="orientation === 'vertical' && !collapsed ? {
+  ...accordionProps,
+  defaultValue: getAccordionDefaultValue(list)
+} : {}"
+        :is="orientation === 'vertical' && !collapsed ? AccordionRoot : NavigationMenuList"
+        as="ul"
+        :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, item.ui?.item] })" />
-      </NavigationMenuList>
+      </component>
 
       <div v-if="orientation === 'vertical' && listIndex < lists.length - 1" :class="ui.separator({ class: props.ui?.separator })" />
     </template>

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

@@ -1,7 +1,7 @@
-import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, CollapsibleRootProps } from 'reka-ui';
+import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/navigation-menu';
-import type { AvatarProps, BadgeProps, LinkProps, TooltipProps } from '../types';
+import type { AvatarProps, BadgeProps, LinkProps, PopoverProps, 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' | 'ui'> {
@@ -9,7 +9,7 @@ export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'type'
     description?: string;
     [key: string]: any;
 }
-export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
+export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
     label?: string;
     /**
      * @IconifyIcon
@@ -22,40 +22,41 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
      */
     badge?: string | number | BadgeProps;
     /**
-     * Display a tooltip on the item.
-     * Only works when `type` is `link`.
-     * `{ content: { side: 'right' } }`{lang="ts-type"}
+     * Display a tooltip on the item when the menu is collapsed with the label of the item.
+     * This has priority over the global `tooltip` prop.
      */
-    tooltip?: TooltipProps;
+    tooltip?: boolean | TooltipProps;
+    /**
+     * Display a popover on the item when the menu is collapsed with the children list.
+     * This has priority over the global `popover` prop.
+     */
+    popover?: boolean | PopoverProps;
     /**
      * @IconifyIcon
      */
     trailingIcon?: string;
     /**
      * The type of the item.
-     * The `label` type only works on `vertical` orientation.
+     * The `label` type is only displayed in `vertical` orientation.
+     * The `trigger` type is used to force the item to be collapsible when its a link in `vertical` orientation.
      * @defaultValue 'link'
      */
-    type?: 'label' | 'link';
+    type?: 'label' | 'trigger' | '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[];
+    defaultOpen?: boolean;
+    open?: boolean;
     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'>;
+    ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkTrailingBadgeSize' | 'linkTrailingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childLabel' | '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'> {
+export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'>, Pick<AccordionRootProps, 'disabled' | 'type' | 'collapsible'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -94,6 +95,18 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
      * @defaultValue false
      */
     collapsed?: boolean;
+    /**
+     * Display a tooltip on the items when the menu is collapsed with the label of the item.
+     * `{ delayDuration: 0, content: { side: 'right' } }`{lang="ts-type"}
+     * @defaultValue false
+     */
+    tooltip?: boolean | TooltipProps;
+    /**
+     * Display a popover on the items when the menu is collapsed with the children list.
+     * `{ mode: 'hover', content: { side: 'right', align: 'start', alignOffset: 2 } }`{lang="ts-type"}
+     * @defaultValue false
+     */
+    popover?: boolean | PopoverProps;
     /** Display a line next to the active item. */
     highlight?: boolean;
     /**

package/dist/runtime/components/Popover.vue

@@ -58,6 +58,10 @@ const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
       <slot :open="open" />
     </Component.Trigger>
 
+    <Component.Anchor v-if="'Anchor' in Component && !!slots.anchor" as-child>
+      <slot name="anchor" />
+    </Component.Anchor>
+
     <Component.Portal v-bind="portalProps">
       <Component.Content v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
         <slot name="content" />

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

@@ -41,6 +41,7 @@ export interface PopoverSlots {
         open: boolean;
     }): any;
     content(props?: {}): any;
+    anchor(props?: {}): any;
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;

package/dist/runtime/components/Select.vue

@@ -4,7 +4,7 @@ import theme from "#build/ui/select";
 
 <script setup>
 import { computed, toRef } from "vue";
-import { SelectRoot, SelectArrow, SelectTrigger, SelectPortal, SelectContent, SelectViewport, SelectLabel, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectSeparator, useForwardPropsEmits } from "reka-ui";
+import { SelectRoot, SelectArrow, SelectTrigger, SelectPortal, SelectContent, SelectLabel, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectSeparator, useForwardPropsEmits } from "reka-ui";
 import { defu } from "defu";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -148,7 +148,7 @@ function isSelectItem(item) {
       <SelectContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
         <slot name="content-top" />
 
-        <SelectViewport :class="ui.viewport({ class: props.ui?.viewport })">
+        <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
           <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
             <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
               <SelectLabel v-if="isSelectItem(item) && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
@@ -195,7 +195,7 @@ function isSelectItem(item) {
               </SelectItem>
             </template>
           </SelectGroup>
-        </SelectViewport>
+        </div>
 
         <slot name="content-bottom" />
 

package/dist/runtime/components/SelectMenu.vue

@@ -4,7 +4,7 @@ import theme from "#build/ui/select-menu";
 
 <script setup>
 import { computed, toRef, toRaw } from "vue";
-import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, FocusScope, useForwardPropsEmits, useFilter } from "reka-ui";
+import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, FocusScope, useForwardPropsEmits, useFilter } from "reka-ui";
 import { defu } from "defu";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -246,7 +246,7 @@ function isSelectItem(item) {
             </slot>
           </ComboboxEmpty>
 
-          <ComboboxViewport :class="ui.viewport({ class: props.ui?.viewport })">
+          <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
             <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
 
             <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
@@ -297,7 +297,7 @@ function isSelectItem(item) {
             </ComboboxGroup>
 
             <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
-          </ComboboxViewport>
+          </div>
 
           <slot name="content-bottom" />
         </FocusScope>

package/dist/runtime/components/Slideover.vue

@@ -28,7 +28,7 @@ const props = defineProps({
   defaultOpen: { type: Boolean, required: false },
   modal: { type: Boolean, required: false, default: true }
 });
-const emits = defineEmits(["after:leave", "close:prevent", "update:open"]);
+const emits = defineEmits(["after:leave", "after:enter", "close:prevent", "update:open"]);
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
@@ -66,7 +66,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
     <DialogPortal v-bind="portalProps">
       <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
-      <DialogContent :data-side="side" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-leave="emits('after:leave')" v-on="contentEvents">
+      <DialogContent
+        :data-side="side"
+        :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
+        v-bind="contentProps"
+        @after-enter="emits('after:enter')"
+        @after-leave="emits('after:leave')"
+        v-on="contentEvents"
+      >
         <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
           <DialogTitle v-if="title || !!slots.title">
             <slot name="title">

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

@@ -51,6 +51,7 @@ export interface SlideoverProps extends DialogRootProps {
 }
 export interface SlideoverEmits extends DialogRootEmits {
     'after:leave': [];
+    'after:enter': [];
     'close:prevent': [];
 }
 export interface SlideoverSlots {
@@ -72,10 +73,12 @@ export interface SlideoverSlots {
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SlideoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
     "after:leave": () => any;
+    "after:enter": () => any;
     "close:prevent": () => any;
 }, string, import("vue").PublicProps, Readonly<SlideoverProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onAfter:leave"?: (() => any) | undefined;
+    "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
 }>, {
     close: boolean | Partial<ButtonProps>;

package/dist/runtime/components/Textarea.vue

@@ -10,6 +10,8 @@ import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { looseToNumber } from "../utils";
 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 },
@@ -25,10 +27,11 @@ const props = defineProps({
   autoresize: { type: Boolean, required: false },
   autoresizeDelay: { type: Number, required: false, default: 0 },
   disabled: { type: Boolean, required: false },
-  class: { type: null, required: false },
   rows: { type: Number, required: false, default: 3 },
   maxrows: { type: Number, required: false, default: 0 },
   highlight: { type: Boolean, required: false },
+  modelModifiers: { type: Object, required: false },
+  class: { type: null, required: false },
   ui: { type: null, required: false },
   icon: { type: String, required: false },
   avatar: { type: Object, required: false },

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

@@ -31,11 +31,17 @@ export interface TextareaProps extends UseComponentIconsProps {
     autoresize?: boolean;
     autoresizeDelay?: number;
     disabled?: boolean;
-    class?: any;
     rows?: number;
     maxrows?: number;
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
+    modelModifiers?: {
+        string?: boolean;
+        trim?: boolean;
+        lazy?: boolean;
+        nullify?: boolean;
+    };
+    class?: any;
     ui?: Textarea['slots'];
 }
 export interface TextareaEmits<T extends AcceptableValue = AcceptableValue> {

package/dist/runtime/locale/index.d.ts

@@ -21,9 +21,13 @@ export { default as hy } from './hy';
 export { default as id } from './id';
 export { default as it } from './it';
 export { default as ja } from './ja';
-export { default as km } from './km';
 export { default as kk } from './kk';
+export { default as km } from './km';
 export { default as ko } from './ko';
+export { default as ky } from './ky';
+export { default as lt } from './lt';
+export { default as mn } from './mn';
+export { default as ms } from './ms';
 export { default as nb_no } from './nb_no';
 export { default as nl } from './nl';
 export { default as pl } from './pl';
@@ -37,8 +41,8 @@ export { default as sv } from './sv';
 export { default as th } from './th';
 export { default as tj } from './tj';
 export { default as tr } from './tr';
-export { default as uk } from './uk';
 export { default as ug_cn } from './ug_cn';
+export { default as uk } from './uk';
 export { default as ur } from './ur';
 export { default as uz } from './uz';
 export { default as vi } from './vi';

package/dist/runtime/locale/index.js

@@ -21,9 +21,13 @@ export { default as hy } from "./hy.js";
 export { default as id } from "./id.js";
 export { default as it } from "./it.js";
 export { default as ja } from "./ja.js";
-export { default as km } from "./km.js";
 export { default as kk } from "./kk.js";
+export { default as km } from "./km.js";
 export { default as ko } from "./ko.js";
+export { default as ky } from "./ky.js";
+export { default as lt } from "./lt.js";
+export { default as mn } from "./mn.js";
+export { default as ms } from "./ms.js";
 export { default as nb_no } from "./nb_no.js";
 export { default as nl } from "./nl.js";
 export { default as pl } from "./pl.js";
@@ -37,8 +41,8 @@ export { default as sv } from "./sv.js";
 export { default as th } from "./th.js";
 export { default as tj } from "./tj.js";
 export { default as tr } from "./tr.js";
-export { default as uk } from "./uk.js";
 export { default as ug_cn } from "./ug_cn.js";
+export { default as uk } from "./uk.js";
 export { default as ur } from "./ur.js";
 export { default as uz } from "./uz.js";
 export { default as vi } from "./vi.js";

package/dist/runtime/locale/ky.d.ts

@@ -0,0 +1,3 @@
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
+export default _default;