@yuneta/gobj-ui 7.23.55 → 7.23.57

package/dist/gobj-ui.cjs.js

@@ -5900,18 +5900,18 @@ function refresh_clear($input) {
 *          Copyright (c) 2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/
-var LEFT_BUTTONS = [
-	"save",
+var LEFT_BUTTONS = ["copy", "paste"];
+var RIGHT_BUTTONS = [
 	"undo",
-	"clear"
+	"clear",
+	"save"
 ];
-var RIGHT_BUTTONS = ["copy", "paste"];
 var DEFAULT_TOOLBAR = [
-	"save",
+	"copy",
+	"paste",
 	"undo",
 	"clear",
-	"copy",
-	"paste"
+	"save"
 ];
 /***************************************************************
 *  plan_toolbar(wanted) -> {left, right, unknown}
@@ -7515,7 +7515,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 		$extend.dataset.form_tag = tag;
 		$extend.dataset.form_input_type = inputType;
 		$extend.classList.add("yui-form-data-input");
-		apply_readonly_to_control(readonly, tag, $extend);
+		apply_readonly_to_control(readonly, tag, inputType, $extend);
 	}
 	return $element;
 }
@@ -7536,7 +7536,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 *  control is still read -- unlike in a native submit, where it would
 *  be dropped.
 ******************************************************************/
-function apply_readonly_to_control(readonly, tag, $extend) {
+function apply_readonly_to_control(readonly, tag, inputType, $extend) {
 	if (!readonly) return;
 	switch (tag) {
 		case "select":
@@ -7547,6 +7547,11 @@ function apply_readonly_to_control(readonly, tag, $extend) {
 		case "select2":
 			$extend.setAttribute("disabled", "disabled");
 			if ($extend.tom_select) $extend.tom_select.disable();
+			break;
+		case "jsoneditor":
+			$extend.classList.add("yui-jse-readonly");
+			break;
+		case "input": if (inputType === "color") $extend.setAttribute("disabled", "disabled");
 	}
 }
 /******************************************************************

package/dist/gobj-ui.es.js

@@ -5895,18 +5895,18 @@ function refresh_clear($input) {
 *          Copyright (c) 2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/
-var LEFT_BUTTONS = [
-	"save",
+var LEFT_BUTTONS = ["copy", "paste"];
+var RIGHT_BUTTONS = [
 	"undo",
-	"clear"
+	"clear",
+	"save"
 ];
-var RIGHT_BUTTONS = ["copy", "paste"];
 var DEFAULT_TOOLBAR = [
-	"save",
+	"copy",
+	"paste",
 	"undo",
 	"clear",
-	"copy",
-	"paste"
+	"save"
 ];
 /***************************************************************
 *  plan_toolbar(wanted) -> {left, right, unknown}
@@ -7510,7 +7510,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 		$extend.dataset.form_tag = tag;
 		$extend.dataset.form_input_type = inputType;
 		$extend.classList.add("yui-form-data-input");
-		apply_readonly_to_control(readonly, tag, $extend);
+		apply_readonly_to_control(readonly, tag, inputType, $extend);
 	}
 	return $element;
 }
@@ -7531,7 +7531,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 *  control is still read -- unlike in a native submit, where it would
 *  be dropped.
 ******************************************************************/
-function apply_readonly_to_control(readonly, tag, $extend) {
+function apply_readonly_to_control(readonly, tag, inputType, $extend) {
 	if (!readonly) return;
 	switch (tag) {
 		case "select":
@@ -7542,6 +7542,11 @@ function apply_readonly_to_control(readonly, tag, $extend) {
 		case "select2":
 			$extend.setAttribute("disabled", "disabled");
 			if ($extend.tom_select) $extend.tom_select.disable();
+			break;
+		case "jsoneditor":
+			$extend.classList.add("yui-jse-readonly");
+			break;
+		case "input": if (inputType === "color") $extend.setAttribute("disabled", "disabled");
 	}
 }
 /******************************************************************

package/package.json

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

package/src/c_yui_form.css

@@ -57,3 +57,25 @@
     overscroll-behavior: contain;
 }
 
+
+/*  A colour that cannot be changed. `readonly` does not apply to a colour
+ *  input (the spec lists the types it applies to and colour is not one),
+ *  so it is `disabled` instead -- and a disabled swatch is drawn by the
+ *  browser as a pale ghost of itself, which loses the one thing the field
+ *  is for: seeing the colour. Keep the swatch, lose the affordance.  */
+.C_YUI_FORM input[type="color"][disabled] {
+    opacity: 1;
+    cursor: default;
+    border-color: var(--bulma-border, #dbdbdb);
+}
+
+/*  A json document that cannot be edited. The editor is read-only for
+ *  real (`readOnly` at build time); this is what makes it LOOK it --
+ *  the menu bar is the whole invitation, and it offers nothing that
+ *  reading needs.  */
+.C_YUI_FORM .yui-jse-readonly .jse-menu {
+    display: none !important;
+}
+.C_YUI_FORM .yui-jse-readonly {
+    background-color: var(--bulma-background, #f5f5f5);
+}

package/src/c_yui_form.js

@@ -1450,7 +1450,7 @@ function create_form_field(
         $extend.dataset.form_input_type = inputType;
         $extend.classList.add('yui-form-data-input');
 
-        apply_readonly_to_control(readonly, tag, $extend);
+        apply_readonly_to_control(readonly, tag, inputType, $extend);
     }
 
     return $element;
@@ -1473,7 +1473,7 @@ function create_form_field(
  *  control is still read -- unlike in a native submit, where it would
  *  be dropped.
  ******************************************************************/
-function apply_readonly_to_control(readonly, tag, $extend)
+function apply_readonly_to_control(readonly, tag, inputType, $extend)
 {
     if(!readonly) {
         return;
@@ -1491,9 +1491,26 @@ function apply_readonly_to_control(readonly, tag, $extend)
                 $extend.tom_select.disable();
             }
             break;
+        case 'jsoneditor':
+            /*  It IS read-only -- `readOnly` went to the editor when it was
+             *  built -- and it did not LOOK it: a json editor with its menu
+             *  bar on top invites an edit it will discard. The class mutes
+             *  it (c_yui_form.css), which is the same thing a readonly
+             *  `input` has done since it existed.  */
+            $extend.classList.add('yui-jse-readonly');
+            break;
+        case 'input':
+            /*  `readonly` does not apply to a colour input -- the spec lists
+             *  the types it applies to and colour is not one of them -- so
+             *  the swatch opens its picker and the value changes, and in a
+             *  form that only sends writable cols the change is then
+             *  silently dropped. Date and time DO honour it, and keep it:
+             *  readonly stays selectable and copyable, disabled does not.  */
+            if(inputType === 'color') {
+                $extend.setAttribute("disabled", "disabled");
+            }
+            break;
         default:
-            /*  A text control already carries `readonly`, which is the
-             *  better of the two: it stays selectable and copyable.  */
             break;
     }
 }

package/src/form_toolbar_plan.js

@@ -10,13 +10,25 @@
  *          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"];
+/*  Two groups, and the split is a real one: `undo`, `clear` and `save`
+ *  act on the RECORD being edited, `copy` and `paste` move it in and out
+ *  of the clipboard. Keeping them apart means a caller who drops one
+ *  group does not leave a hole in the middle.
+ *
+ *  WHICH SIDE EACH ONE TAKES CHANGED (2026-09-04), and the reason is that
+ *  the form changed shape: it was an embedded panel and it opens as a
+ *  MODAL DIALOG now. In a dialog the primary action goes bottom-RIGHT --
+ *  every platform puts it there, and it is where the eye ends after
+ *  reading the fields. `save` sat hard against the left edge, which is
+ *  where a person looks last.
+ *
+ *  So: clipboard on the left, record actions on the right, and `save`
+ *  LAST of all. The order inside a group is the order asked for, which
+ *  is why DEFAULT_TOOLBAR is written in the order it is drawn.  */
+const LEFT_BUTTONS  = ["copy", "paste"];
+const RIGHT_BUTTONS = ["undo", "clear", "save"];
 
-const DEFAULT_TOOLBAR = ["save", "undo", "clear", "copy", "paste"];
+const DEFAULT_TOOLBAR = ["copy", "paste", "undo", "clear", "save"];
 
 
 /***************************************************************

package/src/form_toolbar_plan.test.js

@@ -5,17 +5,26 @@ 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.left).toEqual(["copy", "paste"]);
+        expect(p.right).toEqual(["undo", "clear", "save"]);
         expect(p.unknown).toEqual([]);
         expect(DEFAULT_TOOLBAR.length).toBe(5);
     });
 
+    it("save is the LAST button of the bar", () => {
+        /*  The form opens as a modal dialog and a dialog's primary action
+         *  goes bottom-right. Asserted on the plan and not on the CSS,
+         *  because the plan is what decides the two groups.  */
+        const p = plan_toolbar(undefined);
+        expect(p.right[p.right.length - 1]).toBe("save");
+        expect(p.left).not.toContain("save");
+    });
+
     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");
+            expect(plan_toolbar(v).right).toContain("save");
         }
     });
 
@@ -28,21 +37,21 @@ describe("plan_toolbar", () => {
 
     it("one action: a dialog asks for save only", () => {
         const p = plan_toolbar(["save"]);
-        expect(p.left).toEqual(["save"]);
-        expect(p.right).toEqual([]);
+        expect(p.right).toEqual(["save"]);
+        expect(p.left).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"]);
+        expect(p.right).toEqual(["clear", "save"]);
+        expect(p.left).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.right).toEqual(["save", "undo"]);
         expect(p.unknown).toEqual(["sav"]);
     });
 
@@ -59,7 +68,7 @@ describe("plan_toolbar", () => {
 
     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([]);
+        expect(p.right).toEqual(["save", "undo", "clear"]);
+        expect(p.left).toEqual([]);
     });
 });