@yuneta/gobj-ui 5.6.0 → 5.7.1

package/dist/gobj-ui.cjs.js

@@ -890,7 +890,7 @@ function mt_start$15(gobj) {
 	if (typeof shell_cfg.remember_section_position === "boolean") (0, _yuneta_gobj_js.gobj_write_attr)(gobj, "remember_section_position", shell_cfg.remember_section_position);
 	build_item_index(gobj, config);
 	instantiate_menus(gobj, config);
-	build_toolbar(gobj, config);
+	build_toolbar$1(gobj, config);
 	preinstantiate_eager_views(gobj);
 	if ((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "use_hash")) {
 		priv.hash_handler = () => {
@@ -1616,7 +1616,7 @@ function safe_id(s) {
 *  Per-item `show_on` is honoured: each rendered item is wrapped with
 *  the same Bulma-helper logic as zones.
 ************************************************************/
-function build_toolbar(gobj, config) {
+function build_toolbar$1(gobj, config) {
 	let tb = config && config.toolbar;
 	if (!tb || !(0, _yuneta_gobj_js.is_array)(tb.items)) return;
 	let priv = gobj.priv;
@@ -5760,6 +5760,59 @@ function refresh_clear($input) {
 	$btn.classList.toggle("is-visible", clear_visible($input));
 }
 //#endregion
+//#region src/form_toolbar_plan.js
+/***********************************************************************
+*          form_toolbar_plan.js
+*
+*      Which buttons the C_YUI_FORM toolbar shows, and where.
+*
+*      Pure, so it can be tested without a DOM: the gclass turns the
+*      plan into elements, this decides the plan.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+var LEFT_BUTTONS = [
+	"save",
+	"undo",
+	"clear"
+];
+var RIGHT_BUTTONS = ["copy", "paste"];
+var DEFAULT_TOOLBAR = [
+	"save",
+	"undo",
+	"clear",
+	"copy",
+	"paste"
+];
+/***************************************************************
+*  plan_toolbar(wanted) -> {left, right, unknown}
+*
+*      wanted   an array of button names, in the order asked for.
+*               Anything that is not an array means "the default
+*               five", so a caller that sets nothing keeps exactly
+*               the toolbar this gclass always had.
+*               [] means no toolbar at all.
+*
+*      unknown  names that match no button.  They are reported and
+*               NOT silently dropped: a typo in the list would
+*               otherwise remove the save button with no trace.
+***************************************************************/
+function plan_toolbar(wanted) {
+	if (!Array.isArray(wanted)) wanted = DEFAULT_TOOLBAR;
+	let left = [];
+	let right = [];
+	let unknown = [];
+	for (let name of wanted) if (LEFT_BUTTONS.indexOf(name) >= 0) left.push(name);
+	else if (RIGHT_BUTTONS.indexOf(name) >= 0) right.push(name);
+	else unknown.push(name);
+	return {
+		left,
+		right,
+		unknown
+	};
+}
+//#endregion
 //#region src/yui_theme.js
 /***********************************************************************
 *          yui_theme.js
@@ -5891,6 +5944,13 @@ var attrs_table$13 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_checkbox", 0, false, "Show a first column with checkbox to select rows"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_rownum", 0, false, "Print first column with row number"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_delete_row_btn", 0, false, "Print last column with delete row button"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "toolbar", 0, [
+		"save",
+		"undo",
+		"clear",
+		"copy",
+		"paste"
+	], "Toolbar buttons to show, in order: save, undo, clear, copy, paste. [] hides the toolbar"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "tabulator_settings", 0, {
 		layout: "fitDataFill",
 		validationMode: "highlight",
@@ -5953,14 +6013,20 @@ function isEventSet(table, event) {
 function set_changed_stated(gobj, changed) {
 	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
 	let $form = $container.querySelector("form");
+	const enable = ($btn, on, color) => {
+		if (!$btn) return;
+		if (on) $btn.removeAttribute("disabled");
+		else $btn.setAttribute("disabled", true);
+		const $i = $btn.querySelector("span i");
+		if ($i) $i.style.color = color;
+	};
+	const OFF_COLOR = "hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-color-l))";
 	let $button_save = $container.querySelector(".button-save");
 	let $button_undo = $container.querySelector(".button-undo");
 	if (changed) {
 		(0, _yuneta_gobj_js.gobj_write_bool_attr)(gobj, "changes", true);
-		$button_save.removeAttribute("disabled");
-		$button_undo.removeAttribute("disabled");
-		$button_save.querySelector("span i").style.color = "MediumSeaGreen";
-		$button_undo.querySelector("span i").style.color = "Magenta";
+		enable($button_save, true, "MediumSeaGreen");
+		enable($button_undo, true, "Magenta");
 		$form.querySelectorAll(".yui-tabulator-table").forEach(($table) => {
 			if (isEventSet($table.tabulator, "dataChanged")) $table.tabulator.off("dataChanged");
 			$table.querySelectorAll(".yui-tabulator-table-nested").forEach(($table_nested) => {
@@ -5969,10 +6035,8 @@ function set_changed_stated(gobj, changed) {
 		});
 	} else {
 		(0, _yuneta_gobj_js.gobj_write_bool_attr)(gobj, "changes", false);
-		$button_save.setAttribute("disabled", true);
-		$button_undo.setAttribute("disabled", true);
-		$button_save.querySelector("span i").style.color = "hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-color-l))";
-		$button_undo.querySelector("span i").style.color = "hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-color-l))";
+		enable($button_save, false, OFF_COLOR);
+		enable($button_undo, false, OFF_COLOR);
 		setTimeout(function() {
 			$form.querySelectorAll(".yui-tabulator-table").forEach(($table) => {
 				if (isEventSet($table.tabulator, "dataChanged")) $table.tabulator.off("dataChanged");
@@ -6001,6 +6065,175 @@ async function readClipboard$1(gobj) {
 	}
 }
 /************************************************************
+*   Bottom toolbar, from the `toolbar` attr.
+*
+*   The five buttons it can show, and their order, are the
+*   caller's: a dialog with a single action asks for ["save"],
+*   and [] leaves no toolbar at all.  Default is the five it
+*   always had, so nothing moves for a caller that says nothing.
+************************************************************/
+function toolbar_button(gobj, name) {
+	switch (name) {
+		case "save": return [
+			"button",
+			{
+				class: "button p-1 button-save",
+				title: "save",
+				"aria-label": "save",
+				disabled: true
+			},
+			[[
+				"span",
+				{ class: "icon m-0" },
+				"<i class=\"yi-floppy-disk\"></i>"
+			], [
+				"span",
+				{
+					class: "is-hidden-mobile pl-1 pr-1",
+					i18n: "save"
+				},
+				"save"
+			]],
+			{ click: function(evt) {
+				evt.stopPropagation();
+				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SAVE_RECORD", {}, gobj);
+			} }
+		];
+		case "undo": return [
+			"button",
+			{
+				class: "button p-1 button-undo",
+				title: "undo",
+				"aria-label": "undo",
+				disabled: true
+			},
+			[[
+				"span",
+				{ class: "icon m-0" },
+				"<i class=\"yi-arrow-rotate-left\"></i>"
+			], [
+				"span",
+				{
+					class: "is-hidden-mobile pl-1 pr-1",
+					i18n: "undo"
+				},
+				"undo"
+			]],
+			{ click: function(evt) {
+				evt.stopPropagation();
+				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_UNDO_RECORD", {}, gobj);
+			} }
+		];
+		case "clear": return [
+			"button",
+			{
+				class: "button p-1",
+				title: "clear",
+				"aria-label": "clear"
+			},
+			[[
+				"span",
+				{ class: "icon m-0" },
+				"<i class=\"yi-broom-wide\"></i>"
+			], [
+				"span",
+				{
+					class: "is-hidden-mobile pl-1 pr-1",
+					i18n: "clear"
+				},
+				"clear"
+			]],
+			{ click: function(evt) {
+				evt.stopPropagation();
+				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_CLEAR_RECORD", {}, gobj);
+			} }
+		];
+		case "copy": return [
+			"button",
+			{
+				class: "button p-1",
+				title: "copy",
+				"aria-label": "copy"
+			},
+			[[
+				"span",
+				{ class: "icon m-0" },
+				"<i class=\"yi-copy\"></i>"
+			], [
+				"span",
+				{
+					class: "is-hidden-mobile pl-1 pr-1",
+					i18n: "copy"
+				},
+				"copy"
+			]],
+			{ click: function(evt) {
+				evt.stopPropagation();
+				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_COPY_RECORD", {}, gobj);
+			} }
+		];
+		case "paste": return [
+			"button",
+			{
+				class: "button p-1",
+				title: "paste",
+				"aria-label": "paste"
+			},
+			[[
+				"span",
+				{ class: "icon m-0" },
+				"<i class=\"yi-paste\"></i>"
+			], [
+				"span",
+				{
+					class: "is-hidden-mobile pl-1 pr-1",
+					i18n: "paste"
+				},
+				"paste"
+			]],
+			{ click: async function(evt) {
+				evt.stopPropagation();
+				await readClipboard$1(gobj);
+			} }
+		];
+		default: return null;
+	}
+}
+function build_toolbar(gobj) {
+	const plan = plan_toolbar((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "toolbar"));
+	for (let name of plan.unknown) (0, _yuneta_gobj_js.log_warning)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: unknown toolbar button '${name}'`);
+	if (!plan.left.length && !plan.right.length) return [
+		"span",
+		{
+			class: "yui-toolbar-form-empty",
+			style: "display:none;"
+		},
+		""
+	];
+	return [
+		"div",
+		{
+			class: "yui-toolbar-form is-flex-shrink-0 is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center",
+			style: "width:100%; flex-wrap:wrap; row-gap:6px;"
+		},
+		[[
+			"div",
+			{
+				class: "p-1 is-flex is-flex-direction-row is-align-items-center",
+				style: "column-gap:6px;"
+			},
+			plan.left.map((n) => toolbar_button(gobj, n))
+		], [
+			"div",
+			{
+				class: "p-1 is-flex is-flex-direction-row is-align-items-center",
+				style: "column-gap:6px;"
+			},
+			plan.right.map((n) => toolbar_button(gobj, n))
+		]]
+	];
+}
+/************************************************************
 *   Build UI
 ************************************************************/
 function build_ui$11(gobj) {
@@ -6017,149 +6250,7 @@ function build_ui$11(gobj) {
 				style: "overflow-y:auto; min-height:0;"
 			},
 			build_form(gobj)
-		], [
-			"div",
-			{
-				class: "yui-toolbar-form is-flex-shrink-0 is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center",
-				style: "width:100%; flex-wrap:wrap; row-gap:6px;"
-			},
-			[[
-				"div",
-				{
-					class: "p-1 is-flex is-flex-direction-row is-align-items-center",
-					style: "column-gap:6px;"
-				},
-				[
-					[
-						"button",
-						{
-							class: "button p-1 button-save",
-							title: "save",
-							"aria-label": "save",
-							disabled: true
-						},
-						[[
-							"span",
-							{ class: "icon m-0" },
-							"<i class=\"yi-floppy-disk\"></i>"
-						], [
-							"span",
-							{
-								class: "is-hidden-mobile pl-1 pr-1",
-								i18n: "save"
-							},
-							"save"
-						]],
-						{ click: function(evt) {
-							evt.stopPropagation();
-							(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SAVE_RECORD", {}, gobj);
-						} }
-					],
-					[
-						"button",
-						{
-							class: "button p-1 button-undo",
-							title: "undo",
-							"aria-label": "undo",
-							disabled: true
-						},
-						[[
-							"span",
-							{ class: "icon m-0" },
-							"<i class=\"yi-arrow-rotate-left\"></i>"
-						], [
-							"span",
-							{
-								class: "is-hidden-mobile pl-1 pr-1",
-								i18n: "undo"
-							},
-							"undo"
-						]],
-						{ click: function(evt) {
-							evt.stopPropagation();
-							(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_UNDO_RECORD", {}, gobj);
-						} }
-					],
-					[
-						"button",
-						{
-							class: "button p-1",
-							title: "clear",
-							"aria-label": "clear"
-						},
-						[[
-							"span",
-							{ class: "icon m-0" },
-							"<i class=\"yi-broom-wide\"></i>"
-						], [
-							"span",
-							{
-								class: "is-hidden-mobile pl-1 pr-1",
-								i18n: "clear"
-							},
-							"clear"
-						]],
-						{ click: function(evt) {
-							evt.stopPropagation();
-							(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_CLEAR_RECORD", {}, gobj);
-						} }
-					]
-				]
-			], [
-				"div",
-				{
-					class: "p-1 is-flex is-flex-direction-row is-align-items-center",
-					style: "column-gap:6px;"
-				},
-				[[
-					"button",
-					{
-						class: "button p-1",
-						title: "copy",
-						"aria-label": "copy"
-					},
-					[[
-						"span",
-						{ class: "icon m-0" },
-						"<i class=\"yi-copy\"></i>"
-					], [
-						"span",
-						{
-							class: "is-hidden-mobile pl-1 pr-1",
-							i18n: "copy"
-						},
-						"copy"
-					]],
-					{ click: function(evt) {
-						evt.stopPropagation();
-						(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_COPY_RECORD", {}, gobj);
-					} }
-				], [
-					"button",
-					{
-						class: "button p-1",
-						title: "paste",
-						"aria-label": "paste"
-					},
-					[[
-						"span",
-						{ class: "icon m-0" },
-						"<i class=\"yi-paste\"></i>"
-					], [
-						"span",
-						{
-							class: "is-hidden-mobile pl-1 pr-1",
-							i18n: "paste"
-						},
-						"paste"
-					]],
-					{ click: async function(evt) {
-						evt.stopPropagation();
-						await readClipboard$1(gobj);
-					} }
-				]]
-			]]
-		]]
+		], build_toolbar(gobj)]
 	]);
 	(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "$container", $container);
 	apply_form_mode(gobj, $container.querySelector("form"));

package/dist/gobj-ui.es.js

@@ -885,7 +885,7 @@ function mt_start$15(gobj) {
 	if (typeof shell_cfg.remember_section_position === "boolean") gobj_write_attr(gobj, "remember_section_position", shell_cfg.remember_section_position);
 	build_item_index(gobj, config);
 	instantiate_menus(gobj, config);
-	build_toolbar(gobj, config);
+	build_toolbar$1(gobj, config);
 	preinstantiate_eager_views(gobj);
 	if (gobj_read_attr(gobj, "use_hash")) {
 		priv.hash_handler = () => {
@@ -1611,7 +1611,7 @@ function safe_id(s) {
 *  Per-item `show_on` is honoured: each rendered item is wrapped with
 *  the same Bulma-helper logic as zones.
 ************************************************************/
-function build_toolbar(gobj, config) {
+function build_toolbar$1(gobj, config) {
 	let tb = config && config.toolbar;
 	if (!tb || !is_array(tb.items)) return;
 	let priv = gobj.priv;
@@ -5755,6 +5755,59 @@ function refresh_clear($input) {
 	$btn.classList.toggle("is-visible", clear_visible($input));
 }
 //#endregion
+//#region src/form_toolbar_plan.js
+/***********************************************************************
+*          form_toolbar_plan.js
+*
+*      Which buttons the C_YUI_FORM toolbar shows, and where.
+*
+*      Pure, so it can be tested without a DOM: the gclass turns the
+*      plan into elements, this decides the plan.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+var LEFT_BUTTONS = [
+	"save",
+	"undo",
+	"clear"
+];
+var RIGHT_BUTTONS = ["copy", "paste"];
+var DEFAULT_TOOLBAR = [
+	"save",
+	"undo",
+	"clear",
+	"copy",
+	"paste"
+];
+/***************************************************************
+*  plan_toolbar(wanted) -> {left, right, unknown}
+*
+*      wanted   an array of button names, in the order asked for.
+*               Anything that is not an array means "the default
+*               five", so a caller that sets nothing keeps exactly
+*               the toolbar this gclass always had.
+*               [] means no toolbar at all.
+*
+*      unknown  names that match no button.  They are reported and
+*               NOT silently dropped: a typo in the list would
+*               otherwise remove the save button with no trace.
+***************************************************************/
+function plan_toolbar(wanted) {
+	if (!Array.isArray(wanted)) wanted = DEFAULT_TOOLBAR;
+	let left = [];
+	let right = [];
+	let unknown = [];
+	for (let name of wanted) if (LEFT_BUTTONS.indexOf(name) >= 0) left.push(name);
+	else if (RIGHT_BUTTONS.indexOf(name) >= 0) right.push(name);
+	else unknown.push(name);
+	return {
+		left,
+		right,
+		unknown
+	};
+}
+//#endregion
 //#region src/yui_theme.js
 /***********************************************************************
 *          yui_theme.js
@@ -5886,6 +5939,13 @@ var attrs_table$13 = [
 	SDATA(data_type_t.DTP_BOOLEAN, "with_checkbox", 0, false, "Show a first column with checkbox to select rows"),
 	SDATA(data_type_t.DTP_BOOLEAN, "with_rownum", 0, false, "Print first column with row number"),
 	SDATA(data_type_t.DTP_BOOLEAN, "with_delete_row_btn", 0, false, "Print last column with delete row button"),
+	SDATA(data_type_t.DTP_JSON, "toolbar", 0, [
+		"save",
+		"undo",
+		"clear",
+		"copy",
+		"paste"
+	], "Toolbar buttons to show, in order: save, undo, clear, copy, paste. [] hides the toolbar"),
 	SDATA(data_type_t.DTP_JSON, "tabulator_settings", 0, {
 		layout: "fitDataFill",
 		validationMode: "highlight",
@@ -5948,14 +6008,20 @@ function isEventSet(table, event) {
 function set_changed_stated(gobj, changed) {
 	let $container = gobj_read_attr(gobj, "$container");
 	let $form = $container.querySelector("form");
+	const enable = ($btn, on, color) => {
+		if (!$btn) return;
+		if (on) $btn.removeAttribute("disabled");
+		else $btn.setAttribute("disabled", true);
+		const $i = $btn.querySelector("span i");
+		if ($i) $i.style.color = color;
+	};
+	const OFF_COLOR = "hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-color-l))";
 	let $button_save = $container.querySelector(".button-save");
 	let $button_undo = $container.querySelector(".button-undo");
 	if (changed) {
 		gobj_write_bool_attr(gobj, "changes", true);
-		$button_save.removeAttribute("disabled");
-		$button_undo.removeAttribute("disabled");
-		$button_save.querySelector("span i").style.color = "MediumSeaGreen";
-		$button_undo.querySelector("span i").style.color = "Magenta";
+		enable($button_save, true, "MediumSeaGreen");
+		enable($button_undo, true, "Magenta");
 		$form.querySelectorAll(".yui-tabulator-table").forEach(($table) => {
 			if (isEventSet($table.tabulator, "dataChanged")) $table.tabulator.off("dataChanged");
 			$table.querySelectorAll(".yui-tabulator-table-nested").forEach(($table_nested) => {
@@ -5964,10 +6030,8 @@ function set_changed_stated(gobj, changed) {
 		});
 	} else {
 		gobj_write_bool_attr(gobj, "changes", false);
-		$button_save.setAttribute("disabled", true);
-		$button_undo.setAttribute("disabled", true);
-		$button_save.querySelector("span i").style.color = "hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-color-l))";
-		$button_undo.querySelector("span i").style.color = "hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-color-l))";
+		enable($button_save, false, OFF_COLOR);
+		enable($button_undo, false, OFF_COLOR);
 		setTimeout(function() {
 			$form.querySelectorAll(".yui-tabulator-table").forEach(($table) => {
 				if (isEventSet($table.tabulator, "dataChanged")) $table.tabulator.off("dataChanged");
@@ -5996,6 +6060,175 @@ async function readClipboard$1(gobj) {
 	}
 }
 /************************************************************
+*   Bottom toolbar, from the `toolbar` attr.
+*
+*   The five buttons it can show, and their order, are the
+*   caller's: a dialog with a single action asks for ["save"],
+*   and [] leaves no toolbar at all.  Default is the five it
+*   always had, so nothing moves for a caller that says nothing.
+************************************************************/
+function toolbar_button(gobj, name) {
+	switch (name) {
+		case "save": return [
+			"button",
+			{
+				class: "button p-1 button-save",
+				title: "save",
+				"aria-label": "save",
+				disabled: true
+			},
+			[[
+				"span",
+				{ class: "icon m-0" },
+				"<i class=\"yi-floppy-disk\"></i>"
+			], [
+				"span",
+				{
+					class: "is-hidden-mobile pl-1 pr-1",
+					i18n: "save"
+				},
+				"save"
+			]],
+			{ click: function(evt) {
+				evt.stopPropagation();
+				gobj_send_event(gobj, "EV_SAVE_RECORD", {}, gobj);
+			} }
+		];
+		case "undo": return [
+			"button",
+			{
+				class: "button p-1 button-undo",
+				title: "undo",
+				"aria-label": "undo",
+				disabled: true
+			},
+			[[
+				"span",
+				{ class: "icon m-0" },
+				"<i class=\"yi-arrow-rotate-left\"></i>"
+			], [
+				"span",
+				{
+					class: "is-hidden-mobile pl-1 pr-1",
+					i18n: "undo"
+				},
+				"undo"
+			]],
+			{ click: function(evt) {
+				evt.stopPropagation();
+				gobj_send_event(gobj, "EV_UNDO_RECORD", {}, gobj);
+			} }
+		];
+		case "clear": return [
+			"button",
+			{
+				class: "button p-1",
+				title: "clear",
+				"aria-label": "clear"
+			},
+			[[
+				"span",
+				{ class: "icon m-0" },
+				"<i class=\"yi-broom-wide\"></i>"
+			], [
+				"span",
+				{
+					class: "is-hidden-mobile pl-1 pr-1",
+					i18n: "clear"
+				},
+				"clear"
+			]],
+			{ click: function(evt) {
+				evt.stopPropagation();
+				gobj_send_event(gobj, "EV_CLEAR_RECORD", {}, gobj);
+			} }
+		];
+		case "copy": return [
+			"button",
+			{
+				class: "button p-1",
+				title: "copy",
+				"aria-label": "copy"
+			},
+			[[
+				"span",
+				{ class: "icon m-0" },
+				"<i class=\"yi-copy\"></i>"
+			], [
+				"span",
+				{
+					class: "is-hidden-mobile pl-1 pr-1",
+					i18n: "copy"
+				},
+				"copy"
+			]],
+			{ click: function(evt) {
+				evt.stopPropagation();
+				gobj_send_event(gobj, "EV_COPY_RECORD", {}, gobj);
+			} }
+		];
+		case "paste": return [
+			"button",
+			{
+				class: "button p-1",
+				title: "paste",
+				"aria-label": "paste"
+			},
+			[[
+				"span",
+				{ class: "icon m-0" },
+				"<i class=\"yi-paste\"></i>"
+			], [
+				"span",
+				{
+					class: "is-hidden-mobile pl-1 pr-1",
+					i18n: "paste"
+				},
+				"paste"
+			]],
+			{ click: async function(evt) {
+				evt.stopPropagation();
+				await readClipboard$1(gobj);
+			} }
+		];
+		default: return null;
+	}
+}
+function build_toolbar(gobj) {
+	const plan = plan_toolbar(gobj_read_attr(gobj, "toolbar"));
+	for (let name of plan.unknown) log_warning(`${gobj_short_name(gobj)}: unknown toolbar button '${name}'`);
+	if (!plan.left.length && !plan.right.length) return [
+		"span",
+		{
+			class: "yui-toolbar-form-empty",
+			style: "display:none;"
+		},
+		""
+	];
+	return [
+		"div",
+		{
+			class: "yui-toolbar-form is-flex-shrink-0 is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center",
+			style: "width:100%; flex-wrap:wrap; row-gap:6px;"
+		},
+		[[
+			"div",
+			{
+				class: "p-1 is-flex is-flex-direction-row is-align-items-center",
+				style: "column-gap:6px;"
+			},
+			plan.left.map((n) => toolbar_button(gobj, n))
+		], [
+			"div",
+			{
+				class: "p-1 is-flex is-flex-direction-row is-align-items-center",
+				style: "column-gap:6px;"
+			},
+			plan.right.map((n) => toolbar_button(gobj, n))
+		]]
+	];
+}
+/************************************************************
 *   Build UI
 ************************************************************/
 function build_ui$11(gobj) {
@@ -6012,149 +6245,7 @@ function build_ui$11(gobj) {
 				style: "overflow-y:auto; min-height:0;"
 			},
 			build_form(gobj)
-		], [
-			"div",
-			{
-				class: "yui-toolbar-form is-flex-shrink-0 is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center",
-				style: "width:100%; flex-wrap:wrap; row-gap:6px;"
-			},
-			[[
-				"div",
-				{
-					class: "p-1 is-flex is-flex-direction-row is-align-items-center",
-					style: "column-gap:6px;"
-				},
-				[
-					[
-						"button",
-						{
-							class: "button p-1 button-save",
-							title: "save",
-							"aria-label": "save",
-							disabled: true
-						},
-						[[
-							"span",
-							{ class: "icon m-0" },
-							"<i class=\"yi-floppy-disk\"></i>"
-						], [
-							"span",
-							{
-								class: "is-hidden-mobile pl-1 pr-1",
-								i18n: "save"
-							},
-							"save"
-						]],
-						{ click: function(evt) {
-							evt.stopPropagation();
-							gobj_send_event(gobj, "EV_SAVE_RECORD", {}, gobj);
-						} }
-					],
-					[
-						"button",
-						{
-							class: "button p-1 button-undo",
-							title: "undo",
-							"aria-label": "undo",
-							disabled: true
-						},
-						[[
-							"span",
-							{ class: "icon m-0" },
-							"<i class=\"yi-arrow-rotate-left\"></i>"
-						], [
-							"span",
-							{
-								class: "is-hidden-mobile pl-1 pr-1",
-								i18n: "undo"
-							},
-							"undo"
-						]],
-						{ click: function(evt) {
-							evt.stopPropagation();
-							gobj_send_event(gobj, "EV_UNDO_RECORD", {}, gobj);
-						} }
-					],
-					[
-						"button",
-						{
-							class: "button p-1",
-							title: "clear",
-							"aria-label": "clear"
-						},
-						[[
-							"span",
-							{ class: "icon m-0" },
-							"<i class=\"yi-broom-wide\"></i>"
-						], [
-							"span",
-							{
-								class: "is-hidden-mobile pl-1 pr-1",
-								i18n: "clear"
-							},
-							"clear"
-						]],
-						{ click: function(evt) {
-							evt.stopPropagation();
-							gobj_send_event(gobj, "EV_CLEAR_RECORD", {}, gobj);
-						} }
-					]
-				]
-			], [
-				"div",
-				{
-					class: "p-1 is-flex is-flex-direction-row is-align-items-center",
-					style: "column-gap:6px;"
-				},
-				[[
-					"button",
-					{
-						class: "button p-1",
-						title: "copy",
-						"aria-label": "copy"
-					},
-					[[
-						"span",
-						{ class: "icon m-0" },
-						"<i class=\"yi-copy\"></i>"
-					], [
-						"span",
-						{
-							class: "is-hidden-mobile pl-1 pr-1",
-							i18n: "copy"
-						},
-						"copy"
-					]],
-					{ click: function(evt) {
-						evt.stopPropagation();
-						gobj_send_event(gobj, "EV_COPY_RECORD", {}, gobj);
-					} }
-				], [
-					"button",
-					{
-						class: "button p-1",
-						title: "paste",
-						"aria-label": "paste"
-					},
-					[[
-						"span",
-						{ class: "icon m-0" },
-						"<i class=\"yi-paste\"></i>"
-					], [
-						"span",
-						{
-							class: "is-hidden-mobile pl-1 pr-1",
-							i18n: "paste"
-						},
-						"paste"
-					]],
-					{ click: async function(evt) {
-						evt.stopPropagation();
-						await readClipboard$1(gobj);
-					} }
-				]]
-			]]
-		]]
+		], build_toolbar(gobj)]
 	]);
 	gobj_write_attr(gobj, "$container", $container);
 	apply_form_mode(gobj, $container.querySelector("form"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "5.6.0",
+  "version": "5.7.1",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",
@@ -38,7 +38,7 @@
     "@yuneta/gobj-js": "^7.8.7",
     "bulma": "^1.0.4",
     "i18next": "^26.3.6",
-    "maplibre-gl": "^6.0.0",
+    "maplibre-gl": "^6.1.0",
     "tabulator-tables": "^6.5.2",
     "tom-select": "^2.6.2",
     "uplot": "^1.6.32",

package/src/c_yui_form.js

@@ -57,6 +57,7 @@ import { createJSONEditor } from 'vanilla-jsoneditor';
 import "vanilla-jsoneditor/themes/jse-theme-dark.css";
 import "./c_yui_form.css";
 import {attach_clear, refresh_clear} from "./yui_inputs.js";
+import {plan_toolbar} from "./form_toolbar_plan.js";
 /*  Read at field-build time only — deliberately NOT watched: the hosting
  *  dialog rebuilds the form on every open, and re-rendering a form under
  *  the user mid-edit would throw away what they typed. */
@@ -96,6 +97,20 @@ SDATA(data_type_t.DTP_BOOLEAN,  "selectable",       0,  true,   "Rows selectable
 SDATA(data_type_t.DTP_BOOLEAN,  "with_checkbox",    0,  false,  "Show a first column with checkbox to select rows"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_rownum",      0,  false,  "Print first column with row number"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_delete_row_btn", 0,  false, "Print last column with delete row button"),
+/*
+ *  Which buttons the bottom toolbar shows, and in which order.  The
+ *  default is the five it has always shown, so nothing moves for a
+ *  caller that does not set it.
+ *
+ *  It exists because the toolbar was hardcoded: a three-field sign-up
+ *  dialog with ONE action still got save + undo + clear + copy + paste,
+ *  and the only way out was to not use this gclass at all.  `[]` hides
+ *  the toolbar entirely, for a caller that supplies its own buttons.
+ *
+ *  Unknown names are ignored, with a warning: a typo must not silently
+ *  drop the save button.
+ */
+SDATA(data_type_t.DTP_JSON,     "toolbar",          0,  ["save", "undo", "clear", "copy", "paste"], "Toolbar buttons to show, in order: save, undo, clear, copy, paste. [] hides the toolbar"),
 /*
  *  Defaults for tabulator
  */
@@ -204,6 +219,29 @@ function set_changed_stated(gobj, changed)
     let $container = gobj_read_attr(gobj, "$container");
     let $form = $container.querySelector('form');
 
+    /*
+     *  Los dos pueden NO estar: desde que la botonera es configurable
+     *  (`toolbar`), un dialogo de una sola accion pide ["save"] y aqui no
+     *  hay undo que habilitar.  Antes se daban por presentes y quitar uno
+     *  reventaba con "can't access property setAttribute, a is null" al
+     *  primer cambio en el formulario.
+     */
+    const enable = ($btn, on, color) => {
+        if(!$btn) {
+            return;
+        }
+        if(on) {
+            $btn.removeAttribute("disabled");
+        } else {
+            $btn.setAttribute("disabled", true);
+        }
+        const $i = $btn.querySelector('span i');
+        if($i) {
+            $i.style.color = color;
+        }
+    };
+    const OFF_COLOR = "hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-color-l))";
+
     let $button_save = $container.querySelector('.button-save');
     let $button_undo = $container.querySelector('.button-undo');
 
@@ -213,11 +251,8 @@ function set_changed_stated(gobj, changed)
          */
         gobj_write_bool_attr(gobj, "changes", true);
 
-        $button_save.removeAttribute("disabled");
-        $button_undo.removeAttribute("disabled");
-
-        $button_save.querySelector('span i').style.color = "MediumSeaGreen";
-        $button_undo.querySelector('span i').style.color = "Magenta";
+        enable($button_save, true, "MediumSeaGreen");
+        enable($button_undo, true, "Magenta");
 
         $form.querySelectorAll('.yui-tabulator-table').forEach($table => {
             if(isEventSet($table.tabulator, "dataChanged")) {
@@ -237,11 +272,8 @@ function set_changed_stated(gobj, changed)
          */
         gobj_write_bool_attr(gobj, "changes", false);
 
-        $button_save.setAttribute("disabled", true);
-        $button_undo.setAttribute("disabled", true);
-
-        $button_save.querySelector('span i').style.color = "hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-color-l))";
-        $button_undo.querySelector('span i').style.color = "hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-color-l))";
+        enable($button_save, false, OFF_COLOR);
+        enable($button_undo, false, OFF_COLOR);
 
         // TODO improve
         setTimeout(function() {
@@ -283,6 +315,90 @@ async function readClipboard(gobj)
     }
 }
 
+/************************************************************
+ *   Bottom toolbar, from the `toolbar` attr.
+ *
+ *   The five buttons it can show, and their order, are the
+ *   caller's: a dialog with a single action asks for ["save"],
+ *   and [] leaves no toolbar at all.  Default is the five it
+ *   always had, so nothing moves for a caller that says nothing.
+ ************************************************************/
+function toolbar_button(gobj, name)
+{
+    switch(name) {
+        case "save":
+            return ['button', {class: 'button p-1 button-save', title: 'save', 'aria-label': 'save', disabled: true}, [
+                ['span', {class: 'icon m-0'}, '<i class="yi-floppy-disk"></i>'],
+                ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'save'}, 'save']
+            ], {
+                click: function(evt) {
+                    evt.stopPropagation();
+                    gobj_send_event(gobj, "EV_SAVE_RECORD", {}, gobj);
+                }
+            }];
+        case "undo":
+            return ['button', {class: 'button p-1 button-undo', title: 'undo', 'aria-label': 'undo', disabled: true}, [
+                ['span', {class: 'icon m-0'}, '<i class="yi-arrow-rotate-left"></i>'],
+                ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'undo'}, 'undo']
+            ], {
+                click: function(evt) {
+                    evt.stopPropagation();
+                    gobj_send_event(gobj, "EV_UNDO_RECORD", {}, gobj);
+                }
+            }];
+        case "clear":
+            return ['button', {class: 'button p-1', title: 'clear', 'aria-label': 'clear'}, [
+                ['span', {class: 'icon m-0'}, '<i class="yi-broom-wide"></i>'],
+                ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'clear'}, 'clear']
+            ], {
+                click: function(evt) {
+                    evt.stopPropagation();
+                    gobj_send_event(gobj, "EV_CLEAR_RECORD", {}, gobj);
+                }
+            }];
+        case "copy":
+            return ['button', {class: 'button p-1', title: 'copy', 'aria-label': 'copy'}, [
+                ['span', {class: 'icon m-0'}, '<i class="yi-copy"></i>'],
+                ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'copy'}, 'copy']
+            ], {click: function(evt) {
+                    evt.stopPropagation();
+                    gobj_send_event(gobj, "EV_COPY_RECORD", {}, gobj);
+                }
+            }];
+        case "paste":
+            return ['button', {class: 'button p-1', title: 'paste', 'aria-label': 'paste'}, [
+                ['span', {class: 'icon m-0'}, '<i class="yi-paste"></i>'],
+                ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'paste'}, 'paste']
+            ], {click: async function(evt) {
+                    evt.stopPropagation();
+                    await readClipboard(gobj);
+                }
+            }];
+        default:
+            return null;   /*  plan_toolbar() already warned  */
+    }
+}
+
+function build_toolbar(gobj)
+{
+    const plan = plan_toolbar(gobj_read_attr(gobj, "toolbar"));
+
+    for(let name of plan.unknown) {
+        /*  A typo must not silently drop the save button. */
+        log_warning(`${gobj_short_name(gobj)}: unknown toolbar button '${name}'`);
+    }
+    if(!plan.left.length && !plan.right.length) {
+        return ['span', {class: 'yui-toolbar-form-empty', style: 'display:none;'}, ''];
+    }
+
+    return ['div', {class: 'yui-toolbar-form is-flex-shrink-0 is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center', style: 'width:100%; flex-wrap:wrap; row-gap:6px;'}, [
+        ['div', {class: 'p-1 is-flex is-flex-direction-row is-align-items-center', style:'column-gap:6px;'},
+            plan.left.map((n) => toolbar_button(gobj, n))],
+        ['div', {class: 'p-1 is-flex is-flex-direction-row is-align-items-center', style:'column-gap:6px;'},
+            plan.right.map((n) => toolbar_button(gobj, n))]
+    ]];
+}
+
 /************************************************************
  *   Build UI
  ************************************************************/
@@ -314,81 +430,7 @@ function build_ui(gobj)
             /*----------------------------*
              *      Bottom toolbar
              *----------------------------*/
-            ['div', {class: 'yui-toolbar-form is-flex-shrink-0 is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center', style: 'width:100%; flex-wrap:wrap; row-gap:6px;'}, [
-
-                /*----------------------------*
-                 *      Left buttons
-                 *----------------------------*/
-                ['div', {class: 'p-1 is-flex is-flex-direction-row is-align-items-center', style:'column-gap:6px;'}, [
-                    /*----------------------------*
-                     *      Save
-                     *----------------------------*/
-                    ['button', {class: 'button p-1 button-save', title: 'save', 'aria-label': 'save', disabled: true}, [
-                        ['span', {class: 'icon m-0'}, '<i class="yi-floppy-disk"></i>'],
-                        ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'save'}, 'save']
-                    ], {
-                        click: function(evt) {
-                            evt.stopPropagation();
-                            gobj_send_event(gobj, "EV_SAVE_RECORD", {}, gobj);
-                        }
-                    }],
-
-                    /*----------------------------*
-                     *      Undo
-                     *----------------------------*/
-                    ['button', {class: 'button p-1 button-undo', title: 'undo', 'aria-label': 'undo', disabled: true}, [
-                        ['span', {class: 'icon m-0'}, '<i class="yi-arrow-rotate-left"></i>'],
-                        ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'undo'}, 'undo']
-                    ], {
-                        click: function(evt) {
-                            evt.stopPropagation();
-                            gobj_send_event(gobj, "EV_UNDO_RECORD", {}, gobj);
-                        }
-                    }],
-
-                    /*----------------------------*
-                     *      Clear
-                     *----------------------------*/
-                    ['button', {class: 'button p-1', title: 'clear', 'aria-label': 'clear'}, [
-                        ['span', {class: 'icon m-0'}, '<i class="yi-broom-wide"></i>'],
-                        ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'clear'}, 'clear']
-                    ], {
-                        click: function(evt) {
-                            evt.stopPropagation();
-                            gobj_send_event(gobj, "EV_CLEAR_RECORD", {}, gobj);
-                        }
-                    }],
-                ]],
-
-                /*----------------------------*
-                 *      Right buttons
-                 *----------------------------*/
-                ['div', {class: 'p-1 is-flex is-flex-direction-row is-align-items-center', style:'column-gap:6px;'}, [
-                    /*----------------------------*
-                     *      Copy
-                     *----------------------------*/
-                    ['button', {class: 'button p-1', title: 'copy', 'aria-label': 'copy'}, [
-                        ['span', {class: 'icon m-0'}, '<i class="yi-copy"></i>'],
-                        ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'copy'}, 'copy']
-                    ], {click: function(evt) {
-                            evt.stopPropagation();
-                            gobj_send_event(gobj, "EV_COPY_RECORD", {}, gobj);
-                        }
-                    }],
-
-                    /*----------------------------*
-                     *      Paste
-                     *----------------------------*/
-                    ['button', {class: 'button p-1', title: 'paste', 'aria-label': 'paste'}, [
-                        ['span', {class: 'icon m-0'}, '<i class="yi-paste"></i>'],
-                        ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'paste'}, 'paste']
-                    ], {click: async function(evt) {
-                            evt.stopPropagation();
-                            await readClipboard(gobj);
-                        }
-                    }]
-                ]]
-            ]]
+            build_toolbar(gobj)
         ]]
     );
 

package/src/form_toolbar_plan.js

@@ -0,0 +1,59 @@
+/***********************************************************************
+ *          form_toolbar_plan.js
+ *
+ *      Which buttons the C_YUI_FORM toolbar shows, and where.
+ *
+ *      Pure, so it can be tested without a DOM: the gclass turns the
+ *      plan into elements, this decides the plan.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+
+/*  Save/undo/clear sit on the left of the bar, copy/paste on the right.
+ *  That split is what the layout has always drawn, and keeping it means
+ *  a caller who drops one group does not leave a hole in the middle. */
+const LEFT_BUTTONS  = ["save", "undo", "clear"];
+const RIGHT_BUTTONS = ["copy", "paste"];
+
+const DEFAULT_TOOLBAR = ["save", "undo", "clear", "copy", "paste"];
+
+
+/***************************************************************
+ *  plan_toolbar(wanted) -> {left, right, unknown}
+ *
+ *      wanted   an array of button names, in the order asked for.
+ *               Anything that is not an array means "the default
+ *               five", so a caller that sets nothing keeps exactly
+ *               the toolbar this gclass always had.
+ *               [] means no toolbar at all.
+ *
+ *      unknown  names that match no button.  They are reported and
+ *               NOT silently dropped: a typo in the list would
+ *               otherwise remove the save button with no trace.
+ ***************************************************************/
+function plan_toolbar(wanted)
+{
+    if(!Array.isArray(wanted)) {
+        wanted = DEFAULT_TOOLBAR;
+    }
+
+    let left = [];
+    let right = [];
+    let unknown = [];
+
+    for(let name of wanted) {
+        if(LEFT_BUTTONS.indexOf(name) >= 0) {
+            left.push(name);
+        } else if(RIGHT_BUTTONS.indexOf(name) >= 0) {
+            right.push(name);
+        } else {
+            unknown.push(name);
+        }
+    }
+
+    return {left, right, unknown};
+}
+
+
+export {plan_toolbar, DEFAULT_TOOLBAR};

package/src/form_toolbar_plan.test.js

@@ -0,0 +1,54 @@
+import {describe, it, expect} from "vitest";
+import {plan_toolbar, DEFAULT_TOOLBAR} from "./form_toolbar_plan.js";
+
+describe("plan_toolbar", () => {
+
+    it("says nothing -> the five buttons this gclass always had", () => {
+        const p = plan_toolbar(undefined);
+        expect(p.left).toEqual(["save", "undo", "clear"]);
+        expect(p.right).toEqual(["copy", "paste"]);
+        expect(p.unknown).toEqual([]);
+        expect(DEFAULT_TOOLBAR.length).toBe(5);
+    });
+
+    it("a non-array is not an empty toolbar: it is the default", () => {
+        /*  Reading a JSON attr that was never set must not silently
+         *  leave a form with no save button. */
+        for(const v of [null, "save", 0, {}]) {
+            expect(plan_toolbar(v).left).toContain("save");
+        }
+    });
+
+    it("[] leaves no toolbar at all", () => {
+        const p = plan_toolbar([]);
+        expect(p.left).toEqual([]);
+        expect(p.right).toEqual([]);
+        expect(p.unknown).toEqual([]);
+    });
+
+    it("one action: a dialog asks for save only", () => {
+        const p = plan_toolbar(["save"]);
+        expect(p.left).toEqual(["save"]);
+        expect(p.right).toEqual([]);
+    });
+
+    it("keeps the order asked for inside each side", () => {
+        const p = plan_toolbar(["clear", "save", "paste", "copy"]);
+        expect(p.left).toEqual(["clear", "save"]);
+        expect(p.right).toEqual(["paste", "copy"]);
+    });
+
+    it("an unknown name is REPORTED, never silently dropped", () => {
+        /*  A typo here would otherwise remove a button and leave no
+         *  trace of why it is missing. */
+        const p = plan_toolbar(["save", "sav", "undo"]);
+        expect(p.left).toEqual(["save", "undo"]);
+        expect(p.unknown).toEqual(["sav"]);
+    });
+
+    it("drops one whole side without disturbing the other", () => {
+        const p = plan_toolbar(["save", "undo", "clear"]);
+        expect(p.left).toEqual(["save", "undo", "clear"]);
+        expect(p.right).toEqual([]);
+    });
+});