1 files changed, 86 insertions, 0 deletions
diff --git a/src_js/vt/input.ts b/src_js/vt/input.ts
new file mode 100644
index 0000000..749edbb
--- /dev/null
+++ b/src_js/vt/input.ts
@@ -0,0 +1,86 @@
+import * as u from '@hat-open/util';
+
+
+export function text(
+    value: string,
+    validator: ((val: string) => boolean) | null,
+    onChange: (val: string) => void
+): u.VNode {
+    return ['input', {
+        props: {
+            type: 'text',
+            value: value
+        },
+        class: {
+            invalid: validator && !validator(value)
+        },
+        on: {
+            change: (evt: Event) => onChange((evt.target as HTMLInputElement).value)
+        }
+    }];
+}
+
+
+export function number(
+    value: number,
+    validator: ((val: number) => boolean) | null,
+    onChange: (val: number) => void
+): u.VNode {
+    return ['input', {
+        props: {
+            type: 'number',
+            value: value
+        },
+        class: {
+            invalid: validator && !validator(value)
+        },
+        on: {
+            change: (evt: Event) => onChange((evt.target as HTMLInputElement).valueAsNumber)
+        }
+    }];
+}
+
+
+export function checkbox(
+    label: string | null,
+    value: boolean,
+    onChange: (val: boolean) => void
+): u.VNode {
+    const input: u.VNode = ['input', {
+        props: {
+            type: 'checkbox',
+            checked: value
+        },
+        on: {
+            change: (evt: Event) => onChange((evt.target as HTMLInputElement).checked)
+        }
+    }];
+
+    if (!label)
+        return input;
+
+    return ['label',
+        input,
+        ` ${label}`
+    ];
+}
+
+
+export function select(
+    selected: string,
+    values: [string, string][],
+    onChange: (val: string) => void
+): u.VNode {
+    return ['select', {
+        on: {
+            change: (evt: Event) => onChange((evt.target as HTMLSelectElement).value)
+        }},
+        values.map(([value, label]) => ['option', {
+            props: {
+                selected: value == selected,
+                value: value
+            }},
+            label
+        ])
+    ];
+}