@pageboard/html 0.12.14 → 0.12.16

package/elements/embed.js

@@ -40,8 +40,8 @@ exports.embed = {
 		};
 	},
 	tag: 'iframe,element-embed',
-	html: `<element-embed data-src="[url|url:query:query]" id="[id]">
-		<a aria-hidden="true" class="linkable" href="[$loc|as:url|set:hash:[id]]">[linkable|prune:*]#</a>
+	html: `<element-embed data-src="[url]" data-query="[query|as:query]" id="[id]">
+		<a aria-hidden="true" class="linkable" href="[$loc.pathname][$loc.search][id|pre:%23]">[linkable|prune:*]#</a>
 		<iframe loading="lazy" allowfullscreen frameborder="0" scrolling="no"></iframe>
 	</element-embed>`,
 	scripts: [

package/elements/fieldsets.js

@@ -74,7 +74,7 @@ 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',
+	group: 'block input_field',
 	context: 'fieldset_list//',
 	properties: {
 		type: {

package/elements/form.js

@@ -47,7 +47,7 @@ exports.query_form = {
 	contents: 'block+',
 	tag: 'form[method="get"]',
 	html: `<form is="element-form" method="get" name="[name]"
-		action="[redirection.url][redirection.parameters|as:query]"
+		action="[redirection|urltpl:url:parameters]"
 		autocomplete="off" class="ui form"></form>`,
 	stylesheets: [
 		'../lib/components/form.css',

package/elements/image.js

@@ -129,7 +129,7 @@ exports.image = {
 		nodes: "inline*"
 	},
 	html: `<element-image
-		class="[display.fit|or:none] [display.horizontal|or:] [display.vertical|or:]"
+		class="[display.fit|or:none] [display.horizontal?] [display.vertical?]"
 		alt="[alt]"
 		data-src="[url]"
 		data-crop="[crop.x|or:50];[crop.y|or:50];[crop.width|or:100];[crop.height|or:100];[crop.zoom|or:100]"

package/elements/inputs.js

@@ -66,10 +66,15 @@ exports.input_fields = {
 			title: "Inline",
 			type: 'boolean',
 			default: false
+		},
+		full: {
+			title: 'Full width',
+			type: 'boolean',
+			default: false
 		}
 	},
 	contents: "input_field+",
