@pageboard/html 0.11.18 → 0.11.19

package/elements/input-date.js

@@ -49,13 +49,15 @@ exports.input_date_time = {
 			}]
 		},
 		step: {
-			title: 'Step',
-			description: 'rounding/increment in seconds',
+			title: 'Time steps',
+			description: 'Ignored for dates',
 			type: 'integer',
-			default: 60,
+			default: null,
 			anyOf: [{
-				const: 60,
+				const: null,
 				title: '1 minute'
+			}, {
+				const: 60
 			}, {
 				const: 60 * 5,
 				title: '5 minutes'

package/elements/menu.js

@@ -43,6 +43,17 @@ exports.menu_group = {
 				const: "right",
 				title: "Right"
 			}]
+		},
+		responsive: {
+			title: 'Responsive',
+			default: 'popup',
+			anyOf: [{
+				const: null,
+				title: 'None'
+			}, {
+				const: 'popup',
+				title: 'Popup'
+			}]
 		}
 	},
 	contents: {
@@ -51,7 +62,7 @@ exports.menu_group = {
 	},
 	html: `<element-menu class="[position] menu">
 		<div block-content="items"></div>
-		<div tabindex="0" class="ui fixed popup item">
+		<div tabindex="0" class="ui fixed popup item [responsive|eq:popup|bmagnet:*]">
 			<div class="icon">≡</div>
 			<div class="dropdown placer"><div class="menu"></div></div>
 		</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.11.18",
+  "version": "0.11.19",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -19,12 +19,12 @@
   },
   "homepage": "https://github.com/pageboard/client#readme",
   "dependencies": {
-    "postinstall": "^0.7.4",
+    "postinstall": "^0.8.0",
     "semantic-ui-css": "^2.4.1"
   },
   "devDependencies": {
     "formdata-polyfill": "^4.0.10",
-    "nouislider": "^15.6.0",
+    "nouislider": "^15.6.1",
     "object-fit-images": "^3.2.4",
     "postinstall-bundle": "^0.7.4"
   },

package/ui/input-date-slot.js

@@ -62,10 +62,8 @@ class HTMLElementInputDateSlot extends VirtualHTMLElement {
 	patch(state) {
 		const [ start, end ] = this.#inputs();
 		const type = this.type;
-		let step = this.step;
-		if (type == "date" && step < 86400) step = 0;
+		const step = type == "date" ? 0 : this.step;
 		if (step) {
-			if (type == "date") step = Math.round(step / 86400);
 			start.setAttribute('step', step);
 			end.setAttribute('step', step);
 		} else {

package/ui/input-date.js

@@ -4,6 +4,10 @@ class HTMLElementInputDate extends HTMLInputElement {
 		if (this.init) this.init();
 	}
 
+	patch() {
+		if (this.type == "date") this.removeAttribute('step');
+	}
+
 	setAttribute(name, value) {
 		if (name == "value") {
 			this.value = value;

package/ui/menu.css

@@ -102,13 +102,10 @@ element-menu > [block-content="items"] {
 }
 element-menu.burger > [block-content="items"] {
 	left:0;
-}
-element-menu.burger.right > [block-content="items"] {
 	position: absolute;
 	pointer-events: none;
 	height: 0;
 }
-
 element-menu:not(.burger) > .item {
 	display:none !important;
 }

package/ui/menu.js

@@ -4,7 +4,10 @@ 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.query.develop !== undefined) {
+				// kept for backward compatibility
+				loc.query.develop = state.query.develop;
+			}
 			if (state.sameQuery(loc)) return true;
 		} else {
 			return state.pathname.startsWith(loc.pathname + '/');
@@ -26,6 +29,10 @@ class HTMLElementMenu extends VirtualHTMLElement {
 		if (this.isContentEditable || this.matches('.vertical')) return;
 		const menu = this.firstElementChild;
 		const helper = this.lastElementChild;
+		if (helper == menu) {
+			// not a popup
+			return;
+		}
 		helper.lastElementChild.lastElementChild.appendChild(this.toHelper(menu));
 		state.finish(() => {
 			this.observer = new ResizeObserver((entries, observer) => {
@@ -43,10 +50,14 @@ class HTMLElementMenu extends VirtualHTMLElement {
 		if (this.observer) this.observer.disconnect();
 	}
 	handleAllClick(e, state) {
+		const tosser = this.lastElementChild;
+		if (tosser == this.firstElementChild) {
+			// not a popup
+			return;
+		}
 		if (this.active) {
 			this.active.classList.toggle('active', false);
 		}
-		const tosser = this.lastElementChild;
 		tosser.classList.remove('inactive');
 		let item = tosser.contains(e.target) && !e.target.closest('a') && e.target.closest('.item');
 		if (item == tosser) {