CommandPalette
A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.
Demo
Users
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 Theme
This requires the following theme to be installed:
Component
vue
<!-- eslint-disable vue/block-tag-newline -->
<script lang="ts">
import type { AvatarProps } from '@/ui/components/Avatar.vue'
import type { ButtonProps } from '@/ui/components/Button.vue'
import type { ChipProps } from '@/ui/components/Chip.vue'
import type { InputProps } from '@/ui/components/Input.vue'
import type { KbdProps } from '@/ui/components/Kbd.vue'
import type { LinkProps } from '@/ui/components/Link.vue'
import type { UseComponentIconsProps } from '@/ui/composables/useComponentIcons'
import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
import type { FuseResult } from 'fuse.js'
import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'
import Avatar from '@/ui/components/Avatar.vue'
import Button from '@/ui/components/Button.vue'
import Chip from '@/ui/components/Chip.vue'
import Icon from '@/ui/components/Icon.vue'
import Input from '@/ui/components/Input.vue'
import Kbd from '@/ui/components/Kbd.vue'
import Link from '@/ui/components/Link.vue'
import { checkIcon, closeIcon, loadingIcon } from '@/ui/icons'
import theme from '@/ui/theme/command-palette'
import { highlight } from '@/ui/utils/fuse'
import { get } from '@/ui/utils/get'
import { omit } from '@/ui/utils/omit'
import { pickLinkProps } from '@/ui/utils/pick-link-props'
import { useFuse } from '@vueuse/integrations/useFuse'
import { reactivePick } from '@vueuse/shared'
import { defu } from 'defu'
import { ListboxContent, ListboxFilter, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, ListboxRoot, useForwardProps, useForwardPropsEmits } from 'reka-ui'
import { tv } from 'tailwind-variants'
import { computed } from 'vue'
const commandPalette = tv(theme)
export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
prefix?: string
label?: string
suffix?: string
icon?: string
avatar?: AvatarProps
chip?: ChipProps
kbds?: KbdProps['value'][] | KbdProps[]
active?: boolean
loading?: boolean
disabled?: boolean
slot?: string
onSelect?: (e?: Event) => void
[key: string]: any
}
export interface CommandPaletteGroup<T> {
id: string
label?: string
slot?: string
items?: T[]
ignoreFilter?: boolean
postFilter?: (searchTerm: string, items: T[]) => T[]
highlightedIcon?: string
}
export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover'>, Pick<UseComponentIconsProps, 'loading'> {
as?: any
icon?: string
selectedIcon?: string
placeholder?: InputProps['placeholder']
autofocus?: boolean
close?: boolean | Partial<ButtonProps>
groups?: G[]
fuse?: UseFuseOptions<T>
labelKey?: string
class?: any
ui?: Partial<typeof commandPalette.slots>
}
export type CommandPaletteEmits<T> = ListboxRootEmits<T> & {
'update:open': [value: boolean]
}
type SlotProps<T> = (props: { item: T, index: number }) => any
export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?: string }> = {
'empty': (props: { searchTerm?: string }) => any
'close': (props: { ui: ReturnType<typeof commandPalette> }) => any
'item': SlotProps<T>
'item-leading': SlotProps<T>
'item-label': SlotProps<T>
'item-trailing': SlotProps<T>
} & Record<string, SlotProps<G>> & Record<string, SlotProps<T>>
</script>
<script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">
const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
modelValue: '',
labelKey: 'label',
autofocus: true,
})
const emits = defineEmits<CommandPaletteEmits<T>>()
const slots = defineSlots<CommandPaletteSlots<G, T>>()
const searchTerm = defineModel<string>('searchTerm', { default: '' })
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'disabled', 'multiple', 'modelValue', 'defaultValue', 'highlightOnHover'), emits)
const inputProps = useForwardProps(reactivePick(props, 'loading'))
const ui = commandPalette()
const fuse = computed(() => defu({}, props.fuse, {
fuseOptions: {
ignoreLocation: true,
threshold: 0.1,
keys: [props.labelKey, 'suffix'],
},
resultLimit: 12,
matchAllWhenSearchEmpty: true,
}))
const items = computed(() => props.groups?.filter((group) => {
if (!group.id) {
console.warn(`[vue-ui] CommandPalette group is missing an \`id\` property`)
return false
}
if (group.ignoreFilter) {
return false
}
return true
}).flatMap(group => group.items?.map(item => ({ ...item, group: group.id })) || []) || [])
const { results: fuseResults } = useFuse<typeof items.value[number]>(searchTerm, items, fuse)
function getGroupWithItems(group: G, items: (T & { matches?: FuseResult<T>['matches'] })[]) {
if (group?.postFilter && typeof group.postFilter === 'function') {
items = group.postFilter(searchTerm.value, items)
}
return {
...group,
items: items.slice(0, fuse.value.resultLimit).map((item) => {
return {
...item,
labelHtml: highlight<T>(item, searchTerm.value, props.labelKey),
suffixHtml: highlight<T>(item, searchTerm.value, undefined, [props.labelKey]),
}
}),
}
}
const groups = computed(() => {
const groupsById = fuseResults.value.reduce((acc, result) => {
const { item, matches } = result
if (!item.group) {
return acc
}
acc[item.group] ||= []
acc[item.group]?.push({ ...item, matches })
return acc
}, {} as Record<string, (T & { matches?: FuseResult<T>['matches'] })[]>)
const fuseGroups = Object.entries(groupsById).map(([id, items]) => {
const group = props.groups?.find(group => group.id === id)
if (!group) {
return undefined
}
return getGroupWithItems(group, items)
}).filter(group => !!group)
const nonFuseGroups = props.groups
?.map((group, index) => ({ ...group, index }))
?.filter(group => group.ignoreFilter && group.items?.length)
?.map(group => ({ ...getGroupWithItems(group, group.items || []), index: group.index })) || []
return nonFuseGroups.reduce((acc, group) => {
acc.splice(group.index, 0, group)
return acc
}, [...fuseGroups])
})
</script>
<!-- eslint-disable vue/no-v-html -->
<template>
<ListboxRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
<ListboxFilter v-model="searchTerm" as-child>
<Input
:placeholder="props.placeholder || 'Type a command or search...'"
variant="none"
:autofocus="autofocus"
size="lg"
v-bind="inputProps"
:icon="icon"
:class="ui.input({ class: props.ui?.input })"
>
<template v-if="close || !!slots.close" #trailing>
<slot name="close" :ui="ui">
<Button
v-if="close"
:icon="closeIcon"
size="md"
color="neutral"
variant="ghost"
aria-label="Close"
v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
:class="ui.close({ class: props.ui?.close })"
@click="emits('update:open', false)"
/>
</slot>
</template>
</Input>
</ListboxFilter>
<ListboxContent :class="ui.content({ class: props.ui?.content })">
<div v-if="groups?.length" :class="ui.viewport({ class: props.ui?.viewport })">
<ListboxGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
<ListboxGroupLabel v-if="get(group, props.labelKey as string)" :class="ui.label({ class: props.ui?.label })">
{{ get(group, props.labelKey as string) }}
</ListboxGroupLabel>
<ListboxItem
v-for="(item, index) in group.items"
:key="`group-${groupIndex}-${index}`"
:value="omit(item, ['matches' as any, 'group' as any, 'onSelect', 'labelHtml', 'suffixHtml'])"
:disabled="item.disabled"
as-child
@select="item.onSelect"
>
<Link v-bind="pickLinkProps(item)" :class="ui.item({ class: props.ui?.item, active: item.active })" raw>
<slot :name="((item.slot || group.slot || 'item') as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index">
<slot :name="((item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index">
<Icon v-if="item.loading" :name="loadingIcon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, loading: true })" />
<Icon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, active: item.active })" />
<Avatar 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, active: item.active })" />
<Chip
v-else-if="item.chip"
:size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
inset
standalone
v-bind="item.chip"
:class="ui.itemLeadingChip({ class: props.ui?.itemLeadingChip, active: item.active })"
/>
</slot>
<span v-if="item.labelHtml || get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`]" :class="ui.itemLabel({ class: props.ui?.itemLabel, active: item.active })">
<slot :name="((item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index">
<span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: props.ui?.itemLabelPrefix })">{{ item.prefix }}</span>
<span :class="ui.itemLabelBase({ class: props.ui?.itemLabelBase, active: item.active })" v-html="item.labelHtml || get(item, props.labelKey as string)" />
<span :class="ui.itemLabelSuffix({ class: props.ui?.itemLabelSuffix, active: item.active })" v-html="item.suffixHtml || item.suffix" />
</slot>
</span>
<span :class="ui.itemTrailing({ class: props.ui?.itemTrailing })">
<slot :name="((item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index">
<span v-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: props.ui?.itemTrailingKbds })">
<Kbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
</span>
<Icon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: props.ui?.itemTrailingHighlightedIcon })" />
</slot>
<ListboxItemIndicator as-child>
<Icon :name="checkIcon" :class="ui.itemTrailingIcon({ class: props.ui?.itemTrailingIcon })" />
</ListboxItemIndicator>
</span>
</slot>
</Link>
</ListboxItem>
</ListboxGroup>
</div>
<div v-else :class="ui.empty({ class: props.ui?.empty })">
<slot name="empty" :search-term="searchTerm">
{{ searchTerm ? 'No matching data' : 'No data' }}
</slot>
</div>
</ListboxContent>
</ListboxRoot>
</template>vue
<!-- eslint-disable vue/block-tag-newline -->
<script lang="ts">
import type { AvatarProps } from '@/UI/Components/Avatar.vue'
import type { ButtonProps } from '@/UI/Components/Button.vue'
import type { ChipProps } from '@/UI/Components/Chip.vue'
import type { InputProps } from '@/UI/Components/Input.vue'
import type { KbdProps } from '@/UI/Components/Kbd.vue'
import type { LinkProps } from '@/UI/Components/Link.vue'
import type { UseComponentIconsProps } from '@/UI/Composables/useComponentIcons'
import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
import type { FuseResult } from 'fuse.js'
import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'
import Avatar from '@/UI/Components/Avatar.vue'
import Button from '@/UI/Components/Button.vue'
import Chip from '@/UI/Components/Chip.vue'
import Icon from '@/UI/Components/Icon.vue'
import Input from '@/UI/Components/Input.vue'
import Kbd from '@/UI/Components/Kbd.vue'
import Link from '@/UI/Components/Link.vue'
import { checkIcon, closeIcon, loadingIcon } from '@/UI/icons'
import theme from '@/UI/Theme/command-palette'
import { highlight } from '@/UI/Utils/fuse'
import { get } from '@/UI/Utils/get'
import { omit } from '@/UI/Utils/omit'
import { pickLinkProps } from '@/UI/Utils/pick-link-props'
import { useFuse } from '@vueuse/integrations/useFuse'
import { reactivePick } from '@vueuse/shared'
import { defu } from 'defu'
import { ListboxContent, ListboxFilter, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, ListboxRoot, useForwardProps, useForwardPropsEmits } from 'reka-ui'
import { tv } from 'tailwind-variants'
import { computed } from 'vue'
const commandPalette = tv(theme)
export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
prefix?: string
label?: string
suffix?: string
icon?: string
avatar?: AvatarProps
chip?: ChipProps
kbds?: KbdProps['value'][] | KbdProps[]
active?: boolean
loading?: boolean
disabled?: boolean
slot?: string
onSelect?: (e?: Event) => void
[key: string]: any
}
export interface CommandPaletteGroup<T> {
id: string
label?: string
slot?: string
items?: T[]
ignoreFilter?: boolean
postFilter?: (searchTerm: string, items: T[]) => T[]
highlightedIcon?: string
}
export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover'>, Pick<UseComponentIconsProps, 'loading'> {
as?: any
icon?: string
selectedIcon?: string
placeholder?: InputProps['placeholder']
autofocus?: boolean
close?: boolean | Partial<ButtonProps>
groups?: G[]
fuse?: UseFuseOptions<T>
labelKey?: string
class?: any
ui?: Partial<typeof commandPalette.slots>
}
export type CommandPaletteEmits<T> = ListboxRootEmits<T> & {
'update:open': [value: boolean]
}
type SlotProps<T> = (props: { item: T, index: number }) => any
export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?: string }> = {
'empty': (props: { searchTerm?: string }) => any
'close': (props: { ui: ReturnType<typeof commandPalette> }) => any
'item': SlotProps<T>
'item-leading': SlotProps<T>
'item-label': SlotProps<T>
'item-trailing': SlotProps<T>
} & Record<string, SlotProps<G>> & Record<string, SlotProps<T>>
</script>
<script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">
const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
modelValue: '',
labelKey: 'label',
autofocus: true,
})
const emits = defineEmits<CommandPaletteEmits<T>>()
const slots = defineSlots<CommandPaletteSlots<G, T>>()
const searchTerm = defineModel<string>('searchTerm', { default: '' })
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'disabled', 'multiple', 'modelValue', 'defaultValue', 'highlightOnHover'), emits)
const inputProps = useForwardProps(reactivePick(props, 'loading'))
const ui = commandPalette()
const fuse = computed(() => defu({}, props.fuse, {
fuseOptions: {
ignoreLocation: true,
threshold: 0.1,
keys: [props.labelKey, 'suffix'],
},
resultLimit: 12,
matchAllWhenSearchEmpty: true,
}))
const items = computed(() => props.groups?.filter((group) => {
if (!group.id) {
console.warn(`[vue-ui] CommandPalette group is missing an \`id\` property`)
return false
}
if (group.ignoreFilter) {
return false
}
return true
}).flatMap(group => group.items?.map(item => ({ ...item, group: group.id })) || []) || [])
const { results: fuseResults } = useFuse<typeof items.value[number]>(searchTerm, items, fuse)
function getGroupWithItems(group: G, items: (T & { matches?: FuseResult<T>['matches'] })[]) {
if (group?.postFilter && typeof group.postFilter === 'function') {
items = group.postFilter(searchTerm.value, items)
}
return {
...group,
items: items.slice(0, fuse.value.resultLimit).map((item) => {
return {
...item,
labelHtml: highlight<T>(item, searchTerm.value, props.labelKey),
suffixHtml: highlight<T>(item, searchTerm.value, undefined, [props.labelKey]),
}
}),
}
}
const groups = computed(() => {
const groupsById = fuseResults.value.reduce((acc, result) => {
const { item, matches } = result
if (!item.group) {
return acc
}
acc[item.group] ||= []
acc[item.group]?.push({ ...item, matches })
return acc
}, {} as Record<string, (T & { matches?: FuseResult<T>['matches'] })[]>)
const fuseGroups = Object.entries(groupsById).map(([id, items]) => {
const group = props.groups?.find(group => group.id === id)
if (!group) {
return undefined
}
return getGroupWithItems(group, items)
}).filter(group => !!group)
const nonFuseGroups = props.groups
?.map((group, index) => ({ ...group, index }))
?.filter(group => group.ignoreFilter && group.items?.length)
?.map(group => ({ ...getGroupWithItems(group, group.items || []), index: group.index })) || []
return nonFuseGroups.reduce((acc, group) => {
acc.splice(group.index, 0, group)
return acc
}, [...fuseGroups])
})
</script>
<!-- eslint-disable vue/no-v-html -->
<template>
<ListboxRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
<ListboxFilter v-model="searchTerm" as-child>
<Input
:placeholder="props.placeholder || 'Type a command or search...'"
variant="none"
:autofocus="autofocus"
size="lg"
v-bind="inputProps"
:icon="icon"
:class="ui.input({ class: props.ui?.input })"
>
<template v-if="close || !!slots.close" #trailing>
<slot name="close" :ui="ui">
<Button
v-if="close"
:icon="closeIcon"
size="md"
color="neutral"
variant="ghost"
aria-label="Close"
v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
:class="ui.close({ class: props.ui?.close })"
@click="emits('update:open', false)"
/>
</slot>
</template>
</Input>
</ListboxFilter>
<ListboxContent :class="ui.content({ class: props.ui?.content })">
<div v-if="groups?.length" :class="ui.viewport({ class: props.ui?.viewport })">
<ListboxGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
<ListboxGroupLabel v-if="get(group, props.labelKey as string)" :class="ui.label({ class: props.ui?.label })">
{{ get(group, props.labelKey as string) }}
</ListboxGroupLabel>
<ListboxItem
v-for="(item, index) in group.items"
:key="`group-${groupIndex}-${index}`"
:value="omit(item, ['matches' as any, 'group' as any, 'onSelect', 'labelHtml', 'suffixHtml'])"
:disabled="item.disabled"
as-child
@select="item.onSelect"
>
<Link v-bind="pickLinkProps(item)" :class="ui.item({ class: props.ui?.item, active: item.active })" raw>
<slot :name="((item.slot || group.slot || 'item') as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index">
<slot :name="((item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index">
<Icon v-if="item.loading" :name="loadingIcon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, loading: true })" />
<Icon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, active: item.active })" />
<Avatar 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, active: item.active })" />
<Chip
v-else-if="item.chip"
:size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
inset
standalone
v-bind="item.chip"
:class="ui.itemLeadingChip({ class: props.ui?.itemLeadingChip, active: item.active })"
/>
</slot>
<span v-if="item.labelHtml || get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`]" :class="ui.itemLabel({ class: props.ui?.itemLabel, active: item.active })">
<slot :name="((item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index">
<span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: props.ui?.itemLabelPrefix })">{{ item.prefix }}</span>
<span :class="ui.itemLabelBase({ class: props.ui?.itemLabelBase, active: item.active })" v-html="item.labelHtml || get(item, props.labelKey as string)" />
<span :class="ui.itemLabelSuffix({ class: props.ui?.itemLabelSuffix, active: item.active })" v-html="item.suffixHtml || item.suffix" />
</slot>
</span>
<span :class="ui.itemTrailing({ class: props.ui?.itemTrailing })">
<slot :name="((item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index">
<span v-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: props.ui?.itemTrailingKbds })">
<Kbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
</span>
<Icon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: props.ui?.itemTrailingHighlightedIcon })" />
</slot>
<ListboxItemIndicator as-child>
<Icon :name="checkIcon" :class="ui.itemTrailingIcon({ class: props.ui?.itemTrailingIcon })" />
</ListboxItemIndicator>
</span>
</slot>
</Link>
</ListboxItem>
</ListboxGroup>
</div>
<div v-else :class="ui.empty({ class: props.ui?.empty })">
<slot name="empty" :search-term="searchTerm">
{{ searchTerm ? 'No matching data' : 'No data' }}
</slot>
</div>
</ListboxContent>
</ListboxRoot>
</template>Theme
ts
export default {
slots: {
root: '',
input: '',
close: '',
content: '',
viewport: '',
group: '',
empty: '',
label: '',
item: '',
itemLeadingIcon: '',
itemLeadingAvatar: '',
itemLeadingAvatarSize: '',
itemLeadingChip: '',
itemLeadingChipSize: '',
itemTrailing: '',
itemTrailingIcon: '',
itemTrailingHighlightedIcon: '',
itemTrailingKbds: '',
itemTrailingKbdsSize: '',
itemLabel: '',
itemLabelBase: '',
itemLabelPrefix: '',
itemLabelSuffix: '',
},
variants: {
active: {
true: {
item: '',
itemLeadingIcon: '',
},
false: {
item: '',
itemLeadingIcon: '',
},
},
loading: {
true: {
itemLeadingIcon: '',
},
},
},
}View Nuxt UI theme
ts
export default {
slots: {
root: 'flex flex-col min-h-0 min-w-0 divide-y divide-default',
input: '[&>input]:h-12',
close: '',
content: 'relative overflow-hidden flex flex-col',
viewport: 'relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1 focus:outline-none',
group: 'p-1 isolate',
empty: 'py-6 text-center text-sm text-muted',
label: 'px-2 py-1.5 text-xs font-semibold text-highlighted',
item: 'group relative w-full flex items-center gap-2 px-2 py-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',
itemLeadingIcon: 'shrink-0 size-5',
itemLeadingAvatar: 'shrink-0',
itemLeadingAvatarSize: '2xs',
itemLeadingChip: 'shrink-0 size-5',
itemLeadingChipSize: 'md',
itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
itemTrailingIcon: 'shrink-0 size-5',
itemTrailingHighlightedIcon: 'shrink-0 size-5 text-dimmed hidden group-data-highlighted:inline-flex',
itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
itemTrailingKbdsSize: 'md',
itemLabel: 'truncate space-x-1 rtl:space-x-reverse',
itemLabelBase: 'text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary',
itemLabelPrefix: 'text-default',
itemLabelSuffix: 'text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary',
},
variants: {
active: {
true: {
item: 'text-highlighted before:bg-elevated',
itemLeadingIcon: 'text-default',
},
false: {
item: 'text-default data-highlighted:text-highlighted data-highlighted:before:bg-elevated/50 transition-colors before:transition-colors',
itemLeadingIcon: 'text-dimmed group-data-highlighted:text-default transition-colors',
},
},
loading: {
true: {
itemLeadingIcon: 'animate-spin',
},
},
},
}Test
To test this component, you can use the following test file:
ts
import type { CommandPaletteGroup, CommandPaletteItem } from '@/ui/components/CommandPalette.vue'
import type { RenderOptions } from '@testing-library/vue'
import CommandPalette from '@/ui/components/CommandPalette.vue'
import { render } from '@testing-library/vue'
import { describe, expect, it, vi } from 'vitest'
describe('commandPalette', () => {
Element.prototype.scrollIntoView = vi.fn()
const groups: CommandPaletteGroup<CommandPaletteItem>[] = [{
id: 'actions',
items: [{
label: 'Add new file',
suffix: 'Create a new file in the current directory or workspace.',
icon: 'i-lucide-file-plus',
kbds: ['meta', 'N'],
active: true,
}, {
label: 'Add new folder',
suffix: 'Create a new folder in the current directory or workspace.',
icon: 'i-lucide-folder-plus',
kbds: ['meta', 'F'],
}, {
label: 'Add hashtag',
suffix: 'Add a hashtag to the current item.',
icon: 'i-lucide-hash',
kbds: ['meta', 'H'],
disabled: true,
}, {
label: 'Add label',
suffix: 'Add a label to the current item.',
icon: 'i-lucide-tag',
kbds: ['meta', 'L'],
slot: 'custom',
}],
}, {
id: 'labels',
label: 'Labels',
items: [
{
label: 'bug',
chip: {
color: 'error',
},
},
{
label: 'feature',
chip: {
color: 'success',
},
},
{
label: 'enhancement',
chip: {
color: 'info',
},
},
],
}, {
id: 'users',
label: 'Users',
items: [{
label: 'barbapapazes',
avatar: {
src: 'https://github.com/barbapapazes.png',
},
target: '_blank',
}],
}]
const props = { groups }
it.each<[string, RenderOptions<typeof CommandPalette>]>([
// Props
['with groups', { props }],
['without data', {}],
['with modelValue', { props: { ...props, modelValue: groups[2]?.items?.[0] } }],
['with defaultValue', { props: { ...props, defaultValue: groups[2]?.items?.[0] } }],
['with labelKey', { props: { ...props, labelKey: 'icon' } }],
['with placeholder', { props: { ...props, placeholder: 'Search...' } }],
['with disabled', { props: { ...props, disabled: true } }],
['with icon', { props: { ...props, icon: 'i-lucide-terminal' } }],
['with loading', { props: { ...props, loading: true } }],
['with close', { props: { ...props, close: true } }],
['with as', { props: { ...props, as: 'section' } }],
['with class', { props: { ...props, class: 'divide-(--ui-border-accented)' } }],
['with ui', { props: { ...props, ui: { input: '[&>input]:h-10' } } }],
// Slots
['with empty slot', { props, slots: { empty: () => 'Empty 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' } }],
['with custom slot', { props, slots: { custom: () => 'Custom slot' } }],
['with close slot', { props: { ...props, close: true }, slots: { close: () => 'Close slot' } }],
])('renders %s correctly', (name, options) => {
const { html } = render(CommandPalette, options)
expect(html()).toMatchSnapshot()
})
})ts
import type { CommandPaletteGroup, CommandPaletteItem } from '@/UI/Components/CommandPalette.vue'
import type { RenderOptions } from '@testing-library/vue'
import CommandPalette from '@/UI/Components/CommandPalette.vue'
import { render } from '@testing-library/vue'
import { describe, expect, it, vi } from 'vitest'
describe('commandPalette', () => {
Element.prototype.scrollIntoView = vi.fn()
const groups: CommandPaletteGroup<CommandPaletteItem>[] = [{
id: 'actions',
items: [{
label: 'Add new file',
suffix: 'Create a new file in the current directory or workspace.',
icon: 'i-lucide-file-plus',
kbds: ['meta', 'N'],
active: true,
}, {
label: 'Add new folder',
suffix: 'Create a new folder in the current directory or workspace.',
icon: 'i-lucide-folder-plus',
kbds: ['meta', 'F'],
}, {
label: 'Add hashtag',
suffix: 'Add a hashtag to the current item.',
icon: 'i-lucide-hash',
kbds: ['meta', 'H'],
disabled: true,
}, {
label: 'Add label',
suffix: 'Add a label to the current item.',
icon: 'i-lucide-tag',
kbds: ['meta', 'L'],
slot: 'custom',
}],
}, {
id: 'labels',
label: 'Labels',
items: [
{
label: 'bug',
chip: {
color: 'error',
},
},
{
label: 'feature',
chip: {
color: 'success',
},
},
{
label: 'enhancement',
chip: {
color: 'info',
},
},
],
}, {
id: 'users',
label: 'Users',
items: [{
label: 'barbapapazes',
avatar: {
src: 'https://github.com/barbapapazes.png',
},
target: '_blank',
}],
}]
const props = { groups }
it.each<[string, RenderOptions<typeof CommandPalette>]>([
// Props
['with groups', { props }],
['without data', {}],
['with modelValue', { props: { ...props, modelValue: groups[2]?.items?.[0] } }],
['with defaultValue', { props: { ...props, defaultValue: groups[2]?.items?.[0] } }],
['with labelKey', { props: { ...props, labelKey: 'icon' } }],
['with placeholder', { props: { ...props, placeholder: 'Search...' } }],
['with disabled', { props: { ...props, disabled: true } }],
['with icon', { props: { ...props, icon: 'i-lucide-terminal' } }],
['with loading', { props: { ...props, loading: true } }],
['with close', { props: { ...props, close: true } }],
['with as', { props: { ...props, as: 'section' } }],
['with class', { props: { ...props, class: 'divide-(--ui-border-accented)' } }],
['with ui', { props: { ...props, ui: { input: '[&>input]:h-10' } } }],
// Slots
['with empty slot', { props, slots: { empty: () => 'Empty 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' } }],
['with custom slot', { props, slots: { custom: () => 'Custom slot' } }],
['with close slot', { props: { ...props, close: true }, slots: { close: () => 'Close slot' } }],
])('renders %s correctly', (name, options) => {
const { html } = render(CommandPalette, options)
expect(html()).toMatchSnapshot()
})
})Contributors
barbapapazes