@byyuurin/ui 0.1.0 → 0.3.0

package/dist/runtime/components/NavigationMenu.vue

@@ -20,6 +20,9 @@ import Tooltip from "./Tooltip.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },
+  type: { type: null, required: false, default: "multiple" },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
   trailingIcon: { type: [String, Object], required: false },
   externalIcon: { type: [Boolean, String, Object], required: false, default: true },
   items: { type: null, required: false },
@@ -37,8 +40,6 @@ const props = defineProps({
   labelKey: { type: null, required: false, default: "label" },
   ui: { type: null, required: false },
   class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
-  modelValue: { type: String, required: false },
-  defaultValue: { type: String, required: false },
   delayDuration: { type: Number, required: false, default: 0 },
   disableClickTrigger: { type: Boolean, required: false },
   disableHoverTrigger: { type: Boolean, required: false },
@@ -46,15 +47,12 @@ const props = defineProps({
   disablePointerLeaveClose: { type: Boolean, required: false },
   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 emit = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
 const rootProps = useForwardPropsEmits(computed(() => ({
   as: props.as,
-  modelValue: props.modelValue,
-  defaultValue: props.defaultValue,
   delayDuration: props.delayDuration,
   skipDelayDuration: props.skipDelayDuration,
   orientation: props.orientation,
@@ -98,239 +96,250 @@ 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="link-leading-avatar"
-        />
-        <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="link-leading-icon"
-        />
-      </slot>
-
-      <span
-        v-if="(!props.collapsed || props.orientation !== 'vertical') && (get(item, props.labelKey) || slots[`${item.slot || 'item'}-label`])"
-        :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
-        data-part="link-label"
-      >
-        <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="link-label-external-icon"
-        />
-      </span>
-
-      <component
-        :is="props.orientation === 'vertical' && item.children?.length && !props.collapsed ? AccordionTrigger : 'span'"
-        v-if="(!props.collapsed || props.orientation !== 'vertical') && (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="link-trailing"
-        @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="link-trailing-badge"
-          />
-
-          <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="link-trailing-icon"
-          />
-          <Icon
-            v-else-if="item.trailingIcon"
-            :name="item.trailingIcon"
-            :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })"
-            data-part="link-trailing-icon"
-          />
-        </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 && !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"
+  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"
               :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="child-list">
-                  <li :class="ui.childLabel({ class: [props.ui?.childLabel, item.ui?.childLabel] })" data-part="child-label">
-                    {{ 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="child-item">
-                    <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="child-link">
-                          <Icon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" data-part="child-link-icon" />
-
-                          <span :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })" data-part="child-link-label">
-                            {{ 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="child-link-label-external-icon" />
-                          </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="child-list">
-              <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })" data-part="child-item">
-                <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="child-link">
-                      <Icon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" data-part="child-link-icon" />
-
-                      <div :class="ui.childLinkWrapper({ class: [props.ui?.childLinkWrapper, item.ui?.childLinkWrapper] })" data-part="child-link-wrapper">
-                        <p :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })" data-part="child-link-label">
-                          {{ 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="child-link-label-external-icon" />
-                        </p>
-                        <p v-if="childItem.description" :class="ui.childLinkDescription({ class: [props.ui?.childLinkDescription, item.ui?.childLinkDescription], active: childActive })" data-part="child-link-description">
-                          {{ 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="child-list"
-        >
-          <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="child-item"
-          />
-        </AccordionRoot>
-      </AccordionContent>
-    </component>
-  </DefineItemTemplate>
-
-  <NavigationMenuRoot
-    v-bind="{ ...rootProps, ...$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
-        v-bind="props.orientation === 'vertical' && !props.collapsed ? { ...accordionProps, defaultValue: getAccordionDefaultValue(list) } : {}"
-        :is="props.orientation === 'vertical' && !props.collapsed ? 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="viewport-wrapper">
-      <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>
+})"
+              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' ? {
+    modelValue: props.modelValue,
+    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
+        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>
 </template>