@neeloong/form 0.7.0 → 0.8.0

package/index.mjs

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.7.0
+* @neeloong/form v0.8.0
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -13,7 +13,7 @@ export { Signal } from 'signal-polyfill';
  *
  * @param {Store} self
  * @param {boolean?} [defState]
- * @param {boolean | ((store: Store, root: Store) => boolean?) | null} [fn]
+ * @param {boolean | ((store: Store) => boolean?) | null} [fn]
  * @param {Signal.Computed<boolean>?} [parent]
  * @returns {[Signal.State<boolean?>, Signal.Computed<boolean>]}
  */
@@ -23,7 +23,7 @@ const createBooleanStates = (self, defState, fn, parent) => {
 	/** @type {Signal.Computed<boolean>} */
 	let scriptState;
 	if (typeof fn === 'function') {
-		scriptState = new Signal.Computed(() => Boolean(fn(self, self.root)));
+		scriptState = new Signal.Computed(() => Boolean(fn(self)));
 	} else {
 		const def = Boolean(fn);
 		scriptState = new Signal.Computed(() => def);
@@ -46,6 +46,8 @@ const createBooleanStates = (self, defState, fn, parent) => {
 const string = v => typeof v === 'string' && v || null;
 /** @param {*} v  */
 const number = v => typeof v === 'number' && v || null;
+/** @param {*} v  */
+const regex = v =>v instanceof RegExp ? v : null;
 
 /** @type {(v: Schema.Value | Schema.Value.Group | null) => v is Schema.Value | Schema.Value.Group} */
 const valueFilter = /** @type {*} */(Boolean);
@@ -85,7 +87,7 @@ const values = v => {
  * @param {Store} self
  * @param {(v: any) => any?} toValue
  * @param {T?} [defState]
- * @param {T | ((store: Store, root: Store) => T?) | null} [fn]
+ * @param {T | ((store: Store) => T?) | null} [fn]
  * @returns {[Signal.State<T?>, Signal.Computed<T?>]}
  */
 function createState(self, toValue, defState, fn) {
@@ -94,8 +96,8 @@ function createState(self, toValue, defState, fn) {
 	/** @type {Signal.Computed<T>} */
 	let scriptState;
 	if (typeof fn === 'function') {
-		const f = /** @type {(store: Store, root: Store) => T?} */(fn);
-		scriptState = new Signal.Computed(() => toValue(f(self, self.root)));
+		const f = /** @type {(store: Store) => T?} */(fn);
+		scriptState = new Signal.Computed(() => toValue(f(self)));
 	} else {
 		const def = toValue(fn);
 		scriptState = new Signal.Computed(() => def);
@@ -186,8 +188,99 @@ function setStore$1(type, Class) {
 	TypeStores[type] = Class;
 }
 
+/** @import Store from './Store.mjs' */
+/** @import { AsyncValidator, Validator } from '../types.mjs' */
+/**
+ * 
+ * @param {*} v 
+ */
+function toResult(v) {
+	if (!v) { return ''; }
+	if (v instanceof Error) { return v.message; }
+	if (typeof v !== 'string') { return ''; }
+	return v;
+
+}
+/**
+ * 
+ * @param {Store} store 
+ * @param  {...Validator | undefined | null | (Validator | undefined | null)[]} validators 
+ * @returns 
+ */
+function createValidator(store, ...validators) {
+	const allValidators = validators.flat().filter(v => typeof v === 'function');
+	if (!allValidators.length) {
+		return new Signal.Computed(() => /** @type {string[]} */([]));
+	}
+	return new Signal.Computed(() => {
+		const results = [];
+		for (const validator of allValidators) {
+			try {
+				results.push(validator(store));
+			} catch (e){
+				results.push(e);
+			}
+		}
+		return results.flat().map(toResult).filter(Boolean);
+	})
+}
+/**
+ * 
+ * @param {Store} store 
+ * @param  {...AsyncValidator | undefined | null | (AsyncValidator | undefined | null)[]} validators 
+ * @returns {[exec: () => Promise<string[]>, state: Signal.Computed<string[]>, stop: () => void]}
+ */
+function createAsyncValidator(store, ...validators) {
+	const allValidators = validators.flat().filter(v => typeof v === 'function');
+	if (!allValidators.length) {
+		return [
+			()=>Promise.resolve([]),
+			new Signal.Computed(() => /** @type {string[]} */([])),
+			() => {}
+		];
+	}
+	const st = new Signal.State(/** @type {string[]} */([]));
+	/**
+	 * 
+	 * @param {AsyncValidator} validator 
+	 * @param {AbortSignal} signal 
+	 */
+	async function run(validator, signal) {
+		let results = [];
+		try {
+			results.push(await validator(store, signal));
+		} catch (e){
+			results.push(e);
+		}
+		const list = results.flat().map(toResult).filter(Boolean);
+		if (!signal.aborted && list.length) { st.set([...st.get(), ...list]); }
+		return list;
+	}
+	/** @type {AbortController?} */
+	let ac = null;
+	function exec() {
+		ac?.abort();
+		ac = new AbortController();
+		const signal = ac.signal;
+		st.set([]);
+		
+		return Promise.all(allValidators.map(f => run(f, signal))).then(v => v.flat());
+	}
+	return [exec, new Signal.Computed(() => st.get()), () => {ac?.abort(); st.set([]);}]
+}
+
+/**
+ * 
+ * @param  {...Signal.Computed<string[]>} v 
+ * @returns 
+ */
+function merge(...v) {
+	const list = /** @type {Signal.Computed<string[]>[]} */(v.filter(Boolean));
+	return new Signal.Computed(() => list.flatMap(v => v.get()));
+}
+
 /** @import { Ref } from './ref.mjs' */
-/** @import { Schema } from '../types.mjs' */
+/** @import { AsyncValidator, Schema, Validator } from '../types.mjs' */
 
 /**
  * @template [T=any]
@@ -272,7 +365,12 @@ class Store {
 	 * @param {number} [options.min] 日期、时间、数字的最小值
 	 * @param {number} [options.max] 日期、时间、数字的最大值
 	 * @param {number} [options.step] 日期、时间、数字的步长
+	 * @param {number} [options.minLength] 
+	 * @param {number} [options.maxLength] 
+	 * @param {RegExp} [options.pattern] 
 	 * @param {(Schema.Value.Group | Schema.Value | string | number)[]} [options.values] 可选值
+	 * @param {Validator | Validator[] | null} [options.validator]
+	 * @param {{[k in keyof Schema.Events]?: AsyncValidator | AsyncValidator[] | null}} [options.validators]
 	 * 
 	 * @param {Ref?} [options.ref]
 	 * 
@@ -286,9 +384,10 @@ class Store {
 	constructor(schema, {
 		null: isNull, state, ref,
 		setValue, setState, convert, onUpdate, onUpdateState,
+		validator, validators,
 		index, length, new: isNew, parent: parentNode,
 		hidden, clearable, required, disabled, readonly,
-		label, description, placeholder, min, max, step, values: values$1
+		label, description, placeholder, min, max, step, minLength, maxLength, pattern, values: values$1
 	} = {}) {
 		this.schema = schema;
 		this.#state.set(typeof state === 'object' && state || {});
@@ -320,7 +419,7 @@ class Store {
 		/** @type {Signal.Computed<boolean>} */
 		let readonlyScript;
 		if (typeof readonlyFn === 'function') {
-			readonlyScript = new Signal.Computed(() => Boolean(readonlyFn(this, this.root)));
+			readonlyScript = new Signal.Computed(() => Boolean(readonlyFn(this)));
 		} else {
 			const def = Boolean(readonlyFn);
 			readonlyScript = new Signal.Computed(() => def);
@@ -347,9 +446,25 @@ class Store {
 		[this.#selfMin, this.#min] = createState(this, number, min, schema.min);
 		[this.#selfMax, this.#max] = createState(this, number, max, schema.max);
 		[this.#selfStep, this.#step] = createState(this, number, step, schema.step);
+		[this.#selfMinLength, this.#minLength] = createState(this, number, minLength, schema.minLength);
+		[this.#selfMaxLength, this.#maxLength] = createState(this, number, maxLength, schema.maxLength);
+		[this.#selfPattern, this.#pattern] = createState(this, regex, pattern, schema.pattern);
 		// @ts-ignore
 		[this.#selfValues, this.#values] = createState(this, values, values$1, schema.values);
 
+		const validatorResult = createValidator(this, schema.validator, validator);
+
+		const [changed, changedResult, cancelChange] = createAsyncValidator(this, schema.validators?.change, validators?.change);
+		const [blurred, blurredResult, cancelBlur] = createAsyncValidator(this, schema.validators?.blur, validators?.blur);
+		this.listen('change', () => {changed();});
+		this.listen('blur', () => {blurred();});
+		this.#errors = merge(validatorResult, changedResult, blurredResult);
+		this.#validatorResult = validatorResult;
+		this.#changed = changed;
+		this.#blurred = blurred;
+		this.#cancelChange = cancelChange;
+		this.#cancelBlur = cancelBlur;
+		
 		if (length instanceof Signal.State || length instanceof Signal.Computed) {
 			this.#length = length;
 		} else {
@@ -534,6 +649,33 @@ class Store {
 	get step() { return this.#step.get(); }
 	set step(v) { this.#selfStep.set(number(v)); }
 
+	/** @readonly @type {Signal.State<number?>} */
+	#selfMinLength
+	/** @readonly @type {Signal.Computed<number?>} */
+	#minLength
+	get selfMinLength() { return this.#selfMinLength.get(); }
+	set selfMinLength(v) { this.#selfMinLength.set(number(v)); }
+	get minLength() { return this.#minLength.get(); }
+	set minLength(v) { this.#selfMinLength.set(number(v)); }
+
+	/** @readonly @type {Signal.State<number?>} */
+	#selfMaxLength
+	/** @readonly @type {Signal.Computed<number?>} */
+	#maxLength
+	get selfMaxLength() { return this.#selfMaxLength.get(); }
+	set selfMaxLength(v) { this.#selfMaxLength.set(number(v)); }
+	get maxLength() { return this.#maxLength.get(); }
+	set maxLength(v) { this.#selfMaxLength.set(number(v)); }
+
+	/** @readonly @type {Signal.State<RegExp?>} */
+	#selfPattern
+	/** @readonly @type {Signal.Computed<RegExp?>} */
+	#pattern
+	get selfPattern() { return this.#selfPattern.get(); }
+	set selfPattern(v) { this.#selfPattern.set(regex(v)); }
+	get pattern() { return this.#pattern.get(); }
+	set pattern(v) { this.#selfPattern.set(regex(v)); }
+
 
 	/** @readonly @type {Signal.State<(Schema.Value.Group | Schema.Value)[] | null>} */
 	#selfValues
@@ -544,6 +686,22 @@ class Store {
 	get values() { return this.#values.get(); }
 	set values(v) { this.#selfValues.set(values(v)); }
 
+
+	/** @type {Signal.Computed<string[]>} */
+	#errors
+	/** @type {Signal.Computed<string[]>} */
+	#validatorResult
+	/** @type {() => Promise<string[]>} */
+	#changed
+	/** @type {() => Promise<string[]>} */
+	#blurred
+	/** @type {() => void} */
+	#cancelChange
+	/** @type {() => void} */
+	#cancelBlur
+	get errors() { return this.#errors.get(); }
+	get error() { return this.#errors.get()[0]; }
+
 	/** @returns {IterableIterator<[key: string | number, value: Store]>} */
 	*[Symbol.iterator]() {}
 	/**
@@ -564,7 +722,8 @@ class Store {
 
 	get value() { return this.#value.get(); }
 	set value(v) {
-		const val = this.#setValue?.(v) || v;
+		const newValue = this.#setValue?.(v);
+		const val = newValue === undefined ? v : newValue;
 		this.#value.set(val);
 		if (!this.#set) {
 			this.#initValue.set(val);
@@ -575,7 +734,8 @@ class Store {
 
 	get state() { return this.#state.get(); }
 	set state(v) {
-		const sta = this.#setState?.(v) || v;
+		const newState = this.#setState?.(v);
+		const sta = newState === undefined ? v : newState;
 		this.#state.set(sta);
 		this.#onUpdateState?.(sta, this.#index.get(), this);
 		this.#requestUpdate();
@@ -594,21 +754,31 @@ class Store {
 	}
 	/**
 	 * 
-	 * @param {*} value 
+	 * @param {*} v 
 	 * @returns 
 	 */
-	#reset(value) {
-		this.#value.set(value);
-		this.#initValue.set(value);
+	#reset(v) {
+		const newValue = this.#setValue?.(v);
+		const value = newValue === undefined ? v : newValue;
+		this.#cancelChange();
+		this.#cancelBlur();
+		this.#set = true;
 		if (!value || typeof value !== 'object') {
 			for (const [, field] of this) {
 				field.#reset(null);
 			}
-			return;
+			this.#value.set(value);
+			this.#initValue.set(value);
+			return value;
 		}
+		/** @type {*} */
+		const newValues = Array.isArray(value) ? [...value] : {...value};
 		for (const [key, field] of this) {
-			field.#reset(value[key]);
+			newValues[key] = field.#reset(newValues[key]);
 		}
+		this.#value.set(newValues);
+		this.#initValue.set(newValues);
+		return newValues;
 	}
 
 
@@ -670,7 +840,39 @@ class Store {
 		}
 		return [val, sta];
 	}
-
+	/**
+	 * 
+	 * @overload
+	 * @param {null} [path]
+	 * @returns {Promise<string[] | null>}
+	 */
+	/**
+	 * @overload
+	 * @param {(string | number)[]} path 
+	 * @returns {Promise<{ path: (string | number)[]; store: Store; errors: string[]}[]>}
+	 */
+	/**
+	 * 
+	 * @param {(string | number)[]?} [path] 
+	 * @returns {Promise<string[] | { path: (string | number)[]; store: Store; errors: string[] | null;}[] | null>}
+	 */
+	validate(path) {
+		if (!Array.isArray(path)) {
+			return Promise.all([this.#validatorResult.get(), this.#changed(), this.#blurred()])
+				.then(v => {
+					const errors = v.flat();
+					return errors.length ? errors : null
+				});
+		}
+		const list = [this.validate().then(errors => {
+			if (!errors?.length) {return [];}
+			return [{path: [...path], store: /** @type {Store} */(this), errors}]
+		})];
+		for (const [key, field] of this) {
+			list.push(field.validate([...path, key]));
+		}
+		return Promise.all(list).then(v => v.flat())
+	}
 }
 
 /** @import { Schema } from '../types.mjs' */
@@ -1913,12 +2115,18 @@ const bindable = {
 	min: true,
 	max: true,
 	step: true,
+	minLength: true,
+	maxLength: true,
+	pattern: true,
 	values: true,
 
 	null: true,
 	index: true,
 	no: true,
 	length: true,
+
+	error: true,
+	errors: true,
 };
 /** @type {Set<keyof typeof bindable>} */
 // @ts-ignore
@@ -1940,6 +2148,8 @@ function *toItem(val, key = '', sign = '$') {
 	yield [`${key}${sign}value`, {get: () => val.value, set: v => val.value = v}];
 	yield [`${key}${sign}state`, {get: () => val.state, set: v => val.state = v}];
 	yield [`${key}${sign}reset`, {exec: () => val.reset()}];
+	// @ts-ignore
+	yield [`${key}${sign}validate`, {exec: v => val.validate(v ? [] : null)}];
 	if (!(val instanceof ArrayStore)) { return; }
 	yield [`${key}${sign}insert`, {exec: (index, value) => val.insert(index, value)}];
 	yield [`${key}${sign}add`, {exec: (v) => val.add(v)}];
@@ -2210,6 +2420,9 @@ class Environment {
 			'$click': v => {store.emit('click', v); },
 			'$focus': v => {store.emit('focus', v); },
 			'$blur': v => {store.emit('blur', v); },
+			'$reset': v => {store.reset(); },
+			// @ts-ignore
+			'$validate': v => {store.validate(v ? [] : null); },
 		}
 	}
 
@@ -2820,6 +3033,7 @@ class EventEmitter {
 }
 
 /** @import { Component } from '../types.mjs' */
+/** @import Store from '../Store/index.mjs' */
 /** @import Environment from './Environment/index.mjs' */
 
 
@@ -2944,9 +3158,10 @@ const eventFilters = {
  * 
  * @param {Component | string} component 
  * @param {Environment} env 
+ * @param {((store: Store, el: Element) => () => void)?} [relate]
  * @returns 
  */
-function createContext(component, env) {
+function createContext(component, env, relate) {
 	const tag = typeof component === 'string' ? component : component.tag;
 	const { attrs, events } = typeof component !== 'string' && component || { attrs: null, events: null };
 
@@ -2958,7 +3173,8 @@ function createContext(component, env) {
 	const attrStates = Object.create(null);
 	const tagAttrs = Object.create(null);
 
-	const attrWatchers = new Set();
+	/** @type {Set<() => void>} */
+	const cancelFns = new Set();
 
 	/** @type {[string, ($event: any) => void, AddEventListenerOptions][]} */
 	const allEvents = [];
@@ -2978,13 +3194,28 @@ function createContext(component, env) {
 				old = v;
 				fn(v, o, name);
 			}, true);
-			attrWatchers.add(w);
+			cancelFns.add(w);
 
 			return () => {
-				attrWatchers.delete(w);
+				cancelFns.delete(w);
 				w();
 			};
 		},
+		relate(el) {
+			if (!relate || destroyed) { return () => { }; }
+			try {
+				const w = relate(env.store, el);
+				if (typeof w !== 'function') { return () => { }; }
+				cancelFns.add(w);
+				return () => {
+					cancelFns.delete(w);
+					w();
+				};
+			} catch {
+				return () => { };
+			}
+
+		},
 		get destroyed() { return destroyedState.get(); },
 		get init() { return mountedState.get(); },
 		listen(name, listener) { return stateEmitter.listen(name, listener); },
@@ -3053,7 +3284,7 @@ function createContext(component, env) {
 			if (destroyed) { return; }
 			destroyed = true;
 			destroyedState.set(true);
-			for (const w of attrWatchers) {
+			for (const w of cancelFns) {
 				w();
 			}
 			stateEmitter.emit('destroy');
@@ -3703,9 +3934,10 @@ function bindBase(handler, env, bind) {
  * @param {Environment} env
  * @param {Record<string, [Layout.Node, Environment]>} templates
  * @param {string[]} componentPath
+ * @param {((store: Store, el: Element) => () => void)?} [relate]
  * @param {Component.Getter?} [getComponent]
  */
-function renderItem(layout, parent, next, env, templates, componentPath, getComponent) {
+function renderItem(layout, parent, next, env, templates, componentPath, relate, getComponent) {
 	env = env.set(layout.aliases, layout.vars);
 	const bind = layout.directives.bind;
 	const fragment = layout.directives.fragment;
@@ -3714,18 +3946,18 @@ function renderItem(layout, parent, next, env, templates, componentPath, getComp
 		if (!template) { return () => {}; }
 		const [templateLayout, templateEnv] = template;
 		const newEnv = templateEnv.params(templateLayout, layout, env, bind);
-		return render(templateLayout, parent, next, newEnv, templates, componentPath, getComponent);
+		return render(templateLayout, parent, next, newEnv, templates, componentPath, relate, getComponent);
 	}
 	if (!layout.name || layout.directives.fragment) {
 		return renderFillDirectives(parent, next, env, layout.directives) || 
 			renderList(layout.children || [], parent, next, env, templates, (layout, templates) => {
-				return render(layout, parent, next, env, templates, componentPath, getComponent);
+				return render(layout, parent, next, env, templates, componentPath, relate, getComponent);
 			});
 	}
 	const path = [...componentPath, layout.name];
 	const component = getComponent?.(path);
 	if (getComponent && !component) { return () => { }; }
-	const { context, handler } = createContext(component ? component : layout.name, env);
+	const { context, handler } = createContext(component ? component : layout.name, env, relate);
 
 
 	const componentAttrs = component?.attrs;
@@ -3752,7 +3984,7 @@ function renderItem(layout, parent, next, env, templates, componentPath, getComp
 	const children = slot ? 
 		renderFillDirectives(slot, null, env, layout.directives)
 		|| renderList(layout.children || [], slot, null, env,  templates, (layout, templates) => {
-			return render(layout, slot, null, env, templates, componentPath, getComponent);
+			return render(layout, slot, null, env, templates, componentPath, relate, getComponent);
 		}) : () => {};
 
 
@@ -3777,16 +4009,17 @@ function renderItem(layout, parent, next, env, templates, componentPath, getComp
  * @param {Environment} env
  * @param {Record<string, [Layout.Node, Environment]>} templates
  * @param {string[]} componentPath
+ * @param {((store: Store, el: Element) => () => void)?} [relate]
  * @param {Component.Getter?} [getComponent]
  * @returns {() => void}
  */
-function render(layout, parent, next, env, templates, componentPath, getComponent) {
+function render(layout, parent, next, env, templates, componentPath, relate, getComponent) {
 	const { directives } = layout;
 	const newEnv = env.child(directives.value);
 	if (!newEnv) { return () => {}; }
 	const list = newEnv.enum(directives.enum);
 	/** @type {(next: Node | null, env: any) => () => void} */
-	const r = (next, env) => renderItem(layout, parent, next, env, templates, componentPath, getComponent);
+	const r = (next, env) => renderItem(layout, parent, next, env, templates, componentPath, relate, getComponent);
 	if (list === true) {
 		return r(next, newEnv);
 	}
@@ -3803,37 +4036,21 @@ function render(layout, parent, next, env, templates, componentPath, getComponen
 }
 
 /**
- * @overload
  * @param {Store} store
  * @param {(Layout.Node | string)[]} layouts 
  * @param {Element} parent 
- * @param {Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }>} [global] 
- * @param {(path: string[]) => Component?} [components] 
- * @returns {() => void}
- */
-/**
- * @overload
- * @param {Store} store
- * @param {(Layout.Node | string)[]} layouts 
- * @param {Element} parent 
- * @param {Component.Getter?} [components] 
+ * @param {object} [options] 
+ * @param {Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }>} [options.global] 
+ * @param {(path: string[]) => Component?} [options.component] 
+ * @param {(store: Store, el: Element) => () => void} [options.relate]
  * @returns {() => void}
  */
-/**
- * @param {Store} store
- * @param {(Layout.Node | string)[]} layouts 
- * @param {Element} parent 
- * @param {Component.Getter | Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }> | null} [opt1] 
- * @param {Component.Getter | Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }> | null} [opt2] 
- */
-function index (store, layouts, parent, opt1, opt2) {
-	const options = [opt1, opt2];
-	const components = options.find(v => typeof v === 'function');
-	const global = options.find(v => typeof v === 'object');
+function index (store, layouts, parent, {component, global, relate} = {}) {
 	const env = new Environment(store, global);
 	const templates = Object.create(null);
+	const relateFn = typeof relate  === 'function' ? relate : null;
 	return renderList(layouts, parent, null, env, templates, (layout, templates) => {
-		return render(layout, parent, null, env, templates, [], components);
+		return render(layout, parent, null, env, templates, [], relateFn, component);
 	});
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neeloong/form",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "",
   "keywords": [
     "from",