chore(CommandPalette)!: rename props to emptyState and `closeButton…

…` for consistency

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="{

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'
         }
       }

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

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'
   }
 }

src/runtime/components/navigation/CommandPalette.vue

@@ -19,9 +19,9 @@
         />
 
         <UButton
-          v-if="close"
-          v-bind="close"
-          :class="ui.input.close"
+          v-if="closeButton"
+          v-bind="closeButton"
+          :class="ui.input.closeButton"
           aria-label="Close"
           @click="onClear"
         />
@@ -51,10 +51,10 @@
         </CommandPaletteGroup>
       </ComboboxOptions>
 
-      <div v-else-if="empty" :class="ui.empty.wrapper">
-        <UIcon v-if="empty.icon" :name="empty.icon" :class="ui.empty.icon" aria-hidden="true" />
-        <p :class="query ? ui.empty.queryLabel : ui.empty.label">
-          {{ query ? empty.queryLabel : empty.label }}
+      <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>
     </div>
@@ -133,13 +133,13 @@ export default defineComponent({
       type: String,
       default: () => appConfig.ui.commandPalette.default.selectedIcon
     },
-    close: {
+    closeButton: {
       type: Object as PropType<Partial<Button>>,
-      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,