@schukai/monster 4.98.1 → 4.99.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.99.0] - 2026-01-15
+
+### Add Features
+
+- Add a checklist component to enhance task tracking
+
+
+
 ## [4.98.1] - 2026-01-14
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","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.98.1"}
+{"author":"Volker Schukai","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.99.0"}

package/source/components/form/checklist.mjs

@@ -0,0 +1,361 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact Volker Schukai.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import { CustomControl } from "../../dom/customcontrol.mjs";
+import { Observer } from "../../types/observer.mjs";
+import { clone } from "../../util/clone.mjs";
+import { isArray, isObject, isString, isNumber } from "../../types/is.mjs";
+import {
+	assembleMethodSymbol,
+	registerCustomElement,
+	attributeObserverSymbol,
+} from "../../dom/customelement.mjs";
+import { fireCustomEvent, fireEvent, findTargetElementFromEvent } from "../../dom/events.mjs";
+import { ChecklistStyleSheet } from "./stylesheet/checklist.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
+
+export { Checklist };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const controlElementSymbol = Symbol("controlElement");
+
+/**
+ * Checklist control for displaying and tracking a list of items.
+ *
+ * @summary A checklist control with change events and form integration.
+ */
+class Checklist extends CustomControl {
+	/**
+	 * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
+	 *
+	 * @property {Array} items The checklist items.
+	 * @property {boolean} disabled Disabled state.
+	 * @property {Object} templates Template definitions.
+	 * @property {string} templates.main Main template.
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			items: [],
+			disabled: false,
+			templates: {
+				main: getTemplate(),
+			},
+		});
+	}
+
+	/**
+	 * @return {void}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+		initAttributeObservers.call(this);
+		normalizeItemsOption.call(this);
+		syncFormValue.call(this);
+
+		this.attachObserver(
+			new Observer(() => {
+				syncFormValue.call(this);
+			}),
+		);
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [ChecklistStyleSheet];
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-checklist";
+	}
+
+	/**
+	 * @returns {Array}
+	 */
+	get value() {
+		return getCheckedIds.call(this);
+	}
+
+	/**
+	 * @param {Array} value
+	 */
+	set value(value) {
+		if (!isArray(value)) {
+			value = [];
+		}
+		setCheckedIds.call(this, value);
+	}
+
+	/**
+	 * @return {Array}
+	 */
+	getItems() {
+		return clone(this.getOption("items", []));
+	}
+
+	/**
+	 * @return {Array}
+	 */
+	getCheckedItems() {
+		return this.getItems().filter((item) => Boolean(item?.checked));
+	}
+
+	/**
+	 * @param {Array} items
+	 * @return {Checklist}
+	 */
+	setItems(items) {
+		const normalized = normalizeItems(items);
+		this.setOption("items", normalized.items);
+		syncFormValue.call(this);
+		return this;
+	}
+}
+
+/**
+ * @private
+ */
+function initControlReferences() {
+	this[controlElementSymbol] = this.shadowRoot?.querySelector(
+		"[data-monster-role=control]",
+	);
+}
+
+/**
+ * @private
+ */
+function initEventHandler() {
+	this.addEventListener("change", (event) => {
+		const checkbox = findTargetElementFromEvent(
+			event,
+			"data-monster-role",
+			"checkbox",
+		);
+		if (!(checkbox instanceof HTMLInputElement)) {
+			return;
+		}
+
+		if (this.getOption("disabled") === true) {
+			event.preventDefault();
+			return;
+		}
+
+		const itemId = checkbox.getAttribute("data-item-id");
+		if (!itemId) {
+			return;
+		}
+
+		const items = this.getOption("items", []);
+		const updated = clone(items).map((item) => {
+			if (item?.id === itemId) {
+				return Object.assign({}, item, { checked: checkbox.checked });
+			}
+			return item;
+		});
+
+		this.setOption("items", updated);
+		syncFormValue.call(this);
+
+		fireEvent(this, "change");
+		fireCustomEvent(this, "monster-checklist-change", {
+			id: itemId,
+			checked: checkbox.checked,
+			item: updated.find((item) => item?.id === itemId),
+			items: clone(updated),
+			value: getCheckedIds.call(this),
+		});
+	});
+}
+
+/**
+ * @private
+ */
+function normalizeItemsOption() {
+	if (applyItemsAttribute.call(this)) {
+		return;
+	}
+	const normalized = normalizeItems(this.getOption("items", []));
+	if (normalized.changed) {
+		this.setOption("items", normalized.items);
+	}
+}
+
+/**
+ * @private
+ * @param {Array} items
+ * @return {{items: Array, changed: boolean}}
+ */
+function normalizeItems(items) {
+	const normalized = [];
+	let changed = false;
+
+	if (!isArray(items)) {
+		return { items: [], changed: true };
+	}
+
+	for (const [index, entry] of Object.entries(items)) {
+		const idx = Number(index);
+		let item = entry;
+
+		if (isString(item) || isNumber(item)) {
+			item = {
+				id: `item-${idx}`,
+				label: String(item),
+				checked: false,
+				disabled: false,
+			};
+			changed = true;
+		} else if (isObject(item)) {
+			item = Object.assign({}, item, {
+				id: item.id ?? `item-${idx}`,
+				label: item.label ?? "",
+				checked: Boolean(item.checked),
+				disabled: Boolean(item.disabled),
+			});
+			if (item.id !== entry.id || item.label !== entry.label) {
+				changed = true;
+			}
+		} else {
+			item = {
+				id: `item-${idx}`,
+				label: "",
+				checked: false,
+				disabled: false,
+			};
+			changed = true;
+		}
+
+		normalized.push(item);
+	}
+
+	return { items: normalized, changed };
+}
+
+/**
+ * @private
+ * @return {boolean}
+ */
+function applyItemsAttribute() {
+	if (!this.hasAttribute("data-monster-option-items")) {
+		return false;
+	}
+
+	const raw = this.getAttribute("data-monster-option-items");
+	if (!raw) {
+		this.setOption("items", []);
+		return true;
+	}
+
+	try {
+		const parsed = JSON.parse(raw);
+		if (!isArray(parsed)) {
+			addAttributeToken(
+				this,
+				ATTRIBUTE_ERRORMESSAGE,
+				"data-monster-option-items must be a JSON array",
+			);
+			return true;
+		}
+		const normalized = normalizeItems(parsed);
+		this.setOption("items", normalized.items);
+		return true;
+	} catch (error) {
+		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message || String(error));
+		return true;
+	}
+}
+
+/**
+ * @private
+ */
+function initAttributeObservers() {
+	this[attributeObserverSymbol]["data-monster-option-items"] = () => {
+		applyItemsAttribute.call(this);
+		syncFormValue.call(this);
+	};
+}
+
+/**
+ * @private
+ * @return {Array}
+ */
+function getCheckedIds() {
+	const items = this.getOption("items", []);
+	return items.filter((item) => item?.checked).map((item) => item.id);
+}
+
+/**
+ * @private
+ * @param {Array} ids
+ */
+function setCheckedIds(ids) {
+	const items = this.getOption("items", []);
+	const updated = clone(items).map((item) =>
+		Object.assign({}, item, { checked: ids.includes(item?.id) }),
+	);
+	this.setOption("items", updated);
+	syncFormValue.call(this);
+}
+
+/**
+ * @private
+ */
+function syncFormValue() {
+	const value = JSON.stringify(getCheckedIds.call(this));
+	if (typeof this.setFormValue === "function") {
+		this.setFormValue(value);
+	}
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <template id="item">
+            <label data-monster-role="item"
+                   part="item"
+                   data-monster-attributes="data-item-id path:item.id, class path:item.disabled | ?:disabled">
+                <input type="checkbox"
+                       data-monster-role="checkbox"
+                       part="checkbox"
+                       data-monster-attributes="data-item-id path:item.id, checked path:item.checked | ?:checked, disabled path:item.disabled | ?:disabled">
+                <span data-monster-role="label"
+                      part="label"
+                      data-monster-replace="path:item.label | default: "></span>
+            </label>
+        </template>
+
+        <div data-monster-role="control" part="control">
+            <div data-monster-role="items"
+                 part="items"
+                 data-monster-insert="item path:items"></div>
+        </div>
+    `;
+}
+
+registerCustomElement(Checklist);

package/source/components/form/style/checklist.pcss

@@ -0,0 +1,49 @@
+
+:host {
+  box-sizing: border-box;
+  color: var(--monster-color-primary-1);
+  display: block;
+  font-family: var(--monster-font-family);
+  font-size: 1rem;
+  line-height: 1.4;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+[data-monster-role="control"] {
+  display: block;
+}
+
+[data-monster-role="items"] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+[data-monster-role="item"] {
+  align-items: flex-start;
+  cursor: pointer;
+  display: flex;
+  gap: 0.5rem;
+  line-height: 1.4;
+}
+
+[data-monster-role="item"].disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+[data-monster-role="checkbox"] {
+  accent-color: var(--monster-color-secondary-1);
+  margin-top: 0.2rem;
+}
+
+[data-monster-role="label"] {
+  display: inline-block;
+  min-width: 0;
+  word-break: break-word;
+}

package/source/components/form/stylesheet/checklist.mjs

@@ -0,0 +1,31 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, 2026. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact Volker Schukai.
+ */
+
+import {addAttributeToken} from "../../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+
+export {ChecklistStyleSheet}
+
+/**
+ * @private
+ * @type {CSSStyleSheet}
+ */
+const ChecklistStyleSheet = new CSSStyleSheet();
+
+try {
+  ChecklistStyleSheet.insertRule(`
+@layer checklist { 
+:host{box-sizing:border-box;color:var(--monster-color-primary-1);display:block;font-family:var(--monster-font-family);font-size:1rem;line-height:1.4}*,:after,:before{box-sizing:border-box}[data-monster-role=control]{display:block}[data-monster-role=items]{display:flex;flex-direction:column;gap:.4rem}[data-monster-role=item]{align-items:flex-start;cursor:pointer;display:flex;gap:.5rem;line-height:1.4}[data-monster-role=item].disabled{cursor:not-allowed;opacity:.6}[data-monster-role=checkbox]{accent-color:var(--monster-color-secondary-1);margin-top:.2rem}[data-monster-role=label]{display:inline-block;min-width:0;word-break:break-word} 
+}`, 0);
+} catch (e) {
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+}

package/source/components/state/stylesheet/thread-message.mjs

@@ -0,0 +1,38 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, 2026. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact Volker Schukai.
+ */
+
+import { addAttributeToken } from "../../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
+
+export { ThreadMessageStyleSheet };
+
+/**
+ * @private
+ * @type {CSSStyleSheet}
+ */
+const ThreadMessageStyleSheet = new CSSStyleSheet();
+
+try {
+	ThreadMessageStyleSheet.insertRule(
+		`
+@layer thread-message { 
+:host{box-sizing:border-box;color:var(--monster-color-primary-1);display:block;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;line-height:1.4}*,*::before,*::after{box-sizing:border-box}[data-monster-role=content]{display:block}a,a:active,a:focus,a:hover,a:link,a:visited{color:var(--monster-color-secondary-1);text-decoration:none;transition:color .3s ease-in-out,text-decoration-color .3s ease-in-out}a:active,a:focus,a:hover{color:var(--monster-color-primary-2);text-decoration:underline;text-decoration-color:var(--monster-color-secondary-1);text-decoration-thickness:1px}a:focus{outline:1px dashed var(--monster-color-selection-1);outline-offset:2px}@media (prefers-color-scheme: dark){a,a:active,a:focus,a:hover,a:link,a:visited{color:var(--monster-color-amber-2)}a:focus{outline:1px dashed var(--monster-color-selection-4)}}p{font-size:1rem;font-weight:400;line-height:1.6;margin:0 0 .65rem;text-align:justify}p:last-child{margin-bottom:0}.monster-paragraph{font-size:1rem;font-weight:400;line-height:1.6;text-align:justify}code{font-family:var(--monster-font-family-monospace)}h1{font-size:3rem;font-weight:400;line-height:1.15;margin:4rem 0 1.5rem}h2{font-size:2.5rem;font-weight:400;line-height:1.2;margin:4rem 0 1.5rem}h3{font-size:2rem;font-weight:400;line-height:1.25;margin:4rem 0 1.25rem}h4{font-size:1.5rem;font-weight:400;line-height:1.3;margin:4rem 0 1.25rem}h5{font-size:1.4rem;font-weight:bolder;line-height:1.3;margin:4rem 0 1.25rem}h6{font-size:1.3rem;font-weight:700;line-height:1.3;margin:4rem 0 1.25rem}p+h1{margin-top:3.75rem}p+h2{margin-top:3rem}p+h3{margin-top:2.25rem}p+h4{margin-top:1.5rem}p+h5{margin-top:.75rem}p+h6{margin-top:0}blockquote+h1,ol+h1,p+h1,pre+h1,table+h1,ul+h1{margin-top:2rem}article+h1,div+h1,section+h1{margin-top:0}blockquote+h2,ol+h2,p+h2,pre+h2,table+h2,ul+h2{margin-top:2rem}article+h2,div+h2,section+h2{margin-top:0}blockquote+h3,ol+h3,p+h3,pre+h3,table+h3,ul+h3{margin-top:2rem}article+h3,div+h3,section+h3{margin-top:0}blockquote+h4,ol+h4,p+h4,pre+h4,table+h4,ul+h4{margin-top:2rem}article+h4,div+h4,section+h4{margin-top:0}blockquote+h5,ol+h5,p+h5,pre+h5,table+h5,ul+h5{margin-top:2rem}article+h5,div+h5,section+h5{margin-top:0}blockquote+h6,ol+h6,p+h6,pre+h6,table+h6,ul+h6{margin-top:2rem}article+h6,div+h6,section+h6{margin-top:0}ul,ol{margin:0 0 .65rem;padding-left:1.25rem}li{margin:0 0 .25rem}blockquote{margin:0 0 .65rem;padding:0 0 0 .75rem;border-left:2px solid var(--monster-bg-color-primary-3)}img{height:auto;max-width:100%} 
+}`,
+		0,
+	);
+} catch (e) {
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
+}

package/source/components/state/thread/message.mjs

@@ -0,0 +1,80 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact Volker Schukai.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../../constants.mjs";
+import {
+	CustomElement,
+	registerCustomElement,
+} from "../../../dom/customelement.mjs";
+import { ThreadMessageStyleSheet } from "../stylesheet/thread-message.mjs";
+
+export { ThreadMessage };
+
+/**
+ * The ThreadMessage component encapsulates a message in a shadow root
+ * to prevent list styling from the thread control from leaking in.
+ *
+ * @summary Isolated message content for thread entries.
+ */
+class ThreadMessage extends CustomElement {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for(
+			"@schukai/monster/components/state/thread-message@@instance",
+		);
+	}
+
+	/**
+	 * @return {object}
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			content: "",
+			templates: {
+				main: getTemplate(),
+			},
+		});
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-thread-message";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [ThreadMessageStyleSheet];
+	}
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="content" part="content"
+             data-monster-replace="path:content"></div>
+    `;
+}
+
+registerCustomElement(ThreadMessage);

