bkui-vue 0.0.2-beta.15 → 0.0.2-beta.17

package/dist/index.umd.source.js

@@ -5870,11 +5870,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;
@@ -6066,9 +6062,9 @@ var __publicField = (obj, key2, value) => {
     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));
       }
     }
@@ -6150,23 +6146,32 @@ 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");
       this.clickFn = void 0;
       this.uuidAttrName = "data-bk-pop-uuid";
+      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);
@@ -6198,8 +6203,10 @@ 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);
     }
     /**
@@ -13235,7 +13242,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;
             }
@@ -21198,7 +21204,6 @@ ${$(r2)}`), n2;
     setup(props2, {
       emit
     }) {
-      var _a;
       const {
         resolveClassName: resolveClassName2
       } = usePrefix();
@@ -21209,7 +21214,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 +21703,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 +21759,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 +22071,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 +22605,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 +22718,6 @@ ${$(r2)}`), n2;
       wrapperStyle,
       contentStyle,
       headStyle,
-      offsetXVarStyle,
-      headOffsetXVarStyle,
       resetTableHeight,
       updateBorderClass,
       getColumnsWidthOffsetWidth,
@@ -23133,8 +23134,6 @@ ${$(r2)}`), n2;
         contentStyle,
         headStyle,
         hasScrollYRef,
-        offsetXVarStyle,
-        headOffsetXVarStyle,
         updateBorderClass,
         resetTableHeight,
         getColumnsWidthOffsetWidth,
@@ -23315,8 +23314,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 +23376,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 +23394,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 +23414,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 +23432,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 +26147,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"]);
@@ -26473,7 +26477,10 @@ ${$(r2)}`), n2;
           isShow.value = false;
         };
         function update(newValue) {
-          modalFuncProps.value = newValue;
+          modalFuncProps.value = {
+            ...modalFuncProps.value,
+            ...newValue
+          };
         }
         expose({
           update
@@ -26509,6 +26516,8 @@ ${$(r2)}`), n2;
           class: resolveClassName2("info-wrapper"),
           headerAlign: "center",
           footerAlign: "center",
+          transfer: true,
+          fullscreen: false,
           ...modalFuncProps.value,
           isShow: isShow.value,
           onClosed,
@@ -43650,7 +43659,8 @@ ${$(r2)}`), n2;
     props: colorPickerProps,
     emits: ["update:modelValue", "change"],
     setup(props2, {
-      emit
+      emit,
+      slots
     }) {
       const formItem = useFormItem();
       const showDropdown = vue.ref(false);
@@ -43785,7 +43795,10 @@ ${$(r2)}`), n2;
         "class": colorPickerCls.value,
         "onKeydown": handleTriggerKeydown,
         "onClick": toggleDropdown
-      }, [vue.createVNode("div", {
+      }, [typeof slots.trigger === "function" ? slots.trigger({
+        value: colorStr.value,
+        isShowDropdown: showDropdown.value
+      }) : vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
         "class": `${resolveClassName2("color-picker-color")}`
       }, [vue.createVNode("span", {
         "class": `${resolveClassName2("color-picker-color-square")} ${!colorStr.value && `${resolveClassName2("color-picker-empty")}`}`,
@@ -43796,7 +43809,7 @@ ${$(r2)}`), n2;
         "class": `${resolveClassName2("color-picker-icon")}`
       }, [vue.createVNode(angleUp, {
         "class": "icon-angle-down"
-      }, null)]), vue.createVNode(vue.Transition, {
+      }, null)])]), vue.createVNode(vue.Transition, {
         "name": "bk-fade-down-transition"
       }, {
         default: () => [vue.withDirectives(vue.createVNode(PickerDropdown, {