rimmel
Version:
A Streams-Oriented UI library for the Rx.Observable Universe
38 lines (35 loc) • 1.77 kB
JavaScript
import { inputPipe } from '../utils/input-pipe.js';
import { map } from 'rxjs';
const DataMappers = {
text: (x) => x,
number: (x) => Number(x),
date: (x) => new Date(x),
};
const ElementMappers = {
text: (e) => e.value,
number: (e) => e.valueAsNumber,
date: (e) => e.valueAsDate,
checkbox: (e) => e.checked,
radio: (e) => e.checked && (DataMappers[e.dataset.type]?.(e.value) ?? e.value) || undefined,
'select-one': (e) => DataMappers[(e.options[e.selectedIndex].dataset.type ?? e.dataset.type)]?.(e.value) ?? e.value,
'select-multiple': (e) => [...e.options].filter(o => o.selected).map(o => (DataMappers[o.dataset.type ?? e.dataset.type] ?? DataMappers.text)(o.value)),
};
const resolve = (e) => (ElementMappers[(e.type ?? e.dataset.type)] ?? ElementMappers.text)(e);
/**
* An Event Operator emitting a typed FormData object from the underlying <form> element instead of a regular DOM Event object
* Field types are taken from their respective data-type attribute or string if unset
* @returns OperatorFunction<Event, FormData>
* @example <form onsubmit="${source(isValid, form, stream)}"> ... </form>
**/
const autoForm = map((e) => Object.fromEntries([...e.currentTarget.elements]
.map((e) => [e.name ?? e.id, resolve(e)])
.filter(([k, v]) => k !== '' && v !== undefined)));
/**
* An Event Adapter emitting a FormData object from the underlying form element instead of a regular DOM Event object
* @returns EventSource<string>
* @example <form action="dialog" onsubmit="${AsTypedForm(stream)}"> ... </form>
* @example <form action="dialog" onsubmit="${AsTypedForm(handlerFn)}"> ... </form>
**/
const AutoForm = inputPipe(autoForm);
export { AutoForm, autoForm };
//# sourceMappingURL=autoform-source.js.map