@pageboard/html 0.10.5 → 0.10.9

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;
@@ -65,7 +66,9 @@ exports.input_property = {
 				prop = cases[propKey];
 				cases = null;
 			} else {
-				cases = prop.selectCases;
+				if (prop.select && prop.select.$data == `0/${propKey}`) {
+					cases = prop.selectCases;
+				}
 				prop = (prop.properties || {})[propKey] || null;
 			}
 			if (prop == null) break;
@@ -75,8 +78,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) {
@@ -85,7 +94,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)) {
@@ -104,7 +113,6 @@ exports.input_property = {
 				listOf = null; // cannot deal with this for now
 			}
 		}
-		if (!propType) propType = prop;
 
 		if (listOf) {
 			if (listOf.length <= d.radios) {
@@ -124,7 +132,7 @@ 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',
 						data: {
 							name: name,
 							value: item.type == "null" ? null : item.const,
@@ -149,10 +157,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
@@ -163,20 +172,22 @@ exports.input_property = {
 					}
 				}));
 			}
-		} else if (propType.type == "integer") {
+		} else if (propType.type == "integer" || propType.type == "number") {
+			const step = propType.multipleOf || (propType.type == "integer" ? 1 : 0.001);
 			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,
-							step: 1
+							multiple: multiple,
+							step: step
 						},
 						content: {
 							label: prop.title
@@ -185,13 +196,16 @@ exports.input_property = {
 				}
 			}
 			node.appendChild(view.render({
-				type: 'input_text',
+				id,
+				type: 'input_number',
 				data: {
 					name: name,
-					type: 'number',
 					default: propType.default,
 					disabled: d.disabled,
-					required: required
+					required: required,
+					min: propType.minimum,
+					max: propType.maximum,
+					step: step
 				},
 				content: {
 					label: prop.title
@@ -199,6 +213,7 @@ exports.input_property = {
 			}));
 		} else if (propType.type == "boolean") {
 			node.appendChild(view.render({
+				id,
 				type: 'input_checkbox',
 				data: {
 					name: name,
@@ -211,8 +226,13 @@ exports.input_property = {
 				}
 			}));
 		} else if (propType.type == "string" && propType.format == "date") {
+			let type = "input_date_time";
+			if (!scope.$elements[type]) {
+				type = 'input_text';
+			}
 			node.appendChild(view.render({
-				type: 'input_date_time',
+				id,
+				type: type,
 				data: {
 					name: name,
 					type: propType.format,
@@ -226,8 +246,13 @@ exports.input_property = {
 				}
 			}));
 		} else if (propType.type == "string" && propType.format == "time") {
+			let type = "input_date_time";
+			if (!scope.$elements[type]) {
+				type = 'input_text';
+			}
 			node.appendChild(view.render({
-				type: 'input_date_time',
+				id,
+				type: type,
 				data: {
 					name: name,
 					type: propType.format,
@@ -240,14 +265,42 @@ exports.input_property = {
 					label: prop.title
 				}
 			}));
+		} else if (propType.$helper && propType.$helper.name == "href") {
+			const limits = {
+				files: multiple ? null : 1
+			};
+			const filter = propType.$helper.filter;
+			if (filter && filter.type) {
+				limits.types = filter.type.map((type) => {
+					if (type == "image") return "image/*";
+					else if (type == "video") return "video/*";
+					else return "*/*";
+				});
+			}
+			node.appendChild(view.render({
+				id,
+				type: 'input_file',
+				data: {
+					name: name,
+					disabled: d.disabled,
+					placeholder: propType.description,
+					required: required,
+					limits: limits
+				},
+				content: {
+					label: prop.title
+				}
+			}));
 		} else {
 			node.appendChild(view.render({
+				id,
 				type: 'input_text',
 				data: {
 					name: name,
-					type: propType.format == 'singleline' ? 'text' : 'textarea',
+					type: (propType.pattern || propType.format) ? 'text' : 'textarea',
 					disabled: d.disabled,
 					default: propType.default,
+					placeholder: propType.description,
 					required: required
 				},
 				content: {

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 = {
@@ -152,8 +172,8 @@ exports.input_text = {
 				const: "tel",
 				title: "Tel"
 			}, {
-				const: "number",
-				title: "Number"
+				// deprecated, use input_number or input_range
+				const: "number"
 			}, {
 				const: "hidden",
 				title: "Hidden"
@@ -203,60 +223,71 @@ exports.input_text = {
 	</div>`
 };
 
-exports.input_range = {
-	title: 'Range',
-	icon: '<i class="options icon"></i>',
+exports.input_number = {
+	title: 'Number',
+	icon: '<i class="text cursor icon"></i>',
 	menu: "form",
+	required: ["name"],
 	group: "block",
 	context: 'form//',
 	properties: {
-		name: {
-			title: "Name",
-			description: "The form object key",
-			type: "string",
-			format: "singleline"
-		},
-		disabled: {
-			title: 'Disabled',
-			type: 'boolean',
-			default: false
-		},
-		required: {
-			title: 'Required',
-			type: 'boolean',
-			default: false
-		},
-		multiple: {
-			title: 'Multiple',
-			type: 'boolean',
-			default: false
-		},
-		value: {
-			title: "Value",
-			type: "number",
-			nullable: true
-		},
+		name: exports.input_text.properties.name,
+		disabled: exports.input_text.properties.disabled,
+		required: exports.input_text.properties.required,
+		value: exports.input_text.properties.value,
 		min: {
 			title: 'Minimum value',
 			type: "number",
-			default: 0
+			nullable: true
 		},
 		max: {
 			title: 'Maximum value',
 			type: "number",
-			default: 100
+			nullable: true
 		},
 		step: {
 			title: 'Step',
 			type: "number",
-			default: 1
+			default: 0.001
+		}
+	},
+	contents: {
+		id: 'label',
+		nodes: 'inline*'
+	},
+	html: `<div class="[width|num: wide] field">
+		<label block-content="label">Label</label>
+		<input name="[name]"
+			required="[required]"
+			readonly="[readonly]"
+			disabled="[disabled]"
+			placeholder="[placeholder]"
+			type="number"
+			value="[value]"
+			min="[minimum]"
+			max="[maximum]"
+			step="[step]"
+	</div>`
+};
+
+exports.input_range = {
+	title: 'Range',
+	icon: '<i class="options icon"></i>',
+	menu: "form",
+	group: "block",
+	context: 'form//',
+	properties: Object.assign({
+		multiple: {
+			title: 'Multiple',
+			type: 'boolean',
+			default: false
 		},
 		pips: {
 			title: 'Pips',
 			type: 'boolean',
 			default: true
 		}
-	},
+	}, exports.input_number.properties),
 	contents: {
 		id: 'label',
 		nodes: 'inline*'

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.5",
+  "version": "0.10.9",
   "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;
 		}