diff --git a/docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue b/docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue
index b074d073..de510af5 100644
--- a/docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue
+++ b/docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue
@@ -1,40 +1,68 @@
-
-
+
+
diff --git a/docs/app/components/content/examples/command-palette/CommandPaletteModelValueExample.vue b/docs/app/components/content/examples/command-palette/CommandPaletteModelValueExample.vue
deleted file mode 100644
index 0250a276..00000000
--- a/docs/app/components/content/examples/command-palette/CommandPaletteModelValueExample.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-
-
-
-
-
diff --git a/docs/app/components/content/examples/command-palette/CommandPaletteModelValueMultipleExample.vue b/docs/app/components/content/examples/command-palette/CommandPaletteModelValueMultipleExample.vue
deleted file mode 100644
index 73e388b2..00000000
--- a/docs/app/components/content/examples/command-palette/CommandPaletteModelValueMultipleExample.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
-
diff --git a/docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue b/docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue
index 5298cd06..2034a6ec 100644
--- a/docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue
+++ b/docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue
@@ -2,11 +2,55 @@
const open = ref(false)
const users = [
- { id: 1, label: 'Durward Reynolds' },
- { id: 2, label: 'Kenton Towne' },
- { id: 3, label: 'Therese Wunsch' },
- { id: 4, label: 'Benedict Kessler' },
- { id: 5, label: 'Katelyn Rohan' }
+ {
+ 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'
+ }
+ }
]
@@ -20,11 +64,7 @@ const users = [
/>
-
+
diff --git a/docs/app/components/content/examples/command-palette/CommandPalettePostFilterExample.vue b/docs/app/components/content/examples/command-palette/CommandPalettePostFilterExample.vue
index 2622d31a..34295133 100644
--- a/docs/app/components/content/examples/command-palette/CommandPalettePostFilterExample.vue
+++ b/docs/app/components/content/examples/command-palette/CommandPalettePostFilterExample.vue
@@ -1,29 +1,36 @@
@@ -15,5 +84,6 @@ const searchTerm = ref('Th')
v-model:search-term="searchTerm"
:groups="[{ id: 'users', items: users }]"
class="flex-1"
+ @update:model-value="onSelect"
/>
diff --git a/docs/app/components/content/examples/command-palette/CommandPaletteSelectExample.vue b/docs/app/components/content/examples/command-palette/CommandPaletteSelectExample.vue
new file mode 100644
index 00000000..879f9092
--- /dev/null
+++ b/docs/app/components/content/examples/command-palette/CommandPaletteSelectExample.vue
@@ -0,0 +1,155 @@
+
+
+
+
+
diff --git a/docs/app/components/content/examples/drawer/DrawerCommandPaletteExample.vue b/docs/app/components/content/examples/drawer/DrawerCommandPaletteExample.vue
index d37c5ed2..e5daaf7c 100644
--- a/docs/app/components/content/examples/drawer/DrawerCommandPaletteExample.vue
+++ b/docs/app/components/content/examples/drawer/DrawerCommandPaletteExample.vue
@@ -18,7 +18,7 @@ const groups = computed(() => [{
-
+
[{
:loading="status === 'pending'"
:groups="groups"
placeholder="Search users..."
- class="h-96 border-t border-[var(--ui-border)]"
+ class="h-80"
/>
diff --git a/docs/app/components/content/examples/modal/ModalCommandPaletteExample.vue b/docs/app/components/content/examples/modal/ModalCommandPaletteExample.vue
index 560001de..d8c44acc 100644
--- a/docs/app/components/content/examples/modal/ModalCommandPaletteExample.vue
+++ b/docs/app/components/content/examples/modal/ModalCommandPaletteExample.vue
@@ -32,7 +32,7 @@ const groups = computed(() => [{
:loading="status === 'pending'"
:groups="groups"
placeholder="Search users..."
- class="h-96"
+ class="h-80"
/>
diff --git a/docs/app/pages/[...slug].vue b/docs/app/pages/[...slug].vue
index dec14c70..877fdb74 100644
--- a/docs/app/pages/[...slug].vue
+++ b/docs/app/pages/[...slug].vue
@@ -31,13 +31,14 @@ useSeoMeta({
titleTemplate: '%s - Nuxt UI v3',
title: page.value.navigation?.title || page.value.title,
ogTitle: `${page.value.navigation?.title || page.value.title} - Nuxt UI v3`,
- description: page.value.description,
- ogDescription: page.value.description
+ description: page.value.seo?.description || page.value.description,
+ ogDescription: page.value.seo?.description || page.value.description
})
defineOgImageComponent('Docs', {
headline: headline.value,
- title: page.value.title
+ title: page.value.title,
+ description: page.value.seo?.description || page.value.description
})
const communityLinks = computed(() => [{
diff --git a/docs/content/3.components/command-palette.md b/docs/content/3.components/command-palette.md
index 4139e43f..7361e76f 100644
--- a/docs/content/3.components/command-palette.md
+++ b/docs/content/3.components/command-palette.md
@@ -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.