@bitrix24/b24ui-nuxt 0.5.11 → 0.6.0

package/dist/runtime/components/NavigationMenu.vue

@@ -1,176 +1,51 @@
-<!-- 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 { 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 = 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,12 +57,10 @@ 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 }>()
-const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: NavigationMenuItem, index: number, level?: number }>({
+})), emits);
+const contentProps = toRef(() => props.content);
+const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate();
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   props: {
     item: Object,
     index: Number,
@@ -197,12 +70,10 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: N
       default: 0
     }
   }
-})
-
-const getLabel = (item: NavigationMenuItem) => {
-  return get(item, props.labelKey as string)
-}
-
+});
+const getLabel = (item) => {
+  return get(item, props.labelKey);
+};
 const b24ui = computed(() => navigationMenu({
   orientation: props.orientation,
   contentOrientation: props.contentOrientation,
@@ -211,35 +82,30 @@ 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') && (getLabel(item) || !!slots[(item.slot ? `${item.slot}-label` : 'item-label') as keyof NavigationMenuSlots<T>])"
+          v-if="(!collapsed || orientation !== 'vertical') && (getLabel(item) || !!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">
+          <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
             {{ getLabel(item) }}
           </slot>
 
@@ -250,11 +116,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
@@ -268,8 +134,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>
@@ -279,19 +145,19 @@ const lists = computed<NavigationMenuItem[][]>(() =>
 
   <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"
@@ -303,12 +169,12 @@ const lists = computed<NavigationMenuItem[][]>(() =>
         </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>