@schukai/monster 3.56.1 → 3.58.0

package/CHANGELOG.md

@@ -1,9 +1,55 @@
 
+## [3.58.0] - 2024-03-17
+
+### Add Features
+
+- new select feature emptyValueIfNoOptions [#142](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/142)
+### Changes
+
+- update deploy script
+- lint code
+- build-webtest
+- lint code
+- code format
+- release and publish to npm new version 3.57.0
+- tests and more
+
+## [3.57.0] - 2024-03-06
+
+### Add Features
+
+- [#162](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/162)
+- new updaterTransformerMethodsSymbol method [#163](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/163)
+- new updaterTransformerMethodsSymbol method [#163](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/163)
+### Bug Fixes
+
+- [#165](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/165)
+- bind this to callback and fix timing [#158](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/158) [#164](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/164)
+- add arrowdown handler [#160](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/160)  [#161](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/161)
+- add arrowdown handler [#160](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/160)  [#161](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/161)
+### Changes
+
+- tests and more
+- fix tests
+- updates [#160](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/160)
+- whitespace  [#160](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/160)
+- optimize outline [#160](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/160)
+- optimize outline [#160](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/160)
+- rename internal function [#160](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/160)
+- fix missing fs bug
+- release and publish to npm new version 3.56.1
+### Documentation
+
+- typo [#160](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/160)
+
 ## [3.56.1] - 2024-02-26
 
 ### Bug Fixes
 
 - [3] is not the right way [#151](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/151)
+### Changes
+
+- release and publish to npm new version 3.56.1
 
 ## [3.56.0] - 2024-02-26
 

package/example/components/form/toggle-switch.mjs

@@ -0,0 +1,7 @@
+import {Switch} from '@schukai/component-form/source/toggle-switch.js';
+
+// create element
+const toggleSwitch = document.createElement('monster-toggle-switch');
+
+// insert element into the DOM
+document.body.appendChild(toggleSwitch);

package/package.json

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

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

@@ -5,8 +5,8 @@
 
 import { instanceSymbol } from "../../constants.mjs";
 import { diff } from "../../data/diff.mjs";
-import {addAttributeToken} from "../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
 import {
 	assembleMethodSymbol,
 	CustomElement,
@@ -116,7 +116,7 @@ class ChangeButton extends CustomElement {
 	 * This method is responsible for assembling the component.
 	 */
 	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();;
+		super[assembleMethodSymbol]();
 
 		initControlReferences.call(this);
 		initEventHandler.call(this);
@@ -213,7 +213,11 @@ function getIndex() {
 
 	const ref = row.getAttribute("data-monster-insert-reference");
 	if (!ref) {
-		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, "reference is missing or empty");
+		addAttributeToken(
+			this,
+			ATTRIBUTE_ERRORMESSAGE,
+			"reference is missing or empty",
+		);
 		return;
 	}
 

package/source/components/datatable/dataset.mjs

@@ -136,7 +136,7 @@ class DataSet extends CustomElement {
 		return "monster-dataset";
 	}
 
-	write() {;
+	write() {
 
 		return new Promise((resolve, reject) => {
 			if (!this[datasourceLinkedElementSymbol]) {

package/source/components/datatable/filter.mjs

@@ -815,7 +815,6 @@ function updateFilterTabs() {
  * @returns {Promise<*>}
  */
 function doSearch({ showEffect } = { showEffect: true }) {
-
 	this.resetFailureMessage();
 
 	if (showEffect) {

package/source/components/form/button.mjs

@@ -85,7 +85,7 @@ class Button extends CustomControl {
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 		initControlReferences.call(this);
-		initEventhandler.call(this);
+		initEventHandler.call(this);
 		return this;
 	}
 
@@ -257,10 +257,10 @@ class Button extends CustomControl {
 
 /**
  * @private
- * @return {initEventhandler}
+ * @return {initEventHandler}
  * @fires Monster.Components.Form.event:monster-button-clicked
  */
-function initEventhandler() {
+function initEventHandler() {
 	const self = this;
 	const button = this[buttonElementSymbol];
 

package/source/components/form/select.mjs

@@ -24,6 +24,7 @@ import {
 	assembleMethodSymbol,
 	getSlottedElements,
 	registerCustomElement,
+	updaterTransformerMethodsSymbol,
 } from "../../dom/customelement.mjs";
 import {
 	findTargetElementFromEvent,
@@ -386,8 +387,8 @@ class Select extends CustomControl {
 	 * @property {Object} toggleEventType=click,touch List of event types to be observed for opening the dropdown
 	 * @property {boolean} delegatesFocus=false lorem [see mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus)
 	 * @property {Object[]} options Selection of key identifier pairs available for selection and displayed in the dropdown.
-	 * @property {string} options[].label Label
-	 * @property {string} options[].value Value
+	 * @property {string} options[].label
+	 * @property {string} options[].value
 	 * @property {string} options[].visibility hidden or visible
 	 * @property {Array} selection Selected options
 	 * @property {Integer} showMaxOptions=10 Maximum number of visible options before a scroll bar should be displayed.
@@ -410,6 +411,7 @@ class Select extends CustomControl {
 	 * @property {Boolean} features.clear=true Display of a delete key for deleting the specific selection
 	 * @property {Boolean} features.lazyLoad=false Load options when first opening the dropdown
 	 * @property {Boolean} features.closeOnSelect=false Close the dropdown when an option is selected (since 3.54.0)
+	 * @property {Boolean} features.emptyValueIfNoOptions=false If no options are available, the selection is set to an empty array
 	 * @property {Boolean} filter.defaultValue=* Default filter value, if the filter is empty
 	 * @property {Boolean} filter.mode=options Filter mode, values: options, remote, disabled
 	 * @property {Object} templates Template definitions
@@ -444,6 +446,7 @@ class Select extends CustomControl {
 					clear: true,
 					lazyLoad: false,
 					closeOnSelect: false,
+					emptyValueIfNoOptions: false,
 				},
 				url: null,
 				labels: {
@@ -523,6 +526,16 @@ class Select extends CustomControl {
 
 		const lazyLoadFlag = self.getOption("features.lazyLoad");
 
+		if (self.hasAttribute("value")) {
+			new Processing(10, () => {
+				this.value = this.getAttribute("value");
+			})
+				.run()
+				.catch((e) => {
+					addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+				});
+		}
+
 		if (self.getOption("url") !== null && !lazyLoadFlag) {
 			setStatusOrRemoveBadges.call(this, "loading");
 
@@ -1010,6 +1023,15 @@ function handleToggleKeyboardEvents(event) {
 			toggle.call(this);
 			event.preventDefault();
 			break;
+		case "ArrowDown":
+			show.call(this);
+			activateCurrentOption.call(this, FOCUS_DIRECTION_DOWN);
+			event.preventDefault();
+			break;
+		case "ArrowUp":
+			hide.call(this);
+			event.preventDefault();
+			break;
 	}
 }
 
@@ -1239,9 +1261,9 @@ function activateCurrentOption(direction) {
 				}
 			}
 		} else {
+			let found = false;
 			while (focused.previousSibling) {
 				focused = focused.previousSibling;
-
 				if (
 					focused instanceof HTMLElement &&
 					focused.hasAttribute(ATTRIBUTE_ROLE) &&
@@ -1249,9 +1271,13 @@ function activateCurrentOption(direction) {
 					focused.matches("[data-monster-visibility=visible]") &&
 					focused.matches(":not([data-monster-filtered=true])")
 				) {
+					found = true;
 					break;
 				}
 			}
+			if (found === false) {
+				focusFilter.call(this);
+			}
 		}
 	}
 
@@ -1266,7 +1292,11 @@ function activateCurrentOption(direction) {
 			focused.focus();
 			focused.setAttribute(`${ATTRIBUTE_PREFIX}focused`, true);
 		}
-	}).run();
+	})
+		.run()
+		.catch((e) => {
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+		});
 }
 
 /**
@@ -1608,6 +1638,7 @@ function gatherState() {
 	const elements = this.shadowRoot.querySelectorAll(
 		`input[type=${type}]:checked`,
 	);
+
 	for (const e of elements) {
 		selection.push({
 			label: getSelectionLabel.call(this, e.value),
@@ -1691,7 +1722,10 @@ function areOptionsAvailableAndInit() {
 
 		this.setOption("messages.control", msg);
 		this.setOption("messages.summary", "");
-		this.setOption("selection", []);
+
+		if (this.getOption("features.emptyValueIfNoOptions") === true) {
+			this.value = "";
+		}
 		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, noOptionsAvailableMessage);
 		return false;
 	}
@@ -1900,7 +1934,11 @@ function setSelection(selection) {
 				}
 			});
 		}
-	}).run();
+	})
+		.run()
+		.catch((e) => {
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+		});
 }
 
 /**
@@ -1910,8 +1948,7 @@ function setSelection(selection) {
  * @throws {TypeError} the result cannot be parsed
  * @throws {TypeError} unsupported response
  */
-function fetchData(url) {;
-
+function fetchData(url) {
 	if (!url) url = this.getOption("url");
 	if (!url) return Promise.resolve();
 
@@ -1957,8 +1994,7 @@ function hide() {
 /**
  * @private
  */
-function show() {;
-
+function show() {
 	if (this.getOption("disabled", undefined) === true) {
 		return;
 	}
@@ -2008,8 +2044,11 @@ function show() {;
 
 		return;
 	}
-	//debugger
-	//const optionsAvailable = areOptionsAvailableAndInit.call(this);
+
+	const options = getOptionElements.call(this);
+	if (options.length === 0) {
+		return;
+	}
 
 	this[popperElementSymbol].style.visibility = "hidden";
 	this[popperElementSymbol].style.display = STYLE_DISPLAY_MODE_BLOCK;
@@ -2234,7 +2273,7 @@ function initEventHandler() {
  * @private
  * @return {Select}
  */
-function setStatusOrRemoveBadges(suggestion) {;
+function setStatusOrRemoveBadges(suggestion) {
 	setTimeout(() => {
 		const selection = this.getOption("selection");
 		const clearAllFlag =
@@ -2368,7 +2407,7 @@ function getTemplate() {
                  data-monster-attributes="
                  data-monster-filtered path:options.filtered,
                  data-monster-visibility path:options.visibility">
-                <label part="option" role="option">
+                <label part="option">
                     <input data-monster-role="option-control"
                            data-monster-attributes="
             type path:type,
@@ -2378,7 +2417,8 @@ function getTemplate() {
             part path:type | prefix:option- | suffix: form,
             class path:options.class 
             " tabindex="-1">
-                    <div data-monster-replace="path:options | index:label" part="option-label"></div>
+                    <div data-monster-replace="path:options | index:label"
+                         part="option-label"></div>
                 </label>
             </div>
         </template>

package/source/components/form/style/button-bar.pcss

@@ -5,6 +5,8 @@
 @import "../../style/typography.pcss";
 @import "../../style/floating-ui.pcss";
 
+:host(monster-button-bar){display:flex;align-items:stretch;}
+
 div[data-monster-role="control"] {
     position: relative;
     height: 100%;

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

@@ -2,6 +2,8 @@
 @import "../../style/button.pcss";
 @import "../../style/border.pcss";
 
+:host(monster-button){display:flex;}
+
 [data-monster-role="control"] {
     display: flex;
     align-items: stretch;   

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

@@ -256,7 +256,7 @@ div[data-monster-role=selection] {
 
 [data-monster-role=option][data-monster-focused=true] {
     outline: 1px dashed var(--monster-color-selection-2);
-    outline-offset: 2px;
+    outline-offset: -2px;
 }
 
 [data-monster-role=option] > label:focus,

package/source/components/form/style/toggle-switch.pcss

@@ -0,0 +1,74 @@
+@import "../../style/color.pcss";
+@import "../../style/theme.pcss";
+@import "../../style/border.pcss";
+
+[data-monster-role=control] {
+
+  font-family: inherit;
+  font-size: 100%;
+  padding: 0.4rem 0.6rem;
+  margin: 0;
+  outline: none;
+  box-sizing: border-box;
+}
+
+[data-monster-role=control]:focus {
+  outline: 1px dashed var(--monster-color-selection-3);
+  outline-offset: 2px;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+  
+  border-color: var(--monster-bg-color-primary-3);
+  border-width: thin;
+  border-style: var(--monster-border-style);
+  transition: background-color 0.2s;
+  display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+
+.switch-radio input[type="radio"] {
+  display: none;
+}
+
+.label{
+    height: 34px;
+    display: block;
+    text-align: center;
+    line-height: 34px;
+    user-select: none;
+}
+
+.switch-slider {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  left: 4px;
+  right: 28px;
+  background-color: var(--monster-bg-color-primary-4);
+  transition: 0.2s;
+}
+
+.switch[data-monster-state="on"] .label.off  {
+  visibility: hidden;
+}
+.switch[data-monster-state="on"] .label.on  {
+  visibility: visible;
+}
+.switch[data-monster-state="off"] .label.off  {
+  visibility: visible;
+}
+.switch[data-monster-state="off"] .label.on  {
+  visibility: hidden;
+}
+
+
+.switch[data-monster-state="on"] .switch-slider  {
+  transform: translateX(24px);
+
+}
+