@bitrix24/b24ui-nuxt 0.5.3 → 0.5.5

package/dist/runtime/components/InputMenu.vue

@@ -1,14 +1,23 @@
 <script lang="ts">
 import type { InputHTMLAttributes } from 'vue'
 import type { VariantProps } from 'tailwind-variants'
-import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxContentEmits, ComboboxArrowProps, AcceptableValue } from 'reka-ui'
+import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxContentEmits, ComboboxArrowProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/b24ui/input-menu'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import { tv } from '../utils/tv'
 import type { AvatarProps, ChipProps, InputProps, IconComponent } from '../types'
-import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey, EmitsToProps } from '../types/utils'
+import type {
+  AcceptableValue,
+  ArrayOrNested,
+  GetItemKeys,
+  GetModelValue,
+  GetModelValueEmits,
+  NestedItem,
+  PartialString,
+  EmitsToProps
+} from '../types/utils'
 
 const appConfigInputMenu = _appConfig as AppConfig & { b24ui: { inputMenu: Partial<typeof theme> } }
 
@@ -16,7 +25,7 @@ const inputMenu = tv({ extend: tv(theme), ...(appConfigInputMenu.b24ui?.inputMen
 
 type InputMenuVariants = VariantProps<typeof inputMenu>
 
-export interface InputMenuItem {
+interface _InputMenuItem {
   label?: string
   /**
    * Display an icon on the left side.
@@ -31,11 +40,14 @@ export interface InputMenuItem {
    * @defaultValue 'item'
    */
   type?: 'label' | 'separator' | 'item'
+  value?: string | number
   disabled?: boolean
   onSelect?(e?: Event): void
+  [key: string]: any
 }
+export type InputMenuItem = _InputMenuItem | AcceptableValue | boolean
 
-export interface InputMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<InputMenuItem | AcceptableValue | boolean> = MaybeArrayOfArray<InputMenuItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'highlightOnHover'>, UseComponentIconsProps {
+export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'highlightOnHover'>, UseComponentIconsProps {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -128,21 +140,21 @@ export interface InputMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends Ma
    * When `items` is an array of objects, select the field to use as the value instead of the object itself.
    * @defaultValue undefined
    */
-  valueKey?: V
+  valueKey?: VK
   /**
    * When `items` is an array of objects, select the field to use as the label.
    * @defaultValue 'label'
    */
-  labelKey?: V
-  items?: I
+  labelKey?: keyof NestedItem<T>
+  items?: T
   /**
    * The value of the InputMenu when initially rendered. Use when you do not need to control the state of the InputMenu
    */
-  defaultValue?: SelectModelValue<T, V, M>
+  defaultValue?: GetModelValue<T, VK, M>
   /**
    * The controlled value of the InputMenu. Can be binded-with with `v-model`
    */
-  modelValue?: SelectModelValue<T, V, M>
+  modelValue?: GetModelValue<T, VK, M>
   /**
    * Whether multiple options can be selected or not
    * @defaultValue false
@@ -177,18 +189,28 @@ export interface InputMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends Ma
   b24ui?: PartialString<typeof inputMenu.slots>
 }
 
-export type InputMenuEmits<T, V, M extends boolean> = Omit<ComboboxRootEmits<T>, 'update:modelValue'> & {
+export type InputMenuEmits<A extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<A> | undefined, M extends boolean> = Pick<ComboboxRootEmits, 'update:open'> & {
   change: [payload: Event]
   blur: [payload: FocusEvent]
   focus: [payload: FocusEvent]
   create: [item: string]
-} & SelectModelValueEmits<T, V, M>
-
-type SlotProps<T> = (props: { item: T, index: number }) => any
-
-export interface InputMenuSlots<T, M extends boolean> {
-  'leading'(props: { modelValue?: M extends true ? T[] : T, open: boolean, b24ui: any }): any
-  'trailing'(props: { modelValue?: M extends true ? T[] : T, open: boolean, b24ui: any }): any
+  /** Event handler when highlighted element changes. */
+  highlight: [payload: {
+    ref: HTMLElement
+    value: GetModelValue<A, VK, M>
+  } | undefined]
+} & GetModelValueEmits<A, VK, M>
+
+type SlotProps<T extends InputMenuItem> = (props: { item: T, index: number }) => any
+
+export interface InputMenuSlots<
+  A extends ArrayOrNested<InputMenuItem> = ArrayOrNested<InputMenuItem>,
+  VK extends GetItemKeys<A> | undefined = undefined,
+  M extends boolean = false,
+  T extends NestedItem<A> = NestedItem<A>
+> {
+  'leading'(props: { modelValue?: GetModelValue<A, VK, M>, open: boolean, b24ui: ReturnType<typeof inputMenu> }): any
+  'trailing'(props: { modelValue?: GetModelValue<A, VK, M>, open: boolean, b24ui: ReturnType<typeof inputMenu> }): any
   'empty'(props: { searchTerm?: string }): any
   'item': SlotProps<T>
   'item-leading': SlotProps<T>
@@ -200,7 +222,7 @@ export interface InputMenuSlots<T, M extends boolean> {
 }
 </script>
 
-<script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<InputMenuItem | AcceptableValue | boolean> = MaybeArrayOfArray<InputMenuItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false">
+<script setup lang="ts" generic="T extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false">
 import { computed, ref, toRef, onMounted, toRaw } from 'vue'
 import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits, useFilter } from 'reka-ui'
 import { defu } from 'defu'
@@ -210,21 +232,21 @@ import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
 import { useLocale } from '../composables/useLocale'
-import { get, compare } from '../utils'
+import { compare, get, isArrayOfArray } from '../utils'
 import icons from '../dictionary/icons'
 import B24Avatar from './Avatar.vue'
 import B24Chip from './Chip.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<InputMenuProps<T, I, V, M>>(), {
+const props = withDefaults(defineProps<InputMenuProps<T, VK, M>>(), {
   type: 'text',
   autofocusDelay: 0,
   portal: true,
   labelKey: 'label' as never
 })
-const emits = defineEmits<InputMenuEmits<T, V, M>>()
-const slots = defineSlots<InputMenuSlots<T, M>>()
+const emits = defineEmits<InputMenuEmits<T, VK, M>>()
+const slots = defineSlots<InputMenuSlots<T, VK, M>>()
 
 const searchTerm = defineModel<string>('searchTerm', { default: '' })
 
@@ -272,9 +294,15 @@ function displayValue(value: T): string {
   return item && (typeof item === 'object' ? get(item, props.labelKey as string) : item)
 }
 
-const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as InputMenuItem[][] : [])
+const groups = computed<InputMenuItem[][]>(() =>
+  props.items?.length
+    ? isArrayOfArray(props.items)
+      ? props.items
+      : [props.items]
+    : []
+)
 // eslint-disable-next-line vue/no-dupe-keys
-const items = computed(() => groups.value.flatMap(group => group) as T[])
+const items = computed(() => groups.value.flatMap(group => group))
 
 const filteredGroups = computed(() => {
   if (props.ignoreFilter || !searchTerm.value) {
@@ -283,9 +311,9 @@ const filteredGroups = computed(() => {
 
   const fields = Array.isArray(props.filterFields) ? props.filterFields : [props.labelKey] as string[]
 
-  return groups.value.map(items => items.filter((item) => {
-    if (typeof item !== 'object') {
-      return contains(item, searchTerm.value)
+  return groups.value.map(group => group.filter((item) => {
+    if (typeof item !== 'object' || item === null) {
+      return contains(String(item), searchTerm.value)
     }
 
     if (item.type && ['label', 'separator'].includes(item.type)) {
@@ -293,19 +321,25 @@ const filteredGroups = computed(() => {
     }
 
     return fields.some(field => contains(get(item, field), searchTerm.value))
-  })).filter(group => group.filter(item => !item.type || !['label', 'separator'].includes(item.type)).length > 0)
+  })).filter(group => group.filter(item =>
+    /**
+     * @memo fix not obj
+     * @see selectMenu
+     */
+    typeof item !== 'object' || (isInputItem(item) && (!item.type || !['label', 'separator'].includes(item.type)))
+  ).length > 0)
 })
-const filteredItems = computed(() => filteredGroups.value.flatMap(group => group) as T[])
+const filteredItems = computed(() => filteredGroups.value.flatMap(group => group))
 
 const createItem = computed(() => {
   if (!props.createItem || !searchTerm.value) {
     return false
   }
 
-  const newItem = props.valueKey ? { [props.valueKey]: searchTerm.value } as T : searchTerm.value
+  const newItem = props.valueKey ? { [props.valueKey]: searchTerm.value } as NestedItem<T> : searchTerm.value
 
   if ((typeof props.createItem === 'object' && props.createItem.when === 'always') || props.createItem === 'always') {
-    return !filteredItems.value.find(item => compare(item, newItem, props.valueKey))
+    return !filteredItems.value.find(item => compare(item, newItem, String(props.valueKey)))
   }
 
   return !filteredItems.value.length
@@ -360,12 +394,16 @@ function onUpdateOpen(value: boolean) {
 
 function onRemoveTag(event: any) {
   if (props.multiple) {
-    const modelValue = props.modelValue as SelectModelValue<T, V, true>
+    const modelValue = props.modelValue as GetModelValue<T, VK, true>
     const filteredValue = modelValue.filter(value => !isEqual(value, event))
-    emits('update:modelValue', filteredValue as SelectModelValue<T, V, M>)
+    emits('update:modelValue', filteredValue as GetModelValue<T, VK, M>)
   }
 }
 
+function isInputItem(item: InputMenuItem): item is _InputMenuItem {
+  return typeof item === 'object' && item !== null
+}
+
 defineExpose({
   inputRef
 })
@@ -424,13 +462,13 @@ defineExpose({
       >
         <TagsInputItem v-for="(item, index) in tags" :key="index" :value="(item as string)" :class="b24ui.tagsItem({ class: props.b24ui?.tagsItem })">
           <TagsInputItemText :class="b24ui.tagsItemText({ class: props.b24ui?.tagsItemText })">
-            <slot name="tags-item-text" :item="(item as T)" :index="index">
+            <slot name="tags-item-text" :item="(item as NestedItem<T>)" :index="index">
               {{ displayValue(item as T) }}
             </slot>
           </TagsInputItemText>
 
           <TagsInputItemDelete :class="b24ui.tagsItemDelete({ class: props.b24ui?.tagsItemDelete })" :disabled="disabled">
-            <slot name="tags-item-delete" :item="(item as T)" :index="index">
+            <slot name="tags-item-delete" :item="(item as NestedItem<T>)" :index="index">
               <Component
                 :is="deleteIcon || icons.close"
                 :class="b24ui.tagsItemDeleteIcon({ class: props.b24ui?.tagsItemDeleteIcon })"
@@ -464,7 +502,7 @@ defineExpose({
       />
 
       <span v-if="isLeading || !!avatar || !!slots.leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
-        <slot name="leading" :model-value="(modelValue as M extends true ? T[] : T)" :open="open" :b24ui="b24ui">
+        <slot name="leading" :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open" :b24ui="b24ui">
           <Component
             :is="leadingIconName"
             v-if="isLeading && leadingIconName"
@@ -475,7 +513,7 @@ defineExpose({
       </span>
 
       <ComboboxTrigger v-if="isTrailing || !!slots.trailing" :class="b24ui.trailing({ class: props.b24ui?.trailing })">
-        <slot name="trailing" :model-value="(modelValue as M extends true ? T[] : T)" :open="open" :b24ui="b24ui">
+        <slot name="trailing" :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open" :b24ui="b24ui">
           <Component
             :is="trailingIconName"
             v-if="trailingIconName"
@@ -498,29 +536,29 @@ defineExpose({
 
           <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="b24ui.group({ class: props.b24ui?.group })">
             <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-              <ComboboxLabel v-if="item?.type === 'label'" :class="b24ui.label({ class: props.b24ui?.label })">
+              <ComboboxLabel v-if="isInputItem(item) && item.type === 'label'" :class="b24ui.label({ class: props.b24ui?.label })">
                 {{ get(item, props.labelKey as string) }}
               </ComboboxLabel>
 
-              <ComboboxSeparator v-else-if="item?.type === 'separator'" :class="b24ui.separator({ class: props.b24ui?.separator })" />
+              <ComboboxSeparator v-else-if="isInputItem(item) && item.type === 'separator'" :class="b24ui.separator({ class: props.b24ui?.separator })" />
 
               <ComboboxItem
                 v-else
-                :class="b24ui.item({ class: props.b24ui?.item, colorItem: item?.color })"
-                :disabled="item.disabled"
-                :value="valueKey && typeof item === 'object' ? get(item, props.valueKey as string) : item"
-                @select="item.onSelect"
+                :class="b24ui.item({ class: props.b24ui?.item, colorItem: isInputItem(item) ? item?.color : undefined })"
+                :disabled="isInputItem(item) && item.disabled"
+                :value="props.valueKey && isInputItem(item) ? get(item, String(props.valueKey)) : item"
+                @select="isInputItem(item) && item.onSelect"
               >
-                <slot name="item" :item="(item as T)" :index="index">
-                  <slot name="item-leading" :item="(item as T)" :index="index">
+                <slot name="item" :item="(item as NestedItem<T>)" :index="index">
+                  <slot name="item-leading" :item="(item as NestedItem<T>)" :index="index">
                     <Component
                       :is="item.icon"
-                      v-if="item.icon"
+                      v-if="isInputItem(item) && item.icon"
                       :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon, colorItem: item?.color })"
                     />
-                    <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.itemLeadingAvatar({ class: props.b24ui?.itemLeadingAvatar, colorItem: item?.color })" />
+                    <B24Avatar v-else-if="isInputItem(item) && item.avatar" :size="((props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.itemLeadingAvatar({ class: props.b24ui?.itemLeadingAvatar, colorItem: item?.color })" />
                     <B24Chip
-                      v-else-if="item.chip"
+                      v-else-if="isInputItem(item) && item.chip"
                       :size="((props.b24ui?.itemLeadingChipSize || b24ui.itemLeadingChipSize()) as ChipProps['size'])"
                       inset
                       standalone
@@ -530,18 +568,18 @@ defineExpose({
                   </slot>
 
                   <span :class="b24ui.itemLabel({ class: props.b24ui?.itemLabel })">
-                    <slot name="item-label" :item="(item as T)" :index="index">
-                      {{ typeof item === 'object' ? get(item, props.labelKey as string) : item }}
+                    <slot name="item-label" :item="(item as NestedItem<T>)" :index="index">
+                      {{ isInputItem(item) ? get(item, props.labelKey as string) : item }}
                     </slot>
                   </span>
 
-                  <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing, colorItem: item?.color })">
-                    <slot name="item-trailing" :item="(item as T)" :index="index" />
+                  <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing, colorItem: isInputItem(item) ? item?.color : undefined })">
+                    <slot name="item-trailing" :item="(item as NestedItem<T>)" :index="index" />
 
                     <ComboboxItemIndicator as-child>
                       <Component
                         :is="selectedIcon || icons.check"
-                        :class="b24ui.itemTrailingIcon({ class: props.b24ui?.itemTrailingIcon, colorItem: item?.color })"
+                        :class="b24ui.itemTrailingIcon({ class: props.b24ui?.itemTrailingIcon, colorItem: isInputItem(item) ? item?.color : undefined })"
                       />
                     </ComboboxItemIndicator>
                   </span>

package/dist/runtime/components/Link.vue

@@ -104,6 +104,7 @@ defineOptions({ inheritAttrs: false })
 const props = withDefaults(defineProps<LinkProps>(), {
   as: 'button',
   type: 'button',
+  ariaCurrentValue: 'page',
   active: undefined,
   isAction: false,
   activeClass: '',
@@ -190,6 +191,7 @@ function resolveLinkClass({ route, isActive, isExactActive }: any) {
       <slot
         v-bind="{
           ...$attrs,
+          ...(exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {}),
           as,
           type,
           disabled,
@@ -206,6 +208,7 @@ function resolveLinkClass({ route, isActive, isExactActive }: any) {
       v-else
       v-bind="{
         ...$attrs,
+        ...(exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {}),
         as,
         type,
         disabled,

package/dist/runtime/components/LinkBase.vue

@@ -10,6 +10,7 @@ export interface LinkBaseProps {
   navigate?: (e: MouseEvent) => void
   target?: LinkProps['target']
   rel?: LinkProps['rel']
+  active?: boolean
   isExternal?: boolean
 }
 </script>

package/dist/runtime/components/Modal.vue

@@ -82,7 +82,7 @@ export interface ModalSlots {
   header(props?: {}): any
   title(props?: {}): any
   description(props?: {}): any
-  close(props: { b24ui: any }): any
+  close(props: { b24ui: ReturnType<typeof modal> }): any
   body(props?: {}): any
   footer(props?: {}): any
 }

package/dist/runtime/components/NavigationMenu.vue

@@ -7,15 +7,23 @@ 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 { DynamicSlots, MaybeArrayOfArray, MaybeArrayOfArrayItem, PartialString, EmitsToProps } from '../types/utils'
+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, 'children' | 'type'> {
+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'> {
@@ -48,11 +56,12 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
    */
   viewportRtl?: boolean
   onSelect?(e: Event): void
+  [key: string]: any
 }
 
 type NavigationMenuVariants = VariantProps<typeof navigationMenu>
 
-export interface NavigationMenuProps<T> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'> {
+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'
@@ -116,30 +125,33 @@ export interface NavigationMenuProps<T> extends Pick<NavigationMenuRootProps, 'm
    * The key used to get the label from the item.
    * @defaultValue 'label'
    */
-  labelKey?: string
+  labelKey?: keyof NestedItem<T>
   class?: any
   b24ui?: PartialString<typeof navigationMenu.slots>
 }
 
 export interface NavigationMenuEmits extends NavigationMenuRootEmits {}
 
-type SlotProps<T> = (props: { item: T, index: number, active?: boolean }) => any
+type SlotProps<T extends NavigationMenuItem> = (props: { item: T, index: number, active?: boolean }) => any
 
-export type NavigationMenuSlots<T extends { slot?: string }> = {
+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<T, SlotProps<T>>
+} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing' | 'content', { index: number, active?: boolean }>
 
 </script>
 
-<script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<NavigationMenuItem>">
+<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 } from '../utils'
+import { get, isArrayOfArray } from '../utils'
 import { pickLinkProps } from '../utils/link'
 import icons from '../dictionary/icons'
 import B24LinkBase from './LinkBase.vue'
@@ -148,7 +160,7 @@ import B24Avatar from './Avatar.vue'
 import B24Badge from './Badge.vue'
 import B24Collapsible from './Collapsible.vue'
 
-const props = withDefaults(defineProps<NavigationMenuProps<I>>(), {
+const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {
   orientation: 'horizontal',
   contentOrientation: 'vertical',
   externalIcon: true,
@@ -174,8 +186,14 @@ const rootProps = useForwardPropsEmits(computed(() => ({
 
 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 }>({
+const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate<
+  { item: NavigationMenuItem, index: number, active?: boolean },
+  NavigationMenuSlots<T>
+>()
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<
+  { item: NavigationMenuItem, index: number, level?: number },
+  NavigationMenuSlots<T>
+>({
   props: {
     item: Object,
     index: Number,
@@ -193,14 +211,20 @@ const b24ui = computed(() => navigationMenu({
   highlightColor: props.highlightColor || props.color
 }))
 
-const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as T[][] : [])
+const lists = computed<NavigationMenuItem[][]>(() =>
+  props.items?.length
+    ? isArrayOfArray(props.items)
+      ? props.items
+      : [props.items]
+    : []
+)
 </script>
 
 <template>
   <DefineLinkTemplate v-slot="{ item, active, index }">
-    <slot :name="item.slot || 'item'" :item="(item as T)" :index="index">
+    <slot :name="((item.slot || 'item') as keyof NavigationMenuSlots<T>)" :item="item" :index="index">
       <span :class="b24ui.linkLabelWrapper({ class: props.b24ui?.linkLabelWrapper, active })">
-        <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="(item as T)" :active="active" :index="index">
+        <slot :name="((item.slot ? `${item.slot}-leading` : 'item-leading') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
           <Component
             :is="item.icon"
             v-if="item.icon"
@@ -210,10 +234,10 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
         </slot>
 
         <span
-          v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'])"
+          v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label` : 'item-label') as keyof NavigationMenuSlots<T>])"
           :class="b24ui.linkLabel({ class: props.b24ui?.linkLabel, active })"
         >
-          <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="(item as T)" :active="active" :index="index">
+          <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>
 
@@ -224,11 +248,11 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
           />
         </span>
       </span>
-      <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 as T)" :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') 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">
           <Component
             :is="item.trailingIcon || trailingIcon || icons.chevronDown"
-            v-if="(orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])) || (orientation === 'vertical' && item.children?.length)"
+            v-if="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length)"
             :class="b24ui.linkTrailingIcon({ class: props.b24ui?.linkTrailingIcon, active })"
           />
           <Component
@@ -261,28 +285,28 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
       :open="item.open"
     >
       <div v-if="orientation === 'vertical' && item.type === 'label'" :class="b24ui.label({ class: props.b24ui?.label })">
-        <ReuseLinkTemplate :item="(item as T)" :index="index" />
+        <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>
         <component
-          :is="(orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])) ? NavigationMenuTrigger : NavigationMenuLink"
+          :is="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) ? 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 })">
-            <ReuseLinkTemplate :item="(item as T)" :active="active || item.active" :index="index" />
+            <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'])"
+          v-if="orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])"
           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'" :item="(item as T)" :active="active" :index="index">
+          <slot :name="((item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>)" :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>