datafolder 1.0.5 → 1.0.7

package/static/datafolderui/display-tree.js

@@ -1,108 +1,35 @@
 import {
-    h
+    h as t
 } from "./hscrpt.js";
 
 import {
-    rpc
-} from "./QyUIUtils.js";
+    QyUIFolderViewer as e
+} from "./QyUIFolderViewer.js";
 
-import {
-    QyUIFolderTree
-} from "./QyUIFolderTree.js";
-
-customElements.define("display-tree", class extends QyUIFolderTree {
+customElements.define("display-tree", class extends e {
     constructor() {
         super();
     }
     connectedCallback() {
-        super.connectedCallback(), this._appendToolbar();
-        var e = this.folderTree;
-        this.rootFolder = e.folder({
-            name: "/",
-            open: !0
-        }), e.select(this.rootFolder);
-    }
-    showTree(e, t) {
-        this._resetTree(), this._resetPathTabs(), this.countSpan.innerText = t, 
-        this.msgSpan.innerText = "Total " + t, this.rootFolder = this.folderTree.folder({
-            name: "/",
-            open: !0
-        }), this._constructFolderTree(this.rootFolder, e), this.folderTree.select(this.rootFolder), 
-        this.tree = e;
-    }
-    _appendToolbar() {
-        this.toolbarDiv.append(this._createCountSpan());
-    }
-    _createCountSpan() {
-        return this.countSpan = h("span", {
+        var e;
+        super.connectedCallback(), (e = this).toolbarDiv.append((e => e.countSpan = t("span", {
             classList: "btn btn-success ms-auto"
-        }, [ "0" ]);
-    }
-    _resetTree() {
-        this._deleteJsonTree();
-        var {
-            rootFolder: e,
-            countSpan: t,
-            msgSpan: r
-        } = this;
-        t.innerText = "0", r.innerText = "", e && (e.parentElement.remove(), Object.assign(this, {
-            rootFolder: void 0,
-            fileContentMap: {}
-        }));
+        }, [ "0" ]))(e));
     }
-    async _queryFiles() {
-        let {
-            countSpan,
-            queryEditor
-        } = this, {
-            queryText
-        } = queryEditor;
-        try {
-            eval("((x)=>x)(" + queryText + ")");
-        } catch (exception) {
-            return void (countSpan.innerText = exception.message);
-        }
-        let {
-            queryId
-        } = this, {
-            tree,
-            count
-        } = (++this.queryId, await rpc("queryFiles", queryText));
-        queryId + 1 == this.queryId && this.showTree(tree, count);
-    }
-    _constructFolderTree(e, t) {
+    showTree(e, t) {
+        (r = this).deleteJsonTree();
         var {
-            folderTree: r,
-            fileContentMap: o
-        } = this, s = e.dataset, {
-            fullPathHash: t,
-            subdirMap: n,
-            fileMap: i
-        } = t;
-        if (t && (s.fullPathHash = t), n) {
-            var a, t = Object.keys(n).sort();
-            for (a of t) {
-                var l = r.folder({
-                    name: a
-                }, e);
-                this._constructFolderTree(l, n[a]);
-            }
-            t = t.length;
-            0 < t && (s.subdirCount = t);
-        }
-        if (i) {
-            var c, t = Object.keys(i).sort();
-            for (c of t) {
-                var {
-                    fileContent: d,
-                    fileContentKey: h
-                } = i[c];
-                o[r.file({
-                    name: c
-                }, e).dataset.fileContentKey = h] = d;
-            }
-            t = t.length;
-            0 < t && (s.fileCount = t);
-        }
+            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);
     }
 });

package/static/datafolderui/explore-tree.js

@@ -1,16 +1,16 @@
 import {
-    rpc as t
+    rpc as f
 } from "./QyUIUtils.js";
 
 import {
-    QyUIFolderTree as e
-} from "./QyUIFolderTree.js";
+    QyUIFolderViewer as e
+} from "./QyUIFolderViewer.js";
 
 import {
-    h as o
+    h as l
 } from "./hscrpt.js";
 
-let s = {
+let n = {
     showHiddenFolder: !1
 };
 
@@ -20,32 +20,25 @@ customElements.define("explore-tree", class extends e {
     }
     connectedCallback() {
         super.connectedCallback();
-        var e = s.showHiddenFolder, t = (this._appendToolbar(e), this.checkTooltip = new bootstrap.Tooltip(this.checkLabel), 
-        this).folderTree, o = (t.on("fetch", async e => {
-            await this._loadSubItems(e), e.resolve(), e == this.selectedElement && this._showSelectedDir(e);
-        }), t.asyncFolder({
-            name: "/",
-            open: !0
-        }));
-        Object.assign(this, {
-            showHiddenFolder: e,
-            rootFolder: o
-        }), t.select(o);
-    }
-    _appendToolbar(e) {
-        this.toolbarDiv.append(this._createShowHiddenCheck(e));
-    }
-    _createShowHiddenCheck(e) {
-        return o("div", {
+        var e = n.showHiddenFolder, t = ((t = this).toolbarDiv.append(((n, e) => l("div", {
             classList: "btn-group btn-group-sm ms-1",
             role: "group"
-        }, [ o("input", {
+        }, [ l("input", {
             type: "checkbox",
             classList: "btn-check",
             id: "showHiddenFolderCheck",
             checked: e,
-            onchange: () => this._toggleShowHiddenFolder()
-        }), this.checkLabel = o("label", {
+            onchange: () => {
+                var e = n, {
+                    showHiddenFolder: t,
+                    rootHiddenFolder: o,
+                    checkTooltip: l
+                } = e;
+                e.showHiddenFolder = !t, o && (o.parentElement.hidden = t), l.setContent({
+                    ".tooltip-inner": (t ? "Show" : "Hide") + " hidden folder"
+                });
+            }
+        }), n.checkLabel = l("label", {
             classList: "btn btn-outline-primary",
             "data-bs-toggle": "tooltip",
             "data-bs-placement": "top",
@@ -53,70 +46,62 @@ customElements.define("explore-tree", class extends e {
             attrs: {
                 for: "showHiddenFolderCheck"
             }
-        }, [ o("i", {
+        }, [ l("i", {
             classList: "bi bi-window-plus"
-        }) ]) ]);
-    }
-    _toggleShowHiddenFolder() {
-        var {
+        }) ]) ]))(t, e)), this.checkTooltip = new bootstrap.Tooltip(this.checkLabel), 
+        this).folderTree, o = (t.on("fetch", async e => {
+            var t = this, o = e, l = o.dataset, {
+                namePath: n,
+                folderTree: i,
+                rootFolder: s,
+                showHiddenFolder: d
+            } = t;
+            if (n = await (e => f("getSubItems", {
+                dirPath: e
+            }))(n)) {
+                var {
+                    fullPathHash: n,
+                    subdirList: r,
+                    fileList: a
+                } = n;
+                n && (l.fullPathHash = n);
+                let e;
+                if (0 < r.length) {
+                    for (var h of r) o == s && "%" == h ? e = !0 : i.asyncFolder({
+                        name: h
+                    }, o);
+                    l.subdirCount = r.length;
+                }
+                if (e && ((n = i.asyncFolder({
+                    name: "%"
+                }, o)).parentElement.hidden = !d, t.rootHiddenFolder = n), 0 < a.length) {
+                    for (var c of a) i.file({
+                        name: c
+                    }, o);
+                    l.fileCount = a.length;
+                }
+            }
+            await 0, e.resolve(), e == this.selectedElement && this.showSelectedDir(e);
+        }), t.asyncFolder({
+            name: "/",
+            open: !0
+        }));
+        Object.assign(this, {
             showHiddenFolder: e,
-            rootHiddenFolder: t,
-            checkTooltip: o
-        } = this;
-        this.showHiddenFolder = !e, t && (t.parentElement.hidden = e), o.setContent({
-            ".tooltip-inner": (e ? "Show" : "Hide") + " hidden folder"
-        });
+            rootFolder: o
+        }), t.select(o);
     }
-    async _showSelectedFile(e) {
+    async showSelectedFile(e) {
         var t, o = e.dataset, {
-            namePath: s,
+            namePath: l,
             fileContentMap: n
         } = this;
         let i;
         i = o.fileContentKey ? n[o.fileContentKey] : ({
-            fileContent: s,
+            fileContent: l,
             fileContentKey: t
-        } = await this._getFileContent(s), n[o.fileContentKey = t] = s), e == this.selectedElement && this._showJson(i);
-    }
-    async _loadSubItems(t) {
-        var o = t.dataset, {
-            namePath: s,
-            folderTree: n,
-            rootFolder: i,
-            showHiddenFolder: l
-        } = this, s = await this._getSubItems(s);
-        if (s) {
-            var {
-                fullPathHash: s,
-                subdirList: d,
-                fileList: r
-            } = s;
-            s && (o.fullPathHash = s);
-            let e;
-            if (0 < d.length) {
-                for (var a of d) t == i && "%" == a ? e = !0 : n.asyncFolder({
-                    name: a
-                }, t);
-                o.subdirCount = d.length;
-            }
-            if (e && ((s = n.asyncFolder({
-                name: "%"
-            }, t)).parentElement.hidden = !l, this.rootHiddenFolder = s), 0 < r.length) {
-                for (var h of r) n.file({
-                    name: h
-                }, t);
-                o.fileCount = r.length;
-            }
-        }
-    }
-    _getSubItems(e) {
-        return t("getSubItems", {
-            dirPath: e
-        });
-    }
-    _getFileContent(e) {
-        return t("getFileContent", {
-            filePath: e
-        });
+        } = await f("getFileContent", {
+            filePath: l
+        }), n[o.fileContentKey = t] = l), e == this.selectedElement && this.showContent(i);
     }
 });

package/static/datafolderui/folder-tree.js

@@ -1,5 +1,74 @@
 import {
-    defineStyledElement as e
+    QyStyledElement as e
 } from "./QyStyledElement.js";
 
-e("folder-tree", [ "../tree.js/tree.css" ]);
+import {
+    h as t
+} from "./hscrpt.js";
+
+customElements.define("folder-tree", class extends e {
+    constructor() {
+        super([ "../tree.js/tree.css" ]);
+    }
+    compose() {
+        var e = t("div", {
+            style: {
+                overflow: "auto"
+            }
+        });
+        this.shadowRoot.append(e), Object.assign(this, {
+            folderTreeDiv: e,
+            folderTree: new Tree(e, {
+                navigate: !0
+            }),
+            fileContentMap: {}
+        });
+    }
+    constructFolderTree(e) {
+        (t = (o = this).rootFolder) && (t.parentElement.remove(), Object.assign(o, {
+            rootFolder: void 0,
+            fileContentMap: {}
+        }));
+        var {
+            folderTree: t,
+            fileContentMap: o
+        } = this, r = this.rootFolder = t.folder({
+            name: "/",
+            open: !0
+        });
+        e && !function o(r, l, s, e) {
+            let n = s.dataset;
+            let {
+                fullPathHash: t,
+                subdirMap: a,
+                fileMap: f
+            } = e;
+            t && (n.fullPathHash = t);
+            if (a) {
+                let e = Object.keys(a).sort();
+                for (var i of e) {
+                    let e = r.folder({
+                        name: i
+                    }, s);
+                    o(r, l, e, a[i]);
+                }
+                let t = e.length;
+                0 < t && (n.subdirCount = t);
+            }
+            if (f) {
+                let e = Object.keys(f).sort();
+                for (var d of e) {
+                    let {
+                        fileContent: e,
+                        fileContentKey: t
+                    } = f[d], o = r.file({
+                        name: d
+                    }, s);
+                    o.dataset.fileContentKey = t, l[t] = e;
+                }
+                let t = e.length;
+                0 < t && (n.fileCount = t);
+            }
+        }(t, o, r, e);
+    }
+});

package/static/datafolderui/index.css

@@ -4,3 +4,10 @@
 body {
     height: 100vh;
 }
+.cm-editor {
+    background-color: white !important;
+}
+/*disable codemirror hightlight current line*/
+.cm-activeLine {
+    background-color: transparent !important;
+}

package/static/datafolderui/index.html

@@ -15,6 +15,7 @@
         <script src="../tree.js/tree.js"></script>
         <script src="../json-view/dist/jsonview.js"></script>
         <script src="../bootstrap-5.3.8-dist/js/bootstrap.bundle.js"></script>
+        <script src="../codemirror.bundle/editor.bundle.js"></script>
         <script type="module" src="main-page.js"></script>
     </body>
 </html>

package/static/datafolderui/json-view.js

@@ -1,8 +1,10 @@
 import {
-    defineStyledElement as n
+    QyStyledElement as n
 } from "./QyStyledElement.js";
 
-n("json-view", `
+customElements.define("json-view", class extends n {
+    constructor() {
+        super(`
 .json-container {
   font-family: "Open Sans";
   font-size: 14px;
@@ -69,4 +71,6 @@ n("json-view", `
   border-width: 5px 0 5px 6px;
   border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) gray;
 }
-`);
+`);
+    }
+});

package/static/datafolderui/main-page.js

@@ -1,12 +1,14 @@
 import {
-    h as o
+    h as d
 } from "./hscrpt.js";
 
 import "./explore-tree.js";
 
 import "./query-editor.js";
 
-let d = {
+import "./trigger-editor.js";
+
+let l = {
     brandName: "datafolder UI",
     tabNames: [ "Explore", "Query", "RPC", "Triggers" ]
 };
@@ -19,24 +21,47 @@ customElements.define("main-page", class extends HTMLElement {
         var {
             brandName: e,
             tabNames: t
-        } = d;
-        this.append(this._createNav(e, t), this._createTabDivs(t));
+        } = l;
+        this.append(d("nav", {
+            classList: "navbar bg-body-tertiary"
+        }, [ ((e, t, a) => d("div", {
+            classList: "container-fluid"
+        }, [ (e => d("a", {
+            classList: "navbar-brand"
+        }, [ e ]))(t), ((e, t) => d("ul", {
+            classList: "nav nav-pills me-auto mb-2 mb-lg-0"
+        }, e.tabButtons = t.map(e => d("button", {
+            classList: "nav-link",
+            id: `pills-${e}-tab`,
+            "data-bs-toggle": "pill",
+            "data-bs-target": "#pills-" + e,
+            type: "button",
+            role: "tab"
+        }, [ e ]))))(e, a) ]))(this, e, t) ]), d("div", {
+            classList: "tab-content",
+            id: "pills-tabContent"
+        }, this.tabDivs = t.map(e => d("div", {
+            classList: "tab-pane",
+            id: "pills-" + e,
+            role: "tabpanel"
+        }))));
         let {
-            tabButtons: [ a, r ],
-            tabDivs: [ s, n ]
+            tabButtons: [ a, s ],
+            tabDivs: [ i, n, , r ]
         } = this;
         bootstrap.Tab.getOrCreateInstance(a).show();
-        e = o("explore-tree");
-        s.appendChild(e);
-        let i = o("query-editor");
-        n.appendChild(i), Object.assign(this, {
+        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: i
-        }), i.addEventListener("run", () => r.click());
-        t = () => this.onSizeChange();
-        document.addEventListener("DOMContentLoaded", t), window.addEventListener("resize", t), 
-        r.addEventListener("shown.bs.tab", () => {
-            i.onSizeChange();
+            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();
         });
     }
     onSizeChange() {
@@ -46,50 +71,7 @@ customElements.define("main-page", class extends HTMLElement {
         } = this;
         e.onSizeChange(), t.onSizeChange();
     }
-    _createNav(e, t) {
-        return o("nav", {
-            classList: "navbar bg-body-tertiary"
-        }, [ this._createNavBar(e, t) ]);
-    }
-    _createNavBar(e, t) {
-        return o("div", {
-            classList: "container-fluid"
-        }, [ this._createBrand(e), this._createTabButtons(t) ]);
-    }
-    _createTabButtons(e) {
-        return o("ul", {
-            classList: "nav nav-pills me-auto mb-2 mb-lg-0"
-        }, this.tabButtons = e.map(e => this._createTabButton(e)));
-    }
-    _createTabDivs(e) {
-        return o("div", {
-            classList: "tab-content",
-            id: "pills-tabContent"
-        }, this.tabDivs = e.map(e => this._createTabDiv(e)));
-    }
-    _createBrand(e) {
-        return o("a", {
-            classList: "navbar-brand"
-        }, [ e ]);
-    }
-    _createTabDiv(e) {
-        return o("div", {
-            classList: "tab-pane",
-            id: "pills-" + e,
-            role: "tabpanel"
-        });
-    }
-    _createTabButton(e) {
-        return o("button", {
-            classList: "nav-link",
-            id: `pills-${e}-tab`,
-            "data-bs-toggle": "pill",
-            "data-bs-target": "#pills-" + e,
-            type: "button",
-            role: "tab"
-        }, [ e ]);
-    }
-}), document.body.append(o("main-page"));
+}), document.body.append(d("main-page"));
 
 import {
     rpc as e