@neeloong/form 0.4.0 → 0.4.2

package/README.md

@@ -197,6 +197,10 @@ render(store, layouts, app);
    - `$max` 只读属性
    - `$step` 只读属性
    - `$values` 只读属性
+   - `$type` 只读属性
+   - `$meta` 只读属性
+   - `$component` 只读属性
+   - `$kind` 只读属性
 1. 数组字段扩展隐式函数（只在事件中可用）
    - `$insert(index, value)`
    - `$add(value)`

package/index.d.mts

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.4.0
+* @neeloong/form v0.4.2
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -79,7 +79,7 @@ declare namespace index_d {
 
 type VerifyError = any;
 type Component = {
-    tag: string | ((ctx: any) => Element);
+    tag: string | ((ctx: any) => Element | [Element, (Element | null)?]);
     is?: string | undefined;
     attrs?: Record<string, Component.Attr> | undefined;
     events?: Record<string, Component.Event> | undefined;
@@ -156,25 +156,22 @@ declare namespace Schema {
         type?: null | undefined;
         props?: Record<string, Schema.Field> | undefined;
         array?: boolean | undefined;
-        meta?: any;
     };
     type Type = {
         type: string;
         props?: null | undefined;
         array?: boolean | undefined;
-        meta?: any;
     };
     type Event = {
-        input?: Function | null | undefined;
-        change?: Function | null | undefined;
-        click?: Function | null | undefined;
-        focus?: Function | null | undefined;
-        blur?: Function | null | undefined;
-        add?: Function | null | undefined;
-        remove?: Function | null | undefined;
-        move?: Function | null | undefined;
+        input: InputEvent;
+        change: InputEvent;
+        click: Event;
+        focus: Event;
+        blur: Event;
     };
     type Attr = {
+        meta?: any;
+        component?: any;
         immutable?: boolean | undefined;
         creatable?: boolean | undefined;
         hidden?: boolean | ((store: Store, root: Store) => boolean) | null | undefined;
@@ -210,6 +207,13 @@ declare namespace Schema {
          * 可选值
          */
         values?: (Schema.Value.Define | Schema.Value.Group.Define)[] | undefined;
+        events?: {
+            input?: ((this: Store, value: InputEvent, store: Store) => void | boolean | null) | null | undefined;
+            change?: ((this: Store, value: InputEvent, store: Store) => void | boolean | null) | null | undefined;
+            click?: ((this: Store, value: Event, store: Store) => void | boolean | null) | null | undefined;
+            focus?: ((this: Store, value: Event, store: Store) => void | boolean | null) | null | undefined;
+            blur?: ((this: Store, value: Event, store: Store) => void | boolean | null) | null | undefined;
+        } | undefined;
     };
 }
 
@@ -280,10 +284,30 @@ declare class Store<T = any> {
         onUpdate?: ((value: T | null, index: any) => void) | null | undefined;
         onUpdateState?: ((value: T | null, index: any) => void) | null | undefined;
     });
+    /**
+     *
+     * @template {keyof Schema.Event} K
+     * @param {K} event
+     * @param  {Schema.Event[K]} value
+     */
+    emit<K extends keyof Schema.Event>(event: K, value: Schema.Event[K]): boolean;
+    /**
+     *
+     * @template {keyof Schema.Event} K
+     * @param {K} event
+     * @param  {(this: this, p: Schema.Event[K], store: this) => void | boolean | null} listener
+     * @returns {() => void}
+     */
+    listen<K extends keyof Schema.Event>(event: K, listener: (this: this, p: Schema.Event[K], store: this) => void | boolean | null): () => void;
     get null(): boolean;
+    get kind(): string;
     schema: Schema.Field;
+    get store(): this;
     get parent(): Store<any> | null;
     get root(): Store<any>;
+    get type(): any;
+    get meta(): any;
+    get component(): any;
     set length(v: number);
     get length(): number;
     set index(v: string | number);

package/index.js

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.4.0
+* @neeloong/form v0.4.2
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -693,6 +693,43 @@
    * @template [T=any]
    */
   class Store {
+  	/** @type {Map<string, Set<(value: any, store: any) => void | boolean | null>>} */
+  	#events = new Map()
+  	/**
+  	 * 
+  	 * @template {keyof Schema.Event} K
+  	 * @param {K} event 
+  	 * @param  {Schema.Event[K]} value 
+  	 */
+  	emit(event, value) {
+  		const key = typeof event === 'number' ? String(event) : event;
+  		const events = this.#events;
+  		let canceled = false;
+  		for (const d of [...events.get(key) || []]) {
+  			canceled = d(value, this) === false || canceled;
+  		}
+  		return !canceled;
+  	}
+  	/**
+  	 * 
+  	 * @template {keyof Schema.Event} K
+  	 * @param {K} event 
+  	 * @param  {(this: this, p: Schema.Event[K], store: this) => void | boolean | null} listener
+  	 * @returns {() => void}
+  	 */
+  	listen(event, listener) {
+  		const fn = listener.bind(this);
+  		const events = this.#events;
+  		const key = typeof event === 'number' ? String(event) : event;
+  		let set = events.get(key);
+  		if (!set) {
+  			set = new Set();
+  			events.set(key, set);
+  		}
+  		set.add(fn);
+  		return () => { set?.delete(fn); }
+
+  	}
   	/**
   	 * @param {Schema} schema
   	 * @param {object} [options] 
@@ -703,6 +740,7 @@
   	}
   	#null = false;
   	get null() { return this.#null; }
+  	get kind() { return ''; }
   	/**
   	 * @param {Schema.Field} schema
   	 * @param {object} options 
@@ -747,6 +785,9 @@
   			this.#root = parent.#root;
   			// TODO: 事件向上冒泡
   		}
+  		this.#type = schema.type;
+  		this.#meta = schema.meta;
+  		this.#component = schema.component;
 
   		const selfNewState = new exports.Signal.State(Boolean(isNew));
   		this.#selfNew = selfNewState;
@@ -807,6 +848,13 @@
   		this.#convert = typeof convert === 'function' ? convert : null;
   		this.#length.set(length || 0);
   		this.#index.set(index ?? '');
+  		
+  		for (const [k, f] of Object.entries(schema.events || {})) {
+  			if (typeof f !== 'function') { continue; }
+  			// @ts-ignore
+  			this.listen(k, f);
+  		}
+  		
 
   	}
   	#destroyed = false;
@@ -824,8 +872,18 @@
   	#parent = null;
   	/** @readonly @type {Store} */
   	#root = this;
+  	/** @readonly @type {any} */
+  	#type;
+  	/** @readonly @type {any} */
+  	#meta;
+  	/** @readonly @type {any} */
+  	#component;
+  	get store() { return this; }
   	get parent() { return this.#parent; }
   	get root() { return this.#root; }
+  	get type() { return this.#type; }
+  	get meta() { return this.#meta; }
+  	get component() { return this.#component; }
 
   	#length = new exports.Signal.State(0);
   	get length() { return this.#length.get(); }
@@ -1110,6 +1168,7 @@
 
 
   class ObjectStore extends Store {
+  	get kind() { return 'object'; }
   	/** @type {Record<string, Store>} */
   	#children
   	*[Symbol.iterator]() {yield* Object.entries(this.#children);}
@@ -1200,6 +1259,7 @@
   		}
   		return children[Number(key)] || null;
   	}
+  	get kind() { return 'array'; }
   	/**
   	 * @param {Schema.Field} schema
   	 * @param {object} [options] 
@@ -2324,8 +2384,24 @@
   }
 
   const bindable = {
+  	type: true,
+  	meta: true,
+  	component: true,
+  	kind: true,
+
+  	value: true,
+  	state: true,
+
+  	store: true,
+  	parent: true,
+  	root: true,
+
+  	schema: true,
+
   	new: true,
   	readonly: true,
+  	creatable: true,
+  	immutable: true,
 
   	required: true,
   	clearable: true,
@@ -2339,6 +2415,11 @@
   	max: true,
   	step: true,
   	values: true,
+
+  	null: true,
+  	index: true,
+  	no: true,
+  	length: true,
   };
   /** @type {Set<keyof typeof bindable>} */
   // @ts-ignore
@@ -2353,21 +2434,12 @@
    */
   function *toItem(val, key = '', sign = '$') {
   	yield [`${key}`, {get: () => val.value, set: v => val.value = v, store: val}];
-  	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}store`, {get: () => val}];
-  	yield [`${key}${sign}schema`, {get: () => val.schema}];
-  	yield [`${key}${sign}null`, {get: () => val.null}];
-  	yield [`${key}${sign}index`, {get: () => val.index}];
-  	yield [`${key}${sign}no`, {get: () => val.no}];
-  	yield [`${key}${sign}length`, {get: () => val.length}];
-  	yield [`${key}${sign}creatable`, {get: () => val.creatable}];
-  	yield [`${key}${sign}immutable`, {get: () => val.immutable}];
-
 
   	for (const k of bindableSet) {
   		yield [`${key}${sign}${k}`, {get: () => val[k]}];
   	}
+  	yield [`${key}${sign}value`, {get: () => val.value, set: v => val.value = v}];
+  	yield [`${key}${sign}state`, {get: () => val.state, set: v => val.state = v}];
   	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)}];
@@ -2547,10 +2619,11 @@
   		const item = this.#items[name];
   		if (!item?.get) { return; }
   		const { store } = item;
-  		if (!store) { return; }
-  		switch(type) {
-  			case 'value': return watch(() => store.value, cb);
-  			case 'state': return watch(() => store.state, cb);
+  		if (!store) {
+  			switch(type) {
+  				case 'value': return watch(() => item.get(), cb);
+  			}
+  			return;
   		}
   		// @ts-ignore
   		if (bindableSet.has(type)) {
@@ -2575,8 +2648,6 @@
   		const res = Object.fromEntries([...bindableSet].map(v => [
   			`$${v}`, cb => watch(() => store[v], cb)
   		]));
-  		res.$value = cb => watch(() => store.value, cb);
-  		res.$state = cb => watch(() => store.state, cb);
   		return res;
   	}
   	/**
@@ -2596,9 +2667,9 @@
   	}
   	/**
   	 * @param {string} name
-  	 * @returns {Record<string, ((value: any) => void) | void> | void} 
+  	 * @returns {Record<string, (value: any) => void> | void} 
   	 */
-  	bindStateAllSet(name) {
+  	bindEvents(name) {
   		const item = this.#items[name];
   		if (!item?.get) { return; }
   		const { store } = item;
@@ -2606,10 +2677,15 @@
   			const set = item.set;
   			if (typeof set !== 'function') { return; }
   			return { '$value': set }
-  		 }
+  		}
   		return {
   			'$value': v => {store.value = v; },
   			'$state': v => {store.state = v; },
+  			'$input': v => {store.emit('input', v); },
+  			'$change': v => {store.emit('change', v); },
+  			'$click': v => {store.emit('click', v); },
+  			'$focus': v => {store.emit('focus', v); },
+  			'$blur': v => {store.emit('blur', v); },
   		}
   	}
 
@@ -3011,9 +3087,8 @@
    * @param {Component.Handler} handler
    * @param {Environment} envs
    * @param {Record<string, string | {name: string} | Layout.Calc>} attrs
-   * @param {string | boolean | null} [bindValue]
    */
-  function bindBaseAttrs(handler, envs, attrs, bindValue) {
+  function bindBaseAttrs(handler, envs, attrs) {
   	const tag = handler.tag;
   	let bk = new Set();
   	for (const [name, attr] of Object.entries(attrs)) {
@@ -3029,16 +3104,6 @@
   		}
   		bk.add(envs.watch(attrSchema, val => handler.set(name, val)));
   	}
-  	if (bindValue && typeof bindValue !== 'boolean') {
-  		for (const [key, effect] of Object.entries(envs.bindAll(bindValue) || {})) {
-  			if (typeof effect !== 'function') { continue; }
-  			bk.add(effect(val => handler.set(key, val)));
-  		}
-  		for (const [key, setter] of Object.entries(envs.bindStateAllSet(bindValue) || {})) {
-  			if (typeof setter !== 'function') { continue; }
-  			handler.addEvent(key, $event => setter($event));
-  		}
-  	}
 
   	return ()=> {
   		const list = bk;
@@ -4045,6 +4110,34 @@
   	};
   }
 
+  /** @import { Component } from '../types.mjs' */
+
+
+  /**
+   * @param {Component.Handler} handler
+   * @param {Environment} env
+   * @param {string | boolean | null} [bind]
+   */
+  function bindBase(handler, env, bind) {
+  	if (!bind || typeof bind === 'boolean') { return () => {}; }
+  	let bk = new Set();
+  	for (const [key, effect] of Object.entries(env.bindAll(bind) || {})) {
+  		if (typeof effect !== 'function') { continue; }
+  		bk.add(effect(val => handler.set(key, val)));
+  	}
+  	for (const [key, setter] of Object.entries(env.bindEvents(bind) || {})) {
+  		handler.addEvent(key, $event => setter($event));
+  	}
+
+  	return ()=> {
+  		const list = bk;
+  		bk = new Set();
+  		for (const s of list) {
+  			s();
+  		}
+  	}
+  }
+
   /** @import Store from '../Store/index.mjs' */
 
   /**
@@ -4058,12 +4151,13 @@
    */
   function renderItem(layout, parent, next, env, templates, componentPath, getComponent) {
   	env = env.set(layout.aliases, layout.vars);
+  	const bind = layout.directives.bind;
   	const fragment = layout.directives.fragment;
   	if (fragment && typeof fragment === 'string') {
   		const template = templates[fragment];
   		if (!template) { return () => {}; }
   		const [templateLayout, templateEnv] = template;
-  		const newEnv = templateEnv.params(templateLayout, layout, env, layout.directives.bind);
+  		const newEnv = templateEnv.params(templateLayout, layout, env, bind);
   		return render(templateLayout, parent, next, newEnv, templates, componentPath, getComponent);
   	}
   	if (!layout.name || layout.directives.fragment) {
@@ -4080,14 +4174,17 @@
 
   	const componentAttrs = component?.attrs;
   	const attrs = componentAttrs
-  		? bindAttrs(handler, env, layout.attrs, componentAttrs, layout.directives.bind)
-  		: bindBaseAttrs(handler, env, layout.attrs, layout.directives.bind);
+  		? bindAttrs(handler, env, layout.attrs, componentAttrs, bind)
+  		: bindBaseAttrs(handler, env, layout.attrs);
 
   	for (const [name, event] of Object.entries(layout.events)) {
   		const fn = env.getEvent(event);
   		if (fn) { handler.addEvent(name, fn); }
   	}
 
+  	const base = bindBase(handler, env, bind);
+
+
   	const r = component ?
   		typeof component.tag === 'function'
   			? component.tag(context)
@@ -4113,6 +4210,7 @@
   		handler.destroy();
   		attrs();
   		children();
+  		base();
   	};
   }
   /**