@pageboard/html 0.12.12 → 0.12.14

package/elements/embed.js

@@ -40,8 +40,8 @@ exports.embed = {
 		};
 	},
 	tag: 'iframe,element-embed',
-	html: `<element-embed data-src="[url]" data-query="[query|as:query]" id="[id]">
-		<a aria-hidden="true" class="linkable" href="[$loc.pathname][$loc.search][id|pre:%23]">[linkable|prune:*]#</a>
+	html: `<element-embed data-src="[url|url:query:query]" id="[id]">
+		<a aria-hidden="true" class="linkable" href="[$loc|as:url|set:hash:[id]]">[linkable|prune:*]#</a>
 		<iframe loading="lazy" allowfullscreen frameborder="0" scrolling="no"></iframe>
 	</element-embed>`,
 	scripts: [

package/elements/form.js

@@ -47,7 +47,7 @@ exports.query_form = {
 	contents: 'block+',
 	tag: 'form[method="get"]',
 	html: `<form is="element-form" method="get" name="[name]"
-		action="[redirection|urltpl:url:parameters]"
+		action="[redirection.url][redirection.parameters|as:query]"
 		autocomplete="off" class="ui form"></form>`,
 	stylesheets: [
 		'../lib/components/form.css',

package/elements/inputs.js

@@ -346,18 +346,13 @@ exports.input_radio = {
 			format: "singleline",
 			$helper: 'element-property'
 		},
-		checked: {
-			title: "Checked",
-			type: "boolean",
-			default: false
-		},
 		value: {
 			title: "Value",
 			type: "string",
 			format: "singleline"
 		},
-		disabled: {
-			title: "Disabled",
+		checked: {
+			title: "Checked",
 			type: "boolean",
 			default: false
 		},
@@ -365,14 +360,25 @@ exports.input_radio = {
 			title: 'Required',
 			type: 'boolean',
 			default: false
+		},
+		disabled: {
+			title: "Disabled",
+			type: "boolean",
+			default: false
+		},
+		button: {
+			title: 'Button',
+			description:'hide radio toggle opacity',
+			type: "boolean",
+			default: false
 		}
 	},
 	contents: {
 		id: 'label',
 		nodes: 'inline*'
 	},
-	html: `<div class="field">
-		<div class="ui radio checkbox">
+	html: `<div class="field [button]">
+		<div class="ui radio [button|alt::checkbox]">
 			<input type="radio" disabled="[disabled]" required="[required]"
 				name="[name]" value="[value|or:]" checked="[checked]"
 				id="for-[name][value|pre:-]" />
@@ -380,7 +386,8 @@ exports.input_radio = {
 		</div>
 	</div>`,
 	stylesheets: [
-		'../lib/components/checkbox.css'
+		'../lib/components/checkbox.css',
+		'../ui/input_radio.css'
 	]
 };
 

package/elements/layout.js

@@ -58,6 +58,19 @@ exports.layout = {
 				title: "Row"
 			}]
 		},
+		wrap: {
+			title: 'Wrap',
+			anyOf: [{
+				type: 'null',
+				title: 'No wrap'
+			}, {
+				const: 'wrap',
+				title: 'Wrap'
+			}, {
+				const: 'wrap-reverse',
+				title: 'Reverse'
+			}]
+		},
 		width: {
 			title: 'Width',
 			anyOf: [{
@@ -293,6 +306,7 @@ exports.layout = {
 		[width|switch:full:fullwidth:contained:ui container]
 		[horizontal]
 		[vertical]
+		[wrap]
 		[direction]
 		[background.invert|alt:inverted]"
 		is="element-layout"

package/package.json

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

package/ui/embed.js

@@ -1,7 +1,6 @@
 class HTMLElementEmbed extends Page.Element {
 	static defaults = {
 		src: null,
-		query: null,
 		hash: null
 	};
 	static revealRatio = 0.2;

package/ui/form.js

@@ -41,17 +41,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 					if (val == null) {
 						form.reset();
 					} else if (typeof val == "object") {
-						let values = val;
-						if (val.id && val.data) {
-							// old way
-							values = { ...val.data };
-							for (const key of Object.keys(val)) {
-								if (key != "data") values['$' + key] = val[key];
-							}
-						} else {
-							// new way
-						}
-						form.fill(this.linearizeValues(values), state.scope);
+						form.fill(this.linearizeValues(val), state.scope);
 						form.save();
 					}
 				}
@@ -208,7 +198,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 	fill(query, scope) {
 		// fieldset-list are not custom inputs yet
 		for (const node of this.querySelectorAll("element-fieldset-list")) {
-			node.fill(query, scope);
+			node.fill?.(query, scope);
 		}
 		const vars = [];
 		for (const elem of this.elements) {
@@ -223,7 +213,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 			}
 		}
 		for (const node of this.querySelectorAll('fieldset[is="element-fieldset"]')) {
-			node.fill(query, scope);
+			node.fill?.(query, scope);
 		}
 		return vars;
 	}

package/ui/image.js

@@ -162,7 +162,7 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 		const curSrc = loc.toString();
 		if (curSrc != this.currentSrc) {
 			this.classList.add('loading');
-			this.#defer?.reject();
+			this.#defer?.resolve();
 			this.#defer = new Deferred();
 			img.setAttribute('src', curSrc);
 			return this.#defer;
@@ -183,7 +183,7 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 		this.image.removeAttribute('src');
 	}
 	close() {
-		this.#defer?.reject();
+		this.#defer?.resolve();
 	}
 };
 

package/ui/input_radio.css

@@ -0,0 +1,15 @@
+.field.button > .radio > input {
+	display:none;
+}
+.field.button > .radio > input + label {
+	opacity:0.7;
+	padding: 0.5em;
+	display: block;
+	position: relative;
+}
+.field.button > .radio > input + label:hover {
+	opacity:1;
+}
+.field.button > .radio > input:checked + label {
+	opacity:1;
+}

package/ui/layout.css

@@ -1,7 +1,16 @@
-.layout,
-.ui.container.layout {
+.layout {
+	display:flex;
 	flex: 0 0 auto;
+}
+.ui.container.layout {
 	display:flex;
+	flex: 1 0 auto;
+}
+.layout.wrap {
+	flex-wrap:wrap;
+}
+.layout.wrap-reverse {
+	flex-wrap:wrap-reverse;
 }
 .layout.column {
 	flex-direction: column;

package/ui/layout.js

@@ -56,7 +56,7 @@ class HTMLElementLayout extends Page.create(HTMLDivElement) {
 			} catch(e) {
 				// pass
 			}
-			this.#defer?.reject();
+			this.#defer?.resolve();
 			this.#defer = new Deferred();
 			const img = new Image();
 			img.addEventListener('load', this.#defer.resolve);
@@ -67,7 +67,7 @@ class HTMLElementLayout extends Page.create(HTMLDivElement) {
 		}
 	}
 	close() {
-		this.#defer?.reject();
+		this.#defer?.resolve();
 	}
 }
 

package/ui/tab-helper.js

@@ -11,19 +11,26 @@ Page.extend('element-tabs', class TabsHelper {
 		if (this.observer) this.observer.disconnect();
 	}
 	mutate(record, state) {
-		const items = this.items;
-		const tabs = this.tabs;
+		const { items, tabs } = this;
 		if (!items || !tabs) return;
+		const { editor } = state.scope;
+		if (!editor) return;
+		const { utils } = editor;
+		const { tr } = editor.state;
 		for (const node of record.addedNodes) {
-			tabs.insertBefore(state.scope.$view.render({
-				type: 'tab'
-			}), tabs.children[items.children.indexOf(node) + 1]);
+			const cur = tabs.children[items.children.indexOf(node) - 1];
+			if (!cur) continue;
+			const sel = utils.selectDomTr(tr, cur);
+			utils.insertTr(tr, editor.render({ type: 'tab' }), sel);
 		}
 		for (let i = 0; i < record.removedNodes.length; i++) {
 			const pos = record.target.childNodes.indexOf(record.previousSibling) + 1 + i;
-			const child = tabs.childNodes[pos];
-			if (child) child.remove();
+			const cur = tabs.childNodes[pos];
+			if (!cur) continue;
+			const sel = utils.selectDomTr(tr, cur);
+			utils.deleteTr(tr, sel);
 		}
+		editor.dispatch(tr);
 	}
 	handleClick(e, state) {
 		const item = e.target.closest('[block-type="tab_item"]');

package/ui/tab.css

@@ -8,6 +8,12 @@ element-tabs {
 	overflow:hidden;
 	margin:0;
 }
+element-tabs > .ui.tabular.menu {
+	flex-wrap:wrap;
+}
+element-tabs > .ui.tabular.menu::after {
+	content:none;
+}
 element-tabs > .ui.tabular.menu + div[block-content="tabs"] > .segment {
 	border-top: none;
 	margin:0 0 1rem;