From 4eb4b65167dcace44f2b047c95aa986cde357694 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sun, 17 Jul 2022 17:21:15 +0200
Subject: [PATCH] chore(CommandPalette): one fuse per group

---
 .../components/navigation/CommandPalette.vue  | 34 +++++++++----------
 .../navigation/CommandPaletteGroup.vue        |  4 +--
 src/runtime/types/command-palette.d.ts        | 23 +++++++++++++
 src/runtime/types/command-palette.ts          | 15 --------
 4 files changed, 41 insertions(+), 35 deletions(-)
 create mode 100644 src/runtime/types/command-palette.d.ts
 delete mode 100644 src/runtime/types/command-palette.ts

diff --git a/src/runtime/components/navigation/CommandPalette.vue b/src/runtime/components/navigation/CommandPalette.vue
index e96aac16..117e905d 100644
--- a/src/runtime/components/navigation/CommandPalette.vue
+++ b/src/runtime/components/navigation/CommandPalette.vue
@@ -15,8 +15,8 @@
         <UButton v-if="closeIcon" :icon="closeIcon" variant="transparent" class="absolute right-3" @click="onClear" />
       </div>
 
-      <ComboboxOptions v-if="results.length" static hold class="relative flex-1 overflow-y-auto divide-y u-divide-gray-100 scroll-py-2">
-        <CommandPaletteGroup v-for="group of groupedResults" :key="group.key" :group="group" />
+      <ComboboxOptions v-if="groups.length" static hold class="relative flex-1 overflow-y-auto divide-y u-divide-gray-100 scroll-py-2">
+        <CommandPaletteGroup v-for="group of groups" :key="group.key" :group="group" />
       </ComboboxOptions>
 
       <div v-else class="flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14">
@@ -32,10 +32,10 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { Combobox, ComboboxInput, ComboboxOptions } from '@headlessui/vue'
-import type { PropType, ComponentPublicInstance } from 'vue'
+import type { ComputedRef, PropType, ComponentPublicInstance } from 'vue'
 import { useFuse } from '@vueuse/integrations/useFuse'
-import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import { defu } from 'defu'
+import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import type { Group, Command } from '../../types/command-palette'
 import CommandPaletteGroup from './CommandPaletteGroup.vue'
 
@@ -75,29 +75,27 @@ onMounted(() => {
   activateFirstOption()
 })
 
-// Computed
-
-const commands = computed(() => props.groups.flatMap(group => group.commands.map(command => ({ ...command, group: group.key }))))
-
-const options = computed(() => defu({}, {
+const options: ComputedRef<Partial<UseFuseOptions<Command>>> = computed(() => defu({}, {
   fuseOptions: {
-    keys: ['label'],
-    isCaseSensitive: false,
-    threshold: undefined
+    keys: ['label']
   },
   resultLimit: 12,
   matchAllWhenSearchEmpty: true
 }, props.options))
 
-const { results } = useFuse(query, commands, options)
+const fuse = props.groups.reduce((acc, group) => {
+  const fuse = useFuse(query, group.commands, defu({}, group.options || {}, options.value))
+  acc[group.key] = fuse
+  return acc
+}, {})
 
-const groupedResults = computed(() => {
-  return props.groups.map(group => ({
+const groups = computed(() => props.groups.map((group) => {
+  return {
     key: group.key,
     label: group.label,
-    commands: results.value.map(result => result.item).filter(item => item.group === group.key).slice(0, options.value.resultLimit)
-  })).filter(group => group.commands.length)
-})
+    commands: fuse[group.key].results.value.map(result => result.item).slice(0, group.options?.resultLimit || options.value.resultLimit)
+  }
+}).filter(group => group.commands.length))
 
 // Methods
 
diff --git a/src/runtime/components/navigation/CommandPaletteGroup.vue b/src/runtime/components/navigation/CommandPaletteGroup.vue
index 8051d19e..42dc7aef 100644
--- a/src/runtime/components/navigation/CommandPaletteGroup.vue
+++ b/src/runtime/components/navigation/CommandPaletteGroup.vue
@@ -30,11 +30,11 @@
 <script setup lang="ts">
 import { ComboboxOption } from '@headlessui/vue'
 import type { PropType } from 'vue'
-import type { Group } from '../../types/command-palette'
+import type { ComputedGroup } from '../../types/command-palette'
 
 defineProps({
   group: {
-    type: Object as PropType<Group>,
+    type: Object as PropType<ComputedGroup>,
     required: true
   }
 })
diff --git a/src/runtime/types/command-palette.d.ts b/src/runtime/types/command-palette.d.ts
new file mode 100644
index 00000000..f8328780
--- /dev/null
+++ b/src/runtime/types/command-palette.d.ts
@@ -0,0 +1,23 @@
+import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
+import Fuse from 'fuse.js'
+
+export interface Command {
+  disabled?: boolean
+  icon?: string
+  iconColor?: string
+  iconClass?: string
+  avatar?: string
+  label: string
+  group?: string
+}
+
+export interface Group {
+  key: string
+  label: string
+  commands: Command[]
+  options: Partial<UseFuseOptions<Command>>
+}
+
+export interface ComputedGroup extends Omit<Group, 'options' | 'commands'> {
+  commands: Fuse.FuseResult<Command>[]
+}
diff --git a/src/runtime/types/command-palette.ts b/src/runtime/types/command-palette.ts
deleted file mode 100644
index 8bb671cb..00000000
--- a/src/runtime/types/command-palette.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export interface Command {
-  disabled?: boolean
-  icon?: string
-  iconColor?: string
-  iconClass?: string
-  avatar?: string
-  label: string
-  group?: string
-}
-
-export interface Group {
-  key: string
-  label: string
-  commands: Command[]
-}