@aplus-frontend/ui 6.15.0 → 6.17.0

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

@@ -0,0 +1,194 @@
+import { defineComponent as W, ref as O, computed as C, useTemplateRef as z, reactive as H, watch as M, onMounted as U, onUnmounted as V, createBlock as J, openBlock as w, unref as u, withCtx as X, createElementVNode as Y, normalizeStyle as A, normalizeClass as G, createElementBlock as $, Fragment as j, renderList as K, renderSlot as Q, createTextVNode as Z, toDisplayString as L } from "vue";
+import { ApDraggableGridProps as ee } from "./constans.mjs";
+import { Spin as re } from "@aplus-frontend/antdv";
+import "../../config-provider/index.mjs";
+import { useNamespace as ae } from "../../config-provider/hooks/use-namespace.mjs";
+const te = ["data-span", "draggable", "onDragstart"], ce = /* @__PURE__ */ W({
+  __name: "ApDraggableGrid",
+  props: ee(),
+  emits: ["onGridListChange"],
+  setup(k, { expose: T, emit: N }) {
+    const l = k, { b: D, e: f, m: R } = ae("ap-draggable-grid"), p = O(!1), v = C(() => f("item")), E = C(() => f("dragging")), B = N, d = z("gridContainer"), i = O(null), o = H([]);
+    M(
+      () => l.gridList,
+      (e) => {
+        Array.isArray(e) && h(e);
+      },
+      { deep: !0, immediate: !0 }
+    );
+    function h(e) {
+      o.splice(0, o.length), e.forEach((r) => {
+        o.push({
+          ...r,
+          isDragging: !1,
+          isOverlay: !1
+        });
+      });
+    }
+    const F = (e) => ({
+      gridColumn: `${e.col} / span ${e.span}`,
+      gridRow: e.row,
+      minHeight: `${l.gridItemHeight}px`,
+      boxShadow: l.gridItemShadow ? l.gridItemShadow : "none"
+    }), q = (e) => {
+      if (e.isOverlay) {
+        const r = {};
+        return l.dragOverlayColor && (r.backgroundColor = l.dragOverlayColor), l.dragOverlayBorderColor && (r.border = `2px dashed ${l.dragOverlayBorderColor}`, r.boxSizing = "border-box"), r;
+      }
+      return {};
+    }, x = (e, r) => {
+      i.value = r, o[r].isDragging = !0, e.dataTransfer && (e.dataTransfer.setData("text/plain", String(r)), e.dataTransfer.effectAllowed = "move");
+    }, _ = () => {
+      i.value !== null && (o[i.value].isDragging = !1, m(), i.value = null), o.forEach((e) => e.isOverlay = !1);
+    };
+    function m() {
+      const e = o.map(
+        (r) => ({
+          span: r.span,
+          row: r.row,
+          col: r.col,
+          height: r.height ? r.height : ""
+        })
+      );
+      B("onGridListChange", e);
+    }
+    async function b() {
+      if (h([]), typeof l.request == "function")
+        try {
+          p.value = !0;
+          const e = await l.request();
+          Array.isArray(e) ? h(e) : console.warn(
+            "ApDraggableGrid: 请求函数必须返回一个符合 ApDraggableGridItemBase 数组的格式"
+          );
+        } catch (e) {
+          console.error("ApDraggableGrid: 请求错误:", e);
+        } finally {
+          p.value = !1;
+        }
+    }
+    U(async () => {
+      if (await b(), y(), l.disableDrag || !d.value) return;
+      const e = (a) => {
+        if (a.preventDefault(), i.value === null || !a.target) return;
+        const t = document.elementFromPoint(a.clientX, a.clientY);
+        if (!t) return;
+        const n = t.closest(
+          `.${v.value}:not(.${E.value})`
+        );
+        if (!n) return;
+        const s = Array.from(
+          document.querySelectorAll(`.${v.value}`)
+        ).indexOf(n);
+        s >= 0 && s !== i.value && (o.forEach((c) => c.isOverlay = !1), o[s].isOverlay = !0, S(i.value, s) ? a.dataTransfer.dropEffect = "move" : a.dataTransfer.dropEffect = "none");
+      }, r = (a) => {
+        if (a.preventDefault(), i.value === null) return;
+        const t = document.elementFromPoint(a.clientX, a.clientY);
+        if (!t) return;
+        const n = t.closest(
+          `.${v.value}:not(.${E.value})`
+        );
+        if (!n) return;
+        const s = Array.from(
+          document.querySelectorAll(`.${v.value}`)
+        ).indexOf(n);
+        s >= 0 && S(i.value, s) && (P(i.value, s), y(), m()), o.forEach((c) => {
+          c.isDragging = !1, c.isOverlay = !1;
+        }), i.value = null;
+      };
+      d.value.addEventListener("dragover", e), d.value.addEventListener("drop", r), V(() => {
+        d.value && (d.value.removeEventListener("dragover", e), d.value.removeEventListener("drop", r));
+      });
+    });
+    function S(e, r) {
+      const a = JSON.parse(
+        JSON.stringify(o)
+      ), t = a[e], n = a[r], g = t.height === n.height, s = I(
+        t.span,
+        n.row,
+        e,
+        r
+      ), c = I(
+        n.span,
+        t.row,
+        r,
+        e
+      );
+      return s && c && g;
+    }
+    function I(e, r, a, t) {
+      let n = 0, g = 1;
+      return o.forEach((s, c) => {
+        s.row === r && c !== t && c !== a && (n += s.span, s.col <= g && (g = s.col + s.span));
+      }), n + e <= 24;
+    }
+    function P(e, r) {
+      const a = o[e], t = o[r], n = a.row, g = a.col;
+      a.row = t.row, a.col = t.col, t.row = n, t.col = g;
+    }
+    function y() {
+      const e = {};
+      o.forEach((r) => {
+        e[r.row] || (e[r.row] = []), e[r.row].push(r);
+      }), Object.keys(e).forEach((r) => {
+        const a = parseInt(r);
+        e[a].sort((n, g) => n.col - g.col);
+        let t = 1;
+        e[a].forEach((n) => {
+          n.col = t, t += n.span;
+        });
+      });
+    }
+    return T({
+      setGridItems: (e) => {
+        h(e), y(), m();
+      },
+      refreshGrid: () => {
+        (async () => {
+          await b(), y(), m();
+        })();
+      }
+    }), (e, r) => (w(), J(u(re), { spinning: p.value }, {
+      default: X(() => [
+        Y("div", {
+          ref_key: "gridContainer",
+          ref: d,
+          class: G([p.value ? u(D)("loading") : u(D)()]),
+          style: A({
+            width: typeof e.gridWidth == "number" ? `${e.gridWidth}px` : e.gridWidth,
+            gap: `${e.gapWidth}px`
+          })
+        }, [
+          (w(!0), $(j, null, K(o, (a, t) => (w(), $("div", {
+            key: t,
+            class: G([
+              u(f)("item"),
+              l.disableDrag ? "" : u(R)("dragging"),
+              a.isDragging ? u(f)("dragging") : "",
+              a.isOverlay ? u(f)("overlay") : ""
+            ]),
+            "data-span": a.span,
+            style: A([
+              F(a),
+              q(a),
+              { height: a.height ? a.height + "px" : "" }
+            ]),
+            draggable: !l.disableDrag,
+            onDragstart: (n) => x(n, t),
+            onDragend: _
+          }, [
+            Q(e.$slots, "item", {
+              item: a,
+              index: t
+            }, () => [
+              Z(L(Math.round(a.span / 24 * 100)) + "% (" + L(a.span) + "/24) ", 1)
+            ])
+          ], 46, te))), 128))
+        ], 6)
+      ]),
+      _: 3
+    }, 8, ["spinning"]));
+  }
+});
+export {
+  ce as default
+};

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

