@yuneta/gobj-ui 7.23.52 → 7.23.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.52",
+  "version": "7.23.54",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@rollup/plugin-terser": "^1.0.0",
     "@vitest/coverage-v8": "^4.1.10",
-    "@yuneta/gobj-js": "^7.16.1",
+    "@yuneta/gobj-js": "^7.16.3",
     "vite": "^8.2.1",
     "vitest": "^4.1.10"
   },

package/src/c_yui_form.js

@@ -99,6 +99,7 @@ SDATA(data_type_t.DTP_STRING,   "render_mode",      0,  "exec", "'exec' interpre
 SDATA(data_type_t.DTP_STRING,   "pkey",             0,  "id",   "Primary key field name, used by form_mode"),
 SDATA(data_type_t.DTP_STRING,   "topic_name",       0,  "",     "Treedb topic name: labels use the i18n cascade '<topic>.<col>' -> '<col>' -> header (like table headers)"),
 SDATA(data_type_t.DTP_BOOLEAN,  "editable",         0,  false,  "Default is editable, set false to readonly"),
+SDATA(data_type_t.DTP_BOOLEAN,  "readonly",         0,  false,  "Show EVERY field read-only, whatever its schema says: a record being LOOKED at, not edited. Independent of `editable`, which drives the TABLE rendering; this one drives the FORM"),
 SDATA(data_type_t.DTP_BOOLEAN,  "selectable",       0,  true,   "Rows selectable with 'click' (BAD with editable=true)"),
 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"),
@@ -586,7 +587,10 @@ function build_form_field_conf(gobj, field_desc)
 
         options: [],            // select,select2,radio options
         extras: {},             // extra html input/textarea attributes
-        readonly: !field_desc.is_writable,
+        /*  A form opened to LOOK at a record has no editable field, and
+         *  that is a property of the opening, not of the schema: the same
+         *  col is writable when the same form is opened to edit.  */
+        readonly: gobj_read_bool_attr(gobj, "readonly") || !field_desc.is_writable,
         required: field_desc.is_required,
         hidden: field_desc.is_hidden,
         default_value: field_desc.default_value,
@@ -661,6 +665,7 @@ function build_form_field_conf(gobj, field_desc)
             break;
 
         case "image":
+        case "icon":
         case "string":
             field_conf.tag = 'input';
             field_conf.inputType = 'text';
@@ -1787,6 +1792,7 @@ function template2columns(gobj, columns, template, sub_elements)
                 break;
 
             case "image":
+            case "icon":
             case "string":
                 // field_conf.tag = 'input';
                 // field_conf.inputType = 'text';
@@ -2516,6 +2522,7 @@ function treedb_value_2_form_value(gobj, field_desc, value)
         case "date":
         case "color":
         case "image":
+        case "icon":
         case "tel":
         case "template":
         case "table":
@@ -2653,6 +2660,7 @@ function form_value_2_treedb_value(gobj, field_desc, value)
         case "date":
         case "color":
         case "image":
+        case "icon":
         case "tel":
             break;
         case "template":

package/src/c_yui_treedb_topic_with_form.css

@@ -116,3 +116,13 @@
     background: transparent !important;
 }
 
+
+/*  Cell of a col flagged `icon`: the glyph is a CSS mask sized in `em`,
+ *  so it comes out at the row's font size -- smaller than the 18px the
+ *  `image` cells next to it get. A touch larger, and centred on the row
+ *  rather than on the text baseline.  */
+.ICON_CELL {
+    font-size: 1.25em;
+    line-height: 1;
+    vertical-align: middle;
+}

package/src/c_yui_treedb_topic_with_form.js

@@ -86,11 +86,12 @@ import {
 } from "./yui_table_select.js";
 
 import {yui_table_filter_clear} from "./yui_table_filter_clear.js";
+import {yui_icon_is_defined} from "./lib_icons.js";
 import {row_matches} from "./yui_row_search.js";
 
 import {t} from "i18next";
 
