@yuneta/gobj-ui 7.26.30 → 7.26.31

package/README.md

@@ -78,6 +78,15 @@ Published as `@yuneta/gobj-ui`. Built on top of [`@yuneta/gobj-js`](https://gith
 > maximize/restore + close. The self-contained **"shade"** fallback (roll up to
 > the title bar in place) and its `is-shaded` CSS are **removed**; an app that
 > relied on shading needs to register a manager.
+>
+> **Where a window lives (7.26.31):** a `C_YUI_WINDOW` whose host names no
+> `$parent` mounts in the **overlay layer of the shell** -- above the content,
+> below the toolbar's dropdowns, the dialogs and the toasts -- and on
+> `document.body` only when there is no shell. It used to be the body always,
+> and since `.yui-shell` is `position: fixed` (a stacking context of its own)
+> a window at z-index 11 covered the WHOLE shell, modal layer included: the
+> confirmation of a window's own close opened under it, out of reach. A
+> `$parent` the host names still wins.
 
 ## Two maintained lines
 

package/dist/gobj-ui.cjs.js

@@ -4050,7 +4050,7 @@ var MOBILE_MAX = 768;
 ***************************************************************/
 var attrs_table$21 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "subscriber", 0, null, "Subscriber of output events"),
-	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "$parent", 0, null, "$container will be appended to $parent if not null, else to document.body"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "$parent", 0, null, "$container will be appended to $parent if not null, else to the overlay layer of the shell (document.body when there is none)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_INTEGER, "x", 0, "300", "X position"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_INTEGER, "y", 0, "100", "Y position"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_INTEGER, "width", 0, "700", "Width of the window"),
@@ -4545,8 +4545,8 @@ function build_ui$18(gobj) {
 	}
 	(0, _yuneta_gobj_js.refresh_language)($container, i18next.t);
 	let $parent = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$parent");
-	if ($parent) $parent.appendChild($container);
-	else document.body.appendChild($container);
+	if (!$parent) $parent = default_parent(gobj);
+	$parent.appendChild($container);
 	if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "openMaximized")) max$2(gobj);
 	else if (!mobile) {
 		if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "content_size")) $container.style.height = "auto";
@@ -4632,6 +4632,30 @@ function close_window(gobj) {
 	};
 }
 /************************************************************
+*  Where a window lives when its host names no `$parent`: the
+*  OVERLAY layer of the shell -- above the content, below the
+*  toolbar's dropdowns, the dialogs and the toasts.
+*
+*  It used to be document.body, and that put every window above
+*  the WHOLE shell: `.yui-shell` is position:fixed, a stacking
+*  context of its own, so the z-index of its modal layer (99)
+*  counted only inside it, and a window at z-index 11 on the body
+*  covered it. The confirmation a window's own close asks ("all
+*  changes will be lost") opened UNDER the window that asked it,
+*  where no click could reach it; a toast, a dropdown of the
+*  toolbar, any dialog opened with a window on screen, the same.
+*
+*  Inside the layer the dock's z-index still orders the windows
+*  among themselves. No shell (a page with windows and no shell):
+*  the body, as before.
+************************************************************/
+function default_parent(gobj) {
+	let shell = yui_shell_of(gobj);
+	let layers = shell && shell.priv && shell.priv.layers;
+	if (layers && layers.overlay) return layers.overlay;
+	return document.body;
+}
+/************************************************************
 *
 ************************************************************/
 function toggle(gobj) {
@@ -6734,7 +6758,9 @@ function yui_tabulator_name_filters(table, t) {
 			let $title = $el.querySelector(".tabulator-col-title");
 			if (!title && $title) title = $title.textContent.trim();
 			if (!title) continue;
-			$input.setAttribute("aria-label", t("filter by column", { column: title }));
+			let name = t("filter by column", { column: title });
+			$input.setAttribute("aria-label", name);
+			$input.setAttribute("title", name);
 		}
 	} catch (e) {}
 }
@@ -6765,6 +6791,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) {}
 }
@@ -9163,11 +9191,19 @@ function name_form_control$1($field, conf) {
 		$control.setAttribute("aria-label", (0, i18next.t)(key));
 		$control.setAttribute("data-i18n-aria-label", key);
 	}
+	if ($control && !$control.getAttribute("title")) {
+		$control.setAttribute("title", (0, i18next.t)(key));
+		$control.setAttribute("data-i18n-title", key);
+	}
 	let $ts = $field.querySelector(".ts-control input");
 	if ($ts && !$ts.getAttribute("aria-label")) {
 		$ts.setAttribute("aria-label", (0, i18next.t)(key));
 		$ts.setAttribute("data-i18n-aria-label", key);
 	}
