bkui-vue 0.0.2-beta.16 → 0.0.2-beta.18

package/dist/index.cjs.source.js

@@ -5857,6 +5857,21 @@ class BKZIndexManager {
 }
 const bkZIndexManager = new BKZIndexManager();
 `__bk_mask_${random(16)}`;
+const MaskEventMap = /* @__PURE__ */ new WeakMap();
+const getMaskEvent = (mask) => {
+  if (MaskEventMap.has(mask)) {
+    return MaskEventMap.get(mask);
+  }
+  return [];
+};
+const setMaskEvent = (mask, event, args, content, instanceId) => {
+  const maskEvent = getMaskEvent(mask);
+  if (maskEvent.some((evet) => evet.instanceId === instanceId)) {
+    return;
+  }
+  maskEvent.push({ event, args, content, instanceId });
+  MaskEventMap.set(mask, maskEvent);
+};
 class MaskQueueMaker {
   constructor() {
     __publicField(this, "timer", null);
@@ -5869,11 +5884,7 @@ class MaskQueueMaker {
   }
   pushMaskStyle(parentNode, style2) {
     const value = this.getMaskMap(parentNode);
-    if (!(value == null ? void 0 : value.styles)) {
-      this.setMaskMap(parentNode, { styles: [style2], ...value || {} });
-    } else {
-      value.styles.push(style2);
-    }
+    this.setMaskMap(parentNode, { styles: [style2], ...value || {} });
   }
   getMaskStyles(parentNode) {
     var _a;
@@ -5944,26 +5955,30 @@ class BkMaskManager {
       display: "none",
       "background-color": "rgba(0,0,0,.6)"
     });
-    __publicField(this, "onClick");
     // 用于判定是否已经初始化过当前实例
     __publicField(this, "isInit", false);
     __publicField(this, "maskAttrTag", "auto");
-    __publicField(this, "popInstance");
-    const { multiInstance = false, maskAttrTag = "auto", parentNode = document.body, maskStyle = {}, onClick = null, popInstance = null } = config || {};
+    const {
+      multiInstance = false,
+      maskAttrTag = "auto",
+      parentNode = document.body,
+      maskStyle = {}
+    } = config || {};
     this.parentNode = parentNode || document;
     this.maskAttrTag = maskAttrTag;
-    this.onClick = onClick;
     this.activeInstance = void 0;
     this.multiInstance = multiInstance;
-    this.popInstance = popInstance;
     this.uniqueMaskAttrTag = this.getMaskAttrTag(maskAttrTag);
     bkMaskMaker.appendMaker(() => {
       this.initInstance(maskStyle);
     });
   }
   setOption(option) {
-    const { parentNode = document.body, maskStyle = {}, onClick = null, maskAttrTag = this.maskAttrTag } = option || {};
-    this.onClick = onClick;
+    const {
+      parentNode = document.body,
+      maskStyle = {},
+      maskAttrTag = this.maskAttrTag
+    } = option || {};
     this.parentNode = parentNode || document;
     this.setMaskStyle(Object.assign({}, this.maskStyle, maskStyle));
     this.uniqueMaskAttrTag = this.getMaskAttrTag(maskAttrTag);
@@ -5976,7 +5991,7 @@ class BkMaskManager {
    * @param appendStyle 追加样式
    * @param transfer 是否显示将内容加入遮罩下
    */
-  show(content, zIndex, showMask = true, appendStyle = {}, uuid2 = null, transfer2 = false) {
+  show(content, zIndex, showMask = true, appendStyle = {}, uuid2 = null, transfer2 = false, onMaskClick, instanceId) {
     const uid = uuid2 ?? random(16);
     const localZIndex = /-?\d+/.test(`${zIndex}`) ? zIndex : bkZIndexManager.getModalNextIndex();
     let style2 = Object.assign({}, this.maskStyle, appendStyle || {});
@@ -6000,7 +6015,9 @@ class BkMaskManager {
       "pointer-events": "all"
     });
     this.initInstance(style2);
-    this.catchClickEvent();
+    if (onMaskClick) {
+      this.catchClickEvent(content, onMaskClick, instanceId);
+    }
     this.setMaskStyle(style2);
     bkMaskMaker.pushMaskStyle(this.parentNode, { ...style2 });
     this.backupMask.style.setProperty("z-index", `${localZIndex - 1}`);
@@ -6057,17 +6074,20 @@ class BkMaskManager {
     }
   }
   backupContentElement(content) {
-    content && this.backupMask.append(content);
+    var _a;
+    content && ((_a = this.backupMask) == null ? void 0 : _a.append(content));
   }
   getActiveContentInstance() {
     return this.activeInstance;
   }
+  removeClickEvent() {
+  }
   initInstance(maskStyle) {
     if (!this.isInit) {
       this.isInit = true;
+      this.backupMask = this.getBackupMask();
       const { instance, isExist } = this.getMask();
       this.mask = instance;
-      this.backupMask = this.getBackupMask();
       !isExist && this.setMaskStyle(Object.assign({}, this.maskStyle, maskStyle));
     }
   }
@@ -6084,26 +6104,31 @@ class BkMaskManager {
     if (!div) {
       isExist = false;
       div = this.createMask();
+      div.addEventListener(
+        "click",
+        (e3) => this.handleMaskClick(e3),
+        true
+      );
     }
     return {
       instance: div,
       isExist
     };
   }
-  catchClickEvent() {
-    if (this.mask) {
-      this.mask.addEventListener("click", (e3) => this.handleMaskClick(e3), true);
-    }
-  }
-  removeClickEvent() {
+  catchClickEvent(content, onMaskClick, instanceId) {
     if (this.mask) {
-      this.mask.removeEventListener("click", this.handleMaskClick);
+      setMaskEvent(this.mask, onMaskClick, [], content, instanceId);
     }
   }
   handleMaskClick(e3) {
-    if (e3.target === this.mask) {
-      if (typeof this.onClick === "function") {
-        Reflect.apply(this.onClick, this.popInstance || this, [e3]);
+    if (e3.target !== this.mask) {
+      return;
+    }
+    const events = getMaskEvent(this.mask);
+    if (events.length) {
+      const { event } = events.pop();
+      if (typeof event === "function") {
+        event(e3);
       }
     }
   }
@@ -6149,23 +6174,34 @@ class BkMaskManager {
   }
 }
 new BkMaskManager({});
+const popInstanceStore = /* @__PURE__ */ new WeakMap();
 class BKPopIndexManager {
-  // private instanceUUID;
   constructor(options) {
     /** 用来缓存弹出层实例 */
-    __publicField(this, "popInstanceList");
     __publicField(this, "uuidAttrName");
     __publicField(this, "clickFn");
     __publicField(this, "bKMaskManagerInstance");
-    this.popInstanceList = [];
+    __publicField(this, "transfer");
+    __publicField(this, "uniqId");
     this.clickFn = void 0;
     this.uuidAttrName = "data-bk-pop-uuid";
+    this.uniqId = random(16);
+    this.transfer = this.getParentNode(options == null ? void 0 : options.transfer);
     this.bKMaskManagerInstance = new BkMaskManager({
       parentNode: this.getParentNode(options == null ? void 0 : options.transfer),
       popInstance: this,
       onClick: this.onMaskClickFn
     });
   }
+  get popInstanceList() {
+    if (!popInstanceStore.has(this.transfer)) {
+      popInstanceStore.set(this.transfer, []);
+    }
+    return popInstanceStore.get(this.transfer);
+  }
+  set popInstanceList(val) {
+    popInstanceStore.set(this.transfer, val);
+  }
   getParentNode(transfer2) {
     if (typeof transfer2 === "string") {
       const target = document.querySelector(transfer2);
@@ -6189,7 +6225,7 @@ class BKPopIndexManager {
    * @param transfer 是否显示在body内（即是否显示在div#app内，默认为false）
    * @returns
    */
-  show(content, showMask = true, appendStyle = {}, transfer2 = false, zindex = void 0) {
+  show(content, showMask = true, appendStyle = {}, transfer2 = false, zindex = void 0, onMaskClick) {
     if (!content) {
       console.warn("pop show error: content is null or undefined");
       return;
@@ -6197,9 +6233,20 @@ class BKPopIndexManager {
     const zIndex = typeof zindex === "number" ? zindex : bkZIndexManager.getModalNextIndex();
     const uuid2 = random(16);
     content.setAttribute(this.uuidAttrName, uuid2);
+    if (this.popInstanceList.length > 0) {
+      showMask && this.bKMaskManagerInstance.backupContentElement(this.popInstanceList.slice(-1)[0].content);
+    }
     this.popInstanceList.push({ uuid: uuid2, zIndex, content, showMask, appendStyle });
-    showMask && this.bKMaskManagerInstance.backupActiveInstance();
-    this.bKMaskManagerInstance.show(content, zIndex, showMask, appendStyle, uuid2, transfer2);
+    this.bKMaskManagerInstance.show(
+      content,
+      zIndex,
+      showMask,
+      appendStyle,
+      uuid2,
+      transfer2,
+      onMaskClick,
+      this.uniqId
+    );
   }
   /**
    * 销毁指定实例
@@ -6224,7 +6271,13 @@ class BKPopIndexManager {
       if (this.popInstanceList.length) {
         const activeItem = this.popInstanceList.slice(-1)[0];
         const { zIndex, content, showMask, appendStyle, uuid: uuid2 } = activeItem;
-        this.bKMaskManagerInstance.show(content, zIndex, showMask, appendStyle, uuid2);
+        this.bKMaskManagerInstance.show(
+          content,
+          zIndex,
+          showMask,
+          appendStyle,
+          uuid2
+        );
       } else {
         this.bKMaskManagerInstance.hide();
       }
@@ -6252,6 +6305,7 @@ class BKPopIndexManager {
     } else {
       content == null ? void 0 : content.remove();
     }
+    this.bKMaskManagerInstance.removeClickEvent();
   }
   onMaskClickFn(e3) {
     if (this.clickFn) {
@@ -13234,7 +13288,6 @@ const usePopperId = (props2, prefix = "#") => {
       if (!/^body$/i.test(props2.boundary)) {
         if (typeof props2.boundary === "string") {
           if (!isAvailableId(props2.boundary)) {
-            console.error("props.boundary is not available selector");
             resolvedBoundary = "body";
             return;
           }
@@ -15491,14 +15544,13 @@ const Component$t = /* @__PURE__ */ vue.defineComponent({
         var _a, _b;
         if (val) {
           this.$nextTick(() => {
-            this.bkPopIndexManager.onMaskClick((_e) => {
-              this.handleClickOutSide();
-            }, this.$el);
             const hideMaskStyle = {
               "background-color": "rgba(0,0,0,0)"
             };
             const appendStyle = this.showMask ? {} : hideMaskStyle;
-            this.bkPopIndexManager.show(this.$el, this.showMask, appendStyle, !!this.transfer, this.zIndex);
+            this.bkPopIndexManager.show(this.$el, this.showMask, appendStyle, !!this.transfer, this.zIndex, (_e) => {
+              this.handleClickOutSide();
+            });
             this.$emit("shown");
           });
         } else {
@@ -18640,6 +18692,7 @@ const Component$j = /* @__PURE__ */ vue.defineComponent({
     emit
   }) {
     const handleClose = async () => {
+      console.log("slider handleClose");
       let shouldClose = true;
       if (typeof props2.beforeClose === "function") {
         shouldClose = await props2.beforeClose();
@@ -21197,7 +21250,6 @@ const HeadFilter = /* @__PURE__ */ vue.defineComponent({
   setup(props2, {
     emit
   }) {
-    var _a;
     const {
       resolveClassName: resolveClassName2
     } = usePrefix();
@@ -21208,7 +21260,10 @@ const HeadFilter = /* @__PURE__ */ vue.defineComponent({
     const {
       filter
     } = vue.toRefs(props2.column);
-    const checked = vue.ref(((_a = filter.value) == null ? void 0 : _a.checked) ?? []);
+    const checked = vue.computed(() => {
+      var _a;
+      return ((_a = filter.value) == null ? void 0 : _a.checked) ?? [];
+    });
     const state = vue.reactive({
       isOpen: false,
       checked: checked.value
@@ -21694,7 +21749,7 @@ const useFixedColumn = (props2, colgroups, hasScrollY) => {
     }
     const fixedOffset = {
       left: 0,
-      right: hasScrollY2 ? SCROLLY_WIDTH : 0
+      right: hasScrollY2 ? SCROLLY_WIDTH : -1
     };
     const fixedPos = resolveFixColPos(column);
     fixedOffset[fixedPos] = getPreColumnOffset(fixedPos, column, fixedOffset[fixedPos]);
@@ -21750,12 +21805,13 @@ class TableRender {
       }
       return resolvePropVal(this.props, "rowHeight", ["tbody", row, rowIndex]);
     });
-    __publicField(this, "getColumnClass", (column, colIndex) => [{
+    __publicField(this, "getColumnClass", (column, colIndex) => ({
       [`${this.uuid}-column-${colIndex}`]: true,
       column_fixed: !!column.fixed,
       column_fixed_left: !!column.fixed,
-      column_fixed_right: column.fixed === "right"
-    }, column.className]);
+      column_fixed_right: column.fixed === "right",
+      [`${column.className}`]: true
+    }));
     __publicField(this, "getHeadColumnClass", (column, colIndex) => ({
       ...this.getColumnClass(column, colIndex),
       active: this.isColActive(colIndex)
@@ -22061,13 +22117,16 @@ class TableRender {
     return vue.createVNode(vue.Fragment, null, [vue.createVNode("thead", {
       "style": rowStyle
     }, [vue.createVNode(TableRow, null, {
-      default: () => [vue.createVNode("tr", null, [this.filterColGroups.map((column, index2) => vue.createVNode("th", vue.mergeProps({
-        "colspan": 1,
-        "rowspan": 1,
-        "class": [this.getHeadColumnClass(column, index2), this.getColumnCustomClass(column), column.align || this.props.headerAlign || this.props.align],
-        "style": resolveFixedColumnStyle(column, this.styleRef.value.hasScrollY),
-        "onClick": () => this.handleColumnHeadClick(index2, column)
-      }, resolveEventListener(column)), [renderHeadCell(column, index2)])), getScrollFix()])]
+      default: () => [vue.createVNode("tr", null, [this.filterColGroups.map((column, index2) => {
+        console.log("getHeadColumnClass", column, index2, this.getHeadColumnClass(column, index2));
+        return vue.createVNode("th", vue.mergeProps({
+          "colspan": 1,
+          "rowspan": 1,
+          "class": [this.getHeadColumnClass(column, index2), this.getColumnCustomClass(column), column.align || this.props.headerAlign || this.props.align],
+          "style": resolveFixedColumnStyle(column, this.styleRef.value.hasScrollY),
+          "onClick": () => this.handleColumnHeadClick(index2, column)
+        }, resolveEventListener(column)), [renderHeadCell(column, index2)]);
+      }), getScrollFix()])]
     })])]);
   }
   /**
@@ -22592,15 +22651,6 @@ const useClass = (props2, targetColumns, root, reactiveProp, pageData) => {
     "has-settings": !!props2.settings
   });
   const resolvedColumns = vue.computed(() => getColumns());
-  const offsetXVarStyle = vue.computed(() => ({
-    "--var-scroll-left": `${reactiveProp.scrollTranslateX}px`,
-    "--var-scroll-top": `${reactiveProp.scrollTranslateY}px`
-  }));
-  const headOffsetXVarStyle = vue.computed(() => ({
-    "--var-scroll-left": `${reactiveProp.scrollTranslateX}px`,
-    "--var-scroll-top": "0px",
-    right: hasScrollYRef.value ? `${SCROLLY_WIDTH - 2}px` : "0px"
-  }));
   const config = resolveHeadConfig(props2);
   const headStyle = vue.computed(() => ({
     "--row-height": `${resolvePropVal(config, "height", ["thead"])}px`,
@@ -22714,8 +22764,6 @@ const useClass = (props2, targetColumns, root, reactiveProp, pageData) => {
     wrapperStyle,
     contentStyle,
     headStyle,
-    offsetXVarStyle,
-    headOffsetXVarStyle,
     resetTableHeight,
     updateBorderClass,
     getColumnsWidthOffsetWidth,
@@ -23132,8 +23180,6 @@ const Component$f = /* @__PURE__ */ vue.defineComponent({
       contentStyle,
       headStyle,
       hasScrollYRef,
-      offsetXVarStyle,
-      headOffsetXVarStyle,
       updateBorderClass,
       resetTableHeight,
       getColumnsWidthOffsetWidth,
@@ -23314,8 +23360,9 @@ const Component$f = /* @__PURE__ */ vue.defineComponent({
           if (!root.value) {
             return;
           }
-          if (props2.height === "100%" || props2.height === "auto")
-            ;
+          if (props2.height === "100%" || props2.height === "auto") {
+            resetTableHeight(root.value);
+          }
           updateBorderClass(root.value);
           const offset2 = getColumnsWidthOffsetWidth();
           resolveColumnWidth(root.value, colgroups, 20, offset2);
@@ -23375,6 +23422,10 @@ const Component$f = /* @__PURE__ */ vue.defineComponent({
     const footerStyle = vue.computed(() => ({
       "--footer-height": hasFooter.value ? `${props2.paginationHeight}px` : "0"
     }));
+    const fixedContainerStyle = vue.computed(() => ({
+      right: hasScrollYRef.value ? `${SCROLLY_WIDTH}px` : 0,
+      ...footerStyle.value
+    }));
     const {
       renderScrollLoading
     } = useScrollLoading(props2, ctx);
@@ -23389,25 +23440,6 @@ const Component$f = /* @__PURE__ */ vue.defineComponent({
       zIndex: 2,
       ...props2.prependStyle || {}
     }));
-    const renderFixedColumns = () => fixedColumns.value.map(({
-      isExist,
-      colPos,
-      column
-    }) => isExist ? "" : vue.createVNode("div", {
-      "class": resolveColumnClass(column, reactiveSchema.scrollTranslateX, tableOffsetRight.value),
-      "style": resolveColumnStyle(colPos)
-    }, null));
-    const renderBodyAppend = () => vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
-      "class": fixedBottomBorder.value
-    }, null), vue.createVNode("div", {
-      "class": fixedWrapperClass,
-      "style": offsetXVarStyle.value
-    }, [renderFixedColumns(), vue.createVNode("div", {
-      "class": resizeColumnClass,
-      "style": resizeColumnStyle.value
-    }, null), vue.createVNode("div", {
-      "class": loadingRowClass
-    }, [renderScrollLoading()])])]);
     const renderPrepend = () => {
       if (ctx.slots.prepend) {
         return vue.createVNode("div", {
@@ -23428,10 +23460,7 @@ const Component$f = /* @__PURE__ */ vue.defineComponent({
         vue.createVNode("div", {
           "class": headClass,
           "style": headStyle.value
-        }, [[tableRender.renderTableHeadSchema(), vue.createVNode("div", {
-          "class": fixedWrapperClass,
-          "style": headOffsetXVarStyle.value
-        }, [renderFixedColumns()])]]),
+        }, [tableRender.renderTableHeadSchema()]),
         vue.createVNode(BkVirtualRender, vue.mergeProps({
           "ref": refVirtualRender,
           "lineHeight": tableRender.getRowHeight,
@@ -23449,8 +23478,26 @@ const Component$f = /* @__PURE__ */ vue.defineComponent({
         }), {
           beforeContent: () => renderPrepend(),
           default: (scope) => tableRender.renderTableBodySchema(scope.data || pageData),
-          afterSection: () => renderBodyAppend()
+          afterSection: () => vue.createVNode("div", {
+            "class": fixedBottomBorder.value
+          }, null)
         }),
+        vue.createVNode("div", {
+          "class": fixedWrapperClass,
+          "style": fixedContainerStyle.value
+        }, [fixedColumns.value.map(({
+          isExist,
+          colPos,
+          column
+        }) => isExist ? "" : vue.createVNode("div", {
+          "class": resolveColumnClass(column, reactiveSchema.scrollTranslateX, tableOffsetRight.value),
+          "style": resolveColumnStyle(colPos)
+        }, null)), vue.createVNode("div", {
+          "class": resizeColumnClass,
+          "style": resizeColumnStyle.value
+        }, null), vue.createVNode("div", {
+          "class": loadingRowClass
+        }, [renderScrollLoading()])]),
         vue.createVNode("div", {
           "class": footerClass.value,
           "style": footerStyle.value
@@ -26146,9 +26193,13 @@ const MessageConstructor = /* @__PURE__ */ vue.defineComponent({
               offsetWidth,
               offsetTop
             } = e3.trigger;
+            const msgTree = e3.trigger.closest(".message-tree");
+            const msgTreeScrollTop = msgTree ? msgTree.scrollTop : 0;
             target.classList.remove(...["success", "error", "is-hidden"]);
             target.classList.add(...[theme, "is-show"]);
-            target.style.setProperty("transform", `translate(${offsetLeft + offsetWidth / 2 - 41}px, ${offsetTop - 40}px`);
+            const transX = offsetLeft + offsetWidth / 2 - 41;
+            const transY = offsetTop - msgTreeScrollTop - 40;
+            target.style.setProperty("transform", `translate(${transX}px, ${transY}px`);
             copyStatusTimer && clearTimeout(copyStatusTimer);
             copyStatusTimer = setTimeout(() => {
               target.classList.remove(...["is-show"]);