Implement CheckField visuals

jsonform.js

@@ -279,7 +279,47 @@ class SelectField extends FormField {
 }
 
 class CheckField extends FormField {
-
+    #input = null;
+    #container = null;
+    #thumb = null;
+    buildField() {
+        if (!this.#input) {
+            this.#input = el.div({ class: '-field -check-field' })
+            this.el.appendChild(this.#input);
+            dom.append(this.#input, [
+                this.#container = el.span({ class: '-check-box' }, [
+                    this.#thumb = el.span({ class: '-check-thumb' }, "|||")
+                ]),
+            ]);
+            this.#input.addEventListener('click', () => this.toggle());
+        }
+    }
+    toggle() {
+        if (this.#container.classList.contains('-check-on')) {
+            this.#container.classList.remove('-check-on');
+        } else {
+            this.#container.classList.add('-check-on');
+        }
+    }
+    valueUpdated() {
+        if (!this.#input) return;
+        // this.#input.innerText = this.value;        
+    }
+    getValue() {
+        // if (this.#input.innerText === '') {
+        //     if (this.options.nullable !== false)
+        //         return null;
+        // }
+        return false; // this.#input.innerText;
+    }
+    setEditable(state) {
+        if (state) {
+            this.#input.classList.add('editable');
+        } else {
+            // this.updateValue(this.#input.innerText);
+            this.#input.classList.remove('editable');
+        }
+    }
 }
 
 export {