@madojs/mado 0.11.1 → 0.13.0

package/dist/src/each.js

@@ -18,18 +18,10 @@
  * Template usage:
  *   html`<ul>${() => each(items(), t => t.id, t => html`<li>${t.text}</li>`)}</ul>`
  */
-import { html } from "./html/template.js";
 export const isEachResult = (v) => typeof v === "object" &&
     v !== null &&
     v._madoEach === true;
 export function each(items, keyOf, render) {
     return { _madoEach: true, items, keyOf, render };
 }
-/**
- * Sugar: returns a ready TemplateResult with the given list as children.
- * Convenient when you need a list without a wrapping parent.
- */
-export function list(items, keyOf, render) {
-    return html `${each(items, keyOf, render)}`;
-}
 //# sourceMappingURL=each.js.map

package/dist/src/each.js.map

@@ -1 +1 @@
-{"version":3,"file":"each.js","sourceRoot":"","sources":["../../src/each.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAgB1C,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,CAAU,EAAmB,EAAE,CAC1D,OAAO,CAAC,KAAK,QAAQ;IACrB,CAAC,KAAK,IAAI;IACT,CAAgB,CAAC,SAAS,KAAK,IAAI,CAAC;AAEvC,MAAM,UAAU,IAAI,CAClB,KAAmB,EACnB,KAA0C,EAC1C,MAAkD;IAElD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AACnD,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,IAAI,CAClB,KAAmB,EACnB,KAA0C,EAC1C,MAAkD;IAElD,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC;AAC7C,CAAC"}
+{"version":3,"file":"each.js","sourceRoot":"","sources":["../../src/each.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAiBH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,CAAU,EAAmB,EAAE,CAC1D,OAAO,CAAC,KAAK,QAAQ;IACrB,CAAC,KAAK,IAAI;IACT,CAAgB,CAAC,SAAS,KAAK,IAAI,CAAC;AAEvC,MAAM,UAAU,IAAI,CAClB,KAAmB,EACnB,KAA0C,EAC1C,MAAkD;IAElD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AACnD,CAAC","sourcesContent":["/**\n * Keyed list rendering.\n *\n * each() returns a special EachResult descriptor. The html binder recognizes\n * it by the `_madoEach` flag and applies keyed reconciliation: on every\n * update it reuses DOM nodes for the same keys and moves them with\n * insertBefore instead of recreating everything.\n *\n * Key differences from a naive implementation:\n *   - state lives in the parent's ChildState, not globally by renderFn, so two\n *     each() calls with the same render function do not interfere;\n *   - DOM nodes are actually reused, so input focus, animations,\n *     IntersectionObserver state and .scrollTop survive reorder.\n *\n * API:\n *   each(items, item => item.id, item => html`<li>${item.name}</li>`)\n *\n * Template usage:\n *   html`<ul>${() => each(items(), t => t.id, t => html`<li>${t.text}</li>`)}</ul>`\n */\n\nimport type { TemplateResult } from \"./html/template-types.js\";\n\nexport type EachKey = string | number;\n\n/**\n * Marker recognised by the html binder.\n * Do not set `_madoEach` yourself — use each().\n */\nexport interface EachResult<T = unknown> {\n  readonly _madoEach: true;\n  readonly items: readonly T[];\n  readonly keyOf: (item: T, index: number) => EachKey;\n  readonly render: (item: T, index: number) => TemplateResult;\n}\n\nexport const isEachResult = (v: unknown): v is EachResult =>\n  typeof v === \"object\" &&\n  v !== null &&\n  (v as EachResult)._madoEach === true;\n\nexport function each<T>(\n  items: readonly T[],\n  keyOf: (item: T, index: number) => EachKey,\n  render: (item: T, index: number) => TemplateResult,\n): EachResult<T> {\n  return { _madoEach: true, items, keyOf, render };\n}\n"]}

package/dist/src/forms.d.ts

@@ -1,105 +1,36 @@
 /**
- * Forms without pain. Built on native `<form>` submit/input events plus a
- * small schema validator whose rules mirror common HTML constraints.
- *
- *   const f = useForm({
- *     email: { required: true, type: 'email' },
- *     age:   { min: 18 },
- *   });
- *
- *   html`
- *     <form @submit=${f.onSubmit(async values => { await save(values) })}>
- *       <input name="email" .value=${() => f.values().email ?? ''}
- *              @input=${f.onInput} />
- *       ${() => f.errors().email ? html`<err>${f.errors().email}</err>` : null}
- *
- *       <input name="age" type="number" .value=${() => f.values().age ?? ''}
- *              @input=${f.onInput} />
- *
- *       <button ?disabled=${() => !f.isValid() || f.submitting()}>Save</button>
- *     </form>
- *   `;
- *
- * What's inside:
- *   - validation rules mirror common HTML constraints
- *     (required, min, max, pattern, type=email/url/number, etc.);
- *   - custom rules via a validate(values) function returning
- *     { field: 'msg' } or null;
- *   - all fields are automatically "touched" on blur — errors
- *     are shown only after user interaction;
- *   - submit() is aborted if the form is invalid.
- *
- * No Yup/Zod/Formik dependencies. If you really want them —
- * pass your own validate(values) and wire it to anything.
+ * Typed form state over the browser's native form and constraint-validation
+ * model. HTML owns required/type/min/max/pattern; Mado owns reactive state,
+ * touched/dirty flags, async validation cancellation and submit state.
  */
-import { type Signal, type Computed } from "./signal.js";
-export type FormValue = string | number | boolean | null | undefined | FormValue[] | {
-    [key: string]: FormValue;
-};
-export type FormValues = Record<string, FormValue>;
-export type FormErrors = Record<string, string | undefined>;
-export type FieldValidator<V extends FormValues = FormValues> = (value: FormValue, values: V, path: string) => string | null | undefined;
-export type AsyncFieldValidator<V extends FormValues = FormValues> = (value: FormValue, values: V, path: string) => Promise<string | null | undefined>;
-/** Field declaration. Rules intentionally match common HTML constraints. */
-export interface FieldSchema {
-    required?: boolean;
-    type?: "text" | "email" | "url" | "number" | "tel" | "password";
-    min?: number;
-    max?: number;
-    minLength?: number;
-    maxLength?: number;
-    pattern?: string;
-    /** Default value */
-    default?: FormValue;
-    /** Synchronous custom validator for this field. */
-    validate?: FieldValidator;
-    /** Asynchronous custom validator for this field. */
-    validateAsync?: AsyncFieldValidator;
+import { type Computed, type Signal } from "./signal.js";
+export type FormValue = unknown;
+export type FormValues = Record<string, unknown>;
+export type FormErrors<V extends FormValues = FormValues> = Partial<Record<string, string>>;
+export type FormTouched<V extends FormValues = FormValues> = Partial<Record<string, boolean>>;
+export interface FormValidationContext {
+    signal: AbortSignal;
+    form: HTMLFormElement | null;
 }
-export type Schema = Record<string, FieldSchema>;
+export type FormValidator<V extends FormValues> = (values: Readonly<V>, context: FormValidationContext) => FormErrors<V> | null | Promise<FormErrors<V> | null>;
 export interface UseFormOptions<V extends FormValues> {
-    /** Custom validator: returns errors or null. */
-    validate?: (values: V) => FormErrors | null;
-    /** Async custom validator, usually for server-backed uniqueness checks. */
-    validateAsync?: (values: V) => Promise<FormErrors | null>;
-}
-export interface FieldArrayApi<T extends FormValue = FormValue> {
-    /** Current array value. */
-    items: () => T[];
-    /** Field name helper: `items.0.title`. */
-    path(index: number, field?: string): string;
-    append(value: T): void;
-    prepend(value: T): void;
-    insert(index: number, value: T): void;
-    remove(index: number): void;
-    move(from: number, to: number): void;
-    replace(items: readonly T[]): void;
-    set(index: number, value: T): void;
+    initial: V;
+    validate?: FormValidator<V>;
 }
 export interface FormApi<V extends FormValues> {
     values: Signal<V>;
-    errors: () => FormErrors;
-    touched: Signal<Record<string, boolean>>;
+    errors: Computed<FormErrors<V>>;
+    touched: Signal<FormTouched<V>>;
+    dirty: Computed<boolean>;
     submitting: Signal<boolean>;
-    validating: Computed<boolean>;
-    validatingFields: Signal<Record<string, boolean>>;
-    isValid: () => boolean;
-    /** Binding for @input/@change: automatically picks up name+value+type. */
-    onInput: (e: Event) => void;
-    /** Binding for @blur: marks the field as touched. */
-    onBlur: (e: Event) => void;
-    /** Submit wrapper: calls handler only if the form is valid. */
-    onSubmit: (handler: (values: V) => void | Promise<void>) => (e: Event) => void;
-    /** Set a field value programmatically. */
-    setField<K extends keyof V & string>(name: K, value: V[K]): void;
-    setField(name: string, value: FormValue): void;
-    /** Run async validators for a single field path. */
-    validateField(name: string): Promise<boolean>;
-    /** Run all sync + async validators and update errors. */
-    validate(): Promise<boolean>;
-    /** Helper for dynamic arrays stored under one form field. */
-    array<T extends FormValue = FormValue>(name: keyof V & string): FieldArrayApi<T>;
-    /** Reset to defaults. */
-    reset(): void;
+    validating: Signal<boolean>;
+    isValid: Computed<boolean>;
+    onInput(event: Event): void;
+    onBlur(event: Event): void;
+    onSubmit(handler: (values: Readonly<V>, event: SubmitEvent) => void | Promise<void>): (event: SubmitEvent) => void;
+    setField<K extends Extract<keyof V, string>>(name: K, value: V[K]): void;
+    reset(nextInitial?: V): void;
+    validate(form?: HTMLFormElement | null): Promise<boolean>;
 }
-export declare function useForm<V extends FormValues>(schema: Schema, options?: UseFormOptions<V>): FormApi<V>;
+export declare function useForm<V extends FormValues>(options: UseFormOptions<V>): FormApi<V>;
+//# sourceMappingURL=forms.d.ts.map

package/dist/src/forms.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"forms.d.ts","sourceRoot":"","sources":["../../src/forms.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAoB,KAAK,QAAQ,EAAE,KAAK,MAAM,EAAE,MAAM,aAAa,CAAC;AAG3E,MAAM,MAAM,SAAS,GAAG,OAAO,CAAC;AAChC,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AACjD,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,IAAI,OAAO,CACjE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CACvB,CAAC;AACF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,IAAI,OAAO,CAClE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CACxB,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC;CAC9B;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,UAAU,IAAI,CAChD,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,EACnB,OAAO,EAAE,qBAAqB,KAC3B,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;AAE1D,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,UAAU;IAClD,OAAO,EAAE,CAAC,CAAC;IACX,QAAQ,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS,UAAU;IAC3C,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IAClB,MAAM,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAChC,OAAO,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAChC,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAC5B,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC3B,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAC5B,MAAM,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAC3B,QAAQ,CACN,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,GACzE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,CAAC,SAAS,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACzE,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,IAAI,CAAC,EAAE,eAAe,GAAG,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;CAC3D;AAID,wBAAgB,OAAO,CAAC,CAAC,SAAS,UAAU,EAC1C,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,GACzB,OAAO,CAAC,CAAC,CAAC,CAuJZ"}