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

package/dist/runtime/composables/useMapoForm.js

@@ -0,0 +1,325 @@
+import {
+  ref,
+  computed,
+  toRaw,
+  toValue,
+  watch,
+  provide,
+  inject
+} from "vue";
+import {
+  getNestedValue,
+  setNestedValueMutating,
+  objectDiff,
+  debounce
+} from "@mapomodule/utils";
+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";
+function safeClone(v) {
+  const raw = toRaw(v);
+  if (typeof structuredClone === "function") {
+    try {
+      return structuredClone(raw);
+    } catch {
+    }
+  }
+  return JSON.parse(JSON.stringify(raw));
+}
+export const FORM_KEY = Symbol("mapoForm");
+function provideMapoForm(ctx) {
+  provide(FORM_KEY, ctx);
+}
+export function injectMapoForm() {
+  return inject(FORM_KEY, void 0);
+}
+export function useMapoForm(options) {
+  const {
+    model,
+    fields,
+    errors = ref({}),
+    languages = [],
+    currentLang: currentLangProp,
+    immediate = false,
+    debounce: debounceMs = 300,
+    notifyErrors = true,
+    registry
+  } = options;
+  const currentLang = useCurrentLang(currentLangProp);
+  const snack = useSnackStore();
+  const t = useMapoT();
+  const authStore = useAuthStore();
+  const backup = ref(safeClone(model.value));
+  const clientErrors = ref({});
+  const isLoading = ref(false);
+  const readonly = ref(false);
+  const touched = ref(/* @__PURE__ */ new Set());
+  const submitted = ref(false);
+  if (notifyErrors) {
+    watch(
+      errors,
+      (val) => {
+        const entries = Object.entries(val);
+        if (!entries.length) return;
+        const lines = entries.map(([field, msgs]) => `${field}: ${msgs.join(", ")}`).join("\n");
+        snack.show(lines, "error");
+      },
+      { deep: true }
+    );
+  }
+  const dirtyKeys = ref(/* @__PURE__ */ new Set());
+  const isDirty = computed(() => dirtyKeys.value.size > 0);
+  const DRAFT_TTL = 864e5;
+  const draftBanner = ref(null);
+  function _draftStorageKey() {
+    const key = toValue(options.draftKey);
+    if (!key) return null;
+    const userId = authStore.info?.id ?? "anonymous";
+    return `mapo:draft:${userId}:${key}`;
+  }
+  function clearDraft() {
+    const key = _draftStorageKey();
+    if (key && typeof localStorage !== "undefined")
+      localStorage.removeItem(key);
+  }
+  function checkDraft() {
+    const key = _draftStorageKey();
+    if (!key || typeof localStorage === "undefined") return;
+    try {
+      const raw = localStorage.getItem(key);
+      if (!raw) return;
+      const entry = JSON.parse(raw);
+      if (Date.now() - entry.savedAt > DRAFT_TTL) {
+        localStorage.removeItem(key);
+        return;
+      }
+      const savedAt = new Date(entry.savedAt);
+      draftBanner.value = {
+        savedAt,
+        restore: () => {
+          Object.assign(model.value, entry.model);
+          draftBanner.value = null;
+        },
+        discard: () => {
+          localStorage.removeItem(key);
+          draftBanner.value = null;
+        }
+      };
+    } catch {
+    }
+  }
+  if (options.draftKey) {
+    const saveDraft = debounce(() => {
+      const key = _draftStorageKey();
+      if (!key || !isDirty.value || typeof localStorage === "undefined") return;
+      try {
+        const noDraftKeys = new Set(
+          toValue(fields).filter((f) => f.noDraft).map((f) => f.key)
+        );
+        const snapshot = toRaw(model.value);
+        const filtered = noDraftKeys.size > 0 ? Object.fromEntries(
+          Object.entries(snapshot).filter(([k]) => !noDraftKeys.has(k))
+        ) : snapshot;
+        localStorage.setItem(
+          key,
+          JSON.stringify({ model: filtered, savedAt: Date.now() })
+        );
+      } catch {
+      }
+    }, 2e3);
+    watch(model, saveDraft, { deep: true });
+  }
+  function markTouched(key) {
+    if (touched.value.has(key)) return;
+    touched.value.add(key);
+    touched.value = new Set(touched.value);
+  }
+  function isTouched(key) {
+    return submitted.value || touched.value.has(key);
+  }
+  const allErrors = computed(() => {
+    const merged = { ...errors.value };
+    for (const [k, v] of Object.entries(clientErrors.value)) {
+      merged[k] = [v, ...merged[k] ?? []];
+    }
+    return merged;
+  });
+  function resolvePath(descriptor) {
+    const lang = currentLang.value;
+    if (descriptor.translatable && lang) {
+      return `translations.${lang}.${descriptor.key}`;
+    }
+    return descriptor.key;
+  }
+  function initLang(lang) {
+    const m = model.value;
+    if (!m.translations) m.translations = {};
+    const translations = m.translations;
+    if (!translations[lang]) translations[lang] = {};
+  }
+  function setFieldValue(descriptor, val) {
+    const accessor = resolveFieldAccessor(descriptor, registry);
+    const setVal = accessor.set ? accessor.set({ model: model.value, val, lang: currentLang.value }) : val;
+    if (descriptor.synci18n && languages.length) {
+      for (const lang of languages) {
+        initLang(lang);
+        setNestedValueMutating(
+          model.value,
+          `translations.${lang}.${descriptor.key}`,
+          setVal
+        );
+      }
+    } else {
+      if (descriptor.translatable && currentLang.value)
+        initLang(currentLang.value);
+      setNestedValueMutating(
+        model.value,
+        resolvePath(descriptor),
+        setVal
+      );
+    }
+    descriptor.onChange?.({ model: model.value, val: setVal });
+    const key = descriptor.key;
+    if (!dirtyKeys.value.has(key)) {
+      dirtyKeys.value.add(key);
+      dirtyKeys.value = new Set(dirtyKeys.value);
+    }
+    if (clientErrors.value[key]) {
+      const next = { ...clientErrors.value };
+      delete next[key];
+      clientErrors.value = next;
+    }
+  }
+  function getFieldValue(descriptor) {
+    const raw = getNestedValue(model.value, resolvePath(descriptor));
+    const accessor = resolveFieldAccessor(descriptor, registry);
+    return accessor.get ? accessor.get({ model: model.value, val: raw, lang: currentLang.value }) : raw;
+  }
+  function checkRequired(descriptor, val) {
+    if (!descriptor.required) return null;
+    if (val === null || val === void 0 || val === "")
+      return t("mapo.form.required");
+    return null;
+  }
+  function getClientError(descriptor) {
+    if (!descriptor.required && !descriptor.validate) return null;
+    if (!immediate && !isTouched(descriptor.key)) return null;
+    const val = getFieldValue(descriptor);
+    return checkRequired(descriptor, val) ?? descriptor.validate?.(val, {
+      model: model.value
+    }) ?? null;
+  }
+  function validateClient() {
+    submitted.value = true;
+    const errs = {};
+    const fs = toValue(fields);
+    for (const descriptor of fs) {
+      if (!descriptor.required && !descriptor.validate) continue;
+      const val = getFieldValue(descriptor);
+      const err = checkRequired(descriptor, val) ?? descriptor.validate?.(val, {
+        model: model.value
+      }) ?? null;
+      if (err) errs[descriptor.key] = err;
+    }
+    clientErrors.value = errs;
+    return { valid: Object.keys(errs).length === 0, errors: errs };
+  }
+  function resetDirty() {
+    backup.value = safeClone(model.value);
+    dirtyKeys.value = /* @__PURE__ */ new Set();
+  }
+  function getPatch() {
+    return objectDiff(backup.value, model.value);
+  }
+  async function submit(handler, isNew = false) {
+    if (isLoading.value) return;
+    submitted.value = true;
+    const { valid } = validateClient();
+    if (!valid) {
+      snack.show(t("mapo.fixErrors"), "error");
+      return;
+    }
+    isLoading.value = true;
+    try {
+      await handler(isNew ? model.value : getPatch(), isNew);
+      resetDirty();
+      clearDraft();
+      submitted.value = false;
+      touched.value = /* @__PURE__ */ new Set();
+    } finally {
+      isLoading.value = false;
+    }
+  }
+  const fieldIndex = computed(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const f of toValue(fields)) map.set(f.key, f);
+    return map;
+  });
+  const findDescriptor = (key) => fieldIndex.value.get(key);
+  const ctx = {
+    model,
+    fields,
+    errors: allErrors,
+    languages,
+    currentLang,
+    readonly,
+    immediate,
+    debounce: debounceMs,
+    registry,
+    setFieldValue: (key, val) => {
+      const descriptor = findDescriptor(key);
+      if (descriptor) setFieldValue(descriptor, val);
+    },
+    getClientError: (key) => {
+      const descriptor = findDescriptor(key);
+      return descriptor ? getClientError(descriptor) : null;
+    },
+    markTouched,
+    isTouched,
+    submitted
+  };
+  function setFieldValuePublic(keyOrDescriptor, val) {
+    if (typeof keyOrDescriptor === "string") {
+      const descriptor = findDescriptor(keyOrDescriptor);
+      if (descriptor) setFieldValue(descriptor, val);
+      return;
+    }
+    setFieldValue(keyOrDescriptor, val);
+  }
+  function getClientErrorPublic(keyOrDescriptor) {
+    if (typeof keyOrDescriptor === "string") {
+      const descriptor = findDescriptor(keyOrDescriptor);
+      return descriptor ? getClientError(descriptor) : null;
+    }
+    return getClientError(keyOrDescriptor);
+  }
+  provideMapoForm(ctx);
+  return {
+    state: computed(() => ({
+      model: model.value,
+      errors: allErrors.value,
+      isDirty: isDirty.value,
+      currentLang: currentLang.value,
+      isLoading: isLoading.value
+    })),
+    isDirty,
+    isLoading,
+    readonly,
+    currentLang,
+    getFieldValue,
+    setFieldValue: setFieldValuePublic,
+    getClientError: getClientErrorPublic,
+    markTouched,
+    isTouched,
+    validateClient,
+    resetDirty,
+    getPatch,
+    submit,
+    ctx,
+    draftBanner,
+    checkDraft,
+    clearDraft
+  };
+}

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

