@schukai/monster 3.92.3 → 3.94.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [3.94.0] - 2024-12-22
+
+### Add Features
+
+- **log:** auto update timestamp [#270](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/270)
+
+
+
+## [3.93.0] - 2024-12-22
+
+### Add Features
+
+- **log:** update the apearance of the log [#270](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/270)
+
+
+
 ## [3.92.3] - 2024-12-20
 
 ### 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.92.3"}
+{"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.0"}

package/source/components/datatable/datasource/rest.mjs

@@ -81,6 +81,9 @@ const filterObserverSymbol = Symbol("filterObserver");
  * @copyright schukai GmbH
  * @summary A rest api datasource
  */
+
+
+
 class Rest extends Datasource {
 	/**
 	 * the constructor of the class
@@ -453,6 +456,13 @@ function initFilter() {
 	filterControl.attachObserver(this[filterObserverSymbol]);
 }
 
+/**
+ * @private
+ * @param json
+ * @param response
+ * @param filterControl
+ * @returns {Promise<never>|Promise<Awaited<unknown>>}
+ */
 function handleIntersectionObserver(json, response, filterControl) {
 	const path = new Pathfinder(json);
 
@@ -495,6 +505,9 @@ function initAutoInit() {
 	});
 }
 
+/**
+ * @private
+ */
 function initEventHandler() {
 	this[intersectionObserverHandlerSymbol] = (entries) => {
 		entries.forEach((entry) => {
@@ -515,6 +528,9 @@ function initEventHandler() {
 	};
 }
 
+/**
+ * @private
+ */
 function initIntersectionObserver() {
 	this.classList.add("intersection-observer");
 
@@ -528,6 +544,7 @@ function initIntersectionObserver() {
 		this[intersectionObserverHandlerSymbol],
 		options,
 	);
+
 	this[intersectionObserverObserverSymbol].observe(this);
 }
 

package/source/components/state/log/entry.mjs

@@ -66,10 +66,10 @@ class Entry extends Base {
 	 */
 	get internalDefaults() {
 		return {
-			title: undefined,
-			message: undefined,
-			user: undefined,
-			date: undefined,
+			title: null,
+			message: null,
+			user: null,
+			date: null,
 		};
 	}
 

package/source/components/state/log.mjs

@@ -12,19 +12,20 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { instanceSymbol } from "../../constants.mjs";
+import {instanceSymbol} from "../../constants.mjs";
 import {
-	assembleMethodSymbol,
-	CustomElement,
-	getSlottedElements,
-	registerCustomElement,
+    assembleMethodSymbol,
+    CustomElement,
+    getSlottedElements,
+    registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { LogStyleSheet } from "./stylesheet/log.mjs";
-import { Entry } from "./log/entry.mjs";
-import { validateInstance } from "../../types/validate.mjs";
+import {LogStyleSheet} from "./stylesheet/log.mjs";
+import {Entry} from "./log/entry.mjs";
+import {validateInstance, validateString} from "../../types/validate.mjs";
 import "./state.mjs";
+import {getWindow} from "../../dom/util.mjs";
 
-export { Log };
+export {Log};
 
 /**
  * @private
@@ -39,133 +40,154 @@ const logElementSymbol = Symbol("logElement");
 const emptyStateElementSymbol = Symbol("emptyStateElement");
 
 /**
- * A Log component
+ * A log entry
  *
- * @fragments /fragments/components/layout/collapse/
+ * @fragments /fragments/components/state/log
+ *
+ * @example /examples/components/state/log-simple
+ *
+ * @issue https://localhost.alvine.dev:8444/development/issues/closed/270.html
  *
  * @since 3.74.0
  * @copyright schukai GmbH
- * @summary A Log component to show a log message.
- */
+ * @summary The log entry is a single entry in the log.
+ **/
 class Log extends CustomElement {
-	/**
-	 * @return {void}
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-	}
-
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @return {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/state/log@@instance");
-	}
-
-	/**
-	 * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
-	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
-	 *
-	 * The individual configuration values can be found in the table.
-	 *
-	 * @property {Object} templates Template definitions
-	 * @property {string} templates.main Main template
-	 * @property {Object} labels Labels
-	 * @property {string} labels.nothingToReport Label for empty state
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-
-			labels: {
-				nothingToReport: "There is nothing to report yet.",
-			},
-
-			entries: [],
-		});
-	}
-
-	/**
-	 * @return {void}
-	 */
-	connectedCallback() {
-		super.connectedCallback();
-
-		const slottedElements = getSlottedElements.call(this);
-		if (slottedElements.size > 0) {
-			this[emptyStateElementSymbol].style.display = "none";
-		}
-	}
-
-	/**
-	 * Clear the log
-	 *
-	 * @return {Log}
-	 */
-	clear() {
-		this[logElementSymbol].innerHTML = "";
-		this[emptyStateElementSymbol].style.display = "block";
-		return this;
-	}
-
-	/**
-	 * Add an entry to the log
-	 * @param entry
-	 * @return {Log}
-	 */
-	addEntry(entry) {
-		validateInstance(entry, Entry);
-
-		const entries = this.getOption("entries");
-		entries.push(entry);
-
-		/** this field is not used, but triggers a change event */
-		this.setOption("length", entries.length - 1);
-
-		return this;
-	}
-
-	/**
-	 * Add a log message
-	 * @param message
-	 * @param date
-	 * @return {Log}
-	 */
-	addMessage(message, date) {
-		if (!date) {
-			date = new Date();
-		}
-
-		this.addEntry(
-			new Entry({
-				message: message,
-				date: date,
-			}),
-		);
-
-		return this;
-	}
-
-	/**
-	 *
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-log";
-	}
-
-	/**
-	 * @return {CSSStyleSheet[]}
-	 */
-	static getCSSStyleSheet() {
-		return [LogStyleSheet];
-	}
+    /**
+     * @return {void}
+     */
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+
+        initControlReferences.call(this);
+        initEventHandler.call(this);
+    }
+
+    /**
+     * This method is called by the `instanceof` operator.
+     * @return {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/components/state/log@@instance");
+    }
+
+    /**
+     * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
+     * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+     *
+     * The individual configuration values can be found in the table.
+     *
+     * @property {Object} templates Template definitions
+     * @property {string} templates.main Main template
+     * @property {Object} labels Labels
+     * @property {string} labels.nothingToReport Label for empty state
+     * @property {number} updateFrequency Update frequency in milliseconds for the timestamp
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            templates: {
+                main: getTemplate(),
+            },
+
+            labels: {
+                nothingToReport: "There is nothing to report yet.",
+            },
+
+            classes: {
+                direction: "vertical",
+            },
+
+            updateFrequency: 10000,
+
+            entries: [],
+
+            timestamp: 0,
+        });
+    }
+
+    /**
+     * @return {void}
+     */
+    connectedCallback() {
+        super.connectedCallback();
+
+        const slottedElements = getSlottedElements.call(this);
+        if (slottedElements.size > 0) {
+            this[emptyStateElementSymbol].style.display = "none";
+        }
+    }
+
+    /**
+     * Clear the log
+     *
+     * @return {Log}
+     */
+    clear() {
+        this[logElementSymbol].innerHTML = "";
+        this[emptyStateElementSymbol].style.display = "block";
+        return this;
+    }
+
+    /**
+     * Add an entry to the log
+     * @param {Entry} entry
+     * @return {Log}
+     */
+    addEntry(entry) {
+        validateInstance(entry, Entry);
+
+        if (entry.date === undefined || entry.date === null) {
+            entry.date = new Date();
+        }
+
+        const entries = this.getOption("entries");
+        entries.push(entry);
+
+        /** this field is not used, but triggers a change event */
+        this.setOption("length", entries.length - 1);
+
+        return this;
+    }
+
+    /**
+     * Add a log message
+     *
+     * @param {string} message
+     * @param {Date} date
+     * @return {Log}
+     * @throws {TypeError} message is not a string
+     */
+    addMessage(message, date) {
+        if (!date) {
+            date = new Date();
+        }
+
+        validateString(message);
+
+        this.addEntry(
+            new Entry({
+                message: message,
+                date: date,
+            }),
+        );
+
+        return this;
+    }
+
+    /**
+     *
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-log";
+    }
+
+    /**
+     * @return {CSSStyleSheet[]}
+     */
+    static getCSSStyleSheet() {
+        return [LogStyleSheet];
+    }
 }
 
 /**
@@ -174,37 +196,44 @@ class Log extends CustomElement {
  * @throws {Error} no shadow-root is defined
  */
 function initControlReferences() {
-	if (!this.shadowRoot) {
-		throw new Error("no shadow-root is defined");
-	}
-
-	this[logElementSymbol] = this.shadowRoot.querySelector(
-		"[data-monster-role=control]",
-	);
-	this[emptyStateElementSymbol] = this.shadowRoot.querySelector(
-		"[data-monster-role=empty-state]",
-	);
+    if (!this.shadowRoot) {
+        throw new Error("no shadow-root is defined");
+    }
+
+    this[logElementSymbol] = this.shadowRoot.querySelector(
+        "[data-monster-role=control]",
+    );
+    this[emptyStateElementSymbol] = this.shadowRoot.querySelector(
+        "[data-monster-role=empty-state]",
+    );
 }
 
 /**
  * @private
  */
 function initEventHandler() {
-	if (!this.shadowRoot) {
-		throw new Error("no shadow-root is defined");
-	}
+    if (!this.shadowRoot) {
+        throw new Error("no shadow-root is defined");
+    }
 
-	this.shadowRoot.addEventListener("slotchange", (event) => {
-		const slottedElements = getSlottedElements.call(this);
+    this.shadowRoot.addEventListener("slotchange", (event) => {
+        const slottedElements = getSlottedElements.call(this);
 
-		if (slottedElements.size > 0) {
-			this[emptyStateElementSymbol].style.display = "none";
-		} else {
-			this[emptyStateElementSymbol].style.display = "block";
-		}
-	});
+        if (slottedElements.size > 0) {
+            this[emptyStateElementSymbol].style.display = "none";
+        } else {
+            this[emptyStateElementSymbol].style.display = "block";
+        }
+    });
 
-	return this;
+    setInterval(() => {
+        getWindow().requestAnimationFrame(() => {
+            const timestamp = (new Date()).toTimeString();
+            this.setOption("timestamp", timestamp);
+        });
+    }, this.getOption("updateFrequency"));
+
+    return this;
 }
 
 /**
@@ -212,23 +241,22 @@ function initEventHandler() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+    // language=HTML
+    return `
         <template id="entry">
             <li data-monster-role="entry">
-                <span></span>
-                <div data-monster-replace="path:entry.title"
-                     data-monster-attributes="class path:entry.title | ?:title:hidden"></div>
-                <div data-monster-replace="path:entry.message"
-                     data-monster-attributes="class path:entry.message | ?:message:hidden"></div>
-                <div data-monster-replace="path:entry.user"
-                     data-monster-attributes="class path:entry.user | ?:user:hidden"></div>
-                <div data-monster-attributes="class path:entry.date | is-set | ?:datetime:hidden">
-                    <span data-monster-replace="path:entry.date | date"></span>
-                    <span data-monster-replace="path:entry.date | time"></span>
-                </div>
+        <span data-monster-replace="path:entry.user"
+              data-monster-attributes="class path:entry.user | ?:user:hidden"></span>
+                <span data-monster-replace="path:entry.title"
+                      data-monster-attributes="class path:entry.title | ?:title:hidden"></span>
+                <span data-monster-replace="path:entry.message"
+                      data-monster-attributes="class path:entry.message | ?:message:hidden"></span>
+                <span data-monster-replace="path:entry.date | time-ago"
+                      data-monster-attributes="title path:entry.date | datetime"></span>
+
             </li>
         </template>
+
         <div part="control" data-monster-role="control">
             <div data-monster-role="empty-state" data-monster-attributes="class path:entries | has-entries | ?:hidden:">
                 <monster-state>
@@ -240,7 +268,7 @@ function getTemplate() {
                             <path d="m256 314.925781c-2.628906 0-5.210938 1.066407-7.070312 2.929688-1.859376 1.867187-2.929688 4.4375-2.929688 7.070312 0 2.636719 1.070312 5.207031 2.929688 7.078125 1.859374 1.859375 4.441406 2.921875 7.070312 2.921875s5.210938-1.0625 7.070312-2.921875c1.859376-1.871094 2.929688-4.441406 2.929688-7.078125 0-2.632812-1.070312-5.203125-2.929688-7.070312-1.859374-1.863281-4.441406-2.929688-7.070312-2.929688zm0 0"/>
                         </svg>
                     </div>
-                    <div part="content" monster-replace="path:labels.nothingToReport">
+                    <div part="content" data-monster-replace="path:labels.nothingToReport">
                         There is nothing to report yet.
                     </div>
                 </monster-state>

package/source/components/state/style/log.pcss

@@ -8,104 +8,56 @@
 @import "../../style/mixin/hover.pcss";
 
 [data-monster-role=entries] {
-    overflow: hidden;
-    padding: 10px 0 40px 60px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    position: relative;
 
     & ul {
         list-style-type: none;
         margin: 0;
-        padding: 0;
-        position: relative;
-        top: 0
-    }
-
-    & ul:last-of-type {
-        top: 2rem;
+        padding: 0 0 0 1.8rem; /* Abstand links behalten */
+        width: 100%; /* Flex-Container-Anpassung */
     }
 
     & ul:before {
         content: "";
         display: block;
-        width: 0;
+        width: 2px;
         height: 100%;
-        border: 1px dashed var(--monster-color-primary-2);
+
+        border-left-color: var(--monster-bg-color-primary-3);
+        border-left-style: dotted;
+        border-left-width: 1px;
         position: absolute;
+        left: 1rem;
+        bottom: 0;
         top: 0;
-        left: 30px
     }
 
     & ul li {
-        margin: 20px 60px 60px;
-        position: relative;
-        padding: 10px 20px;
-        color: var(--monster-color-primary-2);
-        background-color: var(--monster-bg-color-primary-2);
+        margin: 0;
+        padding: 0.1rem 0.3rem;
+        color: var(--monster-color-primary-1);
+        background-color: var(--monster-bg-color-primary-1);
         border-radius: 5px;
+        position: relative;
     }
 
-
-    & ul li > span {
-        content: "";
-        display: block;
-        width: 0;
-        height: 100%;
-        border: 1px solid var(--monster-color-primary-2);
-        position: absolute;
-        top: 0;
-        left: -30px
-    }
-
-    & ul li > span:before, & ul li > span:after {
+    & ul li:before {
         content: "";
-        display: block;
-        width: 10px;
-        height: 10px;
+        width: 6px;
+        height: 6px;
+        box-sizing: border-box;
         border-radius: 50%;
-        background: var(--monster-bg-color-primary-2);
-        border: 2px solid var(--monster-color-primary-2);
-        position: absolute;
-        left: -7.5px
-    }
-
-    & ul li > span:before {
-        top: -10px
-    }
-
-    & ul li > span:after {
-        top: 95%
-    }
-
-    & .title {
-        text-transform: uppercase;
-        margin-bottom: 5px
-    }
-
-    & .message:first-letter {
-    }
-
-    & .user {
-        margin-top: 10px;
-        font-style: italic;
-        text-align: right;
-        margin-right: 20px;
-        font-size: 0.8rem;
-    }
-
-    & .datetime span {
+        background: var(--monster-bg-color-primary-3);
+        border: 1px solid var(--monster-color-primary-2);
         position: absolute;
-        left: -100px;
-        color: var(--monster-color-primary-1);
-        background-color: var(--monster-bg-color-primary-1);
-        font-size: 0.5rem;
-    }
-
-    & .datetime span:first-child {
-        top: -16px
-    }
-
-    & .datetime span:last-child {
-        top: 94%
+        left: calc(-1rem + (5px / 4));
+        top: 0.6rem;
     }
-
-
-}
+}