@yuneta/gobj-ui 5.8.1 → 5.9.0

package/README.md

@@ -520,6 +520,43 @@ keeps working afterwards. With no guard a modal closes exactly as it always
 did, and the returned `close()` always closes **unconditionally** — the veto is
 for the user's dismiss, not for the code's.
 
+### Confirmations — and the red one, `yui_shell_confirm_danger`
+
+`yui_shell_confirm_yesno(shell, message, opts)` asks a question and resolves to
+a boolean. Its yes is `is-link`, the right colour for *"do you want to
+continue"*.
+
+**`yui_shell_confirm_danger(shell, message, opts)`** is the same call with a
+**red** confirm button and the error icon (`type: "danger"` by default). Use it
+whenever the yes destroys something — deleting an account, dropping a record.
+The two must not look alike: the destructive one is precisely the one that must
+not be clicked by reflex.
+
+In both, the **safe answer is the last button**, so Escape, the backdrop and
+the X all resolve to it.
+
+```js
+if(await yui_shell_confirm_danger(shell, t("delete account detail"))) {
+    /* only here has the red button been pressed */
+}
+```
+
+### `C_YUI_FORM` — choosing the bottom toolbar
+
+By default the form shows **save + undo + clear + copy + paste**. The
+`toolbar` attr takes the button names you want, in the order you want them:
+
+```js
+gobj_create("form", "C_YUI_FORM", {toolbar: ["save"]}, parent);   // one action
+gobj_create("form", "C_YUI_FORM", {toolbar: []}, parent);         // no toolbar
+```
+
+Save/undo/clear stay on the left of the bar and copy/paste on the right — the
+split the layout has always drawn — so dropping a whole group leaves no hole in
+the middle, and **a toolbar left with a single group is centred**. An unknown
+name is reported, not silently dropped: a typo would otherwise remove the save
+button with no trace of why.
+
 ## Conventions
 
 ### i18n: a string must be able to CHANGE language, not just be translated once

package/dist/gobj-ui.cjs.js

@@ -2003,6 +2003,16 @@ function open_toolbar_dropdown(gobj, item, action, $trigger) {
 	} else style_parts.push(`left:${Math.max(0, Math.round(rect.left))}px`);
 	$panel.setAttribute("style", style_parts.join(";"));
 	priv.layers.popup.appendChild($panel);
