@pageboard/html 0.12.3 → 0.12.5

package/elements/inlines.js

@@ -81,9 +81,127 @@ exports.strike = {
 	html: '<s></s>'
 };
 
-exports.caps = {
+exports.style = {
+	priority: 99,
+	title: "Style",
+	icon: '<i class="paint brush icon"></i>',
+	contents: "text*",
+	inline: true,
+	inplace: true,
+	group: "inline nolink",
+	tag: 'span.style',
+	properties: {
+		size: {
+			title: 'Size',
+			default: null,
+			anyOf: [{
+				const: null,
+				title: 'Default',
+				icon: '<span class="icon">∅</span>'
+			}, {
+				const: 'small',
+				title: 'Small',
+				icon: '<span class="icon char" style="font-size:0.6em">aA</span>'
+			}, {
+				const: 'base',
+				title: 'Base',
+				icon: '<span class="icon char" style="font-size:0.8em">aA</span>'
+			}, {
+				const: 'large',
+				title: 'Large',
+				icon: '<span class="icon char" style="font-size:1.2em">aA</span>'
+			}, {
+				const: 'extra',
+				title: 'Extra',
+				icon: '<span class="icon char" style="font-size:1.6em">aA</span>'
+			}]
+		},
+		transform: {
+			title: 'Transform',
+			default: null,
+			anyOf: [{
+				const: null,
+				title: 'Default',
+				icon: '<span class="icon">∅</span>'
+			}, {
+				const: "uppercase",
+				title: "upper",
+				icon: '<span class="icon">AB</span>'
+			}, {
+				const: "lowercase",
+				title: "lower",
+				icon: '<span class="icon">ab</span>'
+			}, {
+				const: "capitalize",
+				title: "all caps",
+				icon: '<span class="icon" style="text-transform:capitalize">Ab</span>'
+			}, {
+				const: "smallcaps",
+				title: "small caps",
+				icon: '<span class="icon" style="font-variant:small-caps">Ab</span>'
+			}]
+		},
+		color: {
+			title: 'Color',
+			default: null,
+			anyOf: [{
+				const: null,
+				title: 'Default',
+				icon: '<span class="icon">∅</span>'
+			}, {
+				const: "white",
+				title: "White",
+				icon: '<i class="icon color" style="color:white">W</i>'
+			}, {
+				const: "black",
+				title: "Black",
+				icon: '<i class="icon color" style="color:black">B</i>'
+			}, {
+				const: "red",
+				title: "Red",
+				icon: '<i class="icon color" style="color:red">R</i>'
+			}, {
+				const: "orange",
+				title: "Orange",
+				icon: '<i class="icon color" style="color:orange">O</i>'
+			}, {
+				const: "yellow",
+				title: "Yellow",
+				icon: '<i class="icon color" style="color:yellow">Y</i>'
+			}, {
+				const: "green",
+				title: "Green",
+				icon: '<i class="icon color" style="color:green">G</i>'
+			}, {
+				const: "blue",
+				title: "Blue",
+				icon: '<i class="icon color" style="color:blue">B</i>'
+			}, {
+				const: "purple",
+				title: "Purple",
+				icon: '<i class="icon color" style="color:purple">P</i>'
+			}]
+		}
+	},
+	parse: function(dom) {
+		const data = {};
+		for (const [key, schema] of Object.entries(this.properties)) {
+			for (const item of schema.anyOf) {
+				if (item.const && dom.classList.contains(item.const)) {
+					data[key] = item.const;
+				}
+			}
+		}
+		return data;
+	},
+	html: '<span class="style [size] [transform] [color]"></span>',
+	stylesheets: [
+		'../ui/inlines.css'
+	]
+};
+
+exports.caps = { // deprecated
 	priority: 108,
-	title: "Capitalization",
 	icon: '<span class="icon">A<span style="font-variant: small-caps;">a</span></span>',
 	contents: "text*",
 	inline: true,
@@ -92,7 +210,7 @@ exports.caps = {
 	parse: function(dom) {
 		return { transform: dom.className };
 	},
-	tag: 'span.uppercase,span.lowercase,span.capitalize,span.smallcaps',
+	tag: 'span.uppercase:not(.style),span.lowercase:not(.style),span.capitalize:not(.style),span.smallcaps:not(.style)',
 	properties: {
 		transform: {
 			title: 'Transform',
@@ -119,14 +237,9 @@ exports.caps = {
 	html: '<span class="[transform]"></span>'
 };
 
-exports.color = {
+exports.color = { // deprecated
 	priority: 109,
-	title: "Color",
-	icon: `<i class="icon" style="background-image:
-		linear-gradient(
-			to right,
-			red, orange, yellow, green, blue, purple
-		);"></i>`,
+	icon: '<span class="icon">C</span>',
 	properties: {
 		color: {
 			default: "",

package/elements/time.js

@@ -171,6 +171,7 @@ exports.time = {
 			format
 		};
 	},
-	html: `<time datetime="[datetime|now|isoDate]" data-format="[format|values|join:%3A]" data-timezone="[timezone]" is="element-time"></time>`,
+	tag: 'time',
+	html: `<time datetime="[datetime|or:now|date:iso]" data-format="[format|as:values|join:%3A]" data-timezone="[timezone]" is="element-time"></time>`,
 	scripts: ['../ui/time.js']
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.12.3",
+  "version": "0.12.5",
   "description": "",
   "main": "index.js",
   "repository": {

package/ui/fieldset-list.js

@@ -54,8 +54,8 @@ class HTMLElementFieldsetList extends Page.Element {
 		for (const node of inputs) {
 			keys.add(node.name);
 		}
-		const splits = Array.from(keys).map(name => name.split('.'));
-		const coms = [];
+		const splits = Array.from(keys).map(name => this.#parts(name));
+		const prefix = [];
 		let pos = 0, com = null;
 		while (splits.length && splits.every(list => {
 			if (com == null) {
@@ -69,16 +69,16 @@ class HTMLElementFieldsetList extends Page.Element {
 				return list[pos] == com;
 			}
 		})) {
-			coms.push(com);
+			prefix.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;
+			if (this.#prefixed(key)) {
+				model[this.#parts(key).slice(prefix.length).join('.')] = null;
+			}
 		}
 		this.#model = model;
 	}
@@ -109,6 +109,22 @@ class HTMLElementFieldsetList extends Page.Element {
 		return `[block-type="fieldlist_button"][value="${name}"]`;
 	}
 
+	#prefixed(key, p = this.#prefix) {
+		const parts = this.#parts(key);
+		for (let i = 0; i < p.length; i++) {
+			if (parts[i] != p[i]) return false;
+		}
+		return true;
+	}
+
+	#incrementkey(index, name) {
+		if (!this.#prefixed(name)) return null;
+		const parts = this.#prefix.slice();
+		parts.push(index);
+		parts.push(...this.#parts(name).slice(this.#prefix.length));
+		return parts.join('.');
+	}
+
 	#resize(size, scope) {
 		if (scope.$write) return;
 		const len = Math.max(Number(this.dataset.size) || 0, size);
@@ -119,25 +135,17 @@ class HTMLElementFieldsetList extends Page.Element {
 			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}[fielditem.index].${node.name.substring(prefix.length)}`;
-				if (node.id?.startsWith('for-' + prefix)) {
-					node.id = `for-${prefix}[fielditem.index].${node.id.substring(4 + prefix.length)}`;
-				}
+			const name = this.#incrementkey('[fielditem.index]', node.name);
+			if (name != null) {
+				node.name = name;
 			}
 		}
 		const conditionalFieldsets = tpl.querySelectorAll('[is="element-fieldset"]');
 		for (const node of conditionalFieldsets) {
-			if (node.dataset.name?.startsWith(prefix)) {
-				node.dataset.name = `${prefix}[fielditem.index].${node.dataset.name.substring(prefix.length)}`;
-			}
-		}
-		const labels = tpl.querySelectorAll('label[for]');
-		for (const node of labels) {
-			if (node.htmlFor?.startsWith('for-' + prefix)) {
-				node.htmlFor = `for-${prefix}[fielditem.index].${node.htmlFor.substring(4 + prefix.length)}`;
+			const name = this.#incrementkey('[fielditem.index]', node.dataset.name);
+			if (name != null) {
+				node.dataset.name = name;
 			}
 		}
 
@@ -159,7 +167,7 @@ class HTMLElementFieldsetList extends Page.Element {
 			{
 				const hidden = tpl.ownerDocument.createElement('input');
 				hidden.type = "hidden";
-				hidden.name = prefix.slice(0, -1);
+				hidden.name = this.#prefix.join('.');
 				tpl.appendChild(hidden);
 			}
 		}
@@ -177,13 +185,16 @@ class HTMLElementFieldsetList extends Page.Element {
 		});
 	}
 
+	#parts(key) {
+		return key ? key.split(".") : [];
+	}
+
 	#listFromValues(values) {
 		const list = [];
-		const prefix = this.#prefix;
 		// just unflatten the array
 		for (const [key, val] of Object.entries(values)) {
-			if (!key.startsWith(prefix)) continue;
-			const parts = key.slice(prefix.length).split(".");
+			if (!this.#prefixed(key)) continue;
+			const parts = this.#parts(key).slice(this.#prefix.length);
 			const index = Number(parts.shift());
 			if (!Number.isInteger(index)) continue;
 			delete values[key];
@@ -195,11 +206,13 @@ class HTMLElementFieldsetList extends Page.Element {
 	}
 
 	#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)) {
-				values[`${prefix}${i}.${key}`] = val;
+				const parts = this.#prefix.slice();
+				parts.push(i);
+				parts.push(...this.#parts(key));
+				values[parts.join('.')] = val;
 			}
 		}
 	}
@@ -261,9 +274,10 @@ class HTMLElementFieldsetList extends Page.Element {
 	}
 
 	#parseName(name) {
-		const prefix = this.prefix;
-		if (!name?.startsWith(prefix)) return { index: -1 };
-		const parts = name.substring(prefix.length).split('.');
+		if (!this.#prefixed(name)) {
+			return { index: -1 };
+		}
+		const parts = this.#parts(name).slice(this.#prefix.length);
 		const index = Number(parts.shift());
 		if (!Number.isInteger(index)) return { index: -1 };
 		return { index, sub: parts.join('.') };

package/ui/fieldset.js

@@ -19,14 +19,8 @@ class HTMLElementFieldSet extends Page.create(HTMLFieldSetElement) {
 		this.fill(null, state.scope);
 		state.finish(() => this.fill(null, state.scope));
 	}
-	setup() {
-		this.form?.addEventListener('change', this);
-	}
-	close() {
-		this.form?.removeEventListener('change', this);
-	}
-	handleEvent(e, state) {
-		if (e.type == "change") {
+	handleAllChange(e, state) {
+		if (this.form.contains(e.target)) {
 			this.fill(null, state.scope);
 		}
 	}

package/ui/inlines.css

@@ -0,0 +1,51 @@
+span.lighter {
+	font-weight:lighter;
+}
+span.capitalize {
+	text-transform:capitalize;
+}
+span.lowercase {
+	text-transform:lowercase;
+}
+span.uppercase {
+	text-transform:uppercase;
+}
+span.smallcaps {
+	font-variant:small-caps;
+}
+span.black {
+	color: black;
+}
+span.white {
+	color: white;
+}
+span.red {
+	color: red;
+}
+span.orange {
+	color: orange;
+}
+span.yellow {
+	color: yellow;
+}
+span.green {
+	color: green;
+}
+span.blue {
+	color: blue;
+}
+span.purple {
+	color: purple;
+}
+span.small {
+	font-size: 0.8em;
+}
+span.base {
+	font-size: 1.2em;
+}
+span.large {
+	font-size: 1.6em;
+}
+span.extra {
+	font-size: 2em;
+}

package/ui/select.js

@@ -169,7 +169,7 @@ class HTMLElementSelect extends Page.Element {
 	}
 
 	patch(state) {
-		if (this.state.scope.$write) return;
+		if (state.scope.$write) return;
 		if (this.children.length == 1) this.build(state);
 
 		state.finish(() => {

package/ui/site.css

@@ -106,45 +106,7 @@ p:last-child {
 	text-align:justify;
 }
 
-span.lighter {
-	font-weight:lighter;
-}
-span.capitalize {
-	text-transform:capitalize;
-}
-span.lowercase {
-	text-transform:lowercase;
-}
-span.uppercase {
-	text-transform:uppercase;
-}
-span.smallcaps {
-	font-variant:small-caps;
-}
-span.black {
-	color: black;
-}
-span.white {
-	color: white;
-}
-span.red {
-	color: red;
-}
-span.orange {
-	color: orange;
-}
-span.yellow {
-	color: yellow;
-}
-span.green {
-	color: green;
-}
-span.blue {
-	color: blue;
-}
-span.purple {
-	color: purple;
-}
+
 
 /*-------------------
 				Links

package/ui/tab.css

@@ -1,5 +1,6 @@
 element-tabs {
 	display:block;
+	width: 100%;
 }
 .ui.tab.segment:not(.active) {
 	display: none;

package/ui/tab.js

@@ -11,11 +11,11 @@ class HTMLElementTabs extends Page.Element {
 	}
 	patch(state) {
 		const pos = this.options.index;
-		const id = this.id;
+		const key = `${this.id}.index`;
+		state.vars[key] = true;
 
 		this.items.children.forEach((item, i) => {
 			const query = { ...state.query };
-			const key = `${id}.index`;
 			if (i == 0) delete query[key];
 			else query[key] = i;
 			item.setAttribute('href', Page.format({

package/ui/time.js

@@ -6,7 +6,7 @@ class HTMLElementTime extends Page.create(HTMLTimeElement) {
 	};
 
 	patch(state) {
-		this.textContent = `[stamp|formatDate:[fmt]:[tz]]`.fuse({
+		this.textContent = `[stamp|or:now|date:[fmt]:[tz]]`.fuse({
 			stamp: this.dateTime,
 			fmt: this.dataset.format,
 			tz: this.dataset.timezone