@mapomodule/form 2.0.0-beta.1 → 2.0.0-beta.10

package/dist/runtime/utils/flattenFieldGroups.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flattenFieldGroups.d.ts","sourceRoot":"","sources":["../../../src/runtime/utils/flattenFieldGroups.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,WAAW,oBAAoB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC/D,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,qFAAqF;IACrF,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB,yFAAyF;IACzF,MAAM,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC;CAChE;AAWD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC5D,KAAK,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC,EAC7D,eAAe,CAAC,EAAE,MAAM,EACxB,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAChC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAsBzB"}

package/dist/runtime/utils/flattenFieldGroups.js

@@ -0,0 +1,24 @@
+function isGroupDescriptor(item) {
+  return "fields" in item && Array.isArray(item.fields);
+}
+export function flattenFieldGroups(items, _inheritedGroup, _inheritedTab) {
+  const result = [];
+  for (const item of items) {
+    if (isGroupDescriptor(item)) {
+      const group = item.group ?? _inheritedGroup;
+      const tab = item.tab ?? _inheritedTab;
+      result.push(...flattenFieldGroups(item.fields, group, tab));
+    } else {
+      const field = item;
+      const merged = { ...field };
+      if (_inheritedGroup && !merged.group) {
+        Object.assign(merged, { group: _inheritedGroup });
+      }
+      if (_inheritedTab && !merged.tab) {
+        Object.assign(merged, { tab: _inheritedTab });
+      }
+      result.push(merged);
+    }
+  }
+  return result;
+}

package/dist/types.d.mts

@@ -1,13 +1,9 @@
-import type { ModuleHooks, ModuleRuntimeHooks, ModuleRuntimeConfig, ModulePublicRuntimeConfig } from './module.mjs'
+import type { NuxtModule } from '@nuxt/schema'
 
-declare module '#app' {
-  interface RuntimeNuxtHooks extends ModuleRuntimeHooks {}
-}
+import type { default as Module } from './module.mjs'
 
-declare module '@nuxt/schema' {
-  interface NuxtHooks extends ModuleHooks {}
-  interface RuntimeConfig extends ModuleRuntimeConfig {}
-  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}
-}
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
 
-export * from "./module.mjs"
+export { default } from './module.mjs'
+
+export { type MapoFormOptions } from './module.mjs'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapomodule/form",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.10",
   "description": "Mapo declarative typed form engine and field components",
   "type": "module",
   "license": "MIT",
@@ -40,7 +40,6 @@
   "scripts": {
     "build": "nuxt-module-build build && vue-tsc -p tsconfig.build-types.json && node ../../../scripts/clean-empty-vue-dts.mjs dist",
     "dev": "nuxt-module-build build --stub --watch",
-    "prepare": "nuxt-module-build build --stub",
     "dev:prepare": "nuxt-module-build build --stub",
     "typecheck": "vue-tsc --noEmit",
     "lint": "eslint src",
@@ -48,14 +47,17 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.7.0",
-    "@mapomodule/store": "2.0.0-beta.1",
-    "@mapomodule/utils": "2.0.0-beta.1",
+    "@mapomodule/i18n": "2.0.0-beta.2",
+    "@mapomodule/store": "2.0.0-beta.6",
+    "@mapomodule/utils": "2.0.0-beta.5",
+    "@tiptap/extension-image": "^2.11.5",
     "@tiptap/extension-link": "^2.11.5",
     "@tiptap/extension-underline": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
     "@tiptap/vue-3": "^2.11.5",
     "leaflet": "^1.9.4",
-    "vue-draggable-plus": "^0.6.0"
+    "vue-draggable-plus": "^0.6.0",
+    "vue-i18n": "^11.4.0"
   },
   "optionalDependencies": {
     "@types/leaflet": "^1.9.18"
@@ -68,10 +70,10 @@
     "@nuxt/kit": "4.4.2",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "4.4.2",
-    "nuxt": "^4.4.2",
+    "nuxt": "^4.5.1",
     "vitest": "^3.2.0",
-    "vue": "^3.5.32",
-    "vue-router": "^5.0.4",
+    "vue": "^3.5.40",
+    "vue-router": "^5.2.0",
     "vue-tsc": "^3.3.4",
     "zod": "^3.23.8"
   }