@@ -0,0 +1,17 @@
+/**
+ * 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 declare function useMediaManager(): {
+    MediaDialog: string | import("vue").ConcreteComponent<{}, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>;
+    available: boolean;
+};
+//# sourceMappingURL=useMediaManager.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaManager.d.ts","sourceRoot":"","sources":["../../../src/runtime/composables/useMediaManager.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe;;;EAM9B"}

package/dist/runtime/composables/useMediaManager.js

@@ -0,0 +1,6 @@
+import { resolveComponent } from "vue";
+export function useMediaManager() {
+  const MediaDialog = resolveComponent("MapoMediaManagerDialog");
+  const available = typeof MediaDialog !== "string";
+  return { MediaDialog, available };
+}

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

@@ -0,0 +1,44 @@
+type Matcher<T = unknown> = (val: T) => boolean;
+type Condition<TModel extends object> = (ctx: {
+    model: TModel;
+}) => boolean;
+/**
+ * Combines conditions with AND: all conditions must match.
+ *
+ * @example
+ * visible: when(matchesField('seo_enabled', true), matchesField('status', isOneOf(['published'])))
+ */
+export declare function when<TModel extends object>(...conditions: Condition<TModel>[]): Condition<TModel>;
+/**
+ * Combines conditions with OR: at least one condition must match.
+ */
+export declare function whenAny<TModel extends object>(...conditions: Condition<TModel>[]): Condition<TModel>;
+/**
+ * Negates a condition.
+ */
+export declare function whenNot<TModel extends object>(condition: Condition<TModel>): Condition<TModel>;
+/**
+ * Checks that a field value satisfies a matcher, or equals a literal value.
+ * Supports dotted paths such as `meta.status`.
+ *
+ * @example
+ * matchesField('type', 'article')
+ * matchesField('count', greaterThan(0))
+ */
+export declare function matchesField<TModel extends object>(key: string, matcher: unknown | Matcher): Condition<TModel>;
+/** The value is included in the options array. */
+export declare const isOneOf: <T>(options: T[]) => (val: unknown) => boolean;
+/** The value is NOT included in the options array. */
+export declare const isNoneOf: <T>(options: T[]) => (val: unknown) => boolean;
+/** The value is non-empty (not null, not undefined, not '', not false, array with at least one item). */
+export declare const isNotEmpty: () => (val: unknown) => boolean;
+/** The value is empty. */
+export declare const isEmpty: () => (val: unknown) => boolean;
+/** Returns true when the numeric value is greater than `n`. */
+export declare const greaterThan: (n: number) => (val: unknown) => boolean;
+/** Returns true when the numeric value is less than `n`. */
+export declare const lessThan: (n: number) => (val: unknown) => boolean;
+/** Returns true when the stringified value matches the given regular expression. */
+export declare const matches: (pattern: RegExp) => (val: unknown) => boolean;
+export {};
+//# sourceMappingURL=useProgressiveDisclosure.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useProgressiveDisclosure.d.ts","sourceRoot":"","sources":["../../../src/runtime/composables/useProgressiveDisclosure.ts"],"names":[],"mappings":"AAEA,KAAK,OAAO,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC;AAChD,KAAK,SAAS,CAAC,MAAM,SAAS,MAAM,IAAI,CAAC,GAAG,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,KAAK,OAAO,CAAC;AAE5E;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,MAAM,SAAS,MAAM,EACxC,GAAG,UAAU,EAAE,SAAS,CAAC,MAAM,CAAC,EAAE,GACjC,SAAS,CAAC,MAAM,CAAC,CAEnB;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,MAAM,SAAS,MAAM,EAC3C,GAAG,UAAU,EAAE,SAAS,CAAC,MAAM,CAAC,EAAE,GACjC,SAAS,CAAC,MAAM,CAAC,CAEnB;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,MAAM,SAAS,MAAM,EAC3C,SAAS,EAAE,SAAS,CAAC,MAAM,CAAC,GAC3B,SAAS,CAAC,MAAM,CAAC,CAEnB;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,MAAM,SAAS,MAAM,EAChD,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,OAAO,GAAG,OAAO,GACzB,SAAS,CAAC,MAAM,CAAC,CAOnB;AAID,kDAAkD;AAClD,eAAO,MAAM,OAAO,GACjB,CAAC,EAAE,SAAS,CAAC,EAAE,MACf,KAAK,OAAO,KAAG,OACY,CAAC;AAE/B,sDAAsD;AACtD,eAAO,MAAM,QAAQ,GAClB,CAAC,EAAE,SAAS,CAAC,EAAE,MACf,KAAK,OAAO,KAAG,OACa,CAAC;AAEhC,yGAAyG;AACzG,eAAO,MAAM,UAAU,SAEpB,KAAK,OAAO,KAAG,OAIyB,CAAC;AAE5C,0BAA0B;AAC1B,eAAO,MAAM,OAAO,SAEjB,KAAK,OAAO,KAAG,OACI,CAAC;AAEvB,+DAA+D;AAC/D,eAAO,MAAM,WAAW,GACrB,GAAG,MAAM,MACT,KAAK,OAAO,KAAG,OACC,CAAC;AAEpB,4DAA4D;AAC5D,eAAO,MAAM,QAAQ,GAClB,GAAG,MAAM,MACT,KAAK,OAAO,KAAG,OACC,CAAC;AAEpB,oFAAoF;AACpF,eAAO,MAAM,OAAO,GACjB,SAAS,MAAM,MACf,KAAK,OAAO,KAAG,OACiB,CAAC"}

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;AAIhD,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,QA6BzC"}

package/dist/runtime/composables/useUnsavedChangesGuard.js

@@ -0,0 +1,28 @@
+import { onBeforeUnmount } from "vue";
+import { onBeforeRouteLeave } from "#app";
+import { useMapoT } from "@mapomodule/i18n/runtime/composables/useMapoT";
+export function useUnsavedChangesGuard(isDirty, options = {}) {
+  const message = options.message ?? useMapoT()("mapo.confirmLeaveChanges");
+  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)
+    );
+  }
+}