@schukai/monster 3.69.2 → 3.71.0

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);
             }

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

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

package/test/cases/data/diff.mjs

@@ -6,6 +6,43 @@ import {Queue} from "../../../source/types/queue.mjs";
 
 describe('Diff', function () {
 
+    describe('test to datasets', function () {
+
+        var obj1, obj2;
+
+        beforeEach(() => {
+            obj1 = [
+                {
+                    "id": 1,
+                    "name": "test"
+                },
+                {
+                    "id": 2,
+                    "name": "test2"
+                }
+            ]
+
+            obj2 = [
+                {
+                    "id": 1,
+                    "name": "test"
+                },
+                {
+                    "id": "3",
+                    "name": "test2"
+                }
+            ]
+
+        });
+
+        it('should return the difference between two datasets', function () {
+            let d = diff(obj1, obj2);
+            expect(JSON.stringify(d)).is.equal('[{"operator":"update","path":["1","id"],"first":{"value":2,"type":"number"},"second":{"value":"3","type":"string"}}]');
+        });
+        
+        
+    })
+    
     describe('Diff special cases', function () {
 
         var obj1, obj2;

package/test/cases/dom/customcontrol.mjs

@@ -138,7 +138,7 @@ describe('DOM', function () {
 
                 expect(document.getElementsByTagName('monster-customcontrol').length).is.equal(1);
                 // no data-monster-objectlink="Symbol(monsterUpdater)" because it has nothing to update 
-                expect(document.getElementById('test1')).contain.html('<monster-customcontrol data-monster-error="Error: html is not set."></monster-customcontrol>')
+                expect(document.getElementById('test1')).contain.html('<monster-customcontrol style="display: block;" data-monster-error="Error: html is not set."></monster-customcontrol>')
             });
         });
 

package/test/cases/dom/customelement.mjs

@@ -242,7 +242,7 @@ describe('DOM', function () {
                 expect(document.getElementsByTagName('monster-testclass').length).is.equal(1);
                 // no data-monster-objectlink="Symbol(monsterUpdater)" because it has nothing to update
                 // but data-monster-error="Error: html is not set."
-                expect(document.getElementById('test1')).contain.html('<monster-testclass data-monster-error="Error: html is not set."></monster-testclass>');
+                expect(document.getElementById('test1')).contain.html('<monster-testclass style="display: block;" data-monster-error="Error: html is not set."></monster-testclass>');
             });
         });
 
