@byyuurin/ui 0.3.0 → 0.4.0

package/dist/runtime/components/NavigationMenu.vue

@@ -8,7 +8,7 @@ import { defu } from "defu";
 import { AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuTrigger, NavigationMenuViewport, useForwardPropsEmits } from "reka-ui";
 import { computed, toRef } from "vue";
 import { useAppConfig } from "#imports";
-import { get, isArrayOfArray, pickLinkProps } from "../utils";
+import { get, isArrayOfArray, pick, pickLinkProps } from "../utils";
 import { cv, merge } from "../utils/style";
 import Avatar from "./Avatar.vue";
 import Badge from "./Badge.vue";
@@ -80,7 +80,7 @@ const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.navigationMenu));
   return styler({
-    ...props,
+    ...pick(props, ["orientation", "collapsed", "color", "variant", "highlight"]),
     contentOrientation: props.orientation === "vertical" ? void 0 : props.contentOrientation,
     highlightColor: props.highlightColor || props.color
   });
@@ -96,210 +96,210 @@ function getAccordionDefaultValue(list, level = 0) {
 </script>
 
 <template>
-  <DefineLinkTemplate v-slot="{ item, active, index }">
-    <slot :name="item.slot || 'item'" :item="item" :index="index" :active="active" :ui="ui">
-      <slot :name="`${item.slot || 'item'}-leading`" :item="item" :active="active" :index="index" :ui="ui">
-        <Avatar
-          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 })"
-          data-part="linkLeadingAvatar"
-        />
-        <Icon
-          v-else-if="item.icon"
-          :name="item.icon"
-          :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active, disabled: !!item.disabled })"
-          data-part="linkLeadingIcon"
-        />
-      </slot>
-
-      <span
-        v-if="get(item, props.labelKey) || slots[`${item.slot || 'item'}-label`]"
-        :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
-        data-part="linkLabel"
-      >
-        <slot :name="`${item.slot || 'item'}-label`" :item="item" :active="active" :index="index">
-          {{ get(item, props.labelKey) }}
-        </slot>
-
-        <Icon
-          v-if="item.target === '_blank' && props.externalIcon !== false"
-          :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external"
-          :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, item.ui?.linkLabelExternalIcon], active })"
-          data-part="linkLabelExternalIcon"
-        />
-      </span>
-
-      <component
-        :is="props.orientation === 'vertical' && item.children?.length && !props.collapsed ? AccordionTrigger : 'span'"
-        v-if="item.badge !== void 0 || orientation === 'horizontal' && (item.children?.length || !!slots[`${item.slot || 'item'}-content`]) || orientation === 'vertical' && item.children?.length || item.trailingIcon || !!slots[`${item.slot || 'item'}-trailing`]"
-        as="span"
-        :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
-        data-part="linkTrailing"
-        @click.stop.prevent
-      >
-        <slot :name="`${item.slot || 'item'}-trailing`" :item="item" :active="active" :index="index" :ui="ui">
-          <Badge
-            v-if="item.badge !== void 0"
-            color="neutral"
-            variant="outline"
-            :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, item.ui?.linkTrailingBadge] })"
-            data-part="linkTrailingBadge"
-          />
-
-          <Icon
-            v-if="orientation === 'horizontal' && (item.children?.length || !!slots[`${item.slot || 'item'}-content`]) || orientation === 'vertical' && item.children?.length"
-            :name="item.trailingIcon || props.trailingIcon || appConfig.ui.icons.chevronDown"
-            :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })"
-            data-part="linkTrailingIcon"
-          />
-          <Icon
-            v-else-if="item.trailingIcon"
-            :name="item.trailingIcon"
-            :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })"
-            data-part="linkTrailingIcon"
-          />
-        </slot>
-      </component>
-    </slot>
-  </DefineLinkTemplate>
-
-  <DefineItemTemplate v-slot="{ item, index, level = 0 }">
-    <component
-      :is="props.orientation === 'vertical' && !props.collapsed ? AccordionItem : NavigationMenuItem"
-      as="li"
-      :value="item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`)"
-    >
-      <div v-if="props.orientation === 'vertical' && item.type === 'label' && !props.collapsed" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })" data-part="label">
-        <ReuseLinkTemplate :item="item" :index="index" />
-      </div>
-      <Link
-        v-else-if="item.type !== 'label'"
-        v-slot="{ active, ...slotProps }"
-        v-bind="props.orientation === 'vertical' && item.children?.length && !props.collapsed && item.type === 'trigger' ? {} : pickLinkProps(item)"
-        custom
-      >
-        <component
+  <DefineLinkTemplate v-slot="{ item, active, index }">
+    <slot :name="item.slot || 'item'" :item="item" :index="index" :active="active" :ui="ui">
+      <slot :name="`${item.slot || 'item'}-leading`" :item="item" :active="active" :index="index" :ui="ui">
+        <Avatar
+          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 })"
+          data-part="linkLeadingAvatar"
+        />
+        <Icon
+          v-else-if="item.icon"
+          :name="item.icon"
+          :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active, disabled: !!item.disabled })"
+          data-part="linkLeadingIcon"
+        />
+      </slot>
+
+      <span
+        v-if="get(item, props.labelKey) || slots[`${item.slot || 'item'}-label`]"
+        :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
+        data-part="linkLabel"
+      >
+        <slot :name="`${item.slot || 'item'}-label`" :item="item" :active="active" :index="index">
+          {{ get(item, props.labelKey) }}
+        </slot>
+
+        <Icon
+          v-if="item.target === '_blank' && props.externalIcon !== false"
+          :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external"
+          :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, item.ui?.linkLabelExternalIcon], active })"
+          data-part="linkLabelExternalIcon"
+        />
+      </span>
+
+      <component
+        :is="props.orientation === 'vertical' && item.children?.length && !props.collapsed ? AccordionTrigger : 'span'"
+        v-if="item.badge !== void 0 || orientation === 'horizontal' && (item.children?.length || !!slots[`${item.slot || 'item'}-content`]) || orientation === 'vertical' && item.children?.length || item.trailingIcon || !!slots[`${item.slot || 'item'}-trailing`]"
+        as="span"
+        :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
+        data-part="linkTrailing"
+        @click.stop.prevent
+      >
+        <slot :name="`${item.slot || 'item'}-trailing`" :item="item" :active="active" :index="index" :ui="ui">
+          <Badge
+            v-if="item.badge !== void 0"
+            color="neutral"
+            variant="outline"
+            :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, item.ui?.linkTrailingBadge] })"
+            data-part="linkTrailingBadge"
+          />
+
+          <Icon
+            v-if="orientation === 'horizontal' && (item.children?.length || !!slots[`${item.slot || 'item'}-content`]) || orientation === 'vertical' && item.children?.length"
+            :name="item.trailingIcon || props.trailingIcon || appConfig.ui.icons.chevronDown"
+            :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })"
+            data-part="linkTrailingIcon"
+          />
+          <Icon
+            v-else-if="item.trailingIcon"
+            :name="item.trailingIcon"
+            :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })"
+            data-part="linkTrailingIcon"
+          />
+        </slot>
+      </component>
+    </slot>
+  </DefineLinkTemplate>
+
+  <DefineItemTemplate v-slot="{ item, index, level = 0 }">
+    <component
+      :is="props.orientation === 'vertical' && !props.collapsed ? AccordionItem : NavigationMenuItem"
+      as="li"
+      :value="item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`)"
+    >
+      <div v-if="props.orientation === 'vertical' && item.type === 'label' && !props.collapsed" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })" data-part="label">
+        <ReuseLinkTemplate :item="item" :index="index" />
+      </div>
+      <Link
+        v-else-if="item.type !== 'label'"
+        v-slot="{ active, ...slotProps }"
+        v-bind="props.orientation === 'vertical' && item.children?.length && !props.collapsed && item.type === 'trigger' ? {} : pickLinkProps(item)"
+        custom
+      >
+        <component
           :is="
   props.orientation === 'horizontal' && (item.children?.length || slots[`${item.slot || 'item'}-content`]) ? NavigationMenuTrigger : orientation === 'vertical' && item.children?.length && !props.collapsed && !slotProps.href ? AccordionTrigger : NavigationMenuLink
