@neeloong/form 0.26.0 → 0.28.0

package/index.mjs

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.26.0
+* @neeloong/form v0.28.0
 * (c) 2024-2026 Fierflame
 * @license Apache-2.0
 */
@@ -138,7 +138,7 @@ function createRef(store) {
 
 
 /** @type {{new(...p: ConstructorParameters<typeof Store>): Store}?} */
-let ObjectStore$1 = null;
+let ObjectStore$2 = null;
 /** @type {{new(...p: ConstructorParameters<typeof Store>): ArrayStore}?} */
 let ArrayStoreClass = null;
 /** @type {Record<string, {new(...p: ConstructorParameters<typeof Store>): Store}?>} */
@@ -163,14 +163,14 @@ function create(schema, options) {
 		const C = TypeStores[type];
 		if (C) { Class = C; }
 	} else if (type && typeof type === 'object') {
-		if (ObjectStore$1) { Class = ObjectStore$1; }
+		if (ObjectStore$2) { Class = ObjectStore$2; }
 	}
 	return new Class(schema, options);
 }
 
 /** @param {{new(...p: ConstructorParameters<typeof Store>): Store}} Class */
 function setObjectStore(Class) {
-	ObjectStore$1 = Class;
+	ObjectStore$2 = Class;
 }
 
 /** @param {{new(...p: ConstructorParameters<typeof Store>): ArrayStore}} Class */
@@ -292,6 +292,52 @@ function makeDefault(store, def) {
 	return (value) => structuredClone(def(store, value));
 }
 
