@toolbox-web/grid 0.2.5 → 0.2.6

package/lib/plugins/reorder/index.js

@@ -7,11 +7,11 @@ const C = {
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
   toolPanel: "☰"
-}, b = {
+}, w = {
   /** Ask if a column can be moved. Context: ColumnConfig. Response: boolean | undefined */
   CAN_MOVE_COLUMN: "canMoveColumn"
 };
-class v {
+class b {
   /** Plugin version - override in subclass if needed */
   version = "1.0.0";
   /** CSS styles to inject into the grid's shadow DOM */
@@ -62,8 +62,8 @@ class v {
   /**
    * Emit a custom event from the grid.
    */
-  emit(e, r) {
-    this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: r, bubbles: !0 }));
+  emit(e, t) {
+    this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: t, bubbles: !0 }));
   }
   /**
    * Request a re-render of the grid.
@@ -102,7 +102,7 @@ class v {
    * Use this for rendering that needs to match the grid template.
    */
   get visibleColumns() {
-    return this.grid?.visibleColumns ?? [];
+    return this.grid?._visibleColumns ?? [];
   }
   /**
    * Get the shadow root of the grid.
@@ -146,8 +146,8 @@ class v {
    * @param pluginOverride - Optional plugin-level override
    * @returns The resolved icon value
    */
