@toolbox-web/grid 1.3.0 → 1.4.0

package/lib/plugins/reorder/index.js

@@ -1,11 +1,11 @@
 function b(l) {
   l && l.querySelectorAll(".cell-focus").forEach((e) => e.classList.remove("cell-focus"));
 }
-const v = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])', C = document.createElement("template");
-C.innerHTML = '<div class="cell" role="gridcell" part="cell"></div>';
-const E = document.createElement("template");
-E.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
-function w(l, e) {
+const C = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])', E = document.createElement("template");
+E.innerHTML = '<div class="cell" role="gridcell" part="cell"></div>';
+const w = document.createElement("template");
+w.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
+function y(l, e) {
   if (l._virtualization?.enabled) {
     const { rowHeight: a, container: r, viewportEl: s } = l._virtualization, o = r, c = s?.clientHeight ?? o?.clientHeight ?? 0;
     if (o && c > 0) {
@@ -32,7 +32,7 @@ function w(l, e) {
         }
       }
       if (l._activeEditRows !== void 0 && l._activeEditRows !== -1 && r.classList.contains("editing")) {
-        const o = r.querySelector(v);
+        const o = r.querySelector(C);
         if (o && document.activeElement !== o)
           try {
             o.focus({ preventScroll: !0 });
@@ -48,7 +48,7 @@ function w(l, e) {
     }
   }
 }
-const y = {
+const p = '<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>', L = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -56,12 +56,15 @@ const y = {
   sortNone: "⇅",
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
-  toolPanel: "☰"
-}, L = {
+  toolPanel: "☰",
+  filter: p,
+  filterActive: p,
+  print: "🖨️"
+}, A = {
   /** Ask if a column can be moved. Context: ColumnConfig. Response: boolean | undefined */
   CAN_MOVE_COLUMN: "canMoveColumn"
 };
-class A {
+class O {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -285,7 +288,7 @@ class A {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...y, ...e };
+    return { ...L, ...e };
   }
   // #region Animation Helpers
   /**
@@ -361,21 +364,21 @@ class A {
   }
   // #endregion
 }
-function O(l) {
+function _(l) {
   const e = l.meta ?? {};
   return e.lockPosition !== !0 && e.suppressMovable !== !0;
 }
-function p(l, e, t) {
+function v(l, e, t) {
   if (e === t || e < 0 || e >= l.length || t < 0 || t > l.length) return l;
   const i = [...l], [n] = i.splice(e, 1);
   return i.splice(t, 0, n), i;
 }
-const _ = '@layer tbw-plugins{.header-row>.cell[draggable=true]{cursor:grab;position:relative}.header-row>.cell.dragging{opacity:.5;cursor:grabbing}.header-row>.cell.drop-before:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent));z-index:1}.header-row>.cell.drop-after:after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent));z-index:1}.cell.flip-animating{transition:transform var(--tbw-animation-duration, .2s) ease-out;will-change:transform;z-index:1}@keyframes reorder-fade-in{0%{opacity:0}to{opacity:1}}.cell.fade-animating{animation:reorder-fade-in var(--tbw-animation-duration, .2s) ease-out backwards}}';
-class R extends A {
+const R = '@layer tbw-plugins{.header-row>.cell[draggable=true]{cursor:grab;position:relative}.header-row>.cell.dragging{opacity:.5;cursor:grabbing}.header-row>.cell.drop-before:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent));z-index:1}.header-row>.cell.drop-after:after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent));z-index:1}.cell.flip-animating{transition:transform var(--tbw-animation-duration, .2s) ease-out;will-change:transform;z-index:1}@keyframes reorder-fade-in{0%{opacity:0}to{opacity:1}}.cell.fade-animating{animation:reorder-fade-in var(--tbw-animation-duration, .2s) ease-out backwards}}';
+class x extends O {
   /** @internal */
   name = "reorder";
   /** @internal */
-  styles = _;
+  styles = R;
   /** @internal */
   get defaultConfig() {
     return {
@@ -406,8 +409,8 @@ class R extends A {
    * Check if a column can be moved, considering both column config and plugin queries.
    */
   canMoveColumnWithPlugins(e) {
-    return !e || !O(e) ? !1 : !this.grid.queryPlugins({
-      type: L.CAN_MOVE_COLUMN,
+    return !e || !_(e) ? !1 : !this.grid.queryPlugins({
+      type: A.CAN_MOVE_COLUMN,
       context: e
     }).includes(!1);
   }
@@ -466,7 +469,7 @@ class R extends A {
         const s = this.draggedField, o = this.draggedIndex, c = this.dropIndex;
         if (!this.isDragging || s === null || o === null || c === null)
           return;
-        const u = c > o ? c - 1 : c, f = this.getColumnOrder(), g = p(f, o, u), h = {
+        const u = c > o ? c - 1 : c, f = this.getColumnOrder(), g = v(f, o, u), h = {
           field: s,
           fromIndex: o,
           toIndex: u,
@@ -493,7 +496,7 @@ class R extends A {
     if (s < 0 || s >= a.length) return;
     const o = n.find((c) => c.field === a[s]);
     if (this.canMoveColumnWithPlugins(o))
-      return this.moveColumn(d.field, s), t._focusCol = s, w(this.grid), e.preventDefault(), e.stopPropagation(), !0;
+      return this.moveColumn(d.field, s), t._focusCol = s, y(this.grid), e.preventDefault(), e.stopPropagation(), !0;
   }
   // #endregion
   // #region Public API
@@ -512,7 +515,7 @@ class R extends A {
   moveColumn(e, t) {
     const i = this.getColumnOrder(), n = i.indexOf(e);
     if (n === -1) return;
-    const d = p(i, n, t);
+    const d = v(i, n, t);
     this.emitCancelable("column-move", {
       field: e,
       fromIndex: n,
@@ -633,6 +636,6 @@ class R extends A {
   // #endregion
 }
 export {
-  R as ReorderPlugin
+  x as ReorderPlugin
 };
 //# sourceMappingURL=index.js.map