feat(CommandPalette): handle empty-state

nuxt · Jun 9, 2023 · eecf8c5 · eecf8c5
1 parent f0b24ba
commit eecf8c5
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 4 deletions.
diff --git a/docs/components/content/examples/CommandPaletteExampleEmptySlot.vue b/docs/components/content/examples/CommandPaletteExampleEmptySlot.vue
@@ -0,0 +1,14 @@
+<template>
+  <UCommandPalette :groups="[]">
+    <template #empty-state>
+      <div class="flex flex-col items-center justify-center gap-3">
+        <UIcon name="i-heroicons-magnifying-glass-20-solid" class="w-6 h-6 text-gray-400" />
+        <span class="text-sm text-center text-gray-900 dark:text-white">We couldn't find any items!</span>
+        <div>
+          <UButton label="Add item" />
+          <UButton label="Clear Search" class="ml-2" color="primary" variant="outline"/>
+        </div>
+      </div>
+    </template>
+  </UCommandPalette>
+</template>
diff --git a/docs/content/5.navigation/2.command-palette.md b/docs/content/5.navigation/2.command-palette.md
@@ -357,6 +357,44 @@ padding: false
 Take a look at the component!
 ::
 
+## Slots
+
+### `empty-state`
+
+Use the `#empty-state` slot to customize the empty state.
+
+::component-example{class="grid"}
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+---
+
+#default
+:command-palette-example-empty-slot{class="flex-1"}
+
+#code
+```vue
+<script setup>
+const items = [...]
+</script>
+
+<template>
+  <UCommandPalette :groups="items">
+    <template #empty-state>
+      <div class="flex flex-col items-center justify-center gap-3">
+        <UIcon name="i-heroicons-magnifying-glass-20-solid" class="w-6 h-6 text-gray-400" />
+        <span class="text-sm text-center text-gray-900 dark:text-white">We couldn't find any items!</span>
+        <div>
+          <UButton label="Add item" />
+          <UButton label="Clear Search" class="ml-2" color="primary" variant="outline"/>
+        </div>
+      </div>
+    </template>
+  </UCommandPalette>
+</template>
+```
+::
+
 ## Props
 
 :component-props

diff --git a/src/runtime/components/navigation/CommandPalette.vue b/src/runtime/components/navigation/CommandPalette.vue
@@ -52,10 +52,12 @@
       </ComboboxOptions>
 
       <div v-else-if="emptyState" :class="ui.emptyState.wrapper">
-        <UIcon v-if="emptyState.icon" :name="emptyState.icon" :class="ui.emptyState.icon" aria-hidden="true" />
-        <p :class="query ? ui.emptyState.queryLabel : ui.emptyState.label">
-          {{ query ? emptyState.queryLabel : emptyState.label }}
-        </p>
+        <slot name="empty-state">
+          <UIcon v-if="emptyState.icon" :name="emptyState.icon" :class="ui.emptyState.icon" aria-hidden="true" />
+          <p :class="query ? ui.emptyState.queryLabel : ui.emptyState.label">
+            {{ query ? emptyState.queryLabel : emptyState.label }}
+          </p>
+        </slot>
       </div>
     </div>
   </Combobox>