@yuneta/gobj-ui 5.8.0 → 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;
@@ -16198,7 +16208,7 @@ function build_ui$4(gobj) {
 		if (with_edition_mode) {
 			$table_toolbar = (0, _yuneta_gobj_js.createElement2)(["div", {
 				id: `${toolbar_id}`,
-				class: "buttons mb-0"
+				class: "TREEDB_TABLE_ACTIONS buttons mb-0"
 			}]);
 			let $edit_button = (0, _yuneta_gobj_js.createElement2)([
 				"button",
@@ -16322,19 +16332,19 @@ function build_ui$4(gobj) {
 	}
 	let $table_toolbar = create_table_toolbar();
 	let toolbar_id = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "toolbar_id");
-	let $view_toolbar = (0, _yuneta_gobj_js.createElement2)(["div", { class: "is-flex is-align-items-center" }]);
+	let $view_toolbar = (0, _yuneta_gobj_js.createElement2)(["div", { class: "TREEDB_TABLE_TOOLS is-flex is-align-items-center" }]);
 	let with_refresh_button = (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_refresh_button");
 	if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_search_button")) {
 		let search_id = `${toolbar_id}_search`;
 		let $search_box = (0, _yuneta_gobj_js.createElement2)([
 			"div",
-			{ class: "control has-icons-left mr-1" },
+			{ class: "TREEDB_TABLE_SEARCH control has-icons-left mr-1" },
 			[["input", {
 				id: search_id,
 				class: "input",
 				type: "text",
-				placeholder: "search...",
-				style: "max-width:200px;"
+				placeholder: (0, i18next.t)("search"),
+				"data-i18n-placeholder": "search"
 			}], [
 				"span",
 				{ class: "icon is-left" },
@@ -16389,7 +16399,7 @@ function build_ui$4(gobj) {
 			style: "height:100%;"
 		},
 		[["div", {
-			class: "toolbar_tabulator_table m-1",
+			class: "TREEDB_TABLE_TOOLBAR toolbar_tabulator_table m-1",
 			style: "display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;"
 		}], ["div", {
 			id: `${(0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "table_id")}`,

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;
@@ -16192,7 +16202,7 @@ function build_ui$4(gobj) {
 		if (with_edition_mode) {
 			$table_toolbar = createElement2(["div", {
 				id: `${toolbar_id}`,
-				class: "buttons mb-0"
+				class: "TREEDB_TABLE_ACTIONS buttons mb-0"
 			}]);
 			let $edit_button = createElement2([
 				"button",
@@ -16316,19 +16326,19 @@ function build_ui$4(gobj) {
 	}
 	let $table_toolbar = create_table_toolbar();
 	let toolbar_id = gobj_read_str_attr(gobj, "toolbar_id");
-	let $view_toolbar = createElement2(["div", { class: "is-flex is-align-items-center" }]);
+	let $view_toolbar = createElement2(["div", { class: "TREEDB_TABLE_TOOLS is-flex is-align-items-center" }]);
 	let with_refresh_button = gobj_read_bool_attr(gobj, "with_refresh_button");
 	if (gobj_read_bool_attr(gobj, "with_search_button")) {
 		let search_id = `${toolbar_id}_search`;
 		let $search_box = createElement2([
 			"div",
-			{ class: "control has-icons-left mr-1" },
+			{ class: "TREEDB_TABLE_SEARCH control has-icons-left mr-1" },
 			[["input", {
 				id: search_id,
 				class: "input",
 				type: "text",
-				placeholder: "search...",
-				style: "max-width:200px;"
+				placeholder: t("search"),
+				"data-i18n-placeholder": "search"
 			}], [
 				"span",
 				{ class: "icon is-left" },
@@ -16383,7 +16393,7 @@ function build_ui$4(gobj) {
 			style: "height:100%;"
 		},
 		[["div", {
-			class: "toolbar_tabulator_table m-1",
+			class: "TREEDB_TABLE_TOOLBAR toolbar_tabulator_table m-1",
 			style: "display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;"
 		}], ["div", {
 			id: `${gobj_read_str_attr(gobj, "table_id")}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "5.8.0",
+  "version": "5.8.2",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",
@@ -20,7 +20,7 @@
     "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).",
+  "description": "Yuneta UI Library \u2014 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",

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.css

@@ -46,6 +46,31 @@
     min-width: 0;
 }
 
+/*  Search box width: a rule, not an inline style, so the mobile block
+ *  below can widen it (an inline max-width would win over any class).  */
+.TREEDB_TABLE_TOOLS .TREEDB_TABLE_SEARCH .input {
+    max-width: 200px;
+}
+
+/*  Mobile: the tools of the list (search + refresh) take a row of their
+ *  own, with the search stretched across it and the refresh pinned at
+ *  the end. Without this the group keeps its natural width and leaves
+ *  dead space, while the search -- the most used control of the two --
+ *  stays the narrowest thing on screen. The refresh label is already
+ *  dropped by is-hidden-mobile, decided in the markup: measuring at
+ *  runtime would change the shape of the bar on a language switch.  */
+@media screen and (max-width: 768px) {
+    .TREEDB_TABLE_TOOLS {
+        width: 100%;
+    }
+    .TREEDB_TABLE_TOOLS .TREEDB_TABLE_SEARCH {
+        flex: 1 1 auto;
+    }
+    .TREEDB_TABLE_TOOLS .TREEDB_TABLE_SEARCH .input {
+        max-width: none;
+    }
+}
+
 /*  The edit/create form runs in the shell's standardized adaptive dialog
  *  (yui_shell_show_modal dialog:true, logical_class TREEDB_FORM_SHEET). The
  *  shell CSS already gives it the centred card / full-screen-mobile sheet;

package/src/c_yui_treedb_topic_with_form.js

@@ -343,8 +343,13 @@ function build_ui(gobj)
 
         if(with_edition_mode) {
             $table_toolbar = createElement2(
-                ['div', {id: `${toolbar_id}`, class: 'buttons mb-0'}]
+                ['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'}],
@@ -463,7 +468,12 @@ function build_ui(gobj)
      *----------------------------------------------*/
     let toolbar_id = gobj_read_str_attr(gobj, "toolbar_id");
 
-    let $view_toolbar = createElement2(['div', {class: 'is-flex is-align-items-center'}]);
+    /*  The tools of the list (search, refresh) sit apart from the record
+     *  actions: actions left, tools right, and on mobile the tools take a
+     *  row of their own with the search stretched across it. */
+    let $view_toolbar = createElement2(
+        ['div', {class: 'TREEDB_TABLE_TOOLS is-flex is-align-items-center'}]
+    );
 
     let with_refresh_button     = gobj_read_bool_attr(gobj, "with_refresh_button");
     let with_search_button      = gobj_read_bool_attr(gobj, "with_search_button");
@@ -471,13 +481,16 @@ function build_ui(gobj)
     if(with_search_button) {
         let search_id = `${toolbar_id}_search`;
         let $search_box = createElement2(
-            ['div', {class: 'control has-icons-left mr-1'}, [
+            ['div', {class: 'TREEDB_TABLE_SEARCH control has-icons-left mr-1'}, [
                 ['input', {
                     id: search_id,
                     class: 'input',
                     type: 'text',
-                    placeholder: 'search...',
-                    style: 'max-width:200px;'
+                    /*  The placeholder is not a text node, so the
+                     *  data-i18n walk cannot reach it — it needs its own
+                     *  key or it stays English for good. */
+                    placeholder: t('search'),
+                    'data-i18n-placeholder': 'search'
                 }],
                 ['span', {class: 'icon is-left'}, [
                     ['i', {class: 'yi-magnifying-glass'}]
@@ -536,7 +549,7 @@ function build_ui(gobj)
     let table_id = gobj_read_str_attr(gobj, "table_id");
     let $container = createElement2(
         ['div', {class: 'C_YUI_TREEDB_TOPIC_WITH_FORM', style: 'height:100%;'}, [
-            ['div', {class: 'toolbar_tabulator_table m-1', style: 'display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;'}],
+            ['div', {class: 'TREEDB_TABLE_TOOLBAR toolbar_tabulator_table m-1', style: 'display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;'}],
             ['div',
                 {
                     id: `${table_id}`,