@yuneta/gobj-ui 7.11.0 → 7.12.0

package/README.md

@@ -1031,6 +1031,14 @@ 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.
 
+`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
+read of its selection from here too. A **radio** column (pick ONE row) is not
+this facility: it is `formatter: "rowSelection"` with no `titleFormatter` and
+`selectableRows: 1`, and the header checkbox, the count and the bar all mean
+nothing there.
+
 ## Conventions
 
 ### i18n: a string must be able to CHANGE language, not just be translated once

package/dist/gobj-ui.cjs.js

@@ -16317,6 +16317,93 @@ 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.
+*
+*      opts:
+*          field    the (virtual) field name, default "_select"
+*          width    default 44
+*          visible  default true; `false` for a table that reveals
+*                   the column only in an edit mode (the treedb topic
+*                   table shows it with `showColumn(field)`)
+*
+*      This is the SELECT-MANY widget. A table that lets you pick ONE
+*      row uses a radio column of its own (`formatter: "rowSelection"`
+*      with no `titleFormatter`, `selectableRows: 1`): the header
+*      checkbox, the count and the bar all mean nothing there.
+***************************************************************/
+function yui_selection_column(opts) {
+	let o = opts || {};
+	return {
+		title: "",
+		field: o.field || "_select",
+		width: o.width || 44,
+		minWidth: o.width || 44,
+		visible: o.visible !== false,
+		hozAlign: "center",
+		headerHozAlign: "center",
+		headerSort: false,
+		resizable: false,
+		formatter: "rowSelection",
+		titleFormatter: "rowSelection",
+		titleFormatterParams: { rowRange: "active" },
+		cssClass: "TABLE_SELECT_CELL"
+	};
+}
+/***************************************************************
+*      What the Tabulator settings need for the column above.
+*      Spread it into the settings object.
+***************************************************************/
+function yui_selection_settings() {
+	return { selectableRows: "highlight" };
+}
+/***************************************************************
+*      The rows selected right now (never null).
+***************************************************************/
+function yui_selected_rows(tabulator) {
+	if (!tabulator || typeof tabulator.getSelectedData !== "function") return [];
+	try {
+		return tabulator.getSelectedData() || [];
+	} catch (e) {
+		return [];
+	}
+}
+//#endregion
 //#region src/treedb_write_plan.js
 /***********************************************************************
 *          treedb_write_plan.js
@@ -16996,16 +17083,11 @@ function create_tabulator(gobj) {
 	let columns = [];
 	let with_checkbox = (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_checkbox");
 	let with_radio = (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_radio");
-	if (with_checkbox) columns.push({
-		formatter: "rowSelection",
-		titleFormatter: "rowSelection",
+	if (with_checkbox) columns.push(yui_selection_column({
 		field: "_check_box_state_",
-		hozAlign: "center",
-		headerHozAlign: "center",
 		width: 40,
-		visible: false,
-		headerSort: false
-	});
+		visible: false
+	}));
 	else if (with_radio) columns.push({
 		formatter: "rowSelection",
 		field: "_check_box_state_",
@@ -17234,7 +17316,9 @@ function create_tabulator(gobj) {
 		}
 	});
 	let pkey = desc.pkey || "id";
-	let selectable = with_checkbox ? "highlight" : with_radio ? 1 : false;
+	let selectable = false;
+	if (with_checkbox) selectable = yui_selection_settings().selectableRows;
+	else if (with_radio) selectable = 1;
 	let tabulator_settings = (0, _yuneta_gobj_js.json_deep_copy)((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "tabulator_settings"));
 	if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_remote_paging")) {
 		let page_size = (0, _yuneta_gobj_js.gobj_read_integer_attr)(gobj, "page_size") || 200;
@@ -18216,7 +18300,7 @@ function ac_edition_mode(gobj, event, kw, src) {
 		tabulator.showColumn("_check_box_state_");
 		$button_new_record.removeAttribute("disabled");
 		$button_paste_record.removeAttribute("disabled");
-		if (tabulator.getSelectedData().length) {
+		if (yui_selected_rows(tabulator).length) {
 			$button_delete_record.removeAttribute("disabled");
 			$button_copy_record.removeAttribute("disabled");
 		}
@@ -18274,7 +18358,7 @@ function ac_delete_rows(gobj, event, kw, src) {
 	if (refuse_if_readonly$2(gobj, event)) return -1;
 	let tabulator = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "tabulator");
 	if ((0, _yuneta_gobj_js.json_size)(kw) === 0) {
-		let rows = tabulator.getSelectedData();
+		let rows = yui_selected_rows(tabulator);
 		if (!rows.length) {
 			yui_shell_confirm_ok(yui_shell_of(gobj), "please select some row", {
 				t: i18next.t,
@@ -18310,7 +18394,7 @@ function ac_delete_rows(gobj, event, kw, src) {
 *  From internal
 ************************************************************/
 function ac_copy_rows(gobj, event, kw, src) {
-	let rows = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "tabulator").getSelectedData();
+	let rows = yui_selected_rows((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "tabulator"));
 	if (!rows.length) {
 		yui_shell_confirm_ok(yui_shell_of(gobj), "please select some row", {
 			t: i18next.t,
@@ -18368,7 +18452,7 @@ function ac_select_rows(gobj, event, kw, src) {
 	let $button_delete_record = $container.querySelector(`.button-delete-record`);
 	let $button_copy_record = $container.querySelector(`.button-copy-record`);
 	if ($button_delete_record) {
-		if (tabulator.getSelectedData().length && (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "editable")) {
+		if (yui_selected_rows(tabulator).length && (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "editable")) {
 			$button_delete_record.removeAttribute("disabled");
 			$button_copy_record.removeAttribute("disabled");
 		} else {
@@ -18388,7 +18472,7 @@ function ac_unselect_rows(gobj, event, kw, src) {
 	let $button_delete_record = $container.querySelector(`.button-delete-record`);
 	let $button_copy_record = $container.querySelector(`.button-copy-record`);
 	if ($button_delete_record) {
-		if (tabulator.getSelectedData().length && (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "editable")) {
+		if (yui_selected_rows(tabulator).length && (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "editable")) {
 			$button_delete_record.removeAttribute("disabled");
 			$button_copy_record.removeAttribute("disabled");
 		} else {

package/dist/gobj-ui.es.js

@@ -16312,6 +16312,59 @@ function yui_tabulator_relocalize(table, t) {
 	}
 }
 //#endregion
+//#region src/yui_table_select.js
+/***************************************************************
+*      The checkbox column. Put it FIRST in the column list.
+*
+*      opts:
+*          field    the (virtual) field name, default "_select"
+*          width    default 44
+*          visible  default true; `false` for a table that reveals
+*                   the column only in an edit mode (the treedb topic
+*                   table shows it with `showColumn(field)`)
+*
+*      This is the SELECT-MANY widget. A table that lets you pick ONE
+*      row uses a radio column of its own (`formatter: "rowSelection"`
+*      with no `titleFormatter`, `selectableRows: 1`): the header
+*      checkbox, the count and the bar all mean nothing there.
+***************************************************************/
+function yui_selection_column(opts) {
+	let o = opts || {};
+	return {
+		title: "",
+		field: o.field || "_select",
+		width: o.width || 44,
+		minWidth: o.width || 44,
+		visible: o.visible !== false,
+		hozAlign: "center",
+		headerHozAlign: "center",
+		headerSort: false,
+		resizable: false,
+		formatter: "rowSelection",
+		titleFormatter: "rowSelection",
+		titleFormatterParams: { rowRange: "active" },
+		cssClass: "TABLE_SELECT_CELL"
+	};
+}
+/***************************************************************
+*      What the Tabulator settings need for the column above.
+*      Spread it into the settings object.
+***************************************************************/
+function yui_selection_settings() {
+	return { selectableRows: "highlight" };
+}
+/***************************************************************
+*      The rows selected right now (never null).
+***************************************************************/
+function yui_selected_rows(tabulator) {
+	if (!tabulator || typeof tabulator.getSelectedData !== "function") return [];
+	try {
+		return tabulator.getSelectedData() || [];
+	} catch (e) {
+		return [];
+	}
+}
+//#endregion
 //#region src/treedb_write_plan.js
 /***********************************************************************
 *          treedb_write_plan.js
@@ -16991,16 +17044,11 @@ function create_tabulator(gobj) {
 	let columns = [];
 	let with_checkbox = gobj_read_bool_attr(gobj, "with_checkbox");
 	let with_radio = gobj_read_bool_attr(gobj, "with_radio");
-	if (with_checkbox) columns.push({
-		formatter: "rowSelection",
-		titleFormatter: "rowSelection",
+	if (with_checkbox) columns.push(yui_selection_column({
 		field: "_check_box_state_",
-		hozAlign: "center",
-		headerHozAlign: "center",
 		width: 40,
-		visible: false,
-		headerSort: false
-	});
+		visible: false
+	}));
 	else if (with_radio) columns.push({
 		formatter: "rowSelection",
 		field: "_check_box_state_",
@@ -17229,7 +17277,9 @@ function create_tabulator(gobj) {
 		}
 	});
 	let pkey = desc.pkey || "id";
-	let selectable = with_checkbox ? "highlight" : with_radio ? 1 : false;
+	let selectable = false;
+	if (with_checkbox) selectable = yui_selection_settings().selectableRows;
+	else if (with_radio) selectable = 1;
 	let tabulator_settings = json_deep_copy(gobj_read_attr(gobj, "tabulator_settings"));
 	if (gobj_read_bool_attr(gobj, "with_remote_paging")) {
 		let page_size = gobj_read_integer_attr(gobj, "page_size") || 200;
@@ -18211,7 +18261,7 @@ function ac_edition_mode(gobj, event, kw, src) {
 		tabulator.showColumn("_check_box_state_");
 		$button_new_record.removeAttribute("disabled");
 		$button_paste_record.removeAttribute("disabled");
-		if (tabulator.getSelectedData().length) {
+		if (yui_selected_rows(tabulator).length) {
 			$button_delete_record.removeAttribute("disabled");
 			$button_copy_record.removeAttribute("disabled");
 		}
@@ -18269,7 +18319,7 @@ function ac_delete_rows(gobj, event, kw, src) {
 	if (refuse_if_readonly$2(gobj, event)) return -1;
 	let tabulator = gobj_read_attr(gobj, "tabulator");
 	if (json_size(kw) === 0) {
-		let rows = tabulator.getSelectedData();
+		let rows = yui_selected_rows(tabulator);
 		if (!rows.length) {
 			yui_shell_confirm_ok(yui_shell_of(gobj), "please select some row", {
 				t,
@@ -18305,7 +18355,7 @@ function ac_delete_rows(gobj, event, kw, src) {
 *  From internal
 ************************************************************/
 function ac_copy_rows(gobj, event, kw, src) {
-	let rows = gobj_read_attr(gobj, "tabulator").getSelectedData();
+	let rows = yui_selected_rows(gobj_read_attr(gobj, "tabulator"));
 	if (!rows.length) {
 		yui_shell_confirm_ok(yui_shell_of(gobj), "please select some row", {
 			t,
@@ -18363,7 +18413,7 @@ function ac_select_rows(gobj, event, kw, src) {
 	let $button_delete_record = $container.querySelector(`.button-delete-record`);
 	let $button_copy_record = $container.querySelector(`.button-copy-record`);
 	if ($button_delete_record) {
-		if (tabulator.getSelectedData().length && gobj_read_bool_attr(gobj, "editable")) {
+		if (yui_selected_rows(tabulator).length && gobj_read_bool_attr(gobj, "editable")) {
 			$button_delete_record.removeAttribute("disabled");
 			$button_copy_record.removeAttribute("disabled");
 		} else {
@@ -18383,7 +18433,7 @@ function ac_unselect_rows(gobj, event, kw, src) {
 	let $button_delete_record = $container.querySelector(`.button-delete-record`);
 	let $button_copy_record = $container.querySelector(`.button-copy-record`);
 	if ($button_delete_record) {
-		if (tabulator.getSelectedData().length && gobj_read_bool_attr(gobj, "editable")) {
+		if (yui_selected_rows(tabulator).length && gobj_read_bool_attr(gobj, "editable")) {
 			$button_delete_record.removeAttribute("disabled");
 			$button_copy_record.removeAttribute("disabled");
 		} else {

package/package.json

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

package/src/c_yui_treedb_topic_with_form.js

@@ -75,6 +75,12 @@ import {attach_clear} from "./yui_inputs.js";
 
 import {yui_tabulator_lang, yui_tabulator_relocalize} from "./yui_tabulator_i18n.js";
 
+import {
+    yui_selection_column,
+    yui_selection_settings,
+    yui_selected_rows,
+} from "./yui_table_select.js";
+
 import {t} from "i18next";
 
 import {plan_treedb_writes} from "./treedb_write_plan.js";
@@ -748,16 +754,20 @@ function create_tabulator(gobj)
     let with_checkbox = gobj_read_bool_attr(gobj, "with_checkbox");
     let with_radio = gobj_read_bool_attr(gobj, "with_radio");
     if(with_checkbox) {
-        columns.push({
-            formatter: "rowSelection",
-            titleFormatter: "rowSelection",
-            field: "_check_box_state_",  // WARNING _check_box_state_ widely used
-            hozAlign: "center",
-            headerHozAlign: "center",
-            width: 40,
-            visible: false,
-            headerSort: false
-        });
+        /*  The SHARED column (yui_table_select.js), not a copy of it: this
+         *  table is where its two decisions were learned, and it was the one
+         *  table not applying the second. Its header checkbox took
+         *  `selectRow(undefined)` -- Tabulator's "every row LOADED", the ones
+         *  the header filters hide included -- and the button beside it
+         *  DELETES. It now ticks the active rows, the ones on screen.
+         *
+         *  Still `visible: false` and still 40px wide: this table reveals the
+         *  column in edit mode (`showColumn`), and the geometry is its own.  */
+        columns.push(yui_selection_column({
+            field:   "_check_box_state_",  // WARNING _check_box_state_ widely used
+            width:   40,
+            visible: false
+        }));
     } else if(with_radio) {
         columns.push({
             formatter: "rowSelection",
@@ -1098,7 +1108,12 @@ function create_tabulator(gobj)
      *  (it calls toggleSelect() directly) while disabling click-to-select,
      *  so opening the edit (yi-pen) form no longer implicitly ticks the
      *  row. Radio keeps single click-select (its own widget).  */
-    let selectable = with_checkbox ? "highlight" : (with_radio ? 1 : false);
+    let selectable = false;
+    if(with_checkbox) {
+        selectable = yui_selection_settings().selectableRows;
+    } else if(with_radio) {
+        selectable = 1;     /*  pick ONE: the radio's own widget  */
+    }
 
     let tabulator_settings = json_deep_copy(gobj_read_attr(gobj, "tabulator_settings"));
 
@@ -2623,7 +2638,7 @@ function ac_edition_mode(gobj, event, kw, src)
         $button_new_record.removeAttribute("disabled");
         $button_paste_record.removeAttribute("disabled");
 
-        let rows = tabulator.getSelectedData();
+        let rows = yui_selected_rows(tabulator);
         if (rows.length) {
             $button_delete_record.removeAttribute("disabled");
             $button_copy_record.removeAttribute("disabled");
@@ -2715,7 +2730,7 @@ function ac_delete_rows(gobj, event, kw, src)
         /*----------------------------*
          *  Delete selected rows
          *----------------------------*/
-        let rows = tabulator.getSelectedData();
+        let rows = yui_selected_rows(tabulator);
         if (!rows.length) {
             yui_shell_confirm_ok(
                 yui_shell_of(gobj), 'please select some row',
@@ -2778,7 +2793,7 @@ function ac_copy_rows(gobj, event, kw, src)
     /*----------------------------*
      *  Copy selected rows
      *----------------------------*/
-    let rows = tabulator.getSelectedData();
+    let rows = yui_selected_rows(tabulator);
     if (!rows.length) {
         yui_shell_confirm_ok(
             yui_shell_of(gobj), 'please select some row',
@@ -2875,7 +2890,7 @@ function ac_select_rows(gobj, event, kw, src)
     let $button_delete_record = $container.querySelector(`.button-delete-record`);
     let $button_copy_record = $container.querySelector(`.button-copy-record`);
     if($button_delete_record) {
-        let selectedRows = tabulator.getSelectedData();
+        let selectedRows = yui_selected_rows(tabulator);
         if (selectedRows.length && gobj_read_bool_attr(gobj, "editable")) {
             $button_delete_record.removeAttribute("disabled");
             $button_copy_record.removeAttribute("disabled");
@@ -2906,7 +2921,7 @@ function ac_unselect_rows(gobj, event, kw, src)
     let $button_delete_record = $container.querySelector(`.button-delete-record`);
     let $button_copy_record = $container.querySelector(`.button-copy-record`);
     if($button_delete_record) {
-        let selectedRows = tabulator.getSelectedData();
+        let selectedRows = yui_selected_rows(tabulator);
         if (selectedRows.length && gobj_read_bool_attr(gobj, "editable")) {
             $button_delete_record.removeAttribute("disabled");
             $button_copy_record.removeAttribute("disabled");

package/src/yui_table_select.js

@@ -38,8 +38,16 @@ import {createElement2, log_error} from "@yuneta/gobj-js";
  *      The checkbox column. Put it FIRST in the column list.
  *
  *      opts:
- *          field   the (virtual) field name, default "_select"
- *          width   default 44
+ *          field    the (virtual) field name, default "_select"
+ *          width    default 44
+ *          visible  default true; `false` for a table that reveals
+ *                   the column only in an edit mode (the treedb topic
+ *                   table shows it with `showColumn(field)`)
+ *
+ *      This is the SELECT-MANY widget. A table that lets you pick ONE
+ *      row uses a radio column of its own (`formatter: "rowSelection"`
+ *      with no `titleFormatter`, `selectableRows: 1`): the header
+ *      checkbox, the count and the bar all mean nothing there.
  ***************************************************************/
 function yui_selection_column(opts)
 {
@@ -49,6 +57,7 @@ function yui_selection_column(opts)
         field:                o.field || "_select",
         width:                o.width || 44,
         minWidth:             o.width || 44,
+        visible:              o.visible !== false,
         hozAlign:             "center",
         headerHozAlign:       "center",
         headerSort:           false,
@@ -179,10 +188,16 @@ function yui_selection_bar(t, opts)
     );
     $clear._yui_label = "clear selection";
 
+    /*  NOT `is-flex` in the class list: Bulma's helpers all carry
+     *  `!important`, so `is-flex` and `is-hidden` would fight as equals and
+     *  the stylesheet's order would decide -- `is-flex` wins, and the bar
+     *  sits there saying "0 selected" for ever. The layout goes inline (a
+     *  plain declaration, which `is-hidden !important` beats whenever the
+     *  class is on), and only `is-hidden` toggles.  */
     let $el = createElement2(
-        ["div", {class: `${name}_SELECTION_BAR is-flex is-align-items-center `
+        ["div", {class: `${name}_SELECTION_BAR is-align-items-center `
                       + "is-flex-wrap-wrap mb-2 is-hidden",
-                 style: "gap:0.5rem;"},
+                 style: "display:flex; gap:0.5rem;"},
             [$count].concat($buttons, [$clear])]
     );