vft 0.0.440 → 0.0.442

package/es/components/table/table.vue2.js

@@ -1,42 +1,42 @@
-import { defineComponent as T, useAttrs as ee, ref as u, getCurrentInstance as ae, computed as R, unref as e, watch as te, nextTick as oe, toRaw as le, createBlock as f, openBlock as m, withCtx as c, createElementVNode as P, normalizeClass as re, createVNode as p, createCommentVNode as D, mergeProps as H, withDirectives as ne, renderSlot as _ } from "vue";
-import { VftEmpty as ce } from "../empty/index.js";
-import { vLoading as ie } from "../loading/directive.js";
-import { deepMerge as F, isClient as se, omit as ge, isFunction as de } from "@vft/utils";
-import { FormCompEnum as ue } from "../../utils/form-register.js";
+import { defineComponent as N, useAttrs as ae, ref as s, getCurrentInstance as te, computed as P, unref as e, watch as oe, nextTick as le, toRaw as re, createBlock as f, openBlock as m, withCtx as c, createElementVNode as D, normalizeClass as ne, createVNode as p, createCommentVNode as H, mergeProps as _, withDirectives as ce, renderSlot as h, normalizeProps as ie, guardReactiveProps as se } from "vue";
+import { VftEmpty as ge } from "../empty/index.js";
+import { vLoading as de } from "../loading/directive.js";
+import { deepMerge as F, isClient as ue, omit as fe, isFunction as me } from "@vft/utils";
+import { FormCompEnum as pe } from "../../utils/form-register.js";
 import "@vueuse/core";
 import "../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { useForm as fe } from "../super-form/use/use-form.js";
-import { useNamespace as me } from "../../hooks/use-namespace/index.js";
+import { useForm as he } from "../super-form/use/use-form.js";
+import { useNamespace as be } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
 import "../icon/index.js";
