@yuneta/gobj-ui 5.3.3 → 5.5.0

package/index.js

@@ -24,6 +24,11 @@ export { register_c_yui_uplot } from "./src/c_yui_uplot.js";
 export { register_c_yui_json_graph } from "./src/c_yui_json_graph.js";
 export { register_c_yui_json } from "./src/c_yui_json.js";
 export { register_c_yui_gobj_tree_js } from "./src/c_yui_gobj_tree_js.js";
+export {
+    register_c_yui_service_view,
+    yui_mount_service_view,
+    expose_view_container,
+} from "./src/c_yui_service_view.js";
 
 /*
  *  Declarative shell + menu navigation (new in v7.4)

package/package.json

@@ -1,47 +1,47 @@
 {
-    "name": "@yuneta/gobj-ui",
-    "version": "5.3.3",
-    "type": "module",
-    "main": "dist/gobj-ui.cjs.js",
-    "module": "dist/gobj-ui.es.js",
-    "exports": {
-        ".": {
-            "import": "./dist/gobj-ui.es.js",
-            "require": "./dist/gobj-ui.cjs.js"
-        },
-        "./index.js": "./index.js",
-        "./vite-plugin-yuneta-html.js": "./vite-plugin-yuneta-html.js",
-        "./src/*": "./src/*"
+  "name": "@yuneta/gobj-ui",
+  "version": "5.5.0",
+  "type": "module",
+  "main": "dist/gobj-ui.cjs.js",
+  "module": "dist/gobj-ui.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/gobj-ui.es.js",
+      "require": "./dist/gobj-ui.cjs.js"
     },
-    "files": [
-        "dist/gobj-ui.es.js",
-        "dist/gobj-ui.cjs.js",
-        "index.js",
-        "src/",
-        "vite-plugin-yuneta-html.js"
-    ],
-    "description": "Yuneta UI Library — the active line: declarative shell (C_YUI_SHELL+NAV+PAGER+WIZARD) + windows, TreeDB views, forms, charts and maps.  Consumed by wattyzer and the yunetas JS yunos (gui_agent, gui_treedb).  The frozen legacy GClass GUI stack (C_YUI_MAIN/TABS/ROUTING) lives on the v1 branch, npm dist-tag 'legacy' (consumed by estadodelaire and hidraulia).",
-    "scripts": {
-        "build": "vite build",
-        "test": "vitest run",
-        "prepublishOnly": "npm run build"
-    },
-    "devDependencies": {
-        "@rollup/plugin-terser": "^1.0.0",
-        "@vitest/coverage-v8": "^4.1.10",
-        "@yuneta/gobj-js": "^7.8.7",
-        "vite": "^8.1.5",
-        "vitest": "^4.1.10"
-    },
-    "peerDependencies": {
-        "@antv/g6": "^5.1.0",
-        "@yuneta/gobj-js": "^7.8.7",
-        "bulma": "^1.0.4",
-        "i18next": "^26.3.6",
-        "maplibre-gl": "^6.0.0",
-        "tabulator-tables": "^6.5.2",
-        "tom-select": "^2.6.2",
-        "uplot": "^1.6.32",
-        "vanilla-jsoneditor": "^3.13.0"
-    }
+    "./index.js": "./index.js",
+    "./vite-plugin-yuneta-html.js": "./vite-plugin-yuneta-html.js",
+    "./src/*": "./src/*"
+  },
+  "files": [
+    "dist/gobj-ui.es.js",
+    "dist/gobj-ui.cjs.js",
+    "index.js",
+    "src/",
+    "vite-plugin-yuneta-html.js"
+  ],
+  "description": "Yuneta UI Library — the active line: declarative shell (C_YUI_SHELL+NAV+PAGER+WIZARD) + windows, TreeDB views, forms, charts and maps.  Consumed by wattyzer and the yunetas JS yunos (gui_agent, gui_treedb).  The frozen legacy GClass GUI stack (C_YUI_MAIN/TABS/ROUTING) lives on the v1 branch, npm dist-tag 'legacy' (consumed by estadodelaire and hidraulia).",
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@rollup/plugin-terser": "^1.0.0",
+    "@vitest/coverage-v8": "^4.1.10",
+    "@yuneta/gobj-js": "^7.8.7",
+    "vite": "^8.1.5",
+    "vitest": "^4.1.10"
+  },
+  "peerDependencies": {
+    "@antv/g6": "^5.1.0",
+    "@yuneta/gobj-js": "^7.8.7",
+    "bulma": "^1.0.4",
+    "i18next": "^26.3.6",
+    "maplibre-gl": "^6.0.0",
+    "tabulator-tables": "^6.5.2",
+    "tom-select": "^2.6.2",
+    "uplot": "^1.6.32",
+    "vanilla-jsoneditor": "^3.13.0"
+  }
 }

package/src/c_yui_node.js

@@ -126,6 +126,10 @@ import {
     child_nav_items,
     chrome_visible,
     normalize_spec,
+    is_nav_mode,
+    nav_mode_renders,
+    nav_mode_depth,
+    NAV_MODES,
 } from "./node_tree_model.js";
 
 import {
@@ -133,6 +137,7 @@ import {
     yui_shell_zone,
     yui_shell_navigate,
     yui_shell_set_sub_routes,
+    yui_shell_translate,
 } from "./c_yui_shell.js";
 
 import "./c_yui_node.css";
@@ -169,6 +174,7 @@ SDATA(data_type_t.DTP_JSON,     "children",     0,  null,   "Declared child spec
 
 SDATA(data_type_t.DTP_STRING,   "base_route",   0,  "",     "ROOT only: the declared route the whole tree hangs from"),
 SDATA(data_type_t.DTP_STRING,   "tree_version", 0,  "",     "ROOT only: version of the tree CONTRACT (its paths are public urls)"),
+SDATA(data_type_t.DTP_STRING,   "nav_mode",     0,  "stack","ROOT only: how the way in is shown — stack|back|path"),
 
 SDATA(data_type_t.DTP_POINTER,  "$container",   0,  null,   "Root HTMLElement (shell view contract)"),
 SDATA_END()
@@ -389,6 +395,29 @@ function tree_root_of(gobj)
     }
 }
 
+/************************************************************
+ *  The navigation mode in force for this node.
+ *
+ *  It is ONE knob per tree, held by the root: a tree whose ancestors
+ *  stacked strips while a descendant drew a breadcrumb would be
+ *  showing the way in twice, in two languages.  Descendants read it
+ *  from the root rather than keeping a copy, so a node added at
+ *  runtime is born in the mode the tree is already in.
+ ************************************************************/
+function nav_mode_of(gobj)
+{
+    let mode = gobj_read_attr(tree_root_of(gobj), "nav_mode") || "stack";
+
+    if(!is_nav_mode(mode)) {
+        log_error(
+            `${GCLASS_NAME} '${node_path_str(gobj)}': unknown nav_mode ` +
+            `'${mode}' — expected one of ${NAV_MODES.join("|")}`
+        );
+        return "stack";
+    }
+    return mode;
+}
+
 /************************************************************
  *  Node ids from the root DOWN TO this node, root excluded
  *  (the root's own segment is already inside base_route).
@@ -494,12 +523,14 @@ function resolve_path_info(gobj, subpath, inherited)
 {
     let effective = (typeof inherited === "number") ? inherited : null;
 
+    let mode = nav_mode_of(gobj);
+
     let own = gobj_read_attr(gobj, "chrome_depth");
     if(typeof own === "number" && own >= 0) {
         effective = own;
     }
     if(has_link(gobj)) {
-        return {distance: 0, chrome_depth: effective, chain: []};
+        return {distance: 0, chrome_depth: nav_mode_depth(effective, mode), chain: []};
     }
 
     /*  Distance is counted in STRUCTURAL segments: the tail a viewer
@@ -524,7 +555,11 @@ function resolve_path_info(gobj, subpath, inherited)
             break;
         }
     }
-    return {distance: distance, chrome_depth: effective, chain: chain};
+    return {
+        distance: distance,
+        chrome_depth: nav_mode_depth(effective, mode),
+        chain: chain
+    };
 }
 
 /************************************************************
@@ -548,6 +583,30 @@ function walk_path(node, path)
     return {node: g, missing: segs.slice(i)};
 }
 
+/************************************************************
+ *  Translate a subtree this node just built.
+ *
+ *  A node renders its chrome WHEN YOU WALK INTO IT, long after
+ *  the host's one-shot refresh_language over the shell tree, and
+ *  its zone navs are appended into shell zones, outside this
+ *  node's own $container.  Neither pass reaches them, so without
+ *  this every strip renders its raw i18n key: `treedb`,
+ *  `central database`, `data` in lower-case English next to a
+ *  translated menu — which reads as a MISSING key and sent more
+ *  than one person looking for the wrong bug.
+ *
+ *  This is library-built DOM, so it goes through the shell's
+ *  registered translator.  What a node MOUNTS is not ours: an app
+ *  view gclass translates its own DOM.
+ ************************************************************/
+function translate_own_dom(gobj, $el)
+{
+    if(!$el) {
+        return;
+    }
+    yui_shell_translate(yui_shell_of(gobj), $el);
+}
+
 /************************************************************
  *  Destroy the C_YUI_NAV gobjs rendering this node's projection.
  ************************************************************/
