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

package/dist/runtime/composables/useFormDraft.js

@@ -0,0 +1,52 @@
+import { watch, onMounted, onUnmounted } from "vue";
+import { debounce } from "@mapomodule/utils";
+export function useFormDraft(options) {
+  const storageKey = options.userId != null ? `mapo:draft:${options.userId}:${options.key}` : `mapo:draft:${options.key}`;
+  const ttl = options.ttl ?? 864e5;
+  const canUseStorage = typeof localStorage !== "undefined";
+  const debouncedSave = debounce(() => {
+    if (!canUseStorage) return;
+    if (!options.isDirty.value) return;
+    const entry = {
+      model: options.model.value,
+      savedAt: Date.now()
+    };
+    try {
+      localStorage.setItem(storageKey, JSON.stringify(entry));
+      options.onSave?.(new Date(entry.savedAt));
+    } catch {
+    }
+  }, options.debounce ?? 2e3);
+  const stopWatch = watch(options.model, debouncedSave, { deep: true });
+  onMounted(() => {
+    const draft = getDraft();
+    if (!draft) return;
+    options.onRestore?.(draft.model, new Date(draft.savedAt));
+  });
+  onUnmounted(() => {
+    stopWatch();
+  });
+  function getDraft() {
+    if (!canUseStorage) return null;
+    try {
+      const raw = localStorage.getItem(storageKey);
+      if (!raw) return null;
+      const entry = JSON.parse(raw);
+      if (Date.now() - entry.savedAt > ttl) {
+        localStorage.removeItem(storageKey);
+        return null;
+      }
+      return entry;
+    } catch {
+      return null;
+    }
+  }
+  function clearDraft() {
+    if (!canUseStorage) return;
+    localStorage.removeItem(storageKey);
+  }
+  function hasDraft() {
+    return getDraft() !== null;
+  }
+  return { clearDraft, getDraft, hasDraft };
+}

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

@@ -0,0 +1,21 @@
+import type { JSONSchema } from "@mapomodule/utils";
+import type { AnyFieldDescriptor } from "../types/index.js";
+/** Options for generating field descriptors from a JSON Schema document. */
+export interface UseFormFromSchemaOptions {
+    /** Keys to exclude from generation, for example `id` or `created_at`. */
+    exclude?: string[];
+    /** Per-field overrides that shallow-merge onto the generated descriptor. */
+    overrides?: Record<string, Partial<AnyFieldDescriptor>>;
+}
+/**
+ * Builds a `AnyFieldDescriptor[]` array from a JSON Schema.
+ * Supports Pydantic v2 (`$defs`, nullable `anyOf`), DRF Spectacular, and `if/then/else` conditionals.
+ *
+ * @example
+ * const fields = useFormFromSchema(myApiSchema, {
+ *   exclude: ['id', 'created_at'],
+ *   overrides: { body: { type: 'editor', translatable: true } },
+ * })
+ */
+export declare function useFormFromSchema(schema: JSONSchema, options?: UseFormFromSchemaOptions): AnyFieldDescriptor[];
+//# sourceMappingURL=useFormFromSchema.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFormFromSchema.d.ts","sourceRoot":"","sources":["../../../src/runtime/composables/useFormFromSchema.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,kBAAkB,EAAa,MAAM,mBAAmB,CAAC;AAsMvE,4EAA4E;AAC5E,MAAM,WAAW,wBAAwB;IACvC,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC;CACzD;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,UAAU,EAClB,OAAO,GAAE,wBAA6B,GACrC,kBAAkB,EAAE,CA+BtB"}

package/dist/runtime/composables/useFormFromSchema.js

