datafolder 1.0.7 → 1.0.9

package/static/datafolderui/QyStyledElement.js

@@ -4,11 +4,11 @@ import {
 
 class e extends HTMLElement {
     constructor(e, t) {
-        super(), Array.isArray(e) && (t = e, e = void 0);
+        super();
         var r = this.attachShadow({
             mode: "open"
         });
-        if (t) for (var s of t) {
+        if (Array.isArray(e) && (t = e, e = void 0), t) for (var s of t) {
             var a = document.createElement("link");
             a.setAttribute("rel", "stylesheet"), a.setAttribute("href", s), r.appendChild(a);
         }

package/static/datafolderui/QyUIFolderViewer.js

@@ -1,14 +1,14 @@
 import {
-    w2layout as r
+    w2layout as i
 } from "../w2ui/src/w2compat.js";
 
 import {
-    h as d
+    h as c
 } from "./hscrpt.js";
 
 import {
-    setHeight as o,
-    isNotNullObj as s
+    setHeight as n,
+    isNotNullObj as e
 } from "./QyUIUtils.js";
 
 import "./folder-tree.js";
@@ -17,15 +17,15 @@ import "./json-view.js";
 
 import "./code-mirror.js";
 
-let n = 0;
+let r = 0;
 
-class e extends HTMLElement {
+class t extends HTMLElement {
     constructor() {
         super();
     }
     connectedCallback() {
-        this.idCount = ++n, this.parentDiv = this.parentElement;
-        var e, t = new r({
+        this.idCount = ++r, this.parentDiv = this.parentElement;
+        var e = new i({
             box: this.parentDiv,
             name: "layout_folderviewer_" + this.idCount,
             panels: [ {
@@ -38,29 +38,12 @@ class e extends HTMLElement {
                 type: "bottom",
                 size: 10
             } ]
-        }), i = (t.el("left").append((i = this).toolbarDiv = d("div", {
+        }), t = (e.el("left").append((t = this).toolbarDiv = c("div", {
             classList: "btn-toolbar",
             role: "toolbar",
             style: "border-bottom: 1px solid #e4e4e4"
-        }, [ (e => d("div", {
-            classList: "input-group"
-        }, [ d("input", {
-            id: "searchInput_" + e.idCount,
-            type: "text",
-            classList: "form-control",
-            style: {
-                width: "150px"
-            }
-        }) ]))(i), d("div", {
-            classList: "btn-group btn-group-sm",
-            role: "group"
-        }, [ d("button", {
-            classList: "btn btn-outline-success",
-            type: "submit"
-        }, [ d("i", {
-            classList: "bi bi-search"
-        }) ]) ]) ]), (s => {
-            var e = d("folder-tree"), {
+        }, [ s(t), o() ]), (s => {
+            var e = c("folder-tree"), {
                 folderTreeDiv: t,
                 folderTree: i
             } = e;
@@ -81,7 +64,7 @@ class e extends HTMLElement {
                         for (let t = 0; t < o; ++t) {
                             if (t >= r.length) {
                                 for (let e = t; e < o; ++e) ((s, n, e) => {
-                                    e = d("span", {
+                                    e = c("span", {
                                         classList: "nav-link",
                                         "data-bs-toggle": "tab",
                                         role: "tab",
@@ -100,7 +83,7 @@ class e extends HTMLElement {
                                                 block: "center"
                                             }), o.select(i), "tab" == s.clickSrc && (s.clickSrc = void 0);
                                         }
-                                    }, [ e ]), s.pathUL.append(d("li", {
+                                    }, [ e ]), s.pathUL.append(c("li", {
                                         classList: "nav-item"
                                     }, [ e ]));
                                 })(n, e, i[e]);
@@ -113,25 +96,35 @@ class e extends HTMLElement {
                         0 < o && r[o - 1].children[0].click();
                     }
                 }
-                s.selectedElement != e && (s.selectedElement = e, c(s)), "folderTree" == s.clickSrc && (s.clickSrc = void 0);
+                s.selectedElement != e && (s.selectedElement = e, d(s)), "folderTree" == s.clickSrc && (s.clickSrc = void 0);
             }), Object.assign(s, {
                 folderTree: i,
                 folderTreeDiv: t,
                 folder_tree: e
             }), e;
-        })(this)), t.el("main"));
-        i.append(this.pathUL = d("ul", {
+        })(this)), e.el("main"));
+        t.append(this.upperDiv = c("div", {
+            style: {
+                display: "flex",
+                "align-items": "center",
+                "justify-content": "space-between",
+                "margin-right": "1px"
+            }
+        }, [ this.pathUL = c("ul", {
             classList: "nav nav-tabs"
-        }), this.contentDiv = d("div", [ (e = this).jsonView = d("json-view", [ e.jsonViewDiv = d("div", {
+        }), c("div", {
+            classList: "btn-toolbar",
+            role: "toolbar"
+        }, [ s(self), o() ]) ]), this.contentDiv = c("div", [ this.json_view = c("json-view"), this.codeMirrorDiv = c("div", {
             style: {
                 overflow: "auto"
             }
-        }) ]) ])), t.el("bottom").append(this.msgSpan = d("span")), Object.assign(this, {
-            layout: t,
-            mainDiv: i,
+        }) ])), e.el("bottom").append(this.msgSpan = c("span")), Object.assign(this, {
+            layout: e,
+            mainDiv: t,
             selectedHierarchy: {},
             namePath: []
-        }), t.on("resize:done", () => this.onSizeChange());
+        }), e.on("resize:done", () => this.onSizeChange());
     }
     get fileContentMap() {
         return this.folder_tree.fileContentMap;
@@ -143,56 +136,55 @@ class e extends HTMLElement {
         var {
             parentDiv: e,
             folderTreeDiv: t,
-            jsonViewDiv: i,
-            mainDiv: r
+            json_view: i,
+            mainDiv: r,
+            contentDiv: o,
+            codeMirrorDiv: s
         } = this;
-        o(e, document.body.clientHeight - e.offsetTop), o(t, r.clientHeight - t.offsetTop - 1), 
-        o(i, r.clientHeight - i.offsetTop - 1), c(this);
+        n(e, document.body.clientHeight - e.offsetTop), n(t, r.clientHeight - t.offsetTop), 
+        n(o, r.clientHeight - o.offsetTop), i.setHeight(o.clientHeight), n(s, o.clientHeight), 
+        d(this);
     }
     showMsg(e) {
         this.msgSpan.innerText = e;
     }
-    deleteJsonTree() {
-        var e = this.jsonTree;
-        e && (jsonview.destroy(e), this.jsonTree = void 0);
-    }
-    showSelectedFile(r) {
-        r = this.folder_tree.fileContentMap[r.dataset.fileContentKey];
+    showSelectedFile(o) {
+        o = this.folder_tree.fileContentMap[o.dataset.fileContentKey];
         if (this.isTriggerEditor) {
-            var o = r;
+            var s = o;
             let {
-                codemirror: e,
-                codemirror2: t,
-                jsonView: i
-            } = s = this;
-            i && (i.hidden = !0), e ? e.hidden = !1 : s.contentDiv.append(e = s.codemirror = d("code-mirror")), 
-            t ? t.hidden = !1 : s.contentDiv.append(t = s.codemirror2 = d("code-mirror"));
+                code_mirror: e,
+                code_mirror2: t,
+                json_view: i,
+                codeMirrorDiv: r
+            } = n = this;
+            i.hidden = !0, r.hidden = !1, e || n.codeMirrorDiv.append(e = n.code_mirror = c("code-mirror")), 
+            t || n.codeMirrorDiv.append(t = n.code_mirror2 = c("code-mirror"));
             var {
-                fileNamePath: s,
-                propNamePathList: o,
-                modCode: n
-            } = o;
+                fileNamePath: n,
+                propNamePathList: s,
+                modCode: l
+            } = s;
             e.text = JSON.stringify({
-                fileNamePath: s,
-                propNamePathList: o
-            }), t.text = n;
-        } else this.showContent(r);
+                fileNamePath: n,
+                propNamePathList: s
+            }), t.text = l;
+        } else this.showContent(o);
     }
     showSelectedDir(e) {
         "false" != e.parentElement.dataset.loaded ? this.showContent(e.dataset) : this.showContent("not loaded");
     }
     showContent(t) {
-        var e = this.codemirror2;
-        if (e && (e.hidden = !0), s(t)) {
-            var e = this.codemirror, e = (e && (e.hidden = !0), this.jsonView.hidden = !1, 
-            this), i = t;
-            e.deleteJsonTree(), i = jsonview.create(i), jsonview.render(i, e.jsonViewDiv), 
-            jsonview.expand(i), e.jsonTree = i;
-        } else {
-            let e = this.codemirror;
-            e ? e.hidden = !1 : this.contentDiv.append(e = this.codemirror = d("code-mirror", {
+        var {
+            json_view: i,
+            codeMirrorDiv: r
+        } = this;
+        if (e(t)) r.hidden = !0, i.hidden = !1, i.show(t); else {
+            r.hidden = !1, i.hidden = !0;
+            let e = this.code_mirror;
+            e || r.append(e = this.code_mirror = c("code-mirror", {
                 readOnly: !0
-            })), this.jsonView.hidden = !0, e.text = t;
+            })), e.text = t;
         }
     }
     resetPathTabs() {
@@ -200,11 +192,39 @@ class e extends HTMLElement {
     }
 }
 
-function c(e) {
-    var t, i = e.selectedElement;
-    i ? (t = e, "file" == (i = i).dataset.type ? t.showSelectedFile(i) : t.showSelectedDir(i)) : e.deleteJsonTree();
+function d(e) {
+    var {
+        selectedElement: t,
+        json_view: i
+    } = e;
+    t ? (e = e, "file" == (t = t).dataset.type ? e.showSelectedFile(t) : e.showSelectedDir(t)) : i.clear();
+}
+
+function o() {
+    return c("div", {
+        classList: "btn-group btn-group-sm",
+        role: "group"
+    }, [ c("button", {
+        classList: "btn btn-outline-success",
+        type: "submit"
+    }, [ c("i", {
+        classList: "bi bi-search"
+    }) ]) ]);
+}
+
+function s(e) {
+    return c("div", {
+        classList: "input-group"
+    }, [ c("input", {
+        id: "searchInput_" + e.idCount,
+        type: "text",
+        classList: "form-control",
+        style: {
+            width: "150px"
+        }
+    }) ]);
 }
 
 export {
-    e as QyUIFolderViewer
+    t as QyUIFolderViewer
 };

package/static/datafolderui/QyUIUtils.js

@@ -3,7 +3,7 @@ async function t(e, n, o) {
     let i;
     if (o) {
         let t;
-        "object" == typeof o ? (t = "application/json", o = JSON.stringify(o)) : t = "text/plain", 
+        a(o) ? (t = "application/json", o = JSON.stringify(o)) : t = "text/plain", 
         i = {
             method: "POST",
             headers: {
@@ -14,7 +14,7 @@ async function t(e, n, o) {
     }
     try {
         var r = await fetch(t, i);
-        if (r.ok) return await r.json();
+        if (r.ok) return r.json();
         console.error("Response status: " + r.status);
     } catch (t) {
         console.error(`Calling ${e} with ${n} failed:`, t);
@@ -34,7 +34,7 @@ function o(t, e) {
     n.textContent = e, t.appendChild(n);
 }
 
-function i(t) {
+function a(t) {
     return null != t && "object" == typeof t;
 }
 
@@ -43,5 +43,5 @@ export {
     e as setHeight,
     n as setWidth,
     o as appendStyle,
-    i as isNotNullObj
+    a as isNotNullObj
 };

package/static/datafolderui/code-mirror.js

@@ -4,16 +4,16 @@ customElements.define("code-mirror", class extends HTMLElement {
     }
     compose() {
         var r, e;
-        this.codemirror || ({
+        this.codeMirror || ({
             readOnly: r,
             changeCallback: e
-        } = this, this.codemirror = createCodeMirror(this, r, e));
+        } = this, this.codeMirror = createCodeMirror(this, r, e));
     }
     get text() {
-        return this.codemirror?.state.doc.toString() ?? "";
+        return this.codeMirror?.state.doc.toString() ?? "";
     }
     set text(r) {
-        var e = this.codemirror;
+        var e = this.codeMirror;
         e && e.dispatch({
             changes: {
                 from: 0,
@@ -23,13 +23,13 @@ customElements.define("code-mirror", class extends HTMLElement {
         });
     }
     get hidden() {
-        return !!this.codemirror?.dom.hidden;
+        return !!this.codeMirror?.dom.hidden;
     }
     set hidden(r) {
-        var e = this.codemirror;
+        var e = this.codeMirror;
         e && (e.dom.hidden = !!r);
     }
     clearHistory() {
-        this.codemirror?.clearHistory();
+        this.codeMirror?.clearHistory();
     }
 });

package/static/datafolderui/display-tree.js

@@ -6,6 +6,14 @@ import {
     QyUIFolderViewer as e
 } from "./QyUIFolderViewer.js";
 
+function o(e, t) {
+    var r = e.folder_tree, {
+        rootFolder: t,
+        folderTree: s
+    } = (r.constructFolderTree(t), r);
+    e.rootFolder = r.rootFolder, s.select(t);
+}
+
 customElements.define("display-tree", class extends e {
     constructor() {
         super();
@@ -14,22 +22,17 @@ customElements.define("display-tree", class extends e {
         var e;
         super.connectedCallback(), (e = this).toolbarDiv.append((e => e.countSpan = t("span", {
             classList: "btn btn-success ms-auto"
-        }, [ "0" ]))(e));
+        }, [ "0" ]))(e)), o(this);
     }
     showTree(e, t) {
-        (r = this).deleteJsonTree();
+        (r = this).json_view.clear();
         var {
             countSpan: r,
             msgSpan: s
         } = r, {
             countSpan: r,
-            msgSpan: s,
-            folder_tree: o
-        } = (r.innerText = "0", s.innerText = "", this.resetPathTabs(), this), {
-            rootFolder: r,
-            folderTree: s
-        } = (r.innerText = t, s.innerText = "Total " + t, o.constructFolderTree(e), 
-        o);
-        this.rootFolder = o.rootFolder, s.select(r);
+            msgSpan: s
+        } = (r.innerText = "0", s.innerText = "", this.resetPathTabs(), this);
+        r.innerText = t, s.innerText = "Total " + t, o(this, e);
     }
 });

package/static/datafolderui/hscrpt.js

@@ -1,13 +1,32 @@
 function t(t, e, r) {
     Array.isArray(e) && (r = e, e = {});
-    var s, i, o = document.createElement(t);
-    for (s in e) {
-        var a = e[s];
-        if ("style" === s) o.style = "string" == typeof (i = a) ? i : Object.entries(i).map(([ t, e ]) => t + ":" + e).join(";"); else if ("classList" === s) o.classList = "string" == typeof (i = a) ? i : i.join(" "); else if (s.startsWith("data-") || s.startsWith("aria-")) o.setAttribute(s, a); else if ("attrs" === s) for (var n in a) o.setAttribute(n, a[n]); else if ("on" === s) for (var f in a) o.addEventListener(f, a[f]); else o[s] = a;
+    var a, s, o = document.createElement(t);
+    for (a in e) {
+        var i = e[a];
+        switch (a) {
+          case "style":
+            o.style = "string" == typeof (s = i) ? s : Object.entries(s).map(([ t, e ]) => t + ":" + e).join(";");
+            break;
+
+          case "classList":
+            o.classList = "string" == typeof (s = i) ? s : s.join(" ");
+            break;
+
+          case "attrs":
+            for (var n in i) o.setAttribute(n, i[n]);
+            break;
+
+          case "on":
+            for (var c in i) o.addEventListener(c, i[c]);
+            break;
+
+          default:
+            a.startsWith("data-") || a.startsWith("aria-") ? o.setAttribute(a, i) : o[a] = i;
+        }
     }
-    if ("function" == typeof o.compose && o.compose(), r) {
-        var l, c = o.shadowRoot || o;
-        for (l of r.filter(t => null != t)) c.appendChild("string" == typeof l ? document.createTextNode(l) : l);
+    if (o.compose && "function" == typeof o.compose && o.compose(), r) {
+        var f, p = o.shadowRoot ?? o;
+        for (f of r.filter(t => null != t)) p.appendChild("string" == typeof f ? document.createTextNode(f) : f);
     }
     return o;
 }

package/static/datafolderui/json-view.js

@@ -2,6 +2,14 @@ import {
     QyStyledElement as n
 } from "./QyStyledElement.js";
 
+import {
+    h as o
+} from "./hscrpt.js";
+
+import {
+    setHeight as e
+} from "./QyUIUtils.js";
+
 customElements.define("json-view", class extends n {
     constructor() {
         super(`
@@ -73,4 +81,23 @@ customElements.define("json-view", class extends n {
 }
 `);
     }
+    compose() {
+        this.shadowRoot.append(this.jsonViewDiv = o("div", {
+            style: {
+                overflow: "auto"
+            }
+        }));
+    }
+    setHeight(n) {
+        e(this.jsonViewDiv, n);
+    }
+    show(n) {
+        this.clear();
+        n = this.jsonTree = jsonview.create(n);
+        jsonview.render(n, this.jsonViewDiv), jsonview.expand(n);
+    }
+    clear() {
+        var n = this.jsonTree;
+        n && (jsonview.destroy(n), this.jsonTree = void 0);
+    }
 });

package/static/datafolderui/main-page.js

@@ -1,5 +1,5 @@
 import {
-    h as d
+    h as u
 } from "./hscrpt.js";
 
 import "./explore-tree.js";
@@ -8,7 +8,9 @@ import "./query-editor.js";
 
 import "./trigger-editor.js";
 
-let l = {
+import "./rpc-editor.js";
+
+let h = {
     brandName: "datafolder UI",
     tabNames: [ "Explore", "Query", "RPC", "Triggers" ]
 };
@@ -18,63 +20,89 @@ customElements.define("main-page", class extends HTMLElement {
         super();
     }
     connectedCallback() {
-        var {
-            brandName: e,
-            tabNames: t
-        } = l;
-        this.append(d("nav", {
+        var t, e, {
+            brandName: s,
+            tabNames: i
+        } = h;
+        this.append((e = i, (t = this).upperDiv = u("div", {
+            classList: "bg-body-tertiary",
+            style: {
+                display: "flex",
+                "align-items": "center"
+            }
+        }, [ u("nav", {
             classList: "navbar bg-body-tertiary"
-        }, [ ((e, t, a) => d("div", {
+        }, [ u("div", {
             classList: "container-fluid"
-        }, [ (e => d("a", {
+        }, [ (t => u("a", {
             classList: "navbar-brand"
-        }, [ e ]))(t), ((e, t) => d("ul", {
+        }, [ t ]))(s), ((t, e) => u("ul", {
             classList: "nav nav-pills me-auto mb-2 mb-lg-0"
-        }, e.tabButtons = t.map(e => d("button", {
+        }, t.tabButtons = e.map(t => u("button", {
             classList: "nav-link",
-            id: `pills-${e}-tab`,
+            id: `pills-${t}-tab`,
             "data-bs-toggle": "pill",
-            "data-bs-target": "#pills-" + e,
+            "data-bs-target": "#pills-" + t,
             type: "button",
             role: "tab"
-        }, [ e ]))))(e, a) ]))(this, e, t) ]), d("div", {
+        }, [ t ]))))(t, e) ]) ]), u("div", {
+            classList: "btn-toolbar",
+            role: "toolbar",
+            style: {
+                "margin-left": "20px"
+            }
+        }, [ u("button", {
+            classList: "btn btn-outline-success",
+            type: "submit",
+            style: {
+                "margin-right": "0px"
+            }
+        }, [ u("i", {
+            classList: "bi bi-arrow-clockwise"
+        }) ]), u("button", {
+            classList: "btn btn-outline-success",
+            type: "submit"
+        }, [ u("i", {
+            classList: "bi bi-file-earmark-plus"
+        }) ]) ]) ])), u("div", {
             classList: "tab-content",
             id: "pills-tabContent"
-        }, this.tabDivs = t.map(e => d("div", {
+        }, this.tabDivs = i.map(t => u("div", {
             classList: "tab-pane",
-            id: "pills-" + e,
+            id: "pills-" + t,
             role: "tabpanel"
         }))));
         let {
-            tabButtons: [ a, s ],
-            tabDivs: [ i, n, , r ]
+            tabButtons: [ a, r, n, o ],
+            tabDivs: [ l, d, b, p ]
         } = this;
         bootstrap.Tab.getOrCreateInstance(a).show();
-        e = d("explore-tree");
-        i.appendChild(e);
-        let o = d("query-editor");
-        n.appendChild(o);
-        t = d("trigger-editor"), r.append(t), Object.assign(this, {
-            exploreTree: e,
-            queryEditor: o,
-            triggerEditor: t
-        }), o.addEventListener("run", () => s.click()), e = () => this.onSizeChange();
-        document.addEventListener("DOMContentLoaded", e), window.addEventListener("resize", e), 
-        s.addEventListener("shown.bs.tab", () => {
-            o.onSizeChange();
-        });
+        s = u("explore-tree");
+        l.appendChild(s);
+        let c = u("query-editor"), g = (d.appendChild(c), u("rpc-editor")), m = (b.appendChild(g), 
+        u("trigger-editor"));
+        p.append(m), Object.assign(this, {
+            explore_tree: s,
+            query_editor: c,
+            rpc_editor: g,
+            trigger_editor: m
+        }), c.addEventListener("run", () => r.click()), window.addEventListener("resize", () => this.onSizeChange()), 
+        r.addEventListener("shown.bs.tab", () => c.onSizeChange()), n.addEventListener("show.bs.tab", () => g.show()), 
+        o.addEventListener("show.bs.tab", () => m.show());
     }
     onSizeChange() {
         var {
-            exploreTree: e,
-            queryEditor: t
+            explore_tree: t,
+            query_editor: e,
+            rpc_editor: s,
+            trigger_editor: i
         } = this;
-        e.onSizeChange(), t.onSizeChange();
+        t.onSizeChange(), e.onSizeChange(), s.onSizeChange(), i.onSizeChange();
     }
-}), document.body.append(d("main-page"));
+}), document.body.append(u("main-page"));
 
 import {
-    rpc as e
+    rpc as t
 } from "./QyUIUtils.js";
 
-window.rpc = e;
+window.rpc = t;