@neeloong/form 0.15.0 → 0.17.0

package/index.d.mts

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.15.0
+* @neeloong/form v0.17.0
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -1174,13 +1174,22 @@ declare class ArrayStore<T = any, M = any> extends Store<(T | null)[], M> {
     #private;
 }
 
-type GridFormItemTemplate = {
+type GridFormItemTemplateTableAction = "add" | "move" | "trigger" | "remove" | "serial";
+type GridFieldLayout = {
     field: string;
-    subFields?: GridFormTemplate | null | undefined;
-    span: number;
-    headers?: string[] | undefined;
+    fields?: GridFieldLayout[] | null | undefined;
+    tableFoot?: "add" | "header" | "none" | undefined;
+    columns?: (string | GridFormItemTemplateTableAction[])[] | undefined;
+    colStart?: number | undefined;
+    colSpan?: number | undefined;
+    colEnd?: number | undefined;
+    rowStart?: number | undefined;
+    rowSpan?: number | undefined;
+    rowEnd?: number | undefined;
+};
+type GridLayout = {
+    fields?: GridFieldLayout[] | null | undefined;
 };
-type GridFormTemplate = GridFormItemTemplate[];
 type Options = object;
 type FieldRenderer = (store: Store<any, any>, component: any, Options: Options) => [HTMLElement, () => void];
 
@@ -1190,9 +1199,9 @@ type FieldRenderer = (store: Store<any, any>, component: any, Options: Options)
  * @param {HTMLElement} root
  * @param {FieldRenderer} fieldRenderer
  * @param {boolean} editable
- * @param {GridFormTemplate?} [template]
+ * @param {GridLayout?} [layout]
  */
-declare function _default(store: Store, root: HTMLElement, fieldRenderer: FieldRenderer, editable: boolean, template?: GridFormTemplate | null): () => void;
+declare function _default(store: Store, root: HTMLElement, fieldRenderer: FieldRenderer, editable: boolean, layout?: GridLayout | null): () => void;
 
 /**
  * @param {Store} store 存储实例
@@ -1244,4 +1253,4 @@ declare function effect(fn: () => void): () => void;
  */
 declare function renderHtml(renderField: (store: Store<any, any>, component: any) => [HTMLElement, () => void] | null, store: Store, root: HTMLElement, html?: string | ParentNode, clone?: boolean): () => void;
 
-export { ArrayStore, type AsyncValidator, Component, Enhancement, type FieldRenderer, type GridFormItemTemplate, type GridFormTemplate, index_d as Layout, ObjectStore, type Options, type Ref, type Relatedness, Schema, Store, type Validator, type VerifyError, effect, render, _default as renderGrid, renderHtml, watch };
+export { ArrayStore, type AsyncValidator, Component, Enhancement, type FieldRenderer, type GridFieldLayout, type GridFormItemTemplateTableAction, type GridLayout, index_d as Layout, ObjectStore, type Options, type Ref, type Relatedness, Schema, Store, type Validator, type VerifyError, effect, render, _default as renderGrid, renderHtml, watch };

package/{index.js → index.full.js}

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.15.0
+* @neeloong/form v0.17.0
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -5501,16 +5501,16 @@
 
   /** @import { Store } from '../Store/index.mjs' */
   /** @import { Relatedness } from '../types.mjs' */
-  /** @import { FieldRenderer, GridFormItemTemplate } from './types.mjs' */
+  /** @import { FieldRenderer, GridFieldLayout, GridFormItemTemplateTableAction } from './types.mjs' */
 
   /**
    * 
    * @param {Store<any, any>} store 
    * @param {FieldRenderer} fieldRenderer 
    * @param {boolean} editable 
-   * @param {GridFormItemTemplate?} template
+   * @param {GridFieldLayout?} layout
    * @param {object} option 
-   * @param {string[]} option.columns 
+   * @param {(string | GridFormItemTemplateTableAction[])[]} option.columns 
    * @param {() => void} option.remove 
    * @param {() => void} option.dragenter 
    * @param {() => void} option.dragstart 
@@ -5521,8 +5521,8 @@
 
    * @returns {[HTMLTableSectionElement, () => void]}
    */
-  function Line(store, fieldRenderer, editable, template, {
-  	columns, 
+  function Line(store, fieldRenderer, editable, layout, {
+  	columns,
   	remove, dragenter, dragstart, dragend, deletable
   }, options) {
   	const root = document.createElement('tbody');
@@ -5536,72 +5536,109 @@
   	root.addEventListener('dragend', dragend);
   	const head = root.appendChild(document.createElement('tr'));
 
-  	const handle = head.appendChild(document.createElement('th'));
-  	handle.className = 'button-group';
   	/** @type {(() => void)[]} */
   	const destroyList = [];
-  	for (const name of columns) {
-  		const td = head.appendChild(document.createElement('td'));
-  		const child = store.child(name);
-  		if (!child) { continue }
-  		const [el, destroy] = FormItem(child, fieldRenderer, editable, null, options, true);
-  		destroyList.push(destroy);
-  		td.appendChild(el);
-  	}
 
 
+  	let trigger = () => { };
+  	/** @type {HTMLButtonElement[]} */
+  	const triggerList = [];
+  	if (columns.find(v => Array.isArray(v) && v.includes('trigger'))) {
+  		const body = root.appendChild(document.createElement('tr'));
+  		const main = body.appendChild(document.createElement('td'));
+  		main.colSpan = columns.length;
 
-  	const body = root.appendChild(document.createElement('tr'));
-  	const main = body.appendChild(document.createElement('td'));
-  	main.colSpan = columns.length + 1;
-  	
-  	const subFields = template?.subFields;
-  	const [form, destroy] = Form(store, fieldRenderer, editable, Array.isArray(subFields) ? subFields : null, options);
-  	main.appendChild(form);
-  	destroyList.push(destroy);
+  		const [form, destroy] = Form(store, fieldRenderer, editable, layout, options);
+  		main.appendChild(form);
+  		destroyList.push(destroy);
+  		body.hidden = true;
+  		trigger = function click() {
+  			if (body.hidden) {
+  				body.hidden = false;
+  				for (const ext of triggerList) {
+  					ext.classList.remove('NeeloongFormGrid-table-line-open');
+  					ext.classList.add('NeeloongFormGrid-table-line-close');
+  				}
+  			} else {
+  				body.hidden = true;
+  				for (const ext of triggerList) {
+  					ext.classList.remove('NeeloongFormGrid-table-line-close');
+  					ext.classList.add('NeeloongFormGrid-table-line-open');
+  				}
+  			}
+  		};
 
+  	}
 
+  	/**
+  	 * 
+  	 * @param {PointerEvent} event 
+  	 */
+  	function pointerdown({ pointerId }) {
+  		root.draggable = true;
+  		/** @param {PointerEvent} event */
+  		function pointerup(event) {
+  			if (event.pointerId !== pointerId) { return; }
+  			if (!root) { return; }
+  			root.draggable = false;
+  			window.removeEventListener('pointerup', pointerup, { capture: true });
+  			window.removeEventListener('pointercancel', pointerup, { capture: true });
+  		}
+  		window.addEventListener('pointerup', pointerup, { capture: true });
+  		window.addEventListener('pointercancel', pointerup, { capture: true });
 
-  	const ext = handle.appendChild(document.createElement('button'));
-  			body.hidden = true;
-  		ext.innerText = '+';
-  	ext.addEventListener('click', () => {
-  		if(body.hidden) {
-  			body.hidden = false;
-  			ext.innerText = '-';
-  		} else {
-  			body.hidden = true;
-  		ext.innerText = '+';
+  	}
 
+  	for (const name of columns) {
+  		if (!Array.isArray(name)) {
+  			const td = head.appendChild(document.createElement('td'));
+  			const child = store.child(name);
+  			if (!child) { continue; }
+  			const [el, destroy] = FormItem(child, fieldRenderer, editable, null, options, true);
+  			destroyList.push(destroy);
+  			td.appendChild(el);
+  			continue;
   		}
-  	});
-  	if (editable) {
-  		const move = handle.appendChild(document.createElement('button'));
-  		move.classList.add('GridForm-table-move');
-  		move.addEventListener('pointerdown', ({pointerId}) => {
-  			root.draggable = true;
-  			/** @param {PointerEvent} event */
-  			function pointerup(event) {
-  				if (event.pointerId !== pointerId) { return }
-  				if (!root) { return }
-  				root.draggable = false;
-  				window.removeEventListener('pointerup', pointerup, {capture: true});
-  				window.removeEventListener('pointercancel', pointerup, {capture: true});
+  		const handle = head.appendChild(document.createElement('th'));
+  		handle.classList.add('NeeloongFormGrid-table-line-handle');
+  		for (const k of name) {
+  			switch (k) {
+  				case 'trigger': {
+  					const ext = handle.appendChild(document.createElement('button'));
+  					ext.classList.add('NeeloongFormGrid-table-line-open');
+  					triggerList.push(ext);
+  					ext.addEventListener('click', trigger);
+  					continue;
+  				}
+  				case 'move': {
+  					if (!editable) { continue; }
+  					const move = handle.appendChild(document.createElement('button'));
+  					move.classList.add('NeeloongFormGrid-table-move');
+  					move.addEventListener('pointerdown', pointerdown);
+  					destroyList.push(watch(() => store.readonly || store.disabled, disabled => {
+  						move.disabled = disabled;
+  					}, true));
+  					continue;
+  				}
+  				case 'remove': {
+  					if (!editable) { continue; }
+  					const del = handle.appendChild(document.createElement('button'));
+  					del.classList.add('NeeloongFormGrid-table-remove');
+  					del.addEventListener('click', remove);
+  					destroyList.push(watch(() => !deletable.get() || store.readonly || store.disabled, disabled => {
+  						del.disabled = disabled;
+  					}, true));
+  					continue;
+  				}
+  				case 'serial': {
+  					const serial = handle.appendChild(document.createElement('span'));
+  					serial.classList.add('NeeloongFormGrid-table-serial');
+  					continue;
+  				}
   			}
-  			window.addEventListener('pointerup', pointerup, {capture: true});
-  			window.addEventListener('pointercancel', pointerup, {capture: true});
-  		});
-  		destroyList.push(watch(() => store.readonly || store.disabled, disabled => {
-  			move.disabled = disabled;
-  		}, true));
-  		const del = handle.appendChild(document.createElement('button'));
-  		del.classList.add('GridForm-table-remove');
-  		// @ts-ignore
-  		destroyList.push(watch(() => !deletable.get() || store.readonly || store.disabled, disabled => {
-  			move.disabled = disabled;
-  		}, true));
-  		del.addEventListener('click', remove);
+  		}
   	}
+
   	return [root, () => {
   		for (const destroy of destroyList) {
   			destroy();
@@ -5611,70 +5648,90 @@
 
   /** @import { Store, ArrayStore } from '../Store/index.mjs' */
   /** @import { Relatedness } from '../types.mjs' */
-  /** @import { FieldRenderer, GridFormItemTemplate } from './types.mjs' */
+  /** @import { FieldRenderer, GridFieldLayout, GridFormItemTemplateTableAction } from './types.mjs' */
 
   /**
    * 
    * @param {HTMLElement} parent 
-   * @param {[string, any][]} columns 
+   * @param {({ field: string; width: any; label: any; } | GridFormItemTemplateTableAction[])[]} columns 
    * @param {() => any} add 
    * @param {{get(): boolean}} addable 
    * @param {boolean?} [editable] 
    */
   function renderHead(parent, columns, add, addable, editable) {
   	const tr = parent.appendChild(document.createElement('tr'));
-  	const th = tr.appendChild(document.createElement('th'));
-  	for (const [, { width, label }] of columns) {
-  		const td = tr.appendChild(document.createElement('td'));
-  		if (width) {
-  			td.setAttribute('width', width);
+  	/** @type {(() => void)[]} */
+  	const destroyList = [];
+  	for (const col of columns) {
+  		if (!Array.isArray(col)) {
+  			const { width, label } = col;
+  				const td = tr.appendChild(document.createElement('th'));
+  				if (width) {
+  					td.setAttribute('width', width);
+  				}
+  				td.innerText = label;
+  			continue;
+  		}
+  		const th = tr.appendChild(document.createElement('th'));
+  		if (!editable) { continue; }
+  		for (const it of col) {
+  			switch (it) {
+  				case 'add':
+  					const button = th.appendChild(document.createElement('button'));
+  					button.addEventListener('click', add);
+  					button.classList.add('NeeloongFormGrid-table-add');
+  					destroyList.push(watch(() => !addable.get(), disabled => { button.disabled = disabled; }, true));
+  					continue;
+  			}
   		}
-  		td.innerText = label;
-  	}
-  	if (!editable) {
-  		return () => {}
   	}
-  	const button = th.appendChild(document.createElement('button'));
-  	button.addEventListener('click', add);
-  	button.classList.add('GridForm-table-add');
-  	return watch(() => !addable.get(), disabled => { button.disabled = disabled; }, true);
+  	return () => {
+  		for (const destroy of destroyList) {
+  			destroy();
+  		}
+  	};
   }
   /**
    *
    * @param {ArrayStore} store
    * @param {FieldRenderer} fieldRenderer 
    * @param {boolean} editable 
-   * @param {GridFormItemTemplate?} template
+   * @param {GridFieldLayout?} layout
    * @param {object} options
    * @param {(store: Store, el: Element | Relatedness) => () => void} [options.relate]
    * @returns {[HTMLTableElement, () => void]}
    */
-  function Table(store, fieldRenderer, editable, template, options) {
-  	const headerColumns = template?.headers;
-
-  	const fieldList = Object.entries(store.type || {});
-  	/** @type {typeof fieldList} */
+  function Table(store, fieldRenderer, editable, layout, options) {
+  	const headerColumns = layout?.columns;
+  	const fieldList = Object.entries(store.type || {})
+  		.filter(([k, v]) => typeof v?.type !== 'object')
+  		.map(([field, {width, label}]) => ({field, width, label}));
+  	/** @type {({ field: string; width: any; label: any; } | GridFormItemTemplateTableAction[])[]} */
   	let columns = [];
-  	if (headerColumns) {
-  		const map = new Map(fieldList.map(v => [v[0], v]));
-  		for (const c of headerColumns) {
-  			const f = map.get(c);
-  			if (f) { columns.push(f); }
-  		}
+  	if (Array.isArray(headerColumns)) {
+  		const map = new Map(fieldList.map(v => [v.field, v]));
+  		columns = headerColumns.map(v => {
+  			if (typeof v === 'string') { return map.get(v) || [] }
+  			if (!Array.isArray(v)) { return []; }
+  			/** @type {Set<GridFormItemTemplateTableAction>} */
+  			const options = new Set(['add', 'move', 'trigger', 'remove', 'serial']);
+  			return v.filter(v => options.delete(v));
+  		}).filter(v => !Array.isArray(v) || v.length);
   	}
   	if (!columns.length) {
-  		columns = fieldList
-  			.filter(([, v]) => v.meta.headOrder)
-  			.sort(([, a], [, b]) => (a.headOrder || 0) - (b.headOrder || 0));
+  		columns = [['add', 'trigger', 'move', 'remove', 'serial']];
+  	}
+  	if (!columns.find(v => !Array.isArray(v))) {
+  		columns.push(...fieldList.slice(0, 3));
   	}
-  	if (!columns.length) { columns = fieldList.filter(([k, v]) => typeof v?.type !== 'object').slice(0, 3); }
+
+
 
   	const table = document.createElement('table');
-  	table.className = 'GridForm-table';
+  	table.className = 'NeeloongFormGrid-table';
   	const thead = table.appendChild(document.createElement('thead'));
 
 
-  	const tfoot = table.appendChild(document.createElement('tfoot'));
 
   	const addable = new exports.Signal.Computed(() => store.addable);
   	const deletable = { get: () => editable };
@@ -5703,7 +5760,6 @@
   			dragRow = index;
   		}
   	}
-  	tfoot.addEventListener('dragenter', () => {dragenter();});
   	/**
   	 * 
   	 * @param {Store} child 
@@ -5716,8 +5772,31 @@
   		dragRow = -1;
 
   	}
-  	renderHead(thead, columns, add, addable, editable);
-  	renderHead(tfoot, columns, add, addable, editable);
+  	/** @type {(() => void)[]} */
+  	const destroyList = [];
+  	destroyList.push(renderHead(thead, columns, add, addable, editable));
+  	switch (layout?.tableFoot) {
+  		default:
+  		case 'header': {
+  			const tfoot = table.appendChild(document.createElement('tfoot'));
+  			tfoot.addEventListener('dragenter', () => { dragenter(); });
+  			destroyList.push(renderHead(tfoot, columns, add, addable, editable));
+  			break;
+  		}
+  		case 'add': {
+  			const tfoot = table.appendChild(document.createElement('tfoot'));
+  			tfoot.addEventListener('dragenter', () => { dragenter(); });
+  			const tr = tfoot.appendChild(document.createElement('tr'));
+  			const th = tr.appendChild(document.createElement('th'));
+  			th.colSpan = columns.length;
+  			const button = th.appendChild(document.createElement('button'));
+  			button.addEventListener('click', add);
+  			button.classList.add('NeeloongFormGrid-table-foot-add');
+  			destroyList.push(watch(() => !addable.get(), disabled => { button.disabled = disabled; }, true));
+  			break;
+  		}
+  		case 'none':
+  	}
   	const start = thead;
   	/** @type {Map<Store, [HTMLTableSectionElement, () => void]>} */
   	let seMap = new Map();
@@ -5729,7 +5808,7 @@
   		}
 
   	}
-  	const columnNames = columns.map(([v]) => v);
+  	const columnNames = columns.map((v) => Array.isArray(v) ? v : v.field);
   	const childrenResult = watch(() => store.children, function render(children) {
   		let nextNode = thead.nextSibling;
   		const oldSeMap = seMap;
@@ -5737,12 +5816,12 @@
   		for (let child of children) {
   			const old = oldSeMap.get(child);
   			if (!old) {
-  				const [el, destroy] = Line(child, fieldRenderer, editable, template, {
+  				const [el, destroy] = Line(child, fieldRenderer, editable, layout, {
   					columns: columnNames,
   					remove: remove.bind(null, child),
   					dragenter: dragenter.bind(null, child),
   					dragstart: dragstart.bind(null, child),
-  					dragend,	
+  					dragend,
   					deletable,
   				}, options);
   				table.insertBefore(el, nextNode);
@@ -5755,7 +5834,6 @@
   				nextNode = nextNode.nextSibling;
   				continue;
   			}
-  			console.log(table, old[0], nextNode);
   			table.insertBefore(old[0], nextNode);
   		}
   		destroyMap(oldSeMap);
@@ -5766,6 +5844,9 @@
   		thead.remove();
   		destroyMap(seMap);
   		childrenResult();
+  		for (const destroy of destroyList) {
+  			destroy();
+  		}
   	}];
   }
 
@@ -5774,92 +5855,112 @@
    * @param {Store<any, any>} store 
    * @param {FieldRenderer} fieldRenderer 
    * @param {boolean} editable 
-   * @param {GridFormItemTemplate?} template
+   * @param {GridFieldLayout?} layout
    * @param {object} options
    * @param {(store: Store, el: Element | Relatedness) => () => void} [options.relate]
    * @param {boolean} [inline]
    * @returns {[HTMLElement, () => void]}
    */
-  function FormItem(store, fieldRenderer, editable, template, options, inline = false) {
-  	const subFields = template?.subFields;
+  function FormItem(store, fieldRenderer, editable, layout, options, inline = false) {
   	const { type, component } = store;
   	if (inline) {
   		if (component) {
   			return fieldRenderer(store, component, options);
   		}
-  		return [document.createElement('div'), () => {}];
+  		return [document.createElement('div'), () => { }];
   	}
+  	/** @type {(() => void)[]} */
+  	const destroyList = [];
   	if (type && typeof type === 'object') {
   		const root = document.createElement('details');
   		root.open = true;
   		const summary = root.appendChild(document.createElement('summary'));
-  		summary.innerText = store.label || '';
-  		root.hidden = store.hidden;
-  		if (!Array.isArray(subFields) && typeof component === 'function') {
+  		destroyList.push(effect(() => summary.innerText = store.label || ''));
+  		destroyList.push(effect(() => root.hidden = store.hidden));
+  		if (typeof component === 'function') {
   			const [el, destroy] = fieldRenderer(store, component, options);
   			root.appendChild(el);
-  			return [root, destroy];
-  		}
-  		if (store instanceof ArrayStore) {
-  			const [table, destroy] = Table(store, fieldRenderer, editable, template, options);
+  			destroyList.push(destroy);
+  		} else if (store instanceof ArrayStore) {
+  			const [table, destroy] = Table(store, fieldRenderer, editable, layout, options);
   			root.appendChild(table);
-  			return [root, destroy];
+  			destroyList.push(destroy);
   		} else {
-  			const [form, destroy] = Form(store, fieldRenderer, editable, Array.isArray(subFields) ? subFields : null, options);
+  			const [form, destroy] = Form(store, fieldRenderer, editable, layout, options);
   			root.appendChild(form);
-  			return [root, destroy];
+  			destroyList.push(destroy);
   		}
+  		return [root, () => {
+  			for (const destroy of destroyList) {
+  				destroy();
+  			}
+  		}];
   	}
 
   	const root = document.createElement('div');
-  	root.className = "GridForm-item";
-  	root.hidden = store.hidden;
-  	const colSpan = store.meta.colSpan;
-  	if (colSpan) {
+  	root.className = "NeeloongFormGrid-item";
+  	destroyList.push(effect(() => root.hidden = store.hidden));
+  	const { colStart, colSpan, colEnd, rowStart, rowSpan, rowEnd } = layout || {};
+  	if (colStart && colEnd) {
+  		root.style.gridColumn = `${colStart} / ${colEnd}`;
+  	} else if (colStart && colSpan) {
+  		root.style.gridColumn = `${colStart} / span ${colSpan}`;
+  	} else if (colSpan) {
   		root.style.gridColumn = `span ${colSpan}`;
   	}
+  	if (rowStart && rowEnd) {
+  		root.style.gridRow = `${rowStart} / ${rowEnd}`;
+  	} else if (rowStart && rowSpan) {
+  		root.style.gridRow = `${rowStart} / span ${rowSpan}`;
+  	} else if (rowSpan) {
+  		root.style.gridRow = `span ${rowSpan}`;
+  	}
   	const label = root.appendChild(document.createElement('div'));
-  	label.className = 'GridForm-item-label';
-  	label.innerText = store.label || '';
+  	label.className = 'NeeloongFormGrid-item-label';
+  	destroyList.push(effect(() => label.innerText = store.label || ''));
 
 
   	const content = root.appendChild(document.createElement('div'));
-  	content.className = 'GridForm-item-content';
+  	content.className = 'NeeloongFormGrid-item-content';
 
   	const description = root.appendChild(document.createElement('div'));
-  	description.className = 'GridForm-item-description';
-  	description.innerText = store.description || '';
+  	description.className = 'NeeloongFormGrid-item-description';
+  	destroyList.push(effect(() => description.innerText = store.description || ''));
   	if (typeof component === 'function') {
   		const [el, destroy] = fieldRenderer(store, component, options);
   		content.appendChild(el);
-  		return [root, destroy];
+  		destroyList.push(destroy);
   	}
-  	return [root, () => {}];
+  	return [root, () => {
+  		for (const destroy of destroyList) {
+  			destroy();
+  		}
+  	}];
   }
 
   /** @import { Store } from '../Store/index.mjs' */
   /** @import { Relatedness } from '../types.mjs' */
-  /** @import { FieldRenderer, GridFormTemplate } from './types.mjs' */
+  /** @import { FieldRenderer, GridLayout } from './types.mjs' */
 
   /**
    * 
    * @param {Store<any, any>} store 
    * @param {FieldRenderer} fieldRenderer 
    * @param {boolean} editable 
-   * @param {GridFormTemplate?} template
+   * @param {GridLayout?} layout
    * @param {object} options
    * @param {(store: Store, el: Element | Relatedness) => () => void} [options.relate]
    * @param {HTMLElement} [options.parent]
    * @returns {[HTMLElement, () => void]}
    */
-  function Form(store, fieldRenderer, editable, template, {parent, relate}) {
+  function Form(store, fieldRenderer, editable, layout, {parent, relate}) {
   	const root = parent instanceof HTMLElement ? parent : document.createElement('div');
-  	root.className = 'GridForm';
+  	root.className = 'NeeloongFormGrid';
   	/** @type {(() => void)[]} */
   	const destroyList = [];
-
-  	if (template) {
-  		for (const fieldTemplate of template) {
+  	const fieldLayouts = layout?.fields;
+  	if (fieldLayouts) {
+  		for (const fieldTemplate of fieldLayouts) {
   			const fieldStore = store.child(fieldTemplate.field);
   			if (!fieldStore) { continue; }
   			const [el, destroy] = FormItem(fieldStore, fieldRenderer, editable, fieldTemplate, {relate});
@@ -5867,8 +5968,7 @@
   			destroyList.push(destroy);
   		}
   	} else {
-  		const fields = [...store].map(([, v]) => v)
-  			.sort((a, b) => (a.meta.layoutOrder || 0) - (b.meta.layoutOrder || 0));
+  		const fields = [...store].map(([, v]) => v);
 
 
   		for (const field of fields) {
@@ -5886,7 +5986,7 @@
   }
 
   /** @import { Store } from '../Store/index.mjs' */
-  /** @import { FieldRenderer, GridFormTemplate } from './types.mjs' */
+  /** @import { FieldRenderer, GridLayout } from './types.mjs' */
 
   /**
    * 
@@ -5894,10 +5994,10 @@
    * @param {HTMLElement} root 
    * @param {FieldRenderer} fieldRenderer 
    * @param {boolean} editable 
-   * @param {GridFormTemplate?} [template] 
+   * @param {GridLayout?} [layout] 
    */
-  function index (store, root, fieldRenderer, editable, template) {
-  	const s = Form(store, fieldRenderer, editable, template || null, {parent: root});
+  function index (store, root, fieldRenderer, editable, layout) {
+  	const s = Form(store, fieldRenderer, editable, layout || null, {parent: root});
   	return s[1];
   }