@bitrix24/b24ui-nuxt 0.5.8 → 0.5.10

package/dist/runtime/components/NavigationMenu.vue

@@ -1,176 +1,122 @@
-<!-- eslint-disable vue/block-tag-newline -->
-<script lang="ts">
-import type { VariantProps } from 'tailwind-variants'
-import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, CollapsibleRootProps } from 'reka-ui'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/b24ui/navigation-menu'
-import { tv } from '../utils/tv'
-import type { AvatarProps, BadgeProps, LinkProps, IconComponent } from '../types'
-import type {
-  ArrayOrNested,
-  DynamicSlots,
-  MergeTypes,
-  NestedItem,
-  PartialString,
-  EmitsToProps
-} from '../types/utils'
-
-const appConfigNavigationMenu = _appConfig as AppConfig & { b24ui: { navigationMenu: Partial<typeof theme> } }
-
-const navigationMenu = tv({ extend: tv(theme), ...(appConfigNavigationMenu.b24ui?.navigationMenu || {}) })
-
-export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'type'> {
-  /** Description is only used when `orientation` is `horizontal`. */
-  description?: string
-  [key: string]: any
-}
-
-export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
-  label?: string
-  /**
-   * @IconComponent
-   */
-  icon?: IconComponent
-  avatar?: AvatarProps
-  /**
-   * Display a badge on the item.
-   * `{ size: 'sm', color: 'neutral', variant: 'outline' }`{lang="ts-type"}
-   */
-  badge?: string | number | BadgeProps
-  /**
-   * @IconComponent
-   */
-  trailingIcon?: IconComponent
-  /**
-   * The type of the item.
-   * The `label` type only works on `vertical` orientation.
-   * @defaultValue 'link'
-   */
-  type?: 'label' | 'link'
-  slot?: string
-  value?: string
-  children?: NavigationMenuChildItem[]
-  /**
-   * With orientation=`horizontal` if `true` it will position the dropdown menu correctly
-   */
-  viewportRtl?: boolean
-  onSelect?(e: Event): void
-  [key: string]: any
-}
-
-type NavigationMenuVariants = VariantProps<typeof navigationMenu>
-
-export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'> {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  /**
-   * The icon displayed to open the menu.
-   * @defaultValue icons.chevronDown
-   * @IconComponent
-   */
-  trailingIcon?: IconComponent
-  /**
-   * The icon displayed when the item is an external link.
-   * Set to `false` to hide the external icon.
-   * @defaultValue icons.external
-   * @IconComponent
-   */
-  externalIcon?: boolean | IconComponent
-  items?: T
-  /**
-   * @defaultValue 'primary'
-   */
-  color?: NavigationMenuVariants['color']
-  /**
-   * @defaultValue 'pill'
-   */
-  variant?: NavigationMenuVariants['variant']
-  /**
-   * The orientation of the menu.
-   * @defaultValue 'horizontal'
-   */
-  orientation?: NavigationMenuRootProps['orientation']
-  /**
-   * Collapse the navigation menu to only show icons.
-   * Only works when `orientation` is `vertical`.
-   * @defaultValue false
-   */
-  collapsed?: boolean
-  /** Display a line next to the active item. */
-  highlight?: boolean
-  /**
-   * @defaultValue 'primary'
-   */
-  highlightColor?: NavigationMenuVariants['highlightColor']
-  /**
-   * The content of the menu.
-   */
-  content?: Omit<NavigationMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<NavigationMenuContentEmits>>
-  /**
-   * The orientation of the content.
-   * Only works when `orientation` is `horizontal`.
-   * @defaultValue 'vertical'
-   */
-  contentOrientation?: NavigationMenuVariants['contentOrientation']
-  /**
-   * Display an arrow alongside the menu.
-   * @defaultValue false
-   */
-  arrow?: boolean
-  /**
-   * The key used to get the label from the item.
-   * @defaultValue 'label'
-   */
-  labelKey?: keyof NestedItem<T>
-  class?: any
-  b24ui?: PartialString<typeof navigationMenu.slots>
-}
-
-export interface NavigationMenuEmits extends NavigationMenuRootEmits {}
-
-type SlotProps<T extends NavigationMenuItem> = (props: { item: T, index: number, active?: boolean }) => any
-
-export type NavigationMenuSlots<
-  A extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>,
-  T extends NestedItem<A> = NestedItem<A>
-> = {
-  'item': SlotProps<T>
-  'item-leading': SlotProps<T>
-  'item-label': SlotProps<T>
-  'item-trailing': SlotProps<T>
-  'item-content': SlotProps<T>
-} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing' | 'content', { index: number, active?: boolean }>
-
+<script>
+import _appConfig from "#build/app.config";
+import theme from "#build/b24ui/navigation-menu";
+import { tv } from "../utils/tv";
+const appConfigNavigationMenu = _appConfig;
+const navigationMenu = tv({ extend: tv(theme), ...appConfigNavigationMenu.b24ui?.navigationMenu || {} });
 </script>
 
