@yuneta/gobj-ui 7.26.32 → 7.26.34

package/dist/gobj-ui.cjs.js

@@ -10415,6 +10415,7 @@ function template2columns(gobj, columns, template, sub_elements) {
 			else return value;
 		};
 		if (field_desc.is_required) validator.push("required");
+		if ((0, _yuneta_gobj_js.is_object)(value) && value.validator) validator.push(...Array.isArray(value.validator) ? value.validator : [value.validator]);
 		switch (field_desc.type) {
 			case "object":
 			case "dict": break;
@@ -10631,12 +10632,20 @@ function validate_form(gobj, $form) {
 			mark_field_validity($editor);
 		}
 	});
+	let $first_bad = null;
+	function table_valid(tabulator) {
+		let r = tabulator.validate();
+		if (r === true) return true;
+		if (!$first_bad && Array.isArray(r) && r.length > 0) $first_bad = r[0].getElement();
+		return false;
+	}
 	$form.querySelectorAll(".yui-tabulator-table").forEach(($table) => {
-		if (!$table.tabulator.validate()) validated = false;
+		if (!table_valid($table.tabulator)) validated = false;
 		$table.querySelectorAll(".yui-tabulator-table-nested").forEach(($table_nested) => {
-			if (!$table_nested.tabulator.validate()) validated = false;
+			if (!table_valid($table_nested.tabulator)) validated = false;
 		});
 	});
+	if ($first_bad) $first_bad.scrollIntoView({ block: "nearest" });
 	return validated;
 }
 /************************************************************
@@ -10711,7 +10720,9 @@ function get_form_values(gobj, $form) {
 					else value = value_.text;
 				}
 				break;
-			case "fieldset": break;
+			case "fieldset":
+				value = {};
+				break;
 			case "table":
 				let template = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "template");
 				if (!(0, _yuneta_gobj_js.empty_string)(name) && (0, _yuneta_gobj_js.kw_has_key)(template, name)) {
@@ -10733,7 +10744,7 @@ function get_form_values(gobj, $form) {
 				break;
 			default: (0, _yuneta_gobj_js.log_error)((0, _yuneta_gobj_js.sprintf)("%s: $form type unknown: '%s'", (0, _yuneta_gobj_js.gobj_short_name)(gobj), tag));
 		}
-		value = form_value_2_treedb_value(gobj, field_desc, value);
+		if (tag !== "fieldset") value = form_value_2_treedb_value(gobj, field_desc, value);
 		let path;
 		if ((0, _yuneta_gobj_js.empty_string)(prefix)) path = name;
 		else path = prefix + "`" + name;
@@ -10754,7 +10765,13 @@ function clear_data(gobj, $form) {
 			} else if ($input.type === "checkbox") $input.checked = false;
 			else if ($input.type === "radio") $input.checked = false;
 			else if ($input.type === "datetime-local") $input.value = null;
-			else if ($input.type === "select-multiple") $input.tom_select.clear();
+			else if ($input.type === "color") {
+				$input.value = "#000000";
+				if ($input.yui_color_value) {
+					$input.yui_color_value.textContent = $input.value;
+					$input.yui_color_value.title = $input.value;
+				}
+			} else if ($input.type === "select-multiple") $input.tom_select.clear();
 			else {
 				$input.value = null;
 				if ($input.yui_svg_preview) $input.yui_svg_preview();

package/dist/gobj-ui.es.js

@@ -10410,6 +10410,7 @@ function template2columns(gobj, columns, template, sub_elements) {
 			else return value;
 		};
 		if (field_desc.is_required) validator.push("required");
+		if (is_object(value) && value.validator) validator.push(...Array.isArray(value.validator) ? value.validator : [value.validator]);
 		switch (field_desc.type) {
 			case "object":
 			case "dict": break;
@@ -10626,12 +10627,20 @@ function validate_form(gobj, $form) {
 			mark_field_validity($editor);
 		}
 	});
+	let $first_bad = null;
+	function table_valid(tabulator) {
+		let r = tabulator.validate();
+		if (r === true) return true;
+		if (!$first_bad && Array.isArray(r) && r.length > 0) $first_bad = r[0].getElement();
+		return false;
+	}
 	$form.querySelectorAll(".yui-tabulator-table").forEach(($table) => {
-		if (!$table.tabulator.validate()) validated = false;
+		if (!table_valid($table.tabulator)) validated = false;
 		$table.querySelectorAll(".yui-tabulator-table-nested").forEach(($table_nested) => {
-			if (!$table_nested.tabulator.validate()) validated = false;
+			if (!table_valid($table_nested.tabulator)) validated = false;
 		});
 	});
+	if ($first_bad) $first_bad.scrollIntoView({ block: "nearest" });
 	return validated;
 }
 /************************************************************
@@ -10706,7 +10715,9 @@ function get_form_values(gobj, $form) {
 					else value = value_.text;
 				}
 				break;
-			case "fieldset": break;
+			case "fieldset":
+				value = {};
+				break;
 			case "table":
 				let template = gobj_read_attr(gobj, "template");
 				if (!empty_string(name) && kw_has_key(template, name)) {
@@ -10728,7 +10739,7 @@ function get_form_values(gobj, $form) {
 				break;
 			default: log_error(sprintf("%s: $form type unknown: '%s'", gobj_short_name(gobj), tag));
 		}
-		value = form_value_2_treedb_value(gobj, field_desc, value);
+		if (tag !== "fieldset") value = form_value_2_treedb_value(gobj, field_desc, value);
 		let path;
 		if (empty_string(prefix)) path = name;
 		else path = prefix + "`" + name;
@@ -10749,7 +10760,13 @@ function clear_data(gobj, $form) {
 			} else if ($input.type === "checkbox") $input.checked = false;
 			else if ($input.type === "radio") $input.checked = false;
 			else if ($input.type === "datetime-local") $input.value = null;
-			else if ($input.type === "select-multiple") $input.tom_select.clear();
+			else if ($input.type === "color") {
+				$input.value = "#000000";
+				if ($input.yui_color_value) {
+					$input.yui_color_value.textContent = $input.value;
+					$input.yui_color_value.title = $input.value;
+				}
+			} else if ($input.type === "select-multiple") $input.tom_select.clear();
 			else {
 				$input.value = null;
 				if ($input.yui_svg_preview) $input.yui_svg_preview();

package/package.json

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

package/src/c_yui_form.js

@@ -2273,6 +2273,15 @@ function template2columns(gobj, columns, template, sub_elements)
             validator.push("required");
         }
 
+        /*  What a host knows and a schema cannot say: a template item may
+         *  carry Tabulator validators of its own -- a validator's name, or
+         *  a function of (cell, value, parameters) -- that its column runs
+         *  besides `required`. A template that comes as json carries none;
+         *  the host adds them to its copy before handing it on.  */
+        if(is_object(value) && value.validator) {
+            validator.push(...(Array.isArray(value.validator)? value.validator : [value.validator]));
+        }
+
         // TODO add the validators needed, like validator.push("integer");
 
         switch(field_desc.type) {
@@ -2658,18 +2667,38 @@ function validate_form(gobj, $form)
         }
     });
 
