@yuneta/gobj-ui 5.7.1 → 5.8.0

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
@@ -6210,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
@@ -6205,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.1",
+  "version": "5.8.0",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_yui_form.js

@@ -391,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"]);

package/src/shell_modals.js

@@ -562,6 +562,33 @@ export function yui_shell_confirm_yesno(shell, message, opts)
     ], opts).then(v => v === "yes");
 }
 
+/***************************************************************
+ *  A DESTRUCTIVE confirmation: the button that does the damage is
+ *  red, not blue.
+ *
+ *  yui_shell_confirm_yesno() puts its yes in `is-link`, which is
+ *  the right colour for "do you want to continue" and the wrong
+ *  one for "this deletes an account": the two read the same at a
+ *  glance, and the destructive one is the one that must not be
+ *  clicked by reflex.  The safe answer is also the LAST button,
+ *  so Escape, the backdrop and the X all resolve to it.
+ *
+ *  Returns a Promise<boolean>: true only if the red button was
+ *  pressed.
+ ***************************************************************/
+export function yui_shell_confirm_danger(shell, message, opts)
+{
+    let confirm_label = (opts && opts.confirm_label) || "Delete";
+    let cancel_label  = (opts && opts.cancel_label)  || "Cancel";
+    if(!opts || !opts.type) {
+        opts = Object.assign({}, opts, {type: "danger"});
+    }
+    return build_dialog(shell, message, [
+        {label: confirm_label, value: "confirm", kind: "danger"},
+        {label: cancel_label,  value: "cancel"}
+    ], opts).then(v => v === "confirm");
+}
+
 export function yui_shell_confirm_yesnocancel(shell, message, opts)
 {
     let yes_label    = (opts && opts.yes_label)    || "Yes";