@neeloong/form 0.1.0 → 0.3.0

package/index.mjs

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.1.0
+* @neeloong/form v0.3.0
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -13,14 +13,21 @@ export { Signal } from 'signal-polyfill';
  *
  * @param {Store} self
  * @param {boolean?} [defState]
- * @param {boolean | ((store: Store) => boolean) | null} [fn]
+ * @param {boolean | ((store: Store, root: Store) => boolean?) | null} [fn]
  * @param {Signal.Computed<boolean>?} [parent]
  * @returns {[Signal.State<boolean?>, Signal.Computed<boolean>]}
  */
 const createBooleanStates = (self, defState, fn, parent) => {
 
 	const selfState = new Signal.State(typeof defState === 'boolean' ? defState : null);
-	const scriptState = typeof fn === 'function' ? new Signal.Computed(() => fn(self)) : fn ? new Signal.Computed(() => true) : new Signal.Computed(() => false);
+	/** @type {Signal.Computed<boolean>} */
+	let scriptState;
+	if (typeof fn === 'function') {
+		scriptState = new Signal.Computed(() => Boolean(fn(self, self.root)));
+	} else {
+		const def = Boolean(fn);
+		scriptState = new Signal.Computed(() => def);
+	}
 
 	const getState = () => {
 		const s = selfState.get();
@@ -34,6 +41,75 @@ const createBooleanStates = (self, defState, fn, parent) => {
 
 };
 
+/** @import { Schema } from '../types.mjs' */
+/** @param {*} v  */
+const string = v => typeof v === 'string' && v || null;
+/** @param {*} v  */
+const number = v => typeof v === 'number' && v || null;
+
+/** @type {(v: Schema.Value | Schema.Value.Group | null) => v is Schema.Value | Schema.Value.Group} */
+const valueFilter = /** @type {*} */(Boolean);
+/**
+ * 
+ * @param {*} v 
+ * @returns {Schema.Value | Schema.Value.Group | null}
+ */
+function toValueItem(v) {
+	if (typeof v === 'number' || typeof v === 'string') {
+		return /** @type {Schema.Value} */({ label: v, value: v});
+	}
+	if (!v || typeof v !== 'object') { return null; }
+	const {children, label, value} = v;
+	const list = Array.isArray(children) ? children.map(toValueItem).filter(valueFilter) : [];
+	if (list.length) {
+		return {children: list, label, value}
+	}
+	if (typeof value === 'number' || typeof value === 'string') {
+		return {label, value};
+	}
+	return null;
+
+}
+/** @param {*} v  */
+const values = v => {
+	if (!v || !Array.isArray(v)) { return null;}
+	const list = v.map(toValueItem).filter(valueFilter);
+	if (!list.length) { return null; }
+	return list;
+};
+
+/** @import Store from './index.mjs' */
+
+/**
+ * @template T
+ * @param {Store} self
+ * @param {(v: any) => any?} toValue
+ * @param {T?} [defState]
+ * @param {T | ((store: Store, root: Store) => T?) | null} [fn]
+ * @returns {[Signal.State<T?>, Signal.Computed<T?>]}
+ */
+function createState(self, toValue, defState, fn) {
+
+	const selfState = new Signal.State(toValue(defState));
+	/** @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)));
+	} else {
+		const def = toValue(fn);
+		scriptState = new Signal.Computed(() => def);
+	}
+
+	const state = new Signal.Computed(() => {
+		const s = selfState.get();
+		return s === null ? scriptState.get() : s;
+	});
+
+	return [selfState, state];
+
+}
+
 /** @import { Schema } from '../types.mjs' */
 /**
  * @template [T=any]
@@ -63,6 +139,15 @@ class Store {
 	 * @param {boolean} [options.required] 
 	 * @param {boolean} [options.readonly] 
 	 * @param {boolean} [options.disabled] 
+	 * 
+	 * @param {string} [options.label] 字段标签
+	 * @param {string} [options.description] 字段描述
+	 * @param {string} [options.placeholder] 占位符
+	 * @param {number} [options.min] 日期、时间、数字的最小值
+	 * @param {number} [options.max] 日期、时间、数字的最大值
+	 * @param {number} [options.step] 日期、时间、数字的步长
+	 * @param {(Schema.Value.Group | Schema.Value | string | number)[]} [options.values] 可选值
+	 * 
 	 * @param {((value: any) => any)?} [options.setValue] 
 	 * @param {((value: any) => any)?} [options.setState] 
 	 * @param {((value: any, state: any) => [value: any, state: any])?} [options.convert] 
@@ -74,6 +159,7 @@ class Store {
 		setValue, setState, convert, onUpdate, onUpdateState,
 		index, length, new: isNew, parent: parentNode,
 		hidden, clearable, required, disabled, readonly,
+		label, description, placeholder, min, max, step, values: values$1
 	}) {
 		this.schema = schema;
 		this.#state.set(typeof state === 'object' && state || {});
@@ -96,13 +182,41 @@ class Store {
 		const creatable = schema.creatable !== false;
 		this.#immutable = immutable;
 		this.#creatable = creatable;
-		this.#editable = new Signal.Computed(() => newState.get() ? creatable : !immutable);
+
+		const readonlyFn = schema.readonly;
+		const selfReadonly = new Signal.State(typeof readonly === 'boolean' ? readonly : null);
+		/** @type {Signal.Computed<boolean>} */
+		let readonlyScript;
+		if (typeof readonlyFn === 'function') {
+			readonlyScript = new Signal.Computed(() => Boolean(readonlyFn(this, this.root)));
+		} else {
+			const def = Boolean(readonlyFn);
+			readonlyScript = new Signal.Computed(() => def);
+		}
+		const getReadonly = () => {
+			if (newState.get() ? !creatable : immutable) { return true; }
+			const s = selfReadonly.get();
+			return s === null ? readonlyScript.get() : s;
+		};
+		const readonlyParent =  parent ? parent.#readonly : null;
+		this.#selfReadonly = selfReadonly;
+		this.#readonly = readonlyParent
+			? new Signal.Computed(() => readonlyParent.get() || getReadonly())
+			: new Signal.Computed(getReadonly);
 
 		[this.#selfHidden, this.#hidden] = createBooleanStates(this, hidden, schema.hidden, parent ? parent.#hidden : null);
 		[this.#selfClearable, this.#clearable] = createBooleanStates(this, clearable, schema.clearable, parent ? parent.#clearable : null);
 		[this.#selfRequired, this.#required] = createBooleanStates(this, required, schema.required, parent ? parent.#required : null);
 		[this.#selfDisabled, this.#disabled] = createBooleanStates(this, disabled, schema.disabled, parent ? parent.#disabled : null);
-		[this.#selfReadonly, this.#readonly] = createBooleanStates(this, readonly, schema.readonly, parent ? parent.#readonly : null);
+
+		[this.#selfLabel, this.#label] = createState(this, string, label, schema.label);
+		[this.#selfDescription, this.#description] = createState(this, string, description, schema.description);
+		[this.#selfPlaceholder, this.#placeholder] = createState(this, string, placeholder, schema.placeholder);
+		[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);
+		// @ts-ignore
+		[this.#selfValues, this.#values] = createState(this, values, values$1, schema.values);
 
 		if (isNull) {
 			this.#null = true;
@@ -156,13 +270,10 @@ class Store {
 	#new
 	/** @readonly @type {Signal.State<boolean>} */
 	#selfNew
-	/** @readonly @type {Signal.Computed<boolean>} */
-	#editable
 	get selfNew() { return this.#selfNew.get(); }
 	set selfNew(v) { this.#selfNew.set(Boolean(v)); }
 	get new() { return this.#new.get(); }
 	set new(v) { this.#selfNew.set(Boolean(v)); }
-	get editable() { return this.#editable.get(); }
 
 	/** @readonly @type {Signal.State<boolean?>} */
 	#selfHidden
@@ -212,6 +323,77 @@ class Store {
 
 
 
+	/** @readonly @type {Signal.State<string?>} */
+	#selfLabel
+	/** @readonly @type {Signal.Computed<string?>} */
+	#label
+	get selfLabel() { return this.#selfLabel.get(); }
+	set selfLabel(v) { this.#selfLabel.set(string(v)); }
+	get label() { return this.#label.get(); }
+	set label(v) { this.#selfLabel.set(string(v)); }
+
+
+	/** @readonly @type {Signal.State<string?>} */
+	#selfDescription
+	/** @readonly @type {Signal.Computed<string?>} */
+	#description
+	get selfDescription() { return this.#selfDescription.get(); }
+	set selfDescription(v) { this.#selfDescription.set(string(v)); }
+	get description() { return this.#description.get(); }
+	set description(v) { this.#selfDescription.set(string(v)); }
+
+	/** @readonly @type {Signal.State<string?>} */
+	#selfPlaceholder
+	/** @readonly @type {Signal.Computed<string?>} */
+	#placeholder
+	get selfPlaceholder() { return this.#selfPlaceholder.get(); }
+	set selfPlaceholder(v) { this.#selfPlaceholder.set(string(v)); }
+	get placeholder() { return this.#placeholder.get(); }
+	set placeholder(v) { this.#selfPlaceholder.set(string(v)); }
+
+
+	/** @readonly @type {Signal.State<number?>} */
+	#selfMin
+	/** @readonly @type {Signal.Computed<number?>} */
+	#min
+	get selfMin() { return this.#selfMin.get(); }
+	set selfMin(v) { this.#selfMin.set(number(v)); }
+	get min() { return this.#min.get(); }
+	set min(v) { this.#selfMin.set(number(v)); }
+
+
+	/** @readonly @type {Signal.State<number?>} */
+	#selfMax
+	/** @readonly @type {Signal.Computed<number?>} */
+	#max
+	get selfMax() { return this.#selfMax.get(); }
+	set selfMax(v) { this.#selfMax.set(number(v)); }
+	get max() { return this.#max.get(); }
+	set max(v) { this.#selfMax.set(number(v)); }
+
+
+	/** @readonly @type {Signal.State<number?>} */
+	#selfStep
+	/** @readonly @type {Signal.Computed<number?>} */
+	#step
+	get selfStep() { return this.#selfStep.get(); }
+	set selfStep(v) { this.#selfStep.set(number(v)); }
+	get step() { return this.#step.get(); }
+	set step(v) { this.#selfStep.set(number(v)); }
+
+
+	/** @readonly @type {Signal.State<(Schema.Value.Group | Schema.Value)[] | null>} */
+	#selfValues
+	/** @readonly @type {Signal.Computed<(Schema.Value.Group | Schema.Value)[] | null>} */
+	#values
+	get selfValues() { return this.#selfValues.get(); }
+	set selfValues(v) { this.#selfValues.set(values(v)); }
+	get values() { return this.#values.get(); }
+	set values(v) { this.#selfValues.set(values(v)); }
+
+
+
+
 
 	/** @returns {IterableIterator<[key: string | number, value: Store]>} */
 	*[Symbol.iterator]() {}
@@ -718,7 +900,7 @@ class ParseError extends Error {
 
 /** @import * as Layout from './index.mjs' */
 
-const attrPattern = /^(?<decorator>[:@!+*\.]|style:|样式：)?(?<name>-?[\w\p{Unified_Ideograph}_][-\w\p{Unified_Ideograph}_:\d\.]*)$/u;
+const attrPattern = /^(?<decorator>[:@!+*\.?]|style:|样式：)?(?<name>-?[\w\p{Unified_Ideograph}_][-\w\p{Unified_Ideograph}_:\d\.]*)$/u;
 const nameRegex = /^(?<name>[a-zA-Z$\p{Unified_Ideograph}_][\da-zA-Z$\p{Unified_Ideograph}_]*)?$/u;
 /**
  * @param {Layout.Node} node
@@ -726,7 +908,7 @@ const nameRegex = /^(?<name>[a-zA-Z$\p{Unified_Ideograph}_][\da-zA-Z$\p{Unified_
  * @param {Exclude<Layout.Options['creteEvent'], undefined>} creteEvent
  */
 function createAttributeAdder(node, creteCalc, creteEvent) {
-	const { attrs, directives, events, classes, styles, vars, aliases } = node;
+	const { attrs, directives, events, classes, styles, vars, aliases, params } = node;
 	/**
 	 * @param {string} qName
 	 * @param {string} value
@@ -756,20 +938,23 @@ function createAttributeAdder(node, creteCalc, creteEvent) {
 		} else if (decorator === '+') {
 			vars[name] = !value ? '' : nameRegex.test(value) ? value : creteCalc(value);
 		} else if (decorator === '*') {
-			aliases[name] = nameRegex.test(value) ? value : creteEvent(value);
+			aliases[name] = nameRegex.test(value) ? value : creteCalc(value);
+		} else if (decorator === '?') {
+			params[name] = nameRegex.test(value) ? value : creteCalc(value);
 		} else if (decorator === '!') {
 			const key = name.toString();
 			switch (key) {
-				case 'fragment':
-				case 'else':
+				case 'fragment': directives.fragment = value || true; break;
+				case 'else': directives.else = true; break;
 				case 'enum':
-					directives[key] = true;
+					directives.enum = value ? nameRegex.test(value) ? value : creteCalc(value) : true;
 					break;
 				case 'if':
 				case 'text':
 				case 'html':
 					directives[key] = nameRegex.test(value) ? value : creteCalc(value);
 					break;
+				case 'template':
 				case 'bind':
 				case 'value':
 				case 'comment':
@@ -801,6 +986,7 @@ function createElement(name, is) {
 		styles: Object.create(null),
 		vars: Object.create(null),
 		aliases: Object.create(null),
+		params: Object.create(null),
 	};
 }
 
@@ -1447,13 +1633,15 @@ function toString(value, formable) {
 /**
  * @typedef {object} Directives
  * 
- * @property {boolean} [fragment]
+ * @property {string} [template]
+ * 
+ * @property {boolean | string} [fragment]
  * 
  * @property {string | Function} [if]
  * @property {boolean} [else]
  * 
  * @property {string} [value] 值关联（关联为列表）
- * @property {boolean} [enum] 列表属性枚举
+ * @property {boolean | string | Function} [enum] 列表属性枚举
  * 
  * @property {string} [bind]
  * @property {string | Function} [text]
@@ -1476,6 +1664,7 @@ function toString(value, formable) {
  * @property {string?} [is]
  * @property {string} [id]
  * @property {Record<string, string | {name: string} | ((global: any) => void)>} attrs
+ * @property {Record<string, string | ((global: any) => void)>} params
  * @property {Record<string, string | boolean | ((global: any) => void)>} classes
  * @property {Record<string, string | ((global: any) => void)>} styles
  * @property {Record<string, string | (($event: any, global: any) => void)>} events
@@ -1536,6 +1725,28 @@ function watch(getter, callback) {
 	return () => { w.unwatch(computed); };
 }
 
+/** @import * as Layout from '../Layout/index.mjs' */
+
+const bindable = {
+	new: true,
+	readonly: true,
+
+	required: true,
+	clearable: true,
+	hidden: true,
+	disabled: true,
+
+	label: true,
+	description: true,
+	placeholder: true,
+	min: true,
+	max: true,
+	step: true,
+	values: true,
+};
+/** @type {Set<keyof typeof bindable>} */
+// @ts-ignore
+const bindableSet = new Set(Object.keys(bindable));
 /** @typedef {{get(): any; set?(v: any): void; exec?: null; store?: Store; calc?: null; }} ValueDefine */
 /** @typedef {{get?: null; exec(...p: any[]): any;  calc?: null}} ExecDefine */
 /** @typedef {{get?: null; calc(...p: any[]): any;  exec?: null;}} CalcDefine */
@@ -1555,13 +1766,12 @@ function *toItem(val, key = '', sign = '$') {
 	yield [`${key}${sign}length`, {get: () => val.length}];
 	yield [`${key}${sign}creatable`, {get: () => val.creatable}];
 	yield [`${key}${sign}immutable`, {get: () => val.immutable}];
-	yield [`${key}${sign}new`, {get: () => val.new}];
-	yield [`${key}${sign}editable`, {get: () => val.editable}];
-	yield [`${key}${sign}hidden`, {get: () => val.hidden}];
-	yield [`${key}${sign}clearable`, {get: () => val.clearable}];
-	yield [`${key}${sign}required`, {get: () => val.required}];
-	yield [`${key}${sign}disabled`, {get: () => val.disabled}];
-	yield [`${key}${sign}readonly`, {get: () => val.readonly}];
+
+	yield [`${key}${sign}schema`, {get: () => val.schema}];
+
+	for (const k of bindableSet) {
+		yield [`${key}${sign}${k}`, {get: () => val[k]}];
+	}
 	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)}];
@@ -1628,6 +1838,21 @@ class Environment {
 	 */
 	watch(value, cb) { return watch(() => this.exec(value), cb); }
 
+	/**
+	 * @param {string | Function} name
+	 */
+	enum(name) {
+		if (typeof name === 'function') {
+			return () => name(this.getters);
+		}
+		if (typeof name !== 'string') { return null; }
+		const item = this.#items[name];
+		if (typeof item?.get !== 'function') { return null }
+		const store = item.store;
+		return store instanceof Store ? store : item.get;
+
+	}
+
 	/**
 	 * @param {string} name
 	 * @param {string} type
@@ -1641,11 +1866,11 @@ class Environment {
 		switch(type) {
 			case 'value': return watch(() => store.value, cb);
 			case 'state': return watch(() => store.state, cb);
-			case 'required': return watch(() => store.required, cb);
-			case 'clearable': return watch(() => store.clearable, cb);
-			case 'hidden': return watch(() => store.hidden, cb);
-			case 'disabled': return watch(() => store.disabled, cb);
-			case 'readonly': return watch(() => store.readonly || !store.editable, cb);
+		}
+		// @ts-ignore
+		if (bindableSet.has(type)) {
+			// @ts-ignore
+			return watch(() => store[type], cb);
 		}
 	}
 	/**
@@ -1661,15 +1886,13 @@ class Environment {
 			if (typeof get !== 'function') { return; }
 			return { '$value': cb => watch(get, cb) }
 		}
-		return {
-			'$value': cb => watch(() => store.value, cb),
-			'$state': cb => watch(() => store.state, cb),
-			'$required': cb => watch(() => store.required, cb),
-			'$clearable': cb => watch(() => store.clearable, cb),
-			'$hidden': cb => watch(() => store.hidden, cb),
-			'$disabled': cb => watch(() => store.disabled, cb),
-			'$readonly': cb => watch(() => store.readonly || !store.editable, cb),
-		}
+		/** @type {Record<string, ((cb: (value: any) => void) => () => void) | void> | void} */
+		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;
 	}
 	/**
 	 * @param {string} name
@@ -1772,6 +1995,8 @@ class Environment {
 	#explicit = Object.create(null);
 	/** @type {Store?} */
 	#store = null
+	/** @type {Record<string, any>?} */
+	#object = null
 	/** @type {Store?} */
 	#parent = null
 	/** @type {Record<string, ValueDefine | ExecDefine | CalcDefine>?} */
@@ -1787,6 +2012,7 @@ class Environment {
 		}));
 		const store = this.#store;
 		const parent = this.#parent;
+		const object = this.#object;
 		if (store) {
 			for (const [key, item] of toItem(store)) {
 				ais[key] = item;
@@ -1795,6 +2021,11 @@ class Environment {
 				ais[key] = item;
 			}
 		}
+		if (object) {
+			for (const k of Object.keys(object)) {
+				ais[`$${k}`] = {get: () => object[k]};
+			}
+		}
 		this.#allItems = ais;
 		return ais;
 	}
@@ -1803,7 +2034,7 @@ class Environment {
 	 * @param {Store} store 
 	 * @param {Store} [parent] 
 	 */
-	setValue(store, parent) {
+	setStore(store, parent) {
 		const cloned = new Environment(this);
 		cloned.#store = store;
 		if (parent) { cloned.#parent = parent; }
@@ -1819,6 +2050,73 @@ class Environment {
 		}
 		return cloned;
 	}
+	/**
+	 * 
+	 * @param {Layout.Node} template 
+	 * @param {Layout.Node} source 
+	 * @param {Environment} sourceEnv 
+	 */
+	params({params}, {attrs}, sourceEnv) {
+		if (Object.keys(params).length === 0) { return this; }
+		const cloned = new Environment(this);
+		cloned.#store = this.#store;
+		cloned.#parent = this.#parent;
+		cloned.#object = this.#object;
+		const explicit = cloned.#explicit;
+		const items = cloned.#items;
+		for (const [key, param] of Object.entries(params)) {
+			const attr = key in attrs ? attrs[key] : null;
+			if (typeof attr === 'string') {
+				explicit[key] = items[key] = {get: () => attr};
+			} else if (attr && typeof attr === 'object') {
+				const item = sourceEnv.#items[attr.name];
+				if (!item?.get) { continue; }
+				if (!item.store) {
+					explicit[key] = items[key] = item;
+					continue;
+				}
+				for (const [k, it] of toItem(item.store, key)) {
+					explicit[k] = items[k] = it;
+				}
+				continue;
+
+			} else if (typeof attr === 'function') {
+				const val = new Signal.Computed(() => attr(sourceEnv.getters));
+				explicit[key] = items[key] = {
+					get: () => { return val.get(); },
+				};
+
+				continue;
+			} else if (typeof param === 'function') {
+				const getters = cloned.getters;
+				cloned.#getters = null;
+				const val = new Signal.Computed(() => param(getters));
+				explicit[key] = items[key] = {
+					get: () => { return val.get(); },
+				};
+				continue;
+
+			} else {
+				const item = items[param];
+				if (!item?.get) { continue; }
+				if (!item.store) {
+					explicit[key] = items[key] = item;
+					continue;
+				}
+				for (const [k, it] of toItem(item.store, key)) {
+					explicit[k] = items[k] = it;
+				}
+				continue;
+			}
+		}
+		return cloned;
+	}
+	/** @param {Record<string, any>} object */
+	setObject(object) {
+		const cloned = new Environment(this);
+		cloned.#object = object;
+		return cloned;
+	}
 	/**
 	 * 
 	 * @param {Record<string, string | Function>} aliases 
@@ -1829,6 +2127,7 @@ class Environment {
 		const cloned = new Environment(this);
 		cloned.#store = this.#store;
 		cloned.#parent = this.#parent;
+		cloned.#object = this.#object;
 		const explicit = cloned.#explicit;
 		const items = cloned.#items;
 		for (const [key, name] of Object.entries(aliases)) {
@@ -2556,6 +2855,14 @@ function getAttrs(el, attr) {
 const tagBindMap = {
 	input: {
 		attrs: {
+			/** @param {any} v @param {HTMLInputElement} e */
+			$min: (v, e) => {e.min = v;},
+			/** @param {any} v @param {HTMLInputElement} e */
+			$max: (v, e) => {e.max = v;},
+			/** @param {any} v @param {HTMLInputElement} e */
+			$step: (v, e) => {e.step = v;},
+			/** @param {any} v @param {HTMLInputElement} e */
+			$placeholder: (v, e) => {e.placeholder = v;},
 			/** @param {any} v @param {HTMLInputElement} e */
 			$disabled: (v, e) => {e.disabled = v;},
 			/** @param {any} v @param {HTMLInputElement} e */
@@ -2588,13 +2895,15 @@ const tagBindMap = {
 	},
 	textarea: {
 		attrs: {
-			/** @param {any} v @param {HTMLInputElement} e */
+			/** @param {any} v @param {HTMLTextAreaElement} e */
+			$placeholder: (v, e) => {e.placeholder = v;},
+			/** @param {any} v @param {HTMLTextAreaElement} e */
 			$disabled: (v, e) => {e.disabled = v;},
-			/** @param {any} v @param {HTMLInputElement} e */
+			/** @param {any} v @param {HTMLTextAreaElement} e */
 			$readonly: (v, e) => {e.readOnly = v;},
-			/** @param {any} v @param {HTMLInputElement} e */
+			/** @param {any} v @param {HTMLTextAreaElement} e */
 			$required: (v, e) => {e.required = v;},
-			/** @param {any} v @param {HTMLInputElement} e */
+			/** @param {any} v @param {HTMLTextAreaElement} e */
 			$value: (v, e) => { e.value = toText$1(v); },
 		},
 		events: {
@@ -2603,13 +2912,11 @@ const tagBindMap = {
 	},
 	select: {
 		attrs: {
-			/** @param {any} v @param {HTMLInputElement} e */
+			/** @param {any} v @param {HTMLSelectElement} e */
 			$disabled: (v, e) => {e.disabled = v;},
-			/** @param {any} v @param {HTMLInputElement} e */
-			$readonly: (v, e) => {e.readOnly = v;},
-			/** @param {any} v @param {HTMLInputElement} e */
+			/** @param {any} v @param {HTMLSelectElement} e */
 			$required: (v, e) => {e.required = v;},
-			/** @param {any} v @param {HTMLInputElement} e */
+			/** @param {any} v @param {HTMLSelectElement} e */
 			$value: (v, e) => { e.value = toText$1(v); },
 		},
 		events: {
@@ -2760,7 +3067,7 @@ function renderArray(layout, parent, next, store, env, renderItem) {
 			if (!old) {
 				const ItemStart = parent.insertBefore(document.createComment(''), nextNode);
 				const itemEnd = parent.insertBefore(document.createComment(''), nextNode);
-				const d = renderItem(layout, parent, itemEnd, child, env.setValue(child, store));
+				const d = renderItem(layout, parent, itemEnd, child, env.setStore(child, store));
 				seMap.set(child, [ItemStart, itemEnd, d]);
 				continue;
 			}
@@ -2784,6 +3091,7 @@ function renderArray(layout, parent, next, store, env, renderItem) {
 
 	return () => {
 		start.remove();
+		destroyMap(seMap);
 		childrenResult();
 	};
 }
@@ -2852,15 +3160,24 @@ function renderFillDirectives(parent, next, envs, { text, html }) {
  * @param {Element} parent
  * @param {Node?} next
  * @param {Environment} envs
- * @param {(layout: Layout.Node) => () => void} renderItem
+ * @param {Record<string, [Layout.Node, Environment]>} templates
+ * @param {(layout: Layout.Node, templates: Record<string, any>) => () => void} renderItem
  * @returns {() => void}
  */
-function renderList(layouts, parent, next, envs, renderItem) {
+function renderList(layouts, parent, next, envs, templates, renderItem) {
 
 	/** @type {Set<() => void>?} */
 	let bkList = new Set();
 	/** @type {[string | Function | null, Layout.Node][]} */
 	let ifList = [];
+	/** @type {Record<string, [Layout.Node, Environment]>} */
+	let currentTemplates = Object.create(templates);
+	for (const layout of layouts) {
+		if (typeof layout === 'string') { continue; }
+		const name = layout.directives.template;
+		if (!name) { continue; }
+		currentTemplates[name] = [layout, envs];
+	}
 
 	/** @param {[string | Function | null, Layout.Node][]} list */
 	function renderIf(list) {
@@ -2878,7 +3195,7 @@ function renderList(layouts, parent, next, envs, renderItem) {
 		function renderIndex(index) {
 			const layout = list[index]?.[1];
 			if (!layout) { return; }
-			destroy = renderItem(layout);
+			destroy = renderItem(layout, currentTemplates);
 		}
 		bkList.add(() => {
 			destroy();
@@ -2905,6 +3222,11 @@ function renderList(layouts, parent, next, envs, renderItem) {
 			bkList.add(() => node.remove());
 			continue;
 		}
+		if (layout.directives.template) {
+			renderIf(ifList);
+			ifList = [];
+			continue;
+		}
 		if (ifList.length && layout.directives.else) {
 			const ifv = layout.directives.if || null;
 			ifList.push([ifv, layout]);
@@ -2922,7 +3244,7 @@ function renderList(layouts, parent, next, envs, renderItem) {
 			continue;
 		}
 		bkList.add(
-			renderItem(layout)
+			renderItem(layout, currentTemplates)
 		);
 	}
 
@@ -2936,36 +3258,147 @@ function renderList(layouts, parent, next, envs, renderItem) {
 	};
 }
 
+/** @import * as Layout from '../Layout/index.mjs' */
+/** @import Store, { ObjectStore } from '../Store/index.mjs' */
+
+/**
+ *
+ * @param {Layout.Node} layout
+ * @param {Element} parent
+ * @param {Node?} next
+ * @param {ObjectStore} store
+ * @param {Environment} env
+ * @param {(layout: Layout.Node, parent: Element, next: Node | null, store: Store, env: any) => () => void} renderItem
+ */
+function renderObject(layout, parent, next, store, env, renderItem) {
+	/** @type {(() => void)[]} */
+	const children = [];
+	for (const [k, child] of [...store]) {
+	children.push(renderItem(layout, parent, next, child, env.setStore(child, store)));
+	}
+
+	return () => {
+		for (const d of children) {
+			d();
+		}
+	};
+}
+
+/** @import * as Layout from '../Layout/index.mjs' */
 /** @import Store from '../Store/index.mjs' */
 
 /**
+ *
  * @param {Layout.Node} layout
  * @param {Element} parent
  * @param {Node?} next
+ * @param {Store} store
+ * @param {() => any} getter
  * @param {Environment} env
- * @param {(layout: Layout.Node) => () => void} renderItem
- * @returns {() => void}
+ * @param {(layout: Layout.Node, parent: Element, next: Node | null, store: Store, env: any) => () => void} renderItem
  */
-function renderFragment(layout, parent, next, env, renderItem) {
-	return renderFillDirectives(parent, next, env, layout.directives) || 
-	renderList(layout.children || [], parent, next, env, renderItem);
+function renderEnum(layout, parent, next, store, getter, env, renderItem) {
+
+	/** @type {Signal.Computed<[value: any, index: number, kKey: any][]>} */
+	const list = new Signal.Computed(() => {
+		const values = getter();
+		if (typeof values === 'number') {
+			const n = Math.floor(values);
+			if (!n) { return []; }
+			return Array(n).fill(0).map((_, i) => [i + 1, i, i]);
+		}
+		if (!values || typeof values !== 'object') { return []; }
+		if (Array.isArray(values)) {
+			return values.map((v, i) => [v, i, i]);
+		}
+		// TODO: 转列表
+		return Object.entries(values).map(([k,v], i) => [v, i, k]);
+	});
+	const start = parent.insertBefore(document.createComment(''), next);
+	/** @type {[Comment, Comment, () => void, key: any, Signal.State<any>, Signal.State<any>][]} */
+	let seMap = [];
+	/** @param {[Comment, Comment, () => void, key: any, Signal.State<any>, Signal.State<any>][]} map */
+	function destroyMap(map) {
+		for (const [s, e, d] of map) {
+			d();
+			s.remove();
+			e.remove();
+		}
+	}
+	const childrenResult = watch(() => list.get(), function render(children) {
+		if (!start.parentNode) { return; }
+		let nextNode = start.nextSibling;
+		const oldSeMap = seMap;
+		seMap = [];
+		for (const [value, index, key] of children) {
+			const index2 = oldSeMap.findIndex((v) => v[3] === key);
+			const [old] = index2 >= 0 ? oldSeMap.splice(index2, 1) : [];
+			if (!old) {
+				const ItemStart = parent.insertBefore(document.createComment(''), nextNode);
+				const itemEnd = parent.insertBefore(document.createComment(''), nextNode);
+				const valueState = new Signal.State(value);
+				const indexState = new Signal.State(index);
+				const d = renderItem(layout, parent, itemEnd, store, env.setObject({
+					get key() { return key; },
+					get value() { return valueState.get(); },
+					get index() { return indexState.get(); },
+				}));
+				seMap.push([ItemStart, itemEnd, d, key, valueState, indexState]);
+				continue;
+			}
+			seMap.push(old);
+			old[4].set(value);
+			old[5].set(index);
+			if (nextNode === old[0]) {
+				nextNode = old[1].nextSibling;
+				continue;
+			}
+			/** @type {Node?} */
+			let c = old[0];
+			while (c && c !== old[1]) {
+				const o = c;
+				c = c.nextSibling;
+				parent.insertBefore(o, nextNode);
+			}
+			parent.insertBefore(old[1], nextNode);
+		}
+		destroyMap(oldSeMap);
+	});
 
+	return () => {
+		start.remove();
+		destroyMap(seMap);
+		childrenResult();
+	};
 }
+
+/** @import Store from '../Store/index.mjs' */
+
 /**
  * @param {Layout.Node} layout
  * @param {Element} parent
  * @param {Node?} next
  * @param {Store} store
  * @param {Environment} env
+ * @param {Record<string, [Layout.Node, Environment]>} templates
  * @param {string[]} componentPath
  * @param {((path: string[]) => Component?)?} [getComponent]
  */
-function renderItem(layout, parent, next, store, env, componentPath, getComponent) {
+function renderItem(layout, parent, next, store, env, templates, componentPath, getComponent) {
 	env = env.set(layout.aliases, layout.vars);
+	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);
+		return render(templateLayout, parent, next, store, newEnv, templates, componentPath, getComponent);
+	}
 	if (!layout.name || layout.directives.fragment) {
-		return renderFragment(layout, parent, next, env, l => {
-			return render(l, parent, next, store, env, componentPath, getComponent);
-		});
+		return renderFillDirectives(parent, next, env, layout.directives) || 
+			renderList(layout.children || [], parent, next, env, templates, (layout, templates) => {
+				return render(layout, parent, next, store, env, templates, componentPath, getComponent);
+			});
 	}
 	const path = [...componentPath, layout.name];
 	const component = getComponent?.(path);
@@ -2989,13 +3422,13 @@ function renderItem(layout, parent, next, store, env, componentPath, getComponen
 			: createTagComponent(context, component.tag, component.is)
 		: createTagComponent(context, layout.name, layout.is);
 	const root = Array.isArray(r) ? r[0] : r;
-	const slot = Array.isArray(r) && r[1] || root;
+	const slot = Array.isArray(r) ? r[1] : root;
 	parent.insertBefore(root, next);
-	const children =
+	const children = slot ? 
 		renderFillDirectives(slot, null, env, layout.directives)
-		|| renderList(layout.children || [], slot, null, env, l => {
-			return render(l, slot, null, store, env, componentPath, getComponent);
-		});
+		|| renderList(layout.children || [], slot, null, env,  templates, (layout, templates) => {
+			return render(layout, slot, null, store, env, templates, componentPath, getComponent);
+		}) : () => {};
 
 
 	bindClasses(root, layout.classes, env);
@@ -3017,26 +3450,41 @@ function renderItem(layout, parent, next, store, env, componentPath, getComponen
  * @param {Node?} next
  * @param {Store} store
  * @param {Environment} env
+ * @param {Record<string, [Layout.Node, Environment]>} templates
  * @param {string[]} componentPath
  * @param {((path: string[]) => Component?)?} [getComponent]
  * @returns {() => void}
  */
-function render(layout, parent, next, store, env, componentPath, getComponent) {
+function render(layout, parent, next, store, env, templates, componentPath, getComponent) {
 	const { directives } = layout;
 	const { value } = directives;
 	if (value) {
 		const newStore = store.child(value);
 		if (!newStore) { return () => {}; }
 		store = newStore;
-		env = env.setValue(store);
+		env = env.setStore(store);
 	}
-	if (!directives.enum) {
-		return renderItem(layout, parent, next, store, env, componentPath, getComponent);
+	const enumValue = directives.enum;
+	if (!enumValue) {
+		return renderItem(layout, parent, next, store, env, templates, componentPath, getComponent);
 	}
-	if (!(store instanceof ArrayStore)) { return () => { }; }
-	return renderArray(layout, parent, next, store, env, (a, b, c, store, env) => {
-		return renderItem(a, b, c, store, env, componentPath, getComponent);
-	});
+	const newStore = enumValue === true ? store : env.enum(enumValue);
+	if (newStore instanceof ArrayStore) {
+		return renderArray(layout, parent, next, newStore, env, (a, b, c, store, env) => {
+			return renderItem(a, b, c, store, env, templates, componentPath, getComponent);
+		});
+	}
+	if (newStore instanceof ObjectStore) {
+		return renderObject(layout, parent, next, newStore, env, (a, b, c, store, env) => {
+			return renderItem(a, b, c, store, env, templates, componentPath, getComponent);
+		});
+	}
+	if (typeof newStore === 'function') {
+		return renderEnum(layout, parent, next, store, newStore, env, (a, b, c, store, env) => {
+			return renderItem(a, b, c, store, env, templates, componentPath, getComponent);
+		});
+	}
+	return () => { };
 }
 
 /**
@@ -3067,9 +3515,10 @@ 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');
-	const env = new Environment(global).setValue(store);
-	return renderList(layouts, parent, null, env, l => {
-		return render(l, parent, null, store, env, [], components);
+	const env = new Environment(global).setStore(store);
+	const templates = Object.create(null);
+	return renderList(layouts, parent, null, env, templates, (layout, templates) => {
+		return render(layout, parent, null, store, env, templates, [], components);
 	});
 }