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

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

@@ -0,0 +1,104 @@
+<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";
+
+const props = defineProps<{
+  modelValue: MediaItem | number | null | undefined;
+  descriptor: MediaDescriptor;
+  errors?: string[];
+  readonly?: boolean;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: MediaItem | null];
+}>();
+
+const { t } = useI18n();
+
+const dialogOpen = ref(false);
+
+// Picker dialog comes from @mapomodule/uikit, resolved at runtime.
+const { MediaDialog, available } = useMediaManager();
+
+const current = computed<MediaItem | null>(() => {
+  if (!props.modelValue) return null;
+  if (typeof props.modelValue === "object") return props.modelValue;
+  return null;
+});
+
+const mime = computed(() => props.descriptor.attrs?.mime as string | undefined);
+
+function onConfirm(selection: MediaItem | MediaItem[]) {
+  emit(
+    "update:modelValue",
+    Array.isArray(selection) ? (selection[0] ?? null) : selection,
+  );
+}
+
+function clear() {
+  emit("update:modelValue", null);
+}
+</script>
+
+<template>
+  <div class="mapo-media-field space-y-2">
+    <MapoMediaUnavailable v-if="!available" />
+
+    <template v-else>
+      <!-- Selected media preview -->
+      <div
+        v-if="current"
+        class="flex items-center gap-3 rounded-lg border border-default p-2"
+      >
+        <MapoMediaPreview :media="current" size="sm" />
+        <div class="flex-1 min-w-0">
+          <p class="truncate text-xs font-medium">
+            {{ current.title || current.file?.split("/").pop() }}
+          </p>
+          <p class="text-xs text-dimmed">
+            {{ current.mime_type }}
+          </p>
+        </div>
+        <UButton
+          v-if="!readonly && !disabled"
+          icon="i-lucide-x"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          @click="clear"
+        />
+      </div>
+
+      <!-- Trigger button -->
+      <UButton
+        v-if="!readonly && !disabled"
+        :icon="current ? 'i-lucide-refresh-cw' : 'i-lucide-image-plus'"
+        size="sm"
+        variant="soft"
+        color="neutral"
+        :block="!current"
+        @click="dialogOpen = true"
+      >
+        {{ current ? t("mapo.change") : t("mapo.mediaField.selectMedia") }}
+      </UButton>
+
+      <!-- Dialog -->
+      <component
+        :is="MediaDialog"
+        v-model="dialogOpen"
+        selection-mode="single"
+        :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/src/runtime/components/fields/MapoMediaM2mField.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import type { MediaM2mDescriptor, MediaItem } from "../../types/index.js";
+import { useMediaManager } from "../../composables/useMediaManager.js";
+
+const props = defineProps<{
+  modelValue: MediaItem[] | number[] | null | undefined;
+  descriptor: MediaM2mDescriptor;
+  errors?: string[];
+  readonly?: boolean;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: MediaItem[]];
+}>();
+
+const { t } = useI18n();
+
+const dialogOpen = ref(false);
+
+// Picker dialog comes from @mapomodule/uikit, resolved at runtime.
+const { MediaDialog, available } = useMediaManager();
+
+const current = computed<MediaItem[]>(() => {
+  if (!props.modelValue) return [];
+  return props.modelValue.filter((v): v is MediaItem => typeof v === "object");
+});
+
+const mime = computed(() => props.descriptor.attrs?.mime as string | undefined);
+
+function onConfirm(selection: MediaItem | MediaItem[]) {
+  emit("update:modelValue", Array.isArray(selection) ? selection : [selection]);
+}
+
+function removeItem(id: number) {
+  emit(
+    "update:modelValue",
+    current.value.filter((m) => m.id !== id),
+  );
+}
+
+// HTML5 drag reorder — order matters for m2m relations (legacy parity).
+const dragIndex = ref<number | null>(null);
+
+function onDragStart(index: number) {
+  dragIndex.value = index;
+}
+
+function onDragOverItem(index: number) {
+  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/src/runtime/components/fields/MapoMediaUnavailable.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+/**
+ * Placeholder rendered by the media fields when the Media Manager is not
+ * registered — i.e. `@mapomodule/form` is installed without `@mapomodule/uikit`.
+ * Better than a silently broken picker: it names the missing package.
+ */
+</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/src/runtime/components/fields/MapoRepeater.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 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 type { RepeaterDescriptor } from "../../types/index.js";
@@ -17,6 +18,7 @@ const props = defineProps<{
 const emit = defineEmits<{ "update:modelValue": [value: unknown[]] }>();
 
 const form = injectMapoForm()!;
+const { t } = useI18n();
 
 const attrs = computed(() => props.descriptor.attrs ?? {});
 
@@ -108,10 +110,8 @@ function minBound(): number {
   return attrs.value.minItems ?? 0;
 }
 
-async function askConfirm(
-  message: string,
-  title = "Confirm",
-): Promise<boolean> {
+async function askConfirm(message: string, title?: string): Promise<boolean> {
+  title ??= t("mapo.confirm");
   try {
     // Falls back to native confirm when the Pinia store is not registered.
     return await useConfirmStore().ask({ title, message });
@@ -135,8 +135,8 @@ async function deleteItem(index: number) {
   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;
   }
@@ -275,14 +275,14 @@ async function bulkDelete() {
   // Enforce minItems: would deletion drop below the lower bound?
   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();
@@ -336,7 +336,7 @@ const errorPrefix = (index: number) =>
       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
         >
@@ -344,10 +344,10 @@ const errorPrefix = (index: number) =>
 
       <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"
@@ -355,7 +355,7 @@ const errorPrefix = (index: number) =>
           variant="ghost"
           color="neutral"
           icon="i-lucide-undo-2"
-          title="Undo last action"
+          :title="t('mapo.repeater.undoLastAction')"
           @click="undo"
         />
 
@@ -365,8 +365,10 @@ const errorPrefix = (index: number) =>
           :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"
         />
 
@@ -386,7 +388,7 @@ const errorPrefix = (index: number) =>
           :disabled="!canAdd"
           @click="addItem"
         >
-          Add
+          {{ t("mapo.add") }}
         </UButton>
       </div>
     </div>
@@ -398,11 +400,11 @@ const errorPrefix = (index: number) =>
         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"
@@ -410,7 +412,7 @@ const errorPrefix = (index: number) =>
             color="neutral"
             @click="clearSelection"
           >
-            Clear
+            {{ t("mapo.clear") }}
           </UButton>
           <UButton
             size="xs"
@@ -420,12 +422,17 @@ const errorPrefix = (index: number) =>
             :disabled="remainingSlots() <= 0"
             :title="
               remainingSlots() < selectionCount
-                ? `Only ${remainingSlots()} of ${selectionCount} can be duplicated (maxItems reached)`
-                : 'Duplicate selected'
+                ? 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"
@@ -434,7 +441,7 @@ const errorPrefix = (index: number) =>
             icon="i-lucide-arrow-up"
             @click="bulkMoveToTop"
           >
-            Move to top
+            {{ t("mapo.repeater.moveToTop") }}
           </UButton>
           <UButton
             size="xs"
@@ -444,7 +451,7 @@ const errorPrefix = (index: number) =>
             :disabled="!canDelete"
             @click="bulkDelete"
           >
-            Delete ({{ selectionCount }})
+            {{ t("mapo.delete") }} ({{ selectionCount }})
           </UButton>
         </div>
       </div>
@@ -527,7 +534,7 @@ const errorPrefix = (index: number) =>
       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/src/runtime/components/fields/MapoRepeaterItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watch, watchEffect } from "vue";
+import { useI18n } from "vue-i18n";
 import type {
   AnyFieldDescriptor,
   FieldRegistry,
@@ -9,6 +10,8 @@ import { useMapoForm, injectMapoForm } from "../../composables/useMapoForm.js";
 import { useFocusMode } from "../../composables/useFocusMode.js";
 import MapoFormField from "../MapoFormField.vue";
 
+const { t } = useI18n();
+
 const props = defineProps<{
   /** Stable identity-based UID assigned by the parent repeater. */
   uid?: string;
@@ -173,7 +176,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>
@@ -246,7 +252,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" />
@@ -307,7 +313,7 @@ function enterFocusMode() {
             :max="totalItems"
             size="xs"
             class="w-14 text-center"
-            title="Position"
+            :title="t('mapo.repeater.position')"
             @change="
               $emit(
                 'move-to',
@@ -329,7 +335,7 @@ function enterFocusMode() {
           variant="ghost"
           color="neutral"
           icon="i-lucide-maximize-2"
-          title="Edit full screen"
+          :title="t('mapo.repeater.editFullScreen')"
           @click="enterFocusMode"
         />
 
@@ -339,7 +345,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
@@ -348,7 +354,7 @@ function enterFocusMode() {
           color="neutral"
           icon="i-lucide-chevron-down"
           :disabled="readonly"
-          title="Move down"
+          :title="t('mapo.repeater.moveDown')"
           @click="$emit('move-down')"
         />
 
@@ -359,7 +365,7 @@ function enterFocusMode() {
           color="neutral"
           icon="i-lucide-copy"
           :disabled="readonly"
-          title="Duplicate"
+          :title="t('mapo.duplicate')"
           @click="$emit('duplicate')"
         />
 
@@ -369,7 +375,7 @@ function enterFocusMode() {
           color="error"
           icon="i-lucide-trash-2"
           :disabled="readonly"
-          title="Delete"
+          :title="t('mapo.delete')"
           @click="$emit('delete')"
         />
 

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 import { useRequestURL } from "#app";
 import type { SeoDescriptor } from "../../types/index.js";
 
@@ -10,6 +11,8 @@ interface SeoValue {
   permalink?: string;
 }
 
+const { t } = useI18n();
+
 const props = defineProps<{
   modelValue: unknown;
   descriptor: SeoDescriptor;
@@ -58,7 +61,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"
@@ -72,14 +77,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 as string)"
         />
@@ -87,9 +94,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
@@ -97,7 +104,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 as string)"
         />
@@ -107,20 +114,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>