feat(CommandPalette): handle loading field in items

nuxt · Oct 17, 2024 · 49abad2 · 49abad2
1 parent c1294f6
commit 49abad2
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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'
+      }
+    }
   }
 })