-import {plan_treedb_writes} from "./treedb_write_plan.js";
+import {plan_treedb_writes, READONLY_FORM_TOOLBAR} from "./treedb_write_plan.js";
 import {delete_impact} from "./delete_impact.js";
 
 import "./c_yui_treedb_topic_with_form.css";
@@ -1284,6 +1285,14 @@ function create_tabulator(gobj)
                 hozAlign = "center";
                 colFormatter = "color";
                 break;
+            case "icon":
+                /*  The NAME of an icon of the app's set, not a file --
+                 *  which is why `image` cannot stand in for it: it built
+                 *  an `<img src="yi-bolt">` and drew a broken image.  */
+                hozAlign = "center";
+                vertAlign = "middle";
+                colFormatter = icon_formatter;
+                break;
             case "object":
             case "dict":
             case "template":
@@ -1671,6 +1680,31 @@ function create_tabulator(gobj)
     tabulator.on("dataFiltered", function(filters, rows) {
         update_rowcount(Array.isArray(rows)? rows.length : undefined);
     });
+    /*  A click on a row, while the table is NOT in edition mode, OPENS the
+     *  record to be read. It used to do nothing at all: selection is driven
+     *  by the checkbox column and editing by the pencil, so the biggest
+     *  target on screen was the one thing that answered nothing.
+     *
+     *  Only outside edition mode: in it a click starts editing a cell, and
+     *  the pencil already opens the same record to be written.
+     *
+     *  Cells that carry an action of their own are left alone -- a json
+     *  preview opens its viewer, a hook opens its children, the Op buttons
+     *  edit and delete -- and the question is asked of the SCHEMA rather
+     *  than of the markup, so a new formatter does not silently start
+     *  opening two things at once.  */
+    tabulator.on("rowClick", function(e, row) {
+        if(gobj_read_bool_attr(gobj, "editable")) {
+            return;
+        }
+        let $cell = e.target? e.target.closest(".tabulator-cell") : null;
+        let field = $cell? $cell.getAttribute("tabulator-field") : null;
+        if(field && cell_has_its_own_action(gobj, field)) {
+            return;
+        }
+        gobj_send_event(gobj, "EV_SHOW_RECORD", {index: row.getPosition()}, gobj);
+    });
+
     tabulator.on("rowSelected", function(row) {
         gobj_send_event(gobj, "EV_SELECT_ROWS", {rows: [row.getData()]}, gobj);
     });
@@ -1694,6 +1728,48 @@ function table__destroy(gobj)
     }
 }
 