+	if ($ts && !$ts.getAttribute("title")) {
+		$ts.setAttribute("title", (0, i18next.t)(key));
+		$ts.setAttribute("data-i18n-title", key);
+	}
 	let $clear = $field.querySelector(".ts-wrapper .clear-button");
 	if ($clear) {
 		const CLEAR_KEY = "remove all selected options";
@@ -10257,6 +10293,8 @@ function create_coordinates(gobj, attrs) {
 					type: "text",
 					placeholder: (0, i18next.t)("coordinates..."),
 					"data-i18n-placeholder": "coordinates...",
+					title: (0, i18next.t)("coordinates"),
+					"data-i18n-title": "coordinates",
 					"aria-label": (0, i18next.t)("coordinates"),
 					"data-i18n-aria-label": "coordinates"
 				},

package/dist/gobj-ui.es.js

@@ -4045,7 +4045,7 @@ var MOBILE_MAX = 768;
 ***************************************************************/
 var attrs_table$21 = [
 	SDATA(data_type_t.DTP_POINTER, "subscriber", 0, null, "Subscriber of output events"),
-	SDATA(data_type_t.DTP_POINTER, "$parent", 0, null, "$container will be appended to $parent if not null, else to document.body"),
+	SDATA(data_type_t.DTP_POINTER, "$parent", 0, null, "$container will be appended to $parent if not null, else to the overlay layer of the shell (document.body when there is none)"),
 	SDATA(data_type_t.DTP_INTEGER, "x", 0, "300", "X position"),
 	SDATA(data_type_t.DTP_INTEGER, "y", 0, "100", "Y position"),
 	SDATA(data_type_t.DTP_INTEGER, "width", 0, "700", "Width of the window"),
@@ -4540,8 +4540,8 @@ function build_ui$18(gobj) {
 	}
 	refresh_language($container, t);
 	let $parent = gobj_read_attr(gobj, "$parent");
-	if ($parent) $parent.appendChild($container);
-	else document.body.appendChild($container);
+	if (!$parent) $parent = default_parent(gobj);
+	$parent.appendChild($container);
 	if (gobj_read_bool_attr(gobj, "openMaximized")) max$2(gobj);
 	else if (!mobile) {
 		if (gobj_read_bool_attr(gobj, "content_size")) $container.style.height = "auto";
@@ -4627,6 +4627,30 @@ function close_window(gobj) {
 	};
 }
 /************************************************************
+*  Where a window lives when its host names no `$parent`: the
+*  OVERLAY layer of the shell -- above the content, below the
+*  toolbar's dropdowns, the dialogs and the toasts.
+*
+*  It used to be document.body, and that put every window above
+*  the WHOLE shell: `.yui-shell` is position:fixed, a stacking
+*  context of its own, so the z-index of its modal layer (99)
+*  counted only inside it, and a window at z-index 11 on the body
+*  covered it. The confirmation a window's own close asks ("all
+*  changes will be lost") opened UNDER the window that asked it,
+*  where no click could reach it; a toast, a dropdown of the
+*  toolbar, any dialog opened with a window on screen, the same.
+*
+*  Inside the layer the dock's z-index still orders the windows
+*  among themselves. No shell (a page with windows and no shell):
+*  the body, as before.
+************************************************************/
+function default_parent(gobj) {
+	let shell = yui_shell_of(gobj);
+	let layers = shell && shell.priv && shell.priv.layers;
+	if (layers && layers.overlay) return layers.overlay;
+	return document.body;
+}
+/************************************************************
 *
 ************************************************************/
 function toggle(gobj) {
@@ -6729,7 +6753,9 @@ function yui_tabulator_name_filters(table, t) {
 			let $title = $el.querySelector(".tabulator-col-title");
 			if (!title && $title) title = $title.textContent.trim();
 			if (!title) continue;
-			$input.setAttribute("aria-label", t("filter by column", { column: title }));
+			let name = t("filter by column", { column: title });
+			$input.setAttribute("aria-label", name);
+			$input.setAttribute("title", name);
 		}
 	} catch (e) {}
 }
@@ -6760,6 +6786,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) {}
 }
@@ -9158,11 +9186,19 @@ function name_form_control$1($field, conf) {
 		$control.setAttribute("aria-label", t(key));
 		$control.setAttribute("data-i18n-aria-label", key);
 	}
+	if ($control && !$control.getAttribute("title")) {
+		$control.setAttribute("title", t(key));
+		$control.setAttribute("data-i18n-title", key);
+	}
 	let $ts = $field.querySelector(".ts-control input");
 	if ($ts && !$ts.getAttribute("aria-label")) {
 		$ts.setAttribute("aria-label", t(key));
 		$ts.setAttribute("data-i18n-aria-label", key);
 	}
