@pageboard/html 0.10.16 → 0.11.0

package/elements/card.js

@@ -159,14 +159,14 @@ exports.card_header = {
 	contents: "inline*",
 	html: '<div class="header">Header</div>'
 };
-exports.card_header_nolink = Object.assign({}, exports.card_header, {
+exports.card_header_nolink = { ...exports.card_header,
 	context: 'cardlink//',
 	contents: {
 		nodes: "inline*",
 		marks: "nolink"
 	},
 	html: '<div class="header">Header</div>'
-});
+};
 
 exports.card_meta = {
 	title: 'meta',
@@ -177,14 +177,14 @@ exports.card_meta = {
 	contents: "inline*",
 	html: '<div class="meta">Meta</div>'
 };
-exports.card_meta_nolink = Object.assign({}, exports.card_meta, {
+exports.card_meta_nolink = { ...exports.card_meta,
 	context: 'cardlink//',
 	contents: {
 		nodes: "inline*",
 		marks: "nolink"
 	},
 	html: '<div class="meta">Meta</div>'
-});
+};
 
 exports.card_description = {
 	title: 'description',
@@ -195,9 +195,9 @@ exports.card_description = {
 	contents: "paragraph+",
 	html: '<div class="description"></div>'
 };
-exports.card_description_nolink = Object.assign({}, exports.card_description, {
+exports.card_description_nolink = { ...exports.card_description,
 	context: 'cardlink//',
 	contents: "paragraph_nolink+",
 	html: '<div class="description"></div>'
-});
+};
 

package/elements/fieldsets.js

@@ -42,10 +42,10 @@ exports.fieldset_legend = {
 };
 
 exports.fieldset_list = {
-	title: 'FieldList',
+	title: 'Field List',
 	menu: "form",
 	icon: '<i class="icons"><i class="folder outline icon"></i><i class="corner add icon"></i></i>',
-	group: "block",
+	group: 'block template',
 	context: 'form//',
 	priority: 0,
 	properties: {
@@ -54,23 +54,58 @@ exports.fieldset_list = {
 			type: "integer",
 			minimum: 0,
 			default: 1
-		},
-		prefix: {
-			title: 'Prefix',
-			description: '',
-			type: "string",
-			format: 'singleline',
-			nullable: true
 		}
 	},
 	contents: [{
 		id: 'template',
-		nodes: 'block+'
+		nodes: 'block+',
+		expressions: true
 	}],
-	html: `<element-fieldset-list data-size="[size]" data-prefix="[prefix]">
+	html: `<element-fieldset-list data-size="[size]">
 		<template block-content="template"></template>
 		<div class="view"></div>
 	</element-fieldset-list>`,
 	scripts: ['../ui/fieldset-list.js'],
 	stylesheets: ['../ui/fieldset-list.css']
 };
+
+
+exports.fieldlist_button = {
+	title: 'Field List Button',
+	menu: "form",
+	icon: '<i class="icons"><i class="folder outline icon"></i><i class="corner hand pointer icon"></i></i>',
+	group: 'block',
+	context: 'fieldset_list//',
+	properties: {
+		type: {
+			title: 'Type',
+			default: 'add',
+			anyOf: [{
+				title: 'Add',
+				const: 'add'
+			}, {
+				title: 'Delete',
+				const: 'del'
+			}, {
+				title: 'Up',
+				const: 'up'
+			}, {
+				title: 'Down',
+				const: 'down'
+			}]
+		},
+		full: {
+			title: 'Full width',
+			type: 'boolean',
+			default: false
+		}
+	},
+	contents: {
+		nodes: "inline*",
+		marks: "nolink"
+	},
+	html: '<button type="button" class="ui [full|?:fluid:] button" value="[type]">Label</button>',
+	stylesheets: [
+		'../lib/components/button.css',
+	]
+};

package/elements/input-date.js

@@ -1,5 +1,5 @@
 exports.input_date_time = {
-	title: 'DateTime',
+	title: 'Date Time',
 	icon: '<i class="calendar outline icon"></i>',
 	menu: "form",
 	required: ["name"],
@@ -89,7 +89,7 @@ exports.input_date_time = {
 };
 
 exports.input_date_slot = {
-	title: 'DateSlot',
+	title: 'Date Slot',
 	icon: '<i class="calendar outline icon"></i>',
 	menu: "form",
 	required: ["nameStart", "nameEnd"],

package/elements/input-property.js

@@ -59,16 +59,25 @@ exports.input_property = {
 		let propKey;
 		let required = false;
 		let cases = null;
+		let discKey = null;
 		for (let i = 0; i < list.length; i++) {
 			propKey = list[i];
 			required = prop.required && prop.required.indexOf(propKey) >= 0;
 			if (cases) {
-				prop = cases[propKey];
+				if (Array.isArray(cases)) {
+					prop = cases.find(obj => obj.properties?.[discKey]?.const == propKey);
+				} else {
+					prop = cases[propKey];
+				}
 				name = list.slice(0, i - 1).concat(list.slice(i + 1)).join('.');
 				cases = null;
+				discKey = null;
 			} else {
 				if (prop.select && prop.select.$data == `0/${propKey}`) {
 					cases = prop.selectCases;
+				} else if (prop.discriminator && prop.discriminator.propertyName == propKey) {
+					cases = prop.oneOf;
+					discKey = propKey;
 				}
 				prop = (prop.items && prop.items.properties || prop.properties || {})[propKey] || null;
 			}

package/elements/inputs.js

@@ -156,8 +156,8 @@ exports.input_text = {
 		nodes: 'inline*'
 	},
 	patterns: {
-		tel: /^(\(\d+\))? *\d+([ .\-]?\d+)*$/.source,
-		email: /^[\w.!#$%&'*+\/=?^`{|}~-]+@\w(?:[\w-]{0,61}\w)?(?:\.\w(?:[\w-]{0,61}\w)?)*$/.source
+		tel: /^(\(\d+\))? *\d+([ .-]?\d+)*$/.source,
+		email: /^[\w.!#$%&'*+/=?^`{|}~-]+@\w(?:[\w-]{0,61}\w)?(?:\.\w(?:[\w-]{0,61}\w)?)*$/.source
 	},
 	html: `<div class="[width|num: wide] field [type|eq:hidden:hidden:]">
 		<label block-content="label">Label</label>
@@ -233,7 +233,7 @@ exports.input_range = {
 	menu: "form",
 	group: "block",
 	context: 'form//',
-	properties: Object.assign({
+	properties: {
 		multiple: {
 			title: 'Multiple',
 			type: 'boolean',
@@ -243,8 +243,9 @@ exports.input_range = {
 			title: 'Pips',
 			type: 'boolean',
 			default: true
-		}
-	}, exports.input_number.properties),
+		},
+		...exports.input_number.properties
+	},
 	contents: {
 		id: 'label',
 		nodes: 'inline*'

package/elements/menu.js

@@ -102,14 +102,14 @@ exports.menu_item_link = {
 	html: '<a class="[labeled|?] item" href="[url|autolink]">Link</a>'
 };
 
-exports.menu_item_block = Object.assign({}, exports.menu_item_link, {
+exports.menu_item_block = { ...exports.menu_item_link,
 	title: 'Block',
 	priority: 11,
 	contents: {
 		nodes: "block+",
 		marks: "nolink"
 	}
-});
+};
 
 exports.menu_item_text = {
 	priority: 11,

package/elements/page.js

@@ -5,9 +5,10 @@ exports.page.stylesheets = [
 	'../ui/transition.css'
 ];
 
-exports.page.scripts = exports.page.scripts.concat([
+exports.page.scripts = [
+	...exports.page.scripts,
 	'../ui/transition.js'
-]);
+];
 
 exports.page.properties.transition = {
 	title: 'Transition',

package/elements/paragraph.js

@@ -1,11 +1,11 @@
-exports.paragraph_nolink = Object.assign({}, exports.paragraph, {
+exports.paragraph_nolink = { ...exports.paragraph,
 	priority: exports.paragraph.priority - 1,
 	group: null,
 	contents: {
 		nodes: "inline*",
 		marks: "nolink"
 	}
-});
+};
 
 exports.segment = {
 	title: "Segment",
@@ -159,13 +159,12 @@ exports.heading = {
 };
 
 
-exports.heading_nolink = Object.assign({}, exports.heading, {
+exports.heading_nolink = {
+	...exports.heading,
 	priority: exports.heading.priority - 1,
 	group: null,
-	contents: Object.assign({}, exports.heading.contents, {
-		marks: "nolink"
-	})
-});
+	contents: { ...exports.heading.contents, marks: "nolink" }
+};
 
 exports.divider = {
 	title: "Divider",

package/elements/sitemap.js

@@ -1,5 +1,5 @@
 exports.sitemap = {
-	title: "Site map",
+	title: "Sitemap",
 	group: "block",
 	icon: '<i class="sitemap icon"></i>',
 	menu: 'link',
@@ -30,12 +30,13 @@ exports.sitemap = {
 			title: schema.title,
 			icon: schema.icon,
 			standalone: true,
-			properties: Object.assign({
+			properties: {
 				leaf: {
 					type: 'boolean',
 					default: Boolean(leaf)
-				}
-			}, schema.properties),
+				},
+				...schema.properties
+			},
 			menu: "link",
 			group: 'sitemap_item',
 			virtual: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.10.16",
+  "version": "0.11.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/ui/fieldset-list.js

@@ -1,62 +1,145 @@
+class WalkIndex {
+	#walk;
+	#find;
+	#index;
+	constructor(root, fn) {
+		this.#find = fn;
+		this.#walk = root.ownerDocument.createTreeWalker(
+			root,
+			NodeFilter.SHOW_ELEMENT,
+			this
+		);
+	}
+	acceptNode(node) {
+		const index = this.#find(node);
+		if (index != null) {
+			this.#index = index;
+			return NodeFilter.FILTER_ACCEPT;
+		} else {
+			return NodeFilter.FILTER_SKIP;
+		}
+	}
+	findBefore(node) {
+		this.#index = null;
+		this.#walk.currentNode = node;
+		this.#walk.previousNode();
+		return this.#index;
+	}
+}
+
 class HTMLElementFieldsetList extends VirtualHTMLElement {
+	#size;
+	#prefix;
+	#model;
+	#walk;
+
 	fill(values, scope) {
-		const list = this.listFromValues(Object.assign({}, values));
-		this.resize(list.length, scope);
+		const list = this.#listFromValues({ ...values });
+		this.#resize(list.length, scope);
 	}
 
-	patch(state) {
+	#prepare() {
 		this.ownTpl.prerender();
 		if (this.isContentEditable) return;
-		if (!this.size) this.resize(0, state.scope);
+		for (const node of this.ownTpl.content.querySelectorAll('[block-id]')) {
+			node.removeAttribute('block-id');
+		}
+		const keys = new Set();
+		const inputs = this.ownTpl.content.querySelectorAll('[name]');
+		for (const node of inputs) {
+			keys.add(node.name);
+		}
+		const splits = Array.from(keys).map(name => name.split('.'));
+		const coms = [];
+		let pos = 0, com = null;
+		while (splits.every(list => {
+			if (com == null) {
+				if (pos < list.length) {
+					com = list[pos];
+					return true;
+				} else {
+					return false;
+				}
+			} else {
+				return list[pos] == com;
+			}
+		})) {
+			coms.push(com);
+			com = null;
+			pos++;
+		}
+		if (coms.length) coms.push('');
+		const prefix = coms.join('.');
+		this.#prefix = prefix;
+		const model = {};
+		for (const key of keys) {
+			if (key.startsWith(prefix)) model[key.substring(prefix.length)] = null;
+		}
+		this.#model = model;
 	}
 
-	setup(state) {
-		this.ownTpl.prerender();
+	patch(state) {
+		this.#prepare();
+		if (!this.#size) this.#resize(0, state.scope);
 	}
 
-	resize(size, scope) {
-		const len = Math.max(Number(this.dataset.size) || 0, size);
-		if (this.size == len) return;
-		this.size = len;
+	setup() {
+		this.#prepare();
+	}
 
-		const tpl = this.ownTpl.content.cloneNode(true);
-		for (const node of tpl.querySelectorAll('[block-id]')) {
-			node.removeAttribute('block-id');
-		}
-		const anc = tpl.querySelectorAll('[name]:not(button)').ancestor();
+	#selector(name) {
+		return `[block-type="fieldlist_button"][value="${name}"]`;
+	}
 
-		for (let i = len - 1; i >= 1; i--) {
-			const clone = this.updateAncestor(anc.cloneNode(true), i);
-			clone.fuse({ $fieldset: { index: i } }, scope);
-			anc.parentNode.insertBefore(clone, anc.nextSibling);
+	#resize(size, scope) {
+		if (this.isContentEditable) return;
+		const len = Math.max(Number(this.dataset.size) || 0, size);
+		if (this.#size === len) return;
+		this.#size = len;
+		let tpl = this.ownTpl.content.cloneNode(true);
+		const $fieldset = Array.from(Array(len)).map((x, i) => {
+			return { index: i };
+		});
+		const inputs = tpl.querySelectorAll('[name]');
+		const prefix = this.#prefix;
+		for (const node of inputs) {
+			if (node.name.startsWith(prefix)) {
+				node.name = `${prefix}[$field.index].${node.name.substring(prefix.length)}`;
+			}
+		}
+		const subtpl = inputs.ancestor();
+		if (!subtpl) {
+			console.warn("fieldset-list should contain input[name]", this);
+			return;
 		}
-		this.updateAncestor(anc, 0);
-		anc.fuse({ $fieldset: { index: 0 } }, scope);
-		tpl.fuse({ $fieldset: { count: len } }, scope);
+		subtpl.appendChild(
+			subtpl.ownerDocument.createTextNode('[$fieldset|repeat:*:$field|]')
+		);
+		if (len == 0) {
+			let node = tpl.querySelector(this.#selector('add'));
+			while (node != null && node != tpl && node != subtpl) {
+				while (node.nextSibling) node.nextSibling.remove();
+				while (node.previousSibling) node.previousSibling.remove();
+				node = node.parentNode;
+			}
+		}
+		tpl = tpl.fuse({ $fieldset }, scope);
+
 		const view = this.ownView;
 		view.textContent = '';
 		view.appendChild(tpl);
-	}
 
-	updateAncestor(node, i) {
-		const prefix = this.prefix;
-		for (const child of node.querySelectorAll('[name]:not(button)')) {
-			child.name = `${prefix}${i}.${child.name}`;
-		}
-		return node;
+		view.querySelectorAll(this.#selector('up')).forEach((node, i) => {
+			node.disabled = i == 0;
+		});
+		view.querySelectorAll(this.#selector('down')).forEach((node, i, arr) => {
+			node.disabled = i == arr.length - 1;
+		});
 	}
 
-	modelFromTemplate() {
-		const obj = {};
-		for (const node of this.ownTpl.content.querySelectorAll('[name]:not(button)')) {
-			obj[node.name] = null;
-		}
-		return obj;
-	}
-
-	listFromValues(values) {
+	#listFromValues(values) {
 		const list = [];
-		const prefix = this.prefix;
+		const prefix = this.#prefix;
 		// just unflatten the array
 		for (const [key, val] of Object.entries(values)) {
 			if (!key.startsWith(prefix)) continue;
@@ -71,8 +154,8 @@ class HTMLElementFieldsetList extends VirtualHTMLElement {
 		return list;
 	}
 
-	listToValues(values, list) {
-		const prefix = this.prefix;
+	#listToValues(values, list) {
+		const prefix = this.#prefix;
 		for (let i = 0; i < list.length; i++) {
 			const obj = list[i];
 			for (const [key, val] of Object.entries(obj)) {
@@ -83,23 +166,47 @@ class HTMLElementFieldsetList extends VirtualHTMLElement {
 
 	handleClick(e, state) {
 		if (this.isContentEditable) return;
-		const btn = e.target.closest('button[type="button"][name]');
+		const btn = e.target.closest('button');
 		if (!btn) return;
-		if (["add", "del"].includes(btn.name) == false) return;
+		const action = btn.value;
+		if (["add", "del", "up", "down"].includes(action) == false) return;
 
 		const form = this.closest('form');
 		const values = form.read(true);
-		const list = this.listFromValues(values);
-		const index = Number(btn.value);
-		if (!Number.isInteger(index) || index < 0 || index > list.length) {
-			throw new Error(`fieldset-list expects ${btn.outerHTML} to have a value with a valid index`);
-		}
-		if (btn.name == "add") {
-			list.splice(index + 1, 0, this.modelFromTemplate());
-		} else if (btn.name == "del") {
-			list.splice(index, 1);
+		const list = this.#listFromValues(values);
+		const prefix = this.#prefix;
+		if (!this.#walk) this.#walk = new WalkIndex(this, (node) => {
+			if (node.name?.startsWith(prefix)) {
+				const index = Number(node.name.substring(prefix.length).split('.').shift());
+				if (Number.isInteger(index) || index >= 0 || index < list.length) {
+					return index;
+				}
+			}
+			return null;
+		});
+		let index;
+
+		switch (action) {
+			case "add":
+				list.splice((this.#walk.findBefore(btn) ?? -1) + 1, 0, this.#model);
+				break;
+			case "del":
+				list.splice(this.#walk.findBefore(btn) ?? 0, 1);
+				break;
+			case "up":
+				index = this.querySelectorAll(this.#selector('up')).indexOf(btn);
+				if (index > 0) {
+					list.splice(index - 1, 0, list.splice(index, 1).pop());
+				}
+				break;
+			case "down":
+				index = this.querySelectorAll(this.#selector('down')).indexOf(btn);
+				if (index < list.length - 1) {
+					list.splice(index + 1, 0, list.splice(index, 1).pop());
+				}
+				break;
 		}
-		this.listToValues(values, list);
+		this.#listToValues(values, list);
 		form.fill(values, state.scope);
 	}
 
@@ -111,14 +218,6 @@ class HTMLElementFieldsetList extends VirtualHTMLElement {
 	get ownView() {
 		return this.children.find(node => node.matches('.view'));
 	}
-	get prefix() {
-		const prefix = this.dataset.prefix;
-		if (prefix) return prefix + ".";
-		else return "";
-	}
 }
 
 VirtualHTMLElement.define('element-fieldset-list', HTMLElementFieldsetList);
-
-
-

package/ui/fieldset.js

@@ -15,8 +15,8 @@ class HTMLCustomFieldSetElement extends HTMLFieldSetElement {
 		this.disabled = this.hidden = val != this.options.value;
 	}
 
-	patch() {
-		this.#update();
+	patch(state) {
+		state.finish(() => this.#update());
 	}
 	setup() {
 		this.form?.addEventListener('change', this);

package/ui/form.js

@@ -108,18 +108,15 @@ class HTMLCustomFormElement extends HTMLFormElement {
 		return query;
 	}
 	fill(query, scope) {
-		// workaround for merging arrays
-		const tagList = "element-fieldset-list";
-		const FieldSet = VirtualHTMLElement.define(tagList);
-		for (const node of this.querySelectorAll(tagList)) {
-			if (!node.fill) Object.setPrototypeOf(node, FieldSet.prototype);
+		// fieldset-list are not custom inputs yet
+		for (const node of this.querySelectorAll("element-fieldset-list")) {
 			node.fill(query, scope);
 		}
 		const vars = [];
 		for (const elem of this.elements) {
 			const name = elem.name;
 			if (!name) continue;
-			if (Object.prototype.hasOwnProperty.call(query, name) && !vars.includes(name)) vars.push(name);
+			if (name in query && !vars.includes(name)) vars.push(name);
 			const val = query[name];
 			const str = ((v) => {
 				if (v == null) return "";
@@ -228,7 +225,7 @@ class HTMLCustomFormElement extends HTMLFormElement {
 		const loc = Page.parse(redirect);
 		Object.assign(loc.query, this.read(false));
 		if (loc.samePathname(state)) {
-			loc.query = Object.assign({}, state.query, loc.query);
+			loc.query = { ...state.query, ...loc.query };
 		}
 		let status = 200;
 		const p = this.ignoreInputChange
@@ -430,7 +427,7 @@ Page.setup((state) => {
 	}
 });
 
-Page.ready((state) => {
+Page.patch(state => {
 	const filters = state.scope.$filters;
 
 	function linearizeValues(query, obj = {}, prefix) {
@@ -461,35 +458,32 @@ Page.ready((state) => {
 		if (action == "toggle") {
 			action = val ? "enable" : "disable";
 		}
-		// NB: call Class methods to deal with uninstantiated custom form
-		if (action == "enable") {
-			HTMLCustomFormElement.prototype.enable.call(form);
-		} else if (action == "disable") {
-			HTMLCustomFormElement.prototype.disable.call(form);
-		} else if (action == "fill") {
-			if (val == null) {
-				form.reset();
-			} else if (typeof val == "object") {
-				let values = val;
-				if (val.id && val.data) {
-					// old way
-					values = Object.assign({}, val.data);
-					for (const key of Object.keys(val)) {
-						if (key != "data") values['$' + key] = val[key];
+
+		state.finish(() => {
+			if (action == "enable") {
+				form.enable();
+			} else if (action == "disable") {
+				form.disable();
+			} else if (action == "fill") {
+				if (val == null) {
+					form.reset();
+				} else if (typeof val == "object") {
+					let values = val;
+					if (val.id && val.data) {
+						// old way
+						values = { ...val.data };
+						for (const key of Object.keys(val)) {
+							if (key != "data") values['$' + key] = val[key];
+						}
+					} else {
+						// new way
 					}
-				} else {
-					// new way
+					form.fill(linearizeValues(values), state.scope);
+					form.save();
 				}
-				HTMLCustomFormElement.prototype.fill.call(form, linearizeValues(values), state.scope);
-				HTMLCustomFormElement.prototype.save.call(form);
 			}
-		} else if (action == "read") {
-			const obj = {};
-			for (const [key, kval] of Object.entries(val)) {
-				if (form.querySelector(`[name="${key}"]`)) obj[key] = kval;
-			}
-			return obj;
-		}
+		});
+
 		return val;
 	};
 });

package/ui/pagination.js

@@ -27,9 +27,10 @@ class HTMLElementPagination extends HTMLAnchorElement {
 		} else {
 			this.setAttribute('href', Page.format({
 				pathname: state.pathname,
-				query: Object.assign({}, state.query, {
+				query: {
+					...state.query,
 					[name]: cur || undefined
-				})
+				}
 			}));
 		}
 		state.finish(() => {

package/ui/tab.js

@@ -14,7 +14,7 @@ class HTMLElementTabs extends VirtualHTMLElement {
 		const id = this.id;
 
 		this.items.children.forEach((item, i) => {
-			const query = Object.assign({}, state.query);
+			const query = { ...state.query };
 			const key = `${id}.index`;
 			if (i == 0) delete query[key];
 			else query[key] = i;