fix(CommandPalette): hack for reactivity

nuxt · Jul 22, 2022 · b43394d · b43394d
1 parent be94fea
commit b43394d
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/src/runtime/components/navigation/CommandPalette.vue b/src/runtime/components/navigation/CommandPalette.vue
@@ -115,6 +115,7 @@ const options: ComputedRef<Partial<UseFuseOptions<Command>>> = 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
@@ -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<Avatar>
@@ -16,7 +16,6 @@ export interface Command {
 
 export interface Group {
   key: string
-  label: string
   active?: string
   inactive?: string
   commands: Command[]