@xleddyl/443-components-vue 0.1.0 → 0.2.0

package/dist/components/layout/Toolbar.vue.d.ts

@@ -16,7 +16,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -62,7 +62,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "location" | "time" | (boolean | "true" | "false") | "page" | "step" | "date" | undefined;
+    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -71,7 +71,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
@@ -213,7 +213,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -259,7 +259,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "location" | "time" | (boolean | "true" | "false") | "page" | "step" | "date" | undefined;
+    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -268,7 +268,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;

package/dist/components/overlays/CommandPalette.vue

@@ -10,7 +10,7 @@
       @click="open = true"
    >
       <Icon name="magnifying-glass" class="k-command-trigger-icon" />
-      <span class="k-command-trigger-text">{{ triggerLabel }}</span>
+      <span class="k-command-trigger-text">{{ triggerText }}</span>
       <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>
@@ -27,7 +27,7 @@
    >
       <div v-if="present" ref="panelRef" class="k-modal-panel k-command-panel" tabindex="-1">
          <div class="k-command-bar">
-            <label :id="labelId" :for="inputId" class="k-visually-hidden">{{ label }}</label>
+            <label :id="labelId" :for="inputId" class="k-visually-hidden">{{ labelText }}</label>
             <Icon name="magnifying-glass" class="k-command-bar-icon" />
             <input
                :id="inputId"
@@ -37,7 +37,7 @@
                type="text"
                role="combobox"
                class="k-command-input"
-               :placeholder="placeholder"
+               :placeholder="placeholderText"
                autocomplete="off"
                autocapitalize="off"
                spellcheck="false"
@@ -117,9 +117,9 @@
             </div>
          </div>
          <div class="k-command-footer" aria-hidden="true">
-            <span><Kbd size="sm">↑</Kbd><Kbd size="sm">↓</Kbd> {{ footerMove }}</span>
-            <span><Kbd size="sm">↵</Kbd> {{ footerSelect }}</span>
-            <span><Kbd size="sm">Esc</Kbd> {{ footerClose }}</span>
+            <span><Kbd size="sm">↑</Kbd><Kbd size="sm">↓</Kbd> {{ moveText }}</span>
+            <span><Kbd size="sm">↵</Kbd> {{ selectText }}</span>
+            <span><Kbd size="sm">Esc</Kbd> {{ closeText }}</span>
          </div>
          <p class="k-visually-hidden" aria-live="polite">{{ status }}</p>
       </div>
@@ -129,6 +129,7 @@
 <script setup>
 import { computed, nextTick, onMounted, ref, shallowRef, useId, useTemplateRef, watch } from "vue";
 import { ariaKeyShortcuts, formatHotkey, useHotkey } from "../../composables/useHotkey";
+import { useLocale } from "../../composables/useLocale";
 import { useModalDialog } from "../../internal/overlays/dialog";
 import { nextEnabledIndex } from "../../internal/core/roving";
 import { useAsyncSearch } from "../../internal/core/search";
@@ -146,23 +147,35 @@ const props = defineProps({
   minQueryLength: { type: Number, required: false, default: 0 },
   filter: { type: Boolean, required: false, default: true },
   loading: { type: Boolean, required: false },
-  placeholder: { type: String, required: false, default: "Type a command or search" },
-  label: { type: String, required: false, default: "Command palette" },
+  placeholder: { type: String, required: false },
+  label: { type: String, required: false },
   shortcut: { type: [String, Boolean], required: false, default: "mod+k" },
   trigger: { type: Boolean, required: false, default: true },
-  triggerLabel: { type: String, required: false, default: "Search" },
+  triggerLabel: { type: String, required: false },
   recentKey: { type: String, required: false },
   recentLimit: { type: Number, required: false, default: 5 },
-  recentLabel: { type: String, required: false, default: "Recent" },
-  emptyText: { type: String, required: false, default: "No results" },
-  minQueryText: { type: String, required: false, default: "Keep typing to search" },
-  errorText: { type: String, required: false, default: "Search failed. Try again." },
-  loadingText: { type: String, required: false, default: "Loading" },
-  resultsText: { type: Function, required: false, default: (count) => `${count} results` },
-  footerMove: { type: String, required: false, default: "to move" },
-  footerSelect: { type: String, required: false, default: "to select" },
-  footerClose: { type: String, required: false, default: "to close" }
+  recentLabel: { type: String, required: false },
+  emptyText: { type: String, required: false },
+  minQueryText: { type: String, required: false },
+  errorText: { type: String, required: false },
+  loadingText: { type: String, required: false },
+  resultsText: { type: Function, required: false },
+  footerMove: { type: String, required: false },
+  footerSelect: { type: String, required: false },
+  footerClose: { type: String, required: false }
 });
