bm-admin-ui 1.0.0-alpha → 1.0.1-alpha

package/lib/components/button/index.d.ts

@@ -27,12 +27,12 @@ declare const BmButton: import("bm-admin-ui/es/utils/with-install").SFCWithInsta
             $props: Partial<{
                 block: boolean;
                 disabled: boolean;
-                ghost: boolean;
-                danger: boolean;
-                htmlType: import("ant-design-vue/lib/button/buttonTypes").ButtonHTMLType;
                 loading: boolean | {
                     delay?: number | undefined;
                 };
+                ghost: boolean;
+                danger: boolean;
+                htmlType: import("ant-design-vue/lib/button/buttonTypes").ButtonHTMLType;
             }> & Omit<Readonly<import("vue").ExtractPropTypes<{
                 prefixCls: StringConstructor;
                 type: import("vue").PropType<import("ant-design-vue/lib/button").ButtonType>;
@@ -144,12 +144,12 @@ declare const BmButton: import("bm-admin-ui/es/utils/with-install").SFCWithInsta
             }>>, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
                 block: boolean;
                 disabled: boolean;
-                ghost: boolean;
-                danger: boolean;
-                htmlType: import("ant-design-vue/lib/button/buttonTypes").ButtonHTMLType;
                 loading: boolean | {
                     delay?: number | undefined;
                 };
+                ghost: boolean;
+                danger: boolean;
+                htmlType: import("ant-design-vue/lib/button/buttonTypes").ButtonHTMLType;
             }> & {
                 beforeCreate?: (() => void) | (() => void)[] | undefined;
                 created?: (() => void) | (() => void)[] | undefined;
@@ -271,12 +271,12 @@ declare const BmButton: import("bm-admin-ui/es/utils/with-install").SFCWithInsta
     }>>, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
         block: boolean;
         disabled: boolean;
-        ghost: boolean;
-        danger: boolean;
-        htmlType: import("ant-design-vue/lib/button/buttonTypes").ButtonHTMLType;
         loading: boolean | {
             delay?: number | undefined;
         };
+        ghost: boolean;
+        danger: boolean;
+        htmlType: import("ant-design-vue/lib/button/buttonTypes").ButtonHTMLType;
     }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin & {
         readonly Group: import("vue").DefineComponent<{
             prefixCls: StringConstructor;

package/lib/components/button/index.js

@@ -50,7 +50,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-var Button = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/hesiying/work/bm-admin-ui/packages/components/button/src/button.vue"]]);
+var Button = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "button.vue"]]);
 
 const BmButton = withInstall.withInstall(Button);
 

package/lib/components/button/src/button.vue.d.ts

