@yuneta/gobj-ui 2.6.0 → 4.0.0

package/src/shell_route_map.js

@@ -0,0 +1,363 @@
+/***********************************************************************
+ *          shell_route_map.js
+ *
+ *      "Site map" viewer for a C_YUI_SHELL app: renders the WHOLE
+ *      navigation surface — the toolbar (including the account menu),
+ *      the primary menu, its live dynamic tabs, and each view's
+ *      declared sub-routes (topics / info / schema / focus topics) —
+ *      as a printable, clickable tree, in DECLARATION order (see
+ *      ROUTING.md). Meant to double as the app's basic documentation.
+ *      Hosted in a resizable C_YUI_WINDOW (a modal is the fallback when
+ *      C_YUI_WINDOW is not registered).
+ *
+ *      Usage (e.g. from an "Account → Site map" menu action):
+ *          import {yui_shell_show_route_map} from
+ *              "@yuneta/gobj-ui/src/shell_route_map.js";
+ *          yui_shell_show_route_map(shell, {t});
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import "./shell_route_map.css";
+
+import {
+    createElement2,
+    refresh_language,
+    gobj_create_service,
+    gobj_find_service,
+    gobj_start,
+    gobj_send_event,
+    is_gobj,
+    gclass_find_by_name,
+    log_error,
+} from "@yuneta/gobj-js";
+
+import {yui_shell_show_modal, yui_shell_popup_layer} from "./shell_modals.js";
+import {yui_shell_nav_map} from "./c_yui_shell.js";
+import {attach_clear} from "./yui_inputs.js";
+
+import i18next from "i18next";
+
+const WIN_NAME = "shell-route-map-window";
+
+/*  Modal fallback currently open (the window flavour is a service and
+ *  is found by name; the modal is not, so it is tracked here to make
+ *  the second call a TOGGLE for both flavours). */
+let __open_modal__ = null;
+
+/*  Bring the "you are here" row into view once the map is mounted. */
+function scroll_to_current($body)
+{
+    let $cur = $body.querySelector(".ROUTEMAP_CURRENT");
+    if($cur && typeof $cur.scrollIntoView === "function") {
+        $cur.scrollIntoView({block: "center"});
+    }
+}
+
+
+/***************************************************************
+ *  Render one nav node as an <li> (with a nested <ul> for children),
+ *  preserving the given order. A node with a `route` is a live hash
+ *  link; a node with an `event` is an action (shown, not fired); a
+ *  structural/group node is plain text.
+ ***************************************************************/
+function render_node(node)
+{
+    let row = [];
+    if(node.icon && /^yi-[a-z0-9-]+$/.test(node.icon)) {
+        row.push(["span", {class: "icon ROUTEMAP_ICON"},
+            [["i", {class: node.icon}]]]);
+    }
+    row.push(["span", {class: "ROUTEMAP_NAME", i18n: node.label}, node.label]);
+    /*  Documentation columns: route + implementing gclass + action event. */
+    if(node.route) {
+        row.push(["code", {class: "ROUTEMAP_ROUTE"}, node.route]);
+    }
+    if(node.gclass) {
+        row.push(["span", {class: "ROUTEMAP_GCLASS",
+            title: "gclass", "data-i18n-title": "gclass"},
+            node.gclass]);
+    }
+    if(node.event) {
+        row.push(["span", {class: "ROUTEMAP_EVENT"}, node.event]);
+    }
+    /*  "You are here" — the node whose route best matches the current
+     *  one (marked by the model; at most one). */
+    if(node.current) {
+        row.push(["span", {class: "ROUTEMAP_HERE", i18n: "you are here"},
+            "you are here"]);
+    }
+
+    let row_class = node.current ? " ROUTEMAP_CURRENT" : "";
+    let $row;
+    if(node.route) {
+        $row = createElement2(
+            ["a", {class: "ROUTEMAP_LINK ROUTEMAP_ROW" + row_class,
+                   href: "#" + node.route,
+                   title: node.route}, row]);
+    } else {
+        $row = createElement2(
+            ["span", {class: "ROUTEMAP_ROW ROUTEMAP_STRUCT" + row_class}, row]);
+    }
+
+    let kids = (node.children && node.children.length)
+        ? [createElement2(["ul", {class: "ROUTEMAP_UL"},
+            node.children.map(render_node)])]
+        : [];
+    return createElement2(["li", {class: "ROUTEMAP_LI"}, [$row].concat(kids)]);
+}
+
+/***************************************************************
+ *  Filter a rendered <li>: visible when its own row matches `q`, when
+ *  an ancestor matched (show the whole subtree of a match), or when a
+ *  descendant matches (keep the ancestor path). Empty `q` shows all.
+ *  Matches against the visible row text (name + route + event), so it
+ *  honours the current translation. Returns whether the <li> is shown.
+ ***************************************************************/
+function filter_li($li, q, ancestor_match)
+{
+    let $row = $li.querySelector(":scope > .ROUTEMAP_ROW");
+    let text = $row ? ($row.textContent || "").toLowerCase() : "";
+    let self_match = q === "" || text.indexOf(q) >= 0;
+    let show_all = ancestor_match || self_match;
+
+    let any_child = false;
+    let $ul = $li.querySelector(":scope > ul");
+    if($ul) {
+        let kids = $ul.children;
+        for(let i = 0; i < kids.length; i++) {
+            if(filter_li(kids[i], q, show_all)) {
+                any_child = true;
+            }
+        }
+    }
+
+    let visible = show_all || any_child;
+    $li.style.display = visible ? "" : "none";
+    if($row) {
+        $row.classList.toggle("ROUTEMAP_MATCH", q !== "" && self_match);
+    }
+    return visible;
+}
+
+/***************************************************************
+ *  Build the site-map body (tree + hint + print), and wire the
+ *  print button and the link-jump behaviour.  Links navigate
+ *  natively; the shell's transient-overlay drain closes the host
+ *  on a resting-route change.  `on_jump()` closes the host for the
+ *  one click that navigates nowhere (the current route).
+ ***************************************************************/
+function build_body(shell, t, on_jump)
+{
+    let map = yui_shell_nav_map(shell);
+    let children = [
+        {label: "toolbar", icon: "", route: "", event: "",
+         kind: "group", children: map.toolbar}
+    ].concat(map.nav);
+    /*  Routes declared only in the route table (config.shell.routes)
+     *  that no menu/toolbar item points at — root "/", URL-only action
+     *  routes.  Rendered last, as their own group. */
+    if(Array.isArray(map.other) && map.other.length) {
+        children.push({label: "other routes", icon: "", route: "", event: "",
+            kind: "group", children: map.other});
+    }
+    let root = {
+        label:    map.brand.label || "app",
+        icon:     "",
+        route:    map.brand.route || "",
+        event:    "",
+        current:  !!map.brand.current,
+        children: children
+    };
+
+    let $tree = createElement2(
+        ["div", {class: "ROUTEMAP_TREE"}, [
+            createElement2(["ul", {class: "ROUTEMAP_UL ROUTEMAP_ROOT"},
+                [render_node(root)]])
+        ]]
+    );
+
+    /*  Search filter: matching nodes plus their ancestor path (and the
+     *  matched node's whole subtree) stay visible; the rest collapse. */
+    let $search = createElement2(
+        ["input", {class: "input is-small ROUTEMAP_SEARCH", type: "text",
+                   placeholder: t("filter", {defaultValue: "Filter…"}),
+                   "data-i18n-placeholder": "filter",
+                   "aria-label": t("filter", {defaultValue: "Filter"}),
+                   "data-i18n-aria-label": "filter"}]
+    );
+    let $search_ctrl = createElement2(
+        ["div", {class: "control ROUTEMAP_SEARCH_CTRL"}, [$search]]
+    );
+    attach_clear($search_ctrl, $search);
+
+    /*  Live match counter next to the filter. */
+    let $count_n = createElement2(["span", {class: "ROUTEMAP_COUNT_N"}, ""]);
+    let $count = createElement2(
+        ["span", {class: "ROUTEMAP_COUNT is-size-7 has-text-grey is-hidden"},
+            [$count_n, ["span", {i18n: "matches"}, "matches"]]]
+    );
+    let $search_row = createElement2(
+        ["div", {class: "ROUTEMAP_SEARCH_ROW mb-2"}, [$search_ctrl, $count]]
+    );
+
+    $search.addEventListener("input", function() {
+        let q = ($search.value || "").trim().toLowerCase();
+        let $root_li = $tree.querySelector(".ROUTEMAP_ROOT > li");
+        if($root_li) {
+            filter_li($root_li, q, false);
+        }
+        if(q === "") {
+            $count.classList.add("is-hidden");
+        } else {
+            $count_n.textContent = $tree.querySelectorAll(".ROUTEMAP_MATCH").length;
+            $count.classList.remove("is-hidden");
+        }
+    });
+
+    let $body = createElement2(
+        ["div", {class: "C_YUI_SHELL_ROUTEMAP ROUTEMAP_BODY"}, [
+            ["p", {class: "ROUTEMAP_HINT is-size-7 mb-2", i18n: "site map hint"},
+                t("site map hint", {defaultValue:
+                    "Every reachable position of the app is a URL. Click to jump."})],
+            $search_row,
+            $tree,
+            ["div", {class: "ROUTEMAP_ACTIONS"}, [
+                ["button", {class: "button is-small ROUTEMAP_PRINT",
+                            i18n: "print"}, t("print", {defaultValue: "Print"})]
+            ]]
+        ]]
+    );
+
+    /*  Print only the tree: clone it into an off-screen print area so
+     *  the @media print rules can hide everything else, regardless of
+     *  where the window/modal is mounted. */
+    let $print = $body.querySelector(".ROUTEMAP_PRINT");
+    if($print) {
+        $print.addEventListener("click", function() {
+            let $area = document.createElement("div");
+            $area.className = "routemap-print-area";
+            $area.appendChild($tree.cloneNode(true));
+            document.body.appendChild($area);
+            document.body.classList.add("routemap-printing");
+            try {
+                window.print();
+            } finally {
+                document.body.classList.remove("routemap-printing");
+                if($area.parentNode) {
+                    $area.parentNode.removeChild($area);
+                }
+            }
+        });
+    }
+
+    /*  A route link jumps there NATIVELY (browser push + hashchange —
+     *  no preventDefault): a resting-route change then closes this
+     *  window/modal through the shell's transient-overlay drain, which
+     *  is deterministic (the old close-then-deferred-navigate raced the
+     *  dismissal's history.back() and could land back where it
+     *  started).  A subpath or action-route jump keeps the map open —
+     *  it doubles as a navigation panel.  Clicking the route the user
+     *  is ALREADY on navigates nowhere: close the host instead.
+     *  Action nodes (no route) are documentation only and do not fire. */
+    $body.addEventListener("click", function(ev) {
+        let $link = ev.target && ev.target.closest &&
+            ev.target.closest(".ROUTEMAP_LINK");
+        if(!$link) {
+            return;
+        }
+        let href = $link.getAttribute("href");
+        if(href && typeof window !== "undefined" &&
+                window.location.hash === href &&
+                typeof on_jump === "function") {
+            ev.preventDefault();
+            on_jump();
+        }
+    });
+
+    refresh_language($body, t);
+    return $body;
+}
+
+
+/***************************************************************
+ *  Show the site map. Toggles: a second call closes the open one.
+ ***************************************************************/
+export function yui_shell_show_route_map(shell, opts)
+{
+    let t = (opts && opts.t) || i18next.t.bind(i18next);
+
+    /*  Toggle: an open site-map window/modal → close it. */
+    let existing = gobj_find_service(WIN_NAME, false);
+    if(existing && is_gobj(existing)) {
+        gobj_send_event(existing, "EV_CLOSE_WINDOW", {}, shell);
+        return null;
+    }
+    if(__open_modal__) {
+        let m = __open_modal__;
+        __open_modal__ = null;
+        if(typeof m.close === "function") {
+            m.close();
+        }
+        return null;
+    }
+
+    /*  Preferred: a resizable, maximisable floating window. */
+    if(gclass_find_by_name("C_YUI_WINDOW") !== null) {
+        let win_ref = {gobj: null};
+        let $body = build_body(shell, t, function() {
+            if(win_ref.gobj && is_gobj(win_ref.gobj)) {
+                gobj_send_event(win_ref.gobj, "EV_CLOSE_WINDOW", {}, shell);
+            }
+        });
+        let $parent = yui_shell_popup_layer(shell) ||
+            (typeof document !== "undefined" &&
+                document.getElementById("top-layer")) || null;
+        let win = gobj_create_service(WIN_NAME, "C_YUI_WINDOW", {
+            $parent:    $parent,
+            subscriber: null,
+            modal:      false,
+            showMax:    true,
+            showFooter: false,
+            resizable:  true,
+            center:     true,
+            auto_save_size_and_position: true,
+            width:      780,
+            height:     640,
+            logical_class: "ROUTEMAP_WINDOW",
+            title:      "site map",
+            icon:       "yi-bars",
+            body:       $body,
+            manager:    null
+        }, shell);
+        if(!win) {
+            log_error("C_YUI_SHELL: cannot create the site-map window");
+            return null;
+        }
+        win_ref.gobj = win;
+        gobj_start(win);
+        scroll_to_current($body);
+        return win;
+    }
+
+    /*  Fallback: a modal (no C_YUI_WINDOW registered). */
+    let modal_ref = {modal: null};
+    let $body = build_body(shell, t, function() {
+        if(modal_ref.modal && typeof modal_ref.modal.close === "function") {
+            modal_ref.modal.close();
+        }
+    });
+    modal_ref.modal = yui_shell_show_modal(shell, $body, {
+        dialog:        true,
+        logical_class: "ROUTEMAP_SHEET",
+        /*  The KEY, not t(key): the modal renders `title` with
+         *  data-i18n, so a pre-translated string would become the
+         *  "key" and never re-translate. */
+        title:         "site map",
+        t:             t,
+        on_close:      function() { __open_modal__ = null; }
+    });
+    __open_modal__ = modal_ref.modal;
+    scroll_to_current($body);
+    return modal_ref.modal;
+}

