tsgrid-ui 2.7.1 → 2.10.0

package/dist/tsgrid-ui.js

@@ -1,4 +1,4 @@
-/* tsgrid-ui 1.0.x (nightly) (5/14/2026, 1:17:35 AM) (c) 2014 vitmalina@gmail.com, (c) 2026 DaverSoGT — MIT */
+/* tsgrid-ui 2.10.0 (c) 2014 vitmalina@gmail.com, (c) 2026 DaverSoGT — MIT */
 "use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -3797,6 +3797,35 @@ var Utils = class {
 };
 var TsUtils = new Utils();
 
+// src/lazy-singleton.ts
+function lazySingleton(factory, protoRef) {
+  let _impl = null;
+  const materialize = () => _impl ??= factory();
+  return new Proxy({}, {
+    get(_t, prop, receiver) {
+      return Reflect.get(materialize(), prop, receiver);
+    },
+    set(_t, prop, value, _receiver) {
+      return Reflect.set(materialize(), prop, value, materialize());
+    },
+    has(_t, prop) {
+      return Reflect.has(materialize(), prop);
+    },
+    ownKeys() {
+      return Reflect.ownKeys(materialize());
+    },
+    getOwnPropertyDescriptor(_t, prop) {
+      return Reflect.getOwnPropertyDescriptor(materialize(), prop);
+    },
+    defineProperty(_t, prop, desc) {
+      return Reflect.defineProperty(materialize(), prop, desc);
+    },
+    getPrototypeOf() {
+      return protoRef.prototype;
+    }
+  });
+}
+
 // src/tspopup.ts
 var query8 = query;
 var TsDialog = class extends TsBase {
@@ -4628,7 +4657,11 @@ function TsPrompt(label, title, callBack) {
   });
   return prom;
 }
-var TsPopup = new TsDialog();
+var _TsDialogCtorCount = 0;
+var TsPopup = lazySingleton(() => {
+  _TsDialogCtorCount++;
+  return new TsDialog();
+}, TsDialog);
 
 // src/tstooltip.ts
 var query9 = query;
@@ -7589,10 +7622,26 @@ var DateTooltip = class extends Tooltip {
     return ret;
   }
 };
-var TsTooltip = new Tooltip();
-var TsMenu = new MenuTooltip();
-var TsColor = new ColorTooltip();
-var TsDate = new DateTooltip();
+var _tooltipCtorCount = 0;
+var _menuCtorCount = 0;
+var _colorCtorCount = 0;
+var _dateCtorCount = 0;
+var TsTooltip = lazySingleton(() => {
+  _tooltipCtorCount++;
+  return new Tooltip();
+}, Tooltip);
+var TsMenu = lazySingleton(() => {
+  _menuCtorCount++;
+  return new MenuTooltip();
+}, MenuTooltip);
+var TsColor = lazySingleton(() => {
+  _colorCtorCount++;
+  return new ColorTooltip();
+}, ColorTooltip);
+var TsDate = lazySingleton(() => {
+  _dateCtorCount++;
+  return new DateTooltip();
+}, DateTooltip);
 
 // src/tstoolbar.ts
 var query10 = query;
@@ -7674,11 +7723,11 @@ var TsToolbar = class extends TsBase {
       pendingRefresh: {}
       // what should be refreshed with a debounce
     };
