diff --git a/docs/components/content/examples/CommandPaletteExampleAsync.vue b/docs/components/content/examples/CommandPaletteExampleAsync.vue
index 02f0c68526..7653380922 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 0000000000..d5f77e240b
--- /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 3425eae223..e2730fb60c 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 a9c5da47c0..425c1763c1 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 53dd847ce8..f8d2c05fd6 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
}