migrate mt-data-table-settings over to the custom built i18n composable

.changeset/soft-roses-reply.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Migrate mt-data-table-settings over to the composition api

packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-settings/mt-data-table-settings.spec.ts

@@ -1,17 +1,8 @@
 import { mount } from "@vue/test-utils";
 import MtDataTableSettings from "./mt-data-table-settings.vue";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { useI18n } from "vue-i18n";
 import flushPromises from "flush-promises";
 
-vi.mock("vue-i18n", () => ({
-  useI18n: vi.fn(() => {
-    return {
-      t: (tKey: string) => tKey,
-    };
-  }),
-}));
-
 // mock resizeOvserver
 global.ResizeObserver = class ResizeObserver {
   observe() {
@@ -104,27 +95,26 @@ describe("mt-data-table-settings", () => {
 
     const popoverContent = document.querySelector(".mt-popover__content");
     expect(popoverContent).toBeTruthy();
-    expect(popoverContent?.querySelector(".mt-popover__header")?.textContent).toBe(
-      "mt-data-table-settings.title",
-    );
+    expect(popoverContent?.querySelector(".mt-popover__header")?.textContent).toBe("Settings");
 
     const popoverItems = popoverContent?.querySelectorAll(".mt-popover-item");
 
     expect(popoverItems).toHaveLength(6);
 
     // The "Columns" popover item should have the correct label and should render the number of columns
-    expect(popoverItems?.[0]?.textContent).toContain("mt-data-table-settings.columnOrder.title");
-    expect(popoverItems?.[0]?.textContent).toContain("6");
+    expect(popoverItems?.[0]?.textContent).toContain("Columns 6");
 
     // The popover items should have the correct label
-    expect(popoverItems?.[1]?.textContent).toContain("mt-data-table-settings.showNumberedColumn");
-    expect(popoverItems?.[2]?.textContent).toContain("mt-data-table-settings.showStripedRows");
-    expect(popoverItems?.[3]?.textContent).toContain("mt-data-table-settings.showOutlines");
-    expect(popoverItems?.[4]?.textContent).toContain("mt-data-table-settings.frameOutlines");
+    expect(popoverItems?.[1]?.textContent).toContain("Show numbered column");
+    expect(popoverItems?.[2]?.textContent).toContain("Show striped rows");
+    expect(popoverItems?.[3]?.textContent).toContain("Show outlines");
+    expect(popoverItems?.[4]?.textContent).toContain(
+      "Frame outlines Highlight column and row outlines on mouse hover",
+    );
     expect(popoverItems?.[4]?.textContent).toContain(
-      "mt-data-table-settings.frameOutlinesMetaCopy",
+      "Frame outlines Highlight column and row outlines on mouse hover",
     );
-    expect(popoverItems?.[5]?.textContent).toContain("mt-data-table-settings.resetAllChanges");
+    expect(popoverItems?.[5]?.textContent).toContain("Reset all changes");
   });
 
   it("should switch to columns view", async () => {
@@ -135,17 +125,13 @@ describe("mt-data-table-settings", () => {
     // Click on "Columns" label to switch to the columns view
     const columnsPopoverItemLabel =
       popoverContent?.querySelectorAll(".mt-popover-item__label")?.[0];
-    expect(columnsPopoverItemLabel?.textContent).toContain(
-      "mt-data-table-settings.columnOrder.title",
-    );
+    expect(columnsPopoverItemLabel?.textContent).toContain("Columns");
     await columnsPopoverItemLabel?.dispatchEvent(new Event("click"));
     await flushPromises();
 
     // Check if the columns view header title is rendered
     popoverContent = document.querySelector(".mt-popover__content");
-    expect(popoverContent?.querySelector(".mt-popover__header")?.textContent).toBe(
-      "mt-data-table-settings.columnOrder.title",
-    );
+    expect(popoverContent?.querySelector(".mt-popover__header")?.textContent).toBe("Columns");
 
     // Check if every column is rendered correctly
     const columns = document.querySelectorAll(".mt-popover-item-result__option_item");
@@ -240,9 +226,7 @@ describe("mt-data-table-settings", () => {
     const visibleGroupHeader = document.querySelectorAll(
       ".mt-popover-item-result__group-action",
     )?.[0];
-    expect(visibleGroupHeader?.textContent).toContain(
-      "mt-data-table-settings.columnOrder.columnGroups.actionLabelShown",
-    );
+    expect(visibleGroupHeader?.textContent).toContain("Hide all");
     await visibleGroupHeader?.dispatchEvent(new Event("click"));
 
     await wrapper.vm.$nextTick();
@@ -268,9 +252,7 @@ describe("mt-data-table-settings", () => {
     const visibleGroupHeader = document.querySelectorAll(
       ".mt-popover-item-result__group-action",
     )?.[1];
-    expect(visibleGroupHeader?.textContent).toContain(
-      "mt-data-table-settings.columnOrder.columnGroups.actionLabelHidden",
-    );
+    expect(visibleGroupHeader?.textContent).toContain("Show all");
     await visibleGroupHeader?.dispatchEvent(new Event("click"));
 
     await wrapper.vm.$nextTick();
@@ -288,7 +270,7 @@ describe("mt-data-table-settings", () => {
 
     // Click on "Reset" button to reset all changes
     const resetButton = document.querySelectorAll(".mt-popover-item__label")?.[5];
-    expect(resetButton?.textContent).toContain("mt-data-table-settings.resetAllChanges");
+    expect(resetButton?.textContent).toContain("Reset all changes");
     await resetButton?.dispatchEvent(new Event("click"));
 
     // Check if the reset-all-changes event was emitted

packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-settings/mt-data-table-settings.vue

@@ -1,19 +1,19 @@
 <template>
   <mt-popover
     class="mt-data-table-settings"
-    :title="t('mt-data-table-settings.title')"
+    :title="t('title')"
     :child-views="tableSettingsChildViews"
     width="large"
   >
     <template #trigger="{ toggleFloatingUi }">
       <mt-button
         v-tooltip="{
-          message: t('mt-data-table-settings.tooltip'),
+          message: t('tooltip'),
           width: 'auto',
         }"
         variant="secondary"
         square
-        :aria-label="t('mt-data-table-settings.aria-toggle-table-settings')"
+        :aria-label="t('aria-toggle-table-settings')"
         @click="toggleFloatingUi"
       >
         <mt-icon name="solid-cog-s" />
@@ -22,7 +22,7 @@
 
     <template #popover-items__base="{ changeView }">
       <mt-popover-item
-        :label="t('mt-data-table-settings.columnOrder.title')"
+        :label="t('columnOrder.title')"
         border-bottom
         show-options
         :on-label-click="() => changeView('columnOrder')"
@@ -31,15 +31,15 @@
       />
 
       <mt-popover-item
-        :label="t('mt-data-table-settings.showNumberedColumn')"
+        :label="t('showNumberedColumn')"
         show-switch
         :switch-value="enableRowNumbering"
         icon="solid-hashtag"
         @change-switch="($event) => $emit('change-enable-row-numbering', $event)"
       />
 
       <mt-popover-item
-        :label="t('mt-data-table-settings.showStripedRows')"
+        :label="t('showStripedRows')"
         show-switch
         :switch-value="showStripes"
         icon="solid-bars"
@@ -48,16 +48,16 @@
 
       <!-- TODO: the icon in figma solid-grip-lines was rotated and is not available -->
       <mt-popover-item
-        :label="t('mt-data-table-settings.showOutlines')"
+        :label="t('showOutlines')"
         show-switch
         :switch-value="showOutlines"
         icon="solid-table"
         @change-switch="($event) => $emit('change-show-outlines', $event)"
       />
 
       <mt-popover-item
-        :label="t('mt-data-table-settings.frameOutlines')"
-        :meta-copy="t('mt-data-table-settings.frameOutlinesMetaCopy')"
+        :label="t('frameOutlines')"
+        :meta-copy="t('frameOutlinesMetaCopy')"
         show-switch
         :switch-value="enableOutlineFraming"
         icon="solid-highlight"
@@ -70,7 +70,7 @@
       -->
 
       <mt-popover-item
-        :label="t('mt-data-table-settings.resetAllChanges')"
+        :label="t('resetAllChanges')"
         border-top
         icon="solid-undo"
         :on-label-click="resetAllChanges"
@@ -103,7 +103,7 @@ import MtPopoverItemResult from "../../../../overlay/mt-popover-item-result/mt-p
 import MtTooltipDirective from "../../../../../directives/tooltip.directive";
 import type { ColumnDefinition } from "../../mt-data-table.vue";
 import type { Option as ItemResultOption } from "../../../../overlay/mt-popover-item-result/mt-popover-item-result.vue";
-import { useI18n } from "vue-i18n";
+import { useI18n } from "@/composables/useI18n";
 
 export default defineComponent({
   name: "MtDataTableSettings",
@@ -152,10 +152,10 @@ export default defineComponent({
     "change-outline-framing",
     "change-enable-row-numbering",
   ],
-  i18n: {
-    messages: {
-      en: {
-        "mt-data-table-settings": {
+  setup(props, { emit }) {
+    const { t } = useI18n({
+      messages: {
+        en: {
           title: "Settings",
           resetAllChanges: "Reset all changes",
           columnOrder: {
@@ -175,9 +175,7 @@ export default defineComponent({
           tooltip: "View settings",
           "aria-toggle-table-settings": "Toggle view settings",
         },
-      },
-      de: {
-        "mt-data-table-settings": {
+        de: {
           title: "Einstellungen",
           resetAllChanges: "Alle Änderungen zurücksetzen",
           columnOrder: {
@@ -199,10 +197,7 @@ export default defineComponent({
           "aria-toggle-table-settings": "Tabelleneinstellungen umschalten",
         },
       },
-    },
-  },
-  setup(props, { emit }) {
-    const { t } = useI18n();
+    });
 
     /***
      * Table settings
@@ -211,7 +206,7 @@ export default defineComponent({
       return [
         {
           name: "columnOrder",
-          title: t("mt-data-table-settings.columnOrder.title"),
+          title: t("columnOrder.title"),
         },
       ];
     });
@@ -223,17 +218,13 @@ export default defineComponent({
       return [
         {
           id: "visible",
-          label: t("mt-data-table-settings.columnOrder.columnGroups.labelShown") as string,
-          actionLabel: t(
-            "mt-data-table-settings.columnOrder.columnGroups.actionLabelShown",
-          ) as string,
+          label: t("columnOrder.columnGroups.labelShown"),
+          actionLabel: t("columnOrder.columnGroups.actionLabelShown"),
         },
         {
           id: "hidden",
-          label: t("mt-data-table-settings.columnOrder.columnGroups.labelHidden") as string,
-          actionLabel: t(
-            "mt-data-table-settings.columnOrder.columnGroups.actionLabelHidden",
-          ) as string,
+          label: t("columnOrder.columnGroups.labelHidden"),
+          actionLabel: t("columnOrder.columnGroups.actionLabelHidden"),
         },
       ];
     });