bm-admin-ui 0.1.1-9 → 1.0.2-alpha

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

@@ -0,0 +1,426 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var withInstall = require('bm-admin-ui/lib/utils/with-install');
+var vue = require('vue');
+var antDesignVue = require('ant-design-vue');
+
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+const _sfc_main = {
+  name: "BmFloatTable",
+  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, { emit }) {
+    const floatTable = vue.ref();
+    const xGrid = vue.ref();
+    vue.onBeforeUnmount(function() {
+      inObserverDom && inObserverDom.disconnect();
+      scrollNotShowFloatTime && clearTimeout(scrollNotShowFloatTime);
+    });
+    const state = vue.reactive({
+      simpleImage: antDesignVue.Empty.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) {
+          emit("radioChange", val);
+        },
+        checkboxChange(val) {
+          emit("checkboxChange", val);
+        },
+        checkboxAll(val) {
+          emit("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) {
+            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) {
+              state.inMaxScorllX = true;
+              state.isShowFloatHandle = false;
+            } else {
+              state.inMaxScorllX = false;
+              state.isShowFloatHandle = true;
+            }
+          }
+          propsscroll && propsscroll(e);
+        };
+        extraFn.cellMouseleave = (e) => {
+          let propsCellMouseLeave = props.events.cellMouseleave;
+          methods.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
+      };
+    });
+    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;
+        clearTimeout(scrollNotShowFloatTime);
+        if (!state.atVisible) {
+          scrollNotShowFloatTime = setTimeout(function() {
+            state.isInScroll = false;
+          }, 300);
+        }
+      }
+    };
+    let inObserverDom;
+    let isHasOver;
+    let closeSetRow;
+    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");
+            headerWrapper = headerWrapper || item.target.closest(".vxe-table--header-wrapper");
+            if (closeSetRow.clientWidth <= headerWrapper.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
+      });
+    }
+    return {
+      floatTable,
+      xGrid,
+      ...vue.toRefs(state),
+      classes,
+      gridOptions,
+      gridEvents,
+      pager,
+      ...methods
+    };
+  }
+};
+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;

package/lib/components/float-table/src/float-table.vue.d.ts

@@ -0,0 +1,69 @@
+declare const _default: {
+    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 default _default;

package/lib/components/flow-designer/index.js

@@ -45,7 +45,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-var FlowDesigner = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "E:\\develop\\bm-admin-ui\\packages\\components\\flow-designer\\src\\flow-designer.vue"]]);
+var FlowDesigner = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "flow-designer.vue"]]);
 
 const BmFlowDesigner = withInstall.withInstall(FlowDesigner);
 

package/lib/components/form-designer/index.js

@@ -32,7 +32,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-var FormDesigner = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "E:\\develop\\bm-admin-ui\\packages\\components\\form-designer\\src\\form-designer.vue"]]);
+var FormDesigner = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "form-designer.vue"]]);
 
 const BmFormDesigner = withInstall.withInstall(FormDesigner);
 

package/lib/components/index.d.ts

@@ -2,3 +2,10 @@ export * from './button';
 export * from './form-designer';
 export * from './flow-designer';
 export * from './search-filter';
+export * from './multi-cascader-compose';
+export * from './shops-filter';
+export * from './staffs-selector/index';
+export * from './float-table';
+export * from './over-tooltips';
+export * from './upload';
+export * from './timeline';

package/lib/components/index.js

@@ -6,6 +6,13 @@ var button = require('./button');
 var formDesigner = require('./form-designer');
 var flowDesigner = require('./flow-designer');
 var searchFilter = require('./search-filter');
+var multiCascaderCompose = require('./multi-cascader-compose');
+var shopsFilter = require('./shops-filter');
+var index = require('./staffs-selector/index');
+var floatTable = require('./float-table');
+var overTooltips = require('./over-tooltips');
+var upload = require('./upload');
+var timeline = require('./timeline');
 
 
 
@@ -33,3 +40,45 @@ Object.keys(searchFilter).forEach(function (k) {
 		get: function () { return searchFilter[k]; }
 	});
 });
+Object.keys(multiCascaderCompose).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return multiCascaderCompose[k]; }
+	});
+});
+Object.keys(shopsFilter).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return shopsFilter[k]; }
+	});
+});
+Object.keys(index).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return index[k]; }
+	});
+});
+Object.keys(floatTable).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return floatTable[k]; }
+	});
+});
+Object.keys(overTooltips).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return overTooltips[k]; }
+	});
+});
+Object.keys(upload).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return upload[k]; }
+	});
+});
+Object.keys(timeline).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return timeline[k]; }
+	});
+});