From 7cc3cd1526782db93214dbb677ebadb32ed5f21c Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Tue, 5 Nov 2024 13:50:28 +0100
Subject: [PATCH 1/6] migrate mt-field-copyable to custom i18n

---
 .../mt-field-copyable/mt-field-copyable.vue   | 116 +++++++-----------
 1 file changed, 42 insertions(+), 74 deletions(-)

diff --git a/packages/component-library/src/components/form/_internal/mt-field-copyable/mt-field-copyable.vue b/packages/component-library/src/components/form/_internal/mt-field-copyable/mt-field-copyable.vue
index 5257180b9..dab861180 100644
--- a/packages/component-library/src/components/form/_internal/mt-field-copyable/mt-field-copyable.vue
+++ b/packages/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,56 +51,51 @@ 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>

From b6087af855b41b150614f32d2f99c0cc25a2a675 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Tue, 5 Nov 2024 13:51:58 +0100
Subject: [PATCH 2/6] migrate mt-field-copyable to plain css

---
 .../form/_internal/mt-field-copyable/mt-field-copyable.vue  | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/component-library/src/components/form/_internal/mt-field-copyable/mt-field-copyable.vue b/packages/component-library/src/components/form/_internal/mt-field-copyable/mt-field-copyable.vue
index dab861180..9e09abb9a 100644
--- a/packages/component-library/src/components/form/_internal/mt-field-copyable/mt-field-copyable.vue
+++ b/packages/component-library/src/components/form/_internal/mt-field-copyable/mt-field-copyable.vue
@@ -100,10 +100,8 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style scoped>
 .mt-field-copyable {
-  &.mt-icon {
-    cursor: pointer;
-  }
+  cursor: pointer;
 }
 </style>

From a0fb1b73bcc8276a6f8162600c5ece4bd66d2b50 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Tue, 5 Nov 2024 14:06:38 +0100
Subject: [PATCH 3/6] migrate mt-inheritance-switch to custom i18n

---
 .../mt-inheritance-switch.vue                 | 39 ++++++++++---------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/packages/component-library/src/components/form/_internal/mt-inheritance-switch/mt-inheritance-switch.vue b/packages/component-library/src/components/form/_internal/mt-inheritance-switch/mt-inheritance-switch.vue
index 1318a7b73..fa10f9074 100644
--- a/packages/component-library/src/components/form/_internal/mt-inheritance-switch/mt-inheritance-switch.vue
+++ b/packages/component-library/src/components/form/_internal/mt-inheritance-switch/mt-inheritance-switch.vue
@@ -11,7 +11,7 @@
       v-if="isInherited"
       key="inherit-icon"
       v-tooltip="{
-        message: $tc('mt-inheritance-switch.tooltipRemoveInheritance'),
+        message: t('tooltipRemoveInheritance'),
         disabled: disabled,
       }"
       data-testid="mt-inheritance-switch-icon"
@@ -24,7 +24,7 @@
       v-else
       key="uninherit-icon"
       v-tooltip="{
-        message: $tc('mt-inheritance-switch.tooltipRestoreInheritance'),
+        message: t('tooltipRestoreInheritance'),
         disabled: disabled,
       }"
       :class="unInheritClasses"
@@ -40,27 +40,11 @@
 import { defineComponent } from "vue";
 import MtTooltipDirective from "../../../../directives/tooltip.directive";
 import MtIcon from "../../../icons-media/mt-icon/mt-icon.vue";
+import { useI18n } from "@/composables/useI18n";
 
 export default defineComponent({
   name: "MtInheritanceSwitch",
 
-  i18n: {
-    messages: {
-      en: {
-        "mt-inheritance-switch": {
-          tooltipRemoveInheritance: "Remove inheritance",
-          tooltipRestoreInheritance: "Restore inheritance",
-        },
-      },
-      de: {
-        "mt-inheritance-switch": {
-          tooltipRemoveInheritance: "Vererbung entfernen",
-          tooltipRestoreInheritance: "Vererbung wiederherstellen",
-        },
-      },
-    },
-  },
-
   components: {
     "mt-icon": MtIcon,
   },
@@ -104,6 +88,23 @@ export default defineComponent({
       this.$emit("inheritance-remove");
     },
   },
+
+  setup() {
+    const { t } = useI18n({
+      messages: {
+        en: {
+          tooltipRemoveInheritance: "Remove inheritance",
+          tooltipRestoreInheritance: "Restore inheritance",
+        },
+        de: {
+          tooltipRemoveInheritance: "Vererbung entfernen",
+          tooltipRestoreInheritance: "Vererbung wiederherstellen",
+        },
+      },
+    });
+
+    return { t };
+  },
 });
 </script>
 

From ad42e43be7e1cdc8e938226221c82bc92d028a90 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Tue, 5 Nov 2024 14:13:12 +0100
Subject: [PATCH 4/6] migrate mt-inheritance-switch to custom i18n

---
 .../mt-inheritance-switch.vue                 | 57 +++++++++----------
 1 file changed, 26 insertions(+), 31 deletions(-)

diff --git a/packages/component-library/src/components/form/_internal/mt-inheritance-switch/mt-inheritance-switch.vue b/packages/component-library/src/components/form/_internal/mt-inheritance-switch/mt-inheritance-switch.vue
index fa10f9074..57f440031 100644
--- a/packages/component-library/src/components/form/_internal/mt-inheritance-switch/mt-inheritance-switch.vue
+++ b/packages/component-library/src/components/form/_internal/mt-inheritance-switch/mt-inheritance-switch.vue
@@ -1,11 +1,13 @@
 <template>
   <div
