@pageboard/html 0.14.11 → 0.14.13

package/elements/fieldsets.js

@@ -5,31 +5,38 @@ exports.fieldset = {
 	group: 'block',
 	context: 'form//',
 	properties: {
+		plain: {
+			title: 'Plain',
+			description: 'Without legend or borders',
+			type: 'boolean',
+			default: false
+		},
 		name: {
-			title: 'Show if input[name]',
+			title: 'When input named',
 			type: 'string',
 			format: 'singleline',
 			nullable: true,
 			$helper: 'form-element'
 		},
+		op: {
+			title: 'Condition',
+			anyOf: [{
+				const: 'eq',
+				title: 'is equal to'
+			}, {
+				const: 'neq',
+				title: 'is not equal to'
+			}],
+			default: 'eq'
+		},
 		value: {
-			title: 'matches this value',
+			title: 'Value',
 			type: 'string',
-			format: 'singleline',
-			$filter: {
-				name: 'element-value',
-				using: 'name'
-			}
-		},
-		plain: {
-			title: 'Plain',
-			description: 'Without legend or borders',
-			type: 'boolean',
-			default: false
+			format: 'singleline'
 		}
 	},
 	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]" data-op="[op]" data-value="[value]" is="element-fieldset"></fieldset>',
 	scripts: ["../ui/fieldset.js"],
 	stylesheets: ['../ui/fieldset.css']
 };
@@ -42,11 +49,11 @@ exports.fieldset_legend = {
 
 exports.fieldset_list = {
 	title: 'Field List',
+	priority: 2, // after template
 	menu: "form",
 	icon: '<i class="icons"><i class="folder outline icon"></i><i class="corner add icon"></i></i>',
 	group: 'block template',
 	context: 'form//',
-	priority: 0,
 	properties: {
 		min: {
 			title: 'Min items',

package/elements/pagination.js

@@ -9,7 +9,7 @@ exports.pagination = {
 		fetch: {
 			title: 'Fetch block',
 			type: 'string',
-			format: 'id', // FIXME this cannot work because fetch id changes on copy
+			format: 'id',
 			$filter: {
 				name: 'action',
 				action: 'read'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.14.11",
+  "version": "0.14.13",
   "description": "",
   "main": "index.js",
   "repository": {

package/ui/fieldset-list.js

@@ -6,12 +6,14 @@ class HTMLElementFieldsetList extends Page.Element {
 
 	fill(values) {
 		if (this.isContentEditable || this.prefix == null) return;
+		const vars = [];
 		for (const [key, val] of Object.entries(values)) {
 			const parts = this.#prefixed(key);
 			if (!parts) continue;
 			if (parts.length == 1 && Number.isInteger(Number(parts[0])) && Array.isArray(val)) {
 				console.warn("fielset-list should receive flat lists", key, val);
 			} else if (parts.length == 0 && Array.isArray(val)) {
+				vars.push(key);
 				for (let i = 0; i < val.length; i++) {
 					values[key + '.' + i] = val[i];
 				}
@@ -21,6 +23,7 @@ class HTMLElementFieldsetList extends Page.Element {
 		this.#list = this.#listFromValues({ ...values });
 		if (this.#defaultList == null) this.save();
 		this.#resize();
+		return vars;
 	}
 
 	reset() {

package/ui/fieldset.css

@@ -7,6 +7,7 @@ fieldset:not(.plain) {
 }
 fieldset.plain {
 	padding:0;
+	margin: 0;
 }
 fieldset.plain > legend {
 	display:none;

package/ui/fieldset.js

@@ -1,14 +1,21 @@
 class HTMLElementFieldSet extends Page.create(HTMLFieldSetElement) {
 	static defaults = {
 		dataName: null,
+		dataOp: null,
 		dataValue: null
 	};
 
+	#compare(to) {
+		const { value } = this.options;
+		if (this.options.op == "neq") return value != to;
+		else return value == to;
+	}
+
 	fill(query) {
 		if (this.isContentEditable || !this.options?.name || !this.form) return;
 		if (!query) query = this.form.read(true);
 		const val = query[this.options.name];
-		const disabled = this.disabled = this.hidden = val != this.options.value;
+		const disabled = this.disabled = this.hidden = !this.#compare(val);
 		for (const node of this.querySelectorAll('[name]')) {
 			node.disabled = disabled;
 		}

package/ui/form.js

@@ -194,7 +194,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 		// fieldset-list are not custom inputs yet
 		const vars = [];
 		for (const node of this.querySelectorAll("element-fieldset-list")) {
-			node?.fill(query);
+			if (node.fill) vars.push(...node.fill(query));
 		}
 
 		for (const elem of this.elements) {

package/ui/select.css

@@ -5,6 +5,9 @@ element-select.ui.multiple.dropdown > .label {
 	vertical-align: baseline;
 	line-height: inherit;
 }
+element-select[disabled] {
+	pointer-events: none;
+}
 
 [contenteditable] .ui.dropdown[block-focused] > .menu {
 	overflow: visible;

package/ui/select.js

@@ -59,6 +59,7 @@ class HTMLElementSelect extends Page.Element {
 
 	handleClick(e, state) {
 		if (state.scope.$write) return;
+		if (this.disabled) return;
 		const node = e.target;
 		const item = node.closest('element-select .item');
 		if (item) {