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

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

@@ -0,0 +1,110 @@
+<script setup>
+import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useMediaManager } from "../../composables/useMediaManager.js";
+const props = defineProps({
+  modelValue: { type: null, required: true },
+  descriptor: { type: Object, required: true },
+  errors: { type: Array, required: false },
+  readonly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const { t } = useI18n();
+const dialogOpen = ref(false);
+const { MediaDialog, available } = useMediaManager();
+const current = computed(() => {
+  if (!props.modelValue) return [];
+  return props.modelValue.filter((v) => typeof v === "object");
+});
+const mime = computed(() => props.descriptor.attrs?.mime);
+function onConfirm(selection) {
+  emit("update:modelValue", Array.isArray(selection) ? selection : [selection]);
+}
+function removeItem(id) {
+  emit(
+    "update:modelValue",
+    current.value.filter((m) => m.id !== id)
+  );
+}
+const dragIndex = ref(null);
+function onDragStart(index) {
+  dragIndex.value = index;
+}
+function onDragOverItem(index) {
+  if (dragIndex.value === null || dragIndex.value === index) return;
+  const items = [...current.value];
+  const [moved] = items.splice(dragIndex.value, 1);
+  if (!moved) return;
+  items.splice(index, 0, moved);
+  dragIndex.value = index;
+  emit("update:modelValue", items);
+}
+function onDragEnd() {
+  dragIndex.value = null;
+}
+</script>
+
+<template>
+  <div class="mapo-media-m2m-field space-y-2">
+    <MapoMediaUnavailable v-if="!available" />
+
+    <template v-else>
+      <!-- Selected items grid -->
+      <div v-if="current.length > 0" class="flex flex-wrap gap-2">
+        <div
+          v-for="(media, i) in current"
+          :key="media.id"
+          class="group relative"
+          :class="{
+  'opacity-50': dragIndex === i,
+  'cursor-grab': !readonly && !disabled
+}"
+          :draggable="!readonly && !disabled"
+          @dragstart="onDragStart(i)"
+          @dragover.prevent="onDragOverItem(i)"
+          @dragend="onDragEnd"
+        >
+          <MapoMediaPreview :media="media" size="sm" />
+          <button
+            v-if="!readonly && !disabled"
+            class="absolute -right-1.5 -top-1.5 hidden size-4 items-center justify-center rounded-full bg-error text-inverted group-hover:flex"
+            type="button"
+            @click="removeItem(media.id)"
+          >
+            <UIcon name="i-lucide-x" class="size-2.5" />
+          </button>
+        </div>
+      </div>
+
+      <!-- Add button -->
+      <UButton
+        v-if="!readonly && !disabled"
+        icon="i-lucide-plus"
+        size="sm"
+        variant="soft"
+        color="neutral"
+        @click="dialogOpen = true"
+      >
+        {{
+          current.length > 0 ? t("mapo.mediaM2MField.addMedia") : t("mapo.mediaField.selectMedia")
+        }}
+      </UButton>
+
+      <!-- Dialog -->
+      <component
+        :is="MediaDialog"
+        v-model="dialogOpen"
+        selection-mode="multi"
+        :mime="mime"
+        :selected="current"
+        @confirm="onConfirm"
+      />
+    </template>
+
+    <!-- Errors -->
+    <p v-for="err in errors" :key="err" class="text-xs text-error" role="alert">
+      {{ err }}
+    </p>
+  </div>
+</template>

package/dist/runtime/components/fields/MapoMediaM2mField.vue.d.ts

@@ -0,0 +1,16 @@
+import type { MediaM2mDescriptor, MediaItem } from "../../types/index.js";
+type __VLS_Props = {
+    modelValue: MediaItem[] | number[] | null | undefined;
+    descriptor: MediaM2mDescriptor;
+    errors?: string[];
+    readonly?: boolean;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: MediaItem[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: MediaItem[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=MapoMediaM2mField.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MapoMediaM2mField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoMediaM2mField.vue"],"names":[],"mappings":"AAuIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAG1E,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,SAAS,EAAE,GAAG,MAAM,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IACtD,UAAU,EAAE,kBAAkB,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA+QF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -0,0 +1,15 @@
+<script setup>
+
+</script>
+
+<template>
+  <div
+    class="flex items-center gap-2 rounded-lg border border-dashed border-default px-3 py-2 text-xs text-muted"
+  >
+    <UIcon
+      name="i-lucide-triangle-alert"
+      class="size-4 shrink-0 text-warning"
+    />
+    <span>Media fields require <code>@mapomodule/uikit</code>.</span>
+  </div>
+</template>

package/dist/runtime/components/fields/MapoMediaUnavailable.vue.d.ts

@@ -0,0 +1,4 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=MapoMediaUnavailable.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MapoMediaUnavailable.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoMediaUnavailable.vue"],"names":[],"mappings":"AAuEA,QAAA,MAAM,YAAY,+QAChB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, computed, watchEffect } from "vue";
+import { useI18n } from "vue-i18n";
 import { VueDraggable } from "vue-draggable-plus";
 import { useConfirmStore } from "@mapomodule/store/runtime/stores/confirm";
 import { injectMapoForm } from "../../composables/useMapoForm.js";
@@ -13,6 +14,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:modelValue"]);
 const form = injectMapoForm();
+const { t } = useI18n();
 const attrs = computed(() => props.descriptor.attrs ?? {});
 const items = computed({
   get: () => Array.isArray(props.modelValue) ? props.modelValue : [],
@@ -69,7 +71,8 @@ function remainingSlots() {
 function minBound() {
   return attrs.value.minItems ?? 0;
 }
-async function askConfirm(message, title = "Confirm") {
+async function askConfirm(message, title) {
+  title ??= t("mapo.confirm");
   try {
     return await useConfirmStore().ask({ title, message });
   } catch {
@@ -86,8 +89,8 @@ async function deleteItem(index) {
   if (!canDelete.value) return;
   if (attrs.value.confirmDelete !== false) {
     const confirmed = await askConfirm(
-      "Are you sure you want to delete this item?",
-      "Delete item"
+      t("mapo.confirmDelete"),
+      t("mapo.repeater.deleteItem")
     );
     if (!confirmed) return;
   }
@@ -198,14 +201,14 @@ async function bulkDelete() {
   if (count === 0) return;
   if (items.value.length - count < minBound()) {
     await askConfirm(
-      `Cannot delete: at least ${minBound()} items must remain.`,
-      "Action blocked"
+      t("mapo.repeater.minItemsBlock", { min: minBound() }),
+      t("mapo.repeater.actionBlocked")
     );
     return;
   }
   const confirmed = await askConfirm(
-    `Delete ${count} selected items?`,
-    "Delete items"
+    t("mapo.repeater.confirmBulkDelete", { count }),
+    t("mapo.repeater.deleteItems")
   );
   if (!confirmed) return;
   pushUndo();
@@ -250,7 +253,7 @@ const errorPrefix = (index) => `${props.descriptor.key}.${index}`;
       class="flex flex-wrap items-center gap-2 rounded border border-gray-200 bg-gray-50 px-3 py-2"
     >
       <span class="text-sm font-medium text-gray-700">
-        {{ items.length }} {{ items.length === 1 ? "item" : "items" }}
+        {{ t("mapo.repeater.nItems", { n: items.length }, items.length) }}
         <span v-if="attrs.maxItems" class="text-gray-400"
           >/ {{ attrs.maxItems }}</span
         >
@@ -258,10 +261,10 @@ const errorPrefix = (index) => `${props.descriptor.key}.${index}`;
 
       <div class="flex flex-1 flex-wrap items-center justify-end gap-2">
         <UButton size="xs" variant="ghost" color="neutral" @click="collapseAll">
-          Collapse all
+          {{ t("mapo.repeater.collapseAll") }}
         </UButton>
         <UButton size="xs" variant="ghost" color="neutral" @click="expandAll">
-          Expand all
+          {{ t("mapo.repeater.expandAll") }}
         </UButton>
         <UButton
           v-if="undoStack.length"
@@ -269,7 +272,7 @@ const errorPrefix = (index) => `${props.descriptor.key}.${index}`;
           variant="ghost"
           color="neutral"
           icon="i-lucide-undo-2"
-          title="Undo last action"
+          :title="t('mapo.repeater.undoLastAction')"
           @click="undo"
         />
 
@@ -279,8 +282,10 @@ const errorPrefix = (index) => `${props.descriptor.key}.${index}`;
           :variant="selectionMode ? 'solid' : 'ghost'"
           color="neutral"
           icon="i-lucide-check-square"
-          title="Bulk selection"
-          :label="selectionMode ? 'Exit selection' : 'Select'"
+          :title="t('mapo.repeater.bulkSelection')"
+          :label="
+  selectionMode ? t('mapo.repeater.exitSelection') : t('mapo.select')
+"
           @click="toggleSelectionMode"
         />
 
@@ -300,7 +305,7 @@ const errorPrefix = (index) => `${props.descriptor.key}.${index}`;
           :disabled="!canAdd"
           @click="addItem"
         >
-          Add
+          {{ t("mapo.add") }}
         </UButton>
       </div>
     </div>
@@ -312,11 +317,11 @@ const errorPrefix = (index) => `${props.descriptor.key}.${index}`;
         class="flex items-center gap-2 rounded border border-primary-200 bg-primary-50 px-3 py-2"
       >
         <span class="text-sm font-medium text-primary-700">
-          {{ selectionCount }} selected
+          {{ t("mapo.repeater.nSelected", { n: selectionCount }) }}
         </span>
         <div class="flex flex-1 flex-wrap items-center gap-2">
           <UButton size="xs" variant="ghost" color="neutral" @click="selectAll">
-            All
+            {{ t("mapo.repeater.all") }}
           </UButton>
           <UButton
             size="xs"
@@ -324,7 +329,7 @@ const errorPrefix = (index) => `${props.descriptor.key}.${index}`;
             color="neutral"
             @click="clearSelection"
           >
-            Clear
+            {{ t("mapo.clear") }}
           </UButton>
           <UButton
             size="xs"
@@ -333,11 +338,16 @@ const errorPrefix = (index) => `${props.descriptor.key}.${index}`;
             icon="i-lucide-copy"
             :disabled="remainingSlots() <= 0"
             :title="
-  remainingSlots() < selectionCount ? `Only ${remainingSlots()} of ${selectionCount} can be duplicated (maxItems reached)` : 'Duplicate selected'
+  remainingSlots() < selectionCount ? t('mapo.repeater.duplicateLimited', {
+    slots: remainingSlots(),
+    count: selectionCount
+  }) : t('mapo.repeater.duplicateSelected')
 "
             @click="bulkDuplicate"
           >
-            Duplicate ({{ Math.min(selectionCount, remainingSlots()) }})
+            {{ t("mapo.duplicate") }} ({{
+              Math.min(selectionCount, remainingSlots())
+            }})
           </UButton>
           <UButton
             size="xs"
@@ -346,7 +356,7 @@ const errorPrefix = (index) => `${props.descriptor.key}.${index}`;
             icon="i-lucide-arrow-up"
             @click="bulkMoveToTop"
           >
-            Move to top
+            {{ t("mapo.repeater.moveToTop") }}
           </UButton>
           <UButton
             size="xs"
@@ -356,7 +366,7 @@ const errorPrefix = (index) => `${props.descriptor.key}.${index}`;
             :disabled="!canDelete"
             @click="bulkDelete"
           >
-            Delete ({{ selectionCount }})
+            {{ t("mapo.delete") }} ({{ selectionCount }})
           </UButton>
         </div>
       </div>
@@ -439,7 +449,7 @@ const errorPrefix = (index) => `${props.descriptor.key}.${index}`;
       v-if="items.length === 0"
       class="rounded border border-dashed border-gray-300 py-8 text-center text-sm text-gray-400"
     >
-      No items. Click "Add" to start.
+      {{ t("mapo.repeater.empty") }}
     </div>
   </div>
 </template>

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

@@ -1 +1 @@
-{"version":3,"file":"MapoRepeater.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoRepeater.vue"],"names":[],"mappings":"AA+iBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAI/D,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA4hCF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"MapoRepeater.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoRepeater.vue"],"names":[],"mappings":"AAujBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAI/D,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAgjCF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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,9 +1,11 @@
 <script setup>
-import { watch, onBeforeUnmount } from "vue";
+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";
 import Underline from "@tiptap/extension-underline";
+import Image from "@tiptap/extension-image";
 const props = defineProps({
   modelValue: { type: null, required: true },
   descriptor: { type: Object, required: true },
@@ -12,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) {
@@ -61,6 +64,7 @@ const editor = useEditor({
       validate: (href) => isSafeUrl(href)
     }),
     Underline,
+    Image.configure({ inline: false, allowBase64: false }),
     ...extraExtensions
   ],
   onUpdate: ({ editor: e }) => {
@@ -83,6 +87,14 @@ watch(
   }
 );
 onBeforeUnmount(() => editor.value?.destroy());
+const imagePickerOpen = ref(false);
+const MediaManagerDialog = resolveComponent("MapoMediaManagerDialog");
+const hasMediaManager = typeof MediaManagerDialog !== "string";
+function onImageConfirm(selection) {
+  const media = Array.isArray(selection) ? selection[0] : selection;
+  if (!media || !editor.value) return;
+  editor.value.chain().focus().setImage({ src: media.file, alt: media.alt_text ?? "" }).run();
+}
 </script>
 
 <template>
@@ -194,9 +206,11 @@ onBeforeUnmount(() => editor.value?.destroy());
 
       <USeparator orientation="vertical" class="mx-1 h-5" />
 
-      <!-- Insert Image — enabled in Phase 6 when Media Manager is available -->
+      <!-- Insert Image via Media Manager (available when @mapomodule/uikit is installed) -->
       <UTooltip
-        text="Insert image (requires Media Manager — Phase 6)"
+        :text="
+  hasMediaManager ? t('mapo.wygEditor.insertImage') : t('mapo.wygEditor.requiresUikit')
+"
         :delay-open="300"
       >
         <UButton
@@ -204,12 +218,13 @@ onBeforeUnmount(() => editor.value?.destroy());
           variant="ghost"
           color="neutral"
           icon="i-lucide-image"
-          disabled
+          :disabled="readonly || disabled || !hasMediaManager"
+          @click="imagePickerOpen = true"
         />
       </UTooltip>
     </div>
 
-    <!-- Contenuto editor -->
+    <!-- Editor content -->
     <EditorContent
       :editor="editor"
       class="prose prose-sm max-w-none px-3 py-2 focus-within:outline-none"
@@ -224,4 +239,14 @@ onBeforeUnmount(() => editor.value?.destroy());
       {{ err }}
     </p>
   </div>
+
+  <!-- Image picker dialog — only rendered when MapoMediaManagerDialog is globally available -->
+  <component
+    :is="MediaManagerDialog"
+    v-if="hasMediaManager"
+    v-model="imagePickerOpen"
+    selection-mode="single"
+    mime="image/*"
+    @confirm="onImageConfirm"
+  />
 </template>

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":"AAyQA,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;AAilBF,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":"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"}

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;