@yuneta/gobj-ui 7.23.118 → 7.23.120

package/dist/gobj-ui.cjs.js

@@ -23398,8 +23398,40 @@ function tabulator_strings(t) {
 *  Silent no-op on a table that is gone: a language switch races nothing,
 *  but a view torn down mid-switch must not log a failure it cannot act on.
 ***************************************************************/
+/***************************************************************
+*  Name the HEADER FILTER inputs.
+*
+*  Tabulator draws one text box per filterable column and gives
+*  it nothing: no label, no `aria-label`, no placeholder. On
+*  screen its position says what it filters -- it sits under the
+*  column's title -- and to anything that is not an eye it is a
+*  row of anonymous text boxes.
+*
+*  The name is composed from the column's own title, so it needs
+*  ONE consumer key with an interpolation (`filter by column` ->
+*  "Filtrar por {{column}}") instead of one per column, and it
+*  follows a language change because this runs from
+*  `yui_tabulator_relocalize()` as well as at build.
+***************************************************************/
+function yui_tabulator_name_filters(table, t) {
+	if (!table || typeof table.getColumns !== "function") return;
+	try {
+		for (let col of table.getColumns()) {
+			let $el = typeof col.getElement === "function" ? col.getElement() : null;
+			if (!$el) continue;
+			let $input = $el.querySelector(".tabulator-header-filter input, .tabulator-header-filter select");
+			if (!$input) continue;
+			let title = typeof col.getDefinition === "function" ? String(col.getDefinition().title || "") : "";
+			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 }));
+		}
+	} catch (e) {}
+}
 function yui_tabulator_relocalize(table, t) {
 	if (!table) return;
+	yui_tabulator_name_filters(table, t);
 	try {
 		let name = next_lang_name();
 		let strings = tabulator_strings(t);
@@ -25151,6 +25183,7 @@ function create_tabulator(gobj) {
 	}
 	tabulator._ready = false;
 	tabulator.on("tableBuilt", function() {
+		yui_tabulator_name_filters(tabulator, i18next.t);
 		tabulator._ready = true;
 		update_rowcount();
 		yui_table_filter_clear(tabulator);

package/dist/gobj-ui.es.js

@@ -23393,8 +23393,40 @@ function tabulator_strings(t) {
 *  Silent no-op on a table that is gone: a language switch races nothing,
 *  but a view torn down mid-switch must not log a failure it cannot act on.
 ***************************************************************/
+/***************************************************************
+*  Name the HEADER FILTER inputs.
+*
+*  Tabulator draws one text box per filterable column and gives
+*  it nothing: no label, no `aria-label`, no placeholder. On
+*  screen its position says what it filters -- it sits under the
+*  column's title -- and to anything that is not an eye it is a
+*  row of anonymous text boxes.
+*
+*  The name is composed from the column's own title, so it needs
+*  ONE consumer key with an interpolation (`filter by column` ->
+*  "Filtrar por {{column}}") instead of one per column, and it
+*  follows a language change because this runs from
+*  `yui_tabulator_relocalize()` as well as at build.
+***************************************************************/
+function yui_tabulator_name_filters(table, t) {
+	if (!table || typeof table.getColumns !== "function") return;
+	try {
+		for (let col of table.getColumns()) {
+			let $el = typeof col.getElement === "function" ? col.getElement() : null;
+			if (!$el) continue;
+			let $input = $el.querySelector(".tabulator-header-filter input, .tabulator-header-filter select");
+			if (!$input) continue;
+			let title = typeof col.getDefinition === "function" ? String(col.getDefinition().title || "") : "";
+			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 }));
+		}
+	} catch (e) {}
+}
 function yui_tabulator_relocalize(table, t) {
 	if (!table) return;
+	yui_tabulator_name_filters(table, t);
 	try {
 		let name = next_lang_name();
 		let strings = tabulator_strings(t);
@@ -25146,6 +25178,7 @@ function create_tabulator(gobj) {
 	}
 	tabulator._ready = false;
 	tabulator.on("tableBuilt", function() {
+		yui_tabulator_name_filters(tabulator, t);
 		tabulator._ready = true;
 		update_rowcount();
 		yui_table_filter_clear(tabulator);

package/package.json

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

package/src/c_yui_treedb_topic_with_form.js

@@ -75,7 +75,8 @@ import {register_c_yui_form} from "./c_yui_form.js";
 import {register_c_yui_json} from "./c_yui_json.js";
 import {attach_clear} from "./yui_inputs.js";
 
-import {yui_tabulator_lang, yui_tabulator_relocalize} from "./yui_tabulator_i18n.js";
+import {yui_tabulator_lang, yui_tabulator_relocalize,
+        yui_tabulator_name_filters} from "./yui_tabulator_i18n.js";
 
 import {
     yui_selection_column,
@@ -1652,6 +1653,10 @@ function create_tabulator(gobj)
 
     tabulator._ready = false;
     tabulator.on("tableBuilt", function() {
+        /*  Tabulator gives its header-filter boxes no name of any kind:
+         *  on screen the column above says what each one filters, and to
+         *  a reader they are a row of anonymous text boxes.  */
+        yui_tabulator_name_filters(tabulator, t);
         tabulator._ready = true;
         update_rowcount();
         /*  La ✕ de cada filtro de cabecera. Un filtro se quita borrando lo

package/src/yui_tabulator_i18n.js

@@ -89,11 +89,67 @@ function tabulator_strings(t)
  *  Silent no-op on a table that is gone: a language switch races nothing,
  *  but a view torn down mid-switch must not log a failure it cannot act on.
  ***************************************************************/
+
+/***************************************************************
+ *  Name the HEADER FILTER inputs.
+ *
+ *  Tabulator draws one text box per filterable column and gives
+ *  it nothing: no label, no `aria-label`, no placeholder. On
+ *  screen its position says what it filters -- it sits under the
+ *  column's title -- and to anything that is not an eye it is a
+ *  row of anonymous text boxes.
+ *
+ *  The name is composed from the column's own title, so it needs
+ *  ONE consumer key with an interpolation (`filter by column` ->
+ *  "Filtrar por {{column}}") instead of one per column, and it
+ *  follows a language change because this runs from
+ *  `yui_tabulator_relocalize()` as well as at build.
+ ***************************************************************/
+function yui_tabulator_name_filters(table, t)
+{
+    if(!table || typeof table.getColumns !== "function") {
+        return;
+    }
+    try {
+        for(let col of table.getColumns()) {
+            let $el = typeof col.getElement === "function" ? col.getElement() : null;
+            if(!$el) {
+                continue;
+            }
+            let $input = $el.querySelector(".tabulator-header-filter input, " +
+                                           ".tabulator-header-filter select");
+            if(!$input) {
+                continue;
+            }
+            let title = (typeof col.getDefinition === "function")
+                ? String(col.getDefinition().title || "") : "";
+            let $title = $el.querySelector(".tabulator-col-title");
+            if(!title && $title) {
+                title = $title.textContent.trim();
+            }
+            if(!title) {
+                continue;   /*  a column with no title names nothing  */
+            }
+            /*  `filter by column` and NOT `filter column`: that key
+             *  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}));
+        }
+    } catch(e) {
+        /*  a table between renders has no columns to name  */
+    }
+}
+
 function yui_tabulator_relocalize(table, t)
 {
     if(!table) {
         return;
     }
+    /*  The header filters have no name of their own; give them one
+     *  again in the new language.  */
+    yui_tabulator_name_filters(table, t);
     try {
         let name = next_lang_name();
         let strings = tabulator_strings(t);
@@ -125,4 +181,5 @@ function yui_tabulator_relocalize(table, t)
 export {
     yui_tabulator_lang,
     yui_tabulator_relocalize,
+    yui_tabulator_name_filters,
 };