+    /*  Tabulator's validate() answers `true`, or the LIST of the cells that
+     *  failed -- and a list is truthy, so `!validate()` never refused a
+     *  table: a cell left empty in a `required` column was saved. Tabulator
+     *  marks every bad cell; the first one is brought into view.  */
+    let $first_bad = null;
+    function table_valid(tabulator) {
+        let r = tabulator.validate();
+        if(r === true) {
+            return true;
+        }
+        if(!$first_bad && Array.isArray(r) && r.length > 0) {
+            $first_bad = r[0].getElement();
+        }
+        return false;
+    }
+
     $form.querySelectorAll('.yui-tabulator-table').forEach($table => {
-        if(!$table.tabulator.validate()) {
+        if(!table_valid($table.tabulator)) {
             validated = false;
         }
 
         $table.querySelectorAll('.yui-tabulator-table-nested').forEach($table_nested => {
-            if(!$table_nested.tabulator.validate()) {
+            if(!table_valid($table_nested.tabulator)) {
                 validated = false;
             }
         });
     });
 
+    if($first_bad) {
+        $first_bad.scrollIntoView({block: "nearest"});
+    }
+
     return validated;
 }
 
@@ -2767,10 +2796,13 @@ function get_form_values(gobj, $form)
                 break;
 
             case "fieldset":
-                /*
-                 *  HACK: really this is the path of the value.
-                 *  We are navigating by a tree data structure; this is one node, not a leaf.
-                 */
+                /*  A NODE of the template, not a leaf: its value is the
+                 *  dict its own fields fill, and they come after it in the
+                 *  document. No json anybody typed, so it skips the
+                 *  conversion below, which handed its null on (7.26.8 to
+                 *  7.26.32): the fields found no dict to write into and the
+                 *  save stored the node as null.  */
+                value = {};
                 break;
 
             case "table":
@@ -2811,7 +2843,9 @@ function get_form_values(gobj, $form)
                 break;
         }
 