package/src/tabulator.css

@@ -51,3 +51,248 @@
 [data-theme=dark] .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after {
     background: #ffffff !important;
 }
+
+/*  Moved from c_yui_main.css (2.6.1): generic Tabulator theming
+ *  (column separator, frozen columns, striping/hover, dark + system themes).
+ *  Self-contained here so every consumer gets it without the
+ *  legacy stack's stylesheet. */
+
+/*********************************************************
+ *      Tabulator
+ *********************************************************/
+
+/* Visible column separator via pseudo-element on the right-side resize handle only.
+   .prev handles (left-side) are excluded so hidden columns (e.g. Select Row when
+   not in edit mode) don't leave a spurious line at the start of the table. */
+.tabulator .tabulator-col-resize-handle:not(.prev)::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: 1px;
+    background-color: var(--bulma-border);
+}
+
+.tabulator-row .tabulator-cell.tabulator-frozen {
+    background-color: var(--bulma-background) !important;
+}
+.tabulator .tabulator-header .tabulator-frozen {
+    background-color: var(--bulma-background) !important;
+}
+
+/*
+ *  Tabulator light theme — alternating row backgrounds
+ *  scheme-main-ter (#f5f5f5) gives visible contrast against white odd rows.
+ *  !important needed to override the tabulator_bulma.css theme.
+ */
+.tabulator .tabulator-row,
+.tabulator .tabulator-row.tabulator-row-odd {
+    background-color: var(--bulma-scheme-main, #fff) !important;
+}
+
+.tabulator .tabulator-row.tabulator-row-even {
+    background-color: var(--bulma-scheme-main-ter, #f5f5f5) !important;
+}
+
+.tabulator .tabulator-row.tabulator-selectable:hover {
+    background-color: var(--bulma-background, #ebebeb) !important;
+}
+
+/* ====================================================================
+ *  Opt-out of the whole-row hover wash + pointer cursor. For tables that
+ *  select ONLY through the checkbox column (selectableRows:"highlight"),
+ *  the hover highlight reads as a selection. Add `yui-no-row-hover` on the
+ *  .tabulator element: unselected rows stay visually static on hover; a
+ *  checkbox-selected row keeps its `.tabulator-selected` colour (the
+ *  :not() guard leaves it alone). Colours mirror the striping rules so
+ *  hover === the row's own background in every theme.
+ * ==================================================================== */
+.tabulator.yui-no-row-hover .tabulator-row.tabulator-selectable:hover {
+    cursor: default !important;
+}
+.tabulator.yui-no-row-hover
+        .tabulator-row.tabulator-row-odd.tabulator-selectable:not(.tabulator-selected):hover {
+    background-color: var(--bulma-scheme-main, #fff) !important;
+    color: var(--bulma-body-color) !important;
+}
+.tabulator.yui-no-row-hover
+        .tabulator-row.tabulator-row-even.tabulator-selectable:not(.tabulator-selected):hover {
+    background-color: var(--bulma-scheme-main-ter, #f5f5f5) !important;
+    color: var(--bulma-body-color) !important;
+}
+[data-theme=dark] .tabulator.yui-no-row-hover
+        .tabulator-row.tabulator-row-odd.tabulator-selectable:not(.tabulator-selected):hover {
+    background-color: var(--bulma-body-background-color) !important;
+    color: var(--bulma-body-color) !important;
+}
+[data-theme=dark] .tabulator.yui-no-row-hover
+        .tabulator-row.tabulator-row-even.tabulator-selectable:not(.tabulator-selected):hover {
+    background-color: var(--bulma-background) !important;
+    color: var(--bulma-body-color) !important;
+}
+
+/*
+ *  Tabulator dark theme
+ *  Activated by html[data-theme=dark] (set by the app's theme switcher)
+ */
+[data-theme=dark] .tabulator {
+    background-color: var(--bulma-body-background-color);
+    border-color: var(--bulma-border);
+    color: var(--bulma-body-color);
+}
+
+[data-theme=dark] .tabulator .tabulator-header,
+[data-theme=dark] .tabulator .tabulator-header .tabulator-col {
+    background-color: var(--bulma-background);
+    border-color: var(--bulma-border);
+    color: var(--bulma-text);
+}
+
+[data-theme=dark] .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
+    background-color: var(--bulma-background-bis, var(--bulma-background));
+}
+
+[data-theme=dark] .tabulator-row,
+[data-theme=dark] .tabulator-row.tabulator-row-odd {
+    background-color: var(--bulma-body-background-color) !important;
+    color: var(--bulma-body-color);
+    border-color: var(--bulma-border);
+}
+
+[data-theme=dark] .tabulator-row.tabulator-row-even {
+    background-color: var(--bulma-background) !important;
+    color: var(--bulma-body-color);
+    border-color: var(--bulma-border);
+}
+
+[data-theme=dark] .tabulator-row .tabulator-cell {
+    border-color: var(--bulma-border);
+    color: var(--bulma-body-color);
+}
+
+[data-theme=dark] .tabulator-row.tabulator-selectable:hover {
+    background-color: var(--bulma-background) !important;
+    color: var(--bulma-text) !important;
+}
+
+/*
+ *  The CELL EDITOR in dark theme.
+ *
+ *  Tabulator gives its editor input no colour of its own, so it inherits the
+ *  browser default: BLACK text on the dark cell — the value disappears the
+ *  moment you click into it, and comes back when the field loses focus. Same
+ *  for a header-filter input and for a <select>.
+ */
+[data-theme=dark] .tabulator-row .tabulator-cell.tabulator-editing input,
+[data-theme=dark] .tabulator-row .tabulator-cell.tabulator-editing select,
+[data-theme=dark] .tabulator-row .tabulator-cell.tabulator-editing textarea,
+[data-theme=dark] .tabulator .tabulator-header .tabulator-header-filter input,
+[data-theme=dark] .tabulator .tabulator-header .tabulator-header-filter select {
+    background-color: var(--bulma-scheme-main, #16181d);
+    color: var(--bulma-body-color, #e6e6e6) !important;
+    caret-color: var(--bulma-body-color, #e6e6e6);
+    border-color: var(--bulma-border);
+}
+
+[data-theme=dark] .tabulator-row .tabulator-cell.tabulator-editing input::placeholder,
+[data-theme=dark] .tabulator .tabulator-header .tabulator-header-filter input::placeholder {
+    color: var(--bulma-text-weak, #8a8f98);
+}
+
+[data-theme=dark] .tabulator-row.tabulator-selected {
+    background-color: var(--bulma-link) !important;
+    color: var(--bulma-link-invert) !important;
+}
+
+[data-theme=dark] .tabulator-row.tabulator-selected .tabulator-cell {
+    color: var(--bulma-link-invert) !important;
+}
+
+[data-theme=dark] .tabulator .tabulator-footer {
+    background-color: var(--bulma-background);
+    border-color: var(--bulma-border);
+    color: var(--bulma-text);
+}
+
+[data-theme=dark] .tabulator .tabulator-footer .tabulator-page {
+    background-color: transparent;
+    color: var(--bulma-text);
+    border-color: var(--bulma-border);
+}
+
+[data-theme=dark] .tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
+    background-color: var(--bulma-background);
+    color: var(--bulma-text);
+}
+
+[data-theme=dark] .tabulator .tabulator-footer .tabulator-page.active {
+    background-color: var(--bulma-link);
+    color: var(--bulma-link-invert);
+}
+
+[data-theme=dark] .tabulator-row .tabulator-cell.tabulator-frozen {
+    background-color: var(--bulma-background) !important;
+}
+
+/* system theme: follow OS preference */
+@media (prefers-color-scheme: dark) {
+    [data-theme=system] .tabulator {
+        background-color: var(--bulma-body-background-color);
+        border-color: var(--bulma-border);
+        color: var(--bulma-body-color);
+    }
+    [data-theme=system] .tabulator .tabulator-header,
+    [data-theme=system] .tabulator .tabulator-header .tabulator-col {
+        background-color: var(--bulma-background);
+        border-color: var(--bulma-border);
+        color: var(--bulma-text);
+    }
+    [data-theme=system] .tabulator-row,
+    [data-theme=system] .tabulator-row.tabulator-row-odd {
+        background-color: var(--bulma-body-background-color) !important;
+        color: var(--bulma-body-color);
+        border-color: var(--bulma-border);
+    }
+    [data-theme=system] .tabulator-row.tabulator-row-even {
+        background-color: var(--bulma-background) !important;
+        color: var(--bulma-body-color);
+        border-color: var(--bulma-border);
+    }
+    [data-theme=system] .tabulator-row .tabulator-cell {
+        border-color: var(--bulma-border);
+        color: var(--bulma-body-color);
+    }
+    [data-theme=system] .tabulator-row.tabulator-selectable:hover {
+        background-color: var(--bulma-background) !important;
+    }
+    [data-theme=system] .tabulator.yui-no-row-hover
+            .tabulator-row.tabulator-row-odd.tabulator-selectable:not(.tabulator-selected):hover {
+        background-color: var(--bulma-body-background-color) !important;
+        color: var(--bulma-body-color) !important;
+    }
+    [data-theme=system] .tabulator.yui-no-row-hover
+            .tabulator-row.tabulator-row-even.tabulator-selectable:not(.tabulator-selected):hover {
+        background-color: var(--bulma-background) !important;
+        color: var(--bulma-body-color) !important;
+    }
+    [data-theme=system] .tabulator-row.tabulator-selected {
+        background-color: var(--bulma-link) !important;
+        color: var(--bulma-link-invert) !important;
+    }
+    [data-theme=system] .tabulator .tabulator-footer {
+        background-color: var(--bulma-background);
+        border-color: var(--bulma-border);
+        color: var(--bulma-text);
+    }
+    [data-theme=system] .tabulator .tabulator-footer .tabulator-page {
+        background-color: transparent;
+        color: var(--bulma-text);
+        border-color: var(--bulma-border);
+    }
+    [data-theme=system] .tabulator .tabulator-footer .tabulator-page.active {
+        background-color: var(--bulma-link);
+        color: var(--bulma-link-invert);
+    }
+}
+