From 07d54ff0a495f7ebfe2c610e1ead08f13b0c17a3 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Tue, 22 Oct 2024 08:41:22 +0200
Subject: [PATCH] migrate mt-label to custom built i18n

---
 .changeset/twenty-coins-fix.md                |   5 +
 .../src/components/_internal/mt-label.vue     | 125 ++++++------------
 2 files changed, 46 insertions(+), 84 deletions(-)
 create mode 100644 .changeset/twenty-coins-fix.md

diff --git a/.changeset/twenty-coins-fix.md b/.changeset/twenty-coins-fix.md
new file mode 100644
index 000000000..f61516337
--- /dev/null
+++ 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/packages/component-library/src/components/_internal/mt-label.vue b/packages/component-library/src/components/_internal/mt-label.vue
index f76cc8719..e5492026c 100644
--- 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,55 @@
   </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;
+  }>(),
+  {
+    variant: "neutral",
+    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>