From ce91b5d75a697849a7f9bb623ec66aa3a723ff25 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 12 Sep 2024 18:29:23 +0200
Subject: [PATCH] docs(command-palette): update

---
 docs/content/3.components/command-palette.md | 117 +++++++++++++++++++
 docs/nuxt.config.ts                          |   1 +
 2 files changed, 118 insertions(+)

diff --git a/docs/content/3.components/command-palette.md b/docs/content/3.components/command-palette.md
index e994f51903..c8d9a5a481 100644
--- a/docs/content/3.components/command-palette.md
+++ b/docs/content/3.components/command-palette.md
@@ -8,10 +8,127 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/CommandPalette.vue
+navigation:
+  badge:
+    label: Todo
 ---
 
 ## Usage
 
+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.
+
+::note
+You can also use it without any of these and either use the `select` field on each item and/or the `@update:model-value` event to handle the selection.
+::
+
+### Groups
+
+Use the `groups` prop as an array of objects with the following properties:
+
+- `id: string`{lang="ts-type"}
+- `label?: string`{lang="ts-type"}
+- `slot?: string`{lang="ts-type"}
+- `items?: CommandPaletteItem[]`{lang="ts-type"}
+- `filter?: boolean`{lang="ts-type"}
+- `postFilter?: (searchTerm: string, items: T[]) => T[]`{lang="ts-type"}
+- `highlightedIcon?: string`{lang="ts-type"}
+
+Each group takes some `items` as an array of objects with the following properties:
+
+- `prefix?: string`{lang="ts-type"}
+- `label?: string`{lang="ts-type"}
+- `suffix?: string`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `avatar?: AvatarProps`{lang="ts-type"}
+- `chip?: ChipProps`{lang="ts-type"}
+- `kbds?: string[] | KbdProps[]`{lang="ts-type"}
+- `disabled?: boolean`{lang="ts-type"}
+- `slot?: string`{lang="ts-type"}
+- `select?(e?: Event): void`{lang="ts-type"}
+
+::component-code
+---
+collapse: true
+ignore:
+  - groups
+  - class
+external:
+  - groups
+class: '!p-0'
+props:
+  groups:
+    - id: 'users'
+      label: 'Users'
+      items:
+        - label: 'John Doe'
+          suffix: 'john.doe@example.com'
+          icon: 'i-heroicons-user'
+        - label: 'Jane Doe'
+          suffix: 'jane.doe@example.com'
+          icon: 'i-heroicons-user'
+        - label: 'John Smith'
+          suffix: 'john.smith@example.com'
+          icon: 'i-heroicons-user'
+  class: 'flex-1'
+---
+::
+
+### Multiple
+
+Use the `multiple` prop to allow multiple selections.
+
+::component-code
+---
+collapse: true
+ignore:
+  - groups
+  - class
+external:
+  - groups
+class: '!p-0'
+props:
+  groups:
+    - id: 'actions'
+      label: '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'
+---
+::
+
+### Placeholder
+
+### Icon
+
+### Loading
+
+### Disabled
+
+### Close
+
 ## Examples
 
 ### Control search term
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index c6db2ae7bd..1d9ee068f5 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -126,6 +126,7 @@ export default defineNuxtConfig({
         'UCheckbox',
         'UChip',
         'UCollapsible',
+        'UCommandPalette',
         'UContextMenu',
         'UDrawer',
         'UDropdownMenu',