chore(CommandPalette)!: rename props to emptyState and closeButton for consistency

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,