@yuneta/gobj-ui 5.8.1 → 5.8.2

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.8.2",
   "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'}],