@@ -575,7 +634,8 @@ function render_projection(gobj, mode, $where, active_route, active_id, zones_on
     if(!priv.children.length) {
         return;
     }
-    let renders = projection_renders(gobj_read_attr(gobj, "projection"), mode);
+    let renders = nav_mode_renders(gobj_read_attr(gobj, "projection"),
+        nav_mode_of(gobj), mode, priv.is_root);
     if(!renders.length) {
         return;
     }
@@ -634,6 +694,7 @@ function render_projection(gobj, mode, $where, active_route, active_id, zones_on
         let $nav = gobj_read_attr(nav, "$container");
         if($nav) {
             $target.appendChild($nav);
+            translate_own_dom(gobj, $nav);
         }
         priv.navs.push(nav);
         i++;
@@ -681,11 +742,14 @@ function project_into_zone(gobj, render, items, active_route, active_id)
         let $nav = gobj_read_attr(nav, "$container");
         if($nav) {
             $zone.appendChild($nav);
+            translate_own_dom(gobj, $nav);
         }
         priv.zone_navs[key] = nav;
         priv.zone_sig[key] = sig;
     } else if(priv.zone_sig[key] !== sig) {
         gobj_send_event(nav, "EV_SET_ITEMS", {items: items}, gobj);
+        /*  EV_SET_ITEMS rebuilt the nav's DOM: translate it again. */
+        translate_own_dom(gobj, gobj_read_attr(nav, "$container"));
         priv.zone_sig[key] = sig;
     }
 
@@ -786,10 +850,12 @@ function render_self(gobj)
     }
 
     if(!view) {
-        priv.$body.appendChild(createElement2(
+        let $empty = createElement2(
             ["div", {class: "NODE_EMPTY", i18n: "nothing here yet"},
                 "Nothing here yet."]
-        ));
+        );
+        priv.$body.appendChild($empty);
+        translate_own_dom(gobj, $empty);
     }
 }
 
