From 8ba2a791e4877682705bd752d4ab6f9c52d0b37b Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 26 Oct 2023 11:59:55 +0200
Subject: [PATCH] feat(CommandPalette): handle `filter` attribute in groups
 (#871)

---
 .../examples/CommandPaletteExampleAsync.vue   | 26 ++++++++--------
 .../examples/CommandPaletteExampleFilter.vue  | 30 +++++++++++++++++++
 .../content/5.navigation/2.command-palette.md | 13 ++++++++
 .../components/navigation/CommandPalette.vue  | 17 +++++++++--
 src/runtime/types/command-palette.d.ts        |  1 +
 5 files changed, 70 insertions(+), 17 deletions(-)
 create mode 100644 docs/components/content/examples/CommandPaletteExampleFilter.vue

diff --git a/docs/components/content/examples/CommandPaletteExampleAsync.vue b/docs/components/content/examples/CommandPaletteExampleAsync.vue
index 02f0c685..76533809 100644
--- a/docs/components/content/examples/CommandPaletteExampleAsync.vue
+++ b/docs/components/content/examples/CommandPaletteExampleAsync.vue
@@ -1,19 +1,17 @@
 <script setup>
-const groups = computed(() => {
-  return [{
-    key: 'users',
-    label: q => q && `Users matching “${q}”...`,
-    search: async (q) => {
-      if (!q) {
-        return []
-      }
-
-      const users = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })
-
-      return users.map(user => ({ id: user.id, label: user.name, suffix: user.email }))
+const groups = [{
+  key: 'users',
+  label: q => q && `Users matching “${q}”...`,
+  search: async (q) => {
+    if (!q) {
+      return []
     }
-  }].filter(Boolean)
-})
+
+    const users = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })
+
+    return users.map(user => ({ id: user.id, label: user.name, suffix: user.email }))
+  }
+}]
 </script>
 
 <template>
diff --git a/docs/components/content/examples/CommandPaletteExampleFilter.vue b/docs/components/content/examples/CommandPaletteExampleFilter.vue
new file mode 100644
index 00000000..d5f77e24
--- /dev/null
+++ b/docs/components/content/examples/CommandPaletteExampleFilter.vue
@@ -0,0 +1,30 @@
+<script setup>
+const people = [
+  { id: 1, label: 'Wade Cooper', child: true },
+  { id: 2, label: 'Arlene Mccoy' },
+  { id: 3, label: 'Devon Webb', child: true },
+  { id: 4, label: 'Tom Cook' },
+  { id: 5, label: 'Tanya Fox', child: true },
+  { id: 6, label: 'Hellen Schmidt' },
+  { id: 7, label: 'Caroline Schultz', child: true },
+  { id: 8, label: 'Mason Heaney' },
+  { id: 9, label: 'Claudie Smitham', child: true },
+  { id: 10, label: 'Emil Schaefer' }
+]
+
+const groups = [{
+  key: 'users',
+  commands: people,
+  filter: (q, commands) => {
+    if (!q) {
+      return commands?.filter(command => !command.child)
+    }
+
+    return commands
+  }
+}]
+</script>
+
+<template>
+  <UCommandPalette :groups="groups" :autoselect="false" />
+</template>
diff --git a/docs/content/5.navigation/2.command-palette.md b/docs/content/5.navigation/2.command-palette.md
index 3425eae2..e2730fb6 100644
--- a/docs/content/5.navigation/2.command-palette.md
+++ b/docs/content/5.navigation/2.command-palette.md
@@ -183,6 +183,19 @@ componentProps:
 The `loading` state will automatically be enabled when a `search` function is loading. You can disable this behavior by setting the `loading-icon` prop to `null` or globally in `ui.commandPalette.default.loadingIcon`.
 ::
 
+## Filter search
+
+You can also pass a function to the `filter` property of a group to filter displayed commands after the search happened. The function will receive the query as its first argument, the array of commands as second argument and should return an array of commands.
+
+::component-example
+---
+padding: false
+component: 'command-palette-example-filter'
+componentProps:
+  class: 'h-[274px]'
+---
+::
+
 ## Slots
 
 ### `<group>-icon`
diff --git a/src/runtime/components/navigation/CommandPalette.vue b/src/runtime/components/navigation/CommandPalette.vue
index a9c5da47..425c1763 100644
--- a/src/runtime/components/navigation/CommandPalette.vue
+++ b/src/runtime/components/navigation/CommandPalette.vue
@@ -237,7 +237,8 @@ export default defineComponent({
       }
       for (const key in groupedCommands) {
         const group = props.groups.find(group => group.key === key)
-        const commands = groupedCommands[key].slice(0, options.value.resultLimit).map((result) => {
+
+        let commands = groupedCommands[key].map((result) => {
           const { item, ...data } = result
 
           return {
@@ -246,12 +247,22 @@ export default defineComponent({
           } as Command
         })
 
-        groups.push({ ...group, commands })
+        if (group.filter && typeof group.filter === 'function') {
+          commands = group.filter(query.value, commands)
+        }
+
+        groups.push({ ...group, commands: commands.slice(0, options.value.resultLimit) })
       }
 
       for (const group of props.groups) {
         if (group.search && searchResults.value[group.key]?.length) {
-          groups.push({ ...group, commands: (searchResults.value[group.key] || []).slice(0, options.value.resultLimit) })
+          let commands = (searchResults.value[group.key] || [])
+
+          if (group.filter && typeof group.filter === 'function') {
+            commands = group.filter(query.value, commands)
+          }
+
+          groups.push({ ...group, commands: commands.slice(0, options.value.resultLimit) })
         }
       }
 
diff --git a/src/runtime/types/command-palette.d.ts b/src/runtime/types/command-palette.d.ts
index 53dd847c..f8d2c05f 100644
--- a/src/runtime/types/command-palette.d.ts
+++ b/src/runtime/types/command-palette.d.ts
@@ -23,5 +23,6 @@ export interface Group {
   inactive?: string
   commands?: Command[]
   search?: Function
+  filter?: Function
   [key: string]: any
 }