@schukai/monster 3.85.1 → 3.86.0

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 
 
+## [3.86.0] - 2024-11-13
+
+### Add Features
+
+- new classes for datatables and some css updates [#260](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/260)
+### Bug Fixes
+
+- some layout issues and add labels to small datatable [#260](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/260)
+
+
+
+## [3.85.2] - 2024-11-12
+
+### Bug Fixes
+
+- update some issues and documentaion [#260](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/260)
+### Changes
+
+- code tidy
+
+
+
 ## [3.85.1] - 2024-11-12
 
 ### 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.85.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.0"}

package/source/components/content/copy.mjs

@@ -21,14 +21,12 @@ import {
     ATTRIBUTE_ERRORMESSAGE,
     ATTRIBUTE_ROLE,
 } from "../../dom/constants.mjs";
-import {CustomElement, getSlottedElements} from "../../dom/customelement.mjs";
+import {CustomElement} from "../../dom/customelement.mjs";
 import {
     assembleMethodSymbol,
     registerCustomElement,
 } from "../../dom/customelement.mjs";
 import {getDocument} from "../../dom/util.mjs";
-import {isString} from "../../types/is.mjs";
-import {validateString} from "../../types/validate.mjs";
 import {STYLE_DISPLAY_MODE_BLOCK} from "../form/constants.mjs";
 import {CopyStyleSheet} from "./stylesheet/copy.mjs";
 import {fireCustomEvent} from "../../dom/events.mjs";

package/source/components/datatable/columnbar.mjs

@@ -55,43 +55,17 @@ const dotsContainerElementSymbol = Symbol("dotsContainerElement");
  */
 const popperInstanceSymbol = Symbol("popperInstance");
 
+
 /**
- * The ColumnBar component is used to show and configure the columns of a datatable.
- *
- * <img src="./images/column-bar.png">
- *
- * You can create this control either by specifying the HTML tag <monster-column-bar />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-column-bar');` method.
- *
- * ```html
- * <monster-column-bar></monster-column-bar>
- * ```
+ * A column bar for a datatable
  *
- * Or you can create this CustomControl directly in Javascript:
+ * @fragments /fragments/components/datatable/datatable/
  *
- * ```js
- * import '@schukai/monster/components/datatable/column-bar.mjs';
- * document.createElement('monster-column-bar');
- * ```
- *
- * The Body should have a class "hidden" to ensure that the styles are applied correctly.
- *
- * ```css
- * body.hidden {
- *    visibility: hidden;
- * }
- * ```
- *
- * @startuml column-bar.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- ColumnBar
- * @enduml
+ * @example /examples/components/datatable/empty
  *
  * @copyright schukai GmbH
- * @summary A data set
- */
+ * @summary The ColumnBar component is used to show and configure the columns of a datatable.
+ **/
 class ColumnBar extends CustomElement {
 	/**
 	 * This method is called by the `instanceof` operator.
@@ -137,7 +111,7 @@ class ColumnBar extends CustomElement {
 
 	/**
 	 *
-	 * @return {Monster.Components.Form.Form}
+	 * @return {void}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
@@ -147,7 +121,7 @@ class ColumnBar extends CustomElement {
 	}
 
 	/**
-	 * @return {Array<ColumnBarStyleSheet>}
+	 * @return {CSSStyleSheet[]}
 	 */
 	static getCSSStyleSheet() {
 		return [ColumnBarStyleSheet];
@@ -156,7 +130,7 @@ class ColumnBar extends CustomElement {
 
 /**
  * @private
- * @return {Monster.Components.Datatable.Form}
+ * @return {ColumnBar}
  */
 function initControlReferences() {
 	if (!this.shadowRoot) {
@@ -166,12 +140,15 @@ function initControlReferences() {
 	this[settingsButtonElementSymbol] = this.shadowRoot.querySelector(
 		"[data-monster-role=settings-button]",
 	);
+	
 	this[settingsLayerElementSymbol] = this.shadowRoot.querySelector(
 		"[data-monster-role=settings-layer]",
 	);
+	
 	this[dotsContainerElementSymbol] = this.shadowRoot.querySelector(
 		"[data-monster-role=dots]",
 	);
+	
 	return this;
 }
 
@@ -199,6 +176,7 @@ function initEventHandler() {
 	);
 
 	self[dotsContainerElementSymbol].addEventListener("click", function (event) {
+		
 		const element = findTargetElementFromEvent(
 			event,
 			"data-monster-role",
@@ -220,6 +198,7 @@ function initEventHandler() {
 	});
 
 	self[settingsButtonEventHandlerSymbol] = (event) => {
+		
 		const clickTarget = event.composedPath()?.[0];
 		if (
 			self[settingsLayerElementSymbol] === clickTarget ||
@@ -227,7 +206,7 @@ function initEventHandler() {
 		) {
 			return;
 		}
-		self[settingsLayerElementSymbol].classList.remove("visible");
+		
 		document.body.removeEventListener(
 			"click",
 			self[settingsButtonEventHandlerSymbol],

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

@@ -143,6 +143,7 @@ function initEventHandler() {
 function updateDataSource() {
 	let data = null;
 	getSlottedElements.call(this).forEach((element) => {
+		
 		if (!(element instanceof HTMLScriptElement)) {
 			return;
 		}

package/source/components/datatable/datatable/header.mjs

@@ -56,7 +56,7 @@ const DIRECTION_NONE = "";
  * The Header component is a basic class for the datatable component.
  *
  * @copyright schukai GmbH
- * @summary A datatable
+ * @summary The Header component is a basic class for the datatable component.
  */
 class Header extends Base {
 	constructor() {
@@ -106,6 +106,8 @@ class Header extends Base {
 		};
 	}
 
+	/**
+	 */
 	changeDirection() {
 		let direction = this.getInternal("direction");
 		if (direction === DIRECTION_ASC) {
@@ -120,7 +122,7 @@ class Header extends Base {
 
 	/**
 	 *
-	 * @param direction
+	 * @param {string} direction
 	 */
 	setDirection(direction) {
 		this.setInternal("direction", direction);