feat(CommandPalette): support link props in items

Resolves #3190
This commit is contained in:
Benjamin Canac
2025-01-28 14:50:37 +01:00
parent 527631d2d1
commit e2b78a78a4
9 changed files with 526 additions and 865 deletions

View File

@@ -34,7 +34,11 @@ The CommandPalette component filters groups and ranks matching commands by relev
- [`postFilter?: (searchTerm: string, items: T[]) => T[]`{lang="ts-type"}](#with-post-filtered-items)
- `highlightedIcon?: string`{lang="ts-type"}
Each group takes some `items` as an array of objects with the following properties:
::caution
You must provide an `id` for each group otherwise the group will be ignored.
::
Each group contains an `items` array of objects that define the commands. Each item can have the following properties:
- `prefix?: string`{lang="ts-type"}
- `label?: string`{lang="ts-type"}
@@ -49,6 +53,8 @@ Each group takes some `items` as an array of objects with the following properti
- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
- `onSelect?(e?: Event): void`{lang="ts-type"}
You can pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.
::component-code
---
collapse: true
@@ -98,10 +104,6 @@ props:
---
::
::caution
You must provide an `id` for each group otherwise the group will be ignored.
::
### Multiple
Use the `multiple` prop to allow multiple selections.
@@ -437,7 +439,7 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.cl
### Control selected item(s)
You can control the selected item by using the `default-value` prop or the `v-model` directive, by using the `select` field on each item or by using the `@update:model-value` event.
You can control the selected item(s) by using the `default-value` prop or the `v-model` directive, by using the `onSelect` field on each item or by using the `@update:model-value` event.
::component-example
---
@@ -447,10 +449,6 @@ class: '!p-0'
---
::
::note
This example demonstrates how to use the `@update:model-value` event to handle different selection scenarios.
::
### Control search term
Use the `v-model:search-term` directive to control the search term.