fix(components): improve generic types (#3331)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2026-01-18 22:11:43 +01:00 · 2025-03-24 21:38:13 +01:00
parent 370054b20c
commit b9983549a4
106 changed files with 1203 additions and 535 deletions
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -1,20 +1,29 @@
 <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/ui/input-menu'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import { tv } from '../utils/tv'
 import type { AvatarProps, ChipProps, InputProps } 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 & { ui: { inputMenu: Partial<typeof theme> } }

 const inputMenu = tv({ extend: tv(theme), ...(appConfigInputMenu.ui?.inputMenu || {}) })

-export interface InputMenuItem {
+interface _InputMenuItem {
  label?: string
  /**
   * @IconifyIcon
@@ -27,13 +36,16 @@ 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

 type InputMenuVariants = VariantProps<typeof inputMenu>

-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'
@@ -96,17 +108,17 @@ 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. */
  multiple?: M & boolean
  /** Highlight the ring color like a focus state. */
@@ -130,18 +142,28 @@ export interface InputMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends Ma
  ui?: 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>
+  /** Event handler when highlighted element changes. */
+  highlight: [payload: {
+    ref: HTMLElement
+    value: GetModelValue<A, VK, M>
+  } | undefined]
+} & GetModelValueEmits<A, VK, M>

-type SlotProps<T> = (props: { item: T, index: number }) => any
+type SlotProps<T extends InputMenuItem> = (props: { item: T, index: number }) => any

-export interface InputMenuSlots<T, M extends boolean> {
-  'leading'(props: { modelValue?: M extends true ? T[] : T, open: boolean, ui: any }): any
-  'trailing'(props: { modelValue?: M extends true ? T[] : T, open: boolean, ui: any }): 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, ui: ReturnType<typeof inputMenu> }): any
+  'trailing'(props: { modelValue?: GetModelValue<A, VK, M>, open: boolean, ui: ReturnType<typeof inputMenu> }): any
  'empty'(props: { searchTerm?: string }): any
  'item': SlotProps<T>
  'item-leading': SlotProps<T>
@@ -153,7 +175,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'
@@ -164,21 +186,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 UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 import UChip 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: '' })

@@ -219,9 +241,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) {
@@ -230,9 +258,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)) {
@@ -240,19 +268,21 @@ 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 =>
+    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
@@ -307,12 +337,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
 })
@@ -362,15 +396,15 @@ defineExpose({
        @focus="onFocus"
        @remove-tag="onRemoveTag"
      >
-        <TagsInputItem v-for="(item, index) in tags" :key="index" :value="(item as string)" :class="ui.tagsItem({ class: props.ui?.tagsItem })">
+        <TagsInputItem v-for="(item, index) in tags" :key="index" :value="item" :class="ui.tagsItem({ class: props.ui?.tagsItem })">
          <TagsInputItemText :class="ui.tagsItemText({ class: props.ui?.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="ui.tagsItemDelete({ class: props.ui?.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">
              <UIcon :name="deleteIcon || appConfig.ui.icons.close" :class="ui.tagsItemDeleteIcon({ class: props.ui?.tagsItemDeleteIcon })" />
            </slot>
          </TagsInputItemDelete>
@@ -401,14 +435,14 @@ defineExpose({
      />

      <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-        <slot name="leading" :model-value="(modelValue as M extends true ? T[] : T)" :open="open" :ui="ui">
+        <slot name="leading" :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open" :ui="ui">
          <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
          <UAvatar v-else-if="!!avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
        </slot>
      </span>

      <ComboboxTrigger v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
-        <slot name="trailing" :model-value="(modelValue as M extends true ? T[] : T)" :open="open" :ui="ui">
+        <slot name="trailing" :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open" :ui="ui">
          <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
        </slot>
      </ComboboxTrigger>
@@ -427,25 +461,25 @@ defineExpose({

          <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
            <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-              <ComboboxLabel v-if="item?.type === 'label'" :class="ui.label({ class: props.ui?.label })">
+              <ComboboxLabel v-if="isInputItem(item) && item.type === 'label'" :class="ui.label({ class: props.ui?.label })">
                {{ get(item, props.labelKey as string) }}
              </ComboboxLabel>

-              <ComboboxSeparator v-else-if="item?.type === 'separator'" :class="ui.separator({ class: props.ui?.separator })" />
+              <ComboboxSeparator v-else-if="isInputItem(item) && item.type === 'separator'" :class="ui.separator({ class: props.ui?.separator })" />

              <ComboboxItem
                v-else
                :class="ui.item({ class: props.ui?.item })"
-                :disabled="item.disabled"
-                :value="valueKey && typeof item === 'object' ? get(item, props.valueKey as string) : item"
-                @select="item.onSelect"
+                :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">
-                    <UIcon v-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon })" />
-                    <UAvatar v-else-if="item.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
+                <slot name="item" :item="(item as NestedItem<T>)" :index="index">
+                  <slot name="item-leading" :item="(item as NestedItem<T>)" :index="index">
+                    <UIcon v-if="isInputItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon })" />
+                    <UAvatar v-else-if="isInputItem(item) && item.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
                    <UChip
-                      v-else-if="item.chip"
+                      v-else-if="isInputItem(item) && item.chip"
                      :size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
                      inset
                      standalone
@@ -455,13 +489,13 @@ defineExpose({
                  </slot>

                  <span :class="ui.itemLabel({ class: props.ui?.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="ui.itemTrailing({ class: props.ui?.itemTrailing })">
-                    <slot name="item-trailing" :item="(item as T)" :index="index" />
+                    <slot name="item-trailing" :item="(item as NestedItem<T>)" :index="index" />

                    <ComboboxItemIndicator as-child>
                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: props.ui?.itemTrailingIcon })" />