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

package/dist/index.umd.source.js

@@ -5858,6 +5858,21 @@ var __publicField = (obj, key2, value) => {
   }
   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);
@@ -5870,11 +5885,7 @@ var __publicField = (obj, key2, value) => {
     }
     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;
@@ -5945,26 +5956,30 @@ var __publicField = (obj, key2, value) => {
         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);
@@ -5977,7 +5992,7 @@ var __publicField = (obj, key2, value) => {
      * @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 || {});
@@ -6001,7 +6016,9 @@ var __publicField = (obj, key2, value) => {
         "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}`);
@@ -6058,17 +6075,20 @@ var __publicField = (obj, key2, value) => {
       }
     }
     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));
       }
     }
@@ -6085,26 +6105,31 @@ var __publicField = (obj, key2, value) => {
       if (!div) {
         isExist = false;
         div = this.createMask();
+        div.addEventListener(
+          "click",
+          (e2) => this.handleMaskClick(e2),
+          true
+        );
       }
       return {
         instance: div,
         isExist
       };
     }
-    catchClickEvent() {
-      if (this.mask) {
-        this.mask.addEventListener("click", (e2) => this.handleMaskClick(e2), true);
-      }
-    }
-    removeClickEvent() {
+    catchClickEvent(content, onMaskClick, instanceId) {
       if (this.mask) {
-        this.mask.removeEventListener("click", this.handleMaskClick);
+        setMaskEvent(this.mask, onMaskClick, [], content, instanceId);
       }
     }
     handleMaskClick(e2) {
-      if (e2.target === this.mask) {
-        if (typeof this.onClick === "function") {
-          Reflect.apply(this.onClick, this.popInstance || this, [e2]);
+      if (e2.target !== this.mask) {
+        return;
+      }
+      const events = getMaskEvent(this.mask);
+      if (events.length) {
+        const { event } = events.pop();
+        if (typeof event === "function") {
+          event(e2);
         }
       }
     }
@@ -6150,23 +6175,34 @@ var __publicField = (obj, key2, value) => {
     }
   }
   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);
@@ -6190,7 +6226,7 @@ var __publicField = (obj, key2, value) => {
      * @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;
@@ -6198,9 +6234,20 @@ var __publicField = (obj, key2, value) => {
       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
+      );
     }
     /**
      * 销毁指定实例
@@ -6225,7 +6272,13 @@ var __publicField = (obj, key2, value) => {
         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();
         }
@@ -6253,6 +6306,7 @@ var __publicField = (obj, key2, value) => {
       } else {
         content == null ? void 0 : content.remove();
       }
+      this.bKMaskManagerInstance.removeClickEvent();
     }
     onMaskClickFn(e2) {
       if (this.clickFn) {
@@ -13235,7 +13289,6 @@ ${$(r2)}`), n2;
         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;
             }
@@ -15492,14 +15545,13 @@ ${$(r2)}`), n2;
           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 {
@@ -18641,6 +18693,7 @@ ${$(r2)}`), n2;
       emit
     }) {
       const handleClose = async () => {
+        console.log("slider handleClose");
         let shouldClose = true;
         if (typeof props2.beforeClose === "function") {
           shouldClose = await props2.beforeClose();
@@ -21198,7 +21251,6 @@ ${$(r2)}`), n2;
     setup(props2, {
       emit
     }) {
-      var _a;
       const {
         resolveClassName: resolveClassName2
       } = usePrefix();
@@ -21209,7 +21261,10 @@ ${$(r2)}`), n2;
       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
@@ -21695,7 +21750,7 @@ ${$(r2)}`), n2;
       }
       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]);
@@ -21751,12 +21806,13 @@ ${$(r2)}`), n2;
         }
         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)
@@ -22062,13 +22118,16 @@ ${$(r2)}`), n2;
       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()])]
       })])]);
     }
     /**
@@ -22593,15 +22652,6 @@ ${$(r2)}`), n2;
       "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`,
@@ -22715,8 +22765,6 @@ ${$(r2)}`), n2;
       wrapperStyle,
       contentStyle,
       headStyle,
-      offsetXVarStyle,
-      headOffsetXVarStyle,
       resetTableHeight,
       updateBorderClass,
       getColumnsWidthOffsetWidth,
@@ -23133,8 +23181,6 @@ ${$(r2)}`), n2;
         contentStyle,
         headStyle,
         hasScrollYRef,
-        offsetXVarStyle,
-        headOffsetXVarStyle,
         updateBorderClass,
         resetTableHeight,
         getColumnsWidthOffsetWidth,
@@ -23315,8 +23361,9 @@ ${$(r2)}`), n2;
             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);
@@ -23376,6 +23423,10 @@ ${$(r2)}`), n2;
       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);
@@ -23390,25 +23441,6 @@ ${$(r2)}`), n2;
         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", {
@@ -23429,10 +23461,7 @@ ${$(r2)}`), n2;
           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,
@@ -23450,8 +23479,26 @@ ${$(r2)}`), n2;
           }), {
             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
@@ -26147,9 +26194,13 @@ ${$(r2)}`), n2;
                 offsetWidth,
                 offsetTop
               } = e2.trigger;
+              const msgTree = e2.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"]);