Merge branch 'main' into migrate-mt-inheritance-switch-to-custom-i18n

shopware · Nov 6, 2024 · 56b5ff9 · 56b5ff9
2 parents dca5b1d + b6087af
commit 56b5ff9
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 186 deletions.
diff --git a/.changeset/twenty-coins-fix.md b/.changeset/twenty-coins-fix.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Migrate mt-label to custom built i18n composable
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -187,7 +187,6 @@ jobs:
           # TODO: add again with next major, does not work right now because 6.5 does not support vue3
           # - ${{ needs.tested-versions.outputs.lts-latest-version }}
           - ${{ needs.tested-versions.outputs.first-version }}
-          - ${{ needs.tested-versions.outputs.latest-version }}
           - trunk
     steps:
       - name: Setup shopware

diff --git a/packages/component-library/src/components/_internal/mt-label.vue b/packages/component-library/src/components/_internal/mt-label.vue
@@ -10,7 +10,7 @@
     <button
       v-if="showDismissable"
       class="mt-label__dismiss"
-      :title="$tc('mt-label.remove')"
+      :title="t('remove')"
       @click.prevent.stop="$emit('dismiss')"
     >
       <slot name="dismiss-icon">
@@ -20,98 +20,56 @@
   </span>
 </template>
 
-<script lang="ts">
-import type { PropType } from "vue";
-
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
 import MtIcon from "../icons-media/mt-icon/mt-icon.vue";
 import MtColorBadge from "../feedback-indicator/mt-color-badge/mt-color-badge.vue";
