@aplus-frontend/ui 6.26.1 → 6.26.3

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

@@ -1,44 +1,44 @@
-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, createBlock as ue, openBlock as M, unref as G, withCtx as de, createElementVNode as ce, normalizeStyle as q, normalizeClass 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 { defineComponent as ae, ref as T, computed as G, useTemplateRef as ne, watch as le, toRaw as se, onMounted as ie, onUnmounted as ue, createBlock as ce, openBlock as F, unref as L, withCtx as de, createElementVNode as ge, normalizeStyle as z, normalizeClass as U, createElementBlock as V, Fragment as fe, renderList as me, renderSlot as pe } from "vue";
+import { ApDraggableGridProps as we } from "./constans.mjs";
+import { Spin as ve } from "@aplus-frontend/antdv";
 import "../../config-provider/index.mjs";
 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({
+const ye = ["data-span", "data-index", "data-row", "data-col", "data-height", "data-module", "draggable"], Te = /* @__PURE__ */ ae({
   __name: "ApDraggableGrid",
-  props: me(),
+  props: we(),
   emits: ["onGridListChange"],
-  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,
+  setup(j, { expose: K, emit: Q }) {
+    const c = j, { b: R, e: A, m: X } = he("ap-draggable-grid"), C = T(!1), O = T(!1), P = G(() => A("item")), W = G(() => A("dragging")), x = G(() => A("overlay")), Y = G(() => c.customWrapper ? `.${c.customWrapper} .${P.value}:not(.${W.value})` : `.${P.value}:not(.${W.value})`), Z = Q, f = ne("gridContainer"), E = T([]);
+    le(
+      () => c.gridList,
       (e) => {
-        Array.isArray(e) && s(e);
+        Array.isArray(e) && i(e);
       },
       { deep: !0, immediate: !0 }
     );
-    function s(e) {
-      const t = [...e].sort((o, i) => o.row - i.row);
-      I.value = t.map((o) => ({
+    function i(e) {
+      const t = [...e].sort((o, u) => o.row - u.row);
+      E.value = t.map((o) => ({
         ...o
-      })), Y(
+      })), Z(
         "onGridListChange",
-        JSON.parse(JSON.stringify(I.value))
+        JSON.parse(JSON.stringify(E.value))
       );
     }
-    const Z = (e) => ({
+    const ee = (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"
+      minHeight: e.showHeight ? e.showHeight + "px" : `${c.gridItemHeight}px`,
+      height: e.showHeight ? e.showHeight + "px" : `${c.gridItemHeight}px`,
+      boxShadow: c.gridItemShadow ? c.gridItemShadow : "none"
     });
     async function k() {
-      if (s([]), typeof g.request == "function")
+      if (i([]), typeof c.request == "function")
         try {
           C.value = !0;
-          const e = await g.request();
-          Array.isArray(e) ? (console.log("ApDraggableGrid: 请求到的布局数据:", e), s(e)) : console.warn(
+          const e = await c.request();
+          Array.isArray(e) ? (console.log("ApDraggableGrid: 请求到的布局数据:", e), i(e)) : console.warn(
             "ApDraggableGrid: 请求函数必须返回一个符合 ApDraggableGridItemBase 数组的格式"
           );
         } catch (e) {
@@ -47,11 +47,11 @@ const ve = ["data-span", "data-index", "data-row", "data-col", "data-height", "d
           C.value = !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)) {
+    let $ = T(null), N = T(null), w = null, H = !1, h = null;
+    const J = (e) => {
+      if (!H && (H = !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 = {
+        e.dataTransfer.setData("text/plain", t.module), e.dataTransfer.effectAllowed = "move", $.value = {
           span: Number(t.span),
           col: Number(t.col),
           row: Number(t.row),
@@ -60,16 +60,20 @@ const ve = ["data-span", "data-index", "data-row", "data-col", "data-height", "d
           index: Number(t.index)
         }, w = e.target, w.style.opacity = "0";
       }
-    }, J = (e) => {
-      if (e.preventDefault(), v && clearTimeout(v), v = window.setTimeout(() => {
-        A = !1, v = null;
+    }, q = (e) => {
+      if (e.preventDefault(), h && clearTimeout(h), h = window.setTimeout(() => {
+        H = !1, h = null;
       }, 300), e.dataTransfer && e.target instanceof HTMLElement) {
         const t = e.target.closest(
-          X.value
+          Y.value
         );
         if (!t) return;
         const o = t.dataset;
-        S.value = {
+        document.querySelectorAll(
+          `.${c.customWrapper} div[data-row="${o.row}"]`
+        ).forEach((s) => {
+          s.classList.add(x.value);
+        }), N.value = {
           span: Number(o.span),
           col: Number(o.col),
           row: Number(o.row),
@@ -79,110 +83,112 @@ const ve = ["data-span", "data-index", "data-row", "data-col", "data-height", "d
         };
       }
     }, 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;
+      e.preventDefault(), w && (w.style.opacity = "1", w = null), oe($, N) && re($, N), document.querySelectorAll(`.${x.value}`).forEach((t) => {
+        t.classList.remove(x.value);
+      }), $.value = null, N.value = null, O.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;
+      w && (w.style.opacity = "1", w = null), $.value = null, N.value = null, O.value = !1;
     }, oe = (e, t) => {
+      const { span: o, module: u } = e.value, { span: s, module: d } = t.value;
+      return u === d && o === s ? (console.log("如果自己放在自己之上不能交换数据"), !1) : !0;
+    }, re = (e, t) => {
       if (!e.value || !t.value) return;
       const {
         span: o,
-        col: i,
-        row: u,
+        col: u,
+        row: s,
         module: d,
-        height: $,
-        index: a
+        height: S,
+        index: n
       } = e.value, {
         span: b,
-        col: h,
-        row: p,
-        module: re,
-        height: x,
-        index: c
+        col: v,
+        row: m,
+        module: te,
+        height: M,
+        index: g
       } = t.value;
-      if (u === p && i === h && o === b && $ === x && d === re) {
+      if (s === m && u === v && o === b && S === M && d === te) {
         console.log("从同一位置拖拽到同一位置,不做任何操作");
         return;
       }
-      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);
+      let r = [...se(E.value)];
+      const I = JSON.parse(JSON.stringify(r));
+      if (s === m)
+        if (n > g) {
+          console.log("", "从右向左拖拽"), console.log(n, g), console.log(n - g), n - g === 1 ? (r[g].col = o + v, r[n].col = v) : (r.forEach((p, a) => {
+            a < n && a >= g && (p.col += b);
+          }), r[n].col = v);
           const l = D(r);
           if (!y(l)) {
             console.warn("交换后的布局无效，恢复原始布局");
             return;
           }
-          s(l);
+          i(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);
+          console.log(n, g), console.log("", "从左向右拖拽"), g - n === 1 ? (r[n].col = b + 1, r[g].col = u) : (r.forEach((p, a) => {
+            a > n && a <= g && (p.col -= b);
+          }), r[n].col = v);
           const l = D(r);
           if (console.log("交换后的布局:", l), !y(l)) {
-            console.warn("交换后的布局无效，恢复原始布局"), s(E);
+            console.warn("交换后的布局无效，恢复原始布局"), i(I);
             return;
           }
-          s(l);
+          i(l);
           return;
         }
-      else if (p < u) {
+      else if (m < s) {
         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);
+          for (let a = m; a < s; a++)
+            l.push(a);
+          r.forEach((a) => {
+            l.includes(a.row) && (a.row += 1);
+          }), r[n].row = m;
+          const p = D(r);
+          if (!y(p)) {
+            console.warn("交换后的布局无效，恢复原始布局"), i(I);
             return;
           }
-          s(m);
+          i(p);
           return;
         }
-        if (o === b && $ === x) {
-          r[a].row = p, r[a].col = h, r[c].row = u, r[c].col = i;
+        if (o === b && S === M) {
+          r[n].row = m, r[n].col = v, r[g].row = s, r[g].col = u;
           const l = D(r);
           if (!y(l)) {
-            console.warn("交换后的布局无效，恢复原始布局"), s(E);
+            console.warn("交换后的布局无效，恢复原始布局"), i(I);
             return;
           }
-          s(l);
+          i(l);
           return;
         }
       } 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);
+          for (let a = s + 1; a <= m; a++)
+            l.push(a);
+          r.forEach((a) => {
+            l.includes(a.row) && (a.row -= 1);
+          }), r[n].row = m;
+          const p = D(r);
+          if (!y(p)) {
+            console.warn("交换后的布局无效，恢复原始布局"), i(I);
             return;
           }
-          s(m);
+          i(p);
           return;
         }
-        if (o === b && $ === x) {
-          r[a].row = p, r[a].col = h, r[c].row = u, r[c].col = i;
+        if (o === b && S === M) {
+          r[n].row = m, r[n].col = v, r[g].row = s, r[g].col = u;
           const l = D(r);
           if (!y(l)) {
-            console.warn("交换后的布局无效，恢复原始布局"), s(E);
+            console.warn("交换后的布局无效，恢复原始布局"), i(I);
             return;
           }
-          s(l);
+          i(l);
           return;
         }
       }
@@ -192,14 +198,14 @@ const ve = ["data-span", "data-index", "data-row", "data-col", "data-height", "d
         t[o.row] || (t[o.row] = []), t[o.row].push(o);
       });
       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)
+        const u = t[o].sort((d, S) => d.col - S.col);
+        let s = 1;
+        for (const d of u) {
+          if (d.col < s)
             return console.warn(
-              `行 ${o} 中的元素重叠: 元素 ${d.module} 在列 ${d.col}, 但当前列已经是 ${u}`
+              `行 ${o} 中的元素重叠: 元素 ${d.module} 在列 ${d.col}, 但当前列已经是 ${s}`
             ), !1;
-          if (u = d.col + d.span, u > 25)
+          if (s = d.col + d.span, s > 25)
             return console.warn(
               `行 ${o} 中的元素超出界限: 元素 ${d.module} 在列 ${d.col} 跨度 ${d.span}`
             ), !1;
@@ -207,48 +213,48 @@ const ve = ["data-span", "data-index", "data-row", "data-col", "data-height", "d
       }
       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({
+    return ie(async () => {
+      await k(), !c.disableDrag && f.value && (f.value.addEventListener("dragstart", J), f.value.addEventListener("dragover", q), f.value.addEventListener("drop", B), f.value.addEventListener("dragend", _));
+    }), ue(() => {
+      f.value && (f.value.removeEventListener("dragstart", J), f.value.removeEventListener("dragover", q), f.value.removeEventListener("drop", B), f.value.removeEventListener("dragend", _), h && clearTimeout(h));
+    }), K({
       setGridItems: (e) => {
-        s(e);
+        i(e);
       },
-      getGridItems: () => JSON.parse(JSON.stringify(I.value)),
+      getGridItems: () => JSON.parse(JSON.stringify(E.value)),
       refreshGrid: () => {
         (async () => {
           await k();
         })();
       }
-    }), (e, t) => (M(), ue(G(we), { spinning: C.value }, {
+    }), (e, t) => (F(), ce(L(ve), { spinning: C.value }, {
       default: de(() => [
-        ce("div", {
+        ge("div", {
           ref_key: "gridContainer",
           ref: f,
-          class: z([C.value ? G(F)("loading") : G(F)(), g.customWrapper]),
-          style: q({
+          class: U([C.value ? L(R)("loading") : L(R)(), c.customWrapper]),
+          style: z({
             width: typeof e.gridWidth == "number" ? `${e.gridWidth}px` : e.gridWidth,
             gap: `${e.gapWidth}px`
           })
         }, [
-          (M(!0), U(ge, null, fe(I.value, (o, i) => (M(), U("div", {
-            key: i,
-            class: z([G(L)("item"), g.disableDrag ? "" : G(Q)("canDrag")]),
+          (F(!0), V(fe, null, me(E.value, (o, u) => (F(), V("div", {
+            key: u,
+            class: U([L(A)("item"), c.disableDrag ? "" : L(X)("canDrag")]),
             "data-span": o.span,
-            "data-index": i,
+            "data-index": u,
             "data-row": o.row,
             "data-col": o.col,
             "data-height": o.height,
             "data-module": o.module,
-            style: q([Z(o)]),
-            draggable: !g.disableDrag
+            style: z([ee(o)]),
+            draggable: !c.disableDrag
           }, [
             pe(e.$slots, "item", {
               item: o,
-              index: i
+              index: u
             })
-          ], 14, ve))), 128))
+          ], 14, ye))), 128))
         ], 6)
       ]),
       _: 3
@@ -256,5 +262,5 @@ const ve = ["data-span", "data-index", "data-row", "data-col", "data-height", "d
   }
 });
 export {
-  Ee as default
+  Te as default
 };