@xleddyl/443-components-vue 0.1.0 → 0.2.0

package/dist/components/templates/ListPage.vue

@@ -17,7 +17,7 @@
             <EmptyState
                variant="plain"
                icon="exclamation-triangle"
-               :title="errorTitle"
+               :title="errorText"
                :description="typeof error === 'string' ? error : void 0"
                :level="2"
             >
@@ -28,7 +28,7 @@
                      size="sm"
                      icon="arrow-path"
                      @click="emit('retry')"
-                     >{{ retryLabel }}</Button
+                     >{{ retryText }}</Button
                   >
                </template>
             </EmptyState>
@@ -39,7 +39,7 @@
          <EmptyState
             class="k-list-empty"
             :icon="emptyIcon"
-            :title="emptyTitle"
+            :title="emptyTitleText"
             :description="emptyDescription"
             :level="2"
          >
@@ -50,7 +50,7 @@
       </slot>
 
       <Card v-else class="k-list-card" padding="none">
-         <div v-if="hasToolbar" class="k-list-toolbar" role="search" :aria-label="toolbarLabel">
+         <div v-if="hasToolbar" class="k-list-toolbar" role="search" :aria-label="toolbarText">
             <div class="k-list-toolbar-start">
                <Input
                   v-if="searchable"
@@ -60,8 +60,8 @@
                   size="sm"
                   icon="magnifying-glass"
                   clearable
-                  :placeholder="searchPlaceholder"
-                  :aria-label="searchLabel"
+                  :placeholder="searchPlaceholderText"
+                  :aria-label="searchLabelText"
                   @update:model-value="(value) => search = String(value ?? '')"
                />
                <FilterPills
@@ -81,7 +81,7 @@
             >
                <template v-if="selectable && selected.length">
                   <span class="k-list-selection" aria-live="polite">{{
-                     selectedText(selected.length)
+                     selectedLabel(selected.length)
                   }}</span>
                   <slot name="bulk" :selected="selected" :clear="() => selected = []" />
                </template>
@@ -119,13 +119,13 @@
                         variant="plain"
                         size="sm"
                         icon="magnifying-glass"
-                        :title="noResultsTitle"
-                        :description="isFiltered ? noResultsDescription : void 0"
+                        :title="noResultsTitleText"
+                        :description="isFiltered ? noResultsDescriptionText : void 0"
                         :level="2"
                      >
                         <template v-if="isFiltered" #actions>
                            <Button size="sm" variant="soft" tone="neutral" @click="clearFilters">{{
-                              clearLabel
+                              clearText
                            }}</Button>
                         </template>
                      </EmptyState>
@@ -157,6 +157,7 @@
 
 <script setup>
 import { computed, useSlots, watch } from "vue";
+import { useLocale } from "../../composables/useLocale";
 import Button from "../core/Button.vue";
 import { createCollator, readCell, sortRows } from "../../internal/data/rows";
 import { normalizeSearch } from "../../internal/core/text";
@@ -189,23 +190,38 @@ const props = defineProps({
   pageSizes: { type: Array, required: false, default: () => [10, 20, 50] },
   searchable: { type: Boolean, required: false },
   searchKeys: { type: Array, required: false },
-  searchPlaceholder: { type: String, required: false, default: "Search" },
-  searchLabel: { type: String, required: false, default: "Search" },
+  searchPlaceholder: { type: String, required: false },
+  searchLabel: { type: String, required: false },
   filters: { type: Array, required: false },
   filterKey: { type: String, required: false },
   filterMultiple: { type: Boolean, required: false, default: true },
-  filterLabel: { type: String, required: false, default: "Filters" },
-  toolbarLabel: { type: String, required: false, default: "Filter results" },
-  emptyTitle: { type: String, required: false, default: "Nothing here yet" },
+  filterLabel: { type: String, required: false },
+  toolbarLabel: { type: String, required: false },
+  emptyTitle: { type: String, required: false },
   emptyDescription: { type: String, required: false },
   emptyIcon: { type: null, required: false, default: "inbox" },
-  noResultsTitle: { type: String, required: false, default: "No results" },
-  noResultsDescription: { type: String, required: false, default: "Try a different search or clear the filters." },
-  clearLabel: { type: String, required: false, default: "Clear filters" },
-  errorTitle: { type: String, required: false, default: "Something went wrong" },
-  retryLabel: { type: String, required: false, default: "Try again" },
-  selectedText: { type: Function, required: false, default: (count) => `${count} selected` }
+  noResultsTitle: { type: String, required: false },
+  noResultsDescription: { type: String, required: false },
+  clearLabel: { type: String, required: false },
+  errorTitle: { type: String, required: false },
+  retryLabel: { type: String, required: false },
+  selectedText: { type: Function, required: false }
 });
