docs(command-palette): update

docs/app/components/content/examples/popover/PopoverCommandPaletteExample.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const labels = [{
+  label: 'bug',
+  chip: {
+    color: 'red' as const
+  }
+}, {
+  label: 'feature',
+  chip: {
+    color: 'green' as const
+  }
+}, {
+  label: 'enhancement',
+  chip: {
+    color: 'blue' as const
+  }
+}]
+const label = ref([])
+</script>
+
+<template>
+  <UPopover :content="{ side: 'right', align: 'start' }">
+    <UButton
+      icon="i-heroicons-tag"
+      label="Select labels"
+      color="gray"
+      variant="subtle"
+    />
+
+    <template #content>
+      <UCommandPalette
+        v-model="label"
+        multiple
+        placeholder="Search labels..."
+        :groups="[{ id: 'labels', items: labels }]"
+        :ui="{ input: '[&>input]:h-8' }"
+      />
+    </template>
+  </UPopover>
+</template>

docs/content/3.components/accordion.md

@@ -135,7 +135,7 @@ props:
 ---
 ::
 
-### Icon
+### Trailing Icon
 
 Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of each item. Defaults to `i-heroicons-chevron-down-20-solid`.
 
@@ -168,7 +168,7 @@ props:
 ---
 ::
 
-::tip
+::tip{to="/getting-started/icons#theme"}
 You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
 ::
 

docs/content/3.components/alert.md

@@ -130,7 +130,7 @@ props:
 ---
 ::
 
-::tip
+::tip{to="/getting-started/icons#theme"}
 You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
 ::
 

docs/content/3.components/avatar.md

@@ -80,13 +80,13 @@ The `alt` prop is passed to the `img` element as the `alt` attribute.
 
 ### With tooltip
 
-You can use the [Tooltip](/components/tooltip) component to display a tooltip when hovering the Avatar.
+You can use a [Tooltip](/components/tooltip) component to display a tooltip when hovering the Avatar.
 
 :component-example{name="avatar-tooltip-example"}
 
 ### With chip
 
-You can use the [Chip](/components/chip) component to display a chip around the Avatar.
+You can use a [Chip](/components/chip) component to display a chip around the Avatar.
 
 :component-example{name="avatar-chip-example"}
 

docs/content/3.components/breadcrumb.md

@@ -43,7 +43,7 @@ props:
 A `span` is rendered instead of a link when the `to` property is not defined.
 ::
 
-### Separator
+### Separator Icon
 
 Use the `separator-icon` prop to customize the [Icon](/components/icon) between each item. Defaults to `i-heroicons-chevron-right-20-solid`.
 
@@ -67,7 +67,7 @@ props:
 ---
 ::
 
