@aplus-frontend/ui 7.0.0-beta.0 → 7.0.0-beta.1

package/es/src/business/ap-batch-action/style/index.mjs

@@ -0,0 +1,51 @@
+import { genComponentStyleHook as o } from "../../../utils/cssinjs/index.mjs";
+const n = (t) => {
+  const { componentCls: e } = t;
+  return {
+    [e]: {
+      width: "100%",
+      [`${e}-header`]: {
+        width: "100%",
+        paddingBottom: "8px",
+        marginBottom: "8px",
+        borderBottom: "1px solid var(--ap-color-bg)"
+      },
+      [`${e}-body`]: {
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
+        ".selected-desc": {
+          display: "flex",
+          alignItems: "center",
+          marginRight: "16px",
+          flexShrink: "0",
+          "&-conut": {
+            display: "flex",
+            alignItems: "center",
+            fontSize: t.fontSize,
+            color: "var(--ap-text-color-3)",
+            span: {
+              color: "var(--ap-color-primary)",
+              fontWeight: "bold",
+              minWidth: "10px",
+              textAlign: "center",
+              display: "inline-block"
+            }
+          },
+          "&-clean": {
+            marginLeft: "8px",
+            "& > *": {
+              padding: 0
+            }
+          }
+        }
+      }
+    }
+  };
+}, l = o("ApBatchAction", (t) => [
+  n(t)
+]);
+export {
+  l as default,
+  n as genProCardStyle
+};

package/es/src/business/ap-card/ApCard.vue2.mjs

@@ -1,51 +1,52 @@
-import { defineComponent as v, useSlots as _, computed as s, createElementBlock as r, openBlock as i, normalizeStyle as S, normalizeClass as g, unref as n, createBlock as l, createCommentVNode as a, renderSlot as p, mergeProps as C, createSlots as h, withCtx as c, isVNode as d, resolveDynamicComponent as m, toDisplayString as u } from "vue";
+import { defineComponent as S, useSlots as _, computed as s, createElementBlock as r, openBlock as i, normalizeStyle as g, normalizeClass as h, unref as l, createBlock as p, createCommentVNode as a, renderSlot as f, mergeProps as C, createSlots as $, withCtx as c, isVNode as d, resolveDynamicComponent as m, toDisplayString as u } from "vue";
 import "../ap-title/ApTitle.vue.mjs";
-import { omit as $ } from "lodash-unified";
+import { omit as B } from "lodash-unified";
 import "../../config-provider/index.mjs";