+const { locale, t } = useLocale();
+const searchPlaceholderText = computed(() => props.searchPlaceholder ?? t("common.search"));
+const searchLabelText = computed(() => props.searchLabel ?? t("common.search"));
+const toolbarText = computed(() => props.toolbarLabel ?? t("listPage.toolbar"));
+const emptyTitleText = computed(() => props.emptyTitle ?? t("listPage.emptyTitle"));
+const noResultsTitleText = computed(() => props.noResultsTitle ?? t("common.noResults"));
+const noResultsDescriptionText = computed(
+  () => props.noResultsDescription ?? t("listPage.noResultsDescription")
+);
+const clearText = computed(() => props.clearLabel ?? t("listPage.clearFilters"));
+const errorText = computed(() => props.errorTitle ?? t("common.somethingWentWrong"));
+const retryText = computed(() => props.retryLabel ?? t("common.retry"));
+function selectedLabel(count) {
+  return props.selectedText ? props.selectedText(count) : t("common.selected", { count });
+}
 const emit = defineEmits(["retry", "clear", "rowClick"]);
 defineSlots();
 const page = defineModel("page", { type: Number, ...{ default: 1 } });
@@ -254,9 +270,9 @@ const filtered = computed(() => {
     );
   });
 });
-const collator = createCollator();
+const collator = computed(() => createCollator(locale.value.code));
 const sorted = computed(
-  () => serverMode.value ? filtered.value : sortRows(filtered.value, sort.value, props.columns, collator)
+  () => serverMode.value ? filtered.value : sortRows(filtered.value, sort.value, props.columns, collator.value)
 );
 const resultTotal = computed(() => serverMode.value ? props.total ?? 0 : sorted.value.length);
 const visibleRows = computed(() => {

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

@@ -50,12 +50,12 @@ declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<
         selected?: RowKey[];
     }) & {
         onClear?: (() => any) | undefined;
+        onRetry?: (() => any) | undefined;
         "onUpdate:page"?: ((value: number) => any) | undefined;
         "onUpdate:pageSize"?: ((value: number) => any) | undefined;
         onRowClick?: ((row: T, index: number, event: MouseEvent) => any) | undefined;
         "onUpdate:sort"?: ((value: TableSort | null) => any) | undefined;
         "onUpdate:selected"?: ((value: RowKey[]) => any) | undefined;
-        onRetry?: (() => any) | undefined;
         "onUpdate:search"?: ((value: string) => any) | undefined;
         "onUpdate:filter"?: ((value: string | number | (string | number)[] | null) => any) | undefined;
     } & Partial<import("vue").HTMLAttributes & import("vue").ReservedProps>> & (typeof globalThis extends {
@@ -100,7 +100,7 @@ declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<
             retry: () => void;
         }) => unknown;
     };
