@aplus-frontend/ui 6.18.0 → 6.19.1

package/es/src/business/ap-draggable-grid/ApDraggableGrid.vue2.mjs

@@ -1,440 +1,254 @@
-import { defineComponent as lo, ref as N, computed as I, useTemplateRef as co, reactive as io, watch as fo, onMounted as po, onUnmounted as uo, createBlock as wo, openBlock as k, unref as R, withCtx as go, createElementVNode as ho, normalizeStyle as J, normalizeClass as U, createElementBlock as z, Fragment as mo, renderList as vo, renderSlot as Eo } from "vue";
-import { ApDraggableGridProps as yo } from "./constans.mjs";
-import { Spin as So } from "@aplus-frontend/antdv";
+import { defineComponent as te, ref as T, computed as H, useTemplateRef as ne, watch as ae, toRaw as le, onMounted as se, onUnmounted as ie, openBlock as M, createBlock as ue, unref as G, withCtx as de, createElementVNode as ce, normalizeClass as q, normalizeStyle as z, createElementBlock as U, Fragment as ge, renderList as fe, renderSlot as pe } from "vue";
+import { ApDraggableGridProps as me } from "./constans.mjs";
+import { Spin as we } from "@aplus-frontend/antdv";
 import "../../config-provider/index.mjs";