-"
-          :active="active || item.active"
-          :disabled="item.disabled"
-          as-child
-          @select="item.onSelect"
-        >
-          <Popover
-            v-if="props.orientation === 'vertical' && props.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] }) }"
-            data-part="content"
-          >
-            <LinkBase
-              v-bind="slotProps"
+"
+          :active="active || item.active"
+          :disabled="item.disabled"
+          as-child
+          @select="item.onSelect"
+        >
+          <Popover
+            v-if="props.orientation === 'vertical' && props.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] }) }"
+            data-part="content"
+          >
+            <LinkBase
+              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
-})"
-              data-part="link"
-            >
-              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
-            </LinkBase>
-
-            <template #content="{ close }">
-              <slot :name="`${item.slot || 'item'}-content`" :item="item" :active="active || item.active" :index="index" :ui="ui" :close="close">
-                <ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })" data-part="childList">
-                  <li :class="ui.childLabel({ class: [props.ui?.childLabel, item.ui?.childLabel] })" data-part="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] })" data-part="childItem">
-                    <Link v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
-                      <NavigationMenuLink :active="childActive" as-child @select="childItem.onSelect">
-                        <LinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })" data-part="childLink">
-                          <Icon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" data-part="childLinkIcon" />
-
-                          <span :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })" data-part="childLinkLabel">
-                            {{ get(childItem, props.labelKey) }}
-
-                            <Icon v-if="childItem.target === '_blank' && props.externalIcon !== false" :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" data-part="childLinkLabelExternalIcon" />
-                          </span>
-                        </LinkBase>
-                      </NavigationMenuLink>
-                    </Link>
-                  </li>
-                </ul>
-              </slot>
-            </template>
-          </Popover>
-          <Tooltip v-else-if="props.orientation === 'vertical' && props.collapsed && (!!props.tooltip || !!item.tooltip)" :text="get(item, props.labelKey)" v-bind="{ ...tooltipProps, ...typeof item.tooltip === 'boolean' ? {} : item.tooltip || {} }">
-            <LinkBase 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 })" data-part="link">
-              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
-            </LinkBase>
-          </Tooltip>
-          <LinkBase 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: props.orientation === 'horizontal' || level > 0 })" data-part="link">
-            <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
-          </LinkBase>
-        </component>
-
-        <NavigationMenuContent
-          v-if="props.orientation === 'horizontal' && (item.children?.length || slots[`${item.slot || 'item'}-content`])"
-          v-bind="contentProps"
-          :class="ui.content({ class: [props.ui?.content, item.ui?.content] })"
-          data-part="content"
-        >
-          <slot :name="`${item.slot || 'item'}-content`" :item="item" :active="active" :index="index" :ui="ui">
-            <ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })" data-part="childList">
-              <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })" data-part="childItem">
-                <Link v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
-                  <NavigationMenuLink :active="childActive" as-child @select="childItem.onSelect">
-                    <LinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })" data-part="childLink">
-                      <Icon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" data-part="childLinkIcon" />
-
-                      <div :class="ui.childLinkWrapper({ class: [props.ui?.childLinkWrapper, item.ui?.childLinkWrapper] })" data-part="childLinkWrapper">
-                        <p :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })" data-part="childLinkLabel">
-                          {{ get(childItem, props.labelKey) }}
-
-                          <Icon v-if="childItem.target === '_blank' && props.externalIcon !== false" :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" data-part="childLinkLabelExternalIcon" />
-                        </p>
-                        <p v-if="childItem.description" :class="ui.childLinkDescription({ class: [props.ui?.childLinkDescription, item.ui?.childLinkDescription], active: childActive })" data-part="childLinkDescription">
-                          {{ childItem.description }}
-                        </p>
-                      </div>
-                    </LinkBase>
-                  </NavigationMenuLink>
-                </Link>
-              </li>
-            </ul>
-          </slot>
-        </NavigationMenuContent>
-      </Link>
-
-      <AccordionContent v-if="props.orientation === 'vertical' && item.children?.length && !props.collapsed" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })" data-part="content">
-        <AccordionRoot
-          v-bind="{ ...accordionProps, defaultValue: getAccordionDefaultValue(item.children, level + 1) }"
-          as="ul"
-          :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })"
-          data-part="childList"
-        >
-          <ReuseItemTemplate
-            v-for="(childItem, childIndex) in item.children"
-            :key="childIndex"
-            :item="childItem"
-            :index="childIndex"
-            :level="level + 1"
-            :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })"
-            data-part="childItem"
-          />
-        </AccordionRoot>
-      </AccordionContent>
-    </component>
-  </DefineItemTemplate>
-
-  <NavigationMenuRoot
+})"
+              data-part="link"
+            >
+              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
+            </LinkBase>
+
+            <template #content="{ close }">
+              <slot :name="`${item.slot || 'item'}-content`" :item="item" :active="active || item.active" :index="index" :ui="ui" :close="close">
+                <ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })" data-part="childList">
+                  <li :class="ui.childLabel({ class: [props.ui?.childLabel, item.ui?.childLabel] })" data-part="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] })" data-part="childItem">
+                    <Link v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
+                      <NavigationMenuLink :active="childActive" as-child @select="childItem.onSelect">
+                        <LinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })" data-part="childLink">
+                          <Icon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" data-part="childLinkIcon" />
+
+                          <span :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })" data-part="childLinkLabel">
+                            {{ get(childItem, props.labelKey) }}
+
+                            <Icon v-if="childItem.target === '_blank' && props.externalIcon !== false" :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" data-part="childLinkLabelExternalIcon" />
+                          </span>
+                        </LinkBase>
+                      </NavigationMenuLink>
+                    </Link>
+                  </li>
+                </ul>
+              </slot>
+            </template>
+          </Popover>
+          <Tooltip v-else-if="props.orientation === 'vertical' && props.collapsed && (!!props.tooltip || !!item.tooltip)" :text="get(item, props.labelKey)" v-bind="{ ...tooltipProps, ...typeof item.tooltip === 'boolean' ? {} : item.tooltip || {} }">
+            <LinkBase 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 })" data-part="link">
+              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
+            </LinkBase>
+          </Tooltip>
+          <LinkBase 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: props.orientation === 'horizontal' || level > 0 })" data-part="link">
+            <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
+          </LinkBase>
+        </component>
+
+        <NavigationMenuContent
+          v-if="props.orientation === 'horizontal' && (item.children?.length || slots[`${item.slot || 'item'}-content`])"
+          v-bind="contentProps"
+          :class="ui.content({ class: [props.ui?.content, item.ui?.content] })"
+          data-part="content"
+        >
+          <slot :name="`${item.slot || 'item'}-content`" :item="item" :active="active" :index="index" :ui="ui">
+            <ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })" data-part="childList">
+              <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })" data-part="childItem">
+                <Link v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
+                  <NavigationMenuLink :active="childActive" as-child @select="childItem.onSelect">
+                    <LinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })" data-part="childLink">
+                      <Icon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" data-part="childLinkIcon" />
+
+                      <div :class="ui.childLinkWrapper({ class: [props.ui?.childLinkWrapper, item.ui?.childLinkWrapper] })" data-part="childLinkWrapper">
+                        <p :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })" data-part="childLinkLabel">
+                          {{ get(childItem, props.labelKey) }}
+
+                          <Icon v-if="childItem.target === '_blank' && props.externalIcon !== false" :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" data-part="childLinkLabelExternalIcon" />
+                        </p>
+                        <p v-if="childItem.description" :class="ui.childLinkDescription({ class: [props.ui?.childLinkDescription, item.ui?.childLinkDescription], active: childActive })" data-part="childLinkDescription">
+                          {{ childItem.description }}
+                        </p>
+                      </div>
+                    </LinkBase>
+                  </NavigationMenuLink>
+                </Link>
+              </li>
+            </ul>
+          </slot>
+        </NavigationMenuContent>
+      </Link>
+
+      <AccordionContent v-if="props.orientation === 'vertical' && item.children?.length && !props.collapsed" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })" data-part="content">
+        <AccordionRoot
+          v-bind="{ ...accordionProps, defaultValue: getAccordionDefaultValue(item.children, level + 1) }"
+          as="ul"
+          :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })"
+          data-part="childList"
+        >
+          <ReuseItemTemplate
+            v-for="(childItem, childIndex) in item.children"
+            :key="childIndex"
+            :item="childItem"
+            :index="childIndex"
+            :level="level + 1"
+            :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })"
+            data-part="childItem"
+          />
+        </AccordionRoot>
+      </AccordionContent>
+    </component>
+  </DefineItemTemplate>
+
+  <NavigationMenuRoot
     v-bind="{
   ...rootProps,
   ...props.orientation === 'horizontal' ? {
@@ -307,39 +307,39 @@ function getAccordionDefaultValue(list, level = 0) {
     defaultValue: props.defaultValue
   } : {},
   ...$attrs
-}"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :data-collapsed="props.collapsed"
-    data-part="root"
-  >
-    <slot name="list-leading"></slot>
-
-    <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
-      <component
+}"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :data-collapsed="props.collapsed"
+    data-part="root"
+  >
+    <slot name="list-leading"></slot>
+
+    <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
+      <component
         v-bind="props.orientation === 'vertical' && !props.collapsed ? {
   ...accordionProps,
   modelValue: props.modelValue,
   defaultValue: props.defaultValue ?? getAccordionDefaultValue(list)
