@schukai/monster 3.100.11 → 3.100.13

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [3.100.13] - 2025-01-19
+
+### Bug Fixes
+
+- docu and css
+
+
+
+## [3.100.12] - 2025-01-19
+
+### Bug Fixes
+
+- some small issues [#283](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/283)
+
+
+
 ## [3.100.11] - 2025-01-19
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.13","@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.100.11"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.13","@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.100.13"}

package/source/components/form/button.mjs

@@ -49,6 +49,7 @@ export const buttonElementSymbol = Symbol("buttonElement");
  * @example /examples/components/form/button-with-click-event Button with event
  *
  * @issue https://localhost.alvine.dev:8443/development/issues/closed/282.html
+ * @issue https://localhost.alvine.dev:8443/development/issues/closed/283.html
  *
  * @copyright schukai GmbH
  * @summary A beautiful button that can make your life easier and also looks good.

package/source/components/form/confirm-button.mjs

@@ -44,15 +44,17 @@ const confirmButtonElementSymbol = Symbol("confirmButtonElement");
 const cancelButtonElementSymbol = Symbol("cancelButtonElement");
 
 /**
- * A confirm button control.
+ * A confirmation button control.
  *
  * @fragments /fragments/components/form/confirm-button/
  *
- * @example /examples/components/form/confirm-button-simple confirm button
+ * @example /examples/components/form/confirm-button-simple simple confirm button
+ *
+ * @issue https://localhost.alvine.dev:8443/development/issues/closed/283.html
  *
  * @since 1.5.0
  * @copyright schukai GmbH
- * @summary A confirm button control
+ * @summary A confirm button control allowing the user to confirm or cancel an action
  */
 class ConfirmButton extends PopperButton {
 	/**
@@ -67,23 +69,21 @@ class ConfirmButton extends PopperButton {
 	}
 
 	/**
-	 * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
-	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
-	 *
 	 * The individual configuration values can be found in the table.
 	 *
-	 * @property {Object} toggleEventType=click,touch List of event types to be observed for opening the confirm message
 	 * @property {Object} templates Template definitions
 	 * @property {string} templates.main Main template
-	 * @property {string} labels.button='<slot name="button"></slot>' Button label
-	 * @property {string} labels.message='<slot>Should I Stay or Should I Go?</slot>' Message
-	 * @property {string} labels.confirm='<slot name="confirm">Confirm</slot>' Confirm button label
-	 * @property {string} labels.cancel='<slot name="cancel">Cancel</slot>' Cancel button label
-	 * @property {Monster.Components.Form~exampleActionCallback} actions.confirm
-	 * @property {Monster.Components.Form~exampleActionCallback} actions.cancel List of event types to be observed for opening the dropdown
-	 * @property {Object} popper [PopperJS Options](https://popper.js.org/docs/v2/)
-	 * @property {string} popper.placement=top PopperJS placement
-	 * @extends {PopperButton}
+	 * @property {Object} labels Label definitions
+	 * @property {string} labels.button Button label
+	 * @property {string} labels.message Message label
+	 * @property {string} labels.confirm Confirm label
+	 * @property {string} labels.cancel Cancel label
+	 * @property {Object} classes Class definitions
+	 * @property {string} classes.confirmButton Confirm button class
+	 * @property {string} classes.cancelButton Cancel button class
+	 * @property {Object} actions Action definitions
+	 * @property {function} actions.confirm Confirm action
+	 * @property {function} actions.cancel Cancel action
 	 */
 	get defaults() {
 		const obj = Object.assign({}, super.defaults, {

package/source/components/form/popper-button.mjs

@@ -83,6 +83,8 @@ const arrowElementSymbol = Symbol("arrowElement");
  *
  * @example /examples/components/form/popper-button-simple
  *
+ * @issue https://localhost.alvine.dev:8443/development/issues/closed/283.html
+ *
  * @since 1.5.0
  * @copyright schukai GmbH
  * @summary A beautiful popper button

package/source/components/form/reload.mjs

@@ -39,58 +39,7 @@ export { Reload };
 const intersectionObserverWasInitialized = Symbol("wasInitialized");
 
 /**
- * This CustomControl reloads the content of a url and embeds it into the dom.
- *
- * <img src="./images/reload.png">
- *
- * You can create this control either by specifying the HTML tag `<monster-reload />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-reload');` method.
- *
- * ```html
- * <monster-reload></monster-reload>
- *
- * <script type="module">
- * import {Reload} from '@schukai/component-form/source/reload.js';
- * document.createElement('monster-reload');
- * </script>
- * ```
- *
- * A simple configuration can look like this
- *
- * ```html
- * <script id="config"
- *         type="application/json">
- *     {
- *         "url": "./content.html",
- *     }
- * </script>
- *
- * <monster-reload data-monster-options-selector="#config">
- * </monster-reload>
- * ```
- *
- * If you want to display a loader, you can insert a div with the attribute `data-monster-role="container"`.
- * The content of this div will be replaced by the loaded code.
- *
- * ```html
- * <monster-reload data-monster-options-selector="#config">
- * <div data-monster-role="container">
- * LOADER ...
- * </div>
- * </monster-reload>
- * ```
- *
- * If you need additional structure, you can simply specify it.
- *
- * ```html
- * <monster-reload data-monster-options-selector="#config">
- * <div class="row">
- *   <div class="col" data-monster-role="container">
- *       LOADER ...
- *   </div>
- * </div>
- * </monster-reload>
- * ```
+ * This CustomControl reloads the content of an url and embeds it into the dom.
  *
  * @fragments /fragments/components/form/reload/
  *
@@ -119,16 +68,16 @@ class Reload extends CustomElement {
 	 *
 	 * @property {Object} templates Template definitions
 	 * @property {string} templates.main Main template
-	 * @property {string} url=undefined
-	 * @property {string} reload=undefined currently the values defined are `onshow` and `always`. The default `onshow` removes the IntersectionObserver. This means that the content is only loaded once. reloading of the content does not occur.
-	 * @property {string} filter=undefined dom selectors to search for elements, if undefined then everything is taken
-	 * @property {Object[]} processors
-	 * @property {Object} fetch Fetch [see Using Fetch mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
-	 * @property {String} fetch.redirect=error
-	 * @property {String} fetch.method=GET
-	 * @property {String} fetch.mode=same-origin
-	 * @property {String} fetch.credentials=same-origin
-	 * @property {Object} fetch.headers={"accept":"text/html"}}
+	 * @property {string} url url to fetch
+	 * @property {string} reload onshow, always
+	 * @property {string} filter css selector
+	 * @property {Object} fetch fetch options for the request
+	 * @property {string} fetch.redirect error, follow, manual
+	 * @property {string} fetch.method GET, POST, PUT, DELETE
+	 * @property {string} fetch.mode same-origin, cors, no-cors, navigate
+	 * @property {string} fetch.credentials omit, same-origin, include
+	 * @property {Object} fetch.headers
+	 * @property {string} fetch.headers.accept text/html, application/json
 	 */
 	get defaults() {
 		return Object.assign(
@@ -227,12 +176,6 @@ class Reload extends CustomElement {
 }
 
 /**
- * This attribute can be used to pass a URL to this select.
- *
- * ```
- * <monster-select data-monster-url="https://example.com/"></monster-select>
- * ```
- *
  * @private
  * @return {object}
  */
@@ -284,10 +227,10 @@ function initIntersectionObserver() {
 
 				try {
 					loadContent.call(this).catch((e) => {
-						addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.toString());
+						addErrorAttribute(this, e);
 					});
 				} catch (e) {
-					addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.toString());
+					addErrorAttribute(this, e);
 				}
 			}
 		}

package/source/components/form/shadow-reload.mjs

@@ -23,7 +23,7 @@ export { ShadowReload };
  *
  * @fragments /fragments/components/form/shadow-reload/
  *
- * @example /examples/components/form/shadow-reload-simple
+ * @example /examples/components/form/shadow-reload-simple simple shadow reload
  *
  * @since 3.6.0
  * @copyright schukai GmbH