diff --git a/src/runtime/components/navigation/CommandPalette.vue b/src/runtime/components/navigation/CommandPalette.vue index cd75193091..f6f8684d46 100644 --- a/src/runtime/components/navigation/CommandPalette.vue +++ b/src/runtime/components/navigation/CommandPalette.vue @@ -115,6 +115,7 @@ const options: ComputedRef>> = computed(() => de })) const fuse = props.groups.reduce((acc, group) => { + // FIXME: useFuse is not watching data correctly, so we need to add an id const fuse = useFuse(group.customQuery ? group.customQuery(query) : query, group.commands, defu({}, group.options || {}, options.value)) acc[group.key] = fuse return acc @@ -123,7 +124,7 @@ const fuse = props.groups.reduce((acc, group) => { const groups = computed(() => props.groups.map((group) => { return { ...group, - commands: fuse[group.key].results.value.map(result => result.item).slice(0, group.options?.resultLimit || options.value.resultLimit) + commands: fuse[group.key].results.value.map(result => group.commands.find(command => command.id === result.item.id)).slice(0, group.options?.resultLimit || options.value.resultLimit) } }).filter(group => group.commands.length)) diff --git a/src/runtime/types/command-palette.d.ts b/src/runtime/types/command-palette.d.ts index 8ea9e06c18..fe309a163d 100644 --- a/src/runtime/types/command-palette.d.ts +++ b/src/runtime/types/command-palette.d.ts @@ -3,9 +3,9 @@ import type { UseFuseOptions } from '@vueuse/integrations/useFuse' import type { Avatar } from './avatar' export interface Command { + id: string | number prefix?: string suffix?: string - label: string icon?: string iconClass?: string avatar?: Partial @@ -16,7 +16,6 @@ export interface Command { export interface Group { key: string - label: string active?: string inactive?: string commands: Command[]