-import { useNamespace as Ro } from "../../config-provider/hooks/use-namespace.mjs";
-const Do = ["data-span", "draggable", "onDragstart"], Co = /* @__PURE__ */ lo({
+import { sortItemsByRowAndCol as D } from "./utils/sortItemsByRowAndCol.mjs";
+import { useNamespace as he } from "../../config-provider/hooks/use-namespace.mjs";
+const ve = ["data-span", "data-index", "data-row", "data-col", "data-height", "data-module", "draggable"], Ee = /* @__PURE__ */ te({
   __name: "ApDraggableGrid",
-  props: yo(),
+  props: me(),
   emits: ["onGridListChange"],
-  setup(V, { expose: X, emit: Y }) {
-    const h = V, { b: W, e: M, m: H } = Ro("ap-draggable-grid"), $ = N(!1), L = N([]), A = I(() => M("item")), B = I(() => M("dragging")), P = I(() => h.customWrapper ? `.${h.customWrapper} .${A.value}` : `.${A.value}`), q = I(() => h.customWrapper ? `.${h.customWrapper} .${A.value}:not(.${B.value})` : `.${A.value}:not(.${B.value})`), K = Y, D = co("gridContainer"), y = N(null), c = io([]);
-    fo(
-      () => h.gridList,
-      (r) => {
-        Array.isArray(r) && G(r);
+  setup(V, { expose: j, emit: K }) {
+    const g = V, { b: F, e: L, m: Q } = he("ap-draggable-grid"), C = T(!1), R = T(!1), O = H(() => L("item")), P = H(() => L("dragging")), X = H(() => g.customWrapper ? `.${g.customWrapper} .${O.value}:not(.${P.value})` : `.${O.value}:not(.${P.value})`), Y = K, f = ne("gridContainer"), I = T([]);
+    ae(
+      () => g.gridList,
+      (e) => {
+        Array.isArray(e) && s(e);
       },
       { deep: !0, immediate: !0 }
     );
-    function G(r) {
-      c.splice(0, c.length), r.forEach((s) => {
-        c.push({
-          ...s,
-          isDragging: !1,
-          isOverlay: !1
-        });
-      });
-    }
-    const Q = (r) => ({
-      gridColumn: `${r.col} / span ${r.span}`,
-      gridRow: r.row,
-      minHeight: `${h.gridItemHeight}px`,
-      boxShadow: h.gridItemShadow ? h.gridItemShadow : "none"
-    }), Z = (r, s) => {
-      y.value = s, c[s].isDragging = !0, L.value = c.map((o) => ({
-        row: o.row,
-        col: o.col
-      })), r.dataTransfer && (r.dataTransfer.setData("text/plain", String(s)), r.dataTransfer.effectAllowed = "move");
-    }, x = () => {
-      y.value !== null && (c[y.value].isDragging = !1, C(), y.value = null), c.forEach((r) => r.isOverlay = !1);
-    };
-    function C() {
-      const r = c.map(
-        (s) => ({
-          span: s.span,
-          row: s.row,
-          col: s.col,
-          height: s.height ? s.height : "",
-          showHeight: s.showHeight ? s.showHeight : "",
-          module: s.module
-        })
+    function s(e) {
+      const t = [...e].sort((o, i) => o.row - i.row);
+      I.value = t.map((o) => ({
+        ...o
+      })), Y(
+        "onGridListChange",
+        JSON.parse(JSON.stringify(I.value))
       );
-      K("onGridListChange", r);
     }
-    async function _() {
-      if (G([]), typeof h.request == "function")
+    const Z = (e) => ({
+      gridColumn: `${e.col} / span ${e.span}`,
+      gridRow: e.row,
+      minHeight: e.showHeight ? e.showHeight + "px" : `${g.gridItemHeight}px`,
+      height: e.showHeight ? e.showHeight + "px" : `${g.gridItemHeight}px`,
+      boxShadow: g.gridItemShadow ? g.gridItemShadow : "none"
+    });
+    async function k() {
+      if (s([]), typeof g.request == "function")
         try {
-          $.value = !0;
-          const r = await h.request();
-          Array.isArray(r) ? G(r) : console.warn(
+          C.value = !0;
+          const e = await g.request();
+          Array.isArray(e) ? (console.log("ApDraggableGrid: 请求到的布局数据:", e), s(e)) : console.warn(
             "ApDraggableGrid: 请求函数必须返回一个符合 ApDraggableGridItemBase 数组的格式"
           );
-        } catch (r) {
-          console.error("ApDraggableGrid: 请求错误:", r);
+        } catch (e) {
+          console.error("ApDraggableGrid: 请求错误:", e);
         } finally {
-          $.value = !1;
+          C.value = !1;
         }
     }
-    function oo() {
-      L.value.length === c.length && c.forEach((r, s) => {
-        const o = L.value[s];
-        r.row = o.row, r.col = o.col;
-      });
-    }
-    po(async () => {
-      if (await _(), O(), h.disableDrag || !D.value) return;
-      const r = (o) => {
-        if (o.preventDefault(), y.value === null || !o.target) return;
-        const e = document.elementFromPoint(o.clientX, o.clientY);
-        if (!e) return;
-        const t = e.closest(
-          q.value
-        );
-        if (!t) return;
-        const a = Array.from(
-          document.querySelectorAll(P.value)
-        ).indexOf(t);
-        a >= 0 && a !== y.value && (c.forEach((f) => f.isOverlay = !1), c[a].isOverlay = !0, j(y.value, a) ? o.dataTransfer.dropEffect = "move" : o.dataTransfer.dropEffect = "none");
-      }, s = (o) => {
-        if (o.preventDefault(), y.value === null) return;
-        const e = document.elementFromPoint(o.clientX, o.clientY);
-        if (!e) return;
-        const t = e.closest(
-          q.value
-        );
-        if (!t) return;
-        const a = Array.from(
-          document.querySelectorAll(P.value)
-        ).indexOf(t);
-        a >= 0 && ro(y.value, a) ? (no(y.value, a), O(), C()) : oo(), c.forEach((f) => {
-          f.isDragging = !1, f.isOverlay = !1;
-        }), y.value = null;
-      };
-      D.value.addEventListener("dragover", r), D.value.addEventListener("drop", s), uo(() => {
-        D.value && (D.value.removeEventListener("dragover", r), D.value.removeEventListener("drop", s));
-      });
-    });
-    function j(r, s) {
-      const o = c[r], e = c[s];
-      if (o.row === e.row) {
-        const t = c.filter(
-          (a) => a.row === o.row
-        );
-        let i = 0;
-        return t.forEach((a) => {
-          c.indexOf(a) !== r && c.indexOf(a) !== s && (i += a.span);
-        }), i += o.span + e.span, i <= 24;
-      }
-      return o.span === e.span && o.height === e.height ? !0 : o.span === 24 ? c.filter(
-        (a) => a.row === e.row
-      ).reduce(
-        (a, f) => a + f.span,
-        0
-      ) === 24 : e.span === 24 ? c.filter(
-        (a) => a.row === o.row
-      ).reduce(
-        (a, f) => a + f.span,
-        0
-      ) === 24 : !1;
-    }
-    function ro(r, s) {
-      const o = c[r], e = c[s];
-      if (o.row === e.row)
-        return j(r, s);
-      const t = JSON.parse(JSON.stringify(c)), i = o.row, a = e.row, f = a < i, m = /* @__PURE__ */ new Map();
-      if (t.forEach((n, p) => {
-        m.has(n.row) || m.set(n.row, []), m.get(n.row).push(p);
-      }), o.span === 24 && e.span === 24) {
-        t[r].row = a, t[r].col = 1;
-        const n = f ? a + 1 : a - 1;
-        t[s].row = n, t[s].col = 1;
-        const p = t.map((u) => u.row);
-        t.forEach((u, l) => {
-          l !== r && l !== s && (f ? (p[l] > a && p[l] < i || p[l] === n) && (u.row += 1) : (p[l] > i && p[l] < a || p[l] === n) && (u.row -= 1));
-        });
-      } else if (o.span === 24) {
-        const n = t.filter(
-          (u) => u.row === a
-        );
-        if (n.reduce(
-          (u, l) => u + l.span,
-          0
-        ) !== 24) return !1;
-        if (t[r].row = a, t[r].col = 1, f) {
-          const u = /* @__PURE__ */ new Set();
-          for (let l = a; l < i; l++)
-            u.add(l);
-          t.forEach((l, E) => {
-            E !== r && u.has(l.row) && (l.row += 1);
-          }), n.forEach((l) => {
-            t.indexOf(l) !== r && (l.row = a + 1);
-          });
-        } else
-          n.forEach((u) => {
-            t.indexOf(u) !== r && (u.row = i);
-          });
-      } else if (e.span === 24) {
-        const n = t.filter(
-          (u) => u.row === i
-        );
-        if (n.reduce(
-          (u, l) => u + l.span,
-          0
-        ) !== 24) return !1;
-        t[s].row = i, t[s].col = 1, f ? n.forEach((u) => {
-          t.indexOf(u) !== s && (u.row = a + 1);
-        }) : n.forEach((u) => {
-          t.indexOf(u) !== s && (u.row = a);
-        });
-      } else if (o.span === e.span)
-        t[r].row = a, t[r].col = e.col, t[s].row = i, t[s].col = o.col;
-      else
-        return !1;
-      const v = /* @__PURE__ */ new Map();
-      t.forEach((n) => {
-        v.has(n.row) || v.set(n.row, []), v.get(n.row).push(n);
-      });
-      const S = Array.from(v.keys()).sort((n, p) => n - p);
-      let w = 1;
-      for (const n of S)
-        v.get(n).forEach((u) => {
-          u.row = w;
-        }), w++;
-      return eo(t);
-    }
-    function eo(r) {
-      const s = {};
-      r.forEach((o) => {
-        s[o.row] || (s[o.row] = []), s[o.row].push(o);
-      });
-      for (const o in s) {
-        const e = s[o];
-        if (e.reduce((a, f) => a + f.span, 0) > 24)
-          return !1;
-        e.sort((a, f) => a.col - f.col);
-        let i = 0;
-        for (const a of e) {
-          if (a.col <= i)
-            return !1;
-          i = a.col + a.span - 1;
-        }
+    let N = T(null), S = T(null), w = null, A = !1, v = null;
+    const W = (e) => {
+      if (!A && (A = !0, e.dataTransfer && e.target instanceof HTMLElement)) {
+        const t = e.target.dataset;
+        e.dataTransfer.setData("text/plain", t.module), e.dataTransfer.effectAllowed = "move", N.value = {
+          span: Number(t.span),
+          col: Number(t.col),
+          row: Number(t.row),
+          module: t.module,
+          height: Number(t.height),
+          index: Number(t.index)
+        }, w = e.target, w.style.opacity = "0";
       }
-      return !0;
-    }
-    function no(r, s) {
-      const o = c[r], e = c[s], t = JSON.parse(JSON.stringify(c)), i = o.row, a = e.row;
-      if (o.span === 24 && e.span === 24) {
-        ao(
-          o,
-          e,
-          i,
-          a,
-          t
+    }, J = (e) => {
+      if (e.preventDefault(), v && clearTimeout(v), v = window.setTimeout(() => {
+        A = !1, v = null;
+      }, 300), e.dataTransfer && e.target instanceof HTMLElement) {
+        const t = e.target.closest(
+          X.value
         );
-        return;
+        if (!t) return;
+        const o = t.dataset;
+        S.value = {
+          span: Number(o.span),
+          col: Number(o.col),
+          row: Number(o.row),
+          module: o.module,
+          height: Number(o.height),
+          index: Number(o.index)
+        };
       }
-      if (i === a) {
-        const w = o.col;
-        o.col = e.col, e.col = w;
+    }, B = (e) => {
+      e.preventDefault(), w && (w.style.opacity = "1", w = null), ee(N, S) && oe(N, S), N.value = null, S.value = null, R.value = !1;
+    }, _ = () => {
+      w && (w.style.opacity = "1", w = null), N.value = null, S.value = null, R.value = !1;
+    }, ee = (e, t) => {
+      const { span: o, module: i } = e.value, { span: u, module: d } = t.value;
+      return i === d && o === u ? (console.log("如果自己放在自己之上不能交换数据"), !1) : !0;
+    }, oe = (e, t) => {
+      if (!e.value || !t.value) return;
+      const {
+        span: o,
+        col: i,
+        row: u,
+        module: d,
+        height: $,
+        index: a
+      } = e.value, {
+        span: b,
+        col: h,
+        row: p,
+        module: re,
+        height: x,
+        index: c
+      } = t.value;
+      if (u === p && i === h && o === b && $ === x && d === re) {
+        console.log("从同一位置拖拽到同一位置,不做任何操作");
         return;
       }
-      const f = a < i, m = c.map((w) => w.row), v = c.map((w) => w.col), S = c.map((w) => w.span);
-      if (o.span === 24 && e.span === 24) {
-        const w = i, n = a;
-        o.row = n, o.col = 1, o.span = 24, e.row = w, e.col = 1, e.span = 24;
-        const p = Math.abs(w - n), u = /* @__PURE__ */ new Set();
-        for (let l = Math.min(w, n); l <= Math.max(w, n); l++)
-          u.add(l);
-        if (p !== 1) {
-          const l = Math.min(w, n), E = Math.max(w, n), d = /* @__PURE__ */ new Map();
-          if (f) {
-            d.set(w, n), d.set(n, n + 1);
-            for (let g = n + 1; g < w; g++)
-              d.set(g, g + 1);
-          } else {
-            d.set(w, n), d.set(n, n - 1);
-            for (let g = w + 1; g < n; g++)
-              d.set(g, g - 1);
+      let r = [...le(I.value)];
+      const E = JSON.parse(JSON.stringify(r));
+      if (u === p)
+        if (a > c) {
+          console.log("", "从右向左拖拽"), console.log(a, c), console.log(a - c), a - c === 1 ? (r[c].col = o + h, r[a].col = h) : (r.forEach((m, n) => {
+            n < a && n >= c && (m.col += b);
+          }), r[a].col = h);
+          const l = D(r);
+          if (!y(l)) {
+            console.warn("交换后的布局无效，恢复原始布局");
+            return;
           }
-          c.forEach((g, b) => {
-            if (b !== r && b !== s) {
-              const T = m[b];
-              T >= l && T <= E && d.has(T) && (g.row = d.get(T), g.col = v[b], g.span = S[b]);
-            }
-          });
+          s(l);
+          return;
+        } else {
+          console.log(a, c), console.log("", "从左向右拖拽"), c - a === 1 ? (r[a].col = b + 1, r[c].col = i) : (r.forEach((m, n) => {
+            n > a && n <= c && (m.col -= b);
+          }), r[a].col = h);
+          const l = D(r);
+          if (console.log("交换后的布局:", l), !y(l)) {
+            console.warn("交换后的布局无效，恢复原始布局"), s(E);
+            return;
+          }
+          s(l);
+          return;
         }
-      } else if (o.span === 24) {
-        const w = c.filter(
-          (n) => n.row === a
-        );
-        o.row = a, o.col = 1, f ? c.forEach((n, p) => {
-          p !== r && (n.row === a ? n.row = a + 1 : n.row > a && n.row < i && (n.row += 1));
-        }) : w.forEach((n) => {
-          c.indexOf(n) !== r && (n.row = i);
-        });
-      } else if (e.span === 24) {
-        const w = c.filter(
-          (n) => n.row === i
-        );
-        e.row = i, e.col = 1, f ? (w.forEach((n) => {
-          c.indexOf(n) !== s && (n.row = a + 1);
-        }), c.forEach((n, p) => {
-          p !== s && !w.includes(n) && n.row > a && n.row < i && (n.row += 1);
-        })) : w.forEach((n) => {
-          c.indexOf(n) !== s && (n.row = a);
-        });
-      } else o.span === e.span && (o.row = a, o.col = e.col, e.row = i, e.col = o.col);
-      O();
-    }
-    function ao(r, s, o, e, t) {
-      const i = r.module, a = s.module, f = t.map((l) => ({ ...l })), m = /* @__PURE__ */ new Map();
-      f.forEach((l) => {
-        m.has(l.row) || m.set(l.row, []), m.get(l.row).push(l);
-      });
-      const v = f.find(
-        (l) => l.module === i
-      ), S = f.find(
-        (l) => l.module === a
-      ), w = Array.from(
-        /* @__PURE__ */ new Set([o, e, ...Array.from(m.keys())])
-      ).sort((l, E) => l - E), n = {};
-      let p = 1;
-      for (const l of w) {
-        if (n[p]) {
-          p++;
-          continue;
+      else if (p < u) {
+        if (console.log("从下向上拖拽"), o === 24) {
+          const l = [];
+          for (let n = p; n < u; n++)
+            l.push(n);
+          r.forEach((n) => {
+            l.includes(n.row) && (n.row += 1);
+          }), r[a].row = p;
+          const m = D(r);
+          if (!y(m)) {
+            console.warn("交换后的布局无效，恢复原始布局"), s(E);
+            return;
+          }
+          s(m);
+          return;
         }
-        if (l === o)
-          p === e && p++, n[p] = [S], S.row = p, S.col = 1, S.span = 24, p++;
-        else if (l === e)
-          p === o && p++, n[p] = [v], v.row = p, v.col = 1, v.span = 24, p++;
-        else {
-          const d = (m.get(l) || []).filter(
-            (g) => g.module !== i && g.module !== a
-          );
-          d.length > 0 && (d.forEach((g) => {
-            g.row = p, g.col = g === d[0] ? 1 : d[0].col + d[0].span;
-          }), n[p] = d, p++);
+        if (o === b && $ === x) {
+          r[a].row = p, r[a].col = h, r[c].row = u, r[c].col = i;
+          const l = D(r);
+          if (!y(l)) {
+            console.warn("交换后的布局无效，恢复原始布局"), s(E);
+            return;
+          }
+          s(l);
+          return;
         }
-      }
-      c.splice(0, c.length);
-      const u = Object.keys(n).map(Number).sort((l, E) => l - E);
-      for (const l of u) {
-        const E = n[l];
-        E.sort((d, g) => d.col - g.col), E.forEach((d) => {
-          c.push(d);
-        });
-      }
-      O();
-    }
-    function O() {
-      c.forEach((e) => {
-        if (e.module) {
-          const t = so(e.module);
-          t && (e.span <= 0 || e.span > 24) ? (console.log(
-            `Restoring original span ${t} for module ${e.module}`
-          ), e.span = t) : (e.span <= 0 && (e.span = 1), e.span > 24 && (e.span = 24));
-        } else
-          e.span <= 0 && (e.span = 1), e.span > 24 && (e.span = 24);
-        e.span === 24 && (e.col = 1);
-      });
-      const r = {};
-      c.forEach((e) => {
-        r[e.row] || (r[e.row] = []), r[e.row].push(e);
-      }), Object.keys(r).forEach((e) => {
-        const t = parseInt(e), i = r[t];
-        if (i.sort((f, m) => f.col - m.col), i.length === 1 && i[0].span === 24) {
-          i[0].col = 1;
+      } else {
+        if (console.log("从上向下拖拽"), o === 24) {
+          console.log("如果拖拽元素跨度为24", "从上向下拖拽");
+          const l = [];
+          for (let n = u + 1; n <= p; n++)
+            l.push(n);
+          r.forEach((n) => {
+            l.includes(n.row) && (n.row -= 1);
+          }), r[a].row = p;
+          const m = D(r);
+          if (!y(m)) {
+            console.warn("交换后的布局无效，恢复原始布局"), s(E);
+            return;
+          }
+          s(m);
           return;
         }
-        let a = 1;
-        i.forEach((f, m) => {
-          f.col = a;
-          const v = 24 - a + 1;
-          f.span > v && (m === 0 ? f.span = Math.min(f.span, 24) : f.span = v), a += f.span;
-        }), F(i);
-      });
-      const s = Object.keys(r).map(Number).sort((e, t) => e - t);
-      let o = 1;
-      s.forEach((e) => {
-        e !== o && r[e].forEach((t) => {
-          t.row = o;
-        }), o++;
-      }), to();
-    }
-    function so(r) {
-      return {
-        1: 8,
-        2: 16,
-        3: 24,
-        4: 16,
-        5: 8,
-        6: 16,
-        7: 8,
-        8: 24,
-        9: 12,
-        10: 12
-      }[r] || null;
-    }
-    function to() {
-      const r = [...new Set(c.map((o) => o.row))].sort(
-        (o, e) => o - e
-      );
-      for (let o = 0; o < r.length - 1; o++)
-        r[o + 1] - r[o] !== 1 && console.warn(`Row gap detected: ${r[o]} to ${r[o + 1]}`);
-      const s = {};
-      c.forEach((o) => {
-        s[o.row] || (s[o.row] = []), s[o.row].push(o);
-      }), Object.keys(s).forEach((o) => {
-        F(s[parseInt(o)]);
+        if (o === b && $ === x) {
+          r[a].row = p, r[a].col = h, r[c].row = u, r[c].col = i;
+          const l = D(r);
+          if (!y(l)) {
+            console.warn("交换后的布局无效，恢复原始布局"), s(E);
+            return;
+          }
+          s(l);
+          return;
+        }
+      }
+    }, y = (e) => {
+      const t = {};
+      e.forEach((o) => {
+        t[o.row] || (t[o.row] = []), t[o.row].push(o);
       });
-    }
-    function F(r) {
-      r.sort((s, o) => s.col - o.col);
-      for (let s = 0; s < r.length; s++) {
-        const o = r[s], e = o.col, t = o.span;
-        if (o.span <= 0 && (o.span = 1), o.span > 24 && (o.span = 24), o.col < 1 && (o.col = 1), o.col + o.span - 1 > 24 && (o.col > 1 ? o.col = Math.max(1, 25 - o.span) : o.span = 24 - o.col + 1), s > 0) {
-          const a = r[s - 1], f = a.col + a.span - 1;
-          o.col <= f && (o.col = f + 1, o.col + o.span - 1 > 24 && (o.span = Math.max(1, 24 - o.col + 1)));
+      for (const o in t) {
+        const i = t[o].sort((d, $) => d.col - $.col);
+        let u = 1;
+        for (const d of i) {
+          if (d.col < u)
+            return console.warn(
+              `行 ${o} 中的元素重叠: 元素 ${d.module} 在列 ${d.col}, 但当前列已经是 ${u}`
+            ), !1;
+          if (u = d.col + d.span, u > 25)
+            return console.warn(
+              `行 ${o} 中的元素超出界限: 元素 ${d.module} 在列 ${d.col} 跨度 ${d.span}`
+            ), !1;
         }
-        (e !== o.col || t !== o.span) && console.warn(
-          `Item layout corrected: col ${e} -> ${o.col}, span ${t} -> ${o.span}`
-        );
       }
-    }
-    return X({
-      setGridItems: (r) => {
-        G(r), O(), C();
+      return !0;
+    };
+    return se(async () => {
+      await k(), !g.disableDrag && f.value && (f.value.addEventListener("dragstart", W), f.value.addEventListener("dragover", J), f.value.addEventListener("drop", B), f.value.addEventListener("dragend", _));
+    }), ie(() => {
+      f.value && (f.value.removeEventListener("dragstart", W), f.value.removeEventListener("dragover", J), f.value.removeEventListener("drop", B), f.value.removeEventListener("dragend", _), v && clearTimeout(v));
+    }), j({
+      setGridItems: (e) => {
+        s(e);
       },
+      getGridItems: () => JSON.parse(JSON.stringify(I.value)),
       refreshGrid: () => {
         (async () => {
-          await _(), O(), C();
+          await k();
         })();
       }
-    }), (r, s) => (k(), wo(R(So), { spinning: $.value }, {
-      default: go(() => [
-        ho("div", {
+    }), (e, t) => (M(), ue(G(we), { spinning: C.value }, {
+      default: de(() => [
+        ce("div", {
           ref_key: "gridContainer",
-          ref: D,
-          class: U([$.value ? R(W)("loading") : R(W)(), h.customWrapper]),
-          style: J({
-            width: typeof r.gridWidth == "number" ? `${r.gridWidth}px` : r.gridWidth,
-            gap: `${r.gapWidth}px`
+          ref: f,
+          class: q([C.value ? G(F)("loading") : G(F)(), g.customWrapper]),
+          style: z({
+            width: typeof e.gridWidth == "number" ? `${e.gridWidth}px` : e.gridWidth,
+            gap: `${e.gapWidth}px`
           })
         }, [
-          (k(!0), z(mo, null, vo(c, (o, e) => (k(), z("div", {
-            key: e,
-            class: U([
-              R(M)("item"),
-              h.disableDrag ? "" : R(H)("dragging"),
-              o.isDragging ? R(M)("dragging") : "",
-              o.isOverlay ? R(M)("overlay") : "",
-              h.disableDrag ? "" : R(H)("canDrag")
-            ]),
+          (M(!0), U(ge, null, fe(I.value, (o, i) => (M(), U("div", {
+            key: i,
+            class: q([G(L)("item"), g.disableDrag ? "" : G(Q)("canDrag")]),
             "data-span": o.span,
-            style: J([
-              Q(o),
-              { height: o.showHeight ? o.showHeight + "px" : "" }
-            ]),
-            draggable: !h.disableDrag,
-            onDragstart: (t) => Z(t, e),
-            onDragend: x
+            "data-index": i,
+            "data-row": o.row,
+            "data-col": o.col,
+            "data-height": o.height,
+            "data-module": o.module,
+            style: z([Z(o)]),
+            draggable: !g.disableDrag
           }, [
-            Eo(r.$slots, "item", {
+            pe(e.$slots, "item", {
               item: o,
-              index: e
+              index: i
             })
-          ], 46, Do))), 128))
+          ], 14, ve))), 128))
         ], 6)
       ]),
       _: 3
@@ -442,5 +256,5 @@ const Do = ["data-span", "draggable", "onDragstart"], Co = /* @__PURE__ */ lo({
   }
 });
 export {
-  Co as default
+  Ee as default
 };