@aplus-frontend/ui 0.2.20 → 0.2.22

package/es/src/ap-list/index.vue.mjs

@@ -1,12 +1,14 @@
-import { defineComponent as M, ref as W, unref as t, computed as l, watch as j, openBlock as s, createBlock as A, normalizeClass as u, withCtx as G, createElementVNode as U, normalizeStyle as D, renderSlot as f, createVNode as k, createElementBlock as g, Fragment as H, renderList as J, mergeProps as K, createCommentVNode as Q } from "vue";
-import { Empty as B, Spin as X, Pagination as Y } from "@aplus-frontend/antdv";
+import { defineComponent as H, ref as J, unref as t, computed as c, watch as Q, openBlock as i, createBlock as y, normalizeClass as u, withCtx as f, createElementVNode as X, normalizeStyle as v, renderSlot as l, createVNode as h, createElementBlock as p, Fragment as B, renderList as Y, mergeProps as Z, createCommentVNode as _ } from "vue";
+import { Empty as E, Spin as x, Pagination as ee } from "@aplus-frontend/antdv";
 import "../ap-table/index.mjs";
 import "../config-provider/index.mjs";
-import { isUndefined as E, omit as Z } from "lodash-unified";
-import { useOfflineList as x } from "./hooks/use-offline-list.mjs";
-import { useNamespace as ee } from "../config-provider/hooks/use-namespace.mjs";
-import { useTablePaging as te } from "../ap-table/hooks/use-table-paging.mjs";
-const fe = /* @__PURE__ */ M({
+import { isUndefined as O, isNumber as te, omit as ae } from "lodash-unified";
+import { useOfflineList as ne } from "./hooks/use-offline-list.mjs";
+import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
+import { RecycleScroller as re, DynamicScroller as oe, DynamicScrollerItem as ie } from "vue-virtual-scroller";
+import { useNamespace as le } from "../config-provider/hooks/use-namespace.mjs";
+import { useTablePaging as se } from "../ap-table/hooks/use-table-paging.mjs";
+const he = /* @__PURE__ */ H({
   __name: "index",
   props: {
     dataSource: {},
@@ -19,26 +21,29 @@ const fe = /* @__PURE__ */ M({
     beforeSearchSubmit: {},
     pagination: { type: [Boolean, Object], default: void 0 },
     manual: { type: Boolean },
-    containerStyle: {},
-    footerWarpperStyle: {}
+    containerStyle: { type: [Boolean, null, String, Object, Array] },
+    contentStyle: { type: [Boolean, null, String, Object, Array] },
+    footerWarpperStyle: { type: [Boolean, null, String, Object, Array] },
+    virtual: { default: void 0 },
+    rowKey: {}
   },
-  setup(w, { expose: V }) {
-    const F = B.PRESENTED_IMAGE_SIMPLE, n = w, { b: p, e: S } = ee("ap-list"), h = W(), {
-      formRef: y,
-      submit: v,
-      reset: b,
-      handleTableChange: L,
-      data: c,
+  setup(V, { expose: F }) {
+    const L = E.PRESENTED_IMAGE_SIMPLE, n = V, { b: d, e: N } = le("ap-list"), b = J(), {
+      formRef: k,
+      submit: D,
+      reset: z,
+      handleTableChange: R,
+      data: g,
       refresh: T,
-      refreshByDelete: z,
+      refreshByDelete: $,
       tableProps: C
-    } = te({
-      async request(a) {
-        var o;
-        const e = await ((o = n.request) == null ? void 0 : o.call(n, a));
+    } = se({
+      async request(e) {
+        var r;
+        const a = await ((r = n.request) == null ? void 0 : r.call(n, e));
         return {
-          data: (e == null ? void 0 : e.data) || [],
-          total: (e == null ? void 0 : e.total) || 0
+          data: (a == null ? void 0 : a.data) || [],
+          total: (a == null ? void 0 : a.total) || 0
         };
       },
       defaultParams: n.params,
@@ -47,92 +52,137 @@ const fe = /* @__PURE__ */ M({
       defaultCurrent: n.pagination ? n.pagination.defaultCurrent : void 0,
       defaultPageSize: n.pagination ? n.pagination.defaultPageSize : void 0,
       formatParams: n.beforeSearchSubmit
-    }), I = { form: y }, {
-      pagination: P,
-      dataSource: N,
-      onChange: R
-    } = x(n);
-    function q(a, e) {
-      if (t(r)) {
-        R(a, e);
+    }), j = { form: k }, {
+      pagination: I,
+      dataSource: q,
+      onChange: A
+    } = ne(n);
+    function K(e, a) {
+      if (t(m)) {
+        A(e, a);
         return;
       }
-      L(
-        { current: a, pageSize: e },
+      R(
+        { current: e, pageSize: a },
         {},
         {},
         { currentDataSource: [], action: "paginate" }
       );
     }
-    const d = l(() => t(r) ? t(N) : t(c).records), m = l(() => E(n.loading) ? t(c).loading : n.loading), O = l(() => {
-      var a, e;
-      return n.pagination === !1 ? !1 : ((a = n.pagination) == null ? void 0 : a.hideOnSinglePage) !== !0 ? !0 : t(r) ? (((e = n.dataSource) == null ? void 0 : e.length) || 0) > t(P).pageSize : t(c).total > t(C).pagination.pageSize;
-    }), r = l(() => !E(n.dataSource));
-    j(
-      () => t(m),
-      (a) => {
-        var e;
-        (e = n.onLoadingChange) == null || e.call(n, a);
+    const s = c(() => t(m) ? t(q) : t(g).records), S = c(() => O(n.loading) ? t(g).loading : n.loading), M = c(() => {
+      var e, a;
+      return n.pagination === !1 || n.virtual ? !1 : ((e = n.pagination) == null ? void 0 : e.hideOnSinglePage) !== !0 ? !0 : t(m) ? (((a = n.dataSource) == null ? void 0 : a.length) || 0) > t(I).pageSize : t(g).total > t(C).pagination.pageSize;
+    }), m = c(() => !O(n.dataSource));
+    Q(
+      () => t(S),
+      (e) => {
+        var a;
+        (a = n.onLoadingChange) == null || a.call(n, e);
       }
     );
-    function _(a) {
-      var e, o;
-      (o = (e = h.value) == null ? void 0 : e.querySelector(a || ":first-child")) == null || o.scrollIntoView({ behavior: "smooth", block: "center" });
+    function W(e) {
+      var a, r;
+      (r = (a = b.value) == null ? void 0 : a.querySelector(e || ":first-child")) == null || r.scrollIntoView({ behavior: "smooth", block: "center" });
     }
-    function $(a = !1) {
-      var i;
-      const e = (i = y.value) == null ? void 0 : i.apForm, o = a ? e == null ? void 0 : e.getFieldsValueTransformed : e == null ? void 0 : e.getFieldsValue;
-      return (o == null ? void 0 : o()) || {};
+    function G(e = !1) {
+      var o;
+      const a = (o = k.value) == null ? void 0 : o.apForm, r = e ? a == null ? void 0 : a.getFieldsValueTransformed : a == null ? void 0 : a.getFieldsValue;
+      return (r == null ? void 0 : r()) || {};
     }
-    return V({
-      submit: () => v(),
-      reset: () => b(),
+    return F({
+      submit: () => D(),
+      reset: () => z(),
       refresh: () => T(),
-      refreshByDelete: (a) => z(a),
-      scrollToFirstRow: _,
-      getSearchFormValuesIfSetted: $
-    }), (a, e) => (s(), A(t(X), {
-      spinning: m.value,
-      class: u(t(p)("spin"))
+      refreshByDelete: (e) => $(e),
+      scrollToFirstRow: W,
+      getSearchFormValuesIfSetted: G
+    }), (e, a) => (i(), y(t(x), {
+      spinning: S.value,
+      class: u(t(d)("spin"))
     }, {
-      default: G(() => [
-        U("div", {
-          class: u(t(p)()),
-          style: D(a.containerStyle)
+      default: f(() => [
+        X("div", {
+          class: u(t(d)()),
+          style: v(e.containerStyle)
         }, [
-          f(a.$slots, "header", {
-            formIns: I,
-            submit: t(v),
-            reset: t(b)
+          l(e.$slots, "header", {
+            formIns: j,
+            submit: t(D),
+            reset: t(z)
           }),
-          d.value.length === 0 ? f(a.$slots, "empty", {
+          s.value.length === 0 ? l(e.$slots, "empty", {
             key: 0,
-            loading: m.value
+            loading: S.value
           }, () => [
-            k(t(B), { image: t(F) }, null, 8, ["image"])
-          ]) : (s(), g("div", {
+            h(t(E), { image: t(L) }, null, 8, ["image"])
+          ]) : (i(), p("div", {
             key: 1,
             ref_key: "contentRef",
-            ref: h,
-            class: u(t(S)("content"))
+            ref: b,
+            style: v(e.contentStyle)
           }, [
-            f(a.$slots, "renderContent", { dataSource: d.value }, () => [
-              (s(!0), g(H, null, J(d.value, (o, i) => f(a.$slots, "renderItem", {
-                item: o,
-                index: i
+            e.virtual ? (i(), p(B, { key: 0 }, [
+              t(te)(e.virtual) ? (i(), y(t(re), {
+                key: 0,
+                class: u(t(d)("scroll-wrapper")),
+                items: s.value,
+                itemSize: e.virtual,
+                "key-field": n.rowKey || "id"
+              }, {
+                default: f(({ item: r, index: o }) => [
+                  l(e.$slots, "renderItem", {
+                    item: r,
+                    index: o
+                  })
+                ]),
+                _: 3
+              }, 8, ["class", "items", "itemSize", "key-field"])) : (i(), y(t(oe), {
+                key: 1,
+                items: s.value,
+                minItemSize: e.virtual.minItemSize,
+                class: u(t(d)("scroll-wrapper"))
+              }, {
+                default: f(({ item: r, index: o, active: U }) => {
+                  var P, w;
+                  return [
+                    h(t(ie), {
+                      item: r,
+                      active: U,
+                      dataIndex: o,
+                      sizeDependencies: (w = (P = e.virtual).sizeDependencies) == null ? void 0 : w.call(P, r)
+                    }, {
+                      default: f(() => [
+                        l(e.$slots, "renderItem", {
+                          item: r,
+                          index: o
+                        })
+                      ]),
+                      _: 2
+                    }, 1032, ["item", "active", "dataIndex", "sizeDependencies"])
+                  ];
+                }),
+                _: 3
+              }, 8, ["items", "minItemSize", "class"]))
+            ], 64)) : l(e.$slots, "renderContent", {
+              key: 1,
+              dataSource: s.value
+            }, () => [
+              (i(!0), p(B, null, Y(s.value, (r, o) => l(e.$slots, "renderItem", {
+                item: r,
+                index: o
               })), 256))
             ])
-          ], 2)),
-          O.value ? (s(), g("div", {
+          ], 4)),
+          M.value ? (i(), p("div", {
             key: 2,
-            class: u(t(S)("footer")),
-            style: D(a.footerWarpperStyle)
+            class: u(t(N)("footer")),
+            style: v(e.footerWarpperStyle)
           }, [
-            k(t(Y), K(
-              r.value ? t(P) : t(Z)(t(C).pagination, ["showTotal"]),
-              { onChange: q }
+            h(t(ee), Z(
+              m.value ? t(I) : t(ae)(t(C).pagination, ["showTotal"]),
+              { onChange: K }
             ), null, 16)
-          ], 6)) : Q("", !0)
+          ], 6)) : _("", !0)
         ], 6)
       ]),
       _: 3
@@ -140,5 +190,5 @@ const fe = /* @__PURE__ */ M({
   }
 });
 export {
-  fe as default
+  he as default
 };

package/es/src/ap-list/interface.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'vue';
+import { StyleValue } from 'vue';
 import { RequestData } from '../ap-table';
 import { Recordable } from '../type';
 export type ApListProps<RecordType = any, ParamsType = Recordable> = {
@@ -62,11 +62,30 @@ export type ApListProps<RecordType = any, ParamsType = Recordable> = {
     /**
      * List容器的自定义样式
      */
-    containerStyle?: CSSProperties;
+    containerStyle?: StyleValue;
+    /**
+     * List内容区域自定义样式
+     */
+    contentStyle?: StyleValue;
     /**
      *  底部分页器容器的样式
      */
-    footerWarpperStyle?: CSSProperties;
+    footerWarpperStyle?: StyleValue;
+    /**
+     * 列表是否开启虚拟滚动
+     * @description 设置此属性后，将不会展示分页器，同样`renderContent`插槽将不再可用；
+     * 如果值为`number`类型，则表示每个元素的尺寸，在尺寸不固定的情况下，则可以设置`minItemSize`和`sizeDependencies`两个属性
+     * @default false
+     */
+    virtual?: number | {
+        minItemSize: number;
+        sizeDependencies?: (item: RecordType) => any[];
+    };
+    /**
+     * 列表数据的key
+     * @default "id"
+     */
+    rowKey?: string;
 };
 export type ApListExpose = {
     /**

package/es/src/ap-modal/interface.d.ts

@@ -4,9 +4,12 @@ export type CreateModalFuncProps<ContentRecord = any> = Omit<ModalProps, 'open'
     onOk: (params: ContentRecord) => any | Promise<any>;
     getContainer: HTMLElement;
     content: any;
+    destroyOnClose: boolean;
 }>;
 export type CreateModalFuncReturn = {
     destroy: () => void;
     update: (newConfig: CreateModalFuncProps) => void;
+    open: () => void;
+    close: () => void;
 };
 export type CreateModalFunc = (props: CreateModalFuncProps) => CreateModalFuncReturn;

package/es/src/ap-modal/utils/createModal.mjs

@@ -1,56 +1,66 @@
-import { render as c, defineComponent as C, createVNode as l, mergeProps as g, h as O } from "vue";
-import { Modal as k } from "@aplus-frontend/antdv";
-import { ConfigProvider as y, globalConfigCached as v } from "../../config-provider/config-provider.mjs";
-const b = (i) => {
-  let p, n;
-  function d() {
-    p && p(!1), setTimeout(() => {
+import { render as m, defineComponent as y, createVNode as f, mergeProps as k, h as v } from "vue";
+import { Modal as x } from "@aplus-frontend/antdv";
+import { ConfigProvider as P, globalConfigCached as L } from "../../config-provider/config-provider.mjs";
+import { omit as b } from "lodash-unified";
+const T = (p) => {
+  let n, t;
+  const {
+    destroyOnClose: d = !0
+  } = p;
+  function c() {
+    n && n(!1), setTimeout(() => {
       var e;
-      c(null, t), (e = t.parentElement) == null || e.removeChild(t);
+      m(null, s), (e = s.parentElement) == null || e.removeChild(s);
     }, 500);
   }
-  function h(e) {
-    n && n(e);
+  function h() {
+    n && n(!0);
   }
-  const m = /* @__PURE__ */ C({
+  function l() {
+    n && n(!1);
+  }
+  function u(e) {
+    t && t(e);
+  }
+  const C = /* @__PURE__ */ y({
     data() {
       return {
-        open: !0,
-        props: i
+        open: d,
+        props: p
       };
     },
     methods: {
       async handleCancel() {
-        var e, o, r, s, a;
+        var e, o, r, a, i;
         if ((e = this.props) != null && e.onCancel) {
-          const u = ((s = (r = (o = this.props) == null ? void 0 : o.content) == null ? void 0 : r.component) == null ? void 0 : s.exposed) ?? void 0;
-          await ((a = this.props) == null ? void 0 : a.onCancel(u));
+          const O = ((a = (r = (o = this.props) == null ? void 0 : o.content) == null ? void 0 : r.component) == null ? void 0 : a.exposed) ?? void 0;
+          await ((i = this.props) == null ? void 0 : i.onCancel(O));
         }
-        d();
+        d ? c() : l();
       },
       async handleOk() {
-        var e, o, r, s;
+        var e, o, r, a;
         try {
-          if (n({
+          if (t({
             confirmLoading: !0
           }), (e = this.props) != null && e.onOk) {
-            const a = ((s = (r = (o = this.props) == null ? void 0 : o.content) == null ? void 0 : r.component) == null ? void 0 : s.exposed) ?? void 0;
-            await this.props.onOk(a);
+            const i = ((a = (r = (o = this.props) == null ? void 0 : o.content) == null ? void 0 : r.component) == null ? void 0 : a.exposed) ?? void 0;
+            await this.props.onOk(i);
           }
-          n({
+          t({
             confirmLoading: !1
-          }), d();
+          }), d ? c() : l();
         } catch {
-          n({
+          t({
             confirmLoading: !1
           });
         }
       }
     },
     created() {
-      p = (e) => {
+      n = (e) => {
         this.open = e;
-      }, n = (e) => {
+      }, t = (e) => {
         this.props = {
           ...this.props,
           ...e
@@ -58,11 +68,9 @@ const b = (i) => {
       };
     },
     render() {
-      const {
-        ...e
-      } = this.props;
-      return delete e.onCancel, delete e.onOk, l(y, v.value, {
-        default: () => [l(k, g({
+      const e = b(this.props, ["onCancel", "onOk"]);
+      return f(P, L.value, {
+        default: () => [f(x, k({
           open: this.open,
           destroyOnClose: !0,
           onCancel: this.handleCancel,
@@ -75,12 +83,14 @@ const b = (i) => {
         })]
       });
     }
-  }), f = i.getContainer || document.body, t = document.createElement("div");
-  return f.appendChild(t), c(O(m), t), {
-    destroy: d,
-    update: h
+  }), g = p.getContainer || document.body, s = document.createElement("div");
+  return g.appendChild(s), m(v(C), s), {
+    destroy: c,
+    update: u,
+    open: h,
+    close: l
   };
 };
 export {
-  b as createModal
+  T as createModal
 };