@pageboard/html 0.12.13 → 0.12.15

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/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 = {
@@ -346,18 +354,13 @@ exports.input_radio = {
 			format: "singleline",
 			$helper: 'element-property'
 		},
-		checked: {
-			title: "Checked",
-			type: "boolean",
-			default: false
-		},
 		value: {
 			title: "Value",
 			type: "string",
 			format: "singleline"
 		},
-		disabled: {
-			title: "Disabled",
+		checked: {
+			title: "Checked",
 			type: "boolean",
 			default: false
 		},
@@ -365,22 +368,34 @@ exports.input_radio = {
 			title: 'Required',
 			type: 'boolean',
 			default: false
+		},
+		disabled: {
+			title: "Disabled",
+			type: "boolean",
+			default: false
+		},
+		button: {
+			title: 'Button',
+			description:'hide radio toggle opacity',
+			type: "boolean",
+			default: false
 		}
 	},
 	contents: {
 		id: 'label',
 		nodes: 'inline*'
 	},
-	html: `<div class="field">
-		<div class="ui radio checkbox">
+	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>
 	</div>`,
 	stylesheets: [
-		'../lib/components/checkbox.css'
+		'../lib/components/checkbox.css',
+		'../ui/input_radio.css'
 	]
 };
 
@@ -470,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/layout.js

@@ -58,6 +58,19 @@ exports.layout = {
 				title: "Row"
 			}]
 		},
+		wrap: {
+			title: 'Wrap',
+			anyOf: [{
+				type: 'null',
+				title: 'No wrap'
+			}, {
+				const: 'wrap',
+				title: 'Wrap'
+			}, {
+				const: 'wrap-reverse',
+				title: 'Reverse'
+			}]
+		},
 		width: {
 			title: 'Width',
 			anyOf: [{
@@ -293,6 +306,7 @@ exports.layout = {
 		[width|switch:full:fullwidth:contained:ui container]
 		[horizontal]
 		[vertical]
+		[wrap]
 		[direction]
 		[background.invert|alt:inverted]"
 		is="element-layout"

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.13",
+  "version": "0.12.15",
   "description": "",
   "main": "index.js",
   "repository": {

package/ui/embed.js

@@ -1,7 +1,6 @@
 class HTMLElementEmbed extends Page.Element {
 	static defaults = {
 		src: null,
-		query: null,
 		hash: null
 	};
 	static revealRatio = 0.2;

package/ui/fieldset-list.js

@@ -35,6 +35,17 @@ class HTMLElementFieldsetList extends Page.Element {
 	#walk;
 
 	fill(values, scope) {
+		// unflatten array-values
+		if (this.#prefix == null) return;
+		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);
@@ -198,7 +209,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 +288,10 @@ class HTMLElementFieldsetList extends Page.Element {
 				live.replaceWith(node);
 			}
 		}
+		this.dispatchEvent(new Event('change', {
+			bubbles: true,
+			cancelable: true
+		}));
 	}
 
 	#parseName(name) {

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

@@ -0,0 +1,18 @@
+.field.button > .radio > input {
+	display:none;
+}
+.field.button > .radio > input + label {
+	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/layout.css

@@ -1,7 +1,16 @@
-.layout,
-.ui.container.layout {
+.layout {
+	display:flex;
 	flex: 0 0 auto;
+}
+.ui.container.layout {
 	display:flex;
+	flex: 1 0 auto;
+}
+.layout.wrap {
+	flex-wrap:wrap;
+}
+.layout.wrap-reverse {
+	flex-wrap:wrap-reverse;
 }
 .layout.column {
 	flex-direction: column;

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');