@yuneta/gobj-ui 5.7.1 → 5.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/gobj-ui.cjs.js +22 -17
  2. package/dist/gobj-ui.es.js +22 -17
  3. package/package.json +1 -1
  4. package/src/c_yui_form.js +15 -6
  5. package/src/form_toolbar_plan.js +8 -1
  6. package/src/form_toolbar_plan.test.js +11 -0
package/dist/gobj-ui.cjs.js CHANGED
@@ -5809,7 +5809,8 @@ function plan_toolbar(wanted) {
5809
5809
  return {
5810
5810
  left,
5811
5811
  right,
5812
- unknown
5812
+ unknown,
5813
+ single_group: left.length === 0 !== (right.length === 0)
5813
5814
  };
5814
5815
  }
5815
5816
  //#endregion
@@ -6210,27 +6211,31 @@ function build_toolbar(gobj) {
6210
6211
  },
6211
6212
  ""
6212
6213
  ];
6214
+ const justify = plan.single_group ? "is-justify-content-center" : "is-justify-content-space-between";
6215
+ let groups = [];
6216
+ if (plan.left.length) groups.push([
6217
+ "div",
6218
+ {
6219
+ class: "p-1 is-flex is-flex-direction-row is-align-items-center",
6220
+ style: "column-gap:6px;"
6221
+ },
6222
+ plan.left.map((n) => toolbar_button(gobj, n))
6223
+ ]);
6224
+ if (plan.right.length) groups.push([
6225
+ "div",
6226
+ {
6227
+ class: "p-1 is-flex is-flex-direction-row is-align-items-center",
6228
+ style: "column-gap:6px;"
6229
+ },
6230
+ plan.right.map((n) => toolbar_button(gobj, n))
6231
+ ]);
6213
6232
  return [
6214
6233
  "div",
6215
6234
  {
6216
- class: "yui-toolbar-form is-flex-shrink-0 is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center",
6235
+ class: `yui-toolbar-form is-flex-shrink-0 is-flex is-flex-direction-row ${justify} is-align-items-center`,
6217
6236
  style: "width:100%; flex-wrap:wrap; row-gap:6px;"
6218
6237
  },
6219
- [[
6220
- "div",
6221
- {
6222
- class: "p-1 is-flex is-flex-direction-row is-align-items-center",
6223
- style: "column-gap:6px;"
6224
- },
6225
- plan.left.map((n) => toolbar_button(gobj, n))
6226
- ], [
6227
- "div",
6228
- {
6229
- class: "p-1 is-flex is-flex-direction-row is-align-items-center",
6230
- style: "column-gap:6px;"
6231
- },
6232
- plan.right.map((n) => toolbar_button(gobj, n))
6233
- ]]
6238
+ groups
6234
6239
  ];
6235
6240
  }
