Implement CheckField logic

dialog.css

@@ -95,6 +95,10 @@
             margin: 0px 0.25rem;
             background: var(--jsl-dialog-button-normal);
             box-shadow: inset -1px -1px 1px 0px #bbb, inset 1px 1px 1px 0px #fff;
+            cursor: pointer;
+            &.disabled {
+                cursor: default;
+            }
             &.default-action {
                 outline: solid 1px #666;
             }

jsonform.css

@@ -78,12 +78,14 @@
                         padding-left: 0em;
                         padding-right: 1rem;
                         border-radius: 0.25rem;
-                        background-color: #929292;
+                        border: solid 1px #444;
+                        background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0)), #929292;
                         color: #dddddd;
                         .-check-thumb {
                             border-radius: 0.25rem;
                             background-color: #444;
                             padding: 0.25rem 0.5rem;
+                            box-shadow: 0px 0px 5px rgba(0,0,0,0.25);
                         }
                         &.-check-on {
                             padding-left: 1em;

jsonform.js

@@ -281,42 +281,37 @@ 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' }, "|||")
+                    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');
-        }
+        this.value = !this.value;
+        console.log("toggle", this.value);
     }
     valueUpdated() {
         if (!this.#input) return;
-        // this.#input.innerText = this.value;        
+        if (!!this.value) {
+            this.#container.classList.add('-check-on');
+        } else {
+            this.#container.classList.remove('-check-on');
+        }
     }
     getValue() {
-        // if (this.#input.innerText === '') {
-        //     if (this.options.nullable !== false)
-        //         return null;
-        // }
-        return false; // this.#input.innerText;
+        return this.value;
     }
     setEditable(state) {
         if (state) {
             this.#input.classList.add('editable');
         } else {
-            // this.updateValue(this.#input.innerText);
             this.#input.classList.remove('editable');
         }
     }