@yuneta/gobj-ui 2.6.0 → 3.0.0

package/index.js

@@ -14,14 +14,11 @@
 /*
  *  Components
  */
-export { register_c_yui_main, display_volatil_modal, display_info_message, display_warning_message, display_error_message, get_yesnocancel, get_yesno, get_ok } from "./src/c_yui_main.js";
 export { register_c_yui_window } from "./src/c_yui_window.js";
 export { register_c_yui_window_manager } from "./src/c_yui_window_manager.js";
-export { register_c_yui_tabs } from "./src/c_yui_tabs.js";
 export { register_c_yui_pager } from "./src/c_yui_pager.js";
 export { register_c_yui_wizard } from "./src/c_yui_wizard.js";
 export { register_c_yui_form } from "./src/c_yui_form.js";
-export { register_c_yui_routing } from "./src/c_yui_routing.js";
 export { register_c_yui_map } from "./src/c_yui_map.js";
 export { register_c_yui_uplot } from "./src/c_yui_uplot.js";
 export { register_c_yui_json_graph } from "./src/c_yui_json_graph.js";
@@ -70,8 +67,6 @@ export { register_c_g6_nodes_tree } from "./src/c_g6_nodes_tree.js";
 export { addClasses, removeClasses, toggleClasses, removeChildElements, disableElements, enableElements, set_submit_state, set_cancel_state, set_active_state, getStrokeColor } from "./src/lib_graph.js";
 export { inject_svg_icons } from "./src/lib_icons.js";
 export { EditControl, MarkerControl } from "./src/lib_maplibre.js";
-export { themes } from "./src/themes.js";
-export { YTable, createYTable } from "./src/ytable.js";
 export { yui_toolbar } from "./src/yui_toolbar.js";
 export { attach_clear } from "./src/yui_inputs.js";
 export { info_traffic, setup_dev, build_dev_panel, apply_dev_traces, dev_window_was_open } from "./src/yui_dev.js";
@@ -79,11 +74,8 @@ export { info_traffic, setup_dev, build_dev_panel, apply_dev_traces, dev_window_
 /*
  *  CSS - import these in your main entry point
  *  Example:
- *    import "gobj-ui/src/c_yui_main.css";
  *    import "gobj-ui/src/c_yui_shell.css";     // declarative shell
  *    import "gobj-ui/src/c_yui_map.css";
- *    import "gobj-ui/src/c_yui_routing.css";
- *    import "gobj-ui/src/ytable.css";
  *    import "gobj-ui/src/yui_toolbar.css";
  *    import "gobj-ui/src/lib_graph.css";
  *    import "gobj-ui/src/yui_icons.css";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yuneta/gobj-ui",
-    "version": "2.6.0",
+    "version": "3.0.0",
     "type": "module",
     "main": "dist/gobj-ui.cjs.js",
     "module": "dist/gobj-ui.es.js",

package/src/c_yui_form.css

@@ -48,3 +48,12 @@
     border-color: var(--bulma-border, #dbdbdb);
     cursor: default;
 }
+
+/*  Moved from c_yui_main.css (2.6.1): scroll containment for the fields area.
+ *  Self-contained here so every consumer gets it without the
+ *  legacy stack's stylesheet. */
+
+.overscroll-contain {
+    overscroll-behavior: contain;
+}
+

package/src/c_yui_form.js

@@ -56,6 +56,7 @@ import TomSelect from "tom-select"; // Import Tom-Select JS
 import { createJSONEditor } from 'vanilla-jsoneditor';
 import "vanilla-jsoneditor/themes/jse-theme-dark.css";
 import "./c_yui_form.css";
+import "./tabulator.css";
 
 import "tabulator-tables/dist/css/tabulator.min.css"; // Import Tabulator CSS
 import "tabulator-tables/dist/css/tabulator_bulma.css";

package/src/c_yui_shell.css

@@ -643,3 +643,90 @@
         display: none;
     }
 }
