@twobirds/microcomponents 0.0.33 → 0.0.37

package/public/src/formValues.ts

@@ -0,0 +1,275 @@
+"use strict";
+
+import { LooseObject } from './helpers.js'
+import { MC, addListener } from './MC.js'
+
+type inputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+
+const getInputName = ( e: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement ): string => {
+
+	let ret = e instanceof HTMLInputElement
+		? 'input'
+		: e instanceof HTMLSelectElement
+			? 'select'
+			: e instanceof HTMLTextAreaElement
+				? 'textarea'
+				: ''
+		;
+
+	return ret;
+}
+
+abstract class InputBase{
+	constructor( e: any ){
+	}
+
+	abstract get val(): any;
+
+	abstract set val( value: any );
+
+}
+
+const getInputHandlers = ( e: HTMLElement | ShadowRoot ): LooseObject => {
+
+		let
+			//inputList = ( Array.from( e.querySelectorAll('*') ) as HTMLElement[] ).filter( i => isInputElement(i) ),
+			inputList = [ ...( e || document).querySelectorAll('input,select,textarea') ],
+			handlers: LooseObject = {};
+
+		inputList.forEach( (i) => {
+			const
+				name: string = ( i as inputTypes ).getAttribute('name') || 'undefined';
+
+			if ( name ){
+				let h: InputBase;
+				switch ( getInputName( i as inputTypes ) ){
+					case 'input':
+						//console.log( i, 'is HTMLInputElement');
+						h = new InputHandler( i as HTMLInputElement, e ); // e = element to search radios in = radioBase
+						Object.defineProperty( handlers, name, {
+							enumerable: true,
+							configurable: true,
+							get: (): any => { return h.val },
+							set: ( value: any ) => { h.val = value }
+						});
+						break;
+					case 'select':
+						//console.log( i, 'is HTMLSelectElement');
+						h = new SelectHandler( i as HTMLSelectElement );
+						Object.defineProperty( handlers, name, {
+							enumerable: true,
+							configurable: true,
+							get: (): any => { return h.val },
+							set: ( value: any ) => { h.val = value }
+						});
+						break;
+					case 'textarea':
+						//console.log( i, 'is HTMLTextAreaElement');
+						h = new TextAreaHandler( i as HTMLTextAreaElement );
+						Object.defineProperty( handlers, name, {
+							enumerable: true,
+							configurable: true,
+							get: (): any => { return h.val },
+							set: ( value: any ) => { h.val = value }
+						});
+						break;
+					default:
+						console.warn('handler missing:', name, 'for', i);
+						break;
+				}
+			}
+		});
+
+		return handlers;
+}
+
+class InputHandler extends InputBase {
+
+	#e: HTMLInputElement;
+	#type: string;
+	#radioBase: any;
+
+	constructor( e: HTMLInputElement, radioBase?: HTMLElement | ShadowRoot ){
+		super( e );
+		this.#e = e;
+		this.#type = e.type;
+		this.#radioBase = radioBase;
+	}
+
+	get val(): any{
+		let that = this,
+			type = that.#type,
+			ret: any;
+
+		switch (type){
+			case 'radio':
+				const check = [ ...(this.#radioBase || document).querySelectorAll( `input[type="radio"][name="${ this.#e.getAttribute('name') }"]` ) ]
+					.filter( e => e.checked );
+				if ( !check.length ) return '';
+				ret = check?.[0];
+				return ret.value;
+			case 'checkbox':
+				return that.#e.checked;
+			default:
+				return that.#e.value;
+				break;
+		}
+
+		return '';
+	}
+
+	set val( value: any ){
+		let that = this,
+			type = that.#type,
+			ret: any;
+
+		switch (type){
+			case 'radio':
+				const
+					radios = [ ...(this.#radioBase || document).querySelectorAll(  `input[type="radio"][name="${ this.#e.getAttribute('name') }"]`  ) ];
+
+				// console.log('set radios', selection, this.#radioBase, radios.array );
+
+				if ( !radios.length ) return;
+
+				if ( value === '' ){ // uncheck all
+					radios.forEach( r => { if (r.checked) r.checked = false } );
+					//console.log('unset all radios', radios.array );
+					return;
+				}
+
+				const setRadioElement = radios.filter( r => r.getAttribute('value') === value );
+
+				if ( !setRadioElement.length ) return;
+
+				// console.log('set this radio', setRadioElement.array );
+
+				(setRadioElement?.[0] as HTMLInputElement).checked = true;
+
+				// console.log('done', setRadioElement.array );
+				return;
+				break;
+			case 'checkbox':
+				that.#e.checked = value;
+				break;
+			default:
+				that.#e.value = value;
+				break;
+		}
+
+		return;
+	}
+
+}
+
+class SelectHandler extends InputBase {
+
+	#e: HTMLSelectElement;
+	#multi: boolean = false;
+
+	constructor( e: HTMLSelectElement ){
+		super( e );
+		this.#e = e;
+		this.#multi = e.type === 'select-multiple';
+	}
+
+	get val(): string[] | string{
+		const
+			that = this,
+			ret: string[] = [];
+
+		// get all options
+		const options = [ ...that.#e.querySelectorAll('option') ]
+			.filter( o => o.selected )
+			.forEach( o => { if ( o.selected ) 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;
+
+		//console.log('set values', value );
+
+		// set all options
+		const options =  [ ...that.#e.querySelectorAll('option') ]
+			.forEach( o => {
+				if ( value.indexOf( o.value ) > -1 ) {
+					o.setAttribute( 'selected', 'selected' )
+					o.selected = true;
+				} else {
+					o.removeAttribute( 'selected' )
+					o.selected = false;
+				}
+			});
+
+		return;
+	}
+
+}
+
+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;
+		return;
+	}
+
+}
+
+export const formValues = ( target: HTMLElement | ShadowRoot, values: Object = {}, mc?: typeof MC, observable?: string ): LooseObject => {
+
+	//console.log( 'values(', target, ',', values, ',', observable, ')' );
+
+	//console.log( 'values()', values );
+	let handlers = getInputHandlers( target );
+
+	function updateForm( values: Object ){
+		Object
+			.keys( values )
+			.forEach( (key) => {
+				if ( handlers.hasOwnProperty(key) && values.hasOwnProperty(key) ) {
+					//console.log( 'set value', key, values[key] );
+					handlers[key] = (values as LooseObject)[key];
+				}
+		});
+	}
+
+	if ( Object.keys(values).length > 0 ){
+		updateForm( values );
+	}
+
+	//console.log( 'set observable on form change', observable );
+	if ( observable !== undefined ){
+		let obs = ( mc as LooseObject )[observable];
+		if ( !obs.constructor?.hasFormHandler ){
+			obs.constructor.hasFormHandler = true;
+			obs.observe( updateForm );
+		}
+
+		( mc as any)[observable].observe( () => { } );
+
+		[ ...target.querySelectorAll('input, textarea, select') ].forEach( ( e ) => {
+			addListener( (e as HTMLElement), 'keyup', () => { ( mc as any)[observable] = structuredClone( Object.assign( handlers ) ) } );
+			addListener( (e as HTMLElement), 'change', () => { ( mc as any)[observable] = structuredClone( Object.assign( handlers ) ) } );
+			if ( (e as HTMLElement) instanceof HTMLSelectElement ){
+				addListener( (e as HTMLElement), 'select', () => { ( mc as any)[observable] = structuredClone( Object.assign( handlers ) ) } );
+			};
+		});
+	}
+
+	return observable ? ( mc as any)[observable] : Object.assign( {}, handlers );
+}

package/public/src/helpers.ts

@@ -0,0 +1,140 @@
+'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] &&
+			o[propName]['constructor'] &&
+			o[propName].constructor === Object
+		) {
+			const temp = flattenObject(o[propName], false);
+			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[];
+}

package/public/src/microcomponents.ts

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