Skip to content

Commit

Permalink
migrate mt-field-error over to composition api
Browse files Browse the repository at this point in the history
  • Loading branch information
@Haberkamp
Haberkamp committed Oct 2, 2024
1 parent ea9a181 commit 42d2fe7
Showing 1 changed file with 60 additions and 77 deletions.
137 changes: 60 additions & 77 deletions packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

0 comments on commit 42d2fe7

Please sign in to comment.