-  resolveIcon(e, r) {
-    return r !== void 0 ? r : this.gridIcons[e];
+  resolveIcon(e, t) {
+    return t !== void 0 ? t : this.gridIcons[e];
   }
   /**
    * Set an icon value on an element.
@@ -156,8 +156,8 @@ class v {
    * @param element - The element to set the icon on
    * @param icon - The icon value (string or HTMLElement)
    */
-  setIcon(e, r) {
-    typeof r == "string" ? e.innerHTML = r : r instanceof HTMLElement && (e.innerHTML = "", e.appendChild(r.cloneNode(!0)));
+  setIcon(e, t) {
+    typeof t == "string" ? e.innerHTML = t : t instanceof HTMLElement && (e.innerHTML = "", e.appendChild(t.cloneNode(!0)));
   }
   /**
    * Log a warning message.
@@ -167,23 +167,22 @@ class v {
   }
   // #endregion
 }
-function w(i) {
-  const e = i.meta ?? {};
+function O(o) {
+  const e = o.meta ?? {};
   return e.lockPosition !== !0 && e.suppressMovable !== !0;
 }
-function h(i, e, r) {
-  if (e === r || e < 0 || e >= i.length || r < 0 || r > i.length) return i;
-  const s = [...i], [t] = s.splice(e, 1);
-  return s.splice(r, 0, t), s;
+function f(o, e, t) {
+  if (e === t || e < 0 || e >= o.length || t < 0 || t > o.length) return o;
+  const n = [...o], [r] = n.splice(e, 1);
+  return n.splice(t, 0, r), n;
 }
-const O = '.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}';
-class E extends v {
+const x = '.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}';
+class I extends b {
   name = "reorder";
   version = "1.0.0";
   get defaultConfig() {
     return {
-      animation: !0,
-      animationDuration: 200
+      viewTransition: !0
     };
   }
   // #region Internal State
@@ -196,9 +195,9 @@ class E extends v {
   attach(e) {
     super.attach(e), e.addEventListener(
       "column-reorder-request",
-      (r) => {
-        const s = r.detail;
-        s?.field && typeof s.toIndex == "number" && this.moveColumn(s.field, s.toIndex);
+      (t) => {
+        const n = t.detail;
+        n?.field && typeof n.toIndex == "number" && this.moveColumn(n.field, n.toIndex);
       },
       { signal: this.disconnectSignal }
     );
@@ -208,46 +207,45 @@ class E extends v {
   }
   // #endregion
   // #region Hooks
-  // Note: No processColumns hook needed - we directly update the grid's column order
   afterRender() {
     const e = this.shadowRoot;
     if (!e) return;
-    e.querySelectorAll(".header-row > .cell").forEach((s) => {
-      const t = s, d = t.getAttribute("data-field");
-      if (!d) return;
-      const u = this.columns.find((n) => n.field === d), f = !this.grid.queryPlugins({
-        type: b.CAN_MOVE_COLUMN,
-        context: u
+    e.querySelectorAll(".header-row > .cell").forEach((n) => {
+      const r = n, s = r.getAttribute("data-field");
+      if (!s) return;
+      const a = this.columns.find((i) => i.field === s), p = !this.grid.queryPlugins({
+        type: w.CAN_MOVE_COLUMN,
+        context: a
       }).includes(!1);
-      if (!u || !w(u) || !f) {
-        t.draggable = !1;
+      if (!a || !O(a) || !p) {
+        r.draggable = !1;
         return;
       }
-      t.draggable = !0, !t.getAttribute("data-dragstart-bound") && (t.setAttribute("data-dragstart-bound", "true"), t.addEventListener("dragstart", (n) => {
-        const o = this.getColumnOrder().indexOf(d);
-        this.isDragging = !0, this.draggedField = d, this.draggedIndex = o, n.dataTransfer && (n.dataTransfer.effectAllowed = "move", n.dataTransfer.setData("text/plain", d)), t.classList.add("dragging");
-      }), t.addEventListener("dragend", () => {
-        this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, e.querySelectorAll(".header-row > .cell").forEach((n) => {
-          n.classList.remove("dragging", "drop-target", "drop-before", "drop-after");
+      r.draggable = !0, !r.getAttribute("data-dragstart-bound") && (r.setAttribute("data-dragstart-bound", "true"), r.addEventListener("dragstart", (i) => {
+        const d = this.getColumnOrder().indexOf(s);
+        this.isDragging = !0, this.draggedField = s, this.draggedIndex = d, i.dataTransfer && (i.dataTransfer.effectAllowed = "move", i.dataTransfer.setData("text/plain", s)), r.classList.add("dragging");
+      }), r.addEventListener("dragend", () => {
+        this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, e.querySelectorAll(".header-row > .cell").forEach((i) => {
+          i.classList.remove("dragging", "drop-target", "drop-before", "drop-after");
         });
-      }), t.addEventListener("dragover", (n) => {
-        if (n.preventDefault(), !this.isDragging || this.draggedField === d) return;
-        const a = t.getBoundingClientRect(), o = a.left + a.width / 2, g = this.getColumnOrder().indexOf(d);
-        this.dropIndex = n.clientX < o ? g : g + 1, t.classList.add("drop-target"), t.classList.toggle("drop-before", n.clientX < o), t.classList.toggle("drop-after", n.clientX >= o);
-      }), t.addEventListener("dragleave", () => {
-        t.classList.remove("drop-target", "drop-before", "drop-after");
-      }), t.addEventListener("drop", (n) => {
-        n.preventDefault();
-        const a = this.draggedField, o = this.draggedIndex, l = this.dropIndex;
-        if (!this.isDragging || a === null || o === null || l === null)
+      }), r.addEventListener("dragover", (i) => {
+        if (i.preventDefault(), !this.isDragging || this.draggedField === s) return;
+        const l = r.getBoundingClientRect(), d = l.left + l.width / 2, u = this.getColumnOrder().indexOf(s);
+        this.dropIndex = i.clientX < d ? u : u + 1, r.classList.add("drop-target"), r.classList.toggle("drop-before", i.clientX < d), r.classList.toggle("drop-after", i.clientX >= d);
+      }), r.addEventListener("dragleave", () => {
+        r.classList.remove("drop-target", "drop-before", "drop-after");
+      }), r.addEventListener("drop", (i) => {
+        i.preventDefault();
+        const l = this.draggedField, d = this.draggedIndex, g = this.dropIndex;
+        if (!this.isDragging || l === null || d === null || g === null)
           return;
-        const g = l > o ? l - 1 : l, p = this.getColumnOrder(), c = h(p, o, g), m = {
-          field: a,
-          fromIndex: o,
-          toIndex: g,
-          columnOrder: c
+        const u = g > d ? g - 1 : g, m = this.getColumnOrder(), h = f(m, d, u), v = {
+          field: l,
+          fromIndex: d,
+          toIndex: u,
+          columnOrder: h
         };
-        this.grid.setColumnOrder(c), this.emit("column-move", m), this.grid.requestStateChange?.();
+        this.updateColumnOrder(h), this.emit("column-move", v);
       }));
     });
   }
@@ -265,37 +263,59 @@ class E extends v {
    * @param field - The field name of the column to move
    * @param toIndex - The target index
    */
-  moveColumn(e, r) {
-    const s = this.getColumnOrder(), t = s.indexOf(e);
-    if (t === -1) return;
-    const d = h(s, t, r);
-    this.grid.setColumnOrder(d), this.emit("column-move", {
+  moveColumn(e, t) {
+    const n = this.getColumnOrder(), r = n.indexOf(e);
+    if (r === -1) return;
+    const s = f(n, r, t);
+    this.updateColumnOrder(s), this.emit("column-move", {
       field: e,
-      fromIndex: t,
-      toIndex: r,
-      columnOrder: d
-    }), this.grid.requestStateChange?.();
+      fromIndex: r,
+      toIndex: t,
+      columnOrder: s
+    });
   }
   /**
    * Set a specific column order.
    * @param order - Array of field names in desired order
    */
   setColumnOrder(e) {
-    this.grid.setColumnOrder(e), this.grid.requestStateChange?.();
+    this.updateColumnOrder(e);
   }
   /**
    * Reset column order to the original configuration order.
    */
   resetColumnOrder() {
-    const e = this.columns.map((r) => r.field);
-    this.grid.setColumnOrder(e), this.grid.requestStateChange?.();
+    const e = this.columns.map((t) => t.field);
+    this.updateColumnOrder(e);
+  }
+  // #endregion
+  // #region View Transition
+  /**
+   * Update column order with optional view transition animation.
+   * Falls back to instant update if View Transitions API is not supported.
+   */
+  updateColumnOrder(e) {
+    const t = this.grid, n = this.shadowRoot;
+    if (this.config.viewTransition && "startViewTransition" in document && n) {
+      const r = n.querySelectorAll(".cell[data-field]");
+      r.forEach((a) => {
+        const c = a.getAttribute("data-field");
+        c && (a.style.viewTransitionName = `col-${c}`);
+      }), document.startViewTransition(() => t.setColumnOrder(e)).finished.finally(() => {
+        r.forEach((a) => {
+          a.style.viewTransitionName = "";
+        });
+      });
+    } else
+      t.setColumnOrder(e);
+    t.requestStateChange?.();
   }
   // #endregion
   // #region Styles
-  styles = O;
+  styles = x;
   // #endregion
 }
 export {
-  E as ReorderPlugin
+  I as ReorderPlugin
 };
 //# sourceMappingURL=index.js.map