package/src/__tests__/article.schema.json

@@ -0,0 +1,193 @@
+{
+  "type": "object",
+  "properties": {
+    "indexable": {
+      "type": "boolean",
+      "translatable": true,
+      "title": "Indexable"
+    },
+    "ordering": {
+      "type": "integer",
+      "maximum": 9223372036854775807,
+      "format": "int64",
+      "minimum": 0,
+      "title": "Ordering"
+    },
+    "is_public": { "type": "boolean", "readOnly": true, "title": "Is public" },
+    "meta": { "type": "object", "title": "Meta" },
+    "routerlink": { "type": "string", "readOnly": true, "title": "Routerlink" },
+    "og_url": {
+      "type": "string",
+      "nullable": true,
+      "maxLength": 200,
+      "translatable": true,
+      "title": "Og url"
+    },
+    "tags": {
+      "type": "relation",
+      "model": "camomilla.Tag",
+      "multiple": true,
+      "endpoint": "/api/camomilla/tags/",
+      "title": "Tags"
+    },
+    "published_at": {
+      "type": "string",
+      "format": "date-time",
+      "nullable": true,
+      "translatable": true,
+      "title": "Published at"
+    },
+    "keywords": {
+      "type": "string",
+      "nullable": true,
+      "maxLength": 200,
+      "translatable": true,
+      "title": "Keywords"
+    },
+    "breadcrumbs_title": {
+      "type": "string",
+      "nullable": true,
+      "maxLength": 128,
+      "translatable": true,
+      "title": "Breadcrumbs title"
+    },
+    "content": {
+      "type": "string",
+      "translatable": true,
+      "title": "Content",
+      "format": "textarea"
+    },
+    "identifier": {
+      "type": "string",
+      "nullable": true,
+      "maxLength": 200,
+      "title": "Identifier"
+    },
+    "template": {
+      "type": "string",
+      "nullable": true,
+      "maxLength": 500,
+      "title": "Template"
+    },
+    "description": {
+      "type": "string",
+      "nullable": true,
+      "translatable": true,
+      "title": "Description",
+      "format": "textarea"
+    },
+    "id": { "type": "integer", "readOnly": true, "title": "ID" },
+    "og_title": {
+      "type": "string",
+      "nullable": true,
+      "maxLength": 200,
+      "translatable": true,
+      "title": "Og title"
+    },
+    "canonical": {
+      "type": "string",
+      "nullable": true,
+      "maxLength": 200,
+      "translatable": true,
+      "title": "Canonical"
+    },
+    "author": {
+      "type": "relation",
+      "model": "auth.User",
+      "multiple": false,
+      "endpoint": "/api/camomilla/users/",
+      "nullable": true,
+      "title": "Author"
+    },
+    "og_image": {
+      "type": "relation",
+      "model": "camomilla.Media",
+      "multiple": false,
+      "endpoint": "/api/camomilla/media/",
+      "nullable": true,
+      "title": "Og image"
+    },
+    "parent_page": {
+      "type": "relation",
+      "model": "camomilla.Article",
+      "multiple": false,
+      "endpoint": "/api/camomilla/articles/",
+      "nullable": true,
+      "title": "Parent page"
+    },
+    "highlight_image": {
+      "type": "relation",
+      "model": "camomilla.Media",
+      "multiple": false,
+      "endpoint": "/api/camomilla/media/",
+      "nullable": true,
+      "title": "Highlight image"
+    },
+    "template_file": {
+      "type": "string",
+      "readOnly": true,
+      "title": "Template file"
+    },
+    "date_updated_at": {
+      "type": "string",
+      "format": "date-time",
+      "readOnly": true,
+      "title": "Date updated at"
+    },
+    "breadcrumbs": {
+      "type": "string",
+      "readOnly": true,
+      "title": "Breadcrumbs"
+    },
+    "og_description": {
+      "type": "string",
+      "nullable": true,
+      "translatable": true,
+      "title": "Og description",
+      "format": "textarea"
+    },
+    "template_data": {
+      "type": "object",
+      "translatable": true,
+      "title": "Template data"
+    },
+    "date_created": {
+      "type": "string",
+      "format": "date-time",
+      "readOnly": true,
+      "title": "Date created"
+    },
+    "autopermalink": {
+      "type": "boolean",
+      "translatable": true,
+      "title": "Autopermalink"
+    },
+    "title": {
+      "type": "string",
+      "nullable": true,
+      "maxLength": 200,
+      "translatable": true,
+      "title": "Title"
+    },
+    "permalink": {
+      "type": "string",
+      "translatable": true,
+      "title": "Permalink"
+    },
+    "og_type": {
+      "type": "string",
+      "nullable": true,
+      "maxLength": 200,
+      "translatable": true,
+      "title": "Og type"
+    },
+    "status": { "type": "string", "readOnly": true, "title": "Status" },
+    "deleted_at": {
+      "type": "string",
+      "format": "date-time",
+      "readOnly": true,
+      "nullable": true,
+      "title": "Deleted at"
+    }
+  }
+}

