@xleddyl/443-components-vue 0.3.0 → 0.4.0

package/dist/components/overlays/CommandPalette.vue

@@ -1,5 +1,5 @@
 <template>
-   <button
+   <ButtonElement
       v-if="trigger"
       v-bind="$attrs"
       type="button"
@@ -14,7 +14,7 @@
       <span v-if="shortcut" class="k-command-trigger-keys" aria-hidden="true">
          <Kbd v-for="(key, index) in shortcutKeys" :key="index" size="sm">{{ key }}</Kbd>
       </span>
-   </button>
+   </ButtonElement>
    <dialog
       ref="dialogRef"
       class="k-modal k-command"
@@ -152,6 +152,7 @@ import { useAsyncSearch } from "../../internal/core/search";
 import { matchesSearch } from "../../internal/core/text";
 import { readStorageJson, writeStorageJson } from "../../internal/core/storage";
 import { useRouterLike } from "../../internal/layout/route";
+import { ButtonElement } from "../../internal/core/ButtonElement";
 import Icon from "../core/Icon.vue";
 import Kbd from "../core/Kbd.vue";
 import Spinner from "../core/Spinner.vue";
@@ -173,7 +174,7 @@ const props = defineProps({
   recentKey: { type: String, required: false },
   recentLimit: { type: Number, required: false, default: 5 },
   recentLabel: { type: String, required: false },
-  emptyText: { type: String, required: false },
+  emptyText: { type: [String, Function], required: false },
   minQueryText: { type: String, required: false },
   errorText: { type: String, required: false },
   loadingText: { type: String, required: false },
@@ -188,7 +189,11 @@ const placeholderText = computed(() => props.placeholder ?? t("commandPalette.pl
 const labelText = computed(() => props.label ?? t("commandPalette.label"));
 const triggerText = computed(() => props.triggerLabel ?? t("common.search"));
 const recentText = computed(() => props.recentLabel ?? t("commandPalette.recent"));
-const emptyLabel = computed(() => props.emptyText ?? t("common.noResults"));
+const emptyLabel = computed(() => {
+  const text = props.emptyText;
+  if (typeof text === "function") return text(term.value);
+  return text ?? t("common.noResults");
+});
 const minQueryLabel = computed(() => props.minQueryText ?? t("commandPalette.minQuery"));
 const errorLabel = computed(() => props.errorText ?? t("commandPalette.error"));
 const loadingLabel = computed(() => props.loadingText ?? t("common.loading"));
@@ -196,6 +201,7 @@ const moveText = computed(() => props.footerMove ?? t("commandPalette.move"));
 const selectText = computed(() => props.footerSelect ?? t("commandPalette.select"));
 const closeText = computed(() => props.footerClose ?? t("commandPalette.close"));
 const emit = defineEmits(["select", "open", "close"]);
+defineSlots();
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const query = defineModel("query", { type: String, ...{ default: "" } });
 const baseId = useId();