+	if ($ts && !$ts.getAttribute("title")) {
+		$ts.setAttribute("title", t(key));
+		$ts.setAttribute("data-i18n-title", key);
+	}
 	let $clear = $field.querySelector(".ts-wrapper .clear-button");
 	if ($clear) {
 		const CLEAR_KEY = "remove all selected options";
@@ -10252,6 +10288,8 @@ function create_coordinates(gobj, attrs) {
 					type: "text",
 					placeholder: t("coordinates..."),
 					"data-i18n-placeholder": "coordinates...",
+					title: t("coordinates"),
+					"data-i18n-title": "coordinates",
 					"aria-label": t("coordinates"),
 					"data-i18n-aria-label": "coordinates"
 				},

package/package.json

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

package/src/c_yui_form.js

@@ -688,6 +688,12 @@ function name_form_control($field, conf)
         $control.setAttribute("aria-label", t(key));
         $control.setAttribute("data-i18n-aria-label", key);
     }
+    /*  And its title, as every control carries: the label sits apart
+     *  from the box, and a narrow form takes it to another line.  */
+    if($control && !$control.getAttribute("title")) {
+        $control.setAttribute("title", t(key));
+        $control.setAttribute("data-i18n-title", key);
+    }
 
     /*  Tom Select HIDES the <select> it is given (`ts-hidden-accessible`)
      *  and draws its own text box in front of it. Naming the original
@@ -700,6 +706,10 @@ function name_form_control($field, conf)
         $ts.setAttribute("aria-label", t(key));
         $ts.setAttribute("data-i18n-aria-label", key);
     }
+    if($ts && !$ts.getAttribute("title")) {
+        $ts.setAttribute("title", t(key));
+        $ts.setAttribute("data-i18n-title", key);
+    }
 
     /*  The ✕ of the clear_button plugin is drawn by Tom Select too, with a
      *  title written once with t() and no key: named here, after the
@@ -2052,6 +2062,8 @@ function create_coordinates(gobj, attrs)
                   *  froze in the language it was built in.  */
                  placeholder: t('coordinates...'),
                  'data-i18n-placeholder': 'coordinates...',
+                 title: t('coordinates'),
+                 'data-i18n-title': 'coordinates',
                  'aria-label': t('coordinates'),
                  'data-i18n-aria-label': 'coordinates'},
                 '',

package/src/c_yui_window.js

@@ -81,7 +81,7 @@ const MOBILE_MAX = 768;
  ***************************************************************/
 const attrs_table = [
 SDATA(data_type_t.DTP_POINTER,  "subscriber",   0,  null,   "Subscriber of output events"),
-SDATA(data_type_t.DTP_POINTER,  "$parent",      0,  null,   "$container will be appended to $parent if not null, else to document.body"),
+SDATA(data_type_t.DTP_POINTER,  "$parent",      0,  null,   "$container will be appended to $parent if not null, else to the overlay layer of the shell (document.body when there is none)"),
 SDATA(data_type_t.DTP_INTEGER,  "x",            0,  "300",  "X position"),
 SDATA(data_type_t.DTP_INTEGER,  "y",            0,  "100",  "Y position"),
 SDATA(data_type_t.DTP_INTEGER,  "width",        0,  "700",  "Width of the window"),
@@ -724,11 +724,10 @@ function build_ui(gobj)
     refresh_language($container, t);
 
     let $parent = gobj_read_attr(gobj, "$parent");
-    if($parent) {
-        $parent.appendChild($container);
-    } else {
-        document.body.appendChild($container);
+    if(!$parent) {
+        $parent = default_parent(gobj);
     }
+    $parent.appendChild($container);
 
     if (gobj_read_bool_attr(gobj, "openMaximized")) {
         max(gobj);
@@ -860,6 +859,34 @@ function close_window(gobj)
     return {state: "asking", answer: answer};
 }
 
+/************************************************************
+ *  Where a window lives when its host names no `$parent`: the
+ *  OVERLAY layer of the shell -- above the content, below the
+ *  toolbar's dropdowns, the dialogs and the toasts.
+ *
+ *  It used to be document.body, and that put every window above
+ *  the WHOLE shell: `.yui-shell` is position:fixed, a stacking
+ *  context of its own, so the z-index of its modal layer (99)
+ *  counted only inside it, and a window at z-index 11 on the body
+ *  covered it. The confirmation a window's own close asks ("all
+ *  changes will be lost") opened UNDER the window that asked it,
+ *  where no click could reach it; a toast, a dropdown of the
+ *  toolbar, any dialog opened with a window on screen, the same.
+ *
+ *  Inside the layer the dock's z-index still orders the windows
+ *  among themselves. No shell (a page with windows and no shell):
+ *  the body, as before.
+ ************************************************************/
+function default_parent(gobj)
+{
+    let shell = yui_shell_of(gobj);
+    let layers = shell && shell.priv && shell.priv.layers;
+    if(layers && layers.overlay) {
+        return layers.overlay;
+    }
+    return document.body;
+}
+
 /************************************************************
  *
  ************************************************************/

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_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");
+    });
+});