@yuneta/gobj-ui 7.23.7 → 7.23.8

package/dist/gobj-ui.cjs.js

@@ -9912,24 +9912,17 @@ function destroy_ui$6(gobj) {
 function make_toolbar$3(gobj) {
 	let priv = gobj.priv;
 	let toolbar_wide = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "wide");
-	let left_items = yui_graph_fold_items(gobj, toolbar_wide).concat([[
-		"div",
+	let $find_input = (0, _yuneta_gobj_js.createElement2)([
+		"input",
 		{
-			class: "JSON_GRAPH_FIND control has-icons-left",
-			style: "margin-right:.5rem; max-width:12rem; min-width:7rem;"
-		},
-		[["input", {
 			class: "JSON_GRAPH_FIND_INPUT input",
 			type: "text",
 			placeholder: (0, i18next.t)("search"),
 			"data-i18n-placeholder": "search",
 			"aria-label": (0, i18next.t)("search"),
 			"data-i18n-aria-label": "search"
-		}], [
-			"span",
-			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
-		]],
+		},
+		[],
 		{ input: (evt) => {
 			evt.stopPropagation();
 			let text = evt.target.value.trim();
@@ -9939,7 +9932,21 @@ function make_toolbar$3(gobj) {
 				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_FIND_NODES", { text }, gobj);
 			}, 250);
 		} }
-	], [
+	]);
+	let $find_control = (0, _yuneta_gobj_js.createElement2)([
+		"div",
+		{
+			class: "JSON_GRAPH_FIND control has-icons-left",
+			style: "margin-right:.5rem; max-width:12rem; min-width:7rem;"
+		},
+		[$find_input, [
+			"span",
+			{ class: "icon is-left" },
+			[["i", { class: "yi-magnifying-glass" }]]
+		]]
+	]);
+	attach_clear($find_control, $find_input);
+	let left_items = yui_graph_fold_items(gobj, toolbar_wide).concat([$find_control, [
 		"div",
 		{
 			class: "JSON_GRAPH_FIND_RESULT is-hidden",
@@ -11240,14 +11247,10 @@ function make_toolbar$2(gobj) {
 			[["i", { class: "yi-magnifying-glass" }]]
 		]]
 	]);
+	left_items.push(icon_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand loaded"), icon_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all"));
 	attach_clear($search_control, $search_input);
 	left_items.push($search_control);
-	let right_items = [
-		view_mode_switch(gobj),
-		icon_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand loaded"),
-		icon_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all"),
-		icon_button(gobj, "yi-copy", "EV_COPY_ALL", "copy json")
-	];
+	let right_items = [view_mode_switch(gobj), icon_button(gobj, "yi-copy", "EV_COPY_ALL", "copy json")];
 	const $toolbar = yui_toolbar({}, [
 		[
 			"div",
@@ -52600,24 +52603,17 @@ function make_toolbar(gobj) {
 			} }
 		]
 	];
-	let center_items = [[
-		"div",
+	let $find_input = (0, _yuneta_gobj_js.createElement2)([
+		"input",
 		{
-			class: "GRAPH_FIND control has-icons-left",
-			style: "margin-right:.5rem; max-width:12rem; min-width:7rem;"
-		},
-		[["input", {
 			class: "GRAPH_FIND_INPUT input",
 			type: "text",
 			placeholder: (0, i18next.t)("search"),
 			"data-i18n-placeholder": "search",
 			"aria-label": (0, i18next.t)("search"),
 			"data-i18n-aria-label": "search"
-		}], [
-			"span",
-			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
-		]],
+		},
+		[],
 		{ input: (evt) => {
 			evt.stopPropagation();
 			let text = evt.target.value.trim();
@@ -52627,22 +52623,20 @@ function make_toolbar(gobj) {
 				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_FIND_NODES", { text }, gobj);
 			}, 250);
 		} }
-	], [
+	]);
+	let $find_control = (0, _yuneta_gobj_js.createElement2)([
 		"div",
 		{
-			class: "GRAPH_FIND_RESULT is-hidden",
-			style: "display:flex; align-items:center; gap:.3rem; margin-right:.5rem; font-size:.85rem;"
+			class: "GRAPH_FIND control has-icons-left",
+			style: "margin-right:.5rem; max-width:12rem; min-width:7rem;"
 		},
-		[[
-			"span",
-			{ class: "GRAPH_FIND_COUNT" },
-			""
-		], [
+		[$find_input, [
 			"span",
-			{ i18n: "matches" },
-			"matches"
+			{ class: "icon is-left" },
+			[["i", { class: "yi-magnifying-glass" }]]
 		]]
-	]];
+	]);
+	attach_clear($find_control, $find_input);
 	const $toolbar_header = yui_toolbar({}, [
 		[
 			"div",
@@ -52652,7 +52646,22 @@ function make_toolbar(gobj) {
 		[
 			"div",
 			{ class: "yui-horizontal-toolbar-section center" },
-			center_items
+			[$find_control, [
+				"div",
+				{
+					class: "GRAPH_FIND_RESULT is-hidden",
+					style: "display:flex; align-items:center; gap:.3rem; margin-right:.5rem; font-size:.85rem;"
+				},
+				[[
+					"span",
+					{ class: "GRAPH_FIND_COUNT" },
+					""
+				], [
+					"span",
+					{ i18n: "matches" },
+					"matches"
+				]]
+			]]
 		],
 		[
 			"div",

package/dist/gobj-ui.es.js

@@ -9907,24 +9907,17 @@ function destroy_ui$6(gobj) {
 function make_toolbar$3(gobj) {
 	let priv = gobj.priv;
 	let toolbar_wide = gobj_read_attr(gobj, "wide");
-	let left_items = yui_graph_fold_items(gobj, toolbar_wide).concat([[
-		"div",
+	let $find_input = createElement2([
+		"input",
 		{
-			class: "JSON_GRAPH_FIND control has-icons-left",
-			style: "margin-right:.5rem; max-width:12rem; min-width:7rem;"
-		},
-		[["input", {
 			class: "JSON_GRAPH_FIND_INPUT input",
 			type: "text",
 			placeholder: t("search"),
 			"data-i18n-placeholder": "search",
 			"aria-label": t("search"),
 			"data-i18n-aria-label": "search"
-		}], [
-			"span",
-			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
-		]],
+		},
+		[],
 		{ input: (evt) => {
 			evt.stopPropagation();
 			let text = evt.target.value.trim();
@@ -9934,7 +9927,21 @@ function make_toolbar$3(gobj) {
 				gobj_send_event(gobj, "EV_FIND_NODES", { text }, gobj);
 			}, 250);
 		} }
-	], [
+	]);
+	let $find_control = createElement2([
+		"div",
+		{
+			class: "JSON_GRAPH_FIND control has-icons-left",
+			style: "margin-right:.5rem; max-width:12rem; min-width:7rem;"
+		},
+		[$find_input, [
+			"span",
+			{ class: "icon is-left" },
+			[["i", { class: "yi-magnifying-glass" }]]
+		]]
+	]);
+	attach_clear($find_control, $find_input);
+	let left_items = yui_graph_fold_items(gobj, toolbar_wide).concat([$find_control, [
 		"div",
 		{
 			class: "JSON_GRAPH_FIND_RESULT is-hidden",
@@ -11235,14 +11242,10 @@ function make_toolbar$2(gobj) {
 			[["i", { class: "yi-magnifying-glass" }]]
 		]]
 	]);
+	left_items.push(icon_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand loaded"), icon_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all"));
 	attach_clear($search_control, $search_input);
 	left_items.push($search_control);
-	let right_items = [
-		view_mode_switch(gobj),
-		icon_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand loaded"),
-		icon_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all"),
-		icon_button(gobj, "yi-copy", "EV_COPY_ALL", "copy json")
-	];
+	let right_items = [view_mode_switch(gobj), icon_button(gobj, "yi-copy", "EV_COPY_ALL", "copy json")];
 	const $toolbar = yui_toolbar({}, [
 		[
 			"div",
@@ -52587,24 +52590,17 @@ function make_toolbar(gobj) {
 			} }
 		]
 	];
-	let center_items = [[
-		"div",
+	let $find_input = createElement2([
+		"input",
 		{
-			class: "GRAPH_FIND control has-icons-left",
-			style: "margin-right:.5rem; max-width:12rem; min-width:7rem;"
-		},
-		[["input", {
 			class: "GRAPH_FIND_INPUT input",
 			type: "text",
 			placeholder: t("search"),
 			"data-i18n-placeholder": "search",
 			"aria-label": t("search"),
 			"data-i18n-aria-label": "search"
-		}], [
-			"span",
-			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
-		]],
+		},
+		[],
 		{ input: (evt) => {
 			evt.stopPropagation();
 			let text = evt.target.value.trim();
@@ -52614,22 +52610,20 @@ function make_toolbar(gobj) {
 				gobj_send_event(gobj, "EV_FIND_NODES", { text }, gobj);
 			}, 250);
 		} }
-	], [
+	]);
+	let $find_control = createElement2([
 		"div",
 		{
-			class: "GRAPH_FIND_RESULT is-hidden",
-			style: "display:flex; align-items:center; gap:.3rem; margin-right:.5rem; font-size:.85rem;"
+			class: "GRAPH_FIND control has-icons-left",
+			style: "margin-right:.5rem; max-width:12rem; min-width:7rem;"
 		},
-		[[
-			"span",
-			{ class: "GRAPH_FIND_COUNT" },
-			""
-		], [
+		[$find_input, [
 			"span",
-			{ i18n: "matches" },
-			"matches"
+			{ class: "icon is-left" },
+			[["i", { class: "yi-magnifying-glass" }]]
 		]]
-	]];
+	]);
+	attach_clear($find_control, $find_input);
 	const $toolbar_header = yui_toolbar({}, [
 		[
 			"div",
@@ -52639,7 +52633,22 @@ function make_toolbar(gobj) {
 		[
 			"div",
 			{ class: "yui-horizontal-toolbar-section center" },
-			center_items
+			[$find_control, [
+				"div",
+				{
+					class: "GRAPH_FIND_RESULT is-hidden",
+					style: "display:flex; align-items:center; gap:.3rem; margin-right:.5rem; font-size:.85rem;"
+				},
+				[[
+					"span",
+					{ class: "GRAPH_FIND_COUNT" },
+					""
+				], [
+					"span",
+					{ i18n: "matches" },
+					"matches"
+				]]
+			]]
 		],
 		[
 			"div",

package/package.json

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

package/src/c_yui_json.js

@@ -365,14 +365,20 @@ function make_toolbar(gobj)
             $search_input,
             ['span', {class: 'icon is-left'}, [['i', {class: 'yi-magnifying-glass'}]]]
         ]]);
+    /*  The GLOBAL fold leads the row, ahead of the find box — the same
+     *  place both graphs put theirs.  It opens the whole document; the
+     *  per-row toggles live in the rows.  */
+    left_items.push(
+        icon_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL",   "expand loaded"),
+        icon_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all")
+    );
+
     attach_clear($search_control, $search_input);
     left_items.push($search_control);
 
     let right_items = [
         view_mode_switch(gobj),
-        icon_button(gobj, "yi-chevron-right",  "EV_EXPAND_ALL",   "expand loaded"),
-        icon_button(gobj, "yi-chevron-right",  "EV_COLLAPSE_ALL", "collapse all"),
-        icon_button(gobj, "yi-copy",           "EV_COPY_ALL",     "copy json"),
+        icon_button(gobj, "yi-copy", "EV_COPY_ALL", "copy json"),
     ];
 
     const $toolbar = yui_toolbar({}, [

package/src/c_yui_json_graph.js

@@ -47,6 +47,7 @@ import {
 } from "@yuneta/gobj-js";
 
 import {yui_toolbar} from "./yui_toolbar.js";
+import {attach_clear} from "./yui_inputs.js";
 import {
     yui_graph_camera_items,
     yui_graph_fold_items,
@@ -478,27 +479,25 @@ function make_toolbar(gobj)
      *  looks the same whether nothing matched or the match was already
      *  on screen.
      */
-    let left_items = yui_graph_fold_items(gobj, toolbar_wide).concat([
-        ['div', {class: 'JSON_GRAPH_FIND control has-icons-left',
-                 style: 'margin-right:.5rem; max-width:12rem; min-width:7rem;'}, [
-            ['input', {
-                class: 'JSON_GRAPH_FIND_INPUT input',
-                type: 'text',
-                /*  A placeholder is not a text node, so the data-i18n
-                 *  walk cannot reach it: it needs its own key. */
-                placeholder: t('search'),
-                'data-i18n-placeholder': 'search',
-                'aria-label': t('search'),
-                'data-i18n-aria-label': 'search'
-            }],
-            ['span', {class: 'icon is-left'}, [['i', {class: 'yi-magnifying-glass'}]]]
-        ], {
+    /*  Materialised, not a spec: attach_clear() hangs the NORM clear (✕)
+     *  on a real element.  Clearing dispatches a synthetic `input`, which
+     *  goes through the same rate-limited handler and fires EV_FIND_NODES
+     *  with an empty term — the box and the highlight clear together.  */
+    let $find_input = createElement2(
+        ['input', {
+            class: 'JSON_GRAPH_FIND_INPUT input',
+            type: 'text',
+            /*  A placeholder is not a text node, so the data-i18n walk
+             *  cannot reach it: it needs its own key. */
+            placeholder: t('search'),
+            'data-i18n-placeholder': 'search',
+            'aria-label': t('search'),
+            'data-i18n-aria-label': 'search'
+        }, [], {
             /*  Rate-limited, not delayed for effect: every keystroke
              *  REBUILDS the cards — an html node paints no G6 state, so
              *  the highlight has to live in the card's own markup — and
-             *  the first letter typed can match most of a document.
-             *  Input plumbing: the action still crosses the FSM, just
-             *  not once per keystroke. */
+             *  the first letter typed can match most of a document. */
             input: (evt) => {
                 evt.stopPropagation();
                 let text = evt.target.value.trim();
@@ -510,13 +509,32 @@ function make_toolbar(gobj)
                     gobj_send_event(gobj, "EV_FIND_NODES", {text: text}, gobj);
                 }, 250);
             }
-        }],
+        }]);
+
+    let $find_control = createElement2(
+        ['div', {class: 'JSON_GRAPH_FIND control has-icons-left',
+                 style: 'margin-right:.5rem; max-width:12rem; min-width:7rem;'}, [
+            $find_input,
+            ['span', {class: 'icon is-left'}, [['i', {class: 'yi-magnifying-glass'}]]]
+        ]]);
+    attach_clear($find_control, $find_input);
+
+    /*
+     *  Left: the global fold leads the row, then find a node.
+     *
+     *  A graph of a large document has no other way in — the only way to
+     *  locate a key was to read every card.  The count SAYS how many
+     *  matched, because a graph that did not move looks the same whether
+     *  nothing matched or the match was already on screen.
+     */
+    let left_items = yui_graph_fold_items(gobj, toolbar_wide).concat([
+        $find_control,
         /*  Two spans, not one string: the number is DATA and "matches"
          *  is the word, so a language switch re-translates the half that
-         *  is a word.  Spaced with CSS because createElement2 trims text
-         *  nodes.  `display:flex` inline and NOT the `is-flex` helper —
-         *  both Bulma helpers carry !important, so `is-hidden is-flex` on
-         *  one element is decided by stylesheet order. */
+         *  is a word.  `display:flex` inline and NOT the `is-flex`
+         *  helper — both Bulma helpers carry !important, so
+         *  `is-hidden is-flex` on one element is decided by stylesheet
+         *  order. */
         ['div', {class: 'JSON_GRAPH_FIND_RESULT is-hidden',
                  style: 'display:flex; align-items:center; gap:.3rem; ' +
                         'margin-right:.5rem; font-size:.85rem;'}, [

package/src/c_yui_treedb_graph.js

@@ -78,6 +78,7 @@ import {
 } from "@yuneta/gobj-js";
 
 import {yui_toolbar} from "./yui_toolbar.js";
+import {attach_clear} from "./yui_inputs.js";
 import {register_c_g6_nodes_tree} from "./c_g6_nodes_tree.js";
 import {
     removeChildElements,
@@ -548,23 +549,21 @@ function make_toolbar(gobj)
      *  not move looks the same whether nothing matched or the match was
      *  already on screen.
      */
-    let center_items = [
-        ['div', {class: 'GRAPH_FIND control has-icons-left',
-                 style: 'margin-right:.5rem; max-width:12rem; min-width:7rem;'}, [
-            ['input', {
-                class: 'GRAPH_FIND_INPUT input',
-                type: 'text',
-                /*  A placeholder is not a text node, so the data-i18n walk
-                 *  cannot reach it: it needs its own key. */
-                placeholder: t('search'),
-                'data-i18n-placeholder': 'search',
-                'aria-label': t('search'),
-                'data-i18n-aria-label': 'search'
-            }],
-            ['span', {class: 'icon is-left'}, [
-                ['i', {class: 'yi-magnifying-glass'}]
-            ]]
-        ], {
+    /*  Materialised, not a spec: attach_clear() hangs the NORM clear (✕)
+     *  on a real element.  Clearing dispatches a synthetic `input`, which
+     *  goes through the same rate-limited handler and fires EV_FIND_NODES
+     *  with an empty term — the box and the highlight clear together.  */
+    let $find_input = createElement2(
+        ['input', {
+            class: 'GRAPH_FIND_INPUT input',
+            type: 'text',
+            /*  A placeholder is not a text node, so the data-i18n walk
+             *  cannot reach it: it needs its own key. */
+            placeholder: t('search'),
+            'data-i18n-placeholder': 'search',
+            'aria-label': t('search'),
+            'data-i18n-aria-label': 'search'
+        }, [], {
             /*  Rate-limited, not delayed for effect: a match repaints the
              *  cards it lands on, and on a large treedb the first letter
              *  typed can match hundreds. This is input plumbing — the
@@ -581,7 +580,18 @@ function make_toolbar(gobj)
                     gobj_send_event(gobj, "EV_FIND_NODES", {text: text}, gobj);
                 }, 250);
             }
-        }],
+        }]);
+
+    let $find_control = createElement2(
+        ['div', {class: 'GRAPH_FIND control has-icons-left',
+                 style: 'margin-right:.5rem; max-width:12rem; min-width:7rem;'}, [
+            $find_input,
+            ['span', {class: 'icon is-left'}, [['i', {class: 'yi-magnifying-glass'}]]]
+        ]]);
+    attach_clear($find_control, $find_input);
+
+    let center_items = [
+        $find_control,
         /*  Two spans, not one string: the number is DATA and "matches" is
          *  the word, so a language switch re-translates the half that is a
          *  word. Spaced with CSS because createElement2 trims text nodes. */