@aplus-frontend/ui 6.31.1 → 6.33.0

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

@@ -0,0 +1,233 @@
+import { defineComponent as G, useSlots as H, ref as f, watch as O, unref as n, createBlock as U, openBlock as W, withCtx as d, createVNode as y, mergeProps as M, createSlots as $, renderList as q, renderSlot as J, normalizeProps as Q, guardReactiveProps as X } from "vue";
+import { ApForm as u } from "../../ap-form/index.mjs";
+import { isEqual as Y, isArray as w, omit as Z } from "lodash-unified";
+import "../../config-provider/index.mjs";
+import "../../hooks/index.mjs";
+import { useGetEditableColumns as ee } from "../hooks/use-editable-columns.mjs";
+import "../index.vue2.mjs";
+import { useEditableApi as oe } from "../hooks/use-editable-api.mjs";
+import { arrayToObject as p } from "./utils.mjs";
+import { useNamespace as ae } from "../../config-provider/hooks/use-namespace.mjs";
+import { useControllableValue as te } from "../../hooks/useControllableValue.mjs";
+import { useGlobalConfig as ne } from "../../config-provider/hooks/use-global-config.mjs";
+import le from "../index.vue.mjs";
+const be = /* @__PURE__ */ G({
+  name: "EditableGrid",
+  __name: "index",
+  props: {
+    dropdownPrefixCls: {},
+    bordered: {
+      type: Boolean
+    },
+    locale: {},
+    onResizeColumn: {},
+    getPopupContainer: {},
+    scroll: {},
+    sortDirections: {},
+    showSorterTooltip: {
+      type: [Boolean, Object]
+    },
+    prefixCls: {},
+    rowKey: {
+      type: [String, Function],
+      default: "key"
+    },
+    tableLayout: {},
+    title: {},
+    id: {},
+    showHeader: {
+      type: Boolean
+    },
+    components: {},
+    customRow: {},
+    customHeaderRow: {},
+    direction: {},
+    expandFixed: {
+      type: [String, Boolean]
+    },
+    expandColumnWidth: {},
+    expandedRowKeys: {},
+    defaultExpandedRowKeys: {},
+    expandedRowRender: {},
+    expandRowByClick: {
+      type: Boolean
+    },
+    expandIcon: {},
+    onExpand: {},
+    onExpandedRowsChange: {},
+    defaultExpandAllRows: {
+      type: Boolean
+    },
+    indentSize: {},
+    expandIconColumnIndex: {},
+    showExpandColumn: {
+      type: Boolean
+    },
+    expandedRowClassName: {},
+    childrenColumnName: {},
+    rowExpandable: {},
+    transformCellText: {},
+    rowSelection: {
+      type: Boolean
+    },
+    onLoadingChange: {},
+    onShownColumnsChange: {},
+    pagination: {
+      type: [Boolean, Object],
+      default: !1
+    },
+    searchFormWrapperStyle: {},
+    tableWrapperStyle: {},
+    wrapperStyle: {},
+    tableStyle: {},
+    adaptive: {
+      type: Boolean
+    },
+    columnResizable: {
+      type: Boolean,
+      default: !1
+    },
+    loading: {
+      type: Boolean,
+      default: void 0
+    },
+    summary: {},
+    rowHeight: {
+      default: 66
+    },
+    advanceRenderer: {
+      type: Boolean
+    },
+    browserTooltips: {
+      type: Boolean
+    },
+    virtual: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    onRowClicked: {},
+    onScrollEnd: {},
+    rowClassName: {},
+    rowClassRules: {},
+    autoHeight: {
+      type: Boolean
+    },
+    onUpdate: {},
+    columns: {},
+    value: {},
+    defaultValue: {},
+    "onUpdate:value": {},
+    onChange: {},
+    maxLength: {},
+    name: {
+      default: "ap-editable-table-inner-name"
+    },
+    onFieldChange: {}
+  },
+  emits: ["update:value"],
+  setup(g, {
+    expose: h,
+    emit: b
+  }) {
+    const v = H(), o = g, {
+      b: C
+    } = ae("editable-aggrid"), R = b, s = f(), {
+      value: r,
+      updateValue: m
+    } = te(o, R), l = f(), x = u.useWatch(o.name, l);
+    O(r, (e) => {
+      const a = p(e, o.rowKey);
+      Y(a, n(x)) || l.value?.setFieldValue(o.name, a);
+    }, {
+      deep: !0
+    });
+    const B = ne("valueTypeMap"), S = ee(o, B), {
+      add: _,
+      addMultiple: F,
+      remove: E,
+      removeByKey: T,
+      getRowData: N,
+      getRowsData: A,
+      setRowData: V,
+      clear: k,
+      refreshRowIds: i
+    } = oe(o, l, r, m);
+    function D() {
+      const e = s.value?._internalGridApi;
+      if (!i.value?.length || !e)
+        return;
+      const a = i.value.map((t) => e.getRowNode(t)).filter((t) => !!t);
+      e.refreshCells({
+        rowNodes: a,
+        force: !0
+      }), i.value = [];
+    }
+    function K() {
+      l.value?.resetFields();
+    }
+    function j(e) {
+      return e ? (w(e) ? e : [e]).map((t) => w(t) ? [o.name, ...t] : [o.name, t]) : void 0;
+    }
+    async function z(e, a) {
+      return (await l.value?.validateFields(j(e), a))?.[o.name];
+    }
+    function I(e) {
+      m(e);
+      const a = p(e, o.rowKey);
+      l.value?.setFieldValue(o.name, a);
+    }
+    function L(e) {
+      const a = e === "end" ? r.value.length - 1 : e;
+      s.value?.scrollToRow(a);
+    }
+    return h({
+      resetFields: K,
+      validateFields: z,
+      add: _,
+      addMultiple: F,
+      remove: E,
+      removeByKey: T,
+      getRowData: N,
+      getRowsData: A,
+      setRowData: V,
+      clear: k,
+      setTableData: I,
+      scrollTo: L
+    }), (e, a) => (W(), U(n(u), {
+      ref_key: "formRef",
+      ref: l,
+      "initial-values": {
+        [o.name]: n(p)(n(r), o.rowKey)
+      },
+      style: {
+        height: "100%"
+      }
+    }, {
+      default: d(() => [y(n(u).FormItem, {
+        name: e.name,
+        "no-style": ""
+      }, {
+        default: d(() => [y(le, M(n(Z)(o, ["name", "value", "onUpdate:value", "maxLength", "onChange", "defaultValue"]), {
+          ref_key: "tableRef",
+          ref: s,
+          class: n(C)(),
+          size: "mini",
+          columns: n(S),
+          "data-source": n(r),
+          "search-form": !1,
+          onUpdate: D
+        }), $({
+          _: 2
+        }, [q(v, (t, c) => ({
+          name: c,
+          fn: d((P) => [J(e.$slots, c, Q(X(P || {})))])
+        }))]), 1040, ["class", "columns", "data-source"])]),
+        _: 3
+      }, 8, ["name"])]),
+      _: 3
+    }, 8, ["initial-values"]));
+  }
+});
+export {
+  be as default
+};

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