-
-export default defineComponent({
-  name: "MtLabel",
-
-  i18n: {
-    messages: {
-      en: {
-        "mt-label": {
-          remove: "Remove",
-        },
-      },
-      de: {
-        "mt-label": {
-          remove: "Entfernen",
-        },
-      },
-    },
+import { useI18n } from "@/composables/useI18n";
+
+const props = withDefaults(
+  defineProps<{
+    variant?: "info" | "danger" | "success" | "warning" | "neutral" | "primary";
+    size?: "small" | "medium" | "default";
+    appearance?: "default" | "pill" | "circle" | "badged";
+    ghost?: boolean;
+    caps?: boolean;
+    dismissable?: boolean;
+  }>(),
+  {
+    // @ts-expect-error
+    variant: "",
+    size: "default",
+    appearance: "default",
+    ghost: false,
+    caps: false,
   },
+);
 
-  components: {
-    "mt-icon": MtIcon,
-    "mt-color-badge": MtColorBadge,
-  },
-
-  props: {
-    variant: {
-      type: String as PropType<"info" | "danger" | "success" | "warning" | "neutral" | "primary">,
-      required: false,
-      default: "",
-      validator(value: string) {
-        if (!value.length) {
-          return true;
-        }
-        return ["info", "danger", "success", "warning", "neutral", "primary"].includes(value);
-      },
-    },
-    size: {
-      type: String as PropType<"small" | "medium" | "default">,
-      required: false,
-      default: "default",
-      validator(value: string) {
-        return ["small", "medium", "default"].includes(value);
-      },
+const { t } = useI18n({
+  messages: {
+    en: {
+      remove: "Remove",
     },
-    appearance: {
-      type: String as PropType<"default" | "pill" | "circle" | "badged">,
-      required: false,
-      default: "default",
-      validator(value: string) {
-        return ["default", "pill", "circle", "badged"].includes(value);
-      },
-    },
-    ghost: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    caps: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    dismissable: {
-      type: Boolean,
-      required: false,
-      default: true,
+    de: {
+      remove: "Entfernen",
     },
   },
+});
 
-  computed: {
-    labelClasses() {
-      return [
-        `mt-label--appearance-${this.appearance}`,
-        `mt-label--size-${this.size}`,
-        {
-          [`mt-label--${this.variant}`]: !!this.variant,
-          "mt-label--dismissable": this.showDismissable,
-          "mt-label--ghost": this.ghost,
-          "mt-label--caps": this.caps,
-        },
-      ];
-    },
-    showDismissable(): boolean {
-      return !!this.$attrs.onDismiss && this.dismissable;
+const attrs = useAttrs();
+const showDismissable = computed(() => !!attrs.onDismiss && props.dismissable);
+
+const labelClasses = computed(() => {
+  return [
+    `mt-label--appearance-${props.appearance}`,
+    `mt-label--size-${props.size}`,
+    {
+      [`mt-label--${props.variant}`]: !!props.variant,
+      "mt-label--dismissable": showDismissable,
+      "mt-label--ghost": props.ghost,
+      "mt-label--caps": props.caps,
     },
-  },
+  ];
 });
 </script>
 

diff --git a/...s/component-library/src/components/form/_internal/mt-field-copyable/mt-field-copyable.vue b/...s/component-library/src/components/form/_internal/mt-field-copyable/mt-field-copyable.vue
@@ -12,48 +12,21 @@
     name="regular-copy"
     size="18"
     @click="copyToClipboard"
-    @mouseleave="resetTooltipText"
+    @mouseleave="wasCopied = false"
   />
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { computed, defineComponent, ref } from "vue";
 import MtIcon from "../../../icons-media/mt-icon/mt-icon.vue";
 import MtTooltipDirective from "../../../../directives/tooltip.directive";
 import MtNotificationMixin from "../../../../mixins/notification.mixin";
 import { copyToClipboard as copyToClipboardUtil } from "../../../../utils/dom";
+import { useI18n } from "@/composables/useI18n";
 
 export default defineComponent({
   name: "MtFieldCopyable",
 
-  i18n: {
-    messages: {
-      en: {
-        "mt-field-copyable": {
-          tooltip: {
-            wasCopied: "Copied to clipboard.",
-            canCopy: "Copy to clipboard.",
-            notificationCopySuccessMessage: "Text has been copied to clipboard.",
-            notificationCopyFailureMessage: "Text could not be copied to clipboard.",
-            errorTitle: "Error copying to clipboard",
-          },
-        },
-      },
-      de: {
-        "mt-field-copyable": {
-          tooltip: {
-            wasCopied: "In Zwischenablage kopiert.",
-            canCopy: "In Zwischenablage kopieren.",
-            notificationCopySuccessMessage: "Der Text wurde in die Zwischenablage kopiert.",
-            notificationCopyFailureMessage:
-              "Der Text konnte nicht in die Zwischenablage kopiert werden.",
-            errorTitle: "Fehler beim kopieren in die Zwischenablage",
-          },
-        },
-      },
-    },
-  },
-
   directives: {
     tooltip: MtTooltipDirective,
   },
@@ -78,64 +51,57 @@ export default defineComponent({
     },
   },
 
-  data() {
-    return {
-      wasCopied: false,
-    };
-  },
+  setup(props) {
+    const wasCopied = ref(false);
 
-  computed: {
-    tooltipText(): string {
-      if (this.wasCopied) {
-        return this.$tc("mt-field-copyable.tooltip.wasCopied");
-      }
+    const { t } = useI18n({
+      messages: {
+        en: {
+          tooltip: {
+            wasCopied: "Copied to clipboard.",
+            canCopy: "Copy to clipboard.",
+            notificationCopySuccessMessage: "Text has been copied to clipboard.",
+            notificationCopyFailureMessage: "Text could not be copied to clipboard.",
+            errorTitle: "Error copying to clipboard",
+          },
+        },
+        de: {
+          tooltip: {
+            wasCopied: "In Zwischenablage kopiert.",
+            canCopy: "In Zwischenablage kopieren.",
+            notificationCopySuccessMessage: "Der Text wurde in die Zwischenablage kopiert.",
+            notificationCopyFailureMessage:
+              "Der Text konnte nicht in die Zwischenablage kopiert werden.",
+            errorTitle: "Fehler beim kopieren in die Zwischenablage",
+          },
+        },
+      },
+    });
 
-      return this.$tc("mt-field-copyable.tooltip.canCopy");
-    },
-  },
+    const tooltipText = computed(() =>
+      wasCopied.value ? t("tooltip.wasCopied") : t("tooltip.canCopy"),
+    );
 
-  methods: {
-    copyToClipboard() {
-      if (!this.copyableText) {
-        return;
-      }
+    function copyToClipboard() {
+      if (!props.copyableText) return;
+      copyToClipboardUtil(props.copyableText);
 
-      try {
-        copyToClipboardUtil(this.copyableText);
-        if (this.tooltip) {
-          this.tooltipSuccess();
-        } else {
-          this.notificationSuccess();
-        }
-      } catch (err) {
-        this.createNotificationError({
-          title: this.$tc("mt-field-copyable.errorTitle"),
-          message: this.$tc("mt-field-copyable.notificationCopyFailureMessage"),
-        });
+      if (props.tooltip) {
+        wasCopied.value = true;
       }
-    },
+    }
 
-    tooltipSuccess() {
-      this.wasCopied = true;
-    },
-
-    notificationSuccess() {
-      this.createNotificationInfo({
-        message: this.$tc("mt-field-copyable.notificationCopySuccessMessage"),
-      });
-    },
-
-    resetTooltipText() {
-      this.wasCopied = false;
-    },
+    return {
+      copyToClipboard,
+      tooltipText,
+      wasCopied,
+    };
   },
 });
 </script>
 
-<style lang="scss">
+<style scoped>
 .mt-field-copyable {
-  &.mt-icon {
-    cursor: pointer;
-  }
+  cursor: pointer;
 }
 </style>
diff --git a/...le/sub-components/mt-data-table-reset-filter-button/mt-data-table-reset-filter-button.vue b/...le/sub-components/mt-data-table-reset-filter-button/mt-data-table-reset-filter-button.vue
@@ -1,36 +1,29 @@
 <template>
   <button class="mt-data-table-reset-filter-button">
-    {{ $tc("mt-data-table-reset-filter-button.label", numberOfAppliedFilters) }}
+    {{ t("label", { n: numberOfAppliedFilters }) }}
   </button>
 </template>
 
-<script lang="ts">
-export default {
-  props: {
-    numberOfAppliedFilters: {
-      type: Number,
-      required: true,
-      validator: (value: number) => value >= 1,
+<script setup lang="ts">
+import { useI18n } from "@/composables/useI18n";
+
+defineProps<{
+  numberOfAppliedFilters: number;
+}>();
+
+const { t } = useI18n({
+  messages: {
+    en: {
+      label: "Remove filter | Remove filters",
     },
-  },
-  i18n: {
-    messages: {
-      en: {
-        "mt-data-table-reset-filter-button": {
-          label: "Remove filter | Remove filters",
-        },
-      },
-      de: {
-        "mt-data-table-reset-filter-button": {
-          label: "Filter entfernen | Filter entfernen",
-        },
-      },
+    de: {
+      label: "Filter entfernen | Filter entfernen",
     },
   },
-};
+});
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .mt-data-table-reset-filter-button {
   color: var(--color-text-brand-default);
   text-decoration: underline;