@schukai/monster 4.140.3 → 4.141.1

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.140.3"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.141.1"}

package/source/components/form/control-bar.mjs

@@ -179,6 +179,13 @@ const ATTRIBUTE_OPTION_LAYOUT_ALIGNMENT =
 const ATTRIBUTE_OPTION_LAYOUT_STACKED_ALIGNMENT =
 	"data-monster-option-layout-stacked-alignment";
 
+/**
+ * @private
+ * @type {string}
+ */
+const ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT =
+	"data-monster-option-layout-stacked-breakpoint";
+
 /**
  * @private
  * @type {string}
@@ -233,6 +240,7 @@ class ControlBar extends CustomElement {
 			layout: {
 				alignment: "left",
 				stackedAlignment: undefined,
+				stackedBreakpoint: undefined,
 			},
 			popper: {
 				placement: "left",
@@ -287,7 +295,11 @@ class ControlBar extends CustomElement {
 	 */
 	setOption(path, value) {
 		super.setOption(path, value);
-		if (path === "layout.alignment" || path === "layout.stackedAlignment") {
+		if (
+			path === "layout.alignment" ||
+			path === "layout.stackedAlignment" ||
+			path === "layout.stackedBreakpoint"
+		) {
 			syncLayoutState.call(this);
 		}
 		return this;
@@ -339,6 +351,7 @@ class ControlBar extends CustomElement {
 		attributes.push(ATTRIBUTE_POPPER_POSITION);
 		attributes.push(ATTRIBUTE_OPTION_LAYOUT_ALIGNMENT);
 		attributes.push(ATTRIBUTE_OPTION_LAYOUT_STACKED_ALIGNMENT);
+		attributes.push(ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT);
 		return attributes;
 	}
 
@@ -531,6 +544,11 @@ function initEventHandler() {
 			syncLayoutState.call(self);
 		};
 
+	self[attributeObserverSymbol][ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT] =
+		() => {
+			syncLayoutState.call(self);
+		};
+
 	self[resizeObserverSymbol] = new ResizeObserver(() => {
 		scheduleLayout.call(self, { measure: true, layout: true });
 	});
@@ -743,9 +761,11 @@ function rearrangeItems() {
 
 	const shouldShowSwitch =
 		layout.itemsToMoveToPopper.length > 0 && hasItems;
+	const shouldUseStackedLayout =
+		shouldShowSwitch || isStackedBreakpointMatched.call(this);
 
 	suppressLayoutFeedback.call(this);
-	setLayoutStackedState.call(this, shouldShowSwitch);
+	setLayoutStackedState.call(this, shouldUseStackedLayout);
 
 	for (const item of layout.itemsToMoveToPopper) {
 		if (item.getAttribute("slot") !== "popper") {
@@ -1183,10 +1203,12 @@ function calculateControlBarDimensions() {
 	}
 
 	let width = this.parentElement.clientWidth;
+	let containerWidth = width;
 	if (computedStyle.getPropertyValue("box-sizing") !== "border-box") {
 		width = computedStyle.getPropertyValue("width");
 
 		const pixel = getComputedCssPixels(width);
+		containerWidth = pixel;
 
 		this[dimensionsSymbol].setVia("data.space", pixel);
 	} else {
@@ -1206,7 +1228,8 @@ function calculateControlBarDimensions() {
 		);
 	}
 
-	this[dimensionsSymbol].setVia("data.visible", !(width === 0));
+	this[dimensionsSymbol].setVia("data.visible", !(containerWidth === 0));
+	this[dimensionsSymbol].setVia("data.containerWidth", containerWidth);
 
 	const itemReferences = [];
 
@@ -1509,6 +1532,41 @@ function syncLayoutState() {
 	scheduleLayout.call(this, { measure: true, layout: true });
 }
 
+/**
+ * @private
+ * @return {boolean}
+ */
+function isStackedBreakpointMatched() {
+	const breakpoint = this.getOption("layout.stackedBreakpoint");
+	if (typeof breakpoint !== "string" || breakpoint.trim() === "") {
+		return false;
+	}
+
+	let width = 0;
+	try {
+		width = this[dimensionsSymbol].getVia("data.containerWidth");
+	} catch {
+		try {
+			width = this[dimensionsSymbol].getVia("data.space");
+		} catch {}
+	}
+
+	if (!(width > 0)) {
+		width = getComputedCssPixels(width);
+	}
+
+	if (!(width > 0)) {
+		return false;
+	}
+
+	const breakpointWidth = getComputedCssPixels(breakpoint);
+	if (!(breakpointWidth > 0)) {
+		return false;
+	}
+
+	return width <= breakpointWidth;
+}
+
 /**
  * @private
  * @param {boolean} stacked
@@ -1531,6 +1589,7 @@ function setLayoutStackedState(stacked) {
 	)) {
 		queueLayoutChangedEvent.call(this);
 	}
+	applyLayoutAlignment.call(this);
 }
 
 /**
@@ -1618,6 +1677,7 @@ function getLayoutChangedEventDetail() {
 		configuredAlignment: this.getOption("layout.alignment", "left"),
 		stacked,
 		stackedAlignment: this.getOption("layout.stackedAlignment"),
+		stackedBreakpoint: this.getOption("layout.stackedBreakpoint"),
 	};
 }
 

package/test/cases/components/form/control-bar.mjs

@@ -161,6 +161,7 @@ describe("ControlBar", function () {
       configuredAlignment: "left",
       stacked: false,
       stackedAlignment: undefined,
+      stackedBreakpoint: undefined,
     });
   });
 
@@ -660,4 +661,183 @@ describe("ControlBar", function () {
       globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
     }
   });
+
+  it("should apply stacked alignment below the configured container breakpoint without overflow", async function () {
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="breakpoint-bar-wrapper">
+          <monster-control-bar
+            id="breakpoint-bar"
+            data-monster-option-layout-alignment="right"
+            data-monster-option-layout-stacked-alignment="left"
+            data-monster-option-layout-stacked-breakpoint="100px"
+          >
+            <button id="breakpoint-button">Run</button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("breakpoint-bar-wrapper");
+      const button = document.getElementById("breakpoint-button");
+      const bar = document.getElementById("breakpoint-bar");
+      const controlBar = bar.shadowRoot.querySelector(
+        '[data-monster-role="control-bar"]',
+      );
+      const switchButton = bar.shadowRoot.querySelector(
+        '[data-monster-role="switch"]',
+      );
+
+      wrapper.style.boxSizing = "border-box";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 90,
+      });
+      Object.defineProperty(button, "offsetWidth", {
+        configurable: true,
+        value: 40,
+      });
+      Object.defineProperty(button, "offsetHeight", {
+        configurable: true,
+        value: 30,
+      });
+      button.getBoundingClientRect = () => ({
+        width: 40,
+        height: 30,
+        top: 0,
+        right: 40,
+        bottom: 30,
+        left: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      });
+      Object.defineProperty(switchButton, "offsetWidth", {
+        configurable: true,
+        value: 20,
+      });
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(switchButton.hasAttribute("hidden")).to.be.true;
+      expect(button.hasAttribute("slot")).to.be.false;
+      expect(controlBar.getAttribute("data-monster-layout-stacked")).to.equal(
+        "true",
+      );
+      expect(controlBar.getAttribute("data-monster-layout-alignment")).to.equal(
+        "left",
+      );
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
+  it("should match the stacked breakpoint when the content-box container width is a css string", async function () {
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="content-box-breakpoint-wrapper">
+          <monster-control-bar
+            id="content-box-breakpoint-bar"
+            data-monster-option-layout-alignment="right"
+            data-monster-option-layout-stacked-alignment="left"
+            data-monster-option-layout-stacked-breakpoint="480px"
+          >
+            <button id="content-box-breakpoint-button">Run</button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById(
+        "content-box-breakpoint-wrapper",
+      );
+      const button = document.getElementById("content-box-breakpoint-button");
+      const bar = document.getElementById("content-box-breakpoint-bar");
+      const controlBar = bar.shadowRoot.querySelector(
+        '[data-monster-role="control-bar"]',
+      );
+      const switchButton = bar.shadowRoot.querySelector(
+        '[data-monster-role="switch"]',
+      );
+
+      wrapper.style.boxSizing = "content-box";
+      wrapper.style.width = "350.156px";
+      Object.defineProperty(button, "offsetWidth", {
+        configurable: true,
+        value: 40,
+      });
+      Object.defineProperty(button, "offsetHeight", {
+        configurable: true,
+        value: 30,
+      });
+      button.getBoundingClientRect = () => ({
+        width: 40,
+        height: 30,
+        top: 0,
+        right: 40,
+        bottom: 30,
+        left: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      });
+      Object.defineProperty(switchButton, "offsetWidth", {
+        configurable: true,
+        value: 20,
+      });
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(switchButton.hasAttribute("hidden")).to.be.true;
+      expect(button.hasAttribute("slot")).to.be.false;
+      expect(controlBar.getAttribute("data-monster-layout-stacked")).to.equal(
+        "true",
+      );
+      expect(controlBar.getAttribute("data-monster-layout-alignment")).to.equal(
+        "left",
+      );
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
 });