datafolder 1.0.5 → 1.0.6

package/static/datafolderui/explore-tree.js

@@ -1,5 +1,5 @@
 import {
-    rpc as t
+    rpc as f
 } from "./QyUIUtils.js";
 
 import {
@@ -7,10 +7,10 @@ import {
 } from "./QyUIFolderTree.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: s,
+                rootFolder: i,
+                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 == i && "%" == h ? e = !0 : s.asyncFolder({
+                        name: h
+                    }, o);
+                    l.subdirCount = r.length;
+                }
+                if (e && ((n = s.asyncFolder({
+                    name: "%"
+                }, o)).parentElement.hidden = !d, t.rootHiddenFolder = n), 0 < a.length) {
+                    for (var c of a) s.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,
+        let s;
+        s = o.fileContentKey ? n[o.fileContentKey] : ({
+            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(s);
     }
 });

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/main-page.js

@@ -6,7 +6,7 @@ import "./explore-tree.js";
 
 import "./query-editor.js";
 
-let d = {
+let l = {
     brandName: "datafolder UI",
     tabNames: [ "Explore", "Query", "RPC", "Triggers" ]
 };
@@ -19,24 +19,46 @@ 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(o("nav", {
+            classList: "navbar bg-body-tertiary"
+        }, [ ((e, t, a) => o("div", {
+            classList: "container-fluid"
+        }, [ (e => o("a", {
+            classList: "navbar-brand"
+        }, [ e ]))(t), ((e, t) => o("ul", {
+            classList: "nav nav-pills me-auto mb-2 mb-lg-0"
+        }, e.tabButtons = t.map(e => o("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) ]), o("div", {
+            classList: "tab-content",
+            id: "pills-tabContent"
+        }, this.tabDivs = t.map(e => o("div", {
+            classList: "tab-pane",
+            id: "pills-" + e,
+            role: "tabpanel"
+        }))));
         let {
-            tabButtons: [ a, r ],
-            tabDivs: [ s, n ]
+            tabButtons: [ a, s ],
+            tabDivs: [ n, i ]
         } = this;
         bootstrap.Tab.getOrCreateInstance(a).show();
         e = o("explore-tree");
-        s.appendChild(e);
-        let i = o("query-editor");
-        n.appendChild(i), Object.assign(this, {
+        n.appendChild(e);
+        let r = o("query-editor");
+        i.appendChild(r), Object.assign(this, {
             exploreTree: e,
-            queryEditor: i
-        }), i.addEventListener("run", () => r.click());
+            queryEditor: r
+        }), r.addEventListener("run", () => s.click());
         t = () => this.onSizeChange();
         document.addEventListener("DOMContentLoaded", t), window.addEventListener("resize", t), 
-        r.addEventListener("shown.bs.tab", () => {
-            i.onSizeChange();
+        s.addEventListener("shown.bs.tab", () => {
+            r.onSizeChange();
         });
     }
     onSizeChange() {
@@ -46,49 +68,6 @@ 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"));
 
 import {