@twobirds/microcomponents 0.1.0 → 0.1.2

package/src/test/grandparent.css

@@ -1,14 +0,0 @@
-test-grandparent,
-test-parent,
-test-child,
-test-grandchild,
-test-greatgrandchild {
-	user-select: none;
-	caret-color: transparent;
-
-	display: inline-block;
-	padding: 1px;
-	margin: 1px;
-	border: 1px solid darkslategray;
-	border-radius: 2px;
-}

package/src/test/test/child.ts

@@ -1,36 +0,0 @@
-import { DC, defineCE, getCE } from './../../microcomponents.js';
-import { Grandchild } from './grandchild.js';
-defineCE(
-	'test-child',
-
-	class TestChild extends DC {
-		constructor(target: HTMLElement) {
-			super(target);
-		}
-
-		onConnected() {
-			let that = this;
-
-			for (let x = 0; x < 10; x++) {
-				that.target.append(new Grandchild!());
-			}
-		}
-
-		onClick(ev: Event){
-			this.trigger('Up', null, 'lu');
-			ev.stopImmediatePropagation();
-		}
-
-		onUp( ev: CustomEvent ){
-			console.log( 'child "Up" handler' );
-			ev.detail.control.stop();
-		}
-
-		onDown( ev: CustomEvent ){
-			console.log( 'child "Down" handler' );
-		}
-
-	}
-);
-
-export const Child = getCE('test-child');

package/src/test/test/grandchild.ts

@@ -1,31 +0,0 @@
-import { DC, defineCE, getCE } from '../../microcomponents.js';
-import { Greatgrandchild } from './greatgrandchild.js';
-defineCE(
-	'test-grandchild',
-
-	class TestGrandchild extends DC {
-		constructor(target: HTMLElement) {
-			super(target);
-		}
-
-		onConnected() {
-			let that = this;
-
-			for (let x = 0; x < 2; x++) {
-				that.target.append(new Greatgrandchild!());
-			}
-		}
-
-		onClick(ev: Event){
-			this.trigger('Up', null, 'lu');
-			ev.stopImmediatePropagation();
-		}
-
-		onUp( ev: CustomEvent ){
-			console.log( 'grandchild "Up" handler' );
-		}
-
-	}
-);
-
-export const Grandchild = getCE('test-grandchild');

package/src/test/test/grandparent.ts

@@ -1,43 +0,0 @@
-import { DC, defineCE, getCE } from '../../microcomponents.js';
-import { Parent } from './parent.js';
-defineCE(
-	'test-grandparent',
-
-	class TestGrandparent extends DC {
-		constructor(target: HTMLElement) {
-			super(target);
-		}
-
-		onConnected(ev:CustomEvent) {
-			for (let x = 0; x < 5; x++) {
-				this.target.append(new Parent!());
-			}
-		}
-
-		onDisconnected(ev:CustomEvent) {
-		}
-
-		onAdopted(ev:CustomEvent) {
-		}
-
-		onAttributeChanged(ev:CustomEvent) {
-		}
-
-		onClick(ev: Event){
-			this.trigger('Up', null, 'lu');
-			ev.stopImmediatePropagation();
-		}
-
-		onUp( ev: CustomEvent ){
-			console.log( 'grandparent "Up" handler' );
-			this.trigger('Down', {}, 'ld');
-		}
-
-		onDown( ev: CustomEvent ){
-			console.log( 'grandparent "Down" handler' );
-		}
-
-	}
-);
-
-export const GrandParent = getCE('test-grandparent');

package/src/test/test/greatgrandchild.ts

@@ -1,51 +0,0 @@
-import { DC, defineCE, getCE } from '../../microcomponents.js';
-
-function random(min: number, max: number) {
-	var random = Math.floor(Math.random() * (max - min + 1) + min);
-	return random;
-}
-
-defineCE(
-	'test-greatgrandchild',
-
-	class TestGreatgrandchild extends DC {
-		constructor(target: HTMLElement) {
-			super(target);
-		}
-
-		onConnected() {
-			let that = this;
-
-			that.updateStyle();
-		}
-
-		onClick(ev: Event){
-			this.trigger('Up', null, 'lu');
-			ev.stopImmediatePropagation();
-		}
-
-		onUp( ev: CustomEvent ){
-			console.log( 'greatgrandchild "Up" handler' );
-		}
-
-		updateStyle() {
-			var that = this;
-
-			function randomBorderColor() {
-				return (
-					'rgb(' +
-					random(0, 255) +
-					',' +
-					random(0, 255) +
-					',' +
-					random(0, 255) +
-					')'
-				);
-			}
-
-			that.target.setAttribute('style', 'border-color:' + randomBorderColor());
-		}
-	}
-);
-
-export const Greatgrandchild = getCE('test-greatgrandchild');

