mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
chore(CommandPalette)!: rename props to emptyState and closeButton for consistency
This commit is contained in:
@@ -17,8 +17,8 @@ const groups = computed(() => navigation.value.map(item => ({
|
||||
}))
|
||||
})))
|
||||
|
||||
const close = computed(() => commandPaletteRef.value?.query ? ({ icon: 'i-heroicons-x-mark', color: 'black', variant: 'ghost', size: 'lg', padded: false }) : null)
|
||||
const empty = computed(() => commandPaletteRef.value?.query ? ({ icon: 'i-heroicons-magnifying-glass', queryLabel: 'No results' }) : ({ icon: '', label: 'No recent searches' }))
|
||||
const closeButton = computed(() => commandPaletteRef.value?.query ? ({ icon: 'i-heroicons-x-mark', color: 'black', variant: 'ghost', size: 'lg', padded: false }) : null)
|
||||
const emptyState = computed(() => commandPaletteRef.value?.query ? ({ icon: 'i-heroicons-magnifying-glass', queryLabel: 'No results' }) : ({ icon: '', label: 'No recent searches' }))
|
||||
|
||||
const ui = {
|
||||
wrapper: 'flex flex-col flex-1 min-h-0 bg-gray-50 dark:bg-gray-800',
|
||||
@@ -50,7 +50,7 @@ const ui = {
|
||||
}
|
||||
}
|
||||
},
|
||||
empty: {
|
||||
emptyState: {
|
||||
wrapper: 'flex flex-col items-center justify-center flex-1 py-9',
|
||||
label: 'text-sm text-center text-gray-500 dark:text-gray-400',
|
||||
queryLabel: 'text-lg text-center text-gray-900 dark:text-white',
|
||||
@@ -64,8 +64,8 @@ const ui = {
|
||||
ref="commandPaletteRef"
|
||||
:groups="groups"
|
||||
:ui="ui"
|
||||
:close="close"
|
||||
:empty="empty"
|
||||
:close-button="closeButton"
|
||||
:empty-state="emptyState"
|
||||
:autoselect="false"
|
||||
command-attribute="title"
|
||||
:fuse="{
|
||||
|
||||
@@ -186,7 +186,7 @@ export default defineAppConfig({
|
||||
icon: 'i-octicon-search-24',
|
||||
loadingIcon: 'i-octicon-sync-24',
|
||||
selectedIcon: 'i-octicon-check-24',
|
||||
empty: {
|
||||
emptyState: {
|
||||
icon: 'i-octicon-search-24'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -166,7 +166,7 @@ Use the `selected-icon` prop to set a different icon or change it globally in `u
|
||||
---
|
||||
padding: false
|
||||
baseProps:
|
||||
empty: null
|
||||
emptyState: null
|
||||
props:
|
||||
icon: 'i-heroicons-command-line'
|
||||
excludedProps:
|
||||
@@ -184,7 +184,7 @@ Use the `loading-icon` prop to set a different icon or change it globally in `ui
|
||||
---
|
||||
padding: false
|
||||
baseProps:
|
||||
empty: null
|
||||
emptyState: null
|
||||
props:
|
||||
loading: true
|
||||
excludedProps:
|
||||
@@ -200,7 +200,7 @@ Use the `placeholder` prop to change the input placeholder
|
||||
---
|
||||
padding: false
|
||||
baseProps:
|
||||
empty: null
|
||||
emptyState: null
|
||||
props:
|
||||
placeholder: 'Type a command...'
|
||||
excludedProps:
|
||||
@@ -210,31 +210,31 @@ excludedProps:
|
||||
|
||||
### Close
|
||||
|
||||
Use the `close` prop to display a close button on the right side of the input.
|
||||
Use the `close-button` prop to display a close button on the right side of the input.
|
||||
|
||||
You can pass all the props of the [Button](/elements/button) component to customize it through the `close` prop or globally through `ui.commandPalette.default.close`.
|
||||
You can pass all the props of the [Button](/elements/button) component to customize it through the `close-button` prop or globally through `ui.commandPalette.default.closeButton`.
|
||||
|
||||
::component-card
|
||||
---
|
||||
padding: false
|
||||
baseProps:
|
||||
empty: null
|
||||
emptyState: null
|
||||
props:
|
||||
close:
|
||||
closeButton:
|
||||
icon: 'i-heroicons-x-mark-20-solid'
|
||||
color: 'gray'
|
||||
variant: 'link'
|
||||
padded: false
|
||||
excludedProps:
|
||||
- close
|
||||
- closeButton
|
||||
---
|
||||
::
|
||||
|
||||
### Empty
|
||||
|
||||
Use the `empty` prop to display a message when there are no results.
|
||||
Use the `empty-state` prop to display a message when there are no results.
|
||||
|
||||
You can pass an `object` through the `empty` prop or globally through `ui.commandPalette.default.empty`. Here is the default:
|
||||
You can pass an `object` through the `empty-state` prop or globally through `ui.commandPalette.default.emptyState`. Here is the default:
|
||||
|
||||
You can also set it to `null` to hide the empty label.
|
||||
|
||||
@@ -244,12 +244,12 @@ padding: false
|
||||
baseProps:
|
||||
placeholder: 'Type something to see the empty label change'
|
||||
props:
|
||||
empty:
|
||||
emptyState:
|
||||
icon: 'i-heroicons-magnifying-glass-20-solid'
|
||||
label: "We couldn't find any items."
|
||||
queryLabel: "We couldn't find any items with that term. Please try again."
|
||||
excludedProps:
|
||||
- empty
|
||||
- emptyState
|
||||
---
|
||||
::
|
||||
|
||||
|
||||
Reference in New Issue
Block a user