+const { t } = useLocale();
+const placeholderText = computed(() => props.placeholder ?? t("commandPalette.placeholder"));
+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 minQueryLabel = computed(() => props.minQueryText ?? t("commandPalette.minQuery"));
+const errorLabel = computed(() => props.errorText ?? t("commandPalette.error"));
+const loadingLabel = computed(() => props.loadingText ?? t("common.loading"));
+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"]);
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const query = defineModel("query", { type: String, ...{ default: "" } });
@@ -203,7 +216,7 @@ const rendered = computed(() => {
   if (!term.value && props.recentKey && recent.value.length) {
     list.push({
       key: "recent",
-      label: props.recentLabel,
+      label: recentText.value,
       recent: true,
       items: recent.value.map((snapshot) => {
         const item = allItems.value.find((candidate) => candidate.id === snapshot.id) ?? snapshot;
@@ -228,15 +241,16 @@ const rendered = computed(() => {
 const flat = computed(() => rendered.value.flatMap((group) => group.items));
 const activeId = computed(() => flat.value.length ? optionId(active.value) : void 0);
 const hint = computed(() => {
-  if (belowMinimum.value) return props.minQueryText;
-  if (search.failed.value) return props.errorText;
-  if (!busy.value && !flat.value.length && (term.value || !props.search)) return props.emptyText;
+  if (belowMinimum.value) return minQueryLabel.value;
+  if (search.failed.value) return errorLabel.value;
+  if (!busy.value && !flat.value.length && (term.value || !props.search)) return emptyLabel.value;
   return "";
 });
 const status = computed(() => {
   if (hint.value) return hint.value;
-  if (busy.value) return props.loadingText;
-  return props.resultsText(flat.value.length);
+  if (busy.value) return loadingLabel.value;
+  const count = flat.value.length;
+  return props.resultsText ? props.resultsText(count) : t("commandPalette.results", { count });
 });
 function optionId(index) {
   return `${listId}-option-${index}`;

package/dist/components/overlays/CommandPalette.vue.d.ts

@@ -36,7 +36,12 @@ declare const __VLS_base: import("vue").DefineComponent<{
     open?: boolean;
     query?: string;
     key?: PropertyKey | undefined;
+    prefix?: string | undefined | undefined;
     value?: string | number | readonly string[] | undefined;
+    form?: string | undefined | undefined;
+    title?: string | undefined | undefined;
+    style?: import("vue").StyleValue;
+    results?: (string | number) | undefined;
     name?: string | undefined | undefined;
     type?: "submit" | "reset" | "button" | undefined | undefined;
     ref?: import("vue").VNodeRef | undefined;
@@ -44,9 +49,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
-    style?: import("vue").StyleValue;
-    form?: string | undefined | undefined;
-    title?: string | undefined | undefined;
     onCopy?: ((payload: ClipboardEvent) => void) | undefined;
     onCut?: ((payload: ClipboardEvent) => void) | undefined;
     onPaste?: ((payload: ClipboardEvent) => void) | undefined;
@@ -154,7 +156,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "location" | "time" | (boolean | "true" | "false") | "page" | "step" | "date" | undefined;
+    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -163,7 +165,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
     'aria-labelledby'?: string | undefined | undefined;
@@ -199,7 +201,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     spellcheck?: (boolean | "true" | "false") | undefined;
@@ -208,7 +210,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     about?: string | undefined | undefined;
     datatype?: string | undefined | undefined;
     inlist?: any;
-    prefix?: string | undefined | undefined;
     property?: string | undefined | undefined;
     resource?: string | undefined | undefined;
     typeof?: string | undefined | undefined;
@@ -221,7 +222,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     itemtype?: string | undefined | undefined;
     itemid?: string | undefined | undefined;
     itemref?: string | undefined | undefined;
-    results?: (string | number) | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
     inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
@@ -243,8 +243,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     hide: () => boolean;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
-    open: () => any;
     select: (item: CommandItem) => any;
+    open: () => any;
     "update:open": (value: boolean) => any;
     "update:query": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<{
@@ -273,7 +273,12 @@ declare const __VLS_base: import("vue").DefineComponent<{
     open?: boolean;
     query?: string;
     key?: PropertyKey | undefined;
+    prefix?: string | undefined | undefined;
     value?: string | number | readonly string[] | undefined;
+    form?: string | undefined | undefined;
+    title?: string | undefined | undefined;
+    style?: import("vue").StyleValue;
+    results?: (string | number) | undefined;
     name?: string | undefined | undefined;
     type?: "submit" | "reset" | "button" | undefined | undefined;
     ref?: import("vue").VNodeRef | undefined;
@@ -281,9 +286,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
-    style?: import("vue").StyleValue;
-    form?: string | undefined | undefined;
-    title?: string | undefined | undefined;
     onCopy?: ((payload: ClipboardEvent) => void) | undefined;
     onCut?: ((payload: ClipboardEvent) => void) | undefined;
     onPaste?: ((payload: ClipboardEvent) => void) | undefined;
@@ -391,7 +393,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "location" | "time" | (boolean | "true" | "false") | "page" | "step" | "date" | undefined;
+    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -400,7 +402,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
     'aria-labelledby'?: string | undefined | undefined;
@@ -436,7 +438,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     spellcheck?: (boolean | "true" | "false") | undefined;
@@ -445,7 +447,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     about?: string | undefined | undefined;
     datatype?: string | undefined | undefined;
     inlist?: any;
-    prefix?: string | undefined | undefined;
     property?: string | undefined | undefined;
     resource?: string | undefined | undefined;
     typeof?: string | undefined | undefined;
@@ -458,7 +459,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     itemtype?: string | undefined | undefined;
     itemid?: string | undefined | undefined;
     itemref?: string | undefined | undefined;
-    results?: (string | number) | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
     inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
@@ -477,30 +477,18 @@ declare const __VLS_base: import("vue").DefineComponent<{
     popovertargetaction?: import("../../index.ts").PopoverTargetAction | undefined;
 }> & Readonly<{
     onClose?: (() => any) | undefined;
-    onOpen?: (() => any) | undefined;
     onSelect?: ((item: CommandItem) => any) | undefined;
+    onOpen?: (() => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:query"?: ((value: string) => any) | undefined;
 }>, {
     filter: boolean;
-    placeholder: string;
-    label: string;
-    emptyText: string;
-    loadingText: string;
     debounce: number;
     minQueryLength: number;
-    resultsText: (count: number) => string;
     shortcut: string | false;
     groups: CommandGroup[];
     trigger: boolean;
-    triggerLabel: string;
     recentLimit: number;
-    recentLabel: string;
-    minQueryText: string;
-    errorText: string;
-    footerMove: string;
-    footerSelect: string;
-    footerClose: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/overlays/ConfirmDialog.vue

@@ -5,7 +5,7 @@
       :class="`k-confirm-${tone}`"
       role="alertdialog"
       size="sm"
-      :title="title"
+      :title="titleText"
       :description="description"
       :loading="loading"
       hide-close
@@ -18,7 +18,7 @@
                <Icon :name="icon" />
             </span>
             <div class="k-confirm-heading">
-               <h2 :id="titleId" class="k-modal-title">{{ title }}</h2>
+               <h2 :id="titleId" class="k-modal-title">{{ titleText }}</h2>
                <p v-if="description" :id="descriptionId" class="k-modal-description">
                   {{ description }}
                </p>
@@ -33,7 +33,7 @@
       <template #footer>
          <Button
             v-if="!hideCancel"
-            :label="cancelLabel"
+            :label="cancelText"
             variant="soft"
             tone="neutral"
             :disabled="loading"
@@ -41,7 +41,7 @@
             @click="cancel"
          />
          <Button
-            :label="confirmLabel"
+            :label="confirmText"
             :tone="tone"
             :loading="loading"
             :autofocus="tone !== 'danger' || hideCancel || void 0"
@@ -52,20 +52,25 @@
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
+import { useLocale } from "../../composables/useLocale";
 import Button from "../core/Button.vue";
 import Icon from "../core/Icon.vue";
 import Modal from "./Modal.vue";
 const props = defineProps({
-  title: { type: String, required: false, default: "Are you sure?" },
+  title: { type: String, required: false },
   description: { type: String, required: false },
-  confirmLabel: { type: String, required: false, default: "Confirm" },
-  cancelLabel: { type: String, required: false, default: "Cancel" },
+  confirmLabel: { type: String, required: false },
+  cancelLabel: { type: String, required: false },
   tone: { type: String, required: false, default: "accent" },
   icon: { type: null, required: false },
   hideCancel: { type: Boolean, required: false },
   onConfirm: { type: Function, required: false }
 });
+const { t } = useLocale();
+const titleText = computed(() => props.title ?? t("common.areYouSure"));
+const confirmText = computed(() => props.confirmLabel ?? t("common.confirm"));
+const cancelText = computed(() => props.cancelLabel ?? t("common.cancel"));
 const emit = defineEmits(["cancel", "resolve", "afterLeave"]);
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const loading = ref(false);
@@ -84,7 +89,7 @@ async function confirm() {
     try {
       if (await props.onConfirm() === false) return;
     } catch (cause) {
-      error.value = cause instanceof Error ? cause.message : String(cause || "Something went wrong");
+      error.value = cause instanceof Error ? cause.message : String(cause || t("common.somethingWentWrong"));
       return;
     } finally {
       loading.value = false;

package/dist/components/overlays/ConfirmDialog.vue.d.ts

@@ -17,14 +17,17 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onConfirm?: () => unknown;
     open?: boolean | undefined;
     key?: PropertyKey | undefined;
+    loading?: boolean;
+    prefix?: "k-modal" | "k-drawer" | undefined;
+    style?: import("vue").StyleValue;
+    results?: (string | number) | undefined;
+    placeholder?: string | undefined;
     size?: import("./types.ts").ModalSize;
     ref?: import("vue").VNodeRef | undefined;
-    placeholder?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
-    style?: import("vue").StyleValue;
     onCopy?: ((payload: ClipboardEvent) => void) | undefined;
     onCut?: ((payload: ClipboardEvent) => void) | undefined;
     onPaste?: ((payload: ClipboardEvent) => void) | undefined;
@@ -187,7 +190,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     about?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
-    prefix?: "k-modal" | "k-drawer" | undefined;
     property?: string | undefined;
     resource?: string | undefined;
     typeof?: string | undefined;
@@ -200,7 +202,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     itemtype?: string | undefined;
     itemid?: string | undefined;
     itemref?: string | undefined;
-    results?: (string | number) | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
     inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
@@ -208,7 +209,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     exportparts?: string;
     part?: string;
     popover?: import("../../index.ts").PopoverMode | "" | boolean;
-    loading?: boolean;
     onClose?: (() => any) | undefined;
     onVnodeBeforeMount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeMounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
@@ -222,7 +222,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onOpen?: (() => any) | undefined;
     rootClass?: unknown;
     hideClose?: boolean;
-    closeLabel?: string | undefined;
+    closeLabel?: string;
     closedby?: import("../../index.ts").DialogClosedBy;
 }, {
     confirm: typeof confirm;
@@ -243,14 +243,17 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onConfirm?: () => unknown;
     open?: boolean | undefined;
     key?: PropertyKey | undefined;
+    loading?: boolean;
+    prefix?: "k-modal" | "k-drawer" | undefined;
+    style?: import("vue").StyleValue;
+    results?: (string | number) | undefined;
+    placeholder?: string | undefined;
     size?: import("./types.ts").ModalSize;
     ref?: import("vue").VNodeRef | undefined;
-    placeholder?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
-    style?: import("vue").StyleValue;
     onCopy?: ((payload: ClipboardEvent) => void) | undefined;
     onCut?: ((payload: ClipboardEvent) => void) | undefined;
     onPaste?: ((payload: ClipboardEvent) => void) | undefined;
@@ -413,7 +416,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     about?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
-    prefix?: "k-modal" | "k-drawer" | undefined;
     property?: string | undefined;
     resource?: string | undefined;
     typeof?: string | undefined;
@@ -426,7 +428,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     itemtype?: string | undefined;
     itemid?: string | undefined;
     itemref?: string | undefined;
-    results?: (string | number) | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
     inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
@@ -434,7 +435,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     exportparts?: string;
     part?: string;
     popover?: import("../../index.ts").PopoverMode | "" | boolean;
-    loading?: boolean;
     onClose?: (() => any) | undefined;
     onVnodeBeforeMount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeMounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
@@ -448,7 +448,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onOpen?: (() => any) | undefined;
     rootClass?: unknown;
     hideClose?: boolean;
-    closeLabel?: string | undefined;
+    closeLabel?: string;
     closedby?: import("../../index.ts").DialogClosedBy;
 }> & Readonly<{
     onCancel?: (() => any) | undefined;
@@ -456,10 +456,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onAfterLeave?: (() => any) | undefined;
     onResolve?: ((confirmed: boolean) => any) | undefined;
 }>, {
-    title: string;
     tone: Tone;
-    confirmLabel: string;
-    cancelLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/overlays/ConfirmHost.vue

@@ -15,8 +15,9 @@
       @resolve="onResolve"
       @after-leave="onAfterLeave"
    >
+      <component :is="current.body" v-if="current && current.kind !== 'prompt' && current.body" />
       <FormField
-         v-if="current?.kind === 'prompt'"
+         v-else-if="current?.kind === 'prompt'"
          :label="current.label"
          :required="current.required"
          :error="promptError || void 0"
@@ -36,10 +37,12 @@
 <script setup>
 import { computed, onBeforeUnmount, ref, shallowRef, useTemplateRef, watch } from "vue";
 import { cancelRequest, confirmQueue } from "../../internal/overlays/confirm";
+import { useLocale } from "../../composables/useLocale";
 import { useHostClaim } from "../../internal/overlays/host";
 import FormField from "../core/FormField.vue";
 import Input from "../core/Input.vue";
 import ConfirmDialog from "./ConfirmDialog.vue";
+const { t } = useLocale();
 const active = useHostClaim("confirm");
 const dialogRef = useTemplateRef("dialogRef");
 const open = ref(false);
@@ -49,7 +52,7 @@ const promptError = ref("");
 const confirmLabel = computed(() => {
   const request = current.value;
   if (request?.confirmLabel) return request.confirmLabel;
-  return request?.kind === "alert" ? "OK" : void 0;
+  return request?.kind === "alert" ? t("common.ok") : void 0;
 });
 function next() {
   if (!active.value || current.value || !confirmQueue.length) return;
@@ -67,7 +70,7 @@ async function onConfirm() {
   if (!request || request.kind === "alert") return;
   if (request.kind === "confirm") return request.onConfirm?.();
   const value = promptText();
-  const error = request.required && !value.trim() ? request.requiredText ?? "This field is required" : request.validate?.(value);
+  const error = request.required && !value.trim() ? request.requiredText ?? t("form.required") : request.validate?.(value);
   if (error) {
     promptError.value = error;
     return false;