package/src/__tests__/camomillaRoundTrip.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it } from "vitest";
+
+import type { AnyFieldDescriptor } from "../runtime/types/index.js";
+import { useFormFromSchema } from "../runtime/composables/useFormFromSchema";
+import articleSchema from "./article.schema.json";
+
+// Captured from camomilla: FormAutoSchema().map_serializer(ArticleSerializer()).
+// This is the contract between the two repos — if camomilla changes the shape,
+// this fails here rather than as an empty form in someone's browser.
+describe("camomilla OPTIONS schema -> mapo descriptors", () => {
+  const fields = useFormFromSchema(articleSchema as never);
+  const byKey = Object.fromEntries(fields.map((f) => [f.key, f]));
+  // `attrs` is not on every member of the AnyFieldDescriptor union.
+  const attrsOf = (f: AnyFieldDescriptor | undefined) =>
+    (f as { attrs?: Record<string, unknown> } | undefined)?.attrs;
+
+  it("produces a descriptor per field, not an empty array", () => {
+    expect(fields.length).toBeGreaterThan(20);
+  });
+
+  it("maps m2m relations with a usable endpoint", () => {
+    expect(byKey.tags.type).toBe("m2m");
+    expect(attrsOf(byKey.tags)?.endpoint).toBe("/api/camomilla/tags/");
+    expect(attrsOf(byKey.tags)?.multiple).toBe(true);
+  });
+
+  it("maps fk relations with a usable endpoint", () => {
+    expect(byKey.author.type).toBe("fks");
+    expect(attrsOf(byKey.author)?.endpoint).toBe("/api/camomilla/users/");
+  });
+
+  it("does not leave any relation with an empty endpoint", () => {
+    // An empty endpoint is the silent failure: MapoFksField rewrites "" to "/",
+    // fetches the API root, and swallows the error as an empty picker.
+    const relations = fields.filter(
+      (f) => f.type === "fks" || f.type === "m2m",
+    );
+    expect(relations.length).toBeGreaterThan(0);
+    for (const rel of relations) expect(attrsOf(rel)?.endpoint).toBeTruthy();
+  });
+
+  it("marks server-computed fields readonly rather than dropping them", () => {
+    // Without this they rendered as ordinary inputs and the backend discarded
+    // whatever was typed, with nothing to notice.
+    expect(byKey.id.readonly).toBe(true);
+    expect(byKey.status.readonly).toBe(true);
+    expect(byKey.date_created.readonly).toBe(true);
+    // An editable field must NOT be flagged.
+    expect(byKey.title.readonly).toBeUndefined();
+  });
+
+  it("respects the multiline hint for unbounded text", () => {
+    // A Django TextField has no maxLength, so the >255 heuristic never fires.
+    expect(byKey.content.type).toBe("textarea");
+    expect(byKey.description.type).toBe("textarea");
+  });
+
+  it("carries labels", () => {
+    expect(byKey.title.label).toBe("Title");
+  });
+
+  it("types scalars correctly", () => {
+    expect(byKey.title.type).toBe("text");
+    expect(byKey.published_at.type).toBe("datetime");
+  });
+
+  it("has no translations envelope and no localized twins", () => {
+    expect(byKey.translations).toBeUndefined();
+    expect(fields.filter((f) => /_(it|en)$/.test(String(f.key)))).toHaveLength(
+      0,
+    );
+  });
+});

package/src/__tests__/useFormFromSchema.test.ts

