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

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

@@ -42,7 +42,7 @@ const _sfc_main = /* @__PURE__ */ 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(Button);
 

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

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

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

@@ -0,0 +1,448 @@
+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 { 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;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+const _hoisted_1 = {
+  key: 0,
+  class: "floatPager"
+};
+const _sfc_main = /* @__PURE__ */ 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 = Empty;
+    const floatTable = ref();
+    const xGrid = ref();
+    const state = 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: 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 = computed(() => {
+      return [
+        "floatTable",
+        "bm-table",
+        `table-${props.size}`,
+        {
+          floatHandleTable: props.isNeedFloatHandle && (!state.atVisible || state.inMaxScorllX) && state.floatHandleDomCol
+        }
+      ];
+    });
+    const gridOptions = computed(() => {
+      return {
+        ...state.gridOptions,
+        ...props.config
+      };
+    });
+    let mouseenterCellTime;
+    const gridEvents = 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;
+              }
+              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 = 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
+      });
+      watch(() => state.floatHandleDomCol, function(col) {
+        if (col) {
+          inObserverDom.observe(col);
+        }
+      }, {
+        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);
+    };
+  }
+});
+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);
+    },
+};
+
+export { BmFloatTable, BmFloatTable as default };