@pageboard/html 0.14.11 → 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.11",
+  "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/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) {