@neeloong/form 0.15.0 → 0.16.0

package/index.d.mts

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.15.0
+* @neeloong/form v0.16.0
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -1179,6 +1179,12 @@ type GridFormItemTemplate = {
     subFields?: GridFormTemplate | null | undefined;
     span: number;
     headers?: string[] | undefined;
+    colStart?: number | undefined;
+    colSpan?: number | undefined;
+    colEnd?: number | undefined;
+    rowStart?: number | undefined;
+    rowSpan?: number | undefined;
+    rowEnd?: number | undefined;
 };
 type GridFormTemplate = GridFormItemTemplate[];
 type Options = object;

package/index.js

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.15.0
+* @neeloong/form v0.16.0
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -5522,7 +5522,7 @@
    * @returns {[HTMLTableSectionElement, () => void]}
    */
   function Line(store, fieldRenderer, editable, template, {
-  	columns, 
+  	columns,
   	remove, dragenter, dragstart, dragend, deletable
   }, options) {
   	const root = document.createElement('tbody');
@@ -5537,13 +5537,13 @@
   	const head = root.appendChild(document.createElement('tr'));
 
   	const handle = head.appendChild(document.createElement('th'));
-  	handle.className = 'button-group';
+  	handle.classList.add('NeeloongFormGrid-table-line-handle');
   	/** @type {(() => void)[]} */
   	const destroyList = [];
   	for (const name of columns) {
   		const td = head.appendChild(document.createElement('td'));
   		const child = store.child(name);
-  		if (!child) { continue }
+  		if (!child) { continue; }
   		const [el, destroy] = FormItem(child, fieldRenderer, editable, null, options, true);
   		destroyList.push(destroy);
   		td.appendChild(el);
@@ -5554,7 +5554,7 @@
   	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);
@@ -5563,39 +5563,41 @@
 
 
   	const ext = handle.appendChild(document.createElement('button'));
-  			body.hidden = true;
-  		ext.innerText = '+';
+  	body.hidden = true;
+  	ext.classList.add('NeeloongFormGrid-table-line-open');
   	ext.addEventListener('click', () => {
-  		if(body.hidden) {
+  		if (body.hidden) {
   			body.hidden = false;
-  			ext.innerText = '-';
+  			ext.classList.remove('NeeloongFormGrid-table-line-open');
+  			ext.classList.add('NeeloongFormGrid-table-line-close');
   		} else {
   			body.hidden = true;
-  		ext.innerText = '+';
+  			ext.classList.remove('NeeloongFormGrid-table-line-close');
+  			ext.classList.add('NeeloongFormGrid-table-line-open');
 
   		}
   	});
   	if (editable) {
   		const move = handle.appendChild(document.createElement('button'));
-  		move.classList.add('GridForm-table-move');
-  		move.addEventListener('pointerdown', ({pointerId}) => {
+  		move.classList.add('NeeloongFormGrid-table-move');
+  		move.addEventListener('pointerdown', ({ pointerId }) => {
   			root.draggable = true;
   			/** @param {PointerEvent} event */
   			function pointerup(event) {
-  				if (event.pointerId !== pointerId) { return }
-  				if (!root) { return }
+  				if (event.pointerId !== pointerId) { return; }
+  				if (!root) { return; }
   				root.draggable = false;
-  				window.removeEventListener('pointerup', pointerup, {capture: true});
-  				window.removeEventListener('pointercancel', pointerup, {capture: true});
+  				window.removeEventListener('pointerup', pointerup, { capture: true });
+  				window.removeEventListener('pointercancel', pointerup, { capture: true });
   			}
-  			window.addEventListener('pointerup', pointerup, {capture: true});
-  			window.addEventListener('pointercancel', pointerup, {capture: true});
+  			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');
+  		del.classList.add('NeeloongFormGrid-table-remove');
   		// @ts-ignore
   		destroyList.push(watch(() => !deletable.get() || store.readonly || store.disabled, disabled => {
   			move.disabled = disabled;
@@ -5636,7 +5638,7 @@
   	}
   	const button = th.appendChild(document.createElement('button'));
   	button.addEventListener('click', add);
-  	button.classList.add('GridForm-table-add');
+  	button.classList.add('NeeloongFormGrid-table-add');
   	return watch(() => !addable.get(), disabled => { button.disabled = disabled; }, true);
   }
   /**
@@ -5662,15 +5664,10 @@
   			if (f) { columns.push(f); }
   		}
   	}
-  	if (!columns.length) {
-  		columns = fieldList
-  			.filter(([, v]) => v.meta.headOrder)
-  			.sort(([, a], [, b]) => (a.headOrder || 0) - (b.headOrder || 0));
-  	}
   	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'));
 
 
@@ -5787,54 +5784,73 @@
   		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;
+  		destroyList.push(effect(() => summary.innerText = store.label || ''));
+  		destroyList.push(effect(() => root.hidden = store.hidden));
   		if (!Array.isArray(subFields) && typeof component === 'function') {
   			const [el, destroy] = fieldRenderer(store, component, options);
   			root.appendChild(el);
-  			return [root, destroy];
-  		}
-  		if (store instanceof ArrayStore) {
+  			destroyList.push(destroy);
+  		} else if (store instanceof ArrayStore) {
   			const [table, destroy] = Table(store, fieldRenderer, editable, template, options);
   			root.appendChild(table);
-  			return [root, destroy];
+  			destroyList.push(destroy);
   		} else {
   			const [form, destroy] = Form(store, fieldRenderer, editable, Array.isArray(subFields) ? subFields : null, 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.style.gridColumn = `span ${colSpan}`;
+  	root.className = "NeeloongFormGrid-item";
+  	destroyList.push(effect(() => root.hidden = store.hidden));
+  	const { colStart, colSpan, colEnd, rowStart, rowSpan, rowEnd } = template || {};
+  	if (colStart) { root.style.gridColumnStart = `${colStart}`; }
+  	if (colEnd) {
+  		root.style.gridColumnEnd = `${colEnd}`;
+  	} else if (colSpan) {
+  		root.style.gridColumnEnd = `span ${colSpan}`;
+  	}
+  	if (rowStart) { root.style.gridRowStart = `${rowStart}`; }
+  	if (rowEnd) {
+  		root.style.gridRowEnd = `${rowEnd}`;
+  	} else if (rowSpan) {
+  		root.style.gridRowEnd = `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' */
@@ -5854,7 +5870,7 @@
    */
   function Form(store, fieldRenderer, editable, template, {parent, relate}) {
   	const root = parent instanceof HTMLElement ? parent : document.createElement('div');
-  	root.className = 'GridForm';
+  	root.className = 'NeeloongFormGrid';
   	/** @type {(() => void)[]} */
   	const destroyList = [];
 
@@ -5867,8 +5883,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) {