@neeloong/form 0.12.0 → 0.13.0

package/README.md

@@ -175,6 +175,13 @@ render(store, layouts, app);
   <li !enum="items" !text="$item"></li> <!-- items 是数组 -->
 </ul>
 ```
+#### 自定义排序
+
+```html
+<ul>
+  <li !enum="object" !sort="$key" !text="$item"></li> <!-- object 是对象，将按照其键排序，渲染其值 -->
+</ul>
+```
 
 #### 嵌套循环
 
@@ -284,7 +291,7 @@ render(store, layouts, app);
 1. 模板定义: `!template`
 1. 条件: `!if` `!else`
 1. 子属性: `!value`
-1. 枚举: `!enum`
+1. 枚举: `!enum` `!sort`
 1. 别名、计算名与显式变量: `*别名` `*计算名` `+变量`
 1. 片段与模板调用: `!fragment` 
 1. 属性与事件: `:绑定属性` `@事件` `普通属性` `!bind`
@@ -325,7 +332,9 @@ render(store, layouts, app);
    - `$kind` 只读 字段类别
    - `$error` 只读 字段校验错误信息
    - `$errors` 只读 所有校验错误列表
-1. 数组字段扩展隐式函数（只在事件中可用）
+   - `$addable` 只读 是否可以为当前数组增加项目，非数组上下文总是为 `false`
+   - `$removable` 只读 是否可以将当前项从数组中移除，非数组成员上下文总是为 `false`
+1. 字段扩展隐式函数（只在事件中可用）
    - `$reset()` 重置数据
    - `$validate()` 触发当前项的异步校验
    - `$validate(true)` 触发当前项及其后代的异步校验

package/index.d.mts

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.12.0
+* @neeloong/form v0.13.0
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -253,6 +253,7 @@ type Enum = {
     templates?: Record<string, Template> | undefined;
     type: "enum";
     value: Node.Name | Node.Calc | Node.Value;
+    sort?: Node.Name | Node.Calc | Node.Value<any> | undefined;
     /**
      * 子元素
      */
@@ -653,6 +654,14 @@ declare namespace Schema {
          * 模式规则
          */
         pattern?: RegExp | ((store: Store) => RegExp | null) | null | undefined;
+        /**
+         * 数组内是否可添加
+         */
+        addable?: boolean | ((store: Store) => boolean) | null | undefined;
+        /**
+         * 数组内是否可移除
+         */
+        removable?: boolean | ((store: Store) => boolean) | null | undefined;
         /**
          * 可选值
          */
@@ -804,7 +813,7 @@ declare class Store<T = any, M = any> {
     /**
      * @param {Schema.Field<M>} schema 字段的 Schema 定义
      * @param {object} [options] 可选配置
-     * @param {*} [options.parent]
+     * @param {Store?} [options.parent]
      * @param {*} [options.state]
      * @param {number | string | null} [options.index]
      * @param {number | Signal.State<number> | Signal.Computed<number>} [options.size]
@@ -813,8 +822,9 @@ declare class Store<T = any, M = any> {
      * @param {boolean} [options.hidden]
      * @param {boolean} [options.clearable]
      * @param {boolean} [options.required]
-     * @param {boolean} [options.readonly]
      * @param {boolean} [options.disabled]
+     * @param {boolean} [options.readonly]
+     * @param {boolean} [options.removable]
      *
      * @param {string} [options.label] 字段标签
      * @param {string} [options.description] 字段描述
@@ -838,8 +848,8 @@ declare class Store<T = any, M = any> {
      * @param {((value: T?, index: any, store: Store) => void)?} [options.onUpdate]
      * @param {((value: T?, index: any, store: Store) => void)?} [options.onUpdateState]
      */
-    constructor(schema: Schema.Field<M>, { null: isNull, state, ref, setValue, setState, convert, onUpdate, onUpdateState, validator, validators, index, size, new: isNew, parent: parentNode, hidden, clearable, required, disabled, readonly, label, description, placeholder, min, max, step, minLength, maxLength, pattern, values }?: {
-        parent?: any;
+    constructor(schema: Schema.Field<M>, { null: isNull, state, ref, setValue, setState, convert, onUpdate, onUpdateState, validator, validators, index, size, new: isNew, parent: parentNode, hidden, clearable, required, disabled, readonly, removable, label, description, placeholder, min, max, step, minLength, maxLength, pattern, values }?: {
+        parent?: Store<any, any> | null | undefined;
         state?: any;
         index?: string | number | null | undefined;
         size?: number | Signal.State<number> | Signal.Computed<number> | undefined;
@@ -848,8 +858,9 @@ declare class Store<T = any, M = any> {
         hidden?: boolean | undefined;
         clearable?: boolean | undefined;
         required?: boolean | undefined;
-        readonly?: boolean | undefined;
         disabled?: boolean | undefined;
+        readonly?: boolean | undefined;
+        removable?: boolean | undefined;
         label?: string | undefined;
         description?: string | undefined;
         placeholder?: string | undefined;
@@ -964,6 +975,11 @@ declare class Store<T = any, M = any> {
     set readonly(v: boolean);
     /** 是否只读 */
     get readonly(): boolean;
+    set selfRemovable(v: boolean | null);
+    get selfRemovable(): boolean | null;
+    set removable(v: boolean);
+    /** 是否只读 */
+    get removable(): boolean;
     set selfLabel(v: string | null);
     get selfLabel(): string | null;
     set label(v: string | null);

package/index.js

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.12.0
+* @neeloong/form v0.13.0
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -595,17 +595,12 @@
    * @param {Signal.Computed<boolean>?} [parent]
    * @returns {[Signal.State<boolean?>, Signal.Computed<boolean>]}
    */
-  const createBooleanStates = (self, defState, fn, parent) => {
+  function createBooleanStates(self, defState, fn, parent) {
 
   	const selfState = new exports.Signal.State(typeof defState === 'boolean' ? defState : null);
-  	/** @type {Signal.Computed<boolean>} */
-  	let scriptState;
-  	if (typeof fn === 'function') {
-  		scriptState = new exports.Signal.Computed(() => Boolean(fn(self)));
-  	} else {
-  		const def = Boolean(fn);
-  		scriptState = new exports.Signal.Computed(() => def);
-  	}
+  	const scriptState = typeof fn === 'function' 
+  		? new exports.Signal.Computed(() => Boolean(fn(self)))
+  		: new exports.Signal.State(Boolean(fn));
 
   	const getState = () => {
   		const s = selfState.get();
@@ -617,7 +612,7 @@
 
   	return [selfState, state];
 
-  };
+  }
 
   /** @import { Schema } from '../types.mjs' */
   /** @param {*} v  */
@@ -717,12 +712,13 @@
   }
 
   /** @import { Schema } from '../types.mjs' */
+  /** @import ArrayStore from './ArrayStore.mjs' */
 
 
   /** @type {{new(...p: ConstructorParameters<typeof Store>): Store}?} */
   let ObjectStore$1 = null;
-  /** @type {{new(...p: ConstructorParameters<typeof Store>): Store}?} */
-  let ArrayStore$1 = null;
+  /** @type {{new(...p: ConstructorParameters<typeof Store>): ArrayStore}?} */
+  let ArrayStoreClass = null;
   /** @type {Record<string, {new(...p: ConstructorParameters<typeof Store>): Store}?>} */
   let TypeStores = Object.create(null);
   /**
@@ -739,8 +735,8 @@
   	const type = schema.type;
   	/** @type {{new(...p: ConstructorParameters<typeof Store>): Store}} */
   	let Class = Store;
-  	if (schema.array && !(ArrayStore$1 && options?.parent instanceof ArrayStore$1)) {
-  		if (ArrayStore$1) { Class = ArrayStore$1; }
+  	if (schema.array && !(ArrayStoreClass && options?.parent instanceof ArrayStoreClass)) {
+  		if (ArrayStoreClass) { Class = ArrayStoreClass; }
   	} else if (typeof type === 'string') {
   		const C = TypeStores[type];
   		if (C) { Class = C; }
@@ -755,9 +751,9 @@
   	ObjectStore$1 = Class;
   }
 
-  /** @param {{new(...p: ConstructorParameters<typeof Store>): Store}} Class */
+  /** @param {{new(...p: ConstructorParameters<typeof Store>): ArrayStore}} Class */
   function setArrayStore(Class) {
-  	ArrayStore$1 = Class;
+  	ArrayStoreClass = Class;
   }
   /**
    * @param {string} type
@@ -933,7 +929,7 @@
   	/**
   	 * @param {Schema.Field<M>} schema 字段的 Schema 定义
   	 * @param {object} [options] 可选配置
-  	 * @param {*} [options.parent] 
+  	 * @param {Store?} [options.parent] 
   	 * @param {*} [options.state] 
   	 * @param {number | string | null} [options.index] 
   	 * @param {number | Signal.State<number> | Signal.Computed<number>} [options.size] 
@@ -942,8 +938,9 @@
   	 * @param {boolean} [options.hidden] 
   	 * @param {boolean} [options.clearable] 
   	 * @param {boolean} [options.required] 
-  	 * @param {boolean} [options.readonly] 
   	 * @param {boolean} [options.disabled] 
+  	 * @param {boolean} [options.readonly] 
+  	 * @param {boolean} [options.removable] 
   	 * 
   	 * @param {string} [options.label] 字段标签
   	 * @param {string} [options.description] 字段描述
@@ -972,7 +969,7 @@
   		setValue, setState, convert, onUpdate, onUpdateState,
   		validator, validators,
   		index, size, new: isNew, parent: parentNode,
-  		hidden, clearable, required, disabled, readonly,
+  		hidden, clearable, required, disabled, readonly, removable,
   		label, description, placeholder, min, max, step, minLength, maxLength, pattern, values: values$1
   	} = {}) {
   		this.schema = schema;
@@ -1038,6 +1035,8 @@
   		// @ts-ignore
   		[this.#selfValues, this.#values] = createState(this, values, values$1, schema.values);
 
+  		[this.#selfRemovable, this.#removable] = createBooleanStates(this, removable, schema.removable ?? true);
+
   		const validatorResult = createValidator(this, schema.validator, validator);
 
   		const [changed, changedResult, cancelChange] = createAsyncValidator(this, schema.validators?.change, validators?.change);
@@ -1192,6 +1191,15 @@
   	set readonly(v) { this.#selfReadonly.set(typeof v === 'boolean' ? v : null); }
 
 
+  	/** @readonly @type {Signal.State<boolean?>} */
+  	#selfRemovable
+  	/** @readonly @type {Signal.Computed<boolean>} */
+  	#removable
+  	get selfRemovable() { return this.#selfRemovable.get(); }
+  	set selfRemovable(v) { this.#selfRemovable.set(typeof v === 'boolean' ? v : null); }
+  	/** 是否只读 */
+  	get removable() { return this.#removable.get(); }
+  	set removable(v) { this.#selfRemovable.set(typeof v === 'boolean' ? v : null); }
 
 
   	/** @readonly @type {Signal.State<string?>} */
@@ -1397,6 +1405,7 @@
   		}
   		this.#value.set(newValues);
   		this.#initValue.set(newValues);
+  		this.#onUpdate?.(newValues, this.#index.get(), this);
   		return newValues;
   	}
 
@@ -1596,10 +1605,11 @@
   	 * @param {Store?} [options.parent]
   	 * @param {string | number | null} [options.index] 
   	 * @param {boolean} [options.new] 
+  	 * @param {boolean} [options.addable] 
   	 * @param {(value: any, index: any, store: Store) => void} [options.onUpdate] 
   	 * @param {(value: any, index: any, store: Store) => void} [options.onUpdateState] 
   	 */
-  	constructor(schema, { parent, onUpdate, onUpdateState, index, new: isNew} = {}) {
+  	constructor(schema, { parent, onUpdate, onUpdateState, index, new: isNew, addable} = {}) {
   		const childrenState = new exports.Signal.State(/** @type {Store[]} */([]));
   		// @ts-ignore
   		const updateChildren = (list) => {
@@ -1635,6 +1645,9 @@
   			},
   			onUpdateState,
   		});
+
+  		[this.#selfAddable, this.#addable] = createBooleanStates(this, addable, schema.addable ?? true);
+  		
   		this.#children = childrenState;
   		const childCommonOptions = {
   			parent: this,
@@ -1665,6 +1678,20 @@
   			return child
   		};
   	}
+
+
+  	/** @readonly @type {Signal.State<boolean?>} */
+  	#selfAddable
+  	/** @readonly @type {Signal.Computed<boolean>} */
+  	#addable
+  	get selfAddable() { return this.#selfAddable.get(); }
+  	set selfAddable(v) { this.#selfAddable.set(typeof v === 'boolean' ? v : null); }
+  	/** 是否禁用字段 */
+  	get addable() { return this.#addable.get(); }
+  	set addable(v) { this.#selfAddable.set(typeof v === 'boolean' ? v : null); }
+
+
+
   	/**
   	 * 
   	 * @param {number} index 
@@ -1673,6 +1700,7 @@
   	 * @returns 
   	 */
   	insert(index, value = null, isNew) {
+  		if (!this.addable) { return false; }
   		const data = this.value || [];
   		if (!Array.isArray(data)) { return false; }
   		const children = [...this.#children.get()];
@@ -1943,7 +1971,7 @@
   	}
   	const enumValue = layout.enum;
   	const name = layout.value;
-  	if (enumValue) { child = { type: 'enum', value: enumValue, vars, children: child ? [child] : [] }; vars = null; }
+  	if (enumValue) { child = { type: 'enum', value: enumValue, sort: layout.sort, vars, children: child ? [child] : [] }; vars = null; }
   	if (name) { child = { type: 'value', name, vars, children: child ? [child] : [] }; vars = null; }
   	if (vars?.length) {
   		child = { type: 'fragment', vars, children: child ? [child] : [] };
@@ -2137,6 +2165,9 @@
   			case 'enum':
   				node.enum = value ? parse$1(value, createCalc) : {value: true};
   				break;
+  			case 'sort':
+  				node.sort = value ? parse$1(value, createCalc) : {value: true};
+  				break;
   			case 'if':
   				node.if = parse$1(value, createCalc);
   				break;
@@ -2178,6 +2209,7 @@
    * 
    * @property {string} [value] 值关联
    * @property {Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value} [enum] 列表属性枚举
+   * @property {Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value} [sort]
    * 
    * @property {boolean | string} [bind] 绑定内容
    * @property {Layout.Node.Name | Layout.Node.Value | Layout.Node.Calc} [text] 文本渲染
@@ -2804,6 +2836,7 @@
    * @property {Record<string, Template>} [templates]
    * @property {'enum'} type
    * @property {Node.Name | Node.Calc | Node.Value} value
+   * @property {Node.Name | Node.Calc | Node.Value} [sort]
    * @property {Child[]} children 子元素
    * @property {string} [comment] 注释
    */
@@ -3003,7 +3036,11 @@
   	yield [`${key}${sign}reset`, {exec: () => val.reset()}];
   	// @ts-ignore
   	yield [`${key}${sign}validate`, {exec: v => val.validate(v ? [] : null)}];
-  	if (!(val instanceof ArrayStore)) { return; }
+  	if (!(val instanceof ArrayStore)) {
+  		yield [`${key}${sign}addable`, {get: () => false}];
+  		return;
+  	}
+  	yield [`${key}${sign}addable`, {get: () => val.addable}];
   	yield [`${key}${sign}insert`, {exec: (index, value) => val.insert(index, value)}];
   	yield [`${key}${sign}add`, {exec: (v) => val.add(v)}];
   	yield [`${key}${sign}remove`, {exec: (index) => val.remove(index)}];
@@ -3022,30 +3059,53 @@
    */
   function *toParentItem(parent, val, key = '', sign = '$') {
   	if (!(parent instanceof ArrayStore)) {
+  		yield [`${key}${sign}removable`, {get: () => false}];
   		yield [`${key}${sign}upMovable`, {get: () => false}];
   		yield [`${key}${sign}downMovable`, {get: () => false}];
+  		yield [`${key}${sign}remove`, {exec: () => {}}];
+  		yield [`${key}${sign}upMove`, {exec: () => {}}];
+  		yield [`${key}${sign}downMove`, {exec: () => {}}];
   		return
   	}
+  	yield [`${key}${sign}removable`, {get: () => {
+  		if (parent.readonly) { return false; }
+  		if (parent.disabled) { return false; }
+  		if (!val.removable) { return false; }
+  		return true;
+  	}}];
   	yield [`${key}${sign}upMovable`, {get: () => {
+  		if (parent.readonly) { return false; }
+  		if (parent.disabled) { return false; }
   		const s = val.index;
   		if (typeof s !== 'number') { return false; }
   		if (s <= 0) { return false; }
   		return true;
   	}}];
   	yield [`${key}${sign}downMovable`, {get: () => {
+  		if (parent.readonly) { return false; }
+  		if (parent.disabled) { return false; }
   		const s = val.index;
   		if (typeof s !== 'number') { return false; }
   		if (s >= parent.size - 1) { return false; }
   		return true;
   	}}];
-  	yield [`${key}${sign}remove`, {exec: () => parent.remove(Number(val.index))}];
+  	yield [`${key}${sign}remove`, {exec: () => {
+  		if (parent.readonly) { return; }
+  		if (parent.disabled) { return; }
+  		if (!val.removable) { return; }
+  		parent.remove(Number(val.index));
+  	}}];
   	yield [`${key}${sign}upMove`, {exec: () => {
+  		if (parent.readonly) { return; }
+  		if (parent.disabled) { return; }
   		const s = val.index;
   		if (typeof s !== 'number') { return; }
   		if (s <= 0) { return; }
   		parent.move(s, s - 1);
   	}}];
   	yield [`${key}${sign}downMove`, {exec: () => {
+  		if (parent.readonly) { return; }
+  		if (parent.disabled) { return; }
   		const s = val.index;
   		if (typeof s !== 'number') { return; }
   		if (s >= parent.size - 1) { return; }
@@ -4524,6 +4584,7 @@
   	return node;
   }
 
+  /** @import * as Layout from '../Layout/index.mjs' */
   /** @import Store, { ArrayStore } from '../Store/index.mjs' */
 
   /**
@@ -4533,8 +4594,9 @@
    * @param {ArrayStore} store
    * @param {Environment} env
    * @param {(next: Node | null, env: any) => () => void} renderItem
+   * @param {Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value} [sort]
    */
-  function renderArray(parent, next, store, env, renderItem) {
+  function renderArray(parent, next, store, env, renderItem, sort) {
   	const start = parent.insertBefore(document.createComment(''), next);
   	/** @type {Map<Store, [Comment, Comment, () => void]>} */
   	let seMap = new Map();
@@ -4650,7 +4712,26 @@
   	};
   }
 
+  /**
+   *
+   * @param {any} a
+   * @param {any} b
+   * @returns
+   */
+  function compare(a, b) {
+  	if (typeof a === 'bigint' && typeof b === 'bigint') {
+  		return Number(a - b);
+  	}
+  	if ((typeof a === 'number' || typeof a === 'bigint') && (typeof b === 'number' || typeof b === 'bigint')) {
+  		return Number(a) - Number(b);
+  	}
+  	const sa = String(a);
+  	const sb = String(b);
+  	return sa > sb ? 1 : sa < sb ? -1 : 0;
+  }
+
   /** @import { ObjectStore, Store } from '../Store/index.mjs' */
+  /** @import * as Layout from '../Layout/index.mjs' */
 
   /**
    *
@@ -4659,14 +4740,21 @@
    * @param {ObjectStore} store
    * @param {Environment} env
    * @param {(next: Node | null, env: any) => () => void} renderItem
+   * @param {Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value} [sort]
    */
-  function renderObject(parent, next, store, env, renderItem) {
+  function renderObject(parent, next, store, env, renderItem, sort) {
   	/** @type {(() => void)[]} */
   	const children = [];
-  	/** @type {[string, Store<any, any>, number][]} */
-  	const childStores = [...store].map(([k,v], i) => [k,v,i]);
+  	const childStores = [...store];
   	const count = childStores.length;
-  	for (const [key, child, index] of childStores) {
+  	/** @type {[string, Store<any, any>, number][]} */
+  	const stores = sort
+  	? childStores
+  		.map(([k,v]) => [k,v,env.setStore(v, store).exec(sort)])
+  		.sort(([,,a], [,,b]) => compare(a, b))
+  		.map(([k,v], i) => [k,v,i])
+  	: childStores.map(([k,v], i) => [k,v,i]);
+  	for (const [key, child, index] of stores) {
   	children.push(renderItem(next, env.setStore(child, store, {
   		get count() { return count; },
   		get key() { return key; },
@@ -4682,6 +4770,8 @@
   	};
   }
 
+  /** @import * as Layout from '../Layout/index.mjs' */
+
   /**
    *
    * @param {Element} parent
@@ -4689,24 +4779,38 @@
    * @param {() => any} getter
    * @param {Environment} env
    * @param {(next: Node | null, env: any) => () => void} renderItem
+   * @param {Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value} [sort]
    */
-  function renderEnum(parent, next, getter, env, renderItem) {
+  function renderEnum(parent, next, getter, env, renderItem, sort) {
 
-  	/** @type {Signal.Computed<[value: any, index: number, kKey: any][]>} */
+  	/** @type {Signal.Computed<[value: any, kKey: any][]>} */
   	const list = new exports.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]);
+  			return Array(n).fill(0).map((_, i) => [i + 1, i]);
   		}
   		if (!values || typeof values !== 'object') { return []; }
   		if (Array.isArray(values)) {
-  			return values.map((v, i) => [v, i, i]);
+  			return values.map((v, i) => [v, i]);
   		}
   		// TODO: 转列表
-  		return Object.entries(values).map(([k,v], i) => [v, i, k]);
+  		return Object.entries(values).map(([k,v]) => [v, k]);
   	});
+  	/** @type {Signal.Computed<[value: any, index: number, kKey: any][]>} */
+  	const slotted = sort ? new exports.Signal.Computed(() => {
+  		const values = list.get();
+  		return values
+  			.map(([k,v], i) => [v, k, env.setObject({
+  				get count() { return values.length },
+  				get key() { return k; },
+  				get item() { return v; },
+  				get index() { return i; },
+  			}).exec(sort)])
+  			.sort(([,,a], [,,b]) => compare(a, b))
+  			.map(([k, v], i) => [v, i, k]);
+  	}) : new exports.Signal.Computed(() => list.get().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 = [];
@@ -4719,7 +4823,7 @@
   		}
   	}
   	const count = new exports.Signal.State(0);
-  	const childrenResult = watch(() => list.get(), function render(children) {
+  	const childrenResult = watch(() => slotted.get(), function render(children) {
   		if (!start.parentNode) { return; }
   		let nextNode = start.nextSibling;
   		const oldSeMap = seMap;
@@ -5090,13 +5194,13 @@
   		/** @type {(next: Node | null, env: any) => () => void} */
   		const r = (next, env) => renderChildren(layout.children, parent, next, env, templates, componentPath, enhancements, relate, getComponent);
   		if (list instanceof ArrayStore) {
-  			return renderArray(parent, next, list, env, r);
+  			return renderArray(parent, next, list, env, r, layout.sort);
   		}
   		if (list instanceof ObjectStore) {
-  			return renderObject(parent, next, list, env, r);
+  			return renderObject(parent, next, list, env, r, layout.sort);
   		}
   		if (typeof list === 'function') {
-  			return renderEnum(parent, next, list, env, r);
+  			return renderEnum(parent, next, list, env, r, layout.sort);
   		}
   		return () => { };
   	}