@eslamdevui/ui 3.2.0-beta.1

package/dist/runtime/components/Modal.vue

@@ -0,0 +1,130 @@
+<script>
+import theme from "#build/ui/modal";
+</script>
+
+<script setup>
+import { computed, toRef } from "vue";
+import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { usePortal } from "../composables/usePortal";
+import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
+const props = defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  content: { type: Object, required: false },
+  overlay: { type: Boolean, required: false, default: true },
+  transition: { type: Boolean, required: false, default: true },
+  fullscreen: { type: Boolean, required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
+  close: { type: [Boolean, Object], required: false, default: true },
+  closeIcon: { type: String, required: false },
+  dismissible: { type: Boolean, required: false, default: true },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  modal: { type: Boolean, required: false, default: true }
+});
+const emits = defineEmits(["after:leave", "after:enter", "close:prevent", "update:open"]);
+const slots = defineSlots();
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen", "modal"), emits);
+const portalProps = usePortal(toRef(() => props.portal));
+const contentProps = toRef(() => props.content);
+const contentEvents = computed(() => {
+  const defaultEvents = {
+    closeAutoFocus: (e) => e.preventDefault()
+  };
+  if (!props.dismissible) {
+    const events = ["pointerDownOutside", "interactOutside", "escapeKeyDown"];
+    return events.reduce((acc, curr) => {
+      acc[curr] = (e) => {
+        e.preventDefault();
+        emits("close:prevent");
+      };
+      return acc;
+    }, defaultEvents);
+  }
+  return defaultEvents;
+});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.modal || {} })({
+  transition: props.transition,
+  fullscreen: props.fullscreen
+}));
+</script>
+
+<template>
+  <DialogRoot v-slot="{ open, close }" v-bind="rootProps">
+    <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
+      <slot :open="open" />
+    </DialogTrigger>
+
+    <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-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">
+              {{ title }}
+            </slot>
+          </DialogTitle>
+
+          <DialogDescription v-if="description || !!slots.description">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </DialogDescription>
+        </VisuallyHidden>
+
+        <slot name="content" :close="close">
+          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
+            <slot name="header" :close="close">
+              <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+                <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+                  <slot name="title">
+                    {{ title }}
+                  </slot>
+                </DialogTitle>
+
+                <DialogDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+                  <slot name="description">
+                    {{ description }}
+                  </slot>
+                </DialogDescription>
+              </div>
+
+              <slot name="actions" />
+
+              <DialogClose v-if="props.close || !!slots.close" as-child>
+                <slot name="close" :close="close" :ui="ui">
+                  <UButton
+                    v-if="props.close"
+                    :icon="closeIcon || appConfig.ui.icons.close"
+                    color="neutral"
+                    variant="ghost"
+                    :aria-label="t('modal.close')"
+                    v-bind="typeof props.close === 'object' ? props.close : {}"
+                    :class="ui.close({ class: props.ui?.close })"
+                  />
+                </slot>
+              </DialogClose>
+            </slot>
+          </div>
+
+          <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
+            <slot name="body" :close="close" />
+          </div>
+
+          <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+            <slot name="footer" :close="close" />
+          </div>
+        </slot>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>

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

@@ -0,0 +1,106 @@
+import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/modal';
+import type { ButtonProps } from '../types';
+import type { EmitsToProps, ComponentConfig } from '../types/utils';
+type Modal = ComponentConfig<typeof theme, AppConfig, 'modal'>;
+export interface ModalProps extends DialogRootProps {
+    title?: string;
+    description?: string;
+    /** The content of the modal. */
+    content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>;
+    /**
+     * Render an overlay behind the modal.
+     * @defaultValue true
+     */
+    overlay?: boolean;
+    /**
+     * Animate the modal when opening or closing.
+     * @defaultValue true
+     */
+    transition?: boolean;
+    /**
+     * When `true`, the modal will take up the full screen.
+     * @defaultValue false
+     */
+    fullscreen?: boolean;
+    /**
+     * Render the modal in a portal.
+     * @defaultValue true
+     */
+    portal?: boolean | string | HTMLElement;
+    /**
+     * Display a close button to dismiss the modal.
+     * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    close?: boolean | Partial<ButtonProps>;
+    /**
+     * The icon displayed in the close button.
+     * @defaultValue appConfig.ui.icons.close
+     * @IconifyIcon
+     */
+    closeIcon?: string;
+    /**
+     * When `false`, the modal will not close when clicking outside or pressing escape.
+     * @defaultValue true
+     */
+    dismissible?: boolean;
+    class?: any;
+    ui?: Modal['slots'];
+}
+export interface ModalEmits extends DialogRootEmits {
+    'after:leave': [];
+    'after:enter': [];
+    'close:prevent': [];
+}
+export interface ModalSlots {
+    default(props: {
+        open: boolean;
+    }): any;
+    content(props: {
+        close: () => void;
+    }): any;
+    header(props: {
+        close: () => void;
+    }): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    actions(props?: {}): any;
+    close(props: {
+        close: () => void;
+        ui: {
+            [K in keyof Required<Modal['slots']>]: (props?: Record<string, any>) => string;
+        };
+    }): any;
+    body(props: {
+        close: () => void;
+    }): any;
+    footer(props: {
+        close: () => void;
+    }): any;
+}
+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>;
+    modal: boolean;
+    transition: boolean;
+    portal: boolean | string | HTMLElement;
+    overlay: boolean;
+    dismissible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ModalSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/NavigationMenu.vue

