InputMenu
An autocomplete input with real-time suggestions.
Demo
Related Components
This requires the following components to be installed:
Related Composables
This requires the following composables to be installed:
Related Utils
This requires the following utils to be installed:
Related Types
This requires the following types to be installed:
Related Theme
This requires the following theme to be installed:
Component
vue
<script lang="ts">
import type { AvatarProps } from '@/ui/components/Avatar.vue'
import type { ChipProps } from '@/ui/components/Chip.vue'
import type { InputProps } from '@/ui/components/Input.vue'
import type { UseComponentIconsProps } from '@/ui/composables/useComponentIcons'
import type { ArrayOrNested, ComponentConfig, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem } from '@/ui/utils/utils'
import type { AcceptableValue, ComboboxArrowProps, ComboboxContentEmits, ComboboxContentProps, ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'
import type { EmitsToProps, InputHTMLAttributes } from 'vue'
import Avatar from '@/ui/components/Avatar.vue'
import Chip from '@/ui/components/Chip.vue'
import Icon from '@/ui/components/Icon.vue'
import { useButtonGroup } from '@/ui/composables/useButtonGroup'
import { useComponentIcons } from '@/ui/composables/useComponentIcons'
import { useFormField } from '@/ui/composables/useFormField'
import { usePortal } from '@/ui/composables/usePortal'
import { checkIcon, chevronDownIcon, removeIcon } from '@/ui/icons'
import theme from '@/ui/theme/input-menu'
import { compare } from '@/ui/utils/compare'
import { get } from '@/ui/utils/get'
import { isArrayOfArray } from '@/ui/utils/is-array-of-array'
import { createReusableTemplate } from '@vueuse/core'
import { reactivePick } from '@vueuse/shared'
import defu from 'defu'
import { isEqual } from 'ohash'
import { ComboboxAnchor, ComboboxArrow, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, TagsInputRoot, useFilter, useForwardPropsEmits } from 'reka-ui'
import { tv } from 'tailwind-variants'
import { computed, onMounted, ref, toRaw, toRef } from 'vue'
type InputMenu = ComponentConfig<typeof theme>
interface _InputMenuItem {
label?: string
icon?: string
avatar?: AvatarProps
chip?: ChipProps
type?: 'label' | 'separator' | 'item'
disabled?: boolean
onSelect?: (e?: Event) => void
[key: string]: any
}
export type InputMenuItem = _InputMenuItem | AcceptableValue | boolean
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' | 'resetSearchTermOnSelect' | 'highlightOnHover'>, UseComponentIconsProps {
as?: any
id?: string
type?: InputHTMLAttributes['type']
placeholder?: string
color?: InputMenu['variants']['color']
variant?: InputMenu['variants']['variant']
size?: InputMenu['variants']['size']
required?: boolean
autofocus?: boolean
autofocusDelay?: number
content?: Omit<ComboboxContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<ComboboxContentEmits>>
arrow?: boolean | Omit<ComboboxArrowProps, 'as' | 'asChild'>
portal?: boolean | string | HTMLElement
valueKey?: VK
labelKey?: keyof NestedItem<T>
items?: T
defaultValue?: GetModelValue<T, VK, M>
modelValue?: GetModelValue<T, VK, M>
multiple?: M & boolean
highlight?: boolean
createItem?: boolean | 'always' | { position?: 'top' | 'bottom', when?: 'empty' | 'always' }
filterFields?: string[]
ignoreFilter?: boolean
class?: any
ui?: InputMenu['slots']
}
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]
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
ui: { [K in keyof Required<InputMenu['slots']>]: (props?: Record<string, any>) => string }
}) => any
'trailing': (props: {
modelValue?: GetModelValue<A, VK, M>
open: boolean
ui: { [K in keyof Required<InputMenu['slots']>]: (props?: Record<string, any>) => string }
}) => any
'empty': (props: { searchTerm?: string }) => any
'item': SlotProps<T>
'item-leading': SlotProps<T>
'item-label': SlotProps<T>
'item-trailing': SlotProps<T>
'tags-item-text': SlotProps<T>
'tags-item-delete': SlotProps<T>
'content-top': (props?: object) => any
'content-bottom': (props?: object) => any
'create-item-label': (props: { item: string }) => any
}
</script>
<script setup lang="ts" generic="T extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false">
defineOptions({ inheritAttrs: false })
const props = withDefaults(defineProps<InputMenuProps<T, VK, M>>(), {
type: 'text',
autofocusDelay: 0,
portal: true,
labelKey: 'label' as never,
resetSearchTermOnBlur: true,
resetSearchTermOnSelect: true,
})
const emits = defineEmits<InputMenuEmits<T, VK, M>>()
const slots = defineSlots<InputMenuSlots<T, VK, M>>()
const searchTerm = defineModel<string>('searchTerm', { default: '' })
const { contains } = useFilter({ sensitivity: 'base' })
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'required', 'multiple', 'resetSearchTermOnBlur', 'resetSearchTermOnSelect', 'highlightOnHover', 'ignoreFilter'), emits)
const portalProps = usePortal(toRef(() => props.portal))
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }) as ComboboxContentProps)
const arrowProps = toRef(() => props.arrow as ComboboxArrowProps)
const { size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputProps>(props)
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: chevronDownIcon })))
const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
const [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate()
const ui = computed(() => tv(theme)({
color: color.value,
variant: props.variant,
size: inputSize?.value,
loading: props.loading,
highlight: highlight.value,
leading: isLeading.value || !!props.avatar || !!slots.leading,
trailing: isTrailing.value || !!slots.trailing,
multiple: props.multiple,
buttonGroup: orientation.value,
}))
function displayValue(value: T): string {
if (!props.valueKey) {
return value && (typeof value === 'object' ? get(value, props.labelKey as string) : value)
}
const item = items.value.find(item => compare(typeof item === 'object' ? get(item as Record<string, any>, props.valueKey as string) : item, value))
return item && (typeof item === 'object' ? get(item, props.labelKey as string) : item)
}
const groups = computed<InputMenuItem[][]>(() =>
props.items?.length
? isArrayOfArray(props.items)
? props.items
: [props.items]
: [],
)
const items = computed(() => groups.value.flatMap(group => group))
const filteredGroups = computed(() => {
if (props.ignoreFilter || !searchTerm.value) {
return groups.value
}
const fields = Array.isArray(props.filterFields) ? props.filterFields : [props.labelKey] as string[]
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)) {
return true
}
return fields.some(field => contains(get(item, field), searchTerm.value))
})).filter(group => group.filter(item =>
!isInputItem(item) || (!item.type || !['label', 'separator'].includes(item.type)),
).length > 0)
})
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 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 as string))
}
return !filteredItems.value.length
})
const createItemPosition = computed(() => typeof props.createItem === 'object' ? props.createItem.position : 'bottom')
const inputRef = ref<InstanceType<typeof ComboboxInput> | null>(null)
function autoFocus() {
if (props.autofocus) {
inputRef.value?.$el?.focus()
}
}
onMounted(() => {
setTimeout(() => {
autoFocus()
}, props.autofocusDelay)
})
function onUpdate(value: any) {
if (toRaw(props.modelValue) === value) {
return
}
// @ts-expect-error - 'target' does not exist in type 'EventInit'
const event = new Event('change', { target: { value } })
emits('change', event)
if (props.resetSearchTermOnSelect) {
searchTerm.value = ''
}
}
function onBlur(event: FocusEvent) {
emits('blur', event)
}
function onFocus(event: FocusEvent) {
emits('focus', event)
}
function onUpdateOpen(value: boolean) {
let timeoutId
if (!value) {
const event = new FocusEvent('blur')
emits('blur', event)
// Since we use `displayValue` prop inside ComboboxInput we should reset searchTerm manually
// https://reka-ui.com/docs/components/combobox#api-reference
if (props.resetSearchTermOnBlur) {
const STATE_ANIMATION_DELAY_MS = 100
timeoutId = setTimeout(() => {
searchTerm.value = ''
}, STATE_ANIMATION_DELAY_MS)
}
}
else {
const event = new FocusEvent('focus')
emits('focus', event)
clearTimeout(timeoutId)
}
}
function onRemoveTag(event: any) {
if (props.multiple) {
const modelValue = props.modelValue as GetModelValue<T, VK, true>
const filteredValue = modelValue.filter(value => !isEqual(value, event))
emits('update:modelValue', filteredValue as GetModelValue<T, VK, M>)
onUpdate(filteredValue)
}
}
function onSelect(e: Event, item: InputMenuItem) {
if (!isInputItem(item)) {
return
}
if (item.disabled) {
e.preventDefault()
return
}
item.onSelect?.(e)
}
function isInputItem(item: InputMenuItem): item is _InputMenuItem {
return typeof item === 'object' && item !== null
}
defineExpose({
inputRef,
})
</script>
<!-- eslint-disable vue/no-template-shadow -->
<template>
<DefineCreateItemTemplate>
<ComboboxGroup :class="ui.group({ class: props.ui?.group })">
<ComboboxItem
:class="ui.item({ class: props.ui?.item })"
:value="searchTerm"
@select.prevent="emits('create', searchTerm)"
>
<span :class="ui.itemLabel({ class: props.ui?.itemLabel })">
<slot name="create-item-label" :item="searchTerm">
Create "{{ searchTerm }}"
</slot>
</span>
</ComboboxItem>
</ComboboxGroup>
</DefineCreateItemTemplate>
<ComboboxRoot
:id="id"
v-slot="{ modelValue, open }"
v-bind="rootProps"
:name="name"
:disabled="disabled"
:class="ui.root({ class: [props.class, props.ui?.root] })"
:as-child="!!multiple"
ignore-filter
@update:model-value="onUpdate"
@update:open="onUpdateOpen"
@keydown.enter="$event.preventDefault()"
>
<ComboboxAnchor :as-child="!multiple" :class="ui.base({ class: props.ui?.base })">
<TagsInputRoot
v-if="multiple"
v-slot="{ modelValue: tags }"
:model-value="(modelValue as string[])"
:disabled="disabled"
:required="required"
delimiter=""
as-child
@blur="onBlur"
@focus="onFocus"
@remove-tag="onRemoveTag"
>
<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 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 NestedItem<T>)" :index="index">
<Icon :name="removeIcon" :class="ui.tagsItemDeleteIcon({ class: props.ui?.tagsItemDeleteIcon })" />
</slot>
</TagsInputItemDelete>
</TagsInputItem>
<ComboboxInput v-model="searchTerm" as-child>
<TagsInputInput
ref="inputRef"
v-bind="{ ...$attrs, ...ariaAttrs }"
:placeholder="placeholder"
:class="ui.tagsInput({ class: props.ui?.tagsInput })"
@keydown.enter.prevent
/>
</ComboboxInput>
</TagsInputRoot>
<ComboboxInput
v-else
ref="inputRef"
:display-value="displayValue"
v-bind="{ ...$attrs, ...ariaAttrs }"
:type="type"
:placeholder="placeholder"
:required="required"
@blur="onBlur"
@focus="onFocus"
@update:model-value="searchTerm = $event"
/>
<span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
<slot name="leading" :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open" :ui="ui">
<Icon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
<Avatar 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 GetModelValue<T, VK, M>)" :open="open" :ui="ui">
<Icon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
</slot>
</ComboboxTrigger>
</ComboboxAnchor>
<ComboboxPortal v-bind="portalProps">
<ComboboxContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
<slot name="content-top" />
<ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })">
<slot name="empty" :search-term="searchTerm">
{{ searchTerm ? 'No matching data' : 'No data' }}
</slot>
</ComboboxEmpty>
<ComboboxViewport :class="ui.viewport({ class: props.ui?.viewport })">
<ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
<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="isInputItem(item) && item.type === 'label'" :class="ui.label({ class: props.ui?.label })">
{{ get(item, props.labelKey as string) }}
</ComboboxLabel>
<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="isInputItem(item) && item.disabled"
:value="props.valueKey && isInputItem(item) ? get(item, props.valueKey as string) : item"
@select="onSelect($event, item)"
>
<slot name="item" :item="(item as NestedItem<T>)" :index="index">
<slot name="item-leading" :item="(item as NestedItem<T>)" :index="index">
<Icon v-if="isInputItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon })" />
<Avatar 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 })" />
<Chip
v-else-if="isInputItem(item) && item.chip"
:size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
inset
standalone
v-bind="item.chip"
:class="ui.itemLeadingChip({ class: props.ui?.itemLeadingChip })"
/>
</slot>
<span :class="ui.itemLabel({ class: props.ui?.itemLabel })">
<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 NestedItem<T>)" :index="index" />
<ComboboxItemIndicator as-child>
<Icon :name="checkIcon" :class="ui.itemTrailingIcon({ class: props.ui?.itemTrailingIcon })" />
</ComboboxItemIndicator>
</span>
</slot>
</ComboboxItem>
</template>
</ComboboxGroup>
<ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
</ComboboxViewport>
<slot name="content-bottom" />
<ComboboxArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
</ComboboxContent>
</ComboboxPortal>
</ComboboxRoot>
</template>vue
<script lang="ts">
import type { AvatarProps } from '@/UI/Components/Avatar.vue'
import type { ChipProps } from '@/UI/Components/Chip.vue'
import type { InputProps } from '@/UI/Components/Input.vue'
import type { UseComponentIconsProps } from '@/UI/Composables/useComponentIcons'
import type { ArrayOrNested, ComponentConfig, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem } from '@/UI/Utils/utils'
import type { AcceptableValue, ComboboxArrowProps, ComboboxContentEmits, ComboboxContentProps, ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'
import type { EmitsToProps, InputHTMLAttributes } from 'vue'
import Avatar from '@/UI/Components/Avatar.vue'
import Chip from '@/UI/Components/Chip.vue'
import Icon from '@/UI/Components/Icon.vue'
import { useButtonGroup } from '@/UI/Composables/useButtonGroup'
import { useComponentIcons } from '@/UI/Composables/useComponentIcons'
import { useFormField } from '@/UI/Composables/useFormField'
import { usePortal } from '@/UI/Composables/usePortal'
import { checkIcon, chevronDownIcon, removeIcon } from '@/UI/icons'
import theme from '@/UI/Theme/input-menu'
import { compare } from '@/UI/Utils/compare'
import { get } from '@/UI/Utils/get'
import { isArrayOfArray } from '@/UI/Utils/is-array-of-array'
import { createReusableTemplate } from '@vueuse/core'
import { reactivePick } from '@vueuse/shared'
import defu from 'defu'
import { isEqual } from 'ohash'
import { ComboboxAnchor, ComboboxArrow, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, TagsInputRoot, useFilter, useForwardPropsEmits } from 'reka-ui'
import { tv } from 'tailwind-variants'
import { computed, onMounted, ref, toRaw, toRef } from 'vue'
type InputMenu = ComponentConfig<typeof theme>
interface _InputMenuItem {
label?: string
icon?: string
avatar?: AvatarProps
chip?: ChipProps
type?: 'label' | 'separator' | 'item'
disabled?: boolean
onSelect?: (e?: Event) => void
[key: string]: any
}
export type InputMenuItem = _InputMenuItem | AcceptableValue | boolean
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' | 'resetSearchTermOnSelect' | 'highlightOnHover'>, UseComponentIconsProps {
as?: any
id?: string
type?: InputHTMLAttributes['type']
placeholder?: string
color?: InputMenu['variants']['color']
variant?: InputMenu['variants']['variant']
size?: InputMenu['variants']['size']
required?: boolean
autofocus?: boolean
autofocusDelay?: number
content?: Omit<ComboboxContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<ComboboxContentEmits>>
arrow?: boolean | Omit<ComboboxArrowProps, 'as' | 'asChild'>
portal?: boolean | string | HTMLElement
valueKey?: VK
labelKey?: keyof NestedItem<T>
items?: T
defaultValue?: GetModelValue<T, VK, M>
modelValue?: GetModelValue<T, VK, M>
multiple?: M & boolean
highlight?: boolean
createItem?: boolean | 'always' | { position?: 'top' | 'bottom', when?: 'empty' | 'always' }
filterFields?: string[]
ignoreFilter?: boolean
class?: any
ui?: InputMenu['slots']
}
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]
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
ui: { [K in keyof Required<InputMenu['slots']>]: (props?: Record<string, any>) => string }
}) => any
'trailing': (props: {
modelValue?: GetModelValue<A, VK, M>
open: boolean
ui: { [K in keyof Required<InputMenu['slots']>]: (props?: Record<string, any>) => string }
}) => any
'empty': (props: { searchTerm?: string }) => any
'item': SlotProps<T>
'item-leading': SlotProps<T>
'item-label': SlotProps<T>
'item-trailing': SlotProps<T>
'tags-item-text': SlotProps<T>
'tags-item-delete': SlotProps<T>
'content-top': (props?: object) => any
'content-bottom': (props?: object) => any
'create-item-label': (props: { item: string }) => any
}
</script>
<script setup lang="ts" generic="T extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false">
defineOptions({ inheritAttrs: false })
const props = withDefaults(defineProps<InputMenuProps<T, VK, M>>(), {
type: 'text',
autofocusDelay: 0,
portal: true,
labelKey: 'label' as never,
resetSearchTermOnBlur: true,
resetSearchTermOnSelect: true,
})
const emits = defineEmits<InputMenuEmits<T, VK, M>>()
const slots = defineSlots<InputMenuSlots<T, VK, M>>()
const searchTerm = defineModel<string>('searchTerm', { default: '' })
const { contains } = useFilter({ sensitivity: 'base' })
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'required', 'multiple', 'resetSearchTermOnBlur', 'resetSearchTermOnSelect', 'highlightOnHover', 'ignoreFilter'), emits)
const portalProps = usePortal(toRef(() => props.portal))
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }) as ComboboxContentProps)
const arrowProps = toRef(() => props.arrow as ComboboxArrowProps)
const { size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputProps>(props)
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: chevronDownIcon })))
const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
const [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate()
const ui = computed(() => tv(theme)({
color: color.value,
variant: props.variant,
size: inputSize?.value,
loading: props.loading,
highlight: highlight.value,
leading: isLeading.value || !!props.avatar || !!slots.leading,
trailing: isTrailing.value || !!slots.trailing,
multiple: props.multiple,
buttonGroup: orientation.value,
}))
function displayValue(value: T): string {
if (!props.valueKey) {
return value && (typeof value === 'object' ? get(value, props.labelKey as string) : value)
}
const item = items.value.find(item => compare(typeof item === 'object' ? get(item as Record<string, any>, props.valueKey as string) : item, value))
return item && (typeof item === 'object' ? get(item, props.labelKey as string) : item)
}
const groups = computed<InputMenuItem[][]>(() =>
props.items?.length
? isArrayOfArray(props.items)
? props.items
: [props.items]
: [],
)
const items = computed(() => groups.value.flatMap(group => group))
const filteredGroups = computed(() => {
if (props.ignoreFilter || !searchTerm.value) {
return groups.value
}
const fields = Array.isArray(props.filterFields) ? props.filterFields : [props.labelKey] as string[]
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)) {
return true
}
return fields.some(field => contains(get(item, field), searchTerm.value))
})).filter(group => group.filter(item =>
!isInputItem(item) || (!item.type || !['label', 'separator'].includes(item.type)),
).length > 0)
})
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 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 as string))
}
return !filteredItems.value.length
})
const createItemPosition = computed(() => typeof props.createItem === 'object' ? props.createItem.position : 'bottom')
const inputRef = ref<InstanceType<typeof ComboboxInput> | null>(null)
function autoFocus() {
if (props.autofocus) {
inputRef.value?.$el?.focus()
}
}
onMounted(() => {
setTimeout(() => {
autoFocus()
}, props.autofocusDelay)
})
function onUpdate(value: any) {
if (toRaw(props.modelValue) === value) {
return
}
// @ts-expect-error - 'target' does not exist in type 'EventInit'
const event = new Event('change', { target: { value } })
emits('change', event)
if (props.resetSearchTermOnSelect) {
searchTerm.value = ''
}
}
function onBlur(event: FocusEvent) {
emits('blur', event)
}
function onFocus(event: FocusEvent) {
emits('focus', event)
}
function onUpdateOpen(value: boolean) {
let timeoutId
if (!value) {
const event = new FocusEvent('blur')
emits('blur', event)
// Since we use `displayValue` prop inside ComboboxInput we should reset searchTerm manually
// https://reka-ui.com/docs/components/combobox#api-reference
if (props.resetSearchTermOnBlur) {
const STATE_ANIMATION_DELAY_MS = 100
timeoutId = setTimeout(() => {
searchTerm.value = ''
}, STATE_ANIMATION_DELAY_MS)
}
}
else {
const event = new FocusEvent('focus')
emits('focus', event)
clearTimeout(timeoutId)
}
}
function onRemoveTag(event: any) {
if (props.multiple) {
const modelValue = props.modelValue as GetModelValue<T, VK, true>
const filteredValue = modelValue.filter(value => !isEqual(value, event))
emits('update:modelValue', filteredValue as GetModelValue<T, VK, M>)
onUpdate(filteredValue)
}
}
function onSelect(e: Event, item: InputMenuItem) {
if (!isInputItem(item)) {
return
}
if (item.disabled) {
e.preventDefault()
return
}
item.onSelect?.(e)
}
function isInputItem(item: InputMenuItem): item is _InputMenuItem {
return typeof item === 'object' && item !== null
}
defineExpose({
inputRef,
})
</script>
<!-- eslint-disable vue/no-template-shadow -->
<template>
<DefineCreateItemTemplate>
<ComboboxGroup :class="ui.group({ class: props.ui?.group })">
<ComboboxItem
:class="ui.item({ class: props.ui?.item })"
:value="searchTerm"
@select.prevent="emits('create', searchTerm)"
>
<span :class="ui.itemLabel({ class: props.ui?.itemLabel })">
<slot name="create-item-label" :item="searchTerm">
Create "{{ searchTerm }}"
</slot>
</span>
</ComboboxItem>
</ComboboxGroup>
</DefineCreateItemTemplate>
<ComboboxRoot
:id="id"
v-slot="{ modelValue, open }"
v-bind="rootProps"
:name="name"
:disabled="disabled"
:class="ui.root({ class: [props.class, props.ui?.root] })"
:as-child="!!multiple"
ignore-filter
@update:model-value="onUpdate"
@update:open="onUpdateOpen"
@keydown.enter="$event.preventDefault()"
>
<ComboboxAnchor :as-child="!multiple" :class="ui.base({ class: props.ui?.base })">
<TagsInputRoot
v-if="multiple"
v-slot="{ modelValue: tags }"
:model-value="(modelValue as string[])"
:disabled="disabled"
:required="required"
delimiter=""
as-child
@blur="onBlur"
@focus="onFocus"
@remove-tag="onRemoveTag"
>
<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 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 NestedItem<T>)" :index="index">
<Icon :name="removeIcon" :class="ui.tagsItemDeleteIcon({ class: props.ui?.tagsItemDeleteIcon })" />
</slot>
</TagsInputItemDelete>
</TagsInputItem>
<ComboboxInput v-model="searchTerm" as-child>
<TagsInputInput
ref="inputRef"
v-bind="{ ...$attrs, ...ariaAttrs }"
:placeholder="placeholder"
:class="ui.tagsInput({ class: props.ui?.tagsInput })"
@keydown.enter.prevent
/>
</ComboboxInput>
</TagsInputRoot>
<ComboboxInput
v-else
ref="inputRef"
:display-value="displayValue"
v-bind="{ ...$attrs, ...ariaAttrs }"
:type="type"
:placeholder="placeholder"
:required="required"
@blur="onBlur"
@focus="onFocus"
@update:model-value="searchTerm = $event"
/>
<span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
<slot name="leading" :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open" :ui="ui">
<Icon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
<Avatar 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 GetModelValue<T, VK, M>)" :open="open" :ui="ui">
<Icon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
</slot>
</ComboboxTrigger>
</ComboboxAnchor>
<ComboboxPortal v-bind="portalProps">
<ComboboxContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
<slot name="content-top" />
<ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })">
<slot name="empty" :search-term="searchTerm">
{{ searchTerm ? 'No matching data' : 'No data' }}
</slot>
</ComboboxEmpty>
<ComboboxViewport :class="ui.viewport({ class: props.ui?.viewport })">
<ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
<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="isInputItem(item) && item.type === 'label'" :class="ui.label({ class: props.ui?.label })">
{{ get(item, props.labelKey as string) }}
</ComboboxLabel>
<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="isInputItem(item) && item.disabled"
:value="props.valueKey && isInputItem(item) ? get(item, props.valueKey as string) : item"
@select="onSelect($event, item)"
>
<slot name="item" :item="(item as NestedItem<T>)" :index="index">
<slot name="item-leading" :item="(item as NestedItem<T>)" :index="index">
<Icon v-if="isInputItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon })" />
<Avatar 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 })" />
<Chip
v-else-if="isInputItem(item) && item.chip"
:size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
inset
standalone
v-bind="item.chip"
:class="ui.itemLeadingChip({ class: props.ui?.itemLeadingChip })"
/>
</slot>
<span :class="ui.itemLabel({ class: props.ui?.itemLabel })">
<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 NestedItem<T>)" :index="index" />
<ComboboxItemIndicator as-child>
<Icon :name="checkIcon" :class="ui.itemTrailingIcon({ class: props.ui?.itemTrailingIcon })" />
</ComboboxItemIndicator>
</span>
</slot>
</ComboboxItem>
</template>
</ComboboxGroup>
<ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
</ComboboxViewport>
<slot name="content-bottom" />
<ComboboxArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
</ComboboxContent>
</ComboboxPortal>
</ComboboxRoot>
</template>Theme
ts
export default {
slots: {
root: '',
base: '',
leading: '',
leadingIcon: '',
leadingAvatar: '',
leadingAvatarSize: '',
trailing: '',
trailingIcon: '',
arrow: '',
content: '',
viewport: '',
group: '',
empty: '',
label: '',
separator: '',
item: '',
itemLeadingIcon: '',
itemLeadingAvatar: '',
itemLeadingAvatarSize: '',
itemLeadingChip: '',
itemLeadingChipSize: '',
itemTrailing: '',
itemTrailingIcon: '',
itemLabel: '',
tagsItem: '',
tagsItemText: '',
tagsItemDelete: '',
tagsItemDeleteIcon: '',
tagsInput: '',
},
variants: {
buttonGroup: {
horizontal: {
root: '',
base: '',
},
vertical: {
root: '',
base: '',
},
},
size: {
xs: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
label: '',
item: '',
itemLeadingIcon: '',
itemLeadingAvatarSize: '',
itemLeadingChip: '',
itemLeadingChipSize: '',
itemTrailingIcon: '',
tagsItem: '',
tagsItemDeleteIcon: '',
},
sm: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
label: '',
item: '',
itemLeadingIcon: '',
itemLeadingAvatarSize: '',
itemLeadingChip: '',
itemLeadingChipSize: '',
itemTrailingIcon: '',
tagsItem: '',
tagsItemDeleteIcon: '',
},
md: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
label: '',
item: '',
itemLeadingIcon: '',
itemLeadingAvatarSize: '',
itemLeadingChip: '',
itemLeadingChipSize: '',
itemTrailingIcon: '',
tagsItem: '',
tagsItemDeleteIcon: '',
},
lg: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
label: '',
item: '',
itemLeadingIcon: '',
itemLeadingAvatarSize: '',
itemLeadingChip: '',
itemLeadingChipSize: '',
itemTrailingIcon: '',
tagsItem: '',
tagsItemDeleteIcon: '',
},
xl: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
label: '',
item: '',
itemLeadingIcon: '',
itemLeadingAvatarSize: '',
itemLeadingChip: '',
itemLeadingChipSize: '',
itemTrailingIcon: '',
tagsItem: '',
tagsItemDeleteIcon: '',
},
},
variant: {
outline: '',
soft: '',
subtle: '',
ghost: '',
none: '',
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: '',
},
leading: {
true: '',
},
trailing: {
true: '',
},
loading: {
true: '',
},
highlight: {
true: '',
},
type: {
file: '',
},
multiple: {
true: {
root: '',
tagsInput: '',
},
false: {
base: '',
},
},
},
compoundVariants: [],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline',
} as const,
}View Nuxt UI theme
ts
export default {
slots: {
root: 'relative inline-flex items-center',
base: 'w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors',
leading: 'absolute inset-y-0 start-0 flex items-center',
leadingIcon: 'shrink-0 text-dimmed',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
trailing: 'group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75',
trailingIcon: 'shrink-0 text-dimmed',
arrow: 'fill-default',
content: 'max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto',
viewport: 'divide-y divide-default scroll-py-1',
group: 'p-1 isolate',
empty: 'py-2 text-center text-sm text-muted',
label: 'font-semibold text-highlighted',
separator: '-mx-1 my-1 h-px bg-border',
item: 'group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors',
itemLeadingIcon: 'shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors',
itemLeadingAvatar: 'shrink-0',
itemLeadingAvatarSize: '',
itemLeadingChip: 'shrink-0',
itemLeadingChipSize: '',
itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
itemTrailingIcon: 'shrink-0',
itemLabel: 'truncate',
tagsItem: 'px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75',
tagsItemText: 'truncate',
tagsItemDelete: 'inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors',
tagsItemDeleteIcon: '',
tagsInput: '',
},
variants: {
buttonGroup: {
horizontal: {
root: 'group',
base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none',
},
vertical: {
root: 'group',
base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none',
},
},
size: {
xs: {
base: 'px-2 py-1 text-xs gap-1',
leading: 'ps-2',
trailing: 'pe-2',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4',
label: 'p-1 text-[10px]/3 gap-1',
item: 'p-1 text-xs gap-1',
itemLeadingIcon: 'size-4',
itemLeadingAvatarSize: '3xs',
itemLeadingChip: 'size-4',
itemLeadingChipSize: 'sm',
itemTrailingIcon: 'size-4',
tagsItem: 'text-[10px]/3',
tagsItemDeleteIcon: 'size-3',
},
sm: {
base: 'px-2.5 py-1.5 text-xs gap-1.5',
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4',
label: 'p-1.5 text-[10px]/3 gap-1.5',
item: 'p-1.5 text-xs gap-1.5',
itemLeadingIcon: 'size-4',
itemLeadingAvatarSize: '3xs',
itemLeadingChip: 'size-4',
itemLeadingChipSize: 'sm',
itemTrailingIcon: 'size-4',
tagsItem: 'text-[10px]/3',
tagsItemDeleteIcon: 'size-3',
},
md: {
base: 'px-2.5 py-1.5 text-sm gap-1.5',
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5',
label: 'p-1.5 text-xs gap-1.5',
item: 'p-1.5 text-sm gap-1.5',
itemLeadingIcon: 'size-5',
itemLeadingAvatarSize: '2xs',
itemLeadingChip: 'size-5',
itemLeadingChipSize: 'md',
itemTrailingIcon: 'size-5',
tagsItem: 'text-xs',
tagsItemDeleteIcon: 'size-3.5',
},
lg: {
base: 'px-3 py-2 text-sm gap-2',
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5',
label: 'p-2 text-xs gap-2',
item: 'p-2 text-sm gap-2',
itemLeadingIcon: 'size-5',
itemLeadingAvatarSize: '2xs',
itemLeadingChip: 'size-5',
itemLeadingChipSize: 'md',
itemTrailingIcon: 'size-5',
tagsItem: 'text-xs',
tagsItemDeleteIcon: 'size-3.5',
},
xl: {
base: 'px-3 py-2 text-base gap-2',
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs',
trailingIcon: 'size-6',
label: 'p-2 text-sm gap-2',
item: 'p-2 text-base gap-2',
itemLeadingIcon: 'size-6',
itemLeadingAvatarSize: 'xs',
itemLeadingChip: 'size-6',
itemLeadingChipSize: 'lg',
itemTrailingIcon: 'size-6',
tagsItem: 'text-sm',
tagsItemDeleteIcon: 'size-4',
},
},
variant: {
outline: 'text-highlighted bg-default ring ring-inset ring-accented',
soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
none: 'text-highlighted bg-transparent',
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: '',
},
leading: {
true: '',
},
trailing: {
true: '',
},
loading: {
true: '',
},
highlight: {
true: '',
},
type: {
file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none',
},
multiple: {
true: {
root: 'flex-wrap',
tagsInput: 'border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
},
false: {
base: 'w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
},
},
},
compoundVariants: [
{
color: 'primary' as const,
multiple: true,
variant: [
'outline' as const,
'subtle' as const,
],
class: 'has-focus-visible:ring-2 has-focus-visible:ring-primary',
},
{
color: 'primary' as const,
variant: [
'outline' as const,
'subtle' as const,
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary',
},
{
color: 'primary',
highlight: true,
class: 'ring ring-inset ring-primary',
} as const,
{
color: 'secondary' as const,
multiple: true,
variant: [
'outline' as const,
'subtle' as const,
],
class: 'has-focus-visible:ring-2 has-focus-visible:ring-secondary',
},
{
color: 'secondary' as const,
variant: [
'outline' as const,
'subtle' as const,
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-secondary',
},
{
color: 'secondary',
highlight: true,
class: 'ring ring-inset ring-secondary',
} as const,
{
color: 'success' as const,
multiple: true,
variant: [
'outline' as const,
'subtle' as const,
],
class: 'has-focus-visible:ring-2 has-focus-visible:ring-sucess',
},
{
color: 'success' as const,
variant: [
'outline' as const,
'subtle' as const,
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-sucess',
},
{
color: 'success',
highlight: true,
class: 'ring ring-inset ring-sucess',
} as const,
{
color: 'info' as const,
multiple: true,
variant: [
'outline' as const,
'subtle' as const,
],
class: 'has-focus-visible:ring-2 has-focus-visible:ring-info',
},
{
color: 'info' as const,
variant: [
'outline' as const,
'subtle' as const,
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-info',
},
{
color: 'info',
highlight: true,
class: 'ring ring-inset ring-info',
} as const,
{
color: 'warning' as const,
multiple: true,
variant: [
'outline' as const,
'subtle' as const,
],
class: 'has-focus-visible:ring-2 has-focus-visible:ring-warning',
},
{
color: 'warning' as const,
variant: [
'outline' as const,
'subtle' as const,
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-warning',
},
{
color: 'warning',
highlight: true,
class: 'ring ring-inset ring-warning',
} as const,
{
color: 'error' as const,
multiple: true,
variant: [
'outline' as const,
'subtle' as const,
],
class: 'has-focus-visible:ring-2 has-focus-visible:ring-error',
},
{
color: 'error' as const,
variant: [
'outline' as const,
'subtle' as const,
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error',
},
{
color: 'error',
highlight: true,
class: 'ring ring-inset ring-error',
} as const,
{
color: 'neutral' as const,
multiple: true,
variant: [
'outline' as const,
'subtle' as const,
],
class: 'has-focus-visible:ring-2 has-focus-visible:ring-inverted',
},
{
color: 'neutral' as const,
variant: [
'outline' as const,
'subtle' as const,
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted',
},
{
color: 'neutral',
highlight: true,
class: 'ring ring-inset ring-inverted',
} as const,
{
leading: true,
size: 'xs',
class: 'ps-7',
} as const,
{
leading: true,
size: 'sm',
class: 'ps-8',
} as const,
{
leading: true,
size: 'md',
class: 'ps-9',
} as const,
{
leading: true,
size: 'lg',
class: 'ps-10',
} as const,
{
leading: true,
size: 'xl',
class: 'ps-11',
} as const,
{
trailing: true,
size: 'xs',
class: 'pe-7',
} as const,
{
trailing: true,
size: 'sm',
class: 'pe-8',
} as const,
{
trailing: true,
size: 'md',
class: 'pe-9',
} as const,
{
trailing: true,
size: 'lg',
class: 'pe-10',
} as const,
{
trailing: true,
size: 'xl',
class: 'pe-11',
} as const,
{
loading: true,
leading: true,
class: {
leadingIcon: 'animate-spin',
},
} as const,
{
loading: true,
leading: false,
trailing: true,
class: {
trailingIcon: 'animate-spin',
},
} as const,
],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline',
} as const,
}Test
To test this component, you can use the following test file:
ts
import type { RenderOptions } from '@testing-library/vue'
import InputMenu from '@/ui/components/Kbd.vue'
import theme from '@/ui/theme/kbd'
import { render } from '@testing-library/vue'
import { describe, expect, it } from 'vitest'
describe('input-menu', () => {
const sizes = Object.keys(theme.variants.size) as any
const variants = Object.keys(theme.variants.variant) as any
const items = [{
label: 'Backlog',
value: 'backlog',
icon: 'i-lucide-circle-help',
}, {
label: 'Todo',
value: 'todo',
icon: 'i-lucide-circle-plus',
}, {
label: 'In Progress',
value: 'in_progress',
icon: 'i-lucide-circle-arrow-up',
}, {
label: 'Done',
value: 'done',
icon: 'i-lucide-circle-check',
}, {
label: 'Canceled',
value: 'canceled',
icon: 'i-lucide-circle-x',
}]
const props = { open: true, portal: false, items }
it.each<[string, RenderOptions<typeof InputMenu>]>([
['with items', { props }],
['with modelValue', { props: { ...props, modelValue: items[0] } }],
['with defaultValue', { props: { ...props, defaultValue: items[0] } }],
['with valueKey', { props: { ...props, valueKey: 'value' } }],
['with labelKey', { props: { ...props, labelKey: 'value' } }],
['with id', { props: { ...props, id: 'id' } }],
['with name', { props: { ...props, name: 'name' } }],
['with placeholder', { props: { ...props, placeholder: 'Search...' } }],
['with disabled', { props: { ...props, disabled: true } }],
['with required', { props: { ...props, required: true } }],
['with icon', { props: { icon: 'i-lucide-search' } }],
['with leading and icon', { props: { leading: true, icon: 'i-lucide-arrow-left' } }],
['with leadingIcon', { props: { leadingIcon: 'i-lucide-arrow-left' } }],
['with trailing and icon', { props: { trailing: true, icon: 'i-lucide-arrow-right' } }],
['with trailingIcon', { props: { trailingIcon: 'i-lucide-arrow-right' } }],
['with avatar', { props: { avatar: { src: 'https://github.com/vue.png' } } }],
['with avatar and leadingIcon', { props: { avatar: { src: 'https://github.com/vue.png' }, leadingIcon: 'i-lucide-arrow-left' } }],
['with avatar and trailingIcon', { props: { avatar: { src: 'https://github.com/vue.png' }, trailingIcon: 'i-lucide-arrow-right' } }],
['with loading', { props: { loading: true } }],
['with loading and avatar', { props: { loading: true, avatar: { src: 'https://github.com/vue.png' } } }],
['with loading trailing', { props: { loading: true, trailing: true } }],
['with loading trailing and avatar', { props: { loading: true, trailing: true, avatar: { src: 'https://github.com/vue.png' } } }],
['with loadingIcon', { props: { loading: true, loadingIcon: 'i-lucide-sparkles' } }],
['with trailingIcon', { props: { ...props, trailingIcon: 'i-lucide-chevron-down' } }],
['with arrow', { props: { ...props, arrow: true } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant } }]),
...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { ...props, variant, color: 'neutral' } }]),
['with as', { props: { ...props, as: 'section' } }],
['with class', { props: { ...props, class: 'absolute' } }],
['with ui', { props: { ...props, ui: { group: 'p-2' } } }],
// Slots
['with leading slot', { slots: { leading: () => 'Leading slot' } }],
['with default slot', { slots: { default: () => 'Default slot' } }],
['with trailing slot', { slots: { trailing: () => 'Trailing slot' } }],
['with item slot', { props, slots: { item: () => 'Item slot' } }],
['with item-leading slot', { props, slots: { 'item-leading': () => 'Item leading slot' } }],
['with item-label slot', { props, slots: { 'item-label': () => 'Item label slot' } }],
['with item-trailing slot', { props, slots: { 'item-trailing': () => 'Item trailing slot' } }],
])('renders %s correctly', (name, options) => {
const { html } = render(InputMenu, options)
expect(html()).matchSnapshot()
})
})ts
import type { RenderOptions } from '@testing-library/vue'
import InputMenu from '@/UI/Components/Kbd.vue'
import theme from '@/UI/Theme/kbd'
import { render } from '@testing-library/vue'
import { describe, expect, it } from 'vitest'
describe('input-menu', () => {
const sizes = Object.keys(theme.variants.size) as any
const variants = Object.keys(theme.variants.variant) as any
const items = [{
label: 'Backlog',
value: 'backlog',
icon: 'i-lucide-circle-help',
}, {
label: 'Todo',
value: 'todo',
icon: 'i-lucide-circle-plus',
}, {
label: 'In Progress',
value: 'in_progress',
icon: 'i-lucide-circle-arrow-up',
}, {
label: 'Done',
value: 'done',
icon: 'i-lucide-circle-check',
}, {
label: 'Canceled',
value: 'canceled',
icon: 'i-lucide-circle-x',
}]
const props = { open: true, portal: false, items }
it.each<[string, RenderOptions<typeof InputMenu>]>([
['with items', { props }],
['with modelValue', { props: { ...props, modelValue: items[0] } }],
['with defaultValue', { props: { ...props, defaultValue: items[0] } }],
['with valueKey', { props: { ...props, valueKey: 'value' } }],
['with labelKey', { props: { ...props, labelKey: 'value' } }],
['with id', { props: { ...props, id: 'id' } }],
['with name', { props: { ...props, name: 'name' } }],
['with placeholder', { props: { ...props, placeholder: 'Search...' } }],
['with disabled', { props: { ...props, disabled: true } }],
['with required', { props: { ...props, required: true } }],
['with icon', { props: { icon: 'i-lucide-search' } }],
['with leading and icon', { props: { leading: true, icon: 'i-lucide-arrow-left' } }],
['with leadingIcon', { props: { leadingIcon: 'i-lucide-arrow-left' } }],
['with trailing and icon', { props: { trailing: true, icon: 'i-lucide-arrow-right' } }],
['with trailingIcon', { props: { trailingIcon: 'i-lucide-arrow-right' } }],
['with avatar', { props: { avatar: { src: 'https://github.com/vue.png' } } }],
['with avatar and leadingIcon', { props: { avatar: { src: 'https://github.com/vue.png' }, leadingIcon: 'i-lucide-arrow-left' } }],
['with avatar and trailingIcon', { props: { avatar: { src: 'https://github.com/vue.png' }, trailingIcon: 'i-lucide-arrow-right' } }],
['with loading', { props: { loading: true } }],
['with loading and avatar', { props: { loading: true, avatar: { src: 'https://github.com/vue.png' } } }],
['with loading trailing', { props: { loading: true, trailing: true } }],
['with loading trailing and avatar', { props: { loading: true, trailing: true, avatar: { src: 'https://github.com/vue.png' } } }],
['with loadingIcon', { props: { loading: true, loadingIcon: 'i-lucide-sparkles' } }],
['with trailingIcon', { props: { ...props, trailingIcon: 'i-lucide-chevron-down' } }],
['with arrow', { props: { ...props, arrow: true } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant } }]),
...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { ...props, variant, color: 'neutral' } }]),
['with as', { props: { ...props, as: 'section' } }],
['with class', { props: { ...props, class: 'absolute' } }],
['with ui', { props: { ...props, ui: { group: 'p-2' } } }],
// Slots
['with leading slot', { slots: { leading: () => 'Leading slot' } }],
['with default slot', { slots: { default: () => 'Default slot' } }],
['with trailing slot', { slots: { trailing: () => 'Trailing slot' } }],
['with item slot', { props, slots: { item: () => 'Item slot' } }],
['with item-leading slot', { props, slots: { 'item-leading': () => 'Item leading slot' } }],
['with item-label slot', { props, slots: { 'item-label': () => 'Item label slot' } }],
['with item-trailing slot', { props, slots: { 'item-trailing': () => 'Item trailing slot' } }],
])('renders %s correctly', (name, options) => {
const { html } = render(InputMenu, options)
expect(html()).matchSnapshot()
})
})Contributors
barbapapazes