@neeloong/form 0.25.0 → 0.26.0

package/index.mjs

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.25.0
+* @neeloong/form v0.26.0
 * (c) 2024-2026 Fierflame
 * @license Apache-2.0
 */
@@ -145,7 +145,8 @@ let ArrayStoreClass = null;
 let TypeStores = Object.create(null);
 /**
  * @template [M=any]
- * @param {Schema.Field<M>} schema
+ * @template {Object.<string, Schema.State>} [S=Object.<string, Schema.State>]
+ * @param {Schema.Field<M, S>} schema
  * @param {object} [options] 
  * @param {Store?} [options.parent]
  * @param {string | number | null} [options.index] 
@@ -299,6 +300,7 @@ function makeDefault(store, def) {
  * 管理单个表单字段的状态和行为
  * @template [T=any]
  * @template [M=any]
+ * @template {Object.<string, Schema.State>} [S=Object.<string, Schema.State>]
  */
 class Store {
 	/** @type {Map<string, Set<(value: any, store: any) => void | boolean | null>>} */
@@ -341,7 +343,8 @@ class Store {
 	/**
 	 * 从数据结构模式创建存储
 	 * @template [M=any]
-	 * @param {Schema<M>} schema 数据结构模式
+	 * @template {Object.<string, Schema.State>} [S=Object.<string, Schema.State>]
+	 * @param {Schema<M, S>} schema 数据结构模式
 	 * @param {object} [options] 选项
 	 * @param {boolean} [options.new] 是否为新建环境
 	 */
@@ -365,9 +368,10 @@ class Store {
 	#ref = null;
 	get ref() { return this.#ref || createRef(this); }
 	/**
-	 * @param {Schema.Field<M>} schema 字段的 Schema 定义
+	 * @param {Schema.Field<M, S>} schema 字段的 Schema 定义
 	 * @param {object} [options] 可选配置
 	 * @param {Store?} [options.parent] 
+	 * @param {Partial<S>?} [options.states] 
 	 * @param {((store: Store, value?: any) => any) | object | number | string | boolean | null | undefined} [options.default]
 	 * @param {number | string | null} [options.index] 
 	 * @param {number | Signal.State<number> | Signal.Computed<number>} [options.size] 
@@ -402,7 +406,7 @@ class Store {
 	 */
 	constructor(schema, {
 		null: isNull, ref, default: defaultValue,
-		setValue, convert, onUpdate,
+		setValue, convert, onUpdate, states,
 		validator, validators,
 		index, size, new: isNew, parent: parentNode,
 		hidden, clearable, required, disabled, readonly, removable,
@@ -480,6 +484,22 @@ class Store {
 
 		const validatorResult = createValidator(this, schema.validator, validator);
 
+
+		const schemaStates = schema.states;
+		this.#states = schemaStates ? Object.defineProperties(Object.create(null),
+			Object.fromEntries(
+				Object.entries(schemaStates).map(([k, { get, set, toState }]) => {
+					const state = new Signal.State(toState?.(states?.[k]));
+					const computed = new Signal.Computed(() => get(this, state));
+					return [k, {
+						configurable: true,
+						enumerable: true,
+						get() { return computed.get(); },
+						set(v) { return set?.(this, state, v); },
+					}];
+				})
+			)) : null;
+
 		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(); });
@@ -514,8 +534,11 @@ class Store {
 			this.listen(k, f);
 		}
 	}
+	/** @type {S?} */
+	#states;
+	get states() { return this.#states; }
 	/** @type {StoreLayout.Field<any>} */
-	#layout
+	#layout;
 	get layout() { return this.#layout; }
 	#createDefault;
 	/** @param {any} [value] @returns {any} */
@@ -691,9 +714,10 @@ class Store {
 	#selfMin;
 	/** @readonly @type {Signal.Computed<number?>} */
 	#min;
+	/** @deprecated */
 	get selfMin() { return this.#selfMin.get(); }
 	set selfMin(v) { this.#selfMin.set(number(v)); }
-	/** 数值字段的最小值限制 */
+	/** @deprecated 数值字段的最小值限制 */
 	get min() { return this.#min.get(); }
 	set min(v) { this.#selfMin.set(number(v)); }
 
@@ -702,9 +726,10 @@ class Store {
 	#selfMax;
 	/** @readonly @type {Signal.Computed<number?>} */
 	#max;
+	/** @deprecated */
 	get selfMax() { return this.#selfMax.get(); }
 	set selfMax(v) { this.#selfMax.set(number(v)); }
-	/** 数值字段的最大值限制 */
+	/** @deprecated 数值字段的最大值限制 */
 	get max() { return this.#max.get(); }
 	set max(v) { this.#selfMax.set(number(v)); }
 
@@ -713,9 +738,10 @@ class Store {
 	#selfStep;
 	/** @readonly @type {Signal.Computed<number?>} */
 	#step;
+	/** @deprecated */
 	get selfStep() { return this.#selfStep.get(); }
 	set selfStep(v) { this.#selfStep.set(number(v)); }
-	/** 数值字段的步长 */
+	/** @deprecated 数值字段的步长 */
 	get step() { return this.#step.get(); }
 	set step(v) { this.#selfStep.set(number(v)); }
 
@@ -723,9 +749,10 @@ class Store {
 	#selfMinLength;
 	/** @readonly @type {Signal.Computed<number?>} */
 	#minLength;
+	/** @deprecated */
 	get selfMinLength() { return this.#selfMinLength.get(); }
 	set selfMinLength(v) { this.#selfMinLength.set(number(v)); }
-	/** 最小长度 */
+	/** @deprecated 最小长度 */
 	get minLength() { return this.#minLength.get(); }
 	set minLength(v) { this.#selfMinLength.set(number(v)); }
 
@@ -733,9 +760,10 @@ class Store {
 	#selfMaxLength;
 	/** @readonly @type {Signal.Computed<number?>} */
 	#maxLength;
+	/** @deprecated */
 	get selfMaxLength() { return this.#selfMaxLength.get(); }
 	set selfMaxLength(v) { this.#selfMaxLength.set(number(v)); }
-	/** 最大长度 */
+	/** @deprecated 最大长度 */
 	get maxLength() { return this.#maxLength.get(); }
 	set maxLength(v) { this.#selfMaxLength.set(number(v)); }
 
@@ -743,9 +771,10 @@ class Store {
 	#selfPattern;
 	/** @readonly @type {Signal.Computed<RegExp?>} */
 	#pattern;
+	/** @deprecated */
 	get selfPattern() { return this.#selfPattern.get(); }
 	set selfPattern(v) { this.#selfPattern.set(regex(v)); }
-	/** 模式 */
+	/** @deprecated 模式 */
 	get pattern() { return this.#pattern.get(); }
 	set pattern(v) { this.#selfPattern.set(regex(v)); }
 
@@ -754,9 +783,10 @@ class Store {
 	#selfValues;
 	/** @readonly @type {Signal.Computed<(Schema.Value.Group | Schema.Value)[] | null>} */
 	#values;
+	/** @deprecated */
 	get selfValues() { return this.#selfValues.get(); }
 	set selfValues(v) { this.#selfValues.set(values(v)); }
-	/** 可选值列表 */
+	/** @deprecated 可选值列表 */
 	get values() { return this.#values.get(); }
 	set values(v) { this.#selfValues.set(values(v)); }
 
@@ -791,6 +821,40 @@ class Store {
 	#initValue = new Signal.State(/** @type {T?} */(null));
 	#value = new Signal.State(this.#initValue.get());
 
+	/**
+	 * @template [M=any]
+	 * @template {Object.<string, Schema.State>} [S=Object.<string, Schema.State>]
+	 * @param {Schema<M, S>} schema 数据结构模式
+	 */
+	bindObject(schema) {
+		const bindStores = this.#bindStores;
+		/** @type {Store[]} */
+		const list = [];
+		for (const [index, field] of Object.entries(schema)) {
+			const bindStore = create(field, {
+				index, parent: this,
+				/** @param {*} value @param {*} currentIndex @param {Store} store */
+				onUpdate: (value, currentIndex, store) => {
+					if (index !== currentIndex) { return; }
+					if (bindStores.has(store)) { return; }
+					const val = this.#value ?? null;
+					if (typeof val !== 'object' || Array.isArray(val)) { return }
+					// @ts-ignore
+					this.value = { ...val, [currentIndex]: value };
+				},
+			});
+			list.push(bindStore);
+			bindStores.set(bindStore, index);
+		}
+		this.#requestUpdate();
+		return () => {
+			for (const bindStore of list) {
+				bindStores.delete(bindStore);
+			}
+		};
+	}
+	/** @type {Map<Store, string>} */
+	#bindStores = new Map();
 
 	/** 内容是否已改变 */
 	get changed() { return !Object.is(this.#value.get(), this.#initValue.get()); }
@@ -837,6 +901,9 @@ class Store {
 			for (const [, field] of this) {
 				field.#reset(null, false);
 			}
+			for (const [field] of this.#bindStores) {
+				field.#reset(null, false);
+			}
 			this.#value.set(value);
 			this.#initValue.set(value);
 			this.#onUpdate?.(value, this.#index.get(), this);
@@ -847,6 +914,9 @@ class Store {
 		for (const [key, field] of this) {
 			newValues[key] = field.#reset(Object.hasOwn(newValues, key) ? newValues[key] : undefined, false);
 		}
+		for (const [field, key] of this.#bindStores) {
+			newValues[key] = field.#reset(Object.hasOwn(newValues, key) ? newValues[key] : undefined, false);
+		}
 		this.#value.set(newValues);
 		this.#initValue.set(newValues);
 		this.#onUpdate?.(newValues, this.#index.get(), this);
@@ -888,6 +958,15 @@ class Store {
 				newValues[key] = newData;
 				updated = true;
 			}
+			for (const [field, key] of this.#bindStores) {
+				// @ts-ignore
+				const data = Object.hasOwn(val, key) ? val[key] : undefined;
+				const newData = field.#toUpdate(data);
+				if (Object.is(data, newData)) { continue; }
+				// @ts-ignore
+				newValues[key] = newData;
+				updated = true;
+			}
 			if (updated) {
 				val = newValues;
 				initValue = val;
@@ -935,6 +1014,9 @@ class Store {
 		for (const [key, field] of this) {
 			list.push(field.validate([...selfPath, key]));
 		}
+		for (const [field, key] of this.#bindStores) {
+			list.push(field.validate([...selfPath, key]));
+		}
 		return Promise.all(list).then(v => v.flat());
 	}
 }
@@ -944,7 +1026,8 @@ class Store {
 /**
  * @template {Record<string, any>} [T=Record<string, any>]
  * @template [M=any]
- * @extends {Store<T, M>}
+ * @template {Object.<string, Schema.State>} [S=Object.<string, Schema.State>]
+ * @extends {Store<T, M, S>}
  */
 class ObjectStore extends Store {
 	get kind() { return 'object'; }
@@ -958,7 +1041,7 @@ class ObjectStore extends Store {
 	 */
 	child(key) { return this.#children[key] || null; }
 	/**
-	 * @param {Schema.Object<M> & Schema.Attr<M>} schema
+	 * @param {Schema.Object<M, S> & Schema.Attr<M, S>} schema
 	 * @param {object} [options] 
 	 * @param {Store?} [options.parent] 
 	 * @param {number | string | null} [options.index] 
@@ -1010,7 +1093,8 @@ setObjectStore(ObjectStore);
 /**
  * @template [T=any]
  * @template [M=any]
- * @extends {Store<(T | null)[], M>}
+ * @template {Object.<string, Schema.State>} [S=Object.<string, Schema.State>]
+ * @extends {Store<(T | null)[], M, S>}
  */
 class ArrayStore extends Store {
 	/** @type {(index: number, isNew?: boolean) => Store} */
@@ -1033,7 +1117,7 @@ class ArrayStore extends Store {
 	}
 	get kind() { return 'array'; }
 	/**
-	 * @param {Schema.Field<M>} schema
+	 * @param {Schema.Field<M, S>} schema
 	 * @param {object} [options] 
 	 * @param {Store?} [options.parent]
 	 * @param {string | number | null} [options.index] 
@@ -1102,6 +1186,8 @@ class ArrayStore extends Store {
 			return child;
 		};
 	}
+	/** @returns {never} */
+	bindObject() { throw new Error(`ArrayStore 不支持 bindObject()方法`); }
 
 
 	/** @readonly @type {Signal.State<boolean?>} */
@@ -4219,7 +4305,7 @@ function renderObject(parent, next, store, env, renderItem, sort) {
 	const children = [];
 	const childStores = [...store];
 	const count = childStores.length;
-	/** @type {[string, Store<any, any>, number][]} */
+	/** @type {[string, Store<any, any, any>, number][]} */
 	const stores = sort
 	? childStores
 		.map(([k,v]) => [k,v,env.setStore(v, store).exec(sort)])
@@ -4766,7 +4852,7 @@ function createFieldFilter(field) {
  * @param {StoreLayout.Options?} options
  * @param {StoreLayout<T>} layout 
  * @param {Node} [anchor]
- * @param {(child?: Store<any, any> | undefined) => void} [dragenter]
+ * @param {(child?: Store<any, any, any> | undefined) => void} [dragenter]
  * @returns {void}
  */
 function renderHtml(store, fieldRenderer, node, options, layout, anchor, dragenter) {
@@ -4779,27 +4865,49 @@ function renderHtml(store, fieldRenderer, node, options, layout, anchor, dragent
 			const mode = node.getAttribute('mode') || '';
 			const fieldStore = field ? store.child(field) : store;
 			if (!fieldStore) { return; }
-			const fieldLayout = field
-				? layout?.fields?.find(createFieldFilter(field)) || fieldStore.layout
-				: { ...layout, html: '' };
+			/** @type {HTMLElement?} */
+			let el = null;
 			switch (mode) {
 				case 'grid': {
-					const el = Form(store, fieldRenderer, fieldLayout, options);
-					if (el) { node.replaceWith(el); }
-					return;
+					const fieldLayout = field
+						? layout?.fields?.find(createFieldFilter(field)) || fieldStore.layout
+						: { ...layout, html: '' };
+					el = Form(fieldStore, fieldRenderer, fieldLayout, options);
+					break;
+				}
+				default: {
+					el = fieldRenderer(fieldStore, layout.renderer, options);
+					break;
 				}
 			}
-			const res = fieldRenderer(fieldStore, layout.renderer, options);
-			if (res) {
-				node.replaceWith(res);
+			if (!el) {
+				const value = node.getAttribute('placeholder') || '';
+				node.replaceWith(document.createTextNode(value));
 				return;
 			}
-			const value = node.getAttribute('placeholder') || '';
-			node.replaceWith(document.createTextNode(value));
+			const className = node.getAttribute('class') || '';
+			if (className) {
+				el.setAttribute('class', [
+					el.getAttribute('class') || '',
+					className,
+				].filter(Boolean).join(' '));
+			}
+			const style = node.getAttribute('style') || '';
+			if (style) {
+				el.setAttribute('style', [
+					el.getAttribute('style') || '',
+					style,
+				].filter(Boolean).join(' '));
+			}
+			node.replaceWith(el);
 			return;
 		}
 		if (tagName === 'nl-form-button') {
 			const button = document.createElement('button');
+			const className = node.getAttribute('class') || '';
+			const style = node.getAttribute('style') || '';
+			if (className) { button.setAttribute('class', className); }
+			if (style) { button.setAttribute('style', style); }
 			button.classList.add('NeeloongForm-item-button');
 			const click = node.getAttribute('click') || '';
 			const call = options?.call;
@@ -4987,7 +5095,7 @@ function getHtmlContent(html) {
 /**
  * 
  * @template T
- * @param {Store<any, any>} store 
+ * @param {Store<any, any, any>} store 
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {StoreLayout<T>} layout
  * @param {StoreLayout.Options?} options
@@ -5010,7 +5118,7 @@ function FormFieldInline(store, fieldRenderer, layout, options) {
 /**
  * 
  * @template T
- * @param {Store<any, any>} store 
+ * @param {Store<any, any, any>} store 
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {StoreLayout.Field<T>} layout
  * @param {object} option 
@@ -5089,12 +5197,12 @@ function Line(store, fieldRenderer, layout, {
 	}
 
 	for (const column of columns) {
-		const { actions, field, pattern } = column;
+		const { actions, field, pattern, editable } = column;
 		if (!actions?.length) {
 			const td = head.appendChild(document.createElement('td'));
 			const child = field && store.child(field);
 			if (child) {
-				const el = FormFieldInline(child, fieldRenderer, column, options);
+				const el = FormFieldInline(child, fieldRenderer, column, {...options, editable: options?.editable && (editable !== false)});
 				if (el) { td.appendChild(el); }
 			}
 			continue;
@@ -5151,7 +5259,7 @@ function Line(store, fieldRenderer, layout, {
  * @param {ArrayStore} store
  * @param {StoreLayout.Field<T>} layout
  * @param {StoreLayout.Action[]} actionOptions
- * @param {(fields: { field: string; width: any; label: any; }[]) => StoreLayout.Column<T>[]} createDefault
+ * @param {(fields: { field: string; width: any; label: any; editable?: boolean? }[]) => StoreLayout.Column<T>[]} createDefault
  * @returns {StoreLayout.Column<T>[]}
  */
 function getColumns(store, layout, actionOptions, createDefault) {
@@ -5174,23 +5282,23 @@ function getColumns(store, layout, actionOptions, createDefault) {
 				if (!actions) { return null; }
 				return { actions };
 			}
-			const { action, actions, field, placeholder, pattern, width, label } = v;
+			const { action, actions, field, placeholder, pattern, width, label, editable } = v;
 			if (field) {
 				const define = map.get(field);
 				if (define) {
-					return { field, placeholder, width, label: label || define.label };
+					return { field, placeholder, width, label: label || define.label, editable };
 				}
 			}
 			const options = new Set(actionOptions);
 			const allActions = [action, actions].flat().filter(v => v && options.delete(v));
 			if (allActions.length) {
-				return { actions: /** @type {StoreLayout.Action[]} */(allActions), width, label };
+				return { actions: /** @type {StoreLayout.Action[]} */(allActions), width, label, editable };
 			}
 			if (pattern) {
-				return { pattern, placeholder, width, label };
+				return { pattern, placeholder, width, label, editable };
 			}
 			if (placeholder || width) {
-				return { placeholder, width, label };
+				return { placeholder, width, label, editable };
 			}
 			return null;
 		});
@@ -5495,8 +5603,8 @@ function createCell(signal, layout, values, defCell, blockOnly) {
 /**
  * 
  * @template T
- * @param {Store<any, any>} store 
- * @param {Signal.State<Store<any, any>?>} currentStore 
+ * @param {Store<any, any, any>} store 
+ * @param {Signal.State<Store<any, any, any>?>} currentStore 
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {StoreLayout.Field<T>} layout
  * @param {Signal.State<State>} state
@@ -5510,7 +5618,7 @@ function createCell(signal, layout, values, defCell, blockOnly) {
  * @param {() => void} option.dragend 
  * @param {{get(): boolean}} option.deletable 
  * @param {() => void} option.addNode 
- * @param {(store: Store<any, any>) => () => void} option.createDetails 
+ * @param {(store: Store<any, any, any>) => () => void} option.createDetails 
  * @param {StoreLayout.Options?} options
  * @returns {HTMLElement}
  */
@@ -5912,10 +6020,10 @@ function Tree(store, fieldRenderer, layout, options) {
 
 	/** @type {AbortController?} */
 	let detailAbortController = null;
-	const detailsStore = new Signal.State(/** @type{Store<any, any>?}*/(null));
+	const detailsStore = new Signal.State(/** @type{Store<any, any, any>?}*/(null));
 	/**
 	 * 
-	 * @param {Store<any, any>} store 
+	 * @param {Store<any, any, any>} store 
 	 * @returns 
 	 */
 	function createDetails(store) {
@@ -6167,7 +6275,7 @@ function Tree(store, fieldRenderer, layout, options) {
  * 
  * @template T
  * @param {string | ParentNode} html 
- * @param {Store<any, any>} store 
+ * @param {Store<any, any, any>} store 
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {StoreLayout.Options?} options
  * @param {StoreLayout.Field<T>} layout
@@ -6199,7 +6307,7 @@ function renderArrayCell(arrayStyle, store, fieldRenderer, layout, options) {
 /**
  * 
  * @template T
- * @param {Store<any, any>} store 
+ * @param {Store<any, any, any>} store 
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {StoreLayout.Field<T>} layout
  * @param {StoreLayout.Options?} options
@@ -6233,7 +6341,7 @@ function FormField(store, fieldRenderer, layout, options) {
 
 /**
  *
- * @param {Store<any, any>} store
+ * @param {Store<any, any, any>} store
  * @param {StoreLayout.Button} layout
  * @param {StoreLayout.Options?} options
  * @returns {ParentNode}
@@ -6271,7 +6379,7 @@ function FormButton(store, layout, options) {
 /**
  *
  * @template T
- * @param {Store<any, any>} store
+ * @param {Store<any, any, any>} store
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {StoreLayout.Html} layout
  * @param {StoreLayout.Options?} options
@@ -6293,7 +6401,7 @@ function FormHtml(store, fieldRenderer, layout, options) {
 /**
  * 
  * @template T
- * @param {Store<any, any>} store 
+ * @param {Store<any, any, any>} store 
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {StoreLayout.Item<T>} item
  * @param {StoreLayout.Options?} options
@@ -6318,7 +6426,7 @@ function FormItem(store, fieldRenderer, item, options) {
 /**
  * 
  * @template T
- * @param {Store<any, any>} store 
+ * @param {Store<any, any, any>} store 
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {StoreLayout<T>} layout
  * @param {StoreLayout.Options?} options

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neeloong/form",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description": "一个基于响应式数据绑定的表单渲染库",
   "keywords": [
     "from",