@@ -0,0 +1,40 @@
+import { PropType } from 'vue';
+import { ApDraggableGridItemBase } from './interface';
+export declare const ApDraggableGridProps: () => {
+    gridList: {
+        type: PropType<Array<ApDraggableGridItemBase>>;
+        default: () => never[];
+    };
+    request: {
+        type: PropType<() => Promise<ApDraggableGridItemBase[]>>;
+        default: null;
+    };
+    gridWidth: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    gridItemHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    gridItemShadow: {
+        type: StringConstructor;
+        default: string;
+    };
+    gapWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    dragOverlayColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    dragOverlayBorderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    disableDrag: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};

package/es/src/business/ap-draggable-grid/constans.mjs

@@ -0,0 +1,41 @@
+const e = () => ({
+  gridList: {
+    type: Array,
+    default: () => []
+  },
+  request: {
+    type: Function,
+    default: null
+  },
+  gridWidth: {
+    type: [String, Number],
+    default: "100%"
+  },
+  gridItemHeight: {
+    type: Number,
+    default: 300
+  },
+  gridItemShadow: {
+    type: String,
+    default: "0px 4px 6px 0px rgba(73, 107, 158, 0.1)"
+  },
+  gapWidth: {
+    type: Number,
+    default: 12
+  },
+  dragOverlayColor: {
+    type: String,
+    default: "#66a9ff"
+  },
+  dragOverlayBorderColor: {
+    type: String,
+    default: "#4d97f7"
+  },
+  disableDrag: {
+    type: Boolean,
+    default: !1
+  }
+});
+export {
+  e as ApDraggableGridProps
+};

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

