From 8709717a328184076f747a76f553700b8733a421 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 20 Sep 2024 18:40:52 +0200
Subject: [PATCH] docs(command-palette): update

---
 .../CommandPaletteCustomSlotExample.vue       |  48 ++
 .../CommandPaletteFetchExample.vue            |  25 +
 .../CommandPaletteFilterExample.vue           |  28 ++
 .../CommandPaletteFuseExample.vue             |  16 +
 .../CommandPaletteModelValueExample.vue       |  24 +
 ...ommandPaletteModelValueMultipleExample.vue |  25 +
 .../CommandPaletteOpenExample.vue             |  25 +
 .../CommandPalettePostFilterExample.vue       |  40 ++
 .../CommandPaletteSearchTermExample.vue       |  19 +
 docs/content/3.components/alert.md            |  32 +-
 docs/content/3.components/button.md           |  33 +-
 docs/content/3.components/checkbox.md         |  13 +-
 docs/content/3.components/command-palette.md  | 435 ++++++++++++++----
 docs/content/3.components/input.md            |  17 +-
 docs/content/3.components/modal.md            |  42 +-
 docs/content/3.components/select.md           |  26 +-
 docs/content/3.components/slideover.md        |  42 +-
 docs/content/3.components/switch.md           |  18 +-
 src/runtime/components/CommandPalette.vue     |  12 +-
 19 files changed, 780 insertions(+), 140 deletions(-)
 create mode 100644 docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue
 create mode 100644 docs/app/components/content/examples/command-palette/CommandPaletteFetchExample.vue
 create mode 100644 docs/app/components/content/examples/command-palette/CommandPaletteFilterExample.vue
 create mode 100644 docs/app/components/content/examples/command-palette/CommandPaletteFuseExample.vue
 create mode 100644 docs/app/components/content/examples/command-palette/CommandPaletteModelValueExample.vue
 create mode 100644 docs/app/components/content/examples/command-palette/CommandPaletteModelValueMultipleExample.vue
 create mode 100644 docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue
 create mode 100644 docs/app/components/content/examples/command-palette/CommandPalettePostFilterExample.vue
 create mode 100644 docs/app/components/content/examples/command-palette/CommandPaletteSearchTermExample.vue

