@twobirds/microcomponents 0.1.6 → 0.1.10

package/dist/formValues.ts

@@ -6,220 +6,214 @@ import { observe } from './observables.js';
 
 type inputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 
-const getInputName = (
-	e: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
-): string => {
-	return e.tagName.toLowerCase();
+const getInputName = (e: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): string => {
+    return e.tagName.toLowerCase();
 };
 
 abstract class InputBase {
-	constructor(e: inputTypes) {}
+    constructor(e: inputTypes) {}
 
-	abstract get val(): any;
+    abstract get val(): any;
 
-	abstract set val(value: any);
+    abstract set val(value: any);
 }
 
 class RadioHandler extends InputBase {
-	#e: HTMLInputElement;
-
-	constructor(e: HTMLInputElement) {
-		super(e);
-		this.#e = e;
-	}
-
-	get val(): string {
-		let ret = new FormData(this.#e.form as HTMLFormElement).get(this.#e.name);
-
-		//console.log('radio[', this.#e.name, '] = "' + ret + '"');
-		return ret as string;
-	}
-
-	set val(value: string) {
-		let arr = [
-			...(this.#e.form as HTMLFormElement).querySelectorAll(
-				`input[type="radio"][name="${this.#e.name}"]`
-			),
-		] as HTMLInputElement[];
-
-		(
-			arr
-				.filter((e) => e.getAttribute('value') === value)
-				.shift() as HTMLInputElement
-		).checked = true;
-	}
+    #e: HTMLInputElement;
+
+    constructor(e: HTMLInputElement) {
+        super(e);
+        this.#e = e;
+    }
+
+    get val(): string {
+        let ret = new FormData(this.#e.form as HTMLFormElement).get(this.#e.name);
+
+        //console.log('radio[', this.#e.name, '] = "' + ret + '"');
+        return ret as string;
+    }
+
+    set val(value: string) {
+        let arr = [
+            ...(this.#e.form as HTMLFormElement).querySelectorAll(
+                `input[type="radio"][name="${this.#e.name}"]`
+            ),
+        ] as HTMLInputElement[];
+
+        (arr.filter((e) => e.getAttribute('value') === value).shift() as HTMLInputElement).checked =
+            true;
+    }
 }
 
 class CheckboxHandler extends InputBase {
-	#e: HTMLInputElement;
+    #e: HTMLInputElement;
 
-	constructor(e: HTMLInputElement) {
-		super(e);
-		this.#e = e;
-	}
+    constructor(e: HTMLInputElement) {
+        super(e);
+        this.#e = e;
+    }
 
-	get val(): boolean {
-		return this.#e.checked;
-	}
+    get val(): boolean {
+        return this.#e.checked;
+    }
 
-	set val(value: boolean) {
-		this.#e.checked = value;
-	}
+    set val(value: boolean) {
+        this.#e.checked = value;
+    }
 }
 
 class InputHandler extends InputBase {
-	#e: HTMLInputElement;
+    #e: HTMLInputElement;
 
-	constructor(e: HTMLInputElement) {
-		super(e);
-		this.#e = e;
-	}
+    constructor(e: HTMLInputElement) {
+        super(e);
+        this.#e = e;
+    }
 
-	get val(): string {
-		return this.#e.value;
-	}
+    get val(): string {
+        return this.#e.value;
+    }
 
-	set val(value: string) {
-		this.#e.value = value;
-	}
+    set val(value: string) {
+        this.#e.value = value;
+    }
 }
 
 class SelectHandler extends InputBase {
-	#e: HTMLSelectElement;
-	#multi: boolean = false;
-
-	constructor(e: HTMLSelectElement) {
-		super(e);
-		this.#e = e;
-		this.#multi = e.multiple;
-	}
-
-	get val(): string[] | string {
-		const that = this,
-			ret: string[] = [];
-
-		// get all options
-		[...that.#e.querySelectorAll('option')]
-			.filter((o) => o.selected)
-			.forEach((o) => {
-				ret.push(o.value);
-			});
-
-		if (this.#multi) return ret;
-		return ret.length ? ret[0] : '';
-	}
-
-	set val(value: string[] | string) {
-		const that = this;
-
-		value = typeof value === 'string' ? [value] : value;
-
-		// set all options
-		[...that.#e.querySelectorAll('option')].forEach((o) => {
-			if (value.indexOf(o.value) > -1) {
-				o.selected = true;
-			} else {
-				o.selected = false;
-			}
-		});
-	}
+    #e: HTMLSelectElement;
+    #multi: boolean = false;
+
+    constructor(e: HTMLSelectElement) {
+        super(e);
+        this.#e = e;
+        this.#multi = e.multiple;
+    }
+
+    get val(): string[] | string {
+        const that = this,
+            ret: string[] = [];
+
+        // get all options
+        [...that.#e.querySelectorAll('option')]
+            .filter((o) => o.selected)
+            .forEach((o) => {
+                ret.push(o.value);
+            });
+
+        if (this.#multi) return ret;
+        return ret.length ? ret[0] : '';
+    }
+
+    set val(value: string[] | string) {
+        const that = this;
+
+        value = typeof value === 'string' ? [value] : value;
+
+        // set all options
+        [...that.#e.querySelectorAll('option')].forEach((o) => {
+            if (value.indexOf(o.value) > -1) {
+                o.selected = true;
+            } else {
+                o.selected = false;
+            }
+        });
+    }
 }
 
 class TextAreaHandler extends InputBase {
-	#e: HTMLTextAreaElement;
-	constructor(e: HTMLTextAreaElement) {
-		super(e);
-		this.#e = e;
-	}
-
-	get val(): string {
-		return this.#e.value || '';
-	}
-
-	set val(value: string) {
-		this.#e.value = value;
-	}
+    #e: HTMLTextAreaElement;
+    constructor(e: HTMLTextAreaElement) {
+        super(e);
+        this.#e = e;
+    }
+
+    get val(): string {
+        return this.#e.value || '';
+    }
+
+    set val(value: string) {
+        this.#e.value = value;
+    }
 }
 
 const getInputHandlers = (e: HTMLElement | ShadowRoot): LooseObject => {
-	let inputList = [
-			...(e || document).querySelectorAll('input,select,textarea'),
-		],
-		handlers: LooseObject = {};
-
-	inputList.forEach((input) => {
-		const name: string | null = (input as inputTypes).getAttribute('name');
-		if (name) {
-			let handler: any = false;
-			switch (getInputName(input as inputTypes)) {
-				case 'input':
-					switch ((input as HTMLInputElement).type) {
-						case 'radio':
-							handler = new RadioHandler(input as HTMLInputElement);
-							break;
-						case 'checkbox':
-							handler = new CheckboxHandler(input as HTMLInputElement);
-							break;
-						default:
-							handler = new InputHandler(input as HTMLInputElement);
-					}
-					break;
-				case 'select':
-					handler = new SelectHandler(input as HTMLSelectElement);
-					break;
-				case 'textarea':
-					handler = new TextAreaHandler(input as HTMLTextAreaElement);
-					break;
-				default:
-					console.warn(
-						'handler missing:',
-						name,
-						'for',
-						input.tagName.toLowerCase(),
-						input
-					);
-					break;
-			}
-
-			if (handler) {
-				DC.add(input as HTMLElement, name, handler);
-				Object.defineProperty(handlers, name, {
-					enumerable: true,
-					configurable: true,
-					get: (): any => {
-						return handler.val;
-					},
-					set: (value: any) => {
-						if (handler.val !== value) {
-							handler.val = value;
-						}
-					},
-				});
-			}
-		}
-	});
-
-	return handlers;
+    let inputList = [...(e || document).querySelectorAll('input,select,textarea')],
+        handlers: LooseObject = {};
+
+    inputList.forEach((input) => {
+        const name: string | null = (input as inputTypes).getAttribute('name');
+        if (name) {
+            let handler: any = false;
+            switch (getInputName(input as inputTypes)) {
+                case 'input':
+                    switch ((input as HTMLInputElement).type) {
+                        case 'radio':
+                            handler = new RadioHandler(input as HTMLInputElement);
+                            break;
+                        case 'checkbox':
+                            handler = new CheckboxHandler(input as HTMLInputElement);
+                            break;
+                        default:
+                            handler = new InputHandler(input as HTMLInputElement);
+                    }
+                    break;
+                case 'select':
+                    handler = new SelectHandler(input as HTMLSelectElement);
+                    break;
+                case 'textarea':
+                    handler = new TextAreaHandler(input as HTMLTextAreaElement);
+                    break;
+                default:
+                    console.warn(
+                        'handler missing:',
+                        name,
+                        'for',
+                        input.tagName.toLowerCase(),
+                        input
+                    );
+                    break;
+            }
+
+            if (handler) {
+                DC.add(input as HTMLElement, name, handler);
+                Object.defineProperty(handlers, name, {
+                    enumerable: true,
+                    configurable: true,
+                    get: (): any => {
+                        return handler.val;
+                    },
+                    set: (value: any) => {
+                        if (handler.val !== value) {
+                            handler.val = value;
+                        }
+                    },
+                });
+            }
+        }
+    });
+
+    return handlers;
 };
 
 export function formValues(
-	targetObject: LooseObject,
-	propertyName: string,
-	dom: HTMLElement | ShadowRoot
+    targetObject: LooseObject,
+    propertyName: string,
+    dom: HTMLElement | ShadowRoot
 ) {
-	let handlers = getInputHandlers(dom);
+    let handlers = getInputHandlers(dom);
 
-	targetObject[propertyName] = Object.assign({}, handlers);
+    targetObject[propertyName] = Object.assign({}, handlers);
 
-	observe(targetObject, propertyName);
+    observe(targetObject, propertyName);
 
-	copyGettersSetters(handlers, targetObject[propertyName]);
+    copyGettersSetters(handlers, targetObject[propertyName]);
 
-	[...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
-		input.addEventListener('input', (ev) => {
-			//console.log('input event', input, ev);
-			targetObject[propertyName].notify();
-		});
-	});
-}
+    Object.seal(targetObject[propertyName]); // object structure may not be changed from now on
 
+    [...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
+        input.addEventListener('input', (ev) => {
+            //console.log('input event', input, ev);
+            targetObject[propertyName].notify();
+        });
+    });
+}

package/dist/helpers.d.ts

@@ -6,7 +6,7 @@ export declare function sortObject(o: LooseObject): LooseObject;
 export declare function flattenObject(o: LooseObject, doSort?: boolean): LooseObject;
 export declare function deepEqual(o1: LooseObject, o2: LooseObject): boolean;
 export declare function nameSpace(ns: string | string[], obj?: LooseObject): any;
-export declare function parse(what: string | Object | any[], parseThis: Object): any;
+export declare function parse(what: string | object | any[], parseThis: object): any;
 export declare function kebabToPascal(str: string): string;
 export declare function debounce(func: Function, milliseconds: number): Function;
 export declare function htmlToElements(html: string): HTMLElement[];

package/dist/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC;CAC5B;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,GAAG,GAAG,OAAO,CAElD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,WAAW,GAAG,WAAW,CAatD;AAED,wBAAgB,aAAa,CAC5B,CAAC,EAAE,WAAW,EACd,MAAM,GAAE,OAAc,GACpB,WAAW,CAmBb;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,WAAW,GAAG,OAAO,CAInE;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,GAAG,GAAE,WAAgB,GAAG,GAAG,CAW3E;AAED,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,EAAE,EAAE,SAAS,EAAE,MAAM,OAyCrE;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,UAKxC;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,GAAG,QAAQ,CASvE;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,EAAE,CAU1D;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,QAO1E"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC;CAC/B;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,GAAG,GAAG,OAAO,CAElD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,WAAW,GAAG,WAAW,CAatD;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,GAAE,OAAc,GAAG,WAAW,CAejF;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,WAAW,GAAG,OAAO,CAEnE;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,GAAG,GAAE,WAAgB,GAAG,GAAG,CAW3E;AAED,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,EAAE,EAAE,SAAS,EAAE,MAAM,OAsCrE;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,UAKxC;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,GAAG,QAAQ,CASvE;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,EAAE,CAU1D;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,QAO1E"}

package/dist/helpers.js

@@ -17,9 +17,7 @@ export function sortObject(o) {
 export function flattenObject(o, doSort = true) {
     let result = {};
     [...Object.getOwnPropertyNames(o)].forEach((propName) => {
-        if (o[propName] &&
-            o[propName]['constructor'] &&
-            o[propName].constructor === Object) {
+        if (o[propName] && o[propName]['constructor'] && o[propName].constructor === Object) {
             const temp = flattenObject(o[propName], false);
             for (const j in temp) {
                 result[propName + '.' + j] = temp[j];
@@ -32,7 +30,7 @@ export function flattenObject(o, doSort = true) {
     return doSort ? sortObject(result) : result;
 }
 export function deepEqual(o1, o2) {
-    return (JSON.stringify(flattenObject(o1)) === JSON.stringify(flattenObject(o2)));
+    return JSON.stringify(flattenObject(o1)) === JSON.stringify(flattenObject(o2));
 }
 export function nameSpace(ns, obj = {}) {
     let nsa = ns.constructor === String ? ns.split('.') : ns;