@yuneta/gobj-ui 7.23.58 → 7.23.60

package/index.js

@@ -120,6 +120,10 @@ export { addClasses, removeClasses, toggleClasses, removeChildElements, disableE
 export { inject_svg_icons } from "./src/lib_icons.js";
 export { EditControl, MarkerControl } from "./src/lib_maplibre.js";
 export { yui_asset_id, yui_asset_ids, yui_asset_src, yui_asset_element, yui_asset_missing } from "./src/yui_asset.js";
+export {
+    YUI_FILE_ACCEPT, yui_file_size_label, yui_file_sha256, yui_array_buffer_to_base64,
+    yui_file_read, yui_files_manifest, yui_file_id_label, yui_file_control
+} from "./src/yui_file_field.js";
 export { yui_toolbar } from "./src/yui_toolbar.js";
 export { yui_theme_now, yui_is_dark, yui_watch_theme } from "./src/yui_theme.js";
 export { attach_clear, refresh_clear } from "./src/yui_inputs.js";

package/package.json

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

package/src/c_yui_form.js

@@ -55,9 +55,16 @@ import TomSelect from "tom-select"; // Import Tom-Select JS
 
 import { createJSONEditor } from 'vanilla-jsoneditor';
 import "vanilla-jsoneditor/themes/jse-theme-dark.css";
+import {
+    yui_file_control
+} from "./yui_file_field.js";
+import {
+    yui_asset_id
+} from "./yui_asset.js";
+
 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 +124,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 +366,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 +376,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 +385,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) {
@@ -664,6 +676,13 @@ function build_form_field_conf(gobj, field_desc)
             field_conf.options = get_fkey_select_options(gobj, field_desc);
             break;
 
+        /*  An fkey into __assets__, and NOT a select: what a person picks
+         *  is a file on their machine, not a row of an index they have
+         *  never seen. The bytes travel BESIDE the record (yui_file_field).  */
+        case "file":
+            field_conf.tag = "file";
+            break;
+
         case "image":
         case "icon":
         case "string":
@@ -1441,6 +1460,24 @@ function create_form_field(
             break;
         }
 
+        case "file":
+        {
+            /*  The picked File is KEPT on the element and never enters the
+             *  record: a kw is plain json and a File is a host object, so
+             *  what the record carries is the id (yui_file_field).  */
+            let file_control = yui_file_control(gobj, {
+                name: name,
+                value: "",      // set_form_values() fills it from the record
+                readonly: readonly,
+                on_pick: function() {
+                    gobj_send_event(gobj, "EV_RECORD_CHANGED", {}, gobj);
+                }
+            });
+            $extend = file_control.$control;
+            $control.appendChild($extend);
+            break;
+        }
+
         default:
             $extend = createElement2(['strong', {class: 'has-text-danger'}, `Unsupported element type: "${tag}"`]);
             $control.appendChild($extend);
@@ -2217,6 +2254,13 @@ function get_form_values(gobj, $form)
                 value = getInputValue($input);
                 break;
 
+            /*  The id the column keeps, never the bytes. A file picked
+             *  and not yet saved has no id -- the host reads the File
+             *  itself, through `get_picked_files`, and builds __files__.  */
+            case "file":
+                value = $input.yui_file_value || "";
+                break;
+
             case "jsoneditor":
                 let jsoneditor = $input.jsoneditor;
                 if(jsoneditor) {
@@ -2318,6 +2362,20 @@ function clear_data(gobj, $form)
         }
     });
 
