@yuneta/gobj-ui 7.26.33 → 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;
 }
 /************************************************************
@@ -10756,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;
 }
 /************************************************************
@@ -10751,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.33",
+  "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;
 }
 
@@ -2851,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

@@ -143,6 +143,27 @@ describe("a template field in exec mode (a sub-form)", () => {
         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,