@xleddyl/443-components-vue 0.1.0 → 0.2.2

package/dist/components/templates/DetailPage.vue.d.ts

@@ -35,13 +35,15 @@ declare const __VLS_base: import("vue").DefineComponent<{
     errorTitle?: string;
     tab?: TabItem["value"];
     key?: PropertyKey | undefined;
-    ref?: import("vue").VNodeRef | undefined;
+    prefix?: string | undefined | undefined;
+    style?: import("vue").StyleValue;
+    results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | 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;
@@ -150,7 +152,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;
@@ -159,7 +161,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;
@@ -195,7 +197,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;
@@ -204,7 +206,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;
@@ -217,7 +218,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;
@@ -246,13 +246,15 @@ declare const __VLS_base: import("vue").DefineComponent<{
     errorTitle?: string;
     tab?: TabItem["value"];
     key?: PropertyKey | undefined;
-    ref?: import("vue").VNodeRef | undefined;
+    prefix?: string | undefined | undefined;
+    style?: import("vue").StyleValue;
+    results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | 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;
@@ -361,7 +363,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;
@@ -370,7 +372,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;
@@ -406,7 +408,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;
@@ -415,7 +417,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;
@@ -428,7 +429,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;
@@ -440,10 +440,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     "onUpdate:tab"?: ((value: string | number | undefined) => any) | undefined;
 }>, {
     level: HeadingLevel;
-    asideLabel: string;
-    backLabel: string;
-    tabsLabel: string;
-    errorTitle: 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/templates/EmptyPage.vue

@@ -11,7 +11,7 @@
             </slot>
          </div>
          <component :is="`h${level}`" class="k-empty-page-title">
-            <slot name="title">{{ title }}</slot>
+            <slot name="title">{{ titleText }}</slot>
          </component>
          <p v-if="description || $slots.description" class="k-empty-page-description">
             <slot name="description">{{ description }}</slot>
@@ -32,7 +32,7 @@
                >
             </slot>
          </div>
-         <ol v-if="steps?.length" class="k-empty-page-steps" :aria-label="stepsLabel">
+         <ol v-if="steps?.length" class="k-empty-page-steps" :aria-label="stepsText">
             <li
                v-for="(step, index) in steps"
                :key="step.title"
@@ -54,7 +54,7 @@
                      step.description
                   }}</span>
                </span>
-               <span class="k-visually-hidden">{{ step.done ? doneLabel : todoLabel }}</span>
+               <span class="k-visually-hidden">{{ step.done ? doneText : todoText }}</span>
             </li>
          </ol>
          <slot />
@@ -63,11 +63,13 @@
 </template>
 
 <script setup>
+import { computed } from "vue";
+import { useLocale } from "../../composables/useLocale";
 import { useLinkResolver } from "../../internal/core/link";
 import Button from "../core/Button.vue";
 import Icon from "../core/Icon.vue";
