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

package/dist/runtime/composables/useProgressiveDisclosure.js

@@ -0,0 +1,23 @@
+import { getNestedValue } from "@mapomodule/utils";
+export function when(...conditions) {
+  return (ctx) => conditions.every((c) => c(ctx));
+}
+export function whenAny(...conditions) {
+  return (ctx) => conditions.some((c) => c(ctx));
+}
+export function whenNot(condition) {
+  return (ctx) => !condition(ctx);
+}
+export function matchesField(key, matcher) {
+  return (ctx) => {
+    const val = getNestedValue(ctx.model, key);
+    return typeof matcher === "function" ? matcher(val) : val === matcher;
+  };
+}
+export const isOneOf = (options) => (val) => options.includes(val);
+export const isNoneOf = (options) => (val) => !options.includes(val);
+export const isNotEmpty = () => (val) => val != null && val !== "" && val !== false && (!Array.isArray(val) || val.length > 0);
+export const isEmpty = () => (val) => !isNotEmpty()(val);
+export const greaterThan = (n) => (val) => Number(val) > n;
+export const lessThan = (n) => (val) => Number(val) < n;
+export const matches = (pattern) => (val) => pattern.test(String(val ?? ""));

package/dist/runtime/composables/useUnsavedChangesGuard.d.ts

@@ -0,0 +1,24 @@
+import { type Ref } from "vue";
+/** Optional configuration for the unsaved-changes navigation guard. */
+export interface UnsavedChangesGuardOptions {
+    message?: string;
+    enabled?: Ref<boolean> | (() => boolean);
+}
+/**
+ * Registers two guards that warn the user before abandoning a dirty form:
+ * - A Vue Router `onBeforeRouteLeave` guard (in-app navigation).
+ * - A native `beforeunload` event listener (tab close / hard refresh).
+ *
+ * Both guards are no-ops when `isDirty` is `false` or when `options.enabled`
+ * returns `false`. The browser guard is skipped in SSR environments.
+ *
+ * @param isDirty - Reactive flag indicating whether the form has unsaved changes.
+ * @param options - Optional message override and an `enabled` predicate.
+ *
+ * @example
+ * useUnsavedChangesGuard(form.isDirty, {
+ *   message: 'Leave without saving your article?',
+ * })
+ */
+export declare function useUnsavedChangesGuard(isDirty: Ref<boolean>, options?: UnsavedChangesGuardOptions): void;
+//# sourceMappingURL=useUnsavedChangesGuard.d.ts.map

package/dist/runtime/composables/useUnsavedChangesGuard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUnsavedChangesGuard.d.ts","sourceRoot":"","sources":["../../../src/runtime/composables/useUnsavedChangesGuard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAGhD,uEAAuE;AACvE,MAAM,WAAW,0BAA0B;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;CAC1C;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,EACrB,OAAO,GAAE,0BAA+B,QA8BzC"}

package/dist/runtime/composables/useUnsavedChangesGuard.js

@@ -0,0 +1,27 @@
+import { onBeforeUnmount } from "vue";
+import { onBeforeRouteLeave } from "vue-router";
+export function useUnsavedChangesGuard(isDirty, options = {}) {
+  const message = options.message ?? "You have unsaved changes. Do you really want to leave?";
+  const canUseWindow = typeof window !== "undefined";
+  const isEnabled = () => {
+    if (typeof options.enabled === "function") return options.enabled();
+    if (options.enabled) return options.enabled.value;
+    return true;
+  };
+  onBeforeRouteLeave(() => {
+    if (!isEnabled() || !isDirty.value) return true;
+    if (!canUseWindow) return true;
+    return window.confirm(message);
+  });
+  const beforeUnload = (e) => {
+    if (!isEnabled() || !isDirty.value) return;
+    e.preventDefault();
+    e.returnValue = "";
+  };
+  if (canUseWindow) {
+    window.addEventListener("beforeunload", beforeUnload);
+    onBeforeUnmount(
+      () => window.removeEventListener("beforeunload", beforeUnload)
+    );
+  }
+}

package/dist/runtime/devtools/DevtoolsFormsPage.vue

