@yuneta/gobj-ui 7.26.36 → 7.26.37

package/package.json

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

package/src/tabulator.css

@@ -186,11 +186,16 @@
  *  (`.tabulator-editing {padding: 0}`) and the control brings its own, so
  *  the text jumps sideways too. Inherit the font and restore the cell's 4px
  *  so entering edit mode changes nothing but the caret.
+ *
+ *  A box to type in, never a box to TICK: a checkbox or a radio given the
+ *  whole cell is drawn as a square the size of the cell -- the tickCross
+ *  editor of a boolean (estadodelaire's "validated") opened as a huge empty
+ *  box on a phone, which read as broken. Those keep their own size.
  * ==================================================================== */
-.tabulator-row .tabulator-cell.tabulator-editing input,
+.tabulator-row .tabulator-cell.tabulator-editing input:not([type=checkbox]):not([type=radio]),
 .tabulator-row .tabulator-cell.tabulator-editing select,
 .tabulator-row .tabulator-cell.tabulator-editing textarea,
-.tabulator .tabulator-header .tabulator-header-filter input,
+.tabulator .tabulator-header .tabulator-header-filter input:not([type=checkbox]):not([type=radio]),
 .tabulator .tabulator-header .tabulator-header-filter select {
     font-family: inherit;
     font-size: inherit;
@@ -199,11 +204,22 @@
     padding: 0 4px;
 }
 
-.tabulator-row .tabulator-cell.tabulator-editing input,
+.tabulator-row .tabulator-cell.tabulator-editing input:not([type=checkbox]):not([type=radio]),
 .tabulator-row .tabulator-cell.tabulator-editing select {
     height: 100%;
 }
 
+/*  The box to tick, sized for a finger where there is one: the browser's
+ *  own checkbox is ~13px, too small to hit on a phone -- and the cell
+ *  is no size for it either (above).  */
+@media (pointer: coarse) {
+    .tabulator-row .tabulator-cell.tabulator-editing input[type=checkbox],
+    .tabulator-row .tabulator-cell.tabulator-editing input[type=radio] {
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+}
+
 /*
  *  The CELL EDITOR in dark theme.
  *

package/src/tabulator_css.test.js

@@ -0,0 +1,63 @@
+/***********************************************************************
+ *          tabulator_css.test.js
+ *
+ *      The stylesheet of the tables: an editor fills its cell only when
+ *      it is a box to TYPE in. A checkbox or a radio given width and
+ *      height 100% is drawn as a square the size of the cell (the
+ *      tickCross editor of estadodelaire's "validated" opened as a huge
+ *      empty box on a phone, gobj-ui 7.26.36).
+ *
+ *      Read as text, as the window layer's invariants are: jsdom applies
+ *      no stylesheet.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {describe, test, expect} from "vitest";
+import {readFileSync} from "node:fs";
+import {dirname, join} from "node:path";
+import {fileURLToPath} from "node:url";
+
+const CSS = readFileSync(join(dirname(fileURLToPath(import.meta.url)), "tabulator.css"), "utf8")
+    .replace(/\/\*[\s\S]*?\*\//g, "");
+
+/*  Every rule: its selectors, and its body.  */
+function rules()
+{
+    const out = [];
+    const re = /([^{}]+)\{([^{}]*)\}/g;
+    let m;
+    while((m = re.exec(CSS)) !== null) {
+        out.push({
+            selectors: m[1].split(",").map((s) => s.trim()).filter(Boolean),
+            body: m[2]
+        });
+    }
+    return out;
+}
+
+describe("an editor fills its cell only when it is a box to type in", () => {
+    test("no rule sizes a checkbox or a radio of a table to its cell", () => {
+        const offenders = [];
+        for(const r of rules()) {
+            if(!/\b(width|height)\s*:\s*100%/.test(r.body)) {
+                continue;
+            }
+            for(const sel of r.selectors) {
+                /*  A bare `input` in a cell editor or a header filter reaches
+                 *  a checkbox too, unless the selector leaves it out.  */
+                if(/\binput\b/.test(sel) && /tabulator/.test(sel) &&
+                        !(/:not\(\[type=checkbox\]\)/.test(sel) && /:not\(\[type=radio\]\)/.test(sel))) {
+                    offenders.push(sel);
+                }
+            }
+        }
+        expect(offenders).toEqual([]);
+    });
+
+    test("a text input of a cell being edited still fills it", () => {
+        const fill = rules().filter((r) => /\bwidth\s*:\s*100%/.test(r.body) &&
+            r.selectors.some((s) => /tabulator-editing input:not\(\[type=checkbox\]\)/.test(s)));
+        expect(fill.length).toBeGreaterThan(0);
+    });
+});