package/src/test/test/parent.ts

@@ -1,35 +0,0 @@
-import { DC, defineCE, getCE } from '../../microcomponents.js';
-import { Child } from './child.js';
-defineCE(
-	'test-parent',
-
-	class Parent extends DC {
-		constructor(target: HTMLElement) {
-			super(target);
-		}
-
-		onConnected() {
-			let that = this;
-
-			for (let x = 0; x < 5; x++) {
-				that.target.append(new Child!());
-			}
-		}
-
-		onClick(ev: Event){
-			this.trigger('Up', null, 'lu');
-			ev.stopImmediatePropagation();
-		}
-
-		onUp( ev: CustomEvent ){
-			console.log( 'parent "Up" handler' );
-		}
-
-		onDown( ev: CustomEvent ){
-			console.log( 'parent "Down" handler' );
-		}
-
-	}
-);
-
-export const Parent = getCE('test-parent');

package/src/test/test/testform.ts

@@ -1,153 +0,0 @@
-'use strict';
-import { 
-    DC, 
-    defineCE, 
-    Observable, 
-    formValues, 
-    LooseObject 
-} from '../../microcomponents.js';
-
-defineCE(
-	'test-testform',
-
-	class TestForm extends DC {
-		data: unknown;
-
-		constructor(target: HTMLElement) {
-			super(target);
-
-			let shadow = (this as DC).target.attachShadow({ mode: 'open' });
-			shadow.innerHTML = `<style>${this.css}</style>${this.template}`;
-            
-			formValues(this, 'data', shadow); // create this.data formdata observable
-
-			(this.data as Observable).bind(shadow); // 1 way bind formdata to the form DOM
-
-            // load and display data
-            fetch('./testform.json')
-                .then( res => res.json())
-                .then( data => {
-                    this.data = data;
-                });
-                
-		}
-
-		get template() {
-			return /*html*/ `
-                <form>
-                    <!-- sample form to start with -->
-                    <fieldset>
-                        <legend>Inputs</legend>
-                        <label>text</label><input type="text" name="textInput" value="Hallo" />&nbsp;<strong>2wB:&nbsp;</strong>{textInput}<br />
-                        <label>color</label><input type="color" name="colorInput" value="#000000" /><br />
-                        <label>date</label><input type="date" name="dateInput" value="" /><br />
-                        <label>datetime-local</label><input type="datetime-local" name="dtlInput" value="" /><br />
-                        <label>email</label><input type="email" name="email" value="" /><br />
-                        <label>file</label><input type="file" name="fileInput" value="" /><br />
-                        <label>hidden</label><input type="hidden" name="hiddenInput" value="hiddenVal" /><br />
-                        <label>month</label><input type="month" name="month" value="" /><br />
-                        <label>number</label><input type="number" name="number" value="" /><br />
-                        <label>password</label><input type="password" name="passInput" value="" /><br />
-                        <label>range</label><input type="range" name="rangeInput" value="" /><br />
-                        <label>search</label><input type="search" name="searchInput" value="" /><br />
-                        <label>tel</label><input type="tel" name="telInput" value="" /><br />
-                        <label>time</label><input type="time" name="timeInput" value="" /><br />
-                        <label>url</label><input type="url" name="urlInput" value="" /><br />
-                        <label>week</label><input type="week" name="weekInput" value="" /><br />
-                    </fieldset>
-
-                    <fieldset>
-                        <legend>Selects&nbsp;<strong>2wB:&nbsp;</strong>&nbsp;<span>"{singleSelect}"</span>&nbsp;<span>[{multiSelect}]</span></legend>
-
-                            <label>singleSelect</label>
-                            <select name="singleSelect">
-                                <option disabled selected value> -- select -- </option>
-                                <option value="1">Option 1</option>
-                                <option value="2">Option 2</option>
-                                <option value="3">Option 3</option>
-                                <option value="4">Option 4</option>
-                            </select><br />
-
-                            <label>multiSelect</label>
-                            <select name="multiSelect" multiple="multiple" type="select-multiple">
-                                <option value="1">Option 1</option>
-                                <option value="2" selected=true>Option 2</option>
-                                <option value="3">Option 3</option>
-                                <option value="4" selected=true>Option 4</option>
-                            </select>
-
-                    </fieldset>
-
-                    <fieldset>
-                        <legend>Radiobuttons&nbsp;<strong>2wB:&nbsp;</strong><span>"{myRadio}"</span></legend>
-
-                        <label>radio1</label><input type="radio" name="myRadio" value="radio1"><br />
-                        <label>radio2</label><input type="radio" name="myRadio" value="radio2"><br />
-                        <label>radio3</label><input type="radio" name="myRadio" value="radio3"><br />
-
-                    </fieldset>
-
-                    <fieldset>
-                        <legend>Checkboxes</legend>
-                        <label>cb1</label><input type="checkbox" name="cb1"><br />
-                        <label>cb2</label><input type="checkbox" name="cb2"><br />
-                        <label>cb3</label><input type="checkbox" name="cb3"><br />
-                        <label>cb4</label><input type="checkbox" name="cb4"><br />
-                        <label>cb5</label><input type="checkbox" name="cb5"><br />
-
-                    </fieldset>
-
-                    <fieldset>
-                        <legend>TextArea</legend>
-                        <label>textArea</label>
-                        <textarea name="textArea">abc</textarea>
-                    </fieldset>
-
-                </form>
-            `;
-		}
-
-		get css() {
-			return /*css*/ `
-legend {
-    display: inherit;
-    margin:  inherit;
-    vertical-align:  inherit;
-    font-weight: bold;
-}
-
-label {
-    display: inline-block;
-    margin-top: 1em;
-    margin-left: 5px;
-    vertical-align: top;
-    min-width:10em;
-    text-align: right;
-}
-
-form input,
-form select,
-form textarea {
-    display: inline-block;
-    margin-left: 5px;
-    margin-top: 1.1em;
-}
-
-input[type="radio"],
-input[type="checkbox"] {
-    margin-top: 1.3em;
-}
-
-body > form {
-    display: block;
-}
-
-form fieldset {
-    border: 1px solid #aaaaaa;
-    border-radius: 3px;
-    margin: 0.5em 0;
-}
-            `;
-		}
-	}
-);