-    class="mt-inheritance-switch"
-    :class="{
-      'mt-inheritance-switch--disabled': disabled,
-      'mt-inheritance-switch--is-inherited': isInherited,
-      'mt-inheritance-switch--is-not-inherited': !isInherited,
-    }"
+    :class="[
+      'mt-inheritance-switch',
+      {
+        'mt-inheritance-switch--disabled': disabled,
+        'mt-inheritance-switch--is-inherited': isInherited,
+        'mt-inheritance-switch--is-not-inherited': !isInherited,
+      },
+    ]"
   >
     <mt-icon
       v-if="isInherited"
@@ -20,6 +22,7 @@
       size="14"
       @click="onClickRemoveInheritance"
     />
+
     <mt-icon
       v-else
       key="uninherit-icon"
@@ -27,7 +30,9 @@
         message: t('tooltipRestoreInheritance'),
         disabled: disabled,
       }"
-      :class="unInheritClasses"
+      :class="{
+        'is--clickable': !disabled,
+      }"
       :multicolor="true"
       name="regular-link-horizontal-slash"
       size="14"
@@ -67,29 +72,7 @@ export default defineComponent({
     },
   },
 
-  computed: {
-    unInheritClasses(): { "is--clickable": boolean } {
-      return { "is--clickable": !this.disabled };
-    },
-  },
-
-  methods: {
-    onClickRestoreInheritance() {
-      if (this.disabled) {
-        return;
-      }
-      this.$emit("inheritance-restore");
-    },
-
-    onClickRemoveInheritance() {
-      if (this.disabled) {
-        return;
-      }
-      this.$emit("inheritance-remove");
-    },
-  },
-
-  setup() {
+  setup(props, { emit }) {
     const { t } = useI18n({
       messages: {
         en: {
@@ -103,7 +86,19 @@ export default defineComponent({
       },
     });
 
-    return { t };
+    function onClickRestoreInheritance() {
+      if (props.disabled) return;
+
+      emit("inheritance-restore");
+    }
+
+    function onClickRemoveInheritance() {
+      if (props.disabled) return;
+
+      emit("inheritance-remove");
+    }
+
+    return { t, onClickRemoveInheritance, onClickRestoreInheritance };
   },
 });
 </script>

From 78d200949719365447c0f082ab1a66ac25359296 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Tue, 5 Nov 2024 14:14:09 +0100
Subject: [PATCH 5/6] migrate mt-inheritance-switch to plain css

---
 .../mt-inheritance-switch/mt-inheritance-switch.vue       | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/component-library/src/components/form/_internal/mt-inheritance-switch/mt-inheritance-switch.vue b/packages/component-library/src/components/form/_internal/mt-inheritance-switch/mt-inheritance-switch.vue
index 57f440031..4a16fffc5 100644
--- a/packages/component-library/src/components/form/_internal/mt-inheritance-switch/mt-inheritance-switch.vue
+++ b/packages/component-library/src/components/form/_internal/mt-inheritance-switch/mt-inheritance-switch.vue
@@ -103,13 +103,13 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style scoped>
 .mt-inheritance-switch {
   cursor: pointer;
   margin-top: -1px;
+}
 
-  &.mt-inheritance-switch--disabled {
-    cursor: default;
-  }
+.mt-inheritance-switch--disabled {
+  cursor: default;
 }
 </style>

From d31850f1da4f4645d09edef97a1d0ec222007ae9 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Mon, 4 Nov 2024 14:39:23 +0100
Subject: [PATCH 6/6] migrate mt-password-field to custom i18n

---
 .../mt-password-field/mt-password-field.vue   | 39 ++++++++-----------
 1 file changed, 17 insertions(+), 22 deletions(-)

diff --git a/packages/component-library/src/components/form/mt-password-field/mt-password-field.vue b/packages/component-library/src/components/form/mt-password-field/mt-password-field.vue
index 79870dd05..ad28aa36b 100644
--- a/packages/component-library/src/components/form/mt-password-field/mt-password-field.vue
+++ b/packages/component-library/src/components/form/mt-password-field/mt-password-field.vue
@@ -42,11 +42,7 @@
         <button
           v-if="passwordToggleAble"
           :disabled="disabled"
-          :aria-label="
-            showPassword
-              ? $tc('mt-password-field.titleHidePassword')
-              : $tc('mt-password-field.titleShowPassword')
-          "
+          :aria-label="showPassword ? t('titleHidePassword') : t('titleShowPassword')"
           class="mt-field__toggle-password-visibility"
           @click="() => (showPassword = !showPassword)"
         >
@@ -70,31 +66,16 @@
     </template>
   </mt-base-field>
 </template>
+
 <script lang="ts">
 import { computed, defineComponent, ref } from "vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
 import MtTextField from "../mt-text-field/mt-text-field.vue";
+import { useI18n } from "@/composables/useI18n";
 
 export default defineComponent({
   name: "MtPasswordField",
 
-  i18n: {
-    messages: {
-      en: {
-        "mt-password-field": {
-          titleHidePassword: "Hide password",
-          titleShowPassword: "Show password",
-        },
-      },
-      de: {
-        "mt-password-field": {
-          titleHidePassword: "Passwort verbergen",
-          titleShowPassword: "Passwort anzeigen",
-        },
-      },
-    },
-  },
-
   components: {
     "mt-icon": MtIcon,
   },
@@ -130,7 +111,21 @@ export default defineComponent({
         : "*".repeat(props.placeholder.length ? props.placeholder.length : 6),
     );
 
+    const { t } = useI18n({
+      messages: {
+        en: {
+          titleHidePassword: "Hide password",
+          titleShowPassword: "Show password",
+        },
+        de: {
+          titleHidePassword: "Passwort verbergen",
+          titleShowPassword: "Passwort anzeigen",
+        },
+      },
+    });
+
     return {
+      t,
       showPassword,
       passwordPlaceholder,
     };