+/************************************************************
+ *  Cell of a col flagged `icon`: the value is the NAME of an
+ *  icon of the app's set ("yi-bolt"), so it is DRAWN.
+ *
+ *  Built as a DOM node and not as an HTML string: the value is
+ *  raw record data and must never be parsed as markup -- and
+ *  here it also becomes a CSS class, so it is filtered to the
+ *  shape of a class name before it gets near one.
+ *
+ *  A name the set does not carry falls back to the TEXT of it.
+ *  The catch-all rule `[class^="yi-"]::before` paints a
+ *  currentColor box for any name, so drawing it anyway would
+ *  render a solid square -- a glyph nobody recognises rather
+ *  than a mistake somebody can fix.
+ ************************************************************/
+function icon_formatter(cell)
+{
+    let name = cell.getValue();
+    if(!is_string(name) || empty_string(name)) {
+        return "";
+    }
+    name = name.trim();
+
+    if(!/^[a-z0-9-]+$/.test(name) || !yui_icon_is_defined(name)) {
+        /*  The NAME, in plain grey, and no invented label around it: it
+         *  is a developer's problem (a schema naming a glyph the set
+         *  does not carry) and the name IS the whole diagnosis -- while
+         *  a sentence here would be one more i18n key for every app
+         *  that mounts this table.  */
+        return createElement2([
+            "span",
+            {class: "ICON_CELL_UNKNOWN is-size-7 has-text-grey", title: name},
+            name
+        ]);
+    }
+
+    return createElement2([
+        "span",
+        {class: `ICON_CELL ${name}`, title: name, "aria-label": name}
+    ]);
+}
+
 /************************************************************
  *  Cell of a col holding a JSON document (dict/list/blob/
  *  template/coordinates/…): a one-line truncated preview,
@@ -1852,6 +1928,10 @@ function transform__treedb_value_2_table_value(gobj, col, value, row, field)
             // Handled by Tabulator's built-in "color" formatter (see colDef above)
             break;
 
+        case "icon":
+            // Handled by icon_formatter() (see colDef above)
+            break;
+
         case "image":
             // Handled by Tabulator's built-in "image" formatter (see colDef above)
             break;
@@ -1875,10 +1955,25 @@ function transform__treedb_value_2_table_value(gobj, col, value, row, field)
 }
 
 /************************************************************
- *  Build the form template from desc.cols: only user-editable
- *  fields reach the form — writable cols, fkeys (linkable) and
- *  the pkey (the hosted C_YUI_FORM's form_mode drives the
- *  pkey's readonly/required state).
+ *  Build the form template from desc.cols: EVERY field of the
+ *  record, the ones that cannot be written included.
+ *
+ *  They used to be dropped, and a record was then shown as the
+ *  handful of its fields somebody may type: an asset opened as
+ *  its id alone, with its type, its size, its date and where it
+ *  came from -- everything a person opens an asset to read --
+ *  nowhere on screen. What a form is for is READING a record;
+ *  writing it is one of the two things you can do next.
+ *
+ *  C_YUI_FORM renders a col that is not `writable` read-only on
+ *  its own (`build_form_field_conf`), so this is the whole of
+ *  it. What must NOT follow is sending them back:
+ *  `transform__form_record_2_treedb_record()` drops them, and
+ *  the reason is written there.
+ *
+ *  Still out: hooks (a hook is not a field of the record, it is
+ *  the children hanging off it), hidden cols, and the `_`
+ *  scaffolding the table adds.
  ************************************************************/
 function build_form_template(gobj)
 {
@@ -1895,10 +1990,6 @@ function build_form_template(gobj)
         if(field_desc.type === "hook") {
             continue;   // hooks don't appear in forms
         }
-        if(!field_desc.is_writable &&
-                field_desc.type !== "fkey" && col.id !== desc.pkey) {
-            continue;
-        }
         template.push(col);
     }
     return template;
@@ -1968,6 +2059,14 @@ function open_form_dialog(gobj, mode, record)
         title = t(topic_name) + (empty_string(rid) ? "" : " — " + rid);
     }
 
+    /*  "view" is an "update" that writes nothing: same title, same pkey
+     *  handling (readonly), every field read-only and the write half of
+     *  the toolbar gone. It is what a row click opens when the table is
+     *  NOT in edition mode -- reading a record is the ordinary thing to
+     *  want, and until now a click on a row did nothing at all.  */
+    let view_only = (mode === "view");
+    let form_mode = view_only? "update" : mode;
+
     /*  A flex column so the hosted form takes the dialog height: fields
      *  scroll internally and the form's bottom toolbar stays visible. */
     let $body = createElement2(
@@ -1983,19 +2082,22 @@ function open_form_dialog(gobj, mode, record)
             template:       build_form_template(gobj),
             record:         record,
             fkey_options:   build_fkey_options(gobj),
-            form_mode:      mode,
+            form_mode:      form_mode,
+            readonly:       view_only,
             /*  A read-only topic still OPENS its form -- looking at a record
              *  is the point of a replica -- with the cells not editable and
              *  the write half of the toolbar gone. A null plan leaves the
              *  form's own default alone.  */
-            ...(form_plan.form_toolbar ? {toolbar: form_plan.form_toolbar} : {}),
+            ...((view_only? READONLY_FORM_TOOLBAR : form_plan.form_toolbar)?
+                {toolbar: view_only? READONLY_FORM_TOOLBAR.slice()
+                                   : form_plan.form_toolbar} : {}),
             /*  Editing the raw topic record: structured cols
              *  (template / table / coordinates) are raw JSON editors,
              *  not interpreted into sub-widgets (the pre-merge behaviour). */
             render_mode:    "edit",
             pkey:           desc.pkey || "id",
             topic_name:     topic_name,
-            editable:       !form_plan.readonly,
+            editable:       !form_plan.readonly && !view_only,
             $parent:        $body
         },
         gobj