+
+/*  Moved from c_yui_main.css (2.6.1): mobile Bulma columns edge-to-edge.
+ *  Self-contained here so every consumer gets it without the
+ *  legacy stack's stylesheet. */
+
+@media screen and (max-width: 768px) {
+    .column {
+        padding: 0 !important;
+        margin-bottom: 16px !important;
+    }
+}
+
+
+/*============================================================
+ *      Shell confirm dialogs (yui_shell_confirm_*):
+ *      icon-centric layout ported from the legacy volatil
+ *      modals (2.5.0 redesign; c_yui_main.js removed in 3.0.0).
+ *      A narrow rounded card with a tinted round icon of the
+ *      type; everything maps to Bulma vars so one rule set
+ *      follows light and dark.
+ *============================================================*/
+.modal.yui-confirm .modal-background {
+    background-color: color-mix(in srgb, var(--bulma-scheme-invert, #000) 45%, transparent);
+}
+.modal.yui-confirm .modal-card {
+    position: relative;
+    width: min(26rem, calc(100vw - 2rem));
+    border-radius: 0.75rem;
+    background: var(--bulma-scheme-main, #fff);
+    box-shadow: 0 12px 40px color-mix(in srgb, var(--bulma-scheme-invert, #000) 30%, transparent);
+    padding: 1.5rem 1.5rem 1.25rem;
+}
+.modal.yui-confirm .modal-card-body {
+    background: transparent;
+    padding: 0;
+}
+.modal.yui-confirm .modal-card-foot {
+    background: transparent;
+    border-top: none;
+    padding: 1rem 0 0;
+    justify-content: center;
+}
+.yui-confirm-icon {
+    width: 3.25rem;
+    height: 3.25rem;
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 0.75rem;
+    font-size: 1.5rem;
+    background: color-mix(in srgb, var(--yui-confirm-base, var(--bulma-info, #3e8ed0)) 15%, transparent);
+    color: var(--yui-confirm-ink, var(--bulma-info, #3e8ed0));
+}
+.modal.yui-confirm.is-info,
+.modal.yui-confirm.is-question {
+    --yui-confirm-base: var(--bulma-info, #3e8ed0);
+    --yui-confirm-ink: var(--bulma-info-on-scheme, #3e8ed0);
+}
+.modal.yui-confirm.is-success {
+    --yui-confirm-base: var(--bulma-success, #48c78e);
+    --yui-confirm-ink: var(--bulma-success-on-scheme, #257953);
+}
+.modal.yui-confirm.is-warning {
+    --yui-confirm-base: var(--bulma-warning, #ffe08a);
+    --yui-confirm-ink: var(--bulma-warning-on-scheme, #946c00);
+}
+.modal.yui-confirm.is-error {
+    --yui-confirm-base: var(--bulma-danger, #f14668);
+    --yui-confirm-ink: var(--bulma-danger-on-scheme, #cc0f35);
+}
+.yui-confirm-title {
+    font-size: 1.15rem;
+    font-weight: 600;
+    text-transform: capitalize;
+    margin-bottom: 0.25rem;
+    color: var(--bulma-text-strong, inherit);
+}
+.yui-confirm-x {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+}
+.yui-confirm-msg {
+    font-size: 1.05rem;
+    color: var(--bulma-text, inherit);
+}

package/src/c_yui_treedb_topic_with_form.css

@@ -45,3 +45,56 @@
 .toolbar_tabulator_table .control.has-icons-left {
     min-width: 0;
 }
+
+/*  Moved from c_yui_main.css (2.6.1): the responsive edit-dialog card
+ *  and the utilities this gclass tags on its DOM.
+ *  Self-contained here so every consumer gets it without the
+ *  legacy stack's stylesheet. */
+
+/* Custom class to adjust the modal width */
+.modal-card.modal-is-responsive {
+    width: 100%;
+    max-width: 100%;
+}
+
+@media screen and (min-width: 768px) {
+    .modal-card.modal-is-responsive {
+        width: 50rem;
+        max-width: 50rem;
+    }
+}
+
+/*
+ *  Mobile (< 768px, dovetails with the desktop rule above): a
+ *  `modal-is-responsive` card (the C_YUI_TREEDB edit/delete form
+ *  popup, and any other consumer of this opt-in class) takes the
+ *  WHOLE screen instead of a centred sheet — more room to edit on a
+ *  phone.  Confirm dialogs do not carry `modal-is-responsive`, so
+ *  they stay compact.  Edge-to-edge: full size, no margin, flat
+ *  corners; the body keeps Bulma's own scroll.
+ */
+@media screen and (max-width: 767px) {
+    .modal-card.modal-is-responsive {
+        width: 100%;
+        max-width: 100%;
+        height: 100%;
+        max-height: 100%;
+        margin: 0;
+        border-radius: 0;
+    }
+    .modal-card.modal-is-responsive .modal-card-head,
+    .modal-card.modal-is-responsive .modal-card-foot {
+        border-radius: 0;
+    }
+    .modal-card.modal-is-responsive .modal-card-body {
+        flex: 1 1 auto;
+        overflow-y: auto;
+    }
+}
+
+.without-border {
+    border: none !important;
+    box-shadow: none !important;
+    background: transparent !important;
+}
+

package/src/c_yui_treedb_topic_with_form.js

@@ -73,6 +73,7 @@ import {register_c_yui_form} from "./c_yui_form.js";
 import {t} from "i18next";
 
 import "./c_yui_treedb_topic_with_form.css";
+import "./tabulator.css";
 
 import { TabulatorFull as Tabulator } from "tabulator-tables";
 

package/src/c_yui_window.css

@@ -0,0 +1,22 @@
+/***********************************************************************
+ *          c_yui_window.css
+ *
+ *      Styles C_YUI_WINDOW tags on its chrome.  Moved from
+ *      c_yui_main.css (2.6.1) so windows are self-contained and no
+ *      longer depend on the legacy stack's stylesheet.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+
+.strong-shadow {
+    box-shadow:
+        0 1em 2em -0.125em hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.3),
+        0 0 0 2px hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.1) !important;
+}
+
+.without-border {
+    border: none !important;
+    box-shadow: none !important;
+    background: transparent !important;
+}

package/src/c_yui_window.js

@@ -47,6 +47,8 @@ import {t} from "i18next";
 import {yui_shell_confirm_yesnocancel} from "./shell_modals.js";
 import {yui_shell_of} from "./c_yui_shell.js";
 
+import "./c_yui_window.css";
+
 /***************************************************************
  *              Constants
  ***************************************************************/

package/src/shell_modals.js

@@ -321,13 +321,28 @@ export function yui_shell_show_modal(shell, content, opts)
 
 
 /***************************************************************
- *              Blocking dialogs (Bulma .modal-card)
+ *              Blocking dialogs (icon-centric .modal-card)
  *
  *      build_dialog returns a Promise that resolves with the
  *      clicked button's `value`.  Escape, the close button and
  *      the dismiss action all resolve with the LAST button's value
  *      (cancel/no/ok by convention — the safe-default action).
+ *
+ *      Layout ported from the legacy volatil modals (2.5.0
+ *      redesign, removed in 3.0.0): a narrow rounded card with a
+ *      tinted round icon of the `opts.type`
+ *      (question/success/info/warning/error, `danger` aliases
+ *      error), optional capitalized title, centered message and
+ *      buttons.  Everything maps to Bulma vars (light and dark).
  ***************************************************************/
+const CONFIRM_TYPE_ICONS = {
+    "info":     "yi-circle-info",
+    "question": "yi-question",
+    "success":  "yi-square-check",
+    "warning":  "yi-triangle-exclamation",
+    "error":    "yi-circle-exclamation",
+};
+
 function build_dialog(shell, message, buttons, opts)
 {
     let $layer = modal_layer(shell);
@@ -339,16 +354,18 @@ function build_dialog(shell, message, buttons, opts)
     let title = (opts && opts.title) || "";
     let dismiss_value = buttons[buttons.length - 1].value;
 
+    let type = ((opts && opts.type) || "question").toLowerCase();
+    if(type === "danger") {
+        type = "error";
+    }
+    let icon = CONFIRM_TYPE_ICONS[type] || CONFIRM_TYPE_ICONS["question"];
+
     let $body_children = (typeof message === "string")
-        ? [["p", {i18n: message}, message]]
+        ? [["p", {class: "yui-confirm-msg", i18n: message}, message]]
         : [message];
 
-    let title_attrs = !empty_string(title)
-        ? {class: "modal-card-title", i18n: title}
-        : {class: "modal-card-title"};
-
     let $footer_children = buttons.map(b => {
-        let cls = "button";
+        let cls = "button px-5";
         if(b.kind === "primary") {
             cls += " is-link";
         } else if(b.kind === "danger") {
@@ -362,24 +379,30 @@ function build_dialog(shell, message, buttons, opts)
         return ["button", btn_attrs, b.label];
     });
 
+    let $card_children = [
+        ["div", {class: "yui-confirm-icon"},
+            [["i", {class: icon, "aria-hidden": "true"}]]
+        ]
+    ];
+    if(!empty_string(title)) {
+        $card_children.push(
+            ["p", {class: "yui-confirm-title has-text-centered",
+                   i18n: title}, title]
+        );
+    }
+    $card_children.push(
+        ["button", {class: "delete yui-confirm-x", "aria-label": "close"}],
+        ["section", {class: "modal-card-body has-text-centered"},
+            $body_children],
+        ["footer", {class: "modal-card-foot"}, $footer_children]
+    );
+
     let $modal = createElement2(
-        ["div", {class: "modal yui-modal yui-confirm is-active",
+        ["div", {class: `modal yui-modal yui-confirm is-active is-${type}`,
                  role: "dialog", "aria-modal": "true"},
             [
                 ["div", {class: "modal-background"}],
-                ["div", {class: "modal-card"},
-                    [
-                        ["header", {class: "modal-card-head"},
-                            [
-                                ["p", title_attrs, title],
-                                ["button", {class: "delete",
-                                            "aria-label": "close"}]
-                            ]
-                        ],
-                        ["section", {class: "modal-card-body"}, $body_children],
-                        ["footer", {class: "modal-card-foot"}, $footer_children]
-                    ]
-                ]
+                ["div", {class: "modal-card"}, $card_children]
             ]
         ]
     );
@@ -419,7 +442,7 @@ function build_dialog(shell, message, buttons, opts)
         $modal.querySelector(".modal-background").addEventListener(
             "click", () => close(dismiss_value)
         );
-        $modal.querySelector(".modal-card-head .delete").addEventListener(
+        $modal.querySelector(".modal-card .delete").addEventListener(
             "click", () => close(dismiss_value)
         );
         let footer_buttons = $modal.querySelectorAll(
@@ -430,6 +453,12 @@ function build_dialog(shell, message, buttons, opts)
                 close($btn.getAttribute("data-modal-button-value"));
             });
         });
+
+        /*  Enter answers the primary action, like the volatil modals. */
+        let $primary = $modal.querySelector(".modal-card-foot button");
+        if($primary) {
+            $primary.focus();
+        }
     });
 }
 
@@ -437,6 +466,9 @@ function build_dialog(shell, message, buttons, opts)
 export function yui_shell_confirm_ok(shell, message, opts)
 {
     let label = (opts && opts.ok_label) || "OK";
+    if(!opts || !opts.type) {
+        opts = Object.assign({}, opts, {type: "success"});
+    }
     return build_dialog(shell, message, [
         {label: label, value: "ok", kind: "primary"}
     ], opts).then(() => undefined);

package/src/tabulator.css

@@ -51,3 +51,181 @@
 [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;
+}
+
+/*
+ *  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;
+}
+
+[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-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);
+    }
+}
+

package/src/yui_toolbar.css

@@ -48,3 +48,31 @@
 .yui-horizontal-toolbar-scroll-btn span {
     width: 1.2em;
 }
+
+/*  Moved from c_yui_main.css (2.6.1): horizontal toolbar section.
+ *  Self-contained here so every consumer gets it without the
+ *  legacy stack's stylesheet. */
+
+/*********************************************************
+ *      Toolbars
+ *********************************************************/
+.yui-horizontal-toolbar-section {
+    display: flex;
+    height: auto;
+    flex-shrink: 0; /* Prevents resizing */
+    white-space: nowrap;
+    margin: 0 2px; /* Space between sections */
+    justify-content: space-between;
+    align-items: center;
+}
+
+a.flex-horizontal-section { /* To make flex any <a> */
+    display: flex;
+    flex-shrink: 0; /* Prevents resizing */
+    white-space: nowrap;
+    margin: 0 2px; /* Space between sections */
+    justify-content: space-between;
+    align-items: center;
+    padding-inline-end: 2rem;
+}
+