@@ -0,0 +1,275 @@
+<script>
+import theme from "#build/ui/navigation-menu";
+</script>
+
+<script setup>
+import { computed, toRef } from "vue";
+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";
+import { pickLinkProps } from "../utils/link";
+import ULinkBase from "./LinkBase.vue";
+import ULink from "./Link.vue";
+import UAvatar from "./Avatar.vue";
+import UIcon from "./Icon.vue";
+import UBadge from "./Badge.vue";
+import UPopover from "./Popover.vue";
+import UTooltip from "./Tooltip.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  trailingIcon: { type: String, required: false },
+  externalIcon: { type: [Boolean, String], required: false, default: true },
+  items: { type: null, required: false },
+  color: { type: null, required: false },
+  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 },
+  contentOrientation: { type: null, required: false, default: "horizontal" },
+  arrow: { type: Boolean, required: false },
+  labelKey: { type: null, required: false, default: "label" },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  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 },
+  skipDelayDuration: { type: Number, required: false },
+  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 emits = defineEmits(["update:modelValue"]);
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(computed(() => ({
+  as: props.as,
+  modelValue: props.modelValue,
+  defaultValue: props.defaultValue,
+  delayDuration: props.delayDuration,
+  skipDelayDuration: props.skipDelayDuration,
+  orientation: props.orientation,
+  disableClickTrigger: props.disableClickTrigger,
+  disableHoverTrigger: props.disableHoverTrigger,
+  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: {
+    item: Object,
+    index: Number,
+    level: Number
+  }
+});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.navigationMenu || {} })({
+  orientation: props.orientation,
+  contentOrientation: props.orientation === "vertical" ? void 0 : props.contentOrientation,
+  collapsed: props.collapsed,
+  color: props.color,
+  variant: props.variant,
+  highlight: props.highlight,
+  highlightColor: props.highlightColor || props.color
+}));
+const lists = computed(
+  () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
+);
+function getAccordionDefaultValue(list, level = 0) {
+  const indexes = list.reduce((acc, item, index) => {
+    if (item.defaultOpen || item.open) {
+      acc.push(item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`));
+    }
+    return acc;
+  }, []);
+  return props.type === "single" ? indexes[0] : indexes;
+}
+</script>
+
+<template>
+  <DefineLinkTemplate v-slot="{ item, active, index }">
+    <slot :name="item.slot || 'item'" :item="item" :index="index">
+      <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index">
+        <UAvatar v-if="item.avatar" :size="item.ui?.linkLeadingAvatarSize || props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active, disabled: !!item.disabled })" />
+        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active, disabled: !!item.disabled })" />
+      </slot>
+
+      <span
+        v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'])"
+        :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
+      >
+        <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
+          {{ get(item, props.labelKey) }}
+        </slot>
+
+        <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, item.ui?.linkLabelExternalIcon], active })" />
+      </span>
+
+      <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"
+            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] })"
+          />
+
+          <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>
+      </component>
+    </slot>
+  </DefineLinkTemplate>
+
+  <DefineItemTemplate v-slot="{ item, index, level = 0 }">
+    <component
+      :is="orientation === 'vertical' && !collapsed ? AccordionItem : NavigationMenuItem"
+      as="li"
+      :value="item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`)"
+    >
+      <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 && !collapsed && item.type === 'trigger' ? {} : pickLinkProps(item)" custom>
+        <component
+          :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"
+        >
+          <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>
+          <ULinkBase v-else v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
+            <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
+          </ULinkBase>
+        </component>
+
+        <NavigationMenuContent v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])" v-bind="contentProps" :class="ui.content({ class: [props.ui?.content, item.ui?.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 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 })" />
+
+                      <div :class="ui.childLinkWrapper({ class: [props.ui?.childLinkWrapper, item.ui?.childLinkWrapper] })">
+                        <p :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })">
+                          {{ get(childItem, props.labelKey) }}
+
+                          <UIcon v-if="childItem.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" />
+                        </p>
+                        <p v-if="childItem.description" :class="ui.childLinkDescription({ class: [props.ui?.childLinkDescription, item.ui?.childLinkDescription], active: childActive })">
+                          {{ childItem.description }}
+                        </p>
+                      </div>
+                    </ULinkBase>
+                  </NavigationMenuLink>
+                </ULink>
+              </li>
+            </ul>
+          </slot>
+        </NavigationMenuContent>
+      </ULink>
+
+      <AccordionContent v-if="orientation === 'vertical' && item.children?.length && !collapsed" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
+        <AccordionRoot
+          v-bind="{
+  ...accordionProps,
+  defaultValue: getAccordionDefaultValue(item.children, level + 1)
+}"
+          as="ul"
+          :class="ui.childList({ class: props.ui?.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, childItem.ui?.childItem] })"
+          />
+        </AccordionRoot>
+      </AccordionContent>
+    </component>
+  </DefineItemTemplate>
+
+  <NavigationMenuRoot v-bind="rootProps" :data-collapsed="collapsed" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <slot name="list-leading" />
+
+    <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
+      <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] })" />
+      </component>
+
+      <div v-if="orientation === 'vertical' && listIndex < lists.length - 1" :class="ui.separator({ class: props.ui?.separator })" />
+    </template>
+
+    <slot name="list-trailing" />
+
+    <div v-if="orientation === 'horizontal'" :class="ui.viewportWrapper({ class: props.ui?.viewportWrapper })">
+      <NavigationMenuIndicator v-if="arrow" :class="ui.indicator({ class: props.ui?.indicator })">
+        <div :class="ui.arrow({ class: props.ui?.arrow })" />
+      </NavigationMenuIndicator>
+
+      <NavigationMenuViewport :class="ui.viewport({ class: props.ui?.viewport })" />
+    </div>
+  </NavigationMenuRoot>
+</template>