@@ -10,6 +10,8 @@ type DescriptorWithAttrs = {
   };
   fields?: unknown[];
   visible?: (ctx: { model: Record<string, unknown> }) => boolean;
+  readonly?: boolean;
+  translatable?: boolean;
 };
 
 // Pydantic v2 / DRF Spectacular style schema.
@@ -413,3 +415,25 @@ describe("useFormFromSchema — number attrs", () => {
     expect(typed?.attrs?.max).toBe(5);
   });
 });
+
+describe("useFormFromSchema — schema flags", () => {
+  // Camomilla's OPTIONS schema marks per-language properties. Dropping the flag
+  // renders them as plain fields under language tabs that no longer bind them.
+  const flagged: JSONSchema = {
+    type: "object",
+    properties: {
+      title: { type: "string", title: "Titolo", translatable: true },
+      identifier: { type: "string", title: "Identifier" },
+      created_at: { type: "string", format: "date-time", readOnly: true },
+    },
+  };
+
+  it("carries translatable and readOnly onto the descriptor", () => {
+    const fields = useFormFromSchema(flagged);
+    const by = (k: string) =>
+      fields.find((f) => f.key === k) as DescriptorWithAttrs | undefined;
+    expect(by("title")?.translatable).toBe(true);
+    expect(by("identifier")?.translatable).toBeUndefined();
+    expect(by("created_at")?.readonly).toBe(true);
+  });
+});

package/src/__tests__/useMapoForm.test.ts

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

package/src/index.ts

@@ -42,7 +42,12 @@ export type {
   MapDescriptor,
   RepeaterDescriptor,
   MediaDescriptor,
+  MediaM2mDescriptor,
+  EnhancedMediaDescriptor,
   CustomDescriptor,
+  MediaLink,
+  MediaItem,
+  EnhancedMediaValue,
   FieldComponentEntry,
   FieldRegistry,
   PartialFieldRegistry,

package/src/module.ts

@@ -6,6 +6,8 @@ import {
   createResolver,
   addImports,
   extendPages,
+  hasNuxtModule,
+  installModule,
 } from "@nuxt/kit";
 import type { NuxtModule } from "@nuxt/schema";
 import type { PartialFieldRegistry } from "./runtime/types/index.js";
@@ -30,6 +32,23 @@ export default defineNuxtModule<MapoFormOptions>({
   async setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
 
+    // In consuming apps this runtime lives inside node_modules, where Nuxt
+    // skips auto-import injection by default (workspace apps are unaffected:
+    // pnpm symlinks resolve outside node_modules). Opt back in and transpile
+    // the runtime for the SSR build.
+    nuxt.options.build.transpile.push(resolver.resolve("./runtime"));
+    nuxt.options.imports.transform ??= {};
+    (nuxt.options.imports.transform.include ??= []).push(
+      /@mapomodule[\\/]form[\\/]/,
+    );
+
+    // Form components render user-facing strings through vue-i18n
+    // (`useI18n().t("mapo...")`). @mapomodule/i18n provides the catalogs and
+    // installs @nuxtjs/i18n unless the app manages it itself.
+    if (!hasNuxtModule("@mapomodule/i18n")) {
+      await installModule(await resolver.resolvePath("@mapomodule/i18n"));
+    }
+
     // Only serializable values can go into runtimeConfig.public.
     // `mapping` and `accessor` contain functions → not SSR-serializable.
     // To extend mapping/accessor, use an app plugin that accesses $mapoFormRegistry:
@@ -111,6 +130,21 @@ export {};
       });
     }
 
+    // Media field components — registered so consumers can use them directly,
+    // and so MapoMediaUnavailable resolves inside them.
+    const mediaFieldComponents = [
+      "MapoMediaField",
+      "MapoMediaM2mField",
+      "MapoEnhancedMediaField",
+      "MapoMediaUnavailable",
+    ];
+    for (const name of mediaFieldComponents) {
+      addComponent({
+        name,
+        filePath: resolver.resolve(`./runtime/components/fields/${name}.vue`),
+      });
+    }
+
     // Public auto-imported composables
     addImports([
       {

package/src/runtime/components/MapoFocusPortal.vue

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

package/src/runtime/components/MapoFormTabs.vue

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

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

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

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

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