@twobirds/microcomponents 0.1.20 → 0.1.23

package/dist/formValues.js

@@ -1,158 +0,0 @@
-'use strict';
-import { copyGettersSetters } from './helpers.js';
-import { DC } from './MC.js';
-import { observe } from './observables.js';
-const getInputName = (e) => {
-    return e.tagName.toLowerCase();
-};
-class InputBase {
-    constructor(e) { }
-}
-class RadioHandler extends InputBase {
-    #e;
-    constructor(e) {
-        super(e);
-        this.#e = e;
-    }
-    get val() {
-        let ret = new FormData(this.#e.form).get(this.#e.name);
-        return ret;
-    }
-    set val(value) {
-        let arr = [
-            ...this.#e.form.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`),
-        ];
-        arr.filter((e) => e.getAttribute('value') === value).shift().checked =
-            true;
-    }
-}
-class CheckboxHandler extends InputBase {
-    #e;
-    constructor(e) {
-        super(e);
-        this.#e = e;
-    }
-    get val() {
-        return this.#e.checked;
-    }
-    set val(value) {
-        this.#e.checked = value;
-    }
-}
-class InputHandler extends InputBase {
-    #e;
-    constructor(e) {
-        super(e);
-        this.#e = e;
-    }
-    get val() {
-        return this.#e.value;
-    }
-    set val(value) {
-        this.#e.value = value;
-    }
-}
-class SelectHandler extends InputBase {
-    #e;
-    #multi = false;
-    constructor(e) {
-        super(e);
-        this.#e = e;
-        this.#multi = e.multiple;
-    }
-    get val() {
-        const that = this, ret = [];
-        [...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) {
-        const that = this;
-        value = typeof value === 'string' ? [value] : value;
-        [...that.#e.querySelectorAll('option')].forEach((o) => {
-            if (value.indexOf(o.value) > -1) {
-                o.selected = true;
-            }
-            else {
-                o.selected = false;
-            }
-        });
-    }
-}
-class TextAreaHandler extends InputBase {
-    #e;
-    constructor(e) {
-        super(e);
-        this.#e = e;
-    }
-    get val() {
-        return this.#e.value || '';
-    }
-    set val(value) {
-        this.#e.value = value;
-    }
-}
-const getInputHandlers = (e) => {
-    let inputList = [...(e || document).querySelectorAll('input,select,textarea')], handlers = {};
-    inputList.forEach((input) => {
-        const name = input.getAttribute('name');
-        if (name) {
-            let handler = false;
-            switch (getInputName(input)) {
-                case 'input':
-                    switch (input.type) {
-                        case 'radio':
-                            handler = new RadioHandler(input);
-                            break;
-                        case 'checkbox':
-                            handler = new CheckboxHandler(input);
-                            break;
-                        default:
-                            handler = new InputHandler(input);
-                    }
-                    break;
-                case 'select':
-                    handler = new SelectHandler(input);
-                    break;
-                case 'textarea':
-                    handler = new TextAreaHandler(input);
-                    break;
-                default:
-                    console.warn('handler missing:', name, 'for', input.tagName.toLowerCase(), input);
-                    break;
-            }
-            if (handler) {
-                DC.add(input, name, handler);
-                Object.defineProperty(handlers, name, {
-                    enumerable: true,
-                    configurable: true,
-                    get: () => {
-                        return handler.val;
-                    },
-                    set: (value) => {
-                        if (handler.val !== value) {
-                            handler.val = value;
-                        }
-                    },
-                });
-            }
-        }
-    });
-    return handlers;
-};
-export function formValues(targetObject, propertyName, dom) {
-    let handlers = getInputHandlers(dom);
-    targetObject[propertyName] = Object.assign({}, handlers);
-    observe(targetObject, propertyName);
-    copyGettersSetters(handlers, targetObject[propertyName]);
-    [...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
-        input.addEventListener('input', (ev) => {
-            targetObject[propertyName].notify();
-        });
-    });
-}

