@schukai/monster 3.69.2 → 3.70.0

package/source/data/datasource/server/restapi.mjs

@@ -12,13 +12,13 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { internalSymbol, instanceSymbol } from "../../../constants.mjs";
-import { isObject, isFunction } from "../../../types/is.mjs";
-import { Server } from "../server.mjs";
-import { WriteError } from "./restapi/writeerror.mjs";
-import { DataFetchError } from "./restapi/data-fetch-error.mjs";
+import {internalSymbol, instanceSymbol} from "../../../constants.mjs";
+import {isObject, isFunction} from "../../../types/is.mjs";
+import {Server} from "../server.mjs";
+import {WriteError} from "./restapi/writeerror.mjs";
+import {DataFetchError} from "./restapi/data-fetch-error.mjs";
 
-export { RestAPI };
+export {RestAPI};
 
 /**
  * @type {symbol}
@@ -27,7 +27,7 @@ export { RestAPI };
  * @since 3.12.0
  */
 const rawDataSymbol = Symbol.for(
-	"@schukai/monster/data/datasource/server/restapi/rawdata",
+    "@schukai/monster/data/datasource/server/restapi/rawdata",
 );
 
 /**
@@ -41,138 +41,138 @@ const rawDataSymbol = Symbol.for(
  * @summary The RestAPI is a class that binds a REST API server.
  */
 class RestAPI extends Server {
-	/**
-	 *
-	 * @param {Object} [options] options contains definitions for the datasource.
-	 */
-	constructor(options) {
-		super();
-
-		if (isObject(options)) {
-			this.setOptions(options);
-		}
-	}
-
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @returns {symbol}
-	 * @since 2.1.0
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/data/datasource/server/restapi");
-	}
-
-	/**
-	 * @property {Object} write={} Options
-	 * @property {Object} write.init={} An options object containing any custom settings that you want to apply to the request. The parameters are identical to those of the {@link https://developer.mozilla.org/en-US/docs/Web/API/Request/Request|Request constructor}
-	 * @property {string} write.init.method=POST
-	 * @property {Object} write.init.headers Object containing any custom headers that you want to apply to the request.
-	 * @property {string} write.responseCallback Callback function to be executed after the request has been completed.
-	 * @property {string} write.acceptedStatus=[200,201]
-	 * @property {string} write.url URL
-	 * @property {Object} write.mapping the mapping is applied before writing.
-	 * @property {String} write.mapping.transformer Transformer to select the appropriate entries
-	 * @property {Monster.Data.Datasource~exampleCallback[]} write.mapping.callback with the help of the callback, the structures can be adjusted before writing.
-	 * @property {Object} write.report
-	 * @property {String} write.report.path Path to validations
-	 * @property {Object} write.sheathing
-	 * @property {Object} write.sheathing.object Object to be wrapped
-	 * @property {string} write.sheathing.path Path to the data
-	 * @property {Object} read={} Options
-	 * @property {Object} read.init={} An options object containing any custom settings that you want to apply to the request. The parameters are identical to those of the {@link https://developer.mozilla.org/en-US/docs/Web/API/Request/Request|Request constructor}
-	 * @property {string} read.init.method=GET
-	 * @property {string} read.acceptedStatus=[200]
-	 * @property {string} read.url URL
-	 * @property {Object} read.mapping the mapping is applied after reading.
-	 * @property {String} read.mapping.transformer Transformer to select the appropriate entries
-	 * @property {Monster.Data.Datasource~exampleCallback[]} read.mapping.callback with the help of the callback, the structures can be adjusted after reading.
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			write: {
-				init: {
-					method: "POST",
-				},
-				responseCallback: undefined,
-				acceptedStatus: [200, 201],
-				url: null,
-				mapping: {
-					transformer: undefined,
-					callbacks: [],
-				},
-				sheathing: {
-					object: undefined,
-					path: undefined,
-				},
-				report: {
-					path: undefined,
-				},
-			},
-			read: {
-				init: {
-					method: "GET",
-				},
-				responseCallback: undefined,
-				acceptedStatus: [200],
-				url: null,
-				mapping: {
-					transformer: undefined,
-					callbacks: [],
-				},
-			},
-		});
-	}
-
-	/**
-	 * @return {Promise}
-	 * @throws {Error} the options does not contain a valid json definition
-	 * @throws {TypeError} value is not a object
-	 * @throws {Error} the data cannot be read
-	 */
-	read() {
-		let init = this.getOption("read.init");
-		if (!isObject(init)) init = {};
-		if (!init["method"]) init["method"] = "GET";
-
-		let callback = this.getOption("read.responseCallback");
-		if (!callback)
-			callback = (obj) => {
-				this.set(this.transformServerPayload.call(this, obj));
-			};
-
-		return fetchData.call(this, init, "read", callback);
-	}
-
-	/**
-	 * @return {Promise}
-	 * @throws {WriteError} the data cannot be written
-	 */
-	write() {
-		let init = this.getOption("write.init");
-		if (!isObject(init)) init = {};
-		if (typeof init["headers"] !== "object") {
-			init["headers"] = {
-				"Content-Type": "application/json",
-			};
-		}
-		if (!init["method"]) init["method"] = "POST";
-
-		const obj = this.prepareServerPayload(this.get());
-		init["body"] = JSON.stringify(obj);
-
-		const callback = this.getOption("write.responseCallback");
-		return fetchData.call(this, init, "write", callback);
-	}
-
-	/**
-	 * @return {RestAPI}
-	 */
-	getClone() {
-		return new RestAPI(
-			this[internalSymbol].getRealSubject()["options"].read,
-			this[internalSymbol].getRealSubject()["options"].write,
-		);
-	}
+    /**
+     *
+     * @param {Object} [options] options contains definitions for the datasource.
+     */
+    constructor(options) {
+        super();
+
+        if (isObject(options)) {
+            this.setOptions(options);
+        }
+    }
+
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     * @since 2.1.0
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/data/datasource/server/restapi");
+    }
+
+    /**
+     * @property {Object} write={} Options
+     * @property {Object} write.init={} An options object containing any custom settings that you want to apply to the request. The parameters are identical to those of the {@link https://developer.mozilla.org/en-US/docs/Web/API/Request/Request|Request constructor}
+     * @property {string} write.init.method=POST
+     * @property {Object} write.init.headers Object containing any custom headers that you want to apply to the request.
+     * @property {string} write.responseCallback Callback function to be executed after the request has been completed.
+     * @property {string} write.acceptedStatus=[200,201]
+     * @property {string} write.url URL
+     * @property {Object} write.mapping the mapping is applied before writing.
+     * @property {String} write.mapping.transformer Transformer to select the appropriate entries
+     * @property {Monster.Data.Datasource~exampleCallback[]} write.mapping.callback with the help of the callback, the structures can be adjusted before writing.
+     * @property {Object} write.report
+     * @property {String} write.report.path Path to validations
+     * @property {Object} write.sheathing
+     * @property {Object} write.sheathing.object Object to be wrapped
+     * @property {string} write.sheathing.path Path to the data
+     * @property {Object} read={} Options
+     * @property {Object} read.init={} An options object containing any custom settings that you want to apply to the request. The parameters are identical to those of the {@link https://developer.mozilla.org/en-US/docs/Web/API/Request/Request|Request constructor}
+     * @property {string} read.init.method=GET
+     * @property {string} read.acceptedStatus=[200]
+     * @property {string} read.url URL
+     * @property {Object} read.mapping the mapping is applied after reading.
+     * @property {String} read.mapping.transformer Transformer to select the appropriate entries
+     * @property {Monster.Data.Datasource~exampleCallback[]} read.mapping.callback with the help of the callback, the structures can be adjusted after reading.
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            write: {
+                init: {
+                    method: "POST",
+                },
+                responseCallback: undefined,
+                acceptedStatus: [200, 201],
+                url: null,
+                mapping: {
+                    transformer: undefined,
+                    callbacks: [],
+                },
+                sheathing: {
+                    object: undefined,
+                    path: undefined,
+                },
+                report: {
+                    path: undefined,
+                },
+            },
+            read: {
+                init: {
+                    method: "GET",
+                },
+                responseCallback: undefined,
+                acceptedStatus: [200],
+                url: null,
+                mapping: {
+                    transformer: undefined,
+                    callbacks: [],
+                },
+            },
+        });
+    }
+
+    /**
+     * @return {Promise}
+     * @throws {Error} the options does not contain a valid json definition
+     * @throws {TypeError} value is not a object
+     * @throws {Error} the data cannot be read
+     */
+    read() {
+        let init = this.getOption("read.init");
+        if (!isObject(init)) init = {};
+        if (!init["method"]) init["method"] = "GET";
+
+        let callback = this.getOption("read.responseCallback");
+        if (!callback)
+            callback = (obj) => {
+                this.set(this.transformServerPayload.call(this, obj));
+            };
+
+        return fetchData.call(this, init, "read", callback);
+    }
+
+    /**
+     * @return {Promise}
+     * @throws {WriteError} the data cannot be written
+     */
+    write() {
+        let init = this.getOption("write.init");
+        if (!isObject(init)) init = {};
+        if (typeof init["headers"] !== "object") {
+            init["headers"] = {
+                "Content-Type": "application/json",
+            };
+        }
+        if (!init["method"]) init["method"] = "POST";
+
+        const obj = this.prepareServerPayload(this.get());
+        init["body"] = JSON.stringify(obj);
+
+        const callback = this.getOption("write.responseCallback");
+        return fetchData.call(this, init, "write", callback);
+    }
+
+    /**
+     * @return {RestAPI}
+     */
+    getClone() {
+        return new RestAPI(
+            this[internalSymbol].getRealSubject()["options"].read,
+            this[internalSymbol].getRealSubject()["options"].write,
+        );
+    }
 }
 
 /**
@@ -183,45 +183,47 @@ class RestAPI extends Server {
  * @returns {Promise<string>}
  */
 function fetchData(init, key, callback) {
-	let response;
-
-	return fetch(this.getOption(`${key}.url`), init)
-		.then((resp) => {
-			response = resp;
-
-			const acceptedStatus = this.getOption(`${key}.acceptedStatus`, [200]);
-
-			if (acceptedStatus.indexOf(resp.status) === -1) {
-				throw new DataFetchError(
-					`the response does not contain a accepted status (actual: ${resp.status}).`,
-					response,
-				);
-			}
-
-			return resp.text();
-		})
-		.then((body) => {
-			let obj;
-
-			try {
-				obj = JSON.parse(body);
-
-				response[rawDataSymbol] = obj;
-			} catch (e) {
-				if (body.length > 100) {
-					body = `${body.substring(0, 97)}...`;
-				}
-
-				throw new DataFetchError(
-					`the response does not contain a valid json (actual: ${body}).`,
-					response,
-				);
-			}
-
-			if (callback && isFunction(callback)) {
-				callback(obj);
-			}
-
-			return response;
-		});
+    let response;
+
+    return fetch(this.getOption(`${key}.url`), init)
+        .then((resp) => {
+            response = resp;
+
+            const acceptedStatus =  this.getOption(`${key}.acceptedStatus`, [200]).map(Number);
+
+            if (acceptedStatus.indexOf(resp.status) === -1) {
+                throw new DataFetchError(
+                    `the response does not contain an accepted status (actual: ${resp.status}).`,
+                    response,
+                );
+            }
+
+            return resp.text();
+        })
+        .then((body) => {
+            let obj;
+
+            try {
+                obj = JSON.parse(body);
+
+                response[rawDataSymbol] = obj;
+            } catch (e) {
+                if (body.length > 100) {
+                    body = `${body.substring(0, 97)}...`;
+                }
+
+                throw new DataFetchError(
+                    `the response does not contain a valid json (actual: ${body}).`,
+                    response,
+                );
+            }
+
+            if (callback && isFunction(callback)) {
+                callback(obj);
+            }
+
+            return response;
+        }).catch((e) => {
+            throw e;
+        });
 }

