arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-02-02 21:27:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Haytham A. Salama
2023-06-12 15:54:34 +03:00
committed by GitHub
parent b4a96a8b01
commit 652af93f5c
3 changed files with 54 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/components/content/examples/CommandPaletteExampleEmptySlot.vue Normal file
View File

@@ -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>

34
docs/content/5.navigation/2.command-palette.md
View File

@@ -357,6 +357,40 @@ padding: false
Take a look at the component! 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 ## Props
:component-props :component-props

16
src/runtime/components/navigation/CommandPalette.vue
View File

@@ -51,12 +51,16 @@
</CommandPaletteGroup> </CommandPaletteGroup>
</ComboboxOptions> </ComboboxOptions>
<div v-else-if="emptyState" :class="ui.emptyState.wrapper"> <template v-else-if="emptyState">
<UIcon v-if="emptyState.icon" :name="emptyState.icon" :class="ui.emptyState.icon" aria-hidden="true" /> <slot name="empty-state">
<p :class="query ? ui.emptyState.queryLabel : ui.emptyState.label"> <div :class="ui.emptyState.wrapper">
{{ query ? emptyState.queryLabel : emptyState.label }} <UIcon v-if="emptyState.icon" :name="emptyState.icon" :class="ui.emptyState.icon" aria-hidden="true" />
</p> <p :class="query ? ui.emptyState.queryLabel : ui.emptyState.label">
</div> {{ query ? emptyState.queryLabel : emptyState.label }}
</p>
</div>
</slot>
</template>
</div> </div>
</Combobox> </Combobox>
</template> </template>