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 @@
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 @@
+
+
+
+
+
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
### `-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
}