@aplus-frontend/ui 7.19.3 → 7.19.5

package/es/src/ag-grid/editable/form-item.vue.mjs

@@ -1,20 +1,20 @@
-import { defineComponent as G, useSlots as W, ref as y, onMounted as U, watch as $, unref as r, createElementBlock as q, openBlock as J, Fragment as Q, createVNode as f, mergeProps as h, withCtx as C, createSlots as X, renderList as Y, renderSlot as Z, normalizeProps as ee, guardReactiveProps as oe } from "vue";
+import { defineComponent as G, useSlots as U, ref as g, onMounted as W, watch as $, unref as r, createElementBlock as q, openBlock as J, Fragment as Q, createVNode as f, mergeProps as h, withCtx as C, createSlots as X, renderList as Y, renderSlot as Z, normalizeProps as ee, guardReactiveProps as oe } from "vue";
 import { cloneDeep as u, isEqual as te, omit as ae } from "lodash-unified";
-import { ApForm as b } from "../../ap-form/index.mjs";
+import { ApForm as R } from "../../ap-form/index.mjs";
 import { useInjectForm as ne } from "../../ap-form/context.mjs";
 import { useWatch as le } from "../../ap-form/hooks/use-watch.mjs";
 import { getModelValue as re } from "../../ap-form/utils/get.mjs";
-import { transformValues as ie } from "../../ap-form/utils/transform.mjs";
+import { transformValues as se } from "../../ap-form/utils/transform.mjs";
 import "../../config-provider/index.mjs";
-import { useGetEditableColumns as se } from "../hooks/use-editable-columns.mjs";
+import { useGetEditableColumns as ie } from "../hooks/use-editable-columns.mjs";
 import { useEditableFormItemApi as me } from "../hooks/use-editable-form-item-api.mjs";
 import "../index.vue2.mjs";
 import ue from "../style/editable.mjs";
 import { getShadowName as de } from "../utils.mjs";
-import { getColumnTransformOptions as pe, arrayToObject as R, getRowKey as fe } from "./utils.mjs";
+import { getColumnTransformOptions as pe, arrayToObject as b, getRowKey as fe } from "./utils.mjs";
 import { useNamespace as ce } from "../../config-provider/hooks/use-namespace.mjs";
 import { useGlobalConfig as we } from "../../config-provider/hooks/use-global-config.mjs";