@@ -0,0 +1,235 @@
+<script setup>
+import { definePageMeta, useNuxtApp, useRuntimeConfig } from "#imports";
+import { computed } from "vue";
+definePageMeta({ layout: false });
+const { $mapoFormRegistry } = useNuxtApp();
+const config = useRuntimeConfig().public.mapoForm;
+const registeredTypes = computed(() => {
+  const mapping = $mapoFormRegistry?.mapping || {};
+  return Object.keys(mapping).sort();
+});
+const builtInTypes = /* @__PURE__ */ new Set([
+  "text",
+  "textarea",
+  "number",
+  "boolean",
+  "switch",
+  "color",
+  "file",
+  "slider",
+  "select",
+  "date",
+  "time",
+  "datetime",
+  "fks",
+  "m2m",
+  "seo",
+  "editor",
+  "map",
+  "repeater"
+]);
+const userMappings = computed(
+  () => registeredTypes.value.filter((t) => !builtInTypes.has(t))
+);
+const globalDebounce = computed(() => config?.debounce || 300);
+const globalExpanded = computed(() => config?.groups?.expanded !== false);
+function componentLabel(type) {
+  const v = $mapoFormRegistry?.mapping?.[type];
+  if (!v) return "\u2014";
+  if (typeof v === "string") return v;
+  if (typeof v === "function") return "(lazy)";
+  if (typeof v === "object") {
+    const name = v.__name;
+    if (name) return name;
+  }
+  return "(component)";
+}
+function attrsKeys(type) {
+  const a = $mapoFormRegistry?.attrs?.[type];
+  return a ? Object.keys(a).join(", ") : "";
+}
+function accessorKeys(type) {
+  const ac = $mapoFormRegistry?.accessor?.[type];
+  return ac ? Object.keys(ac).join(" / ") : "";
+}
+function isUserType(type) {
+  return userMappings.value.includes(type);
+}
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-950 text-gray-100 font-mono text-sm p-6">
+    <!-- Header -->
+    <div class="flex items-center gap-3 mb-8 border-b border-gray-800 pb-4">
+      <span class="text-2xl">🗒️</span>
+      <div>
+        <h1 class="text-lg font-semibold text-white">Mapo Forms</h1>
+        <p class="text-gray-400 text-xs">Devtools panel — development only</p>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-3 gap-6">
+      <!-- Column 1: Global configuration -->
+      <div class="col-span-1">
+        <h2
+          class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3"
+        >
+          Global config
+        </h2>
+        <div
+          class="bg-gray-900 rounded-lg border border-gray-800 p-4 space-y-3"
+        >
+          <div>
+            <span class="text-gray-500">debounce</span>
+            <span class="ml-2 text-amber-400">{{ globalDebounce }}ms</span>
+          </div>
+          <div>
+            <span class="text-gray-500">groups.expanded</span>
+            <span
+              class="ml-2"
+              :class="globalExpanded ? 'text-green-400' : 'text-red-400'"
+            >
+              {{ globalExpanded }}
+            </span>
+          </div>
+          <div>
+            <span class="text-gray-500">custom types</span>
+            <span class="ml-2 text-blue-400">{{ userMappings.length }}</span>
+          </div>
+        </div>
+
+        <!-- User-defined custom types -->
+        <h2
+          class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3 mt-6"
+        >
+          Registered custom fields
+        </h2>
+        <div class="bg-gray-900 rounded-lg border border-gray-800 p-4">
+          <div
+            v-if="userMappings.length === 0"
+            class="text-gray-500 text-xs italic"
+          >
+            No custom types (nuxt.config → mapoForm.fields.mapping)
+          </div>
+          <div
+            v-for="type in userMappings"
+            :key="type"
+            class="flex items-center gap-2 py-1"
+          >
+            <span class="w-2 h-2 rounded-full bg-blue-500 shrink-0" />
+            <span class="text-blue-300">{{ type }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Columns 2-3: Full registry -->
+      <div class="col-span-2">
+        <h2
+          class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3"
+        >
+          Field registry
+          <span class="ml-2 text-gray-600 normal-case font-normal"
+            >({{ registeredTypes.length }} types)</span
+          >
+        </h2>
+        <div
+          class="bg-gray-900 rounded-lg border border-gray-800 overflow-hidden"
+        >
+          <table class="w-full text-xs">
+            <thead>
+              <tr class="border-b border-gray-800 bg-gray-900/80">
+                <th class="text-left px-4 py-2 text-gray-500 font-medium w-8">
+                  #
+                </th>
+                <th class="text-left px-4 py-2 text-gray-500 font-medium">
+                  type
+                </th>
+                <th class="text-left px-4 py-2 text-gray-500 font-medium">
+                  component
+                </th>
+                <th class="text-left px-4 py-2 text-gray-500 font-medium">
+                  default attrs
+                </th>
+                <th class="text-left px-4 py-2 text-gray-500 font-medium">
+                  accessor
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="(type, i) in registeredTypes"
+                :key="type"
+                class="border-b border-gray-800/50 hover:bg-gray-800/40 transition-colors"
+              >
+                <td class="px-4 py-2 text-gray-600">
+                  {{ i + 1 }}
+                </td>
+                <td class="px-4 py-2">
+                  <span
+                    class="px-1.5 py-0.5 rounded text-xs"
+                    :class="
+  isUserType(type) ? 'bg-blue-900/50 text-blue-300' : 'bg-gray-800 text-gray-200'
+"
+                    >{{ type }}</span
+                  >
+                </td>
+                <td class="px-4 py-2 text-green-300">
+                  {{ componentLabel(type) }}
+                </td>
+                <td class="px-4 py-2 text-gray-400">
+                  <span v-if="attrsKeys(type)" class="text-amber-300/80">{{
+                    attrsKeys(type)
+                  }}</span>
+                  <span v-else class="text-gray-700">—</span>
+                </td>
+                <td class="px-4 py-2">
+                  <span v-if="accessorKeys(type)" class="text-purple-400">{{
+                    accessorKeys(type)
+                  }}</span>
+                  <span v-else class="text-gray-700">—</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Quick reference -->
+        <h2
+          class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3 mt-6"
+        >
+          Quick reference — add a custom type
+        </h2>
+        <div class="bg-gray-900 rounded-lg border border-gray-800 p-4">
+          <pre
+            class="text-xs text-gray-300 overflow-x-auto leading-relaxed"
+          ><span class="text-gray-500">// nuxt.config.ts</span>
+<span class="text-blue-300">mapoForm</span>: {
+  fields: {
+    mapping: {
+      <span class="text-amber-300">'my-type'</span>: () => import(<span class="text-green-300">'~/components/MyField.vue'</span>),
+    },
+    attrs: {
+      <span class="text-amber-300">'my-type'</span>: { <span class="text-purple-300">someProp</span>: <span class="text-green-300">true</span> },
+    },
+  },
+}
+
+<span class="text-gray-500">// descriptor</span>
+{ key: <span class="text-green-300">'fieldKey'</span>, type: <span class="text-amber-300">'my-type'</span> }</pre>
+        </div>
+
+        <!-- If MapoUnknownField is rendered -->
+        <div
+          class="mt-4 p-3 bg-amber-900/20 border border-amber-700/40 rounded-lg text-xs text-amber-300"
+        >
+          <strong>⚠ MapoUnknownField</strong> — if a yellow placeholder appears
+          in a form, the type is missing from the registry. Check
+          <code class="bg-amber-900/30 px-1 rounded">descriptor.type</code> and
+          add the mapping shown above. In development, a
+          <code class="bg-amber-900/30 px-1 rounded">console.warn</code> is
+          emitted with the full path.
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/devtools/DevtoolsFormsPage.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=DevtoolsFormsPage.vue.d.ts.map

package/dist/runtime/devtools/DevtoolsFormsPage.vue.d.ts.map

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

package/dist/runtime/plugins/form-registry.d.ts

@@ -0,0 +1,18 @@
+import type { FieldRegistry } from "../types/index.js";
+declare module "#app" {
+    interface NuxtApp {
+        $mapoFormRegistry: FieldRegistry;
+    }
+}
+declare module "vue" {
+    interface ComponentCustomProperties {
+        $mapoFormRegistry: FieldRegistry;
+    }
+}
+declare const _default: import("#app").Plugin<{
+    mapoFormRegistry: FieldRegistry;
+}> & import("#app").ObjectPlugin<{
+    mapoFormRegistry: FieldRegistry;
+}>;
+export default _default;
+//# sourceMappingURL=form-registry.d.ts.map

package/dist/runtime/plugins/form-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-registry.d.ts","sourceRoot":"","sources":["../../../src/runtime/plugins/form-registry.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAyB,MAAM,mBAAmB,CAAC;AAE9E,OAAO,QAAQ,MAAM,CAAC;IACpB,UAAU,OAAO;QACf,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF;AAED,OAAO,QAAQ,KAAK,CAAC;IACnB,UAAU,yBAAyB;QACjC,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF;;;;;;AAED,wBA0BG"}

package/dist/runtime/plugins/form-registry.js

@@ -0,0 +1,19 @@
+import { defineNuxtPlugin, useRuntimeConfig } from "#app";
+import { defaultRegistry } from "../registry/defaults.js";
+export default defineNuxtPlugin(() => {
+  const config = useRuntimeConfig();
+  const mapoForm = config.public.mapoForm;
+  const userAttrs = mapoForm?.fields?.attrs ?? {};
+  const mergedAttrs = { ...defaultRegistry.attrs };
+  for (const [type, overrides] of Object.entries(userAttrs)) {
+    mergedAttrs[type] = { ...mergedAttrs[type] ?? {}, ...overrides };
+  }
+  const registry = {
+    mapping: { ...defaultRegistry.mapping },
+    attrs: mergedAttrs,
+    accessor: { ...defaultRegistry.accessor }
+  };
+  return {
+    provide: { mapoFormRegistry: registry }
+  };
+});

package/dist/runtime/registry/defaults.d.ts

@@ -0,0 +1,3 @@
+import type { FieldRegistry } from "../types/index.js";
+export declare const defaultRegistry: FieldRegistry;
+//# sourceMappingURL=defaults.d.ts.map

package/dist/runtime/registry/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../src/runtime/registry/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAMvD,eAAO,MAAM,eAAe,EAAE,aA0F7B,CAAC"}

package/dist/runtime/registry/defaults.js

@@ -0,0 +1,87 @@
+export const defaultRegistry = {
+  mapping: {
+    // ─── Nuxt UI — thin wrappers that use <UInput> etc. in the template ──────
+    text: () => import("../components/fields/nui/NuiInput.vue"),
+    textarea: () => import("../components/fields/nui/NuiTextarea.vue"),
+    email: () => import("../components/fields/nui/NuiInput.vue"),
+    url: () => import("../components/fields/nui/NuiInput.vue"),
+    number: () => import("../components/fields/nui/NuiInput.vue"),
+    boolean: () => import("../components/fields/nui/NuiCheckbox.vue"),
+    switch: () => import("../components/fields/nui/NuiSwitch.vue"),
+    slider: () => import("../components/fields/nui/NuiSlider.vue"),
+    color: () => import("../components/fields/nui/NuiInput.vue"),
+    file: () => import("../components/fields/MapoFileField.vue"),
+    // ─── Nuxt UI with specific config ────────────────────────────────────────
+    select: () => import("../components/fields/nui/NuiSelectMenu.vue"),
+    // ─── Custom Mapo components (non-trivial logic) ───────────────────────────
+    date: () => import("../components/fields/MapoDateField.vue"),
+    time: () => import("../components/fields/MapoTimeField.vue"),
+    datetime: () => import("../components/fields/MapoDateTimeField.vue"),
+    fks: () => import("../components/fields/MapoFksField.vue"),
+    m2m: () => import("../components/fields/MapoFksField.vue"),
+    seo: () => import("../components/fields/MapoSeoPreview.vue"),
+    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
+  },
+  attrs: {
+    // Applied to all fields
+    All: {
+      class: "w-full"
+    },
+    number: {
+      type: "number"
+    },
+    email: {
+      type: "email"
+    },
+    url: {
+      type: "url"
+    },
+    color: {
+      type: "color"
+    },
+    select: {
+      // NUI v3 uses `labelKey`/`valueKey`; descriptor uses `{ text, value }` convention.
+      labelKey: "text",
+      valueKey: "value"
+    },
+    fks: {
+      itemValue: "id",
+      returnObject: true
+    },
+    m2m: {
+      itemValue: "id",
+      returnObject: true,
+      multiple: true
+    }
+  },
+  accessor: {
+    // date/time/datetime: conversion handled internally by the Mapo*Field components
+    // (ISO string ↔ @internationalized/date CalendarDate/CalendarDateTime).
+    seo: {
+      // v1 used `permalink` key — accept both `permalink` and `url` aliases, normalise to `permalink`
+      get: ({ val }) => {
+        const v = val ?? {};
+        const { url, ...rest } = v;
+        return {
+          title: "",
+          description: "",
+          ...rest,
+          permalink: rest.permalink ?? url ?? ""
+        };
+      },
+      set: ({ val }) => {
+        const v = val ?? {};
+        const { url, ...rest } = v;
+        return {
+          title: "",
+          description: "",
+          ...rest,
+          permalink: rest.permalink ?? url ?? ""
+        };
+      }
+    }
+  }
+};