-import { VftClientOnly as pe } from "../client-only/index.js";
-import { VftPagination as he } from "../pagination/index.js";
-import { VftSkeleton as be } from "../skeleton/index.js";
-import { VftSuperForm as Ce } from "../super-form/index.js";
-import { VxeGrid as ye } from "vxe-table";
-import we from "xe-utils";
-import { PAGE_SIZE as ve } from "./constants.js";
-import { useColumns as xe } from "./use/use-columns.js";
-import { useDataSource as ke } from "./use/use-data-source.js";
-import { useLoading as Se } from "./use/use-loading.js";
-import { usePagination as Be } from "./use/use-pagination.js";
-import { EmptyEnum as ze } from "../empty/constants.js";
-const Re = {
+import { VftClientOnly as Ce } from "../client-only/index.js";
+import { VftPagination as ye } from "../pagination/index.js";
+import { VftSkeleton as we } from "../skeleton/index.js";
+import { VftSuperForm as ve } from "../super-form/index.js";
+import { VxeGrid as ke } from "vxe-table";
+import xe from "xe-utils";
+import { PageSize as T } from "./constants.js";
+import { useColumns as Se } from "./use/use-columns.js";
+import { useDataSource as Be } from "./use/use-data-source.js";
+import { useLoading as Re } from "./use/use-loading.js";
+import { usePagination as ze } from "./use/use-pagination.js";
+import { EmptyEnum as Pe } from "../empty/constants.js";
+const De = {
   "vft-loading-text": "加载中..."
-}, Pe = T({
+}, He = N({
   name: "vft-table"
-}), ta = /* @__PURE__ */ T({
-  ...Pe,
+}), la = /* @__PURE__ */ N({
+  ...He,
   props: {
     sticky: {
       type: [Boolean, Object]
     },
     api: {},
     pageSize: {
-      default: ve
+      default: T
     },
     total: {},
     rowkey: {
@@ -74,17 +74,23 @@ const Re = {
     },
     pagination: {},
     formOptions: {},
+    onChange: {},
+    emptyCfg: {
+      default: () => ({
+        type: Pe.NoData
+      })
+    },
     layouts: {},
     columns: {},
     pagerConfig: {},
     proxyConfig: {},
     toolbarConfig: {
-      default: {
+      default: () => ({
         enabled: !1,
         slots: {
           buttons: "toolbarButtons"
         }
-      }
+      })
     },
     formConfig: {},
     zoomConfig: {},
@@ -92,9 +98,7 @@ const Re = {
     id: {},
     data: {},
     height: {},
-    minHeight: {
-      default: 80
-    },
+    minHeight: {},
     maxHeight: {},
     stripe: {
       type: Boolean,
@@ -167,18 +171,18 @@ const Re = {
       type: [Boolean, String, Number]
     },
     columnConfig: {
-      default: {
+      default: () => ({
         drag: !1,
         resizable: !0,
         minWidth: "15%"
-      }
+      })
     },
     rowConfig: {
-      default: {
+      default: () => ({
         isHover: !0,
         isCurrent: !0,
         useKey: !0
-      }
+      })
     },
     cellConfig: {},
     headerCellConfig: {},
@@ -219,14 +223,14 @@ const Re = {
     scrollX: {},
     scrollY: {},
     virtualXConfig: {
-      default: {
+      default: () => ({
         enabled: !1
-      }
+      })
     },
     virtualYConfig: {
-      default: {
+      default: () => ({
         enabled: !1
-      }
+      })
     },
     scrollbarConfig: {},
     params: {},
@@ -385,67 +389,66 @@ const Re = {
     "toolbar-tool-click",
     "zoom"
   ],
-  setup(De, {
-    expose: E,
-    emit: A
+  setup(_e, {
+    expose: A,
+    emit: E
   }) {
-    const s = me("table"), l = A, N = ee(), h = u(), O = u([]), g = u(), V = ae(), o = R(() => F(V.props, e(g))), {
-      getLoading: I,
-      setLoading: q
-    } = Se(o), {
+    const l = E, g = be("table"), O = ae(), b = s(), C = s(), V = s([]), d = s(), $ = te(), t = P(() => F($.props, e(d))), {
+      getLoading: q,
+      setLoading: G
+    } = Re(t), {
       getPaginationInfo: i,
-      setPagination: d,
-      getShowPagination: b,
-      getCurrentPage: G
-    } = Be(o), {
+      setPagination: u,
+      getCurrentPage: I
+    } = ze(t), {
       getViewColumns: K,
       setColumns: L
-    } = xe(o);
-    te(() => G(), (a) => {
-      oe(() => {
-        C({
+    } = Se(t);
+    oe(() => I(), (a) => {
+      le(() => {
+        y({
           seqConfig: {
-            startIndex: (a - 1) * (i.value?.pageSize || e(o).pageSize)
+            startIndex: (a - 1) * (i.value?.pageSize || e(t).pageSize || T)
           }
         });
       });
     }, {
       immediate: !0
     });
-    function C(a) {
-      g.value = {
-        ...e(g),
+    function y(a) {
+      d.value = {
+        ...e(d),
         ...a
       };
     }
     const {
-      getDataSourceRef: y,
+      getDataSourceRef: w,
       handleTableChange: M,
       reload: X,
       deleteTableDataRecord: Y,
-      insertTableDataRecord: $,
-      updateTableData: j,
-      updateTableDataRecord: W,
-      setTableData: w,
-      getDataSource: U,
-      getRawDataSource: v,
+      insertTableDataRecord: j,
+      updateTableData: W,
+      updateTableDataRecord: U,
+      setTableData: v,
+      getDataSource: J,
+      getRawDataSource: k,
       tableSearch: x
-    } = ke(o, {
-      tableData: O,
-      setLoading: q,
+    } = Be(t, {
+      tableData: V,
+      setLoading: G,
       getPaginationInfo: i,
-      setPagination: d
+      setPagination: u
     }, l);
-    function k(...a) {
-      a?.[0]?.pageSize && d({
+    function S(a) {
+      a?.pageSize && u({
         currentPage: 1
-      }), M.call(void 0, ...a), l("change", ...a);
+      }), M(a), l("change", a);
       const {
-        onChange: t
-      } = e(o);
-      t && de(t) && t.call(void 0, ...a);
+        onChange: o
+      } = e(t);
+      o && me(o) && o(a);
     }
-    const S = {};
+    const B = {};
     [
       "update:data",
       "keydown-start",
@@ -567,41 +570,40 @@ const Re = {
       "toolbar-tool-click",
       "zoom"
     ].forEach((a) => {
-      const t = we.camelCase(`on-${a}`);
-      S[t] = (...n) => l(a, ...n);
+      const o = xe.camelCase(`on-${a}`);
+      B[o] = (...n) => l(a, ...n);
     });
-    const r = R(() => {
-      const a = e(y), t = {
-        ...N,
-        ...e(o),
-        columns: le(e(K)),
-        loading: e(I),
+    const r = P(() => {
+      const a = e(w), o = {
+        ...O,
+        ...e(t),
+        columns: re(e(K)),
+        loading: e(q),
         data: a,
-        ...S
+        ...B
       };
-      return se && (t.maxHeight = e(o)?.maxHeight ? e(o)?.maxHeight : window.innerHeight - e(o)?.extraSysHeight - (o.value?.showPager ? o.value?.pageHeight : 0) + "px"), t;
-    }), B = {
-      setPagination: d,
+      return ue && (o.maxHeight = e(t)?.maxHeight ? e(t)?.maxHeight : `${window.innerHeight - e(t)?.extraSysHeight - (t.value?.showPager ? t.value?.pageHeight || 40 : 0)}px`, o.minHeight = e(t)?.toolbarConfig?.custom ? 300 : e(t)?.minHeight), o;
+    }), R = {
+      setPagination: u,
       emit: l,
-      setProps: C,
+      setProps: y,
       reload: X,
-      getShowPagination: b,
       deleteTableDataRecord: Y,
-      insertTableDataRecord: $,
-      updateTableDataRecord: W,
-      updateTableData: j,
-      setTableData: w,
-      getDataSource: U,
-      getDataSourceRef: y,
+      insertTableDataRecord: j,
+      updateTableDataRecord: U,
+      updateTableData: W,
+      setTableData: v,
+      getDataSource: J,
+      getDataSourceRef: w,
       setColumns: L,
-      getRawDataSource: v,
+      getRawDataSource: k,
       tableSearch: x
     };
-    l("register", B);
-    const Z = {
+    l("register", R);
+    const Q = {
       field: "_filterTableData",
       label: "",
-      type: ue.SEARCH,
+      type: pe.SEARCH,
       componentProps: ({}) => ({
         onChange: (a) => {
           z({
@@ -609,8 +611,8 @@ const Re = {
           });
         }
       })
-    }, [J] = fe(F({
-      schemas: [r.value?.formOptions?.addSearchAllSchema ? Z : {}],
+    }, [Z] = he(F({
+      schemas: [r.value?.formOptions?.addSearchAllSchema ? Q : {}],
       rowProps: {
         justify: "start"
       },
@@ -624,52 +626,53 @@ const Re = {
         btnText: "搜索"
       },
       actionInline: !0
-    }, ge(
+    }, fe(
       r.value?.formOptions,
       ["showActionForm", "addSearchAllSchema"]
       // 'union' | 'intersection' | 'concat' | 'replace' = 'union'
     ), "replace")), z = (a) => {
       Reflect.has(a, "_filterTableData") && x(a._filterTableData), l("form-submit", a);
-    }, Q = () => {
-      w(v()), l("form-reset");
+    }, ee = () => {
+      v(k()), l("form-reset");
     };
-    return E({
-      table: h,
-      ...B
-    }), (a, t) => (m(), f(e(pe), null, {
-      fallback: c(() => [p(e(be))]),
-      default: c(() => [P("div", {
-        class: re(e(s).b())
-      }, [p(e(ye), H({
+    return A({
+      table: b,
+      pageRef: C,
+      ...R
+    }), (a, o) => (m(), f(e(Ce), null, {
+      fallback: c(() => [p(e(we))]),
+      default: c(() => [D("div", {
+        class: ne([e(g).b()])
+      }, [p(e(ke), _({
         ref_key: "xGrid",
-        ref: h
+        ref: b
       }, r.value), {
-        toolbarButtons: c(() => [_(a.$slots, "toolbar-left"), r.value?.formOptions?.showActionForm ? (m(), f(e(Ce), {
+        toolbarButtons: c(() => [h(a.$slots, "toolbar-left"), r.value?.formOptions?.showActionForm ? (m(), f(e(ve), {
           key: 0,
-          onRegister: e(J),
+          onRegister: e(Z),
           onSubmit: z,
-          onReset: Q
-        }, null, 8, ["onRegister"])) : D("", !0), _(a.$slots, "toolbar-right")]),
-        empty: c(() => [p(e(ce), {
-          type: e(ze).NoData
-        }, null, 8, ["type"])]),
-        loading: c(() => [ne(P("div", Re, null, 512), [[e(ie), r.value.loading]])]),
+          onReset: ee
+        }, null, 8, ["onRegister"])) : H("", !0), h(a.$slots, "toolbar-right")]),
+        empty: c(() => [h(a.$slots, "empty", {}, () => [p(e(ge), ie(se(r.value.emptyCfg)), null, 16)])]),
+        loading: c(() => [ce(D("div", De, null, 512), [[e(de), !!r.value.loading]])]),
         _: 3
-      }, 16), r.value.showPager && e(b) ? (m(), f(e(he), H({
-        key: 0
+      }, 16), r.value.showPager ? (m(), f(e(ye), _({
+        key: 0,
+        ref_key: "pageRef",
+        ref: C
       }, e(i), {
-        class: [e(s).e("pager"), e(s).m("pager-" + e(i).pagePlacement)],
-        onCurrentChange: t[0] || (t[0] = (n) => k({
+        class: [e(g).e("pager"), e(g).m(`pager-${e(i)?.pagePlacement}`)],
+        onCurrentChange: o[0] || (o[0] = (n) => S({
           currentPage: n
         })),
-        onSizeChange: t[1] || (t[1] = (n) => k({
+        onSizeChange: o[1] || (o[1] = (n) => S({
           pageSize: n
         }))
-      }), null, 16, ["class"])) : D("", !0)], 2)]),
+      }), null, 16, ["class"])) : H("", !0)], 2)]),
       _: 3
     }));
   }
 });
 export {
-  ta as default
+  la as default
 };

package/es/components/table/types.d.ts

@@ -1,3 +1,4 @@
+import type { EmptyProps } from 'vft/es/components/empty';
 import { type PaginationProps } from 'vft/es/components/pagination';
 import type { VxeGridInstance, VxeGridProps, VxeTableDefines } from 'vxe-table';
 import { type SuperFormProps } from '../super-form';
@@ -6,101 +7,105 @@ import type { Recordable } from '../types';
 export type TableInstance = VxeGridInstance;
 /** 粘性定位选项接口 */
 export interface StickyOption {
-    /** 距离顶部的偏移量 */
+    /** 距离顶部的偏移量，单位为像素 */
     offsetTop: number;
-    /** 获取容器元素 */
+    /** 获取容器元素，用于指定粘性定位的容器 */
     getContainer?: HTMLElement;
 }
 /** 数据获取设置接口 */
 export interface FetchSetting {
-    /** 请求接口当前页数字段名 */
+    /** 请求接口当前页数字段名，默认为 'page' */
     pageField: string;
-    /** 每页显示条数字段名 */
+    /** 每页显示条数字段名，默认为 'pageSize' */
     sizeField: string;
-    /** 请求结果列表字段名，支持 a.b.c 格式 */
+    /** 请求结果列表字段名，支持 a.b.c 格式，默认为 'data.items' */
     listField: string;
-    /** 请求结果总数字段名，支持 a.b.c 格式 */
+    /** 请求结果总数字段名，支持 a.b.c 格式，默认为 'data.total' */
     totalField: string;
 }
 /** 表格属性接口 */
 export interface TableProps extends VxeGridProps {
-    /** 是否启用粘性定位 */
+    /** 是否启用粘性定位，可以是布尔值或配置对象 */
     sticky?: boolean | StickyOption;
-    /** 数据获取接口 */
+    /** 数据获取接口函数，用于远程获取表格数据 */
     api?: (params?: any) => Promise<any>;
-    /** 每页显示条数 */
+    /** 每页显示条数，默认为 15 */
     pageSize?: number;
-    /** 总条数 */
+    /** 数据总条数 */
     total?: number;
-    /** 行键字段名 */
+    /** 行键字段名，用于唯一标识每一行数据 */
     rowkey?: string;
-    /** 是否立即加载数据 */
+    /** 是否在组件挂载后立即加载数据，默认为 true */
     immediate?: boolean;
-    /** 数据获取配置 */
+    /** 数据获取配置，用于自定义请求参数和响应数据的字段映射 */
     fetchSetting?: Partial<FetchSetting>;
-    /** 是否监听接口变化 */
+    /** 是否监听接口变化，当 api 属性变化时自动重新请求数据 */
     watchApiFetch?: boolean;
-    /** 数据获取前处理 */
+    /** 数据获取前的处理函数，可以对请求参数进行修改 */
     beforeFetch?: (params?: any) => any;
-    /** 是否删除空参数 */
+    /** 是否删除空参数，true 表示删除空字符串和 null，'strict' 表示删除空字符串、null 和 undefined */
     delEmptyParams?: boolean | 'strict';
-    /** 数据获取后处理 */
+    /** 数据获取后的处理函数，可以对响应数据进行转换 */
     afterFetch?: (params: any) => Recordable[];
-    /** 是否转换参数 */
+    /** 是否转换参数，将分页参数转换为标准格式，默认为 true */
     transformParams?: boolean;
-    /** 额外参数 */
+    /** 额外的请求参数，会合并到请求参数中 */
     extraParams?: any;
-    /** 额外系统高度 */
+    /** 额外的系统高度，用于计算表格高度时需要减去的额外高度 */
     extraSysHeight?: number;
-    /** 分页器高度 */
+    /** 分页器高度，默认为 40 像素 */
     pageHeight?: number;
-    /** 是否显示分页器 */
+    /** 是否显示分页器，默认为 true */
     showPager?: boolean;
-    /** 分页器配置 */
+    /** 分页器配置选项 */
     pagination?: Partial<PaginationProps> & {
-        /** 分页器位置 */
+        /** 分页器位置，可选值：'bottom-left'、'bottom-right'、'top-left'、'top-right' */
         pagePlacement?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
-        /** 页码是否从0开始 */
+        /** 页码是否从 0 开始，默认从 1 开始 */
         pageIsZero?: boolean;
     };
-    /** 表单配置选项 */
+    /** 表单配置选项，用于配置表格顶部的搜索表单 */
     formOptions?: SuperFormProps & {
-        /** 是否显示操作表单 */
+        /** 是否显示操作表单，默认为 false */
         showActionForm?: boolean;
-        /** 是否添加搜索全部配置 */
+        /** 是否添加搜索全部配置，默认为 false */
         addSearchAllSchema?: boolean;
     };
+    /** 表格数据变化时的回调函数 */
+    onChange?: (...args: any[]) => void;
+    /** 空状态配置，用于自定义空数据时的显示内容 */
+    emptyCfg?: EmptyProps;
 }
-/** 列项属性类型 */
+/** 列项属性类型，继承自 VXE Table 的列选项 */
 export type ColumnItemProps = VxeTableDefines.ColumnOptions;
-/** 列属性类型 */
+/** 列属性类型，表示列配置数组 */
 export type ColumnProps = ColumnItemProps[];
 /** 表格操作方法接口 */
 export interface TableActionType {
-    /** 重新加载数据 */
+    /** 重新加载表格数据，可传入可选参数 */
     reload: (opt?: any) => Promise<any>;
-    /** 设置表格属性 */
+    /** 设置表格属性，用于动态更新表格配置 */
     setProps: (props: Partial<TableProps>) => void;
-    /** 获取数据源 */
+    /** 获取当前表格的数据源 */
     getDataSource: () => Recordable<any>[];
-    /** 获取原始数据源 */
+    /** 获取原始数据源，未经过滤或处理的完整数据 */
     getRawDataSource: () => Recordable<any>[];
-    /** 表格搜索 */
+    /** 表格搜索功能，根据关键字过滤数据 */
     tableSearch: (value: string | number) => void;
-    /** 获取列配置 */
+    /** 获取当前的列配置 */
     getColumns: () => ColumnProps;
-    /** 设置列配置 */
+    /** 设置列配置，用于动态更新表格列 */
     setColumns: (columns: ColumnProps) => void;
-    /** 设置表格数据 */
+    /** 设置表格数据，替换当前所有数据 */
     setTableData: <T = Recordable>(values: T[]) => void;
-    /** 设置分页信息 */
+    /** 设置分页信息，如当前页、每页条数等 */
     setPagination: (info: Partial<PaginationProps>) => void;
-    /** 更新表格数据记录 */
+    /** 更新指定行的数据记录 */
     updateTableDataRecord: (rowKey: string | number, record: Recordable) => Recordable | void;
-    /** 删除表格数据记录 */
+    /** 删除指定的数据记录，支持单个或多个 rowKey */
     deleteTableDataRecord: (row: Recordable, rowKey?: string | number | string[] | number[]) => void;
-    /** 插入表格数据记录 */
+    /** 插入新的数据记录，可指定插入位置 */
     insertTableDataRecord: (record: Recordable | Recordable[], index?: number) => Recordable[] | void;
-    /** 查找表格数据记录 */
+    /** 根据 rowKey 查找指定的数据记录 */
     findTableDataRecord: (rowKey: string | number) => Recordable | void;
 }