@@ -833,7 +899,8 @@ function render_child(gobj, child)
 function render_path(gobj, $where)
 {
     let priv = gobj.priv;
-    let renders = projection_renders(gobj_read_attr(gobj, "projection"), "path");
+    let renders = nav_mode_renders(gobj_read_attr(gobj, "projection"),
+        nav_mode_of(gobj), "path", priv.is_root);
 
     if(!renders.length) {
         return;
@@ -881,6 +948,7 @@ function render_path(gobj, $where)
         let $nav = gobj_read_attr(nav, "$container");
         if($nav) {
             $where.appendChild($nav);
+            translate_own_dom(gobj, $nav);
         }
         priv.navs.push(nav);
         i++;
@@ -1328,6 +1396,54 @@ function ac_set_chrome_depth(gobj, event, kw, src)
     return 0;
 }
 
+/************************************************************
+ *  Runtime API: change how this TREE shows the way in.
+ *
+ *  One knob for the whole tree, and deliberately root-only: the
+ *  mode answers "how deep am I and how do I get back", a question
+ *  that has one answer per tree.  Set on a middle node it would
+ *  silently do nothing (descendants read the root's), and a knob
+ *  that accepts a call and ignores it is worse than one that
+ *  refuses it.
+ *
+ *  Nothing declared is rewritten — the mode filters the renders as
+ *  they are asked for — so going back to "stack" restores exactly
+ *  what the app declared, per branch, including layouts this mode
+ *  never mentions.
+ ************************************************************/
+function ac_set_nav_mode(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+    let mode = kw.nav_mode || "";
+
+    if(!is_nav_mode(mode)) {
+        log_error(
+            `${GCLASS_NAME} '${node_path_str(gobj)}': unknown nav_mode ` +
+            `'${mode}' — expected one of ${NAV_MODES.join("|")}`
+        );
+        return -1;
+    }
+    if(!priv.is_root) {
+        log_error(
+            `${GCLASS_NAME} '${node_path_str(gobj)}': nav_mode belongs to the ` +
+            `tree ROOT — set it there, the whole tree reads it`
+        );
+        return -1;
+    }
+    gobj_write_attr(gobj, "nav_mode", mode);
+
+    /*  Same reason as EV_SET_CHROME_DEPTH: what changes is the shape
+     *  of the ACTIVE PATH, whose strips are painted by the ancestors,
+     *  so the tree is asked to re-apply the current route instead of
+     *  repainting one node. */
+    let shell = yui_shell_of(gobj);
+    if(shell) {
+        yui_shell_navigate(shell, gobj_read_attr(shell, "current_route") ||
+            route_of(gobj), {replace: true});
+    }
+    return 0;
+}
+
 /************************************************************
  *  Runtime API: change (or set) my content.
  ************************************************************/
@@ -1402,6 +1518,20 @@ function yui_node_set_chrome_depth(node, depth)
         {chrome_depth: depth}, node);
 }
 
