Refactoring, styles, example

dialog.css

@@ -8,6 +8,17 @@
     inherits: true;
     initial-value: #444;
 }
+@property --jsl-dialog-button-normal {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #e0e0e0;
+
+}
+@property --jsl-dialog-button-hover {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #f0f0f0;
+}
 
 .jsl-dialog {
 
@@ -65,6 +76,7 @@
         border: 0px;
         background: transparent;
         color: red;
+        cursor: pointer;
     }
 
     .-content {
@@ -76,17 +88,20 @@
         text-align: right;
 
         .action {
-            font-size: 105%;
+            font-size: 102%;
             border: solid 1px #666;
             border-radius: 0.25rem;
             padding: 0.45rem 0.8rem;
             margin: 0px 0.25rem;
-            background: #eee;
+            background: var(--jsl-dialog-button-normal);
-
+            box-shadow: inset -1px -1px 1px 0px #bbb, inset 1px 1px 1px 0px #fff;
             &.default-action {
                 outline: solid 1px #666;
             }
-
+            &:hover {
+                background: var(--jsl-dialog-button-hover);
+                text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
+            }
             &:active {
                 outline: solid 1px #444;
             }

dom.js

@@ -19,7 +19,7 @@ class DomHelper {
      * @param {array|Element|string} children Children or single child/text to apply
      * @returns Element
      */
-    createEl(tag, attr = {}, children = []) {
+    create(tag, attr = {}, children = []) {
         //console.debug(`create: ${tag}`, attr, children);
         let el = document.createElement(tag);
         this.apply(el, attr);
@@ -101,7 +101,7 @@ const el = new Proxy(dom, {
     get(target,name) {
         return name in target
             ? target[name]
-            : (attr = {}, children = []) => target.createEl(name, attr, children);
+            : (attr = {}, children = []) => target.create(name, attr, children);
     }
 });
 

index.html

@@ -74,6 +74,9 @@ const productForm = new JsonForm();
 productForm.layout.addRow()
     .append(new TextField({ label:"Product", width:60, path:".product.name" }))
     .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" }));
 
 productForm.model = {};