Implement CheckField visuals

index.html

@@ -10,7 +10,7 @@
 <script type="module">
 import { el } from './dom.js';
 import { dialog } from './dialog.js';
-import { JsonForm, TextField, NumericField } from './jsonform.js';
+import { JsonForm, TextField, NumericField, CheckField } from './jsonform.js';
 import { jsonQuery, jsonPatch, tokenizePath } from './json.js';
 import { date } from './date.js';
 
@@ -51,7 +51,8 @@ userForm.layout.addRow()
     .append(new TextField({ label:"Created", width:50, path:".meta.created", locked:true }))
     .append(new TextField({ label:"Updated", width:50, path:".meta.updated", locked:true }));
 userForm.layout.addRow()
-    .append(new NumericField({ label:"Salary", width:30, path:".meta.salary", fixed:2 }));
+    .append(new NumericField({ label:"Salary", width:30, path:".meta.salary", fixed:2 }))
+    .append(new CheckField({ label:"Admin", path:".admin" }));
 document.body.appendChild(userForm.dom());
 
 // Set the model
@@ -76,7 +77,8 @@ productForm.layout.addRow()
     .append(new NumericField({ label:"Price", path:".product.price", fixed:2 }));
 productForm.layout.addRow()
     .append(new NumericField({ label:"Inventory", width:30, path:".inventory.count" }))
-    .append(new NumericField({ label:"Limit", width:30, path:".inventory.limit" }));
+    .append(new NumericField({ label:"Limit", width:30, path:".inventory.limit" }))
+    .append(new CheckField({ label:"Virtual", path:".virtual" }));
 
 productForm.model = {};
 

jsonform.css

@@ -38,6 +38,7 @@
                 display: block;
                 padding: 0.25rem 0.5rem;
                 color: #444;
+                user-select: none;
             }
             .-field {
                 font-size: 120%;
@@ -59,6 +60,40 @@
                 &.-number-field {
                     text-align: right;
                 }
+                &.-check-field {
+                    border: none;
+                    background: transparent;
+                    box-shadow: none;
+                    pointer-events: none;
+                    user-select: none;
+                    &.editable {
+                        cursor: pointer;
+                        pointer-events: all;
+                        .-check-thumb {
+                            background: #254b6e !important;
+                        }
+                    }
+                    .-check-box {
+                        padding: 0.25rem;
+                        padding-left: 0em;
+                        padding-right: 1rem;
+                        border-radius: 0.25rem;
+                        background-color: #929292;
+                        color: #dddddd;
+                        .-check-thumb {
+                            border-radius: 0.25rem;
+                            background-color: #444;
+                            padding: 0.25rem 0.5rem;
+                        }
+                        &.-check-on {
+                            padding-left: 1em;
+                            padding-right: 0rem;
+                            .-check-thumb {
+                            background-color: #2c7416 !important;
+                            }
+                        }
+                    }
+                }
             }
         }
     }

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 {