@pageboard/html 0.14.10 → 0.14.12

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']
 };

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.10",
+  "version": "0.14.12",
   "description": "",
   "main": "index.js",
   "repository": {

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

@@ -19,40 +19,6 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 	}
 
 	static patch(state) {
-		state.scope.$filters.form = (ctx, val, action, name) => {
-			const form = name
-				? document.querySelector(`form[name="${name}"]`)
-				: ctx.dest.node.closest('form');
-			if (!form) {
-				// eslint-disable-next-line no-console
-				console.warn("No parent form found");
-				return val;
-			}
-			if (action == "toggle") {
-				action = val ? "enable" : "disable";
-			}
-			const isQuery = ctx.expr.path[0] == "$query" && ctx.expr.path.length == 1;
-
-			state.finish(() => {
-				if (action == "enable") {
-					form.enable?.();
-				} else if (action == "disable") {
-					form.disable?.();
-				} else if (action == "fill") {
-					if (val == null) {
-						form.reset?.();
-					} else if (typeof val == "object") {
-						const vars = form.fill?.(this.linearizeValues(val), state.scope) ?? [];
-						if (isQuery) {
-							for (const name of vars) state.vars[name] = true;
-						}
-						form.save?.();
-					}
-				}
-			});
-
-			return val;
-		};
 		state.finish(() => {
 			let index = 0;
 			for (const node of document.querySelectorAll('label[for]')) {

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) {