@yuneta/gobj-ui 7.12.0 → 7.13.0

package/README.md

@@ -1031,6 +1031,15 @@ from the view's `EV_LANGUAGE_CHANGED` action.
 table that is not built yet or is already gone. Clear the selection after
 acting on it: the rows it names are no longer there.
 
+**In the treedb topic table** (`C_YUI_TREEDB_TOPIC_WITH_FORM`, and through it
+`C_YUI_TREEDB_TOPICS`) the bar is **opt-in**: pass `with_selection_bar: true`.
+It is off by default because the bar takes its words from the HOST's i18n, and
+a host that has not defined `"{{n}} selected"` and `"clear selection"` renders
+the keys. It shows only while the table is in **edition mode** — outside it the
+checkbox column is hidden, and a count of rows nobody can see or untick is a
+count you cannot act on. The bar carries no action there: the table's own
+toolbar already has Delete and Copy, and they act on the selection.
+
 `yui_selection_column({visible: false})` is for a table that reveals the column
 only in an edit mode — `C_YUI_TREEDB_TOPIC_WITH_FORM` shows it with
 `showColumn("_check_box_state_")`, and takes its `selectableRows` and every

package/dist/gobj-ui.cjs.js

@@ -14496,6 +14496,7 @@ var attrs_table$6 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "treedb_name", 0, null, "Remote TreeDB service name"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "descs", 0, null, "Description of topics"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_remote_paging", 0, false, "Each topic table pulls its rows a PAGE at a time (`nodes` from/limit) instead of loading the topic whole. Safe against a backend that cannot page: it answers the whole list, which the table reads as one page"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_selection_bar", 0, false, "Each topic table shows the shared selection bar (\"N selected\" + a way out) above it while in edition mode. OFF by default: the bar takes its words from the HOST's i18n, so a host that turns it on must define \"{{n}} selected\" and \"clear selection\""),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "system", 0, false, "Manage system topics (true) or user topics (false)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "tabs_style", 0, "is-toggle is-fullwidth", "Bulma tab styling"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_cards_landing", 0, false, "Land on a grid of topic cards (list->detail): a card opens its table, with the tabs bar + a back-to-grid button. Off = tabs only (legacy)."),
@@ -15310,7 +15311,8 @@ function process_treedb_descs$1(gobj) {
 			treedb_name,
 			topic_name: key,
 			desc,
-			with_remote_paging: (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_remote_paging")
+			with_remote_paging: (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_remote_paging"),
+			with_selection_bar: (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_selection_bar")
 		};
 		let id = `${(0, _yuneta_gobj_js.gobj_name)(gobj)}?${desc.topic_name}`;
 		let gobj_topic_form = (0, _yuneta_gobj_js.gobj_create_service)(id, "C_YUI_TREEDB_TOPIC_WITH_FORM", kw_topic_form, gobj);
@@ -16403,6 +16405,119 @@ function yui_selected_rows(tabulator) {
 		return [];
 	}
 }
+/***************************************************************
+*      Drop the selection (after acting on it, or after a
+*      reload that leaves the ticked rows behind).
+***************************************************************/
+function yui_clear_selection(tabulator) {
+	if (!tabulator || typeof tabulator.deselectRow !== "function") return;
+	try {
+		tabulator.deselectRow();
+	} catch (e) {}
+}
+/***************************************************************
+*      The bar that appears while rows are selected.
+*
+*      t           the HOST's translator
+*      opts:
+*          actions   [{label, icon, class, on_click}] -- `label` is an
+*                    i18n KEY, `class` extra Bulma classes for the
+*                    button (e.g. "is-danger"), `on_click` the DOM
+*                    handler, whose job is to send an event
+*          on_clear  called by the "clear selection" button
+*          name      logical-class prefix, default "TABLE"
+*
+*      -> {$el, set_count(n), refresh()}
+*
+*      `refresh()` redraws it in the current language: the count is
+*      composed at render time, so it cannot re-translate itself
+*      through `refresh_language()`. Call it on EV_LANGUAGE_CHANGED.
+***************************************************************/
+function yui_selection_bar(t, opts) {
+	let o = opts || {};
+	let actions = Array.isArray(o.actions) ? o.actions : [];
+	let name = o.name || "TABLE";
+	let count = 0;
+	let $count = (0, _yuneta_gobj_js.createElement2)([
+		"span",
+		{ class: `${name}_SELECTION_COUNT has-text-weight-semibold` },
+		""
+	]);
+	let $buttons = [];
+	for (let action of actions) {
+		let $b = (0, _yuneta_gobj_js.createElement2)([
+			"button",
+			{
+				class: `${name}_SELECTION_ACTION button ${action.class || ""}`,
+				type: "button"
+			},
+			[[
+				"span",
+				{ class: "icon" },
+				[["i", { class: action.icon || "yi-check" }]]
+			], [
+				"span",
+				{},
+				""
+			]],
+			{ click: action.on_click }
+		]);
+		$b._yui_label = action.label || "";
+		$buttons.push($b);
+	}
+	let $clear = (0, _yuneta_gobj_js.createElement2)([
+		"button",
+		{
+			class: `${name}_SELECTION_CLEAR button is-ghost`,
+			type: "button"
+		},
+		[[
+			"span",
+			{ class: "icon" },
+			[["i", { class: "yi-xmark" }]]
+		], [
+			"span",
+			{},
+			""
+		]],
+		{ click: function(e) {
+			if (typeof o.on_clear === "function") o.on_clear(e);
+		} }
+	]);
+	$clear._yui_label = "clear selection";
+	let $el = (0, _yuneta_gobj_js.createElement2)([
+		"div",
+		{
+			class: `${name}_SELECTION_BAR is-align-items-center is-flex-wrap-wrap mb-2 is-hidden`,
+			style: "display:flex; gap:0.5rem;"
+		},
+		[$count].concat($buttons, [$clear])
+	]);
+	function label_of($b) {
+		return $b.querySelector("span.icon ~ span");
+	}
+	function refresh() {
+		$count.textContent = t("{{n}} selected", { n: count });
+		for (let $b of $buttons.concat([$clear])) {
+			let $label = label_of($b);
+			let key = $b._yui_label;
+			if ($label && key) $label.textContent = t(key);
+			$b.title = key ? t(key) : "";
+			$b.setAttribute("aria-label", $b.title);
+		}
+		$el.classList.toggle("is-hidden", count <= 0);
+	}
+	function set_count(n) {
+		count = n > 0 ? n : 0;
+		refresh();
+	}
+	refresh();
+	return {
+		$el,
+		set_count,
+		refresh
+	};
+}
 //#endregion
 //#region src/treedb_write_plan.js
 /***********************************************************************
@@ -16571,6 +16686,7 @@ var attrs_table$5 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "editable", 0, false, "Edit state"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_checkbox", 0, true, "Auxiliary first column to select rows"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_radio", 0, false, "Auxiliary first column to select one row"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_selection_bar", 0, false, "Show the shared selection bar (\"N selected\" + a way out) above the table while in edition mode. OFF by default: the bar takes its words from the HOST's i18n, and a host that has not defined \"{{n}} selected\" and \"clear selection\" would render the keys"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "broadcast_select_rows_event", 0, false, "Broadcast select rows event"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "broadcast_unselect_rows_event", 0, false, "Broadcast unselect rows event"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "tabulator_settings", 0, {
@@ -16589,6 +16705,7 @@ var attrs_table$5 = [
 	}, "Default settings for Tabulator"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "$container", 0, null, "HTML container for UI"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "tabulator", 0, null, "Tabulator instance"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "selection_bar", 0, null, "The selection bar (yui_table_select.js), when with_selection_bar"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "table_id", 0, null, "Table div ID"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "toolbar_id", 0, null, "Toolbar ID"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "popup_id", 0, null, "Edit form popup ID"),
@@ -17005,6 +17122,15 @@ function build_ui$5(gobj) {
 			style: "margin-top:0px !important;"
 		}]]
 	]);
+	if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_checkbox") && (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_selection_bar")) {
+		let bar = yui_selection_bar(i18next.t, {
+			name: "TREEDB_TABLE",
+			actions: [],
+			on_clear: () => (0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_CLEAR_SELECTION", {}, gobj)
+		});
+		(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "selection_bar", bar);
+		$container.insertBefore(bar.$el, $container.querySelector(`#${table_id}`));
+	}
 	let $toolbar_slot = $container.querySelector(".toolbar_tabulator_table");
 	if ($table_toolbar instanceof Element) $toolbar_slot.appendChild($table_toolbar);
 	else $toolbar_slot.appendChild((0, _yuneta_gobj_js.createElement2)(["div", {}]));
@@ -17013,6 +17139,24 @@ function build_ui$5(gobj) {
 	(0, _yuneta_gobj_js.refresh_language)($container, i18next.t);
 }
 /************************************************************
+*   How many rows are ticked, on the bar.
+*
+*   Only while the table is EDITABLE: outside edition its checkbox
+*   column is hidden (`hideColumn`), and a count of rows nobody can
+*   see or untick is a count you cannot act on. The selection itself
+*   is left alone -- coming back to edition finds it, and the bar
+*   recounts from the table.
+************************************************************/
+function render_selection_bar(gobj) {
+	let bar = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "selection_bar");
+	if (!bar) return;
+	if (!(0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "editable")) {
+		bar.set_count(0);
+		return;
+	}
+	bar.set_count(yui_selected_rows((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "tabulator")).length);
+}
+/************************************************************
 *   Destroy UI
 ************************************************************/
 function destroy_ui$2(gobj) {
@@ -18202,6 +18346,8 @@ function refuse_if_readonly$2(gobj, event) {
 *  dict. Re-apply it in the new language.
 ***************************************************************/
 function ac_language_changed$2(gobj, event, kw, src) {
+	let bar = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "selection_bar");
+	if (bar) bar.refresh();
 	let tabulator = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "tabulator");
 	if (!tabulator) return 0;
 	yui_tabulator_relocalize(tabulator, i18next.t);
@@ -18315,6 +18461,7 @@ function ac_edition_mode(gobj, event, kw, src) {
 		$button_copy_record.setAttribute("disabled", true);
 		$button_paste_record.setAttribute("disabled", true);
 	}
+	render_selection_bar(gobj);
 	return 0;
 }
 /************************************************************
@@ -18460,6 +18607,7 @@ function ac_select_rows(gobj, event, kw, src) {
 			$button_copy_record.setAttribute("disabled", true);
 		}
 	}
+	render_selection_bar(gobj);
 	if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "broadcast_select_rows_event")) (0, _yuneta_gobj_js.gobj_publish_event)(gobj, event, kw);
 	return 0;
 }
@@ -18480,10 +18628,19 @@ function ac_unselect_rows(gobj, event, kw, src) {
 			$button_copy_record.setAttribute("disabled", true);
 		}
 	}
+	render_selection_bar(gobj);
 	if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "broadcast_select_rows_event")) (0, _yuneta_gobj_js.gobj_publish_event)(gobj, event, kw);
 	return 0;
 }
 /************************************************************
+*  The way out of a selection (the bar's clear button).
+************************************************************/
+function ac_clear_selection(gobj, event, kw, src) {
+	yui_clear_selection((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "tabulator"));
+	render_selection_bar(gobj);
+	return 0;
+}
+/************************************************************
 *  { locale: "es" }
 ************************************************************/
 function ac_change_locale(gobj, event, kw, src) {
@@ -18960,6 +19117,11 @@ function create_gclass$5(gclass_name) {
 			ac_select_rows,
 			null
 		],
+		[
+			"EV_CLEAR_SELECTION",
+			ac_clear_selection,
+			null
+		],
 		[
 			"EV_UNSELECT_ROWS",
 			ac_unselect_rows,
@@ -19068,6 +19230,7 @@ function create_gclass$5(gclass_name) {
 		["EV_DELETE_ROWS", 0],
 		["EV_COPY_ROWS", 0],
 		["EV_PASTE_ROWS", 0],
+		["EV_CLEAR_SELECTION", 0],
 		["EV_SELECT_ROWS", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_UNSELECT_ROWS", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_SHOW_HOOK_DATA", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],

package/dist/gobj-ui.es.js

@@ -14491,6 +14491,7 @@ var attrs_table$6 = [
 	SDATA(data_type_t.DTP_STRING, "treedb_name", 0, null, "Remote TreeDB service name"),
 	SDATA(data_type_t.DTP_JSON, "descs", 0, null, "Description of topics"),
 	SDATA(data_type_t.DTP_BOOLEAN, "with_remote_paging", 0, false, "Each topic table pulls its rows a PAGE at a time (`nodes` from/limit) instead of loading the topic whole. Safe against a backend that cannot page: it answers the whole list, which the table reads as one page"),
+	SDATA(data_type_t.DTP_BOOLEAN, "with_selection_bar", 0, false, "Each topic table shows the shared selection bar (\"N selected\" + a way out) above it while in edition mode. OFF by default: the bar takes its words from the HOST's i18n, so a host that turns it on must define \"{{n}} selected\" and \"clear selection\""),
 	SDATA(data_type_t.DTP_BOOLEAN, "system", 0, false, "Manage system topics (true) or user topics (false)"),
 	SDATA(data_type_t.DTP_STRING, "tabs_style", 0, "is-toggle is-fullwidth", "Bulma tab styling"),
 	SDATA(data_type_t.DTP_BOOLEAN, "with_cards_landing", 0, false, "Land on a grid of topic cards (list->detail): a card opens its table, with the tabs bar + a back-to-grid button. Off = tabs only (legacy)."),
@@ -15305,7 +15306,8 @@ function process_treedb_descs$1(gobj) {
 			treedb_name,
 			topic_name: key,
 			desc,
-			with_remote_paging: gobj_read_bool_attr(gobj, "with_remote_paging")
+			with_remote_paging: gobj_read_bool_attr(gobj, "with_remote_paging"),
+			with_selection_bar: gobj_read_bool_attr(gobj, "with_selection_bar")
 		};
 		let id = `${gobj_name(gobj)}?${desc.topic_name}`;
 		let gobj_topic_form = gobj_create_service(id, "C_YUI_TREEDB_TOPIC_WITH_FORM", kw_topic_form, gobj);
@@ -16313,6 +16315,40 @@ function yui_tabulator_relocalize(table, t) {
 }
 //#endregion
 //#region src/yui_table_select.js
+/***********************************************************************
+*          yui_table_select.js
+*
+*          SELECT ROWS IN A TABLE, and act on the lot.
+*
+*          Deleting twenty rows one confirmation at a time is not a
+*          workflow, it is a punishment, and every table that lets you
+*          remove a row will eventually be asked to remove twenty. This
+*          is that facility, once: the checkbox column, the settings
+*          that make selection behave, and the bar that appears while
+*          something is selected and carries what can be done to it.
+*
+*          Two decisions are baked in, both learned in the treedb
+*          topic table:
+*
+*          - Selection is driven ONLY by the checkbox, never by
+*            clicking the row (`selectableRows: "highlight"`). A table
+*            row is full of things to click -- an editor, an icon, a
+*            nested table -- and click-to-select ticks a row every time
+*            you reach for one of them.
+*
+*          - The header checkbox covers the ACTIVE rows, the ones the
+*            filters leave on screen. "Select all" over rows nobody can
+*            see is how a filtered delete takes the whole topic with
+*            it.
+*
+*          The bar takes its words from the HOST's `t`: this library
+*          translates through the app's i18next, and the app owns the
+*          keys. It needs "{{n}} selected" and "clear selection"; each
+*          action brings its own key.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
 /***************************************************************
 *      The checkbox column. Put it FIRST in the column list.
 *
@@ -16364,6 +16400,119 @@ function yui_selected_rows(tabulator) {
 		return [];
 	}
 }
+/***************************************************************
+*      Drop the selection (after acting on it, or after a
+*      reload that leaves the ticked rows behind).
+***************************************************************/
+function yui_clear_selection(tabulator) {
+	if (!tabulator || typeof tabulator.deselectRow !== "function") return;
+	try {
+		tabulator.deselectRow();
+	} catch (e) {}
+}
+/***************************************************************
+*      The bar that appears while rows are selected.
+*
+*      t           the HOST's translator
+*      opts:
+*          actions   [{label, icon, class, on_click}] -- `label` is an
+*                    i18n KEY, `class` extra Bulma classes for the
+*                    button (e.g. "is-danger"), `on_click` the DOM
+*                    handler, whose job is to send an event
+*          on_clear  called by the "clear selection" button
+*          name      logical-class prefix, default "TABLE"
+*
+*      -> {$el, set_count(n), refresh()}
+*
+*      `refresh()` redraws it in the current language: the count is
+*      composed at render time, so it cannot re-translate itself
+*      through `refresh_language()`. Call it on EV_LANGUAGE_CHANGED.
+***************************************************************/
+function yui_selection_bar(t, opts) {
+	let o = opts || {};
+	let actions = Array.isArray(o.actions) ? o.actions : [];
+	let name = o.name || "TABLE";
+	let count = 0;
+	let $count = createElement2([
+		"span",
+		{ class: `${name}_SELECTION_COUNT has-text-weight-semibold` },
+		""
+	]);
+	let $buttons = [];
+	for (let action of actions) {
+		let $b = createElement2([
+			"button",
+			{
+				class: `${name}_SELECTION_ACTION button ${action.class || ""}`,
+				type: "button"
+			},
+			[[
+				"span",
+				{ class: "icon" },
+				[["i", { class: action.icon || "yi-check" }]]
+			], [
+				"span",
+				{},
+				""
+			]],
+			{ click: action.on_click }
+		]);
+		$b._yui_label = action.label || "";
+		$buttons.push($b);
+	}
+	let $clear = createElement2([
+		"button",
+		{
+			class: `${name}_SELECTION_CLEAR button is-ghost`,
+			type: "button"
+		},
+		[[
+			"span",
+			{ class: "icon" },
+			[["i", { class: "yi-xmark" }]]
+		], [
+			"span",
+			{},
+			""
+		]],
+		{ click: function(e) {
+			if (typeof o.on_clear === "function") o.on_clear(e);
+		} }
+	]);
+	$clear._yui_label = "clear selection";
+	let $el = createElement2([
+		"div",
+		{
+			class: `${name}_SELECTION_BAR is-align-items-center is-flex-wrap-wrap mb-2 is-hidden`,
+			style: "display:flex; gap:0.5rem;"
+		},
+		[$count].concat($buttons, [$clear])
+	]);
+	function label_of($b) {
+		return $b.querySelector("span.icon ~ span");
+	}
+	function refresh() {
+		$count.textContent = t("{{n}} selected", { n: count });
+		for (let $b of $buttons.concat([$clear])) {
+			let $label = label_of($b);
+			let key = $b._yui_label;
+			if ($label && key) $label.textContent = t(key);
+			$b.title = key ? t(key) : "";
+			$b.setAttribute("aria-label", $b.title);
+		}
+		$el.classList.toggle("is-hidden", count <= 0);
+	}
+	function set_count(n) {
+		count = n > 0 ? n : 0;
+		refresh();
+	}
+	refresh();
+	return {
+		$el,
+		set_count,
+		refresh
+	};
+}
 //#endregion
 //#region src/treedb_write_plan.js
 /***********************************************************************
@@ -16532,6 +16681,7 @@ var attrs_table$5 = [
 	SDATA(data_type_t.DTP_BOOLEAN, "editable", 0, false, "Edit state"),
 	SDATA(data_type_t.DTP_BOOLEAN, "with_checkbox", 0, true, "Auxiliary first column to select rows"),
 	SDATA(data_type_t.DTP_BOOLEAN, "with_radio", 0, false, "Auxiliary first column to select one row"),
+	SDATA(data_type_t.DTP_BOOLEAN, "with_selection_bar", 0, false, "Show the shared selection bar (\"N selected\" + a way out) above the table while in edition mode. OFF by default: the bar takes its words from the HOST's i18n, and a host that has not defined \"{{n}} selected\" and \"clear selection\" would render the keys"),
 	SDATA(data_type_t.DTP_BOOLEAN, "broadcast_select_rows_event", 0, false, "Broadcast select rows event"),
 	SDATA(data_type_t.DTP_BOOLEAN, "broadcast_unselect_rows_event", 0, false, "Broadcast unselect rows event"),
 	SDATA(data_type_t.DTP_JSON, "tabulator_settings", 0, {
@@ -16550,6 +16700,7 @@ var attrs_table$5 = [
 	}, "Default settings for Tabulator"),
 	SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "HTML container for UI"),
 	SDATA(data_type_t.DTP_POINTER, "tabulator", 0, null, "Tabulator instance"),
+	SDATA(data_type_t.DTP_POINTER, "selection_bar", 0, null, "The selection bar (yui_table_select.js), when with_selection_bar"),
 	SDATA(data_type_t.DTP_STRING, "table_id", 0, null, "Table div ID"),
 	SDATA(data_type_t.DTP_STRING, "toolbar_id", 0, null, "Toolbar ID"),
 	SDATA(data_type_t.DTP_STRING, "popup_id", 0, null, "Edit form popup ID"),
@@ -16966,6 +17117,15 @@ function build_ui$5(gobj) {
 			style: "margin-top:0px !important;"
 		}]]
 	]);
+	if (gobj_read_bool_attr(gobj, "with_checkbox") && gobj_read_bool_attr(gobj, "with_selection_bar")) {
+		let bar = yui_selection_bar(t, {
+			name: "TREEDB_TABLE",
+			actions: [],
+			on_clear: () => gobj_send_event(gobj, "EV_CLEAR_SELECTION", {}, gobj)
+		});
+		gobj_write_attr(gobj, "selection_bar", bar);
+		$container.insertBefore(bar.$el, $container.querySelector(`#${table_id}`));
+	}
 	let $toolbar_slot = $container.querySelector(".toolbar_tabulator_table");
 	if ($table_toolbar instanceof Element) $toolbar_slot.appendChild($table_toolbar);
 	else $toolbar_slot.appendChild(createElement2(["div", {}]));
@@ -16974,6 +17134,24 @@ function build_ui$5(gobj) {
 	refresh_language($container, t);
 }
 /************************************************************
+*   How many rows are ticked, on the bar.
+*
+*   Only while the table is EDITABLE: outside edition its checkbox
+*   column is hidden (`hideColumn`), and a count of rows nobody can
+*   see or untick is a count you cannot act on. The selection itself
+*   is left alone -- coming back to edition finds it, and the bar
+*   recounts from the table.
+************************************************************/
+function render_selection_bar(gobj) {
+	let bar = gobj_read_attr(gobj, "selection_bar");
+	if (!bar) return;
+	if (!gobj_read_bool_attr(gobj, "editable")) {
+		bar.set_count(0);
+		return;
+	}
+	bar.set_count(yui_selected_rows(gobj_read_attr(gobj, "tabulator")).length);
+}
+/************************************************************
 *   Destroy UI
 ************************************************************/
 function destroy_ui$2(gobj) {
@@ -18163,6 +18341,8 @@ function refuse_if_readonly$2(gobj, event) {
 *  dict. Re-apply it in the new language.
 ***************************************************************/
 function ac_language_changed$2(gobj, event, kw, src) {
+	let bar = gobj_read_attr(gobj, "selection_bar");
+	if (bar) bar.refresh();
 	let tabulator = gobj_read_attr(gobj, "tabulator");
 	if (!tabulator) return 0;
 	yui_tabulator_relocalize(tabulator, t);
@@ -18276,6 +18456,7 @@ function ac_edition_mode(gobj, event, kw, src) {
 		$button_copy_record.setAttribute("disabled", true);
 		$button_paste_record.setAttribute("disabled", true);
 	}
+	render_selection_bar(gobj);
 	return 0;
 }
 /************************************************************
@@ -18421,6 +18602,7 @@ function ac_select_rows(gobj, event, kw, src) {
 			$button_copy_record.setAttribute("disabled", true);
 		}
 	}
+	render_selection_bar(gobj);
 	if (gobj_read_bool_attr(gobj, "broadcast_select_rows_event")) gobj_publish_event(gobj, event, kw);
 	return 0;
 }
@@ -18441,10 +18623,19 @@ function ac_unselect_rows(gobj, event, kw, src) {
 			$button_copy_record.setAttribute("disabled", true);
 		}
 	}
+	render_selection_bar(gobj);
 	if (gobj_read_bool_attr(gobj, "broadcast_select_rows_event")) gobj_publish_event(gobj, event, kw);
 	return 0;
 }
 /************************************************************
+*  The way out of a selection (the bar's clear button).
+************************************************************/
+function ac_clear_selection(gobj, event, kw, src) {
+	yui_clear_selection(gobj_read_attr(gobj, "tabulator"));
+	render_selection_bar(gobj);
+	return 0;
+}
+/************************************************************
 *  { locale: "es" }
 ************************************************************/
 function ac_change_locale(gobj, event, kw, src) {
@@ -18921,6 +19112,11 @@ function create_gclass$5(gclass_name) {
 			ac_select_rows,
 			null
 		],
+		[
+			"EV_CLEAR_SELECTION",
+			ac_clear_selection,
+			null
+		],
 		[
 			"EV_UNSELECT_ROWS",
 			ac_unselect_rows,
@@ -19029,6 +19225,7 @@ function create_gclass$5(gclass_name) {
 		["EV_DELETE_ROWS", 0],
 		["EV_COPY_ROWS", 0],
 		["EV_PASTE_ROWS", 0],
+		["EV_CLEAR_SELECTION", 0],
 		["EV_SELECT_ROWS", event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_UNSELECT_ROWS", event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_SHOW_HOOK_DATA", event_flag_t.EVF_OUTPUT_EVENT],

package/package.json

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

package/src/c_yui_treedb_topic_with_form.js

@@ -78,7 +78,9 @@ import {yui_tabulator_lang, yui_tabulator_relocalize} from "./yui_tabulator_i18n
 import {
     yui_selection_column,
     yui_selection_settings,
+    yui_selection_bar,
     yui_selected_rows,
+    yui_clear_selection,
 } from "./yui_table_select.js";
 
 import {t} from "i18next";
@@ -129,6 +131,7 @@ SDATA(data_type_t.DTP_BOOLEAN,  "editable",             0,  false,  "Edit state"
 /*---------------- Selection Mode ----------------*/
 SDATA(data_type_t.DTP_BOOLEAN,  "with_checkbox",        0,  true,   "Auxiliary first column to select rows"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_radio",           0,  false,  "Auxiliary first column to select one row"),
+SDATA(data_type_t.DTP_BOOLEAN,  "with_selection_bar",   0,  false,  "Show the shared selection bar (\"N selected\" + a way out) above the table while in edition mode. OFF by default: the bar takes its words from the HOST's i18n, and a host that has not defined \"{{n}} selected\" and \"clear selection\" would render the keys"),
 SDATA(data_type_t.DTP_BOOLEAN,  "broadcast_select_rows_event",   0,  false, "Broadcast select rows event"),
 SDATA(data_type_t.DTP_BOOLEAN,  "broadcast_unselect_rows_event", 0,  false, "Broadcast unselect rows event"),
 
@@ -148,6 +151,7 @@ SDATA(data_type_t.DTP_JSON,     "tabulator_settings",   0,  {
 /*---------------- Internal Attributes ----------------*/
 SDATA(data_type_t.DTP_POINTER,  "$container",           0,  null,   "HTML container for UI"),
 SDATA(data_type_t.DTP_POINTER,  "tabulator",            0,  null,   "Tabulator instance"),
+SDATA(data_type_t.DTP_POINTER,  "selection_bar",        0,  null,   "The selection bar (yui_table_select.js), when with_selection_bar"),
 SDATA(data_type_t.DTP_STRING,   "table_id",             0,  null,   "Table div ID"),
 SDATA(data_type_t.DTP_STRING,   "toolbar_id",           0,  null,   "Toolbar ID"),
 SDATA(data_type_t.DTP_STRING,   "popup_id",             0,  null,   "Edit form popup ID"),
@@ -648,6 +652,21 @@ function build_ui(gobj)
             ]
         ]]
     );
+    /*  The shared selection bar, between the toolbar and the table. It is
+     *  the only thing that says HOW MANY rows are ticked: with 200 rows to a
+     *  page, the checkboxes that answer that question are not all on screen.
+     *  Opt-in, because it takes its words from the host's i18n.  */
+    if(gobj_read_bool_attr(gobj, "with_checkbox") &&
+            gobj_read_bool_attr(gobj, "with_selection_bar")) {
+        let bar = yui_selection_bar(t, {
+            name:     "TREEDB_TABLE",
+            actions:  [],   /*  the toolbar above already carries them  */
+            on_clear: () => gobj_send_event(gobj, "EV_CLEAR_SELECTION", {}, gobj)
+        });
+        gobj_write_attr(gobj, "selection_bar", bar);
+        $container.insertBefore(bar.$el, $container.querySelector(`#${table_id}`));
+    }
+
     let $toolbar_slot = $container.querySelector('.toolbar_tabulator_table');
     if($table_toolbar instanceof Element) {
         $toolbar_slot.appendChild($table_toolbar);
@@ -660,6 +679,28 @@ function build_ui(gobj)
     refresh_language($container, t);
 }
 
+/************************************************************
+ *   How many rows are ticked, on the bar.
+ *
+ *   Only while the table is EDITABLE: outside edition its checkbox
+ *   column is hidden (`hideColumn`), and a count of rows nobody can
+ *   see or untick is a count you cannot act on. The selection itself
+ *   is left alone -- coming back to edition finds it, and the bar
+ *   recounts from the table.
+ ************************************************************/
+function render_selection_bar(gobj)
+{
+    let bar = gobj_read_attr(gobj, "selection_bar");
+    if(!bar) {
+        return;
+    }
+    if(!gobj_read_bool_attr(gobj, "editable")) {
+        bar.set_count(0);
+        return;
+    }
+    bar.set_count(yui_selected_rows(gobj_read_attr(gobj, "tabulator")).length);
+}
+
 /************************************************************
  *   Destroy UI
  ************************************************************/
@@ -2435,6 +2476,10 @@ function refuse_if_readonly(gobj, event)
  ***************************************************************/
 function ac_language_changed(gobj, event, kw, src)
 {
+    let bar = gobj_read_attr(gobj, "selection_bar");
+    if(bar) {
+        bar.refresh();      /*  a count composed at render time  */
+    }
     let tabulator = gobj_read_attr(gobj, "tabulator");
     if(!tabulator) {
         return 0;
@@ -2661,6 +2706,8 @@ function ac_edition_mode(gobj, event, kw, src)
         $button_paste_record.setAttribute("disabled", true);
     }
 
+    render_selection_bar(gobj);
+
     return 0;
 }
 
@@ -2900,6 +2947,8 @@ function ac_select_rows(gobj, event, kw, src)
         }
     }
 
+    render_selection_bar(gobj);
+
     if(gobj_read_bool_attr(gobj, "broadcast_select_rows_event")) {
         gobj_publish_event(gobj, event, kw);
     }
@@ -2931,7 +2980,10 @@ function ac_unselect_rows(gobj, event, kw, src)
         }
     }
 
+    render_selection_bar(gobj);
+
     // WARNING with radio, there is no unselect event.
+
     if(gobj_read_bool_attr(gobj, "broadcast_select_rows_event")) {
         gobj_publish_event(gobj, event, kw);
     }
@@ -2939,6 +2991,16 @@ function ac_unselect_rows(gobj, event, kw, src)
     return 0;
 }
 
+/************************************************************
+ *  The way out of a selection (the bar's clear button).
+ ************************************************************/
+function ac_clear_selection(gobj, event, kw, src)
+{
+    yui_clear_selection(gobj_read_attr(gobj, "tabulator"));
+    render_selection_bar(gobj);
+    return 0;
+}
+
 /************************************************************
  *  { locale: "es" }
  ************************************************************/
@@ -3447,6 +3509,7 @@ function create_gclass(gclass_name)
             ["EV_NEW_ROW",              ac_new_row,            null],
             ["EV_DELETE_ROWS",          ac_delete_rows,        null],
             ["EV_SELECT_ROWS",          ac_select_rows,        null],
+            ["EV_CLEAR_SELECTION",      ac_clear_selection,    null],
             ["EV_UNSELECT_ROWS",        ac_unselect_rows,      null],
             ["EV_COPY_ROWS",            ac_copy_rows,          null],
             ["EV_PASTE_ROWS",           ac_paste_rows,         null],
@@ -3485,6 +3548,7 @@ function create_gclass(gclass_name)
         ["EV_DELETE_ROWS",          0],
         ["EV_COPY_ROWS",            0],
         ["EV_PASTE_ROWS",           0],
+        ["EV_CLEAR_SELECTION",      0],
         ["EV_SELECT_ROWS",          event_flag_t.EVF_OUTPUT_EVENT],
         ["EV_UNSELECT_ROWS",        event_flag_t.EVF_OUTPUT_EVENT],
         ["EV_SHOW_HOOK_DATA",       event_flag_t.EVF_OUTPUT_EVENT],

package/src/c_yui_treedb_topics.js

@@ -76,6 +76,7 @@ SDATA(data_type_t.DTP_POINTER,  "gobj_remote_yuno", 0,  null,   "Remote yuno for
 SDATA(data_type_t.DTP_STRING,   "treedb_name",      0,  null,   "Remote TreeDB service name"),
 SDATA(data_type_t.DTP_JSON,     "descs",            0,  null,   "Description of topics"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_remote_paging",   0,  false,  "Each topic table pulls its rows a PAGE at a time (`nodes` from/limit) instead of loading the topic whole. Safe against a backend that cannot page: it answers the whole list, which the table reads as one page"),
+SDATA(data_type_t.DTP_BOOLEAN,  "with_selection_bar",   0,  false,  "Each topic table shows the shared selection bar (\"N selected\" + a way out) above it while in edition mode. OFF by default: the bar takes its words from the HOST's i18n, so a host that turns it on must define \"{{n}} selected\" and \"clear selection\""),
 SDATA(data_type_t.DTP_BOOLEAN,  "system",           0,  false,  "Manage system topics (true) or user topics (false)"),
 SDATA(data_type_t.DTP_STRING,   "tabs_style",       0,  "is-toggle is-fullwidth", "Bulma tab styling"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_cards_landing",0, false,  "Land on a grid of topic cards (list->detail): a card opens its table, with the tabs bar + a back-to-grid button. Off = tabs only (legacy)."),
@@ -1039,7 +1040,8 @@ function process_treedb_descs(gobj)
             treedb_name: treedb_name,
             topic_name: key,
             desc: desc,
-            with_remote_paging: gobj_read_bool_attr(gobj, "with_remote_paging")
+            with_remote_paging: gobj_read_bool_attr(gobj, "with_remote_paging"),
+            with_selection_bar: gobj_read_bool_attr(gobj, "with_selection_bar")
         };
 
         let id = `${gobj_name(gobj)}?${desc.topic_name}`;

package/src/tabulator.css

@@ -220,9 +220,7 @@
  */
 [data-theme=dark] .tabulator-row .tabulator-cell.tabulator-editing input,
 [data-theme=dark] .tabulator-row .tabulator-cell.tabulator-editing select,
-[data-theme=dark] .tabulator-row .tabulator-cell.tabulator-editing textarea,
-[data-theme=dark] .tabulator .tabulator-header .tabulator-header-filter input,
-[data-theme=dark] .tabulator .tabulator-header .tabulator-header-filter select {
+[data-theme=dark] .tabulator-row .tabulator-cell.tabulator-editing textarea {
     background-color: var(--bulma-grey-darker, #2b2f38);
     color: var(--bulma-text-strong, #f5f6f7) !important;
     caret-color: var(--bulma-text-strong, #f5f6f7);
@@ -234,6 +232,44 @@
     color: var(--bulma-text-weak, #8a8f98);
 }
 
+/* ====================================================================
+ *  The HEADER FILTER box is FURNITURE, not an open editor.
+ *
+ *  Both are inputs inside the table, so they shared these rules -- but an
+ *  editor is a MODE: one cell, while you type into it, and deliberately the
+ *  brightest thing on screen. A filter box is permanent and there is one per
+ *  column, so wearing the editor's border a header of eight columns drew
+ *  eight hard boxes across the top of every table, link-BLUE in dark theme.
+ *
+ *  Discreet at rest -- a hairline in the theme's weakest border colour, no
+ *  wash of its own -- and only the FOCUSED one stands out, which is the one
+ *  you are typing in.
+ * ==================================================================== */
+.tabulator .tabulator-header .tabulator-header-filter input,
+.tabulator .tabulator-header .tabulator-header-filter select {
+    border: 1px solid var(--bulma-border-weak, #e8eaee);
+    border-radius: 3px;
+    background-color: transparent;
+}
+
+.tabulator .tabulator-header .tabulator-header-filter input:focus,
+.tabulator .tabulator-header .tabulator-header-filter select:focus {
+    border-color: var(--bulma-link, #4a9eff);
+    outline: none;
+}
+
+[data-theme=dark] .tabulator .tabulator-header .tabulator-header-filter input,
+[data-theme=dark] .tabulator .tabulator-header .tabulator-header-filter select {
+    border-color: var(--bulma-border, #3a3f4a);
+    color: var(--bulma-text-strong, #f5f6f7);
+    caret-color: var(--bulma-text-strong, #f5f6f7);
+}
+
+[data-theme=dark] .tabulator .tabulator-header .tabulator-header-filter input:focus,
+[data-theme=dark] .tabulator .tabulator-header .tabulator-header-filter select:focus {
+    border-color: var(--bulma-link, #4a9eff);
+}
+
 [data-theme=dark] .tabulator-row.tabulator-selected {
     background-color: var(--bulma-link) !important;
     color: var(--bulma-link-invert) !important;
@@ -313,9 +349,7 @@
     /*  same editor fix as [data-theme=dark] above  */
     [data-theme=system] .tabulator-row .tabulator-cell.tabulator-editing input,
     [data-theme=system] .tabulator-row .tabulator-cell.tabulator-editing select,
-    [data-theme=system] .tabulator-row .tabulator-cell.tabulator-editing textarea,
-    [data-theme=system] .tabulator .tabulator-header .tabulator-header-filter input,
-    [data-theme=system] .tabulator .tabulator-header .tabulator-header-filter select {
+    [data-theme=system] .tabulator-row .tabulator-cell.tabulator-editing textarea {
         background-color: var(--bulma-grey-darker, #2b2f38);
         color: var(--bulma-text-strong, #f5f6f7) !important;
         caret-color: var(--bulma-text-strong, #f5f6f7);
@@ -325,6 +359,17 @@
     [data-theme=system] .tabulator .tabulator-header .tabulator-header-filter input::placeholder {
         color: var(--bulma-text-weak, #8a8f98);
     }
+    /*  same furniture-not-editor rule as [data-theme=dark] above  */
+    [data-theme=system] .tabulator .tabulator-header .tabulator-header-filter input,
+    [data-theme=system] .tabulator .tabulator-header .tabulator-header-filter select {
+        border-color: var(--bulma-border, #3a3f4a);
+        color: var(--bulma-text-strong, #f5f6f7);
+        caret-color: var(--bulma-text-strong, #f5f6f7);
+    }
+    [data-theme=system] .tabulator .tabulator-header .tabulator-header-filter input:focus,
+    [data-theme=system] .tabulator .tabulator-header .tabulator-header-filter select:focus {
+        border-color: var(--bulma-link, #4a9eff);
+    }
     [data-theme=system] .tabulator-row.tabulator-selected {
         background-color: var(--bulma-link) !important;
         color: var(--bulma-link-invert) !important;