-import ge from "../index.vue.mjs";
+import ye from "../index.vue.mjs";
 const Ke = /* @__PURE__ */ G({
   name: "EditableGrid",
   __name: "form-item",
@@ -134,6 +134,10 @@ const Ke = /* @__PURE__ */ G({
     onChange: {},
     maxLength: {},
     onFieldChange: {},
+    supressForceRowUpdate: {
+      type: Boolean,
+      default: !1
+    },
     label: {},
     name: {},
     formItem: {}
@@ -141,27 +145,27 @@ const Ke = /* @__PURE__ */ G({
   setup(v, {
     expose: B
   }) {
-    const x = W(), a = v, {
+    const x = U(), t = v, {
       b: S
-    } = ce("editable-aggrid"), I = ue("editable-aggrid"), m = y(), {
+    } = ce("editable-aggrid"), I = ue("editable-aggrid"), m = g(), {
       internalInstance: n
     } = ne();
     function F(e) {
-      const o = pe(a.columns || []);
+      const o = pe(t.columns || []);
       if (!Object.keys(o).length || !e?.length)
         return e;
-      let t = [];
-      for (const s of e)
-        t.push(ie(s, o));
-      return t;
+      let a = [];
+      for (const i of e)
+        a.push(se(i, o));
+      return a;
     }
-    const i = de(a.name);
+    const s = de(t.name);
     let c = [];
-    U(() => {
-      const e = a.formItem?.initialValue ?? re(n?.getInitialValues() ?? {}, a.name);
-      e && (n?.updateInitialModel(i, R(u(e), a.rowKey)), c = u(e), l.value || j(u(e), "suffix", !0));
+    W(() => {
+      const e = t.formItem?.initialValue ?? re(n?.getInitialValues() ?? {}, t.name);
+      e && (n?.updateInitialModel(s, b(u(e), t.rowKey)), c = u(e), l.value || j(u(e), "suffix", !0));
     });
-    const l = y([]), T = le(a.name);
+    const l = g([]), T = le(t.name);
     $(() => T.value, (e) => {
       te(e, l.value) || w(e ?? u(c));
     }, {
@@ -169,7 +173,7 @@ const Ke = /* @__PURE__ */ G({
       flush: "post",
       immediate: !0
     });
-    const E = we("valueTypeMap"), V = se(a, E, i), {
+    const E = we("valueTypeMap"), V = ie(t, E, s), {
       add: N,
       addMultiple: _,
       __addMultiple: j,
@@ -180,36 +184,36 @@ const Ke = /* @__PURE__ */ G({
       setRowData: z,
       clear: H,
       refreshRowIds: d
-    } = me(a, n, l, i);
+    } = me(t, n, l, s);
     function L() {
       const e = m.value?._internalGridApi;
       if (!d.value?.length || !e)
         return;
-      const o = d.value.map((t) => e.getRowNode(t)).filter((t) => !!t);
-      e.refreshCells({
+      const o = d.value.map((a) => e.getRowNode(a)).filter((a) => !!a);
+      t.supressForceRowUpdate || e.refreshCells({
         rowNodes: o,
         force: !0
       }), d.value = [];
     }
     function w(e) {
       l.value = [...e];
-      const o = R(e, a.rowKey);
-      n?.setFieldValue(a.name, [...e]), n?.setFieldValue(i, o);
+      const o = b(e, t.rowKey);
+      n?.setFieldValue(t.name, [...e]), n?.setFieldValue(s, o);
     }
-    function g(e, o) {
-      const t = e === "end" ? l.value.length - 1 : e;
-      m.value?.scrollToRow(t, o);
+    function y(e, o) {
+      const a = e === "end" ? l.value.length - 1 : e;
+      m.value?.scrollToRow(a, o);
     }
     function M(e, o) {
       m.value?.scrollToColumn(e, o);
     }
     function P(e, o) {
-      const t = [i, String(e), o].flat();
-      return n?.validateFields([t]);
+      const a = [s, String(e), o].flat();
+      return n?.validateFields([a]);
     }
     function A(e) {
-      const t = r(l).map((s, p) => [i, String(fe(s, p, a.rowKey)), e].flat());
-      return n?.validateFields(t);
+      const a = r(l).map((i, p) => [s, String(fe(i, p, t.rowKey)), e].flat());
+      return n?.validateFields(a);
     }
     return B({
       add: N,
@@ -221,21 +225,21 @@ const Ke = /* @__PURE__ */ G({
       setRowData: z,
       clear: H,
       setTableData: w,
-      scrollTo: g,
-      scrollToRow: g,
+      scrollTo: y,
+      scrollToRow: y,
       scrollToColumn: M,
       validateCell: P,
       validateColumn: A,
       table: m
-    }), (e, o) => (J(), q(Q, null, [f(r(b).FormItem, {
+    }), (e, o) => (J(), q(Q, null, [f(r(R).FormItem, {
       hidden: "",
       name: e.name,
       "initial-value": e.formItem?.initialValue,
       transform: F
-    }, null, 8, ["name", "initial-value"]), f(r(b).FormItem, h({
+    }, null, 8, ["name", "initial-value"]), f(r(R).FormItem, h({
       label: e.label
     }, e.formItem), {
-      default: C(() => [f(ge, h(r(ae)(a, ["name", "maxLength", "onChange", "defaultValue", "formItem"]), {
+      default: C(() => [f(ye, h(r(ae)(t, ["name", "maxLength", "onChange", "defaultValue", "formItem"]), {
         ref_key: "tableRef",
         ref: m,
         class: [r(S)(), r(I)],
@@ -246,9 +250,9 @@ const Ke = /* @__PURE__ */ G({
         onUpdate: L
       }), X({
         _: 2
-      }, [Y(x, (t, s) => ({
-        name: s,
-        fn: C((p) => [Z(e.$slots, s, ee(oe(p || {})))])
+      }, [Y(x, (a, i) => ({
+        name: i,
+        fn: C((p) => [Z(e.$slots, i, ee(oe(p || {})))])
       }))]), 1040, ["class", "columns", "data-source"])]),
       _: 3
     }, 16, ["label"])], 64));

package/es/src/ag-grid/editable/index.vue.mjs

@@ -135,7 +135,11 @@ const Fe = /* @__PURE__ */ M({
     name: {
       default: "ap-editable-table-inner-name"
     },
-    onFieldChange: {}
+    onFieldChange: {},
+    supressForceRowUpdate: {
+      type: Boolean,
+      default: !1
+    }
   },
   emits: ["update:value"],
   setup(C, {
@@ -170,12 +174,12 @@ const Fe = /* @__PURE__ */ M({
       if (!d.value?.length || !e)
         return;
       const o = d.value.map((t) => e.getRowNode(t)).filter((t) => !!t);
-      e.refreshCells({
+      a.supressForceRowUpdate || e.refreshCells({
         rowNodes: o,
         force: !0
       }), d.value = [];
     }
-    function L() {
+    function U() {
       r.value?.resetFields();
     }
     function w(e) {
@@ -189,15 +193,15 @@ const Fe = /* @__PURE__ */ M({
         return e;
       }
     }
-    async function P(e, o) {
+    async function L(e, o) {
       const n = (await r.value?.validateFields(w(e), o))?.[a.name];
       return g(n);
     }
-    async function G(e, o) {
+    async function P(e, o) {
       const n = (await r.value?.validateFieldsReturnTransformed(w(e), o))?.[a.name];
       return g(n);
     }
-    function U(e) {
+    function G(e) {
       y(e);
       const o = f(e, a.rowKey);
       r.value?.setFieldValue(a.name, o);
@@ -210,9 +214,9 @@ const Fe = /* @__PURE__ */ M({
       i.value?.scrollToColumn(e, o);
     }
     return x({
-      resetFields: L,
-      validateFields: P,
-      validateFieldsReturnTransformed: G,
+      resetFields: U,
+      validateFields: L,
+      validateFieldsReturnTransformed: P,
       add: A,
       addMultiple: N,
       remove: j,
@@ -221,7 +225,7 @@ const Fe = /* @__PURE__ */ M({
       getRowsData: D,
       setRowData: z,
       clear: H,
-      setTableData: U,
+      setTableData: G,
       scrollTo: R,
       scrollToRow: R,
       scrollToColumn: W,

package/es/src/ag-grid/editable/interface.d.ts

@@ -78,6 +78,15 @@ export type EditableAgGridProps<RecordType = any> = Omit<AgGridProps<RecordType>
      * @returns
      */
     onFieldChange?: (rowIndex: number, fieldName: DataIndex, newValue: any) => void;
+    /**
+     * 是否禁止在行操作后（添加/删除行等）避免强制更新
+     * 默认情况下，表格行会在行操作后强制更新哪些受到影响的行来保证渲染始终是正确的，但这样会导致表单校验被清空、频繁更新导致渲染性能下降等问题
+     * 设置为`true`后，在行操作后不会主动强制更新受影响的行，由于不再更新行，配置中如果`editable`/`fieldProps`/`customRender`等函数使用
+     * 到了`rowIndex`等字段可能会出现渲染异常的问题
+     * @default false
+     * @since 7.19.5
+     */
+    supressForceRowUpdate?: boolean;
 };
 export type EditableAgGridExpose<RecordType = any, ModelType = RecordType[]> = Omit<EditableTableExpose<ModelType, RecordType>, 'scrollTo' | 'remove'> & {
     scrollTo: (index: number | 'end', position?: 'top' | 'bottom' | 'middle') => void;

package/es/src/ag-grid/hooks/use-editable-columns.d.ts

@@ -1,6 +1,6 @@
-import { ComputedRef, Ref } from 'vue';
+import { Ref } from 'vue';
 import { ValueTypeRenderConfig } from '../../config-provider';
 import { EditableAgGridProps } from '../editable/interface';
 import { AgGridColumnType } from '../interface';
-export declare const useGetEditableColumns: (props: EditableAgGridProps, extraValueTypes: Ref<Record<string, ValueTypeRenderConfig> | undefined>, shadowName?: string) => ComputedRef<AgGridColumnType[]>;
+export declare const useGetEditableColumns: (props: EditableAgGridProps, extraValueTypes: Ref<Record<string, ValueTypeRenderConfig> | undefined>, shadowName?: string) => Ref<AgGridColumnType[]>;
 export default useGetEditableColumns;

package/es/src/ag-grid/hooks/use-editable-columns.mjs

@@ -1,104 +1,111 @@
-import { clsx as k } from "clsx";
-import { isArray as g, isFunction as w } from "lodash-unified";
-import { unref as E, computed as F } from "vue";
-import { getFinalEditableNode as v } from "../../ap-grid/utils/editable.mjs";
-import { updateFormProps as y, getFieldProps as q } from "../../ap-table/utils.mjs";
-import { getColumnIsRequired as A } from "../../editable-table/utils.mjs";
+import { clsx as v } from "clsx";
+import { isArray as g, isFunction as C } from "lodash-unified";
+import { ref as E, watch as F, unref as y } from "vue";
+import { getFinalEditableNode as q } from "../../ap-grid/utils/editable.mjs";
+import { updateFormProps as A, getFieldProps as K } from "../../ap-table/utils.mjs";
+import { getColumnIsRequired as M } from "../../editable-table/utils.mjs";
 import "../../utils/index.mjs";
-import { getRowKey as K } from "../editable/utils.mjs";
-import { isDef as M } from "../../utils/is.mjs";
-function b(t, n, i) {
-  t.__skipNextRefresh ? t.__skipNextRefresh[n] = i : t.__skipNextRefresh = { [n]: i };
+import { getRowKey as S } from "../editable/utils.mjs";
+import { isDef as D } from "../../utils/is.mjs";
+function I(t, d, r) {
+  t.__skipNextRefresh ? t.__skipNextRefresh[d] = r : t.__skipNextRefresh = { [d]: r };
 }
-function S(t, n, i) {
-  t.__prevEditable ? t.__prevEditable[n] = i : t.__prevEditable = { [n]: i };
+function G(t, d, r) {
+  t.__prevEditable ? t.__prevEditable[d] = r : t.__prevEditable = { [d]: r };
 }
-const O = (t, n, i) => {
-  function I(e) {
-    const s = e.editable, o = i ? [i] : g(t.name) ? t.name : [t.name];
-    return !s || e.children?.length ? {
-      _path: [...o]
+const Q = (t, d, r) => {
+  const _ = E([]);
+  F(
+    () => t.columns,
+    (e) => {
+      if (!e?.length) {
+        _.value = [];
+        return;
+      }
+      function c(a) {
+        return a.map((n) => ({
+          ...n,
+          _requireMark: M(n),
+          children: c(n.children || []),
+          // 处理可编辑/不可编辑下的单元格渲染
+          ...R(n)
+        }));
+      }
+      _.value = c(e);
+    },
+    { immediate: !0, deep: !0 }
+  );
+  function R(e) {
+    const c = e.editable, a = r ? [r] : g(t.name) ? t.name : [t.name];
+    return !c || e.children?.length ? {
+      _path: [...a]
     } : {
-      customRender({ value: d, originalNode: R, params: a, ...r }) {
-        const c = w(e.editable) ? e.editable(
-          r.text,
-          r.record,
-          r.rowIndex
+      customRender({ value: n, originalNode: p, params: o, ...i }) {
+        const s = C(e.editable) ? e.editable(
+          i.text,
+          i.record,
+          i.rowIndex
         ) : !!e.editable;
-        let u = R;
-        const p = g(e.dataIndex) ? e.dataIndex : [e.dataIndex], _ = K(
-          r.record,
-          r.rowIndex,
+        let u = p;
+        const w = g(e.dataIndex) ? e.dataIndex : [e.dataIndex], x = S(
+          i.record,
+          i.rowIndex,
           t.rowKey
         );
-        if (c) {
-          const x = y(
+        if (s) {
+          const h = A(
             e,
-            q(e.fieldProps, {
-              value: d,
-              ...r
+            K(e.fieldProps, {
+              value: n,
+              ...i
             })
-          ), h = {};
-          t.onFieldChange && (h[`onUpdate:${x.valuePropName || "value"}`] = (N) => t.onFieldChange?.(
-            r.rowIndex,
+          ), b = {};
+          t.onFieldChange && (b[`onUpdate:${h.valuePropName || "value"}`] = (k) => t.onFieldChange?.(
+            i.rowIndex,
             e.dataIndex,
-            N
+            k
           ));
-          const C = {
-            name: [...o, String(_), ...p],
-            ...x || {},
+          const N = {
+            name: [...a, String(x), ...w],
+            ...h || {},
             field: {
               style: "width: 100%",
-              ...x?.field || {},
-              ...h,
-              class: k("is-editable", x.class)
+              ...h?.field || {},
+              ...b,
+              class: v("is-editable", h.class)
             }
           };
-          u = v(
+          u = q(
             e,
-            C,
-            r.record,
-            E(n)
+            N,
+            i.record,
+            y(d)
           );
         }
         e.customRender && (u = e.customRender({
-          value: d,
-          ...r,
-          editable: c,
+          value: n,
+          ...i,
+          editable: s,
           originalNode: u,
-          index: r.rowIndex,
-          renderIndex: r.rowIndex,
-          path: [...o, String(_)]
+          index: i.rowIndex,
+          renderIndex: i.rowIndex,
+          path: [...a, String(x)]
         }));
-        const l = a.node, f = a.column.getColId(), m = l.__prevEditable?.[f];
-        return !l.__skipNextRefresh?.[f] && M(m) && m !== c && (b(l, f, !0), setTimeout(() => {
-          a?.api.refreshCells({
-            rowNodes: [a.node],
-            columns: [a.column.getColId()],
+        const l = o.node, f = o.column.getColId(), m = l.__prevEditable?.[f];
+        return !l.__skipNextRefresh?.[f] && D(m) && m !== s && (I(l, f, !0), setTimeout(() => {
+          o?.api.refreshCells({
+            rowNodes: [o.node],
+            columns: [o.column.getColId()],
             force: !0
-          }), b(l, f, !1);
-        }, 0)), S(l, f, c), u;
+          }), I(l, f, !1);
+        }, 0)), G(l, f, s), u;
       },
-      _path: [...o]
+      _path: [...a]
     };
   }
-  return F(() => {
-    const e = t.columns;
-    if (!e)
-      return [];
-    function s(o) {
-      return o.map((d) => ({
-        ...d,
-        _requireMark: A(d),
-        children: s(d.children || []),
-        // 处理可编辑/不可编辑下的单元格渲染
-        ...I(d)
-      }));
-    }
-    return s(e);
-  });
+  return _;
 };
 export {
-  O as default,
-  O as useGetEditableColumns
+  Q as default,
+  Q as useGetEditableColumns
 };