@pageboard/html 0.11.13 → 0.11.14

package/elements/form.js

@@ -116,7 +116,7 @@ exports.api_form = {
 					nullable: true,
 					type: "string",
 					format: "pathname",
-					$helper: "page" // isn't it pageUrl here ?
+					$helper: "page"
 				},
 				parameters: {
 					title: 'Parameters',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.11.13",
+  "version": "0.11.14",
   "description": "",
   "main": "index.js",
   "scripts": {

package/ui/fieldset-list.js

@@ -48,21 +48,16 @@ class HTMLElementFieldsetList extends VirtualHTMLElement {
 		this.#initialSize = this.#size;
 	}
 
-	#prepare() {
-		this.ownTpl.prerender();
-		if (this.isContentEditable) return;
-		for (const node of this.ownTpl.content.querySelectorAll('[block-id]')) {
-			node.removeAttribute('block-id');
-		}
+	#modelize(tpl) {
 		const keys = new Set();
-		const inputs = this.ownTpl.content.querySelectorAll('[name]');
+		const inputs = tpl.querySelectorAll('[name]');
 		for (const node of inputs) {
 			keys.add(node.name);
 		}
 		const splits = Array.from(keys).map(name => name.split('.'));
 		const coms = [];
 		let pos = 0, com = null;
-		if (splits.length && splits.every(list => {
+		while (splits.length && splits.every(list => {
 			if (com == null) {
 				if (pos < list.length) {
 					com = list[pos];
@@ -88,6 +83,19 @@ class HTMLElementFieldsetList extends VirtualHTMLElement {
 		this.#model = model;
 	}
 
+	#prepare() {
+		const tpl = this.ownTpl;
+		tpl.prerender();
+		if (this.isContentEditable) {
+			this.#modelize(tpl);
+			return;
+		}
+		this.#modelize(tpl.content);
+		for (const node of tpl.content.querySelectorAll('[block-id]')) {
+			node.removeAttribute('block-id');
+		}
+	}
+
 	patch(state) {
 		this.#prepare();
 		if (!this.#size) this.#resize(0, state.scope);
@@ -250,6 +258,9 @@ class HTMLElementFieldsetList extends VirtualHTMLElement {
 	get ownView() {
 		return this.children.find(node => node.matches('.view'));
 	}
+	get prefix() {
+		return this.#prefix;
+	}
 }
 
 VirtualHTMLElement.define('element-fieldset-list', HTMLElementFieldsetList);

package/ui/input-date-slot.js

@@ -6,7 +6,7 @@ class HTMLElementInputDateSlot extends VirtualHTMLElement {
 	get type() {
 		const type = this.getAttribute('type');
 		const step = this.step;
-		if (step) {
+		if (step && !type) {
 			if (step >= 86400) return "date";
 			else if (type == "date") return "datetime-local";
 		}
@@ -63,6 +63,7 @@ class HTMLElementInputDateSlot extends VirtualHTMLElement {
 		const [ start, end ] = this.#inputs();
 		const type = this.type;
 		let step = this.step;
+		if (type == "date" && step < 86400) step = 0;
 		if (step) {
 			if (type == "date") step = Math.round(step / 86400);
 			start.setAttribute('step', step);

package/ui/menu.css

@@ -46,16 +46,19 @@
 	flex-direction: column;
 }
 .right.burger .popup.item > .placer {
-	left: auto;
+	left: 0;
 	right:0;
 }
 .right.popup.item > .placer > div {
 	left:auto;
 	right:0;
 }
+.fixed.popup.item {
+	position:static !important;
+}
 .fixed.popup.item > .placer > div {
 	max-width: 100vw;
-	max-height: 100vh;
+	margin-top: -1rem;
 }
 .center.popup.item > .placer > div {
 	transform: translateX(-50%);
@@ -82,7 +85,6 @@
 
 /* menu_group */
 element-menu {
-	position: relative;
 	flex-shrink: 1;
 }
 .ui.menu:not(.vertical) > element-menu {
@@ -99,12 +101,12 @@ element-menu > [block-content="items"] {
 	display:flex;
 }
 element-menu.burger > [block-content="items"] {
-	position: fixed;
 	left:0;
 }
 element-menu.burger.right > [block-content="items"] {
-	left:auto;
-	right: 0;
+	position: absolute;
+	pointer-events: none;
+	height: 0;
 }
 
 element-menu:not(.burger) > .item {
@@ -117,6 +119,9 @@ element-menu.burger .placer .title {
 element-menu.burger > .item .popup.item {
 	display:block;
 }
+.ui.menu [block-type="menu_item_popup"] {
+	position:initial !important;
+}
 element-menu.burger .placer .popup.active .title {
 	margin-bottom:0.5em;
 }
@@ -126,6 +131,10 @@ element-menu.burger > [block-content="items"] > * {
 element-menu.burger .popup.item.active > .placer > div {
 	display:block;
 }
+element-menu.burger .popup.item > .placer > div {
+	left: 0 !important;
+	right: 0 !important;
+}
 element-menu.burger > .item .dropdown.item:hover > .menu,
 element-menu.burger > .item .popup.item:hover > .placer > div {
 	display:none !important;
@@ -138,8 +147,8 @@ element-menu.burger > .item .dropdown.item.active > .menu {
 }
 
 element-menu.burger > .item .popup.item.active > .placer > div {
-	display:block !important;
-	position:relative;
+	display: block !important;
+	position: relative;
 }
 element-menu.burger > .item:hover > .popup.item {
 	display:block;
@@ -150,7 +159,7 @@ element-menu.burger > .item .placer .menu .ui.dropdown {
 }
 
 element-menu.burger > .item .popup.item > .placer {
-	position:relative;
+	position: relative;
 }
 element-menu.burger > .item .popup.item > .placer > div > .grid {
 	border:0 !important;
@@ -162,9 +171,7 @@ element-menu.burger > .popup > .icon {
 	font-weight: bold;
 	font-family: sans-serif;
 }
-element-menu.burger > .popup > .placer > .menu {
-	right:auto; /* disables the right:0 given by .popup > .placer > div */
-}
+
 
 @media screen and (max-width: 768px) {
 	.ui.menu [block-type="menu_item_text"] {

package/ui/menu.js

@@ -4,6 +4,7 @@ Page.patch((state) => {
 			return false;
 		} else if (state.samePathname(loc)) {
 			if (loc.sameQuery({query:{}})) return true;
+			if (state.query.develop !== undefined) loc.query.develop = state.query.develop;
 			if (state.sameQuery(loc)) return true;
 		} else {
 			return state.pathname.startsWith(loc.pathname + '/');
@@ -32,7 +33,7 @@ class HTMLElementMenu extends VirtualHTMLElement {
 					const styles = window.getComputedStyle(this);
 					const parentWidth = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight) + this.offsetWidth;
 					const menuWidth = menu.offsetWidth;
-					this.classList.toggle('burger', parentWidth <= menuWidth);
+					this.classList.toggle('burger', menuWidth >= parentWidth);
 				});
 			});
 			this.observer.observe(this.parentNode);
@@ -54,9 +55,9 @@ class HTMLElementMenu extends VirtualHTMLElement {
 				tosser.classList.add('inactive');
 				tosser.blur();
 			} else {
-				const padding = this.offsetTop + this.offsetHeight;
-				const menu = tosser.lastElementChild.lastElementChild;
-				menu.style.maxHeight = `calc(100vh - ${padding}px)`;
+				const placer = tosser.lastElementChild;
+				const padding = placer.offsetTop;
+				placer.lastElementChild.style.maxHeight = `calc(100vh - ${padding}px)`;
 			}
 		} else if (item) {
 			this.active = item != this.active ? item : null;