+	let margin = 8;
+	let pw = $panel.offsetWidth;
+	let pos = $panel.getBoundingClientRect();
+	let left = pos.left;
+	if (left + pw > window.innerWidth - margin) left = window.innerWidth - pw - margin;
+	if (left < margin) left = margin;
+	if (Math.round(left) !== Math.round(pos.left)) {
+		$panel.style.right = "auto";
+		$panel.style.left = `${Math.round(left)}px`;
+	}
 	yui_shell_translate(gobj, $panel);
 	let backdrop = (ev) => {
 		if ($panel.contains(ev.target)) return;

package/dist/gobj-ui.es.js

@@ -1998,6 +1998,16 @@ function open_toolbar_dropdown(gobj, item, action, $trigger) {
 	} else style_parts.push(`left:${Math.max(0, Math.round(rect.left))}px`);
 	$panel.setAttribute("style", style_parts.join(";"));
 	priv.layers.popup.appendChild($panel);
+	let margin = 8;
+	let pw = $panel.offsetWidth;
+	let pos = $panel.getBoundingClientRect();
+	let left = pos.left;
+	if (left + pw > window.innerWidth - margin) left = window.innerWidth - pw - margin;
+	if (left < margin) left = margin;
+	if (Math.round(left) !== Math.round(pos.left)) {
+		$panel.style.right = "auto";
+		$panel.style.left = `${Math.round(left)}px`;
+	}
 	yui_shell_translate(gobj, $panel);
 	let backdrop = (ev) => {
 		if ($panel.contains(ev.target)) return;

package/package.json

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

package/src/c_yui_shell.js

@@ -2099,6 +2099,28 @@ function open_toolbar_dropdown(gobj, item, action, $trigger)
 
     priv.layers.popup.appendChild($panel);
 
+    /*  Now that it HAS a width, keep it inside the viewport on both
+     *  edges.  The anchoring above guards only the edge it aligns to,
+     *  so a right-aligned panel whose trigger sits near the LEFT of the
+     *  bar hangs off the left side — which is what every navbar-end
+     *  trigger does under dir="rtl": in Arabic the language menu opened
+     *  at left:-60px with its first characters unreachable.  Measure,
+     *  clamp, and pin with `left` so there is one source of truth. */
+    let margin = 8;
+    let pw = $panel.offsetWidth;
+    let pos = $panel.getBoundingClientRect();
+    let left = pos.left;
+    if(left + pw > window.innerWidth - margin) {
+        left = window.innerWidth - pw - margin;
+    }
+    if(left < margin) {
+        left = margin;
+    }
+    if(Math.round(left) !== Math.round(pos.left)) {
+        $panel.style.right = "auto";
+        $panel.style.left = `${Math.round(left)}px`;
+    }
+
     /*  Translate the lazily-built panel (see the note above). */
     yui_shell_translate(gobj, $panel);
 

package/src/c_yui_treedb_topic_with_form.js

@@ -345,6 +345,11 @@ function build_ui(gobj)
             $table_toolbar = createElement2(
                 ['div', {id: `${toolbar_id}`, class: 'TREEDB_TABLE_ACTIONS buttons mb-0'}]
             );
+            /*  Edit is a MODE TOGGLE, not one more action: it arms/disarms
+             *  the buttons that modify the table (new/delete/copy/paste),
+             *  which is why it comes first and why delete sits among them
+             *  instead of being pushed away from the harmless ones. Do not
+             *  reorder this group as if they were peer actions.  */
             let $edit_button = createElement2(
                 ['button', {id: ``, class: 'button button-edit-record mr-1'}, [
                     ['i', {class: 'yi-pen'}],

package/src/yui_clipboard.js

@@ -0,0 +1,143 @@
+/***********************************************************************
+ *          yui_clipboard.js
+ *
+ *          Put things on the clipboard, from any view.
+ *
+ *          Four views had grown their own copy code, and they had
+ *          drifted: two of them wrote unindented JSON and reported
+ *          nothing when the write failed. This is that code, once.
+ *
+ *          The Clipboard API is absent in an insecure context (plain
+ *          http, some embedded webviews) and REJECTS when the document
+ *          does not have focus — which happens whenever the click that
+ *          asked for the copy also moved focus. Neither is something
+ *          the caller can act on, so a hidden-textarea copy covers both
+ *          rather than failing.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {log_error} from "@yuneta/gobj-js";
+
+/***************************************************************
+ *      Last-resort copy: a hidden textarea + execCommand.
+ *      Deprecated in the spec, still the only route in an
+ *      insecure context. Returns TRUE when it worked.
+ ***************************************************************/
+function fallback_copy(text)
+{
+    let ok = false;
+    let $ta = document.createElement("textarea");
+
+    $ta.value = text;
+    $ta.style.position = "fixed";
+    $ta.style.left = "-9999px";
+    document.body.appendChild($ta);
+    $ta.select();
+    try {
+        ok = document.execCommand("copy");
+    } catch(e) {
+        log_error(`yui_clipboard: execCommand copy failed: ${e}`);
+    }
+    document.body.removeChild($ta);
+
+    if(!ok) {
+        log_error("yui_clipboard: could not reach the clipboard");
+    }
+    return ok;
+}
+
+/***************************************************************
+ *      Copy text.
+ *      Resolves TRUE when the text reached the clipboard.
+ ***************************************************************/
+function yui_copy_text(text)
+{
+    if(typeof text !== "string") {
+        log_error("yui_copy_text(): text must be a string");
+        return Promise.resolve(false);
+    }
+
+    if(navigator.clipboard && navigator.clipboard.writeText) {
+        return navigator.clipboard.writeText(text).then(
+            function() {
+                return true;
+            },
+            function() {
+                return fallback_copy(text);
+            }
+        );
+    }
+
+    return Promise.resolve(fallback_copy(text));
+}
+
+/***************************************************************
+ *      Copy a value as JSON, indented FOUR spaces — the same
+ *      width the rest of the family uses to show structure.
+ *      Resolves TRUE when it reached the clipboard.
+ ***************************************************************/
+function yui_copy_json(value)
+{
+    let text;
+
+    try {
+        text = JSON.stringify(value, null, 4);
+    } catch(e) {
+        log_error(`yui_copy_json(): value is not serializable: ${e}`);
+        return Promise.resolve(false);
+    }
+
+    if(text === undefined) {
+        log_error("yui_copy_json(): value is not serializable");
+        return Promise.resolve(false);
+    }
+
+    return yui_copy_text(text);
+}
+
+/***************************************************************
+ *      What the user is LOOKING AT, as an array of records:
+ *      the selected rows when there is a selection, otherwise
+ *      every row that passes the current filters, in the order
+ *      shown.
+ *
+ *      Deliberately not the whole dataset: the point is to hand
+ *      over what is on screen. A table with no selection and no
+ *      filter therefore copies everything, which is what the
+ *      screen shows too.
+ ***************************************************************/
+function yui_table_rows(tabulator)
+{
+    if(!tabulator) {
+        log_error("yui_table_rows(): no tabulator");
+        return [];
+    }
+
+    let selected = tabulator.getSelectedData();
+    if(selected && selected.length) {
+        return selected;
+    }
+
+    return tabulator.getData("active");
+}
+
+/***************************************************************
+ *      Copy what the table shows, as JSON.
+ *      Resolves to the NUMBER of records copied, 0 if none —
+ *      so the caller can tell the user, or stay quiet.
+ ***************************************************************/
+function yui_copy_table_json(tabulator)
+{
+    let rows = yui_table_rows(tabulator);
+
+    if(!rows.length) {
+        return Promise.resolve(0);
+    }
+
+    return yui_copy_json(rows).then(function(ok) {
+        return ok? rows.length : 0;
+    });
+}
+
+export {yui_copy_text, yui_copy_json, yui_table_rows, yui_copy_table_json};

package/src/yui_clipboard.test.js

@@ -0,0 +1,112 @@
+/***********************************************************************
+ *          yui_clipboard.test.js
+ *
+ *      Unit tests for the shared clipboard helpers.
+ *      Run with: npm test
+ ***********************************************************************/
+import { test, expect, vi, beforeEach, afterEach } from "vitest";
+import {
+    yui_copy_text,
+    yui_copy_json,
+    yui_table_rows,
+    yui_copy_table_json,
+} from "./yui_clipboard.js";
+
+let written;
+
+beforeEach(() => {
+    written = [];
+    /*  A clipboard that accepts everything.  */
+    Object.defineProperty(navigator, "clipboard", {
+        value: {
+            writeText: (text) => {
+                written.push(text);
+                return Promise.resolve();
+            }
+        },
+        configurable: true,
+        writable: true
+    });
+});
+
+afterEach(() => {
+    vi.restoreAllMocks();
+});
+
+/*  A Tabulator stand-in: only the two methods the helper calls.  */
+function fake_table(active, selected)
+{
+    return {
+        getData: () => active,
+        getSelectedData: () => selected || []
+    };
+}
+
+/*============================================================
+ *      yui_copy_text
+ *============================================================*/
+test("copy_text: writes the text and resolves true", async () => {
+    await expect(yui_copy_text("hello")).resolves.toBe(true);
+    expect(written).toEqual(["hello"]);
+});
+
+test("copy_text: a non-string is refused, nothing is written", async () => {
+    await expect(yui_copy_text({a: 1})).resolves.toBe(false);
+    expect(written).toEqual([]);
+});
+
+/*============================================================
+ *      yui_copy_json
+ *============================================================*/
+test("copy_json: indents FOUR spaces", async () => {
+    await yui_copy_json({a: 1});
+    expect(written[0]).toBe("{\n    \"a\": 1\n}");
+});
+
+test("copy_json: a cycle is reported, not thrown", async () => {
+    let cyclic = {};
+    cyclic.self = cyclic;
+    await expect(yui_copy_json(cyclic)).resolves.toBe(false);
+    expect(written).toEqual([]);
+});
+
+test("copy_json: an undefined value is refused", async () => {
+    await expect(yui_copy_json(undefined)).resolves.toBe(false);
+});
+
+/*============================================================
+ *      yui_table_rows
+ *============================================================*/
+test("table_rows: with no selection, the filtered rows", () => {
+    let rows = [{id: 1}, {id: 2}];
+    expect(yui_table_rows(fake_table(rows))).toEqual(rows);
+});
+
+test("table_rows: a selection WINS over the filtered rows", () => {
+    let active = [{id: 1}, {id: 2}, {id: 3}];
+    let selected = [{id: 2}];
+    expect(yui_table_rows(fake_table(active, selected))).toEqual(selected);
+});
+
+test("table_rows: no table is an empty array, not a throw", () => {
+    expect(yui_table_rows(null)).toEqual([]);
+});
+
+/*============================================================
+ *      yui_copy_table_json
+ *============================================================*/
+test("copy_table_json: resolves to the number of records copied", async () => {
+    let rows = [{id: 1}, {id: 2}, {id: 3}];
+    await expect(yui_copy_table_json(fake_table(rows))).resolves.toBe(3);
+    expect(JSON.parse(written[0])).toEqual(rows);
+});
+
+test("copy_table_json: an empty table copies nothing and reports 0", async () => {
+    await expect(yui_copy_table_json(fake_table([]))).resolves.toBe(0);
+    expect(written).toEqual([]);
+});
+
+test("copy_table_json: counts the SELECTION when there is one", async () => {
+    let active = [{id: 1}, {id: 2}, {id: 3}];
+    await expect(yui_copy_table_json(fake_table(active, [{id: 2}]))).resolves.toBe(1);
+});