@yuneta/gobj-ui 5.7.0 → 5.7.2

package/dist/gobj-ui.cjs.js

@@ -5809,7 +5809,8 @@ function plan_toolbar(wanted) {
 	return {
 		left,
 		right,
-		unknown
+		unknown,
+		single_group: left.length === 0 !== (right.length === 0)
 	};
 }
 //#endregion
@@ -6013,14 +6014,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) => {
@@ -6029,10 +6036,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");
@@ -6206,27 +6211,31 @@ function build_toolbar(gobj) {
 		},
 		""
 	];
+	const justify = plan.single_group ? "is-justify-content-center" : "is-justify-content-space-between";
+	let groups = [];
+	if (plan.left.length) groups.push([
+		"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))
+	]);
+	if (plan.right.length) groups.push([
+		"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))
+	]);
 	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",
+			class: `yui-toolbar-form is-flex-shrink-0 is-flex is-flex-direction-row ${justify} 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))
-		]]
+		groups
 	];
 }
 /************************************************************

package/dist/gobj-ui.es.js

@@ -5804,7 +5804,8 @@ function plan_toolbar(wanted) {
 	return {
 		left,
 		right,
-		unknown
+		unknown,
+		single_group: left.length === 0 !== (right.length === 0)
 	};
 }
 //#endregion
@@ -6008,14 +6009,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) => {
@@ -6024,10 +6031,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");
@@ -6201,27 +6206,31 @@ function build_toolbar(gobj) {
 		},
 		""
 	];
+	const justify = plan.single_group ? "is-justify-content-center" : "is-justify-content-space-between";
+	let groups = [];
+	if (plan.left.length) groups.push([
+		"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))
+	]);
+	if (plan.right.length) groups.push([
+		"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))
+	]);
 	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",
+			class: `yui-toolbar-form is-flex-shrink-0 is-flex is-flex-direction-row ${justify} 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))
-		]]
+		groups
 	];
 }
 /************************************************************

package/package.json

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

package/src/c_yui_form.js

@@ -219,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');
 
@@ -228,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")) {
@@ -252,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() {
@@ -374,12 +391,21 @@ function build_toolbar(gobj)
         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))]
-    ]];
+    const justify = plan.single_group
+        ? 'is-justify-content-center'
+        : 'is-justify-content-space-between';
+
+    let groups = [];
+    if(plan.left.length) {
+        groups.push(['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))]);
+    }
+    if(plan.right.length) {
+        groups.push(['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))]);
+    }
+
+    return ['div', {class: `yui-toolbar-form is-flex-shrink-0 is-flex is-flex-direction-row ${justify} is-align-items-center`, style: 'width:100%; flex-wrap:wrap; row-gap:6px;'}, groups];
 }
 
 /************************************************************

package/src/form_toolbar_plan.js

@@ -52,7 +52,14 @@ function plan_toolbar(wanted)
         }
     }
 
-    return {left, right, unknown};
+    /*  Con un solo grupo, repartir con `space-between` deja el boton
+     *  pegado a un borde y el hueco entero al otro lado: un dialogo de
+     *  una accion se ve mejor centrado.  Lo decide aqui y no el CSS de
+     *  quien llama, porque la clase que lo reparte es un helper de Bulma
+     *  y esos llevan `!important`: una regla de app no puede ganarles. */
+    const single_group = (left.length === 0) !== (right.length === 0);
+
+    return {left, right, unknown, single_group};
 }
 
 

package/src/form_toolbar_plan.test.js

@@ -46,6 +46,17 @@ describe("plan_toolbar", () => {
         expect(p.unknown).toEqual(["sav"]);
     });
 
+    it("one group centres; two groups keep the split", () => {
+        /*  La clase que reparte es un helper de Bulma, con !important:
+         *  si no se decide aqui, ninguna regla de app puede centrarlo. */
+        expect(plan_toolbar(["save"]).single_group).toBe(true);
+        expect(plan_toolbar(["save", "undo", "clear"]).single_group).toBe(true);
+        expect(plan_toolbar(["copy", "paste"]).single_group).toBe(true);
+        expect(plan_toolbar(undefined).single_group).toBe(false);
+        expect(plan_toolbar(["save", "copy"]).single_group).toBe(false);
+        expect(plan_toolbar([]).single_group).toBe(false);
+    });
+
     it("drops one whole side without disturbing the other", () => {
         const p = plan_toolbar(["save", "undo", "clear"]);
         expect(p.left).toEqual(["save", "undo", "clear"]);