@schukai/monster 4.143.3 → 4.143.5

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.143.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.143.5"}

package/source/components/datatable/filter.mjs

@@ -1089,6 +1089,10 @@ function initTabEvents() {
 					return host.getConfig(configKey);
 				})
 				.then((config) => {
+					if (!isObject(config)) {
+						return;
+					}
+
 					for (const [name, query] of Object.entries(config)) {
 						if (labels.includes(name)) {
 							continue;
@@ -1130,6 +1134,10 @@ function updateFilterTabs() {
 			return host.getConfig(configKey);
 		})
 		.then((config) => {
+			if (!isObject(config)) {
+				return;
+			}
+
 			for (const [name, query] of Object.entries(config)) {
 				const found = element.querySelector(
 					`[data-monster-button-label="${name}"]`,

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

@@ -1396,7 +1396,13 @@ function getVisualBorderElement(element, side) {
 		"[data-monster-role=control]",
 	].join(",");
 	if (element.shadowRoot instanceof ShadowRoot) {
-		return element.shadowRoot.querySelector(selector) || element;
+		return (
+			element.shadowRoot.querySelector("button,input,select,textarea") ||
+			element.shadowRoot.querySelector(
+				"monster-input-group,monster-select,[data-monster-role=control]",
+			) ||
+			element
+		);
 	}
 
 	const candidates = Array.from(element.querySelectorAll(selector)).filter(

package/source/text/bracketed-key-value-hash.mjs

@@ -82,6 +82,8 @@ function parseBracketedKeyValueHash(hashString) {
 	let inSelector = true;
 	let escaped = false;
 	let quotedValueStartChar = "";
+	let valueParenthesisDepth = 0;
+	let valueClosedByParenthesis = false;
 
 	for (let i = 0; i < cleanedHashString.length; i++) {
 		const c = cleanedHashString[i];
@@ -166,6 +168,19 @@ function parseBracketedKeyValueHash(hashString) {
 				continue;
 			}
 
+			if (c === "(") {
+				valueParenthesisDepth++;
+				currentValue += c;
+				continue;
+			}
+
+			if (c === ")" && valueParenthesisDepth > 0) {
+				valueParenthesisDepth--;
+				currentValue += c;
+				valueClosedByParenthesis = valueParenthesisDepth === 0;
+				continue;
+			}
+
 			if (c === ",") {
 				inValue = false;
 				inKey = true;
@@ -173,6 +188,8 @@ function parseBracketedKeyValueHash(hashString) {
 				addToResult(currentKey, decodedCurrentValue);
 				currentKey = "";
 				currentValue = "";
+				valueParenthesisDepth = 0;
+				valueClosedByParenthesis = false;
 				continue;
 			}
 
@@ -186,6 +203,8 @@ function parseBracketedKeyValueHash(hashString) {
 				currentKey = "";
 				currentValue = "";
 				currentSelector = "";
+				valueParenthesisDepth = 0;
+				valueClosedByParenthesis = false;
 				continue;
 			}
 
@@ -199,6 +218,12 @@ function parseBracketedKeyValueHash(hashString) {
 		return selectors;
 	}
 
+	if (inValue && valueParenthesisDepth === 0 && valueClosedByParenthesis) {
+		const decodedCurrentValue = decodeURIComponent(currentValue);
+		addToResult(currentKey, decodedCurrentValue);
+		return selectors;
+	}
+
 	return {};
 }
 

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

@@ -30,6 +30,8 @@ describe("ControlBar", function () {
         Promise.all([
           import("../../../../source/components/form/control-bar.mjs"),
           import("../../../../source/components/form/control-bar-spacer.mjs"),
+          import("../../../../source/components/form/button.mjs"),
+          import("../../../../source/components/form/popper-button.mjs"),
         ])
           .then((m) => {
             ControlBar = m[0].ControlBar;
@@ -380,6 +382,92 @@ describe("ControlBar", function () {
     }
   });
 
+  it("should join borders between direct monster button controls", 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="monster-button-border-bar-wrapper">
+          <monster-control-bar id="monster-button-border-bar">
+            <monster-popper-button id="monster-button-border-create">
+              <span slot="button">Create</span>
+            </monster-popper-button>
+            <monster-button id="monster-button-border-tags">Manage tags</monster-button>
+            <monster-button id="monster-button-border-import">Import</monster-button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById(
+        "monster-button-border-bar-wrapper",
+      );
+      const controls = [
+        document.getElementById("monster-button-border-create"),
+        document.getElementById("monster-button-border-tags"),
+        document.getElementById("monster-button-border-import"),
+      ];
+
+      wrapper.style.boxSizing = "border-box";
+      wrapper.style.width = "400px";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 400,
+      });
+
+      for (const control of controls) {
+        Object.defineProperty(control, "offsetWidth", {
+          configurable: true,
+          value: 80,
+        });
+        Object.defineProperty(control, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        control.getBoundingClientRect = () => ({
+          width: 80,
+          height: 30,
+          top: 0,
+          right: 80,
+          bottom: 30,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+
+        const innerButton = control.shadowRoot?.querySelector("button");
+        innerButton.style.borderLeftWidth = "3px";
+        innerButton.style.borderRightWidth = "3px";
+      }
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(controls[1].style.marginLeft).to.equal("-3px");
+      expect(controls[2].style.marginLeft).to.equal("-3px");
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
   it("should size inline spacer lines from adjacent border widths", async function () {
     const originalRequestAnimationFrame = window.requestAnimationFrame;
     const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;

package/test/cases/text/bracketed-key-value-hash.mjs

@@ -106,6 +106,16 @@ describe("parseBracketedKeyValueHash", () => {
         expect(result).to.deep.equal({selector: {key1: 'value,1', key2: 'value,2'}});
     });
 
+    it('should keep unencoded parentheses inside a percent-encoded filter expression', () => {
+        const hashString = '#list-filter-nucleus-pim-product-variants-list(tags=tags%20IN%20(%22gustav-varianten%22)';
+        const result = parseBracketedKeyValueHash(hashString);
+        expect(result).to.deep.equal({
+            'list-filter-nucleus-pim-product-variants-list': {
+                tags: 'tags IN ("gustav-varianten")'
+            }
+        });
+    });
+
     it('should ignore leading hash symbol (#)', () => {
         const hashString = 'selector(key=value)';
         const result = parseBracketedKeyValueHash(hashString);
@@ -195,6 +205,18 @@ describe("parseBracketedKeyValueHash", () => {
             const result = createBracketedKeyValueHash(input, true);
             expect(result).to.deep.equal("#.example(color=r%22ed,font-size=14px);.other(background=blue)");
         });
+
+        it('should round-trip a filter expression with quotes and parentheses', () => {
+            const input = {
+                'list-filter-nucleus-pim-product-variants-list': {
+                    tags: 'tags IN ("gustav-varianten")'
+                }
+            };
+
+            const hashString = createBracketedKeyValueHash(input, true);
+            const result = parseBracketedKeyValueHash(hashString);
+            expect(result).to.deep.equal(input);
+        });
         
         it('should return an empty string for an empty object', () => {
             const input = {};