@yuneta/gobj-ui 7.26.39 → 7.26.41

package/README.md

@@ -3394,6 +3394,22 @@ the middle, and **a toolbar left with a single group is centred**. An unknown
 name is reported, not silently dropped: a typo would otherwise remove the save
 button with no trace of why.
 
+### Charts — the ink of the axes, on both schemes
+
+uPlot is built for a white page: its axis labels are black, its grid 7% black.
+`C_YUI_UPLOT` gives its axes the ink of the theme -- both of them: uPlot always
+draws an X and a Y axis, and until 7.26.40 the Y axis kept uPlot's black, which
+no one could read on the dark scheme. A uPlot built by the app itself takes the
+same axes from `yui_uplot_axes()`, and redraws on a change of the theme
+(`yui_watch_theme(gobj)` sends `EV_THEME`; its action calls `chart.redraw()`):
+
+```js
+import {yui_uplot_axes} from "@yuneta/gobj-ui/src/yui_uplot_ink.js";
+
+new uPlot({width: 600, height: 300, series: [{}, {label: "temperature"}],
+           axes: yui_uplot_axes([{}])}, data, $el);
+```
+
 ### `C_YUI_FORM` — what closing it asks about
 
 `changes` says the form is not what is stored: the reader changed it, or the
@@ -3406,6 +3422,15 @@ true. A record that lacks a defaulted field opens changed and closes without
 a question; until 7.26.39 it asked on every close, about nothing the reader
 would lose.
 
+What the reader does to a TABLE of the form -- edits a cell, adds a row,
+deletes one, in a nested table too -- is `edited` like anything typed, whatever
+the record the form opened with. Each table hears it from the moment it is
+built (a nested one is built by its row, whenever the row is drawn); the rows
+the form loads itself say nothing. In 7.26.39 and 7.26.40 a form that opened
+changed did not hear its tables at all, so closing it lost a table edit without
+a question. And the titles of those tables change language with the shell's
+`EV_LANGUAGE_CHANGED` (7.26.41+), like the rest of the form.
+
 ```js
 const kw = {abort_close: false};
 gobj_send_event(form, "EV_WINDOW_TO_CLOSE", kw, gobj);
@@ -3901,14 +3926,24 @@ loading/error notices) and it never went through i18n. Use:
 ```js
 new Tabulator($el, {...settings, ...yui_tabulator_lang(t)});   // at build
 yui_tabulator_relocalize(table, t);                            // on the event
