@twobirds/microcomponents 0.1.21 → 0.2.0

package/dist/formValues.ts

@@ -1,371 +0,0 @@
-import { DC } from './MC.js';
-import { copyGettersSetters, LooseObject } from './helpers.js';
-import { observe } from './observables.js';
-
-/**
-Union type for form input elements.
-*/
-type inputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-
-/**
-Extracts the lowercase tag name of an element (e.g., 'input', 'select', 'textarea').
-@param e - The HTML element to extract the tag name from.
-@returns The lowercase tag name string.
-*/
-const getInputName = (e: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): string => {
-	return e.tagName.toLowerCase();
-};
-
-/**
-Abstract base class for form input value handlers.
-Defines the interface that all handler classes must implement.
-*/
-abstract class InputBase {
-	/**
-	Creates a new InputBase instance.
-	@param e - The HTML element being handled (input, select, or textarea).
-	*/
-	constructor(e: inputTypes) {}
-
-	/**
-	Gets the current value of the form control.
-	@returns The value in an appropriate type for the control.
-	*/
-	abstract get val(): any;
-
-	/**
-	Sets the value of the form control.
-	@param value - The new value to assign (type depends on control).
-	*/
-	abstract set val(value: any);
-}
-
-/**
-Handler class specifically for radio button groups.
-Provides synchronized access to the selected value in a group of related radio buttons.
-*/
-class RadioHandler extends InputBase {
-	#e: HTMLInputElement;
-
-	/**
-	Creates a new RadioHandler instance.
-	@param e - The first radio button element in the group (used to determine name and form scope).
-	*/
-	constructor(e: HTMLInputElement) {
-		super(e);
-		this.#e = e;
-	}
-
-	/**
-	Gets the currently selected value of the radio button group using FormData API.
-	@returns The string value of the selected radio button, or undefined if none is selected.
-	*/
-	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;
-	}
-
-	/**
-	Sets the selected radio button by value.
-	Finds and checks the first radio input matching the specified value within the same group.
-	@param value - The value to match against radio inputs in this group.
-	*/
-	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;
-	}
-}
-
-/**
- * Handler class for checkbhox inputs.
- * Provides synchronized get/set access to the checked state of a single checkbox.
- */
-class CheckboxHandler extends InputBase {
-	#e: HTMLInputElement;
-
-	/**
-	Creates a new CheckboxHandler instance.
-	@param e - The checkbox element to handle.
-	*/
-	constructor(e: HTMLInputElement) {
-		super(e);
-		this.#e = e;
-	}
-
-	/**
-	Gets the checked state of the checkbox.
-	@returns True if the checkbox is checked, false otherwise.
-	*/
-	get val(): boolean {
-		return this.#e.checked;
-	}
-
-	/**
-	Sets the checked state of the checkbox.
-	@param value - The boolean value to assign as the new checked state.
-	*/
-	set val(value: boolean) {
-		this.#e.checked = value;
-	}
-}
-
-/**
-Handler class for standard single-line input fields (text, password, email, etc.).
-Provides synchronized get/set access to the value of an input field.
-*/
-class InputHandler extends InputBase {
-	#e: HTMLInputElement;
-
-	/**
-	 * Creates a new InputHandler instance.
-	 * @param e - The HTML input element to handle.
-	 */
-	constructor(e: HTMLInputElement) {
-		super(e);
-		this.#e = e;
-	}
-
-	/**
-	 * Gets the current value of the input field.
-	 * @returns The string content of the input element.
-	 */
-	get val(): string {
-		return this.#e.value;
-	}
-
-	/**
-	 * Sets the value of the input field.
-	 * @param value - The new string value for the input element.
-	 */
-	set val(value: string) {
-		this.#e.value = value;
-	}
-}
-
-/**
-Handler class for select dropdown elements, supporting both single and multiple selection modes.
-Provides synchronized get/set access to selected option values.
-*/
-class SelectHandler extends InputBase {
-	#e: HTMLSelectElement;
-	#multi: boolean = false;
-
-	/**
-	 * Creates a new SelectHandler instance.
-	 * @param e - The select element to handle.
-	 */
-	constructor(e: HTMLSelectElement) {
-		super(e);
-		this.#e = e;
-		this.#multi = e.multiple;
-	}
-
-	/**
-	 * Gets the currently selected option value(s).
-	 * For single selection, returns a string. For multiple selection, returns an array of strings.
-	 * @returns A string or array of strings representing selected values.
-	 */
-	get val(): string[] | string {
-		const ret: string[] = [];
-
-		// get all options
-		[...this.#e.querySelectorAll('option')]
-			.filter((o) => o.selected)
-			.forEach((o) => {
-				ret.push(o.value);
-			});
-
-		if (this.#multi) return ret;
-		return ret.length ? ret[0] : '';
-	}
-
-	/**
-	 * Sets the selected option(s) by value.
-	 * @param value - A string or array of strings representing values to select.
-	 */
-	set val(value: string[] | string) {
-		value = typeof value === 'string' ? [value] : value;
-
-		// set all options
-		[...this.#e.querySelectorAll('option')].forEach((o) => {
-			if (value.indexOf(o.value) > -1) {
-				o.selected = true;
-			} else {
-				o.selected = false;
-			}
-		});
-	}
-}
-
-/**
-Handler class for textarea elements.
-Provides synchronized get/set access to the multi-line text content of a textarea.
-*/
-class TextAreaHandler extends InputBase {
-	#e: HTMLTextAreaElement;
-
-	/**
-	 * Creates a new TextAreaHandler instance.
-	 * @param e - The textarea element to handle.
-	 */
-	constructor(e: HTMLTextAreaElement) {
-		super(e);
-		this.#e = e;
-	}
-
-	/**
-	 * Gets the current value of the textarea (defaults to empty string if null/undefined).
-	 * @returns The string content of the textarea element.
-	 */
-	get val(): string {
-		return this.#e.value || '';
-	}
-
-	/**
-	 * Sets the value of the textarea.
-	 * @param value - The new string value for the textarea element.
-	 */
-	set val(value: string) {
-		this.#e.value = value;
-	}
-}
-
-/**
-Collects all form controls within a given DOM scope and creates handler objects
-that provide synchronized get/set access to their values.
-
-@param e - Optional root DOM element or shadow root to search within; defaults to document if omitted.
-@returns An object where each key is the name attribute of an input, select, or textarea,
-         and each value is a proxy-like accessor object with `val` getter/setter methods.
-*/
-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;
-};
-
-/**
-Attaches a form-values observable to a target object property, allowing two-way binding
-between the DOM form controls and the object's state.
-
-@param targetObject - The object to which the form values will be attached as an observable.
-@param propertyName - The name of the property on the target object that will hold the form data.
-@param dom - The DOM element or shadow root (typically a form) whose inputs should be observed and bound.
-
-@example
-HTML
-```html
-<!-- HTML Form -->
-<form id="myForm">
-  <input type="text" name="username" value="">
-  <select name="role">
-    <option value="admin">Admin</option>
-    <option value="user">User</option>
-  </select>
-  <textarea name="bio"></textarea>
-  <input type="checkbox" name="active">
-  <input type="radio" name="gender" value="male"> Male
-  <input type="radio" name="gender" value="female"> Female
-</form>
-```
-Javascript
-```typescript
-import { formValues } from './formValues.js';
-
-const state = {};
-
-// Bind the form to state.formData
-formValues(state, 'formData', document.getElementById('myForm'));
-
-// Read values from the form
-console.log(state.formData.username);  // string
-console.log(state.formData.role);      // "admin" or "user"
-console.log(state.formData.bio);       // string
-console.log(state.formData.active);    // boolean
-console.log(state.formData.gender);    // "male" or "female"
-
-// Write values to the form (updates DOM automatically)
-state.formData.username = 'john_doe';
-state.formData.role = 'user';
-state.formData.bio = 'Hello world!';
-state.formData.active = true;
-state.formData.gender = 'male';
-```
- */
-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,15 +0,0 @@
-export declare function isBrowser(): boolean;
-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":["../src/helpers.ts"],"names":[],"mappings":"AAaA,wBAAgB,SAAS,YAExB;AAKD,MAAM,WAAW,WAAW;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC;CAC5B;AAOD,wBAAgB,cAAc,CAAC,KAAK,EAAE,GAAG,GAAG,OAAO,CAElD;AAOD,wBAAgB,UAAU,CAAC,CAAC,EAAE,WAAW,GAAG,WAAW,CAatD;AASD,wBAAgB,aAAa,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,GAAE,OAAc,GAAG,WAAW,CAgBjF;AAQD,wBAAgB,SAAS,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,WAAW,GAAG,OAAO,CAEnE;AAQD,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,GAAG,GAAE,WAAgB,GAAG,GAAG,CAW3E;AAUD,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,EAAE,EAAE,SAAS,EAAE,MAAM,OAsCrE;AAQD,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,UAKxC;AAUD,wBAAgB,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,GAAG,QAAQ,CASvE;AAQD,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,EAAE,CAU1D;AAQD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,QAO1E"}

package/dist/helpers.js

@@ -1,113 +0,0 @@
-export function isBrowser() {
-    return window ? true : false;
-}
-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);
-        }
-    }
-}