-	html: `<div class="[inline] fields"></div>`
+	html: `<div class="[inline] [full|alt:fluid:] fields"></div>`
 };
 
 exports.input_text = {
@@ -160,9 +165,10 @@ exports.input_text = {
 		tel: /^(\(\d+\))? *\d+([ .-]?\d+)*$/.source,
 		email: /^[\w.!#$%&'*+/=?^`{|}~-]+@\w(?:[\w-]{0,61}\w)?(?:\.\w(?:[\w-]{0,61}\w)?)*$/.source
 	},
-	html: `<div class="[width|as:colnums|post: wide] field [type|eq:hidden|or:]">
+	html: `<div class="[width|as:colnums|post: wide] field [type|eq:hidden]">
 		<label block-content="label">Label</label>
 		[type|eq:textarea|prune:*:1]<textarea
+			is="element-textarea"
 			name="[name]"
 			required="[required]"
 			readonly="[readonly]"
@@ -178,7 +184,9 @@ exports.input_text = {
 			pattern="[$element.patterns.[type]]"
 			value="[value]"
 			autocomplete="[type|eq:new-password|fail:]" />
-	</div>`
+	</div>`,
+	scripts: ['../ui/textarea.js'],
+	stylesheets: ['../ui/textarea.css']
 };
 
 exports.input_number = {
@@ -380,7 +388,7 @@ exports.input_radio = {
 	html: `<div class="field [button]">
 		<div class="ui radio [button|alt::checkbox]">
 			<input type="radio" disabled="[disabled]" required="[required]"
-				name="[name]" value="[value|or:]" checked="[checked]"
+				name="[name]" value="[value]" checked="[checked]"
 				id="for-[name][value|pre:-]" />
 			<label block-content="label" for="for-[name][value|pre:-]">Label</label>
 		</div>
@@ -477,7 +485,7 @@ exports.input_select_option = {
 		}
 	},
 	contents: 'inline*',
-	html: `<element-select-option class="item" data-value="[value|or:]"
+	html: `<element-select-option class="item" data-value="[value]"
 	></element-select-option>`
 };
 

package/elements/page.js

@@ -65,7 +65,7 @@ exports.page.properties.transition = {
 exports.page.fragments.push({
 	path: 'body',
 	attributes: {
-		"data-transition-close": "[transition.close|ornull]",
-		"data-transition-open": "[transition.open|ornull]",
+		"data-transition-close": "[transition.close?]",
+		"data-transition-open": "[transition.open?]",
 	}
 });

package/elements/sitemap.js

@@ -49,7 +49,7 @@ exports.sitemap = {
 					<span class="ui mini type label">[$grants.webmaster|prune:*][$type]</span>
 					<span class="ui mini black label">[$grants.webmaster|prune:*][nositemap|prune:*]no sitemap</span>
 					<span class="ui mini orange label">[$grants.webmaster|prune:*][noindex|prune:*]no index</span>
-					<span class="ui mini red label">[$grants.webmaster|prune:*][$lock?.read|fail:*]</span>
+					<span class="ui mini red label">[$grants.webmaster|prune:*][$lock|fail:*]</span>
 					<br>
 					<a href="[url]" class="description">[url|or:-]</a>
 					<a href="[redirect|fail:*]" class="redirection"> ➜ [redirect]</a>

package/package.json

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

package/ui/fieldset-list.js

@@ -35,6 +35,17 @@ class HTMLElementFieldsetList extends Page.Element {
 	#walk;
 
 	fill(values, scope) {
+		if (scope.$write || this.prefix == null) return;
+		// unflatten array-values
+		for (const [key, val] of Object.entries(values)) {
+			if (!this.#prefixed(key)) continue;
+			if (Array.isArray(val)) {
+				for (let i = 0; i < val.length; i++) {
+					values[key + '.' + i] = val[i];
+				}
+				delete values[key];
+			}
+		}
 		const list = this.#listFromValues({ ...values });
 		if (this.#initialSize == null) this.#initialSize = list.length;
 		this.#resize(list.length, scope);
@@ -83,13 +94,9 @@ class HTMLElementFieldsetList extends Page.Element {
 		this.#model = model;
 	}
 
-	#prepare(scope) {
+	#prepare() {
 		const tpl = this.ownTpl;
 		tpl.prerender();
-		if (scope.$write) {
-			this.#modelize(tpl);
-			return;
-		}
 		this.#modelize(tpl.content);
 		for (const node of tpl.content.querySelectorAll('[block-id]')) {
 			node.removeAttribute('block-id');
@@ -97,19 +104,18 @@ class HTMLElementFieldsetList extends Page.Element {
 	}
 
 	patch({ scope }) {
-		this.#prepare(scope);
-		if (!this.#size) this.#resize(0, scope);
-	}
-
-	setup({ scope }) {
-		this.#prepare(scope);
+		if (scope.$write) {
+			this.#modelize(this.ownTpl);
+		} else if (!this.#size) {
+			this.#resize(0, scope);
+		}
 	}
 
 	#selector(name) {
 		return `[block-type="fieldlist_button"][value="${name}"]`;
 	}
 
-	#prefixed(key, p = this.#prefix) {
+	#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;
@@ -198,7 +204,6 @@ class HTMLElementFieldsetList extends Page.Element {
 
 	#listFromValues(values) {
 		const list = [];
-		// just unflatten the array
 		for (const [key, val] of Object.entries(values)) {
 			if (!this.#prefixed(key)) continue;
 			const parts = this.#parts(key).slice(this.#prefix.length);
@@ -278,6 +283,10 @@ class HTMLElementFieldsetList extends Page.Element {
 				live.replaceWith(node);
 			}
 		}
+		this.dispatchEvent(new Event('change', {
+			bubbles: true,
+			cancelable: true
+		}));
 	}
 
 	#parseName(name) {
@@ -299,6 +308,9 @@ class HTMLElementFieldsetList extends Page.Element {
 		return this.children.find(node => node.matches('.view'));
 	}
 	get prefix() {
+		if (this.#prefix == null) {
+			this.#prepare();
+		}
 		return this.#prefix;
 	}
 }

package/ui/form.css

@@ -22,3 +22,21 @@ element-select {
 [contenteditable] .ui.form .field.hidden {
 	display: block !important;
 }
+.ui.form {
+	width: 100%;
+}
+.ui.form .inline.fluid.fields {
+	width:100%;
+	column-gap: 1em;
+	padding:0 1em;
+}
+.ui.form .inline.fluid.fields > .field {
+	margin:0;
+	padding:0;
+	flex: 1 1 auto;
+	position:relative;
+}
+
+.ui.form[method="post"]:not(.unsaved,:hover) button[type="submit"] {
+	opacity:0.2;
+}

package/ui/form.js

@@ -34,21 +34,33 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 
 			state.finish(() => {
 				if (action == "enable") {
-					form.enable();
+					form.enable?.();
 				} else if (action == "disable") {
-					form.disable();
+					form.disable?.();
 				} else if (action == "fill") {
 					if (val == null) {
-						form.reset();
+						form.reset?.();
 					} else if (typeof val == "object") {
-						form.fill(this.linearizeValues(val), state.scope);
-						form.save();
+						form.fill?.(this.linearizeValues(val), state.scope);
+						form.save?.();
 					}
 				}
 			});
 
 			return val;
 		};
+		state.finish(() => {
+			let index = 0;
+			for (const node of document.querySelectorAll('label[for]')) {
+				const prev = node.previousElementSibling;
+				if (prev?.nodeName != "INPUT") continue;
+				const others = document.querySelectorAll(`input[id="${node.htmlFor}"]`);
+				if (others.length > 1) {
+					node.htmlFor += `-${index++}`;
+					prev.id = node.htmlFor;
+				}
+			}
+		});
 	}
 
 	static setup(state) {
@@ -79,6 +91,10 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 		}
 	}
 
+	#isPureButtons() {
+		return this.elements.every(item => item.type == "submit");
+	}
+
 	toggleMessages(status) {
 		return window.HTMLElementTemplate.prototype.toggleMessages.call(this, status, this);
 	}
@@ -98,6 +114,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 				this.setAttribute('data-' + key, val);
 			}
 			this.restore(state.scope);
+			if (this.#isPureButtons()) this.classList.add('unsaved');
 		} else {
 			for (const name of this.fill(state.query, state.scope)) {
 				state.vars[name] = true;
@@ -162,7 +179,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 					query[name] = val;
 					break;
 				case "radio":
-					if (!withDefaults && node.checked == node.defaultChecked) {
+					if (!withDefaults && (node.checked == node.defaultChecked || val == null)) {
 						if (query[name] == val) {
 							query[name] = undefined;
 						}
@@ -264,7 +281,12 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 		if (state.scope.$write) return;
 		this.toggleMessages();
 		if (this.matches('.loading')) return;
-		if (e.type != "submit" && this.querySelector('[type="submit"]')) return;
+		if (e.type != "submit" && this.querySelector('[type="submit"]')) {
+			if (this.method == "post") {
+				this.classList.add('unsaved');
+			}
+			return;
+		}
 		let fn = this[this.method + 'Method'];
 		if (e.type == "input" && (!e.target || !["radio", "checkbox"].includes(e.target.type))) {
 			fn = this[this.method + 'MethodLater'] || fn;
@@ -307,6 +329,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 	async postMethod(e, state) {
 		if (e.type != "submit") return;
 		const form = this;
+		if (!this.#isPureButtons()) form.classList.remove('unsaved');
 		form.classList.add('loading');
 
 		await Promise.all(
@@ -381,9 +404,6 @@ HTMLFormElement.prototype.disable = function () {
 	}
 };
 
-
-
-
 HTMLSelectElement.prototype.fill = function (val) {
 	if (!Array.isArray(val)) val = [val];
 	for (let i = 0; i < this.options.length; i++) {
@@ -394,7 +414,12 @@ HTMLSelectElement.prototype.fill = function (val) {
 HTMLSelectElement.prototype.reset = function () {
 	for (let i = 0; i < this.options.length; i++) this.options[i].selected = false;
 };
-
+HTMLButtonElement.prototype.fill = function(val) {
+	if (this.name && this.type == "submit") this.value = val;
+};
+HTMLButtonElement.prototype.fill = function (val) {
+	if (this.name && this.type == "submit") this.value = val;
+};
 HTMLInputElement.prototype.fill = function (val) {
 	if (val == null) val = "";
 	if (this.type == "radio" || this.type == "checkbox") {

package/ui/input_radio.css

@@ -2,14 +2,17 @@
 	display:none;
 }
 .field.button > .radio > input + label {
-	opacity:0.7;
+	opacity: 0.5;
 	padding: 0.5em;
 	display: block;
 	position: relative;
+	border: 1px solid gray;
+	border-radius: 4px;
 }
 .field.button > .radio > input + label:hover {
 	opacity:1;
 }
 .field.button > .radio > input:checked + label {
 	opacity:1;
+	font-weight: bold;
 }

package/ui/textarea.css

@@ -0,0 +1,3 @@
+textarea[is="element-textarea"] {
+	min-height:2em !important;
+}

package/ui/textarea.js

@@ -0,0 +1,21 @@
+class HTMLElementTextArea extends Page.create(HTMLTextAreaElement) {
+	handleChange(e, state) {
+		this.#resize(state);
+	}
+	handleInput(e, state) {
+		this.#resize(state);
+	}
+	setup(state) {
+		this.#resize(state);
+	}
+	#resize(state) {
+		if (state.scope.$write) {
+			delete this.style.height;
+			return;
+		}
+		this.style.height = 0;
+		this.style.height = `calc(${this.scrollHeight}px + 1em)`;
+	}
+}
+
+Page.define('element-textarea', HTMLElementTextArea, 'textarea');