+yui_tabulator_relocalize(table, t, {device_id: t("device id")});  // and the titles
 ```
 
 Every key falls back to the English string Tabulator used to render
 (`defaultValue`), so an app that defines none of them sees no change. Two traps
 the implementation already handles: `setLocale()` with the locale name already
 in force is a **no-op** (hence a fresh name per switch), and re-applying a locale
-makes Tabulator re-run a title formatter on the EXISTING header cell, which
-**appends** to it — rebuild the columns from their definitions.
+makes Tabulator run every title formatter again on the EXISTING header cell, and
+**append** what one returns when it is a Node. `text_title_formatter` empties
+the cell first (7.26.41; until then each change of language added one more copy
+of every title, *"Id dispositivoId dispositivo"*); a title formatter of your own
+that returns a Node must do the same (`cell.getElement().textContent = ""`).
+
+The column TITLES change language through the locale too: hand them, already
+translated, by field (the third argument). Tabulator binds each title to its
+locale, so they are drawn again and no column is rebuilt -- `updateDefinition()`
+re-renders every row, and a row formatter that builds something in its row (a
+nested table) builds it again, empty.
 
 **A missing key is invisible:** i18next answers an unknown key **with the key
 itself**, so it renders (lower-case English) and simply never changes language.

package/dist/gobj-ui.cjs.js

@@ -505,8 +505,16 @@ function text_node(value) {
 *  Tabulator puts a STRING title in with innerHTML, so a title taken
 *  from a schema (`header`, which the schema editor writes) is markup
 *  unless the column carries a formatter that returns a Node.
+*
+*  And it APPENDS that Node to the title's holder, which it never
+*  empties -- while it runs the formatter again on every setLocale()
+*  (yui_tabulator_relocalize()). Until 7.26.40 each change of language
+*  added one more copy of every title ("Id dispositivoId dispositivo").
+*  The holder (the mock cell's element) is emptied first.
 ************************************************************/
 function text_title_formatter(cell) {
+	const $holder = typeof cell.getElement === "function" ? cell.getElement() : null;
+	if ($holder) $holder.textContent = "";
 	return text_node(cell.getValue());
 }
 /************************************************************
@@ -7106,6 +7114,12 @@ function register_c_yui_wizard() {
 *          new Tabulator($el, {..., ...yui_tabulator_lang(t)});
 *          yui_tabulator_relocalize(table, t);   // on a language change
 *
+*      A view whose COLUMN TITLES change language hands them too, in the
+*      new language, by field -- Tabulator binds each column's title to its
+*      locale, so they change with it and no column is rebuilt:
+*
+*          yui_tabulator_relocalize(table, t, {device_id: t("device id")});
+*
 *      Every key carries an English `defaultValue`, so an app that does not
 *      define it renders exactly what Tabulator rendered before — the
 *      keys are an OPPORTUNITY to translate, never a requirement.
@@ -7264,11 +7278,23 @@ function yui_tabulator_name_editor(column_def, name_of) {
 		return Object.assign({}, params, { elementAttributes: attrs });
 	};
 }
-function yui_tabulator_relocalize(table, t) {
+/***************************************************************
+*  yui_tabulator_relocalize() -- see "Put an EXISTING table in the
+*  current language" above.
+*
+*  `titles`, optional: {field: title}, the titles of the columns in
+*  the new language, already translated. They go in the locale
+*  (`columns`), where Tabulator binds each column's title: setLocale()
+*  draws them again without rebuilding a column -- updateDefinition()
+*  re-renders every row, and a row whose formatter builds something (a
+*  nested table) builds it anew. A field left out keeps its title.
+***************************************************************/
+function yui_tabulator_relocalize(table, t, titles) {
 	if (!table) return;
 	try {
 		let name = next_lang_name();
 		let strings = tabulator_strings(t);
+		if (titles && typeof titles === "object") strings.columns = Object.assign({}, titles);
 		table.options.langs = table.options.langs || {};
 		table.options.langs[name] = strings;
 		let localize = table.modules && table.modules.localize;
@@ -9487,7 +9513,7 @@ var attrs_table$17 = [
 	(0, _yuneta_gobj_js.SDATA_END)()
 ];
 var PRIVATE_DATA$17 = {
-	rearm_timer: null,
+	loading_rows: 0,
 	tables: null,
 	table_seq: 0,
 	json_names_posted: false,
@@ -9543,18 +9569,12 @@ function mt_stop$17(gobj) {
 *      Local Methods
 ***************************/
 /************************************************************
-*
-************************************************************/
-function isEventSet(table, event) {
-	let eventListeners = table.externalEvents.events;
-	return eventListeners && eventListeners[event] && eventListeners[event].length > 0;
-}
-/************************************************************
-*
+*  `changes` and the save/undo buttons. What the tables say is
+*  not switched here: they always say it (create_tabulator).
 ************************************************************/
 function set_changed_stated(gobj, changed) {
 	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
-	let $form = $container.querySelector("form");
+	$container.querySelector("form");
 	const enable = ($btn, on, color) => {
 		if (!$btn) return;
 		if (on) $btn.removeAttribute("disabled");
@@ -9569,35 +9589,11 @@ function set_changed_stated(gobj, changed) {
 		(0, _yuneta_gobj_js.gobj_write_bool_attr)(gobj, "changes", true);
 		enable($button_save, true, "MediumSeaGreen");
 		enable($button_undo, true, "Magenta");
-		$form.querySelectorAll(".yui-tabulator-table").forEach(($table) => {
-			if ($table.tabulator && isEventSet($table.tabulator, "dataChanged")) $table.tabulator.off("dataChanged");
-			$table.querySelectorAll(".yui-tabulator-table-nested").forEach(($table_nested) => {
-				if ($table_nested.tabulator && isEventSet($table_nested.tabulator, "dataChanged")) $table_nested.tabulator.off("dataChanged");
-			});
-		});
 	} else {
 		(0, _yuneta_gobj_js.gobj_write_bool_attr)(gobj, "changes", false);
 		(0, _yuneta_gobj_js.gobj_write_bool_attr)(gobj, "edited", false);
 		enable($button_save, false, OFF_COLOR);
 		enable($button_undo, false, OFF_COLOR);
-		if (gobj.priv.rearm_timer) clearTimeout(gobj.priv.rearm_timer);
-		gobj.priv.rearm_timer = setTimeout(function() {
-			gobj.priv.rearm_timer = null;
-			if ((0, _yuneta_gobj_js.gobj_is_destroying)(gobj)) return;
-			const rearm = (tabulator) => {
-				if (!tabulator) return;
-				if (isEventSet(tabulator, "dataChanged")) tabulator.off("dataChanged");
-				tabulator.on("dataChanged", function(data) {
-					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_RECORD_CHANGED", {}, gobj);
-				});
-			};
-			$form.querySelectorAll(".yui-tabulator-table").forEach(($table) => {
-				rearm($table.tabulator);
-				$table.querySelectorAll(".yui-tabulator-table-nested").forEach(($table_nested) => {
-					rearm($table_nested.tabulator);
-				});
-			});
-		}, 200);
 	}
 }
 /************************************************************
@@ -9834,10 +9830,6 @@ function build_ui$15(gobj) {
 *   Destroy UI
 ************************************************************/
 function destroy_ui$10(gobj) {
-	if (gobj.priv && gobj.priv.rearm_timer) {
-		clearTimeout(gobj.priv.rearm_timer);
-		gobj.priv.rearm_timer = null;
-	}
 	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
 	if ($container) {
 		destroy_widgets(gobj, $container);
@@ -11231,6 +11223,10 @@ function create_tabulator$1(gobj, $extend, name, template) {
 		hozAlign: "center"
 	};
 	let tabulator = new tabulator_tables.TabulatorFull($extend, tabulator_settings);
+	tabulator.on("dataChanged", function() {
+		if (gobj.priv.loading_rows > 0) return;
+		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_RECORD_CHANGED", {}, gobj);
+	});
 	tabulator.on("renderComplete", function() {
 		yui_tabulator_name_row_selects(tabulator, i18next.t);
 	});
@@ -11248,6 +11244,24 @@ function create_tabulator$1(gobj, $extend, name, template) {
 	return tabulator;
 }
 /******************************************************************
+*  The title of a table's column: the schema's header, or the
+*  field's name, translated.
+******************************************************************/
+function column_title(field_desc) {
+	return (0, i18next.t)(field_desc.header || field_desc.name);
+}
+/******************************************************************
+*  {field: title} of a table's template, in the current language.
+******************************************************************/
+function table_column_titles(template) {
+	let titles = {};
+	Object.entries(template || {}).forEach(([key, value]) => {
+		const field_desc = (0, _yuneta_gobj_js.template_get_field_desc)(key, value);
+		titles[field_desc.name] = column_title(field_desc);
+	});
+	return titles;
+}
+/******************************************************************
 *  Convert a template's items in tabulator columns
 ******************************************************************/
 function template2columns(gobj, columns, template, sub_elements) {
@@ -11260,7 +11274,7 @@ function template2columns(gobj, columns, template, sub_elements) {
 		let validator = [];
 		let column = {
 			field: field_desc.name,
-			title: (0, i18next.t)(field_desc.header || field_desc.name),
+			title: column_title(field_desc),
 			titleFormatter: text_title_formatter,
 			editable: get_editable_state,
 			editor: false,
@@ -12115,7 +12129,14 @@ function ac_add_table_row(gobj, event, kw, src) {
 	}
 	let record = kw.record;
 	let loading = kw.loading;
-	tabulator.addRow(record).then(function(row) {
+	let added;
+	if (loading) gobj.priv.loading_rows++;
+	try {
+		added = tabulator.addRow(record);
+	} finally {
+		if (loading) gobj.priv.loading_rows--;
+	}
+	added.then(function(row) {
 		if (loading) {
 			let template = $table.template;
 			Object.entries(template).forEach(([key, template_value]) => {
@@ -12222,6 +12243,10 @@ function ac_language_changed$10(gobj, event, kw, src) {
 		let editor = $editor.jsoneditor;
 		if (editor && typeof editor.updateProps === "function") editor.updateProps({ onRenderMenu: json_editor_render_menu(gobj) });
 	}
+	for (let $table of $container.querySelectorAll(".yui-tabulator-table, .yui-tabulator-table-nested")) {
+		let tabulator = $table.tabulator;
+		if (tabulator && tabulator.initialized && $table.template) yui_tabulator_relocalize(tabulator, i18next.t, table_column_titles($table.template));
+	}
 	return 0;
 }
 /***************************
@@ -13396,41 +13421,58 @@ function register_c_yui_map() {
 	return create_gclass$16(GCLASS_NAME$16);
 }
 //#endregion
-//#region src/c_yui_uplot.js
+//#region src/yui_uplot_ink.js
 /***********************************************************************
-*          c_yui_uplot.js
+*          yui_uplot_ink.js
 *
-*          Graphics, Charts with uPlot
+*      The ink of a uPlot chart, on both schemes, and its palette.
 *
-*          Copyright (c) 2025-2026, ArtGins.
+*      uPlot is built for a white page: its axis labels are `#000`
+*      and its grid `rgba(0,0,0,0.07)`, which on the dark scheme are
+*      1.16:1 and 1.04 -- an axis nobody can read and a grid that is
+*      not there. The inks here are handed to uPlot as FUNCTIONS: it
+*      calls them when it draws, so the value can never be stale --
+*      what goes stale is the canvas, and a change of the theme has to
+*      ask for a redraw (yui_watch_theme() turns it into an event).
+*
+*      uPlot ALWAYS draws a Y axis: its setDefaults() makes axes[1]
+*      whether it was given or not, with its own black. So the axes are
+*      padded to two before they are inked. C_YUI_UPLOT's default is
+*      `[{}]`, the X axis alone, and until 7.26.40 every chart of the
+*      library had a Y axis whose values could not be read in the dark.
+*
+*      C_YUI_UPLOT uses it, and so can an app that builds a uPlot of its
+*      own:
+*
+*          import {yui_uplot_axes} from "@yuneta/gobj-ui/src/yui_uplot_ink.js";
+*
+*          const chart = new uPlot({
+*              width: 600, height: 300,
+*              series: [{}, {label: "temperature"}],
+*              axes: yui_uplot_axes([{}]),     // X and Y, with the ink of the theme
+*          }, data, $el);
+*
+*      The palette is six colours that clear 3:1 on BOTH grounds
+*      (worst 3.39 on white, 3.71 on near-black), ordered so the first
+*      two are the pair that survives colour blindness -- blue and
+*      orange, never red and green as the opening pair.
+*
+*          Copyright (c) 2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/
-/***************************************************************
-*  The ink of a chart, and its palette.
-*
-*  uPlot is built for a white page: its axis labels are `#000`
-*  and its grid `rgba(0,0,0,0.07)`, which on the dark scheme are
-*  1.16:1 and 1.04 -- an axis nobody can read and a grid that is
-*  not there. And the series were CSS colour names: `blue` is
-*  2.11:1 on the dark ground, `orange` 1.97 on the light one, so
-*  whichever scheme you were in, one of the lines was a rumour.
-*
-*  These are given to uPlot as FUNCTIONS: it calls them when it
-*  draws, so the value can never be stale -- what goes stale is
-*  the canvas, and that is what EV_THEME redraws.
-*
-*  The palette is six colours that clear 3:1 on BOTH grounds
-*  (worst 3.39 on white, 3.71 on near-black), ordered so the
-*  first two are the pair that survives colour blindness -- blue
-*  and orange, never red and green as the opening pair.
-***************************************************************/
-function axis_ink() {
+/************************************************************
+*  The ink of the labels of an axis.
+************************************************************/
+function yui_uplot_axis_ink() {
 	return yui_is_dark() ? "#c7cdd8" : "#2e333d";
 }
-function grid_ink() {
+/************************************************************
+*  The ink of the grid and of the ticks.
+************************************************************/
+function yui_uplot_grid_ink() {
 	return yui_is_dark() ? "rgba(199,205,216,0.16)" : "rgba(46,51,61,0.12)";
 }
-var CHART_PALETTE = [
+var YUI_UPLOT_PALETTE = [
 	{
 		stroke: "#2f6fd0",
 		fill: "rgba(47,111,208,0.10)"
@@ -13456,15 +13498,33 @@ var CHART_PALETTE = [
 		fill: "rgba(209,52,75,0.10)"
 	}
 ];
-function themed_axes(axes) {
-	return (Array.isArray(axes) ? axes : [axes || {}]).map((ax) => {
+/************************************************************
+*  The axes the host asked for -- at least the X and the Y,
+*  the two uPlot always draws -- with the ink it did not ask
+*  about. A stroke, a grid or a ticks the host gave is kept.
+*  Answers new objects: the host's are not touched.
+************************************************************/
+function yui_uplot_axes(axes) {
+	let list = Array.isArray(axes) ? axes.slice() : [axes || {}];
+	while (list.length < 2) list.push({});
+	return list.map((ax) => {
 		let a = Object.assign({}, ax || {});
-		if (a.stroke === void 0) a.stroke = axis_ink;
-		a.grid = Object.assign({ stroke: grid_ink }, a.grid || {});
-		a.ticks = Object.assign({ stroke: grid_ink }, a.ticks || {});
+		if (a.stroke === void 0) a.stroke = yui_uplot_axis_ink;
+		a.grid = Object.assign({ stroke: yui_uplot_grid_ink }, a.grid || {});
+		a.ticks = Object.assign({ stroke: yui_uplot_grid_ink }, a.ticks || {});
 		return a;
 	});
 }
+//#endregion
+//#region src/c_yui_uplot.js
+/***********************************************************************
+*          c_yui_uplot.js
+*
+*          Graphics, Charts with uPlot
+*
+*          Copyright (c) 2025-2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
 /***************************************************************
 *              Constants
 ***************************************************************/
@@ -13482,7 +13542,7 @@ var attrs_table$15 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "axes", 0, [{}], "Chart axes"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "scales", 0, {}, "Chart scales"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "data", 0, [[]], "Chart data"),
-	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "colors", 0, CHART_PALETTE, "Series colours, in order. The default palette clears 3:1 on both schemes and opens with the colour-blind-safe pair (blue, orange)"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "colors", 0, YUI_UPLOT_PALETTE, "Series colours, in order. The default palette clears 3:1 on both schemes and opens with the colour-blind-safe pair (blue, orange)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "$container", 0, null, "HTML container for the chart"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "own_container", 0, false, "If true, container is gobj-managed"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "uplot", 0, null, "uPlot instance"),
@@ -13549,7 +13609,7 @@ function build_ui$14(gobj) {
 		width: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "width"),
 		height: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "height"),
 		series: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "series"),
-		axes: themed_axes((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "axes")),
+		axes: yui_uplot_axes((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "axes")),
 		scales: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "scales")
 	};
 	let uplot$2 = new uplot.default(uPlot_options, (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "data"), $container);
@@ -13650,7 +13710,7 @@ function ac_add_serie(gobj, event, kw, src) {
 		}
 	}
 	let colors = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "colors");
-	if (!Array.isArray(colors) || !colors.length) colors = CHART_PALETTE;
+	if (!Array.isArray(colors) || !colors.length) colors = YUI_UPLOT_PALETTE;
 	let color = colors[Math.max(0, idx - 1) % colors.length];
 	if (kw.stroke === void 0) kw.stroke = color.stroke;
 	if (kw.fill === void 0) kw.fill = color.fill;