-} : {}"
-        :is="props.orientation === 'vertical' ? AccordionRoot : NavigationMenuList"
-        as="ul"
-        :class="ui.list({ class: props.ui?.list })"
-        data-part="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] })" data-part="item" />
-      </component>
-
-      <div v-if="props.orientation === 'vertical' && listIndex < lists.length - 1" :class="ui.separator({ class: props.ui?.separator })" data-part="separator"></div>
-    </template>
-
-    <slot name="list-trailing"></slot>
-
-    <div v-if="props.orientation === 'horizontal'" :class="ui.viewportWrapper({ class: props.ui?.viewportWrapper })" data-part="viewportWrapper">
-      <NavigationMenuIndicator v-if="props.arrow" :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator">
-        <div :class="ui.arrow({ class: props.ui?.arrow })" data-part="arrow"></div>
-      </NavigationMenuIndicator>
-
-      <NavigationMenuViewport :class="ui.viewport({ class: props.ui?.viewport })" data-part="viewport" />
-    </div>
-  </NavigationMenuRoot>
+} : {}"
+        :is="props.orientation === 'vertical' ? AccordionRoot : NavigationMenuList"
+        as="ul"
+        :class="ui.list({ class: props.ui?.list })"
+        data-part="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] })" data-part="item" />
+      </component>
+
+      <div v-if="props.orientation === 'vertical' && listIndex < lists.length - 1" :class="ui.separator({ class: props.ui?.separator })" data-part="separator"></div>
+    </template>
+
+    <slot name="list-trailing"></slot>
+
+    <div v-if="props.orientation === 'horizontal'" :class="ui.viewportWrapper({ class: props.ui?.viewportWrapper })" data-part="viewportWrapper">
+      <NavigationMenuIndicator v-if="props.arrow" :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator">
+        <div :class="ui.arrow({ class: props.ui?.arrow })" data-part="arrow"></div>
+      </NavigationMenuIndicator>
+
+      <NavigationMenuViewport :class="ui.viewport({ class: props.ui?.viewport })" data-part="viewport" />
+    </div>
+  </NavigationMenuRoot>
 </template>

package/dist/runtime/components/OverlayProvider.vue

@@ -13,13 +13,13 @@ function onClose(id, value) {
 </script>
 
 <template>
-  <component
-    :is="overlay.component"
-    v-for="overlay in mountedOverlays"
-    :key="overlay.id"
-    v-bind="overlay.props"
-    v-model:open="overlay.isOpen"
-    @close="onClose(overlay.id, $event)"
-    @after-leave="onAfterLeave(overlay.id)"
-  />
+  <component
+    :is="overlay.component"
+    v-for="overlay in mountedOverlays"
+    :key="overlay.id"
+    v-bind="overlay.props"
+    v-model:open="overlay.isOpen"
+    @close="onClose(overlay.id, $event)"
+    @after-leave="onAfterLeave(overlay.id)"
+  />
 </template>