From daca46371cab1344bd87ffb0abe0f7e9cdb08609 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Mon, 29 May 2023 21:55:08 +0200 Subject: [PATCH] chore(CommandPalette)!: rename props to `emptyState` and `closeButton` for consistency --- .../themes/CommandPaletteThemeAlgolia.vue | 10 ++++---- docs/content/1.getting-started/3.theming.md | 2 +- .../content/4.navigation/2.command-palette.md | 24 +++++++++---------- src/runtime/app.config.ts | 8 +++---- .../components/navigation/CommandPalette.vue | 22 ++++++++--------- 5 files changed, 33 insertions(+), 33 deletions(-) diff --git a/docs/components/content/themes/CommandPaletteThemeAlgolia.vue b/docs/components/content/themes/CommandPaletteThemeAlgolia.vue index 9d2d2497..d5d203cd 100644 --- a/docs/components/content/themes/CommandPaletteThemeAlgolia.vue +++ b/docs/components/content/themes/CommandPaletteThemeAlgolia.vue @@ -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="{ diff --git a/docs/content/1.getting-started/3.theming.md b/docs/content/1.getting-started/3.theming.md index 8fd9c6c4..412eca94 100644 --- a/docs/content/1.getting-started/3.theming.md +++ b/docs/content/1.getting-started/3.theming.md @@ -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' } } diff --git a/docs/content/4.navigation/2.command-palette.md b/docs/content/4.navigation/2.command-palette.md index e10e180f..aeaca43b 100644 --- a/docs/content/4.navigation/2.command-palette.md +++ b/docs/content/4.navigation/2.command-palette.md @@ -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 --- :: diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts index fe8ebdf1..1aff3cd6 100644 --- a/src/runtime/app.config.ts +++ b/src/runtime/app.config.ts @@ -526,9 +526,9 @@ const commandPalette = { size: 'h-4 w-4', padding: 'pl-10' }, - close: 'absolute right-4' + closeButton: 'absolute right-4' }, - empty: { + emptyState: { wrapper: 'flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14', label: 'text-sm text-center text-gray-900 dark:text-white', queryLabel: 'text-sm text-center text-gray-900 dark:text-white', @@ -570,12 +570,12 @@ const commandPalette = { default: { icon: 'i-heroicons-magnifying-glass-20-solid', loadingIcon: 'i-heroicons-arrow-path-20-solid', - 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.' }, - close: null, + closeButton: null, selectedIcon: 'i-heroicons-check-20-solid' } } diff --git a/src/runtime/components/navigation/CommandPalette.vue b/src/runtime/components/navigation/CommandPalette.vue index 9f6a7a6e..a6302458 100644 --- a/src/runtime/components/navigation/CommandPalette.vue +++ b/src/runtime/components/navigation/CommandPalette.vue @@ -19,9 +19,9 @@ /> @@ -51,10 +51,10 @@ -
-
@@ -133,13 +133,13 @@ export default defineComponent({ type: String, default: () => appConfig.ui.commandPalette.default.selectedIcon }, - close: { + closeButton: { type: Object as PropType>, - default: () => appConfig.ui.commandPalette.default.close + default: () => appConfig.ui.commandPalette.default.closeButton }, - empty: { + emptyState: { type: Object as PropType<{ icon: string, label: string, queryLabel: string }>, - default: () => appConfig.ui.commandPalette.default.empty + default: () => appConfig.ui.commandPalette.default.emptyState }, placeholder: { type: String,