@schukai/monster 3.86.3 → 3.86.4

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [3.86.4] - 2024-11-16
+
+### Bug Fixes
+
+- update darkmode and small display issues
+
+
+
 ## [3.86.3] - 2024-11-15
 
 ### 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.86.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.86.4"}

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

@@ -33,18 +33,6 @@ const dataChangeEventHandlerSymbol = Symbol("dataChangeEventHandler");
 /**
  * The Datasource component is a basic class for the datatable component.
  *
- * <img src="./images/dom.png">
- *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- *
- * @startuml dom.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- Datasource
- * Datasource <|-- Dom
- * @enduml
- *
  * @copyright schukai GmbH
  * @summary A dom datasource
  */
@@ -110,6 +98,9 @@ class Dom extends Datasource {
 	 */
 	reload() {}
 
+	/**
+	 * @return {void}
+	 */
 	connectedCallback() {
 		super.connectedCallback();
 

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

@@ -99,36 +99,35 @@ class Rest extends Datasource {
 	}
 
 	/**
-     * 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} features Feature definitions
-     * @property {boolean} features.autoInit If true, the component is initialized automatically
-     * @property {boolean} features.filter If true, the component is initialized automatically
-     * @property {Object} autoInit Auto init definitions
-     * @property {boolean} autoInit.intersectionObserver If true, the intersection observer is initialized automatically
-     * @property {boolean} autoInit.oneTime If true, the intersection observer is initialized only once
-     * @property {Object} filter Filter definitions
-     * @property {string} filter.id The id of the filter control
-     * @property {Object} datatable Datatable definitions
-     * @property {string} datatable.id The id of the datatable control
-     * @property {Object} response Response definitions
-     * @property {Object} response.path Path definitions (changed in 3.56.0)
-     * @property {string} response.path.message Path to the message (changed in 3.56.0)
-     * @property {Object} read Read configuration
-     * @property {string} read.url The url of the rest api
-     * @property {string} read.method The method of the rest api
-     * @property {Object} read.parameters The parameters of the rest api
-     * @property {Object} read.parameters.filter The filter of the rest api
-     * @property {Object} read.parameters.orderBy The order by of the rest api
-     * @property {Object} read.parameters.page The page of the rest api
-     * @property {Object} write Write configuration
-
-     */
+	 * 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} features Feature definitions
+	 * @property {boolean} features.autoInit If true, the component is initialized automatically
+	 * @property {boolean} features.filter If true, the component is initialized automatically
+	 * @property {Object} autoInit Auto init definitions
+	 * @property {boolean} autoInit.intersectionObserver If true, the intersection observer is initialized automatically
+	 * @property {boolean} autoInit.oneTime If true, the intersection observer is initialized only once
+	 * @property {Object} filter Filter definitions
+	 * @property {string} filter.id The id of the filter control
+	 * @property {Object} datatable Datatable definitions
+	 * @property {string} datatable.id The id of the datatable control
+	 * @property {Object} response Response definitions
+	 * @property {Object} response.path Path definitions (changed in 3.56.0)
+	 * @property {string} response.path.message Path to the message (changed in 3.56.0)
+	 * @property {Object} read Read configuration
+	 * @property {string} read.url The url of the rest api
+	 * @property {string} read.method The method of the rest api
+	 * @property {Object} read.parameters The parameters of the rest api
+	 * @property {Object} read.parameters.filter The filter of the rest api
+	 * @property {Object} read.parameters.orderBy The order by of the rest api
+	 * @property {Object} read.parameters.page The page of the rest api
+	 * @property {Object} write Write configuration
+	 */
 	get defaults() {
 		const restOptions = new RestAPI().defaults;
 
@@ -175,7 +174,7 @@ class Rest extends Datasource {
 	 * @param {string} page
 	 * @param {string} query
 	 * @param {string} orderBy
-	 * @return {Monster.Components.Datatable.Datasource.Rest}
+	 * @return {Rest}
 	 */
 	setParameters({ page, query, orderBy }) {
 		const parameters = this.getOption("read.parameters");

package/source/components/datatable/datatable.mjs

@@ -88,6 +88,12 @@ export { DataTable };
  */
 const gridElementSymbol = Symbol("gridElement");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const dataControlElementSymbol = Symbol("dataControlElement");
+
 /**
  * @private
  * @type {symbol}
@@ -100,6 +106,12 @@ const gridHeadersElementSymbol = Symbol("gridHeadersElement");
  */
 const columnBarElementSymbol = Symbol("columnBarElement");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const resizeObserverSymbol = Symbol("resizeObserver");
+
 /**
  * The DataTable component is used to show the data from a data source.
  *
@@ -233,6 +245,30 @@ class DataTable extends CustomElement {
 		return "monster-datatable";
 	}
 
+	/**
+	 * @return {void}
+	 */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this?.[resizeObserverSymbol] instanceof ResizeObserver) {
+			this[resizeObserverSymbol].disconnect();
+		}
+	}
+
+	/**
+	 * @return {void}
+	 */
+	connectedCallback() {
+		const self = this;
+		super.connectedCallback();
+
+		this[resizeObserverSymbol] = new ResizeObserver((entries) => {
+			updateGrid.call(self);
+		});
+
+		this[resizeObserverSymbol].observe(this.parentNode);
+	}
+
 	/**
 	 * @return void
 	 */
@@ -625,10 +661,6 @@ function updateConfigColumnBar() {
 function initEventHandler() {
 	const self = this;
 
-	getWindow().addEventListener("resize", (event) => {
-		updateGrid.call(self);
-	});
-
 	self[columnBarElementSymbol].attachObserver(
 		new Observer((e) => {
 			updateHeaderFromColumnBar.call(self);
@@ -858,9 +890,13 @@ function updateGrid() {
 	if (styles !== "") sheet.replaceSync(styles);
 	this.shadowRoot.adoptedStyleSheets = [...DataTable.getCSSStyleSheet(), sheet];
 
-	const bodyWidth = getDocument().body.getBoundingClientRect().width;
+	const bodyWidth = this.parentNode.clientWidth;
 
 	const breakpoint = this.getOption("responsive.breakpoint");
+	this[dataControlElementSymbol].classList.toggle(
+		"small",
+		bodyWidth <= breakpoint,
+	);
 
 	if (bodyWidth > breakpoint) {
 		this[gridElementSymbol].style.gridTemplateColumns =
@@ -875,7 +911,7 @@ function updateGrid() {
 
 /**
  * @private
- * @param {Monster.Components.Datatable.Header[]} headers
+ * @param {Header[]} headers
  * @param {bool} doFetch
  */
 function setDataSource({ orderBy }, doFetch) {
@@ -896,13 +932,17 @@ function setDataSource({ orderBy }, doFetch) {
 
 /**
  * @private
- * @return {Monster.Components.Datatable.Form}
+ * @return {DataTable}
  */
 function initControlReferences() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
 
+	this[dataControlElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=control]",
+	);
+
 	this[gridElementSymbol] = this.shadowRoot.querySelector(
 		"[data-monster-role=datatable]",
 	);

package/source/components/datatable/filter-button.mjs

@@ -20,44 +20,10 @@ import { ToggleButton } from "../host/toggle-button.mjs";
 export { FilterButton };
 
 /**
- * The Filter Button component is used to show and handle the filter values.
- *
- * <img src="./images/filter-button.png">
- *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- *
- * You can create this control either by specifying the HTML tag <monster-filter-button />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-filter-button');` method.
- *
- * ```html
- * <monster-datatable-filter-button></monster-datatable-filter-button>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import '@schukai/component-datatable/source/filter.mjs';
- * document.createElement('monster-datatable-filter-button');
- * ```
- *
- * The Body should have a class "hidden" to ensure that the styles are applied correctly.
- *
- * ```css
- * body.hidden {
- *    visibility: hidden;
- * }
- * ```
- *
- * @startuml filter-button.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- ToggleButton
- * ToggleButton <|-- FilterButton
- * @enduml
+ * A FilterButton is a button that can be used to show the filter.
  *
  * @copyright schukai GmbH
- * @summary A data set
+ * @summary A Button that can be used to show the filter.
  */
 class FilterButton extends ToggleButton {
 	/**
@@ -86,7 +52,6 @@ class FilterButton extends ToggleButton {
 	}
 
 	/**
-	 *
 	 * @return {string}
 	 */
 	static getTag() {
@@ -94,7 +59,7 @@ class FilterButton extends ToggleButton {
 	}
 
 	/**
-	 * @return {Array}
+	 * @return {CSSStyleSheet[]}
 	 */
 	static getCSSStyleSheet() {
 		const styles = super.getCSSStyleSheet();

package/source/components/datatable/filter.mjs

@@ -738,7 +738,6 @@ function initTabEvents() {
  * @private
  */
 function updateFilterTabs() {
-	
 	const element = this[filterTabElementSymbol];
 	if (!element) {
 		return;

package/source/components/datatable/pagination.mjs

@@ -17,7 +17,8 @@ import {
 	CustomElement,
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { findElementWithSelectorUpwards } from "../../dom/util.mjs";
+import { findElementWithSelectorUpwards, getWindow } from "../../dom/util.mjs";
+import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
 import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
 import { ATTRIBUTE_DATASOURCE_SELECTOR } from "./constants.mjs";
 import { Datasource } from "./datasource.mjs";
@@ -51,6 +52,24 @@ const paginationElementSymbol = Symbol.for("paginationElement");
  */
 const datasourceLinkedElementSymbol = Symbol("datasourceLinkedElement");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const resizeObserverSymbol = Symbol("resizeObserver");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const sizeDataSymbol = Symbol("sizeData");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const debounceSizeSymbol = Symbol("debounceSize");
+
 /**
  * The Pagination component
  *
@@ -148,6 +167,81 @@ class Pagination extends CustomElement {
 		return "monster-pagination";
 	}
 
+	/**
+	 * @return {void}
+	 */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this?.[resizeObserverSymbol] instanceof ResizeObserver) {
+			this[resizeObserverSymbol].disconnect();
+		}
+	}
+
+	/**
+	 * @return {void}
+	 */
+	connectedCallback() {
+		const self = this;
+		super.connectedCallback();
+
+		const parentNode = this.parentNode;
+		if (!parentNode) {
+			return;
+		}
+
+		const parentParentNode = parentNode?.parentNode || parentNode;
+
+		const parentWidth = parentParentNode.clientWidth;
+		const ownWidth = this.clientWidth;
+
+		this[sizeDataSymbol] = {
+			last: {
+				parentWidth: parentParentNode.clientWidth || 0,
+				ownWidth: this.clientWidth || 0,
+			},
+			showNumbers: ownWidth < parentWidth,
+		};
+
+		handleDataSourceChanges.call(this);
+
+		setTimeout(() => {
+			this[resizeObserverSymbol] = new ResizeObserver((entries) => {
+				if (this[debounceSizeSymbol] instanceof DeadMansSwitch) {
+					try {
+						this[debounceSizeSymbol].touch();
+						return;
+					} catch (e) {
+						delete this[debounceSizeSymbol];
+					}
+				}
+
+				this[debounceSizeSymbol] = new DeadMansSwitch(400, () => {
+					queueMicrotask(() => {
+						const parentWidth = parentParentNode.clientWidth;
+						const ownWidth = this.clientWidth;
+
+						if (
+							this[sizeDataSymbol]?.last?.parentWidth === parentWidth &&
+							this[sizeDataSymbol]?.last?.ownWidth === ownWidth
+						) {
+							return;
+						}
+
+						this[sizeDataSymbol].last = {
+							parentWidth: parentWidth,
+							ownWidth: ownWidth,
+						};
+
+						this[sizeDataSymbol].showNumbers = ownWidth < parentWidth;
+						handleDataSourceChanges.call(this);
+					});
+				});
+			});
+
+			this[resizeObserverSymbol].observe(this?.parentNode?.parentNode);
+		}, 500);
+	}
+
 	/**
 	 * @return {void}
 	 */
@@ -173,6 +267,7 @@ class Pagination extends CustomElement {
 			element.datasource.attachObserver(
 				new Observer(handleDataSourceChanges.bind(this)),
 			);
+
 			handleDataSourceChanges.call(this);
 		}
 	}
@@ -244,6 +339,10 @@ function initEventHandler() {
 			}
 		}
 
+		if (!(element instanceof HTMLElement)) {
+			return;
+		}
+
 		let page = null;
 
 		if (!element.hasAttribute("data-page-no")) {
@@ -264,7 +363,17 @@ function initEventHandler() {
 			return;
 		}
 
-		datasource.setParameters({ page }).reload();
+		if (typeof datasource.setParameters !== "function") {
+			return;
+		}
+
+		datasource.setParameters({ page });
+
+		if (typeof datasource.reload !== "function") {
+			return;
+		}
+
+		datasource.reload();
 	});
 }
 
@@ -320,11 +429,18 @@ function handleDataSourceChanges() {
 		this.getOption("currentPage"),
 		this.getOption("pages"),
 	);
-	this.setOption("pagination", pagination);
+
+	if (this?.[sizeDataSymbol]?.showNumbers !== true) {
+		pagination.items = [];
+	}
+
+	getWindow().requestAnimationFrame(() => {
+		this.setOption("pagination", pagination);
+	});
 }
 
 /**
- *
+ * @private
  * @param current
  * @param max
  * @return  {object}
@@ -436,17 +552,19 @@ function getTemplate() {
             <nav data-monster-role="pagination" role="navigation" aria-label="pagination">
                 <ul class="pagination-list" data-monster-insert="items path:pagination.items"
                     data-monster-select-this="true">
-                    <li part="pagination-prev"><a data-monster-role="pagination-prev"
-                                                  data-monster-attributes="
+                    <li part="pagination-prev" data-monster-role="pagination-prev"><a
+                            data-monster-role="pagination-prev"
+                            data-monster-attributes="
             class path:pagination.prevClass | prefix: previous,
             data-page-no path:pagination.prevNo,
             href path:pagination.prevHref | prefix: #"
-                                                  data-monster-replace="path:labels.previous">Previous</a></li>
-                    <li part="pagination-next"><a data-monster-role="pagination-next"
-                                                  data-monster-attributes="class path:pagination.nextClass | prefix: next,
+                            data-monster-replace="path:labels.previous">Previous</a></li>
+                    <li part="pagination-next" data-monster-role="pagination-next"><a
+                            data-monster-role="pagination-next"
+                            data-monster-attributes="class path:pagination.nextClass | prefix: next,
             data-page-no path:pagination.nextNo,
         href path:pagination.nextHref | prefix: #"
-                                                  data-monster-replace="path:labels.next">Next</a></li>
+                            data-monster-replace="path:labels.next">Next</a></li>
                 </ul>
             </nav>
         </div>

package/source/components/datatable/style/datatable.pcss

@@ -18,12 +18,6 @@
 @import "../../style/theme.pcss";
 @import "../../style/skeleton.pcss";
 
-[data-monster-role="control"] {
-    container-type: inline-size ;
-    container-name: datatable;
-    @mixin text;
-} 
-
 ::slotted(monster-collapse) {
     --monster-color-gradient-1: none;
     --monster-color-gradient-2: none;
@@ -252,15 +246,14 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
     padding: var(--monster-space-7) 0;
 }
 
-
-@container datatable (max-width: 900px) {
+[data-monster-role="control"].small {
 
 
-    [data-monster-role="datatable-headers"] {
+    & [data-monster-role="datatable-headers"] {
         display: none;
     }
 
-    [data-monster-role="table-container"] {
+    & [data-monster-role="table-container"] {
 
         & .bar {
             display: flex;
@@ -285,7 +278,7 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
         }
     }
 
-    ::slotted(.monster-button-group) {
+    & ::slotted(.monster-button-group) {
         display: flex;
         flex-direction: column !important;
     }

package/source/components/datatable/style/embedded-pagination.pcss

@@ -7,6 +7,8 @@
 @import "../../style/control.pcss";
 @import "../../style/property.pcss";
 
+
+
 [data-monster-role=pagination] {
     @mixin text;
     display: flex;
@@ -15,21 +17,27 @@
 
     & ul {
         display: flex;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
         justify-content: center;
         align-items: center;
         list-style: none;
 
         padding-left: 0;
         margin: 20px 0;
+        
 
     }
 
     & ul li {
 
         margin: 0;
-        border-left: solid 1px black;
+        border-left: solid 1px var(--monster-theme-control-border-color);
         padding: 0 10px;
+        
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
 
         & a, & a:link, & a:visited, & a:hover, & a:active, & a:focus {
             width: max-content;
@@ -73,7 +81,7 @@
         }
     }
 
-    @mixin viewport-7 { 
+    @mixin viewport-7 {
 
         & ul li {
             padding: 0 2px;
@@ -92,67 +100,14 @@
         }
 
     }
- /*   
-    & [data-monster-error-state=hidden] {
-        display: none;
-    }
-
-    & [data-monster-loading-state=hidden] {
-        display: none;
-    }
-*/
-/**    & .pagination-loading-state {
-        align-items: center;
-        display: flex;
 
-        &.hidden {
-            display: none;
-        }
 
-    }
+}
 
-    & .pagination-error-state {
-        align-items: center;
-        display: flex;
 
-        &.hidden {
-            display: none;
-        }
-    & .state-icon-container {
-        width:2em;
-        height:2em;
-        margin:0 5px 0 2px;
+@container (min-width: 800px) {
+    [data-monster-role=pagination] {
+        background-color: red;
+        color: red;
     }
-    }*/
-/*
-    & .pagination-state {
-        display: flex !important;
-        flex-wrap: nowrap;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        
-        & [data-monster-error-state] {
-            width:2em;
-            height:2em;
-            margin:0 5px 0 2px;
-
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        
-        & [data-monster-loading-state] {
-            width:2em;
-            height:2em;
-            margin:0 5px 0 2px;
-        }
-        
-        
-    }*/
-    
-
-    
-
 }
-