@@ -0,0 +1,142 @@
+import { resolveSchema, extractDefs, matchesSchema } from "@mapomodule/utils";
+function mapType(schema, key) {
+  if (schema.enum) return "select";
+  const t = Array.isArray(schema.type) ? schema.type.find((v) => v !== "null") : schema.type;
+  const fmt = schema.format;
+  if (t === "string") {
+    if (fmt === "date") return "date";
+    if (fmt === "date-time") return "datetime";
+    if (fmt === "time") return "time";
+    if (fmt === "color") return "color";
+    if (typeof schema.maxLength === "number" && schema.maxLength > 255)
+      return "textarea";
+    return "text";
+  }
+  if (t === "integer" || t === "number") return "number";
+  if (t === "boolean") return "boolean";
+  if (t === "relation") {
+    return schema.multiple ? "m2m" : "fks";
+  }
+  if (t === "array") {
+    const items = schema.items;
+    if (items?.type === "relation") return "m2m";
+    if (items?.type === "object" || items?.properties) return "repeater";
+    return "select";
+  }
+  if (t === "object") {
+    const props = Object.keys(schema.properties ?? {});
+    if (props.includes("title") && props.includes("description") && (props.includes("url") || props.includes("slug")))
+      return "seo";
+    return `object:${key}`;
+  }
+  return "text";
+}
+function buildAttrs(schema, type) {
+  const attrs = {};
+  if (type === "select") {
+    if (schema.enum) {
+      attrs.options = schema.enum.map((v) => ({
+        text: String(v),
+        value: v
+      }));
+    }
+  }
+  if (type === "number") {
+    if (schema.minimum !== void 0) attrs.min = schema.minimum;
+    if (schema.maximum !== void 0) attrs.max = schema.maximum;
+  }
+  if (type === "text" || type === "textarea") {
+    if (schema.maxLength !== void 0) attrs.maxLength = schema.maxLength;
+    if (schema.minLength !== void 0) attrs.minLength = schema.minLength;
+  }
+  if (type === "fks" || type === "m2m") {
+    const ext = schema;
+    attrs.endpoint = ext.endpoint ?? ext.relation ?? "";
+    attrs.returnObject = true;
+    if (type === "m2m") attrs.multiple = true;
+  }
+  if (type === "date" || type === "datetime") {
+    if (schema.minimum) attrs.min = schema.minimum;
+    if (schema.maximum) attrs.max = schema.maximum;
+  }
+  return attrs;
+}
+function collectRules(schema) {
+  const rules = [];
+  function addRule(ifSchema, then, elseBranch) {
+    rules.push({
+      ifSchema,
+      thenKeys: new Set(Object.keys(then?.properties ?? {})),
+      elseKeys: new Set(Object.keys(elseBranch?.properties ?? {}))
+    });
+  }
+  if (schema.if) addRule(schema.if, schema.then, schema.else);
+  if (Array.isArray(schema.allOf)) {
+    for (const entry of schema.allOf) {
+      if (entry?.if) addRule(entry.if, entry.then, entry.else);
+    }
+  }
+  return rules;
+}
+function makeVisible(ifSchema, side) {
+  return ({ model }) => {
+    const matches = matchesSchema(model, ifSchema);
+    return side === "then" ? matches : !matches;
+  };
+}
+function propertyToDescriptor(key, rawSchema, defs, requiredKeys, rules) {
+  const schema = resolveSchema(rawSchema, defs);
+  const type = mapType(schema, key);
+  const attrs = buildAttrs(schema, type);
+  let visible;
+  for (const rule of rules) {
+    if (rule.thenKeys.has(key) && !rule.elseKeys.has(key)) {
+      visible = makeVisible(rule.ifSchema, "then");
+      break;
+    }
+    if (rule.elseKeys.has(key) && !rule.thenKeys.has(key)) {
+      visible = makeVisible(rule.ifSchema, "else");
+      break;
+    }
+  }
+  const base = {
+    key,
+    type,
+    label: schema.title ?? void 0,
+    required: requiredKeys.has(key),
+    ...visible ? { visible } : {},
+    ...Object.keys(attrs).length ? { attrs } : {}
+  };
+  if (type === "repeater" && schema.items) {
+    const itemSchema = resolveSchema(schema.items, defs);
+    const childRequired = new Set(itemSchema.required ?? []);
+    const childProps = itemSchema.properties ?? {};
+    const childRules = collectRules(itemSchema);
+    base.fields = Object.entries(childProps).map(
+      ([k, v]) => propertyToDescriptor(k, v, defs, childRequired, childRules)
+    );
+  }
+  return base;
+}
+export function useFormFromSchema(schema, options = {}) {
+  const { exclude = [], overrides = {} } = options;
+  const defs = extractDefs(schema);
+  const properties = schema.properties ?? {};
+  const requiredKeys = new Set(schema.required ?? []);
+  const rules = collectRules(schema);
+  const descriptors = [];
+  for (const [key, rawProp] of Object.entries(properties)) {
+    if (exclude.includes(key)) continue;
+    const descriptor = propertyToDescriptor(
+      key,
+      rawProp,
+      defs,
+      requiredKeys,
+      rules
+    );
+    const override = overrides[key];
+    const final = override ? { ...descriptor, ...override } : descriptor;
+    descriptors.push(final);
+  }
+  return descriptors;
+}

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

