@aplus-frontend/ui 6.21.1 → 6.22.0-beta.0

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

@@ -0,0 +1,377 @@
+import { defineComponent as ce, useSlots as ue, ref as h, computed as d, unref as a, watch as pe, toRef as me, createElementBlock as C, openBlock as p, normalizeStyle as b, normalizeClass as c, createCommentVNode as z, createElementVNode as m, createVNode as R, mergeProps as N, createSlots as fe, withCtx as E, Fragment as we, renderList as ge, createBlock as W, resolveDynamicComponent as he, renderSlot as A, withDirectives as ye, vShow as Se } from "vue";
+import { AgGridVue as Ce } from "ag-grid-vue3";
+import { ModuleRegistry as be, AllCommunityModule as Re } from "ag-grid-community";
+import { Spin as ve, Pagination as xe } from "@aplus-frontend/antdv";
+import { isFunction as v, isUndefined as x } from "lodash-unified";
+import "../config-provider/index.mjs";
+import { ApForm as Be } from "../ap-form/index.mjs";
+import { noRenderAsFormItemValueList as Fe } from "../ap-table/constants.mjs";
+import { getColumnOrder as O, updateFormProps as Ie, getFieldProps as Te, getSearchFormItemRenderNode as ke, recursionApColumns as Ke } from "../ap-table/utils.mjs";
+import { useTablePaging as Pe } from "../ap-table/hooks/use-table-paging-ng.mjs";
+import { dataIndexToField as De } from "../ap-grid/utils/col.mjs";
+import { isDef as ze } from "../utils/index.mjs";
+import "./components/header-cell/index.vue.mjs";
+import "./components/body-cell/index.vue.mjs";
+import Ne from "./hooks/use-row-selection.mjs";
+import { useNamespace as Ee } from "../config-provider/hooks/use-namespace.mjs";
+import { useGlobalConfig as We } from "../config-provider/hooks/use-global-config.mjs";
+import Ae from "./components/body-cell/index.vue2.mjs";
+import Oe from "./components/header-cell/index.vue2.mjs";
+const no = /* @__PURE__ */ ce({
+  name: "AgGrid",
+  __name: "index",
+  props: {
+    dropdownPrefixCls: {},
+    bordered: { type: Boolean },
+    locale: {},
+    onChange: {},
+    onResizeColumn: {},
+    getPopupContainer: {},
+    scroll: {},
+    sortDirections: {},
+    showSorterTooltip: { type: [Boolean, Object] },
+    prefixCls: {},
+    rowKey: { 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: {},
+    columns: {},
+    rowSelection: { type: Boolean },
+    card: { type: Boolean },
+    params: {},
+    request: {},
+    defaultData: {},
+    dataSource: {},
+    onLoadingChange: {},
+    onShownColumnsChange: {},
+    searchForm: { type: [Boolean, Object], default: void 0 },
+    beforeSearchSubmit: {},
+    pagination: { type: [Boolean, Object], default: void 0 },
+    searchFormWrapperStyle: {},
+    tableWrapperStyle: {},
+    wrapperStyle: {},
+    manual: { type: Boolean, default: void 0 },
+    size: { default: "mini" },
+    adaptive: { type: Boolean },
+    columnResizable: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: void 0 },
+    summary: {}
+  },
+  setup(M) {
+    be.registerModules([Re]);
+    const t = M, V = ue(), { e: f, b: i, em: G } = Ee("ag-grid"), B = h();
+    let w = !1, F = 0;
+    const I = We("valueTypeMap"), T = d(() => {
+      var e, r, n;
+      return F++, ((n = (r = (e = t.columns) == null ? void 0 : e.filter(
+        (o) => !o.hideInSearch && o.dataIndex && (o.valueType || o.customRenderFormItem) && !Fe.includes(o.valueType)
+      )) == null ? void 0 : r.sort((o, l) => {
+        let s = O(o.order);
+        return O(l.order) - s;
+      })) == null ? void 0 : n.map((o) => {
+        const l = Ie(
+          o,
+          Te(o.fieldProps, {})
+        ), s = {
+          ...o,
+          fieldProps: {
+            label: o.title,
+            name: o.dataIndex,
+            // tips: 在表格中的查询表单项默认是带边框的
+            bordered: !0,
+            ...l || {},
+            _signal: F
+          },
+          renderNode: void 0
+        };
+        return s.renderNode = ke(
+          s,
+          a(I)
+        ), s;
+      })) || [];
+    }), g = h([]);
+    function L() {
+      var e;
+      return ((e = t.columns) == null ? void 0 : e.filter((r) => !r.hideInTable)) || [];
+    }
+    pe(
+      () => t.columns,
+      () => {
+        var r;
+        const e = L();
+        g.value = e, (r = t.onShownColumnsChange) == null || r.call(t, e);
+      },
+      {
+        deep: !0,
+        immediate: !0
+      }
+    );
+    const $ = d(() => {
+      const e = a(g);
+      function r(n) {
+        return n.map((o) => {
+          var s;
+          const l = {
+            field: De(o.dataIndex),
+            colId: ze(o.key) ? String(o.key) : void 0,
+            sortable: !!o.sorter,
+            comparator: o.sorter === !0 ? () => 0 : o.sorter,
+            headerComponentParams: {
+              column: o
+            },
+            cellRendererParams: {
+              column: o,
+              extraValueType: a(I)
+            },
+            resizable: o.resizable,
+            width: o.width,
+            minWidth: o.minWidth,
+            maxWidth: o.maxWidth,
+            flex: o.width ? void 0 : 1,
+            // 如果没有设置确切的宽度，则设置为可自由伸缩列
+            pinned: o.fixed,
+            cellClass: (u) => {
+              const S = o.cellClass || "", ie = v(S) ? S(u.data, u.node) : S;
+              return [
+                `${G("cell", o.align || "left")}`,
+                ie
+              ].flat().filter(Boolean);
+            }
+          };
+          return (s = o.children) != null && s.length ? {
+            ...l,
+            children: r(o.children)
+          } : l;
+        });
+      }
+      return r(e);
+    }), j = h({
+      headerComponent: Oe,
+      cellRenderer: Ae,
+      resizable: t.columnResizable,
+      suppressMovable: !0,
+      cellDataType: !1
+    }), q = {
+      asc: "ascend",
+      desc: "descend"
+    };
+    function U() {
+      var r;
+      const e = (r = B.value.getColumns()) == null ? void 0 : r.filter((n) => n.getSort() !== void 0);
+      if (e && e.length > 0) {
+        const n = e[0], o = n.getColDef(), l = n.getSort();
+        K(void 0, void 0, {
+          column: o,
+          field: o.field,
+          order: l ? q[l] : null
+        });
+      }
+    }
+    const H = d(() => Ke(a(g), (e) => {
+      if (e.sorter === !0)
+        return e.key || e.dataIndex;
+    }).filter(Boolean)), {
+      formRef: J,
+      submit: Q,
+      reset: X,
+      data: y,
+      tableProps: k,
+      handleTableChangeOptional: K
+    } = Pe({
+      async request(e) {
+        var n;
+        if (w = !1, !x(t.dataSource)) {
+          const o = e.pageSize * (e.current - 1);
+          return {
+            data: (t.pagination === !1 ? t.dataSource : t.dataSource.slice(o, o + e.pageSize)) || [],
+            total: t.dataSource.length || 0
+          };
+        }
+        const r = await ((n = t.request) == null ? void 0 : n.call(t, e));
+        return {
+          data: (r == null ? void 0 : r.data) || [],
+          total: (r == null ? void 0 : r.total) || 0
+        };
+      },
+      namespace: "ap-grid",
+      filterFields: h([]),
+      params: me(t, "params"),
+      defaultData: t.defaultData,
+      manual: t.manual,
+      formatParams: t.beforeSearchSubmit,
+      pagination: t.pagination,
+      sortFields: H
+    }), { select: Y, unSelect: Z, selectedRows: P, selectedRowKeys: _ } = Ne({
+      ...t.rowSelection === !0 ? {} : t.rowSelection,
+      dataSource: d(() => y.records),
+      rowKey: t.rowKey
+    }), ee = {
+      checkbox: "multiRow",
+      radio: "singleRow"
+    }, oe = d(() => {
+      if (!t.rowSelection)
+        return;
+      const { type: e = "checkbox", disabled: r } = t.rowSelection === !0 ? {} : t.rowSelection;
+      return {
+        mode: ee[e],
+        isRowSelectable: (n) => r ? !r(n.data) : !0
+      };
+    }), te = d(() => {
+      if (!t.rowSelection)
+        return;
+      const e = t.rowSelection === !0 ? {} : t.rowSelection;
+      return {
+        sortable: !1,
+        resizable: !1,
+        width: e.columnWidth || 60,
+        pinned: e.fixed
+      };
+    });
+    function D(e) {
+      return v(t.rowKey) ? t.rowKey(e) : e[t.rowKey];
+    }
+    const re = ({ api: e }) => {
+      if (!t.rowSelection)
+        return;
+      const r = P.value;
+      if (console.log("run restore", r), !r.length)
+        return;
+      w = !1;
+      const n = [];
+      e.forEachNode((o) => {
+        const l = o.data, s = D(l);
+        r.find((u) => D(u) === s) && n.push(o);
+      }), e.setNodesSelected({ nodes: n, newValue: !0 }), setTimeout(() => {
+        w = !0;
+      }, 0);
+    }, ae = (e) => {
+      w && (e.node.isSelected() ? Y(e.data) : Z(e.data));
+    }, ne = d(
+      () => x(t.loading) ? y.loading : t.loading
+    ), le = d(() => [
+      i(),
+      t.card ? null : i("wrapper"),
+      t.adaptive ? i("adaptive") : null
+    ].filter(Boolean)), se = (e, r) => {
+      K({ current: e, pageSize: r });
+    };
+    function de(e) {
+      const r = e.data;
+      return v(t.rowKey) ? t.rowKey(r) : r[t.rowKey];
+    }
+    return (e, r) => {
+      var n, o;
+      return p(), C("div", {
+        class: c(le.value),
+        style: b(e.wrapperStyle)
+      }, [
+        a(x)(e.dataSource) && e.searchForm !== !1 && T.value.length > 0 ? (p(), C("div", {
+          key: 0,
+          class: c(e.card ? a(f)("search-wrapper") : null),
+          style: b(e.searchFormWrapperStyle)
+        }, [
+          R(a(Be).SearchForm, N(e.searchForm || {}, {
+            ref_key: "formRef",
+            ref: J,
+            "custom-reset": "",
+            "submit-loading": a(k).loading,
+            onSubmit: a(Q),
+            onReset: a(X)
+          }), fe({
+            default: E(() => [
+              (p(!0), C(we, null, ge(T.value, (l) => (p(), W(he(l.renderNode), {
+                key: l.dataIndex
+              }))), 128))
+            ]),
+            _: 2
+          }, [
+            V.searchFormExtra ? {
+              name: "extra",
+              fn: E(() => [
+                A(e.$slots, "searchFormExtra")
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1040, ["submit-loading", "onSubmit", "onReset"])
+        ], 6)) : z("", !0),
+        m("div", {
+          class: c([a(f)("table-wrapper"), e.card ? a(f)("table-wrapper-card") : null]),
+          style: b(e.tableWrapperStyle)
+        }, [
+          m("div", {
+            class: c(a(i)("header-wrapper"))
+          }, [
+            A(e.$slots, "title", {
+              selectedRows: a(P),
+              selectedRowKeys: a(_),
+              shownColumns: g.value
+            })
+          ], 2),
+          m("div", {
+            class: c(a(i)("grid-wrapper"))
+          }, [
+            R(a(Ce), {
+              style: { height: "100%" },
+              "row-data": a(y).records,
+              "column-defs": $.value,
+              "default-col-def": j.value,
+              "locale-text": {
+                noRowsToShow: ""
+                // 为了隐藏默认的无数据提示，因为外部已经自行实现了loading
+              },
+              "row-selection": oe.value,
+              "selection-column-def": te.value,
+              "get-row-id": de,
+              "pinned-top-row-data": (n = e.summary) == null ? void 0 : n.top,
+              "pinned-bottom-row-data": (o = e.summary) == null ? void 0 : o.bottom,
+              onSortChanged: U,
+              onGridReady: r[0] || (r[0] = (l) => B.value = l.api),
+              onRowDataUpdated: re,
+              onRowSelected: ae
+            }, null, 8, ["row-data", "column-defs", "default-col-def", "row-selection", "selection-column-def", "pinned-top-row-data", "pinned-bottom-row-data"]),
+            ye(m("div", {
+              class: c(a(f)("table-loading-wrapper"))
+            }, [
+              R(a(ve), { delay: 300 })
+            ], 2), [
+              [Se, ne.value]
+            ])
+          ], 2),
+          m("div", {
+            class: c(a(i)("pagination-wrapper"))
+          }, [
+            e.pagination !== !1 ? (p(), W(a(xe), N({
+              key: 0,
+              class: a(i)("pagination")
+            }, a(k).pagination, { onChange: se }), null, 16, ["class"])) : z("", !0)
+          ], 2)
+        ], 6)
+      ], 6);
+    };
+  }
+});
+export {
+  no as default
+};

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

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

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

@@ -0,0 +1,194 @@
+import { CSSProperties, VNode } from 'vue';
+import { ApTablePaginationConfig, ApTableValueFields, ApTableValueTypes, CommonFieldReturnType, ExtraProColumnType, FieldPropsType, RequestData, ValueEnum } from '../ap-table/interface';
+import { TableProps } from '@aplus-frontend/antdv';
+import { ApFormSearchFormProps } from '../ap-form/interface';
+import { Recordable } from '../type';
+import { SortOrder, TableRowSelection } from '@aplus-frontend/antdv/es/table/interface';
+import { ColDef, IRowNode } from 'ag-grid-community';
+export type AgGridColumnType<RecordType = any, ExtraValueType = 'text', ValueType extends ApTableValueTypes = ApTableValueTypes, MergedValueType extends ExtraValueType | ValueType = ExtraValueType | ValueType> = MergedValueType extends ExtraValueType | ValueType ? Omit<ExtraProColumnType<RecordType>, 'sorter' | 'rowSpan' | 'customCell' | 'customHeaderCell' | 'minWidth' | 'width' | 'maxWidth' | 'className' | 'class'> & {
+    children?: AgGridColumnType<RecordType, ExtraValueType, ValueType, MergedValueType>[];
+    /**
+     * 表单项所占据的格子数（1-24格）
+     */
+    span?: number;
+    tooltip?: string | ((column: AgGridColumnType<RecordType, ExtraValueType, ValueType, MergedValueType>) => VNode);
+    /**
+     * 是否可以复制
+     */
+    copyable?: boolean;
+    /**
+     * 配置溢出隐藏的方式
+     * @description 如果传递数字，则表示需要满足溢出隐藏的行数，此时默认会显示tooltip
+     */
+    ellipsis?: number | boolean | 'ellipsis' | 'title' | 'tooltip';
+    /**
+     * 是否搜索表单中隐藏
+     */
+    hideInSearch?: boolean;
+    /**
+     * 是否在表格中隐藏
+     */
+    hideInTable?: boolean;
+    /**
+     * 值的枚举，会自动转化把值当成 key 来取出要显示的内容（也会作为select等组件的选项）
+     */
+    valueEnum?: ValueEnum;
+    /**
+     * 自定义查询表单渲染
+     */
+    customRenderFormItem?: (config: AgGridColumnType<RecordType>) => any;
+    /**
+     * 自定义渲染文本，和customRender相比，其必须返回字符串，并且后续的渲染（例如copy/ellipsis）都将使用这个值
+     */
+    renderText?: (option: {
+        value: any;
+        text: any;
+        record: RecordType;
+        column: AgGridColumnType<RecordType>;
+    }) => string;
+    /**
+     * 指定值类型（将会用于默认渲染和查询表单生成）
+     */
+    valueType?: MergedValueType;
+    /**
+     * 值类型额外配置的参数（用于查询表单渲染）
+     */
+    fieldProps?: FieldPropsType<Extract<MergedValueType, ValueType> extends never ? CommonFieldReturnType : ApTableValueFields[Extract<MergedValueType, ValueType>], RecordType, ExtraValueType, ValueType, MergedValueType>;
+    /**
+     * 用于表单项排序的字段
+     * @description 值越大，越排在前面，请设置正整数，设置为0或负数将会无效
+     */
+    order?: number;
+    /**
+     * 用于表格列排序，设置为`true`表示开启后端排序，传入自定义比较函数表示使用前端排序
+     */
+    sorter?: true | ColDef['comparator'];
+    /**
+     * 自定义渲染，添加了`originalNode、originalText`
+     * @param opt
+     * @returns
+     */
+    customRender?: (opt: {
+        value: any;
+        text: any;
+        record: RecordType;
+        column: AgGridColumnType<RecordType>;
+        originalNode?: VNode;
+        originalText?: any;
+    }) => any;
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    /**
+     * 为当前单元格添加类名
+     * @returns
+     */
+    cellClass?: string | string[] | ((data: RecordType, node: IRowNode<RecordType>) => string | string[] | undefined) | undefined;
+} : null;
+export type AgGridRowSelection<RecordType> = Pick<TableRowSelection<RecordType>, 'type' | 'fixed' | 'columnWidth' | 'defaultSelectedRowKeys'> & {
+    /**
+     * 设置禁用的列
+     * @param row
+     * @returns
+     */
+    disabled?: (row: RecordType) => boolean;
+};
+export type AgGridProps<RecordType = any, ParamsType = any> = Omit<TableProps<RecordType>, 'columns' | 'pagination' | 'dataSource' | 'size' | 'rowSelection' | 'rowClassName' | 'footer' | 'loading' | 'sticky'> & {
+    /**
+     * 列配置
+     */
+    columns?: AgGridColumnType<RecordType, any>[];
+    /**
+     * 行选中配置
+     */
+    rowSelection?: true | AgGridRowSelection<RecordType>;
+    /**
+     * 是否启用卡片样式
+     */
+    card?: boolean;
+    /**
+     * request额外请求的参数
+     * 数据变化后将会重新发起网络请求
+     */
+    params?: ParamsType;
+    /**
+     * 请求获取dataSource
+     * @param params
+     * @returns
+     */
+    request?: (params: Partial<ParamsType> & {
+        pageSize: number;
+        current: number;
+        sort?: Record<string, SortOrder>;
+        filter?: Recordable<any>;
+    }) => Promise<Partial<RequestData<RecordType>>>;
+    /**
+     * 表格的默认数据源，这些数据源将会在第一次请求后被替换
+     */
+    defaultData?: RecordType[];
+    /**
+     * 表格的最终数据源（设置后request和defaultData都不会生效），离线表格的效果
+     */
+    dataSource?: RecordType[];
+    /**
+     * 表格loading状态变更后触发
+     * @param loading
+     * @returns
+     */
+    onLoadingChange?: (loading: boolean) => void;
+    /**
+     * 当可显示列变更后触发
+     * @returns
+     */
+    onShownColumnsChange?: (columns: AgGridColumnType<RecordType>[]) => void;
+    /**
+     * 查询表单配置，设置为false表示不渲染查询表单
+     */
+    searchForm?: false | ApFormSearchFormProps;
+    /**
+     * 查询表单提交之前，一般用于自定义对查询数据进行变更
+     * @param params
+     * @returns
+     */
+    beforeSearchSubmit?: (params: Partial<ParamsType>) => any;
+    /**
+     * 是否显示分页器（特定的分页器）或者指定默认的当前页和pageSize
+     */
+    pagination?: false | ApTablePaginationConfig;
+    /**
+     * 自定义查询表单容器样式
+     */
+    searchFormWrapperStyle?: CSSProperties;
+    /**
+     * 自定义表格样式
+     */
+    tableWrapperStyle?: CSSProperties;
+    /**
+     * 表格最外层容器自定义样式
+     */
+    wrapperStyle?: CSSProperties;
+    /**
+     * 是否手动发起第一次网络请求
+     */
+    manual?: boolean;
+    /**
+     * 表格尺寸（只支持中等大小和小尺寸）
+     */
+    size?: 'medium' | 'mini';
+    /**
+     * 表格是否自适应高度
+     */
+    adaptive?: boolean;
+    /**
+     * 设置表格列是否可以resize，还可以进行更多可变尺寸配置
+     */
+    columnResizable?: boolean;
+    loading?: boolean;
+    /**
+     * 设置总结栏
+     */
+    summary?: {
+        top?: RecordType[];
+        bottom?: RecordType[];
+    };
+};

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

@@ -0,0 +1 @@
+

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

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

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

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

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

@@ -343,7 +343,7 @@ const Gt = /* @__PURE__ */ $e({
         return (r = s.value) == null ? void 0 : r.scrollToRow(l, t);
     }
     return B(
-      () => [o.columnResizable, o.columns],
+      [o.columnResizable, o.columns],
       () => {
         var t;
         const e = _e();

package/es/src/ap-grid/utils/col.d.ts

@@ -1,11 +1,22 @@
+import { DataIndex } from '@aplus-frontend/antdv/es/vc-table/interface';
 import { ApGridColumnType, ColConfigType } from '../interface';
 import { ValueTypeRenderConfig } from '../../config-provider';
+export declare function dataIndexToField(dataIndex: DataIndex): string | undefined;
+export declare function transformFixed(fixed: ApGridColumnType['fixed']): "left" | "right" | undefined;
 /**
  * 转换分组页
  * @param columnConfig
  * @returns
  */
 export declare function transformToColGroup<RecordType>(columnConfig: ApGridColumnType<RecordType>, color: string, className: string): ColConfigType;
+/**
+ * 自定义渲染表格内容（返回节点）
+ * @param param0
+ * @param columnConfig
+ * @param extraValueType
+ * @returns
+ */
+export declare const contentCustom: ({ value, ...restProps }: any, columnConfig: any, extraValueType: any) => any;
 /**
  * 转换渲染列
  * @param columnConfig