@yuneta/gobj-ui 5.1.0 → 5.2.0

package/dist/gobj-ui.cjs.js

@@ -307,6 +307,8 @@ function validate_dropdown_action(action, owner_id) {
 			warnings.push(`dropdown item ${where} has action.type:dropdown — nested dropdowns are not supported`);
 			continue;
 		}
+		if (it.icon && it.image) warnings.push(`dropdown item ${where} declares both icon and image — image wins, drop one`);
+		if (it.selected !== void 0 && typeof it.selected !== "boolean") warnings.push(`dropdown item ${where} has non-boolean 'selected'`);
 		let nested = validate_action(it.action, where);
 		for (let w of nested) warnings.push(w);
 	}
@@ -1914,7 +1916,16 @@ function build_dropdown_row(gobj, sub, idx) {
 		return null;
 	}
 	let children = [];
-	if (!(0, _yuneta_gobj_js.empty_string)(sub.icon)) children.push([
+	if (!(0, _yuneta_gobj_js.empty_string)(sub.image)) children.push([
+		"span",
+		{ class: "yui-toolbar-dropdown-glyph" },
+		["img", {
+			src: sub.image,
+			alt: "",
+			"aria-hidden": "true"
+		}]
+	]);
+	else if (!(0, _yuneta_gobj_js.empty_string)(sub.icon)) children.push([
 		"span",
 		{ class: "icon" },
 		["i", {
@@ -1930,12 +1941,21 @@ function build_dropdown_row(gobj, sub, idx) {
 		},
 		sub.name
 	]);
+	children.push([
+		"span",
+		{ class: "yui-toolbar-dropdown-check" },
+		["i", {
+			class: "yi-check",
+			"aria-hidden": "true"
+		}]
+	]);
 	let aria_key = sub.aria_label || sub.name || sub.id || "";
 	let i18n_aria = sub.aria_label || sub.name;
 	let attrs = {
-		class: "yui-toolbar-dropdown-item",
+		class: "yui-toolbar-dropdown-item" + (sub.selected ? " is-selected" : ""),
 		type: "button",
-		role: "menuitem",
+		role: "menuitemradio",
+		"aria-checked": sub.selected ? "true" : "false",
 		"data-dropdown-item-id": sub.id || "",
 		"aria-label": aria_key
 	};

package/dist/gobj-ui.es.js

@@ -302,6 +302,8 @@ function validate_dropdown_action(action, owner_id) {
 			warnings.push(`dropdown item ${where} has action.type:dropdown — nested dropdowns are not supported`);
 			continue;
 		}
+		if (it.icon && it.image) warnings.push(`dropdown item ${where} declares both icon and image — image wins, drop one`);
+		if (it.selected !== void 0 && typeof it.selected !== "boolean") warnings.push(`dropdown item ${where} has non-boolean 'selected'`);
 		let nested = validate_action(it.action, where);
 		for (let w of nested) warnings.push(w);
 	}
@@ -1909,7 +1911,16 @@ function build_dropdown_row(gobj, sub, idx) {
 		return null;
 	}
 	let children = [];
-	if (!empty_string(sub.icon)) children.push([
+	if (!empty_string(sub.image)) children.push([
+		"span",
+		{ class: "yui-toolbar-dropdown-glyph" },
+		["img", {
+			src: sub.image,
+			alt: "",
+			"aria-hidden": "true"
+		}]
+	]);
+	else if (!empty_string(sub.icon)) children.push([
 		"span",
 		{ class: "icon" },
 		["i", {
@@ -1925,12 +1936,21 @@ function build_dropdown_row(gobj, sub, idx) {
 		},
 		sub.name
 	]);
+	children.push([
+		"span",
+		{ class: "yui-toolbar-dropdown-check" },
+		["i", {
+			class: "yi-check",
+			"aria-hidden": "true"
+		}]
+	]);
 	let aria_key = sub.aria_label || sub.name || sub.id || "";
 	let i18n_aria = sub.aria_label || sub.name;
 	let attrs = {
-		class: "yui-toolbar-dropdown-item",
+		class: "yui-toolbar-dropdown-item" + (sub.selected ? " is-selected" : ""),
 		type: "button",
-		role: "menuitem",
+		role: "menuitemradio",
+		"aria-checked": sub.selected ? "true" : "false",
 		"data-dropdown-item-id": sub.id || "",
 		"aria-label": aria_key
 	};

package/package.json

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

package/src/c_yui_shell.css

@@ -528,6 +528,40 @@
 .yui-toolbar-dropdown-item:hover {
     background-color: var(--bulma-scheme-main-bis, rgba(0, 0, 0, 0.06));
 }
+/*  Label takes the slack so the trailing check sits flush right.  */
+.yui-toolbar-dropdown-label {
+    flex: 1;
+}
+/*  Image glyph (flags): boxed to the icon size so rows stay aligned
+ *  whether an item uses an icon class or an image.  */
+.yui-toolbar-dropdown-glyph {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    flex: 0 0 auto;
+}
+.yui-toolbar-dropdown-glyph img {
+    width: 1.15rem;
+    height: auto;
+    display: block;
+    border-radius: 2px;
+}
+/*  The check is always in the DOM and only hidden, so selecting a
+ *  different option does not change any row's width.  */
+.yui-toolbar-dropdown-check {
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+    visibility: hidden;
+    color: var(--bulma-link, #485fc7);
+}
+.yui-toolbar-dropdown-item.is-selected .yui-toolbar-dropdown-check {
+    visibility: visible;
+}
+.yui-toolbar-dropdown-item.is-selected .yui-toolbar-dropdown-label {
+    font-weight: 600;
+}
 .yui-toolbar-dropdown-item:focus-visible {
     outline: 2px solid var(--bulma-link, #485fc7);
     outline-offset: -2px;

package/src/c_yui_shell.js

@@ -2068,7 +2068,20 @@ function build_dropdown_row(gobj, sub, idx)
         return null;
     }
     let children = [];
-    if(!empty_string(sub.icon)) {
+    /*  Leading glyph: either an icon CLASS or an IMAGE.
+     *
+     *  `image` (a URL or a data: URI) exists for what the icon set
+     *  cannot express: the icons are CSS masks, so they are strictly
+     *  MONOCHROME, and a flag per language — the motivating case — is
+     *  not.  It is deliberately an <img src> and NOT raw markup: an
+     *  SVG loaded through <img> cannot run script, so this stays safe
+     *  even if a caller ever feeds it a value that came from a
+     *  backend.  An API that took markup would be one refactor away
+     *  from an XSS. */
+    if(!empty_string(sub.image)) {
+        children.push(["span", {class: "yui-toolbar-dropdown-glyph"},
+            ["img", {src: sub.image, alt: "", "aria-hidden": "true"}]]);
+    } else if(!empty_string(sub.icon)) {
         children.push(["span", {class: "icon"},
             ["i", {class: sub.icon, "aria-hidden": "true"}]]);
     }
@@ -2076,12 +2089,19 @@ function build_dropdown_row(gobj, sub, idx)
         children.push(["span", {class: "yui-toolbar-dropdown-label",
                                 i18n: sub.name}, sub.name]);
     }
+    /*  Trailing check for the ACTIVE option.  The element is always
+     *  rendered and hidden by CSS when not selected, so every row keeps
+     *  the same width and the list does not jump as the choice moves. */
+    children.push(["span", {class: "yui-toolbar-dropdown-check"},
+        ["i", {class: "yi-check", "aria-hidden": "true"}]]);
+
     let aria_key = sub.aria_label || sub.name || sub.id || "";
     let i18n_aria = sub.aria_label || sub.name;
     let attrs = {
-        class: "yui-toolbar-dropdown-item",
+        class: "yui-toolbar-dropdown-item" + (sub.selected ? " is-selected" : ""),
         type: "button",
-        role: "menuitem",
+        role: "menuitemradio",
+        "aria-checked": sub.selected ? "true" : "false",
         "data-dropdown-item-id": sub.id || "",
         "aria-label": aria_key
     };

package/src/shell_toolbar_helpers.js

@@ -202,6 +202,19 @@ export function validate_dropdown_action(action, owner_id)
             );
             continue;
         }
+        /*  A row draws ONE leading glyph.  Declaring both is not fatal
+         *  (image wins) but it is always a mistake worth surfacing. */
+        if(it.icon && it.image) {
+            warnings.push(
+                `dropdown item ${where} declares both icon and image — ` +
+                `image wins, drop one`
+            );
+        }
+        if(it.selected !== undefined && typeof it.selected !== "boolean") {
+            warnings.push(
+                `dropdown item ${where} has non-boolean 'selected'`
+            );
+        }
         let nested = validate_action(it.action, where);
         for(let w of nested) {
             warnings.push(w);

package/src/shell_toolbar_helpers.test.js

@@ -205,3 +205,44 @@ 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"]);
 });
+
+
+/*============================================================
+ *      dropdown items: selected + image  (5.2.0)
+ *============================================================*/
+test("dropdown: 'selected' and 'image' are accepted", () => {
+    let r = validate_dropdown_action({
+        type: "dropdown",
+        items: [
+            { id: "es", name: "spanish", image: "data:image/svg+xml,%3Csvg/%3E",
+              selected: true, action: { type: "navigate", route: "/language/set/es" } },
+            { id: "en", name: "english", image: "data:image/svg+xml,%3Csvg/%3E",
+              selected: false, action: { type: "navigate", route: "/language/set/en" } },
+        ],
+    }, "language");
+    expect(r).toEqual([]);
+});
+
+test("dropdown: declaring both icon and image warns", () => {
+    let r = validate_dropdown_action({
+        type: "dropdown",
+        items: [
+            { id: "es", name: "spanish", icon: "yi-language", image: "/es.svg",
+              action: { type: "navigate", route: "/language/set/es" } },
+        ],
+    }, "language");
+    expect(r.length).toBe(1);
+    expect(r[0]).toContain("both icon and image");
+});
+
+test("dropdown: non-boolean 'selected' warns", () => {
+    let r = validate_dropdown_action({
+        type: "dropdown",
+        items: [
+            { id: "es", name: "spanish", selected: "yes",
+              action: { type: "navigate", route: "/language/set/es" } },
+        ],
+    }, "language");
+    expect(r.length).toBe(1);
+    expect(r[0]).toContain("non-boolean");
+});

package/src/yui_icons.css

@@ -113,6 +113,11 @@
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M9.4 86.6C-3.1 74.1-3.1 53.9 9.4 41.4s32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L178.7 256 9.4 86.6zM256 416l288 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-288 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/svg%3E");
 }
 
+.yi-upload::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M246.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 109.3 192 320c0 17.7 14.3 32 32 32s32-14.3 32-32l0-210.7 73.4 73.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-128-128zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64c0 53 43 96 96 96l320 0c53 0 96-43 96-96l0-64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-64z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M246.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 109.3 192 320c0 17.7 14.3 32 32 32s32-14.3 32-32l0-210.7 73.4 73.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-128-128zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64c0 53 43 96 96 96l320 0c53 0 96-43 96-96l0-64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-64z'/%3E%3C/svg%3E");
+}
+
 .yi-user::before {
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224 248a120 120 0 1 0 0-240 120 120 0 1 0 0 240zm-29.7 56C95.8 304 16 383.8 16 482.3 16 498.7 29.3 512 45.7 512l356.6 0c16.4 0 29.7-13.3 29.7-29.7 0-98.5-79.8-178.3-178.3-178.3l-59.4 0z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224 248a120 120 0 1 0 0-240 120 120 0 1 0 0 240zm-29.7 56C95.8 304 16 383.8 16 482.3 16 498.7 29.3 512 45.7 512l356.6 0c16.4 0 29.7-13.3 29.7-29.7 0-98.5-79.8-178.3-178.3-178.3l-59.4 0z'/%3E%3C/svg%3E");
@@ -129,6 +134,11 @@
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/svg%3E");
 }
 
+.yi-check::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
+}
+
 .yi-square-check::before {
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M384 32c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96C0 60.7 28.7 32 64 32l320 0zM64 80c-8.8 0-16 7.2-16 16l0 320c0 8.8 7.2 16 16 16l320 0c8.8 0 16-7.2 16-16l0-320c0-8.8-7.2-16-16-16L64 80zm230.7 89.9c7.8-10.7 22.8-13.1 33.5-5.3 10.7 7.8 13.1 22.8 5.3 33.5L211.4 366.1c-4.1 5.7-10.5 9.3-17.5 9.8-7 .5-13.9-2-18.8-6.9l-55.9-55.9c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l36 36 105.6-145.2z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M384 32c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96C0 60.7 28.7 32 64 32l320 0zM64 80c-8.8 0-16 7.2-16 16l0 320c0 8.8 7.2 16 16 16l320 0c8.8 0 16-7.2 16-16l0-320c0-8.8-7.2-16-16-16L64 80zm230.7 89.9c7.8-10.7 22.8-13.1 33.5-5.3 10.7 7.8 13.1 22.8 5.3 33.5L211.4 366.1c-4.1 5.7-10.5 9.3-17.5 9.8-7 .5-13.9-2-18.8-6.9l-55.9-55.9c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l36 36 105.6-145.2z'/%3E%3C/svg%3E");