tauri-kargo-tools 0.1.4 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/builder/input.ts +65 -65
- package/package.json +1 -1
package/dist/builder/input.ts
CHANGED
|
@@ -1,80 +1,80 @@
|
|
|
1
1
|
import { applyIdAndClass, applySize, bindEnabled, bindVisible, Builder, Ctx } from "../vue-builder";
|
|
2
2
|
import { InputNode } from "../vue-model";
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
/* ----------- Input ----------- */
|
|
5
|
+
export function buildInput<T extends object>(builder: Builder, node: InputNode<T, any>, ctx: Ctx<T>) {
|
|
6
|
+
const wrapper = document.createElement('label');
|
|
7
|
+
applyIdAndClass(wrapper, node);
|
|
8
|
+
wrapper.style.display = 'block';
|
|
9
|
+
if (node.label) wrapper.append(document.createTextNode(node.label + ' '));
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
const input = document.createElement('input');
|
|
12
|
+
applySize(wrapper, node.width, node.height);
|
|
13
|
+
applySize(input, "100%", "100%");
|
|
14
|
+
const current = (ctx.obj as any)[node.name];
|
|
15
|
+
const typeGuess =
|
|
16
|
+
node.inputType ??
|
|
17
|
+
(typeof current === 'boolean' ? 'checkbox'
|
|
18
|
+
: typeof current === 'number' ? 'number'
|
|
19
|
+
: 'text');
|
|
13
20
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
(typeof current === 'boolean' ? 'checkbox'
|
|
18
|
-
: typeof current === 'number' ? 'number'
|
|
19
|
-
: 'text');
|
|
21
|
+
input.type = typeGuess === 'checkbox' ? 'checkbox'
|
|
22
|
+
: typeGuess === 'number' ? 'number'
|
|
23
|
+
: 'text';
|
|
20
24
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
25
|
+
if (typeGuess === 'checkbox') {
|
|
26
|
+
(input as HTMLInputElement).checked = Boolean(current);
|
|
27
|
+
} else if (typeGuess === 'number') {
|
|
28
|
+
(input as HTMLInputElement).valueAsNumber =
|
|
29
|
+
Number.isFinite(Number(current)) ? Number(current) : 0;
|
|
30
|
+
} else {
|
|
31
|
+
(input as HTMLInputElement).value = (current ?? '') as any as string;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
wrapper.appendChild(input);
|
|
35
|
+
ctx.add(wrapper);
|
|
36
|
+
|
|
37
|
+
// visible / enable factorisés
|
|
38
|
+
bindVisible(node, wrapper, ctx);
|
|
39
|
+
bindEnabled(node, input, ctx);
|
|
24
40
|
|
|
41
|
+
// modèle -> UI
|
|
42
|
+
const offData = ctx.listener.listen(node.name as keyof T, (v) => {
|
|
25
43
|
if (typeGuess === 'checkbox') {
|
|
26
|
-
|
|
44
|
+
const nv = Boolean(v);
|
|
45
|
+
if ((input as HTMLInputElement).checked !== nv) (input as HTMLInputElement).checked = nv;
|
|
27
46
|
} else if (typeGuess === 'number') {
|
|
28
|
-
(
|
|
29
|
-
|
|
47
|
+
const nv = Number(v ?? 0);
|
|
48
|
+
if ((input as HTMLInputElement).valueAsNumber !== nv) (input as HTMLInputElement).valueAsNumber = nv;
|
|
30
49
|
} else {
|
|
31
|
-
|
|
50
|
+
const s = (v as any as string) ?? '';
|
|
51
|
+
if ((input as HTMLInputElement).value !== s) (input as HTMLInputElement).value = s;
|
|
32
52
|
}
|
|
53
|
+
});
|
|
54
|
+
ctx.dataUnsubs.push(offData);
|
|
33
55
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
// modèle -> UI
|
|
42
|
-
const offData = ctx.listener.listen(node.name as keyof T, (v) => {
|
|
43
|
-
if (typeGuess === 'checkbox') {
|
|
44
|
-
const nv = Boolean(v);
|
|
45
|
-
if ((input as HTMLInputElement).checked !== nv) (input as HTMLInputElement).checked = nv;
|
|
46
|
-
} else if (typeGuess === 'number') {
|
|
47
|
-
const nv = Number(v ?? 0);
|
|
48
|
-
if ((input as HTMLInputElement).valueAsNumber !== nv) (input as HTMLInputElement).valueAsNumber = nv;
|
|
49
|
-
} else {
|
|
50
|
-
const s = (v as any as string) ?? '';
|
|
51
|
-
if ((input as HTMLInputElement).value !== s) (input as HTMLInputElement).value = s;
|
|
52
|
-
}
|
|
53
|
-
});
|
|
54
|
-
ctx.dataUnsubs.push(offData);
|
|
55
|
-
|
|
56
|
-
// UI -> modèle + update
|
|
57
|
-
const onUser = () => {
|
|
58
|
-
const el = input as HTMLInputElement;
|
|
59
|
-
let next: any;
|
|
60
|
-
if (typeGuess === 'checkbox') next = el.checked;
|
|
61
|
-
else if (typeGuess === 'number') next = Number.isFinite(el.valueAsNumber) ? el.valueAsNumber : Number(el.value);
|
|
62
|
-
else next = el.value;
|
|
56
|
+
// UI -> modèle + update
|
|
57
|
+
const onUser = () => {
|
|
58
|
+
const el = input as HTMLInputElement;
|
|
59
|
+
let next: any;
|
|
60
|
+
if (typeGuess === 'checkbox') next = el.checked;
|
|
61
|
+
else if (typeGuess === 'number') next = Number.isFinite(el.valueAsNumber) ? el.valueAsNumber : Number(el.value);
|
|
62
|
+
else next = el.value;
|
|
63
63
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
64
|
+
if (node.muted) {
|
|
65
|
+
ctx.listener.setSilently(node.name as keyof T, next);
|
|
66
|
+
if (node.update) {
|
|
67
|
+
(ctx.listener as any).withAllMuted
|
|
68
|
+
? (ctx.listener as any).withAllMuted(() => { (ctx.obj as any)[node.update]!(); })
|
|
69
|
+
: (ctx.obj as any)[node.update]!();
|
|
70
70
|
|
|
71
|
-
}
|
|
72
|
-
} else {
|
|
73
|
-
(ctx.obj as any)[node.name] = next;
|
|
74
|
-
if (node.update) { (ctx.obj as any)[node.update]!(); }
|
|
75
71
|
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}
|
|
72
|
+
} else {
|
|
73
|
+
(ctx.obj as any)[node.name] = next;
|
|
74
|
+
if (node.update) { (ctx.obj as any)[node.update]!(); }
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
const evt = typeGuess === 'checkbox' ? 'change' : 'input';
|
|
78
|
+
input.addEventListener(evt, onUser);
|
|
79
|
+
ctx.domUnsubs.push(() => input.removeEventListener(evt, onUser));
|
|
80
|
+
}
|