+/************************************************************
+ *  The tree's navigation mode: "stack" | "back" | "path".
+ *  Send it to the ROOT — the whole tree reads it from there.
+ ************************************************************/
+function yui_node_set_nav_mode(node, mode)
+{
+    return gobj_send_event(node, "EV_SET_NAV_MODE", {nav_mode: mode}, node);
+}
+
+function yui_node_nav_mode(node)
+{
+    return gobj_read_attr(tree_root_of(node), "nav_mode") || "stack";
+}
+
 /************************************************************
  *  Resolve a path of ids from a node ("" = the node itself).
  *  Returns null when any segment is missing — callers that mean
@@ -1484,6 +1614,7 @@ function create_gclass(gclass_name)
             ["EV_REMOVE_NODE",          ac_remove_node,         null],
             ["EV_SET_PROJECTION",       ac_set_projection,      null],
             ["EV_SET_CHROME_DEPTH",     ac_set_chrome_depth,    null],
+            ["EV_SET_NAV_MODE",         ac_set_nav_mode,        null],
             ["EV_SET_CONTENT",          ac_set_content,         null],
             ["EV_NODE_TREE_CHANGED",    ac_tree_changed,        null]
         ]],
@@ -1496,6 +1627,7 @@ function create_gclass(gclass_name)
             ["EV_REMOVE_NODE",          ac_remove_node,         null],
             ["EV_SET_PROJECTION",       ac_set_projection,      null],
             ["EV_SET_CHROME_DEPTH",     ac_set_chrome_depth,    null],
+            ["EV_SET_NAV_MODE",         ac_set_nav_mode,        null],
             ["EV_SET_CONTENT",          ac_set_content,         null],
             ["EV_NODE_TREE_CHANGED",    ac_tree_changed,        null]
         ]],
@@ -1508,6 +1640,7 @@ function create_gclass(gclass_name)
             ["EV_REMOVE_NODE",          ac_remove_node,         null],
             ["EV_SET_PROJECTION",       ac_set_projection,      null],
             ["EV_SET_CHROME_DEPTH",     ac_set_chrome_depth,    null],
+            ["EV_SET_NAV_MODE",         ac_set_nav_mode,        null],
             ["EV_SET_CONTENT",          ac_set_content,         null],
             ["EV_NODE_TREE_CHANGED",    ac_tree_changed,        null]
         ]]
@@ -1525,6 +1658,7 @@ function create_gclass(gclass_name)
         ["EV_REMOVE_NODE",          0],
         ["EV_SET_PROJECTION",       0],
         ["EV_SET_CHROME_DEPTH",     0],
+        ["EV_SET_NAV_MODE",         0],
         ["EV_SET_CONTENT",          0],
         ["EV_NODE_TREE_CHANGED",    0]
     ];
@@ -1565,6 +1699,8 @@ export {
     yui_node_set_projection,
     yui_node_set_content,
     yui_node_set_chrome_depth,
+    yui_node_set_nav_mode,
+    yui_node_nav_mode,
     yui_node_find,
     yui_node_route,
     yui_node_tree_version