@@ -0,0 +1,197 @@
+import { CreateComponentPublicInstanceWithMixins, ExtractPropTypes, PropType, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, ComponentOptionsBase, VNodeProps, AllowedComponentProps, ComponentCustomProps, Plugin } from 'vue';
+import { ApDraggableGridItemBase } from './interface';
+export * from './interface';
+declare const ApDraggableGrid: {
+    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly< ExtractPropTypes<{
+        gridList: {
+            type: PropType<Array< ApDraggableGridItemBase>>;
+            default: () => never[];
+        };
+        request: {
+            type: PropType<() => Promise< ApDraggableGridItemBase[]>>;
+            default: null;
+        };
+        gridWidth: {
+            type: (NumberConstructor | StringConstructor)[];
+            default: string;
+        };
+        gridItemHeight: {
+            type: NumberConstructor;
+            default: number;
+        };
+        gridItemShadow: {
+            type: StringConstructor;
+            default: string;
+        };
+        gapWidth: {
+            type: NumberConstructor;
+            default: number;
+        };
+        dragOverlayColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        dragOverlayBorderColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        disableDrag: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{
+        onOnGridListChange?: ((args_0: ApDraggableGridItemBase[]) => any) | undefined;
+    }>, {
+        setGridItems: (items: ApDraggableGridItemBase[]) => void;
+        refreshGrid: () => void;
+    }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+        onGridListChange: (args_0: ApDraggableGridItemBase[]) => any;
+    }, PublicProps, {
+        request: () => Promise< ApDraggableGridItemBase[]>;
+        gridList: ApDraggableGridItemBase[];
+        gridWidth: string | number;
+        gridItemHeight: number;
+        gridItemShadow: string;
+        gapWidth: number;
+        dragOverlayColor: string;
+        dragOverlayBorderColor: string;
+        disableDrag: boolean;
+    }, true, {}, {}, GlobalComponents, GlobalDirectives, string, {
+        gridContainer: HTMLDivElement;
+    }, any, ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly< ExtractPropTypes<{
+        gridList: {
+            type: PropType<Array< ApDraggableGridItemBase>>;
+            default: () => never[];
+        };
+        request: {
+            type: PropType<() => Promise< ApDraggableGridItemBase[]>>;
+            default: null;
+        };
+        gridWidth: {
+            type: (NumberConstructor | StringConstructor)[];
+            default: string;
+        };
+        gridItemHeight: {
+            type: NumberConstructor;
+            default: number;
+        };
+        gridItemShadow: {
+            type: StringConstructor;
+            default: string;
+        };
+        gapWidth: {
+            type: NumberConstructor;
+            default: number;
+        };
+        dragOverlayColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        dragOverlayBorderColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        disableDrag: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{
+        onOnGridListChange?: ((args_0: ApDraggableGridItemBase[]) => any) | undefined;
+    }>, {
+        setGridItems: (items: ApDraggableGridItemBase[]) => void;
+        refreshGrid: () => void;
+    }, {}, {}, {}, {
+        request: () => Promise< ApDraggableGridItemBase[]>;
+        gridList: ApDraggableGridItemBase[];
+        gridWidth: string | number;
+        gridItemHeight: number;
+        gridItemShadow: string;
+        gapWidth: number;
+        dragOverlayColor: string;
+        dragOverlayBorderColor: string;
+        disableDrag: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & ComponentOptionsBase<Readonly< ExtractPropTypes<{
+    gridList: {
+        type: PropType<Array< ApDraggableGridItemBase>>;
+        default: () => never[];
+    };
+    request: {
+        type: PropType<() => Promise< ApDraggableGridItemBase[]>>;
+        default: null;
+    };
+    gridWidth: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    gridItemHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    gridItemShadow: {
+        type: StringConstructor;
+        default: string;
+    };
+    gapWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    dragOverlayColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    dragOverlayBorderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    disableDrag: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onOnGridListChange?: ((args_0: ApDraggableGridItemBase[]) => any) | undefined;
+}>, {
+    setGridItems: (items: ApDraggableGridItemBase[]) => void;
+    refreshGrid: () => void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    onGridListChange: (args_0: ApDraggableGridItemBase[]) => any;
+}, string, {
+    request: () => Promise< ApDraggableGridItemBase[]>;
+    gridList: ApDraggableGridItemBase[];
+    gridWidth: string | number;
+    gridItemHeight: number;
+    gridItemShadow: string;
+    gapWidth: number;
+    dragOverlayColor: string;
+    dragOverlayBorderColor: string;
+    disableDrag: boolean;
+}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
+    $slots: {
+        item?(_: {
+            item: {
+                isDragging: boolean;
+                isOverlay: boolean;
+                span: number;
+                row: number;
+                col: number;
+                height?: number | string | undefined;
+            };
+            index: number;
+        }): any;
+    };
+}) & ( Plugin & (new (...args: any[]) => {
+    $props: {
+        onClick?: () => void;
+    };
+}));
+export { ApDraggableGrid };

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

@@ -0,0 +1,8 @@
+import { withInstall as r } from "@aplus-frontend/utils";
+import "./ApDraggableGrid.vue.mjs";
+import "./interface.mjs";
+import o from "./ApDraggableGrid.vue2.mjs";
+const a = r(o);
+export {
+  a as ApDraggableGrid
+};

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

@@ -0,0 +1,14 @@
+export interface ApDraggableGridItemBase {
+    span: number;
+    row: number;
+    col: number;
+    height?: number | string;
+}
+export interface ApDraggableGridItem extends ApDraggableGridItemBase {
+    isDragging: boolean;
+    isOverlay: boolean;
+}
+export type ApDraggableGridExpose = {
+    setGridItems: (items: ApDraggableGridItemBase[]) => void;
+    refreshGrid: () => void;
+};

package/es/src/business/ap-draggable-grid/interface.mjs

@@ -0,0 +1 @@
+

package/es/src/business/ap-draggable-grid/style/css.js

@@ -0,0 +1 @@
+import '@aplus-frontend/ui/theme/ap-draggable-grid/ap-draggable-grid.css';

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

@@ -0,0 +1 @@
+import '@aplus-frontend/ui/theme/ap-draggable-grid/ap-draggable-grid.less';