@yuneta/gobj-ui 5.7.2 → 5.8.1

package/dist/gobj-ui.cjs.js

@@ -16198,7 +16198,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 +16322,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 +16389,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

@@ -16192,7 +16192,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 +16316,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 +16383,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.7.2",
+  "version": "5.8.1",
   "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_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,7 +343,7 @@ 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'}]
             );
             let $edit_button = createElement2(
                 ['button', {id: ``, class: 'button button-edit-record mr-1'}, [
@@ -463,7 +463,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 +476,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 +544,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}`,

package/src/shell_modals.js

@@ -562,6 +562,33 @@ export function yui_shell_confirm_yesno(shell, message, opts)
     ], opts).then(v => v === "yes");
 }
 
+/***************************************************************
+ *  A DESTRUCTIVE confirmation: the button that does the damage is
+ *  red, not blue.
+ *
+ *  yui_shell_confirm_yesno() puts its yes in `is-link`, which is
+ *  the right colour for "do you want to continue" and the wrong
+ *  one for "this deletes an account": the two read the same at a
+ *  glance, and the destructive one is the one that must not be
+ *  clicked by reflex.  The safe answer is also the LAST button,
+ *  so Escape, the backdrop and the X all resolve to it.
+ *
+ *  Returns a Promise<boolean>: true only if the red button was
+ *  pressed.
+ ***************************************************************/
+export function yui_shell_confirm_danger(shell, message, opts)
+{
+    let confirm_label = (opts && opts.confirm_label) || "Delete";
+    let cancel_label  = (opts && opts.cancel_label)  || "Cancel";
+    if(!opts || !opts.type) {
+        opts = Object.assign({}, opts, {type: "danger"});
+    }
+    return build_dialog(shell, message, [
+        {label: confirm_label, value: "confirm", kind: "danger"},
+        {label: cancel_label,  value: "cancel"}
+    ], opts).then(v => v === "confirm");
+}
+
 export function yui_shell_confirm_yesnocancel(shell, message, opts)
 {
     let yes_label    = (opts && opts.yes_label)    || "Yes";