Initial commit

2025-09-20 22:59:18 +02:00
commit 6ba8860de9
9 changed files with 1110 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+
+    <link rel="stylesheet" type="text/css" href="./dialog.css">
+    <link rel="stylesheet" type="text/css" href="./jsonform.css">
+</head>
+<body>
+
+<script type="module">
+import { el } from './dom.js';
+import { dialog } from './dialog.js';
+import { JsonForm, TextField, SelectField } from './jsonform.js';
+import { jsonQuery, jsonPatch, tokenizePath } from './json.js';
+import { date } from './date.js';
+
+// build our dom
+let btn, btn2, btn3;
+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;' }, [
+        el.button({ 'on:click': () => dialog.info("You clicked me!") }, "With event"),
+        btn = el.button({}, "Hello World"),
+        btn2 = el.button({}, "Error mode"),
+        btn3 = el.button({}, "Edit form"),
+    ])
+]);
+// click handler
+btn.addEventListener('click', () => {
+    dialog.msgbox("Yo! This is a messagebox!").then((result) => {
+        console.log("Accepted with: " + result);
+        dialog.confirm("Isn't that neat?", "Woah", { "sure":"Sure!", "nah":"Nah..." }).then((result) => {
+            console.log("Neat? " + result);
+        });
+    });
+});
+// click handler
+btn2.addEventListener('click', async () => {
+    await dialog.error("Oh shit. That didn't work. Maybe try again?");
+    await dialog.information("Just kidding! Everything is great!");
+});
+
+document.body.appendChild(root);
+
+const userForm = new JsonForm();
+userForm.layout.addRow()
+    .append(new TextField({ label:"Username", width:70, path:".username" }))
+    .append(new TextField({ label:"ID", path:".id", locked:true }));
+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 }));
+document.body.appendChild(userForm.dom());
+
+// Set the model
+userForm.model = {
+    username: "Admin",
+    id: 1,
+    meta: {
+        created: '2025-09-01 00:00:00 +02:00',
+    }
+};
+
+btn3.addEventListener('click', () => {
+    userForm.editable = !userForm.editable;
+});
+
+// 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" ));
+
+let data = { name: "Bob" };
+console.log(data);
+let data2 = jsonPatch(data, ".name", "Bobby");
+console.log(data, data2);
+
+
+</script>
+
+
+</body>