6236
6241
  /************************************************************
package/dist/gobj-ui.es.js CHANGED
@@ -5804,7 +5804,8 @@ function plan_toolbar(wanted) {
5804
5804
  return {
5805
5805
  left,
5806
5806
  right,
5807
- unknown
5807
+ unknown,
5808
+ single_group: left.length === 0 !== (right.length === 0)
5808
5809
  };
5809
5810
  }
5810
5811
  //#endregion
@@ -6205,27 +6206,31 @@ function build_toolbar(gobj) {
6205
6206
  },
6206
6207
  ""
6207
6208
  ];
6209
+ const justify = plan.single_group ? "is-justify-content-center" : "is-justify-content-space-between";
6210
+ let groups = [];
6211
+ if (plan.left.length) groups.push([
6212
+ "div",
6213
+ {
6214
+ class: "p-1 is-flex is-flex-direction-row is-align-items-center",
6215
+ style: "column-gap:6px;"
6216
+ },
6217
+ plan.left.map((n) => toolbar_button(gobj, n))
6218
+ ]);
6219
+ if (plan.right.length) groups.push([
6220
+ "div",
6221
+ {
6222
+ class: "p-1 is-flex is-flex-direction-row is-align-items-center",
6223
+ style: "column-gap:6px;"
6224
+ },
6225
+ plan.right.map((n) => toolbar_button(gobj, n))
6226
+ ]);
6208
6227
  return [
6209
6228
  "div",
6210
6229
  {
6211
- class: "yui-toolbar-form is-flex-shrink-0 is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center",
6230
+ class: `yui-toolbar-form is-flex-shrink-0 is-flex is-flex-direction-row ${justify} is-align-items-center`,
6212
6231
  style: "width:100%; flex-wrap:wrap; row-gap:6px;"
6213
6232
  },
6214
- [[
6215
- "div",
6216
- {
6217
- class: "p-1 is-flex is-flex-direction-row is-align-items-center",
6218
- style: "column-gap:6px;"
6219
- },
6220
- plan.left.map((n) => toolbar_button(gobj, n))
6221
- ], [
6222
- "div",
6223
- {
6224
- class: "p-1 is-flex is-flex-direction-row is-align-items-center",
6225
- style: "column-gap:6px;"
6226
- },
6227
- plan.right.map((n) => toolbar_button(gobj, n))
6228
- ]]
6233
+ groups
6229
6234
  ];
6230
6235
  }
6231
6236
  /************************************************************
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yuneta/gobj-ui",
3
- "version": "5.7.1",
3
+ "version": "5.7.2",
4
4
  "type": "module",
5
5
  "main": "dist/gobj-ui.cjs.js",
6
6
  "module": "dist/gobj-ui.es.js",
package/src/c_yui_form.js CHANGED
@@ -391,12 +391,21 @@ function build_toolbar(gobj)
391
391
  return ['span', {class: 'yui-toolbar-form-empty', style: 'display:none;'}, ''];
392
392
  }
393
393
 
394
- 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;'}, [
395
- ['div', {class: 'p-1 is-flex is-flex-direction-row is-align-items-center', style:'column-gap:6px;'},
396
- plan.left.map((n) => toolbar_button(gobj, n))],
397
- ['div', {class: 'p-1 is-flex is-flex-direction-row is-align-items-center', style:'column-gap:6px;'},
398
- plan.right.map((n) => toolbar_button(gobj, n))]
399
- ]];
394
+ const justify = plan.single_group
395
+ ? 'is-justify-content-center'
396
+ : 'is-justify-content-space-between';
397
+
398
+ let groups = [];
399
+ if(plan.left.length) {
400
+ groups.push(['div', {class: 'p-1 is-flex is-flex-direction-row is-align-items-center', style:'column-gap:6px;'},
401
+ plan.left.map((n) => toolbar_button(gobj, n))]);
402
+ }
403
+ if(plan.right.length) {
404
+ groups.push(['div', {class: 'p-1 is-flex is-flex-direction-row is-align-items-center', style:'column-gap:6px;'},
405
+ plan.right.map((n) => toolbar_button(gobj, n))]);
406
+ }
407
+
408
+ 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];
400
409
  }
401
410
 
402
411
  /************************************************************
package/src/form_toolbar_plan.js CHANGED
@@ -52,7 +52,14 @@ function plan_toolbar(wanted)
52
52
  }
53
53
  }
54
54
 
55
- return {left, right, unknown};
55
+ /* Con un solo grupo, repartir con `space-between` deja el boton
56
+ * pegado a un borde y el hueco entero al otro lado: un dialogo de
57
+ * una accion se ve mejor centrado. Lo decide aqui y no el CSS de
58
+ * quien llama, porque la clase que lo reparte es un helper de Bulma
59
+ * y esos llevan `!important`: una regla de app no puede ganarles. */
60
+ const single_group = (left.length === 0) !== (right.length === 0);
61
+
62
+ return {left, right, unknown, single_group};
56
63
  }
57
64
 
58
65
 
package/src/form_toolbar_plan.test.js CHANGED
@@ -46,6 +46,17 @@ describe("plan_toolbar", () => {
46
46
  expect(p.unknown).toEqual(["sav"]);
47
47
  });
48
48
 
49
+ it("one group centres; two groups keep the split", () => {
50
+ /* La clase que reparte es un helper de Bulma, con !important:
51
+ * si no se decide aqui, ninguna regla de app puede centrarlo. */
52
+ expect(plan_toolbar(["save"]).single_group).toBe(true);
53
+ expect(plan_toolbar(["save", "undo", "clear"]).single_group).toBe(true);
54
+ expect(plan_toolbar(["copy", "paste"]).single_group).toBe(true);
55
+ expect(plan_toolbar(undefined).single_group).toBe(false);
56
+ expect(plan_toolbar(["save", "copy"]).single_group).toBe(false);
57
+ expect(plan_toolbar([]).single_group).toBe(false);
58
+ });
59
+
49
60
  it("drops one whole side without disturbing the other", () => {
50
61
  const p = plan_toolbar(["save", "undo", "clear"]);
51
62
  expect(p.left).toEqual(["save", "undo", "clear"]);