-<script setup lang="ts" generic="T extends ArrayOrNested<NavigationMenuItem>">
-import { computed, toRef } from 'vue'
-import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, useForwardPropsEmits } from 'reka-ui'
-import { createReusableTemplate } from '@vueuse/core'
-import { get, isArrayOfArray } from '../utils'
-import { pickLinkProps } from '../utils/link'
-import icons from '../dictionary/icons'
-import B24LinkBase from './LinkBase.vue'
-import B24Link from './Link.vue'
-import B24Avatar from './Avatar.vue'
-import B24Badge from './Badge.vue'
-import B24Collapsible from './Collapsible.vue'
-
-const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {
-  orientation: 'horizontal',
-  contentOrientation: 'vertical',
-  externalIcon: true,
-  delayDuration: 0,
-  unmountOnHide: true,
-  labelKey: 'label'
-})
-const emits = defineEmits<NavigationMenuEmits>()
-const slots = defineSlots<NavigationMenuSlots<T>>()
-
+<script setup>
+import { computed, toRef } from "vue";
+import { useForwardPropsEmits } from "reka-ui";
+import { createReusableTemplate } from "@vueuse/core";
+import { isArrayOfArray } from "../utils";
+const props = defineProps({
+  as: {
+    type: null,
+    required: false
+  },
+  trailingIcon: {
+    type: [Function, Object],
+    required: false
+  },
+  externalIcon: {
+    type: [Boolean, Function, Object],
+    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
+  },
+  highlight: {
+    type: Boolean,
+    required: false
+  },
+  highlightColor: {
+    type: null,
+    required: false
+  },
+  content: {
+    type: Object,
+    required: false
+  },
+  contentOrientation: {
+    type: null,
+    required: false,
+    default: "vertical"
+  },
+  arrow: {
+    type: Boolean,
+    required: false
+  },
+  labelKey: {
+    type: null,
+    required: false,
+    default: "label"
+  },
+  class: {
+    type: null,
+    required: false
+  },
+  b24ui: {
+    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
+  }
+});
+const emits = defineEmits(["update:modelValue"]);
+const slots = defineSlots();
 const rootProps = useForwardPropsEmits(computed(() => ({
   as: props.as,
   modelValue: props.modelValue,
@@ -182,25 +128,20 @@ const rootProps = useForwardPropsEmits(computed(() => ({
   disableHoverTrigger: props.disableHoverTrigger,
   disablePointerLeaveClose: props.disablePointerLeaveClose,
   unmountOnHide: props.unmountOnHide
-})), emits)
-
-const contentProps = toRef(() => props.content)
-
-const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate<
-  { item: NavigationMenuItem, index: number, active?: boolean },
-  NavigationMenuSlots<T>
->()
-const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<
-  { item: NavigationMenuItem, index: number, level?: number },
-  NavigationMenuSlots<T>
->({
+})), emits);
+const contentProps = toRef(() => props.content);
+const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate();
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   props: {
     item: Object,
     index: Number,
-    level: Number
+    // @memo problem compile
+    level: {
+      type: Number,
+      default: 0
+    }
   }
-})
-
+});
 const b24ui = computed(() => navigationMenu({
   orientation: props.orientation,
   contentOrientation: props.contentOrientation,
@@ -209,36 +150,31 @@ const b24ui = computed(() => navigationMenu({
   variant: props.variant,
   highlight: props.highlight,
   highlightColor: props.highlightColor || props.color
-}))
-
-const lists = computed<NavigationMenuItem[][]>(() =>
-  props.items?.length
-    ? isArrayOfArray(props.items)
-      ? props.items
-      : [props.items]
-    : []
-)
+}));
+const lists = computed(
+  () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
+);
 </script>
 
 <template>
   <DefineLinkTemplate v-slot="{ item, active, index }">
-    <slot :name="((item.slot || 'item') as keyof NavigationMenuSlots<T>)" :item="item" :index="index">
+    <slot :name="item.slot || 'item'" :item="item" :index="index">
       <span :class="b24ui.linkLabelWrapper({ class: props.b24ui?.linkLabelWrapper, active })">
-        <slot :name="((item.slot ? `${item.slot}-leading` : 'item-leading') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
+        <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index">
           <Component
             :is="item.icon"
             v-if="item.icon"
             :class="b24ui.linkLeadingIcon({ class: props.b24ui?.linkLeadingIcon, active, disabled: !!item.disabled })"
           />
-          <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.linkLeadingAvatar({ class: props.b24ui?.linkLeadingAvatar, active, disabled: !!item.disabled })" />
+          <B24Avatar v-else-if="item.avatar" :size="props.b24ui?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()" v-bind="item.avatar" :class="b24ui.linkLeadingAvatar({ class: props.b24ui?.linkLeadingAvatar, active, disabled: !!item.disabled })" />
         </slot>
 
         <span