package/src/test/test/testfunction.ts

@@ -1,12 +0,0 @@
-import { defineCE, getCE } from '../../microcomponents.js';
-
-console.log( 'testfunction.ts' );
-
-defineCE(
-    'test-testfunction',
-    function testfunction( a: number, b:number ){
-        return a + b;
-    }
-);
-
-export default getCE( 'test-testfunction' );

package/src/test/test/testmc.ts

@@ -1,16 +0,0 @@
-import { defineCE, getCE, DC } from '../../microcomponents.js';
-
-defineCE(
-    'test-testmc',
-    class TestMc extends DC {
-        constructor(target: HTMLElement) {
-            super(target);
-        }
-
-        oneInit() {
-            // console.log('testmc connected to DOM');
-        }
-    }
-);
-
-export default getCE( 'test-testmc' );

package/src/test/test/testsimpleclass.ts

@@ -1,15 +0,0 @@
-import { defineCE, getCE, DC } from '../../microcomponents.js';
-
-defineCE(
-    'test-testsimpleclass',
-    class TestSimpleClass {
-        constructor(target: HTMLElement) {
-        }
-
-        oneInit() {
-            // console.log('testmc connected to DOM');
-        }
-    }
-);
-
-export default getCE( 'test-testsimpleclass' );

package/src/test/test.ts