diff --git a/docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue b/docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue
new file mode 100644
index 00000000..96f89c1c
--- /dev/null
+++ b/docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const groups = [{
+  id: 'settings',
+  items: [{
+    label: 'Profile',
+    icon: 'i-heroicons-user',
+    kbds: ['meta', 'P']
+  }, {
+    label: 'Billing',
+    icon: 'i-heroicons-credit-card',
+    kbds: ['meta', 'B'],
+    slot: 'billing'
+  }, {
+    label: 'Notifications',
+    icon: 'i-heroicons-bell'
+  }, {
+    label: 'Security',
+    icon: 'i-heroicons-lock-closed'
+  }]
+}, {
+  id: 'users',
+  label: 'Users',
+  slot: 'users',
+  items: [
+    { 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' }
+  ]
+}]
+</script>
+
+<template>
+  <UCommandPalette :groups="groups" class="flex-1 h-80">
+    <template #users-leading="{ item }">
+      <UAvatar :src="`https://i.pravatar.cc/120?img=${item.id}`" size="2xs" />
+    </template>
+
+    <template #billing-label="{ item }">
+      {{ item.label }}
+
+      <UBadge variant="subtle" size="sm">
+        50% off
+      </UBadge>
+    </template>
+  </UCommandPalette>
+</template>
diff --git a/docs/app/components/content/examples/command-palette/CommandPaletteFetchExample.vue b/docs/app/components/content/examples/command-palette/CommandPaletteFetchExample.vue
new file mode 100644
index 00000000..ddd198da
--- /dev/null
+++ b/docs/app/components/content/examples/command-palette/CommandPaletteFetchExample.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const searchTerm = ref('')
+
+const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  transform: (data: any[]) => {
+    return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
+  },
+  lazy: true
+})
+
+const groups = computed(() => [{
+  id: 'users',
+  label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
+  items: users.value || []
+}])
+</script>
+
+<template>
+  <UCommandPalette
+    v-model:search-term="searchTerm"
+    :loading="status === 'pending'"
+    :groups="groups"
+    class="flex-1 h-80"
+  />
+</template>
diff --git a/docs/app/components/content/examples/command-palette/CommandPaletteFilterExample.vue b/docs/app/components/content/examples/command-palette/CommandPaletteFilterExample.vue
new file mode 100644
index 00000000..9caf25f5
--- /dev/null
+++ b/docs/app/components/content/examples/command-palette/CommandPaletteFilterExample.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const searchTerm = ref('')
+const searchTermDebounced = refDebounced(searchTerm, 200)
+
+const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  params: { q: searchTermDebounced },
+  transform: (data: any[]) => {
+    return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
+  },
+  lazy: true
+})
+
+const groups = computed(() => [{
+  id: 'users',
+  label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
+  items: users.value || [],
+  filter: false
+}])
+</script>
+
+<template>
+  <UCommandPalette
+    v-model:search-term="searchTerm"
+    :loading="status === 'pending'"
+    :groups="groups"
+    class="flex-1 h-80"
+  />
+</template>
diff --git a/docs/app/components/content/examples/command-palette/CommandPaletteFuseExample.vue b/docs/app/components/content/examples/command-palette/CommandPaletteFuseExample.vue
new file mode 100644
index 00000000..bb86f9de
--- /dev/null
+++ b/docs/app/components/content/examples/command-palette/CommandPaletteFuseExample.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  transform: (data: any[]) => {
+    return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
+  },
+  lazy: true
+})
+</script>
+
+<template>
+  <UCommandPalette
+    :groups="[{ id: 'users', items: users || [] }]"
+    :fuse="{ fuseOptions: { includeMatches: true } }"
+    class="flex-1 h-80"
+  />
+</template>
diff --git a/docs/app/components/content/examples/command-palette/CommandPaletteModelValueExample.vue b/docs/app/components/content/examples/command-palette/CommandPaletteModelValueExample.vue
new file mode 100644
index 00000000..0250a276
--- /dev/null
+++ b/docs/app/components/content/examples/command-palette/CommandPaletteModelValueExample.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+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' }
+]
+
+const selected = ref(users[0])
+
+function onSelect(item: any) {
+  console.log(item)
+}
+</script>
+
+<template>
+  <UCommandPalette
+    v-model="selected"
+    :groups="[{ id: 'users', items: users }]"
+    class="flex-1"
+    @update:model-value="onSelect"
+  />
+</template>
diff --git a/docs/app/components/content/examples/command-palette/CommandPaletteModelValueMultipleExample.vue b/docs/app/components/content/examples/command-palette/CommandPaletteModelValueMultipleExample.vue
new file mode 100644
index 00000000..73e388b2
--- /dev/null
+++ b/docs/app/components/content/examples/command-palette/CommandPaletteModelValueMultipleExample.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+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' }
+]
+
+const selected = ref([users[0], users[1]])
+
+function onSelect(items: any) {
+  console.log(items)
+}
+</script>
+
+<template>
+  <UCommandPalette
+    v-model="selected"
+    multiple
+    :groups="[{ id: 'users', items: users }]"
+    class="flex-1"
+    @update:model-value="onSelect"
+  />
+</template>
diff --git a/docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue b/docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue
new file mode 100644
index 00000000..7e25d417
--- /dev/null
+++ b/docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+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' }
+]
+</script>
+
+<template>
+  <UModal v-model:open="open">
+    <UButton label="Search users..." color="gray" variant="subtle" icon="i-heroicons-magnifying-glass" />
+
+    <template #content>
+      <UCommandPalette
+        close
+        :groups="[{ id: 'users', items: users }]"
+        @update:open="open = $event"
+      />
+    </template>
+  </UModal>
+</template>
diff --git a/docs/app/components/content/examples/command-palette/CommandPalettePostFilterExample.vue b/docs/app/components/content/examples/command-palette/CommandPalettePostFilterExample.vue
new file mode 100644
index 00000000..2622d31a
--- /dev/null
+++ b/docs/app/components/content/examples/command-palette/CommandPalettePostFilterExample.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const items = [{
+  id: '/',
+  label: 'Introduction',
+  level: 1
+}, {
+  id: '/getting-started#whats-new-in-v3',
+  label: 'What\'s new in v3?',
+  level: 2
+}, {
+  id: '/getting-started#radix-vue-3',
+  label: 'Radix Vue',
+  level: 3
+}, {
+  id: '/getting-started#tailwind-css-v4',
+  label: 'Tailwind CSS v4',
+  level: 3
+}, {
+  id: '/getting-started#tailwind-variants',
+  label: 'Tailwind Variants',
+  level: 3
+}, {
+  id: '/getting-started/installation',
+  label: 'Installation',
+  level: 1
+}]
+
+function postFilter(searchTerm: string, items: any[]) {
+  // Filter only first level items if no searchTerm
+  if (!searchTerm) {
+    return items?.filter(item => item.level === 1)
+  }
+
+  return items
+}
+</script>
+
+<template>
+  <UCommandPalette :groups="[{ id: 'files', items, postFilter }]" class="flex-1" />
+</template>
diff --git a/docs/app/components/content/examples/command-palette/CommandPaletteSearchTermExample.vue b/docs/app/components/content/examples/command-palette/CommandPaletteSearchTermExample.vue
new file mode 100644
index 00000000..6642d063
--- /dev/null
+++ b/docs/app/components/content/examples/command-palette/CommandPaletteSearchTermExample.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+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' }
+]
+
+const searchTerm = ref('Th')
+</script>
+
+<template>
+  <UCommandPalette
+    v-model:search-term="searchTerm"
+    :groups="[{ id: 'users', items: users }]"
+    class="flex-1"
+  />
+</template>
diff --git a/docs/content/3.components/alert.md b/docs/content/3.components/alert.md
index a6727a78..b1d861ad 100644
--- a/docs/content/3.components/alert.md
+++ b/docs/content/3.components/alert.md
@@ -113,8 +113,6 @@ Use the `close` prop to display a [Button](/components/button) to dismiss the Al
 An `update:open` event will be emitted when the close button is clicked.
 ::
 