@@ -2391,6 +2493,42 @@ function show_edit_form(gobj, row, index)
     open_form_dialog(gobj, mode, row);
 }
 
+/************************************************************
+ *  Does a click on this column already mean something else?
+ *
+ *  The `_` columns are the table's own scaffolding (the selection
+ *  checkbox, the Op buttons); a hook opens its children and a col
+ *  holding a json document opens it in a viewer. Anything else is
+ *  plain data, and a click on it means "show me this record".
+ ************************************************************/
+const CELL_WITH_ACTION = [
+    "hook", "object", "dict", "template", "array", "list",
+    "coordinates", "blob", "gbuffer"
+];
+
+function cell_has_its_own_action(gobj, field)
+{
+    if(!field || field.charAt(0) === '_') {
+        return true;
+    }
+    let col = get_schema_col(gobj, field);
+    if(!col) {
+        return false;
+    }
+    const field_desc = treedb_get_field_desc(col);
+    return CELL_WITH_ACTION.includes(field_desc.type) ||
+           CELL_WITH_ACTION.includes(field_desc.real_type);
+}
+
+/************************************************************
+ *  Show a record to be READ: every field, none of them editable.
+ *  What a row click opens while the table is not in edition mode.
+ ************************************************************/
+function show_view_form(gobj, row)
+{
+    open_form_dialog(gobj, "view", row);
+}
+
 /************************************************************
  *  Show the edit "create" form to a new record
  *  internally called from the top toolbar +New button
@@ -2421,6 +2559,8 @@ function get_schema_col(gobj, id)
  ************************************************************/
 function transform__form_record_2_treedb_record(gobj, kw, operation)
 {
+    let desc = gobj_read_attr(gobj, "desc");
+    let pkey = desc.pkey || "id";
     let row = {};
 
     for(let field_name of Object.keys(kw)) {
@@ -2428,12 +2568,33 @@ function transform__form_record_2_treedb_record(gobj, kw, operation)
             continue;
         }
         let col = get_schema_col(gobj, field_name);
-        if(col) {
-            let value = kw[field_name];
-            row[field_name] = transform__form_value_2_treedb_value(
-                gobj, col, value, operation
-            );
+        if(!col) {
+            continue;
+        }
+
+        /*  The form SHOWS every field and sends back only what the topic
+         *  accepts: the writable cols, the fkeys (a link is edited by
+         *  linking) and the pkey, which is not written but is what
+         *  ADDRESSES the record.
+         *
+         *  It matters because `treedb_update_node()` does not check
+         *  `writable` -- it writes any col it is handed -- so a read-only
+         *  field travelling back is written with whatever the form made of
+         *  it, and the fields that describe a record are exactly the ones
+         *  that do not survive a round trip through a widget: `t` is an
+         *  integer rendered as a date. Nothing would look wrong until the
+         *  stored timestamp had moved.
+         */
+        const field_desc = treedb_get_field_desc(col);
+        if(!field_desc.is_writable &&
+                field_desc.type !== "fkey" && col.id !== pkey) {
+            continue;
         }
+
+        let value = kw[field_name];
+        row[field_name] = transform__form_value_2_treedb_value(
+            gobj, col, value, operation
+        );
     }
     return row;
 }
@@ -3718,6 +3879,29 @@ function ac_open_columns(gobj, event, kw, src)
     return 0;
 }
 