package/source/dom/customelement.mjs

@@ -327,6 +327,7 @@ class CustomElement extends HTMLElement {
 	 * @property {Object} templates Specifies the templates used by the control.
 	 * @property {string} templates.main=undefined Specifies the main template used by the control.
 	 * @property {Object} templateMapping Specifies the mapping of templates.
+	 * @property {string} display=block Specifies the display mode of the control.
 	 * @since 1.8.0
 	 */
 	get defaults() {
@@ -338,6 +339,7 @@ class CustomElement extends HTMLElement {
 				main: undefined,
 			},
 			templateMapping: {},
+			display: "block"
 		};
 	}
 
@@ -595,6 +597,8 @@ class CustomElement extends HTMLElement {
 		let elements;
 		let nodeList;
 
+		this.style.setProperty("display", this.getOption("display"));
+
 		// Extract options from attributes and set them
 		const AttributeOptions = getOptionsFromAttributes.call(this);
 		if (

package/source/dom/updater.mjs

@@ -44,7 +44,7 @@ import { findDocumentTemplate } from "./template.mjs";
 export { Updater, addObjectWithUpdaterToElement };
 
 /**
- * The updater class connects an object with the dom. In this way, structures and contents in the DOM can be
+ * The updater class connects an object with the DOM. In this way, structures and contents in the DOM can be
  * programmatically adapted via attributes.
  *
  * For example, to include a string from an object, the attribute `data-monster-replace` can be used.

package/source/types/tokenlist.mjs

@@ -12,8 +12,8 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { isIterable, isString } from "../types/is.mjs";
-import { validateFunction, validateString } from "../types/validate.mjs";
+import { isIterable, isString } from "./is.mjs";
+import { validateFunction, validateString } from "./validate.mjs";
 import { Base } from "./base.mjs";
 
 export { TokenList };

package/test/cases/components/form/form.mjs

@@ -10,13 +10,12 @@ import {storageObjectSymbol} from "../../../../source/data/datasource/storage.mj
 let expect = chai.expect;
 chai.use(chaiDom);
 
-const global = getGlobal();
-
 let html1 = `
     <div id="test1">
     <monster-form id="form1"></monster-form>
     </div>
 `;
+
 let html2 = `
     <div id="test2">
         <monster-form id="form2"
@@ -37,27 +36,6 @@ let html2 = `
         </monster-form>
     </div>
 `;
-let html3 = `
-    <div id="test3">
-        <monster-form id="form3">
-            <div>
-                <div>
-                    <input name="control1"
-                           id="control1"
-                           data-monster-attributes="value path:a"
-                           data-monster-bind="path:a">
-                </div>
-            </div>
-            <div>
-                <input name="control2"
-                       data-monster-attributes="value path:b"
-                       data-monster-bind="path:b">
-            </div>
-            <button id="button1" data-monster-datasource-handler="write">Button</button>
-
-        </monster-form>
-    </div>
-`;
 
 describe('Form', function () {
 
@@ -81,165 +59,6 @@ describe('Form', function () {
         localStorage.removeItem('test-key')
     })
 
-
-    describe("register own datasources", function () {
-
-        const sym = Symbol.for('@schukai/monster/data/datasource/@@data');
-
-        let test3Datasource = class extends Datasource {
-            constructor() {
-                super();
-            }
-
-            read() {
-                this[sym].setSubject({a: "test3", b: "test3"})
-                return Promise.resolve();
-            }
-
-            get() {
-                const self = this;
-                return self[sym].getRealSubject();
-            }
-
-        }
-
-        beforeEach(() => {
-            let mocks = document.getElementById('mocks');
-            mocks.innerHTML = html3;
-
-            // register own datasource, after the form is loaded
-            // because in the wild, the form is parsed before the datasource is registered
-            form.registerDatasource('test3', test3Datasource);
-
-
-        });
-
-        it("should be able to register own datasources", function (done) {
-            let m = form.getDatasources('test3')
-            expect(m.get('test3')).is.a.equal(test3Datasource);
-
-            const testDatasource = new test3Datasource();
-
-            const formElement = document.getElementById('form3');
-            formElement.setOption("datasource", testDatasource);
-            formElement.refresh().then(() => {
-                const v = formElement.getValues()
-                expect(v).is.deep.equal({a: "test3", b: "test3"})
-                done();
-            }).catch(e => done(e))
-
-
-        })
-
-
-    })
-
-    describe("register and unregister datasources", function () {
-        const TestDatasource = class extends Datasource {
-            constructor() {
-                super();
-            }
-        }
-
-        it("should register new datasource", function () {
-
-            form.registerDatasource('test', TestDatasource);
-            let m = form.getDatasources('test')
-            expect(m.get('test')).is.a.equal(TestDatasource);
-
-            form.unregisterDatasource('test');
-            m = form.getDatasources('test')
-
-            expect(m.get('test')).to.be.undefined;
-        })
-
-    })
-
-
-    describe("example4-doc", function () {
-
-            it("should init button with click event", function (done) {
-
-                class MockDatasource extends Datasource {
-
-                    constructor() {
-                        super();
-                    }
-
-                    read() {
-                        return Promise.resolve({});
-                    }
-
-                    write(data) {
-                        // done();
-                    }
-
-                    [storageObjectSymbol]() {
-                        return localStorage;
-                    }
-
-                }
-
-                const form4 = document.createElement('monster-form');
-                const datasource4 = new MockDatasource();
-                expect(datasource4 instanceof Datasource).is.true;
-                form4.setOption('datasource', datasource4)
-
-                const input4 = document.createElement('input')
-                input4.setAttribute('name', 'field');
-                input4.setAttribute('data-monster-attributes', 'value path:headers.Host');
-                input4.setAttribute('data-monster-bind', 'path:headers.Host');
-                form4.appendChild(input4);
-
-                const button4 = document.createElement('monster-state-button');
-                button4.setOption('labels.button', 'click!')
-                button4.setAttribute('data-monster-datasource-handler', 'write')
-                button4.setOption('actions.click', () => {
-                    
-                })
-
-                form4.appendChild(button4);
-
-                document.getElementById('mocks').appendChild(form4);
-
-                new Processing().add(() => {
-                        button4.click();
-                    }
-                ).run().then(() => {
-                    done();
-                }).catch(e => done(e))
-
-
-            })
-
-
-        }
-    )
-
-    describe('document.createElement()', function () {
-
-        it('should contain objectlink', function (done) {
-
-            let mocks = document.getElementById('mocks');
-            const formControl = document.createElement('monster-form');
-            mocks.appendChild(formControl);
-
-            setTimeout(() => {
-                try {
-                    expect(document.getElementById('mocks')).contain.html('<monster-form data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-form>')
-                    done();
-                } catch (e) {
-                    return done(e);
-                }
-
-
-            }, 0)
-
-
-        });
-
-    });
-
     describe('HTML-Templates', function () {
 
         describe('create from template html1', function () {

package/test/cases/components/host/details.mjs

@@ -55,7 +55,7 @@ describe('Details', function () {
             try {
                 
                 expect(document.getElementById('mocks')).contain.html(
-                    '<monster-details id="details1" data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)" data-monster-button-label="Details"></monster-details>')
+                    '<monster-details id="details1" style="display: block;" data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)" data-monster-button-label="Details"></monster-details>')
             } catch (e) {
                 return done(e);
             }

package/test/cases/components/host/host.mjs

@@ -52,7 +52,7 @@ describe('Host', function () {
 
         setTimeout(() => {
             try {
-                expect(document.getElementById('mocks')).contain.html('<monster-host data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-host>')
+                expect(document.getElementById('mocks')).contain.html('<monster-host style="display: block;" data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-host>')
             } catch (e) {
                 return done(e);
             }