mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-25 09:20:36 +01:00
docs(command-palette): update
This commit is contained in:
Benjamin Canac
@@ -1,6 +1,8 @@
|
||||
---
|
||||
title: CommandPalette
|
||||
description: A command palette to search and execute commands with full-text search.
|
||||
description: A command palette with full-text search powered by [Fuse.js](https://fusejs.io/) for efficient fuzzy matching.
|
||||
seo:
|
||||
description: A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.
|
||||
links:
|
||||
- label: Combobox
|
||||
icon: i-custom-radix-vue
|
||||
@@ -12,11 +14,15 @@ links:
|
||||
|
||||
## Usage
|
||||
|
||||
The CommandPalette component leverages [Fuse.js](https://fusejs.io/) to provide robust and efficient fuzzy search functionality.
|
||||
Use the `v-model` directive to control the value of the CommandPalette or the `default-value` prop to set the initial value when you do not need to control its state.
|
||||
|
||||
::tip{to="#control-selected-items"}
|
||||
You can also use the `@update:model-value` event to listen to the selected item(s).
|
||||
::
|
||||
|
||||
### Groups
|
||||
|
||||
When searching for a command, the groups are filtered and the matching commands are presented in order of relevance. Use the `groups` prop as an array of objects with the following properties:
|
||||
The CommandPalette component filters groups and ranks matching commands by relevance as users type. It provides dynamic, instant search results for efficient command discovery. Use the `groups` prop as an array of objects with the following properties:
|
||||
|
||||
- `id: string`{lang="ts-type"}
|
||||
- `label?: string`{lang="ts-type"}
|
||||
@@ -44,48 +50,47 @@ Each group takes some `items` as an array of objects with the following properti
|
||||
collapse: true
|
||||
ignore:
|
||||
- groups
|
||||
- modelValue
|
||||
- class
|
||||
external:
|
||||
- groups
|
||||
- modelValue
|
||||
class: '!p-0'
|
||||
props:
|
||||
modelValue: {}
|
||||
groups:
|
||||
- id: 'suggestions'
|
||||
label: 'Suggestions'
|
||||
- id: 'users'
|
||||
label: 'Users'
|
||||
items:
|
||||
- label: 'Calendar'
|
||||
icon: 'i-heroicons-calendar'
|
||||
- label: 'Music'
|
||||
icon: 'i-heroicons-musical-note'
|
||||
- label: 'Maps'
|
||||
icon: 'i-heroicons-map'
|
||||
- id: 'actions'
|
||||
items:
|
||||
- label: 'Add new file'
|
||||
suffix: 'Create a new file in the current directory or workspace.'
|
||||
icon: 'i-heroicons-document-plus'
|
||||
kbds:
|
||||
- meta
|
||||
- N
|
||||
- label: 'Add new folder'
|
||||
suffix: 'Create a new folder in the current directory or workspace.'
|
||||
icon: 'i-heroicons-folder-plus'
|
||||
kbds:
|
||||
- meta
|
||||
- F
|
||||
- label: 'Add hashtag'
|
||||
suffix: 'Add a hashtag to the current item.'
|
||||
icon: 'i-heroicons-hashtag'
|
||||
kbds:
|
||||
- meta
|
||||
- H
|
||||
- label: 'Add label'
|
||||
suffix: 'Add a label to the current item.'
|
||||
icon: 'i-heroicons-tag'
|
||||
kbds:
|
||||
- meta
|
||||
- L
|
||||
class: 'flex-1 max-h-80'
|
||||
- label: 'Benjamin Canac'
|
||||
suffix: 'benjamincanac'
|
||||
avatar:
|
||||
src: 'https://github.com/benjamincanac.png'
|
||||
- label: 'Sylvain Marroufin'
|
||||
suffix: 'smarroufin'
|
||||
avatar:
|
||||
src: 'https://github.com/smarroufin.png'
|
||||
- label: 'Sébastien Chopin'
|
||||
suffix: 'atinux'
|
||||
avatar:
|
||||
src: 'https://github.com/atinux.png'
|
||||
- label: 'Romain Hamel'
|
||||
suffix: 'romhml'
|
||||
avatar:
|
||||
src: 'https://github.com/romhml.png'
|
||||
- label: 'Haytham A. Salama'
|
||||
suffix: 'Haythamasalama'
|
||||
avatar:
|
||||
src: 'https://github.com/Haythamasalama.png'
|
||||
- label: 'Daniel Roe'
|
||||
suffix: 'danielroe'
|
||||
avatar:
|
||||
src: 'https://github.com/danielroe.png'
|
||||
- label: 'Neil Richter'
|
||||
suffix: 'noook'
|
||||
avatar:
|
||||
src: 'https://github.com/noook.png'
|
||||
class: 'flex-1'
|
||||
---
|
||||
::
|
||||
|
||||
@@ -93,6 +98,65 @@ props:
|
||||
You must provide an `id` for each group otherwise the group will be ignored.
|
||||
::
|
||||
|
||||
### Multiple
|
||||
|
||||
Use the `multiple` prop to allow multiple selections.
|
||||
|
||||
::component-code
|
||||
---
|
||||
collapse: true
|
||||
ignore:
|
||||
- groups
|
||||
- modelValue
|
||||
- multiple
|
||||
- class
|
||||
external:
|
||||
- groups
|
||||
- modelValue
|
||||
class: '!p-0'
|
||||
props:
|
||||
multiple: true
|
||||
modelValue: []
|
||||
groups:
|
||||
- id: 'users'
|
||||
label: 'Users'
|
||||
items:
|
||||
- label: 'Benjamin Canac'
|
||||
suffix: 'benjamincanac'
|
||||
avatar:
|
||||
src: 'https://github.com/benjamincanac.png'
|
||||
- label: 'Sylvain Marroufin'
|
||||
suffix: 'smarroufin'
|
||||
avatar:
|
||||
src: 'https://github.com/smarroufin.png'
|
||||
- label: 'Sébastien Chopin'
|
||||
suffix: 'atinux'
|
||||
avatar:
|
||||
src: 'https://github.com/atinux.png'
|
||||
- label: 'Romain Hamel'
|
||||
suffix: 'romhml'
|
||||
avatar:
|
||||
src: 'https://github.com/romhml.png'
|
||||
- label: 'Haytham A. Salama'
|
||||
suffix: 'Haythamasalama'
|
||||
avatar:
|
||||
src: 'https://github.com/Haythamasalama.png'
|
||||
- label: 'Daniel Roe'
|
||||
suffix: 'danielroe'
|
||||
avatar:
|
||||
src: 'https://github.com/danielroe.png'
|
||||
- label: 'Neil Richter'
|
||||
suffix: 'noook'
|
||||
avatar:
|
||||
src: 'https://github.com/noook.png'
|
||||
class: 'flex-1'
|
||||
---
|
||||
::
|
||||
|
||||
::caution
|
||||
Ensure to pass an array to the `default-value` prop or the `v-model` directive.
|
||||
::
|
||||
|
||||
### Placeholder
|
||||
|
||||
Use the `placeholder` prop to change the placeholder text.
|
||||
@@ -345,32 +409,18 @@ You can customize this icon globally in your `app.config.ts` under `ui.icons.clo
|
||||
|
||||
### Control selected item(s)
|
||||
|
||||
You can control the selected item by using the `default-value` prop or the `v-model` directive.
|
||||
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.
|
||||
|
||||
::component-example
|
||||
---
|
||||
collapse: true
|
||||
name: 'command-palette-model-value-example'
|
||||
name: 'command-palette-select-example'
|
||||
class: '!p-0'
|
||||
---
|
||||
::
|
||||
|
||||
::tip
|
||||
You can also use the `select` field on each item and/or the `@update:model-value` event.
|
||||
::
|
||||
|
||||
Use the `multiple` prop to allow multiple selections.
|
||||
|
||||
::component-example
|
||||
---
|
||||
collapse: true
|
||||
name: 'command-palette-model-value-multiple-example'
|
||||
class: '!p-0'
|
||||
---
|
||||
::
|
||||
|
||||
::caution
|
||||
Ensure to pass an array to the `default-value` prop or the `v-model` directive.
|
||||
::note
|
||||
This example demonstrates how to use the `@update:model-value` event to handle different selection scenarios.
|
||||
::
|
||||
|
||||
### Control search term
|
||||
@@ -385,6 +435,10 @@ class: '!p-0'
|
||||
---
|
||||
::
|
||||
|
||||
::note
|
||||
This example uses the `@update:model-value` event to reset the search term when an item is selected.
|
||||
::
|
||||
|
||||
### With fetched items
|
||||
|
||||
You can fetch items from an API and use them in the CommandPalette.
|
||||
|
||||
Reference in New Issue
Block a user