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

package/README.md

@@ -5,7 +5,7 @@ Form engine for Mapo v2 — descriptor-driven, typesafe, headless-ready admin fo
 ## Features
 
 - **Descriptor-driven**: define fields as `FieldDescriptor[]` — layout, validation, i18n in one object
-- **All field types built-in**: text, select, date/time, FK/M2M autocomplete, WYSIWYG editor, SEO preview, map, repeater
+- **All field types built-in**: text, select, date/time, FK/M2M autocomplete, WYSIWYG editor, SEO preview, map, repeater, media pickers
 - **Headless composable**: `useMapoForm()` for fully custom layouts; `<MapoForm>` for the default shell
 - **Registry auto-injection**: `<MapoForm>` and `<MapoDetail>` resolve `$mapoFormRegistry` automatically — no boilerplate
 - **Typed extension API**: `defineFormField(type, entry, opts)` to register custom fields with collision detection
@@ -16,6 +16,7 @@ Form engine for Mapo v2 — descriptor-driven, typesafe, headless-ready admin fo
 - **Consistent repeater items**: `MapoRepeater` drives each item through `useMapoForm`, so nested-path keys, `translatable`, accessors, `descriptor.is` overrides and **client validation** behave identically inside a repeater
 - **Draft persistence**: `draftKey` option on `useMapoForm()` auto-saves to localStorage every 2 s; `checkDraft()` / `draftBanner` offer restore/discard; clears on successful `submit()`
 - **Fail-soft**: unknown field types render a non-destructive placeholder, never crash the form
+- **Media pickers**: `media`, `media-m2m` and `enhanced-media` field types are built in; they drive the Media Manager from [`@mapomodule/uikit`](../uikit/README.md), resolved at runtime — install it to enable them
 
 ## Install
 

package/dist/index.d.mts

@@ -5,5 +5,5 @@ export { FocusTarget, useFocusMode } from '../dist/runtime/composables/useFocusM
 export { UnsavedChangesGuardOptions, useUnsavedChangesGuard } from '../dist/runtime/composables/useUnsavedChangesGuard.js';
 export { greaterThan, isEmpty, isNoneOf, isNotEmpty, isOneOf, lessThan, matches, matchesField, when, whenAny, whenNot } from '../dist/runtime/composables/useProgressiveDisclosure.js';
 export { FieldGroupDescriptor, flattenFieldGroups } from '../dist/runtime/utils/flattenFieldGroups.js';
-export { AnyFieldDescriptor, BooleanDescriptor, ColorDescriptor, CustomDescriptor, DateDescriptor, EditorDescriptor, FieldAccessor, FieldComponentEntry, FieldDescriptor, FieldRegistry, FieldType, FileDescriptor, FksDescriptor, KnownFieldType, MapDescriptor, MediaDescriptor, NumberDescriptor, PartialFieldRegistry, RepeaterDescriptor, SelectDescriptor, SeoDescriptor, TextDescriptor } from '../dist/runtime/types/index.js';
+export { AnyFieldDescriptor, BooleanDescriptor, ColorDescriptor, CustomDescriptor, DateDescriptor, EditorDescriptor, EnhancedMediaDescriptor, EnhancedMediaValue, FieldAccessor, FieldComponentEntry, FieldDescriptor, FieldRegistry, FieldType, FileDescriptor, FksDescriptor, KnownFieldType, MapDescriptor, MediaDescriptor, MediaItem, MediaLink, MediaM2mDescriptor, NumberDescriptor, PartialFieldRegistry, RepeaterDescriptor, SelectDescriptor, SeoDescriptor, TextDescriptor } from '../dist/runtime/types/index.js';
 import '@nuxt/schema';

package/dist/index.d.ts

