refactor: moved to new @djledda/ladder and vite

src/ui/Widgets/BoolBox/BoolBoxView.ts

@@ -1,64 +0,0 @@
-import "./BoolBox.css";
-import UINode, {h, UINodeOptions} from "@/ui/UINode";
-import Ref from "@/Ref";
-
-export type BoolBoxUINodeOptions = UINodeOptions & {
-    label?: string,
-    value?: boolean,
-    onInput?: (isChecked: boolean) => void,
-};
-
-export default class BoolBoxView extends UINode {
-    private label: string | null;
-    private labelElement!: HTMLLabelElement;
-    private checkboxElement!: HTMLInputElement;
-    private onInput: (isChecked: boolean) => void;
-
-    constructor(options: BoolBoxUINodeOptions) {
-        super(options);
-        this.label = options.label ?? "";
-        this.onInput = options.onInput ?? (() => { /* dummy */ });
-    }
-
-    setLabel(newLabel: string | null): void {
-        if (newLabel !== null) {
-            this.label = newLabel;
-            this.labelElement.innerText = newLabel;
-            this.labelElement.classList.add("visible");
-        } else {
-            this.label = newLabel;
-            this.labelElement.innerText = "";
-            this.labelElement.classList.remove("visible");
-        }
-    }
-
-    setValue(isChecked: boolean): void {
-        this.checkboxElement.checked = isChecked;
-    }
-
-    build(): HTMLDivElement {
-        this.labelElement = h("label", {
-            classes: ["bool-box-label"],
-            onclick: () => {
-                this.onInput(!this.checkboxElement.checked);
-            },
-        });
-        if (this.label !== null) {
-            this.labelElement.innerText = this.label;
-            this.labelElement.classList.add("visible");
-        }
-        this.checkboxElement = h("input", {
-            type: "checkbox",
-            classes: ["bool-box-checkbox"],
-            onclick: (event: Event) => {
-                this.onInput((event.target as HTMLInputElement).checked);
-            },
-        });
-        return h("div", {
-            classes: ["bool-box"],
-        },[
-            this.labelElement,
-            this.checkboxElement,
-        ]);
-    }
-}

src/ui/Widgets/BoolBox/BoolBoxView.tsx

@@ -0,0 +1,58 @@
+import "./BoolBox.css";
+import { Capsule, h, Rung, RungOptions } from "@djledda/ladder";
+
+export type BoolBoxUINodeOptions = RungOptions & {
+    label?: string,
+    value?: boolean,
+    onInput?: (isChecked: boolean) => void,
+};
+
+export default class BoolBoxView extends Rung {
+    private label: string | null;
+    private labelElement = Capsule.new<HTMLLabelElement | null>(null);
+    private checkboxElement = Capsule.new<HTMLInputElement | null>(null);
+    private onInput: (isChecked: boolean) => void;
+
+    constructor(options: BoolBoxUINodeOptions) {
+        super(options);
+        this.label = options.label ?? "";
+        this.onInput = options.onInput ?? (() => { /* dummy */ });
+    }
+
+    setLabel(newLabel: string | null): void {
+        if (!this.labelElement.val) {
+            return;
+        }
+        if (newLabel !== null) {
+            this.label = newLabel;
+            this.labelElement.val.innerText = newLabel;
+            this.labelElement.val.classList.add("visible");
+        } else {
+            this.label = newLabel;
+            this.labelElement.val.innerText = "";
+            this.labelElement.val.classList.remove("visible");
+        }
+    }
+
+    setValue(isChecked: boolean): void {
+        if (this.checkboxElement.val) {
+            this.checkboxElement.val.checked = isChecked;
+        }
+    }
+
+    build(): HTMLDivElement {
+        return <div className={"bool-box"}>
+            <label
+                saveTo={this.labelElement}
+                classes={this.label ? ["bool-box-label", "visible"] : ["bool-box-label"]}
+                onclick={() => this.onInput(!this.checkboxElement.val?.checked)}>
+                {this.label ?? ""}
+            </label>
+            <input
+                type={"checkbox"}
+                className={"bool-box-checkbox"}
+                saveTo={this.checkboxElement}
+                onclick={(event: Event) => this.onInput((event.target as HTMLInputElement).checked)}/>
+        </div> as HTMLDivElement;
+    }
+}