bm-admin-ui 1.0.1-alpha → 1.0.2-alpha

package/lib/components/float-table/index.d.ts

@@ -1,5 +1,70 @@
-declare const BmFloatTable: {
-    install(app: any): void;
-};
+declare const BmFloatTable: import("bm-admin-ui/es/utils/with-install").SFCWithInstall<{
+    name: string;
+    props: {
+        config: {
+            type: ObjectConstructor;
+            required: boolean;
+            default: () => {};
+        };
+        pagerProps: {
+            type: ObjectConstructor;
+            default: () => {};
+        };
+        events: {
+            type: ObjectConstructor;
+            default: () => {};
+        };
+        isNeedFloatHandle: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            default: string;
+        };
+    };
+    emits: string[];
+    setup(props: any, { emit }: {
+        emit: any;
+    }): {
+        setItemRef(el: any, column: any, rowid: any): void;
+        leaveFloatTable(): void;
+        scrollTo(config?: {}): void;
+        pageNoChange(val: any): Promise<void>;
+        pageSizeChange(val: any, size: any): Promise<void>;
+        floatMouseLeave(): void;
+        floatOverMouse(): void;
+        goAnimationEndFn(): void;
+        scrollNotShowFloat(): void;
+        classes: import("vue").ComputedRef<(string | {
+            floatHandleTable: any;
+        })[]>;
+        gridOptions: import("vue").ComputedRef<any>;
+        gridEvents: import("vue").ComputedRef<any>;
+        pager: import("vue").ComputedRef<any>;
+        simpleImage: import("vue").Ref<JSX.Element | (string | number | boolean | void | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }> | null | undefined) | (string | number | boolean | void | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }> | null | undefined)[]>;
+        floatRefsId: import("vue").Ref<{}>;
+        floatId: import("vue").Ref<string>;
+        isShowFloatHandle: import("vue").Ref<boolean>;
+        atVisible: import("vue").Ref<boolean>;
+        goAnimationEnd: import("vue").Ref<boolean>;
+        floatPosition: import("vue").Ref<{
+            top: string;
+            height: string;
+        }>;
+        trNodes: import("vue").Ref<any>;
+        isInScroll: import("vue").Ref<boolean>;
+        inMaxScorllX: import("vue").Ref<boolean>;
+        floatRow: import("vue").Ref<{}>;
+        floatRowIndex: import("vue").Ref<undefined>;
+        floatHandleDomCol: import("vue").Ref<any>;
+        floatTable: import("vue").Ref<any>;
+        xGrid: import("vue").Ref<any>;
+    };
+}>;
 export { BmFloatTable };
 export default BmFloatTable;

package/lib/components/float-table/index.js

@@ -4,17 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var withInstall = require('bm-admin-ui/lib/utils/with-install');
 var vue = require('vue');
-var Pagination = require('ant-design-vue/lib/pagination');
 var antDesignVue = require('ant-design-vue');
-var XEUtils = require('xe-utils');
-var vxeTable = require('vxe-table');
-var zhCN = require('vxe-table/es/locale/lang/zh-CN');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var Pagination__default = /*#__PURE__*/_interopDefaultLegacy(Pagination);
-var XEUtils__default = /*#__PURE__*/_interopDefaultLegacy(XEUtils);
-var zhCN__default = /*#__PURE__*/_interopDefaultLegacy(zhCN);
 
 var _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
@@ -24,11 +14,8 @@ var _export_sfc = (sfc, props) => {
   return target;
 };
 
-const _hoisted_1 = {
-  key: 0,
-  class: "floatPager"
-};
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main = {
+  name: "BmFloatTable",
   props: {
     config: {
       type: Object,
@@ -65,13 +52,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     "pageChange",
     "pageSizeChange"
   ],
-  setup(__props, { expose, emit: emits }) {
-    const props = __props;
-    const AEmpty = antDesignVue.Empty;
+  setup(props, { emit }) {
     const floatTable = vue.ref();
     const xGrid = vue.ref();
+    vue.onBeforeUnmount(function() {
+      inObserverDom && inObserverDom.disconnect();
+      scrollNotShowFloatTime && clearTimeout(scrollNotShowFloatTime);
+    });
     const state = vue.reactive({
-      emptyImg: AEmpty.PRESENTED_IMAGE_SIMPLE,
+      simpleImage: antDesignVue.Empty.PRESENTED_IMAGE_SIMPLE,
       floatRefsId: {},
       floatId: "",
       isShowFloatHandle: true,
@@ -104,13 +93,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       },
       gridEvents: {
         radioChange(val) {
-          emits("radioChange", val);
+          emit("radioChange", val);
         },
         checkboxChange(val) {
-          emits("checkboxChange", val);
+          emit("checkboxChange", val);
         },
         checkboxAll(val) {
-          emits("checkboxChangeAll", val);
+          emit("checkboxChangeAll", val);
         }
       },
       atVisible: false,
@@ -198,7 +187,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         extraFn.scroll = (e) => {
           let propsscroll = props.events.scroll;
           if (e.isY && props.isNeedFloatHandle) {
-            scrollNotShowFloat();
+            methods.scrollNotShowFloat();
           }
           if (e.isX && props.isNeedFloatHandle && state.floatHandleDomCol && gridOptions.value.data && gridOptions.value.data.length > 0) {
             if (e.scrollLeft + e.$event.target.clientWidth >= e.$event.target.scrollWidth - state.floatHandleDomCol.clientWidth) {
@@ -213,7 +202,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         };
         extraFn.cellMouseleave = (e) => {
           let propsCellMouseLeave = props.events.cellMouseleave;
-          floatMouseLeave();
+          methods.floatMouseLeave();
           propsCellMouseLeave && propsCellMouseLeave(e);
         };
       }
@@ -240,81 +229,82 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         ...props.pagerProps
       };
     });
-    const setItemRef = (el, column, rowid) => {
-      if (!props.isNeedFloatHandle)
-        return;
-      state.floatRefsId[rowid] = el;
-      if (state.floatHandleDomCol)
-        return;
-      let id = column.id;
-      state.floatHandleDomCol = floatTable.value.querySelector(`.vxe-table--header-wrapper .vxe-header--row .${id}`);
-    };
-    const leaveFloatTable = () => {
-      let timer = setTimeout(() => {
+    let scrollNotShowFloatTime;
+    const methods = {
+      setItemRef(el, column, rowid) {
+        if (!props.isNeedFloatHandle)
+          return;
+        state.floatRefsId[rowid] = el;
+        if (state.floatHandleDomCol)
+          return;
+        let id = column.id;
+        state.floatHandleDomCol = floatTable.value.querySelector(`.vxe-table--header-wrapper .vxe-header--row .${id}`);
+      },
+      leaveFloatTable() {
+        let timer = setTimeout(() => {
+          state.isShowFloatHandle = false;
+          state.floatId = "";
+          clearTimeout(timer);
+        }, 210);
+      },
+      scrollTo(config = {}) {
+        config = {
+          top: 0,
+          ...config
+        };
+        floatTable.value?.querySelectorAll(".vxe-table--body-wrapper")?.forEach((table) => table?.scrollTo?.(config));
+      },
+      async pageNoChange(val) {
+        await emit("pageChange", val);
+        methods.scrollTo();
+      },
+      async pageSizeChange(val, size) {
+        await emit("pageSizeChange", size);
+        methods.scrollTo();
+      },
+      floatMouseLeave() {
+        if (!state.trNodes || state.trNodes?.length === 0)
+          return;
+        state.trNodes.forEach((item) => {
+          if (item && item.className.includes("floatHoverTr")) {
+            item.className = `${item.className.replace(/floatHoverTr/g, "")}`;
+          }
+        });
+      },
+      floatOverMouse() {
+        if (!state.trNodes || state.trNodes?.length === 0)
+          return;
+        state.trNodes.forEach((item) => {
+          if (item && !item.className.includes("floatHoverTr")) {
+            item.className = `${item.className} floatHoverTr`;
+          }
+        });
+      },
+      goAnimationEndFn() {
+        state.goAnimationEnd = true;
+      },
+      scrollNotShowFloat() {
+        state.isInScroll = true;
         state.isShowFloatHandle = false;
-        state.floatId = "";
-        clearTimeout(timer);
-      }, 210);
-    };
-    const scrollTo = (config = {}) => {
-      config = {
-        top: 0,
-        ...config
-      };
-      floatTable.value?.querySelectorAll(".vxe-table--body-wrapper")?.forEach((table) => table?.scrollTo?.(config));
-    };
-    expose({ scrollTo });
-    const pageNoChange = async (val) => {
-      await emits("pageChange", val);
-      scrollTo();
-    };
-    const pageSizeChange = async (val, size) => {
-      await emits("pageSizeChange", size);
-      scrollTo();
-    };
-    const floatMouseLeave = () => {
-      if (!state.trNodes || state.trNodes?.length === 0)
-        return;
-      state.trNodes.forEach((item) => {
-        if (item && item.className.includes("floatHoverTr")) {
-          item.className = `${item.className.replace(/floatHoverTr/g, "")}`;
+        clearTimeout(scrollNotShowFloatTime);
+        if (!state.atVisible) {
+          scrollNotShowFloatTime = setTimeout(function() {
+            state.isInScroll = false;
+          }, 300);
         }
-      });
-    };
-    const floatOverMouse = () => {
-      if (!state.trNodes || state.trNodes?.length === 0)
-        return;
-      state.trNodes.forEach((item) => {
-        if (item && !item.className.includes("floatHoverTr")) {
-          item.className = `${item.className} floatHoverTr`;
-        }
-      });
-    };
-    const goAnimationEndFn = () => {
-      state.goAnimationEnd = true;
-    };
-    let scrollNotShowFloatTime;
-    const scrollNotShowFloat = () => {
-      state.isInScroll = true;
-      state.isShowFloatHandle = false;
-      clearTimeout(scrollNotShowFloatTime);
-      if (!state.atVisible) {
-        scrollNotShowFloatTime = setTimeout(function() {
-          state.isInScroll = false;
-        }, 300);
       }
     };
     let inObserverDom;
     let isHasOver;
     let closeSetRow;
-    let headerWarpper;
+    let headerWrapper;
     if (props.isNeedFloatHandle) {
       inObserverDom = new IntersectionObserver((entries) => {
         entries.forEach((item) => {
           if (item.intersectionRatio > 0.1) {
             closeSetRow = closeSetRow || item.target.closest(".vxe-header--row");
-            headerWarpper = headerWarpper || item.target.closest(".vxe-table--header-wrapper");
-            if (closeSetRow.clientWidth <= headerWarpper.clientWidth && !isHasOver) {
+            headerWrapper = headerWrapper || item.target.closest(".vxe-table--header-wrapper");
+            if (closeSetRow.clientWidth <= headerWrapper.clientWidth && !isHasOver) {
               inObserverDom.disconnect();
             } else {
               isHasOver = true;
@@ -340,120 +330,97 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         immediate: true
       });
     }
-    vue.onBeforeUnmount(function() {
-      inObserverDom && inObserverDom.disconnect();
-      scrollNotShowFloatTime && clearTimeout(scrollNotShowFloatTime);
-    });
-    return (_ctx, _cache) => {
-      const _component_vxe_grid = vue.resolveComponent("vxe-grid");
-      return vue.openBlock(), vue.createElementBlock("div", {
-        ref_key: "floatTable",
-        ref: floatTable,
-        class: vue.normalizeClass(vue.unref(classes)),
-        onMouseleave: leaveFloatTable
-      }, [
-        vue.createVNode(_component_vxe_grid, vue.mergeProps({
-          ref_key: "xGrid",
-          ref: xGrid
-        }, vue.unref(gridOptions), vue.toHandlers(vue.unref(gridEvents))), vue.createSlots({
-          pager: vue.withCtx(() => [
-            vue.unref(pager).total && !vue.unref(pager).hideOnSinglePage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-              vue.createVNode(vue.unref(Pagination__default["default"]), vue.mergeProps(vue.unref(pager), {
-                onChange: pageNoChange,
-                onShowSizeChange: pageSizeChange
-              }), null, 16)
-            ])) : vue.createCommentVNode("v-if", true)
-          ]),
-          empty: vue.withCtx(() => [
-            vue.createElementVNode("div", null, [
-              vue.createVNode(vue.unref(AEmpty), {
-                image: vue.unref(state).emptyImg
-              }, null, 8, ["image"])
-            ])
-          ]),
-          _: 2
-        }, [
-          vue.renderList(_ctx.$slots, (slot, key) => {
-            return {
-              name: key,
-              fn: vue.withCtx((data) => [
-                key !== "floatHandle" ? vue.renderSlot(_ctx.$slots, key, {
-                  key: 0,
-                  rowIndex: data.rowIndex,
-                  row: data.row,
-                  column: data.column
-                }) : (vue.openBlock(), vue.createElementBlock("div", {
-                  key: 1,
-                  ref: (el) => setItemRef(el, data.column, data.rowid)
-                }, [
-                  vue.renderSlot(_ctx.$slots, "floatHandle", {
-                    row: data.row,
-                    rowIndex: data.rowIndex,
-                    column: data.column
-                  })
-                ], 512))
-              ])
-            };
-          })
-        ]), 1040),
-        vue.withDirectives(vue.createElementVNode("div", {
-          ref: "floatHandle",
-          class: vue.normalizeClass(["floatHandle", {
-            floatRightIn: vue.unref(state).isShowFloatHandle && !vue.unref(state).goAnimationEnd
-          }]),
-          style: vue.normalizeStyle({
-            top: vue.unref(state).floatPosition?.top,
-            height: vue.unref(state).floatPosition?.height
-          }),
-          onAnimationend: goAnimationEndFn,
-          onMouseenter: floatOverMouse,
-          onMouseleave: floatMouseLeave
-        }, [
-          vue.createElementVNode("div", null, [
-            vue.renderSlot(_ctx.$slots, "floatHandle", {
-              row: vue.unref(state).floatRow,
-              rowIndex: vue.unref(state).floatRowIndex
-            })
-          ])
-        ], 38), [
-          [
-            vue.vShow,
-            vue.unref(state).floatPosition?.top && __props.isNeedFloatHandle && vue.unref(state).isShowFloatHandle
-          ]
-        ])
-      ], 34);
+    return {
+      floatTable,
+      xGrid,
+      ...vue.toRefs(state),
+      classes,
+      gridOptions,
+      gridEvents,
+      pager,
+      ...methods
     };
   }
-});
-var FloatTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "float-table.vue"]]);
-
-vxeTable.VXETable.setup({
-    i18n: (key, args) => XEUtils__default["default"].toFormatString(XEUtils__default["default"].get(zhCN__default["default"], key), args),
-});
-const BmTable = withInstall.withInstall(FloatTable);
-const BmFloatTable = {
-    install(app) {
-        app.component('BmTable', BmTable);
-        app
-            .use(vxeTable.Header)
-            .use(vxeTable.Footer)
-            .use(vxeTable.Column)
-            .use(vxeTable.Table)
-            .use(vxeTable.Grid)
-            .use(vxeTable.Pager)
-            .use(vxeTable.Checkbox)
-            .use(vxeTable.CheckboxGroup)
-            .use(vxeTable.Radio)
-            .use(vxeTable.RadioGroup)
-            .use(vxeTable.Select)
-            .use(vxeTable.Input)
-            .use(vxeTable.Tooltip)
-            .use(vxeTable.Keyboard)
-            .use(vxeTable.Toolbar)
-            .use(vxeTable.Button)
-            .use(vxeTable.Icon);
-    },
 };
+const _hoisted_1 = {
+  key: 0,
+  class: "floatPager"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_a_pagination = vue.resolveComponent("a-pagination");
+  const _component_a_empty = vue.resolveComponent("a-empty");
+  const _component_vxe_grid = vue.resolveComponent("vxe-grid");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    ref: "floatTable",
+    class: vue.normalizeClass($setup.classes),
+    onMouseleave: _cache[3] || (_cache[3] = (...args) => _ctx.leaveFloatTable && _ctx.leaveFloatTable(...args))
+  }, [
+    vue.createVNode(_component_vxe_grid, vue.mergeProps({ ref: "xGrid" }, $setup.gridOptions, vue.toHandlers($setup.gridEvents)), vue.createSlots({
+      pager: vue.withCtx(() => [
+        $setup.pager.total && !$setup.pager.hideOnSinglePage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+          vue.createVNode(_component_a_pagination, vue.mergeProps($setup.pager, {
+            onChange: _ctx.pageNoChange,
+            onShowSizeChange: _ctx.pageSizeChange
+          }), null, 16, ["onChange", "onShowSizeChange"])
+        ])) : vue.createCommentVNode("v-if", true)
+      ]),
+      empty: vue.withCtx(() => [
+        vue.createElementVNode("div", null, [
+          vue.createVNode(_component_a_empty, { image: _ctx.simpleImage }, null, 8, ["image"])
+        ])
+      ]),
+      _: 2
+    }, [
+      vue.renderList(_ctx.$slots, (slot, key) => {
+        return {
+          name: key,
+          fn: vue.withCtx((data) => [
+            key !== "floatHandle" ? vue.renderSlot(_ctx.$slots, key, {
+              key: 0,
+              rowIndex: data.rowIndex,
+              row: data.row,
+              column: data.column
+            }) : (vue.openBlock(), vue.createElementBlock("div", {
+              key: 1,
+              ref: (el) => _ctx.setItemRef(el, data.column, data.rowid)
+            }, [
+              vue.renderSlot(_ctx.$slots, "floatHandle", {
+                row: data.row,
+                rowIndex: data.rowIndex,
+                column: data.column
+              })
+            ], 512))
+          ])
+        };
+      })
+    ]), 1040),
+    vue.withDirectives(vue.createElementVNode("div", {
+      ref: "floatHandle",
+      class: vue.normalizeClass(["floatHandle", {
+        floatRightIn: _ctx.isShowFloatHandle && !_ctx.goAnimationEnd
+      }]),
+      style: vue.normalizeStyle({
+        top: _ctx.floatPosition?.top,
+        height: _ctx.floatPosition?.height
+      }),
+      onAnimationend: _cache[0] || (_cache[0] = (...args) => _ctx.goAnimationEndFn && _ctx.goAnimationEndFn(...args)),
+      onMouseenter: _cache[1] || (_cache[1] = (...args) => _ctx.floatOverMouse && _ctx.floatOverMouse(...args)),
+      onMouseleave: _cache[2] || (_cache[2] = (...args) => _ctx.floatMouseLeave && _ctx.floatMouseLeave(...args))
+    }, [
+      vue.createElementVNode("div", null, [
+        vue.renderSlot(_ctx.$slots, "floatHandle", {
+          row: _ctx.floatRow,
+          rowIndex: _ctx.floatRowIndex
+        })
+      ])
+    ], 38), [
+      [vue.vShow, _ctx.floatPosition?.top && $props.isNeedFloatHandle && _ctx.isShowFloatHandle]
+    ])
+  ], 34);
+}
+var FloatTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "float-table.vue"]]);
+
+const BmFloatTable = withInstall.withInstall(FloatTable);
 
 exports.BmFloatTable = BmFloatTable;
 exports["default"] = BmFloatTable;