+/************************************************************
+ *  A row was clicked outside edition mode: open the record to be read.
+ ************************************************************/
+function ac_show_record(gobj, event, kw, src)
+{
+    let tabulator = gobj_read_attr(gobj, "tabulator");
+    let index = kw? kw.index : undefined;
+    if(!tabulator || typeof index !== "number") {
+        log_error(`${gobj_short_name(gobj)}: no row ${index} to show`);
+        return -1;
+    }
+
+    let row = tabulator.getRowFromPosition(index);
+    if(!row) {
+        log_error(`${gobj_short_name(gobj)}: row ${index} is gone`);
+        return -1;
+    }
+
+    show_view_form(gobj, row.getData());
+
+    return 0;
+}
+
 /************************************************************
  *  The reader picked another page size: remember it, so coming back to
  *  this topic opens where they left it instead of at 200.
@@ -3878,6 +4062,7 @@ function create_gclass(gclass_name)
             ["EV_SEARCH",               ac_search,             null],
             ["EV_OPEN_COLUMNS",         ac_open_columns,       null],
             ["EV_PAGE_SIZE_CHANGED",    ac_page_size_changed,  null],
+            ["EV_SHOW_RECORD",          ac_show_record,        null],
             ["EV_TOGGLE_COLUMN",        ac_toggle_column,      null],
             ["EV_EXPORT_TABLE",         ac_export_table,       null],
             ["EV_SHOW",                 ac_show,               null],
@@ -3919,6 +4104,7 @@ function create_gclass(gclass_name)
         ["EV_SEARCH",               0],
         ["EV_OPEN_COLUMNS",         0],
         ["EV_PAGE_SIZE_CHANGED",    0],
+        ["EV_SHOW_RECORD",          0],
         ["EV_TOGGLE_COLUMN",        0],
         ["EV_EXPORT_TABLE",         0],
 

package/src/lib_icons.js

@@ -168,3 +168,54 @@ export function inject_svg_icons()
     div.innerHTML = ICONS;
     document.body.appendChild(div);
 }
+
+/*
+ *  Is `yi-<name>` a real glyph of the loaded set?
+ *
+ *  It has to be ASKED, not looked up in a list: the set is a CSS file
+ *  (`yui_icons.css`) that an app may extend or replace, and a list here
+ *  would be a second copy of it, wrong the first time somebody adds a
+ *  mask rule. And the question matters because the catch-all rule
+ *  `[class^="yi-"]::before` paints a `currentColor` box for ANY name --
+ *  so an undefined icon does not fail, it renders as a solid black
+ *  square, which reads as a glyph nobody recognises rather than as a
+ *  mistake.
+ *
+ *  The probe is the real stylesheet: a detached element gets no styles,
+ *  so it is attached, hidden, measured and removed. Cached by name --
+ *  a table draws one icon per row and the answer cannot change without
+ *  a reload.
+ */
+const __icon_defined__ = {};
+
+export function yui_icon_is_defined(name)
+{
+    if(!name || typeof name !== "string") {
+        return false;
+    }
+    if(__icon_defined__[name] !== undefined) {
+        return __icon_defined__[name];
+    }
+
+    let defined = false;
+    try {
+        const el = document.createElement("i");
+        el.className = name;
+        el.style.position = "absolute";
+        el.style.visibility = "hidden";
+        el.style.pointerEvents = "none";
+        document.body.appendChild(el);
+        const st = window.getComputedStyle(el, "::before");
+        const mask = st.maskImage || st.webkitMaskImage || "";
+        defined = !!mask && mask !== "none";
+        document.body.removeChild(el);
+    } catch(e) {
+        /*  No DOM to ask (jsdom without the stylesheet, a test): answer
+         *  "not defined" so the caller falls back to showing the name,
+         *  which is the honest half of the pair.  */
+        defined = false;
+    }
+
+    __icon_defined__[name] = defined;
+    return defined;
+}