@pageboard/html 0.10.13 → 0.10.16

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/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

@@ -33,27 +33,26 @@ class HTMLCustomFormElement extends HTMLFormElement {
 		delete state.query.submit;
 		state.finish(() => {
 			if (state.status != 200) return;
-			const e = document.createEvent('HTMLEvents');
-			e.initEvent('submit', true, true);
-			this.dispatchEvent(e);
+			this.dispatchEvent(new Event('submit', {
+				bubbles: true,
+				cancelable: true
+			}));
 		});
 	}
-	read(withDefaults) {
+	read(withDefaults = false) {
 		const fd = new FormData(this);
 		const query = {};
 		fd.forEach((val, key) => {
-			if (val == null || val == "") {
-				const cur = this.querySelectorAll(`[name="${key}"]`).slice(-1).pop();
-				if (cur.required == false) {
-					val = undefined;
-				} else {
-					val = null;
-				}
+			const cur = this.querySelectorAll(`[name="${key}"]`).slice(-1).pop();
+			if (cur.type == "file") {
+				val = cur.value;
 			}
+			if (val == "") val = null;
+			// build array-like values
 			const old = query[key];
 			if (old !== undefined) {
 				if (!Array.isArray(old)) {
-					query[key] = [old];
+					query[key] = old == null ? [] : [old];
 				}
 				if (val !== undefined) query[key].push(val);
 			} else {
@@ -61,37 +60,48 @@ class HTMLCustomFormElement extends HTMLFormElement {
 			}
 		});
 
+		// withDefaults: keep value if equals to its default
+		// else unset value
 		for (const node of this.elements) {
-			if (node.name == null || node.name == "" || node.type == "button") continue;
+			const { name, type } = node;
+			if (name == null || name == "" || type == "button") {
+				continue;
+			}
 			let val = node.value;
 			if (val == "") val = null;
-			if (node.type == "radio") {
-				if (!withDefaults && node.checked == node.defaultChecked && query[node.name] == val) {
-					query[node.name] = undefined;
-				}
-			} else if (node.type == "checkbox") {
-				if (!(node.name in query)) {
-					if (!withDefaults) query[node.name] = undefined;
-				}
-			} else if (node.type == "hidden") {
-				// always include them
-			} else {
-				let defVal = node.defaultValue;
-				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) {
-				query[node.name] = null;
+			let defVal = node.defaultValue;
+			if (defVal == "") defVal = null;
+
+			switch (type) {
+				case "radio":
+					if (!withDefaults && node.checked == node.defaultChecked) {
+						if (query[name] == val) {
+							query[name] = undefined;
+						}
+					}
+					break;
+				case "checkbox":
+					if (!withDefaults) {
+						if (!(name in query)) {
+							query[name] = undefined;
+						}
+					}
+					break;
+				case "hidden":
+					break;
+				default:
+					if (withDefaults) {
+						if (query[name] === undefined) {
+							query[name] = defVal;
+						}
+					} else if (val === defVal) {
+						query[name] = node.required ? null : undefined;
+					}
 			}
 		}
+		// FIXME use e.submitter polyfill when available
+		// https://github.com/Financial-Times/polyfill-library/issues/1111
 		const btn = document.activeElement;
-		// FIXME https://github.com/whatwg/html/issues/3195 use e.submitter polyfill
-		// https://github.com/whatwg/xhr/issues/262 it's a mess
 		if (btn && btn.type == "submit" && btn.name && btn.value) {
 			query[btn.name] = btn.value;
 		}
@@ -344,6 +354,9 @@ HTMLInputElement.prototype.fill = function (val) {
 	if (val == null) val = "";
 	if (this.type == "radio" || this.type == "checkbox") {
 		this.checked = val;
+	} else if (this.type == "file") {
+		if (val == '' || val == null) this.removeAttribute('value');
+		else this.setAttribute('value', val);
 	} else {
 		this.value = val;
 	}
@@ -360,6 +373,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;
 	}
@@ -377,11 +392,13 @@ Object.defineProperty(HTMLInputElement.prototype, 'defaultValue', {
 	configurable: true,
 	enumerable: true,
 	get: function () {
+		// FIXME might not be needed anymore
 		if (this.form?.method == "get") return '';
 		else return this.getAttribute('value');
 	},
 	set: function (val) {
-		this.setAttribute('value', val);
+		if (val == '' || val == null) this.removeAttribute('value');
+		else this.setAttribute('value', val);
 	}
 });
 
@@ -464,6 +481,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-file.css

@@ -14,10 +14,10 @@
 .form .field > input[type="file"]:focus,
 .form .field > input[type="file"]:hover {
 	position:relative;
-	color: rgba(0 0 0 / 0%);
+	color: transparent !important;
 }
-.form .field > input[type="file"][filename]::after {
-	content:attr(filename);
+.form .field > input[type="file"][value]::after {
+	content:attr(value);
 	color: black;
 	text-align: left;
 	position: absolute;
@@ -26,11 +26,11 @@
 	padding-left: inherit;
 	padding-right: inherit;
 }
-.form .field.error > input[type="file"][filename]::after {
+.form .field.error > input[type="file"][value]::after {
 	color:inherit;
 }
 .form .field > input[type="file"]::after,
-.form .field > input[type="file"]:not([filename])::after {
+.form .field > input[type="file"]:not([value])::after {
 	content:attr(placeholder);
 	color: rgba(0 0 0 / 50%);
 	float: left;
@@ -53,6 +53,6 @@ input[type="file"]::file-selector-button {
 	z-index: 1;
 }
 
-input[type="file"][filename]::file-selector-button {
+input[type="file"][value]::file-selector-button {
 	background-image: url('data:image/svg+xml,<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg"><path d="m40.9 31.9 21-21a6.4 6.4 0 1 0-9-9l-21 21-21-21a6.4 6.4 0 1 0-9 9l21 21-21 21a6.4 6.4 0 0 0 0 9C3 63 4.6 63.8 6.2 63.8s3.3-.7 4.5-2l21-21 21 21c1.2 1.3 2.8 2 4.5 2s3.2-.7 4.5-2a6.4 6.4 0 0 0 0-9z"/></svg>');
 }

package/ui/input-file.js

@@ -1,35 +1,39 @@
 class HTMLElementInputFile extends HTMLInputElement {
 	#xhr;
 	#promise;
-	#value;
+	#defaultValue;
+
+	/* Since input[type=file] does not allow setting "value" property,
+	 * it is stored in the "value" attribute,
+	 * forcing defaultValue to be handled with a private field.
+	 * The "filename" attribute is used to display both selected value property,
+	 * and filled value attribute.
+	 */
 
 	constructor() {
 		super();
 		if (this.init) this.init();
 		this.save();
 	}
-
-	get value() {
-		return this.getAttribute('value');
+	get defaultValue() {
+		return this.#defaultValue;
 	}
-	save() {
-		this.#value = this.value;
+	set defaultValue(str) {
+		this.#defaultValue = str;
 	}
-	reset() {
-		if (this.#value != null) this.setAttribute('value', this.#value);
-		else this.removeAttribute('value');
-		this.value = this.#value;
+	get value() {
+		return this.getAttribute('value');
 	}
 	set value(str) {
-		if (str != null) {
-			this.setAttribute('filename', str.split(/\/|\\/).pop());
+		if (str) {
+			this.setAttribute('value', str);
 		} else {
-			this.removeAttribute('filename');
+			this.removeAttribute('value');
 			super.value = "";
 		}
 	}
 	captureClick(e, state) {
-		if (super.value) {
+		if (this.value) {
 			e.preventDefault();
 			if (this.#xhr) {
 				this.#xhr.abort();
@@ -72,7 +76,7 @@ class HTMLElementInputFile extends HTMLInputElement {
 			const pass = (obj) => {
 				if (!obj.items || obj.items.length == 0) return fail(new Error("File rejected"));
 				const val = obj.items[0];
-				this.setAttribute('value', val);
+				this.value = val;
 				field.classList.add('success');
 				field.classList.remove('loading');
 				this.#xhr = null;

package/ui/input-range.js

@@ -81,9 +81,10 @@ class HTMLElementInputRange extends HTMLInputElement {
 			helper.classList.remove('indeterminate');
 			if (isInt) values = values.map((n) => parseInt(n));
 			this.rangeValue = values;
-			const e = document.createEvent('HTMLEvents');
-			e.initEvent('change', true, true);
-			this.dispatchEvent(e);
+			this.dispatchEvent(new Event('change', {
+				bubbles: true,
+				cancelable: true
+			}));
 		});
 		helper.addEventListener('keydown', this, true);
 		helper.addEventListener('dblclick', this, true);
@@ -92,9 +93,10 @@ class HTMLElementInputRange extends HTMLInputElement {
 	handleEvent(e) {
 		if (e.type == "dblclick" || e.keyCode == 8 || e.keyCode == 46) {
 			this.fill();
-			const ne = document.createEvent('HTMLEvents');
-			ne.initEvent('change', true, true);
-			this.dispatchEvent(ne);
+			this.dispatchEvent(new Event('change', {
+				bubbles: true,
+				cancelable: true
+			}));
 		}
 	}