-import { useNamespace as B } from "../../config-provider/hooks/use-namespace.mjs";
-import N from "../ap-title/ApTitle.vue2.mjs";
-const b = { key: 2 }, z = { key: 2 }, T = /* @__PURE__ */ v({
+import N from "./style/index.mjs";
+import { useNamespace as b } from "../../config-provider/hooks/use-namespace.mjs";
+import z from "../ap-title/ApTitle.vue2.mjs";
+const D = { key: 2 }, V = { key: 2 }, F = /* @__PURE__ */ S({
   __name: "ApCard",
   props: {
     titleProps: {},
     padding: {}
   },
   setup(x) {
-    const e = x, t = _(), { b: f } = B("ap-card"), P = s(
-      () => $(e?.titleProps || {}, ["prefix", "suffix"])
-    ), y = s(() => Object.keys(e?.titleProps || {})?.length), k = s(() => e.padding ?? "var(--ap-card-padding, 12px 16px)");
-    return (o, D) => (i(), r("div", {
-      class: g([n(f)()]),
-      style: S({
-        padding: k.value
+    const e = x, t = _(), { b: n } = b("ap-card"), P = N("ap-card"), y = s(
+      () => B(e?.titleProps || {}, ["prefix", "suffix"])
+    ), k = s(() => Object.keys(e?.titleProps || {})?.length), v = s(() => e.padding ?? "var(--ap-card-padding, 12px 16px)");
+    return (o, j) => (i(), r("div", {
+      class: h([l(n)(), l(P)]),
+      style: g({
+        padding: v.value
       })
     }, [
-      y.value || t?.titlePrefix || t?.titleSuffix ? (i(), l(N, C({
+      k.value || t?.titlePrefix || t?.titleSuffix ? (i(), p(z, C({
         key: 0,
-        class: [`${n(f)()}-title`]
+        class: [`${l(n)()}-title`]
       }, {
-        ...P.value
-      }), h({ _: 2 }, [
+        ...y.value
+      }), $({ _: 2 }, [
         t?.titleSuffix || e?.titleProps?.suffix ? {
           name: "suffix",
           fn: c(() => [
-            t?.titleSuffix ? p(o.$slots, "titleSuffix", { key: 0 }) : d(e?.titleProps?.suffix) ? (i(), l(m(e?.titleProps?.suffix), { key: 1 })) : (i(), r("div", b, u(e?.titleProps?.suffix), 1))
+            t?.titleSuffix ? f(o.$slots, "titleSuffix", { key: 0 }) : d(e?.titleProps?.suffix) ? (i(), p(m(e?.titleProps?.suffix), { key: 1 })) : (i(), r("div", D, u(e?.titleProps?.suffix), 1))
           ]),
           key: "0"
         } : void 0,
         t?.titlePrefix || e?.titleProps?.prefix ? {
           name: "prefix",
           fn: c(() => [
-            t?.titlePrefix ? p(o.$slots, "titlePrefix", { key: 0 }) : a("", !0),
-            d(e?.titleProps?.prefix) ? (i(), l(m(e?.titleProps?.prefix), { key: 1 })) : (i(), r("div", z, u(e?.titleProps?.prefix), 1))
+            t?.titlePrefix ? f(o.$slots, "titlePrefix", { key: 0 }) : a("", !0),
+            d(e?.titleProps?.prefix) ? (i(), p(m(e?.titleProps?.prefix), { key: 1 })) : (i(), r("div", V, u(e?.titleProps?.prefix), 1))
           ]),
           key: "1"
         } : void 0
       ]), 1040, ["class"])) : a("", !0),
-      p(o.$slots, "default")
+      f(o.$slots, "default")
     ], 6));
   }
 });
 export {
-  T as default
+  F as default
 };

package/es/src/business/ap-card/style/index.d.ts

@@ -0,0 +1,5 @@
+import { BaseToken, GenStyleFunc } from '../../../design-token/interface';
+import { Ref } from 'vue';
+export declare const genProCardStyle: GenStyleFunc<BaseToken>;
+declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
+export default _default;

package/es/src/business/ap-card/style/index.mjs

@@ -0,0 +1,22 @@
+import { genComponentStyleHook as n } from "../../../utils/cssinjs/index.mjs";
+const e = (o) => {
+  const { componentCls: t } = o;
+  return {
+    [t]: {
+      width: "100%",
+      background: "#fff",
+      [`& + ${t}`]: {
+        marginTop: "10px"
+      },
+      [`${t}-title`]: {
+        marginBottom: "12px"
+      }
+    }
+  };
+}, p = n("ApCard", (o) => [
+  e(o)
+]);
+export {
+  p as default,
+  e as genProCardStyle
+};

package/es/src/business/ap-copy/ApCopy.mjs

@@ -1,44 +1,45 @@
-import { defineComponent as b, Text as f, isVNode as y, computed as m, createVNode as r, Fragment as k } from "vue";
+import { defineComponent as h, Text as f, isVNode as y, computed as m, createVNode as r, Fragment as k } from "vue";
 import { ApCopyProps as T } from "./constans.mjs";
-import { IconApAdLineCopy as h } from "@aplus-frontend/icon";
+import { IconApAdLineCopy as P } from "@aplus-frontend/icon";
 import "../../config-provider/index.mjs";
-import { message as d } from "@aplus-frontend/antdv";
-import { isNull as P, isUndefined as j, isString as A, isBoolean as N } from "lodash-unified";
-import { useNamespace as V } from "../../config-provider/hooks/use-namespace.mjs";
-import { useLocale as w } from "../../config-provider/hooks/use-locale.mjs";
-const D = /* @__PURE__ */ b({
+import { message as p } from "@aplus-frontend/antdv";
+import { isNull as j, isUndefined as A, isString as N, isBoolean as I } from "lodash-unified";
+import V from "./style/index.mjs";
+import { useNamespace as w } from "../../config-provider/hooks/use-namespace.mjs";
+import { useLocale as z } from "../../config-provider/hooks/use-locale.mjs";
+const G = /* @__PURE__ */ h({
   name: "CopyBtn",
   props: T(),
   setup(e, {
-    slots: p
+    slots: d
   }) {
     const {
       b: x,
       e: l,
       m: a
-    } = V("ap-copy"), {
+    } = w("ap-copy"), g = V("ap-copy"), {
       t: s
-    } = w(), g = (t, n, C) => {
+    } = z(), v = (t, n, b) => {
       t.stopPropagation(), t.preventDefault(), t.stopImmediatePropagation(), navigator.clipboard.writeText(e.text || c() || "").then(() => {
-        d.success(n || s("ap.apCopy.copySuccess"));
+        p.success(n || s("ap.apCopy.copySuccess"));
       }).catch(() => {
-        d.error(C || s("ap.apCopy.copyError"));
+        p.error(b || s("ap.apCopy.copyError"));
       });
-    }, v = (t) => {
+    }, S = (t) => {
       if (t.length === 1) {
         const n = t[0];
         if (n.type === f || n.type.toString() === "Symbol(Text)" || y(n) && typeof n.children == "string")
           return !0;
       }
       return !1;
-    }, S = (t) => {
+    }, C = (t) => {
       if (!t.length) return "";
       const n = t[0];
       return n.type === f || n.type.toString() === "Symbol(Text)" ? String(n.children) : y(n) && typeof n.children == "string" ? n.children : "";
     }, c = () => {
-      const t = p.default?.();
-      return t && v(t) ? S(t) : null;
-    }, u = (t) => !(P(t) || j(t) || typeof t == "string" && t === ""), o = m(() => {
+      const t = d.default?.();
+      return t && S(t) ? C(t) : null;
+    }, u = (t) => !(j(t) || A(t) || typeof t == "string" && t === ""), o = m(() => {
       if (typeof e.textStyle == "string")
         switch (e.textStyle) {
           case "link":
@@ -57,21 +58,21 @@ const D = /* @__PURE__ */ b({
       return {};
     }), i = m(() => c() || e.text || "");
     return () => r(k, null, [r("div", {
-      class: [x()]
+      class: [x(), g.value]
     }, [r("div", {
       class: [l("text"), typeof o.value == "string" && a(o.value)],
       style: typeof o.value != "string" && o.value,
       title: typeof o.value == "string" ? i.value : "",
       onClick: e.onClick ? () => e.onClick() : void 0
-    }, [u(i.value) ? e.link && A(e.link) ? r("a", {
+    }, [u(i.value) ? e.link && N(e.link) ? r("a", {
       href: e.link,
       target: "_blank"
-    }, [i.value]) : N(e.link) ? r("span", {
+    }, [i.value]) : I(e.link) ? r("span", {
       class: a("text-link")
     }, [i.value]) : i.value : "--"]), u(i.value) && !e.disableCopy ? r("div", {
       class: [l("copy-btn"), "copy-btn"],
-      onClick: e.disableCopy ? void 0 : (t) => g(t, e.tipMessageSuccess, e.tipMessageError)
-    }, [r(h, {
+      onClick: e.disableCopy ? void 0 : (t) => v(t, e.tipMessageSuccess, e.tipMessageError)
+    }, [r(P, {
       size: e.size
     }, null)]) : r("div", {
       class: [l("copy-btn"), "copy-btn"]
@@ -79,5 +80,5 @@ const D = /* @__PURE__ */ b({
   }
 });
 export {
-  D as default
+  G as default
 };

package/es/src/business/ap-copy/style/index.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'vue';
+declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
+export default _default;

package/es/src/business/ap-copy/style/index.mjs

@@ -0,0 +1,64 @@
+import { genComponentStyleHook as e } from "../../../utils/cssinjs/index.mjs";
+const r = (o) => {
+  const { componentCls: t } = o;
+  return {
+    [t]: {
+      display: "flex",
+      alignItems: "center",
+      width: "100%",
+      ".copy-btn": {
+        opacity: 0,
+        transition: "opacity 0.2s ease"
+      },
+      "&:hover": {
+        ".copy-btn": {
+          opacity: 1
+        }
+      },
+      [`${t}__text`]: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        height: "18px",
+        lineHeight: "18px"
+      },
+      [`${t}--text-major`]: {
+        color: o.textColor2
+      },
+      [`${t}--text-minor`]: {
+        color: o.textColor3
+      },
+      [`${t}--text-link`]: {
+        color: o.colorLink,
+        cursor: "pointer",
+        "&:hover": {
+          color: o.colorLinkHover
+        }
+      },
+      [`${t}__copy-btn`]: {
+        flexShrink: 0,
+        width: "16px",
+        marginInlineStart: "4px",
+        display: "flex",
+        alignItems: "center",
+        ".aplus-frontend-icon": {
+          cursor: "pointer",
+          color: "#ABB7CC",
+          height: "14px",
+          lineHeight: "14px"
+        },
+        "&:hover": {
+          ".aplus-frontend-icon": {
+            cursor: "pointer",
+            color: o.colorLink
+          }
+        }
+      }
+    }
+  };
+}, i = e("ApCopy", (o) => [
+  r(o)
+]);
+export {
+  i as default
+};

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

@@ -1,17 +1,18 @@
-import { defineComponent as le, ref as A, computed as x, useTemplateRef as se, watch as ie, toRaw as ue, onMounted as de, onUnmounted as ce, createBlock as fe, openBlock as R, unref as L, withCtx as ge, createElementVNode as me, normalizeStyle as U, normalizeClass as V, createElementBlock as j, Fragment as pe, renderList as ve, renderSlot as he } from "vue";
-import { ApDraggableGridProps as we } from "./constans.mjs";
-import { Spin as ye } from "@aplus-frontend/antdv";
+import { defineComponent as se, ref as L, computed as x, useTemplateRef as ie, watch as ue, toRaw as de, onMounted as ce, onUnmounted as fe, createBlock as ge, openBlock as R, unref as D, withCtx as me, createElementVNode as pe, normalizeStyle as U, normalizeClass as V, createElementBlock as j, Fragment as ve, renderList as he, renderSlot as we } from "vue";
+import { ApDraggableGridProps as ye } from "./constans.mjs";
+import { Spin as be } from "@aplus-frontend/antdv";
 import "../../config-provider/index.mjs";
-import { sortItemsByRowAndCol as D } from "./utils/sortItemsByRowAndCol.mjs";
+import { sortItemsByRowAndCol as E } from "./utils/sortItemsByRowAndCol.mjs";
 import { warning as K, note as w } from "../../utils/warning.mjs";
-import { useNamespace as be } from "../../config-provider/hooks/use-namespace.mjs";
-const $e = ["data-span", "data-index", "data-row", "data-col", "data-height", "data-module", "draggable"], Ce = /* @__PURE__ */ le({
+import $e from "./style/index.mjs";
+import { useNamespace as De } from "../../config-provider/hooks/use-namespace.mjs";
+const Ee = ["data-span", "data-index", "data-row", "data-col", "data-height", "data-module", "draggable"], He = /* @__PURE__ */ se({
   __name: "ApDraggableGrid",
-  props: we(),
+  props: ye(),
   emits: ["onGridListChange"],
   setup(Q, { expose: X, emit: Y }) {
-    const d = Q, { b: O, e: C, m: Z } = be("ap-draggable-grid"), G = A(!1), P = A(!1), W = x(() => C("item")), k = x(() => C("dragging")), H = x(() => C("overlay")), ee = x(() => d.customWrapper ? `.${d.customWrapper} .${W.value}:not(.${k.value})` : `.${W.value}:not(.${k.value})`), re = Y, f = se("gridContainer"), E = A([]);
-    ie(
+    const d = Q, { b: O, e: C, m: Z } = De("ap-draggable-grid"), ee = $e("ap-draggable-grid"), G = L(!1), P = L(!1), W = x(() => C("item")), k = x(() => C("dragging")), H = x(() => C("overlay")), re = x(() => d.customWrapper ? `.${d.customWrapper} .${W.value}:not(.${k.value})` : `.${W.value}:not(.${k.value})`), te = Y, f = ie("gridContainer"), S = L([]);
+    ue(
       () => d.gridList,
       (e) => {
         Array.isArray(e) && s(e);
@@ -20,14 +21,14 @@ const $e = ["data-span", "data-index", "data-row", "data-col", "data-height", "d
     );
     function s(e) {
       const a = [...e].sort((r, i) => r.row - i.row);
-      E.value = a.map((r) => ({
+      S.value = a.map((r) => ({
         ...r
-      })), re(
+      })), te(
         "onGridListChange",
-        JSON.parse(JSON.stringify(E.value))
+        JSON.parse(JSON.stringify(S.value))
       );
     }
-    const te = (e) => ({
+    const ae = (e) => ({
       gridColumn: `${e.col} / span ${e.span}`,
       gridRow: e.row,
       minHeight: e.showHeight ? e.showHeight + "px" : `${d.gridItemHeight}px`,
@@ -49,11 +50,11 @@ const $e = ["data-span", "data-index", "data-row", "data-col", "data-height", "d
           G.value = !1;
         }
     }
-    let N = A(null), S = A(null), v = null, M = !1, y = null;
+    let I = L(null), N = L(null), v = null, M = !1, y = null;
     const q = (e) => {
       if (!M && (M = !0, e.dataTransfer && e.target instanceof HTMLElement)) {
         const a = e.target.dataset;
-        e.dataTransfer.setData("text/plain", a.module), e.dataTransfer.effectAllowed = "move", N.value = {
+        e.dataTransfer.setData("text/plain", a.module), e.dataTransfer.effectAllowed = "move", I.value = {
           span: Number(a.span),
           col: Number(a.col),
           row: Number(a.row),
@@ -67,7 +68,7 @@ const $e = ["data-span", "data-index", "data-row", "data-col", "data-height", "d
         M = !1, y = null;
       }, 300), e.dataTransfer && e.target instanceof HTMLElement) {
         const a = e.target.closest(
-          ee.value
+          re.value
         );
         if (!a) return;
         const r = a.dataset;
@@ -75,7 +76,7 @@ const $e = ["data-span", "data-index", "data-row", "data-col", "data-height", "d
           `.${d.customWrapper} div[data-row="${r.row}"]`
         ).forEach((l) => {
           l.classList.add(H.value);
-        }), S.value = {
+        }), N.value = {
           span: Number(r.span),
           col: Number(r.col),
           row: Number(r.row),
@@ -85,41 +86,41 @@ const $e = ["data-span", "data-index", "data-row", "data-col", "data-height", "d
         };
       }
     }, _ = (e) => {
-      e.preventDefault(), v && (v.style.opacity = "1", v = null), ae(N, S) && oe(N, S), document.querySelectorAll(`.${H.value}`).forEach((a) => {
+      e.preventDefault(), v && (v.style.opacity = "1", v = null), oe(I, N) && ne(I, N), document.querySelectorAll(`.${H.value}`).forEach((a) => {
         a.classList.remove(H.value);
-      }), N.value = null, S.value = null, P.value = !1;
+      }), I.value = null, N.value = null, P.value = !1;
     }, z = () => {
-      v && (v.style.opacity = "1", v = null), N.value = null, S.value = null, P.value = !1;
-    }, ae = (e, a) => {
+      v && (v.style.opacity = "1", v = null), I.value = null, N.value = null, P.value = !1;
+    }, oe = (e, a) => {
       const { span: r, module: i } = e.value, { span: l, module: c } = a.value;
       return !(i === c && r === l);
-    }, oe = (e, a) => {
+    }, ne = (e, a) => {
       if (!e.value || !a.value) return;
       const {
         span: r,
         col: i,
         row: l,
         module: c,
-        height: I,
+        height: T,
         index: u
       } = e.value, {
         span: $,
         col: h,
         row: m,
-        module: ne,
+        module: le,
         height: F,
         index: g
       } = a.value;
-      if (l === m && i === h && r === $ && I === F && c === ne)
+      if (l === m && i === h && r === $ && T === F && c === le)
         return;
-      let t = [...ue(E.value)];
-      const T = JSON.parse(JSON.stringify(t));
+      let t = [...de(S.value)];
+      const A = JSON.parse(JSON.stringify(t));
       if (l === m)
         if (u > g) {
           u - g === 1 ? (t[g].col = r + h, t[u].col = h) : (t.forEach((p, o) => {
             o < u && o >= g && (p.col += $);
           }), t[u].col = h);
-          const n = D(t);
+          const n = E(t);
           if (!b(n)) {
             w(!1, "交换后的布局无效，恢复原始布局");
             return;
@@ -130,9 +131,9 @@ const $e = ["data-span", "data-index", "data-row", "data-col", "data-height", "d
           g - u === 1 ? (t[u].col = $ + 1, t[g].col = i) : (t.forEach((p, o) => {
             o > u && o <= g && (p.col -= $);
           }), t[u].col = h);
-          const n = D(t);
+          const n = E(t);
           if (!b(n)) {
-            s(T);
+            s(A);
             return;
           }
           s(n);
@@ -146,19 +147,19 @@ const $e = ["data-span", "data-index", "data-row", "data-col", "data-height", "d
           t.forEach((o) => {
             n.includes(o.row) && (o.row += 1);
           }), t[u].row = m;
-          const p = D(t);
+          const p = E(t);
           if (!b(p)) {
-            w(!1, "交换后的布局无效，恢复原始布局"), s(T);
+            w(!1, "交换后的布局无效，恢复原始布局"), s(A);
             return;
           }
           s(p);
           return;
         }
-        if (r === $ && I === F) {
+        if (r === $ && T === F) {
           t[u].row = m, t[u].col = h, t[g].row = l, t[g].col = i;
-          const n = D(t);
+          const n = E(t);
           if (!b(n)) {
-            w(!1, "交换后的布局无效，恢复原始布局"), s(T);
+            w(!1, "交换后的布局无效，恢复原始布局"), s(A);
             return;
           }
           s(n);
@@ -172,19 +173,19 @@ const $e = ["data-span", "data-index", "data-row", "data-col", "data-height", "d
           t.forEach((o) => {
             n.includes(o.row) && (o.row -= 1);
           }), t[u].row = m;
-          const p = D(t);
+          const p = E(t);
           if (!b(p)) {
-            w(!1, "交换后的布局无效，恢复原始布局"), s(T);
+            w(!1, "交换后的布局无效，恢复原始布局"), s(A);
             return;
           }
           s(p);
           return;
         }
-        if (r === $ && I === F) {
+        if (r === $ && T === F) {
           t[u].row = m, t[u].col = h, t[g].row = l, t[g].col = i;
-          const n = D(t);
+          const n = E(t);
           if (!b(n)) {
-            w(!1, "交换后的布局无效，恢复原始布局"), s(T);
+            w(!1, "交换后的布局无效，恢复原始布局"), s(A);
             return;
           }
           s(n);
@@ -197,7 +198,7 @@ const $e = ["data-span", "data-index", "data-row", "data-col", "data-height", "d
         a[r.row] || (a[r.row] = []), a[r.row].push(r);
       });
       for (const r in a) {
-        const i = a[r].sort((c, I) => c.col - I.col);
+        const i = a[r].sort((c, T) => c.col - T.col);
         let l = 1;
         for (const c of i) {
           if (c.col < l)
@@ -214,48 +215,48 @@ const $e = ["data-span", "data-index", "data-row", "data-col", "data-height", "d
       }
       return !0;
     };
-    return de(async () => {
+    return ce(async () => {
       await J(), !d.disableDrag && f.value && (f.value.addEventListener("dragstart", q), f.value.addEventListener("dragover", B), f.value.addEventListener("drop", _), f.value.addEventListener("dragend", z));
-    }), ce(() => {
+    }), fe(() => {
       f.value && (f.value.removeEventListener("dragstart", q), f.value.removeEventListener("dragover", B), f.value.removeEventListener("drop", _), f.value.removeEventListener("dragend", z), y && clearTimeout(y));
     }), X({
       setGridItems: (e) => {
         s(e);
       },
-      getGridItems: () => JSON.parse(JSON.stringify(E.value)),
+      getGridItems: () => JSON.parse(JSON.stringify(S.value)),
       refreshGrid: () => {
         (async () => {
           await J();
         })();
       }
-    }), (e, a) => (R(), fe(L(ye), { spinning: G.value }, {
-      default: ge(() => [
-        me("div", {
+    }), (e, a) => (R(), ge(D(be), { spinning: G.value }, {
+      default: me(() => [
+        pe("div", {
           ref_key: "gridContainer",
           ref: f,
-          class: V([G.value ? L(O)("loading") : L(O)(), d.customWrapper]),
+          class: V([G.value ? D(O)("loading") : D(O)(), d.customWrapper, D(ee)]),
           style: U({
             width: typeof e.gridWidth == "number" ? `${e.gridWidth}px` : e.gridWidth,
             gap: `${e.gapWidth}px`
           })
         }, [
-          (R(!0), j(pe, null, ve(E.value, (r, i) => (R(), j("div", {
+          (R(!0), j(ve, null, he(S.value, (r, i) => (R(), j("div", {
             key: i,
-            class: V([L(C)("item"), d.disableDrag ? "" : L(Z)("canDrag")]),
+            class: V([D(C)("item"), d.disableDrag ? "" : D(Z)("canDrag")]),
             "data-span": r.span,
             "data-index": i,
             "data-row": r.row,
             "data-col": r.col,
             "data-height": r.height,
             "data-module": r.module,
-            style: U([te(r)]),
+            style: U([ae(r)]),
             draggable: !d.disableDrag
           }, [
-            he(e.$slots, "item", {
+            we(e.$slots, "item", {
               item: r,
               index: i
             })
-          ], 14, $e))), 128))
+          ], 14, Ee))), 128))
         ], 6)
       ]),
       _: 3
@@ -263,5 +264,5 @@ const $e = ["data-span", "data-index", "data-row", "data-col", "data-height", "d
   }
 });
 export {
-  Ce as default
+  He as default
 };

package/es/src/business/ap-draggable-grid/style/index.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'vue';
+declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
+export default _default;

package/es/src/business/ap-draggable-grid/style/index.mjs

@@ -0,0 +1,53 @@
+import { genComponentStyleHook as o } from "../../../utils/cssinjs/index.mjs";
+const i = (r) => {
+  const { componentCls: e } = r;
+  return {
+    [e]: {
+      display: "grid",
+      gridTemplateColumns: "repeat(24, 1fr)",
+      width: "100%",
+      boxSizing: "border-box",
+      "&-loading": {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        minWidth: "200px",
+        padding: "20px"
+      },
+      [`${e}__item`]: {
+        background: "#fff",
+        borderRadius: r.borderRadius,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "all 0.5s ease",
+        overflow: "hidden",
+        boxSizing: "border-box",
+        border: "1px solid #fff"
+      },
+      [`${e}--canDrag`]: {
+        cursor: "pointer",
+        "&:hover": {
+          border: "1px solid #66a9ff"
+        }
+      },
+      [`${e}--dragging`]: {
+        cursor: "move",
+        zIndex: 100,
+        opacity: 1
+      },
+      [`${e}__dragging`]: {
+        opacity: 0,
+        zIndex: 999
+      },
+      [`${e}__overlay`]: {
+        border: "1px solid #66a9ff"
+      }
+    }
+  };
+}, t = o("ApDraggableGrid", (r) => [
+  i(r)
+]);
+export {
+  t as default
+};