migrate mt-field-error over to composition api

packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue

@@ -5,102 +5,85 @@
     color="color-text-critical-default"
     v-if="!!error"
     class="mt-field__error"
-    aria-label="Error message"
   >
-    <mt-icon name="solid-exclamation-circle" />
-    {{ errorMessage }}
+    <mt-icon
+      size="0.75rem"
+      color="var(--color-icon-critical-default)"
+      name="solid-exclamation-circle"
+    />
+
+    <span>
+      {{ errorMessage }}
+    </span>
   </mt-text>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import { computed } from "vue";
 import MtIcon from "../../../icons-media/mt-icon/mt-icon.vue";
 import MtText from "@/components/content/mt-text/mt-text.vue";
+import { useI18n } from "@/composables/useI18n";
 
-export default defineComponent({
-  name: "MtFieldError",
+const props = defineProps<{
+  error: {
+    code: number;
+    detail: string;
+    parameters?: Record<string, string>;
+  };
+}>();
 
-  i18n: {
-    messages: {
-      en: {
-        "mt-field-error": {
-          FRAMEWORK__MISSING_PRIVILEGE_ERROR: "Missing permissions",
-          FRAMEWORK__DELETE_RESTRICTED: "Deletion failed",
-          INVALID_MEDIA_URL: "Please enter a valid URL to upload a file.",
-          CONTENT__MISSING_RULE_TYPE_EXCEPTION: "You must choose a type for this rule.",
-          CONTENT__INVALID_CATEGORY_TYPE_AS_ENTRY_POINT:
-            "The type can not be assigned while category is an entry point.",
-          SHOPWARE_INVALID_IP: "Please enter a valid IP address.",
-          INVALID_URL: "Please enter a valid url.",
-          INVALID_MAIL: "Please enter a valid email address.",
-          FRAMEWORK__RATE_LIMIT_EXCEEDED:
-            "Too many requests. Please wait {seconds} seconds before trying again.",
-          DUPLICATED_URL: "This URL is already in use. Please choose another URL.",
-          "c1051bb4-d103-4f74-8988-acbcafc7fdc3": "This field must not be empty.",
-        },
-      },
-      de: {
-        "mt-field-error": {
-          FRAMEWORK__MISSING_PRIVILEGE_ERROR: "Fehlende Berechtigungen",
-          FRAMEWORK__DELETE_RESTRICTED: "Löschen fehlgeschlagen",
-          INVALID_MEDIA_URL: "Bitte gib eine gültige URL ein, um eine Datei hochzuladen.",
-          CONTENT__MISSING_RULE_TYPE_EXCEPTION: "Du musst einen Typ für diese Regel auswählen.",
-          CONTENT__INVALID_CATEGORY_TYPE_AS_ENTRY_POINT:
-            "Dieser Typ kann nicht gewählt werden, während die Kategorie als Einstiegspunkt festgelegt ist.",
-          SHOPWARE_INVALID_IP: "Bitte gib eine gültige IP-Adresse ein.",
-          INVALID_URL: "Bitte gib eine gültige URL ein.",
-          INVALID_MAIL: "Bitte gib eine gültige E-Mail-Adresse ein.",
-          FRAMEWORK__RATE_LIMIT_EXCEEDED:
-            "Zu viele Anfragen. Bitte warten Sie {seconds} Sekunden, bevor Sie es erneut versuchen.",
-          DUPLICATED_URL: "Diese URL wird bereits genutzt. Bitte wähle eine andere Domain.",
-          "c1051bb4-d103-4f74-8988-acbcafc7fdc3": "Dieses Feld darf nicht leer sein",
-        },
-      },
+const { t } = useI18n({
+  messages: {
+    de: {
+      FRAMEWORK__MISSING_PRIVILEGE_ERROR: "Fehlende Berechtigungen",
+      FRAMEWORK__DELETE_RESTRICTED: "Löschen fehlgeschlagen",
+      INVALID_MEDIA_URL: "Bitte gib eine gültige URL ein, um eine Datei hochzuladen.",
+      CONTENT__MISSING_RULE_TYPE_EXCEPTION: "Du musst einen Typ für diese Regel auswählen.",
+      CONTENT__INVALID_CATEGORY_TYPE_AS_ENTRY_POINT:
+        "Dieser Typ kann nicht gewählt werden, während die Kategorie als Einstiegspunkt festgelegt ist.",
+      SHOPWARE_INVALID_IP: "Bitte gib eine gültige IP-Adresse ein.",
+      INVALID_URL: "Bitte gib eine gültige URL ein.",
+      INVALID_MAIL: "Bitte gib eine gültige E-Mail-Adresse ein.",
+      FRAMEWORK__RATE_LIMIT_EXCEEDED:
+        "Zu viele Anfragen. Bitte warten Sie {seconds} Sekunden, bevor Sie es erneut versuchen.",
+      DUPLICATED_URL: "Diese URL wird bereits genutzt. Bitte wähle eine andere Domain.",
+      "c1051bb4-d103-4f74-8988-acbcafc7fdc3": "Dieses Feld darf nicht leer sein",
     },
-  },
-
-  components: {
-    "mt-icon": MtIcon,
-    "mt-text": MtText,
-  },
-
-  props: {
-    error: {
-      type: Object,
-      required: false,
-      default: null,
+    en: {
+      FRAMEWORK__MISSING_PRIVILEGE_ERROR: "Missing permissions",
+      FRAMEWORK__DELETE_RESTRICTED: "Deletion failed",
+      INVALID_MEDIA_URL: "Please enter a valid URL to upload a file.",
+      CONTENT__MISSING_RULE_TYPE_EXCEPTION: "You must choose a type for this rule.",
+      CONTENT__INVALID_CATEGORY_TYPE_AS_ENTRY_POINT:
+        "The type can not be assigned while category is an entry point.",
+      SHOPWARE_INVALID_IP: "Please enter a valid IP address.",
+      INVALID_URL: "Please enter a valid url.",
+      INVALID_MAIL: "Please enter a valid email address.",
+      FRAMEWORK__RATE_LIMIT_EXCEEDED:
+        "Too many requests. Please wait {seconds} seconds before trying again.",
+      DUPLICATED_URL: "This URL is already in use. Please choose another URL.",
+      "c1051bb4-d103-4f74-8988-acbcafc7fdc3": "This field must not be empty.",
     },
   },
+});
 
-  computed: {
-    errorMessage(): string {
-      if (!this.error) {
-        return "";
-      }
+const errorMessage = computed(() => {
+  if (!props.error) return "";
 
-      const translationKey = `mt-field-error.${this.error.code}`;
-      const translation = this.$tc(translationKey, 1, this.error.parameters || {});
+  const translationKey = props.error.code;
+  const translation = t(translationKey, props.error.parameters || {});
 
-      if (translation === translationKey) {
-        return this.error.detail;
-      }
-      return translation;
-    },
-  },
+  if (translation === translationKey) return props.error.detail;
+
+  return translation;
 });
 </script>
 
-<style lang="scss">
+<style scoped>
 .mt-field__error {
   display: flex;
   align-items: center;
-  gap: 4px;
-  margin-top: 4px;
-
-  #meteor-icon-kit__solid-exclamation-circle {
-    width: 12px;
-    height: 12px;
-    color: var(--color-icon-critical-default);
-  }
+  gap: 0.25rem;
+  margin-top: 0.25rem;
 }
 </style>