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

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

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-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 type { AnyExtension } 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";
 import type { EditorDescriptor } from "../../types/index.js";
 
 const props = defineProps<{
@@ -17,6 +19,8 @@ const props = defineProps<{
 
 const emit = defineEmits<{ "update:modelValue": [value: string] }>();
 
+const { t } = useI18n();
+
 const extraExtensions =
   (props.descriptor.attrs?.extensions as AnyExtension[] | undefined) ?? [];
 
@@ -85,6 +89,7 @@ const editor = useEditor({
       validate: (href: string) => isSafeUrl(href),
     }),
     Underline,
+    Image.configure({ inline: false, allowBase64: false }),
     ...extraExtensions,
   ] as AnyExtension[],
   onUpdate: ({ editor: e }) => {
@@ -112,6 +117,28 @@ watch(
 );
 
 onBeforeUnmount(() => editor.value?.destroy());
+
+// ─── Image insertion ──────────────────────────────────────────────────────
+// MapoMediaManagerDialog is globally registered by @mapomodule/uikit.
+// resolveComponent() works at runtime because it is registered before this
+// component renders. We avoid a direct import to break the form → uikit cycle.
+const imagePickerOpen = ref(false);
+const MediaManagerDialog = resolveComponent("MapoMediaManagerDialog");
+const hasMediaManager = typeof MediaManagerDialog !== "string";
+
+function onImageConfirm(
+  selection:
+    | { file: string; alt_text?: string }
+    | Array<{ file: string; alt_text?: string }>,
+) {
+  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>
@@ -223,9 +250,13 @@ 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
@@ -233,12 +264,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"
@@ -253,4 +285,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/src/runtime/composables/useMapoForm.ts

@@ -19,6 +19,7 @@ import type { AnyFieldDescriptor, FieldRegistry } from "../types/index.js";
 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";
 
 /** Options accepted by `useMapoForm()`. */
@@ -121,6 +122,7 @@ export function useMapoForm<T extends object>(options: UseMapoFormOptions<T>) {
 
   const currentLang = useCurrentLang(currentLangProp);
   const snack = useSnackStore();
+  const t = useMapoT();
   const authStore = useAuthStore();
   const backup = ref(safeClone(model.value)) as Ref<T>;
   const clientErrors = ref<Record<string, string>>({});
@@ -318,7 +320,7 @@ export function useMapoForm<T extends object>(options: UseMapoFormOptions<T>) {
   ): string | null {
     if (!descriptor.required) return null;
     if (val === null || val === undefined || val === "")
-      return "This field is required.";
+      return t("mapo.form.required");
     return null;
   }
 
@@ -379,7 +381,7 @@ export function useMapoForm<T extends object>(options: UseMapoFormOptions<T>) {
     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/src/runtime/composables/useMediaManager.ts

@@ -0,0 +1,21 @@
+import { resolveComponent } from "vue";
+
+/**
+ * Resolves the Media Manager picker dialog at runtime.
+ *
+ * The media field types ship with `@mapomodule/form`, but the Media Manager
+ * itself lives in `@mapomodule/uikit`. Resolving the dialog by name instead of
+ * importing it keeps `form` free of a static dependency on `uikit` (which
+ * depends on `form`, so a static import would be a cycle) and lets `form` stay
+ * usable standalone — the fields then render an explicit notice instead of a
+ * broken picker.
+ *
+ * Must be called from `setup()`.
+ */
+export function useMediaManager() {
+  const MediaDialog = resolveComponent("MapoMediaManagerDialog");
+  // resolveComponent() returns the name unchanged when nothing is registered.
+  const available = typeof MediaDialog !== "string";
+
+  return { MediaDialog, available };
+}

package/src/runtime/composables/useUnsavedChangesGuard.ts

@@ -1,5 +1,6 @@
 import { onBeforeUnmount, type Ref } from "vue";
-import { onBeforeRouteLeave } from "vue-router";
+import { onBeforeRouteLeave } from "#app";
+import { useMapoT } from "@mapomodule/i18n/runtime/composables/useMapoT";
 
 /** Optional configuration for the unsaved-changes navigation guard. */
 export interface UnsavedChangesGuardOptions {
@@ -27,8 +28,7 @@ export function useUnsavedChangesGuard(
   isDirty: Ref<boolean>,
   options: UnsavedChangesGuardOptions = {},
 ) {
-  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 = (): boolean => {

package/src/runtime/registry/defaults.ts

@@ -31,7 +31,15 @@ export const defaultRegistry: FieldRegistry = {
     editor: () => import("../components/fields/MapoWygEditor.vue"),
     map: () => import("../components/fields/MapoMapField.vue"),
     repeater: () => import("../components/fields/MapoRepeater.vue"),
-    // media, media-m2m, enhanced-media: added in Phase 6
+
+    // ─── Media pickers ────────────────────────────────────────────────────────
+    // The fields live here with every other field type; the Media Manager they
+    // drive ships with @mapomodule/uikit and is resolved at runtime
+    // (see useMediaManager). Without uikit they render an explicit notice.
+    media: () => import("../components/fields/MapoMediaField.vue"),
+    "media-m2m": () => import("../components/fields/MapoMediaM2mField.vue"),
+    "enhanced-media": () =>
+      import("../components/fields/MapoEnhancedMediaField.vue"),
   },
 
   attrs: {

package/src/runtime/types/descriptor.ts

@@ -344,15 +344,28 @@ export interface RepeaterDescriptor<
   };
 }
 
-/** Descriptor for media/file manager fields. */
+/** Descriptor for a single-media picker field (`type: 'media'`). */
 export interface MediaDescriptor<
   T = Record<string, unknown>,
 > extends FieldBase<T> {
-  type:
-    | `${KnownFieldType.Media}`
-    | `${KnownFieldType.MediaM2m}`
-    | `${KnownFieldType.EnhancedMedia}`;
-  attrs?: { mime?: string; multiple?: boolean };
+  type: `${KnownFieldType.Media}`;
+  attrs?: { mime?: string };
+}
+
+/** Descriptor for a multi-media picker field (`type: 'media-m2m'`). */
+export interface MediaM2mDescriptor<
+  T = Record<string, unknown>,
+> extends FieldBase<T> {
+  type: `${KnownFieldType.MediaM2m}`;
+  attrs?: { mime?: string; maxItems?: number };
+}
+
+/** Descriptor for a media picker with inline alt/caption metadata (`type: 'enhanced-media'`). */
+export interface EnhancedMediaDescriptor<
+  T = Record<string, unknown>,
+> extends FieldBase<T> {
+  type: `${KnownFieldType.EnhancedMedia}`;
+  attrs?: { mime?: string };
 }
 
 /**
@@ -395,7 +408,9 @@ export type FieldDescriptor<T = Record<string, unknown>> =
   | SeoDescriptor<T>
   | MapDescriptor<T>
   | RepeaterDescriptor<T>
-  | MediaDescriptor<T>;
+  | MediaDescriptor<T>
+  | MediaM2mDescriptor<T>
+  | EnhancedMediaDescriptor<T>;
 
 /**
  * {@link FieldDescriptor} plus the {@link CustomDescriptor} escape hatch.

package/src/runtime/types/index.ts

@@ -22,9 +22,13 @@ export type {
   MapDescriptor,
   RepeaterDescriptor,
   MediaDescriptor,
+  MediaM2mDescriptor,
+  EnhancedMediaDescriptor,
   CustomDescriptor,
 } from "./descriptor.js";
 
+export type { MediaLink, MediaItem, EnhancedMediaValue } from "./media.js";
+
 export type {
   FieldComponentEntry,
   FieldRegistry,

package/src/runtime/types/media.ts

@@ -0,0 +1,44 @@
+/**
+ * Media **value** types — the shape that lands in the form model for the
+ * `media`, `media-m2m`, and `enhanced-media` field types.
+ *
+ * These live in `@mapomodule/form` (next to their descriptors) because they are
+ * a form contract, not a Media Manager implementation detail. `@mapomodule/uikit`
+ * re-exports them from `runtime/types/media.ts` alongside the store/adapter types
+ * so the Media Manager keeps a single import surface.
+ */
+
+/** A model instance referencing a media (Camomilla returns these as `links`). */
+export interface MediaLink {
+  model: string;
+  id: number;
+  name: string;
+}
+
+export interface MediaItem {
+  id: number;
+  file: string;
+  mime_type: string;
+  title: string;
+  alt_text: string;
+  description: string;
+  size: number;
+  created: string;
+  modified: string;
+  folder?: number | null;
+  name?: string;
+  /** Model instances that reference this media — shown in the editor info panel. */
+  links?: MediaLink[];
+  translations?: Record<
+    string,
+    { title?: string; alt_text?: string; description?: string }
+  >;
+}
+
+/** Value of an `enhanced-media` field: a media plus inline caption metadata. */
+export interface EnhancedMediaValue {
+  media: MediaItem | null;
+  alt?: string;
+  caption?: string;
+  [key: string]: unknown;
+}