@@ -11,5 +11,5 @@ export { when, whenAny, whenNot, matchesField, isOneOf, isNoneOf, isNotEmpty, is
 export { flattenFieldGroups } from "./runtime/utils/flattenFieldGroups.js";
 export type { FieldGroupDescriptor } from "./runtime/utils/flattenFieldGroups.js";
 export { KnownFieldType } from "./runtime/types/index.js";
-export type { FieldType, FieldAccessor, FieldDescriptor, AnyFieldDescriptor, TextDescriptor, NumberDescriptor, BooleanDescriptor, SelectDescriptor, FksDescriptor, DateDescriptor, ColorDescriptor, FileDescriptor, EditorDescriptor, SeoDescriptor, MapDescriptor, RepeaterDescriptor, MediaDescriptor, CustomDescriptor, FieldComponentEntry, FieldRegistry, PartialFieldRegistry, } from "./runtime/types/index.js";
+export type { FieldType, FieldAccessor, FieldDescriptor, AnyFieldDescriptor, TextDescriptor, NumberDescriptor, BooleanDescriptor, SelectDescriptor, FksDescriptor, DateDescriptor, ColorDescriptor, FileDescriptor, EditorDescriptor, SeoDescriptor, MapDescriptor, RepeaterDescriptor, MediaDescriptor, MediaM2mDescriptor, EnhancedMediaDescriptor, CustomDescriptor, MediaLink, MediaItem, EnhancedMediaValue, FieldComponentEntry, FieldRegistry, PartialFieldRegistry, } from "./runtime/types/index.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,YAAY,EAAE,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AAC3F,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,YAAY,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,YAAY,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,iDAAiD,CAAC;AACzF,YAAY,EAAE,0BAA0B,EAAE,MAAM,iDAAiD,CAAC;AAElG,OAAO,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,UAAU,EACV,OAAO,EACP,WAAW,EACX,QAAQ,EACR,OAAO,GACR,MAAM,mDAAmD,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,YAAY,EACV,SAAS,EACT,aAAa,EACb,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,EACb,oBAAoB,GACrB,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,YAAY,EAAE,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AAC3F,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,YAAY,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,YAAY,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,iDAAiD,CAAC;AACzF,YAAY,EAAE,0BAA0B,EAAE,MAAM,iDAAiD,CAAC;AAElG,OAAO,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,UAAU,EACV,OAAO,EACP,WAAW,EACX,QAAQ,EACR,OAAO,GACR,MAAM,mDAAmD,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,YAAY,EACV,SAAS,EACT,aAAa,EACb,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,kBAAkB,EAClB,eAAe,EACf,kBAAkB,EAClB,uBAAuB,EACvB,gBAAgB,EAChB,SAAS,EACT,SAAS,EACT,kBAAkB,EAClB,mBAAmB,EACnB,aAAa,EACb,oBAAoB,GACrB,MAAM,0BAA0B,CAAC"}

package/dist/module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../src/module.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAErE,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,MAAM,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;;AAED,wBA4MyC"}
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../src/module.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAErE,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,MAAM,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;;AAED,wBAkOyC"}

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@mapomodule/form",
   "configKey": "mapoForm",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.6",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addPlugin, addTypeTemplate, extendPages, addComponent, addImports } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, hasNuxtModule, installModule, addPlugin, addTypeTemplate, extendPages, addComponent, addImports } from '@nuxt/kit';
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -16,6 +16,9 @@ const module$1 = defineNuxtModule({
     (nuxt.options.imports.transform.include ??= []).push(
       /@mapomodule[\\/]form[\\/]/
     );
+    if (!hasNuxtModule("@mapomodule/i18n")) {
+      await installModule(await resolver.resolvePath("@mapomodule/i18n"));
+    }
     nuxt.options.runtimeConfig.public.mapoForm = {
       groups: { expanded: options.groups?.expanded ?? true },
       debounce: options.debounce ?? 300,
@@ -74,6 +77,18 @@ export {};
         filePath: resolver.resolve(`./runtime/components/${name}.vue`)
       });
     }