-Use the `close-icon` prop to customize the button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
-
 ::component-code
 ---
 prettier: true
@@ -126,15 +124,10 @@ props:
   title: 'Heads up!'
   description: 'You can change the primary color in your app config.'
   close: true
-  closeIcon: ''
 ---
 ::
 
-::tip{to="/getting-started/icons#theme"}
-You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
-::
-
-You can pass all the props of the [Button](/components/button) component to customize it.
+You can also pass all the props of the [Button](/components/button) component to customize it.
 
 ::component-code
 ---
@@ -154,6 +147,29 @@ props:
 ---
 ::
 
+### Close Icon
+
+Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - title
+  - description
+  - close
+props:
+  title: 'Heads up!'
+  description: 'You can change the primary color in your app config.'
+  close: true
+  closeIcon: 'i-heroicons-arrow-right'
+---
+::
+
+::tip{to="/getting-started/icons#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
+::
+
 ### Actions
 
 Use the `actions` prop to add some [Button](/components/button) actions to the Alert.
diff --git a/docs/content/3.components/button.md b/docs/content/3.components/button.md
index 30f0922d..96f30bb0 100644
--- a/docs/content/3.components/button.md
+++ b/docs/content/3.components/button.md
@@ -129,13 +129,34 @@ props:
 
 Use the `loading` prop to show a loading icon and disable the Button.
 
-Use the `loading-icon` prop to customize this icon. Defaults to `i-heroicons-arrow-path-20-solid`.
+::component-code
+---
+props:
+  loading: true
+  trailing: false
+slots:
+  default: Button
+---
+Button
+::
+
+Use the `loading-auto` prop to show the loading icon automatically while the `@click` promise is pending.
+
+:component-example{name="button-loading-auto-example"}
+
+This also works with the [Form](/components/form) component.
+
+:component-example{name="button-loading-auto-form-example"}
+
+### Loading Icon
+
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
 
 ::component-code
 ---
 props:
   loading: true
-  loadingIcon: ''
+  loadingIcon: 'i-heroicons-arrow-path-rounded-square'
   trailing: false
 slots:
   default: Button
@@ -147,14 +168,6 @@ Button
 You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
 ::
 
-Use the `loading-auto` prop to show the loading icon automatically while the `@click` promise is pending.
-
-:component-example{name="button-loading-auto-example"}
-
-This also works with the [Form](/components/form) component.
-
-:component-example{name="button-loading-auto-form-example"}
-
 ### Disabled
 
 Use the `disabled` prop to disable the Button.
diff --git a/docs/content/3.components/checkbox.md b/docs/content/3.components/checkbox.md
index e39a5488..a3837160 100644
--- a/docs/content/3.components/checkbox.md
+++ b/docs/content/3.components/checkbox.md
@@ -39,13 +39,22 @@ props:
 
 Use the `indeterminate` prop to set the Checkbox to an [indeterminate state](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
 
-Use the `indeterminate-icon` prop to customize this icon. Defaults to `i-heroicons-minus-20-solid`.
+::component-code
+---
+props:
+  indeterminate: true
+---
+::
+
+### Indeterminate Icon
+
+Use the `indeterminate-icon` prop to customize the indeterminate icon. Defaults to `i-heroicons-minus-20-solid`.
 
 ::component-code
 ---
 props:
   indeterminate: true
-  indeterminateIcon: ''
+  indeterminateIcon: 'i-heroicons-plus'
 ---
 ::
 
diff --git a/docs/content/3.components/command-palette.md b/docs/content/3.components/command-palette.md
index a92bec1a..195720cc 100644
--- a/docs/content/3.components/command-palette.md
+++ b/docs/content/3.components/command-palette.md
@@ -8,31 +8,24 @@ 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
 
+The CommandPalette component leverages [Fuse.js](https://fusejs.io/) to provide robust and efficient fuzzy search functionality.
+
 ### Groups
 
-Use the `groups` prop as an array of objects with the following properties:
+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:
 
 - `id: string`{lang="ts-type"}
 - `label?: string`{lang="ts-type"}
 - `slot?: string`{lang="ts-type"}
-- [`items?: CommandPaletteItem[]`{lang="ts-type"}](#items)
-- `filter?: boolean`{lang="ts-type"}
-- `postFilter?: (searchTerm: string, items: T[]) => T[]`{lang="ts-type"}
+- `items?: CommandPaletteItem[]`{lang="ts-type"}
+- [`filter?: boolean`{lang="ts-type"}](#without-internal-search)
+- [`postFilter?: (searchTerm: string, items: T[]) => T[]`{lang="ts-type"}](#with-post-filtered-items)
 - `highlightedIcon?: string`{lang="ts-type"}
 
-::caution
-You must provide an `id` for each group otherwise the group will be ignored.
-::
-
-### Items
-
 Each group takes some `items` as an array of objects with the following properties:
 
 - `prefix?: string`{lang="ts-type"}
@@ -57,80 +50,73 @@ external:
 class: '!p-0'
 props:
   groups:
-    - id: 'users'
-      label: 'Users'
+    - id: 'suggestions'
+      label: 'Suggestions'
       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:
-  multiple: true
-  groups:
+        - label: 'Calendar'
+          icon: 'i-heroicons-calendar'
+        - label: 'Music'
+          icon: 'i-heroicons-musical-note'
+        - label: 'Maps'
+          icon: 'i-heroicons-map'
     - 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'
+            - 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'
+            - meta
+            - F
         - label: 'Add hashtag'
           suffix: 'Add a hashtag to the current item.'
           icon: 'i-heroicons-hashtag'
           kbds:
-            - 'meta'
-            - 'H'
+            - meta
+            - H
         - label: 'Add label'
           suffix: 'Add a label to the current item.'
           icon: 'i-heroicons-tag'
           kbds:
-            - 'meta'
-            - 'L'
-  class: 'flex-1'
+            - meta
+            - L
+  class: 'flex-1 max-h-80'
 ---
 ::
 
+::caution
+You must provide an `id` for each group otherwise the group will be ignored.
+::
+
 ### Placeholder
 
 Use the `placeholder` prop to change the placeholder text.
 
 ::component-code
 ---
+collapse: true
 ignore:
   - class
+  - groups
+external:
+  - groups
 class: '!p-0'
 props:
-  placeholder: 'Search a user...'
+  placeholder: 'Search an app...'
+  groups:
+    - id: 'apps'
+      items:
+        - label: 'Calendar'
+          icon: 'i-heroicons-calendar'
+        - label: 'Music'
+          icon: 'i-heroicons-musical-note'
+        - label: 'Maps'
+          icon: 'i-heroicons-map'
   class: 'flex-1'
 ---
 ::
@@ -141,11 +127,24 @@ Use the `icon` prop to customize the input [Icon](/components/icon). Defaults to
 
 ::component-code
 ---
+collapse: true
 ignore:
   - class
+  - groups
+external:
+  - groups
 class: '!p-0'
 props:
-  icon: 'i-heroicons-user'
+  icon: 'i-heroicons-cube'
+  groups:
+    - id: 'apps'
+      items:
+        - label: 'Calendar'
+          icon: 'i-heroicons-calendar'
+        - label: 'Music'
+          icon: 'i-heroicons-musical-note'
+        - label: 'Maps'
+          icon: 'i-heroicons-map'
   class: 'flex-1'
 ---
 ::
@@ -158,16 +157,55 @@ You can customize this icon globally in your `app.config.ts` under `ui.icons.sea
 
 Use the `loading` prop to show a loading icon on the CommandPalette.
 
-Use the `loading-icon` prop to customize this icon. Defaults to `i-heroicons-arrow-path-20-solid`.
-
 ::component-code
 ---
+collapse: true
 ignore:
   - class
+  - groups
+external:
+  - groups
 class: '!p-0'
 props:
   loading: true
-  loadingIcon: ''
+  groups:
+    - id: 'apps'
+      items:
+        - label: 'Calendar'
+          icon: 'i-heroicons-calendar'
+        - label: 'Music'
+          icon: 'i-heroicons-musical-note'
+        - label: 'Maps'
+          icon: 'i-heroicons-map'
+  class: 'flex-1'
+---
+::
+
+### Loading Icon
+
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
+
+::component-code
+---
+collapse: true
+ignore:
+  - class
+  - groups
+external:
+  - groups
+class: '!p-0'
+props:
+  loading: true
+  loadingIcon: 'i-heroicons-arrow-path-rounded-square'
+  groups:
+    - id: 'apps'
+      items:
+        - label: 'Calendar'
+          icon: 'i-heroicons-calendar'
+        - label: 'Music'
+          icon: 'i-heroicons-musical-note'
+        - label: 'Maps'
+          icon: 'i-heroicons-map'
   class: 'flex-1'
 ---
 ::
@@ -182,11 +220,24 @@ Use the `disabled` prop to disable the CommandPalette.
 
 ::component-code
 ---
+collapse: true
 ignore:
+  - groups
   - class
+external:
+  - groups
 class: '!p-0'
 props:
   disabled: true
+  groups:
+    - id: 'apps'
+      items:
+        - label: 'Calendar'
+          icon: 'i-heroicons-calendar'
+        - label: 'Music'
+          icon: 'i-heroicons-musical-note'
+        - label: 'Maps'
+          icon: 'i-heroicons-map'
   class: 'flex-1'
 ---
 ::
@@ -199,17 +250,89 @@ Use the `close` prop to display a [Button](/components/button) to dismiss the Co
 An `update:open` event will be emitted when the close button is clicked.
 ::
 
-Use the `close-icon` prop to customize the button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
-
 ::component-code
 ---
+collapse: true
 ignore:
   - class
+  - groups
   - close
+external:
+  - groups
 class: '!p-0'
 props:
   close: true
-  closeIcon: ''
+  groups:
+    - id: 'apps'
+      items:
+        - label: 'Calendar'
+          icon: 'i-heroicons-calendar'
+        - label: 'Music'
+          icon: 'i-heroicons-musical-note'
+        - label: 'Maps'
+          icon: 'i-heroicons-map'
+  class: 'flex-1'
+---
+::
+
+You can also pass all the props of the [Button](/components/button) component to customize it.
+
+::component-code
+---
+collapse: true
+prettier: true
+ignore:
+  - close.color
+  - close.variant
+  - groups
+  - class
+external:
+  - groups
+class: '!p-0'
+props:
+  close:
+    color: primary
+    variant: outline
+    class: 'rounded-full'
+  groups:
+    - id: 'apps'
+      items:
+        - label: 'Calendar'
+          icon: 'i-heroicons-calendar'
+        - label: 'Music'
+          icon: 'i-heroicons-musical-note'
+        - label: 'Maps'
+          icon: 'i-heroicons-map'
+  class: 'flex-1'
+---
+::
+
+### Close Icon
+
+Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
+
+::component-code
+---
+collapse: true
+ignore:
+  - class
+  - groups
+  - close
+external:
+  - groups
+class: '!p-0'
+props:
+  close: true
+  closeIcon: 'i-heroicons-arrow-right'
+  groups:
+    - id: 'apps'
+      items:
+        - label: 'Calendar'
+          icon: 'i-heroicons-calendar'
+        - label: 'Music'
+          icon: 'i-heroicons-musical-note'
+        - label: 'Maps'
+          icon: 'i-heroicons-map'
   class: 'flex-1'
 ---
 ::
@@ -218,42 +341,135 @@ props:
 You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
 ::
 
-You can pass all the props of the [Button](/components/button) component to customize it.
-
-::component-code
----
-prettier: true
-ignore:
-  - close.color
-  - close.variant
-  - class
-class: '!p-0'
-props:
-  close:
-    color: primary
-    variant: outline
-    class: 'rounded-full'
-  class: 'flex-1'
----
-::
-
 ## Examples
 
-### Control active item(s)
-
-You can control the active item(s) by using the `default-value` prop or the `v-model` directive with the index of the item.
-
-::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.
-::
-
 ### Control selected item(s)
 
+You can control the selected item by using the `default-value` prop or the `v-model` directive.
+
+::component-example
+---
+collapse: true
+name: 'command-palette-model-value-example'
+class: '!p-0'
+---
+::
+
+::note
+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.
+::
+
 ### Control search term
 
+Use the `v-model:search-term` directive to control the search term.
+
+::component-example
+---
+collapse: true
+name: 'command-palette-search-term-example'
+class: '!p-0'
+---
+::
+
 ### With fetched items
 
-### With filtered items
+You can fetch items from an API and use them in the CommandPalette.
+
+::component-example
+---
+collapse: true
+name: 'command-palette-fetch-example'
+class: '!p-0'
+---
+::
+
+### Without internal search
+
+You can set the `filter` field to `false` on a group to disable the internal search and use your own search logic.
+
+::component-example
+---
+collapse: true
+name: 'command-palette-filter-example'
+class: '!p-0'
+---
+::
+
+::note
+This example uses [refDebounced](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
+::
+
+### With post-filtered items
+
+You can use the `postFilter` field on a group to filter items after the search happened.
+
+::component-example
+---
+collapse: true
+name: 'command-palette-post-filter-example'
+class: '!p-0'
+---
+::
+
+::note
+Start typing to see items with higher level appear.
+::
+
+### With custom fuse search
+
+You can use the `fuse` prop to override the options of [useFuse](https://vueuse.org/integrations/useFuse) which defaults to:
+
+```ts
+{
+  fuseOptions: {
+    ignoreLocation: true,
+    threshold: 0.1,
+    keys: ['label', 'suffix']
+  },
+  resultLimit: 12,
+  matchAllWhenSearchEmpty: true
+}
+```
+
+::tip
+The `fuseOptions` are the options of [Fuse.js](https://www.fusejs.io/api/options.html), the `resultLimit` is the maximum number of results to return and the `matchAllWhenSearchEmpty` is a boolean to match all items when the search term is empty.
+::
+
+You can for example set `{ fuseOptions: { includeMatches: true } }` to highlight the search term in the items.
+
+::component-example
+---
+collapse: true
+name: 'command-palette-fuse-example'
+class: '!p-0'
+---
+::
+
+### Within a popover
+
+You can use the CommandPalette component inside a [Popover](/components/popover)'s content.
+
+::component-example
+---
+collapse: true
+name: 'popover-command-palette-example'
+class: 'justify-center'
+---
+::
 
 ### Within a modal
 
@@ -279,26 +495,49 @@ class: 'justify-center'
 ---
 ::
 
-### Within a popover
+### Listen open state
 
-You can use the CommandPalette component inside a [Popover](/components/popover)'s content.
+When using the `close` prop, you can listen to the `update:open` event when the button is clicked.
 
 ::component-example
 ---
 collapse: true
-name: 'popover-command-palette-example'
+name: 'command-palette-open-example'
 class: 'justify-center'
 ---
 ::
 
-### Listen open state
-
-### With custom search
-
-### With highlighted search
+::note
+This can be useful when using the CommandPalette inside a [Modal](/components/modal) for example.
+::
 
 ### With custom slot
 
+Use the `slot` property to customize a specific item or group.
+
+You will have access to the following slots:
+
+- `#{{ item.slot }}`{lang="ts-type"}
+- `#{{ item.slot }}-leading`{lang="ts-type"}
+- `#{{ item.slot }}-label`{lang="ts-type"}
+- `#{{ item.slot }}-trailing`{lang="ts-type"}
+
+- `#{{ group.slot }}`{lang="ts-type"}
+- `#{{ group.slot }}-leading`{lang="ts-type"}
+- `#{{ group.slot }}-label`{lang="ts-type"}
+- `#{{ group.slot }}-trailing`{lang="ts-type"}
+
+::component-example
+---
+name: 'command-palette-custom-slot-example'
+class: '!p-0'
+---
+::
+
+::tip{to="#slots"}
+You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing` slots to customize all items.
+::
+
 ## API
 
 ### Props
diff --git a/docs/content/3.components/input.md b/docs/content/3.components/input.md
index e5f6ca9b..b394b220 100644
--- a/docs/content/3.components/input.md
+++ b/docs/content/3.components/input.md
@@ -140,7 +140,20 @@ props:
 
 Use the `loading` prop to show a loading icon on the Input.
 
-Use the `loading-icon` prop to customize this icon. Defaults to `i-heroicons-arrow-path-20-solid`.
+::component-code
+---
+ignore:
+  - placeholder
+props:
+  loading: true
+  trailing: false
+  placeholder: 'Search...'
+---
+::
+
+### Loading Icon
+
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
 
 ::component-code
 ---
@@ -148,7 +161,7 @@ ignore:
   - placeholder
 props:
   loading: true
-  loadingIcon: ''
+  loadingIcon: 'i-heroicons-arrow-path-rounded-square'
   trailing: false
   placeholder: 'Search...'
 ---
diff --git a/docs/content/3.components/modal.md b/docs/content/3.components/modal.md
index 43af17d5..45a0ba9c 100644
--- a/docs/content/3.components/modal.md
+++ b/docs/content/3.components/modal.md
@@ -94,13 +94,9 @@ slots:
 
 ### Close
 
-Use the `close` prop to customize or hide the close button displayed in the Modal's header. You can pass all the props of the [Button](/components/button) component to customize it.
+Use the `close` prop to customize or hide the close button (with `false` value) displayed in the Modal's header.
 
-::tip
-The close button is not displayed if the `#content` slot is used as it's a part of the header.
-::
-
-Use the `close-icon` prop to customize the button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
+You can pass all the props of the [Button](/components/button) component to customize it.
 
 ::component-code
 ---
@@ -116,7 +112,39 @@ props:
     color: primary
     variant: outline
     class: 'rounded-full'
-  closeIcon: ''
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" />
+
+  body: |
+
+    <Placeholder class="h-48" />
+---
+
+:u-button{label="Open" color="gray" variant="subtle"}
+
+#body
+:placeholder{class="h-48"}
+::
+
+::tip
+The close button is not displayed if the `#content` slot is used as it's a part of the header.
+::
+
+### Close Icon
+
+Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
+
+::component-code
+---
+prettier: true
+class: 'justify-center'
+ignore:
+  - title
+props:
+  title: 'Modal with close button'
+  closeIcon: 'i-heroicons-arrow-right'
 slots:
   default: |
 
diff --git a/docs/content/3.components/select.md b/docs/content/3.components/select.md
index 88feabca..fb0f8305 100644
--- a/docs/content/3.components/select.md
+++ b/docs/content/3.components/select.md
@@ -393,7 +393,29 @@ You can customize this icon globally in your `app.config.ts` under `ui.icons.che
 
 Use the `loading` prop to show a loading icon on the Select.
 
-Use the `loading-icon` prop to customize this icon. Defaults to `i-heroicons-arrow-path-20-solid`.
+::component-code
+---
+prettier: true
+external:
+  - items
+ignore:
+  - items
+  - defaultValue
+props:
+  loading: true
+  trailing: false
+  defaultValue: 'Backlog'
+  items:
+    - Backlog
+    - Todo
+    - In Progress
+    - Done
+---
+::
+
+### Loading Icon
+
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
 
 ::component-code
 ---
@@ -405,7 +427,7 @@ ignore:
   - defaultValue
 props:
   loading: true
-  loadingIcon: ''
+  loadingIcon: 'i-heroicons-arrow-path-rounded-square'
   trailing: false
   defaultValue: 'Backlog'
   items:
diff --git a/docs/content/3.components/slideover.md b/docs/content/3.components/slideover.md
index 1c42b2a7..34eab266 100644
--- a/docs/content/3.components/slideover.md
+++ b/docs/content/3.components/slideover.md
@@ -94,13 +94,9 @@ slots:
 
 ### Close
 
-Use the `close` prop to customize or hide the close button displayed in the Slideover's header. You can pass all the props of the [Button](/components/button) component to customize it.
+Use the `close` prop to customize or hide the close button (with `false` value) displayed in the Slideover's header.
 
-::tip
-The close button is not displayed if the `#content` slot is used as it's a part of the header.
-::
-
-Use the `close-icon` prop to customize the button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
+You can pass all the props of the [Button](/components/button) component to customize it.
 
 ::component-code
 ---
@@ -116,7 +112,39 @@ props:
     color: primary
     variant: outline
     class: 'rounded-full'
-  closeIcon: ''
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" />
+
+  body: |
+
+    <Placeholder class="h-full" />
+---
+
+:u-button{label="Open" color="gray" variant="subtle"}
+
+#body
+:placeholder{class="h-full"}
+::
+
+::note
+The close button is not displayed if the `#content` slot is used as it's a part of the header.
+::
+
+### Close Icon
+
+Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
+
+::component-code
+---
+prettier: true
+class: 'justify-center'
+ignore:
+  - title
+props:
+  title: 'Slideover with close button'
+  closeIcon: 'i-heroicons-arrow-right'
 slots:
   default: |
 
diff --git a/docs/content/3.components/switch.md b/docs/content/3.components/switch.md
index 558007c5..5e5b1ea0 100644
--- a/docs/content/3.components/switch.md
+++ b/docs/content/3.components/switch.md
@@ -94,7 +94,21 @@ props:
 
 Use the `loading` prop to show a loading icon on the Switch.
 
-Use the `loading-icon` prop to customize this icon. Defaults to `i-heroicons-arrow-path-20-solid`.
+::component-code
+---
+ignore:
+  - label
+  - defaultValue
+props:
+  loading: true
+  defaultValue: true
+  label: Check me
+---
+::
+
+### Loading Icon
+
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
 
 ::component-code
 ---
@@ -103,7 +117,7 @@ ignore:
   - defaultValue
 props:
   loading: true
-  loadingIcon: ''
+  loadingIcon: 'i-heroicons-arrow-path-rounded-square'
   defaultValue: true
   label: Check me
 ---
diff --git a/src/runtime/components/CommandPalette.vue b/src/runtime/components/CommandPalette.vue
index 1cc4f37d..4c06db35 100644
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -65,7 +65,7 @@ export interface CommandPaletteProps<G, T> extends Pick<ComboboxRootProps, 'mult
    */
   placeholder?: InputProps['placeholder']
   /**
-   * Display a close button in the input (useful when inside a `UModal`).
+   * Display a close button in the input (useful when inside a Modal for example).
    * `{ size: 'md', color: 'gray', variant: 'ghost' }`{lang="ts-type"}
    * @defaultValue false
    */
@@ -78,7 +78,15 @@ export interface CommandPaletteProps<G, T> extends Pick<ComboboxRootProps, 'mult
   groups?: G[]
   /**
    * Options for [useFuse](https://vueuse.org/integrations/useFuse).
-   * @defaultValue { ignoreLocation: true, threshold: 0.1, keys: ['label', 'suffix'], resultLimit: 12, matchAllWhenSearchEmpty: true }
+   * @defaultValue {
+      fuseOptions: {
+        ignoreLocation: true,
+        threshold: 0.1,
+        keys: ['label', 'suffix']
+      },
+      resultLimit: 12,
+      matchAllWhenSearchEmpty: true
+    }
    */
   fuse?: UseFuseOptions<T>
   class?: any