feat(CommandPalette): handle empty-state (#271)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/components/content/examples/CommandPaletteExampleEmptySlot.vue

@@ -0,0 +1,10 @@
+<template>
+  <UCommandPalette>
+    <template #empty-state>
+      <div class="flex flex-col items-center justify-center py-6 gap-3">
+        <span class="italic text-sm">Nothing here!</span>
+        <UButton label="Add item" />
+      </div>
+    </template>
+  </UCommandPalette>
+</template>

docs/content/5.navigation/2.command-palette.md

@@ -357,6 +357,40 @@ padding: false
 Take a look at the component!
 ::
 
+## Slots
+
+### `empty-state` :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full"}
+
+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 groups = [...]
+</script>
+
+<template>
+  <UCommandPalette :groups="groups">
+    <template #empty-state>
+      <div class="flex flex-col items-center justify-center py-6 gap-3">
+        <span class="italic text-sm">Nothing here!</span>
+        <UButton label="Add item" />
+      </div>
+    </template>
+  </UCommandPalette>
+</template>
+```
+::
+
 ## Props
 
 :component-props

src/runtime/components/navigation/CommandPalette.vue

@@ -51,12 +51,16 @@
         </CommandPaletteGroup>
       </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>
-      </div>
+      <template v-else-if="emptyState">
+        <slot name="empty-state">
+          <div :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>
+          </div>
+        </slot>
+      </template>
     </div>
   </Combobox>
 </template>