-    emit: (((evt: "clear") => void) & ((evt: "rowClick", row: T, index: number, event: MouseEvent) => void) & ((evt: "retry") => void)) & (((event: "update:page", value: number) => void) & ((event: "update:pageSize", value: number) => void) & ((event: "update:sort", value: TableSort | null) => void) & ((event: "update:selected", value: RowKey[]) => void) & ((event: "update:search", value: string) => void) & ((event: "update:filter", value: string | number | (string | number)[] | null) => void));
+    emit: (((evt: "clear") => void) & ((evt: "retry") => void) & ((evt: "rowClick", row: T, index: number, event: MouseEvent) => void)) & (((event: "update:page", value: number) => void) & ((event: "update:pageSize", value: number) => void) & ((event: "update:sort", value: TableSort | null) => void) & ((event: "update:selected", value: RowKey[]) => void) & ((event: "update:search", value: string) => void) & ((event: "update:filter", value: string | number | (string | number)[] | null) => void));
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/components/templates/NotFoundPage.vue

@@ -22,11 +22,11 @@
 <script setup>
 import ErrorPage from "./ErrorPage.vue";
 defineProps({
-  title: { type: String, required: false, default: "Page not found" },
-  message: { type: String, required: false, default: "The page you are looking for does not exist or has been moved." },
+  title: { type: String, required: false, default: void 0 },
+  message: { type: String, required: false, default: void 0 },
   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" },
+  homeLabel: { type: [String, Boolean], required: false, default: void 0 },
+  backLabel: { type: [String, Boolean], required: false, default: void 0 },
   brandName: { type: String, required: false },
   brandIcon: { type: null, required: false },
   brandLogo: { type: String, required: false },

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

@@ -434,8 +434,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
 }> & Readonly<{}>, {
     fill: boolean;
-    message: string;
     title: string;
+    message: string;
     backLabel: string | false;
     homeTo: LinkTarget;
     homeLabel: string | false;

package/dist/components/templates/SaveBar.vue

@@ -1,27 +1,27 @@
 <template>
    <div class="k-savebar-slot" :class="{ 'is-visible': visible }">
-      <p class="k-visually-hidden" role="status">{{ visible ? message : "" }}</p>
+      <p class="k-visually-hidden" role="status">{{ visible ? messageText : "" }}</p>
       <div
          v-if="visible"
          class="k-savebar"
          role="region"
-         :aria-label="label"
+         :aria-label="labelText"
          :aria-busy="saving ? 'true' : void 0"
       >
          <span class="k-savebar-dot" aria-hidden="true" />
          <p class="k-savebar-message">
-            <slot>{{ message }}</slot>
+            <slot>{{ messageText }}</slot>
          </p>
          <div class="k-savebar-actions">
             <slot name="actions">
                <Button
-                  v-if="discardLabel"
+                  v-if="discardText"
                   variant="ghost"
                   tone="neutral"
                   size="sm"
                   :disabled="saving"
                   @click="emit('discard')"
-                  >{{ discardLabel }}</Button
+                  >{{ discardText }}</Button
                >
                <Button
                   :type="form ? 'submit' : 'button'"
@@ -29,7 +29,7 @@
                   size="sm"
                   :loading="saving"
                   @click="form ? void 0 : emit('save')"
-                  >{{ saveLabel }}</Button
+                  >{{ saveText }}</Button
                >
             </slot>
          </div>
@@ -38,15 +38,24 @@
 </template>
 
 <script setup>
+import { computed } from "vue";
+import { useLocale } from "../../composables/useLocale";
 import Button from "../core/Button.vue";
-defineProps({
+const props = defineProps({
   visible: { type: Boolean, required: false, default: true },
   saving: { type: Boolean, required: false },
-  message: { type: String, required: false, default: "You have unsaved changes" },
-  saveLabel: { type: String, required: false, default: "Save changes" },
-  discardLabel: { type: [String, Boolean], required: false, default: "Discard" },
-  label: { type: String, required: false, default: "Unsaved changes" },
+  message: { type: String, required: false },
+  saveLabel: { type: String, required: false },
+  discardLabel: { type: [String, Boolean], required: false, default: void 0 },
+  label: { type: String, required: false },
   form: { type: String, required: false }
 });
+const { t } = useLocale();
+const messageText = computed(() => props.message ?? t("saveBar.message"));
+const saveText = computed(() => props.saveLabel ?? t("common.saveChanges"));
+const labelText = computed(() => props.label ?? t("common.unsavedChanges"));
+const discardText = computed(
+  () => props.discardLabel === void 0 ? t("common.discard") : props.discardLabel
+);
 const emit = defineEmits(["save", "discard"]);
 </script>

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

@@ -13,14 +13,16 @@ declare const __VLS_base: import("vue").DefineComponent<{
     label?: string;
     form?: string;
     key?: PropertyKey | undefined;
-    ref?: import("vue").VNodeRef | undefined;
+    prefix?: string | undefined | undefined;
+    title?: 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;
-    title?: string | undefined | undefined;
     onCopy?: ((payload: ClipboardEvent) => void) | undefined;
     onCut?: ((payload: ClipboardEvent) => void) | undefined;
     onPaste?: ((payload: ClipboardEvent) => void) | undefined;
@@ -129,7 +131,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;
@@ -138,7 +140,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;
@@ -174,7 +176,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;
@@ -183,7 +185,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;
@@ -196,7 +197,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;
@@ -216,14 +216,16 @@ declare const __VLS_base: import("vue").DefineComponent<{
     label?: string;
     form?: string;
     key?: PropertyKey | undefined;
-    ref?: import("vue").VNodeRef | undefined;
+    prefix?: string | undefined | undefined;
+    title?: 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;
-    title?: string | undefined | undefined;
     onCopy?: ((payload: ClipboardEvent) => void) | undefined;
     onCut?: ((payload: ClipboardEvent) => void) | undefined;
     onPaste?: ((payload: ClipboardEvent) => void) | undefined;
@@ -332,7 +334,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;
@@ -341,7 +343,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;
@@ -377,7 +379,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;
@@ -386,7 +388,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;
@@ -399,7 +400,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;
@@ -411,10 +411,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onSave?: (() => any) | undefined;
     onDiscard?: (() => any) | undefined;
 }>, {
-    message: string;
-    label: string;
     visible: boolean;
-    saveLabel: string;
     discardLabel: string | false;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -22,7 +22,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;
@@ -68,7 +68,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;
@@ -77,7 +77,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;
@@ -219,7 +219,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;
@@ -265,7 +265,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;
@@ -274,7 +274,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;
@@ -403,7 +403,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
-    level: 2 | 3 | 4;
+    level: 2 | 4 | 3;
 }, {}, {}, {}, 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/SettingsModal.vue

@@ -6,21 +6,21 @@
       flush
       hide-close
       :sheet="false"
-      :aria-label="title"
+      :aria-label="titleText"
       @open="emit('open')"
       @close="emit('close')"
       @after-leave="emit('afterLeave')"
    >
       <template #default="{ close }">
          <div class="k-settings-modal-frame">
-            <nav class="k-settings-modal-nav" :aria-label="navLabel">
+            <nav class="k-settings-modal-nav" :aria-label="navText">
                <Button
                   class="k-settings-modal-close"
                   icon="x-mark"
                   variant="ghost"
                   tone="neutral"
                   size="sm"
-                  :aria-label="closeLabel"
+                  :aria-label="closeText"
                   @click="close"
                />
                <div class="k-settings-modal-nav-list">
@@ -75,7 +75,7 @@
                   <hr class="k-settings-modal-divider" />
                   <button type="button" class="k-settings-modal-tab is-danger" @click="signOut">
                      <Icon name="arrow-left-start-on-rectangle" />
-                     <span class="k-settings-modal-tab-label">{{ signOutLabel }}</span>
+                     <span class="k-settings-modal-tab-label">{{ signOutText }}</span>
                   </button>
                </template>
             </nav>
@@ -115,8 +115,8 @@
                      <slot name="account-fields" :account="account" :close="close" />
                      <SettingsGroup
                         v-if="onSignOut"
-                        :label="sessionLabel"
-                        :description="sessionText"
+                        :label="sessionLabelText"
+                        :description="sessionDescriptionText"
                         row
                      >
                         <template #actions>
@@ -127,7 +127,7 @@
                               icon="arrow-left-start-on-rectangle"
                               @click="signOut"
                            >
-                              {{ signOutLabel }}
+                              {{ signOutText }}
                            </Button>
                         </template>
                      </SettingsGroup>
@@ -150,6 +150,7 @@
 <script setup>
 import { computed, useId } from "vue";
 import { THEME_PRESETS } from "../../composables/usePreset";
+import { useLocale } from "../../composables/useLocale";
 import { useLinkResolver } from "../../internal/core/link";
 import Button from "../core/Button.vue";
 import Icon from "../core/Icon.vue";
@@ -162,16 +163,16 @@ const props = defineProps({
   sections: { type: Array, required: false, default: void 0 },
   account: { type: Object, required: false },
   presets: { type: [Array, Boolean], required: false, default: () => THEME_PRESETS },
-  title: { type: String, required: false, default: "Settings" },
-  closeLabel: { type: String, required: false, default: "Close settings" },
-  navLabel: { type: String, required: false, default: "Settings sections" },
-  signOutLabel: { type: String, required: false, default: "Sign out" },
-  sessionLabel: { type: String, required: false, default: "Session" },
-  sessionText: { type: String, required: false, default: "Sign out of this device." },
-  accountLabel: { type: String, required: false, default: "Account" },
-  accountText: { type: String, required: false, default: "Your profile and session." },
-  appearanceLabel: { type: String, required: false, default: "Appearance" },
-  appearanceText: { type: String, required: false, default: "Theme and style of the interface." },
+  title: { type: String, required: false },
+  closeLabel: { type: String, required: false },
+  navLabel: { type: String, required: false },
+  signOutLabel: { type: String, required: false },
+  sessionLabel: { type: String, required: false },
+  sessionText: { type: String, required: false },
+  accountLabel: { type: String, required: false },
+  accountText: { type: String, required: false },
+  appearanceLabel: { type: String, required: false },
+  appearanceText: { type: String, required: false },
   themeLabel: { type: String, required: false, default: void 0 },
   themeText: { type: String, required: false, default: void 0 },
   presetLabel: { type: String, required: false, default: void 0 },
@@ -182,6 +183,13 @@ defineSlots();
 const emit = defineEmits(["open", "close", "afterLeave"]);
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const section = defineModel("section", { type: String });
+const { t } = useLocale();
+const titleText = computed(() => props.title ?? t("settings.title"));
+const closeText = computed(() => props.closeLabel ?? t("settings.close"));
+const navText = computed(() => props.navLabel ?? t("settings.sections"));
+const signOutText = computed(() => props.signOutLabel ?? t("settings.signOut"));
+const sessionLabelText = computed(() => props.sessionLabel ?? t("settings.session"));
+const sessionDescriptionText = computed(() => props.sessionText ?? t("settings.sessionDescription"));
 const baseId = useId();
 const panelId = `${baseId}-panel`;
 const { resolveLink } = useLinkResolver();
@@ -191,15 +199,15 @@ const sectionList = computed(() => {
   if (props.account)
     list.push({
       id: "account",
-      label: props.accountLabel,
+      label: props.accountLabel ?? t("account.label"),
       icon: "user-circle",
-      description: props.accountText
+      description: props.accountText ?? t("settings.accountDescription")
     });
   list.push({
     id: "appearance",
-    label: props.appearanceLabel,
+    label: props.appearanceLabel ?? t("settings.appearance"),
     icon: "sun",
-    description: props.appearanceText
+    description: props.appearanceText ?? t("settings.appearanceDescription")
   });
   return list;
 });