@@ -0,0 +1,4 @@
+import f from "./index.vue.mjs";
+export {
+  f as default
+};

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

@@ -0,0 +1,96 @@
+import { Recordable } from '../../type';
+import { ApTableValueFields, ApTableValueTypes, CommonFieldReturnType, FieldPropsType } from '../../ap-table/interface';
+import { AgGridColumnType, AgGridProps } from '../interface';
+import { VNode } from 'vue';
+import { DataIndex } from '@aplus-frontend/antdv/es/vc-table/interface';
+import { EditableTableExpose } from '../../editable-table';
+import { NamePath } from '@aplus-frontend/antdv/es/form/interface';
+import { ApFormItemProps } from '../../ap-form';
+export type EditableAgGridColumnType<RecordType = any, ExtraValueType = 'text', ValueType extends ApTableValueTypes = ApTableValueTypes, MergedValueType extends ExtraValueType | ValueType = ExtraValueType | ValueType> = MergedValueType extends ExtraValueType | ValueType ? Omit<AgGridColumnType<RecordType, ExtraValueType, ValueType>, 'children' | 'customRender' | 'hideInSearch' | 'customRenderFormItem' | 'fieldProps'> & {
+    children?: EditableAgGridColumnType<RecordType, ExtraValueType, ValueType>[];
+    /**
+     * 是否可编辑
+     */
+    editable?: boolean | ((text: any, record: RecordType, index: number) => boolean);
+    /**
+     * 自定义表单，适用于内置`valueType`不满足的情况下使用
+     */
+    customRenderFormItem?: (config: EditableAgGridColumnType<RecordType>, fieldProps: Recordable, editable: boolean, record: RecordType) => any;
+    /**
+     * 指定值类型（将会用于普通列和可编辑表格的渲染）
+     */
+    valueType?: MergedValueType;
+    /**
+     * 值类型额外配置的参数（支持函数）
+     */
+    fieldProps?: FieldPropsType<Extract<MergedValueType, ValueType> extends never ? CommonFieldReturnType : ApTableValueFields[Extract<MergedValueType, ValueType>], RecordType, ExtraValueType, ValueType, MergedValueType>;
+    /**
+     * 自定义渲染，添加了`editable`以及`originalNode`
+     * @param opt
+     * @returns
+     */
+    customRender?: (opt: {
+        value: any;
+        text: any;
+        record: RecordType;
+        index: number;
+        renderIndex: number;
+        column: AgGridColumnType<RecordType>;
+        editable?: boolean;
+        originalNode?: VNode;
+    }) => any;
+    /**
+     * 是否渲染必填标记（只渲染标记不生成校验规则）
+     */
+    markRequired?: boolean;
+} : never;
+export type EditableAgGridProps<RecordType = any> = Omit<AgGridProps<RecordType>, 'columns' | 'dataSource' | 'onChange' | 'card' | 'request' | 'params' | 'defaultData' | 'searchForm' | 'beforeSearchSubmit' | 'manual' | 'size'> & {
+    /**
+     * 列配置
+     */
+    columns?: EditableAgGridColumnType<RecordType, any>[];
+    /**
+     * 表格数据v-model
+     */
+    value?: RecordType[];
+    /**
+     * 表格数据默认值（只生效一次，如果是异步数据，请使用`v-model`）
+     */
+    defaultValue?: RecordType[];
+    'onUpdate:value'?: (value: RecordType[]) => void;
+    /**
+     * 数据修改时触发onChange（也包含数据的删除）
+     * @param value
+     * @returns
+     */
+    onChange?: (value: RecordType[]) => void;
+    /**
+     * 表格最大行数，超过行后将无法调用相关API新增
+     */
+    maxLength?: number;
+    /**
+     * 设置可编辑表格的名字，如果不传，将会使用默认值
+     */
+    name?: any;
+    /**
+     * 当字段值变更的时候触发（注意，向表单设置值并不会触发）
+     * @returns
+     */
+    onFieldChange?: (rowIndex: number, fieldName: DataIndex, newValue: any) => void;
+};
+export type EditableAgGridExpose<RecordType = any, ModelType = RecordType[]> = Omit<EditableTableExpose<ModelType, RecordType>, 'scrollTo' | 'remove'> & {
+    scrollTo: (index: number | 'end') => void;
+    remove: (data: RecordType | RecordType[]) => void;
+};
+export type EditableAgGridFormItemExpose<RecordType = any, ModelType = RecordType[]> = Omit<EditableAgGridExpose<RecordType, ModelType>, 'resetFields' | 'validateFields'>;
+export type EditableAgGridFormItemProps<RecordType = any> = Omit<EditableAgGridProps<RecordType>, 'name' | 'value' | 'onUpdate:value'> & {
+    label?: string;
+    /**
+     * FormItem的name
+     */
+    name: NamePath;
+    /**
+     * 额外的表单项配置属性
+     */
+    formItem?: Partial<Omit<ApFormItemProps, 'name' | 'label'>>;
+};

