@mapomodule/form 2.0.0-beta.5 → 2.0.0-beta.6

package/dist/runtime/components/fields/MapoRepeaterItem.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { ref, computed, watch, watchEffect } from "vue";
+import { useI18n } from "vue-i18n";
 import { useMapoForm, injectMapoForm } from "../../composables/useMapoForm.js";
 import { useFocusMode } from "../../composables/useFocusMode.js";
 import MapoFormField from "../MapoFormField.vue";
+const { t } = useI18n();
 const props = defineProps({
   uid: { type: String, required: false },
   item: { type: Object, required: true },
@@ -105,7 +107,10 @@ function enterFocusMode() {
     registry: props.registry,
     languages: props.languages,
     currentLang: props.currentLang,
-    breadcrumb: [props.repeaterDescriptor?.label ?? "Repeater", label.value]
+    breadcrumb: [
+      props.repeaterDescriptor?.label ?? t("mapo.repeater.repeater"),
+      label.value
+    ]
   });
 }
 </script>
@@ -178,7 +183,7 @@ function enterFocusMode() {
           color="error"
           icon="i-lucide-trash-2"
           :disabled="readonly"
-          title="Delete"
+          :title="t('mapo.delete')"
           @click.stop="$emit('delete')"
         />
         <UIcon name="i-lucide-chevron-down" class="h-4 w-4 text-gray-400" />
@@ -239,7 +244,7 @@ function enterFocusMode() {
             :max="totalItems"
             size="xs"
             class="w-14 text-center"
-            title="Position"
+            :title="t('mapo.repeater.position')"
             @change="
   $emit(
     'move-to',
@@ -261,7 +266,7 @@ function enterFocusMode() {
           variant="ghost"
           color="neutral"
           icon="i-lucide-maximize-2"
-          title="Edit full screen"
+          :title="t('mapo.repeater.editFullScreen')"
           @click="enterFocusMode"
         />
 
@@ -271,7 +276,7 @@ function enterFocusMode() {
           color="neutral"
           icon="i-lucide-chevron-up"
           :disabled="readonly"
-          title="Move up"
+          :title="t('mapo.repeater.moveUp')"
           @click="$emit('move-up')"
         />
         <UButton
@@ -280,7 +285,7 @@ function enterFocusMode() {
           color="neutral"
           icon="i-lucide-chevron-down"
           :disabled="readonly"
-          title="Move down"
+          :title="t('mapo.repeater.moveDown')"
           @click="$emit('move-down')"
         />
 
@@ -291,7 +296,7 @@ function enterFocusMode() {
           color="neutral"
           icon="i-lucide-copy"
           :disabled="readonly"
-          title="Duplicate"
+          :title="t('mapo.duplicate')"
           @click="$emit('duplicate')"
         />
 
@@ -301,7 +306,7 @@ function enterFocusMode() {
           color="error"
           icon="i-lucide-trash-2"
           :disabled="readonly"
-          title="Delete"
+          :title="t('mapo.delete')"
           @click="$emit('delete')"
         />
 

package/dist/runtime/components/fields/MapoRepeaterItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapoRepeaterItem.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoRepeaterItem.vue"],"names":[],"mappings":"AA6ZA,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,kBAAkB,EACnB,MAAM,sBAAsB,CAAC;AAK9B,KAAK,WAAW,GAAG;IACjB,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IACvC,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,aAAa,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxD,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wEAAwE;IACxE,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAkzBF,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"MapoRepeaterItem.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoRepeaterItem.vue"],"names":[],"mappings":"AAoaA,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,kBAAkB,EACnB,MAAM,sBAAsB,CAAC;AAO9B,KAAK,WAAW,GAAG;IACjB,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IACvC,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,aAAa,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxD,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wEAAwE;IACxE,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAszBF,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/runtime/components/fields/MapoSeoPreview.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 import { useRequestURL } from "#app";
+const { t } = useI18n();
 const props = defineProps({
   modelValue: { type: null, required: true },
   descriptor: { type: Object, required: true },
@@ -40,7 +42,9 @@ const displayUrl = computed(() => value.value.permalink || requestUrl.host);
     <div class="space-y-3">
       <div>
         <div class="mb-1 flex items-center justify-between">
-          <label class="text-sm font-medium text-gray-700">URL</label>
+          <label class="text-sm font-medium text-gray-700">{{
+            t("mapo.url")
+          }}</label>
         </div>
         <UInput
           :model-value="value.permalink"
@@ -54,14 +58,16 @@ const displayUrl = computed(() => value.value.permalink || requestUrl.host);
 
       <div>
         <div class="mb-1 flex items-center justify-between">
-          <label class="text-sm font-medium text-gray-700">SEO title</label>
+          <label class="text-sm font-medium text-gray-700">{{
+            t("mapo.seoPreview.seoTitle")
+          }}</label>
           <span class="text-xs" :class="titleColor">{{ titleLen }} / 60</span>
         </div>
         <UInput
           :model-value="value.title"
           :readonly="readonly"
           :disabled="disabled"
-          placeholder="Page title..."
+          :placeholder="t('mapo.seoPreview.titlePlaceholder')"
           class="w-full"
           @update:model-value="update('title', $event)"
         />
@@ -69,9 +75,9 @@ const displayUrl = computed(() => value.value.permalink || requestUrl.host);
 
       <div>
         <div class="mb-1 flex items-center justify-between">
-          <label class="text-sm font-medium text-gray-700"
-            >Meta description</label
-          >
+          <label class="text-sm font-medium text-gray-700">{{
+            t("mapo.seoPreview.metaDescription")
+          }}</label>
           <span class="text-xs" :class="descColor">{{ descLen }} / 155</span>
         </div>
         <UTextarea
@@ -79,7 +85,7 @@ const displayUrl = computed(() => value.value.permalink || requestUrl.host);
           :rows="3"
           :readonly="readonly"
           :disabled="disabled"
-          placeholder="Page description..."
+          :placeholder="t('mapo.seoPreview.descriptionPlaceholder')"
           class="w-full"
           @update:model-value="update('description', $event)"
         />
@@ -89,19 +95,17 @@ const displayUrl = computed(() => value.value.permalink || requestUrl.host);
     <!-- SERP preview -->
     <div class="rounded border border-gray-200 bg-gray-50 p-4">
       <p class="mb-1 text-xs font-medium uppercase tracking-wide text-gray-400">
-        Google preview
+        {{ t("mapo.seoPreview.googlePreview") }}
       </p>
       <div class="max-w-lg">
         <p class="truncate text-sm text-green-700">
           {{ displayUrl }}
         </p>
         <p class="truncate text-lg text-blue-700 underline">
-          {{ value.title || "Page title" }}
+          {{ value.title || t("mapo.seoPreview.defaultTitle") }}
         </p>
         <p class="mt-1 line-clamp-2 text-sm text-gray-600">
-          {{
-            value.description || "Page description that will appear in Google search results."
-          }}
+          {{ value.description || t("mapo.seoPreview.defaultDescription") }}
         </p>
       </div>
     </div>

package/dist/runtime/components/fields/MapoSeoPreview.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapoSeoPreview.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoSeoPreview.vue"],"names":[],"mappings":"AA8IA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,UAAU,QAAQ;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,aAAa,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAiSF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"MapoSeoPreview.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoSeoPreview.vue"],"names":[],"mappings":"AAmJA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,UAAU,QAAQ;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,aAAa,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAySF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/runtime/components/fields/MapoWygEditor.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, watch, onBeforeUnmount, resolveComponent } from "vue";
+import { useI18n } from "vue-i18n";
 import { useEditor, EditorContent } from "@tiptap/vue-3";
 import StarterKit from "@tiptap/starter-kit";
 import Link from "@tiptap/extension-link";
@@ -13,6 +14,7 @@ const props = defineProps({
   disabled: { type: Boolean, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
+const { t } = useI18n();
 const extraExtensions = props.descriptor.attrs?.extensions ?? [];
 const ALLOWED_LINK_PROTOCOLS = ["http", "https", "mailto", "tel"];
 function isSafeUrl(url) {
@@ -206,7 +208,9 @@ function onImageConfirm(selection) {
 
       <!-- Insert Image via Media Manager (available when @mapomodule/uikit is installed) -->
       <UTooltip
-        :text="hasMediaManager ? 'Insert image' : 'Requires @mapomodule/uikit'"
+        :text="
+  hasMediaManager ? t('mapo.wygEditor.insertImage') : t('mapo.wygEditor.requiresUikit')
+"
         :delay-open="300"
       >
         <UButton

package/dist/runtime/components/fields/MapoWygEditor.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapoWygEditor.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoWygEditor.vue"],"names":[],"mappings":"AA6SA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA+oBF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"MapoWygEditor.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoWygEditor.vue"],"names":[],"mappings":"AAqTA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA0pBF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/runtime/composables/useMapoForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMapoForm.d.ts","sourceRoot":"","sources":["../../../src/runtime/composables/useMapoForm.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useMapoForm.d.ts","sourceRoot":"","sources":["../../../src/runtime/composables/useMapoForm.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,GAAG,EACR,KAAK,QAAQ,EAGd,MAAM,KAAK,CAAC;AAOb,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAO3E,2CAA2C;AAC3C,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,MAAM;IAClD,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IACd,MAAM,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC1C,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sGAAsG;IACtG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC;IACxB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CACzC;AAED,mEAAmE;AACnE,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,yEAAyE;AACzE,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM;IAC/C,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IACd,MAAM,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC1C,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;IACtC,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,aAAa,CAAC;IACxB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC/C,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACpC,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;CACzB;AAgBD,uDAAuD;AACvD,eAAO,MAAM,QAAQ,eAAqB,CAAC;AAU3C,oDAAoD;AACpD,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,oCAE9C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC;;;;;;;;;;;;gCAuMvC,kBAAkB,CAAC,CAAC,CAAC,KAAG,OAAO;qCA8H/C,MAAM,GAAG,kBAAkB,CAAC,CAAC,CAAC,OAC1C,OAAO;sCAWK,MAAM,GAAG,kBAAkB,CAAC,CAAC,CAAC,KAC9C,MAAM,GAAG,IAAI;uBArNU,MAAM;qBAMR,MAAM,KAAG,OAAO;0BAqGb;QACzB,KAAK,EAAE,OAAO,CAAC;QACf,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAChC;;oBA2BoB,OAAO,CAAC,CAAC,CAAC;sBAKpB,CAAC,KAAK,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC;;;iBApU1D,IAAI;iBACJ,MAAM,IAAI;iBACV,MAAM,IAAI;;iBAFV,IAAI;iBACJ,MAAM,IAAI;iBACV,MAAM,IAAI;;;;EA+apB"}

package/dist/runtime/composables/useMapoForm.js

@@ -16,6 +16,7 @@ import {
 import { resolveFieldAccessor } from "../types/index.js";
 import { useCurrentLang } from "./useCurrentLang.js";
 import { useSnackStore } from "@mapomodule/store/runtime/stores/snack";
+import { useMapoT } from "@mapomodule/i18n/runtime/composables/useMapoT";
 import { useAuthStore } from "@mapomodule/store/runtime/stores/auth";
 function safeClone(v) {
   const raw = toRaw(v);
@@ -48,6 +49,7 @@ export function useMapoForm(options) {
   } = options;
   const currentLang = useCurrentLang(currentLangProp);
   const snack = useSnackStore();
+  const t = useMapoT();
   const authStore = useAuthStore();
   const backup = ref(safeClone(model.value));
   const clientErrors = ref({});
@@ -198,7 +200,7 @@ export function useMapoForm(options) {
   function checkRequired(descriptor, val) {
     if (!descriptor.required) return null;
     if (val === null || val === void 0 || val === "")
-      return "This field is required.";
+      return t("mapo.form.required");
     return null;
   }
   function getClientError(descriptor) {
@@ -236,7 +238,7 @@ export function useMapoForm(options) {
     submitted.value = true;
     const { valid } = validateClient();
     if (!valid) {
-      snack.show("Please fix the errors before saving.", "error");
+      snack.show(t("mapo.fixErrors"), "error");
       return;
     }
     isLoading.value = true;

package/dist/runtime/composables/useUnsavedChangesGuard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useUnsavedChangesGuard.d.ts","sourceRoot":"","sources":["../../../src/runtime/composables/useUnsavedChangesGuard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAGhD,uEAAuE;AACvE,MAAM,WAAW,0BAA0B;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;CAC1C;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,EACrB,OAAO,GAAE,0BAA+B,QA8BzC"}
+{"version":3,"file":"useUnsavedChangesGuard.d.ts","sourceRoot":"","sources":["../../../src/runtime/composables/useUnsavedChangesGuard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAIhD,uEAAuE;AACvE,MAAM,WAAW,0BAA0B;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;CAC1C;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,EACrB,OAAO,GAAE,0BAA+B,QA6BzC"}

package/dist/runtime/composables/useUnsavedChangesGuard.js

@@ -1,7 +1,8 @@
 import { onBeforeUnmount } from "vue";
-import { onBeforeRouteLeave } from "vue-router";
+import { onBeforeRouteLeave } from "#app";
+import { useMapoT } from "@mapomodule/i18n/runtime/composables/useMapoT";
 export function useUnsavedChangesGuard(isDirty, options = {}) {
-  const message = options.message ?? "You have unsaved changes. Do you really want to leave?";
+  const message = options.message ?? useMapoT()("mapo.confirmLeaveChanges");
   const canUseWindow = typeof window !== "undefined";
   const isEnabled = () => {
     if (typeof options.enabled === "function") return options.enabled();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapomodule/form",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.6",
   "description": "Mapo declarative typed form engine and field components",
   "type": "module",
   "license": "MIT",
@@ -48,15 +48,17 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.7.0",
+    "@mapomodule/i18n": "workspace:*",
     "@mapomodule/store": "2.0.0-beta.4",
-    "@mapomodule/utils": "2.0.0-beta.2",
+    "@mapomodule/utils": "2.0.0-beta.3",
     "@tiptap/extension-image": "^2.11.5",
     "@tiptap/extension-link": "^2.11.5",
     "@tiptap/extension-underline": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
     "@tiptap/vue-3": "^2.11.5",
     "leaflet": "^1.9.4",
-    "vue-draggable-plus": "^0.6.0"
+    "vue-draggable-plus": "^0.6.0",
+    "vue-i18n": "^11.4.0"
   },
   "optionalDependencies": {
     "@types/leaflet": "^1.9.18"
@@ -69,10 +71,10 @@
     "@nuxt/kit": "4.4.2",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "4.4.2",
-    "nuxt": "^4.4.2",
+    "nuxt": "^4.5.1",
     "vitest": "^3.2.0",
-    "vue": "^3.5.32",
-    "vue-router": "^5.0.4",
+    "vue": "^3.5.40",
+    "vue-router": "^5.2.0",
     "vue-tsc": "^3.3.4",
     "zod": "^3.23.8"
   }

package/src/__tests__/useMapoForm.test.ts

@@ -10,6 +10,11 @@ vi.mock("@mapomodule/store/runtime/stores/auth", () => ({
 vi.mock("@mapomodule/store/runtime/stores/snack", () => ({
   useSnackStore: () => ({ show: vi.fn() }),
 }));
+// Pulls in `nuxt/app`, which cannot resolve outside a Nuxt build. Assertions
+// below match on message keys, so echoing the key back is the useful stub.
+vi.mock("@mapomodule/i18n/runtime/composables/useMapoT", () => ({
+  useMapoT: () => (key: string) => key,
+}));
 
 // provide/inject called outside setup() emits a warning; silence it in tests.
 beforeEach(() => {

package/src/module.ts

@@ -6,6 +6,8 @@ import {
   createResolver,
   addImports,
   extendPages,
+  hasNuxtModule,
+  installModule,
 } from "@nuxt/kit";
 import type { NuxtModule } from "@nuxt/schema";
 import type { PartialFieldRegistry } from "./runtime/types/index.js";
@@ -40,6 +42,13 @@ export default defineNuxtModule<MapoFormOptions>({
       /@mapomodule[\\/]form[\\/]/,
     );
 
+    // Form components render user-facing strings through vue-i18n
+    // (`useI18n().t("mapo...")`). @mapomodule/i18n provides the catalogs and
+    // installs @nuxtjs/i18n unless the app manages it itself.
+    if (!hasNuxtModule("@mapomodule/i18n")) {
+      await installModule(await resolver.resolvePath("@mapomodule/i18n"));
+    }
+
     // Only serializable values can go into runtimeConfig.public.
     // `mapping` and `accessor` contain functions → not SSR-serializable.
     // To extend mapping/accessor, use an app plugin that accesses $mapoFormRegistry:

package/src/runtime/components/MapoFocusPortal.vue

@@ -11,9 +11,11 @@
  */
 import { computed, ref, onMounted, onUnmounted } from "vue";
 import { watch } from "vue";
+import { useI18n } from "vue-i18n";
 import { useFocusMode } from "../composables/useFocusMode.js";
 import MapoForm from "./MapoForm.vue";
 
+const { t } = useI18n();
 const { focusTarget, exit } = useFocusMode();
 
 const isOpen = computed(() => focusTarget.value !== null);
@@ -88,7 +90,7 @@ function onUpdate(val: Record<string, unknown>) {
             variant="ghost"
             color="neutral"
             icon="i-lucide-x"
-            label="Close"
+            :label="t('mapo.close')"
             size="sm"
             @click="exit"
           />

package/src/runtime/components/MapoFormTabs.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
 import type { TabEntry } from "../types/layout.js";
 import { injectMapoForm } from "../composables/useMapoForm.js";
 import MapoFormGroup from "./MapoFormGroup.vue";
 import MapoFormFlatSection from "./MapoFormFlatSection.vue";
 
+const { t } = useI18n();
+
 const props = defineProps<{ tabs: TabEntry[] }>();
 
 defineSlots<Record<string, unknown>>();
@@ -54,7 +57,7 @@ const tabsWithErrors = computed(() => {
         <span
           v-if="tabsWithErrors.has(tab.name)"
           class="inline-block h-1.5 w-1.5 rounded-full bg-red-500"
-          aria-label="This tab contains errors"
+          :aria-label="t('mapo.form.tabErrors')"
         />
       </button>
       <!-- Extra content appended to the tab bar (actions, badges, …). -->

package/src/runtime/components/fields/MapoDateField.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
 import { parseDate, CalendarDate } from "@internationalized/date";
 import type { DateDescriptor } from "../../types/index.js";
 
@@ -14,6 +15,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{ "update:modelValue": [value: string | null] }>();
 
+const { t } = useI18n();
 const open = ref(false);
 
 /** Parsed calendar value derived from the current ISO-like model string. */
@@ -30,7 +32,7 @@ const calendarValue = computed<CalendarDate | undefined>(() => {
 
 const displayLabel = computed(() => {
   const v = calendarValue.value;
-  if (!v) return "Select date";
+  if (!v) return t("mapo.dateField.selectDate");
   return `${String(v.day).padStart(2, "0")}/${String(v.month).padStart(2, "0")}/${v.year}`;
 });
 

package/src/runtime/components/fields/MapoDateTimeField.vue

@@ -6,6 +6,7 @@ import {
   today,
   getLocalTimeZone,
 } from "@internationalized/date";
+import { useI18n } from "vue-i18n";
 import type { DateDescriptor } from "../../types/index.js";
 
 /** Datetime field with configurable naive/UTC serialisation semantics. */
@@ -19,6 +20,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{ "update:modelValue": [value: string | null] }>();
 
+const { t } = useI18n();
 const open = ref(false);
 
 // Timezone strategy configurable through `descriptor.attrs.tz`:
@@ -72,7 +74,7 @@ function emitFromCalendar(v: CalendarDateTime) {
 // Displayed label in the trigger button
 const displayLabel = computed(() => {
   const v = calendarValue.value;
-  if (!v) return "Select date and time";
+  if (!v) return t("mapo.dateField.selectDateTime");
   const date = `${String(v.day).padStart(2, "0")}/${String(v.month).padStart(2, "0")}/${v.year}`;
   const time = `${String(v.hour).padStart(2, "0")}:${String(v.minute).padStart(2, "0")}`;
   return `${date} ${time}`;

package/src/runtime/components/fields/MapoEnhancedMediaField.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
 import type {
   EnhancedMediaDescriptor,
   EnhancedMediaValue,
@@ -19,6 +20,8 @@ const emit = defineEmits<{
   "update:modelValue": [value: EnhancedMediaValue | null];
 }>();
 
+const { t } = useI18n();
+
 const dialogOpen = ref(false);
 
 // Picker dialog comes from @mapomodule/uikit, resolved at runtime.
@@ -83,7 +86,7 @@ function clear() {
             <MapoMediaPreview v-if="current" :media="current" size="md" />
             <div v-else class="flex flex-col items-center gap-1 text-dimmed">
               <UIcon name="i-lucide-image-plus" class="size-7" />
-              <span class="text-[10px]">Select</span>
+              <span class="text-[10px]">{{ t("mapo.select") }}</span>
             </div>
           </div>
         </div>
@@ -101,7 +104,7 @@ function clear() {
                 size="xs"
                 variant="ghost"
                 color="neutral"
-                title="Change"
+                :title="t('mapo.change')"
                 @click="dialogOpen = true"
               />
               <UButton
@@ -110,7 +113,7 @@ function clear() {
                 size="xs"
                 variant="ghost"
                 color="neutral"
-                title="Remove"
+                :title="t('mapo.remove')"
                 @click="clear"
               />
             </div>
@@ -119,13 +122,13 @@ function clear() {
           <UInput
             v-model="altValue"
             size="sm"
-            placeholder="Alt text"
+            :placeholder="t('mapo.enhancedMediaField.altText')"
             :disabled="readonly || disabled || !current"
           />
           <UInput
             v-model="captionValue"
             size="sm"
-            placeholder="Caption"
+            :placeholder="t('mapo.enhancedMediaField.caption')"
             :disabled="readonly || disabled || !current"
           />
         </div>

package/src/runtime/components/fields/MapoFileField.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
 import type { FileDescriptor } from "../../types/index.js";
 
 const props = defineProps<{
@@ -12,6 +13,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{ "update:modelValue": [value: File | null] }>();
 
+const { t } = useI18n();
 const inputRef = ref<HTMLInputElement | null>(null);
 
 const currentFileName = computed<string | null>(() => {
@@ -78,7 +80,7 @@ const accept = computed(
         variant="ghost"
         color="neutral"
         icon="i-lucide-x"
-        aria-label="Remove file"
+        :aria-label="t('mapo.fileField.removeFile')"
         @click="clear"
       />
     </div>

package/src/runtime/components/fields/MapoFksField.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
 import { useNuxtApp } from "#app";
 import { debounce } from "@mapomodule/utils";
 import type { FksDescriptor } from "../../types/index.js";
@@ -14,6 +15,8 @@ const props = defineProps<{
 
 const emit = defineEmits<{ "update:modelValue": [value: unknown] }>();
 
+const { t } = useI18n();
+
 const attrs = computed(() => props.descriptor.attrs);
 const isMultiple = computed(
   () => props.descriptor.type === "m2m" || !!attrs.value.multiple,
@@ -70,7 +73,7 @@ const internalValue = computed({
 
 // Placeholder
 const placeholder = computed(() =>
-  isMultiple.value ? "Search and select..." : "Search...",
+  isMultiple.value ? t("mapo.fksField.searchSelect") : t("mapo.search"),
 );
 
 // Chip text shown in the trigger.
@@ -144,7 +147,9 @@ function getItemKey(item: unknown): unknown {
     <!-- Empty state -->
     <template #empty>
       <span class="text-sm text-gray-500">
-        {{ searchTerm ? "No results found" : "No items available" }}
+        {{
+          searchTerm ? t("mapo.fksField.noResults") : t("mapo.fksField.noItems")
+        }}
       </span>
     </template>
   </USelectMenu>

package/src/runtime/components/fields/MapoMapField.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, defineAsyncComponent } from "vue";
+import { useI18n } from "vue-i18n";
 import type { MapDescriptor } from "../../types/index.js";
 
 // Leaflet is loaded only on the client because it is not SSR-safe.
@@ -7,6 +8,8 @@ const LeafletMap = defineAsyncComponent(
   () => import("./MapoMapFieldClient.vue"),
 );
 
+const { t } = useI18n();
+
 /** Geographic coordinates stored by the map field. */
 interface LatLng {
   lat: number;
@@ -63,7 +66,7 @@ function clear() {
     <div class="flex gap-2">
       <UInput
         v-model="latInput"
-        placeholder="Latitude"
+        :placeholder="t('mapo.latitude')"
         class="flex-1"
         :readonly="readonly"
         :disabled="disabled"
@@ -71,7 +74,7 @@ function clear() {
       />
       <UInput
         v-model="lngInput"
-        placeholder="Longitude"
+        :placeholder="t('mapo.longitude')"
         class="flex-1"
         :readonly="readonly"
         :disabled="disabled"

package/src/runtime/components/fields/MapoMediaField.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
 import type { MediaDescriptor, MediaItem } from "../../types/index.js";
 import { useMediaManager } from "../../composables/useMediaManager.js";
 
@@ -15,6 +16,8 @@ const emit = defineEmits<{
   "update:modelValue": [value: MediaItem | null];
 }>();
 
+const { t } = useI18n();
+
 const dialogOpen = ref(false);
 
 // Picker dialog comes from @mapomodule/uikit, resolved at runtime.
@@ -79,7 +82,7 @@ function clear() {
         :block="!current"
         @click="dialogOpen = true"
       >
-        {{ current ? "Change" : "Select media" }}
+        {{ current ? t("mapo.change") : t("mapo.mediaField.selectMedia") }}
       </UButton>
 
       <!-- Dialog -->