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

package/dist/bkui-vue.esm.js

@@ -183,7 +183,7 @@ function getWindow(node) {
   }
   return node;
 }
-function isElement$1(node) {
+function isElement$2(node) {
   var OwnElement = getWindow(node).Element;
   return node instanceof OwnElement || node instanceof Element;
 }
@@ -337,7 +337,7 @@ function isTableElement(element) {
   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") {
@@ -745,17 +745,17 @@ function getInnerBoundingClientRect(element) {
   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) {
@@ -837,7 +837,7 @@ function detectOverflow(state, options) {
   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,
@@ -1354,7 +1354,7 @@ function popperGenerator(generatorOptions) {
         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)));
@@ -1404,7 +1404,7 @@ function popperGenerator(generatorOptions) {
           resolve(state);
         });
       }),
-      destroy: function destroy2() {
+      destroy: function destroy() {
         cleanupModifierEffects();
         isDestroyed = true;
       }
@@ -1553,7 +1553,7 @@ function throttle(func, wait, options) {
     return result;
   };
 }
-function isElement(obj) {
+function isElement$1(obj) {
   try {
     return obj instanceof HTMLElement;
   } catch (e) {
@@ -1655,13 +1655,13 @@ class BKPopover {
   }
   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);
     }
   }
@@ -1742,7 +1742,7 @@ class BKPopover {
     return null;
   }
   isElement(obj) {
-    return isElement(obj);
+    return isElement$1(obj);
   }
   registerEvents() {
     if (this.isElement(this.referenceTarget)) {
@@ -2270,6 +2270,12 @@ function R(e = { func: () => {
 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", {
@@ -2293,8 +2299,7 @@ class PropTypes extends propTypesNS {
         }
         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"]) {
@@ -2866,12 +2871,12 @@ var Component$s = defineComponent({
   }) {
     const container = ref(null);
     const el = ref(null);
-    const visiable = ref(false);
+    const visible = ref(false);
     const zIndex = 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({
@@ -2879,7 +2884,7 @@ var Component$s = defineComponent({
         behavior: "smooth"
       });
     };
-    watch(() => visiable, () => {
+    watch(() => visible, () => {
       zIndex.value = bkZIndexManager.getModalNextIndex();
     });
     onMounted(() => {
@@ -2902,7 +2907,7 @@ var Component$s = defineComponent({
     }, {
       default: () => {
         var _a, _b;
-        return [visiable.value ? createVNode("div", {
+        return [visible.value ? createVNode("div", {
           "class": `bk-backtop ${props.extCls}`,
           "style": {
             right: styleRight,
@@ -3057,11 +3062,12 @@ var BreadcrumbItem = defineComponent({
 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 = {}));
@@ -3076,8 +3082,8 @@ const loadingTypes = {
   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 = defineComponent({
   name: "Loading",
@@ -3094,13 +3100,14 @@ var Component$p = defineComponent({
     const loadingWrapperCls = computed(() => classes({
       "bk-nested-loading": !!ctx.slots.default
     }, "bk-loading-wrapper"));
+    console.log(props.theme);
     const containerCls = 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 = computed(() => !!props.title);
     const indicator = computed(() => {
-      const isSpinMode = props.mode === "spin";
+      const isSpinMode = props.mode === BkLoadingMode.Spin;
       if (typeof props.indicator === "function") {
         return createVNode(props.indicator, null, null);
       }
@@ -3129,8 +3136,11 @@ const buttonProps = {
   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: {
@@ -3139,14 +3149,15 @@ const buttonProps = {
 };
 var Component$o = defineComponent({
   name: "Button",
-  emits: ["click"],
   props: buttonProps,
+  emits: ["click", "mouseover"],
   setup(props, {
     slots,
     attrs,
     emit
   }) {
     var _a;
+    const isHover = ref(false);
     const showSlot = (_a = slots.default) != null ? _a : false;
     const btnClsPrefix = "bk-button";
     const btnCls = computed(() => {
@@ -3161,28 +3172,44 @@ var Component$o = defineComponent({
         "no-slot": !showSlot
       }, `${themeCls} ${btnClsPrefix} ${hoverTheme}`);
     });
-    const bkLoadingCls = `${btnClsPrefix}-loading`;
-    const loadingTheme = ["", "default"].includes(props.theme) ? "default" : "white";
+    const loadingTheme = 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 = 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 createVNode("button", mergeProps({
         "title": props.title,
         "disabled": props.disabled,
         "class": btnCls.value,
         "type": props.nativeType
       }, attrs, {
-        "onClick": handleClick
-      }), [props.loading ? createVNode("div", {
-        "class": bkLoadingCls
-      }, [createVNode(BkLoading, {
-        "theme": loadingTheme,
-        "size": BkLoadingSize.Small
-      }, null)]) : createVNode("div", {
-        "class": "bk-button-content-wrapper"
-      }, [createVNode("span", null, [(_b = (_a2 = slots.default) == null ? void 0 : _a2.call(slots)) != null ? _b : "default"])])]);
+        "onClick": handleClick,
+        "onMouseover": handleMouseOver,
+        "onMouseleave": handleMouseout
+      }), [props.loading && createVNode(BkLoading, {
+        "class": `${btnClsPrefix}-loading`,
+        "mode": props.laodingMode,
+        "theme": loadingTheme.value,
+        "size": loadingSize.value
+      }, null), slots.default && createVNode("span", {
+        "class": `${btnClsPrefix}-text`
+      }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)])]);
     };
   }
 });
@@ -3847,19 +3874,24 @@ const inputType = {
   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 = defineComponent({
   name: "Input",
   inheritAttrs: false,
   props: inputType,
-  emits: ["update:modelValue", "focus", "blur", "change", "clear", "input", "keydown"],
+  emits: [...inputEvents],
   setup(props, ctx) {
     const isFocused = ref(false);
+    const isCNInput = ref(false);
     const inputClsPrefix = "bk-input";
     const _a = ctx.attrs, {
       class: cls,
@@ -3873,6 +3905,7 @@ var Component$g = defineComponent({
       "is-focused": isFocused.value,
       "is-readonly": props.readonly,
       "is-disabled": props.disabled,
+      "is-simplicity": props.behavior === "simplicity",
       [`${cls}`]: !!cls
     }, inputClsPrefix));
     const suffixIconMap = {
@@ -3897,33 +3930,51 @@ var Component$g = defineComponent({
     const isNumberInput = computed(() => props.type === "number");
     const ceilMaxLength = computed(() => Math.floor(props.maxlength));
     const pwdVisible = ref(false);
+    const clearCls = 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);
@@ -3934,12 +3985,12 @@ var Component$g = defineComponent({
       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}`;
@@ -3970,11 +4021,16 @@ var Component$g = defineComponent({
         "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 && createVNode(close$1, {
         "onClick": clear,
-        "class": suffixCls
+        "class": clearCls.value
       }, null), suffixIcon.value, typeof props.maxlength === "number" && props.showWordLimit && createVNode("p", {
         "class": getCls("max-length")
       }, [props.modelValue.toString().length, createTextVNode("/"), createVNode("span", null, [ceilMaxLength.value])]), isNumberInput.value && props.showControl && createVNode("div", {
@@ -5001,92 +5057,72 @@ const mousewheel = {
     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 = "";
@@ -5200,7 +5236,7 @@ function createPopperInstance(el, popper2, options) {
 var Component$a = defineComponent({
   name: "Select",
   directives: {
-    clickoutside
+    clickoutside: ClickOutside
   },
   props: {
     modelValue: PropTypes.any,
@@ -5736,7 +5772,7 @@ var Component$8 = defineComponent({
       });
       defaultSteps.value.splice(0, defaultSteps.value.length, ...defaults);
     };
-    const init2 = () => {
+    const init = () => {
       var _a;
       defaultSteps.value.splice(0, defaultSteps.value.length, ...[{
         title: "\u6B65\u9AA41",
@@ -5768,7 +5804,7 @@ var Component$8 = defineComponent({
         console.warn(e);
       }
     };
-    onMounted(init2);
+    onMounted(init);
     return {
       defaultSteps,
       jumpTo
@@ -11531,7 +11567,20 @@ const datePickerProps = {
     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;
@@ -11598,7 +11647,7 @@ const datePickerProps = {
 var Component$1 = defineComponent({
   name: "DatePicker",
   directives: {
-    clickoutside
+    clickoutside: ClickOutside
   },
   props: datePickerProps,
   emits: ["open-change", "input", "change", "update:modelValue", "clear", "shortcut-change", "pick-success"],
@@ -11717,6 +11766,7 @@ var Component$1 = defineComponent({
     };
     watch(() => state.visible, (visible) => {
       var _a, _b;
+      console.error(123);
       if (visible === false) {
         (_a = pickerDropdownRef.value) == null ? void 0 : _a.destoryDropdown();
       }
@@ -12244,7 +12294,7 @@ var Transfer = defineComponent({
         if (!typeFlag.value) {
           generalInit();
         } else {
-          init2();
+          init();
         }
       }
     };
@@ -12281,7 +12331,7 @@ var Transfer = defineComponent({
         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 = [];
@@ -12414,7 +12464,7 @@ var Transfer = defineComponent({
       if (!typeFlag.value) {
         generalInit();
       } else {
-        init2();
+        init();
       }
       initSort();
     }
@@ -12747,7 +12797,10 @@ const getStringOrFuncStr = (item, props, key, args = []) => {
 };
 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 {
@@ -12758,14 +12811,11 @@ const getTreeStyle = (item, props) => {
   };
 };
 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"
@@ -12778,16 +12828,20 @@ const getNodeItemClass = (item, schema, props) => {
     "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([]),
@@ -12806,7 +12860,10 @@ const treeProps = {
     }),
     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 = defineComponent({
   name: "Tree",
@@ -12823,13 +12880,9 @@ var Component = defineComponent({
       const formatData2 = getFlatdata(props, newData, schemaValues.value);
       flatData.data = formatData2[0];
       flatData.schema = formatData2[1];
-      computeLevelHeight();
     }, {
       deep: true
     });
-    watch(() => [props.levelLine], () => {
-      computeLevelHeight();
-    });
     const schemaValues = computed(() => Array.from(flatData.schema.values()));
     const getSchemaVal2 = (key) => flatData.schema.get(key);
     const getNodeAttr2 = (node, attr) => {
@@ -12844,7 +12897,6 @@ var Component = defineComponent({
     const isNodeOpened = (node) => getNodeAttr2(node, "__isOpen");
     const hasChildNode = (node) => getNodeAttr2(node, "__hasChild");
     const renderData = computed(() => flatData.data.filter((item) => checkNodeIsOpen(item)));
-    const renderNodePathColl = computed(() => renderData.value.map((node) => getNodePath(node)));
     const isItemOpen = (item) => {
       var _a;
       if (typeof item === "object") {
@@ -12912,7 +12964,10 @@ var Component = defineComponent({
     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) {
@@ -12923,12 +12978,20 @@ var Component = defineComponent({
     };
     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");
@@ -12938,47 +13001,6 @@ var Component = defineComponent({
         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)) {
@@ -12997,7 +13019,7 @@ var Component = defineComponent({
       return schemaValues.value.some((val) => val.__path === nextNodePath);
     };
     const getVirtualLines = (node) => {
-      if (!props.virtualRender) {
+      if (!props.levelLine) {
         return null;
       }
       const getNodeLineStyle = (dpth) => ({
@@ -13009,7 +13031,6 @@ var Component = defineComponent({
         "style": getNodeLineStyle(maxDeep - index)
       }, null));
     };
-    computeLevelHeight();
     return {
       renderData,
       flatData,
@@ -13033,7 +13054,8 @@ var Component = defineComponent({
       "style": getTreeStyle(null, props),
       "list": this.renderData,
       "lineHeight": props.lineHeight,
-      "enabled": props.virtualRender
+      "enabled": props.virtualRender,
+      "throttleDelay": 0
     }, {
       default: (scoped) => (scoped.data || []).map(renderTreeNode)
     });
@@ -13395,4 +13417,4 @@ var preset = {
   install: createInstall(),
   version: "0.0.1"
 };
-export { BkAlert as Alert, BkAnimateNumber as AnimateNumber, BkBacktop as Backtop, BkBadge as Badge, BkOption, OptionGroup as BkOptionGroup, BkBreadcrumb as Breadcrumb, BreadcrumbItem, BkButton as Button, ButtonGroup, BkCard as Card, BkCheckbox as Checkbox, CheckboxGroup, BkCollaspe as Collapse, BkDatePicker as DatePicker, BkDialog as Dialog, BkDivider as Divider, BkException as Exception, BkFixedNavbar as FixedNavbar, BkForm as Form, FormItem, BkInput as Input, BkLink as Link, BkLoading as Loading, BkMenu as Menu, Message, BkModal as Modal, Navigation, Notify, BkPopover as Popover, BkProgress as Progress, BkRadio as Radio, RadioButton, RadioGroup, BkRate as Rate, BkSelect as Select, BkSideslider as Sideslider, BkSteps as Steps, BkSwitcher as Switcher, BKTab as Tab, BKTabPanel as TabPanel, BkTable as Table, BkTag as Tag, Transfer, BkTree as Tree, BkVirtualRender as VirtualRender, tooltips as bkTooltips, clickoutside, preset as default, mousewheel };
+export { BkAlert as Alert, BkAnimateNumber as AnimateNumber, BkBacktop as Backtop, BkBadge as Badge, BkOption, OptionGroup as BkOptionGroup, BkBreadcrumb as Breadcrumb, BreadcrumbItem, BkButton as Button, ButtonGroup, BkCard as Card, BkCheckbox as Checkbox, CheckboxGroup, BkCollaspe as Collapse, BkDatePicker as DatePicker, BkDialog as Dialog, BkDivider as Divider, BkException as Exception, BkFixedNavbar as FixedNavbar, BkForm as Form, FormItem, BkInput as Input, BkLink as Link, BkLoading as Loading, BkMenu as Menu, Message, BkModal as Modal, Navigation, Notify, BkPopover as Popover, BkProgress as Progress, BkRadio as Radio, RadioButton, RadioGroup, BkRate as Rate, BkSelect as Select, BkSideslider as Sideslider, BkSteps as Steps, BkSwitcher as Switcher, BKTab as Tab, BKTabPanel as TabPanel, BkTable as Table, BkTag as Tag, Transfer, BkTree as Tree, BkVirtualRender as VirtualRender, tooltips as bkTooltips, ClickOutside as clickoutside, preset as default, mousewheel };