@@ -256,7 +256,7 @@ describe('DOM', function () {
                     try {
                         expect(document.getElementsByTagName('monster-testclass2').length).is.equal(1);
                         expect(document.getElementsByTagName('monster-testclass2').item(0).shadowRoot.innerHTML).is.equal('<h1></h1><article><p>test</p><div id="container"></div></article>');
-                        expect(document.getElementById('test1')).contain.html('<monster-testclass2 data-monster-objectlink="Symbol(' + updaterSymbolKey + ')"></monster-testclass2>');
+                        expect(document.getElementById('test1')).contain.html('<monster-testclass2 style="display: block;" data-monster-objectlink="Symbol(' + updaterSymbolKey + ')"></monster-testclass2>');
                         return done();
                     } catch (e) {
                         done(e);

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

@@ -1,242 +0,0 @@
-@import "hover.pcss";
-
-@define-mixin form {
-
-    box-sizing: border-box;
-    display: flex;
-    flex-wrap: nowrap;
-    position: relative;
-    flex-direction: column;
-    align-content: flex-start;
-    align-items: flex-start;
-    accent-color: var(--monster-color-secondary-2);
-
-    & label {
-        color: var(--monster-color-primary-1);
-        background-color: var(--monster-bg-color-primary-1);
-        display: grid;
-    }
-
-    & label:has(input[type="radio"]) {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-
-        & input {
-            margin-right: 0.4rem;
-            margin-left: 0.4rem;
-        }
-    }
-
-    & label:has(input[type="radio"]) ~ label:has(input[type="radio"]) {
-        margin-top: 0.2rem;
-    }
-
-    & label:has(input[type="checkbox"]) {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-
-        & input {
-            margin-right: 0.4rem;
-            margin-left: 0.4rem;
-        }
-
-    }
-
-    & label:has(input[type="checkbox"]) ~ label:has(input[type="checkbox"]) {
-        margin-top: 0.2rem;
-    }
-
-    & label ~ label {
-        margin-top: 1rem;
-    }
-
-    & label ~ fieldset {
-        margin-top: 1rem;
-    }
-
-    & button,
-    & input,
-    & select,
-    & textarea {
-        font-family: inherit;
-        font-size: 100%;
-        padding: 0.4rem 0.6rem;
-        margin: 0;
-        outline: none;
-        box-sizing: border-box;
-        accent-color: var(--monster-color-secondary-2);
-
-        color: var(--monster-color-primary-1);
-        background-color: var(--monster-bg-color-primary-1);
-
-    }
-
-
-    & button {
-        color: var(--monster-color-tertiary-1);
-        background-color: var(--monster-bg-color-tertiary-1);
-
-        /** monster-border-primary-1 */
-        border-width: var(--monster-border-width);
-        border-radius: var(--monster-border-radius);
-        border-style: var(--monster-border-style);
-        border-color: var(--monster-bg-color-primary-3);
-    }
-
-    & option:checked {
-        background-color: var(--monster-bg-color-primary-3);
-        color: var(--monster-color-primary-3);
-    }
-
-    & option:focus {
-        background-color: var(--monster-bg-color-primary-3);
-        color: var(--monster-color-primary-3);
-    }
-
-    & option:hover {
-        background-color: var(--monster-bg-color-primary-2);
-        color: var(--monster-color-primary-2);
-    }
-
-    & input,
-    & select,
-    & textarea {
-        border: 0;
-        border-bottom-width: thin;
-        border-radius: var(--monster-border-radius);
-        border-bottom-style: var(--monster-border-style);
-        border-bottom-color: var(--monster-bg-color-primary-1);
-    }
-
-
-    & input,
-    & select,
-    & textarea {
-        border-width: thin;
-        border-radius: var(--monster-border-radius);
-        border-style: var(--monster-border-style);
-        border-color: var(--monster-bg-color-primary-2);
-    }
-
-
-    & button,
-    & input:not([type="radio"]):not([type="checkbox"]),
-    & select,
-    & textarea {
-        width: 100%;
-    }
-
-    & label {
-        width: 100%;
-
-        & input:not([type="radio"]):not([type="checkbox"]),
-        & select,
-        & textarea {
-            width: 100%;
-            margin-top: 0.2rem;
-        }
-
-    }
-
-    & label + input:not([type="radio"]):not([type="checkbox"]),
-    & label + select,
-    & label + textarea {
-        width: 100%;
-        margin-top: 0.2rem;
-    }
-
-
-    & fieldset {
-        margin: 0;
-        position: relative;
-        padding: 2.5rem 2rem 2rem;
-        border: 1px dotted var(--monster-bg-color-primary-4);
-
-        background-color: var(--monster-bg-color-primary-1);
-        color: var(--monster-color-primary-1);
-
-        box-sizing: border-box;
-        width: 100%;
-        outline: none;
-
-        & legend {
-            position: absolute;
-            top: 0;
-            right: 0;
-            padding: 0.1rem 2rem 0.2rem 0.5rem;
-            max-width: 95%;
-            text-align: right;
-            text-transform: uppercase;
-            text-overflow: ellipsis;
-            font-size: 0.8rem;
-            overflow: hidden;
-            white-space: nowrap;
-        }
-
-        & label {
-        }
-
-    }
-
-    & fieldset ~ fieldset {
-        margin-top: 1rem;
-    }
-
-    & button {
-        margin: 0.2rem 0;
-    }
-
-    & button:first-of-type {
-        margin-top: 1rem;
-    }
-
-    & button:last-of-type {
-        margin-bottom: 1rem;
-    }
-
-    & input:focus-visible {
-        outline: none;
-    }
-
-
-    & button:focus,
-    & input:focus,
-    & select:focus,
-    & textarea:focus {
-        outline: 1px dashed var(--monster-color-selection-4);
-        outline-offset: 2px;
-    }
-
-
-    @media (prefers-color-scheme: light) {
-        & button,
-        & input,
-        & select,
-        & textarea {
-            background-color: var(--monster-bg-color-primary-1);
-            color: var(--monster-color-primary-1);
-            border-color: var(--monster-bg-color-primary-4);
-        }
-
-        & button:focus,
-        & input:focus,
-        & select:focus,
-        & textarea:focus {
-            outline: 1px dashed var(--monster-color-selection-3);
-        }        
-        
-    }
-
-    & button:hover,
-    & input:hover:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
-    & select:hover,
-    & textarea:hover {
-        @mixin box-hover;
-    }
-
-
-}