-::tip
+::tip{to="/getting-started/icons#theme"}
 You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronRight` key.
 ::
 

docs/content/3.components/button.md

@@ -143,7 +143,7 @@ slots:
 Button
 ::
 
-::tip
+::tip{to="/getting-started/icons#theme"}
 You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
 ::
 

docs/content/3.components/checkbox.md

@@ -49,7 +49,7 @@ props:
 ---
 ::
 
-::tip
+::tip{to="/getting-started/icons#theme"}
 You can customize this icon globally in your `app.config.ts` under `ui.icons.minus` key.
 ::
 
@@ -106,7 +106,7 @@ props:
 ---
 ::
 
-::tip
+::tip{to="/getting-started/icons#theme"}
 You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
 ::
 

docs/content/3.components/command-palette.md

@@ -15,12 +15,6 @@ navigation:
 
 ## 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:
@@ -28,11 +22,17 @@ 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?: CommandPaletteItem[]`{lang="ts-type"}](#items)
 - `filter?: boolean`{lang="ts-type"}
 - `postFilter?: (searchTerm: string, items: T[]) => T[]`{lang="ts-type"}
 - `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"}
@@ -43,7 +43,7 @@ Each group takes some `items` as an array of objects with the following properti
 - `chip?: ChipProps`{lang="ts-type"}
 - `kbds?: string[] | KbdProps[]`{lang="ts-type"}
 - `disabled?: boolean`{lang="ts-type"}
-- `slot?: string`{lang="ts-type"}
+- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
 - `select?(e?: Event): void`{lang="ts-type"}
 
 ::component-code
@@ -87,6 +87,7 @@ external:
   - groups
 class: '!p-0'
 props:
+  multiple: true
   groups:
     - id: 'actions'
       label: 'Actions'
@@ -121,19 +122,134 @@ props:
 
 ### Placeholder
 
+Use the `placeholder` prop to change the placeholder text.
+
+::component-code
+---
+ignore:
+  - class
+class: '!p-0'
+props:
+  placeholder: 'Search a user...'
+  class: 'flex-1'
+---
+::
+
 ### Icon
 
+Use the `icon` prop to customize the input [Icon](/components/icon). Defaults to `i-heroicons-magnifying-glass-20-solid`.
+
+::component-code
+---
+ignore:
+  - class
+class: '!p-0'
+props:
+  icon: 'i-heroicons-user'
+  class: 'flex-1'
+---
+::
+
+::tip{to="/getting-started/icons#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.search` key.
+::
+
 ### Loading
 
+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
+---
+ignore:
+  - class
+class: '!p-0'
+props:
+  loading: true
+  loadingIcon: ''
+  class: 'flex-1'
+---
+::
+
+::tip{to="/getting-started/icons#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
+::
+
 ### Disabled
 
+Use the `disabled` prop to disable the CommandPalette.
+
+::component-code
+---
+ignore:
+  - class
+class: '!p-0'
+props:
+  disabled: true
+  class: 'flex-1'
+---
+::
+
 ### Close
 
+Use the `close` prop to display a [Button](/components/button) to dismiss the CommandPalette.
+
+::tip
+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
+---
+ignore:
+  - class
+  - close
+class: '!p-0'
+props:
+  close: true
+  closeIcon: ''
+  class: 'flex-1'
+---
+::
+
+::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.
+
+::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 search term
+### Control active item(s)
 
-### Control selected value
+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)
+
+### Control search term
 
 ### With fetched items
 
@@ -141,10 +257,40 @@ props:
 
 ### Within a modal
 
+You can use the CommandPalette component inside a [Modal](/components/modal)'s content.
+
+::component-example
+---
+collapse: true
+name: 'modal-command-palette-example'
+class: 'justify-center'
+---
+::
+
 ### Within a drawer
 
+You can use the CommandPalette component inside a [Drawer](/components/drawer)'s content.
+
+::component-example
+---
+collapse: true
+name: 'drawer-command-palette-example'
+class: 'justify-center'
+---
+::
+
 ### 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'
+---
+::
+
 ### Listen open state
 
 ### With custom search
@@ -153,8 +299,6 @@ props:
 
 ### With custom slot
 
-### With empty slot
-
 ## API
 
 ### Props

docs/content/3.components/drawer.md

@@ -205,7 +205,7 @@ class: 'justify-center'
 
 ### With command palette
 
-You can use the [CommandPalette](/components/command-palette) component inside the Drawer's content.
+You can use a [CommandPalette](/components/command-palette) component inside the Drawer's content.
 
 ::component-example
 ---

docs/content/3.components/input.md

@@ -154,7 +154,7 @@ props:
 ---
 ::
 
-::tip
+::tip{to="/getting-started/icons#theme"}
 You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
 ::
 

docs/content/3.components/modal.md

@@ -133,7 +133,7 @@ slots:
 :placeholder{class="h-48"}
 ::
 
-::tip
+::tip{to="/getting-started/icons#theme"}
 You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
 ::
 
@@ -330,7 +330,7 @@ class: 'justify-center'
 
 ### With command palette
 
-You can use the [CommandPalette](/components/command-palette) component inside the Modal's content.
+You can use a [CommandPalette](/components/command-palette) component inside the Modal's content.
 
 ::component-example
 ---

docs/content/3.components/navigation-menu.md

@@ -279,7 +279,7 @@ props:
 The `highlight` prop changes the `pill` variant active item style. Try it out to see the difference.
 ::
 
-### Icon
+### Trailing Icon
 
 Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of each item. Defaults to `i-heroicons-chevron-down-20-solid`. This icon is only displayed when an item has children.
 
@@ -370,7 +370,7 @@ props:
 ---
 ::
 
-::tip
+::tip{to="/getting-started/icons#theme"}
 You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
 ::
 

docs/content/3.components/popover.md

@@ -183,6 +183,18 @@ class: 'justify-center'
 In this example, press :kbd{value="O"} to toggle the Popover.
 ::
 
+### With command palette
+
+You can use a [CommandPalette](/components/command-palette) component inside the Popover's content.
+
+::component-example
+---
+collapse: true
+name: 'popover-command-palette-example'
+class: 'justify-center'
+---
+::
+
 ## API
 
 ### Props

docs/content/3.components/select.md

@@ -333,6 +333,8 @@ props:
 ---
 ::
 
+### Trailing Icon
+
 Use the `trailing-icon` prop to customize the trailing icon. Defaults to `i-heroicons-chevron-down-20-solid`.
 
 ::component-code
@@ -355,10 +357,12 @@ props:
 ---
 ::
 
-::tip
+::tip{to="/getting-started/icons#theme"}
 You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
 ::
 
+### Selected Icon
+
 Use the `selected-icon` prop to customize the icon when an item is selected. Defaults to `i-heroicons-check-20-solid`.
 
 ::component-code
@@ -381,7 +385,7 @@ props:
 ---
 ::
 
-::tip
+::tip{to="/getting-started/icons#theme"}
 You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
 ::
 
@@ -412,7 +416,7 @@ props:
 ---
 ::
 
-::tip
+::tip{to="/getting-started/icons#theme"}
 You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
 ::
 

docs/content/3.components/slideover.md

@@ -133,7 +133,7 @@ slots:
 :placeholder{class="h-full"}
 ::
 
-::tip
+::tip{to="/getting-started/icons#theme"}
 You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
 ::
 

docs/content/3.components/switch.md

@@ -109,7 +109,7 @@ props:
 ---
 ::
 
-::tip
+::tip{to="/getting-started/icons#theme"}
 You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
 ::
 

docs/content/3.components/tabs.md

@@ -191,9 +191,9 @@ props:
 
 ## Examples
 
-### Control active tab
+### Control active item
 
-You can control the active tab by using the `default-value` prop or the `v-model` directive with the index of the item.
+You can control the active item by using the `default-value` prop or the `v-model` directive with the index of the item.
 
 :component-example{name="tabs-model-value-example"}