@schukai/monster 3.58.2 → 3.58.4

package/CHANGELOG.md

@@ -1,9 +1,27 @@
 
+## [3.58.4] - 2024-03-18
+
+### Bug Fixes
+
+- store lists [#139](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/139)
+
+## [3.58.3] - 2024-03-18
+
+### Bug Fixes
+
+- datatable colum with  [#143](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/143)
+### Changes
+
+- release and publish to npm new version 3.58.3
+
 ## [3.58.2] - 2024-03-17
 
 ### Bug Fixes
 
 - playground missing js and remove flex [#144](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/144)
+### Changes
+
+- release and publish to npm new version 3.58.2
 
 ## [3.58.1] - 2024-03-17
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schukai/monster",
-  "version": "3.58.2",
+  "version": "3.58.4",
   "description": "Monster is a simple library for creating fast, robust and lightweight websites.",
   "keywords": [
     "framework",

package/source/components/datatable/dataset.mjs

@@ -137,7 +137,6 @@ class DataSet extends CustomElement {
 	}
 
 	write() {
-
 		return new Promise((resolve, reject) => {
 			if (!this[datasourceLinkedElementSymbol]) {
 				reject(new Error("No datasource"));

package/source/components/datatable/datatable.mjs

@@ -40,7 +40,6 @@ import {
 	DIRECTION_DESC,
 	DIRECTION_NONE,
 } from "./datatable/header.mjs";
-import { getStoredFilterConfigKey } from "./filter/util.mjs";
 import { DatatableStyleSheet } from "./stylesheet/datatable.mjs";
 import {
 	handleDataSourceChanges,

package/source/components/datatable/filter.mjs

@@ -366,12 +366,23 @@ function initControlReferences() {
 	return this;
 }
 
+function updateFilterSelections() {
+	setTimeout(() => {
+		const options = this[settingsSymbol].getOptions();
+		this[filterSelectElementSymbol].setOption("options", options);
+		setTimeout(() => {
+			this[filterSelectElementSymbol].value =
+				this[settingsSymbol].getSelected();
+		}, 10);
+	}, 10);
+}
+
 /**
  * @private
  * @throws {Error} no filter label is defined
  */
 function initFilter() {
-	const storedConfig = this[settingsSymbol];
+	const storedSetting = this[settingsSymbol];
 	this[settingsSymbol] = new Settings();
 
 	const result = parseBracketedKeyValueHash(getGlobal().location.hash);
@@ -397,7 +408,7 @@ function initFilter() {
 				element.id = value;
 			}
 
-			let setting = storedConfig.get(value);
+			let setting = storedSetting.get(value);
 
 			if (setting) {
 				this[settingsSymbol].set(setting);
@@ -407,31 +418,22 @@ function initFilter() {
 				const v = escapeAttributeValue(valuesFromHash[element.id]);
 				const searchInput = element.firstElementChild;
 				try {
-					//    searchInput.value = valuesFromHash[element.id];
-					searchInput.value = v; //valuesFromHash[element.id];
+					searchInput.value = v;
 				} catch (error) {}
 			}
 
 			setting = this[settingsSymbol].get(value);
+			let visible = false;
 			if (setting) {
 				setSlotAttribute(element, setting.visible);
-				//style.display = setting.visible ? "block" : "none";
+				visible = setting.visible;
+			} else {
+				visible = getVisibilityFromSlotAttribute(element);
 			}
 
-			//const visible = window.getComputedStyle(element).display !== "none";
-			const visible = getVisibilityFromSlotAttribute(element);
-
 			this[settingsSymbol].set({ value, label, visible });
 		});
-
-	this[filterSelectElementSymbol].setOption(
-		"options",
-		this[settingsSymbol].getOptions(),
-	);
-
-	setTimeout(() => {
-		this[filterSelectElementSymbol].value = this[settingsSymbol].getSelected();
-	}, 10);
+	updateFilterSelections.call(this);
 }
 
 /**
@@ -512,7 +514,6 @@ function initEventHandler() {
 					event.detail.value,
 				);
 				if (filterElement) {
-					//filterElement.style.display = event.detail.checked ? "block" : "none";
 					setSlotAttribute(filterElement, event.detail.checked);
 				}
 
@@ -651,15 +652,18 @@ function initEventHandler() {
 				}
 			});
 
-		doSearch.call(self, { showEffect: false });
+		doSearch
+			.call(self, { showEffect: false })
+			.then(() => {})
+			.catch((e) => addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, e.message));
 	});
 
 	self[locationChangeHandlerSymbol] = (event) => {
-		if (event instanceof HashChangeEvent) {
-			if (event.oldURL === event.newURL) {
-				return;
-			}
-		}
+		// if (event instanceof HashChangeEvent) {
+		// 	if (event.oldURL === event.newURL) {
+		// 		return;
+		// 	}
+		// }
 	};
 
 	self.addEventListener("keyup", (event) => {
@@ -788,8 +792,7 @@ function updateFilterTabs() {
 
 				element.insertAdjacentHTML(
 					"beforeend",
-					`
-             <div data-monster-button-label="${name}"
+					`<div data-monster-button-label="${name}"
              data-monster-removable="true" 
              data-monster-query="${escapedQuery}" data-monster-role="filter-tab" >
              </div>`,
@@ -1054,7 +1057,8 @@ function getControlValuesFromLabel(label) {
  * @private
  * @returns {Promise<unknown>}
  */
-function initFromConfig() {
+function initFromConfig() {;
+
 	const document = getDocument();
 	const host = document.querySelector("monster-host");
 
@@ -1068,7 +1072,7 @@ function initFromConfig() {
 		host
 			.getConfig(configKey)
 			.then((config) => {
-				if (config && isObject(config)) {
+				if ((config && isObject(config)) || isArray(config)) {
 					this[settingsSymbol].setOptions(config);
 				}
 				resolve();

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

@@ -76,6 +76,9 @@
         border-bottom: 1px dashed var(--monster-bg-color-primary-2);
         box-sizing: border-box;
 
+        min-width: 0;
+        overflow: auto;
+
         &.start {
             justify-content: flex-start;
         }

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

@@ -13,7 +13,6 @@
     width: 100%;
 }
 
-
 [data-monster-role=control] {
 
     & .hidden {
@@ -33,7 +32,7 @@
 
         align-items: flex-end;
         display: flex;
-        justify-content: space-between;
+        justify-content: flex-start;
         width: 100%;
         flex-direction: column;
 
@@ -44,7 +43,7 @@
             width: 100%;
             column-gap: 1rem;
             row-gap: 0.5rem;
-            justify-content: space-between;
+            justify-content: flex-start;
 
 
             & ::slotted(label) {