@yuneta/gobj-ui 7.26.30 → 7.26.32

package/src/window_layer.wiring.test.js

@@ -0,0 +1,106 @@
+/***********************************************************************
+ *          window_layer.wiring.test.js
+ *
+ *      Where a C_YUI_WINDOW lives when its host names no `$parent`:
+ *      the OVERLAY layer of the shell, below the layers of the
+ *      dropdowns, the dialogs and the toasts -- not document.body,
+ *      where it covered the whole shell (a stacking context of its
+ *      own) and the dialog of its own close opened under it.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {describe, test, expect, beforeAll} from "vitest";
+import {install_dom_double} from "../test/dom_double.js";
+
+install_dom_double();
+
+if(typeof globalThis.matchMedia === "undefined") {
+    globalThis.matchMedia = () => ({matches: false, addEventListener() {}, removeEventListener() {}});
+}
+
+const {
+    SDATA, SDATA_END, data_type_t, gclass_create, gobj_write_attr,
+    gobj_start_up, gobj_create_yuno, gobj_create, gobj_create_service,
+    gobj_start, gobj_stop, gobj_destroy, gobj_read_attr,
+} = await import("@yuneta/gobj-js");
+const {register_c_yui_shell} = await import("./c_yui_shell.js");
+const {register_c_yui_nav} = await import("./c_yui_nav.js");
+const {register_c_yui_window} = await import("./c_yui_window.js");
+
+let yuno = null;
+
+beforeAll(async () => {
+    const i18next = (await import("i18next")).default;
+    await i18next.init({lng: "en", resources: {}});
+    gobj_start_up(null, null, null, null, null, null, null);
+    gclass_create("C_TEST_LAYER_HOST", [], [["ST_IDLE", []]], {}, 0, [SDATA_END()], {}, 0, 0, 0, 0);
+    gclass_create(
+        "C_TEST_LAYER_VIEW", [], [["ST_IDLE", []]], {
+            mt_create: (gobj) => {
+                gobj_write_attr(gobj, "$container", document.createElement("div"));
+            }
+        }, 0, [
+            SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "view root"),
+            SDATA_END()
+        ], {}, 0, 0, 0, 0
+    );
+    register_c_yui_shell();
+    register_c_yui_nav();
+    register_c_yui_window();
+    yuno = gobj_create_yuno("layer_yuno", "C_TEST_LAYER_HOST", {});
+    gobj_start(yuno);
+});
+
+describe("the default parent of a window", () => {
+    test("with no shell: document.body", () => {
+        const w = gobj_create_service("layer_w0", "C_YUI_WINDOW", {header: "w", body: ["div", {}, "w"]}, yuno);
+        gobj_start(w);
+        expect(gobj_read_attr(w, "$container").parentNode).toBe(document.body);
+        gobj_stop(w);
+        gobj_destroy(w);
+    });
+
+    test("with a shell: its overlay layer, also for a window that is not its child", () => {
+        const shell = gobj_create("layer_shell", "C_YUI_SHELL", {
+            config: {
+                shell: {
+                    zones: {center: {host: "stage.main"}},
+                    stages: {main: {zone: "center", default_route: "/a"}}
+                },
+                menu: {primary: {items: [
+                    {id: "a", name: "a", route: "/a",
+                     target: {stage: "main", gclass: "C_TEST_LAYER_VIEW", kw: {}}}
+                ]}}
+            },
+            use_hash: false
+        }, yuno);
+        gobj_start(shell);
+
+        /*  A child of the shell, and one parented to the app (the dev
+         *  window, a device window of a view): both in the overlay.  */
+        const inside = gobj_create_service("layer_w1", "C_YUI_WINDOW", {header: "a", body: ["div", {}, "a"]}, shell);
+        gobj_start(inside);
+        const outside = gobj_create_service("layer_w2", "C_YUI_WINDOW", {header: "b", body: ["div", {}, "b"]}, yuno);
+        gobj_start(outside);
+
+        const overlay = shell.priv.layers.overlay;
+        expect(overlay).toBeTruthy();
+        expect(gobj_read_attr(inside, "$container").parentNode).toBe(overlay);
+        expect(gobj_read_attr(outside, "$container").parentNode).toBe(overlay);
+
+        /*  And a `$parent` named by the host still wins.  */
+        const $mine = document.createElement("div");
+        const named = gobj_create_service("layer_w3", "C_YUI_WINDOW",
+            {header: "c", body: ["div", {}, "c"], $parent: $mine}, yuno);
+        gobj_start(named);
+        expect(gobj_read_attr(named, "$container").parentNode).toBe($mine);
+
+        for(const w of [inside, outside, named]) {
+            gobj_stop(w);
+            gobj_destroy(w);
+        }
+        gobj_stop(shell);
+        gobj_destroy(shell);
+    });
+});

package/src/yui_table_select.js

@@ -199,8 +199,8 @@ function yui_wire_selection(tabulator, on_change)
  ***************************************************************/
 function yui_selection_bar(t, opts)
 {
-    let o = opts || {};
-    let actions = Array.isArray(o.actions) ? o.actions : [];
+    const o = opts || {};
+    const actions = Array.isArray(o.actions) ? o.actions : [];
     let name = o.name || "TABLE";
     let count = 0;
 
@@ -218,7 +218,6 @@ function yui_selection_bar(t, opts)
                 click: action.on_click
             }]
         );
-        $b._yui_label = action.label || "";
         $buttons.push($b);
     }
 