@@ -29,12 +29,12 @@ declare const _default: import("vue").DefineComponent<{
             $props: Partial<{
                 block: boolean;
                 disabled: boolean;
-                ghost: boolean;
-                danger: boolean;
-                htmlType: import("ant-design-vue/lib/button/buttonTypes").ButtonHTMLType;
                 loading: boolean | {
                     delay?: number | undefined;
                 };
+                ghost: boolean;
+                danger: boolean;
+                htmlType: import("ant-design-vue/lib/button/buttonTypes").ButtonHTMLType;
             }> & Omit<Readonly<import("vue").ExtractPropTypes<{
                 prefixCls: StringConstructor;
                 type: import("vue").PropType<ButtonType>;
@@ -146,12 +146,12 @@ declare const _default: import("vue").DefineComponent<{
             }>>, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
                 block: boolean;
                 disabled: boolean;
-                ghost: boolean;
-                danger: boolean;
-                htmlType: import("ant-design-vue/lib/button/buttonTypes").ButtonHTMLType;
                 loading: boolean | {
                     delay?: number | undefined;
                 };
+                ghost: boolean;
+                danger: boolean;
+                htmlType: import("ant-design-vue/lib/button/buttonTypes").ButtonHTMLType;
             }> & {
                 beforeCreate?: (() => void) | (() => void)[] | undefined;
                 created?: (() => void) | (() => void)[] | undefined;
@@ -273,12 +273,12 @@ declare const _default: import("vue").DefineComponent<{
     }>>, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
         block: boolean;
         disabled: boolean;
-        ghost: boolean;
-        danger: boolean;
-        htmlType: import("ant-design-vue/lib/button/buttonTypes").ButtonHTMLType;
         loading: boolean | {
             delay?: number | undefined;
         };
+        ghost: boolean;
+        danger: boolean;
+        htmlType: import("ant-design-vue/lib/button/buttonTypes").ButtonHTMLType;
     }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin & {
         readonly Group: import("vue").DefineComponent<{
             prefixCls: StringConstructor;

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

@@ -0,0 +1,5 @@
+declare const BmFloatTable: {
+    install(app: any): void;
+};
+export { BmFloatTable };
+export default BmFloatTable;

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

@@ -0,0 +1,459 @@
+'use strict';
+
+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;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+const _hoisted_1 = {
+  key: 0,
+  class: "floatPager"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  props: {
+    config: {
+      type: Object,
+      required: true,
+      default: () => {
+        return {};
+      }
+    },
+    pagerProps: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    events: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    isNeedFloatHandle: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: "middle"
+    }
+  },
+  emits: [
+    "radioChange",
+    "checkboxChange",
+    "checkboxChangeAll",
+    "pageChange",
+    "pageSizeChange"
+  ],
+  setup(__props, { expose, emit: emits }) {
+    const props = __props;
+    const AEmpty = antDesignVue.Empty;
+    const floatTable = vue.ref();
+    const xGrid = vue.ref();
+    const state = vue.reactive({
+      emptyImg: AEmpty.PRESENTED_IMAGE_SIMPLE,
+      floatRefsId: {},
+      floatId: "",
+      isShowFloatHandle: true,
+      gridOptions: {
+        resizable: false,
+        border: "default",
+        highlightHoverRow: true,
+        showOverflow: false,
+        showHeaderOverflow: true,
+        align: null,
+        columns: [],
+        tooltipConfig: { leaveDelay: 1e6 },
+        data: [],
+        pagerConfig: {},
+        emptyText: "\u6682\u65E0\u6570\u636E",
+        checkboxConfig: {
+          reserve: false,
+          highlight: vue.computed(function() {
+            return props.config.columns.some(function(item) {
+              return item.type === "checkbox" || item.type === "checkbox";
+            });
+          }),
+          trigger: "row"
+        },
+        rowClassName: "tb-row",
+        sortConfig: {
+          trigger: "cell",
+          orders: ["desc", "asc", null]
+        }
+      },
+      gridEvents: {
+        radioChange(val) {
+          emits("radioChange", val);
+        },
+        checkboxChange(val) {
+          emits("checkboxChange", val);
+        },
+        checkboxAll(val) {
+          emits("checkboxChangeAll", val);
+        }
+      },
+      atVisible: false,
+      goAnimationEnd: false,
+      floatPosition: {
+        top: "0",
+        height: "0"
+      },
+      trNodes: [],
+      isInScroll: false,
+      inMaxScorllX: false,
+      floatRow: {},
+      floatRowIndex: void 0,
+      floatHandleDomCol: null
+    });
+    const classes = vue.computed(() => {
+      return [
+        "floatTable",
+        "bm-table",
+        `table-${props.size}`,
+        {
+          floatHandleTable: props.isNeedFloatHandle && (!state.atVisible || state.inMaxScorllX) && state.floatHandleDomCol
+        }
+      ];
+    });
+    const gridOptions = vue.computed(() => {
+      return {
+        ...state.gridOptions,
+        ...props.config
+      };
+    });
+    let mouseenterCellTime;
+    const gridEvents = vue.computed(() => {
+      let extraFn = {};
+      if (props.isNeedFloatHandle) {
+        let propscellMouseenter = props.events.cellMouseenter;
+        extraFn.cellMouseenter = (e) => {
+          if (props.isNeedFloatHandle) {
+            if (state.isInScroll) {
+              state.isShowFloatHandle = false;
+              return;
+            }
+            if (state.inMaxScorllX) {
+              state.isShowFloatHandle = false;
+            }
+            let rowid = e.rowid;
+            let row = e.row;
+            clearTimeout(mouseenterCellTime);
+            mouseenterCellTime = setTimeout(function() {
+              if (state.floatId !== rowid) {
+                state.goAnimationEnd = false;
+              } else {
+                return;
+              }
+              state.floatId = rowid;
+              state.floatRow = row;
+              state.floatRowIndex = e.rowIndex;
+              let domEl = state.floatRefsId[rowid];
+              let tdDom = domEl && domEl.closest("td");
+              if (!tdDom)
+                return;
+              let clientHeight = tdDom.clientHeight - 1 + "px";
+              let trDoms = document.querySelectorAll(`[rowid='${rowid}']`);
+              state.trNodes = trDoms;
+              let top = e.cell.getBoundingClientRect().top;
+              let parentTop = floatTable.value.getBoundingClientRect().top;
+              top = top - parentTop + "px";
+              state.floatPosition = {
+                top,
+                height: clientHeight
+              };
+              if (!state.atVisible && !state.inMaxScorllX) {
+                state.isShowFloatHandle = true;
+              }
+              vue.nextTick(() => {
+                let $floatHandle = document.querySelector(".floatHandle");
+                if ($floatHandle.clientWidth === 32) {
+                  $floatHandle.style.padding = 0;
+                }
+              });
+            }, 200);
+          }
+          propscellMouseenter && propscellMouseenter(e);
+        };
+        extraFn.scroll = (e) => {
+          let propsscroll = props.events.scroll;
+          if (e.isY && props.isNeedFloatHandle) {
+            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) {
+              state.inMaxScorllX = true;
+              state.isShowFloatHandle = false;
+            } else {
+              state.inMaxScorllX = false;
+              state.isShowFloatHandle = true;
+            }
+          }
+          propsscroll && propsscroll(e);
+        };
+        extraFn.cellMouseleave = (e) => {
+          let propsCellMouseLeave = props.events.cellMouseleave;
+          floatMouseLeave();
+          propsCellMouseLeave && propsCellMouseLeave(e);
+        };
+      }
+      return {
+        ...state.gridEvents,
+        ...props.events,
+        ...extraFn
+      };
+    });
+    const pager = vue.computed(() => {
+      let pager2 = {
+        size: "small",
+        showTotal: (total) => `\u5171 ${total} \u6761`,
+        showQuickJumper: true,
+        showSizeChanger: true,
+        current: 1,
+        pageSize: 10,
+        total: 0,
+        hideOnSinglePage: false,
+        pageSizeOptions: ["10", "30", "50", "100"]
+      };
+      return {
+        ...pager2,
+        ...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(() => {
+        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, "")}`;
+        }
+      });
+    };
+    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;
+    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) {
+              inObserverDom.disconnect();
+            } else {
+              isHasOver = true;
+            }
+            state.isShowFloatHandle = false;
+            state.atVisible = true;
+          } else {
+            if (gridOptions.value.data && gridOptions.value.data.length > 0) {
+              state.goAnimationEnd = false;
+              state.isShowFloatHandle = true;
+              state.atVisible = false;
+            }
+          }
+        });
+      }, {
+        threshold: 0.1
+      });
+      vue.watch(() => state.floatHandleDomCol, function(col) {
+        if (col) {
+          inObserverDom.observe(col);
+        }
+      }, {
+        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);
+    };
+  }
+});
+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);
+    },
+};
+
+exports.BmFloatTable = BmFloatTable;
+exports["default"] = BmFloatTable;