@schukai/monster 4.40.1 → 4.42.0

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 
 
+## [4.42.0] - 2025-09-28
+
+### Add Features
+
+- Manual adjustment of the widths of the data table columns [#335](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/335); nupdate control [#334](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/334)
+### Changes
+
+- clean up issues
+
+
+
+## [4.41.0] - 2025-09-27
+
+### Add Features
+
+- new quantity control [#334](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/334)
+### Bug Fixes
+
+- dark/lightmode view
+### Changes
+
+- work in progress
+- work in progress
+
+
+
 ## [4.40.1] - 2025-09-26
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.4","@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":"4.40.1"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.4","@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":"4.42.0"}

package/source/components/datatable/constants.mjs

@@ -105,19 +105,19 @@ const ATTRIBUTE_DATATABLE_MODE_HIDDEN = "hidden";
 const ATTRIBUTE_DATATABLE_MODE_VISIBLE = "visible";
 
 export {
-	ATTRIBUTE_DATASOURCE,
-	ATTRIBUTE_DATASOURCE_SELECTOR,
-	ATTRIBUTE_DATASOURCE_ARGUMENTS,
-	ATTRIBUTE_DATATABLE_GRID_TEMPLATE,
-	ATTRIBUTE_DATATABLE_HEAD,
-	ATTRIBUTE_DATATABLE_SORTABLE,
-	ATTRIBUTE_DATATABLE_MODE,
-	ATTRIBUTE_DATATABLE_INDEX,
-	ATTRIBUTE_DATATABLE_ALIGN,
-	ATTRIBUTE_DATATABLE_MODE_FIXED,
-	ATTRIBUTE_DATATABLE_RESPONSIVE_BREAKPOINT,
-	ATTRIBUTE_DATATABLE_MODE_VISIBLE,
-	ATTRIBUTE_DATATABLE_MODE_HIDDEN,
-	STYLE_DISPLAY_MODE_BLOCK,
-	ATTRIBUTE_DATATABLE_FEATURES,
+  ATTRIBUTE_DATASOURCE,
+  ATTRIBUTE_DATASOURCE_SELECTOR,
+  ATTRIBUTE_DATASOURCE_ARGUMENTS,
+  ATTRIBUTE_DATATABLE_GRID_TEMPLATE,
+  ATTRIBUTE_DATATABLE_HEAD,
+  ATTRIBUTE_DATATABLE_SORTABLE,
+  ATTRIBUTE_DATATABLE_MODE,
+  ATTRIBUTE_DATATABLE_INDEX,
+  ATTRIBUTE_DATATABLE_ALIGN,
+  ATTRIBUTE_DATATABLE_MODE_FIXED,
+  ATTRIBUTE_DATATABLE_RESPONSIVE_BREAKPOINT,
+  ATTRIBUTE_DATATABLE_MODE_VISIBLE,
+  ATTRIBUTE_DATATABLE_MODE_HIDDEN,
+  STYLE_DISPLAY_MODE_BLOCK,
+  ATTRIBUTE_DATATABLE_FEATURES,
 };

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

@@ -18,17 +18,17 @@ import { instanceSymbol } from "../../../constants.mjs";
 import { Observer } from "../../../types/observer.mjs";
 import { ATTRIBUTE_DATATABLE_SORTABLE } from "../../constants.mjs";
 import {
-	validateIterable,
-	validateInstance,
+  validateIterable,
+  validateInstance,
 } from "../../../types/validate.mjs";
 import { Formatter } from "../../../text/formatter.mjs";
 
 export {
-	Header,
-	DIRECTION_ASC,
-	DIRECTION_DESC,
-	DIRECTION_NONE,
-	createOrderStatement,
+  Header,
+  DIRECTION_ASC,
+  DIRECTION_DESC,
+  DIRECTION_NONE,
+  createOrderStatement,
 };
 
 /**
@@ -60,185 +60,211 @@ const DIRECTION_NONE = "";
  * @summary The Header component is a basic class for the datatable component.
  */
 class Header extends Base {
-	constructor() {
-		super();
-
-		/**
-		 * - attachInternalObserver
-		 * - detachInternalObserver
-		 * - containsInternalObserver
-		 * - setInternal
-		 * - setInternals
-		 * - getInternal
-		 */
-		equipWithInternal.call(this);
-
-		this.attachInternalObserver(
-			new Observer(() => {
-				updateStruct.call(this);
-			}),
-		);
-	}
-
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @return {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/datatable/header@@instance");
-	}
-
-	/**
-	 *
-	 * @return {object}
-	 */
-	get internalDefaults() {
-		return {
-			field: undefined,
-			html: undefined,
-			order: undefined,
-			direction: undefined,
-			label: undefined,
-			labelKey: undefined,
-			classes: undefined,
-			index: undefined,
-			mode: undefined,
-			grid: undefined,
-			features: undefined,
-			orderTemplate: undefined,
-		};
-	}
-
-	/**
-	 */
-	changeDirection() {
-		let direction = this.getInternal("direction");
-		if (direction === DIRECTION_ASC) {
-			direction = DIRECTION_DESC;
-		} else if (direction === DIRECTION_DESC) {
-			direction = DIRECTION_NONE;
-		} else {
-			direction = DIRECTION_ASC;
-		}
-		this.setInternal("direction", direction);
-	}
-
-	/**
-	 *
-	 * @param {string} direction
-	 */
-	setDirection(direction) {
-		this.setInternal("direction", direction);
-	}
-
-	/**
-	 * @param {string} field
-	 */
-	set field(field) {
-		this.setInternal("field", String(field));
-	}
-
-	/**
-	 * @param {string} direction
-	 */
-	set direction(direction) {
-		this.setInternal("direction", String(direction));
-	}
-
-	set labelKey(labelKey) {
-		this.setInternal("labelKey", String(labelKey));
-	}
-
-	/**
-	 * @param {string} label
-	 */
-	set label(label) {
-		this.setInternal("label", String(label));
-	}
-
-	/**
-	 * @param {string} classes
-	 */
-	set classes(classes) {
-		this.setInternal("classes", String(classes));
-	}
-
-	/**
-	 * @param {number} index
-	 */
-	set index(index) {
-		this.setInternal("index", String(index));
-	}
-
-	/**
-	 * @return {string}
-	 */
-	get grid() {
-		return this.getInternal("grid");
-	}
-
-	/**
-	 * @return {string}
-	 */
-	get labelKey() {
-		return this.getInternal("labelKey");
-	}
-
-	/**
-	 * @return {string}
-	 */
-	get html() {
-		return this.getInternal("html");
-	}
-
-	/**
-	 * @return {string}
-	 */
-	get order() {
-		return this.getInternal("order");
-	}
-
-	/**
-	 * @return {string}
-	 */
-	get field() {
-		return this.getInternal("field");
-	}
-
-	/**
-	 * @return {string}
-	 */
-	get index() {
-		return this.getInternal("index");
-	}
-
-	/**
-	 * @return {string}
-	 */
-	get classes() {
-		return this.getInternal("classes");
-	}
-
-	/**
-	 * @return {string}
-	 */
-	get label() {
-		return this.getInternal("label");
-	}
-
-	/**
-	 * @return {string}
-	 */
-	get direction() {
-		return this.getInternal("direction");
-	}
-
-	/**
-	 * @return {string}
-	 */
-	get mode() {
-		return this.getInternal("mode");
-	}
+  constructor() {
+    super();
+
+    /**
+     * - attachInternalObserver
+     * - detachInternalObserver
+     * - containsInternalObserver
+     * - setInternal
+     * - setInternals
+     * - getInternal
+     */
+    equipWithInternal.call(this);
+
+    this.attachInternalObserver(
+      new Observer(() => {
+        updateStruct.call(this);
+      }),
+    );
+  }
+
+  /**
+   * This method is called by the `instanceof` operator.
+   * @return {symbol}
+   */
+  static get [instanceSymbol]() {
+    return Symbol.for("@schukai/monster/components/datatable/header@@instance");
+  }
+
+  /**
+   *
+   * @return {object}
+   */
+  get internalDefaults() {
+    return {
+      field: undefined,
+      html: undefined,
+      order: undefined,
+      direction: undefined,
+      label: undefined,
+      labelKey: undefined,
+      classes: undefined,
+      index: undefined,
+      mode: undefined,
+      grid: undefined,
+      features: undefined,
+      orderTemplate: undefined,
+      resizable: false,
+      initialWidth: undefined,
+    };
+  }
+
+  /**
+   */
+  changeDirection() {
+    let direction = this.getInternal("direction");
+    if (direction === DIRECTION_ASC) {
+      direction = DIRECTION_DESC;
+    } else if (direction === DIRECTION_DESC) {
+      direction = DIRECTION_NONE;
+    } else {
+      direction = DIRECTION_ASC;
+    }
+    this.setInternal("direction", direction);
+  }
+
+  /**
+   *
+   * @param {string} direction
+   */
+  setDirection(direction) {
+    this.setInternal("direction", direction);
+  }
+
+  /**
+   * @param {string} field
+   */
+  set field(field) {
+    this.setInternal("field", String(field));
+  }
+
+  /**
+   * @param {string} direction
+   */
+  set direction(direction) {
+    this.setInternal("direction", String(direction));
+  }
+
+  set labelKey(labelKey) {
+    this.setInternal("labelKey", String(labelKey));
+  }
+
+  /**
+   * @param {string} label
+   */
+  set label(label) {
+    this.setInternal("label", String(label));
+  }
+
+  /**
+   * @param {string} classes
+   */
+  set classes(classes) {
+    this.setInternal("classes", String(classes));
+  }
+
+  /**
+   * @param {number} index
+   */
+  set index(index) {
+    this.setInternal("index", String(index));
+  }
+
+  set resizable(resizable) {
+    this.setInternal("resizable", Boolean(resizable));
+  }
+
+  set initialWidth(initialWidth) {
+    this.setInternal("initialWidth", String(initialWidth));
+  }
+
+  set orderTemplate(orderTemplate) {
+    this.setInternal("orderTemplate", String(orderTemplate));
+  }
+
+  /**
+   * @return {string}
+   */
+  get grid() {
+    return this.getInternal("grid");
+  }
+
+  /**
+   * @return {string}
+   */
+  get labelKey() {
+    return this.getInternal("labelKey");
+  }
+
+  /**
+   * @return {string}
+   */
+  get html() {
+    return this.getInternal("html");
+  }
+
+  /**
+   * @return {string}
+   */
+  get order() {
+    return this.getInternal("order");
+  }
+
+  /**
+   * @return {string}
+   */
+  get field() {
+    return this.getInternal("field");
+  }
+
+  /**
+   * @return {string}
+   */
+  get index() {
+    return this.getInternal("index");
+  }
+
+  /**
+   * @return {string}
+   */
+  get classes() {
+    return this.getInternal("classes");
+  }
+
+  /**
+   * @return {string}
+   */
+  get label() {
+    return this.getInternal("label");
+  }
+
+  /**
+   * @return {string}
+   */
+  get direction() {
+    return this.getInternal("direction");
+  }
+
+  /**
+   * @return {string}
+   */
+  get mode() {
+    return this.getInternal("mode");
+  }
+
+  get resizable() {
+    return this.getInternal("resizable");
+  }
+
+  get initialWidth() {
+    return this.getInternal("initialWidth");
+  }
+
+  get orderTemplate() {
+    return this.getInternal("orderTemplate");
+  }
 }
 
 /**
@@ -248,50 +274,51 @@ class Header extends Base {
  * @return {string}
  */
 function createOrderStatement(headers, delimiter = ",") {
-	validateIterable(headers);
-
-	const oderStatement = [];
-	for (const header of headers) {
-		validateInstance(header, Header);
-		const order = header.getInternal("order");
-
-		if (!order) {
-			continue;
-		}
-		oderStatement.push(order);
-	}
-	return oderStatement.join(delimiter);
+  validateIterable(headers);
+
+  const oderStatement = [];
+  for (const header of headers) {
+    validateInstance(header, Header);
+    const order = header.getInternal("order");
+
+    if (!order) {
+      continue;
+    }
+    oderStatement.push(order);
+  }
+  return oderStatement.join(delimiter);
 }
 
 /**
  * @private
  */
 function updateStruct() {
-	const label = this.getInternal("label");
-	const direction = this.getInternal("direction");
-	const field = this.getInternal("field");
-
-	let order = "";
-
-	if (!field) {
-		this.setInternal("order", order);
-		this.setInternal("html", label);
-		return;
-	}
-
-	if (direction) {
-		const tmpl = this.getInternal("orderTemplate");
-		const formatter = new Formatter({
-			direction: direction,
-			label: label,
-			field: field,
-		});
-		order = formatter.format(tmpl);
-	}
-
-	this.setInternal("order", order);
-	this.setInternal(
-		"html",
-		`<a href="#" ${ATTRIBUTE_DATATABLE_SORTABLE}="${order}">${label}</a>`,
-	);
+  const label = this.getInternal("label");
+  const direction = this.getInternal("direction");
+  const field = this.getInternal("field");
+  const isResizable = this.getInternal("resizable");
+
+  let order = "";
+  let htmlContent = label;
+
+  if (field) {
+    if (direction) {
+      const tmpl = this.getInternal("orderTemplate");
+      const formatter = new Formatter({
+        direction: direction,
+        label: label,
+        field: field,
+      });
+      order = formatter.format(tmpl);
+    }
+    htmlContent = `<a href="#" ${ATTRIBUTE_DATATABLE_SORTABLE}="${order}">${label}</a>`;
+  }
+
+  if (isResizable) {
+    const resizeHandleSVG = `<svg width="12" height="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="8" r="1.5"></circle><circle cx="9" cy="12" r="1.5"></circle><circle cx="9" cy="16" r="1.5"></circle><circle cx="15" cy="8" r="1.5"></circle><circle cx="15" cy="12" r="1.5"></circle><circle cx="15" cy="16" r="1.5"></circle></svg>`;
+    htmlContent += `<div class="resize-handle" data-monster-role="resize-handle">${resizeHandleSVG}</div>`;
+  }
+
+  this.setInternal("order", order);
+  this.setInternal("html", htmlContent);
 }