@twobirds/microcomponents 0.0.20 → 0.0.22

package/dist/formValues.d.ts

@@ -0,0 +1,4 @@
+import { LooseObject } from './helpers.js';
+import { MC } from './MC.js';
+export declare const formValues: (target: HTMLElement | ShadowRoot, values?: Object, mc?: typeof MC, observable?: string) => LooseObject;
+//# sourceMappingURL=formValues.d.ts.map

package/dist/formValues.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formValues.d.ts","sourceRoot":"","sources":["../src/formValues.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAE,EAAE,EAAe,MAAM,SAAS,CAAA;AAqOzC,eAAO,MAAM,UAAU,WAAa,WAAW,GAAG,UAAU,WAAU,MAAM,OAAY,OAAO,EAAE,eAAe,MAAM,KAAI,WA0CzH,CAAA"}

package/dist/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/dist/formvValues.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.formValues=t():e.formValues=t()}(this,(()=>(()=>{"use strict";var e={d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{formValues:()=>d});var r=new Function("try {return this===window;}catch(e){ return false;}");let n=new Set;r()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>n.add(e)));var o=new Function("try {return this===window;}catch(e){ return false;}");let s=new Set;function c(e,t,r,n=!1,o=!1){let s={once:!1};n&&(s.capture=n),o&&(s.once=o),e.addEventListener(t,r,s)}o()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>s.add(e)));class l{constructor(e){}}class a extends l{#e;#t;#r;constructor(e,t){super(e),this.#e=e,this.#t=e.type,this.#r=t}get val(){let e,t=this;switch(t.#t){case"radio":const r=[...(this.#r||document).querySelectorAll(`input[type="radio"][name="${this.#e.getAttribute("name")}"]`)].filter((e=>e.checked));return r.length?(e=r?.[0],e.value):"";case"checkbox":return t.#e.checked;default:return t.#e.value}return""}set val(e){let t=this;switch(t.#t){case"radio":const r=[...(this.#r||document).querySelectorAll(`input[type="radio"][name="${this.#e.getAttribute("name")}"]`)];if(!r.length)return;if(""===e)return void r.forEach((e=>{e.checked&&(e.checked=!1)}));const n=r.filter((t=>t.getAttribute("value")===e));if(!n.length)return;return void((n?.[0]).checked=!0);case"checkbox":t.#e.checked=e;break;default:t.#e.value=e}}}class i extends l{#e;#n=!1;constructor(e){super(e),this.#e=e,this.#n="select-multiple"===e.type}get val(){const e=[];return[...this.#e.querySelectorAll("option")].filter((e=>e.selected)).forEach((t=>{t.selected&&e.push(t.value)})),this.#n?e:e.length?e[0]:""}set val(e){e="string"==typeof e?[e]:e,[...this.#e.querySelectorAll("option")].forEach((t=>{e.indexOf(t.value)>-1?(t.setAttribute("selected","selected"),t.selected=!0):(t.removeAttribute("selected"),t.selected=!1)}))}}class u extends l{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value}set val(e){this.#e.value=e}}const d=(e,t={},r,n)=>{let o=(e=>{let t=[...(e||document).querySelectorAll("input,select,textarea")],r={};return t.forEach((t=>{const n=t.getAttribute("name")||"undefined";if(n){let o;switch((e=>e instanceof HTMLInputElement?"input":e instanceof HTMLSelectElement?"select":e instanceof HTMLTextAreaElement?"textarea":"")(t)){case"input":o=new a(t,e),Object.defineProperty(r,n,{enumerable:!0,configurable:!0,get:()=>o.val,set:e=>{o.val=e}});break;case"select":o=new i(t),Object.defineProperty(r,n,{enumerable:!0,configurable:!0,get:()=>o.val,set:e=>{o.val=e}});break;case"textarea":o=new u(t),Object.defineProperty(r,n,{enumerable:!0,configurable:!0,get:()=>o.val,set:e=>{o.val=e}});break;default:console.warn("handler missing:",n,"for",t)}}})),r})(e);function s(e){Object.keys(e).forEach((t=>{o.hasOwnProperty(t)&&e.hasOwnProperty(t)&&(o[t]=e[t])}))}if(Object.keys(t).length>0&&s(t),void 0!==n){let t=r[n];t.constructor?.hasFormHandler||(t.constructor.hasFormHandler=!0,t.observe(s)),r[n].observe((()=>{})),[...e.querySelectorAll("input, textarea, select")].forEach((e=>{c(e,"keyup",(()=>{r[n]=structuredClone(Object.assign(o))})),c(e,"change",(()=>{r[n]=structuredClone(Object.assign(o))})),e instanceof HTMLSelectElement&&c(e,"select",(()=>{r[n]=structuredClone(Object.assign(o))}))}))}return n?r[n]:Object.assign({},o)};return t})()));

package/dist/helpers.d.ts

@@ -0,0 +1,11 @@
+export declare function isObject(value: any): boolean;
+export interface LooseObject {
+    [key: string | symbol]: any;
+}
+export declare function kebabToPascal(str: string): string;
+export declare function debounce(func: Function, milliseconds: number): Function;
+export declare function deepEqual(o1: any, o2: any): boolean;
+export declare function nameSpace(ns: string, obj: LooseObject, val?: any, orig?: any): any;
+export declare function parse(what: string | Object | any[], parseThis: Object): any;
+export declare function htmlToElements(html: string): HTMLElement[];
+//# sourceMappingURL=helpers.d.ts.map

package/dist/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAEA,wBAAgB,QAAQ,CAAE,KAAK,EAAE,GAAG,GAAI,OAAO,CAE9C;AAED,MAAM,WAAW,WAAW;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC;CAC5B;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,UAKxC;AAED,wBAAgB,QAAQ,CAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,GAAI,QAAQ,CAazE;AAED,wBAAgB,SAAS,CAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAC,GAAG,GAAG,OAAO,CAoBnD;AAED,wBAAgB,SAAS,CAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,GAAE,GAAU,EAAE,IAAI,CAAC,EAAE,GAAG,GAAI,GAAG,CA2C1F;AAED,wBAAgB,KAAK,CAAE,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,EAAE,EAAE,SAAS,EAAE,MAAM,OA4DtE;AAED,wBAAgB,cAAc,CAAE,IAAI,EAAE,MAAM,GAAI,WAAW,EAAE,CAW5D"}

package/dist/helpers.ts

@@ -0,0 +1,173 @@
+"use strict";
+
+export function isObject( value: any ): boolean {
+  return value != null && typeof value === 'object';
+}
+
+export interface LooseObject {
+	[key: string | symbol]: any;
+}
+
+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 deepEqual( o1: any, o2:any): boolean {
+	const k1 = Object.keys(o1);
+	const k2 = Object.keys(o2);
+	if (k1.length !== k2.length) {
+		return false;
+	}
+	for (const key of k1) {
+		const
+			v1 = o1[key],
+			v2 = o2[key],
+			recurse = isObject(v1) && isObject(v2);
+		;
+		if (
+			( recurse && !deepEqual(v1, v2) )
+			|| (!recurse && v1 !== v2)
+		) {
+			return false;
+		}
+	}
+	return true;
+}
+
+export function nameSpace( ns: string, obj: LooseObject, val: any = null, orig?: any ): any {
+	let leftOver: Array<any> = ns.split('.');
+
+	if ( !orig ){
+		orig = obj;
+	}
+
+	// console.log( 'start', ns, obj, val, leftOver );
+
+	let
+		last: string = leftOver.shift(),	// this property name
+		lns: string = leftOver.join('.')	// the leftover namespace
+	;
+
+	if ( val !== null && last.length && obj[last] === undefined ){ // extend if val given and ns leftover...
+		// console.log( 'add prop', last );
+		obj[last] = {};
+	}
+
+	let
+		lob: any = obj[last]	// the leftover value or obj
+	;
+
+	// console.log( 'lob', lob, 'last:', last, 'lns:', lns, 'obj:', obj );
+
+	if ( lns.length === 0 ){ // this should be the value to set or get
+		if ( val !== null ){
+			obj[last] = val;
+			return orig;
+		}
+		return obj[last];
+	}
+
+	if ( isObject( obj[last] ) ){
+		return nameSpace( lns, obj[last], val, orig );
+	} else {
+		if (val){
+			return orig;
+		}
+
+		return lob[last];
+	}
+
+}
+
+export function parse( what: string | Object | any[], parseThis: Object ){
+	var args = Array.from(arguments);
+
+	if (!args.length){
+		console.error('no arguments give to parse');
+		return;
+	}
+
+	if (args.length === 1){
+		return args[1];
+	} else if (args.length > 2) {
+		while (args.length > 1){
+			args[0] = parse( args[0], args[1]);
+			args.splice(1, 1);
+		}
+		return args[0];
+	}
+
+	// implicit else: exactly 2 arguments
+	if ( typeof what === 'string' ){
+		var vars = what.match( /\{[^\{\}]*\}/g );
+
+		if ( !!vars ) {
+			vars
+				.forEach(
+					function (pPropname) {
+						var propname = pPropname.substr(1, pPropname.length - 2),
+							value = nameSpace( propname, parseThis );
+
+						if ( typeof value !== 'undefined' ){
+							what = (what as string).replace( pPropname, value );
+						}
+					}
+				);
+		}
+	} else if ( isObject(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 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/dist/microcomponents.es3.d.ts

@@ -1,21 +1,2 @@
-declare function __isEmpty(obj: any): boolean;
-declare function MC(target: any): void;
-declare class MC {
-    static add(target: any, key: any, element?: {}): {};
-    static remove(target: any, key: any): void;
-    static debug: boolean;
-    static siblings(target: any, search?: string): any;
-    constructor(target: any);
-    constructor(target: any);
-    _target: any;
-    siblings(search: any): any[];
-    parent(search: any): any;
-    parents(search: any): any[];
-    children(search: any): any[];
-    descendants(search: any): any[];
-}
-declare namespace MC {
-    function add(domElement: any, key: any, element: any): typeof MC;
-    function remove(domElement: any, key: any): typeof MC;
-}
+declare function findNodesWithMcAttribute(rootNode: any, childrenOnly: any): any[];
 //# sourceMappingURL=microcomponents.es3.d.ts.map

package/dist/microcomponents.es3.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"microcomponents.es3.d.ts","sourceRoot":"","sources":["../src/microcomponents.es3.js"],"names":[],"mappings":"AAEA,8CAQC;AAED,uCAEC;;;;;;;IAFD,yBAEC;IADA,aAAqB;IAqBtB,6BAcC;IAED,yBAUC;IAED,4BAUC;IAED,6BAeC;IAED,gCAcC;;;IAxFD,iEAMC;IAED,sDAMC"}
+{"version":3,"file":"microcomponents.es3.d.ts","sourceRoot":"","sources":["../src/microcomponents.es3.js"],"names":[],"mappings":"AAgWA,mFAwBC"}

package/dist/test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=test.d.ts.map

package/dist/test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test.d.ts","sourceRoot":"","sources":["../src/test.js"],"names":[],"mappings":""}

package/package.json

@@ -1,23 +1,27 @@
 {
   "name": "@twobirds/microcomponents",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "Micro Components Organization Class",
-  "main": "microcomponents.js",
+  "main": "./dist/MCBundle.js",
+  "types": "./dist/MCBundle.d.ts",
   "sideEffects": false,
   "scripts": {
     "typedoc": "typedoc",
+    "webpack": "webpack",
     "clean": "rm -rf build/*; rm -rf dist/*;",
     "prep": "cp -R assets/* public || true; cp src/* build || true;",
-    "build": "npm run clean; npm run prep; tsc; npm run minify; npm run copyToDist;",
-    "minify": "jsmin -o build/microcomponents.es3.min.js ./src/microcomponents.es3.js;jsmin -o build/microcomponents.min.js build/microcomponents.js;",
-    "copyToDist": "cp -R assets/* public || true; cp build/micro* dist; cp build/microcomponents.js public; cp build/test.js public; cp MicroComponents.svg dist; cp MicroComponents.svg public/fiddle;"
+    "build": "npm run clean; npm run prep; tsc; npm run copyToDist; npm run webpack; cp dist/*.js public; cp build/test.js public; cp build/*.js public;",
+    "copyToDist": "cp -R assets/* public || true; cp build/*.ts* dist; cp MicroComponents.svg dist; cp MicroComponents.svg public/fiddle; cp dist/MicroComponents.svg public;"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "jsmin": "^1.0.1",
-    "typedoc": "^0.26.10",
-    "typescript": "^5.6.3"
+    "ts-loader": "^9.5.2",
+    "typedoc": "^0.26.11",
+    "typescript": "^5.5.4",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1"
   },
   "keywords": [
     "javascript",