-        value = form_value_2_treedb_value(gobj, field_desc, value);
+        if(tag !== "fieldset") {
+            value = form_value_2_treedb_value(gobj, field_desc, value);
+        }
         let path;
         if(empty_string(prefix)) {
             path = name;
@@ -2846,6 +2880,18 @@ function clear_data(gobj, $form)
             } else if($input.type === 'datetime-local') { /* time */
                 $input.value = null;
 
+            } else if($input.type === 'color') {
+                /*  A colour input holds a colour: the "" a null is written
+                 *  as is refused, the browser keeps its black, and Chrome
+                 *  says so on the console, one line per field each time
+                 *  the form is filled. Black, then, and the readout beside
+                 *  the swatch told (writing `.value` fires nothing).  */
+                $input.value = "#000000";
+                if($input.yui_color_value) {
+                    $input.yui_color_value.textContent = $input.value;
+                    $input.yui_color_value.title = $input.value;
+                }
+
             } else if($input.type === 'select-multiple') {
                 $input.tom_select.clear();
             } else {

package/src/form_table_validator.wiring.test.js

@@ -0,0 +1,192 @@
+/***********************************************************************
+ *          form_table_validator.wiring.test.js
+ *
+ *      A table field of a C_YUI_FORM ('exec' mode) and its validators.
+ *
+ *      - A template item may carry Tabulator validators of its own
+ *        (`validator`: a name or a function), which its column runs
+ *        besides `required`: what a host knows and a schema cannot say
+ *        (estadodelaire refuses a trigger value that its measure can
+ *        never match).
+ *      - A table that does not validate refuses the save. Tabulator's
+ *        validate() answers `true` or the LIST of the bad cells, and
+ *        validate_form() asked `!validate()`, which a list never is: a
+ *        `required` cell left empty was saved.
+ *
+ *      Driven through the real gclass on a document double, with a
+ *      Tabulator double that keeps its settings and answers validate()
+ *      as told.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {describe, test, expect, beforeAll, beforeEach, vi} from "vitest";
+import {install_dom_double} from "../test/dom_double.js";
+
+install_dom_double();
+
+if(typeof globalThis.ResizeObserver === "undefined") {
+    globalThis.ResizeObserver = class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+    };
+}
+
+const tables = vi.hoisted(() => []);
+vi.mock("tabulator-tables", () => {
+    class FakeTabulator {
+        constructor($el, settings) {
+            this.$el = $el;
+            this.settings = settings;
+            this.externalEvents = {events: {}};
+            this.initialized = true;
+            this.answer = true;     // what validate() says
+            this.validated = 0;
+            tables.push(this);
+            return new Proxy(this, {
+                get(target, prop) {
+                    if(prop in target) {
+                        return target[prop];
+                    }
+                    return () => [];
+                }
+            });
+        }
+        on(ev, fn) {
+            (this.externalEvents.events[ev] = this.externalEvents.events[ev] || []).push(fn);
+        }
+        off(ev) {
+            delete this.externalEvents.events[ev];
+        }
+        validate() {
+            this.validated++;
+            return this.answer;
+        }
+        getRows() {
+            return [];
+        }
+        destroy() {
+        }
+    }
+    return {TabulatorFull: FakeTabulator, Tabulator: FakeTabulator};
+});
+
+const {
+    SDATA_END, gclass_create,
+    gobj_start_up, gobj_create_yuno, gobj_create_pure_child,
+    gobj_start, gobj_send_event,
+    set_log_callback,
+} = await import("@yuneta/gobj-js");
+const {register_c_yui_form} = await import("./c_yui_form.js");
+
+const saved = [];
+let yuno = null;
+
+beforeAll(async () => {
+    const i18next = (await import("i18next")).default;
+    await i18next.init({lng: "en", resources: {}});
+    gobj_start_up(null, null, null, null, null, null, null);
+    set_log_callback(() => {});
+    gclass_create("C_TEST_FORM_HOST", [], [["ST_IDLE", []]], {}, 0, [SDATA_END()], {}, 0, 0, 0, 0);
+    gclass_create(
+        "C_TEST_FORM_APP",
+        [["EV_SAVE_RECORD", 0], ["EV_RECORD_CHANGED", 0]],
+        [["ST_IDLE", [
+            ["EV_SAVE_RECORD", (gobj, event, kw) => {
+                saved.push(kw);
+                return 0;
+            }, null],
+            ["EV_RECORD_CHANGED", () => 0, null],
+        ]]],
+        {}, 0, [SDATA_END()], {}, 0, 0, 0, 0
+    );
+    register_c_yui_form();
+    yuno = gobj_create_yuno("form_validator_yuno", "C_TEST_FORM_HOST", {});
+    gobj_start(yuno);
+});
+
+beforeEach(() => {
+    saved.length = 0;
+    tables.length = 0;
+});
+
+let seq = 0;
+
+/*  The alarms of an estadodelaire device, cut down: a table whose
+ *  `value` column carries a validator the host added.  */
+function build(validator)
+{
+    const value = {
+        type: "string",
+        flag: ["writable", "persistent"]
+    };
+    if(validator) {
+        value.validator = validator;
+    }
+    const app = gobj_create_pure_child(`vapp${++seq}`, "C_TEST_FORM_APP", {}, yuno);
+    gobj_start(app);
+    const form = gobj_create_pure_child(`vform${seq}`, "C_YUI_FORM", {
+        template: {
+            triggers: {
+                type: "array",
+                flag: ["persistent", "writable", "table"],
+                table: {
+                    id: {
+                        type: "string",
+                        flag: ["writable", "persistent", "required"]
+                    },
+                    value: value
+                }
+            }
+        },
+        record: {triggers: []},
+        editable: true,
+    }, app);
+    gobj_start(form);
+    expect(tables.length).toBe(1);
+    return {form, table: tables[0]};
+}
+
+function column(table, field)
+{
+    return table.settings.columns.find((c) => c.field === field);
+}
+
+describe("a table field's validators", () => {
+    test("a template item's validator runs in its column, besides required", () => {
+        const fits = () => true;
+        const {table} = build(fits);
+        expect(column(table, "id").validator).toEqual(["required"]);
+        expect(column(table, "value").validator).toEqual([fits]);
+    });
+
+    test("a list of them, names and functions, is taken whole", () => {
+        const fits = () => true;
+        const {table} = build(["numeric", fits]);
+        expect(column(table, "value").validator).toEqual(["numeric", fits]);
+    });
+
+    test("an item without one keeps what the schema says", () => {
+        const {table} = build(null);
+        expect(column(table, "value").validator).toEqual([]);
+    });
+
+    test("a table with a bad cell refuses the save, and shows the cell", () => {
+        const {form, table} = build(null);
+        const $cell = document.createElement("div");
+        let shown = 0;
+        $cell.scrollIntoView = () => {
+            shown++;
+        };
+        table.answer = [{getElement: () => $cell}];      // what Tabulator answers
+        gobj_send_event(form, "EV_SAVE_RECORD", {}, form);
+        expect(table.validated).toBe(1);
+        expect(saved).toEqual([]);
+        expect(shown).toBe(1);
+
+        table.answer = true;
+        gobj_send_event(form, "EV_SAVE_RECORD", {}, form);
+        expect(saved.length).toBe(1);
+    });
+});

package/src/form_template_field.wiring.test.js

@@ -0,0 +1,181 @@
+/***********************************************************************
+ *          form_template_field.wiring.test.js
+ *
+ *      A `template` field of a C_YUI_FORM in 'exec' mode is a sub-form
+ *      (a <fieldset>): a NODE of the record, whose value is the dict its
+ *      own fields fill. From 7.26.8 to 7.26.32 the node went through the
+ *      json conversion, which handed its null on: the fields below found
+ *      no dict to write into (kw_set_dict_value() refuses a null segment)
+ *      and the save stored the node as null -- the alarm colours of a
+ *      device in estadodelaire, wiped by every save of its settings.
+ *      Driven through the real gclass on a document double, with the
+ *      template of those settings.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {describe, test, expect, beforeAll, beforeEach} from "vitest";
+import {install_dom_double} from "../test/dom_double.js";
+
+install_dom_double();
+
+if(typeof globalThis.ResizeObserver === "undefined") {
+    globalThis.ResizeObserver = class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+    };
+}
+
+const {
+    SDATA_END, gclass_create,
+    gobj_start_up, gobj_create_yuno, gobj_create_pure_child,
+    gobj_start, gobj_send_event, gobj_read_attr,
+    set_log_callback,
+} = await import("@yuneta/gobj-js");
+const {register_c_yui_form} = await import("./c_yui_form.js");
+
+const saved = [];
+const logged = [];
+let yuno = null;
+
+/*  The settings template of an estadodelaire device type, cut down to
+ *  the sub-form and one field beside it.  */
+const TEMPLATE = {
+    template_version: {
+        type: "integer",
+        default: 7,
+        flag: ["hidden", "persistent"]
+    },
+    alarm_colors: {
+        type: "object",
+        flag: ["writable", "persistent", "template"],
+        template: {
+            active_not_validated: {
+                type: "string",
+                default: "red",
+                flag: ["writable", "persistent", "color"]
+            },
+            active_validated: {
+                type: "string",
+                default: "#e5a50a",
+                flag: ["writable", "persistent", "color"]
+            },
+            not_active_not_validated: {
+                type: "string",
+                default: "Fuchsia",
+                flag: ["writable", "persistent", "color"]
+            }
+        }
+    }
+};
+
+beforeAll(async () => {
+    const i18next = (await import("i18next")).default;
+    await i18next.init({lng: "en", resources: {}});
+    gobj_start_up(null, null, null, null, null, null, null);
+    set_log_callback((level, msg) => {
+        logged.push({level: String(level), msg: String(msg)});
+    });
+    gclass_create("C_TEST_FORM_HOST", [], [["ST_IDLE", []]], {}, 0, [SDATA_END()], {}, 0, 0, 0, 0);
+    gclass_create(
+        "C_TEST_FORM_APP",
+        [["EV_SAVE_RECORD", 0], ["EV_RECORD_CHANGED", 0]],
+        [["ST_IDLE", [
+            ["EV_SAVE_RECORD", (gobj, event, kw) => {
+                saved.push(kw);
+                return 0;
+            }, null],
+            ["EV_RECORD_CHANGED", () => 0, null],
+        ]]],
+        {}, 0, [SDATA_END()], {}, 0, 0, 0, 0
+    );
+    register_c_yui_form();
+    yuno = gobj_create_yuno("form_template_yuno", "C_TEST_FORM_HOST", {});
+    gobj_start(yuno);
+});
+
+beforeEach(() => {
+    saved.length = 0;
+    logged.length = 0;
+});
+
+let seq = 0;
+
+function build(record)
+{
+    const app = gobj_create_pure_child(`tapp${++seq}`, "C_TEST_FORM_APP", {}, yuno);
+    gobj_start(app);
+    const form = gobj_create_pure_child(`tform${seq}`, "C_YUI_FORM", {
+        template: TEMPLATE,
+        record: record,
+        editable: true,
+    }, app);
+    gobj_start(form);
+    const $c = gobj_read_attr(form, "$container");
+    expect($c.querySelector("fieldset")).toBeTruthy();     // exec mode: a sub-form
+    return form;
+}
+
+function errors()
+{
+    return logged.filter(l => /error/i.test(l.level) || /ERROR/.test(l.msg));
+}
+
+describe("a template field in exec mode (a sub-form)", () => {
+    test("is saved as the dict its fields fill", () => {
+        const form = build({
+            template_version: 7,
+            alarm_colors: {
+                active_not_validated: "#ff0000",
+                active_validated: "#e5a50a",
+                not_active_not_validated: "#ff00ff"
+            }
+        });
+        gobj_send_event(form, "EV_SAVE_RECORD", {}, form);
+        expect(saved.length).toBe(1);
+        expect(saved[0].alarm_colors).toEqual({
+            active_not_validated: "#ff0000",
+            active_validated: "#e5a50a",
+            not_active_not_validated: "#ff00ff"
+        });
+        expect(saved[0].template_version).toBe(7);
+        expect(errors()).toEqual([]);
+    });
+
+    test("a colour cleared is black, and its readout says so", () => {
+        const form = build({
+            template_version: 7,
+            alarm_colors: {
+                active_not_validated: "#ff0000",
+                active_validated: "#e5a50a",
+                not_active_not_validated: "#ff00ff"
+            }
+        });
+        const $c = gobj_read_attr(form, "$container");
+        const $colors = $c.querySelectorAll("fieldset input");
+        expect($colors.length).toBe(3);
+        gobj_send_event(form, "EV_CLEAR_RECORD", {}, form);
+        for(const $input of $colors) {
+            /*  Never "": a colour input refuses it (Chrome warns).  */
+            expect($input.value).toBe("#000000");
+            expect($input.yui_color_value.textContent).toBe("#000000");
+        }
+        expect(errors()).toEqual([]);
+    });
+
+    test("left null by a save before the fix, comes back with its defaults", () => {
+        const form = build({
+            template_version: 7,
+            alarm_colors: null
+        });
+        gobj_send_event(form, "EV_SAVE_RECORD", {}, form);
+        expect(saved.length).toBe(1);
+        expect(saved[0].alarm_colors).toEqual({
+            active_not_validated: "red",
+            active_validated: "#e5a50a",
+            not_active_not_validated: "Fuchsia"
+        });
+        expect(errors()).toEqual([]);
+    });
+});