@aplus-frontend/ui 7.12.6 → 7.13.0

package/es/src/ap-table/hooks/use-table-column-state.mjs

@@ -1,134 +1,46 @@
-import { useToken as D } from "@aplus-frontend/antdv/es/theme/internal";
-import { isObject as v, mergeWith as A, isBoolean as G, omit as W, isString as X, isNumber as T } from "lodash-unified";
-import { ref as q, shallowRef as H, unref as i, computed as L, watchEffect as P } from "vue";
-import "../../config-provider/index.mjs";
+import { ref as d, computed as h, unref as n } from "vue";
 import "../../utils/index.mjs";
-import Q, { customCloneColumnStates as b, getColumnStateString as U } from "../components/setting/utils.mjs";
-import { useInjectApTable as V } from "../context.mjs";
-import { getTableTitle as Y } from "../utils.mjs";
-import { useNamespace as Z } from "../../config-provider/hooks/use-namespace.mjs";
-import { isDef as $ } from "../../utils/is.mjs";
-function c(r, o) {
-  r.forEach((n) => {
-    o(n), n.children?.length && c(n.children, o);
+import { isDef as w } from "../../utils/is.mjs";
+function r(s, e) {
+  s.forEach((l) => {
+    e(l), l.children?.length && r(l.children, e);
   });
 }
-function K(r, o) {
-  if (!o)
-    return {};
-  const n = r.getItem(o);
-  return n ? JSON.parse(n) : {};
-}
-function N(r, o) {
-  if (v(r) && v(o))
-    return A({}, r, o, N);
-}
-const y = Number.MAX_SAFE_INTEGER;
-function ee(r, o, n, a) {
-  return a ? a.fixed : o ? o.fixed : n && "fixed" in n ? n.fixed : G(r.fixed) ? r.fixed ? "left" : void 0 : r.fixed;
-}
-const de = (r, o, n) => {
-  const { be: a } = Z("ap-table"), [te, B] = D(), l = q(n), d = H(
-    b(n)
-  ), { columnsBackup: m, updateColumns: E } = V(), F = r.persistenceType || "localStorage", h = window[F];
-  function I() {
-    const e = K(
-      h,
-      i(o)
-    ), t = A(
-      {},
-      r.defaultValue || {},
-      e,
-      N
-    ), s = i(m);
-    function u(R, j, z) {
-      return R.map((f) => {
-        const k = j?.[f.key] || {}, g = {
-          key: f.key,
-          label: X(f.title) ? Y(
-            f,
-            a("table-header", "title"),
-            void 0,
-            B.value.colorTextTertiary
-          ) : f.title,
-          show: !0,
-          fixed: ee(
-            f,
-            e[f.key],
-            r.defaultValue?.[f.key],
-            z
-          ),
-          disabled: !1,
-          ...W(k, ["children", "fixed"])
-        };
-        return g.children = f.children?.length ? u(
-          f.children,
-          k.children,
-          g
-        ) : void 0, g;
-      }).sort(O);
-    }
-    return u(s || [], t);
-  }
-  function O(e, t) {
-    const s = T(e.order) ? e.order : y;
-    let u = T(t.order) ? t.order : y;
-    return e.fixed === "right" && t.fixed !== "right" && (u = s - 1), t.fixed === "left" && e.fixed !== "left" && (u = s - 1), s - u;
-  }
-  const p = L(() => i(l).every((e) => e.show));
-  function S() {
-    const e = i(l);
-    c(e, (t) => {
-      !t.disabled && (t.show = !0);
+const A = (s) => {
+  const e = d(s), l = h(() => n(e).every((t) => t.show));
+  function f() {
+    const t = n(e);
+    r(t, (o) => {
+      !o.disabled && (o.show = !0);
     });
   }
-  function x() {
-    const e = i(l);
-    c(e, (t) => {
-      !t.disabled && (t.show = !1);
+  function i() {
+    const t = n(e);
+    r(t, (o) => {
+      !o.disabled && (o.show = !1);
     });
   }
-  function _() {
-    i(p) ? x() : S();
+  function u() {
+    n(l) ? i() : f();
   }
-  function J(e, t) {
-    c(i(l), (s) => {
-      s.key === e && (s.show = $(t) ? t : !s.show);
+  function a(t, o) {
+    r(n(e), (c) => {
+      c.key === t && (c.show = w(o) ? o : !c.show);
     });
   }
-  function C(e) {
-    l.value = e;
-  }
-  function M(e) {
-    d.value = e;
-  }
-  function w(e) {
-    if (i(o)) {
-      const t = U(e);
-      h.setItem(i(o), JSON.stringify(t));
-    }
-  }
-  return P(() => {
-    const e = I();
-    C(e), r.onChange?.(e), E?.(
-      Q(
-        i(m),
-        i(e)
-      )
-    ), d.value = b(e), w(e);
-  }), {
-    columnState: l,
-    selectAll: S,
-    unSelectAll: x,
-    toggleSelect: J,
-    setColumnState: C,
-    isAllSelected: p,
-    toggleSelectAll: _,
-    columnStateBackup: d,
-    setColumnStateBackup: M,
-    cacheColumnStateIfNeeded: w
+  function S(t) {
+    e.value = t;
+  }
+  return {
+    columnState: e,
+    selectAll: f,
+    unSelectAll: i,
+    toggleSelect: a,
+    setColumnState: S,
+    isAllSelected: l,
+    toggleSelectAll: u
   };
 };
 export {
-  de as useTableColumnState
+  A as useTableColumnState
 };

package/es/src/ap-table/hooks/use-table-template-storage.d.ts

@@ -0,0 +1,49 @@
+import { Ref } from 'vue';
+import { ApColumnTemplate, ApTableSettingType } from '..';
+export declare const useTableTemplateStorage: (columnSetting: ApTableSettingType, persistenceKey: Ref<string | undefined>) => {
+    basicTemplate: Ref<ApColumnTemplate | undefined, ApColumnTemplate | undefined>;
+    customizeTemplateList: Ref<{
+        columnState: {
+            key: string | number;
+            show?: boolean | undefined;
+            fixed?: "left" | "right" | undefined;
+            disabled?: boolean | undefined;
+            label?: any;
+            children?: /*elided*/ any[] | undefined;
+            order?: number | undefined;
+        }[];
+        label: string;
+        key: string;
+        size?: "middle" | "small" | undefined;
+    }[], ApColumnTemplate[] | {
+        columnState: {
+            key: string | number;
+            show?: boolean | undefined;
+            fixed?: "left" | "right" | undefined;
+            disabled?: boolean | undefined;
+            label?: any;
+            children?: /*elided*/ any[] | undefined;
+            order?: number | undefined;
+        }[];
+        label: string;
+        key: string;
+        size?: "middle" | "small" | undefined;
+    }[]>;
+    syncTemplateListToStorage: (nextTemplateList: ApColumnTemplate[]) => void;
+    addTemplate: (template: ApColumnTemplate) => void;
+    deleteTemplate: (key: string) => void;
+    updateTemplate: (key: string, newTemplate: Partial<ApColumnTemplate>) => {
+        columnState: {
+            key: string | number;
+            show?: boolean | undefined;
+            fixed?: "left" | "right" | undefined;
+            disabled?: boolean | undefined;
+            label?: any;
+            children?: /*elided*/ any[] | undefined;
+            order?: number | undefined;
+        }[];
+        label: string;
+        key: string;
+        size?: "middle" | "small" | undefined;
+    };
+};

package/es/src/ap-table/hooks/use-table-template-storage.mjs

@@ -0,0 +1,150 @@
+import { useToken as F } from "@aplus-frontend/antdv/es/theme/internal";
+import { isBoolean as J, isNumber as T, isObject as x, mergeWith as y, omit as L, isString as j } from "lodash-unified";
+import { ref as S, unref as c, watch as h } from "vue";
+import "../../config-provider/index.mjs";
+import { randomStr as k } from "../../utils/index.mjs";
+import { getColumnStateString as G } from "../components/setting/utils.mjs";
+import { useInjectApTable as M } from "../context.mjs";
+import { getTableTitle as R } from "../utils.mjs";
+import { useNamespace as W } from "../../config-provider/hooks/use-namespace.mjs";
+function X(t, e, i, o) {
+  return o ? o.fixed : e ? e.fixed : i && "fixed" in i ? i.fixed : J(t.fixed) ? t.fixed ? "left" : void 0 : t.fixed;
+}
+const b = Number.MAX_SAFE_INTEGER, q = k();
+function H(t, e) {
+  const i = T(t.order) ? t.order : b;
+  let o = T(e.order) ? e.order : b;
+  return t.fixed === "right" && e.fixed !== "right" && (o = i - 1), e.fixed === "left" && t.fixed !== "left" && (o = i - 1), i - o;
+}
+function P(t, e) {
+  e && t.removeItem(e);
+}
+function Q(t, e) {
+  if (!e)
+    return [];
+  const i = t.getItem(e);
+  if (!i)
+    return [];
+  const o = JSON.parse(i);
+  return Array.isArray(o) ? o : (P(t, e), []);
+}
+function I(t, e) {
+  if (x(t) && x(e))
+    return y({}, t, e, I);
+}
+const ie = (t, e) => {
+  const { columnsBackup: i, size: o } = M(), { be: A } = W("ap-table"), [U, N] = F(), m = S(), u = S(
+    z(
+      Q(localStorage, c(e))
+    )
+  );
+  h(
+    [i, o],
+    ([r, n]) => {
+      r && (m.value = {
+        label: "basic_template",
+        columnState: l(r),
+        key: q,
+        size: n
+      });
+    },
+    { immediate: !0, deep: !0 }
+  );
+  function z(r) {
+    return r.length ? r.map((n) => ({
+      ...n,
+      columnState: l(
+        i.value,
+        n.columnState,
+        !1
+      )
+    })) : [
+      {
+        label: "默认模版",
+        key: k(),
+        size: o?.value,
+        columnState: l(i?.value || [])
+      }
+    ];
+  }
+  function l(r, n = {}, a = !0) {
+    const d = y(
+      {},
+      a ? t.defaultValue || {} : {},
+      n,
+      I
+    );
+    function g(E, w, C) {
+      return E.map((f) => {
+        const v = w?.[f.key] || {}, s = {
+          key: f.key,
+          label: j(f.title) ? R(
+            f,
+            A("table-header", "title"),
+            void 0,
+            N.value.colorTextTertiary
+          ) : f.title,
+          show: !0,
+          fixed: X(
+            f,
+            void 0,
+            a ? t.defaultValue?.[f.key] : void 0,
+            C
+          ),
+          disabled: !1,
+          ...L(v, ["children", "fixed"])
+        };
+        return s.children = f.children?.length ? g(
+          f.children,
+          v.children,
+          s
+        ) : void 0, s;
+      }).sort(H);
+    }
+    return g(r || [], d);
+  }
+  function p(r) {
+    if (c(e)) {
+      const n = r.map((a) => ({
+        ...a,
+        columnState: G(a.columnState)
+      }));
+      localStorage.setItem(c(e), JSON.stringify(n));
+    }
+  }
+  function O(r) {
+    u.value.push(r);
+  }
+  function _(r) {
+    const n = u.value.findIndex(
+      (a) => a.key === r
+    );
+    u.value.splice(n, 1);
+  }
+  function B(r, n) {
+    const a = u.value.findIndex(
+      (d) => d.key === r
+    );
+    return u.value[a] = {
+      ...u.value[a],
+      ...n
+    }, u.value[a];
+  }
+  return h(
+    () => u.value,
+    (r) => {
+      p(r);
+    },
+    { deep: !0, immediate: !0 }
+  ), {
+    basicTemplate: m,
+    customizeTemplateList: u,
+    syncTemplateListToStorage: p,
+    addTemplate: O,
+    deleteTemplate: _,
+    updateTemplate: B
+  };
+};
+export {
+  ie as useTableTemplateStorage
+};

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

@@ -81,10 +81,12 @@ export type CommonFieldReturnType = ApFormItemProps & {
 export type ApTableSettingType = {
     /**
      * 用于持久化缓存的key
+     * @since 7.13.0 在此版本后必填
      */
-    persistenceKey?: string;
+    persistenceKey: string;
     /**
      * 持久化类型
+     * @deprecated 已废弃，将只使用localStorage
      */
     persistenceType?: 'localStorage' | 'sessionStorage';
     /**
@@ -96,7 +98,7 @@ export type ApTableSettingType = {
      * @param val
      * @returns
      */
-    onChange?: (val: ApColumnState[]) => void;
+    onChange?: (val: ApColumnState[], template: ApColumnTemplate) => void;
 };
 export type ApTableSettingDefaultValueType = Recordable<Omit<ApColumnState, 'label' | 'key' | 'children'> & {
     children?: ApTableSettingDefaultValueType;
@@ -131,6 +133,27 @@ export type ApColumnState = {
      */
     order?: number;
 };
+export type ApColumnCachedTemplate = Omit<ApColumnTemplate, 'columnState'> & {
+    columnState: ApTableSettingDefaultValueType;
+};
+export type ApColumnTemplate = {
+    /**
+     * 列状态
+     */
+    columnState: ApColumnState[];
+    /**
+     * 模板名称
+     */
+    label: string;
+    /**
+     * 模版唯一标识
+     */
+    key: string;
+    /**
+     * 表格尺寸
+     */
+    size?: 'middle' | 'small';
+};
 export type FieldPropsType<ReturnType, RecordType, ExtraValueType, ValueType extends ApTableValueTypes, MergedValueType extends ExtraValueType | ValueType> = ReturnType | ((opt: Partial<{
     value: any;
     text: any;
@@ -345,7 +368,7 @@ export type ApTableProps<RecordType = any, ParamsType = any> = Omit<TableProps<R
     /**
      * 是否开启表格设置
      */
-    settings?: true | ApTableSettingType;
+    settings?: ApTableSettingType;
 };
 export type ApTableExpose<SearchParamsType = Recordable, RecordType = any> = {
     /**

package/es/src/ap-table/style/index.d.ts

@@ -4,6 +4,7 @@ export type ApTableToken = {
     apTableHeaderBg: string;
     apTableIndexSize: number;
     apTableSettingRightWidth: number;
+    apTableSettingLeftWidth: number;
 };
 export declare const defaultValue: (token: BaseToken) => ApTableToken;
 export declare const genSettingTriggerBtnStyle: StyleMixin;

package/es/src/ap-table/style/index.mjs

@@ -3,7 +3,8 @@ import { genComponentStyleHook as o } from "../../utils/cssinjs/index.mjs";
 const r = (t) => ({
   apTableHeaderBg: t.tableHeaderBg,
   apTableIndexSize: 14,
-  apTableSettingRightWidth: 240
+  apTableSettingRightWidth: 240,
+  apTableSettingLeftWidth: 240
 }), p = (t) => ({
   [`.${t.namespace}-ap-table-setting-trigger-button`]: {
     color: t.textColor2,

package/es/src/ap-table/style/setting.d.ts

@@ -6,5 +6,7 @@ export declare const genTableSettingSelectGroupStyle: GenStyleFunc;
 export declare const genTableSettingSortableItemMetaStyle: GenStyleFunc;
 export declare const genTableSettingSortableItemStyle: GenStyleFunc;
 export declare const genTableSettingSorterStyle: GenStyleFunc;
+export declare const genTableSettingTemplateListStyle: GenStyleFunc;
+export declare const genTableSettingTemplateItemStyle: GenStyleFunc;
 declare const _default: (prefixCls: string) => ComputedRef<string>;
 export default _default;

package/es/src/ap-table/style/setting.mjs

@@ -1,16 +1,28 @@
-import { singleRow as a, resetComponent as t } from "../../style/index.mjs";
-import { genComponentStyleHook as n } from "../../utils/cssinjs/index.mjs";
-import { defaultValue as r } from "./index.mjs";
+import { singleRow as a, resetComponent as r } from "../../style/index.mjs";
+import { genComponentStyleHook as t } from "../../utils/cssinjs/index.mjs";
+import { defaultValue as n } from "./index.mjs";
 const o = (e) => {
   const { componentCls: l, namespace: i } = e;
   return {
     [l]: {
+      ".ant-modal-content": {
+        padding: 0
+      },
+      "div.ant-modal-header": {
+        marginBottom: 0,
+        padding: "12px 20px",
+        borderBottom: `1px solid ${e.antdv.colorSplit}`
+      },
+      ".ant-modal-footer": {
+        padding: "12px 20px",
+        marginTop: 0,
+        borderTop: "1px solid #E9EDF3"
+      },
       [`${l}-wrapper`]: {
         display: "flex",
         flexDirection: "row",
         flexWrap: "nowrap",
         height: "100%",
-        paddingBlockEnd: e.spaceLG,
         [`.${i}-ap-table-table-header__title`]: {
           ...a(e)
         },
@@ -24,10 +36,13 @@ const o = (e) => {
         }
       },
       [`${l}-left`]: {
+        width: e.apTableSettingLeftWidth
+      },
+      [`${l}-center`]: {
         flex: 1,
         flexShrink: 1,
         minWidth: 0,
-        paddingInline: "20px",
+        paddingInline: e.spaceLG,
         display: "flex",
         flexDirection: "column",
         "&__header": {
@@ -36,11 +51,17 @@ const o = (e) => {
           flexWrap: "nowrap",
           justifyContent: "space-between",
           alignItems: "center",
-          padding: e.space,
+          paddingInline: e.space,
+          paddingBlock: e.spaceMD,
           "&-tips": {
             color: e.textColor3
           }
         },
+        "&__tip-wrapper": {
+          flex: 1,
+          display: "flex",
+          alignItems: "center"
+        },
         "&__content": {
           flex: 1,
           padding: e.spaceLG,
@@ -53,6 +74,7 @@ const o = (e) => {
             maxWidth: "100%",
             display: "inline-flex",
             alignItems: "center",
+            lineHeight: 0,
             "> span:last-child": {
               flex: 1,
               minWidth: 0
@@ -62,10 +84,13 @@ const o = (e) => {
       },
       [`${l}-right`]: {
         width: e.apTableSettingRightWidth
+      },
+      [`${l}-modify-tip`]: {
+        color: e.colorWarn
       }
     }
   };
-}, c = (e) => {
+}, p = (e) => {
   const { componentCls: l } = e;
   return {
     [l]: {
@@ -82,7 +107,7 @@ const o = (e) => {
       }
     }
   };
-}, p = (e) => {
+}, c = (e) => {
   const { componentCls: l } = e, i = `${l}-sortable-item-meta`;
   return {
     [l]: {
@@ -170,9 +195,9 @@ const o = (e) => {
         },
         "&-header": {
           paddingInline: "20px",
-          paddingBlock: e.spaceLG,
+          paddingBlock: e.spaceXL,
           "&-title": {
-            ...t(e),
+            ...r(e),
             fontWeight: "bold",
             color: e.textColor1
           }
@@ -188,22 +213,92 @@ const o = (e) => {
       }
     }
   };
-}, h = n(
+}, g = (e) => {
+  const { componentCls: l } = e;
+  return {
+    [l]: {
+      [`${e.componentCls}-template-list`]: {
+        height: "100%",
+        "&-title": {
+          paddingInline: 20,
+          paddingBlock: e.spaceXL,
+          fontWeight: "bold"
+        },
+        "&-content": {
+          flex: 1,
+          overflow: "auto",
+          paddingInline: e.spaceLG,
+          paddingBlock: e.space
+        }
+      }
+    }
+  };
+}, m = (e) => {
+  const { componentCls: l } = e, i = `${e.componentCls}-template-item`;
+  return {
+    [l]: {
+      [i]: {
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: "nowrap",
+        justifyContent: "space-between",
+        paddingInline: e.space,
+        paddingBlock: e.spaceSM,
+        borderRadius: e.borderRadius,
+        marginBlockEnd: e.spaceXS,
+        "&:last-child": {
+          marginBottom: 0
+        },
+        "&:hover": {
+          backgroundColor: e.calc(e.colorPrimary).colorMix(5),
+          cursor: "pointer",
+          [`${e.componentCls}-template-item-action-wrapper`]: {
+            display: "flex"
+          }
+        },
+        "&-label": {
+          ...a(e),
+          lineHeight: "20px"
+        },
+        "&-action-wrapper": {
+          display: "none"
+        },
+        "&-icon-wrapper": {
+          paddingInline: e.spaceXS,
+          borderRadius: e.borderRadius,
+          "&:hover": {
+            backgroundColor: e.colorBg1
+          }
+        }
+      },
+      [`${i}-active`]: {
+        backgroundColor: e.calc(e.colorPrimary).colorMix(5),
+        "&-label": {
+          color: e.colorPrimary
+        }
+      }
+    }
+  };
+}, S = t(
   "ApTable.Setting",
   (e) => [
     o(e),
-    c(e),
-    d(e),
     p(e),
-    s(e)
+    d(e),
+    c(e),
+    s(e),
+    m(e),
+    g(e)
   ],
-  r
+  n
 );
 export {
-  h as default,
-  c as genTableSettingSelectGroupStyle,
-  p as genTableSettingSortableItemMetaStyle,
+  S as default,
+  p as genTableSettingSelectGroupStyle,
+  c as genTableSettingSortableItemMetaStyle,
   d as genTableSettingSortableItemStyle,
   s as genTableSettingSorterStyle,
-  o as genTableSettingStyle
+  o as genTableSettingStyle,
+  m as genTableSettingTemplateItemStyle,
+  g as genTableSettingTemplateListStyle
 };

package/es/src/ap-table/utils.mjs

@@ -147,7 +147,7 @@ function re(e, t, n, o) {
   const r = n?.({
     title: e.title,
     column: e
-  }), i = r?.filter((l) => l.type !== Symbol.for("v-cmt")) || [];
+  }), i = r?.filter((l) => l.type !== /* @__PURE__ */ Symbol.for("v-cmt")) || [];
   if (r && i.length > 0)
     return r;
   const p = N(e.title) ? s("span", {

package/es/src/business/ag-grid-modal/hooks/use-ag-grid-instance.mjs

@@ -1,6 +1,6 @@
 import { cloneDeep as A } from "lodash-unified";
 import { ref as o, watch as r, defineComponent as h, provide as I, toRef as a, inject as y } from "vue";
-const u = Symbol("ag-grid-provider-key");
+const u = /* @__PURE__ */ Symbol("ag-grid-provider-key");
 function L(n) {
   const t = o(), c = o(), l = o(0), d = (e) => {
     t.value = e;