@yuneta/gobj-ui 7.23.64 → 7.23.65

package/dist/gobj-ui.cjs.js

@@ -268,7 +268,8 @@ var TOOLBAR_ACTION_TYPES = [
 	"navigate",
 	"drawer",
 	"event",
-	"dropdown"
+	"dropdown",
+	"link"
 ];
 /************************************************************
 *  Decide which renderer to use for a toolbar item.
@@ -337,6 +338,7 @@ function validate_action(action, owner_id) {
 	}
 	if (action.type === "navigate" && !_is_non_empty_string(action.route)) warnings.push(`toolbar item '${id}' (action.type:navigate) requires 'route'`);
 	if (action.type === "event" && !_is_non_empty_string(action.event)) warnings.push(`toolbar item '${id}' (action.type:event) requires 'event' name`);
+	if (action.type === "link" && !_is_non_empty_string(action.url)) warnings.push(`toolbar item '${id}' (action.type:link) requires 'url'`);
 	if (action.type === "dropdown") {
 		let nested = validate_dropdown_action(action, id);
 		for (let w of nested) warnings.push(w);
@@ -1684,6 +1686,20 @@ function safe_id(s) {
 *      drawer   { type:"drawer",   op:"toggle"|"open"|"close", menu_id? }
 *      event    { type:"event",    event, kw? }
 *      dropdown { type:"dropdown", items[] }    (toolbar-only)
+*      link     { type:"link",     url, target? }
+*
+*  `link` leaves the application, so on a toolbar item and on the brand
+*  it is rendered as a real <a href> rather than a <button>:
+*  middle-click, open-in-new-tab and the url in the status bar are what
+*  make a link recognisable as one, and a button that assigns
+*  location.href has none of them.  It is also why it does not become
+*  an FSM event -- there is no state of this application to transition;
+*  the page is being left.  A target of "_blank" gets
+*  rel="noopener noreferrer" for free.
+*
+*  INSIDE A DROPDOWN it stays a <button>, deliberately: those rows are
+*  role="menuitemradio" in a menu, and a link is not a choice among
+*  options.  There the dispatcher navigates.
 *
 *  Per-item `show_on` is honoured: each rendered item is wrapped with
 *  the same Bulma-helper logic as zones.
@@ -1770,6 +1786,26 @@ function badge_node(value) {
 	];
 }
 /************************************************************
+*  The attributes that turn a toolbar item into a real link, or
+*  null when this item is not one.  Answering null is what keeps
+*  every caller's default (a <button> that dispatches an action)
+*  exactly as it was.
+************************************************************/
+function toolbar_link_attrs(it) {
+	let action = it && it.action || {};
+	if (action.type !== "link") return null;
+	if ((0, _yuneta_gobj_js.empty_string)(action.url)) {
+		(0, _yuneta_gobj_js.log_warning)(`C_YUI_SHELL: toolbar item '${it.id || "?"}' has action.type "link" without a url`);
+		return null;
+	}
+	let attrs = { href: action.url };
+	if (!(0, _yuneta_gobj_js.empty_string)(action.target)) {
+		attrs.target = action.target;
+		if (action.target === "_blank") attrs.rel = "noopener noreferrer";
+	}
+	return attrs;
+}
+/************************************************************
 *  Renderer for the default ("action") item kind.
 ************************************************************/
 function build_toolbar_action_item(gobj, it) {
@@ -1808,12 +1844,17 @@ function build_toolbar_action_item(gobj, it) {
 		btn_attrs.title = tip;
 		btn_attrs["data-i18n-title"] = tip;
 	}
+	let link = toolbar_link_attrs(it);
+	if (link) {
+		delete btn_attrs.type;
+		Object.assign(btn_attrs, link);
+	}
 	let $item = (0, _yuneta_gobj_js.createElement2)([
-		"button",
+		link ? "a" : "button",
 		btn_attrs,
 		children
 	]);
-	$item.addEventListener("click", (ev) => {
+	if (!link) $item.addEventListener("click", (ev) => {
 		ev.preventDefault();
 		handle_toolbar_action(gobj, it, $item);
 	});
@@ -1845,7 +1886,11 @@ function build_toolbar_brand_item(gobj, it) {
 		attrs["aria-haspopup"] = "menu";
 		attrs["aria-expanded"] = "false";
 	}
-	if (action_type === "") tag = "div";
+	let link = toolbar_link_attrs(it);
+	if (link) {
+		tag = "a";
+		Object.assign(attrs, link);
+	} else if (action_type === "") tag = "div";
 	else attrs.type = "button";
 	let $item = (0, _yuneta_gobj_js.createElement2)([
 		tag,
@@ -1863,7 +1908,7 @@ function build_toolbar_brand_item(gobj, it) {
 			it.wordmark
 		]]
 	]);
-	if (action_type !== "") $item.addEventListener("click", (ev) => {
+	if (action_type !== "" && !link) $item.addEventListener("click", (ev) => {
 		ev.preventDefault();
 		handle_toolbar_action(gobj, it, $item);
 	});
@@ -2035,6 +2080,12 @@ function handle_toolbar_action(gobj, item, $trigger) {
 		case "dropdown":
 			toggle_toolbar_dropdown(gobj, item, action, $trigger);
 			break;
+		case "link":
+			if (!(0, _yuneta_gobj_js.empty_string)(action.url)) {
+				if (action.target === "_blank") window.open(action.url, "_blank", "noopener,noreferrer");
+				else window.location.assign(action.url);
+			} else (0, _yuneta_gobj_js.log_warning)(`C_YUI_SHELL: toolbar item '${item.id || "?"}' has action.type "link" without a url`);
+			break;
 		default: (0, _yuneta_gobj_js.log_warning)(`C_YUI_SHELL: toolbar item '${item.id || "?"}' has no/unknown action.type`);
 	}
 }

package/dist/gobj-ui.es.js

@@ -263,7 +263,8 @@ var TOOLBAR_ACTION_TYPES = [
 	"navigate",
 	"drawer",
 	"event",
-	"dropdown"
+	"dropdown",
+	"link"
 ];
 /************************************************************
 *  Decide which renderer to use for a toolbar item.
@@ -332,6 +333,7 @@ function validate_action(action, owner_id) {
 	}
 	if (action.type === "navigate" && !_is_non_empty_string(action.route)) warnings.push(`toolbar item '${id}' (action.type:navigate) requires 'route'`);
 	if (action.type === "event" && !_is_non_empty_string(action.event)) warnings.push(`toolbar item '${id}' (action.type:event) requires 'event' name`);
+	if (action.type === "link" && !_is_non_empty_string(action.url)) warnings.push(`toolbar item '${id}' (action.type:link) requires 'url'`);
 	if (action.type === "dropdown") {
 		let nested = validate_dropdown_action(action, id);
 		for (let w of nested) warnings.push(w);
@@ -1679,6 +1681,20 @@ function safe_id(s) {
 *      drawer   { type:"drawer",   op:"toggle"|"open"|"close", menu_id? }
 *      event    { type:"event",    event, kw? }
 *      dropdown { type:"dropdown", items[] }    (toolbar-only)
+*      link     { type:"link",     url, target? }
+*
+*  `link` leaves the application, so on a toolbar item and on the brand
+*  it is rendered as a real <a href> rather than a <button>:
+*  middle-click, open-in-new-tab and the url in the status bar are what
+*  make a link recognisable as one, and a button that assigns
+*  location.href has none of them.  It is also why it does not become
+*  an FSM event -- there is no state of this application to transition;
+*  the page is being left.  A target of "_blank" gets
+*  rel="noopener noreferrer" for free.
+*
+*  INSIDE A DROPDOWN it stays a <button>, deliberately: those rows are
+*  role="menuitemradio" in a menu, and a link is not a choice among
+*  options.  There the dispatcher navigates.
 *
 *  Per-item `show_on` is honoured: each rendered item is wrapped with
 *  the same Bulma-helper logic as zones.
@@ -1765,6 +1781,26 @@ function badge_node(value) {
 	];
 }
 /************************************************************
+*  The attributes that turn a toolbar item into a real link, or
+*  null when this item is not one.  Answering null is what keeps
+*  every caller's default (a <button> that dispatches an action)
+*  exactly as it was.
+************************************************************/
+function toolbar_link_attrs(it) {
+	let action = it && it.action || {};
+	if (action.type !== "link") return null;
+	if (empty_string(action.url)) {
+		log_warning(`C_YUI_SHELL: toolbar item '${it.id || "?"}' has action.type "link" without a url`);
+		return null;
+	}
+	let attrs = { href: action.url };
+	if (!empty_string(action.target)) {
+		attrs.target = action.target;
+		if (action.target === "_blank") attrs.rel = "noopener noreferrer";
+	}
+	return attrs;
+}
+/************************************************************
 *  Renderer for the default ("action") item kind.
 ************************************************************/
 function build_toolbar_action_item(gobj, it) {
@@ -1803,12 +1839,17 @@ function build_toolbar_action_item(gobj, it) {
 		btn_attrs.title = tip;
 		btn_attrs["data-i18n-title"] = tip;
 	}
+	let link = toolbar_link_attrs(it);
+	if (link) {
+		delete btn_attrs.type;
+		Object.assign(btn_attrs, link);
+	}
 	let $item = createElement2([
-		"button",
+		link ? "a" : "button",
 		btn_attrs,
 		children
 	]);
-	$item.addEventListener("click", (ev) => {
+	if (!link) $item.addEventListener("click", (ev) => {
 		ev.preventDefault();
 		handle_toolbar_action(gobj, it, $item);
 	});
@@ -1840,7 +1881,11 @@ function build_toolbar_brand_item(gobj, it) {
 		attrs["aria-haspopup"] = "menu";
 		attrs["aria-expanded"] = "false";
 	}
-	if (action_type === "") tag = "div";
+	let link = toolbar_link_attrs(it);
+	if (link) {
+		tag = "a";
+		Object.assign(attrs, link);
+	} else if (action_type === "") tag = "div";
 	else attrs.type = "button";
 	let $item = createElement2([
 		tag,
@@ -1858,7 +1903,7 @@ function build_toolbar_brand_item(gobj, it) {
 			it.wordmark
 		]]
 	]);
-	if (action_type !== "") $item.addEventListener("click", (ev) => {
+	if (action_type !== "" && !link) $item.addEventListener("click", (ev) => {
 		ev.preventDefault();
 		handle_toolbar_action(gobj, it, $item);
 	});
@@ -2030,6 +2075,12 @@ function handle_toolbar_action(gobj, item, $trigger) {
 		case "dropdown":
 			toggle_toolbar_dropdown(gobj, item, action, $trigger);
 			break;
+		case "link":
+			if (!empty_string(action.url)) {
+				if (action.target === "_blank") window.open(action.url, "_blank", "noopener,noreferrer");
+				else window.location.assign(action.url);
+			} else log_warning(`C_YUI_SHELL: toolbar item '${item.id || "?"}' has action.type "link" without a url`);
+			break;
 		default: log_warning(`C_YUI_SHELL: toolbar item '${item.id || "?"}' has no/unknown action.type`);
 	}
 }

package/package.json

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

package/src/c_yui_shell.js

@@ -1586,6 +1586,20 @@ function safe_id(s)
  *      drawer   { type:"drawer",   op:"toggle"|"open"|"close", menu_id? }
  *      event    { type:"event",    event, kw? }
  *      dropdown { type:"dropdown", items[] }    (toolbar-only)
+ *      link     { type:"link",     url, target? }
+ *
+ *  `link` leaves the application, so on a toolbar item and on the brand
+ *  it is rendered as a real <a href> rather than a <button>:
+ *  middle-click, open-in-new-tab and the url in the status bar are what
+ *  make a link recognisable as one, and a button that assigns
+ *  location.href has none of them.  It is also why it does not become
+ *  an FSM event -- there is no state of this application to transition;
+ *  the page is being left.  A target of "_blank" gets
+ *  rel="noopener noreferrer" for free.
+ *
+ *  INSIDE A DROPDOWN it stays a <button>, deliberately: those rows are
+ *  role="menuitemradio" in a menu, and a link is not a choice among
+ *  options.  There the dispatcher navigates.
  *
  *  Per-item `show_on` is honoured: each rendered item is wrapped with
  *  the same Bulma-helper logic as zones.
@@ -1703,6 +1717,35 @@ function badge_node(value)
     return ["span", attrs, text];
 }
 
+/************************************************************
+ *  The attributes that turn a toolbar item into a real link, or
+ *  null when this item is not one.  Answering null is what keeps
+ *  every caller's default (a <button> that dispatches an action)
+ *  exactly as it was.
+ ************************************************************/
+function toolbar_link_attrs(it)
+{
+    let action = (it && it.action) || {};
+    if(action.type !== "link") {
+        return null;
+    }
+    if(empty_string(action.url)) {
+        log_warning(
+            `C_YUI_SHELL: toolbar item '${it.id||"?"}' has action.type "link" ` +
+            `without a url`
+        );
+        return null;
+    }
+    let attrs = {href: action.url};
+    if(!empty_string(action.target)) {
+        attrs.target = action.target;
+        if(action.target === "_blank") {
+            attrs.rel = "noopener noreferrer";
+        }
+    }
+    return attrs;
+}
+
 /************************************************************
  *  Renderer for the default ("action") item kind.
  ************************************************************/
@@ -1751,13 +1794,20 @@ function build_toolbar_action_item(gobj, it)
         btn_attrs.title = tip;
         btn_attrs["data-i18n-title"] = tip;
     }
+    let link = toolbar_link_attrs(it);
+    if(link) {
+        delete btn_attrs.type;      /*  meaningless, and invalid, on an <a>  */
+        Object.assign(btn_attrs, link);
+    }
     let $item = createElement2(
-        ["button", btn_attrs, children]
+        [link? "a": "button", btn_attrs, children]
     );
-    $item.addEventListener("click", ev => {
-        ev.preventDefault();
-        handle_toolbar_action(gobj, it, $item);
-    });
+    if(!link) {
+        $item.addEventListener("click", ev => {
+            ev.preventDefault();
+            handle_toolbar_action(gobj, it, $item);
+        });
+    }
     attach_context_action(gobj, $item, it);
     return $item;
 }
@@ -1793,7 +1843,11 @@ function build_toolbar_brand_item(gobj, it)
         attrs["aria-haspopup"] = "menu";
         attrs["aria-expanded"] = "false";
     }
-    if(action_type === "") {
+    let link = toolbar_link_attrs(it);
+    if(link) {
+        tag = "a";
+        Object.assign(attrs, link);
+    } else if(action_type === "") {
         /*  Passive brand: no action — render a div so it is not
          *  keyboard-focused and screen readers don't announce a
          *  pressable control. */
@@ -1807,7 +1861,7 @@ function build_toolbar_brand_item(gobj, it)
         ["span", {class: "yui-toolbar-brand-wordmark", i18n: it.wordmark},
             it.wordmark]
     ]]);
-    if(action_type !== "") {
+    if(action_type !== "" && !link) {
         $item.addEventListener("click", ev => {
             ev.preventDefault();
             handle_toolbar_action(gobj, it, $item);
@@ -2032,6 +2086,23 @@ function handle_toolbar_action(gobj, item, $trigger)
         case "dropdown":
             toggle_toolbar_dropdown(gobj, item, action, $trigger);
             break;
+        case "link":
+            /*  Reached only from the renderers that stay buttons (avatar,
+             *  and the entries inside a dropdown panel). The anchor
+             *  renderers never come through here. */
+            if(!empty_string(action.url)) {
+                if(action.target === "_blank") {
+                    window.open(action.url, "_blank", "noopener,noreferrer");
+                } else {
+                    window.location.assign(action.url);
+                }
+            } else {
+                log_warning(
+                    `C_YUI_SHELL: toolbar item '${item.id||"?"}' has action.type ` +
+                    `"link" without a url`
+                );
+            }
+            break;
         default:
             log_warning(
                 `C_YUI_SHELL: toolbar item '${item.id||"?"}' has no/unknown action.type`

package/src/shell_toolbar_helpers.js

@@ -19,14 +19,19 @@
  *                      triggers an action.type on click
  *
  *      Action types accepted on a toolbar item or on a dropdown sub-item:
- *          "navigate" | "drawer" | "event" | "dropdown"
+ *          "navigate" | "drawer" | "event" | "dropdown" | "link"
+ *
+ *      "link" is the one that leaves the application, and the one item
+ *      rendered as a real <a href> rather than a <button>.
  *
  *          Copyright (c) 2026, ArtGins.
  *          All Rights Reserved.
  ***********************************************************************/
 
 export const TOOLBAR_ITEM_KINDS = ["brand", "avatar", "connection", "action"];
-export const TOOLBAR_ACTION_TYPES = ["navigate", "drawer", "event", "dropdown"];
+export const TOOLBAR_ACTION_TYPES = [
+    "navigate", "drawer", "event", "dropdown", "link"
+];
 
 
 /************************************************************
@@ -141,6 +146,11 @@ export function validate_action(action, owner_id)
             `toolbar item '${id}' (action.type:event) requires 'event' name`
         );
     }
+    if(action.type === "link" && !_is_non_empty_string(action.url)) {
+        warnings.push(
+            `toolbar item '${id}' (action.type:link) requires 'url'`
+        );
+    }
     if(action.type === "dropdown") {
         let nested = validate_dropdown_action(action, id);
         for(let w of nested) {

package/src/shell_toolbar_helpers.test.js

@@ -203,7 +203,9 @@ test("dropdown: invalid sub-action surfaces underlying warning", () => {
  *============================================================*/
 test("kinds + action-type constants are exposed", () => {
     expect(TOOLBAR_ITEM_KINDS).toEqual(["brand", "avatar", "connection", "action"]);
-    expect(TOOLBAR_ACTION_TYPES).toEqual(["navigate", "drawer", "event", "dropdown"]);
+    expect(TOOLBAR_ACTION_TYPES).toEqual(
+        ["navigate", "drawer", "event", "dropdown", "link"]
+    );
 });
 
 
@@ -246,3 +248,55 @@ test("dropdown: non-boolean 'selected' warns", () => {
     expect(r.length).toBe(1);
     expect(r[0]).toContain("non-boolean");
 });
+
+
+/*============================================================
+ *      validate_action — link
+ *
+ *  The action that LEAVES the application. It is the only one
+ *  rendered as an <a href>, so the url is not an optional extra:
+ *  without it there is no link, only a dead control.
+ *============================================================*/
+test("validate link: ok with a url", () => {
+    let r = validate_toolbar_item({
+        id: "landing", icon: "yi-arrow-left", name: "yuneta.io",
+        action: { type: "link", url: "https://yuneta.io/" }
+    });
+    expect(r.ok).toBe(true);
+    expect(r.warnings).toEqual([]);
+});
+
+test("validate link: a target is optional", () => {
+    let r = validate_toolbar_item({
+        id: "docs",
+        action: { type: "link", url: "https://doc.yuneta.io/", target: "_blank" }
+    });
+    expect(r.ok).toBe(true);
+});
+
+test("validate link: missing url flags warning", () => {
+    let r = validate_toolbar_item({
+        id: "landing", action: { type: "link" }
+    });
+    expect(r.ok).toBe(false);
+    expect(r.warnings.join("\n")).toMatch(/requires 'url'/);
+});
+
+test("validate link: empty url counts as missing", () => {
+    let r = validate_toolbar_item({
+        id: "landing", action: { type: "link", url: "   " }
+    });
+    expect(r.ok).toBe(false);
+    expect(r.warnings.join("\n")).toMatch(/requires 'url'/);
+});
+
+test("validate link: accepted inside a dropdown too", () => {
+    let r = validate_dropdown_action({
+        type: "dropdown",
+        items: [
+            { id: "site", name: "yuneta.io",
+              action: { type: "link", url: "https://yuneta.io/" } },
+        ],
+    }, "help");
+    expect(r).toEqual([]);
+});