@@ -0,0 +1,96 @@
+import { type Ref, type MaybeRef } from "vue";
+import type { AnyFieldDescriptor, FieldRegistry } from "../types/index.js";
+/** Options accepted by `useMapoForm()`. */
+export interface UseMapoFormOptions<T extends object> {
+    model: Ref<T>;
+    fields: MaybeRef<AnyFieldDescriptor<T>[]>;
+    errors?: Ref<Record<string, string[]>>;
+    languages?: string[];
+    currentLang?: Ref<string>;
+    immediate?: boolean;
+    /** Global debounce in milliseconds. Override per field with `descriptor.debounce`. Default: `300`. */
+    debounce?: number;
+    /**
+     * When `false`, suppresses the toast that lists server-side field errors.
+     * Set this for sub-forms (e.g. each repeater item) so they don't duplicate the
+     * root form's error toast. Default: `true`.
+     */
+    notifyErrors?: boolean;
+    registry: FieldRegistry;
+    /**
+     * When set, enables automatic draft persistence to localStorage.
+     * Key is prefixed with `mapo:draft:`. Drafts expire after 24 h.
+     * Call the returned `checkDraft()` after the model is populated to offer restore.
+     * Example: `"article:42"` → `mapo:draft:article:42`.
+     */
+    draftKey?: MaybeRef<string | undefined>;
+}
+/** State exposed when a pending draft is found in localStorage. */
+export interface MapoDraftBanner {
+    savedAt: Date;
+    restore: () => void;
+    discard: () => void;
+}
+/** Reactive context shared with child form fields via provide/inject. */
+export interface MapoFormContext<T extends object> {
+    model: Ref<T>;
+    fields: MaybeRef<AnyFieldDescriptor<T>[]>;
+    errors: Ref<Record<string, string[]>>;
+    languages: string[];
+    currentLang: Ref<string>;
+    readonly: Ref<boolean>;
+    immediate: boolean;
+    debounce: number;
+    registry: FieldRegistry;
+    setFieldValue: (key: string, val: unknown) => void;
+    getClientError: (key: string) => string | null;
+    markTouched: (key: string) => void;
+    isTouched: (key: string) => boolean;
+    submitted: Ref<boolean>;
+}
+/** Injection key for the current Mapo form context. */
+export declare const FORM_KEY: unique symbol;
+/** Injects the nearest form context, if present. */
+export declare function injectMapoForm<T extends object>(): MapoFormContext<T> | undefined;
+/**
+ * Creates the core reactive state and helpers for a Mapo form.
+ * Handles dirty tracking, field accessors, sync validation, and submit flows.
+ */
+export declare function useMapoForm<T extends object>(options: UseMapoFormOptions<T>): {
+    state: import("vue").ComputedRef<{
+        model: T;
+        errors: Record<string, string[]>;
+        isDirty: boolean;
+        currentLang: string;
+        isLoading: boolean;
+    }>;
+    isDirty: import("vue").ComputedRef<boolean>;
+    isLoading: Ref<boolean, boolean>;
+    readonly: Ref<boolean, boolean>;
+    currentLang: Ref<string, string>;
+    getFieldValue: (descriptor: AnyFieldDescriptor<T>) => unknown;
+    setFieldValue: (keyOrDescriptor: string | AnyFieldDescriptor<T>, val: unknown) => void;
+    getClientError: (keyOrDescriptor: string | AnyFieldDescriptor<T>) => string | null;
+    markTouched: (key: string) => void;
+    isTouched: (key: string) => boolean;
+    validateClient: () => {
+        valid: boolean;
+        errors: Record<string, string>;
+    };
+    resetDirty: () => void;
+    getPatch: () => Partial<T>;
+    submit: (handler: (model: T | Partial<T>, isNew: boolean) => Promise<void>, isNew?: boolean) => Promise<void>;
+    ctx: MapoFormContext<T>;
+    draftBanner: Ref<{
+        savedAt: Date;
+        restore: () => void;
+        discard: () => void;
+    } | null, MapoDraftBanner | {
+        savedAt: Date;
+        restore: () => void;
+        discard: () => void;
+    } | null>;
+    checkDraft: () => void;
+    clearDraft: () => void;
+};
+//# sourceMappingURL=useMapoForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMapoForm.d.ts","sourceRoot":"","sources":["../../../src/runtime/composables/useMapoForm.ts"],"names":[],"mappings":"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"}

package/dist/runtime/composables/useMapoForm.js

@@ -0,0 +1,323 @@
+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 { 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 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 "This field is 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("Please fix the errors before saving.", "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/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"}