@pageboard/html 0.10.6 → 0.10.10

package/elements/form-input-property.js

@@ -54,6 +54,7 @@ exports.input_property = {
 		// /.api/form wraps it into block.data
 		list.shift();
 		name = list.join('.');
+		const id = scope.$id;
 		let prop = el;
 		let propKey;
 		let required = false;
@@ -63,6 +64,7 @@ exports.input_property = {
 			required = prop.required && prop.required.indexOf(propKey) >= 0;
 			if (cases) {
 				prop = cases[propKey];
+				name = list.slice(0, i - 1).concat(list.slice(i + 1)).join('.');
 				cases = null;
 			} else {
 				if (prop.select && prop.select.$data == `0/${propKey}`) {
@@ -77,8 +79,14 @@ exports.input_property = {
 		}
 		node.textContent = "";
 		if (prop.nullable) required = false;
-		let listOf = prop.anyOf || prop.oneOf;
-		let propType;
+		let propType = prop;
+		let multiple = d.multiple;
+		if (prop.type == "array" && prop.items && Array.isArray(prop.items) == false) {
+			propType = prop.items;
+			multiple = true;
+		}
+
+		let listOf = propType.anyOf || propType.oneOf;
 		if (listOf) {
 			const listOfNo = listOf.filter((item) => item.type != "null");
 			if (listOfNo.length != listOf.length) {
@@ -87,7 +95,7 @@ exports.input_property = {
 			if (listOfNo.length == 1 && listOfNo[0].const === undefined) {
 				propType = listOfNo[0];
 				listOf = null;
-			} else if (d.multiple) {
+			} else if (multiple) {
 				listOf = listOfNo;
 			}
 		} else if (Array.isArray(prop.type)) {
@@ -106,7 +114,6 @@ exports.input_property = {
 				listOf = null; // cannot deal with this for now
 			}
 		}
-		if (!propType) propType = prop;
 
 		if (listOf) {
 			if (listOf.length <= d.radios) {
@@ -126,7 +133,8 @@ exports.input_property = {
 				content = content.lastElementChild;
 				for (const item of listOf) {
 					content.appendChild(view.render({
-						type: d.multiple ? 'input_checkbox' : 'input_radio',
+						type: multiple ? 'input_checkbox' : 'input_radio',
+						id,
 						data: {
 							name: name,
 							value: item.type == "null" ? null : item.const,
@@ -151,10 +159,11 @@ exports.input_property = {
 					}));
 				}
 				node.appendChild(view.render({
+					id,
 					type: 'input_select',
 					data: {
 						name: name,
-						multiple: d.multiple,
+						multiple: multiple,
 						placeholder: prop.description,
 						disabled: d.disabled,
 						required: required
@@ -170,15 +179,16 @@ exports.input_property = {
 			if (propType.minimum != null && propType.maximum != null) {
 				if (propType.maximum - propType.minimum <= d.range) {
 					return node.appendChild(view.render({
+						id,
 						type: 'input_range',
 						data: {
 							name: name,
 							min: propType.minimum,
 							max: propType.maximum,
-							value: d.multiple ? `${propType.minimum}⩽${propType.maximum}` : propType.default,
+							value: multiple ? `${propType.minimum}⩽${propType.maximum}` : propType.default,
 							disabled: d.disabled,
 							required: required,
-							multiple: d.multiple,
+							multiple: multiple,
 							step: step
 						},
 						content: {
@@ -188,6 +198,7 @@ exports.input_property = {
 				}
 			}
 			node.appendChild(view.render({
+				id,
 				type: 'input_number',
 				data: {
 					name: name,
@@ -204,6 +215,7 @@ exports.input_property = {
 			}));
 		} else if (propType.type == "boolean") {
 			node.appendChild(view.render({
+				id,
 				type: 'input_checkbox',
 				data: {
 					name: name,
@@ -221,6 +233,7 @@ exports.input_property = {
 				type = 'input_text';
 			}
 			node.appendChild(view.render({
+				id,
 				type: type,
 				data: {
 					name: name,
@@ -240,6 +253,7 @@ exports.input_property = {
 				type = 'input_text';
 			}
 			node.appendChild(view.render({
+				id,
 				type: type,
 				data: {
 					name: name,
@@ -255,7 +269,7 @@ exports.input_property = {
 			}));
 		} else if (propType.$helper && propType.$helper.name == "href") {
 			const limits = {
-				files: d.multiple ? null : 1
+				files: multiple ? null : 1
 			};
 			const filter = propType.$helper.filter;
 			if (filter && filter.type) {
@@ -266,6 +280,7 @@ exports.input_property = {
 				});
 			}
 			node.appendChild(view.render({
+				id,
 				type: 'input_file',
 				data: {
 					name: name,
@@ -280,10 +295,11 @@ exports.input_property = {
 			}));
 		} else {
 			node.appendChild(view.render({
+				id,
 				type: 'input_text',
 				data: {
 					name: name,
-					type: propType.format ? 'text' : 'textarea',
+					type: (propType.pattern || propType.format) ? 'text' : 'textarea',
 					disabled: d.disabled,
 					default: propType.default,
 					placeholder: propType.description,

package/elements/form-inputs.js

@@ -5,6 +5,25 @@ exports.fieldset = {
 	group: 'block',
 	context: 'form//',
 	properties: {
+		name: {
+			title: 'Show if input named',
+			type: 'string',
+			format: 'singleline',
+			nullable: true,
+			$helper: {
+				name: 'element-property',
+				existing: true
+			}
+		},
+		value: {
+			title: 'matches this value',
+			type: 'string',
+			format: 'singleline',
+			$filter: {
+				name: 'element-value',
+				using: 'name'
+			}
+		},
 		plain: {
 			title: 'Without borders',
 			type: 'boolean',
@@ -12,7 +31,8 @@ exports.fieldset = {
 		}
 	},
 	contents: "fieldset_legend block+",
-	html: '<fieldset class="[plain|?]"></fieldset>'
+	html: '<fieldset class="[plain|?]" data-name="[name]" data-value="[value]" is="element-fieldset"></fieldset>',
+	scripts: ["../ui/fieldset.js"]
 };
 
 exports.fieldset_legend = {
@@ -204,8 +224,8 @@ exports.input_text = {
 };
 
 exports.input_number = {
-	title: 'Number input',
-	icon: '<i class="text cursor icon">n</i>',
+	title: 'Number',
+	icon: '<i class="text cursor icon"></i>',
 	menu: "form",
 	required: ["name"],
 	group: "block",
@@ -339,8 +359,8 @@ exports.input_checkbox = {
 		<div class="ui [toggle|?] checkbox">
 			<input type="checkbox" required="[required]" disabled="[disabled]"
 				name="[name]" value="[value]" checked="[checked]"
-				id="for-[name][value|or:|pre:-]" />
-			<label block-content="label" for="for-[name][value|or:|pre:-]">Label</label>
+				id="for-[name][value|or:|pre:-]-[$id|slice:0:6]" />
+			<label block-content="label" for="for-[name][value|or:|pre:-]-[$id|slice:0:6]">Label</label>
 		</div>
 	</div>`,
 	stylesheets: [
@@ -385,8 +405,8 @@ exports.input_radio = {
 		<div class="ui radio checkbox">
 			<input type="radio" disabled="[disabled]"
 				name="[name]" value="[value|or:]" checked="[checked]"
-				id="for-[name][value|or:|pre:-]" />
-			<label block-content="label" for="for-[name][value|or:|pre:-]">Label</label>
+				id="for-[name][value|or:|pre:-]-[$id|slice:0:6]" />
+			<label block-content="label" for="for-[name][value|or:|pre:-]-[$id|slice:0:6]">Label</label>
 		</div>
 	</div>`,
 	stylesheets: [

package/elements/form.js

@@ -17,7 +17,7 @@ exports.query_form = {
 			description: 'Checks schema and helps adding form controls',
 			nullable: true,
 			type: 'string',
-			format: 'id',
+			format: 'name',
 			$filter: {
 				name: 'element',
 				contentless: true,

package/elements/paragraph.js

@@ -128,7 +128,7 @@ exports.heading = {
 		id: {
 			nullable: true,
 			type: 'string',
-			format: 'id'
+			pattern: '^[a-z0-9-]*$'
 		}
 	},
 	contents: {

package/lib/nouislider.css

@@ -38,20 +38,14 @@
   z-index: 1;
   top: 0;
   right: 0;
+  height: 100%;
+  width: 100%;
   -ms-transform-origin: 0 0;
   -webkit-transform-origin: 0 0;
   -webkit-transform-style: preserve-3d;
   transform-origin: 0 0;
   transform-style: flat;
 }
-.noUi-connect {
-  height: 100%;
-  width: 100%;
-}
-.noUi-origin {
-  height: 10%;
-  width: 10%;
-}
 /* Offset direction
  */
 .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
@@ -62,6 +56,7 @@
  * connect elements.
  */
 .noUi-vertical .noUi-origin {
+  top: -100%;
   width: 0;
 }
 .noUi-horizontal .noUi-origin {
@@ -102,7 +97,7 @@
   width: 28px;
   height: 34px;
   right: -6px;
-  top: -17px;
+  bottom: -17px;
 }
 .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
   left: -17px;

package/lib/nouislider.js

@@ -281,17 +281,8 @@
             }
         }
         Spectrum.prototype.getDistance = function (value) {
-            var index;
             var distances = [];
-            for (index = 0; index < this.xNumSteps.length - 1; index++) {
-                // last "range" can't contain step size as it is purely an endpoint.
-                var step = this.xNumSteps[index];
-                if (step && (value / step) % 1 !== 0) {
-                    throw new Error("noUiSlider: 'limit', 'margin' and 'padding' of " +
-                        this.xPct[index] +
-                        "% range must be divisible by step.");
-                }
-                // Calculate percentual distance in current range of limit, margin or padding
+            for (var index = 0; index < this.xNumSteps.length - 1; index++) {
                 distances[index] = fromPercentage(this.xVal, value, index);
             }
             return distances;
@@ -1896,7 +1887,7 @@
             scope_Locations[handleNumber] = to;
             // Convert the value to the slider stepping/range.
             scope_Values[handleNumber] = scope_Spectrum.fromStepping(to);
-            var translation = 10 * (transformDirection(to, 0) - scope_DirOffset);
+            var translation = transformDirection(to, 0) - scope_DirOffset;
             var translateRule = "translate(" + inRuleOrder(translation + "%", "0") + ")";
             scope_Handles[handleNumber].style[options.transformRule] = translateRule;
             updateConnect(handleNumber);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.10.6",
+  "version": "0.10.10",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -19,14 +19,14 @@
   },
   "homepage": "https://github.com/pageboard/client#readme",
   "dependencies": {
-    "postinstall": "^0.7.3",
+    "postinstall": "^0.7.4",
     "semantic-ui-css": "^2.4.1"
   },
   "devDependencies": {
-    "formdata-polyfill": "^4.0.7",
-    "nouislider": "^15.4.0",
+    "formdata-polyfill": "^4.0.10",
+    "nouislider": "^15.5.0",
     "object-fit-images": "^3.2.4",
-    "postinstall-bundle": "^0.7.3"
+    "postinstall-bundle": "^0.7.4"
   },
   "postinstall": {
     "semantic-ui-css/components": "link lib/components",

package/ui/fieldset.js

@@ -0,0 +1,36 @@
+class HTMLCustomFieldSetElement extends HTMLFieldSetElement {
+	static defaults = {
+		dataName: null,
+		dataValue: null
+	};
+	constructor() {
+		super();
+		this.init?.();
+	}
+
+	#update() {
+		if (this.isContentEditable || !this.options.name) return;
+		const name = this.options.name.split(".").slice(1).join('.');
+		const val = this.form?.read(true)?.[name];
+		this.disabled = this.hidden = val != this.options.value;
+	}
+
+	patch() {
+		this.#update();
+	}
+	setup() {
+		this.form?.addEventListener('change', this);
+	}
+	close() {
+		this.form?.removeEventListener('change', this);
+	}
+	handleEvent(e) {
+		if (e.type == "change") {
+			this.#update();
+		}
+	}
+}
+
+Page.ready(() => {
+	VirtualHTMLElement.define(`element-fieldset`, HTMLCustomFieldSetElement, 'fieldset');
+});

package/ui/form.js

@@ -87,6 +87,8 @@ class HTMLCustomFormElement extends HTMLFormElement {
 			}
 		}
 		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;
 		}

package/ui/select.js

@@ -100,11 +100,15 @@ class HTMLElementSelect extends VirtualHTMLElement {
 	}
 	#setPlaceholder(str) {
 		const text = this.#text;
-		text.textContent = str || this.options.placeholder;
-		text.classList.add('default');
+		if (!str) str = this.options.placeholder;
 
 		const defaultOption = this.#select.querySelector('option[value=""]');
-		if (defaultOption) defaultOption.innerHTML = str || "-";
+		if (defaultOption) {
+			if (!str) str = defaultOption.innerHTML;
+			else defaultOption.innerHTML = str;
+		}
+		text.textContent = str;
+		text.classList.add('default');
 	}
 
 	#menuOption(val) {
@@ -124,11 +128,13 @@ class HTMLElementSelect extends VirtualHTMLElement {
 		const select = this.#select;
 		if (!select) return;
 		const menu = this.#menu;
-		select.innerHTML = '<option selected value="">-</option>';
-		menu.children.forEach(item => select.insertAdjacentHTML(
-			'beforeEnd',
-			`<option value="${item.dataset.value || item.innerText.trim()}">${item.innerHTML}</option>`
-		));
+		menu.children.forEach(item => {
+			const val = item.dataset.value || item.innerText != "-" && item.innerText.trim() || "";
+			select.insertAdjacentHTML(
+				'beforeEnd',
+				`<option value="${val}">${item.innerHTML}</option>`
+			);
+		});
 	}
 	setup(state) {
 		this.#observer = new MutationObserver((mutations) => this.#fillSelect());
@@ -154,6 +160,12 @@ class HTMLElementSelect extends VirtualHTMLElement {
 			for (const node of this.querySelectorAll('.ui.label')) node.remove();
 		}
 		select.name = this.options.name;
+		if (!select.required) {
+			const menu = this.#menu;
+			if (!menu.querySelector('element-select-option[data-value=""]')) {
+				menu.insertAdjacentHTML('afterBegin', `<element-select-option data-value="" block-type="input_select_option" class="item">-</element-select-option>`);
+			}
+		}
 		this.#fillSelect();
 	}