package/source/components/state/thread.mjs

@@ -20,6 +20,7 @@ import {
 } from "../../dom/customelement.mjs";
 import { ThreadStyleSheet } from "./stylesheet/thread.mjs";
 import { Entry } from "./thread/entry.mjs";
+import "./thread/message.mjs";
 import { validateInstance, validateString } from "../../types/validate.mjs";
 import "./state.mjs";
 import { isArray } from "../../types/is.mjs";
@@ -983,9 +984,8 @@ function getTemplate() {
                               data-monster-replace="path:entry.date | time-ago"
                               data-monster-attributes="title path:entry.date | datetime"></span>
                     </div>
-                    <div data-monster-role="message"
-                         data-monster-replace="path:entry.message"
-                         data-monster-attributes="class path:entry.message | ?:message:hidden"></div>
+                    <monster-thread-message data-monster-role="message"
+                         data-monster-attributes="data-monster-option-content path:entry.message | default: , class path:entry.message | ?:message:hidden"></monster-thread-message>
                     <div data-monster-role="thread-controls">
                         <button type="button"
                                 class="monster-button-outline-secondary"

package/source/monster.mjs

@@ -76,6 +76,7 @@ export * from "./components/form/shadow-reload.mjs";
 export * from "./components/form/button.mjs";
 export * from "./components/form/field-set.mjs";
 export * from "./components/form/toggle-switch.mjs";
+export * from "./components/form/checklist.mjs";
 export * from "./components/form/types/state.mjs";
 export * from "./components/form/template.mjs";
 export * from "./components/form/constants.mjs";