-    this._refresh = ({ effected, resize: resize2, refreshTooltip }) => {
+    this._refresh = ({ effected, resize: resize2, refreshTooltip, hideTooltip }) => {
       const options2 = this.last.pendingRefresh;
       options2.ids ??= [];
       options2.ids.push(...effected);
-      Object.assign(options2, { resize: resize2, refreshTooltip });
+      Object.assign(options2, { resize: resize2, refreshTooltip, hideTooltip });
       this._refreshDebounced();
     };
     this._refreshDebounced = TsUtils.debounce(() => {
@@ -7735,10 +7784,6 @@ var TsToolbar = class extends TsBase {
         console.log('ERROR: The parameter "id" is required but not supplied.', item);
         return;
       }
-      if (item.type == null) {
-        console.log('ERROR: The parameter "type" is required but not supplied.', item);
-        return;
-      }
       if (!TsUtils.checkUniqueId(item.id, this.items, "toolbar", this.name)) return;
       const newItem = TsUtils.extend({}, this.item_template, item);
       if (newItem.type == "group" && Array.isArray(newItem.items)) {
@@ -7749,14 +7794,21 @@ var TsToolbar = class extends TsBase {
       if (newItem.type == "menu-check") {
         if (!Array.isArray(newItem.selected)) newItem.selected = [];
         if (Array.isArray(newItem.items)) {
-          newItem.items.forEach((it) => {
+          newItem.items.forEach((it, idx2, arr2) => {
             if (typeof it === "string") {
-              it = arr[idx] = { id: it, text: it };
+              it = arr2[idx2] = { id: it, text: it };
             }
             if (it.checked && !newItem.selected.includes(it.id)) newItem.selected.push(it.id);
             if (!it.checked && newItem.selected.includes(it.id)) it.checked = true;
             if (it.checked == null) it.checked = false;
           });
+        } else if (typeof newItem.items === "function") {
+          const materialized = newItem.items(newItem);
+          if (Array.isArray(materialized)) {
+            materialized.forEach((it) => {
+              if (it && it.checked && !newItem.selected.includes(it.id)) newItem.selected.push(it.id);
+            });
+          }
         }
       } else if (newItem.type == "menu-radio") {
         if (Array.isArray(newItem.items)) {
@@ -7775,7 +7827,12 @@ var TsToolbar = class extends TsBase {
         this.items.push(newItem);
       } else {
         const middle = this.get(id, true);
-        this.items = this.items.slice(0, middle).concat([newItem], this.items.slice(middle));
+        if (middle == null) {
+          console.warn(`TsToolbar: insert anchor id "${id}" not found; appending instead.`);
+          this.items.push(newItem);
+        } else {
+          this.items = this.items.slice(0, middle).concat([newItem], this.items.slice(middle));
+        }
       }
       newItem.line = newItem.line ?? 1;
       if (skipRefresh !== true) this.refresh(newItem.id);
@@ -7792,7 +7849,15 @@ var TsToolbar = class extends TsBase {
       effected++;
       query10(this.box).find("#tb_" + this.name + "_item_" + TsUtils.escapeId(it.id)).remove();
       const ind = this.get(it.id, true);
-      if (ind != null) this.items.splice(ind, 1);
+      if (ind != null) {
+        const top = this.items[ind];
+        if (top.id === it.id) {
+          this.items.splice(ind, 1);
+        } else if (top.type === "group" && Array.isArray(top.items)) {
+          const subIdx = top.items.findIndex((s) => s && s.id === it.id);
+          if (subIdx !== -1) top.items.splice(subIdx, 1);
+        }
+      }
     });
     this.resize();
     return effected;
@@ -7848,7 +7913,10 @@ var TsToolbar = class extends TsBase {
         else return it;
       } else if (it.type == "group") {
         const sub = this.get(id, returnIndex, it.items);
-        if (sub != null) return sub;
+        if (sub != null) {
+          if (returnIndex === true) return i1;
+          return sub;
+        }
       }
     }
     return null;
@@ -7867,6 +7935,8 @@ var TsToolbar = class extends TsBase {
       item.count = count;
     } else {
       this.set(id, { count });
+      const after = query10(this.box).find(`#tb_${this.name}_item_${TsUtils.escapeId(id)} .tsg-tb-count > span`);
+      if (after.length === 0) return;
       this.setCount(id, count, className, style);
     }
   }
@@ -7973,6 +8043,55 @@ var TsToolbar = class extends TsBase {
     this._refresh({ effected });
     return effected;
   }
+  /**
+   * Toggle the `checked` state of one or more items.
+   *
+   * State management only — does NOT fire events (no `onClick`, no `onChange`)
+   * and does NOT open drop / menu / color overlays. For full UI interaction
+   * including opening pickers, call `click(id)` instead.
+   *
+   * Per-item behaviour:
+   *   - button / check / html / spacer / break: flips `it.checked`.
+   *   - drop / menu / menu-radio / menu-check / color / text-color: if currently
+   *     checked, closes the toolbar's `-drop` overlay via `TsTooltip.hide` before
+   *     flipping. Same overlay-close path as `uncheck()`. Never opens overlays.
+   *   - radio: emits `console.warn` and is skipped (would leave the group with
+   *     no checked member). Use `check()` / `uncheck()` for radios.
+   *   - group: recurses into `it.items` and toggles each child individually; the
+   *     group container itself is never in the effected list.
+   *   - sub-id with `:` notation: skipped (same guard as siblings).
+   *   - missing id: silently skipped.
+   *
+   * @param args  ids of items to toggle. Varargs, independent per id.
+   * @returns     array of ids whose checked state actually flipped. Never `undefined`.
+   */
+  // any: array of heterogeneous runtime values; TsToolbar item shape varies by `type` at runtime
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  toggle(...args) {
+    const effected = [];
+    args.flat().forEach((item) => {
+      const it = this.get(item);
+      if (!it || String(item).indexOf(":") != -1) return;
+      if (it.type == "radio") {
+        console.warn(`TsToolbar.toggle: radio items are not supported, use check()/uncheck() instead. Item: ${item}`);
+        return;
+      }
+      if (it.type == "group") {
+        const childIds = it.items.map((itm) => itm.id);
+        const childEffected = this.toggle(...childIds);
+        effected.push(...childEffected);
+        return;
+      }
+      const newChecked = !it.checked;
+      if (["menu", "menu-radio", "menu-check", "drop", "color", "text-color"].includes(it.type) && it.checked) {
+        TsTooltip.hide(this.name + "-drop");
+      }
+      it.checked = newChecked;
+      effected.push(String(item).split(":")[0]);
+    });
+    this._refresh({ effected });
+    return effected;
+  }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   click(id, event2) {
     const tmp = String(id).split(":");
@@ -8260,7 +8379,7 @@ var TsToolbar = class extends TsBase {
       const next = parseInt(this.get(id, true)) + 1;
       let $next = query10(this.box).find(`#tb_${this.name}_item_${TsUtils.escapeId(this.items[next] ? this.items[next].id : "--")}`);
       if ($next.length == 0) {
-        $next = query10(this.box).find(`.tsg-tb-line:nth-child(${it.line}`).find(".tsg-tb-right").before(html);
+        $next = query10(this.box).find(`.tsg-tb-line:nth-child(${it.line})`).find(".tsg-tb-right").before(html);
       } else {
         $next.after(html);
       }
@@ -8318,6 +8437,8 @@ var TsToolbar = class extends TsBase {
   destroy() {
     const edata = this.trigger("destroy", { target: this.name });
     if (edata.isCancelled === true) return;
+    TsTooltip.hide(this.name + "-tooltip");
+    TsTooltip.hide(this.name + "-drop");
     if (query10(this.box).find(".tsg-scroll-wrapper").length > 0) {
       this.unmount();
     }
@@ -8383,6 +8504,7 @@ var TsToolbar = class extends TsBase {
           }
           text = `<span style="color: ${color}">${item.text ? TsUtils.lang(item.text) : item.backColor ? `<b style="background-color: ${bcolor ?? "transparent"}; padding: 2px 5px; border-radius: 3px;">Ab</b>` : "<b>Ab</b>"}</span>`;
         }
+      // falls through
       case "menu":
       case "menu-check":
       case "menu-radio":
@@ -8467,7 +8589,7 @@ var TsToolbar = class extends TsBase {
       }
       case "group": {
         html = `<div id="tb_${this.name}_item_${item.id}" class="tsg-tb-group"
-                    style="display: flex; ${item.hidden ? "display: none" : ""}; ${item.style ? item.style : ""}">`;
+                    style="display: ${item.hidden ? "none" : "flex"}; ${item.style ? item.style : ""}">`;
         if (Array.isArray(item.items)) {
           item.items.forEach((it) => {
             html += this.getItemHTML(it);
@@ -8532,8 +8654,11 @@ var TsToolbar = class extends TsBase {
     if (it.input?.spinner || it.input?.min != null || it.input?.max != null || it.input?.step != null) {
       value = parseFloat(value);
     }
-    if (it.input?.suffix != null && String(value).substr(-it.input.suffix.length) == it.input.suffix) {
-      value = String(value).substr(0, value.length - it.input.suffix.length);
+    if (it.input?.suffix != null) {
+      const strValue = String(value);
+      if (strValue.substr(-it.input.suffix.length) == it.input.suffix) {
+        value = strValue.substr(0, strValue.length - it.input.suffix.length);
+      }
     }
     if (it.input?.min != null && it.input.min > value) {
       value = it.input.min;
@@ -8680,7 +8805,10 @@ var TsToolbar = class extends TsBase {
   mouseAction(event2, target, action, id) {
     const btn = this.get(id);
     const edata = this.trigger("mouse" + action, { target: id, item: btn, object: btn, originalEvent: event2 });
-    if (edata.isCancelled === true || btn.disabled || btn.hidden) return;
+    if (edata.isCancelled === true || btn.disabled || btn.hidden) {
+      edata.finish();
+      return;
+    }
     switch (action) {
       case "Enter":
         if (!["label", "input"].includes(btn.type)) {