+/** @import { Schema } from '../Schema.types.mjs' */
+
+/**
+ * @template [T=any]
+ * @template [M=any]
+ * @template {Object.<string, Schema.State>} [S=Object.<string, Schema.State>]
+ * @extends {Store<T, M, S>}
+ */
+class BindObjectStore extends Store {
+
+	get kind() { return 'object'; }
+	/** @type {Record<string, Store>} */
+	#children = Object.create(null);
+	*[Symbol.iterator]() { yield* Object.entries(this.#children); }
+	/**
+	 * 
+	 * @param {string | number} key 
+	 * @returns {Store?}
+	 */
+	child(key) { return this.#children[key] || null; }
+	/**
+	 * @param {Schema<any, Object.<string, Schema.State>>} schema 数据结构模式
+	 * @param {Store<T, M, S>} store
+	 */
+	constructor(schema, store) {
+		super(store);
+		const children = this.#children;
+		for (const [index, field] of Object.entries(schema)) {
+			const bindStore = create(field, {
+				index, parent: this,
+				/** @param {*} value @param {*} index @param {Store} store */
+				onUpdate: (value, index, store) => {
+					if (store !== children[index]) { return; }
+					const val = this.value ?? null;
+					if (typeof val !== 'object' || Array.isArray(val)) { return; }
+					// @ts-ignore
+					this.value = { ...val, [index]: value };
+				},
+			});
+			children[index] = bindStore;
+		}
+	}
+}
+// @ts-ignore
+setObjectStore(ObjectStore);
+
 /** @import { Ref } from './ref.mjs' */
 /** @import { Schema } from '../Schema.types.mjs' */
 /** @import { StoreLayout } from '../StoreLayout.types.mjs' */
@@ -303,6 +349,12 @@ function makeDefault(store, def) {
  * @template {Object.<string, Schema.State>} [S=Object.<string, Schema.State>]
  */
 class Store {
+	/** @type {Store<T, M, S>?} */
+	#originStore = null;
+
+	/** @type {Schema.Field<M, S>}  字段的 Schema 定义 */
+	#schema;
+	get schema() { return this.#schema; }
 	/** @type {Map<string, Set<(value: any, store: any) => void | boolean | null>>} */
 	#events = new Map();
 	/**
@@ -310,8 +362,11 @@ class Store {
 	 * @template {keyof Schema.Events} K
 	 * @param {K} event 
 	 * @param  {Schema.Events[K]} value 
+	 * @returns {boolean}
 	 */
 	emit(event, value) {
+		const originStore = this.#originStore;
+		if (originStore) { return originStore.emit(event, value); }
 		const key = typeof event === 'number' ? String(event) : event;
 		const events = this.#events;
 		let canceled = false;
@@ -328,6 +383,8 @@ class Store {
 	 * @returns {() => void}
 	 */
 	listen(event, listener) {
+		const originStore = this.#originStore;
+		if (originStore) { return originStore.listen(event, p => listener.call(this, p, this)); }
 		const fn = listener.bind(this);
 		const events = this.#events;
 		const key = typeof event === 'number' ? String(event) : event;
@@ -368,7 +425,7 @@ class Store {
 	#ref = null;
 	get ref() { return this.#ref || createRef(this); }
 	/**
-	 * @param {Schema.Field<M, S>} schema 字段的 Schema 定义
+	 * @param {Schema.Field<M, S> | Store<T,M,S>} schema 字段的 Schema 定义
 	 * @param {object} [options] 可选配置
 	 * @param {Store?} [options.parent] 
 	 * @param {Partial<S>?} [options.states] 
@@ -412,7 +469,74 @@ class Store {
 		hidden, clearable, required, disabled, readonly, removable,
 		label, description, placeholder, min, max, step, minLength, maxLength, pattern, values: values$1
 	} = {}) {
-		this.schema = schema;
+		if (schema instanceof Store) {
+			this.#originStore = schema;
+			this.#schema = schema.#schema;
+			this.#null = schema.#null;
+			this.#ref = schema.#ref;
+			this.#states = schema.#states;
+			this.#layout = schema.#layout;
+			this.#createDefault = schema.#createDefault;
+			this.#setValue = schema.#setValue;
+			this.#convert = schema.#convert;
+			this.#onUpdate = schema.#onUpdate;
+			this.#parent = schema.#parent;
+			this.#root = schema.#root;
+			this.#type = schema.#type;
+			this.#meta = schema.#meta;
+			this.#component = schema.#component;
+			this.#selfLoading = schema.#selfLoading;
+			this.#loading = schema.#loading;
+			this.#size = schema.#size;
+			this.#index = schema.#index;
+			this.#creatable = schema.#creatable;
+			this.#immutable = schema.#immutable;
+			this.#new = schema.#new;
+			this.#selfNew = schema.#selfNew;
+			this.#selfHidden = schema.#selfHidden;
+			this.#hidden = schema.#hidden;
+			this.#selfClearable = schema.#selfClearable;
+			this.#clearable = schema.#clearable;
+			this.#selfRequired = schema.#selfRequired;
+			this.#required = schema.#required;
+			this.#selfDisabled = schema.#selfDisabled;
+			this.#disabled = schema.#disabled;
+			this.#selfReadonly = schema.#selfReadonly;
+			this.#readonly = schema.#readonly;
+			this.#selfRemovable = schema.#selfRemovable;
+			this.#removable = schema.#removable;
+			this.#selfLabel = schema.#selfLabel;
+			this.#label = schema.#label;
+			this.#selfDescription = schema.#selfDescription;
+			this.#description = schema.#description;
+			this.#selfPlaceholder = schema.#selfPlaceholder;
+			this.#placeholder = schema.#placeholder;
+			this.#selfMin = schema.#selfMin;
+			this.#min = schema.#min;
+			this.#selfMax = schema.#selfMax;
+			this.#max = schema.#max;
+			this.#selfStep = schema.#selfStep;
+			this.#step = schema.#step;
+			this.#selfMinLength = schema.#selfMinLength;
+			this.#minLength = schema.#minLength;
+			this.#selfMaxLength = schema.#selfMaxLength;
+			this.#maxLength = schema.#maxLength;
+			this.#selfPattern = schema.#selfPattern;
+			this.#pattern = schema.#pattern;
+			this.#selfValues = schema.#selfValues;
+			this.#values = schema.#values;
+			this.#errors = schema.#errors;
+			this.#validatorResult = schema.#validatorResult;
+			this.#changed = schema.#changed;
+			this.#blurred = schema.#blurred;
+			this.#cancelChange = schema.#cancelChange;
+			this.#cancelBlur = schema.#cancelBlur;
+			this.#set = schema.#set;
+			this.#initValue = schema.#initValue;
+			this.#value = schema.#value;
+			return;
+		}
+		this.#schema = schema;
 		const parent = parentNode instanceof Store ? parentNode : null;
 		if (parent) {
 			this.#parent = parent;
@@ -540,6 +664,7 @@ class Store {
 	/** @type {StoreLayout.Field<any>} */
 	#layout;
 	get layout() { return this.#layout; }
+	/** @type {(value?: any) => unknown} */
 	#createDefault;
 	/** @param {any} [value] @returns {any} */
 	createDefault(value) { return this.#createDefault(value); }
@@ -821,40 +946,26 @@ class Store {
 	#initValue = new Signal.State(/** @type {T?} */(null));
 	#value = new Signal.State(this.#initValue.get());
 
+	/** @type {Set<Store>} */
+	#subBindStores = new Set();
 	/**
 	 * @template [M=any]
 	 * @template {Object.<string, Schema.State>} [S=Object.<string, Schema.State>]
 	 * @param {Schema<M, S>} schema 数据结构模式
+	 * @param {AbortSignal} [signal]
+	 * @returns {BindObjectStore}
 	 */
-	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);
-		}
+	bindObject(schema, signal) {
+		const originStore = this.#originStore;
+		if (originStore) { return originStore.bindObject(schema, signal); }
+		const store = new BindObjectStore(schema, this);
+		if (signal?.aborted) { return store; }
+		const subBindStores = this.#subBindStores;
+		subBindStores.add(store);
+		signal?.addEventListener('abort', () => subBindStores.delete(store));
 		this.#requestUpdate();
-		return () => {
-			for (const bindStore of list) {
-				bindStores.delete(bindStore);
-			}
-		};
+		return store;
 	}
-	/** @type {Map<Store, string>} */
-	#bindStores = new Map();
 
 	/** 内容是否已改变 */
 	get changed() { return !Object.is(this.#value.get(), this.#initValue.get()); }
@@ -862,6 +973,8 @@ class Store {
 	/** 字段当前值 */
 	get value() { return this.#value.get(); }
 	set value(v) {
+		const originStore = this.#originStore;
+		if (originStore) { originStore.value = v; return; }
 		const newValue = this.#setValue?.(v);
 		const val = newValue === undefined ? v : newValue;
 		this.#value.set(val);
@@ -882,6 +995,8 @@ class Store {
 	}
 	/** 重置数据 */
 	reset(value = this.#set ? this.#initValue.get() : this.#createDefault(), isNew = this.#selfNew.get()) {
+		const originStore = this.#originStore;
+		if (originStore) { originStore.reset(value, isNew); return; }
 		this.#reset(value, Boolean(isNew));
 	}
 	/**
@@ -898,11 +1013,10 @@ class Store {
 		this.#cancelBlur();
 		this.#set = true;
 		if (!value || typeof value !== 'object') {
-			for (const [, field] of this) {
-				field.#reset(null, false);
-			}
-			for (const [field] of this.#bindStores) {
-				field.#reset(null, false);
+			for (const bind of [this, ...this.#subBindStores]) {
+				for (const [, field] of bind) {
+					field.#reset(null, false);
+				}
 			}
 			this.#value.set(value);
 			this.#initValue.set(value);
@@ -911,11 +1025,10 @@ class Store {
 		}
 		/** @type {*} */
 		const newValues = Array.isArray(value) ? [...value] : { ...value };
-		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);
+		for (const bind of [this, ...this.#subBindStores]) {
+			for (const [key, field] of bind) {
+				newValues[key] = field.#reset(Object.hasOwn(newValues, key) ? newValues[key] : undefined, false);
+			}
 		}
 		this.#value.set(newValues);
 		this.#initValue.set(newValues);
@@ -949,23 +1062,16 @@ class Store {
 			// @ts-ignore
 			let newValues = Array.isArray(val) ? [...val] : { ...val };
 			let updated = false;
-			for (const [key, field] of this) {
-				// @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;
-			}
-			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;
+			for (const bind of [this,...this.#subBindStores]) {
+				for (const [key, field] of bind) {
+					// @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;
@@ -999,6 +1105,7 @@ class Store {
 	 */
 	validate(path) {
 		if (path === true) {
+			if (this.#originStore) { return Promise.resolve(null); }
 			return Promise.all([this.#validatorResult.get(), this.#changed(), this.#blurred()])
 				.then(v => {
 					const errors = v.flat();
@@ -1006,7 +1113,7 @@ class Store {
 				});
 		}
 		const selfPath = Array.isArray(path) ? path : [];
-		if (this.#hidden.get()) { return Promise.resolve([]); }
+		if (!this.#originStore && this.#hidden.get()) { return Promise.resolve([]); }
 		const list = [this.validate(true).then(errors => {
 			if (!errors?.length) { return []; }
 			return [{ path: [...selfPath], store: /** @type {Store} */(this), errors }];
@@ -1014,8 +1121,8 @@ 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]));
+		for (const sub of this.#subBindStores) {
+			list.push(sub.validate(selfPath));
 		}
 		return Promise.all(list).then(v => v.flat());
 	}
@@ -1029,7 +1136,7 @@ class Store {
  * @template {Object.<string, Schema.State>} [S=Object.<string, Schema.State>]
  * @extends {Store<T, M, S>}
  */
-class ObjectStore extends Store {
+let ObjectStore$1 = class ObjectStore extends Store {
 	get kind() { return 'object'; }
 	/** @type {Record<string, Store>} */
 	#children;
@@ -1082,9 +1189,9 @@ class ObjectStore extends Store {
 		}
 		this.#children = children;
 	}
-}
+};
 // @ts-ignore
-setObjectStore(ObjectStore);
+setObjectStore(ObjectStore$1);
 
 /** @import { Schema } from '../Schema.types.mjs' */
 
@@ -4754,7 +4861,7 @@ function renderChild(layout, parent, next, parentEnv, parentTemplates, component
 		if (list instanceof ArrayStore) {
 			return renderArray(parent, next, list, env, r, layout.sort);
 		}
-		if (list instanceof ObjectStore) {
+		if (list instanceof ObjectStore$1) {
 			return renderObject(parent, next, list, env, r, layout.sort);
 		}
 		if (typeof list === 'function') {
@@ -4863,6 +4970,8 @@ function renderHtml(store, fieldRenderer, node, options, layout, anchor, dragent
 		if (tagName === 'nl-form-field') {
 			const field = node.getAttribute('name') || '';
 			const mode = node.getAttribute('mode') || '';
+			const renderer = node.getAttribute('renderer') || '';
+			const editable = options?.editable && !node.hasAttribute('non-editable');
 			const fieldStore = field ? store.child(field) : store;
 			if (!fieldStore) { return; }
 			/** @type {HTMLElement?} */
@@ -4872,11 +4981,11 @@ function renderHtml(store, fieldRenderer, node, options, layout, anchor, dragent
 					const fieldLayout = field
 						? layout?.fields?.find(createFieldFilter(field)) || fieldStore.layout
 						: { ...layout, html: '' };
-					el = Form(fieldStore, fieldRenderer, fieldLayout, options);
+					el = Form(fieldStore, fieldRenderer, fieldLayout, {...options, editable});
 					break;
 				}
 				default: {
-					el = fieldRenderer(fieldStore, layout.renderer, options);
+					el = fieldRenderer(fieldStore, renderer || layout.renderer, {...options, editable});
 					break;
 				}
 			}
@@ -5078,9 +5187,10 @@ function renderHtml(store, fieldRenderer, node, options, layout, anchor, dragent
 /**
  * 
  * @param {string | ParentNode | null} [html] 
+ * @param {function(string): string} [sanitize] 
  * @returns {ParentNode}
  */
-function getHtmlContent(html) {
+function getHtmlContent(html, sanitize) {
 	if (!html) {
 		return document.createElement('template').content;
 	}
@@ -5088,7 +5198,7 @@ function getHtmlContent(html) {
 		return /** @type {ParentNode} */(html.cloneNode(true));
 	}
 	const template = document.createElement('template');
-	template.innerHTML = html;
+	template.innerHTML = sanitize ? sanitize(html) : html;
 	return template.content;
 }
 
@@ -5105,7 +5215,7 @@ function FormFieldInline(store, fieldRenderer, layout, options) {
 	if (options?.signal?.aborted) { return null; }
 	const html = layout.html;
 	if (html) {
-		const content = getHtmlContent(html);
+		const content = getHtmlContent(html, options?.sanitizeHtml);
 		renderHtml(store, fieldRenderer, content, options, layout);
 		return content;
 	}
@@ -6282,7 +6392,7 @@ function Tree(store, fieldRenderer, layout, options) {
  * @returns {ParentNode}
  */
 function Html(html, store, fieldRenderer, options, layout) {
-	const htmlContent = getHtmlContent(html);
+	const htmlContent = getHtmlContent(html, options?.sanitizeHtml);
 	renderHtml(store, fieldRenderer, htmlContent, options, layout);
 	return htmlContent;
 }
@@ -6389,7 +6499,7 @@ function FormHtml(store, fieldRenderer, layout, options) {
 	const html = layout.html;
 	if (!html) { return null; }
 	const [root, content] = createCell(options?.signal, layout, store);
-	const htmlContent = getHtmlContent(html);
+	const htmlContent = getHtmlContent(html, options?.sanitizeHtml);
 	renderHtml(store, fieldRenderer, htmlContent, options, layout);
 	content.appendChild(htmlContent);
 	return root;
@@ -6475,7 +6585,7 @@ function renderStore(store, fieldRenderer, root, layout, options) {
 		Form(store, fieldRenderer, storeLayout, options || null, root);
 		return;
 	}
-	const content = getHtmlContent(html);
+	const content = getHtmlContent(html, options?.sanitizeHtml);
 	renderHtml(store, fieldRenderer, content, options || null, storeLayout);
 	root.appendChild(content);
 	options?.signal?.addEventListener('abort', () => {
@@ -6483,4 +6593,4 @@ function renderStore(store, fieldRenderer, root, layout, options) {
 	}, { once: true });
 }
 
-export { ArrayStore, index as Layout, ObjectStore, Store, effect, render, renderStore, watch };
+export { ArrayStore, index as Layout, ObjectStore$1 as ObjectStore, Store, effect, render, renderStore, watch };

package/package.json

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