+    const mediaFieldComponents = [
+      "MapoMediaField",
+      "MapoMediaM2mField",
+      "MapoEnhancedMediaField",
+      "MapoMediaUnavailable"
+    ];
+    for (const name of mediaFieldComponents) {
+      addComponent({
+        name,
+        filePath: resolver.resolve(`./runtime/components/fields/${name}.vue`)
+      });
+    }
     addImports([
       {
         name: "useMapoForm",

package/dist/runtime/components/MapoFocusPortal.vue

@@ -1,8 +1,10 @@
 <script setup>
 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);
 const canUseDocument = typeof document !== "undefined";
@@ -66,7 +68,7 @@ function onUpdate(val) {
             variant="ghost"
             color="neutral"
             icon="i-lucide-x"
-            label="Close"
+            :label="t('mapo.close')"
             size="sm"
             @click="exit"
           />

package/dist/runtime/components/MapoFocusPortal.vue.d.ts.map

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

package/dist/runtime/components/MapoFormTabs.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
 import { injectMapoForm } from "../composables/useMapoForm.js";
 import MapoFormGroup from "./MapoFormGroup.vue";
 import MapoFormFlatSection from "./MapoFormFlatSection.vue";
+const { t } = useI18n();
 const props = defineProps({
   tabs: { type: Array, required: true }
 });
@@ -21,7 +23,7 @@ const form = injectMapoForm();
 const tabsWithErrors = computed(() => {
   const errorKeys = new Set(Object.keys(form.errors.value));
   return new Set(
-    props.tabs.filter((tab) => tabHasErrors(tab, errorKeys)).map((t) => t.name)
+    props.tabs.filter((tab) => tabHasErrors(tab, errorKeys)).map((t2) => t2.name)
   );
 });
 </script>
@@ -46,7 +48,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/dist/runtime/components/MapoFormTabs.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapoFormTabs.vue.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/MapoFormTabs.vue"],"names":[],"mappings":"AAwHA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAKnD,KAAK,WAAW,GAAG;IAAE,IAAI,EAAE,QAAQ,EAAE,CAAA;CAAE,CAAC;AAGxC,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAqO3C,QAAA,MAAM,UAAU,kSAEd,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":"MapoFormTabs.vue.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/MapoFormTabs.vue"],"names":[],"mappings":"AA4HA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAOnD,KAAK,WAAW,GAAG;IAAE,IAAI,EAAE,QAAQ,EAAE,CAAA;CAAE,CAAC;AAGxC,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAsO3C,QAAA,MAAM,UAAU,kSAEd,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/MapoDateField.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
 import { parseDate, CalendarDate } from "@internationalized/date";
 const props = defineProps({
   modelValue: { type: null, required: true },
@@ -9,6 +10,7 @@ const props = defineProps({
   disabled: { type: Boolean, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
+const { t } = useI18n();
 const open = ref(false);
 const calendarValue = computed(() => {
   const v = props.modelValue;
@@ -21,7 +23,7 @@ const calendarValue = computed(() => {
 });
 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}`;
 });
 const attrs = computed(() => props.descriptor.attrs ?? {});

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

@@ -1 +1 @@
-{"version":3,"file":"MapoDateField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoDateField.vue"],"names":[],"mappings":"AAuGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,4EAA4E;AAC5E,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,cAAc,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAwMF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"MapoDateField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoDateField.vue"],"names":[],"mappings":"AA0GA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,4EAA4E;AAC5E,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,cAAc,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAyMF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -6,6 +6,7 @@ import {
   today,
   getLocalTimeZone
 } from "@internationalized/date";
+import { useI18n } from "vue-i18n";
 const props = defineProps({
   modelValue: { type: null, required: true },
   descriptor: { type: Object, required: true },
@@ -14,6 +15,7 @@ const props = defineProps({
   disabled: { type: Boolean, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
+const { t } = useI18n();
 const open = ref(false);
 const tzMode = computed(() => props.descriptor.attrs?.tz ?? "naive");
 const calendarValue = computed(() => {
@@ -48,7 +50,7 @@ function emitFromCalendar(v) {
 }
 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}`;
@@ -72,8 +74,8 @@ function onTimeChange(part, val) {
     Math.min(part === "hour" ? 23 : 59, parseInt(val) || 0)
   );
   const base = calendarValue.value ?? (() => {
-    const t = today(getLocalTimeZone());
-    return new CalendarDateTime(t.year, t.month, t.day, 0, 0);
+    const t2 = today(getLocalTimeZone());
+    return new CalendarDateTime(t2.year, t2.month, t2.day, 0, 0);
   })();
   const merged = part === "hour" ? new CalendarDateTime(base.year, base.month, base.day, n, base.minute) : new CalendarDateTime(base.year, base.month, base.day, base.hour, n);
   emitFromCalendar(merged);

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

@@ -1 +1 @@
-{"version":3,"file":"MapoDateTimeField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoDateTimeField.vue"],"names":[],"mappings":"AA0MA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,0EAA0E;AAC1E,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,cAAc,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA+VF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"MapoDateTimeField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoDateTimeField.vue"],"names":[],"mappings":"AA6MA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,0EAA0E;AAC1E,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,cAAc,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAgWF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -0,0 +1,130 @@
+<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(
+  () => props.modelValue?.media ?? null
+);
+const altValue = computed({
+  get: () => props.modelValue?.alt ?? "",
+  set: (v) => emit("update:modelValue", {
+    ...props.modelValue ?? { media: null },
+    alt: v
+  })
+});
+const captionValue = computed({
+  get: () => props.modelValue?.caption ?? "",
+  set: (v) => emit("update:modelValue", {
+    ...props.modelValue ?? { media: null },
+    caption: v
+  })
+});
+const mime = computed(() => props.descriptor.attrs?.mime);
+function onConfirm(selection) {
+  const media = Array.isArray(selection) ? selection[0] ?? null : selection;
+  emit("update:modelValue", {
+    ...props.modelValue ?? {},
+    media,
+    alt: props.modelValue?.alt ?? media?.alt_text ?? "",
+    caption: props.modelValue?.caption ?? ""
+  });
+}
+function clear() {
+  emit("update:modelValue", null);
+}
+</script>
+
+<template>
+  <div class="mapo-enhanced-media-field space-y-3">
+    <MapoMediaUnavailable v-if="!available" />
+
+    <template v-else>
+      <div class="flex gap-3">
+        <!-- Preview -->
+        <div class="shrink-0">
+          <div
+            class="flex size-24 cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-dashed transition-colors"
+            :class="
+  current ? 'border-default' : 'border-accented hover:border-primary'
+"
+            @click="!readonly && !disabled && (dialogOpen = true)"
+          >
+            <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]">{{ t("mapo.select") }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Metadata fields -->
+        <div class="flex-1 space-y-2">
+          <div v-if="current" class="flex items-start justify-between gap-2">
+            <p class="truncate text-xs text-muted">
+              {{ current.title || current.file?.split("/").pop() }}
+            </p>
+            <div class="flex gap-1">
+              <UButton
+                v-if="!readonly && !disabled"
+                icon="i-lucide-refresh-cw"
+                size="xs"
+                variant="ghost"
+                color="neutral"
+                :title="t('mapo.change')"
+                @click="dialogOpen = true"
+              />
+              <UButton
+                v-if="!readonly && !disabled"
+                icon="i-lucide-x"
+                size="xs"
+                variant="ghost"
+                color="neutral"
+                :title="t('mapo.remove')"
+                @click="clear"
+              />
+            </div>
+          </div>
+
+          <UInput
+            v-model="altValue"
+            size="sm"
+            :placeholder="t('mapo.enhancedMediaField.altText')"
+            :disabled="readonly || disabled || !current"
+          />
+          <UInput
+            v-model="captionValue"
+            size="sm"
+            :placeholder="t('mapo.enhancedMediaField.caption')"
+            :disabled="readonly || disabled || !current"
+          />
+        </div>
+      </div>
+
+      <!-- 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/dist/runtime/components/fields/MapoEnhancedMediaField.vue.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MapoEnhancedMediaField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoEnhancedMediaField.vue"],"names":[],"mappings":"AA8JA,OAAO,KAAK,EACV,uBAAuB,EACvB,kBAAkB,EAEnB,MAAM,sBAAsB,CAAC;AAG9B,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,CAAC;IAClD,UAAU,EAAE,uBAAuB,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA+UF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
 const props = defineProps({
   modelValue: { type: null, required: true },
   descriptor: { type: Object, required: true },
@@ -8,6 +9,7 @@ const props = defineProps({
   disabled: { type: Boolean, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
+const { t } = useI18n();
 const inputRef = ref(null);
 const currentFileName = computed(() => {
   if (props.modelValue instanceof File) return props.modelValue.name;
@@ -69,7 +71,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/dist/runtime/components/fields/MapoFileField.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapoFileField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoFileField.vue"],"names":[],"mappings":"AA8GA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,cAAc,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA2MF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"MapoFileField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoFileField.vue"],"names":[],"mappings":"AAiHA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,cAAc,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA6MF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, computed, watch, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
 import { useNuxtApp } from "#app";
 import { debounce } from "@mapomodule/utils";
 const props = defineProps({
@@ -10,6 +11,7 @@ const props = defineProps({
   disabled: { type: Boolean, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
+const { t } = useI18n();
 const attrs = computed(() => props.descriptor.attrs);
 const isMultiple = computed(
   () => props.descriptor.type === "m2m" || !!attrs.value.multiple
@@ -43,7 +45,7 @@ const internalValue = computed({
   set: (val) => emit("update:modelValue", val)
 });
 const placeholder = computed(
-  () => isMultiple.value ? "Search and select..." : "Search..."
+  () => isMultiple.value ? t("mapo.fksField.searchSelect") : t("mapo.search")
 );
 function getLabel(item) {
   if (item !== null && item !== void 0 && typeof item !== "object") {
@@ -111,7 +113,9 @@ function getItemKey(item) {
     <!-- 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/dist/runtime/components/fields/MapoFksField.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapoFksField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoFksField.vue"],"names":[],"mappings":"AA6JA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,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;AA4PF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"MapoFksField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoFksField.vue"],"names":[],"mappings":"AAmKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,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;AAiQF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1,8 +1,10 @@
 <script setup>
 import { ref, computed, defineAsyncComponent } from "vue";
+import { useI18n } from "vue-i18n";
 const LeafletMap = defineAsyncComponent(
   () => import("./MapoMapFieldClient.vue")
 );
+const { t } = useI18n();
 const props = defineProps({
   modelValue: { type: null, required: true },
   descriptor: { type: Object, required: true },
@@ -43,7 +45,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"
@@ -51,7 +53,7 @@ function clear() {
       />
       <UInput
         v-model="lngInput"
-        placeholder="Longitude"
+        :placeholder="t('mapo.longitude')"
         class="flex-1"
         :readonly="readonly"
         :disabled="disabled"

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

@@ -1 +1 @@
-{"version":3,"file":"MapoMapField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoMapField.vue"],"names":[],"mappings":"AAyHA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAO1D,sDAAsD;AACtD,UAAU,MAAM;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,8EAA8E;AAC9E,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;AAoOF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"MapoMapField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoMapField.vue"],"names":[],"mappings":"AA6HA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAS1D,sDAAsD;AACtD,UAAU,MAAM;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,8EAA8E;AAC9E,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;AAqOF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -0,0 +1,91 @@
+<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 null;
+  if (typeof props.modelValue === "object") return props.modelValue;
+  return null;
+});
+const mime = computed(() => props.descriptor.attrs?.mime);
+function onConfirm(selection) {
+  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/dist/runtime/components/fields/MapoMediaField.vue.d.ts

@@ -0,0 +1,16 @@
+import type { MediaDescriptor, MediaItem } from "../../types/index.js";
+type __VLS_Props = {
+    modelValue: MediaItem | number | null | undefined;
+    descriptor: MediaDescriptor;
+    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 | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: MediaItem | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=MapoMediaField.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MapoMediaField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoMediaField.vue"],"names":[],"mappings":"AA6GA,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGvE,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAClD,UAAU,EAAE,eAAe,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAgOF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}