@@ -1,176 +0,0 @@
-import {
-	LooseObject,
-	DC,
-	defineCE,
-	getCE,
-	observe,
-	Observable,
-	HTMLMcElement,
-} from '../microcomponents.js';
-
-class Translator extends DC {
-	#translations: LooseObject = {};
-
-	Language: unknown = 'en';
-	Translation: unknown = {};
-
-	constructor(
-		target: HTMLElement | ShadowRoot | DocumentFragment,
-		translations: LooseObject,
-		translationTargetObject: HTMLElement
-	) {
-		super(target as HTMLElement);
-		let that = this; // minifier help
-
-		// state
-		that.Language = 'en';
-		that.Translation = {};
-
-		observe(that);
-
-		// setup
-		that.#translations = translations;
-
-		// on language change switch translation object
-		(that.Language as Observable).observe((lang) => {
-			if (that.#translations.hasOwnProperty(lang)) {
-				that.Translation = { lang: that.#translations[lang] }; // set translation
-			}
-		});
-
-		(that.Translation as Observable).bind(translationTargetObject);
-
-		(that.Language as Observable).notify();
-	}
-
-}
-
-class MyButton extends DC {
-	#template: string = '{lang.click} {counter}';
-
-	#languages = {
-		en: {
-			click: 'click me',
-		},
-		de: {
-			click: 'klick mich',
-		},
-	};
-
-	Dom: LooseObject = {};
-
-	constructor(target: HTMLElement) {
-		super(target);
-
-		// render
-		target.innerHTML = this.#template;
-
-		// state
-		this.Dom = { counter: 0 };
-
-		// state: convert all props defined so far into observables
-		observe(this);
-
-		// add translator
-		DC.add(
-			target,
-			'Translator',
-			new Translator(target, this.#languages, target)
-		);
-
-		// bind Dom to target
-		(this.Dom as Observable).bind(this.target);
-	}
-
-	onClick(ev: Event) {
-		// console.log('button.myButton onClick()');
-		const c = this.Dom.counter++;
-		ev.stopPropagation();
-		(this.target as HTMLElement).classList.remove('clicked');
-		(this.target as HTMLElement).classList.add( this.Dom.counter > 9 ? 'overClicked' : 'clicked' );
-	}
-}
-
-function makeButton(): HTMLMcElement {
-	const button = document.createElement('button');
-	button.classList.add('myButton');
-	DC.add( button, 'MyButton', new MyButton(button) );
-	return button as unknown as HTMLMcElement;
-}
-
-defineCE(
-	'make-button',
-	makeButton
-);
-
-let fragment = new DocumentFragment();
-
-/*
-stress test
-*/
-
-let start = new Date().getTime(),
-	max = 1000;
-
-// create 1000 elements
-for (let x = 0; x < max; x++) {
-	fragment.append( (getCE('make-button') as Function)());
-}
-
-let end = new Date().getTime();
-
-// and put them into the DOM
-document.body.appendChild(fragment);
-
-//document.querySelectorAll('my-tag').forEach((e) => e.remove());
-
-/*
-console test
-*/
-
-setTimeout(() => {
-	// console.clear();
-
-	console.log(
-		'%c \n\nStress Test:\n\n %cInstancing %s buttons containing %s MCs: %c %s ms.',
-		'font-weight: bold; color: black;',
-		'font-weight: normal;',
-		max,
-		max * 3,
-		'font-weight: bold; color: orange;',
-		end - start
-	);
-
-	//document.body.appendChild(new MyTag());
-
-	let element = document.querySelector('button');
-
-	console.log(
-		"\n\n%cInspect this tag:%c \n( ...to see the inner structure in the '._mc' property )\n\n %O %c %s",
-		'font-weight: bold;',
-		'font-weight: normal;',
-		element,
-		'font-weight: bold;',
-		'\n\nLook up code in the debugger: test.js\n'
-	);
-
-	let form = ( document.querySelector('test-testform') as any);
-	let formInstance = form._mc.TestTestform;
-
-	(window as any).form = formInstance;
-	console.log(
-		"\n\n%cAttached a global variable 'form':%c \n\n %O %c %s %c %s %c %s",
-		'font-weight: bold;',
-		'font-weight: normal;',
-		formInstance,
-		'font-weight: bold;',
-		'\n\nYou can use it to change input values, e.g. \n\n',
-		'font-weight: normal;',
-		'  form.data.textInput="other value"',
-		'font-weight: bold;',
-		'\n\nChanges will be reflected in the form contents, same as vice versa.\n'
-	);
-
-	// will trigger the event on all micro components contained in <my-tag>
-	( element as unknown as HTMLMcElement )._mc?.trigger('doSomething');
-}, 1000);

package/src/test/testform.css

@@ -1,47 +0,0 @@
-legend {
-    display: inherit;
-    margin:  inherit;
-    vertical-align:  inherit;
-}
-
-label {
-    display: inline;
-    margin-top: 5px;
-    margin-left: 5px;
-    vertical-align: top;
-    width: 10em;
-    text-align: right;
-}
-
-label::before {
-    content: ' ';
-    display: block;
-}
-
-form input,
-form select,
-form textarea {
-    margin-left: 5px;
-    margin-top: 0px;
-    display: inline;
-}
-
-form label + textarea {
-    display: inline-block;
-    margin-top: 3px;
-}
-
-form input + label {
-    width: inherit;
-    margin-top: 3px;
-    text-align: left;
-}
-
-body > form {
-    display: block;
-}
-
-form fieldset {
-    border: 1px solid darkslategrey;
-    border-radius: 3px;
-}