-defineProps({
-  title: { type: String, required: false, default: "Welcome aboard" },
+const props = defineProps({
+  title: { type: String, required: false },
   description: { type: String, required: false },
   icon: { type: null, required: false, default: "rocket-launch" },
   level: { type: Number, required: false, default: 1 },
@@ -78,12 +80,17 @@ defineProps({
   secondaryTo: { type: [String, Object], required: false },
   secondaryHref: { type: String, required: false },
   steps: { type: Array, required: false },
-  stepsLabel: { type: String, required: false, default: "Getting started" },
-  doneLabel: { type: String, required: false, default: "(done)" },
-  todoLabel: { type: String, required: false, default: "(to do)" },
+  stepsLabel: { type: String, required: false },
+  doneLabel: { type: String, required: false },
+  todoLabel: { type: String, required: false },
   fill: { type: Boolean, required: false, default: true },
   onAction: { type: Function, required: false },
   onSecondary: { type: Function, required: false }
 });
+const { t } = useLocale();
+const titleText = computed(() => props.title ?? t("emptyPage.title"));
+const stepsText = computed(() => props.stepsLabel ?? t("emptyPage.steps"));
+const doneText = computed(() => props.doneLabel ?? t("emptyPage.done"));
+const todoText = computed(() => props.todoLabel ?? t("emptyPage.todo"));
 const { resolveLink } = useLinkResolver();
 </script>

package/dist/components/templates/EmptyPage.vue.d.ts

@@ -41,7 +41,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;
@@ -86,7 +86,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;
@@ -95,7 +95,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;
@@ -250,7 +250,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;
@@ -295,7 +295,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;
@@ -304,7 +304,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;
@@ -433,14 +433,10 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
-    fill: boolean;
-    title: string;
     icon: IconName;
+    fill: boolean;
     level: HeadingLevel;
     actionIcon: IconName;
-    stepsLabel: string;
-    doneLabel: string;
-    todoLabel: 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/templates/ErrorPage.vue

@@ -17,22 +17,22 @@
             <div class="k-error-actions">
                <slot name="actions">
                   <Button
-                     v-if="homeLabel"
+                     v-if="homeText"
                      icon="home"
                      :to="onHome ? void 0 : homeTo"
                      @click="onHome?.()"
-                     >{{ homeLabel }}</Button
+                     >{{ homeText }}</Button
                   >
                   <Button
-                     v-if="onRetry && retryLabel"
+                     v-if="onRetry && retryText"
                      variant="soft"
                      tone="neutral"
                      icon="arrow-path"
                      @click="onRetry()"
-                     >{{ retryLabel }}</Button
+                     >{{ retryText }}</Button
                   >
-                  <Button v-else-if="backLabel" variant="ghost" tone="neutral" @click="goBack">{{
-                     backLabel
+                  <Button v-else-if="backText" variant="ghost" tone="neutral" @click="goBack">{{
+                     backText
                   }}</Button>
                </slot>
             </div>
@@ -44,6 +44,7 @@
 
 <script setup>
 import { computed } from "vue";
+import { useLocale } from "../../composables/useLocale";
 import Button from "../core/Button.vue";
 import Brand from "./Brand.vue";
 const props = defineProps({
@@ -52,9 +53,9 @@ const props = defineProps({
   title: { type: String, required: false },
   message: { type: String, required: false },
   homeTo: { type: [String, Object], required: false, default: "/" },
-  homeLabel: { type: [String, Boolean], required: false, default: "Back to home" },
-  backLabel: { type: [String, Boolean], required: false, default: "Go back" },
-  retryLabel: { type: [String, Boolean], required: false, default: "Try again" },
+  homeLabel: { type: [String, Boolean], required: false, default: void 0 },
+  backLabel: { type: [String, Boolean], required: false, default: void 0 },
+  retryLabel: { type: [String, Boolean], required: false, default: void 0 },
   brandName: { type: String, required: false },
   brandIcon: { type: null, required: false },
   brandLogo: { type: String, required: false },
@@ -62,26 +63,32 @@ const props = defineProps({
   onHome: { type: Function, required: false },
   onRetry: { type: Function, required: false }
 });
-const defaults = {
-  400: { title: "Bad request", message: "The request could not be understood." },
-  401: { title: "Sign in required", message: "You need to sign in to see this page." },
-  403: { title: "Access denied", message: "You do not have permission to see this page." },
-  404: {
-    title: "Page not found",
-    message: "The page you are looking for does not exist or has been moved."
-  },
-  500: {
-    title: "Something went wrong",
-    message: "An unexpected error occurred. Try again in a moment."
-  },
-  503: { title: "Service unavailable", message: "We are down for maintenance. Back soon." }
-};
+const { t } = useLocale();
+const defaults = computed(() => ({
+  400: { title: t("errorPage.badRequestTitle"), message: t("errorPage.badRequestMessage") },
+  401: { title: t("errorPage.signInTitle"), message: t("errorPage.signInMessage") },
+  403: { title: t("errorPage.forbiddenTitle"), message: t("errorPage.forbiddenMessage") },
+  404: { title: t("errorPage.notFoundTitle"), message: t("errorPage.notFoundMessage") },
+  500: { title: t("errorPage.serverTitle"), message: t("errorPage.serverMessage") },
+  503: { title: t("errorPage.unavailableTitle"), message: t("errorPage.unavailableMessage") }
+}));
+const homeText = computed(
+  () => props.homeLabel === void 0 ? t("errorPage.home") : props.homeLabel
+);
+const backText = computed(
+  () => props.backLabel === void 0 ? t("errorPage.back") : props.backLabel
+);
+const retryText = computed(
+  () => props.retryLabel === void 0 ? t("errorPage.retry") : props.retryLabel
+);
 const code = computed(
   () => props.statusCode ?? props.error?.statusCode ?? props.error?.status ?? 500
 );
-const preset = computed(() => defaults[code.value] ?? defaults[code.value >= 500 ? 500 : 400]);
+const preset = computed(
+  () => defaults.value[code.value] ?? defaults.value[code.value >= 500 ? 500 : 400]
+);
 const resolvedTitle = computed(
-  () => props.title ?? (defaults[code.value] ? void 0 : props.error?.statusMessage ?? props.error?.statusText) ?? preset.value.title
+  () => props.title ?? (defaults.value[code.value] ? void 0 : props.error?.statusMessage ?? props.error?.statusText) ?? preset.value.title
 );
 const resolvedMessage = computed(() => {
   if (props.message !== void 0) return props.message;

package/dist/components/templates/ErrorPage.vue.d.ts

@@ -37,7 +37,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;
@@ -82,7 +82,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;
@@ -91,7 +91,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;
@@ -243,7 +243,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;
@@ -288,7 +288,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;
@@ -297,7 +297,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/templates/FormPage.vue

@@ -8,7 +8,7 @@
             icon="arrow-left"
             :to="backTo"
             :href="backHref"
-            >{{ backLabel }}</Button
+            >{{ backText }}</Button
          >
       </div>
       <PageHeader
@@ -46,18 +46,18 @@
       <div class="k-form-page-footer" :class="{ 'is-sticky': sticky, 'is-dirty': isDirty }">
          <p class="k-form-page-status" aria-live="polite">
             <span v-if="isDirty" class="k-form-page-dot" aria-hidden="true" />
-            <slot name="status" :dirty="isDirty">{{ isDirty ? dirtyMessage : "" }}</slot>
+            <slot name="status" :dirty="isDirty">{{ isDirty ? dirtyText : "" }}</slot>
          </p>
          <div class="k-form-page-actions">
             <slot name="footer" :dirty="isDirty" :saving="isSaving">
                <Button
-                  v-if="cancelLabel"
+                  v-if="cancelText"
                   variant="ghost"
                   tone="neutral"
                   :to="cancelTo"
                   :disabled="isSaving"
                   @click="emit('cancel')"
-                  >{{ cancelLabel }}</Button
+                  >{{ cancelText }}</Button
                >
                <Button
                   type="submit"
@@ -65,7 +65,7 @@
                   :loading="isSaving"
                   :disabled="requireDirty && !isDirty"
                   :icon="submitIcon"
-                  >{{ submitLabel }}</Button
+                  >{{ submitText }}</Button
                >
             </slot>
          </div>
@@ -76,6 +76,7 @@
 <script setup>
 import { computed, useId } from "vue";
 import { useDirtyGuard } from "../../composables/useDirtyGuard";
+import { useLocale } from "../../composables/useLocale";
 import Button from "../core/Button.vue";
 import Form from "../core/Form.vue";
 import PageHeader from "../layout/PageHeader.vue";
@@ -87,23 +88,30 @@ const props = defineProps({
   level: { type: Number, required: false, default: 1 },
   backTo: { type: [String, Object], required: false },
   backHref: { type: String, required: false },
-  backLabel: { type: String, required: false, default: "Back" },
+  backLabel: { type: String, required: false },
   form: { type: Object, required: false },
   dirty: { type: Boolean, required: false, default: void 0 },
   saving: { type: Boolean, required: false },
   guard: { type: Boolean, required: false, default: true },
-  guardTitle: { type: String, required: false, default: "Discard unsaved changes?" },
-  guardMessage: { type: String, required: false, default: "The changes you made on this page will be lost." },
+  guardTitle: { type: String, required: false },
+  guardMessage: { type: String, required: false },
   requireDirty: { type: Boolean, required: false },
-  submitLabel: { type: String, required: false, default: "Save" },
+  submitLabel: { type: String, required: false },
   submitIcon: { type: null, required: false },
-  cancelLabel: { type: [String, Boolean], required: false, default: "Cancel" },
+  cancelLabel: { type: [String, Boolean], required: false, default: void 0 },
   cancelTo: { type: [String, Object], required: false },
-  dirtyMessage: { type: String, required: false, default: "Unsaved changes" },
+  dirtyMessage: { type: String, required: false },
   width: { type: String, required: false, default: "md" },
   sticky: { type: Boolean, required: false, default: true }
 });
 const emit = defineEmits(["submit", "submitted", "invalid", "reset", "cancel"]);
+const { t } = useLocale();
+const backText = computed(() => props.backLabel ?? t("common.back"));
+const submitText = computed(() => props.submitLabel ?? t("common.save"));
+const cancelText = computed(
+  () => props.cancelLabel === void 0 ? t("common.cancel") : props.cancelLabel
+);
+const dirtyText = computed(() => props.dirtyMessage ?? t("common.unsavedChanges"));
 const formId = useId();
 const isDirty = computed(() => props.dirty ?? Boolean(props.form?.dirty.value));
 const isSaving = computed(() => props.saving || Boolean(props.form?.submitting.value));

package/dist/components/templates/FormPage.vue.d.ts

@@ -27,11 +27,11 @@ declare const __VLS_export: <S extends FormSchema>(__VLS_props: NonNullable<Awai
         width?: "sm" | "md" | "lg" | "full";
         sticky?: boolean;
     } & {
-        onSubmit?: (() => any) | undefined;
+        onCancel?: (() => any) | undefined;
         onInvalid?: (() => any) | undefined;
+        onSubmit?: (() => any) | undefined;
         onReset?: (() => any) | undefined;
         onSubmitted?: (() => any) | undefined;
-        onCancel?: (() => any) | undefined;
     } & Partial<import("vue").HTMLAttributes & import("vue").ReservedProps>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -56,7 +56,7 @@ declare const __VLS_export: <S extends FormSchema>(__VLS_props: NonNullable<Awai
             saving: boolean;
         }) => any;
     };
-    emit: ((evt: "submit") => void) & ((evt: "invalid") => void) & ((evt: "reset") => void) & ((evt: "submitted") => void) & ((evt: "cancel") => void);
+    emit: ((evt: "cancel") => void) & ((evt: "invalid") => void) & ((evt: "submit") => void) & ((evt: "reset") => void) & ((evt: "submitted") => void);
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };