@pageboard/html 0.16.5 → 0.16.7

package/elements/beacons.js

@@ -9,6 +9,6 @@ exports.page.properties.beacons = {
 exports.page.fragments.push({
 	path: 'head',
 	position: 'beforeend',
-	html: `<meta name="beacons" is="element-beacons" content="[beacons|as:query]">`
+	html: `<meta name="beacons" is="element-beacons" content="[beacons|fail:*|as:query]">`
 });
 exports.page.scripts.push("../ui/beacons.js");

package/elements/menu.js

@@ -58,7 +58,7 @@ exports.menu_group = {
 		nodes: "menu_item+"
 	},
 	html: `<element-menu class="[position] menu">
-		<div block-content="items"></div>
+		<div class="items" block-content="items"></div>
 		<div tabindex="0" class="ui fixed popup item [responsive|eq:popup|prune:*]">
 			<div class="icon">≡</div>
 			<div class="dropdown placer"><div class="menu"></div></div>

package/elements/navigation.js

@@ -58,7 +58,7 @@ exports.breadcrumb = {
 		<div class="divider"></div>
 		<a href="[$links.up|nth:-1|at:a::1|repeat:link|.url]" class="section">[link.title]</a>
 		<div class="divider"></div>
-		<div class="active section">[$page.content.title|fail:div::1]</div>
+		<div class="active section">[$title|fail:div::1]</div>
 	</nav>`,
 	stylesheets: [
 		'../ui/components/breadcrumb.css'

package/elements/query-tags.js

@@ -17,7 +17,7 @@ exports.query_tags = {
 		nodes: 'inline*'
 	},
 	html: `<element-query-tags for="[form]">
-		<div block-content="title">Filters:</div>
+		<div class="title" block-content="title">Filters:</div>
 		<div class="ui labels"></div>
 	</element-query-tags>`,
 	stylesheets: [

package/elements/tab.js

@@ -22,7 +22,7 @@ exports.tabs = {
 	}],
 	html: `<element-tabs id="[name|as:xid]">
 		<div class="ui top attached tabular menu" block-content="items"></div>
-		<div block-content="tabs"></div>
+		<div class="tabs" block-content="tabs"></div>
 	</element-tabs>`,
 	stylesheets: [
 		'../ui/components/tab.css',

package/package.json

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

package/ui/beacons.js

@@ -1,6 +1,20 @@
 class HTMLElementBeacons extends Page.create(HTMLMetaElement) {
+	patch(state) {
+		if (!this.content) return;
+		const scope = state.scope.copy();
+		const collector = state.collector();
+		scope.$hooks = {
+			...scope.$hooks,
+			afterAll(ctx, v) {
+				collector.filter(ctx, v);
+			}
+		};
+		for (const expr of Object.values(state.parse(this.content).query)) {
+			`[${expr}]`.fuse({}, state.scope);
+		}
+	}
 	paint(state) {
-		if (state.scope.$write || state.scope.$read) return;
+		if (state.scope.$write || state.scope.$read || !this.content) return;
 		const payload = new URLSearchParams();
 		let i = 0;
 		for (const [key, expr] of Object.entries(state.parse(this.content).query)) {

package/ui/consent.css

@@ -14,16 +14,9 @@ footer [block-type="consent_form"][data-transient="true"] {
 	display:none;
 }
 
-[block-type="consent_form"] > [block-content="content"] {
-	display:none;
-}
 [block-type="consent_form"] > .view {
 	position:relative;
 }
-[contenteditable] [block-type="consent_form"] > [block-content="content"] {
-	display:block;
-	min-height:1em;
-}
 
 [contenteditable] [block-focused="last"] > .form[block-type="consent_form"][data-transient="true"],
 .form[block-type="consent_form"][data-transient="true"][block-focused] {

package/ui/fieldset-list.css

@@ -2,16 +2,3 @@ element-fieldset-list {
 	display: block;
 	position: relative;
 }
-
-element-fieldset-list > [block-content="template"] {
-	display: none;
-}
-
-[contenteditable] element-fieldset-list > [block-content="template"] {
-	display: block;
-	min-height: 1em;
-}
-
-[contenteditable] element-fieldset-list > .view {
-	display: none;
-}

package/ui/form.js

@@ -340,15 +340,15 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 		form.classList.remove('loading');
 
 		// messages shown inside form, no navigation
-		const msg = form.toggleMessages(res.status);
-		if (msg) msg.fuse({}, scope);
+		const msgs = form.toggleMessages(res.status);
+		for (const node of msgs) node.fuse({}, scope);
 		const ok = res.status >= 200 && res.status < 300;
 		let redirect = form.getRedirect(res.status);
 
 		if (ok) {
 			form.forget();
 			form.save();
-			if (!redirect && form.closest('element-template') && !msg) {
+			if (!redirect && form.closest('element-template') && !msgs.length) {
 				redirect = state.toString();
 			}
 		}
@@ -371,10 +371,10 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 		}
 		state.debounce(
 			() => {
-				msg?.classList.remove('visible');
+				for (const node of msgs) node.classList.remove('visible');
 				return state.push(loc, { vary });
 			},
-			msg?.dataset.fading ? 1000 : 100
+			msgs.some(node => node.dataset.fading) ? 1000 : 100
 		)();
 	}
 }

package/ui/image.css

@@ -12,7 +12,7 @@ element-image.no-size::after {
 	content: "⤡" !important;
 }
 
-element-image > [block-content="legend"] {
+element-image > div {
 	position:absolute;
 	font-size:0.8rem;
 	line-height:1rem;
@@ -144,6 +144,6 @@ img[is="element-img"] {
 	height:auto;
 }
 
-element-image[block-focused="last"] > [block-content="legend"] {
+element-image[block-focused="last"] > div {
 	background-color: rgb(255 255 255 / 50%);
 }

package/ui/menu.css

@@ -97,10 +97,10 @@ element-menu {
 element-menu > .menu {
 	position: relative;
 }
-element-menu > [block-content="items"] {
+element-menu > .items {
 	display:flex;
 }
-element-menu.burger > [block-content="items"] {
+element-menu.burger > .items {
 	left:0;
 	position: absolute;
 	pointer-events: none;
@@ -122,7 +122,7 @@ element-menu.burger > .item .popup.item {
 element-menu.burger .placer .popup.active .title {
 	margin-bottom:0.5em;
 }
-element-menu.burger > [block-content="items"] > * {
+element-menu.burger > .items > * {
 	visibility:hidden;
 }
 element-menu.burger .popup.item.active > .placer > div {

package/ui/query-tags.css

@@ -5,7 +5,7 @@ element-query-tags > div {
 	display:inline-block;
 	line-height: 100%;
 }
-element-query-tags > div[block-content="title"] {
+element-query-tags > .title {
 	white-space:nowrap;
 	padding-right: 0.5em;
 }

package/ui/tab.css

@@ -14,7 +14,7 @@ element-tabs > .ui.tabular.menu {
 element-tabs > .ui.tabular.menu::after {
 	content:none;
 }
-element-tabs > .ui.tabular.menu + div[block-content="tabs"] > .segment {
+element-tabs > .ui.tabular.menu + div.tabs > .segment {
 	border-top: none;
 	margin:0 0 1rem;
 	width: 100%;