diff --git a/.changeset/green-poems-drop.md b/.changeset/green-poems-drop.md new file mode 100644 index 00000000..d5b37514 --- /dev/null +++ b/.changeset/green-poems-drop.md @@ -0,0 +1,5 @@ +--- +"@shopware-ag/meteor-component-library": patch +--- + +Migrate mt-select over to the custom built i18n composable diff --git a/packages/component-library/src/components/form/mt-select/mt-select.vue b/packages/component-library/src/components/form/mt-select/mt-select.vue index 97ee08b4..29af5328 100644 --- a/packages/component-library/src/components/form/mt-select/mt-select.vue +++ b/packages/component-library/src/components/form/mt-select/mt-select.vue @@ -49,7 +49,7 @@ ref="MtSelectResultList" :options="visibleResults" :is-loading="isLoading" - :empty-message="$t('mt-select.messageNoResults', { term: searchTerm })" + :empty-message="t('messageNoResults', { term: searchTerm })" :focus-el="$refs.selectionList.getFocusEl()" @paginate="$emit('paginate')" @item-select="addItem" @@ -124,25 +124,11 @@ import MtSelectResultList from "../_internal/mt-select-base/_internal/mt-select- import MtSelectResult from "../_internal/mt-select-base/_internal/mt-select-result.vue"; import MtSelectSelectionList from "../_internal/mt-select-base/_internal/mt-select-selection-list.vue"; import MtHighlightText from "../../_internal/mt-highlight-text.vue"; +import { useI18n } from "@/composables/useI18n"; export default defineComponent({ name: "MtSelect", - i18n: { - messages: { - en: { - "mt-select": { - messageNoResults: 'No results found for "{term}".', - }, - }, - de: { - "mt-select": { - messageNoResults: 'Es wurden keine Ergebnisse für "{term}" gefunden.', - }, - }, - }, - }, - components: { "mt-select-base": MtSelectBase, "mt-select-result-list": MtSelectResultList, @@ -436,6 +422,23 @@ export default defineComponent({ }, }, + setup() { + const { t } = useI18n({ + messages: { + en: { + messageNoResults: 'No results found for "{term}".', + }, + de: { + messageNoResults: 'Es wurden keine Ergebnisse für "{term}" gefunden.', + }, + }, + }); + + return { + t, + }; + }, + watch: { valueLimit(value) { this.limit = value;