Bugfixes, dialog improvements

* It is now possible to pass an element as the dialog message to have it inserted as the body.

index.html

@@ -15,7 +15,7 @@ import { jsonQuery, jsonPatch, tokenizePath } from './json.js';
 import { date } from './date.js';
 
 // build our dom
-let btn, btn2, btn3;
+let btn, btn2, btn3, btn4;
 let root = el.div({}, [
     el.div({ style:'color:#444;' }, "This is dynamically generated!"),
     el.div({ style:'display:flex; gap:0.25rem; margin-top:0.25rem;' }, [
@@ -23,6 +23,7 @@ let root = el.div({}, [
         btn = el.button({}, "Hello World"),
         btn2 = el.button({}, "Error mode"),
         btn3 = el.button({}, "Edit form"),
+        btn4 = el.button({}, "Form modal"),
     ])
 ]);
 // click handler
@@ -49,6 +50,8 @@ userForm.layout.addRow()
 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 }));
 document.body.appendChild(userForm.dom());
 
 // Set the model
@@ -67,6 +70,26 @@ btn3.addEventListener('click', () => {
     }
 });
 
+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.model = {};
+
+btn4.addEventListener('click', () => {
+    dialog.dialog(productForm.dom(), "Title", {"ok":"Update"}, { showClose:true, width:'400px' }).then(
+        (result) => {
+            productForm.editable = false;
+            if (result == 'ok') {
+                console.log(productForm.model);
+            }
+        }
+    )
+    productForm.editable = true;
+});
+
+
 // console.log(tokenizePath(".foo.bar[1].title"));
 // console.log(jsonQuery({ "foo":{ "bar":"42" }}, ".foo.bar" ));
 // console.log(jsonQuery([ { name:"cheese" }, { name:"bread" }, { name:"milk" } ], "[].name" ));