From 5e4c49ae3a94fcf98ae8b64a713dd080f4c0abde Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sun, 17 Jul 2022 14:00:42 +0200
Subject: [PATCH] chore(CommandPalette): improve options and always slice
 results

---
 .../components/navigation/CommandPalette.vue  | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/runtime/components/navigation/CommandPalette.vue b/src/runtime/components/navigation/CommandPalette.vue
index dc1f5c0d..6f57ca53 100644
--- a/src/runtime/components/navigation/CommandPalette.vue
+++ b/src/runtime/components/navigation/CommandPalette.vue
@@ -61,15 +61,7 @@ const props = defineProps({
   },
   options: {
     type: Object as PropType<UseFuseOptions<Command>>,
-    default: () => ({
-      fuseOptions: {
-        keys: ['label'],
-        isCaseSensitive: false,
-        threshold: undefined
-      },
-      resultLimit: 12,
-      matchAllWhenSearchEmpty: true
-    })
+    default: () => ({})
   }
 })
 
@@ -86,13 +78,23 @@ onMounted(() => {
 
 const commands = computed(() => props.groups.flatMap(group => group.commands.map(command => ({ ...command, group: group.key }))))
 
-const { results } = useFuse(query, commands, props.options)
+const options = computed(() => Object.assign({}, {
+  fuseOptions: {
+    keys: ['label'],
+    isCaseSensitive: false,
+    threshold: undefined
+  },
+  resultLimit: 12,
+  matchAllWhenSearchEmpty: true
+}, props.options))
+
+const { results } = useFuse(query, commands, options)
 
 const groupedResults = computed(() => {
   return props.groups.map(group => ({
     key: group.key,
     label: group.label,
-    commands: results.value.map(result => result.item).filter(item => item.group === group.key)
+    commands: results.value.map(result => result.item).filter(item => item.group === group.key).slice(0, props.options.resultLimit)
   })).filter(group => group.commands.length)
 })