@pageboard/html 0.11.5 → 0.11.8

package/elements/fieldsets.js

@@ -32,7 +32,7 @@ exports.fieldset = {
 		}
 	},
 	contents: "fieldset_legend block+",
-	html: '<fieldset class="[plain|?]" data-name="[name]" data-value="[value]" is="element-fieldset"></fieldset>',
+	html: '<fieldset class="[plain|?]" data-name="[name|split:.|slice:1|join:.]" data-value="[value]" is="element-fieldset"></fieldset>',
 	scripts: ["../ui/fieldset.js"],
 	stylesheets: ['../ui/fieldset.css']
 };

package/elements/form.js

@@ -131,7 +131,8 @@ exports.api_form = {
 			properties: {
 				parameters: {
 					title: 'Parameters',
-					type: "object"
+					type: "object",
+					nullable: true
 				}
 			},
 			nullable: true
@@ -142,7 +143,8 @@ exports.api_form = {
 			properties: {
 				parameters: {
 					title: 'Parameters',
-					type: "object"
+					type: "object",
+					nullable: true
 				}
 			},
 			nullable: true
@@ -153,7 +155,8 @@ exports.api_form = {
 			properties: {
 				parameters: {
 					title: 'Parameters',
-					type: "object"
+					type: "object",
+					nullable: true
 				}
 			},
 			nullable: true

package/elements/image.js

@@ -132,7 +132,7 @@ exports.image = {
 		class="[display.fit|or:none] [display.horizontal|or:] [display.vertical|or:]"
 		alt="[alt]"
 		data-src="[url|or:[$element.resources.empty]]"
-		data-crop="[crop.x];[crop.y];[crop.width];[crop.height];[crop.zoom]"
+		data-crop="[crop.x|or:50];[crop.y|or:50];[crop.width|or:100];[crop.height|or:100];[crop.zoom|or:100]"
 	>
 		<div block-content="legend"></div>
 	</element-image>`,

package/elements/input-property.js

@@ -41,6 +41,7 @@ exports.input_property = {
 	fuse: function(node, d, scope) {
 		const view = scope.$view;
 		const doc = scope.$doc;
+		const dateFormats = ["date", "time", "date-time"];
 		let name = d.name;
 		if (!name) {
 			return node;
@@ -79,13 +80,17 @@ exports.input_property = {
 				cases = null;
 				discKey = null;
 			} else {
+				if (prop.type == "array" && prop.items && !Array.isArray(prop.items)) {
+					prop = prop.items;
+				}
 				if (prop.select && prop.select.$data == `0/${propKey}`) {
 					cases = prop.selectCases;
 				} else if (prop.discriminator && prop.discriminator.propertyName == propKey) {
 					cases = prop.oneOf;
 					discKey = propKey;
 				}
-				prop = (prop.items && prop.items.properties || prop.properties || {})[propKey] || null;
+				if (prop.properties) prop = prop.properties;
+				prop = prop[propKey];
 			}
 			if (prop == null) break;
 		}
@@ -242,8 +247,40 @@ exports.input_property = {
 					label: prop.title
 				}
 			}));
-		} else if (propType.type == "string" && ["date", "time", "date-time"].includes(propType.format)) {
+		} else if (propType.type == "object" && Object.keys(propType.properties).sort().join(' ') == "end start" && dateFormats.includes(propType.properties.start.format) && dateFormats.includes(propType.properties.end.format)) {
 			node.appendChild(view.render({
+				id,
+				type: 'input_date_slot',
+				data: {
+					nameStart: name,
+					nameEnd: name,
+					format: propType.properties.start.format.replace('-', ''),
+					disabled: d.disabled,
+					required: required,
+					step: propType.properties.start.step
+				},
+				content: {
+					label: prop.title
+				}
+			}));
+		} else if (propType.type == "string" && dateFormats.includes(propType.format)) {
+			if (d.multiple) node.appendChild(view.render({
+				id,
+				type: 'input_date_slot',
+				data: {
+					nameStart: name,
+					nameEnd: name,
+					format: propType.format.replace('-', ''),
+					default: propType.default,
+					disabled: d.disabled,
+					required: required,
+					step: propType.step
+				},
+				content: {
+					label: prop.title
+				}
+			}));
+			else node.appendChild(view.render({
 				id,
 				type: 'input_date_time',
 				data: {

package/elements/inputs.js

@@ -233,7 +233,7 @@ exports.input_range = {
 	menu: "form",
 	group: "block",
 	context: 'form//',
-	properties: {
+	properties: Object.assign({}, exports.input_number.properties, {
 		multiple: {
 			title: 'Multiple',
 			type: 'boolean',
@@ -242,10 +242,14 @@ exports.input_range = {
 		pips: {
 			title: 'Pips',
 			type: 'boolean',
-			default: true
+			default: false
 		},
-		...exports.input_number.properties
-	},
+		step: {
+			title: 'Step',
+			type: "number",
+			default: 10
+		}
+	}),
 	contents: {
 		id: 'label',
 		nodes: 'inline*'

package/lib/nouislider.js

@@ -714,6 +714,7 @@
         var hover = entry.indexOf("hover") >= 0;
         var unconstrained = entry.indexOf("unconstrained") >= 0;
         var dragAll = entry.indexOf("drag-all") >= 0;
+        var smoothSteps = entry.indexOf("smooth-steps") >= 0;
         if (fixed) {
             if (parsed.handles !== 2) {
                 throw new Error("noUiSlider: 'fixed' behaviour must be used with 2 handles");
@@ -728,6 +729,7 @@
             tap: tap || snap,
             drag: drag,
             dragAll: dragAll,
+            smoothSteps: smoothSteps,
             fixed: fixed,
             snap: snap,
             hover: hover,
@@ -1472,6 +1474,14 @@
                     scope_Body.removeEventListener("selectstart", preventDefault);
                 }
             }
+            if (options.events.smoothSteps) {
+                data.handleNumbers.forEach(function (handleNumber) {
+                    setHandle(handleNumber, scope_Locations[handleNumber], true, true, false, false);
+                });
+                data.handleNumbers.forEach(function (handleNumber) {
+                    fireEvent("update", handleNumber);
+                });
+            }
             data.handleNumbers.forEach(function (handleNumber) {
                 fireEvent("change", handleNumber);
                 fireEvent("set", handleNumber);
@@ -1771,7 +1781,7 @@
             });
         }
         // Split out the handle positioning logic so the Move event can use it, too
-        function checkHandlePosition(reference, handleNumber, to, lookBackward, lookForward, getValue) {
+        function checkHandlePosition(reference, handleNumber, to, lookBackward, lookForward, getValue, smoothSteps) {
             var distance;
             // For sliders with multiple handles, limit movement to the other handle.
             // Apply the margin option by adding it to the handle positions.
@@ -1810,7 +1820,9 @@
                     to = Math.min(to, distance);
                 }
             }
-            to = scope_Spectrum.getStep(to);
+            if (!smoothSteps) {
+                to = scope_Spectrum.getStep(to);
+            }
             // Limit percentage to the 0 - 100 range
             to = limit(to);
             // Return false if handle can't move
@@ -1830,6 +1842,7 @@
             var proposals = locations.slice();
             // Store first handle now, so we still have it in case handleNumbers is reversed
             var firstHandle = handleNumbers[0];
+            var smoothSteps = options.events.smoothSteps;
             var b = [!upward, upward];
             var f = [upward, !upward];
             // Copy handleNumbers so we don't change the dataset
@@ -1842,7 +1855,7 @@
             // Step 1: get the maximum percentage that any of the handles can move
             if (handleNumbers.length > 1) {
                 handleNumbers.forEach(function (handleNumber, o) {
-                    var to = checkHandlePosition(proposals, handleNumber, proposals[handleNumber] + proposal, b[o], f[o], false);
+                    var to = checkHandlePosition(proposals, handleNumber, proposals[handleNumber] + proposal, b[o], f[o], false, smoothSteps);
                     // Stop if one of the handles can't move.
                     if (to === false) {
                         proposal = 0;
@@ -1860,7 +1873,8 @@
             var state = false;
             // Step 2: Try to set the handles with the found percentage
             handleNumbers.forEach(function (handleNumber, o) {
-                state = setHandle(handleNumber, locations[handleNumber] + proposal, b[o], f[o]) || state;
+                state =
+                    setHandle(handleNumber, locations[handleNumber] + proposal, b[o], f[o], false, smoothSteps) || state;
             });
             // Step 3: If a handle moved, fire events
             if (state) {
@@ -1905,9 +1919,9 @@
         }
         // Test suggested values and apply margin, step.
         // if exactInput is true, don't run checkHandlePosition, then the handle can be placed in between steps (#436)
-        function setHandle(handleNumber, to, lookBackward, lookForward, exactInput) {
+        function setHandle(handleNumber, to, lookBackward, lookForward, exactInput, smoothSteps) {
             if (!exactInput) {
-                to = checkHandlePosition(scope_Locations, handleNumber, to, lookBackward, lookForward, false);
+                to = checkHandlePosition(scope_Locations, handleNumber, to, lookBackward, lookForward, false, smoothSteps);
             }
             if (to === false) {
                 return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.11.5",
+  "version": "0.11.8",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "formdata-polyfill": "^4.0.10",
-    "nouislider": "^15.5.1",
+    "nouislider": "^15.6.0",
     "object-fit-images": "^3.2.4",
     "postinstall-bundle": "^0.7.4"
   },

package/ui/fieldset-list.js

@@ -29,15 +29,25 @@ class WalkIndex {
 
 class HTMLElementFieldsetList extends VirtualHTMLElement {
 	#size;
+	#initialSize;
 	#prefix;
 	#model;
 	#walk;
 
 	fill(values, scope) {
 		const list = this.#listFromValues({ ...values });
+		if (this.#initialSize == null) this.#initialSize = list.length;
 		this.#resize(list.length, scope);
 	}
 
+	reset() {
+		this.#resize(this.#initialSize, {}); // missing scope
+	}
+
+	save() {
+		this.#initialSize = this.#size;
+	}
+
 	#prepare() {
 		this.ownTpl.prerender();
 		if (this.isContentEditable) return;
@@ -105,8 +115,24 @@ class HTMLElementFieldsetList extends VirtualHTMLElement {
 		for (const node of inputs) {
 			if (node.name.startsWith(prefix)) {
 				node.name = `${prefix}[$field.index].${node.name.substring(prefix.length)}`;
+				if (node.id?.startsWith('for-' + prefix)) {
+					node.id = `for-${prefix}[$field.index].${node.id.substring(4 + prefix.length)}`;
+				}
 			}
 		}
+		const conditionalFieldsets = tpl.querySelectorAll('[is="element-fieldset"]');
+		for (const node of conditionalFieldsets) {
+			if (node.dataset.name?.startsWith(prefix)) {
+				node.dataset.name = `${prefix}[$field.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}[$field.index].${node.htmlFor.substring(4 + prefix.length)}`;
+			}
+		}
+
 		const subtpl = inputs.ancestor();
 		if (!subtpl) {
 			console.warn("fieldset-list should contain input[name]", this);
@@ -122,6 +148,12 @@ class HTMLElementFieldsetList extends VirtualHTMLElement {
 				while (node.previousSibling) node.previousSibling.remove();
 				node = node.parentNode;
 			}
+			{
+				const hidden = tpl.ownerDocument.createElement('input');
+				hidden.type = "hidden";
+				hidden.name = prefix.slice(0, -1);
+				tpl.appendChild(hidden);
+			}
 		}
 		tpl = tpl.fuse({ $fieldset }, scope);
 

package/ui/fieldset.css

@@ -11,7 +11,7 @@ fieldset.plain {
 fieldset.plain > legend {
 	display:none;
 }
-fieldset:not(.plain) > legend {
+fieldset:not(.plain) > legend:not(:empty) {
 	padding-left:0.1em;
 	padding-right:0.2em;
 }

package/ui/fieldset.js

@@ -10,12 +10,13 @@ class HTMLCustomFieldSetElement extends HTMLFieldSetElement {
 
 	#update() {
 		if (this.isContentEditable || !this.options.name) return;
-		const name = this.options.name.split(".").slice(1).join('.');
-		const val = this.form?.read(true)?.[name];
+		const val = this.form?.read(true)?.[this.options.name];
 		this.disabled = this.hidden = val != this.options.value;
 	}
 
 	patch(state) {
+		// before/after form#fill
+		this.#update();
 		state.finish(() => this.#update());
 	}
 	setup() {

package/ui/form.js

@@ -43,18 +43,20 @@ class HTMLCustomFormElement extends HTMLFormElement {
 		const fd = new FormData(this);
 		const query = {};
 		fd.forEach((val, key) => {
-			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 == null ? [] : [old];
+				if (old == null) {
+					if (val == null) {
+						// keep it that way
+					} else {
+						query[key] = [];
+					}
+				} else if (val != null) {
+					if (!Array.isArray(old)) query[key] = [old];
+					query[key].push(val);
 				}
-				if (val !== undefined) query[key].push(val);
 			} else {
 				query[key] = val;
 			}
@@ -73,6 +75,9 @@ class HTMLCustomFormElement extends HTMLFormElement {
 			if (defVal == "") defVal = null;
 
 			switch (type) {
+				case "file":
+					query[name] = val;
+					break;
 				case "radio":
 					if (!withDefaults && node.checked == node.defaultChecked) {
 						if (query[name] == val) {
@@ -119,9 +124,16 @@ class HTMLCustomFormElement extends HTMLFormElement {
 			if (name in query && !vars.includes(name)) vars.push(name);
 			const val = query[name];
 			const str = ((v) => {
-				if (v == null) return "";
-				else if (typeof v == "object") return v;
-				else return v.toString();
+				if (v == null) {
+					return "";
+				} else if (Array.isArray(v)) {
+					if (["radio", "checkbox"].includes(elem.type)) return v;
+					else return v.shift();
+				} else if (typeof v == "object") {
+					return v;
+				} else {
+					return v.toString();
+				}
 			})(val);
 			switch (elem.type) {
 				case 'submit':
@@ -159,11 +171,17 @@ class HTMLCustomFormElement extends HTMLFormElement {
 		return vars;
 	}
 	save() {
+		for (const node of this.querySelectorAll("element-fieldset-list")) {
+			node.save();
+		}
 		for (const node of this.elements) {
 			if (node.save) node.save();
 		}
 	}
 	reset() {
+		for (const node of this.querySelectorAll("element-fieldset-list")) {
+			node.reset();
+		}
 		for (const node of this.elements) {
 			if (node.reset) node.reset();
 		}

package/ui/input-date-slot.js

@@ -29,11 +29,14 @@ class HTMLElementInputDateSlot extends VirtualHTMLElement {
 		const [startEl, endEl] = this.#inputs();
 		const isStart = input == startEl;
 
-		let start = startEl.valueAsDate;
+		const start = startEl.valueAsDate;
 		let end = endEl.valueAsDate;
 		if (!start && !end) return;
-		if (!start) start = new Date(end);
-		else if (!end) end = new Date(start);
+		if (!start) {
+			endEl.valueAsDate = null;
+			return;
+		}
+		if (!end) end = new Date(start);
 		let startPart, endPart;
 		let equal = true;
 		for (const Part of ['FullYear', 'Month', 'Date', 'Hours', 'Minutes', 'Seconds']) {

package/ui/input-date.js

@@ -26,7 +26,7 @@ class HTMLElementInputDate extends HTMLInputElement {
 		return d;
 	}
 	set valueAsDate(d) {
-		let t = d.getTime();
+		let t = d?.getTime();
 		if (!d || Number.isNaN(t)) {
 			super.value = "";
 			return;

package/ui/input-range.js

@@ -16,11 +16,12 @@ class HTMLElementInputRange extends HTMLInputElement {
 		max: (x) => parseFloat(x) || 100,
 		value: (x) => this.parse(x),
 		step: (x) => parseFloat(x) || 1,
-		multiple: true,
-		pips: true,
+		multiple: false,
+		pips: false
 	};
 
 	get helper() {
+		if (!this.parentNode) return null;
 		let node = this.parentNode.querySelector('.noUi-target');
 		if (!node) {
 			node = this.ownerDocument.createElement('div');
@@ -43,19 +44,35 @@ class HTMLElementInputRange extends HTMLInputElement {
 		this.rangeValue = this.constructor.parse(str);
 		this.updateSlider();
 	}
+	convertOptions(opts) {
+		return {
+			step: Math.max(opts.step ?? 10, Math.round((opts.max - opts.min) / 10)),
+			range: {
+				min: opts.min ?? 0,
+				max: opts.max ?? 100
+			},
+			pips: opts.pips ? {
+				mode: 'steps',
+				density: 100
+			} : false,
+		};
+	}
 	updateSlider() {
 		const helper = this.helper;
-		if (!helper.noUiSlider) return;
-		let [start, stop] = this.options.value || [];
+		const slider = helper?.noUiSlider;
+		if (!slider) return;
+		const opts = this.options;
+		let [start, stop] = opts.value || [];
 		let indet = false;
 		if (start == null) {
-			start = this.options.min;
-			if (stop == null) stop = this.options.max;
+			start = opts.min;
+			if (stop == null) stop = opts.max;
 			indet = true;
 		}
 		if (stop == null) stop = start;
 
-		helper.noUiSlider.set([start, stop]);
+		slider.set([start, stop]);
+		slider.updateOptions(this.convertOptions(opts));
 		helper.classList.toggle('indeterminate', indet);
 	}
 	patch(state) {
@@ -64,19 +81,12 @@ class HTMLElementInputRange extends HTMLInputElement {
 	setup(state) {
 		const opts = this.options;
 		const helper = this.helper;
-		if (!helper.noUiSlider) window.noUiSlider.create(helper, {
+		if (!helper) return;
+		if (!helper.noUiSlider) window.noUiSlider.create(helper, Object.assign({
 			start: opts.multiple ? [null, null] : [null],
-			step: opts.step,
-			range: {
-				min: opts.min,
-				max: opts.max
-			},
-			pips: opts.pips ? {
-				mode: 'steps',
-				density: 100
-			} : false,
 			connect: true
-		}).on('change', (values) => {
+		}, this.convertOptions(opts))).on('change', (values) => {
+			if (this.isContentEditable) return;
 			const isInt = parseInt(opts.step) == opts.step;
 			helper.classList.remove('indeterminate');
 			if (isInt) values = values.map((n) => parseInt(n));
@@ -91,6 +101,7 @@ class HTMLElementInputRange extends HTMLInputElement {
 		this.patch(state);
 	}
 	handleEvent(e) {
+		if (this.isContentEditable) return;
 		if (e.type == "dblclick" || e.keyCode == 8 || e.keyCode == 46) {
 			this.fill();
 			this.dispatchEvent(new Event('change', {
@@ -102,6 +113,7 @@ class HTMLElementInputRange extends HTMLInputElement {
 
 	close() {
 		const helper = this.helper;
+		if (!helper) return;
 		if (helper.noUiSlider) helper.noUiSlider.destroy();
 		helper.removeEventListener('keydown', this, true);
 		helper.removeEventListener('dblclick', this, true);

package/ui/menu.css

@@ -45,14 +45,17 @@
 	display: flex;
 	flex-direction: column;
 }
+.right.burger .popup.item > .placer {
+	left: auto;
+	right:0;
+}
 .right.popup.item > .placer > div {
 	left:auto;
 	right:0;
 }
 .fixed.popup.item > .placer > div {
-	position:fixed;
-	max-width: 100%;
-	max-height: 100%;
+	max-width: 100vw;
+	max-height: 100vh;
 }
 .center.popup.item > .placer > div {
 	transform: translateX(-50%);

package/ui/menu.js

@@ -57,7 +57,7 @@ class HTMLElementMenu extends VirtualHTMLElement {
 			} else {
 				const padding = this.offsetTop + this.offsetHeight;
 				const menu = tosser.lastElementChild.lastElementChild;
-				menu.style.maxHeight = `calc(100% - ${padding}px)`;
+				menu.style.maxHeight = `calc(100vh - ${padding}px)`;
 			}
 		} else if (item) {
 			this.active = item != this.active ? item : null;