-          v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label` : 'item-label') as keyof NavigationMenuSlots<T>])"
+          v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'])"
           :class="b24ui.linkLabel({ class: props.b24ui?.linkLabel, active })"
         >
-          <slot :name="((item.slot ? `${item.slot}-label` : 'item-label') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
-            {{ get(item, props.labelKey as string) }}
+          <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
+            {{ get(item, props.labelKey) }}
           </slot>
 
           <Component
@@ -248,11 +184,11 @@ const lists = computed<NavigationMenuItem[][]>(() =>
           />
         </span>
       </span>
-      <span v-if="(!collapsed || orientation !== 'vertical') && (item.badge || (orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[(item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>])" :class="b24ui.linkTrailing({ class: props.b24ui?.linkTrailing })">
-        <slot :name="((item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
+      <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="b24ui.linkTrailing({ class: props.b24ui?.linkTrailing })">
+        <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
           <Component
             :is="item.trailingIcon || trailingIcon || icons.chevronDown"
-            v-if="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length)"
+            v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length"
             :class="b24ui.linkTrailingIcon({ class: props.b24ui?.linkTrailingIcon, active })"
           />
           <Component
@@ -266,8 +202,8 @@ const lists = computed<NavigationMenuItem[][]>(() =>
             color="danger"
             depth="dark"
             :use-fill="true"
-            :size="((props.b24ui?.linkTrailingBadgeSize || b24ui.linkTrailingBadgeSize()) as BadgeProps['size'])"
-            v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
+            :size="props.b24ui?.linkTrailingBadgeSize || b24ui.linkTrailingBadgeSize()"
+            v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
             :class="b24ui.linkTrailingBadge({ class: props.b24ui?.linkTrailingBadge })"
           />
         </slot>
@@ -275,38 +211,38 @@ const lists = computed<NavigationMenuItem[][]>(() =>
     </slot>
   </DefineLinkTemplate>
 
-  <DefineItemTemplate v-slot="{ item, index, level = 0 }">
+  <DefineItemTemplate v-slot="{ item, index, level }">
     <component
-      :is="(orientation === 'vertical' && item.children?.length && !collapsed) ? B24Collapsible : NavigationMenuItem"
+      :is="orientation === 'vertical' && item.children?.length && !collapsed ? B24Collapsible : NavigationMenuItem"
       as="li"
       :value="item.value || String(index)"
       :default-open="item.defaultOpen"
-      :unmount-on-hide="(orientation === 'vertical' && item.children?.length && !collapsed) ? unmountOnHide : undefined"
+      :unmount-on-hide="orientation === 'vertical' && item.children?.length && !collapsed ? unmountOnHide : void 0"
       :open="item.open"
     >
       <div v-if="orientation === 'vertical' && item.type === 'label'" :class="b24ui.label({ class: props.b24ui?.label })">
         <ReuseLinkTemplate :item="item" :index="index" />
       </div>
-      <B24Link v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="(orientation === 'vertical' && item.children?.length && !collapsed) ? {} : pickLinkProps(item as Omit<NavigationMenuItem, 'type'>)" custom>
+      <B24Link v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="orientation === 'vertical' && item.children?.length && !collapsed ? {} : pickLinkProps(item)" custom>
         <component
-          :is="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) ? NavigationMenuTrigger : NavigationMenuLink"
+          :is="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) ? NavigationMenuTrigger : NavigationMenuLink"
           as-child
           :active="active || item.active"
           :disabled="item.disabled"
           @select="item.onSelect"
         >
-          <B24LinkBase v-bind="slotProps" :class="b24ui.link({ class: [props.b24ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
+          <B24LinkBase v-bind="slotProps" :class="b24ui.link({ class: [props.b24ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || (level || 0) > 0 })">
             <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
           </B24LinkBase>
         </component>
 
         <NavigationMenuContent
-          v-if="orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])"
+          v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])"
           v-bind="contentProps"
           :data-viewport="item.viewportRtl ? 'rtl' : 'ltr'"
           :class="b24ui.content({ class: props.b24ui?.content })"
         >
-          <slot :name="((item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
+          <slot :name="item.slot ? `${item.slot}-content` : 'item-content'" :item="item" :active="active" :index="index">
             <ul :class="b24ui.childList({ class: props.b24ui?.childList })">
               <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="b24ui.childItem({ class: props.b24ui?.childItem })">
                 <B24Link v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
@@ -320,7 +256,7 @@ const lists = computed<NavigationMenuItem[][]>(() =>
 
                       <div :class="b24ui.childLinkWrapper({ class: props.b24ui?.childLinkWrapper })">
                         <p :class="b24ui.childLinkLabel({ class: props.b24ui?.childLinkLabel, active: childActive })">
-                          {{ get(childItem, props.labelKey as string) }}
+                          {{ get(childItem, props.labelKey) }}
 
                           <Component
                             :is="typeof externalIcon === 'string' ? externalIcon : icons.external"
@@ -348,7 +284,7 @@ const lists = computed<NavigationMenuItem[][]>(() =>
             :key="childIndex"
             :item="childItem"
             :index="childIndex"
-            :level="level + 1"
+            :level="(level || 0) + 1"
             :class="b24ui.childItem({ class: props.b24ui?.childItem })"
           />
         </ul>