package/dist/formValues.ts

@@ -1,213 +0,0 @@
-'use strict';
-
-import { LooseObject, copyGettersSetters } from './helpers.js';
-import { DC, on } from './MC.js';
-import { observe } from './observables.js';
-
-type inputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-
-const getInputName = (e: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): string => {
-	return e.tagName.toLowerCase();
-};
-
-abstract class InputBase {
-	constructor(e: inputTypes) {}
-
-	abstract get val(): 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;
-	}
-}
-
-class CheckboxHandler extends InputBase {
-	#e: HTMLInputElement;
-
-	constructor(e: HTMLInputElement) {
-		super(e);
-		this.#e = e;
-	}
-
-	get val(): boolean {
-		return this.#e.checked;
-	}
-
-	set val(value: boolean) {
-		this.#e.checked = value;
-	}
-}
-
-class InputHandler extends InputBase {
-	#e: HTMLInputElement;
-
-	constructor(e: HTMLInputElement) {
-		super(e);
-		this.#e = e;
-	}
-
-	get val(): string {
-		return this.#e.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;
-			}
-		});
-	}
-}
-
-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;
-	}
-}
-
-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;
-};
-
-export function formValues(
-	targetObject: LooseObject,
-	propertyName: string,
-	dom: HTMLElement | ShadowRoot
-) {
-	let handlers = getInputHandlers(dom);
-
-	targetObject[propertyName] = Object.assign({}, handlers);
-
-	observe(targetObject, propertyName);
-
-	copyGettersSetters(handlers, targetObject[propertyName]);
-
-	//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

@@ -1,14 +0,0 @@
-export interface LooseObject {
-    [key: string | symbol]: any;
-}
-export declare function isNativeObject(value: any): boolean;
-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 kebabToPascal(str: string): string;
-export declare function debounce(func: Function, milliseconds: number): Function;
-export declare function htmlToElements(html: string): HTMLElement[];
-export declare function copyGettersSetters(source: LooseObject, target: LooseObject): void;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/helpers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["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,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,GAAE,OAAc,GAAG,WAAW,CAgBjF;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

@@ -1,111 +0,0 @@
-'use strict';
-export function isNativeObject(value) {
-    return value && value['constructor'] && value.constructor === Object;
-}
-export function sortObject(o) {
-    let result = {}, keys = [...Object.keys(o)].sort();
-    keys.forEach((key) => {
-        if (isNativeObject(o[key])) {
-            result[key] = sortObject(o[key]);
-        }
-        else {
-            result[key] = o[key];
-        }
-    });
-    return result;
-}
-export function flattenObject(o, doSort = true) {
-    let result = {};
-    [...Object.getOwnPropertyNames(o)].forEach((propName) => {
-        if (o[propName] instanceof Object) {
-            const temp = flattenObject(o[propName], false);
-            result[propName] = {};
-            for (const j in temp) {
-                result[propName + '.' + j] = temp[j];
-            }
-        }
-        else {
-            result[propName] = o[propName];
-        }
-    });
-    return doSort ? sortObject(result) : result;
-}
-export function deepEqual(o1, o2) {
-    return JSON.stringify(flattenObject(o1)) === JSON.stringify(flattenObject(o2));
-}
-export function nameSpace(ns, obj = {}) {
-    let nsa = ns.constructor === String ? ns.split('.') : ns;
-    if (!obj || !nsa[0] || !obj[nsa[0]]) {
-        console.warn('ns', nsa[0], 'not in', obj);
-        return;
-    }
-    if (obj[nsa[0]].constructor === Object && nsa.length > 1) {
-        return nameSpace(nsa.splice(1), obj[nsa[0]]);
-    }
-    return obj[nsa[0]];
-}
-export function parse(what, parseThis) {
-    var args = Array.from(arguments);
-    if (args.length > 2) {
-        while (args.length > 1) {
-            args[0] = parse(args[0], args[1]);
-            args.splice(1, 1);
-        }
-        return args[0];
-    }
-    if (typeof what === 'string') {
-        what.match(/\{[^\{\}]*\}/g)?.forEach(function (pPropname) {
-            var propname = pPropname.substring(1, pPropname.length - 1), value = nameSpace(propname, parseThis);
-            if (typeof value !== 'undefined') {
-                what = what.replace(pPropname, value);
-            }
-        });
-    }
-    else if (isNativeObject(what)) {
-        switch (what.constructor) {
-            case Object:
-                Object.keys(what).forEach(function (pKey) {
-                    if (what.hasOwnProperty(pKey)) {
-                        what[pKey] = parse(what[pKey], parseThis);
-                    }
-                });
-                break;
-            case Array:
-                what.forEach(function (pValue, pKey, original) {
-                    original[pKey] = parse(what[pKey], parseThis);
-                });
-                break;
-        }
-    }
-    return what;
-}
-export function kebabToPascal(str) {
-    return str
-        .split('-')
-        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-        .join('');
-}
-export function debounce(func, milliseconds) {
-    let timeout;
-    return () => {
-        clearTimeout(timeout);
-        timeout = setTimeout(function () {
-            func(...arguments);
-        }, milliseconds);
-    };
-}
-export function htmlToElements(html) {
-    let template = document.createElement('template');
-    html = html.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi, '<$1$2></$1>');
-    template.innerHTML = html;
-    template.content.normalize();
-    return Array.from(template.content.childNodes);
-}
-export function copyGettersSetters(source, target) {
-    const descriptors = Object.getOwnPropertyDescriptors(source);
-    for (const [key, descriptor] of Object.entries(descriptors)) {
-        if ('get' in descriptor || 'set' in descriptor) {
-            Object.defineProperty(target, key, descriptor);
-        }
-    }
-}

package/dist/helpers.ts

@@ -1,138 +0,0 @@
-'use strict';
-
-export interface LooseObject {
-	[key: string | symbol]: any;
-}
-
-export function isNativeObject(value: any): boolean {
-	return value && value['constructor'] && value.constructor === Object;
-}
-
-export function sortObject(o: LooseObject): LooseObject {
-	let result: LooseObject = {},
-		keys = [...Object.keys(o)].sort();
-
-	keys.forEach((key) => {
-		if (isNativeObject(o[key])) {
-			result[key] = sortObject(o[key]);
-		} else {
-			result[key] = o[key];
-		}
-	});
-
-	return result;
-}
-
-export function flattenObject(o: LooseObject, doSort: boolean = true): LooseObject {
-	let result: LooseObject = {};
-
-	[...Object.getOwnPropertyNames(o)].forEach((propName) => {
-		if (o[propName] instanceof Object) {
-			const temp = flattenObject(o[propName], false);
-			result[propName] = {};
-			for (const j in temp) {
-				result[propName + '.' + j] = temp[j];
-			}
-		} else {
-			result[propName] = o[propName];
-		}
-	});
-
-	return doSort ? sortObject(result) : result;
-}
-
-export function deepEqual(o1: LooseObject, o2: LooseObject): boolean {
-	return JSON.stringify(flattenObject(o1)) === JSON.stringify(flattenObject(o2));
-}
-
-export function nameSpace(ns: string | string[], obj: LooseObject = {}): any {
-	let nsa = ns.constructor === String ? ns.split('.') : ns;
-
-	if (!obj || !nsa[0] || !obj[nsa[0]]) {
-		console.warn('ns', nsa[0], 'not in', obj);
-		return;
-	}
-	if (obj[nsa[0]].constructor === Object && nsa.length > 1) {
-		return nameSpace((nsa as string[]).splice(1), obj[nsa[0]]);
-	}
-	return obj[nsa[0]];
-}
-
-export function parse(what: string | object | any[], parseThis: object) {
-	var args = Array.from(arguments);
-
-	if (args.length > 2) {
-		while (args.length > 1) {
-			args[0] = parse(args[0], args[1]);
-			args.splice(1, 1);
-		}
-		return args[0];
-	}
-
-	if (typeof what === 'string') {
-		what.match(/\{[^\{\}]*\}/g)?.forEach(function (pPropname) {
-			var propname = pPropname.substring(1, pPropname.length - 1),
-				value = nameSpace(propname, parseThis);
-			//console.log(propname, value);
-			if (typeof value !== 'undefined') {
-				what = (what as string).replace(pPropname, value);
-			}
-		});
-	} else if (isNativeObject(what)) {
-		switch (what.constructor) {
-			case Object:
-				Object.keys(what).forEach(function (pKey) {
-					if (what.hasOwnProperty(pKey)) {
-						(what as LooseObject)[pKey] = parse((what as LooseObject)[pKey], parseThis);
-					}
-				});
-				break;
-			case Array:
-				(what as Array<any>).forEach(function (pValue, pKey, original) {
-					original[pKey] = parse((what as any)[pKey], parseThis);
-				});
-				break;
-		}
-	}
-
-	return what;
-}
-
-export function kebabToPascal(str: string) {
-	return str
-		.split('-') // Split by hyphens
-		.map((word) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each part
-		.join(''); // Join without spaces
-}
-
-export function debounce(func: Function, milliseconds: number): Function {
-	let timeout: any;
-	return () => {
-		clearTimeout(timeout);
-
-		timeout = setTimeout(function () {
-			func(...arguments);
-		}, milliseconds);
-	};
-}
-
-export function htmlToElements(html: string): HTMLElement[] {
-	let template = document.createElement('template');
-
-	html = html.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi, '<$1$2></$1>'); // replace XHTML closing tags by full closing tags
-
-	template.innerHTML = html;
-
-	template.content.normalize();
-
-	return Array.from(template.content.childNodes) as HTMLElement[];
-}
-
-export function copyGettersSetters(source: LooseObject, target: LooseObject) {
-	const descriptors = Object.getOwnPropertyDescriptors(source);
-	for (const [key, descriptor] of Object.entries(descriptors)) {
-		if ('get' in descriptor || 'set' in descriptor) {
-			Object.defineProperty(target, key, descriptor);
-		}
-	}
-}

package/dist/microcomponents.ts

@@ -1,6 +0,0 @@
-'use strict';
-export * from './helpers.js';
-export * from './MC.js';
-export * from './elements.js';
-export * from './observables.js';
-export * from './formValues.js';

package/dist/observables.d.ts

@@ -1,11 +0,0 @@
-import { LooseObject } from './helpers.js';
-type Callback = (value: any) => void;
-export type Observable = {
-    observe: (cb: Callback) => void;
-    notify: () => void;
-    bind: (target: HTMLElement | DocumentFragment | ShadowRoot) => void;
-    callbacks: Array<Function>;
-};
-export declare const observe: (target: LooseObject, propertyName?: string) => LooseObject;
-export {};
-//# sourceMappingURL=observables.d.ts.map

package/dist/observables.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"observables.d.ts","sourceRoot":"","sources":["observables.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAA0D,MAAM,cAAc,CAAC;AAQnG,KAAK,QAAQ,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;AAiJrC,MAAM,MAAM,UAAU,GAAG;IACxB,OAAO,EAAE,CAAC,EAAE,EAAE,QAAQ,KAAK,IAAI,CAAC;IAChC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,EAAE,CAAC,MAAM,EAAE,WAAW,GAAG,gBAAgB,GAAG,UAAU,KAAK,IAAI,CAAC;IACpE,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;CAC3B,CAAC;AAsGF,eAAO,MAAM,OAAO,WAAY,WAAW,iBAAiB,MAAM,KAAG,WA2EpE,CAAC"}