@pageboard/html 0.10.9 → 0.10.14

package/ui/card.css

@@ -6,19 +6,19 @@
 	max-width:100%;
 }
 .ui.square > .ui > .image::after {
-	content: '';
+	content: "";
 	display: block;
 	height: 0;
 	padding-bottom: 100%;
 }
 .ui.tall > .ui > .image::after {
-	content: '';
+	content: "";
 	display: block;
 	height: 0;
 	padding-bottom: 150%;
 }
 .ui.wide > .ui > .image::after {
-	content: '';
+	content: "";
 	display: block;
 	height: 0;
 	padding-bottom:50%;
@@ -34,10 +34,10 @@
 	background: #FFFFFF;
 	padding: 0em;
 	border: none;
-	border-radius: 0.28571429rem;
+	border-radius: 0.2857rem;
 	box-shadow: 0px 1px 3px 0px #D4D4D5, 0px 0px 0px 1px #D4D4D5;
 	transition: box-shadow 0.1s ease, transform 0.1s ease;
-	z-index: '';
+	z-index: auto;
 	margin: 0.875em 0.5em;
 	float: none;
 	font-size: 1em;
@@ -67,7 +67,7 @@
 .ui.cards::after,
 .ui.cards > .ui::after {
 	display: block;
-	content: ' ';
+	content: " ";
 	height: 0px;
 	clear: both;
 	overflow: hidden;
@@ -84,14 +84,14 @@
 ---------------*/
 
 .ui.cards > .ui > :first-child {
-	border-radius: 0.28571429rem 0.28571429rem 0em 0em !important;
+	border-radius: 0.2857rem 0.2857rem 0em 0em !important;
 	border-top: none !important;
 }
 .ui.cards > .ui > :last-child {
-	border-radius: 0em 0em 0.28571429rem 0.28571429rem !important;
+	border-radius: 0em 0em 0.2857rem 0.2857rem !important;
 }
 .ui.cards > .ui > :only-child {
-	border-radius: 0.28571429rem !important;
+	border-radius: 0.2857rem !important;
 }
 
 /*--------------
@@ -103,7 +103,7 @@
 	display: block;
 	flex: 0 0 auto;
 	padding: 0em;
-	background: rgba(0, 0, 0, 0.05);
+	background: rgba(0 0 0 / 5%);
 	overflow: hidden;
 }
 .ui.cards > .ui > .image > img {
@@ -123,17 +123,17 @@
 .ui.cards > .ui > .content {
 	flex-grow: 1;
 	border: none;
-	border-top: 1px solid rgba(34, 36, 38, 0.1);
+	border-top: 1px solid rgba(34 36 38 / 10%);
 	background: none;
 	margin: 0em;
-	padding: 1em 1em;
+	padding: 1em;
 	box-shadow: none;
 	font-size: 1em;
 	border-radius: 0em;
 }
 .ui.cards > .ui > .content::after {
 	display: block;
-	content: ' ';
+	content: " ";
 	height: 0px;
 	clear: both;
 	overflow: hidden;
@@ -141,17 +141,17 @@
 }
 .ui.cards > .ui > .content > .header {
 	display: block;
-	margin: '';
-	font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
-	color: rgba(0, 0, 0, 0.85);
+	margin: 0;
+	font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
+	color: rgba(0 0 0 / 85%);
 }
 
 /* Default Header Size */
 .ui.cards > .ui > .content > .header:not(.ui) {
 	font-weight: bold;
-	font-size: 1.28571429em;
-	margin-top: -0.21425em;
-	line-height: 1.28571429em;
+	font-size: 1.2857em;
+	margin-top: -0.2142em;
+	line-height: 1.2857em;
 }
 .ui.cards > .ui > .content > .meta + .description,
 .ui.cards > .ui > .content > .header + .description {
@@ -190,7 +190,7 @@
 .ui.cards > .ui .content img {
 	display: inline-block;
 	vertical-align: middle;
-	width: '';
+	width: "";
 }
 .ui.cards > .ui img.avatar,
 .ui.cards > .ui .avatar img {
@@ -205,7 +205,7 @@
 
 .ui.cards > .ui > .content > .description {
 	clear: both;
-	color: rgba(0, 0, 0, 0.68);
+	color: rgba(0 0 0 / 68%);
 }
 
 /*--------------
@@ -225,7 +225,7 @@
 
 .ui.cards > .ui .meta {
 	font-size: 1em;
-	color: rgba(0, 0, 0, 0.4);
+	color: rgb(0 0 0 / 40%);
 }
 .ui.cards > .ui .meta * {
 	margin-right: 0.3em;
@@ -245,16 +245,16 @@
 
 /* Generic */
 .ui.cards > .ui > .content a:not(.ui) {
-	color: '';
+	color: "";
 	transition: color 0.1s ease;
 }
 .ui.cards > .ui > .content a:not(.ui):hover {
-	color: '';
+	color: "";
 }
 
 /* Header */
 .ui.cards > .ui > .content > a.header {
-	color: rgba(0, 0, 0, 0.85);
+	color: rgb(0 0 0 / 85%);
 }
 .ui.cards > .ui > .content > a.header:hover {
 	color: #1e70bf;
@@ -262,10 +262,10 @@
 
 /* Meta */
 .ui.cards > .ui .meta > a:not(.ui) {
-	color: rgba(0, 0, 0, 0.4);
+	color: rgb(0 0 0 / 40%);
 }
 .ui.cards > .ui .meta > a:not(.ui):hover {
-	color: rgba(0, 0, 0, 0.87);
+	color: rgb(0 0 0 / 87%);
 }
 
 /*--------------
@@ -283,7 +283,7 @@
 ---------------*/
 
 .ui.cards > .ui .dimmer {
-	background-color: '';
+	background-color: "";
 	z-index: 10;
 }
 
@@ -298,11 +298,11 @@
 /* Icon */
 .ui.cards > .ui > .content .star.icon {
 	cursor: pointer;
-	opacity: 0.75;
+	opacity: 75%;
 	transition: color 0.1s ease;
 }
 .ui.cards > .ui > .content .star.icon:hover {
-	opacity: 1;
+	opacity: 100%;
 	color: #FFB70A;
 }
 .ui.cards > .ui > .content .active.star.icon {
@@ -315,11 +315,11 @@
 /* Icon */
 .ui.cards > .ui > .content .like.icon {
 	cursor: pointer;
-	opacity: 0.75;
+	opacity: 75%;
 	transition: color 0.1s ease;
 }
 .ui.cards > .ui > .content .like.icon:hover {
-	opacity: 1;
+	opacity: 100%;
 	color: #FF2733;
 }
 .ui.cards > .ui > .content .active.like.icon {
@@ -334,20 +334,20 @@
 	max-width: 100%;
 	min-height: 0em !important;
 	flex-grow: 0;
-	border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
+	border-top: 1px solid rgb(0 0 0 / 5%) !important;
 	position: static;
 	background: none;
 	width: auto;
-	margin: 0em 0em;
+	margin: 0em;
 	padding: 0.75em 1em;
 	top: 0em;
 	left: 0em;
-	color: rgba(0, 0, 0, 0.4);
+	color: rgb(0 0 0 / 40%);
 	box-shadow: none;
 	transition: color 0.1s ease;
 }
 .ui.cards > .ui > .extra a:not(.ui) {
-	color: rgba(0, 0, 0, 0.4);
+	color: rgb(0 0 0 / 40%);
 }
 .ui.cards > .ui > .extra a:not(.ui):hover {
 	color: #1e70bf;
@@ -364,11 +364,11 @@
 --------------------*/
 
 .ui.raised.cards > .ui {
-	box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
+	box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgb(34 36 38 / 12%), 0px 2px 10px 0px rgb(34 36 38 / 15%);
 }
 .ui.raised.cards > a.ui:hover,
 .ui.link.cards > .raised.ui:hover {
-	box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.15), 0px 2px 10px 0px rgba(34, 36, 38, 0.25);
+	box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgb(34 36 38 / 15%), 0px 2px 10px 0px rgb(34 36 38 / 25%);
 }
 
 /*-------------------
@@ -434,7 +434,7 @@
 	margin-right: -1em;
 }
 .ui.three.cards > .ui {
-	width: calc(33.33333333% - 2em);
+	width: calc(33.3333% - 2em);
 	margin-left: 1em;
 	margin-right: 1em;
 }
@@ -461,7 +461,7 @@
 	margin-right: -0.75em;
 }
 .ui.six.cards > .ui {
-	width: calc(16.66666667% - 1.5em);
+	width: calc(16.6667% - 1.5em);
 	margin-left: 0.75em;
 	margin-right: 0.75em;
 }
@@ -470,7 +470,7 @@
 	margin-right: -0.5em;
 }
 .ui.seven.cards > .ui {
-	width: calc(14.28571429% - 1em);
+	width: calc(14.2857% - 1em);
 	margin-left: 0.5em;
 	margin-right: 0.5em;
 }
@@ -489,7 +489,7 @@
 	margin-right: -0.5em;
 }
 .ui.nine.cards > .ui {
-	width: calc(11.11111111% - 1em);
+	width: calc(11.1111% - 1em);
 	margin-left: 0.5em;
 	margin-right: 0.5em;
 	font-size: 10px;
@@ -561,7 +561,7 @@
 		margin-right: -1em;
 	}
 	.ui.seven.doubling.cards > .ui {
-		width: calc(33.33333333% - 2em);
+		width: calc(33.3333% - 2em);
 		margin-left: 1em;
 		margin-right: 1em;
 	}
@@ -570,7 +570,7 @@
 		margin-right: -1em;
 	}
 	.ui.eight.doubling.cards > .ui {
-		width: calc(33.33333333% - 2em);
+		width: calc(33.3333% - 2em);
 		margin-left: 1em;
 		margin-right: 1em;
 	}
@@ -579,7 +579,7 @@
 		margin-right: -1em;
 	}
 	.ui.nine.doubling.cards > .ui {
-		width: calc(33.33333333% - 2em);
+		width: calc(33.3333% - 2em);
 		margin-left: 1em;
 		margin-right: 1em;
 	}
@@ -588,7 +588,7 @@
 		margin-right: -1em;
 	}
 	.ui.ten.doubling.cards > .ui {
-		width: calc(33.33333333% - 2em);
+		width: calc(33.3333% - 2em);
 		margin-left: 1em;
 		margin-right: 1em;
 	}
@@ -628,7 +628,7 @@
 		margin-right: -1em;
 	}
 	.ui.five.doubling.cards > .ui {
-		width: calc(33.33333333% - 2em);
+		width: calc(33.3333% - 2em);
 		margin-left: 1em;
 		margin-right: 1em;
 	}
@@ -637,7 +637,7 @@
 		margin-right: -1em;
 	}
 	.ui.six.doubling.cards > .ui {
-		width: calc(33.33333333% - 2em);
+		width: calc(33.3333% - 2em);
 		margin-left: 1em;
 		margin-right: 1em;
 	}
@@ -684,7 +684,7 @@
 	.ui.stackable.cards > .ui {
 		display: block !important;
 		height: auto !important;
-		margin: 1em 1em;
+		margin: 1em;
 		padding: 0 !important;
 		width: calc(100% - 2em) !important;
 	}

package/ui/fieldset-list.js

@@ -1,5 +1,4 @@
 class HTMLElementFieldsetList extends VirtualHTMLElement {
-	#size
 	fill(values, scope) {
 		const list = this.listFromValues(Object.assign({}, values));
 		this.resize(list.length, scope);
@@ -8,7 +7,7 @@ class HTMLElementFieldsetList extends VirtualHTMLElement {
 	patch(state) {
 		this.ownTpl.prerender();
 		if (this.isContentEditable) return;
-		if (!this.#size) this.resize(0, state.scope);
+		if (!this.size) this.resize(0, state.scope);
 	}
 
 	setup(state) {
@@ -17,8 +16,8 @@ class HTMLElementFieldsetList extends VirtualHTMLElement {
 
 	resize(size, scope) {
 		const len = Math.max(Number(this.dataset.size) || 0, size);
-		if (this.#size == len) return;
-		this.#size = len;
+		if (this.size == len) return;
+		this.size = len;
 
 		const tpl = this.ownTpl.content.cloneNode(true);
 		for (const node of tpl.querySelectorAll('[block-id]')) {

package/ui/form.css

@@ -3,20 +3,11 @@ fieldset.plain {
 	padding-right:0;
 	padding-left:0;
 }
-textarea::-webkit-selection,
-input::-webkit-selection {
-	background-color: rgba(100, 100, 100, 0.4);
-	color: rgba(0, 0, 0, 0.87);
-}
-textarea::-moz-selection,
-input::-moz-selection {
-	background-color: rgba(100, 100, 100, 0.4);
-	color: rgba(0, 0, 0, 0.87);
-}
+
 textarea::selection,
 input::selection {
-	background-color: rgba(100, 100, 100, 0.4);
-	color: rgba(0, 0, 0, 0.87);
+	background-color: rgb(100 100 100 / 40%);
+	color: rgb(0 0 0 / 87%);
 }
 
 label[for] {

package/ui/form.js

@@ -14,7 +14,7 @@ class HTMLCustomFormElement extends HTMLFormElement {
 			if (name && name == this.name) {
 				state.vars.submit = true;
 			}
-			const vars = state.templatesQuery(this);
+			const vars = state.templatesQuery(this) || {};
 			for (const [key, val] of Object.entries(vars)) {
 				this.setAttribute('data-' + key, val);
 			}
@@ -80,6 +80,9 @@ class HTMLCustomFormElement extends HTMLFormElement {
 				if (defVal == "") defVal = null;
 				if (!withDefaults && query[node.name] == defVal) {
 					query[node.name] = undefined;
+				} else {
+					// not yet using form-associated custom input
+					query[node.name] = node.value;
 				}
 			}
 			if (query[node.name] === undefined && withDefaults) {
@@ -181,6 +184,9 @@ class HTMLCustomFormElement extends HTMLFormElement {
 		if (!this.action) return;
 		window.sessionStorage.removeItem(this.action);
 	}
+	handleReset(e, state) {
+		this.reset();
+	}
 	handleSubmit(e, state) {
 		if (e.type == "submit") e.preventDefault();
 		if (this.isContentEditable) return;
@@ -234,9 +240,9 @@ class HTMLCustomFormElement extends HTMLFormElement {
 
 		const data = { $query	};
 		return Promise.all(Array.from(form.elements).filter((node) => {
-			return node.type == "file";
+			return Boolean(node.presubmit);
 		}).map((input) => {
-			return input.closest('element-input-file').upload();
+			return input.presubmit();
 		})).then(() => {
 			data.$query = state.query;
 			data.$request = form.read(true);
@@ -338,6 +344,8 @@ HTMLInputElement.prototype.fill = function (val) {
 	if (val == null) val = "";
 	if (this.type == "radio" || this.type == "checkbox") {
 		this.checked = val;
+	} else if (this.type == "file") {
+		this.setAttribute('value', val);
 	} else {
 		this.value = val;
 	}
@@ -354,6 +362,8 @@ HTMLInputElement.prototype.reset = function () {
 HTMLInputElement.prototype.save = function () {
 	if (this.type == "radio" || this.type == "checkbox") {
 		this.defaultChecked = this.checked;
+	} else if (this.type == "file") {
+		this.defaultValue = this.getAttribute('value');
 	} else {
 		this.defaultValue = this.value;
 	}
@@ -438,6 +448,7 @@ 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") {
@@ -457,6 +468,7 @@ Page.ready((state) => {
 					// new way
 				}
 				HTMLCustomFormElement.prototype.fill.call(form, linearizeValues(values), state.scope);
+				HTMLCustomFormElement.prototype.save.call(form);
 			}
 		} else if (action == "read") {
 			const obj = {};

package/ui/input-date-slot.js

@@ -0,0 +1,76 @@
+class HTMLElementInputDateSlot extends VirtualHTMLElement {
+	handleChange(e, state) {
+		this.update(e.target);
+	}
+
+	get type() {
+		const type = this.getAttribute('type');
+		const step = this.step;
+		if (step) {
+			if (step >= 86400) return "date";
+			else if (type == "date") return "datetime-local";
+		}
+		return type;
+	}
+	set type(f) {
+		this.setAttribute('type', f);
+	}
+	get step() {
+		const step = parseInt(this.getAttribute('step'));
+		if (Number.isNaN(step)) return null;
+		else return step;
+	}
+	set step(val) {
+		if (!val) this.removeAttribute('step');
+		else this.setAttribute('step', val);
+	}
+
+	update(input) {
+		const [startEl, endEl] = this.#inputs();
+		const isStart = input == startEl;
+
+		let start = startEl.valueAsDate;
+		let end = endEl.valueAsDate;
+		if (!start && !end) return;
+		if (!start) start = new Date(end);
+		else if (!end) end = new Date(start);
+		let startPart, endPart;
+		let equal = true;
+		for (const Part of ['FullYear', 'Month', 'Date', 'Hours', 'Minutes', 'Seconds']) {
+			startPart = start[`get${Part}`]();
+			endPart = end[`get${Part}`]();
+			if (startPart > endPart && equal) {
+				if (isStart) {
+					end[`set${Part}`](startPart);
+				} else {
+					start[`set${Part}`](endPart);
+				}
+			} else if (startPart != endPart) {
+				equal = false;
+			}
+		}
+		endEl.valueAsDate = end;
+		startEl.valueAsDate = start;
+	}
+	#inputs() {
+		return Array.from(this.querySelectorAll('input'));
+	}
+
+	patch(state) {
+		const [ start, end ] = this.#inputs();
+		const type = this.type;
+		let step = this.step;
+		if (step) {
+			if (type == "date") step = Math.round(step / 86400);
+			start.setAttribute('step', step);
+			end.setAttribute('step', step);
+		} else {
+			start.removeAttribute('step');
+			end.removeAttribute('step');
+		}
+		start.type = end.type = type;
+	}
+}
+
+VirtualHTMLElement.define('element-input-date-slot', HTMLElementInputDateSlot);
+

package/ui/input-date.js

@@ -0,0 +1,69 @@
+class HTMLElementInputDate extends HTMLInputElement {
+	constructor() {
+		super();
+		if (this.init) this.init();
+	}
+
+	setAttribute(name, value) {
+		if (name == "value") {
+			this.value = value;
+			value = super.value;
+		}
+		super.setAttribute(name, value);
+	}
+
+	get valueAsDate() {
+		let str = super.value;
+		if (!str) return null;
+		if (this.type == "time") {
+			str = `1970-01-01T${str}`;
+		}
+		const d = new Date(str + 'Z');
+		const t = d.getTime();
+		if (Number.isNaN(t)) return null;
+		const tz = d.getTimezoneOffset();
+		d.setTime(t + tz * 60 * 1000);
+		return d;
+	}
+	set valueAsDate(d) {
+		let t = d.getTime();
+		if (!d || Number.isNaN(t)) {
+			super.value = "";
+			return;
+		}
+		d = new Date(t);
+		const step = this.step * 1000;
+		if (step) {
+			t = Math.round(t / step) * step;
+			d.setTime(t);
+		}
+		const tz = d.getTimezoneOffset();
+		d.setTime(t - tz * 60 * 1000);
+		const str = d.toISOString().replace(/Z$/, '');
+		if (this.type == "time") {
+			super.value = str.split('T')[1];
+		} else if (this.type == "date") {
+			super.value = str.split('T')[0];
+		} else {
+			super.value = str;
+		}
+	}
+
+	get value() {
+		return this.valueAsDate?.toISOString();
+	}
+	set value(str) {
+		this.valueAsDate = new Date(str);
+	}
+
+	get type() {
+		return super.type;
+	}
+	set type(t) {
+		const str = super.value;
+		super.type = t;
+		this.value = str;
+	}
+}
+
+VirtualHTMLElement.define('element-input-date', HTMLElementInputDate, 'input');