1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
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
])
];
}
export function color(
value: string,
onChange: (val: string) => void
): u.VNode {
return ['input', {
props: {
type: 'color',
value: value
},
on: {
change: (evt: Event) => onChange((evt.target as HTMLInputElement).value)
}
}];
}
|
