From 49abad243cee97b99753e2500c4bdaa0efe5eb75 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 17 Oct 2024 21:13:11 +0200
Subject: [PATCH] feat(CommandPalette): handle `loading` field in items

---
 docs/content/3.components/command-palette.md    |  1 +
 .../app/pages/components/command-palette.vue    | 17 +++++++++++++----
 src/runtime/components/CommandPalette.vue       |  4 +++-
 src/theme/command-palette.ts                    |  7 +++++++
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/docs/content/3.components/command-palette.md b/docs/content/3.components/command-palette.md
index a637a35f..3f1c5d85 100644
--- a/docs/content/3.components/command-palette.md
+++ b/docs/content/3.components/command-palette.md
@@ -41,6 +41,7 @@ Each group takes some `items` as an array of objects with the following properti
 - `avatar?: AvatarProps`{lang="ts-type"}
 - `chip?: ChipProps`{lang="ts-type"}
 - `kbds?: string[] | KbdProps[]`{lang="ts-type"}
+- `loading?: boolean`{lang="ts-type"}
 - `disabled?: boolean`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
 - `onSelect?(e?: Event): void`{lang="ts-type"}
diff --git a/playground/app/pages/components/command-palette.vue b/playground/app/pages/components/command-palette.vue
index ec51747d..ab350dd7 100644
--- a/playground/app/pages/components/command-palette.vue
+++ b/playground/app/pages/components/command-palette.vue
@@ -19,6 +19,8 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
   lazy: true
 })
 
+const loading = ref(false)
+
 const groups = computed(() => [{
   id: 'users',
   label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
@@ -29,16 +31,23 @@ const groups = computed(() => [{
     label: 'Add new file',
     suffix: 'Create a new file in the current directory or workspace.',
     icon: 'i-heroicons-document-plus',
-    select: (e: Event) => {
+    loading: loading.value,
+    onSelect(e: Event) {
       e?.preventDefault()
       toast.add({ title: 'New file added!' })
+
+      loading.value = true
+
+      setTimeout(() => {
+        loading.value = false
+      }, 2000)
     },
     kbds: ['meta', 'N']
   }, {
     label: 'Add new folder',
     suffix: 'Create a new folder in the current directory or workspace.',
     icon: 'i-heroicons-folder-plus',
-    select: (e: Event) => {
+    onSelect(e: Event) {
       e?.preventDefault()
       toast.add({ title: 'New folder added!' })
     },
@@ -47,7 +56,7 @@ const groups = computed(() => [{
     label: 'Add hashtag',
     suffix: 'Add a hashtag to the current item.',
     icon: 'i-heroicons-hashtag',
-    select: (e: Event) => {
+    onSelect(e: Event) {
       e?.preventDefault()
       toast.add({ title: 'Hashtag added!' })
     },
@@ -56,7 +65,7 @@ const groups = computed(() => [{
     label: 'Add label',
     suffix: 'Add a label to the current item.',
     icon: 'i-heroicons-tag',
-    select: (e: Event) => {
+    onSelect(e: Event) {
       e?.preventDefault()
       toast.add({ title: 'Label added!' })
     },
diff --git a/src/runtime/components/CommandPalette.vue b/src/runtime/components/CommandPalette.vue
index db48a295..d19664c7 100644
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -23,6 +23,7 @@ export interface CommandPaletteItem extends Pick<ComboboxItemProps, 'disabled'>
   avatar?: AvatarProps
   chip?: ChipProps
   kbds?: KbdProps['value'][] | KbdProps[]
+  loading?: boolean
   slot?: string
   onSelect?(e?: Event): void
 }
@@ -275,7 +276,8 @@ const groups = computed(() => {
             >
               <slot :name="item.slot || group.slot || 'item'" :item="item" :index="index">
                 <slot :name="item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index">
-                  <UIcon v-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon })" />
+                  <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, loading: true })" />
+                  <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon })" />
                   <UAvatar v-else-if="item.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
                   <UChip
                     v-else-if="item.chip"
diff --git a/src/theme/command-palette.ts b/src/theme/command-palette.ts
index 3f1675a4..71e3a95a 100644
--- a/src/theme/command-palette.ts
+++ b/src/theme/command-palette.ts
@@ -25,5 +25,12 @@ export default (options: Required<ModuleOptions>) => ({
     itemLabelBase: 'text-[var(--ui-text-highlighted)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]',
     itemLabelPrefix: 'text-[var(--ui-text)]',
     itemLabelSuffix: 'text-[var(--ui-text-dimmed)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]'
+  },
+  variants: {
+    loading: {
+      true: {
+        itemLeadingIcon: 'animate-spin'
+      }
+    }
   }
 })