@yuneta/gobj-ui 7.23.57 → 7.23.59

package/dist/gobj-ui.cjs.js

@@ -6361,13 +6361,7 @@ var attrs_table$16 = [
 	(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, "toolbar", 0, DEFAULT_TOOLBAR.slice(), "Toolbar buttons to show. The order inside each group is the order given here; which side each group takes is form_toolbar_plan.js. [] hides the toolbar"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "tabulator_settings", 0, {
 		layout: "fitDataFill",
 		validationMode: "highlight",
@@ -6546,7 +6540,7 @@ function toolbar_button$1(gobj, name) {
 		case "clear": return [
 			"button",
 			{
-				class: "button p-1",
+				class: "button p-1 button-clear",
 				title: "clear",
 				"aria-label": "clear"
 			},
@@ -6570,7 +6564,7 @@ function toolbar_button$1(gobj, name) {
 		case "copy": return [
 			"button",
 			{
-				class: "button p-1",
+				class: "button p-1 button-copy",
 				title: "copy",
 				"aria-label": "copy"
 			},
@@ -6594,7 +6588,7 @@ function toolbar_button$1(gobj, name) {
 		case "paste": return [
 			"button",
 			{
-				class: "button p-1",
+				class: "button p-1 button-paste",
 				title: "paste",
 				"aria-label": "paste"
 			},
@@ -7064,7 +7058,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 									"div",
 									{
 										class: "xcontrol control",
-										style: "max-width:100px;"
+										style: "max-width:220px;"
 									},
 									[]
 								]]
@@ -7322,6 +7316,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 			]);
 			$control.appendChild($extend);
 			if (inputType !== "color" && inputType !== "datetime-local" && (!readonly || is_pkey)) attach_clear($control, $extend);
+			if (inputType === "color") attach_color_value($control, $extend);
 			break;
 		}
 		case "textarea": {
@@ -7520,6 +7515,37 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 	return $element;
 }
 /******************************************************************
+*  A colour swatch beside its own value.
+*
+*  The swatch says WHICH colour and nothing else -- and the value is
+*  the half a person needs: to read it, to write it down, to paste it
+*  into the next record. Read-only it was unreachable altogether;
+*  editable it was a colour you could only pick, never copy.
+*
+*  A `<span>`, not a second input: the record is collected from the
+*  controls marked `yui-form-data-input`, and one field with two of
+*  them is a field read twice. It carries `user-select: all`, so one
+*  click takes the whole value and not the half a double-click would
+*  stop at (`#e0a800` is three words to a browser).
+******************************************************************/
+function attach_color_value($control, $input) {
+	let $value = (0, _yuneta_gobj_js.createElement2)([
+		"span",
+		{ class: "yui-color-value is-family-monospace is-size-7" },
+		""
+	]);
+	function refresh() {
+		let v = $input.value || "";
+		$value.textContent = v;
+		$value.title = v;
+	}
+	refresh();
+	$input.addEventListener("input", refresh);
+	$input.addEventListener("change", refresh);
+	$input.yui_color_value = $value;
+	$control.appendChild($value);
+}
+/******************************************************************
 *  `readonly` is an attribute of a TEXT control and of nothing else.
 *
 *  A `<select>` ignores it. So does a checkbox, and so does a radio:
@@ -8099,6 +8125,10 @@ function set_form_values(gobj, template, $form, record) {
 						break;
 					case "color":
 						$input.value = convertColor(value);
+						if ($input.yui_color_value) {
+							$input.yui_color_value.textContent = $input.value;
+							$input.yui_color_value.title = $input.value;
+						}
 						break;
 					default: $input.value = value;
 				}

package/dist/gobj-ui.es.js

@@ -6356,13 +6356,7 @@ var attrs_table$16 = [
 	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, "toolbar", 0, DEFAULT_TOOLBAR.slice(), "Toolbar buttons to show. The order inside each group is the order given here; which side each group takes is form_toolbar_plan.js. [] hides the toolbar"),
 	SDATA(data_type_t.DTP_JSON, "tabulator_settings", 0, {
 		layout: "fitDataFill",
 		validationMode: "highlight",
@@ -6541,7 +6535,7 @@ function toolbar_button$1(gobj, name) {
 		case "clear": return [
 			"button",
 			{
-				class: "button p-1",
+				class: "button p-1 button-clear",
 				title: "clear",
 				"aria-label": "clear"
 			},
@@ -6565,7 +6559,7 @@ function toolbar_button$1(gobj, name) {
 		case "copy": return [
 			"button",
 			{
-				class: "button p-1",
+				class: "button p-1 button-copy",
 				title: "copy",
 				"aria-label": "copy"
 			},
@@ -6589,7 +6583,7 @@ function toolbar_button$1(gobj, name) {
 		case "paste": return [
 			"button",
 			{
-				class: "button p-1",
+				class: "button p-1 button-paste",
 				title: "paste",
 				"aria-label": "paste"
 			},
@@ -7059,7 +7053,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 									"div",
 									{
 										class: "xcontrol control",
-										style: "max-width:100px;"
+										style: "max-width:220px;"
 									},
 									[]
 								]]
@@ -7317,6 +7311,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 			]);
 			$control.appendChild($extend);
 			if (inputType !== "color" && inputType !== "datetime-local" && (!readonly || is_pkey)) attach_clear($control, $extend);
+			if (inputType === "color") attach_color_value($control, $extend);
 			break;
 		}
 		case "textarea": {
@@ -7515,6 +7510,37 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 	return $element;
 }
 /******************************************************************
+*  A colour swatch beside its own value.
+*
+*  The swatch says WHICH colour and nothing else -- and the value is
+*  the half a person needs: to read it, to write it down, to paste it
+*  into the next record. Read-only it was unreachable altogether;
+*  editable it was a colour you could only pick, never copy.
+*
+*  A `<span>`, not a second input: the record is collected from the
+*  controls marked `yui-form-data-input`, and one field with two of
+*  them is a field read twice. It carries `user-select: all`, so one
+*  click takes the whole value and not the half a double-click would
+*  stop at (`#e0a800` is three words to a browser).
+******************************************************************/
+function attach_color_value($control, $input) {
+	let $value = createElement2([
+		"span",
+		{ class: "yui-color-value is-family-monospace is-size-7" },
+		""
+	]);
+	function refresh() {
+		let v = $input.value || "";
+		$value.textContent = v;
+		$value.title = v;
+	}
+	refresh();
+	$input.addEventListener("input", refresh);
+	$input.addEventListener("change", refresh);
+	$input.yui_color_value = $value;
+	$control.appendChild($value);
+}
+/******************************************************************
 *  `readonly` is an attribute of a TEXT control and of nothing else.
 *
 *  A `<select>` ignores it. So does a checkbox, and so does a radio:
@@ -8094,6 +8120,10 @@ function set_form_values(gobj, template, $form, record) {
 						break;
 					case "color":
 						$input.value = convertColor(value);
+						if ($input.yui_color_value) {
+							$input.yui_color_value.textContent = $input.value;
+							$input.yui_color_value.title = $input.value;
+						}
 						break;
 					default: $input.value = value;
 				}

package/package.json

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

package/src/c_yui_form.css

@@ -79,3 +79,18 @@
 .C_YUI_FORM .yui-jse-readonly {
     background-color: var(--bulma-background, #f5f5f5);
 }
+
+/*  The value of a colour, beside its swatch: what the swatch cannot say.
+ *  `user-select: all` so one click takes the whole `#e0a800` -- to a
+ *  browser that is three words, and a double-click stops at one of them. */
+.C_YUI_FORM .yui-color-value {
+    margin-left: 0.5rem;
+    vertical-align: middle;
+    color: var(--bulma-text-weak, #7a7a7a);
+    user-select: all;
+    -webkit-user-select: all;
+    cursor: text;
+}
+.C_YUI_FORM input[type="color"] {
+    vertical-align: middle;
+}

package/src/c_yui_form.js

@@ -57,7 +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";
+import {plan_toolbar, DEFAULT_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. */
@@ -117,7 +117,12 @@ SDATA(data_type_t.DTP_BOOLEAN,  "with_delete_row_btn", 0,  false, "Print last co
  *  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"),
+/*  The default is the LIST, not a copy of it: written out here it was a
+ *  second copy of `DEFAULT_TOOLBAR` that `plan_toolbar` never got to
+ *  see -- the attr always has a value, so the module that decides the
+ *  plan could change its default and nothing moved. Sliced because an
+ *  attr default is handed out and must not be the shared array.  */
+SDATA(data_type_t.DTP_JSON,     "toolbar",          0,  DEFAULT_TOOLBAR.slice(), "Toolbar buttons to show. The order inside each group is the order given here; which side each group takes is form_toolbar_plan.js. [] hides the toolbar"),
 /*
  *  Defaults for tabulator
  */
@@ -354,7 +359,7 @@ function toolbar_button(gobj, name)
                 }
             }];
         case "clear":
-            return ['button', {class: 'button p-1', title: 'clear', 'aria-label': 'clear'}, [
+            return ['button', {class: 'button p-1 button-clear', 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']
             ], {
@@ -364,7 +369,7 @@ function toolbar_button(gobj, name)
                 }
             }];
         case "copy":
-            return ['button', {class: 'button p-1', title: 'copy', 'aria-label': 'copy'}, [
+            return ['button', {class: 'button p-1 button-copy', 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) {
@@ -373,7 +378,7 @@ function toolbar_button(gobj, name)
                 }
             }];
         case "paste":
-            return ['button', {class: 'button p-1', title: 'paste', 'aria-label': 'paste'}, [
+            return ['button', {class: 'button p-1 button-paste', 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) {
@@ -1024,7 +1029,9 @@ function create_form_field(
 
                             ['div', {class: 'field-body'}, [
                                 ['div', {class: 'field'}, [
-                                    ['div', {class: 'xcontrol control', style: 'max-width:100px;'}, []]
+                                    /*  Room for the swatch AND its value
+                                     *  beside it (attach_color_value).  */
+                                    ['div', {class: 'xcontrol control', style: 'max-width:220px;'}, []]
                                 ]]
                             ]]
                         ]]
@@ -1201,6 +1208,9 @@ function create_form_field(
                     (!readonly || is_pkey)) {
                 attach_clear($control, $extend);
             }
+            if(inputType === 'color') {
+                attach_color_value($control, $extend);
+            }
             break;
         }
 
@@ -1456,6 +1466,43 @@ function create_form_field(
     return $element;
 }
 
+/******************************************************************
+ *  A colour swatch beside its own value.
+ *
+ *  The swatch says WHICH colour and nothing else -- and the value is
+ *  the half a person needs: to read it, to write it down, to paste it
+ *  into the next record. Read-only it was unreachable altogether;
+ *  editable it was a colour you could only pick, never copy.
+ *
+ *  A `<span>`, not a second input: the record is collected from the
+ *  controls marked `yui-form-data-input`, and one field with two of
+ *  them is a field read twice. It carries `user-select: all`, so one
+ *  click takes the whole value and not the half a double-click would
+ *  stop at (`#e0a800` is three words to a browser).
+ ******************************************************************/
+function attach_color_value($control, $input)
+{
+    let $value = createElement2(
+        ['span', {class: 'yui-color-value is-family-monospace is-size-7'}, '']
+    );
+
+    function refresh() {
+        let v = $input.value || "";
+        $value.textContent = v;
+        $value.title = v;
+    }
+
+    refresh();
+    $input.addEventListener('input', refresh);
+    /*  The swatch's value is also written from outside (loading a record
+     *  into the form), and that fires nothing. `set_field_value()` ends
+     *  in a synthetic `change`, which is why this listens to both.  */
+    $input.addEventListener('change', refresh);
+    $input.yui_color_value = $value;
+
+    $control.appendChild($value);
+}
+
 /******************************************************************
  *  `readonly` is an attribute of a TEXT control and of nothing else.
  *
@@ -2398,6 +2445,12 @@ function set_form_values(gobj, template, $form, record)
                         break;
                     case "color":
                         $input.value = convertColor(value);
+                        /*  Writing `.value` fires nothing, so the readout
+                         *  beside the swatch has to be told. */
+                        if($input.yui_color_value) {
+                            $input.yui_color_value.textContent = $input.value;
+                            $input.yui_color_value.title = $input.value;
+                        }
                         break;
                     default:
                         $input.value = value;