package/es/src/ag-grid/editable/interface.mjs

@@ -0,0 +1 @@
+

package/es/src/ag-grid/editable/style/css.js

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

package/es/src/ag-grid/editable/style/index.js

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

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

@@ -0,0 +1,5 @@
+import { Recordable } from '../../type';
+import { AgGridProps } from '../interface';
+export declare function getRowKey(record: any, index: number | undefined, rowKey: AgGridProps['rowKey']): any;
+export declare function arrayToObject(array: any[], rowKey: AgGridProps['rowKey']): Recordable;
+export declare function updateArrItem(arr: any[], rowKey: AgGridProps['rowKey'], obj: Recordable): any[];

package/es/src/ag-grid/editable/utils.mjs

@@ -0,0 +1,23 @@
+import { isString as a } from "lodash-unified";
+function c(r, n, t) {
+  if (t)
+    return a(t) ? r[t] : t(r, n);
+}
+function s(r, n) {
+  const t = {};
+  return r.forEach((e, u) => {
+    const o = c(e, u, n);
+    t[o] = e;
+  }), t;
+}
+function g(r, n, t) {
+  return r.map((e, u) => {
+    const o = c(e, u, n);
+    return t[o] ?? e;
+  });
+}
+export {
+  s as arrayToObject,
+  c as getRowKey,
+  g as updateArrItem
+};

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

