bkui-vue 0.0.1-beta.444 → 0.0.1-beta.446

package/dist/index.esm.js

@@ -5738,6 +5738,60 @@ class BKZIndexManager {
   }
 }
 const bkZIndexManager = new BKZIndexManager();
+`__bk_mask_${random(16)}`;
+class MaskQueueMaker {
+  constructor() {
+    this.timer = null;
+    this.store = [];
+    this.maskMap = /* @__PURE__ */ new WeakMap();
+  }
+  appendMaker(fn2) {
+    this.store.push(fn2);
+    this.executeMaker();
+  }
+  pushMaskStyle(parentNode, style2) {
+    const value = this.getMaskMap(parentNode);
+    if (!(value == null ? void 0 : value.styles)) {
+      this.setMaskMap(parentNode, __spreadValues({ styles: [style2] }, value || {}));
+    } else {
+      value.styles.push(style2);
+    }
+  }
+  getMaskStyles(parentNode) {
+    var _a;
+    return ((_a = this.getMaskMap(parentNode)) == null ? void 0 : _a.styles) || [];
+  }
+  setMaskId(parentNode, id) {
+    const value = this.getMaskMap(parentNode);
+    if (!value) {
+      this.setMaskMap(parentNode, __spreadValues({ id }, value || {}));
+    } else {
+      Object.assign(value, { id });
+      this.setMaskMap(parentNode, value);
+    }
+  }
+  getMaskId(parentNode) {
+    var _a;
+    return (_a = this.getMaskMap(parentNode)) == null ? void 0 : _a.id;
+  }
+  setMaskMap(key2, value) {
+    this.maskMap.set(key2, value);
+  }
+  getMaskMap(key2) {
+    return this.maskMap.get(key2);
+  }
+  executeMaker() {
+    this.timer && cancelAnimationFrame(this.timer);
+    this.timer = requestAnimationFrame(() => {
+      const fn2 = this.store.pop();
+      if (typeof fn2 === "function") {
+        Reflect.apply(fn2, this, []);
+        this.executeMaker();
+      }
+    });
+  }
+}
+const bkMaskMaker = new MaskQueueMaker();
 class BkMaskManager {
   constructor(config) {
     this.multiInstance = false;
@@ -5755,21 +5809,25 @@ class BkMaskManager {
       display: "none",
       "background-color": "rgba(0,0,0,.6)"
     };
+    this.isInit = false;
+    this.maskAttrTag = "auto";
     const { multiInstance = false, maskAttrTag = "auto", parentNode = document.body, maskStyle = {}, onClick = null } = config || {};
+    this.maskAttrTag = maskAttrTag;
     this.onClick = onClick;
     this.activeInstance = void 0;
     this.multiInstance = multiInstance;
     this.uniqueMaskAttrTag = this.getMaskAttrTag(maskAttrTag);
     this.parentNode = parentNode || document;
-    this.mask = this.getMask();
-    this.backupMask = this.createMask("data-bk-backup-uid");
-    this.setMaskStyle(Object.assign({}, this.maskStyle, maskStyle));
+    bkMaskMaker.appendMaker(() => {
+      this.initInstance(maskStyle);
+    });
   }
   setOption(option) {
-    const { parentNode = document.body, maskStyle = {}, onClick = null } = option || {};
+    const { parentNode = document.body, maskStyle = {}, onClick = null, maskAttrTag = this.maskAttrTag } = option || {};
     this.onClick = onClick;
     this.parentNode = parentNode || document;
     this.setMaskStyle(Object.assign({}, this.maskStyle, maskStyle));
+    this.uniqueMaskAttrTag = this.getMaskAttrTag(maskAttrTag);
   }
   show(content, zIndex, showMask = true, appendStyle = {}, uuid2 = null, transfer2 = false) {
     const uid = uuid2 != null ? uuid2 : random(16);
@@ -5778,7 +5836,9 @@ class BkMaskManager {
     if (!showMask) {
       if (this.lastUUID) {
         const preStore = this.zIndexStore.get(this.lastUUID);
-        style2 = preStore.style;
+        if (preStore) {
+          style2 = preStore == null ? void 0 : preStore.style;
+        }
       }
     }
     this.storeMaskInsCfg({
@@ -5787,10 +5847,14 @@ class BkMaskManager {
       uuid: uid,
       preUID: this.lastUUID
     });
+    Object.assign(style2, {
+      display: "block",
+      "z-index": `${localZIndex}`,
+      "pointer-events": "all"
+    });
+    this.initInstance(style2);
     this.setMaskStyle(style2);
-    this.mask.style.setProperty("display", "block");
-    this.mask.style.setProperty("z-index", `${localZIndex}`);
-    this.mask.style.setProperty("pointer-events", "all");
+    bkMaskMaker.pushMaskStyle(this.parentNode, __spreadValues({}, style2));
     this.backupMask.style.setProperty("z-index", `${localZIndex - 1}`);
     if (!showMask) {
       this.mask.style.setProperty("pointer-events", "none");
@@ -5800,20 +5864,26 @@ class BkMaskManager {
       if (transfer2)
         content.style.setProperty("z-index", `${localZIndex + 1}`);
       this.activeInstance = content;
-      if (!transfer2)
-        this.appendContentToMask(content);
+      this.appendContentToMask(content);
     }
   }
   hide(transfer2 = false, content, uuid2) {
     var _a;
     const uid = uuid2 != null ? uuid2 : this.lastUUID;
-    this.mask.style.setProperty("display", "none");
     if (!transfer2) {
       content == null ? void 0 : content.remove();
       (_a = this.activeInstance) == null ? void 0 : _a.remove();
     }
     this.activeInstance = void 0;
     this.popIndexStore(uid);
+    const maskList = bkMaskMaker.getMaskStyles(this.parentNode);
+    maskList == null ? void 0 : maskList.pop();
+    if (!(maskList == null ? void 0 : maskList.length)) {
+      this.mask.style.setProperty("display", "none");
+    } else {
+      const style2 = maskList.slice(-1)[0];
+      this.setMaskStyle(style2);
+    }
   }
   storeMaskInsCfg(config) {
     this.zIndexStore.set(config.uuid, config);
@@ -5840,12 +5910,23 @@ class BkMaskManager {
   getActiveContentInstance() {
     return this.activeInstance;
   }
+  initInstance(maskStyle) {
+    if (!this.isInit) {
+      this.isInit = true;
+      const { instance, isExist } = this.getMask();
+      this.mask = instance;
+      this.backupMask = this.getBackupMask();
+      !isExist && this.setMaskStyle(Object.assign({}, this.maskStyle, maskStyle));
+    }
+  }
   getMask() {
     if (this.multiInstance) {
-      return this.createMask();
+      return { instance: this.createMask(), isExist: false };
     }
-    let div = this.parentNode.querySelector(`[data-bkmask-uid='${this.uniqueMaskAttrTag}']`);
+    let isExist = true;
+    let div = this.parentNode.querySelector(`[data-bk-mask-uid='${this.uniqueMaskAttrTag}']`);
     if (!div) {
+      isExist = false;
       div = this.createMask();
       div.addEventListener("click", (e) => {
         if (e.target === div) {
@@ -5855,6 +5936,17 @@ class BkMaskManager {
         }
       }, true);
     }
+    return {
+      instance: div,
+      isExist
+    };
+  }
+  getBackupMask() {
+    const attrName = "data-bk-backup-uid";
+    let div = this.parentNode.querySelector(`[${attrName}]`);
+    if (!div) {
+      div = this.createMask(attrName);
+    }
     return div;
   }
   createMask(attrName = "data-bk-mask-uid") {
@@ -5870,7 +5962,10 @@ class BkMaskManager {
   }
   getMaskAttrTag(tag2) {
     if (/^(auto|\s+)$/i.test(tag2) || tag2 === null || tag2 === void 0 || tag2 === "") {
-      return `__bk_mask_${random(16)}`;
+      if (!bkMaskMaker.getMaskId(this.parentNode)) {
+        bkMaskMaker.setMaskId(this.parentNode, `__bk_mask_${random(16)}`);
+      }
+      return bkMaskMaker.getMaskId(this.parentNode);
     }
     return tag2;
   }
@@ -5878,9 +5973,9 @@ class BkMaskManager {
     this.mask.append(content);
   }
 }
-const bKMaskManager = new BkMaskManager({});
+new BkMaskManager({});
 class BKPopIndexManager {
-  constructor() {
+  constructor(options) {
     this.getActiveClickFnIndex = (match2) => {
       const filterFn = (target) => typeof match2 === "string" ? target.getAttribute(this.uuidAttrName) === match2 : target === match2;
       return this.clickFn.findIndex(({ target }) => filterFn(target));
@@ -5893,10 +5988,23 @@ class BKPopIndexManager {
     this.clickFn = [];
     this.uuidAttrName = "data-bk-pop-uuid";
     this.activePopId = null;
-    bKMaskManager.setOption({
+    this.bKMaskManagerInstance = new BkMaskManager({
+      parentNode: this.getParentNode(options == null ? void 0 : options.transfer),
       onClick: this.onMaskClickFn.bind(this)
     });
   }
+  getParentNode(transfer2) {
+    if (typeof transfer2 === "string") {
+      const target = document.querySelector(transfer2);
+      if (target) {
+        return target;
+      }
+    }
+    if (isElement$4(transfer2)) {
+      return transfer2;
+    }
+    return document.body;
+  }
   onMaskClick(callFn, target) {
     this.clickFn.push({ fn: callFn, target });
   }
@@ -5909,8 +6017,8 @@ class BKPopIndexManager {
     const uuid2 = random(16);
     content.setAttribute(this.uuidAttrName, uuid2);
     this.popInstanceList.push({ uuid: uuid2, zIndex, content, showMask, appendStyle });
-    showMask && bKMaskManager.backupActiveInstance();
-    bKMaskManager.show(content, zIndex, showMask, appendStyle, uuid2, transfer2);
+    showMask && this.bKMaskManagerInstance.backupActiveInstance();
+    this.bKMaskManagerInstance.show(content, zIndex, showMask, appendStyle, uuid2, transfer2);
     this.activePopId = uuid2;
   }
   destroy(content, transfer2 = false) {
@@ -5925,17 +6033,17 @@ class BKPopIndexManager {
     if (this.popInstanceList.length) {
       if (removeLastContent) {
         const lastItem = this.popInstanceList.pop();
-        bKMaskManager.popIndexStore(lastItem.uuid);
+        this.bKMaskManagerInstance.popIndexStore(lastItem.uuid);
         lastItem.remove();
         this.activePopId = null;
       }
       if (this.popInstanceList.length) {
         const activeItem = this.popInstanceList.slice(-1)[0];
         const { zIndex, content, showMask, appendStyle, uuid: uuid2 } = activeItem;
-        bKMaskManager.show(content, zIndex, showMask, appendStyle, uuid2);
+        this.bKMaskManagerInstance.show(content, zIndex, showMask, appendStyle, uuid2);
         this.activePopId = uuid2;
       } else {
-        bKMaskManager.hide();
+        this.bKMaskManagerInstance.hide();
         this.activePopId = null;
         this.clickFn.length = 0;
       }
@@ -5949,9 +6057,9 @@ class BKPopIndexManager {
         if (!transfer2)
           this.popInstanceList[itemIndex].content.remove();
         this.popInstanceList.splice(itemIndex, 1);
-        bKMaskManager.popIndexStore(uuid2);
+        this.bKMaskManagerInstance.popIndexStore(uuid2);
         if (!this.popInstanceList.length) {
-          bKMaskManager.hide(transfer2);
+          this.bKMaskManagerInstance.hide(transfer2);
           this.activePopId = null;
           this.clickFn.length = 0;
         } else {
@@ -5969,7 +6077,7 @@ class BKPopIndexManager {
     }
   }
 }
-const bkPopIndexManager = new BKPopIndexManager();
+new BKPopIndexManager();
 var rngBrowser = { exports: {} };
 var getRandomValues = typeof crypto != "undefined" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto != "undefined" && typeof window.msCrypto.getRandomValues == "function" && msCrypto.getRandomValues.bind(msCrypto);
 if (getRandomValues) {
@@ -11002,7 +11110,7 @@ const propsMixin$1 = {
   size: j("size", {}),
   draggable: PropTypes.bool.def(true),
   quickClose: PropTypes.bool.def(true),
-  transfer: PropTypes.bool.def(false),
+  transfer: PropTypes.oneOfType([Boolean, String, HTMLElement]).def(false),
   zIndex: PropTypes.oneOfType([String, Number]).def("inherit"),
   maxHeight: PropTypes.string,
   direction: PropTypes.string,
@@ -11021,7 +11129,8 @@ var Component$u = defineComponent({
   data() {
     return {
       visible: false,
-      closeTimer: null
+      closeTimer: null,
+      bkPopIndexManager: new BKPopIndexManager(__spreadValues({}, this.$props))
     };
   },
   computed: {
@@ -11065,30 +11174,34 @@ var Component$u = defineComponent({
     },
     visible: {
       handler(val) {
+        var _a, _b;
         if (val) {
           this.$nextTick(() => {
-            bkPopIndexManager.onMaskClick((_e) => {
+            this.bkPopIndexManager.onMaskClick((_e) => {
               this.handleClickOutSide();
             }, this.$el);
             const hideMaskStyle = {
               "background-color": "rgba(0,0,0,0)"
             };
             const appendStyle = this.showMask ? {} : hideMaskStyle;
-            bkPopIndexManager.show(this.$el, this.showMask, appendStyle, this.transfer, this.zIndex);
+            this.bkPopIndexManager.show(this.$el, this.showMask, appendStyle, !!this.transfer, this.zIndex);
             this.$emit("shown");
           });
         } else {
-          bkPopIndexManager == null ? void 0 : bkPopIndexManager.hide(this.$el, this.transfer);
-          bkPopIndexManager == null ? void 0 : bkPopIndexManager.destroy();
+          (_a = this.bkPopIndexManager) == null ? void 0 : _a.hide(this.$el, !!this.transfer);
+          (_b = this.bkPopIndexManager) == null ? void 0 : _b.destroy();
         }
       },
       immediate: true
     }
   },
+  created() {
+  },
   beforeUnmount() {
+    var _a, _b;
     if (this.visible) {
-      bkPopIndexManager == null ? void 0 : bkPopIndexManager.hide(this.$el);
-      bkPopIndexManager == null ? void 0 : bkPopIndexManager.destroy();
+      (_a = this.bkPopIndexManager) == null ? void 0 : _a.hide(this.$el);
+      (_b = this.bkPopIndexManager) == null ? void 0 : _b.destroy();
     }
   },
   methods: {
@@ -13056,6 +13169,41 @@ var usePlatform = (fullscreenTarget) => {
     getClippingRect: getClippingRect2
   };
 };
+const CachedConst = {};
+const isAvailableId = (query) => {
+  const container2 = document.querySelector(query);
+  return container2 instanceof HTMLElement;
+};
+const getFullscreenUid = () => {
+  if (!CachedConst.fullscreenReferId) {
+    CachedConst.fullscreenReferId = `id_${uuid_1.v4()}`;
+  }
+  return CachedConst.fullscreenReferId;
+};
+const isElement = (element) => element instanceof Element || element instanceof HTMLDocument;
+const contentAsHTMLElement = (content) => {
+  if (isElement(content)) {
+    return {
+      isElement: true,
+      content,
+      vNode: void 0
+    };
+  }
+  if (/^(#|\.)/.test(content)) {
+    const target = document.querySelector(content);
+    const isEle = isElement(target);
+    return {
+      isElement: isEle,
+      content: isEle ? target : content,
+      vNode: isEle ? void 0 : content
+    };
+  }
+  return {
+    isElement: false,
+    content,
+    vNode: content
+  };
+};
 var useFloating = (props2, ctx, {
   refReference,
   refContent,
@@ -13101,6 +13249,13 @@ var useFloating = (props2, ctx, {
     const elContent = resolveTargetElement((_b = refContent.value) == null ? void 0 : _b.$el);
     const elArrow = props2.arrow ? resolveTargetElement((_c = refArrow.value) == null ? void 0 : _c.$el) : null;
     const root = resolveTargetElement((_d = refRoot.value) == null ? void 0 : _d.$el);
+    const {
+      isElement: isElement2,
+      content
+    } = contentAsHTMLElement(props2.content);
+    if (elContent && isElement2 && !(elContent == null ? void 0 : elContent.contains(content))) {
+      elContent.append(content);
+    }
     return {
       elReference,
       elContent,
@@ -13414,18 +13569,6 @@ var useFloating = (props2, ctx, {
     cleanup
   };
 };
-const CachedConst = {};
-const isAvailableId = (query) => {
-  const container2 = document.querySelector(query);
-  return container2 instanceof HTMLElement;
-};
-const getFullscreenUid = () => {
-  if (!CachedConst.fullscreenReferId) {
-    CachedConst.fullscreenReferId = `id_${uuid_1.v4()}`;
-  }
-  return CachedConst.fullscreenReferId;
-};
-const isElement = (element) => element instanceof Element || element instanceof HTMLDocument;
 let popContainerId = null;
 let parentNodeReferId = null;
 var usePopperId = (props2, prefix = "#") => {
@@ -13703,23 +13846,10 @@ var Component$r = defineComponent({
     });
     const renderContent2 = () => {
       if (props2.allowHtml) {
-        if (isElement(props2.content)) {
-          return h$1("div", {
-            innerHTML: props2.content.innerHTML
-          });
-        }
-        if (/^(#|\.)/.test(props2.content)) {
-          const target = document.querySelector(props2.content);
-          if (isElement(target)) {
-            return h$1("div", {
-              innerHTML: target.innerHTML
-            });
-          }
-          return content;
-        }
-        return h$1("div", {
-          innerHTML: props2.content
-        });
+        const {
+          vNode
+        } = contentAsHTMLElement(props2.content);
+        return vNode;
       }
       return content;
     };
@@ -14844,7 +14974,10 @@ function toLowerCase(value = "") {
 var BkOption = defineComponent({
   name: "Option",
   props: {
-    value: PropTypes.any,
+    value: {
+      type: [String, Number, Object],
+      require: true
+    },
     label: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def(""),
     disabled: PropTypes.bool.def(false)
   },
@@ -16094,7 +16227,10 @@ var SelectTagInput = defineComponent({
       [resolveClassName("select-tag--default")]: true,
       "is-disabled": this.disabled,
       "collapse-tag": this.collapseTags,
-      "has-prefix": !!prefix
+      "has-prefix": !!prefix && (prefix == null ? void 0 : prefix.every((item) => {
+        var _a2;
+        return !!((_a2 = item.children) == null ? void 0 : _a2.length);
+      }))
     });
     const tagWrapperClass = classes({
       [resolveClassName("select-tag-wrapper")]: true
@@ -16205,6 +16341,7 @@ var Component$k = defineComponent({
       scrollHeight,
       list,
       displayKey,
+      idKey,
       collapseTags,
       autoHeight,
       popoverOptions,
@@ -16265,6 +16402,10 @@ var Component$k = defineComponent({
       return pre;
     }, {}));
     const activeOptionValue = ref();
+    const listMap = computed(() => list.value.reduce((pre, item) => {
+      pre[item[idKey.value]] = item[displayKey.value];
+      return pre;
+    }, {}));
     watch(modelValue, () => {
       var _a;
       handleSetSelectedData();
@@ -16285,7 +16426,7 @@ var Component$k = defineComponent({
     const isDisabled = computed(() => disabled.value || loading2.value);
     const selectedLabel = computed(() => selected.value.map((item) => {
       var _a, _b;
-      return ((_b = (_a = optionsMap.value) == null ? void 0 : _a.get(item.value)) == null ? void 0 : _b.label) || item.label;
+      return ((_b = (_a = optionsMap.value) == null ? void 0 : _a.get(item.value)) == null ? void 0 : _b.label) || item.label || listMap.value[item.value];
     }));
     const isAllSelected = computed(() => {
       const normalSelectedValues = options.value.reduce((pre, option) => {
@@ -16536,7 +16677,7 @@ var Component$k = defineComponent({
           }
         }
       }
-      return ((_b = (_a = optionsMap.value) == null ? void 0 : _a.get(tmpValue)) == null ? void 0 : _b.label) || cacheSelectedMap.value[tmpValue] || tmpValue;
+      return ((_b = (_a = optionsMap.value) == null ? void 0 : _a.get(tmpValue)) == null ? void 0 : _b.label) || cacheSelectedMap.value[tmpValue] || listMap.value[tmpValue] || tmpValue;
     };
     const handleSetSelectedData = () => {
       if (Array.isArray(modelValue.value)) {
@@ -17556,6 +17697,10 @@ var Column = defineComponent({
           }
           nodes.forEach((node) => {
             var _a, _b, _c;
+            if (Array.isArray(node)) {
+              reduceColumns(node);
+              return;
+            }
             let skipValidateKey0 = true;
             if (((_a = node.type) == null ? void 0 : _a.name) === "TableColumn") {
               skipValidateKey0 = Object.hasOwnProperty.call(node.props || {}, "key");
@@ -18979,6 +19124,9 @@ var TableCell = defineComponent({
   }) {
     const refRoot = ref();
     const isTipsEnabled = ref(false);
+    const cellStyle = computed(() => ({
+      textAlign: props2.column.textAlign
+    }));
     const resolveSetting = () => {
       if (/boolean|object/.test(typeof props2.column.showOverflowTooltip) && props2.column.showOverflowTooltip !== null) {
         return props2.column;
@@ -19079,6 +19227,7 @@ var TableCell = defineComponent({
       var _a;
       return createVNode("div", {
         "class": ["cell", props2.column.type],
+        "style": cellStyle.value,
         "ref": refRoot,
         "title": props2.title
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);