Merge branch 'main' into improve-colorpicker-accessibility

.changeset/heavy-falcons-act.md

@@ -0,0 +1,7 @@
+---
+"@shopware-ag/meteor-component-library": major
+---
+
+Removed locale control from mt-theme-provider.
+
+Controlling the local will still happen via vue-i18n

.changeset/neat-pumpkins-juggle.md

@@ -0,0 +1,6 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Fixes a issue in the mt-modal that the toggling does not work when it is triggered outside the modal.
+Fixes a issue in the mt-modal that it does not work inside transformed elements. This was fixed by moving the modal to the body element using the native Teleport feature of Vue 3.

.changeset/wise-melons-smash.md

@@ -0,0 +1,11 @@
+---
+"@shopware-ag/meteor-component-library": major
+---
+
+# Add new Text Editor component
+
+This change introduces a new Text Editor component to the Meteor Component Library.
+
+# Updated i18n configuration
+
+We change the 'legacy' mode of i18n to 'false' in the Meteor Component Library configuration to use the new i18n composable.

examples/nuxt-app/package.json

@@ -16,7 +16,8 @@
     "@shopware-ag/meteor-component-library": "workspace:*",
     "nuxt": "^3.10.3",
     "vue": "^3.5.0",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "vue-i18n": "^9.9.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.45.0",

examples/nuxt-app/plugins/i18n.ts

@@ -0,0 +1,11 @@
+import { createI18n } from "vue-i18n";
+
+export default defineNuxtPlugin(({ vueApp }) => {
+  const i18n = createI18n({
+    legacy: false,
+    globalInjection: true,
+    locale: "en",
+  });
+
+  vueApp.use(i18n);
+});

packages/component-library/.storybook/preview.ts

@@ -18,6 +18,7 @@ import "@shopware-ag/meteor-tokens/administration/dark.css";
 
 const i18n = createI18n({
   // something vue-i18n options here ...
+  legacy: false,
   globalInjection: true,
   locale: "en",
   fallbackLocale: "en",

packages/component-library/package.json

@@ -39,22 +39,46 @@
     "test:storybook": "test-storybook"
   },
   "dependencies": {
+    "@codemirror/lang-html": "^6.4.9",
     "@floating-ui/dom": "^1.4.3",
     "@floating-ui/vue": "^1.1.5",
     "@shopware-ag/meteor-icon-kit": "workspace:*",
     "@shopware-ag/meteor-tokens": "workspace:*",
     "@storybook/addon-a11y": "^8.4.5",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/vue": "^8.1.0",
+    "@tiptap/extension-bubble-menu": "^2.10.0",
+    "@tiptap/extension-bullet-list": "^2.10.0",
+    "@tiptap/extension-character-count": "^2.10.0",
+    "@tiptap/extension-color": "^2.9.1",
+    "@tiptap/extension-highlight": "^2.10.3",
+    "@tiptap/extension-link": "^2.10.0",
+    "@tiptap/extension-list-item": "^2.10.0",
+    "@tiptap/extension-ordered-list": "^2.10.0",
+    "@tiptap/extension-placeholder": "^2.10.4",
+    "@tiptap/extension-subscript": "^2.9.1",
+    "@tiptap/extension-superscript": "^2.9.1",
+    "@tiptap/extension-table": "^2.10.3",
+    "@tiptap/extension-table-cell": "^2.10.3",
+    "@tiptap/extension-table-header": "^2.10.3",
+    "@tiptap/extension-table-row": "^2.10.3",
+    "@tiptap/extension-text-align": "^2.9.1",
+    "@tiptap/extension-text-style": "^2.9.1",
+    "@tiptap/extension-underline": "^2.9.1",
+    "@tiptap/pm": "^2.9.1",
+    "@tiptap/starter-kit": "^2.9.1",
+    "@tiptap/vue-3": "^2.9.1",
     "@vuepic/vue-datepicker": "^10.0.0",
     "@vueuse/components": "^10.7.2",
     "@vueuse/core": "^10.7.2",
+    "codemirror": "^6.0.1",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
     "focus-trap": "^7.5.4",
     "inter-ui": "^3.19.3",
     "lodash-es": "^4.17.21",
     "nanoid": "^5.0.7",
+    "vue-codemirror6": "^1.3.8",
     "vue-i18n": "^9.9.1",
     "vue-smooth-reflow": "^0.1.12"
   },
@@ -109,8 +133,5 @@
     "vite-plugin-svgstring": "^1.0.0",
     "vitest": "^1.1.3",
     "vue-tsc": "^2.0.21"
-  },
-  "peerDependencies": {
-    "vue": ">= 3.5.0"
   }
 }

packages/component-library/src/components/_internal/mt-label.vue

@@ -24,7 +24,7 @@
 import { computed, useAttrs } from "vue";
 import MtIcon from "../icons-media/mt-icon/mt-icon.vue";
 import MtColorBadge from "../feedback-indicator/mt-color-badge/mt-color-badge.vue";
-import { useI18n } from "@/composables/useI18n";
+import { useI18n } from "vue-i18n";
 
 const props = withDefaults(
   defineProps<{

packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue

@@ -36,7 +36,7 @@ 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 { useFutureFlags } from "@/composables/useFutureFlags";
-import { useI18n } from "@/composables/useI18n";
+import { useI18n } from "vue-i18n";
 
 const { t } = useI18n({
   messages: {

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

@@ -262,6 +262,10 @@ $mt-field-transition:
     margin-bottom: var(--scale-size-12);
   }
 
+  &.is--disabled {
+    cursor: not-allowed;
+  }
+
   &__hint-wrapper {
     display: flex;
     justify-content: space-between;

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

@@ -22,7 +22,7 @@ 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";
+import { useI18n } from "vue-i18n";
 
 export default defineComponent({
   name: "MtFieldCopyable",

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

@@ -16,7 +16,7 @@
 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";
+import { useI18n } from "vue-i18n";
 
 const props = defineProps<{
   error?: Record<string, any> | null;
@@ -25,8 +25,12 @@ const props = defineProps<{
 const errorMessage = computed(() => {
   if (!props.error) return "";
 
+  if (!props.error.code) {
+    return t(props.error.detail);
+  }
+
   const translation = t(props.error.code, props.error.parameters || {});
-  const noTranslationFound = translation === props.error.code;
+  const noTranslationFound = translation === props.error.code.toString();
 
   return noTranslationFound ? props.error.detail : translation;
 });

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

@@ -22,7 +22,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import MtIcon from "@/components/icons-media/mt-icon/mt-icon.vue";
-import { useI18n } from "@/composables/useI18n";
+import { useI18n } from "vue-i18n";
 
 const { t } = useI18n({
   messages: {

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

@@ -45,7 +45,7 @@
 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";
+import { useI18n } from "vue-i18n";
 
 export default defineComponent({
   name: "MtInheritanceSwitch",

packages/component-library/src/components/form/_internal/mt-select-base/_internal/mt-select-result-list.vue

@@ -53,7 +53,7 @@ import {
   MtSelectResultRemoveItemSelectByKeyboardListener,
 } from "@/helper/provideInjectKeys";
 import { ref } from "vue";
-import { useI18n } from "@/composables/useI18n";
+import { useI18n } from "vue-i18n";
 
 export default defineComponent({
   name: "MtSelectResultList",

packages/component-library/src/components/form/mt-button/mt-button.vue

@@ -289,6 +289,7 @@ const isInsideTooltip = useIsInsideTooltip();
   width: 100%;
   display: flex;
   justify-content: center;
+  align-items: center;
 }
 
 .mt-button--x-small {