@@ -0,0 +1,15 @@
+import { Ref, ShallowRef } from 'vue';
+import { ApFormInternalInstance, ApFormExpose } from '../../ap-form';
+import { EditableAgGridProps } from '../editable/interface';
+import { Key } from '@aplus-frontend/antdv/es/_util/type';
+export declare const useEditableApi: <RecordType>(props: EditableAgGridProps<RecordType>, formApi: Ref<ApFormExpose | undefined> | ApFormInternalInstance | undefined, tableData: Ref<RecordType[]>, updateTableData?: (newData: RecordType[]) => void) => {
+    add: (defaultValue?: Partial<RecordType>, insertIndex?: number) => void;
+    addMultiple: (list: number | Partial<RecordType>[], insetIn?: "prefix" | "suffix") => void;
+    remove: (data: RecordType | RecordType[]) => void;
+    removeByKey: (key: Key | Key[]) => void;
+    getRowData: (index: number) => RecordType;
+    getRowsData: () => RecordType[];
+    setRowData: (index: string | number, payload: any, merge?: boolean) => void;
+    clear: () => void;
+    refreshRowIds: ShallowRef<string[], string[]>;
+};

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

@@ -0,0 +1,150 @@
+import { shallowRef as _, computed as S, unref as d, isRef as z } from "vue";
+import { isDef as h } from "../../utils/index.mjs";
+import { isFunction as x, isUndefined as A, isNumber as K, cloneDeep as E, isArray as I, isString as N } from "lodash-unified";
+import { arrayToObject as U } from "../editable/utils.mjs";
+let $ = 0;
+function R() {
+  return `_ag_grid${$++}`;
+}
+const J = (n, m, i, g) => {
+  const w = _([]), y = S(() => z(m) ? d(m) : m);
+  function F(u, r) {
+    const l = d(i)?.length || 0;
+    if (h(n.maxLength) && l >= n.maxLength || !u && x(n.rowKey))
+      return;
+    const f = {
+      ...u || { [n.rowKey]: R() }
+    };
+    y.value?.setFieldValue?.(
+      n.name,
+      f,
+      !0,
+      (o, s) => {
+        const e = c(f, void 0, n.rowKey);
+        if (o[s] ? o[s][e] = f : o[s] = { [e]: f }, !i.value) {
+          i.value = [f];
+          return;
+        }
+        A(r) ? i.value.push(f) : (w.value = i.value.map(
+          (t, v) => v < r ? null : c(t, v, n.rowKey)
+        ).filter(Boolean), i.value.splice(r, 0, f));
+      }
+    );
+  }
+  function j(u, r = "suffix") {
+    const l = d(i)?.length || 0, f = K(u) ? u : u.length;
+    if (h(n.maxLength) && l + f > n.maxLength || K(u) && x(n.rowKey))
+      return;
+    const o = K(u) ? new Array(u).fill(0).map(() => ({ [n.rowKey]: R() })) : E(u), s = U(o, n.rowKey);
+    y.value?.setFieldValue?.(
+      n.name,
+      o,
+      !0,
+      (e, t) => {
+        if (e[t] ? Object.assign(e[t], s) : e[t] = s, !i.value) {
+          i.value = [...o];
+          return;
+        }
+        r === "suffix" ? i.value.push(...o) : (w.value = i.value.map(
+          (v, T) => c(v, T, n.rowKey)
+        ), i.value.unshift(...o));
+      }
+    );
+  }
+  function k(u) {
+    const r = I(u) ? u : [u];
+    y.value?.setFieldValue?.(
+      n.name,
+      void 0,
+      !0,
+      (l, f) => {
+        for (const e of r) {
+          const t = c(e, void 0, n.rowKey);
+          delete l[f][t];
+        }
+        const o = i.value.filter(
+          (e) => !r.includes(e)
+        ), s = i.value.findIndex(
+          (e) => r.includes(e)
+        );
+        w.value = i.value.map(
+          (e, t) => t <= s ? null : c(e, t, n.rowKey)
+        ).filter(Boolean), g?.(o);
+      }
+    );
+  }
+  function c(u, r, l) {
+    if (l)
+      return N(l) ? u[l] : l(u, r);
+  }
+  function L(u) {
+    const r = new Set(I(u) ? u : [u]);
+    r.size !== 0 && y.value?.setFieldValue?.(
+      n.name,
+      void 0,
+      !0,
+      (l, f) => {
+        for (const e of r)
+          delete l[f][e];
+        const o = i.value.filter(
+          (e, t) => !r.has(c(e, t, n.rowKey))
+        ), s = i.value.findIndex(
+          (e, t) => r.has(c(e, t, n.rowKey))
+        );
+        w.value = i.value.map(
+          (e, t) => t <= s ? null : c(e, t, n.rowKey)
+        ).filter(Boolean), g?.(o);
+      }
+    );
+  }
+  function O(u) {
+    return d(i)?.[u];
+  }
+  function V() {
+    return d(i);
+  }
+  function B(u, r, l = !0) {
+    y.value?.setFieldValue?.(
+      n.name,
+      void 0,
+      !0,
+      (f, o) => {
+        const s = i.value.findIndex(
+          (t, v) => u === v
+        );
+        if (!~s)
+          return;
+        const e = c(
+          i.value[s],
+          s,
+          n.rowKey
+        );
+        if (e && !(!f[o] || !f[o][e])) {
+          if (!l) {
+            const t = Object.keys(f[o][e]);
+            for (const v of t)
+              v !== n.rowKey && delete f[o][e][v];
+          }
+          Object.assign(f[o][e], { ...r });
+        }
+      }
+    );
+  }
+  function a() {
+    y.value?.setFieldValue?.(n.name, {}), g?.([]);
+  }
+  return {
+    add: F,
+    addMultiple: j,
+    remove: k,
+    removeByKey: L,
+    getRowData: O,
+    getRowsData: V,
+    setRowData: B,
+    clear: a,
+    refreshRowIds: w
+  };
+};
+export {
+  J as useEditableApi
+};

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

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

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

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

package/es/src/ag-grid/hooks/use-editable-form-item-api.d.ts

@@ -0,0 +1,15 @@
+import { Ref, ShallowRef } from 'vue';
+import { ApFormInternalInstance } from '../../ap-form';
+import { EditableAgGridProps } from '../editable/interface';
+import { Key } from '@aplus-frontend/antdv/es/_util/type';
+export declare const useEditableFormItemApi: <RecordType>(props: EditableAgGridProps<RecordType>, formApi: ApFormInternalInstance | undefined, tableData: Ref<RecordType[]>, shadowName: string) => {
+    add: (defaultValue?: Partial<RecordType>, insertIndex?: number) => void;
+    addMultiple: (list: number | Partial<RecordType>[], insetIn?: "prefix" | "suffix") => void;
+    remove: (data: RecordType | RecordType[]) => void;
+    removeByKey: (key: Key | Key[]) => void;
+    getRowData: (index: number) => RecordType;
+    getRowsData: () => RecordType[];
+    setRowData: (index: number, payload: any, merge?: boolean) => void;
+    clear: () => void;
+    refreshRowIds: ShallowRef<string[], string[]>;
+};