@aplus-frontend/ui 0.2.0 → 0.2.2

package/es/src/business/ap-table-modal/table-modal.vue2.mjs

@@ -1,15 +1,17 @@
-import { defineComponent as I, ref as i, unref as r, computed as N, h as O, openBlock as A, createBlock as D, mergeProps as g, withCtx as E, createVNode as L } from "vue";
-import { message as U, Modal as q } from "@aplus-frontend/antdv";
+import { defineComponent as F, ref as m, unref as s, computed as U, h as q, openBlock as $, createBlock as z, mergeProps as b, withCtx as k, createVNode as T } from "vue";
+import { message as h, Modal as H } from "@aplus-frontend/antdv";
 import "../../index.mjs";
-import { cloneDeep as F, omit as x } from "lodash-unified";
-import { transformTableParams as G } from "@aplus-frontend/utils";
+import { cloneDeep as V, omit as S } from "lodash-unified";
+import { transformTableParams as W } from "@aplus-frontend/utils";
 import "./modal-title.vue.mjs";
-import { AsyncOpenResultError as f } from "./interface.mjs";
-import { useGlobalConfig as $ } from "../../config-provider/hooks/use-global-config.mjs";
-import { useLocale as z } from "../../config-provider/hooks/use-locale.mjs";
-import V from "./modal-title.vue2.mjs";
-import W from "../../ap-table/ap-table.vue.mjs";
-const le = /* @__PURE__ */ I({
+import { AsyncOpenResultError as x } from "./interface.mjs";
+import "./table-layout/index.vue.mjs";
+import { useGlobalConfig as Y } from "../../config-provider/hooks/use-global-config.mjs";
+import { useLocale as J } from "../../config-provider/hooks/use-locale.mjs";
+import Q from "./modal-title.vue2.mjs";
+import X from "./table-layout/index.vue2.mjs";
+import { ApTable as Z } from "../../ap-table/index.mjs";
+const fe = /* @__PURE__ */ F({
   __name: "table-modal",
   props: {
     columns: {},
@@ -19,6 +21,9 @@ const le = /* @__PURE__ */ I({
     maxCount: { default: 1 / 0 },
     isRenderModalTitleSuffix: { type: Boolean, default: !0 },
     renderModalTitleSuffix: {},
+    disabledCheckbox: { type: [Boolean, Function] },
+    rowSelection: {},
+    tableLayoutConfig: {},
     prefixCls: {},
     confirmLoading: { type: Boolean, default: void 0 },
     title: {},
@@ -56,89 +61,126 @@ const le = /* @__PURE__ */ I({
     mousePosition: {}
   },
   emits: ["finish"],
-  setup(b, { expose: C, emit: w }) {
-    const e = b, T = w, s = i(!1), m = i({}), d = i(null), n = i([]), p = i();
-    let u = null, a = null;
-    const k = $("uiMode", "admin"), { t: B } = z(), S = async (t = [], o = {}) => {
-      var l, c, v;
-      switch (n.value = [...t], s.value = !0, m.value = o == null ? void 0 : o.extraParams, p.value = o.apTableDataSources || ((l = e.apTableProps) == null ? void 0 : l.dataSource), o.refreshMode || "reset") {
+  setup(B, { expose: R, emit: M }) {
+    const e = B, P = M, i = m(!1), y = m({}), d = m(null), a = m([]), C = m();
+    let c = null, n = null;
+    const K = Y("uiMode", "admin"), { t: g } = J(), _ = async (o = [], t = {}) => {
+      var l, r, u;
+      switch (a.value = [...o], i.value = !0, y.value = t == null ? void 0 : t.extraParams, C.value = t.apTableDataSources || ((l = e.apTableProps) == null ? void 0 : l.dataSource), t.refreshMode || "reset") {
         case "reset":
-          (c = d.value) == null || c.reset();
+          (r = d.value) == null || r.reset();
           break;
         case "submit":
-          (v = d.value) == null || v.submit();
+          (u = d.value) == null || u.submit();
           break;
         case "none":
           break;
       }
-      return new Promise((K, _) => {
-        u = K, a = _;
+      return new Promise((p, f) => {
+        c = p, n = f;
       });
-    }, y = () => {
-      s.value = !1, u = null, a == null || a(f.ModalCancel), a = null;
-    }, h = async (t) => {
-      t = G({
-        ...t,
-        ...m.value
+    }, w = () => {
+      i.value = !1, c = null, n == null || n(x.ModalCancel), n = null;
+    }, I = async (o) => {
+      o = W({
+        ...o,
+        ...y.value
       });
-      const o = e.api, { records: l, total: c } = await o(t);
+      const t = e.api, { records: l, total: r } = await t(o);
       return {
         data: l,
-        total: c
+        total: r
       };
-    }, M = () => {
-      if (n.value.length > e.maxCount) {
-        a == null || a(f.ExceedMaxCount);
+    }, L = () => {
+      if (a.value.length > e.maxCount) {
+        n == null || n(x.ExceedMaxCount);
         return;
       }
       if (e.getRowKey) {
-        const t = F(r(n)), o = t.map(e.getRowKey);
-        T("finish", o, t), u == null || u({ keys: o, rows: t });
+        const o = V(s(a)), t = o.map(e.getRowKey);
+        P("finish", t, o), c == null || c({ keys: t, rows: o });
       } else {
-        a == null || a(f.NotFineGetRowKey);
+        n == null || n(x.NotFineGetRowKey);
         return;
       }
-      s.value = !1;
-    }, P = N(() => {
-      if (e.getRowKey)
-        return {
-          fixed: !0,
-          selectedRowKeys: n.value.map(e.getRowKey),
-          columnWidth: 50,
-          preserveSelectedRowKeys: !0,
-          onChange: (t, o) => {
-            if (o.length > e.maxCount) {
-              U.warning(
-                B("ap.apTableModal.messageMaxCount", { maxCount: e.maxCount })
+      i.value = !1;
+    }, A = U(() => {
+      if (!e.getRowKey) return;
+      const o = e.getRowKey;
+      return {
+        fixed: !0,
+        selectedRowKeys: a.value.map(o),
+        columnWidth: 50,
+        preserveSelectedRowKeys: !0,
+        onSelectAll(t, l) {
+          var u, p;
+          if (l.length > e.maxCount) {
+            h.warning(
+              g("ap.apTableModal.messageMaxCount", { maxCount: e.maxCount })
+            );
+            return;
+          }
+          const r = (u = d.value) == null ? void 0 : u.dataSource;
+          if (t) {
+            const f = s(r).filter((v) => !a.value.some((E) => o(E) === o(v)));
+            a.value = a.value.concat(f);
+          } else
+            a.value = (p = a.value) == null ? void 0 : p.filter((f) => !r.some((v) => o(v) === o(f)));
+        },
+        onSelect(t, l) {
+          if (l) {
+            if (a.value.length >= e.maxCount) {
+              h.warning(
+                g("ap.apTableModal.messageMaxCount", { maxCount: e.maxCount })
               );
               return;
             }
-            n.value = o;
+            a.value.push(t);
+          } else {
+            const r = a.value.findIndex(
+              (u) => o(t) === o(u)
+            );
+            a.value.splice(r, 1);
           }
-        };
-    }), R = () => e.isRenderModalTitleSuffix ? O(
-      V,
+        },
+        getCheckboxProps: (t) => ({
+          disabled: typeof e.disabledCheckbox == "function" ? e.disabledCheckbox(t, a.value) : e.disabledCheckbox
+          // Column configuration not to be checked
+        }),
+        ...e.rowSelection || {}
+      };
+    }), D = () => e.isRenderModalTitleSuffix ? q(
+      Q,
       {
         title: e.title,
-        count: n.value.length || 0,
+        count: a.value.length || 0,
         maxCount: e.maxCount
       },
       {
         default: e.renderModalTitleSuffix ?? void 0
       }
-    ) : e.title;
-    return C({
-      open: S,
-      close: y,
-      getApTableInstance: () => d.value
-    }), (t, o) => (A(), D(r(q), g(
+    ) : e.title, N = () => d.value, O = () => {
+      a.value = [];
+    }, G = (o) => {
+      const t = e.getRowKey;
+      if (!t) return;
+      const l = a.value.findIndex(
+        (r) => t(o) === t(r)
+      );
+      a.value.splice(l, 1);
+    };
+    return R({
+      open: _,
+      close: w,
+      getApTableInstance: N
+    }), (o, t) => ($(), z(s(H), b(
       {
-        onOk: M,
-        onCancel: y,
-        open: s.value,
-        "onUpdate:open": o[0] || (o[0] = (l) => s.value = l)
+        onOk: L,
+        onCancel: w,
+        open: i.value,
+        "onUpdate:open": t[0] || (t[0] = (l) => i.value = l)
       },
-      r(x)(e, [
+      s(S)(e, [
         "api",
         "getRowKey",
         "centered",
@@ -147,32 +189,45 @@ const le = /* @__PURE__ */ I({
         "maxCount",
         "title",
         "renderModalTitleSuffix",
-        "isRenderModalTitleSuffix"
+        "isRenderModalTitleSuffix",
+        "rowSelection",
+        "disabledCheckbox",
+        "tableLayoutConfig"
       ]),
       {
-        title: R(),
+        title: D(),
+        "body-style": { maxHeight: "calc(100vh - 205px)", overflowY: "scroll" },
         centered: e.centered ?? !0
       }
     ), {
-      default: E(() => [
-        L(r(W), g({
-          scroll: { y: "100%" },
-          style: { padding: "0px" },
-          columns: t.columns,
-          request: h,
-          "row-key": t.getRowKey,
-          "row-selection": P.value,
-          bordered: r(k) === "admin"
-        }, r(x)(e.apTableProps, "dataSource"), {
-          ref_key: "apTableRef",
-          ref: d,
-          "data-source": p.value
-        }), null, 16, ["columns", "row-key", "row-selection", "bordered", "data-source"])
+      default: k(() => [
+        T(X, b(e.tableLayoutConfig || {}, {
+          onClear: O,
+          "selected-list": a.value,
+          onDeleteItem: G
+        }), {
+          default: k(() => [
+            T(s(Z), b({
+              scroll: { y: "100%" },
+              style: { padding: "0px" },
+              columns: o.columns,
+              request: I,
+              "row-key": o.getRowKey,
+              "row-selection": A.value,
+              bordered: s(K) === "admin"
+            }, s(S)(e.apTableProps, "dataSource"), {
+              ref_key: "apTableRef",
+              ref: d,
+              "data-source": C.value
+            }), null, 16, ["columns", "row-key", "row-selection", "bordered", "data-source"])
+          ]),
+          _: 1
+        }, 16, ["selected-list"])
       ]),
       _: 1
     }, 16, ["open", "title", "centered"]));
   }
 });
 export {
-  le as default
+  fe as default
 };

package/es/src/config-provider/config-provider.d.ts

@@ -408,6 +408,7 @@ export declare const ConfigProvider: DefineComponent<{
             color: {
                 font: string;
                 active: string;
+                border: string;
             };
         };
         basic: {

package/es/src/config-provider/css-var.d.ts

@@ -59,6 +59,7 @@ declare const aplusCssVarObj: {
         color: {
             font: string;
             active: string;
+            border: string;
         };
     };
     basic: {

package/es/src/config-provider/css-var.mjs

@@ -57,7 +57,8 @@ const F = {
   "ap-batch-action": {
     color: {
       font: "#8896B0",
-      active: "#0070FF"
+      active: "#0070FF",
+      border: "#E9EDF3"
     }
   },
   basic: {
@@ -133,7 +134,8 @@ const F = {
   "ap-batch-action": {
     color: {
       font: "#999999",
-      active: "#34B77C"
+      active: "#34B77C",
+      border: "#E9E9E9"
     }
   },
   basic: {
@@ -162,15 +164,15 @@ function s(e) {
   }
   return t(e, []), o;
 }
-const p = s(F), d = s(b);
+const d = s(F), p = s(b);
 function u(e) {
   Object.entries(e).forEach(([o, t]) => {
     document.documentElement.style.setProperty(o, t);
   });
 }
 export {
-  d as adminCssVar,
-  p as aplusCssVar,
+  p as adminCssVar,
+  d as aplusCssVar,
   s as generateCssVar,
   u as setCSSVariables
 };

package/es/src/config-provider/index.d.ts

@@ -223,6 +223,7 @@ export declare const APConfigProvider: {
                     color: {
                         font: string;
                         active: string;
+                        border: string;
                     };
                 };
                 basic: {
@@ -447,6 +448,7 @@ export declare const APConfigProvider: {
                     color: {
                         font: string;
                         active: string;
+                        border: string;
                     };
                 };
                 basic: {
@@ -565,6 +567,7 @@ export declare const APConfigProvider: {
                 color: {
                     font: string;
                     active: string;
+                    border: string;
                 };
             };
             basic: {
@@ -794,6 +797,7 @@ export declare const APConfigProvider: {
                     color: {
                         font: string;
                         active: string;
+                        border: string;
                     };
                 };
                 basic: {
@@ -912,6 +916,7 @@ export declare const APConfigProvider: {
                 color: {
                     font: string;
                     active: string;
+                    border: string;
                 };
             };
             basic: {
@@ -1180,6 +1185,7 @@ export declare const APConfigProvider: {
             color: {
                 font: string;
                 active: string;
+                border: string;
             };
         };
         basic: {

package/es/src/editable-table/interface.d.ts

@@ -2,11 +2,11 @@ import { ColumnType, TableProps } from '@aplus-frontend/antdv/es/table';
 import { ApTableValueFields, ApTableValueTypes, CommonFieldReturnType, FieldPropsType, ValueEnum } from '../ap-table';
 import { NamePath, ValidateOptions } from '@aplus-frontend/antdv/es/form/interface';
 import { DataIndex } from '@aplus-frontend/antdv/es/vc-table/interface';
-import { FormItemProps } from '@aplus-frontend/antdv';
 import { VNode } from 'vue';
 import { EllipsisConfig } from '@aplus-frontend/antdv/es/typography/Base';
 import { StandardBehaviorOptions } from '../../node_modules/scroll-into-view-if-needed';
 import { Recordable } from '../type';
+import { ApFormItemProps } from '../ap-form';
 export type EditableColumnType<RecordType = any, ExtraValueType = 'text', ValueType extends ApTableValueTypes = ApTableValueTypes, MergedValueType extends ExtraValueType | ValueType = ExtraValueType | ValueType> = MergedValueType extends ExtraValueType | ValueType ? Omit<ColumnType<RecordType>, 'children' | 'customRender' | 'ellipsis'> & {
     children?: EditableColumnType<RecordType, ExtraValueType, ValueType, MergedValueType>[];
     /**
@@ -100,7 +100,7 @@ export type EditableTableFormItemProps<RecordType = any> = Omit<EditableTablePro
     /**
      * 额外的表单项配置属性
      */
-    formItem?: Partial<Omit<FormItemProps, 'name' | 'label'>>;
+    formItem?: Partial<Omit<ApFormItemProps, 'name' | 'label'>>;
 };
 export type EditableTableExpose<ModelType = any, RecordType = any> = {
     /**