@yuneta/gobj-ui 2.0.0 → 2.2.3

package/{shell_modals.js → src/shell_modals.js}

@@ -176,27 +176,55 @@ export function yui_shell_show_modal(shell, content, opts)
         ? ["div", {class: "box"}, [["p", {i18n: content}, content]]]
         : null;
 
+    /*  Adaptive DIALOG mode (`opts.dialog: true`): the standardized
+     *  "single window / popup" chrome — a centered card with the close X
+     *  at the top-right on desktop, and a full-screen sheet with a back
+     *  arrow at the top-left on mobile. A header bar carries `opts.title`
+     *  and BOTH dismiss controls; CSS shows the right one per breakpoint.
+     *  Both call close() — the app's on_close decides navigation (usually
+     *  history.back()), so gobj-ui stays routing-agnostic. */
+    let dialog = !!(opts && opts.dialog);
+    let title = (opts && opts.title) || "";
+
     /*  The external Bulma `.modal-close is-large` sits at the
      *  top-right of the viewport, outside the content box.  Callers
      *  whose content provides its own in-box close (e.g. a
      *  C_YUI_PAGER header) pass `with_close_button: false` to omit
      *  it; Escape and the backdrop still close the modal. */
     let with_close = !(opts && opts.with_close_button === false);
-    let modal_children = [
-        ["div", {class: "modal-background"}],
-        ["div", {class: "modal-content"},
-            inner ? [inner] : []
-        ]
-    ];
-    if(with_close) {
-        modal_children.push(
-            ["button", {class: "modal-close is-large",
-                        "aria-label": "close"}]
-        );
+    let modal_children;
+    if(dialog) {
+        let header = ["div", {class: "yui-dialog-header"}, [
+            ["button", {class: "yui-dialog-back", type: "button", "aria-label": "back"},
+                [["i", {class: "yi-arrow-left"}]]],
+            ["span", {class: "yui-dialog-title", i18n: title}, title],
+            ["button", {class: "yui-dialog-x", type: "button", "aria-label": "close"},
+                [["i", {class: "yi-xmark"}]]],
+        ]];
+        let body = ["div", {class: "yui-dialog-body"}, inner ? [inner] : []];
+        modal_children = [
+            ["div", {class: "modal-background"}],
+            ["div", {class: "modal-content yui-dialog-content"}, [header, body]]
+        ];
+        /*  The header X replaces the external Bulma close button. */
+        with_close = false;
+    } else {
+        modal_children = [
+            ["div", {class: "modal-background"}],
+            ["div", {class: "modal-content"},
+                inner ? [inner] : []
+            ]
+        ];
+        if(with_close) {
+            modal_children.push(
+                ["button", {class: "modal-close is-large",
+                            "aria-label": "close"}]
+            );
+        }
     }
 
     let $modal = createElement2(
-        ["div", {class: "modal yui-modal is-active",
+        ["div", {class: "modal yui-modal" + (dialog ? " yui-dialog" : "") + " is-active",
                  role: "dialog", "aria-modal": "true"},
             modal_children
         ]
@@ -204,7 +232,9 @@ export function yui_shell_show_modal(shell, content, opts)
     $layer.appendChild($modal);
 
     if(!inner && content && typeof content.appendChild !== "undefined") {
-        let $content = $modal.querySelector(".modal-content");
+        let $content = dialog
+            ? $modal.querySelector(".yui-dialog-body")
+            : $modal.querySelector(".modal-content");
         $content.appendChild(content);
     }
 
@@ -255,6 +285,16 @@ export function yui_shell_show_modal(shell, content, opts)
     if($close_btn) {
         $close_btn.addEventListener("click", close);
     }
+    if(dialog) {
+        let $back = $modal.querySelector(".yui-dialog-back");
+        if($back) {
+            $back.addEventListener("click", close);
+        }
+        let $x = $modal.querySelector(".yui-dialog-x");
+        if($x) {
+            $x.addEventListener("click", close);
+        }
+    }
 
     return { close };
 }

package/src/tabulator.css

@@ -0,0 +1,53 @@
+/***********************************************************************
+ *          tabulator.css
+ *
+ *          Cross-app Tabulator theme fixes and reusable helpers.
+ *
+ *          Tabulator is a first-class element across the yunos, so its
+ *          styling belongs to the library — not duplicated per app.
+ *          Import this once (after `tabulator.min.css` +
+ *          `tabulator_bulma.css`) so every consumer gets the same
+ *          theme-aware behaviour.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+
+/* ====================================================================
+ *  Active / selected row highlight.
+ *  Green wash + left accent, theme-aware, with enough specificity
+ *  (three classes) to beat the striped-row !important backgrounds.
+ *  Add `yui-row-active` to a `.tabulator-row` element to mark it.
+ * ==================================================================== */
+.tabulator-row.yui-row-active,
+.tabulator-row.yui-row-active.tabulator-row-odd,
+.tabulator-row.yui-row-active.tabulator-row-even {
+    background-color: #E8F6EE !important;
+    box-shadow: inset 4px 0 0 #2BB673;
+}
+
+[data-theme=dark] .tabulator-row.yui-row-active,
+[data-theme=dark] .tabulator-row.yui-row-active.tabulator-row-odd,
+[data-theme=dark] .tabulator-row.yui-row-active.tabulator-row-even {
+    background-color: rgba(43, 182, 115, 0.22) !important;
+    box-shadow: inset 4px 0 0 #2BB673;
+}
+
+/* ====================================================================
+ *  Tree expand/collapse control (the +/- box) in dark theme.
+ *  Tabulator hardcodes the box border and the +/- strokes to #333 on
+ *  a near-black wash — a dark glyph in a dark box on a dark background,
+ *  effectively invisible. Repaint border, wash and strokes light.
+ * ==================================================================== */
+[data-theme=dark] .tabulator-data-tree-control {
+    background: rgba(255, 255, 255, 0.14) !important;
+    border-color: rgba(255, 255, 255, 0.85) !important;
+}
+[data-theme=dark] .tabulator-data-tree-control:hover {
+    background: rgba(255, 255, 255, 0.28) !important;
+}
+[data-theme=dark] .tabulator-data-tree-control .tabulator-data-tree-control-expand,
+[data-theme=dark] .tabulator-data-tree-control .tabulator-data-tree-control-expand:after,
+[data-theme=dark] .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after {
+    background: #ffffff !important;
+}