@@ -254,19 +253,27 @@ function yui_selection_bar(t, opts)
         return $b.querySelector("span.icon ~ span");
     }
 
+    /*  A button's label and its name, in the current language  */
+    function paint_label($b, key)
+    {
+        let $label = label_of($b);
+        if($label && key) {
+            $label.textContent = t(key);
+        }
+        $b.title = key ? t(key) : "";
+        $b.setAttribute("aria-label", $b.title);
+    }
+
     function refresh()
     {
         $count.textContent = t("{{n}} selected", {n: count});
-        for(let $b of $buttons.concat([$clear])) {
-            let $label = label_of($b);
-            /*  A literal, where validate-locales reads it; an action's key is the HOST's  */
-            const key = ($b === $clear)? "clear selection" : $b._yui_label;
-            if($label && key) {
-                $label.textContent = t(key);
-            }
-            $b.title = key ? t(key) : "";
-            $b.setAttribute("aria-label", $b.title);
-        }
+        /*  An action's label is the HOST's key, read where the host calls
+         *  yui_selection_bar() (I18N_KEY_FUNCTIONS); the clear button's, a
+         *  literal read here  */
+        actions.forEach((action, i) => {
+            paint_label($buttons[i], action.label || "");
+        });
+        paint_label($clear, "clear selection");
         /*  Bulma's `is-hidden` carries `!important`: the class is what
          *  toggles, an inline display would lose to it. */
         $el.classList.toggle("is-hidden", count <= 0);

package/src/yui_tabulator_i18n.js

@@ -134,8 +134,14 @@ function yui_tabulator_name_filters(table, t)
              *  already exists in two apps as the header filter's
              *  PLACEHOLDER ("filtrar columna...") and carries no
              *  interpolation, so reusing it named all five boxes the
-             *  same -- which is where this started.  */
-            $input.setAttribute("aria-label", t("filter by column", {column: title}));
+             *  same -- which is where this started.
+             *
+             *  The `title` too: every control carries both, and a filter
+             *  box shows only its placeholder, which goes as soon as
+             *  something is typed in it.  */
+            let name = t("filter by column", {column: title});
+            $input.setAttribute("aria-label", name);
+            $input.setAttribute("title", name);
         }
     } catch(e) {
         /*  a table between renders has no columns to name  */
@@ -181,6 +187,8 @@ function yui_tabulator_name_row_selects(table, t)
         for(let $box of boxes) {
             $box.setAttribute("aria-label", t("select row"));
             $box.setAttribute("data-i18n-aria-label", "select row");
+            $box.setAttribute("title", t("select row"));
+            $box.setAttribute("data-i18n-title", "select row");
         }
     } catch(e) {
         /*  a table between renders has no boxes to name  */

package/src/yui_tabulator_i18n.test.js

@@ -0,0 +1,80 @@
+/***********************************************************************
+ *          yui_tabulator_i18n.test.js
+ *
+ *      The names given AFTER the render to what Tabulator draws for
+ *      itself: the header filters and the row-selection boxes carry
+ *      an aria-label AND a title, like every control.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {describe, it, expect} from "vitest";
+
+import {
+    yui_tabulator_name_filters,
+    yui_tabulator_name_row_selects,
+} from "./yui_tabulator_i18n.js";
+
+/*  An element double: attributes, and the one child a selector finds.  */
+function element(child)
+{
+    const attrs = {};
+    return {
+        attrs,
+        setAttribute: (k, v) => {
+            attrs[k] = String(v);
+        },
+        getAttribute: (k) => (k in attrs) ? attrs[k] : null,
+        querySelector: () => child || null,
+        querySelectorAll: () => (child ? [child] : []),
+    };
+}
+
+/*  A column double with its header filter input.  */
+function column(title, $input)
+{
+    const $el = element($input);
+    return {
+        getElement: () => $el,
+        getDefinition: () => ({title: title}),
+    };
+}
+
+const t = (key, opts) => (key === "filter by column")
+    ? `Filtrar por ${opts.column}`
+    : (key === "select row" ? "Seleccionar fila" : key);
+
+describe("yui_tabulator_name_filters", () => {
+    it("names each header filter with an aria-label and a title", () => {
+        const $a = element();
+        const $b = element();
+        const table = {getColumns: () => [column("Id", $a), column("Name", $b)]};
+
+        yui_tabulator_name_filters(table, t);
+
+        expect($a.attrs["aria-label"]).toBe("Filtrar por Id");
+        expect($a.attrs["title"]).toBe("Filtrar por Id");
+        expect($b.attrs["aria-label"]).toBe("Filtrar por Name");
+        expect($b.attrs["title"]).toBe("Filtrar por Name");
+    });
+
+    it("leaves a column without a filter alone", () => {
+        const table = {getColumns: () => [column("Id", null)]};
+        expect(() => yui_tabulator_name_filters(table, t)).not.toThrow();
+    });
+});
+
+describe("yui_tabulator_name_row_selects", () => {
+    it("renames Tabulator's English box with an aria-label and a title, and their keys", () => {
+        const $box = element();
+        $box.setAttribute("aria-label", "Select Row");
+        const table = {element: element($box)};
+
+        yui_tabulator_name_row_selects(table, t);
+
+        expect($box.attrs["aria-label"]).toBe("Seleccionar fila");
+        expect($box.attrs["data-i18n-aria-label"]).toBe("select row");
+        expect($box.attrs["title"]).toBe("Seleccionar fila");
+        expect($box.attrs["data-i18n-title"]).toBe("select row");
+    });
+});