@schukai/monster 3.94.1 → 3.95.1

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [3.95.1] - 2024-12-23
+
+### Bug Fixes
+
+- check rendering [#271](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/271)
+
+
+
+## [3.95.0] - 2024-12-23
+
+### Add Features
+
+- **log:** set direction
+
+
+
 ## [3.94.1] - 2024-12-22
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.12","@popperjs/core":"^2.11.8"},"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":"3.94.1"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.12","@popperjs/core":"^2.11.8"},"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":"3.95.1"}

package/source/components/layout/tabs.mjs

@@ -36,7 +36,7 @@ import {
     findTargetElementFromEvent,
     fireCustomEvent,
 } from "../../dom/events.mjs";
-import {getDocument} from "../../dom/util.mjs";
+import {getDocument, getWindow} from "../../dom/util.mjs";
 import {random} from "../../math/random.mjs";
 import {getGlobal} from "../../types/global.mjs";
 import {ID} from "../../types/id.mjs";
@@ -150,6 +150,7 @@ const resizeObserverSymbol = Symbol("resizeObserver");
  * @example /examples/components/layout/tabs-removable
  *
  * @issue https://localhost.alvine.dev:8443/development/issues/closed/268.html
+ * @issue https://localhost.alvine.dev:8443/development/issues/closed/271.html
  *
  * @since 3.74.0
  * @copyright schukai GmbH
@@ -1027,35 +1028,43 @@ function calcBoxWidth(node) {
  * @return {Object}
  */
 function rearrangeButtons() {
-    const standardButtons = [];
-    const popperButtons = [];
 
-    let sum = 0;
-    const space = this[dimensionsSymbol].getVia("data.space");
+    getWindow().requestAnimationFrame(() => {
 
-    const buttons = this.getOption("buttons.standard");
-    for (const [, button] of buttons.entries()) {
-        const ref = button?.reference;
+        const standardButtons = [];
+        const popperButtons = [];
+        let sum = 0;
+        const space = this[dimensionsSymbol].getVia("data.space");
+
+        if (space <= 0) {
+            return;
+        }
 
-        sum += this[dimensionsSymbol].getVia(`data.button.${ref}`);
+        const buttons = this.getOption("buttons.standard");
+        for (const [, button] of buttons.entries()) {
+            const ref = button?.reference;
 
-        if (sum > space) {
-            popperButtons.push(clone(button));
-        } else {
-            standardButtons.push(clone(button));
+            sum += this[dimensionsSymbol].getVia(`data.button.${ref}`);
+
+            if (sum > space) {
+                popperButtons.push(clone(button));
+            } else {
+                standardButtons.push(clone(button));
+            }
         }
-    }
 
-    this.setOption("buttons.standard", standardButtons);
-    this.setOption("buttons.popper", popperButtons);
+        this.setOption("buttons.standard", standardButtons);
+        this.setOption("buttons.popper", popperButtons);
 
-    if (this[switchElementSymbol]) {
-        if (popperButtons.length > 0) {
-            this[switchElementSymbol].classList.remove("hidden");
-        } else {
-            this[switchElementSymbol].classList.add("hidden");
+        if (this[switchElementSymbol]) {
+            if (popperButtons.length > 0) {
+                this[switchElementSymbol].classList.remove("hidden");
+            } else {
+                this[switchElementSymbol].classList.add("hidden");
+            }
         }
-    }
+
+    });
 }
 
 /**
@@ -1105,8 +1114,11 @@ function calculateNavigationButtonsDimensions() {
         slot.classList.remove("invisible");
     }
 
-    this[dimensionsSymbol].setVia("data.calculated", true);
     this.setOption("buttons.standard", clone(buttons));
+
+    getWindow().requestAnimationFrame(() => {
+        this[dimensionsSymbol].setVia("data.calculated", true);
+    });
 }
 
 /**

package/source/components/state/log.mjs

@@ -81,6 +81,8 @@ class Log extends CustomElement {
      * @property {string} templates.main Main template
      * @property {Object} labels Labels
      * @property {string} labels.nothingToReport Label for empty state
+     * @property {Object} classes Classes
+     * @property {string} classes.direction Direction of the log: ascending or descending
      * @property {number} updateFrequency Update frequency in milliseconds for the timestamp
      */
     get defaults() {
@@ -93,8 +95,8 @@ class Log extends CustomElement {
                 nothingToReport: "There is nothing to report yet.",
             },
 
-            classes: {
-                direction: "vertical",
+            features: {
+                direction: "ascending",
             },
 
             updateFrequency: 10000,
@@ -123,8 +125,7 @@ class Log extends CustomElement {
      * @return {Log}
      */
     clear() {
-        this[logElementSymbol].innerHTML = "";
-        this[emptyStateElementSymbol].style.display = "block";
+        this[logElementSymbol].setOption("entries", []);
         return this;
     }
 
@@ -141,7 +142,11 @@ class Log extends CustomElement {
         }
 
         const entries = this.getOption("entries");
-        entries.push(entry);
+        if (this.getOption("features.direction") === "ascending") {
+            entries.unshift(entry);
+        } else {
+            entries.push(entry);
+        }
 
         /** this field is not used, but triggers a change event */
         this.setOption("length", entries.length - 1);

package/source/components/state/state.mjs

@@ -25,7 +25,7 @@ export { State };
 /**
  * A state component
  *
- * @fragments /fragments/components/state/state/
+ * @fragments /fragments/components/state/state
  *
  * @example /examples/components/state/state-simple
  *