@yuneta/gobj-ui 2.5.0 → 3.0.0

package/src/shell_modals.js

@@ -49,16 +49,36 @@ import {
  ***************************************************************/
 function notification_layer(shell)
 {
+    if(!shell) {
+        return null;
+    }
     let priv = gobj_read_attr(shell, "priv");
     return priv && priv.layers && priv.layers.notification;
 }
 
 function modal_layer(shell)
 {
+    if(!shell) {
+        return null;
+    }
     let priv = gobj_read_attr(shell, "priv");
     return priv && priv.layers && priv.layers.modal;
 }
 
+/*  Public: where a component should mount its own popup/dialog DOM
+ *  (e.g. the treedb edit dialog).  The popup layer (z 20) sits below
+ *  the modal layer (z 99), so shell confirms always paint above the
+ *  component's dialog — matching the Escape chain LIFO order.  Null
+ *  when there is no shell: the caller picks its legacy fallback. */
+export function yui_shell_popup_layer(shell)
+{
+    if(!shell) {
+        return null;
+    }
+    let priv = gobj_read_attr(shell, "priv");
+    return (priv && priv.layers && priv.layers.popup) || null;
+}
+
 
 /***************************************************************
  *  i18n bridge:
@@ -301,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);
@@ -319,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") {
@@ -342,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]
             ]
         ]
     );
@@ -399,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(
@@ -410,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();
+        }
     });
 }
 
@@ -417,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;
+}
+