+    /*  A file control is a `div`, so the input/select/textarea sweep above
+     *  does not reach it, and Clear used to leave the old asset showing.  */
+    $form.querySelectorAll('.FILE_FIELD').forEach($file => {
+        $file.yui_file = null;
+        $file.yui_file_value = "";
+        let $picker = $file.querySelector('.FILE_INPUT');
+        if($picker) {
+            $picker.value = "";
+        }
+        if($file.yui_file_render) {
+            $file.yui_file_render();
+        }
+    });
+
     $form.querySelectorAll('.yui-tabulator-table').forEach($table => {
         if($table.tabulator.initialized) {
             $table.tabulator.clearData();
@@ -2422,6 +2480,18 @@ function set_form_values(gobj, template, $form, record)
         }
 
         switch(tag) {
+            /*  A `file` column comes back as an fkey, in any of the three
+             *  shapes a link takes -- the stored reference, the bare id
+             *  `fkey_only_id` collapses it to, or an expanded ref -- so it
+             *  is read with the reader that knows all three.  */
+            case "file":
+                $input.yui_file = null;
+                $input.yui_file_value = yui_asset_id(value) || "";
+                if($input.yui_file_render) {
+                    $input.yui_file_render();
+                }
+                break;
+
             case "input":
                 switch(input_type) {
                     case "datetime-local":
@@ -3118,14 +3188,79 @@ function ac_timeout(gobj, event, kw, src)
 
 
 
+/************************************************************
+ *      Framework Method command
+ ************************************************************/
+function mt_command_parser(gobj, command, kw, src)
+{
+    switch(command) {
+        case "get_picked_files":
+            return cmd_get_picked_files(gobj, command, kw, src);
+        default:
+            log_error(`${gobj_short_name(gobj)}: command not found: ${command}`);
+            return {
+                result: -1,
+                comment: `Command not found: ${command}`,
+                schema: null,
+                data: null
+            };
+    }
+}
+
+/************************************************************
+ *  The files a person picked and the record cannot carry.
+ *
+ *  A `File` is a host object and a kw is plain json -- the machine trace
+ *  serialises it -- so the picked files never travel in an event. The
+ *  form KEEPS them and the HOST asks for them here, at save, and turns
+ *  them into the `__files__` manifest that rides beside the record.
+ *
+ *  Answers `data: {col: File}`, empty when nothing was picked, which is
+ *  the ordinary case and not an error.
+ ************************************************************/
+function cmd_get_picked_files(gobj, cmd, kw, src)
+{
+    const files = {};
+    const $container = gobj_read_attr(gobj, "$container");
+    const $form = $container? $container.querySelector('form'): null;
+
+    if(!$form) {
+        log_error(`${gobj_short_name(gobj)}: no form to read the picked files from`);
+        return {
+            result: -1,
+            comment: "no form",
+            schema: null,
+            data: null
+        };
+    }
+
+    $form.querySelectorAll('.yui-form-data-input').forEach(($input) => {
+        if($input.dataset.form_tag !== "file") {
+            return;
+        }
+        if($input.yui_file) {
+            files[$input.dataset.treedb_name] = $input.yui_file;
+        }
+    });
+
+    return {
+        result: 0,
+        comment: "",
+        schema: null,
+        data: files
+    };
+}
+
+
 /*---------------------------------------------*
  *          Global methods table
  *---------------------------------------------*/
 const gmt = {
-    mt_create:  mt_create,
-    mt_start:   mt_start,
-    mt_stop:    mt_stop,
-    mt_destroy: mt_destroy
+    mt_create:          mt_create,
+    mt_start:           mt_start,
+    mt_stop:            mt_stop,
+    mt_destroy:         mt_destroy,
+    mt_command_parser:  mt_command_parser
 };
 
 /***************************************************************

package/src/c_yui_treedb_topic_with_form.css

@@ -126,3 +126,18 @@
     line-height: 1;
     vertical-align: middle;
 }
+
+/*
+ *  What a `file` column shows in a cell: the asset id, shortened, or the
+ *  word for having none. Monospace because it is a hash and a hash read
+ *  in a proportional font is unreadable.
+ */
+.FILE_CELL {
+    font-family: monospace;
+}
+
+.FILE_CELL.is-empty {
+    font-family: inherit;
+    font-style: italic;
+    opacity: 0.6;
+}

package/src/c_yui_treedb_topic_with_form.js

@@ -92,6 +92,8 @@ import {row_matches} from "./yui_row_search.js";
 import {t} from "i18next";
 
 import {plan_treedb_writes, READONLY_FORM_TOOLBAR} from "./treedb_write_plan.js";
+import {yui_file_read, yui_files_manifest, yui_file_id_label} from "./yui_file_field.js";
+import {yui_asset_id} from "./yui_asset.js";
 import {delete_impact} from "./delete_impact.js";
 
 import "./c_yui_treedb_topic_with_form.css";
@@ -1293,6 +1295,14 @@ function create_tabulator(gobj)
                 vertAlign = "middle";
                 colFormatter = icon_formatter;
                 break;
+            /*  An fkey into __assets__. It draws the id and NOT the
+             *  picture, because a picture is a `get-asset` per cell -- an
+             *  action, with its own event and its own answer -- and a
+             *  table of 50 rows would fire 50 of them at render time. The
+             *  id is what the cell can say honestly on its own.  */
+            case "file":
+                colFormatter = file_cell_formatter;
+                break;
             case "object":
             case "dict":
             case "template":
@@ -1743,6 +1753,28 @@ function table__destroy(gobj)
  *  render a solid square -- a glyph nobody recognises rather
  *  than a mistake somebody can fix.
  ************************************************************/
+/************************************************************
+ *  What a `file` column shows in a table cell: the asset it names.
+ *
+ *  A sha256 in full is 64 characters of noise in a column, so it is
+ *  shortened and the whole of it is the tooltip. Empty is SAID, not left
+ *  blank -- a blank cell and a cell whose asset failed to load look the
+ *  same, and only one of them is normal.
+ ************************************************************/
+function file_cell_formatter(cell, formatterParams, onRendered)
+{
+    const id = yui_asset_id(cell.getValue());
+    if(!id) {
+        const $empty = createElement2(
+            ["span", {class: "FILE_CELL is-empty", "data-i18n": "no file"}, "no file"]
+        );
+        return $empty;
+    }
+    return createElement2(
+        ["span", {class: "FILE_CELL", title: id}, yui_file_id_label(id)]
+    );
+}
+
 function icon_formatter(cell)
 {
     let name = cell.getValue();
@@ -1869,6 +1901,7 @@ function transform__treedb_value_2_table_value(gobj, col, value, row, field)
             }
             break;
 
+        case "file":    // an fkey into __assets__, read like any other
         case "fkey":    // Convert data from backend to frontend TABLE CELL
             let new_value = [];
             if(value) {
@@ -2639,6 +2672,12 @@ function transform__form_value_2_treedb_value(gobj, col, value, operation)
             value = null;
             break;
 
+        /*  A `file` column is written by the FORM, which sends the bare
+         *  id and lets treedb expand it (the client never learns the
+         *  derived hook name). In the table it is not editable in place.  */
+        case "file":
+            break;
+
         case "fkey":    // Convert data from frontend to backend
             value = build_fkey_ref(gobj, col, value);
             break;
@@ -3430,22 +3469,110 @@ function ac_form_save_record(gobj, event, kw, src)
         return -1;      /*  Error already logged  */
     }
     let mode = gobj_read_str_attr(src, "form_mode");
+
+    /*------------------------------------------------------*
+     *  Did anybody pick a file?
+     *
+     *  A `File` is a host object and a kw is plain json, so the picked
+     *  files never came with the record: the form KEPT them and this is
+     *  where they are asked for. Nothing picked is the ordinary case.
+     *------------------------------------------------------*/
+    let picked = {};
+    const answer = gobj_command(src, "get_picked_files", {}, gobj);
+    if(answer && answer.result >= 0 && answer.data) {
+        picked = answer.data;
+    }
+    const cols = Object.keys(picked);
+
+    if(cols.length === 0) {
+        publish_treedb_write(gobj, mode, kw);
+
+        /*  we are INSIDE the form's gobj_publish_event stack — never
+         *  destroy the publisher synchronously from a subscriber
+         *  callback: defer the close  */
+        setTimeout(function() {
+            close_form_dialog(gobj);
+        }, 0);
+        return 0;
+    }
+
+    /*------------------------------------------------------*
+     *  Reading a file is a PROMISE, and a resolved promise is an OS
+     *  notification: it enters the machine as an EVENT, never as a
+     *  chain of callbacks that the trace cannot see. The dialog stays
+     *  open until it lands, which is what tells the person that 40 MB
+     *  are still going up.
+     *------------------------------------------------------*/
+    Promise.all(cols.map((col) => {
+        return yui_file_read(picked[col]).then((read) => {
+            return {col: col, read: read};
+        });
+    })).then((reads) => {
+        const picks = {};
+        reads.forEach((r) => {
+            picks[r.col] = r.read;
+        });
+        gobj_send_event(gobj, "EV_FILES_READ",
+            {mode: mode, record: kw, picks: picks}, gobj
+        );
+    }).catch((e) => {
+        gobj_send_event(gobj, "EV_FILES_FAILED",
+            {reason: (e && e.message)? e.message: String(e)}, gobj
+        );
+    });
+
+    return 0;
+}
+
+/************************************************************
+ *  The one place a write of this view leaves for the app.
+ ************************************************************/
+function publish_treedb_write(gobj, mode, record, jn_files)
+{
+    const kw_write = {
+        topic_name: gobj_read_str_attr(gobj, "topic_name"),
+        record: record
+    };
+    if(jn_files && Object.keys(jn_files).length > 0) {
+        /*  Not a column: an instruction to the treedb write path,
+         *  consumed and dropped at the door.  */
+        kw_write.record.__files__ = jn_files;
+    }
     gobj_publish_event(
         gobj,
         (mode === "create")? "EV_CREATE_RECORD" : "EV_UPDATE_RECORD",
-        {
-            topic_name: gobj_read_str_attr(gobj, "topic_name"),
-            record: kw
-        }
+        kw_write
     );
+}
 
-    /*  we are INSIDE the form's gobj_publish_event stack — never
-     *  destroy the publisher synchronously from a subscriber
-     *  callback: defer the close  */
-    setTimeout(function() {
-        close_form_dialog(gobj);
-    }, 0);
+/************************************************************
+ *  {mode, record, picks} -- the bytes are here now
+ ************************************************************/
+function ac_files_read(gobj, event, kw, src)
+{
+    const {record, __files__} = yui_files_manifest(kw.picks, kw.record);
+    publish_treedb_write(gobj, kw.mode, record, __files__);
+    close_form_dialog(gobj);
+    return 0;
+}
 
+/************************************************************
+ *  {reason} -- the browser could not read what was picked
+ *
+ *  The form stays OPEN: the record is still there, and closing it would
+ *  throw away what the person typed for a failure that is not theirs.
+ ************************************************************/
+function ac_files_failed(gobj, event, kw, src)
+{
+    log_error(`${gobj_short_name(gobj)}: cannot read the picked file: ${kw.reason}`);
+    /*  An i18n KEY, not a sentence: the dialog renders it with `i18n`, so
+     *  a sentence here would be a key nobody defined and would render as
+     *  itself in every language. The reason is DATA and stays in the log,
+     *  where it can be read without being translated.  */
+    yui_shell_confirm_ok(
+        yui_shell_of(gobj), 'cannot read the picked file',
+        {t: t, ok_label: "accept"}
+    );
     return 0;
 }
 
@@ -4041,6 +4168,8 @@ function create_gclass(gclass_name)
 
             ["EV_EDITION_MODE",         ac_edition_mode,       null],
             ["EV_SAVE_RECORD",          ac_form_save_record,   null],
+            ["EV_FILES_READ",           ac_files_read,         null],
+            ["EV_FILES_FAILED",         ac_files_failed,       null],
 
             ["EV_NEW_ROW",              ac_new_row,            null],
             ["EV_DELETE_ROWS",          ac_delete_rows,        null],
@@ -4082,6 +4211,8 @@ function create_gclass(gclass_name)
 
         ["EV_EDITION_MODE",         0],
         ["EV_SAVE_RECORD",          0],
+        ["EV_FILES_READ",           0],
+        ["EV_FILES_FAILED",         0],
         ["EV_NEW_ROW",              0],
         ["EV_DELETE_ROWS",          0],
         ["EV_COPY_ROWS",            0],

package/src/yui_file_field.css

@@ -0,0 +1,67 @@
+/*
+ *  yui_file_field.css
+ *
+ *  The control for a treedb `file` column. One row: the button, what it
+ *  is holding, and the way to clear it.
+ *
+ *  No transitions -- the state changes the moment the person acts on it.
+ *
+ *      Copyright (c) 2026, ArtGins.
+ *      All Rights Reserved.
+ */
+
+.FILE_FIELD {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    min-width: 0;
+}
+
+.FILE_FIELD .FILE_PICK,
+.FILE_FIELD .FILE_CLEAR {
+    flex-shrink: 0;
+    transition: none;
+}
+
+.FILE_FIELD .FILE_PICK_ICON,
+.FILE_FIELD .FILE_CLEAR_ICON {
+    margin-right: 0.25rem;
+}
+
+.FILE_FIELD .FILE_CLEAR_ICON {
+    margin-right: 0;
+}
+
+/*
+ *  The name is the part that must give way: an id or a long filename
+ *  cannot push the buttons out of the row.
+ */
+.FILE_FIELD .FILE_NAME {
+    flex: 1 1 8rem;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: monospace;
+}
+
+.FILE_FIELD .FILE_SIZE {
+    flex-shrink: 0;
+    opacity: 0.7;
+    font-size: 0.85em;
+}
+
+.FILE_FIELD .FILE_STATE {
+    flex-shrink: 0;
+    font-size: 0.85em;
+}
+
+.FILE_FIELD .FILE_STATE.is-picked {
+    font-weight: bold;
+}
+
+.FILE_FIELD .FILE_STATE.is-empty {
+    opacity: 0.6;
+    font-style: italic;
+}