docs(command-palette): update

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>

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>

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>

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>

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>

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>

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>

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>

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>

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.

docs/content/3.components/button.md

@@ -129,24 +129,17 @@ 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
-  loadingIcon: ''
   trailing: false
 slots:
   default: Button
 ---
 Button
 ::
 
-::tip{to="/getting-started/icons#theme"}
-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"}
@@ -155,6 +148,26 @@ 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: 'i-heroicons-arrow-path-rounded-square'
+  trailing: false
+slots:
+  default: Button
+---
+Button
+::
+
+::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 Button.

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'
 ---
 ::