vft 0.0.374 → 0.0.375

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

@@ -1,40 +1,42 @@
-import { defineComponent as T, useAttrs as ee, ref as d, getCurrentInstance as ae, computed as u, unref as e, watch as te, nextTick as oe, toRaw as le, createElementBlock as re, openBlock as f, normalizeClass as ne, createVNode as z, createBlock as R, createCommentVNode as P, mergeProps as D, withCtx as m, withDirectives as ce, createElementVNode as ie, renderSlot as H } from "vue";
-import { VftEmpty as se } from "../empty/index.js";
-import { vLoading as ge } from "../loading/directive.js";
-import { deepMerge as _, omit as de, isFunction as ue } from "@vft/utils";
+import { defineComponent, useAttrs, ref, getCurrentInstance, computed, unref, watch, nextTick, toRaw, createElementBlock, openBlock, normalizeClass, createVNode, createBlock, createCommentVNode, mergeProps, withCtx, withDirectives, createElementVNode, renderSlot } from "vue";
+import { VftEmpty } from "../empty/index.js";
+import { vLoading } from "../loading/directive.js";
+import { deepMerge, omit, isFunction } from "@vft/utils";
 import "@vueuse/core";
 import "../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { useNamespace as fe } from "../../hooks/use-namespace/index.js";
+import { useNamespace } 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 { VftPagination as me } from "../pagination/index.js";
-import { VftSuperForm as pe } from "../super-form/index.js";
-import { VxeGrid as he } from "vxe-table";
-import be from "xe-utils";
-import { PAGE_SIZE as Ce } from "./constants.js";
-import { useColumns as ye } from "./use/use-columns.js";
-import { useDataSource as we } from "./use/use-data-source.js";
-import { useLoading as ve } from "./use/use-loading.js";
-import { usePagination as xe } from "./use/use-pagination.js";
-import { FormCompEnum as ke } from "../super-form/component-map.js";
-import { useForm as Se } from "../super-form/use/use-form.js";
-import { EmptyEnum as Be } from "../empty/constants.js";
-const ze = {
+import { VftPagination } from "../pagination/index.js";
+import { VftSuperForm } from "../super-form/index.js";
+import { VxeGrid } from "vxe-table";
+import XEUtils from "xe-utils";
+import { PAGE_SIZE } from "./constants.js";
+import { useColumns } from "./use/use-columns.js";
+import { useDataSource } from "./use/use-data-source.js";
+import { useLoading } from "./use/use-loading.js";
+import { usePagination } from "./use/use-pagination.js";
+import { FormCompEnum } from "../super-form/component-map.js";
+import { useForm } from "../super-form/use/use-form.js";
+import { EmptyEnum } from "../empty/constants.js";
+const _hoisted_1 = {
   "vft-loading-text": "加载中..."
-}, Re = T({
+};
+const __default__ = defineComponent({
   name: "vft-table"
-}), Qe = /* @__PURE__ */ T({
-  ...Re,
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
   props: {
     sticky: {
       type: [Boolean, Object]
     },
     api: {},
     pageSize: {
-      default: Ce
+      default: PAGE_SIZE
     },
     total: {},
     rowkey: {
@@ -42,22 +44,22 @@ const ze = {
     },
     immediate: {
       type: Boolean,
-      default: !0
+      default: true
     },
     fetchSetting: {},
     watchApiFetch: {
       type: Boolean,
-      default: !1
+      default: false
     },
     beforeFetch: {},
     delEmptyParams: {
       type: [Boolean, String],
-      default: !0
+      default: true
     },
     afterFetch: {},
     transformParams: {
       type: Boolean,
-      default: !0
+      default: true
     },
     extraParams: {},
     extraSysHeight: {
@@ -68,7 +70,7 @@ const ze = {
     },
     showPager: {
       type: Boolean,
-      default: !0
+      default: true
     },
     pagination: {},
     formOptions: {},
@@ -78,7 +80,7 @@ const ze = {
     proxyConfig: {},
     toolbarConfig: {
       default: {
-        enabled: !1,
+        enabled: false,
         slots: {
           buttons: "toolbarButtons"
         }
@@ -96,7 +98,7 @@ const ze = {
     maxHeight: {},
     stripe: {
       type: Boolean,
-      default: !0
+      default: true
     },
     padding: {
       type: Boolean
@@ -110,7 +112,7 @@ const ze = {
     },
     loading: {
       type: Boolean,
-      default: !1
+      default: false
     },
     align: {
       default: "center"
@@ -121,7 +123,7 @@ const ze = {
     footerAlign: {},
     showHeader: {
       type: Boolean,
-      default: !0
+      default: true
     },
     showFooter: {
       type: Boolean
@@ -159,23 +161,23 @@ const ze = {
     },
     autoResize: {
       type: Boolean,
-      default: !1
+      default: false
     },
     syncResize: {
       type: [Boolean, String, Number]
     },
     columnConfig: {
       default: {
-        drag: !1,
-        resizable: !0,
+        drag: false,
+        resizable: true,
         minWidth: "15%"
       }
     },
     rowConfig: {
       default: {
-        isHover: !0,
-        isCurrent: !0,
-        useKey: !0
+        isHover: true,
+        isCurrent: true,
+        useKey: true
       }
     },
     cellConfig: {},
@@ -218,12 +220,12 @@ const ze = {
     scrollY: {},
     virtualXConfig: {
       default: {
-        enabled: !1
+        enabled: false
       }
     },
     virtualYConfig: {
       default: {
-        enabled: !1
+        enabled: false
       }
     },
     scrollbarConfig: {},
@@ -255,7 +257,7 @@ const ze = {
     rowId: {},
     fit: {
       type: Boolean,
-      default: !0
+      default: true
     },
     animat: {
       type: Boolean
@@ -383,67 +385,86 @@ const ze = {
     "toolbar-tool-click",
     "zoom"
   ],
-  setup(Pe, {
-    expose: F,
-    emit: A
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
   }) {
-    const i = fe("table"), l = A, E = ee(), p = d(), N = d([]), s = d(), O = ae(), t = u(() => _(O.props, e(s))), {
-      getLoading: V,
-      setLoading: I
-    } = ve(t), {
-      getPaginationInfo: c,
-      setPagination: g,
-      getShowPagination: h,
-      getCurrentPage: q
-    } = xe(t), {
-      getViewColumns: G,
-      setColumns: K
-    } = ye(t);
-    te(() => q(), (a) => {
-      oe(() => {
-        b({
+    const ns = useNamespace("table");
+    const emit = __emit;
+    const attrs = useAttrs();
+    const xGrid = ref();
+    const tableData = ref([]);
+    const innerPropsRef = ref();
+    const instance = getCurrentInstance();
+    const getProps = computed(() => {
+      return deepMerge(instance.props, unref(innerPropsRef));
+    });
+    const {
+      getLoading,
+      setLoading
+    } = useLoading(getProps);
+    const {
+      getPaginationInfo,
+      setPagination,
+      getShowPagination,
+      getCurrentPage
+    } = usePagination(getProps);
+    const {
+      getViewColumns,
+      setColumns
+    } = useColumns(getProps);
+    watch(() => getCurrentPage(), (val) => {
+      nextTick(() => {
+        setProps({
           seqConfig: {
-            startIndex: (a - 1) * (c.value?.pageSize || e(t).pageSize)
+            startIndex: (val - 1) * (getPaginationInfo.value?.pageSize || unref(getProps).pageSize)
           }
         });
       });
     }, {
-      immediate: !0
+      immediate: true
     });
-    function b(a) {
-      s.value = {
-        ...e(s),
-        ...a
+    function setProps(props) {
+      innerPropsRef.value = {
+        ...unref(innerPropsRef),
+        ...props
       };
     }
     const {
-      getDataSourceRef: C,
-      handleTableChange: L,
-      reload: M,
-      deleteTableDataRecord: X,
-      insertTableDataRecord: Y,
-      updateTableData: $,
-      updateTableDataRecord: j,
-      setTableData: y,
-      getDataSource: W,
-      getRawDataSource: w,
-      tableSearch: v
-    } = we(t, {
-      tableData: N,
-      setLoading: I,
-      getPaginationInfo: c,
-      setPagination: g
-    }, l);
-    function x(...a) {
-      a?.[0]?.pageSize && g({
-        currentPage: 1
-      }), L.call(void 0, ...a), l("change", ...a);
+      getDataSourceRef,
+      handleTableChange: onTableChange,
+      reload,
+      deleteTableDataRecord,
+      insertTableDataRecord,
+      updateTableData,
+      updateTableDataRecord,
+      setTableData,
+      getDataSource,
+      getRawDataSource,
+      tableSearch
+    } = useDataSource(getProps, {
+      tableData,
+      setLoading,
+      getPaginationInfo,
+      setPagination
+    }, emit);
+    function handleTableChange(...args) {
+      if (args?.[0]?.pageSize) {
+        setPagination({
+          currentPage: 1
+        });
+      }
+      onTableChange.call(void 0, ...args);
+      emit("change", ...args);
       const {
-        onChange: o
-      } = e(t);
-      o && ue(o) && o.call(void 0, ...a);
+        onChange
+      } = unref(getProps);
+      onChange && isFunction(onChange) && onChange.call(void 0, ...args);
     }
-    const U = u(() => window.innerHeight - e(t)?.extraSysHeight - (t.value?.showPager ? t.value?.pageHeight : 0) + "px"), k = {};
+    const _maxHeight = computed(() => {
+      return window.innerHeight - unref(getProps)?.extraSysHeight - (getProps.value?.showPager ? getProps.value?.pageHeight : 0) + "px";
+    });
+    const emitEvents = {};
     [
       "update:data",
       "keydown-start",
@@ -564,107 +585,120 @@ const ze = {
       "toolbar-button-click",
       "toolbar-tool-click",
       "zoom"
-    ].forEach((a) => {
-      const o = be.camelCase(`on-${a}`);
-      k[o] = (...n) => l(a, ...n);
+    ].forEach((name) => {
+      const type = XEUtils.camelCase(`on-${name}`);
+      emitEvents[type] = (...args) => emit(name, ...args);
     });
-    const r = u(() => {
-      const a = e(C);
+    const getBindValues = computed(() => {
+      const dataSource = unref(getDataSourceRef);
       return {
-        ...E,
-        ...e(t),
-        maxHeight: e(t)?.maxHeight ? e(t)?.maxHeight : U.value,
-        columns: le(e(G)),
-        loading: e(V),
-        data: a,
-        ...k
+        ...attrs,
+        ...unref(getProps),
+        maxHeight: unref(getProps)?.maxHeight ? unref(getProps)?.maxHeight : _maxHeight.value,
+        columns: toRaw(unref(getViewColumns)),
+        loading: unref(getLoading),
+        data: dataSource,
+        ...emitEvents
       };
-    }), S = {
-      setPagination: g,
-      emit: l,
-      setProps: b,
-      reload: M,
-      getShowPagination: h,
-      deleteTableDataRecord: X,
-      insertTableDataRecord: Y,
-      updateTableDataRecord: j,
-      updateTableData: $,
-      setTableData: y,
-      getDataSource: W,
-      getDataSourceRef: C,
-      setColumns: K,
-      getRawDataSource: w,
-      tableSearch: v
+    });
+    const tableAction = {
+      setPagination,
+      emit,
+      setProps,
+      reload,
+      getShowPagination,
+      deleteTableDataRecord,
+      insertTableDataRecord,
+      updateTableDataRecord,
+      updateTableData,
+      setTableData,
+      getDataSource,
+      getDataSourceRef,
+      setColumns,
+      getRawDataSource,
+      tableSearch
     };
-    l("register", S);
-    const Z = {
+    emit("register", tableAction);
+    const searchAllSchema = {
       field: "_filterTableData",
       label: "",
-      type: ke.SEARCH,
-      componentProps: ({}) => ({
-        onChange: (a) => {
-          B({
-            _filterTableData: a
-          });
-        }
-      })
-    }, [J] = Se(_({
-      schemas: [r.value?.formOptions?.addSearchAllSchema ? Z : {}],
+      type: FormCompEnum.SEARCH,
+      componentProps: ({}) => {
+        return {
+          onChange: (e) => {
+            handleFormSubmit({
+              "_filterTableData": e
+            });
+          }
+        };
+      }
+    };
+    const [registerForm] = useForm(deepMerge({
+      schemas: [getBindValues.value?.formOptions?.addSearchAllSchema ? searchAllSchema : {}],
       rowProps: {
         justify: "start"
       },
       labelPosition: "left",
       quickColSpan: 5,
-      watchDataIsChange: !0,
-      showResetButton: !0,
-      showSubmitButton: !0,
+      watchDataIsChange: true,
+      showResetButton: true,
+      showSubmitButton: true,
       size: "small",
       submitButtonOptions: {
         btnText: "搜索"
       },
-      actionInline: !0
-    }, de(
-      r.value?.formOptions,
+      actionInline: true
+    }, omit(
+      getBindValues.value?.formOptions,
       ["showActionForm", "addSearchAllSchema"]
       // 'union' | 'intersection' | 'concat' | 'replace' = 'union'
-    ), "replace")), B = (a) => {
-      Reflect.has(a, "_filterTableData") && v(a._filterTableData), l("form-submit", a);
-    }, Q = () => {
-      y(w()), l("form-reset");
+    ), "replace"));
+    const handleFormSubmit = (values) => {
+      if (Reflect.has(values, "_filterTableData")) {
+        tableSearch(values._filterTableData);
+      }
+      emit("form-submit", values);
+    };
+    const handleFormReset = () => {
+      setTableData(getRawDataSource());
+      emit("form-reset");
+    };
+    __expose({
+      table: xGrid,
+      ...tableAction
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(ns).b())
+      }, [createVNode(unref(VxeGrid), mergeProps({
+        ref_key: "xGrid",
+        ref: xGrid
+      }, getBindValues.value), {
+        toolbarButtons: withCtx(() => [renderSlot(_ctx.$slots, "toolbar-left"), getBindValues.value?.formOptions?.showActionForm ? (openBlock(), createBlock(unref(VftSuperForm), {
+          key: 0,
+          onRegister: unref(registerForm),
+          onSubmit: handleFormSubmit,
+          onReset: handleFormReset
+        }, null, 8, ["onRegister"])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "toolbar-right")]),
+        empty: withCtx(() => [createVNode(unref(VftEmpty), {
+          type: unref(EmptyEnum).NO_DATA
+        }, null, 8, ["type"])]),
+        loading: withCtx(() => [withDirectives(createElementVNode("div", _hoisted_1, null, 512), [[unref(vLoading), getBindValues.value.loading]])]),
+        _: 3
+      }, 16), getBindValues.value.showPager && unref(getShowPagination) ? (openBlock(), createBlock(unref(VftPagination), mergeProps({
+        key: 0
+      }, unref(getPaginationInfo), {
+        class: [unref(ns).e("pager"), unref(ns).m("pager-" + unref(getPaginationInfo).pagePlacement)],
+        onCurrentChange: _cache[0] || (_cache[0] = (data) => handleTableChange({
+          currentPage: data
+        })),
+        onSizeChange: _cache[1] || (_cache[1] = (data) => handleTableChange({
+          pageSize: data
+        }))
+      }), null, 16, ["class"])) : createCommentVNode("", true)], 2);
     };
-    return F({
-      table: p,
-      ...S
-    }), (a, o) => (f(), re("div", {
-      class: ne(e(i).b())
-    }, [z(e(he), D({
-      ref_key: "xGrid",
-      ref: p
-    }, r.value), {
-      toolbarButtons: m(() => [H(a.$slots, "toolbar-left"), r.value?.formOptions?.showActionForm ? (f(), R(e(pe), {
-        key: 0,
-        onRegister: e(J),
-        onSubmit: B,
-        onReset: Q
-      }, null, 8, ["onRegister"])) : P("", !0), H(a.$slots, "toolbar-right")]),
-      empty: m(() => [z(e(se), {
-        type: e(Be).NO_DATA
-      }, null, 8, ["type"])]),
-      loading: m(() => [ce(ie("div", ze, null, 512), [[e(ge), r.value.loading]])]),
-      _: 3
-    }, 16), r.value.showPager && e(h) ? (f(), R(e(me), D({
-      key: 0
-    }, e(c), {
-      class: [e(i).e("pager"), e(i).m("pager-" + e(c).pagePlacement)],
-      onCurrentChange: o[0] || (o[0] = (n) => x({
-        currentPage: n
-      })),
-      onSizeChange: o[1] || (o[1] = (n) => x({
-        pageSize: n
-      }))
-    }), null, 16, ["class"])) : P("", !0)], 2));
   }
 });
 export {
-  Qe as default
+  _sfc_main as default
 };

package/es/components/table/use/use-columns.js

@@ -1,40 +1,54 @@
-import { isNullOrUndefined as g, isArray as d } from "@vft/utils";
-import { cloneDeep as c } from "lodash-es";
-import { ref as h, unref as o, computed as m, watch as v, toRaw as p } from "vue";
-function y(u) {
-  const t = h(o(u).columns), l = o(u).columns, e = m(() => {
-    const r = c(o(t));
-    return r ? r.map((n) => (!n.formatter && !n.slots && !n.cellRender && (n.formatter = ({
-      cellValue: s
-    }) => g(s) || s === "" ? "-" : s), n)) : [];
-  }), f = m(() => o(e));
-  function i(r) {
-    const n = c(r);
-    if (d(n)) {
-      if (n.length <= 0) {
-        t.value = [];
-        return;
+import { isNullOrUndefined, isArray } from "@vft/utils";
+import { cloneDeep } from "lodash-es";
+import { ref, unref, computed, watch, toRaw } from "vue";
+function useColumns(propsRef) {
+  const columnsRef = ref(unref(propsRef).columns);
+  const cacheColumns = unref(propsRef).columns;
+  const getColumnsRef = computed(() => {
+    const columns = cloneDeep(unref(columnsRef));
+    if (!columns) {
+      return [];
+    }
+    return columns.map((item) => {
+      if (!item.formatter && !item.slots && !item.cellRender) {
+        item.formatter = ({
+          cellValue
+        }) => {
+          return isNullOrUndefined(cellValue) || cellValue === "" ? "-" : cellValue;
+        };
       }
-      t.value = n;
+      return item;
+    });
+  });
+  const getViewColumns = computed(() => {
+    return unref(getColumnsRef);
+  });
+  function setColumns(columnList) {
+    const columns = cloneDeep(columnList);
+    if (!isArray(columns)) return;
+    if (columns.length <= 0) {
+      columnsRef.value = [];
+      return;
     }
+    columnsRef.value = columns;
   }
-  v(() => o(u).columns, (r) => {
-    t.value = r || t.value;
+  watch(() => unref(propsRef).columns, (columns) => {
+    columnsRef.value = columns || columnsRef.value;
   }, {});
-  function a() {
-    return p(o(e));
+  function getColumns() {
+    return toRaw(unref(getColumnsRef));
   }
-  function C() {
-    return l;
+  function getCacheColumns() {
+    return cacheColumns;
   }
   return {
-    getColumnsRef: e,
-    getCacheColumns: C,
-    getViewColumns: f,
-    getColumns: a,
-    setColumns: i
+    getColumnsRef,
+    getCacheColumns,
+    getViewColumns,
+    getColumns,
+    setColumns
   };
 }
 export {
-  y as useColumns
+  useColumns
 };