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

package/dist/index.cjs.source.js

@@ -5869,11 +5869,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;
@@ -6065,9 +6061,9 @@ class BkMaskManager {
   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));
     }
   }
@@ -6149,23 +6145,32 @@ 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");
     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);
@@ -6197,8 +6202,10 @@ 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);
   }
   /**
@@ -13234,7 +13241,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;
           }
@@ -21197,7 +21203,6 @@ const HeadFilter = /* @__PURE__ */ vue.defineComponent({
   setup(props2, {
     emit
   }) {
-    var _a;
     const {
       resolveClassName: resolveClassName2
     } = usePrefix();
@@ -21208,7 +21213,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 +21702,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 +21758,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 +22070,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 +22604,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 +22717,6 @@ const useClass = (props2, targetColumns, root, reactiveProp, pageData) => {
     wrapperStyle,
     contentStyle,
     headStyle,
-    offsetXVarStyle,
-    headOffsetXVarStyle,
     resetTableHeight,
     updateBorderClass,
     getColumnsWidthOffsetWidth,
@@ -23132,8 +23133,6 @@ const Component$f = /* @__PURE__ */ vue.defineComponent({
       contentStyle,
       headStyle,
       hasScrollYRef,
-      offsetXVarStyle,
-      headOffsetXVarStyle,
       updateBorderClass,
       resetTableHeight,
       getColumnsWidthOffsetWidth,
@@ -23314,8 +23313,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 +23375,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 +23393,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 +23413,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 +23431,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 +26146,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"]);
@@ -26472,7 +26476,10 @@ const InfoBox = (config) => {
         isShow.value = false;
       };
       function update(newValue) {
-        modalFuncProps.value = newValue;
+        modalFuncProps.value = {
+          ...modalFuncProps.value,
+          ...newValue
+        };
       }
       expose({
         update
@@ -26508,6 +26515,8 @@ const InfoBox = (config) => {
         class: resolveClassName2("info-wrapper"),
         headerAlign: "center",
         footerAlign: "center",
+        transfer: true,
+        fullscreen: false,
         ...modalFuncProps.value,
         isShow: isShow.value,
         onClosed,
@@ -43649,7 +43658,8 @@ const Component$2 = /* @__PURE__ */ vue.defineComponent({
   props: colorPickerProps,
   emits: ["update:modelValue", "change"],
   setup(props2, {
-    emit
+    emit,
+    slots
   }) {
     const formItem = useFormItem();
     const showDropdown = vue.ref(false);
@@ -43784,7 +43794,10 @@ const Component$2 = /* @__PURE__ */ vue.defineComponent({
       "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")}`}`,
@@ -43795,7 +43808,7 @@ const Component$2 = /* @__PURE__ */ vue.defineComponent({
       "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, {