@toolbox-web/grid 1.2.0 → 1.3.1

package/lib/plugins/row-reorder/index.js

@@ -1,38 +1,38 @@
-function p(l) {
-  l && l.querySelectorAll(".cell-focus").forEach((e) => e.classList.remove("cell-focus"));
+function v(a) {
+  a && a.querySelectorAll(".cell-focus").forEach((e) => e.classList.remove("cell-focus"));
 }
-const v = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])', R = document.createElement("template");
-R.innerHTML = '<div class="cell" role="gridcell" part="cell"></div>';
-const m = document.createElement("template");
-m.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
-function h(l, e) {
-  if (l._virtualization?.enabled) {
-    const { rowHeight: o, container: s, viewportEl: a } = l._virtualization, c = s, d = a?.clientHeight ?? c?.clientHeight ?? 0;
+const R = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])', m = document.createElement("template");
+m.innerHTML = '<div class="cell" role="gridcell" part="cell"></div>';
+const _ = document.createElement("template");
+_.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
+function h(a, e) {
+  if (a._virtualization?.enabled) {
+    const { rowHeight: o, container: s, viewportEl: l } = a._virtualization, c = s, d = l?.clientHeight ?? c?.clientHeight ?? 0;
     if (c && d > 0) {
-      const u = l._focusRow * o;
+      const u = a._focusRow * o;
       u < c.scrollTop ? c.scrollTop = u : u + o > c.scrollTop + d && (c.scrollTop = u - d + o);
     }
   }
-  const r = l._activeEditRows !== void 0 && l._activeEditRows !== -1;
-  r || l.refreshVirtualWindow(!1), p(l._bodyEl), Array.from(l._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((o) => {
+  const r = a._activeEditRows !== void 0 && a._activeEditRows !== -1;
+  r || a.refreshVirtualWindow(!1), v(a._bodyEl), Array.from(a._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((o) => {
     o.setAttribute("aria-selected", "false");
   });
-  const t = l._focusRow, i = l._virtualization.start ?? 0, n = l._virtualization.end ?? l._rows.length;
+  const t = a._focusRow, i = a._virtualization.start ?? 0, n = a._virtualization.end ?? a._rows.length;
   if (t >= i && t < n) {
-    const o = l._bodyEl.querySelectorAll(".data-grid-row")[t - i];
-    let s = o?.children[l._focusCol];
-    if ((!s || !s.classList?.contains("cell")) && (s = o?.querySelector(`.cell[data-col="${l._focusCol}"]`) ?? o?.querySelector(".cell[data-col]")), s) {
+    const o = a._bodyEl.querySelectorAll(".data-grid-row")[t - i];
+    let s = o?.children[a._focusCol];
+    if ((!s || !s.classList?.contains("cell")) && (s = o?.querySelector(`.cell[data-col="${a._focusCol}"]`) ?? o?.querySelector(".cell[data-col]")), s) {
       s.classList.add("cell-focus"), s.setAttribute("aria-selected", "true");
-      const a = l.querySelector(".tbw-scroll-area");
-      if (a && s && !r) {
-        const c = l._getHorizontalScrollOffsets?.(o ?? void 0, s) ?? { left: 0, right: 0 };
+      const l = a.querySelector(".tbw-scroll-area");
+      if (l && s && !r) {
+        const c = a._getHorizontalScrollOffsets?.(o ?? void 0, s) ?? { left: 0, right: 0 };
         if (!c.skipScroll) {
-          const d = s.getBoundingClientRect(), u = a.getBoundingClientRect(), g = d.left - u.left + a.scrollLeft, f = g + d.width, w = a.scrollLeft + c.left, b = a.scrollLeft + a.clientWidth - c.right;
-          g < w ? a.scrollLeft = g - c.left : f > b && (a.scrollLeft = f - a.clientWidth + c.right);
+          const d = s.getBoundingClientRect(), u = l.getBoundingClientRect(), g = d.left - u.left + l.scrollLeft, f = g + d.width, b = l.scrollLeft + c.left, p = l.scrollLeft + l.clientWidth - c.right;
+          g < b ? l.scrollLeft = g - c.left : f > p && (l.scrollLeft = f - l.clientWidth + c.right);
         }
       }
-      if (l._activeEditRows !== void 0 && l._activeEditRows !== -1 && s.classList.contains("editing")) {
-        const c = s.querySelector(v);
+      if (a._activeEditRows !== void 0 && a._activeEditRows !== -1 && s.classList.contains("editing")) {
+        const c = s.querySelector(R);
         if (c && document.activeElement !== c)
           try {
             c.focus({ preventScroll: !0 });
@@ -48,7 +48,7 @@ function h(l, e) {
     }
   }
 }
-const _ = {
+const w = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', E = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -56,7 +56,9 @@ const _ = {
   sortNone: "⇅",
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
-  toolPanel: "☰"
+  toolPanel: "☰",
+  filter: w,
+  filterActive: w
 };
 class y {
   /**
@@ -282,7 +284,7 @@ class y {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ..._, ...e };
+    return { ...E, ...e };
   }
   // #region Animation Helpers
   /**
@@ -358,12 +360,12 @@ class y {
   }
   // #endregion
 }
-const E = '.dg-row-drag-handle{display:flex;align-items:center;justify-content:center;cursor:grab;-webkit-user-select:none;user-select:none;color:var(--tbw-color-fg-muted, #999);transition:color .15s ease;font-size:14px;letter-spacing:-2px}.dg-row-drag-handle:hover{color:var(--tbw-color-fg, #333)}.dg-row-drag-handle:active{cursor:grabbing}.data-grid-row.dragging{opacity:.6}.data-grid-row.drop-target{position:relative}.data-grid-row.drop-target.drop-before:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background-color:var(--tbw-color-accent, #1976d2);z-index:10}.data-grid-row.drop-target.drop-after:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--tbw-color-accent, #1976d2);z-index:10}.data-grid-row.keyboard-moving{background-color:var(--tbw-color-bg-selected, #e3f2fd);box-shadow:0 0 0 1px var(--tbw-color-accent, #1976d2) inset}.data-grid-row.animate-flip{transition:transform var(--tbw-animation-duration, .2s) ease-out}', C = "__tbw_row_drag";
-class D extends y {
+const C = '.dg-row-drag-handle{display:flex;align-items:center;justify-content:center;cursor:grab;-webkit-user-select:none;user-select:none;color:var(--tbw-color-fg-muted, #999);transition:color .15s ease;font-size:14px;letter-spacing:-2px}.dg-row-drag-handle:hover{color:var(--tbw-color-fg, #333)}.dg-row-drag-handle:active{cursor:grabbing}.data-grid-row.dragging{opacity:.6}.data-grid-row.drop-target{position:relative}.data-grid-row.drop-target.drop-before:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background-color:var(--tbw-color-accent, #1976d2);z-index:10}.data-grid-row.drop-target.drop-after:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--tbw-color-accent, #1976d2);z-index:10}.data-grid-row.keyboard-moving{background-color:var(--tbw-color-bg-selected, #e3f2fd);box-shadow:0 0 0 1px var(--tbw-color-accent, #1976d2) inset}.data-grid-row.animate-flip{transition:transform var(--tbw-animation-duration, .2s) ease-out}', L = "__tbw_row_drag";
+class A extends y {
   /** @internal */
   name = "rowReorder";
   /** @internal */
-  styles = E;
+  styles = C;
   /** @internal */
   get defaultConfig() {
     return {
@@ -396,7 +398,7 @@ class D extends y {
     if (!this.config.showDragHandle)
       return [...e];
     const r = {
-      field: C,
+      field: L,
       header: "",
       width: this.config.dragHandleWidth ?? 40,
       resizable: !1,
@@ -524,8 +526,8 @@ class D extends y {
       currentIndex: t,
       row: e
     }, this.lastFocusCol = n;
-    const o = this.grid, s = [...o._rows ?? this.sourceRows], [a] = s.splice(r, 1);
-    s.splice(t, 0, a), o._rows = s, o._focusRow = t, o._focusCol = n, o.refreshVirtualWindow(!0), h(o), this.clearDebounceTimer(), this.debounceTimer = setTimeout(() => {
+    const o = this.grid, s = [...o._rows ?? this.sourceRows], [l] = s.splice(r, 1);
+    s.splice(t, 0, l), o._rows = s, o._focusRow = t, o._focusCol = n, o.refreshVirtualWindow(!0), h(o), this.clearDebounceTimer(), this.debounceTimer = setTimeout(() => {
       this.flushPendingMove();
     }, this.config.debounceMs ?? 300);
   }
@@ -547,8 +549,8 @@ class D extends y {
     if (this.emitCancelable("row-move", i)) {
       const o = [...this.sourceRows], [s] = o.splice(r, 1);
       o.splice(e, 0, s);
-      const a = this.grid;
-      a._rows = o, a._focusRow = e, a._focusCol = this.lastFocusCol, a.refreshVirtualWindow(!0), h(a);
+      const l = this.grid;
+      l._rows = o, l._focusRow = e, l._focusCol = this.lastFocusCol, l.refreshVirtualWindow(!0), h(l);
     }
   }
   /**
@@ -591,7 +593,7 @@ class D extends y {
   // #endregion
 }
 export {
-  C as ROW_DRAG_HANDLE_FIELD,
-  D as RowReorderPlugin
+  L as ROW_DRAG_HANDLE_FIELD,
+  A as RowReorderPlugin
 };
 //# sourceMappingURL=index.js.map