diff --git a/packages/rdom-components/src/index.ts b/packages/rdom-components/src/index.ts index 4b75abe0e3..ab0fe13079 100644 --- a/packages/rdom-components/src/index.ts +++ b/packages/rdom-components/src/index.ts @@ -1,5 +1,6 @@ export * from "./accordion"; export * from "./dropdown"; -export * from "./icon-button"; export * from "./editor"; +export * from "./icon-button"; +export * from "./input"; export * from "./tabs"; diff --git a/packages/rdom-components/src/input.ts b/packages/rdom-components/src/input.ts new file mode 100644 index 0000000000..cfbccd56d7 --- /dev/null +++ b/packages/rdom-components/src/input.ts @@ -0,0 +1,47 @@ +import type { NumericArray } from "@thi.ng/api"; +import { + Attribs, + div, + inputNumber, + InputNumericAttribs, +} from "@thi.ng/hiccup-html"; +import type { ISubscription } from "@thi.ng/rstream"; +import { pluck, repeatedly } from "@thi.ng/transducers"; + +export const inputNumeric = ( + dest: ISubscription, + attribs?: Partial +) => + inputNumber({ + ...attribs, + value: dest, + oninput: (e: InputEvent) => + dest.next(parseFloat((e.target).value)), + }); + +export const inputVector = ( + dim: number, + dest: ISubscription, + outerAttribs: Partial = {}, + innerAttribs?: Partial +) => + div( + outerAttribs, + ...repeatedly((i) => inputVectorCoord(dim, i, dest, innerAttribs), dim) + ); + +export const inputVectorCoord = ( + dim: number, + i: number, + dest: ISubscription, + attribs?: Partial +) => + inputNumber({ + ...attribs, + value: dest.transform(pluck(i)), + oninput: (e: InputEvent) => { + const vec = (dest.deref() || new Array(dim).fill(0)).slice(); + vec[i] = parseFloat((e.target).value); + dest.next(vec); + }, + });