bkui-vue 0.0.1-beta.20 → 0.0.1-beta.21

package/dist/bkui-vue.umd.js

@@ -186,7 +186,7 @@ var __publicField = (obj, key, value) => {
     }
     return node;
   }
-  function isElement$1(node) {
+  function isElement$2(node) {
     var OwnElement = getWindow(node).Element;
     return node instanceof OwnElement || node instanceof Element;
   }
@@ -340,7 +340,7 @@ var __publicField = (obj, key, value) => {
     return ["table", "td", "th"].indexOf(getNodeName(element)) >= 0;
   }
   function getDocumentElement(element) {
-    return ((isElement$1(element) ? element.ownerDocument : element.document) || window.document).documentElement;
+    return ((isElement$2(element) ? element.ownerDocument : element.document) || window.document).documentElement;
   }
   function getParentNode(element) {
     if (getNodeName(element) === "html") {
@@ -748,17 +748,17 @@ var __publicField = (obj, key, value) => {
     return rect;
   }
   function getClientRectFromMixedType(element, clippingParent) {
-    return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement$1(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+    return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement$2(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
   }
   function getClippingParents(element) {
     var clippingParents2 = listScrollParents(getParentNode(element));
     var canEscapeClipping = ["absolute", "fixed"].indexOf(getComputedStyle(element).position) >= 0;
     var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
-    if (!isElement$1(clipperElement)) {
+    if (!isElement$2(clipperElement)) {
       return [];
     }
     return clippingParents2.filter(function(clippingParent) {
-      return isElement$1(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== "body";
+      return isElement$2(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== "body";
     });
   }
   function getClippingRect(element, boundary, rootBoundary) {
@@ -840,7 +840,7 @@ var __publicField = (obj, key, value) => {
     var altContext = elementContext === popper$1 ? reference : popper$1;
     var popperRect = state.rects.popper;
     var element = state.elements[altBoundary ? altContext : elementContext];
-    var clippingClientRect = getClippingRect(isElement$1(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
+    var clippingClientRect = getClippingRect(isElement$2(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
     var referenceClientRect = getBoundingClientRect(state.elements.reference);
     var popperOffsets2 = computeOffsets({
       reference: referenceClientRect,
@@ -1357,7 +1357,7 @@ var __publicField = (obj, key, value) => {
           cleanupModifierEffects();
           state.options = Object.assign({}, defaultOptions, state.options, options2);
           state.scrollParents = {
-            reference: isElement$1(reference2) ? listScrollParents(reference2) : reference2.contextElement ? listScrollParents(reference2.contextElement) : [],
+            reference: isElement$2(reference2) ? listScrollParents(reference2) : reference2.contextElement ? listScrollParents(reference2.contextElement) : [],
             popper: listScrollParents(popper2)
           };
           var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers2, state.options.modifiers)));
@@ -1407,7 +1407,7 @@ var __publicField = (obj, key, value) => {
             resolve(state);
           });
         }),
-        destroy: function destroy2() {
+        destroy: function destroy() {
           cleanupModifierEffects();
           isDestroyed = true;
         }
@@ -1556,7 +1556,7 @@ var __publicField = (obj, key, value) => {
       return result;
     };
   }
-  function isElement(obj) {
+  function isElement$1(obj) {
     try {
       return obj instanceof HTMLElement;
     } catch (e) {
@@ -1658,13 +1658,13 @@ var __publicField = (obj, key, value) => {
     }
     restorePopContent() {
       const target = this.getAppendToTarget();
-      if (isElement(target) && target.contains(this.popperRefer) && this.container && !this.container.contains(this.popperRefer)) {
+      if (isElement$1(target) && target.contains(this.popperRefer) && this.container && !this.container.contains(this.popperRefer)) {
         this.container.append(this.popperRefer);
       }
     }
     appendToTarget() {
       const target = this.getAppendToTarget();
-      if (isElement(target) && target.contains(this.popperRefer)) {
+      if (isElement$1(target) && target.contains(this.popperRefer)) {
         target.append(this.popperRefer);
       }
     }
@@ -1745,7 +1745,7 @@ var __publicField = (obj, key, value) => {
       return null;
     }
     isElement(obj) {
-      return isElement(obj);
+      return isElement$1(obj);
     }
     registerEvents() {
       if (this.isElement(this.referenceTarget)) {
@@ -2273,6 +2273,12 @@ ${$(r2)}`), n2;
   class z extends R() {
   }
   const propTypesNS = R({});
+  function stringEnum(o2) {
+    return o2.reduce((res, key) => {
+      res[key] = key;
+      return res;
+    }, /* @__PURE__ */ Object.create(null));
+  }
   class PropTypes extends propTypesNS {
     static size(sizes = ["small", "default", "large"]) {
       return j("Size", {
@@ -2296,8 +2302,7 @@ ${$(r2)}`), n2;
           }
           console.error(`invalid theme, ${val}, the theme must be one of \u3010${themes.join(" | ")}\u3011`);
           return false;
-        },
-        default: "primary"
+        }
       });
     }
     static placement(placements2 = ["top", "left", "right", "bottom"]) {
@@ -2869,12 +2874,12 @@ ${$(r2)}`), n2;
     }) {
       const container = vue.ref(null);
       const el = vue.ref(null);
-      const visiable = vue.ref(false);
+      const visible = vue.ref(false);
       const zIndex = vue.ref(bkZIndexManager.getModalNextIndex());
       const styleBottom = `${props.bottom}px`;
       const styleRight = `${props.right}px`;
       const scrollHandler = throttle(() => {
-        visiable.value = el.value.scrollTop >= props.visibilityHeight;
+        visible.value = el.value.scrollTop >= props.visibilityHeight;
       }, 30);
       const scrollTop = () => {
         el.value.scrollTo({
@@ -2882,7 +2887,7 @@ ${$(r2)}`), n2;
           behavior: "smooth"
         });
       };
-      vue.watch(() => visiable, () => {
+      vue.watch(() => visible, () => {
         zIndex.value = bkZIndexManager.getModalNextIndex();
       });
       vue.onMounted(() => {
@@ -2905,7 +2910,7 @@ ${$(r2)}`), n2;
       }, {
         default: () => {
           var _a, _b;
-          return [visiable.value ? vue.createVNode("div", {
+          return [visible.value ? vue.createVNode("div", {
             "class": `bk-backtop ${props.extCls}`,
             "style": {
               right: styleRight,
@@ -3060,11 +3065,12 @@ ${$(r2)}`), n2;
   const BkBreadcrumb = withInstallProps(Component$q, { Item: BreadcrumbItem });
   let BkLoadingMode;
   (function(BkLoadingMode2) {
-    BkLoadingMode2["Spin"] = "spin";
     BkLoadingMode2["Default"] = "default";
+    BkLoadingMode2["Spin"] = "spin";
   })(BkLoadingMode || (BkLoadingMode = {}));
   let BkLoadingSize;
   (function(BkLoadingSize2) {
+    BkLoadingSize2["Mini"] = "mini";
     BkLoadingSize2["Small"] = "small";
     BkLoadingSize2["Large"] = "large";
   })(BkLoadingSize || (BkLoadingSize = {}));
@@ -3079,8 +3085,8 @@ ${$(r2)}`), n2;
     loading: PropTypes.bool,
     theme: PropTypes.theme(["white", "primary", "warning", "success", "danger"]),
     title: PropTypes.string.def(""),
-    size: PropTypes.size(),
-    mode: PropTypes.oneOf(Object.values(BkLoadingMode))
+    size: PropTypes.commonType(Object.values(BkLoadingSize)).def("small"),
+    mode: PropTypes.commonType(Object.values(BkLoadingMode)).def("default")
   };
   var Component$p = vue.defineComponent({
     name: "Loading",
@@ -3097,13 +3103,14 @@ ${$(r2)}`), n2;
       const loadingWrapperCls = vue.computed(() => classes({
         "bk-nested-loading": !!ctx.slots.default
       }, "bk-loading-wrapper"));
+      console.log(props.theme);
       const containerCls = vue.computed(() => classes({
-        [`bk-loading-size-${props.size}`]: !props.size,
-        [`bk-loading-${props.theme}`]: !props.theme
+        [`bk-loading-size-${props.size}`]: !!props.size,
+        [`bk-loading-${props.theme}`]: !!props.theme
       }, "bk-loading-indicator"));
       const hasTitle = vue.computed(() => !!props.title);
       const indicator = vue.computed(() => {
-        const isSpinMode = props.mode === "spin";
+        const isSpinMode = props.mode === BkLoadingMode.Spin;
         if (typeof props.indicator === "function") {
           return vue.createVNode(props.indicator, null, null);
         }
@@ -3132,8 +3139,11 @@ ${$(r2)}`), n2;
     hoverTheme: PropTypes.theme(["primary", "warning", "success", "danger"]).def(""),
     size: PropTypes.size(),
     title: PropTypes.string,
+    icon: PropTypes.string,
+    iconRight: PropTypes.string,
     disabled: PropTypes.bool,
     loading: PropTypes.bool,
+    laodingMode: PropTypes.commonType(Object.values(BkLoadingMode)),
     outline: PropTypes.bool,
     text: PropTypes.bool,
     nativeType: {
@@ -3142,14 +3152,15 @@ ${$(r2)}`), n2;
   };
   var Component$o = vue.defineComponent({
     name: "Button",
-    emits: ["click"],
     props: buttonProps,
+    emits: ["click", "mouseover"],
     setup(props, {
       slots,
       attrs,
       emit
     }) {
       var _a;
+      const isHover = vue.ref(false);
       const showSlot = (_a = slots.default) != null ? _a : false;
       const btnClsPrefix = "bk-button";
       const btnCls = vue.computed(() => {
@@ -3164,28 +3175,44 @@ ${$(r2)}`), n2;
           "no-slot": !showSlot
         }, `${themeCls} ${btnClsPrefix} ${hoverTheme}`);
       });
-      const bkLoadingCls = `${btnClsPrefix}-loading`;
-      const loadingTheme = ["", "default"].includes(props.theme) ? "default" : "white";
+      const loadingTheme = vue.computed(() => {
+        if (props.text || props.outline || props.hoverTheme) {
+          if (isHover.value && !props.text)
+            return "white";
+          return props.hoverTheme || props.theme;
+        }
+        return ["", "default"].includes(props.theme) ? "" : "white";
+      });
+      const loadingSize = vue.computed(() => props.size === BkLoadingSize.Small ? BkLoadingSize.Mini : BkLoadingSize.Small);
       const handleClick = () => {
         emit("click");
       };
+      const handleMouseOver = () => {
+        isHover.value = true;
+        emit("mouseover");
+      };
+      const handleMouseout = () => {
+        isHover.value = false;
+      };
       return () => {
-        var _a2, _b;
+        var _a2;
         return vue.createVNode("button", vue.mergeProps({
           "title": props.title,
           "disabled": props.disabled,
           "class": btnCls.value,
           "type": props.nativeType
         }, attrs, {
-          "onClick": handleClick
-        }), [props.loading ? vue.createVNode("div", {
-          "class": bkLoadingCls
-        }, [vue.createVNode(BkLoading, {
-          "theme": loadingTheme,
-          "size": BkLoadingSize.Small
-        }, null)]) : vue.createVNode("div", {
-          "class": "bk-button-content-wrapper"
-        }, [vue.createVNode("span", null, [(_b = (_a2 = slots.default) == null ? void 0 : _a2.call(slots)) != null ? _b : "default"])])]);
+          "onClick": handleClick,
+          "onMouseover": handleMouseOver,
+          "onMouseleave": handleMouseout
+        }), [props.loading && vue.createVNode(BkLoading, {
+          "class": `${btnClsPrefix}-loading`,
+          "mode": props.laodingMode,
+          "theme": loadingTheme.value,
+          "size": loadingSize.value
+        }, null), slots.default && vue.createVNode("span", {
+          "class": `${btnClsPrefix}-text`
+        }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)])]);
       };
     }
   });
@@ -3850,19 +3877,24 @@ ${$(r2)}`), n2;
     max: PropTypes.integer,
     min: PropTypes.integer,
     maxlength: PropTypes.integer,
+    behavior: PropTypes.commonType(["simplicity", "normal"]).def("normal"),
     showWordLimit: PropTypes.bool,
     showControl: PropTypes.bool.def(true),
+    showClearOnlyHover: PropTypes.bool.def(false),
     precision: PropTypes.number.def(0).validate((val) => val >= 0 && val < 20),
     modelValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     size: PropTypes.size()
   };
+  const inputEvents = ["update:modelValue", "focus", "blur", "change", "clear", "input", "keypress", "keydown", "keyup", "enter", "paste"];
+  const EventEnum = stringEnum([...inputEvents]);
   var Component$g = vue.defineComponent({
     name: "Input",
     inheritAttrs: false,
     props: inputType,
-    emits: ["update:modelValue", "focus", "blur", "change", "clear", "input", "keydown"],
+    emits: [...inputEvents],
     setup(props, ctx) {
       const isFocused = vue.ref(false);
+      const isCNInput = vue.ref(false);
       const inputClsPrefix = "bk-input";
       const _a = ctx.attrs, {
         class: cls,
@@ -3876,6 +3908,7 @@ ${$(r2)}`), n2;
         "is-focused": isFocused.value,
         "is-readonly": props.readonly,
         "is-disabled": props.disabled,
+        "is-simplicity": props.behavior === "simplicity",
         [`${cls}`]: !!cls
       }, inputClsPrefix));
       const suffixIconMap = {
@@ -3900,33 +3933,51 @@ ${$(r2)}`), n2;
       const isNumberInput = vue.computed(() => props.type === "number");
       const ceilMaxLength = vue.computed(() => Math.floor(props.maxlength));
       const pwdVisible = vue.ref(false);
+      const clearCls = vue.computed(() => classes({
+        "show-clear-only-hover": props.showClearOnlyHover
+      }, suffixCls));
       function clear() {
-        ctx.emit("update:modelValue", "");
-        ctx.emit("change", "");
-        ctx.emit("clear");
+        ctx.emit(EventEnum["update:modelValue"], "");
+        ctx.emit(EventEnum.change, "");
+        ctx.emit(EventEnum.clear);
       }
       function handleFocus(e) {
         isFocused.value = true;
-        ctx.emit("focus", e);
+        ctx.emit(EventEnum.focus, e);
       }
       function handleBlur(e) {
         isFocused.value = false;
-        ctx.emit("blur", e);
-      }
-      function handleInput(e) {
-        ctx.emit("update:modelValue", isNumberInput.value ? +e.target.value : e.target.value);
-        ctx.emit("input", e.target.value);
+        ctx.emit(EventEnum.blur, e);
+      }
+      function eventHandler(eventName) {
+        return (e) => {
+          let originEventName = eventName;
+          if (e.code === "Enter" || e.key === "Enter" || e.keyCode === 13) {
+            originEventName = EventEnum.enter;
+            if (e.type !== EventEnum.keyup)
+              return;
+          }
+          if (isCNInput.value && [EventEnum.input, EventEnum.change].some((e2) => eventName === e2))
+            return;
+          if (eventName === EventEnum.input) {
+            ctx.emit(EventEnum["update:modelValue"], isNumberInput.value ? +e.target.value : e.target.value);
+          }
+          ctx.emit(originEventName, e.target.value, e);
+        };
       }
-      function handleKeydown(e) {
-        ctx.emit("keydown", e.target.value, e);
+      const [handleKeyup, handleKeydown, handleKeyPress, handlePaste, handleChange, handleInput] = [EventEnum.keyup, EventEnum.keydown, EventEnum.keypress, EventEnum.paste, EventEnum.change, EventEnum.input].map(eventHandler);
+      function handleCompositionStart() {
+        isCNInput.value = true;
       }
-      function handleChange(e) {
-        ctx.emit("change", e.target.value, e);
+      function handleCompositionEnd(e) {
+        isCNInput.value = false;
+        handleInput(e);
       }
       function handleNumber(step, INC = true) {
+        const numStep = parseInt(String(step), 10);
         const precision = Number.isInteger(props.precision) ? props.precision : 0;
         const val = parseFloat(props.modelValue.toString());
-        const factor = Number.isInteger(step) ? step : 1;
+        const factor = Number.isInteger(numStep) ? numStep : 1;
         let newVal = val + (INC ? factor : -1 * factor);
         if (Number.isInteger(props.max)) {
           newVal = Math.min(newVal, props.max);
@@ -3937,12 +3988,12 @@ ${$(r2)}`), n2;
         return +newVal.toFixed(precision);
       }
       function handleInc() {
-        const newVal = handleNumber(parseInt(String(props.step), 10));
-        ctx.emit("update:modelValue", newVal);
+        const newVal = handleNumber(props.step);
+        ctx.emit(EventEnum["update:modelValue"], newVal);
       }
       function handleDec() {
-        const newVal = handleNumber(parseInt(String(props.step), 10), false);
-        ctx.emit("update:modelValue", newVal);
+        const newVal = handleNumber(props.step, false);
+        ctx.emit(EventEnum["update:modelValue"], newVal);
       }
       function getCls(name) {
         return `${inputClsPrefix}--${name}`;
@@ -3973,11 +4024,16 @@ ${$(r2)}`), n2;
           "onInput": handleInput,
           "onFocus": handleFocus,
           "onBlur": handleBlur,
+          "onPaste": handlePaste,
           "onChange": handleChange,
-          "onKeydown": handleKeydown
+          "onKeypress": handleKeyPress,
+          "onKeydown": handleKeydown,
+          "onKeyup": handleKeyup,
+          "onCompositionstart": handleCompositionStart,
+          "onCompositionend": handleCompositionEnd
         }), null), props.clearable && !!props.modelValue && vue.createVNode(close$1, {
           "onClick": clear,
-          "class": suffixCls
+          "class": clearCls.value
         }, null), suffixIcon.value, typeof props.maxlength === "number" && props.showWordLimit && vue.createVNode("p", {
           "class": getCls("max-length")
         }, [props.modelValue.toString().length, vue.createTextVNode("/"), vue.createVNode("span", null, [ceilMaxLength.value])]), isNumberInput.value && props.showControl && vue.createVNode("div", {
@@ -5004,92 +5060,72 @@ ${$(r2)}`), n2;
       mousewheelHandler(el, binding.value);
     }
   };
-  const nodeMap = /* @__PURE__ */ new Map();
-  function parseBindingValue(value) {
-    const isTouch = "ontouchstart" in window || (navigator == null ? void 0 : navigator.maxTouchPoints) > 0;
-    const defaultOption = {
-      handler() {
-      },
-      capture: true,
-      disabled: false,
-      detectIframe: true,
-      exclude: [],
-      events: isTouch ? ["ontouchstart"] : ["click"]
-    };
-    if (typeof value === "function") {
-      defaultOption.handler = value;
-      return defaultOption;
-    }
-    return Object.assign({}, defaultOption);
-  }
-  function onEvent(config) {
-    var _a;
-    const { el, event, handler, disabled } = config;
-    const path = (_a = event.composedPath) == null ? void 0 : _a.call(event);
-    const isClickOutside = path ? path.indexOf(el) < 0 : !el.contains(event.target);
-    if (!isClickOutside || !!disabled)
-      return;
-    handler(event);
-  }
-  function onIframeClick(config) {
-    const { activeElement } = document;
-    const { el, handler, disabled, event } = config;
-    if (activeElement && activeElement.tagName === "IFRAME" && !el.contains(activeElement) && !disabled) {
-      handler(event);
-    }
-  }
-  function getEventConfigList(el, options) {
-    const configList = options.events.map((name) => ({
-      event: name,
-      target: document.documentElement,
-      capture: options.capture,
-      handler: (event) => onEvent({ el, event, handler: options.handler, disabled: options.disabled })
-    }));
-    if (options.detectIframe) {
-      configList.push({
-        event: "blur",
-        target: window,
-        capture: options.capture,
-        handler: (event) => onIframeClick({ el, event, handler: options.handler, disabled: options.disabled })
-      });
-    }
-    return configList;
-  }
-  function init(el, options) {
-    if (nodeMap.has(el)) {
-      destroy(el);
+  const isElement = (e) => {
+    if (typeof Element === "undefined")
+      return false;
+    return e instanceof Element;
+  };
+  const nodeList = /* @__PURE__ */ new Map();
+  let startClick;
+  document.addEventListener("mousedown", (e) => startClick = e);
+  document.addEventListener("mouseup", (e) => {
+    for (const handlers of nodeList.values()) {
+      for (const { documentHandler } of handlers) {
+        documentHandler(e, startClick);
+      }
     }
-    const configList = getEventConfigList(el, options);
-    nodeMap.set(el, configList);
-    configList.forEach((config) => {
-      const { target, event, handler, capture } = config;
-      target.addEventListener(event, handler, capture);
-    });
-  }
-  function destroy(el) {
-    var _a;
-    const configList = (_a = nodeMap.get(el)) != null ? _a : [];
-    configList.forEach((config) => {
-      const { target, event, handler, capture } = config;
-      target.removeEventListener(event, handler, capture);
-    });
-    nodeMap.delete(el);
+  });
+  function createDocumentHandler(el, binding) {
+    let excludes = [];
+    if (Array.isArray(binding.arg)) {
+      excludes = binding.arg;
+    } else if (isElement(binding.arg)) {
+      excludes.push(binding.arg);
+    }
+    return function(mouseup, mousedown) {
+      const { popperRef } = binding.instance;
+      const mouseUpTarget = mouseup.target;
+      const mouseDownTarget = mousedown == null ? void 0 : mousedown.target;
+      const isBound = !binding || !binding.instance;
+      const isTargetExists = !mouseUpTarget || !mouseDownTarget;
+      const isContainedByEl = el.contains(mouseUpTarget) || el.contains(mouseDownTarget);
+      const isSelf = el === mouseUpTarget;
+      const isTargetExcluded = excludes.length && excludes.some((item) => item == null ? void 0 : item.contains(mouseUpTarget)) || excludes.length && excludes.includes(mouseDownTarget);
+      const isContainedByPopper = popperRef && (popperRef.contains(mouseUpTarget) || popperRef.contains(mouseDownTarget));
+      if (isBound || isTargetExists || isContainedByEl || isSelf || isTargetExcluded || isContainedByPopper) {
+        return;
+      }
+      binding.value(mouseup, mousedown);
+    };
   }
-  const clickoutside = {
+  const ClickOutside = {
     beforeMount(el, binding) {
-      const options = parseBindingValue(binding.value);
-      if (options.disabled)
-        return;
-      nodeMap.set(el, getEventConfigList(el, options));
+      if (!nodeList.has(el)) {
+        nodeList.set(el, []);
+      }
+      nodeList.get(el).push({
+        documentHandler: createDocumentHandler(el, binding),
+        bindingFn: binding.value
+      });
     },
     updated(el, binding) {
-      const newOptions = parseBindingValue(binding.value);
-      if (newOptions.disabled && !nodeMap.has(el))
-        return;
-      init(el, newOptions);
+      if (!nodeList.has(el)) {
+        nodeList.set(el, []);
+      }
+      const handlers = nodeList.get(el);
+      const oldHandlerIndex = handlers.findIndex((item) => item.bindingFn === binding.oldValue);
+      const newHandler = {
+        documentHandler: createDocumentHandler(el, binding),
+        bindingFn: binding.value
+      };
+      if (oldHandlerIndex >= 0) {
+        handlers.splice(oldHandlerIndex, 1, newHandler);
+      } else {
+        handlers.push(newHandler);
+      }
     },
     unmounted(el) {
-      destroy(el);
+      nodeList.delete(el);
     }
   };
   var popper = "";
@@ -5203,7 +5239,7 @@ ${$(r2)}`), n2;
   var Component$a = vue.defineComponent({
     name: "Select",
     directives: {
-      clickoutside
+      clickoutside: ClickOutside
     },
     props: {
       modelValue: PropTypes.any,
@@ -5739,7 +5775,7 @@ ${$(r2)}`), n2;
         });
         defaultSteps.value.splice(0, defaultSteps.value.length, ...defaults);
       };
-      const init2 = () => {
+      const init = () => {
         var _a;
         defaultSteps.value.splice(0, defaultSteps.value.length, ...[{
           title: "\u6B65\u9AA41",
@@ -5771,7 +5807,7 @@ ${$(r2)}`), n2;
           console.warn(e);
         }
       };
-      vue.onMounted(init2);
+      vue.onMounted(init);
       return {
         defaultSteps,
         jumpTo
@@ -11534,7 +11570,20 @@ ${$(r2)}`), n2;
       type: String,
       default: "bottom-start",
       validator: (value) => {
-        const validList = ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end", "right", "right-start", "right-end"];
+        const validList = [
+          "top",
+          "top-start",
+          "top-end",
+          "bottom",
+          "bottom-start",
+          "bottom-end",
+          "left",
+          "left-start",
+          "left-end",
+          "right",
+          "right-start",
+          "right-end"
+        ];
         if (validList.indexOf(value) < 0) {
           console.error(`placement property is not valid: '${value}'`);
           return false;
@@ -11601,7 +11650,7 @@ ${$(r2)}`), n2;
   var Component$1 = vue.defineComponent({
     name: "DatePicker",
     directives: {
-      clickoutside
+      clickoutside: ClickOutside
     },
     props: datePickerProps,
     emits: ["open-change", "input", "change", "update:modelValue", "clear", "shortcut-change", "pick-success"],
@@ -11720,6 +11769,7 @@ ${$(r2)}`), n2;
       };
       vue.watch(() => state.visible, (visible) => {
         var _a, _b;
+        console.error(123);
         if (visible === false) {
           (_a = pickerDropdownRef.value) == null ? void 0 : _a.destoryDropdown();
         }
@@ -12247,7 +12297,7 @@ ${$(r2)}`), n2;
           if (!typeFlag.value) {
             generalInit();
           } else {
-            init2();
+            init();
           }
         }
       };
@@ -12284,7 +12334,7 @@ ${$(r2)}`), n2;
           emit("change", dataList.value, [...handleListFormat(hasSelectedList.value, false)], []);
         }
       };
-      const init2 = () => {
+      const init = () => {
         if (!props.targetList.length || props.targetList.length > props.sourceList.length) {
           dataList.value.splice(0, dataList.value.length, ...props.sourceList);
           hasSelectedList.value = [];
@@ -12417,7 +12467,7 @@ ${$(r2)}`), n2;
         if (!typeFlag.value) {
           generalInit();
         } else {
-          init2();
+          init();
         }
         initSort();
       }
@@ -12750,7 +12800,10 @@ ${$(r2)}`), n2;
   };
   const getLabel = (item, props) => getStringOrFuncStr(item, props, "label");
   const getSchemaVal = (schema, uuid2) => schema.get(uuid2) || {};
-  const getNodeAttr = (schema, uuid2, key) => (getSchemaVal(schema, uuid2) || {})[key];
+  const getNodeAttr = (schema, uuid2, key) => {
+    var _a;
+    return (_a = getSchemaVal(schema, uuid2)) == null ? void 0 : _a[key];
+  };
   const getTreeStyle = (item, props) => {
     const levelLine = getPropsOneOfBoolValueWithDefault(props, "levelLine", item, DEFAULT_LEVLE_LINE, null, ["tree"]);
     return {
@@ -12761,14 +12814,11 @@ ${$(r2)}`), n2;
     };
   };
   const getNodeItemStyle = (item, props, flatData = {}) => {
-    const { levelLineSchema, schema } = flatData;
-    const { childNodeCount = 0, isLeaf = false, lastNode = null } = levelLineSchema[item.__uuid] || {};
-    const lastNodeCount = isLeaf ? 0 : (levelLineSchema[lastNode] || { childNodeCount: 0 }).childNodeCount;
+    const { schema } = flatData;
     const depth = getNodeAttr(schema, item.__uuid, "__depth");
     return __spreadValues({
       "--depth": depth,
-      paddingLeft: 0,
-      "--lines": childNodeCount - lastNodeCount
+      paddingLeft: 0
     }, typeof props.levelLine === "function" ? {
       "--level-line": getPropsOneOfBoolValueWithDefault(props, "levelLine", item, DEFAULT_LEVLE_LINE, null, [
         "node"
@@ -12781,16 +12831,20 @@ ${$(r2)}`), n2;
       "is-root": __isRoot,
       "bk-tree-node": true,
       "is-open": __isOpen,
-      "is-virtual-render": props.virtualRender
+      "is-virtual-render": props.virtualRender,
+      "level-line": props.levelLine
     };
   };
   const updateTreeNode = (path, treeData, childKey, nodekey, nodeValue) => {
+    assignTreeNode(path, treeData, childKey, { [nodekey]: nodeValue });
+  };
+  const assignTreeNode = (path, treeData, childKey, assignVal) => {
     const paths = path.split("-");
     const targetNode = paths.reduce((pre, nodeIndex) => {
       const index = Number(nodeIndex);
       return Array.isArray(pre) ? pre[index] : pre[childKey][index];
     }, treeData);
-    Object.assign(targetNode, { [nodekey]: nodeValue });
+    Object.assign(targetNode, assignVal || {});
   };
   const treeProps = {
     data: PropTypes.arrayOf(PropTypes.any).def([]),
@@ -12809,7 +12863,10 @@ ${$(r2)}`), n2;
       }),
       PropTypes.bool.def(false)
     ]).def(true),
-    asyncLoad: PropTypes.func.def(null)
+    async: PropTypes.shape({
+      callback: PropTypes.func.def(null),
+      cache: PropTypes.bool.def(true)
+    })
   };
   var Component = vue.defineComponent({
     name: "Tree",
@@ -12826,13 +12883,9 @@ ${$(r2)}`), n2;
         const formatData2 = getFlatdata(props, newData, schemaValues.value);
         flatData.data = formatData2[0];
         flatData.schema = formatData2[1];
-        computeLevelHeight();
       }, {
         deep: true
       });
-      vue.watch(() => [props.levelLine], () => {
-        computeLevelHeight();
-      });
       const schemaValues = vue.computed(() => Array.from(flatData.schema.values()));
       const getSchemaVal2 = (key) => flatData.schema.get(key);
       const getNodeAttr2 = (node, attr) => {
@@ -12847,7 +12900,6 @@ ${$(r2)}`), n2;
       const isNodeOpened = (node) => getNodeAttr2(node, "__isOpen");
       const hasChildNode = (node) => getNodeAttr2(node, "__hasChild");
       const renderData = vue.computed(() => flatData.data.filter((item) => checkNodeIsOpen(item)));
-      const renderNodePathColl = vue.computed(() => renderData.value.map((node) => getNodePath(node)));
       const isItemOpen = (item) => {
         var _a;
         if (typeof item === "object") {
@@ -12915,7 +12967,10 @@ ${$(r2)}`), n2;
       const setNodeOpened = (item) => {
         const newVal = !isItemOpen(item);
         setNodeAttr(item, "__isOpen", newVal);
-        computeLevelHeight();
+        if (newVal) {
+          return;
+        }
+        renderData.value.filter((node) => String.prototype.startsWith.call(getNodePath(node), getNodePath(item))).forEach((filterNode) => setNodeAttr(filterNode, "__isOpen", newVal));
       };
       const setNodeRemoteLoad = (resp, item) => {
         if (typeof resp === "object" && resp !== null) {
@@ -12926,12 +12981,20 @@ ${$(r2)}`), n2;
       };
       const hanldeTreeNodeClick = (item) => {
         if (item.async) {
-          if (typeof props.asyncLoad === "function") {
+          const {
+            callback = null,
+            cache = true
+          } = props.async || {};
+          if (typeof callback === "function" && !item.cached) {
             Object.assign(item, {
               loading: true
             });
-            props.asyncLoad(item, (resp) => setNodeRemoteLoad(resp, item)).then((resp) => setNodeRemoteLoad(resp, item)).catch((err) => console.error("load remote data error:", err)).finally(() => {
-              updateTreeNode(getNodePath(item), props.data, props.children, "loading", false);
+            callback(item, (resp) => setNodeRemoteLoad(resp, item)).then((resp) => setNodeRemoteLoad(resp, item)).catch((err) => console.error("load remote data error:", err)).finally(() => {
+              assignTreeNode(getNodePath(item), props.data, props.children, __spreadValues({
+                loading: false
+              }, cache ? {
+                cached: true
+              } : {}));
             });
           } else {
             console.error("async need to set prop: asyncLoad with function wich will return promise object");
@@ -12941,47 +13004,6 @@ ${$(r2)}`), n2;
           setNodeOpened(item);
         }
       };
-      const computeLevelHeight = () => {
-        if (!!props.levelLine) {
-          setTimeout(() => {
-            let showNodeCount = renderData.value.length;
-            const nodeSchema = {};
-            const setDefaultNodeSchema = (uuid2, lastNode = null, isLeaf = false) => {
-              if (!Object.prototype.hasOwnProperty.call(nodeSchema, uuid2)) {
-                Object.assign(nodeSchema, {
-                  [uuid2]: __spreadValues(__spreadValues({
-                    childNodeCount: 0,
-                    isLastNode: false
-                  }, lastNode !== null ? {
-                    lastNode
-                  } : {}), isLeaf !== null ? {
-                    isLeaf
-                  } : {})
-                });
-              }
-            };
-            for (; showNodeCount > 0; showNodeCount--) {
-              const node = renderData.value[showNodeCount - 1];
-              const parentId = getNodeAttr2(node, "__parentId");
-              const nodepath = getNodePath(node);
-              const isLeaf = !renderNodePathColl.value.includes(`${nodepath}-0`);
-              setDefaultNodeSchema(node.__uuid, null, isLeaf);
-              setDefaultNodeSchema(parentId, node.__uuid);
-              const parentSchema = nodeSchema[parentId];
-              const currentNodeSchema = nodeSchema[node.__uuid];
-              const {
-                childNodeCount = 0
-              } = currentNodeSchema;
-              currentNodeSchema.childNodeCount = childNodeCount + 1;
-              currentNodeSchema.isLastNode = parentSchema.lastNode === node.__uuid;
-              parentSchema.childNodeCount += currentNodeSchema.childNodeCount;
-            }
-            flatData.levelLineSchema = nodeSchema;
-          });
-        } else {
-          flatData.levelLineSchema = {};
-        }
-      };
       const checkNodeIsOpen = (node) => isRootNode(node) || isItemOpen(node) || isItemOpen(getNodeAttr2(node, "__parentId"));
       const filterNextNode = (depth, node) => {
         if (isRootNode(node)) {
@@ -13000,7 +13022,7 @@ ${$(r2)}`), n2;
         return schemaValues.value.some((val) => val.__path === nextNodePath);
       };
       const getVirtualLines = (node) => {
-        if (!props.virtualRender) {
+        if (!props.levelLine) {
           return null;
         }
         const getNodeLineStyle = (dpth) => ({
@@ -13012,7 +13034,6 @@ ${$(r2)}`), n2;
           "style": getNodeLineStyle(maxDeep - index)
         }, null));
       };
-      computeLevelHeight();
       return {
         renderData,
         flatData,
@@ -13036,7 +13057,8 @@ ${$(r2)}`), n2;
         "style": getTreeStyle(null, props),
         "list": this.renderData,
         "lineHeight": props.lineHeight,
-        "enabled": props.virtualRender
+        "enabled": props.virtualRender,
+        "throttleDelay": 0
       }, {
         default: (scoped) => (scoped.data || []).map(renderTreeNode)
       });
@@ -13445,7 +13467,7 @@ ${$(r2)}`), n2;
   exports2.Tree = BkTree;
   exports2.VirtualRender = BkVirtualRender;
   exports2.bkTooltips = tooltips;
-  exports2.clickoutside = clickoutside;
+  exports2.clickoutside = ClickOutside;
   exports2["default"] = preset;
   exports2.mousewheel = mousewheel;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });