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

package/es/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/es/components/float-table/index.js

@@ -1,10 +1,6 @@
 import { withInstall } from 'bm-admin-ui/es/utils/with-install';
-import { defineComponent, ref, reactive, computed, watch, onBeforeUnmount, resolveComponent, openBlock, createElementBlock, normalizeClass, unref, createVNode, mergeProps, toHandlers, createSlots, withCtx, createCommentVNode, createElementVNode, renderList, renderSlot, withDirectives, normalizeStyle, vShow, nextTick } from 'vue';
-import Pagination from 'ant-design-vue/lib/pagination';
+import { ref, onBeforeUnmount, reactive, computed, watch, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, mergeProps, toHandlers, createSlots, withCtx, createCommentVNode, createElementVNode, renderList, renderSlot, withDirectives, normalizeStyle, vShow, nextTick } from 'vue';
 import { Empty } from 'ant-design-vue';
-import XEUtils from 'xe-utils';
-import { VXETable, Header, Footer, Column, Table, Grid, Pager, Checkbox, CheckboxGroup, Radio, RadioGroup, Select, Input, Tooltip, Keyboard, Toolbar, Button, Icon } from 'vxe-table';
-import zhCN from 'vxe-table/es/locale/lang/zh-CN';
 
 var _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
@@ -14,11 +10,8 @@ var _export_sfc = (sfc, props) => {
   return target;
 };
 
-const _hoisted_1 = {
-  key: 0,
-  class: "floatPager"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main = {
+  name: "BmFloatTable",
   props: {
     config: {
       type: Object,
@@ -55,13 +48,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     "pageChange",
     "pageSizeChange"
   ],
-  setup(__props, { expose, emit: emits }) {
-    const props = __props;
-    const AEmpty = Empty;
+  setup(props, { emit }) {
     const floatTable = ref();
     const xGrid = ref();
+    onBeforeUnmount(function() {
+      inObserverDom && inObserverDom.disconnect();
+      scrollNotShowFloatTime && clearTimeout(scrollNotShowFloatTime);
+    });
     const state = reactive({
-      emptyImg: AEmpty.PRESENTED_IMAGE_SIMPLE,
+      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
       floatRefsId: {},
       floatId: "",
       isShowFloatHandle: true,
@@ -94,13 +89,13 @@ const _sfc_main = /* @__PURE__ */ 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,
@@ -188,7 +183,7 @@ const _sfc_main = /* @__PURE__ */ 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) {
@@ -203,7 +198,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         };
         extraFn.cellMouseleave = (e) => {
           let propsCellMouseLeave = props.events.cellMouseleave;
-          floatMouseLeave();
+          methods.floatMouseLeave();
           propsCellMouseLeave && propsCellMouseLeave(e);
         };
       }
@@ -230,81 +225,82 @@ const _sfc_main = /* @__PURE__ */ 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;
@@ -330,119 +326,96 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         immediate: true
       });
     }
-    onBeforeUnmount(function() {
-      inObserverDom && inObserverDom.disconnect();
-      scrollNotShowFloatTime && clearTimeout(scrollNotShowFloatTime);
-    });
-    return (_ctx, _cache) => {
-      const _component_vxe_grid = resolveComponent("vxe-grid");
-      return openBlock(), createElementBlock("div", {
-        ref_key: "floatTable",
-        ref: floatTable,
-        class: normalizeClass(unref(classes)),
-        onMouseleave: leaveFloatTable
-      }, [
-        createVNode(_component_vxe_grid, mergeProps({
-          ref_key: "xGrid",
-          ref: xGrid
-        }, unref(gridOptions), toHandlers(unref(gridEvents))), createSlots({
-          pager: withCtx(() => [
-            unref(pager).total && !unref(pager).hideOnSinglePage ? (openBlock(), createElementBlock("div", _hoisted_1, [
-              createVNode(unref(Pagination), mergeProps(unref(pager), {
-                onChange: pageNoChange,
-                onShowSizeChange: pageSizeChange
-              }), null, 16)
-            ])) : createCommentVNode("v-if", true)
-          ]),
-          empty: withCtx(() => [
-            createElementVNode("div", null, [
-              createVNode(unref(AEmpty), {
-                image: unref(state).emptyImg
-              }, null, 8, ["image"])
-            ])
-          ]),
-          _: 2
-        }, [
-          renderList(_ctx.$slots, (slot, key) => {
-            return {
-              name: key,
-              fn: withCtx((data) => [
-                key !== "floatHandle" ? renderSlot(_ctx.$slots, key, {
-                  key: 0,
-                  rowIndex: data.rowIndex,
-                  row: data.row,
-                  column: data.column
-                }) : (openBlock(), createElementBlock("div", {
-                  key: 1,
-                  ref: (el) => setItemRef(el, data.column, data.rowid)
-                }, [
-                  renderSlot(_ctx.$slots, "floatHandle", {
-                    row: data.row,
-                    rowIndex: data.rowIndex,
-                    column: data.column
-                  })
-                ], 512))
-              ])
-            };
-          })
-        ]), 1040),
-        withDirectives(createElementVNode("div", {
-          ref: "floatHandle",
-          class: normalizeClass(["floatHandle", {
-            floatRightIn: unref(state).isShowFloatHandle && !unref(state).goAnimationEnd
-          }]),
-          style: normalizeStyle({
-            top: unref(state).floatPosition?.top,
-            height: unref(state).floatPosition?.height
-          }),
-          onAnimationend: goAnimationEndFn,
-          onMouseenter: floatOverMouse,
-          onMouseleave: floatMouseLeave
-        }, [
-          createElementVNode("div", null, [
-            renderSlot(_ctx.$slots, "floatHandle", {
-              row: unref(state).floatRow,
-              rowIndex: unref(state).floatRowIndex
-            })
-          ])
-        ], 38), [
-          [
-            vShow,
-            unref(state).floatPosition?.top && __props.isNeedFloatHandle && unref(state).isShowFloatHandle
-          ]
-        ])
-      ], 34);
+    return {
+      floatTable,
+      xGrid,
+      ...toRefs(state),
+      classes,
+      gridOptions,
+      gridEvents,
+      pager,
+      ...methods
     };
   }
-});
-var FloatTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "float-table.vue"]]);
-
-VXETable.setup({
-    i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args),
-});
-const BmTable = withInstall(FloatTable);
-const BmFloatTable = {
-    install(app) {
-        app.component('BmTable', BmTable);
-        app
-            .use(Header)
-            .use(Footer)
-            .use(Column)
-            .use(Table)
-            .use(Grid)
-            .use(Pager)
-            .use(Checkbox)
-            .use(CheckboxGroup)
-            .use(Radio)
-            .use(RadioGroup)
-            .use(Select)
-            .use(Input)
-            .use(Tooltip)
-            .use(Keyboard)
-            .use(Toolbar)
-            .use(Button)
-            .use(Icon);
-    },
 };
+const _hoisted_1 = {
+  key: 0,
+  class: "floatPager"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_a_pagination = resolveComponent("a-pagination");
+  const _component_a_empty = resolveComponent("a-empty");
+  const _component_vxe_grid = resolveComponent("vxe-grid");
+  return openBlock(), createElementBlock("div", {
+    ref: "floatTable",
+    class: normalizeClass($setup.classes),
+    onMouseleave: _cache[3] || (_cache[3] = (...args) => _ctx.leaveFloatTable && _ctx.leaveFloatTable(...args))
+  }, [
+    createVNode(_component_vxe_grid, mergeProps({ ref: "xGrid" }, $setup.gridOptions, toHandlers($setup.gridEvents)), createSlots({
+      pager: withCtx(() => [
+        $setup.pager.total && !$setup.pager.hideOnSinglePage ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createVNode(_component_a_pagination, mergeProps($setup.pager, {
+            onChange: _ctx.pageNoChange,
+            onShowSizeChange: _ctx.pageSizeChange
+          }), null, 16, ["onChange", "onShowSizeChange"])
+        ])) : createCommentVNode("v-if", true)
+      ]),
+      empty: withCtx(() => [
+        createElementVNode("div", null, [
+          createVNode(_component_a_empty, { image: _ctx.simpleImage }, null, 8, ["image"])
+        ])
+      ]),
+      _: 2
+    }, [
+      renderList(_ctx.$slots, (slot, key) => {
+        return {
+          name: key,
+          fn: withCtx((data) => [
+            key !== "floatHandle" ? renderSlot(_ctx.$slots, key, {
+              key: 0,
+              rowIndex: data.rowIndex,
+              row: data.row,
+              column: data.column
+            }) : (openBlock(), createElementBlock("div", {
+              key: 1,
+              ref: (el) => _ctx.setItemRef(el, data.column, data.rowid)
+            }, [
+              renderSlot(_ctx.$slots, "floatHandle", {
+                row: data.row,
+                rowIndex: data.rowIndex,
+                column: data.column
+              })
+            ], 512))
+          ])
+        };
+      })
+    ]), 1040),
+    withDirectives(createElementVNode("div", {
+      ref: "floatHandle",
+      class: normalizeClass(["floatHandle", {
+        floatRightIn: _ctx.isShowFloatHandle && !_ctx.goAnimationEnd
+      }]),
+      style: 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))
+    }, [
+      createElementVNode("div", null, [
+        renderSlot(_ctx.$slots, "floatHandle", {
+          row: _ctx.floatRow,
+          rowIndex: _ctx.floatRowIndex
+        })
+      ])
+    ], 38), [
+      [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(FloatTable);
 
 export { BmFloatTable, BmFloatTable as default };