Merge branch 'main' into migrate-mt-field-error-to-custom-i18n

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,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>

packages/component-library/src/components/form/_internal/mt-inheritance-switch/mt-inheritance-switch.vue

@@ -1,17 +1,19 @@
 <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"
       key="inherit-icon"
       v-tooltip="{
-        message: $tc('mt-inheritance-switch.tooltipRemoveInheritance'),
+        message: t('tooltipRemoveInheritance'),
         disabled: disabled,
       }"
       data-testid="mt-inheritance-switch-icon"
@@ -20,14 +22,17 @@
       size="14"
       @click="onClickRemoveInheritance"
     />
+
     <mt-icon
       v-else
       key="uninherit-icon"
       v-tooltip="{
-        message: $tc('mt-inheritance-switch.tooltipRestoreInheritance'),
+        message: t('tooltipRestoreInheritance'),
         disabled: disabled,
       }"
-      :class="unInheritClasses"
+      :class="{
+        'is--clickable': !disabled,
+      }"
       :multicolor="true"
       name="regular-link-horizontal-slash"
       size="14"
@@ -40,27 +45,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,
   },
@@ -83,37 +72,44 @@ export default defineComponent({
     },
   },
 
-  computed: {
-    unInheritClasses(): { "is--clickable": boolean } {
-      return { "is--clickable": !this.disabled };
-    },
-  },
+  setup(props, { emit }) {
+    const { t } = useI18n({
+      messages: {
+        en: {
+          tooltipRemoveInheritance: "Remove inheritance",
+          tooltipRestoreInheritance: "Restore inheritance",
+        },
+        de: {
+          tooltipRemoveInheritance: "Vererbung entfernen",
+          tooltipRestoreInheritance: "Vererbung wiederherstellen",
+        },
+      },
+    });
 
-  methods: {
-    onClickRestoreInheritance() {
-      if (this.disabled) {
-        return;
-      }
-      this.$emit("inheritance-restore");
-    },
+    function onClickRestoreInheritance() {
+      if (props.disabled) return;
 
-    onClickRemoveInheritance() {
-      if (this.disabled) {
-        return;
-      }
-      this.$emit("inheritance-remove");
-    },
+      emit("inheritance-restore");
+    }
+
+    function onClickRemoveInheritance() {
+      if (props.disabled) return;
+
+      emit("inheritance-remove");
+    }
+
+    return { t, onClickRemoveInheritance, onClickRestoreInheritance };
   },
 });
 </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>

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,
     };