vue-devui 1.0.0-beta.1 → 1.0.0-beta.13

package/transfer/index.es.js

@@ -17,7 +17,11 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { computed, defineComponent, inject, createVNode, mergeProps, toRef, provide, ref, watch, withDirectives, resolveDirective, resolveComponent, isVNode, createTextVNode, Fragment, reactive } from "vue";
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { computed, defineComponent, inject, createVNode, mergeProps, toRef, provide, ref, watch, withDirectives, resolveDirective, resolveComponent, reactive, onMounted, onBeforeUnmount, renderSlot, useSlots, isVNode, createTextVNode, h, render } from "vue";
 const transferBaseProps = {
   sourceOption: {
     type: Array,
@@ -47,10 +51,14 @@ const transferBaseProps = {
     type: Boolean,
     default: () => false
   },
-  query: {
+  filter: {
     type: String,
     default: () => ""
   },
+  height: {
+    type: String,
+    default: () => "320px"
+  },
   alltargetState: {
     type: Boolean,
     default: () => false
@@ -67,6 +75,14 @@ const transferBaseProps = {
     type: Number,
     default: () => 0
   },
+  showTooltip: {
+    type: Boolean,
+    default: () => false
+  },
+  tooltipPosition: {
+    type: String,
+    default: () => "top"
+  },
   scopedSlots: {
     type: Object
   },
@@ -100,7 +116,7 @@ const initState = (props, type) => {
     allChecked: false,
     disabled: false,
     checkedNum: initModel.model.length,
-    query: "",
+    keyword: "",
     checkedValues: initModel.model,
     filterData: initModel.data
   };
@@ -117,10 +133,17 @@ const commonProps = {
     type: String,
     default: void 0
   },
+  halfchecked: {
+    type: Boolean,
+    default: false
+  },
   isShowTitle: {
     type: Boolean,
     default: true
   },
+  title: {
+    type: String
+  },
   color: {
     type: String,
     default: void 0
@@ -216,15 +239,15 @@ var DCheckbox = defineComponent({
     });
     const mergedIsShowTitle = computed(() => {
       var _a;
-      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isShowTitle) != null ? _a : props.isShowTitle;
+      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isShowTitle.value) != null ? _a : props.isShowTitle;
     });
     const mergedShowAnimation = computed(() => {
       var _a;
-      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.showAnimation) != null ? _a : props.showAnimation;
+      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.showAnimation.value) != null ? _a : props.showAnimation;
     });
     const mergedColor = computed(() => {
       var _a;
-      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.color) != null ? _a : props.color;
+      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.color.value) != null ? _a : props.color;
     });
     const itemWidth = checkboxGroupConf == null ? void 0 : checkboxGroupConf.itemWidth.value;
     const direction = checkboxGroupConf == null ? void 0 : checkboxGroupConf.direction.value;
@@ -251,7 +274,7 @@ var DCheckbox = defineComponent({
       ctx.emit("change", current);
     };
     const handleClick = () => {
-      canChange(!isChecked.value, props.value).then((res) => res && toggle());
+      canChange(!isChecked.value, props.label).then((res) => res && toggle());
     };
     return {
       itemWidth,
@@ -366,8 +389,20 @@ var DCheckboxGroup = defineComponent({
       disabled: false
     };
     const toggleGroupVal = (val) => {
-      const index2 = valList.value.findIndex((item) => item === val);
+      let index2 = -1;
+      if (typeof valList.value[0] === "string") {
+        index2 = valList.value.findIndex((item) => item === val);
+      } else if (typeof valList.value[0] === "object") {
+        index2 = valList.value.findIndex((item) => item.value === val);
+      }
       if (index2 === -1) {
+        if (typeof props.options[0] === "object") {
+          const newOne = props.options.find((item) => item.value === val);
+          const res2 = [...valList.value, newOne];
+          ctx.emit("update:modelValue", res2);
+          ctx.emit("change", res2);
+          return;
+        }
         const res = [...valList.value, val];
         ctx.emit("update:modelValue", res);
         ctx.emit("change", res);
@@ -377,7 +412,13 @@ var DCheckboxGroup = defineComponent({
       ctx.emit("update:modelValue", valList.value);
       ctx.emit("change", valList.value);
     };
-    const isItemChecked = (itemVal) => valList.value.includes(itemVal);
+    const isItemChecked = (itemVal) => {
+      if (typeof valList.value[0] === "string") {
+        return valList.value.includes(itemVal);
+      } else if (typeof valList.value[0] === "object") {
+        return valList.value.some((item) => item.value === itemVal);
+      }
+    };
     provide(checkboxGroupInjectionKey, {
       disabled: toRef(props, "disabled"),
       isShowTitle: toRef(props, "isShowTitle"),
@@ -404,7 +445,17 @@ var DCheckboxGroup = defineComponent({
     let children = (_a = $slots.default) == null ? void 0 : _a.call($slots);
     if ((options == null ? void 0 : options.length) > 0) {
       children = options.map((opt) => {
-        const mergedOpt = Object.assign({}, defaultOpt, opt);
+        let mergedOpt = null;
+        if (typeof opt === "string") {
+          mergedOpt = Object.assign({}, defaultOpt, {
+            label: opt,
+            value: opt
+          });
+        } else if (typeof opt === "object") {
+          mergedOpt = Object.assign({}, defaultOpt, __spreadProps(__spreadValues({}, opt), {
+            label: opt.name
+          }));
+        }
         return createVNode(DCheckbox, mergedOpt, null);
       });
     }
@@ -462,7 +513,7 @@ const searchProps = {
     type: String,
     default: ""
   },
-  searchFn: {
+  onSearch: {
     type: Function,
     default: void 0
   },
@@ -700,7 +751,7 @@ const keydownHandles = (ctx, keywords, delay) => {
     useEmitKeyword(keywords.value);
   };
   const useEmitKeyword = debounce((value) => {
-    ctx.emit("searchFn", value);
+    ctx.emit("onSearch", value);
   }, delay);
   return {
     onInputKeydown,
@@ -741,32 +792,38 @@ const inputProps = {
     type: Boolean,
     default: false
   },
-  value: {
+  modelValue: {
     type: String,
     default: ""
   },
-  "onUpdate:value": {
+  "update:modelValue": {
     type: Function,
     default: void 0
   },
-  "onChange": {
+  onChange: {
     type: Function,
     default: void 0
   },
-  "onKeydown": {
+  onKeydown: {
     type: Function,
     default: void 0
   },
-  "onFocus": {
+  onFocus: {
     type: Function,
     default: void 0
   },
-  "onBlur": {
+  onBlur: {
     type: Function,
     default: void 0
   }
 };
 var input = "";
+const formItemInjectionKey = Symbol("dFormItem");
+const dFormItemEvents = {
+  blur: "d.form.blur",
+  change: "d.form.change",
+  input: "d.form.input"
+};
 var DInput = defineComponent({
   name: "DInput",
   directives: {
@@ -779,8 +836,10 @@ var DInput = defineComponent({
     }
   },
   props: inputProps,
-  emits: ["update:value", "focus", "blur", "change", "keydown"],
+  emits: ["update:modelValue", "focus", "blur", "change", "keydown"],
   setup(props, ctx) {
+    const formItem = inject(formItemInjectionKey, {});
+    const hasFormItem = Object.keys(formItem).length > 0;
     const sizeCls = computed(() => `devui-input-${props.size}`);
     const showPwdIcon = ref(false);
     const inputType = ref("text");
@@ -797,17 +856,20 @@ var DInput = defineComponent({
     }, {
       immediate: true
     });
-    watch(() => props.value, (value) => {
+    watch(() => props.modelValue, (value) => {
       value && value.length > 0 && showPreviewIcon.value ? showPwdIcon.value = true : showPwdIcon.value = false;
     });
     const onInput = ($event) => {
-      ctx.emit("update:value", $event.target.value);
+      ctx.emit("update:modelValue", $event.target.value);
+      hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.input);
     }, onFocus = () => {
       ctx.emit("focus");
     }, onBlur = () => {
       ctx.emit("blur");
+      hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.blur);
     }, onChange = ($event) => {
       ctx.emit("change", $event.target.value);
+      hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.change);
     }, onKeydown = ($event) => {
       ctx.emit("keydown", $event);
     }, onChangeInputType = () => {
@@ -828,7 +890,7 @@ var DInput = defineComponent({
   },
   render() {
     const {
-      value,
+      modelValue,
       showPreviewIcon,
       showPwdIcon,
       inputCls,
@@ -849,7 +911,7 @@ var DInput = defineComponent({
     }, [withDirectives(createVNode("input", mergeProps({
       dinput: true
     }, {
-      "value": value,
+      "value": modelValue,
       "disabled": disabled,
       "type": inputType,
       "maxlength": maxLength,
@@ -878,7 +940,7 @@ var search = "";
 var DSearch = defineComponent({
   name: "DSearch",
   props: searchProps,
-  emits: ["update:modelValue", "searchFn"],
+  emits: ["update:modelValue", "onSearch"],
   setup(props, ctx) {
     const rootClasses = getRootClass(props);
     const {
@@ -906,33 +968,194 @@ var DSearch = defineComponent({
         "onClick": onClickHandle
       }, [createVNode(resolveComponent("d-icon"), {
         "name": "search",
-        "size": "inherit"
+        "size": "inherit",
+        "key": "search"
       }, null)]), createVNode(DInput, {
         "size": props.size,
         "disabled": props.disabled,
         "autoFocus": props.autoFocus,
-        "value": keywords.value,
+        "modelValue": keywords.value,
         "maxLength": props.maxLength,
         "placeholder": props.placeholder,
         "cssClass": props.cssClass,
         "onKeydown": onInputKeydown,
-        "onUpdate:value": onInputUpdate
+        "onUpdate:modelValue": onInputUpdate
       }, null), clearIconShow.value && createVNode("div", {
         "class": "devui-search__clear",
         "onClick": onClearHandle
       }, [createVNode(resolveComponent("d-icon"), {
         "name": "close",
-        "size": "inherit"
+        "size": "inherit",
+        "key": "close"
       }, null)]), props.iconPosition === "right" && createVNode("div", {
         "class": "devui-search__icon",
         "onClick": onClickHandle
       }, [createVNode(resolveComponent("d-icon"), {
         "name": "search",
-        "size": "inherit"
+        "size": "inherit",
+        "key": "search"
       }, null)])]);
     };
   }
 });
+const tooltipProps = {
+  position: {
+    type: String,
+    default: "top"
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  },
+  content: {
+    type: String
+  },
+  mouseLeaveDelay: {
+    type: String,
+    default: "150"
+  },
+  mouseEnterDelay: {
+    type: String,
+    default: "100"
+  }
+};
+const EventListener = {
+  listen: function(target, eventType, callback) {
+    if (target.addEventListener) {
+      target.addEventListener(eventType, callback, false);
+      return {
+        remove() {
+          target.removeEventListener(target, callback, false);
+        }
+      };
+    } else {
+      target.attchEvent(eventType, callback);
+      return {
+        remove() {
+          target.detachEvent(eventType, callback);
+        }
+      };
+    }
+  }
+};
+var tooltip = "";
+var DTooltip = defineComponent({
+  name: "DTooltip",
+  props: tooltipProps,
+  setup(props, ctx) {
+    const position = reactive({
+      left: 0,
+      top: 0
+    });
+    const show = ref(false);
+    const slotElement = ref(null);
+    const tooltip2 = ref(null);
+    const arrow = ref(null);
+    const tooltipcontent = ref(null);
+    let enterEvent;
+    let leaveEvent;
+    const arrowStyle = (attr, value) => {
+      arrow.value.style[attr] = value;
+    };
+    const delayShowTrue = function(fn, delay = props.mouseEnterDelay) {
+      let start;
+      if (parseInt(delay) >= 0) {
+        return function() {
+          if (start) {
+            clearTimeout(start);
+          }
+          start = setTimeout(fn, parseInt(delay));
+        };
+      } else {
+        console.error("the value of delay is bigger than 0 and the type of delay must be string!");
+        return;
+      }
+    };
+    onMounted(() => {
+      if (!show.value) {
+        tooltip2.value.style.opacity = "0";
+      }
+      enterEvent = EventListener.listen(slotElement.value.children[0], "mouseenter", delayShowTrue(function() {
+        show.value = true;
+      }, props.mouseEnterDelay));
+      leaveEvent = EventListener.listen(slotElement.value.children[0], "mouseleave", function() {
+        if (show.value) {
+          setTimeout(function() {
+            show.value = false;
+          }, props.mouseLeaveDelay);
+        }
+      });
+    });
+    watch(show, function(newValue, oldValue) {
+      if (newValue) {
+        tooltip2.value.style.opacity = "1";
+        tooltip2.value.style.zIndex = "999";
+        arrow.value.style.border = "5px solid transparent";
+        switch (props.position) {
+          case "top":
+            position.left = slotElement.value.children[0].offsetLeft - tooltip2.value.offsetWidth / 2 + slotElement.value.children[0].offsetWidth / 2 - 5;
+            position.top = slotElement.value.children[0].offsetTop - 10 - tooltipcontent.value.offsetHeight;
+            arrowStyle("borderTop", "5px solid rgb(70, 77, 110)");
+            arrow.value.style.top = `${tooltipcontent.value.offsetHeight}px`;
+            arrow.value.style.left = `${tooltipcontent.value.offsetWidth / 2 + 5}px`;
+            break;
+          case "right":
+            position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth;
+            position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.value.offsetHeight / 2;
+            arrowStyle("borderRight", "5px solid rgb(70, 77, 110)");
+            arrow.value.style.top = `${tooltipcontent.value.offsetHeight / 2 - 5}px`;
+            arrow.value.style.left = "-0px";
+            break;
+          case "bottom":
+            position.top = slotElement.value.children[0].offsetHeight + slotElement.value.children[0].offsetTop + 10;
+            position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth / 2 - tooltipcontent.value.offsetWidth / 2 - 5;
+            arrowStyle("borderBottom", "5px solid rgb(70, 77, 110)");
+            arrow.value.style.top = "-10px";
+            arrow.value.style.left = `${tooltipcontent.value.offsetWidth / 2 + 5}px`;
+            break;
+          case "left":
+            position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.value.offsetHeight / 2;
+            position.left = slotElement.value.children[0].offsetLeft - 20 - tooltipcontent.value.offsetWidth;
+            arrowStyle("borderLeft", "5px solid rgb(70, 77, 110)");
+            arrow.value.style.left = `${tooltipcontent.value.offsetWidth + 10}px`;
+            arrow.value.style.top = `${tooltipcontent.value.offsetHeight / 2 - 5}px`;
+            break;
+          default:
+            console.error("The attribute position value is wrong, the value is one of top\u3001right\u3001left\u3001bottom");
+            break;
+        }
+        tooltip2.value.style.top = position.top + "px";
+        tooltip2.value.style.left = position.left + "px";
+      } else {
+        position.top = 0;
+        position.left = 0;
+        tooltip2.value.style.opacity = "0";
+      }
+    });
+    onBeforeUnmount(() => {
+      enterEvent.remove();
+      leaveEvent.remove();
+    });
+    return () => {
+      const defaultSlot = renderSlot(useSlots(), "default");
+      return createVNode("div", {
+        "class": "devui-tooltip"
+      }, [createVNode("div", {
+        "class": "slotElement",
+        "ref": slotElement
+      }, [defaultSlot]), createVNode("div", {
+        "class": "tooltip",
+        "ref": tooltip2
+      }, [createVNode("div", {
+        "class": "arrow",
+        "ref": arrow
+      }, null), createVNode("div", {
+        "class": "tooltipcontent",
+        "ref": tooltipcontent
+      }, [props.content])])]);
+    };
+  }
+});
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
@@ -941,19 +1164,36 @@ var DTransferBase = defineComponent({
   components: {
     DSearch,
     DCheckboxGroup,
-    DCheckbox
+    DCheckbox,
+    DTooltip
   },
   props: transferBaseProps,
   setup(props, ctx) {
     const modelValues = computed(() => props.checkedValues);
-    const searchQuery = computed(() => props.query);
+    const searchQuery = computed(() => props.filter);
     const baseClass = TransferBaseClass(props);
     const updateSearchQuery = (val) => ctx.emit("changeQuery", val);
+    const renderCheckbox = (props2, key, showTooltip = false, tooltipPosition = "top") => {
+      const checkbox2 = createVNode(DCheckbox, {
+        "class": "devui-transfer-panel-body-list-item",
+        "label": props2.key,
+        "value": props2.value,
+        "disabled": props2.disabled,
+        "key": key
+      }, null);
+      return !showTooltip ? checkbox2 : createVNode(DTooltip, {
+        "position": tooltipPosition,
+        "content": props2.key
+      }, _isSlot(checkbox2) ? checkbox2 : {
+        default: () => [checkbox2]
+      });
+    };
     return {
       baseClass,
       searchQuery,
       modelValues,
-      updateSearchQuery
+      updateSearchQuery,
+      renderCheckbox
     };
   },
   render() {
@@ -968,7 +1208,11 @@ var DTransferBase = defineComponent({
       updateSearchQuery,
       search: search2,
       searchQuery,
-      modelValues
+      modelValues,
+      height,
+      showTooltip,
+      tooltipPosition,
+      renderCheckbox
     } = this;
     return createVNode("div", {
       "class": baseClass
@@ -993,19 +1237,13 @@ var DTransferBase = defineComponent({
     }, null)]), createVNode("div", {
       "class": "devui-transfer-panel-body-list",
       "style": {
-        height: `calc(100% - 40px - ${search2 ? 42 : 0}px)`
+        height
       }
     }, [sourceOption.length ? createVNode(DCheckboxGroup, {
       "modelValue": modelValues,
       "onChange": (values) => this.$emit("updateCheckeds", values)
     }, _isSlot(_slot = sourceOption.map((item, idx) => {
-      return createVNode(DCheckbox, {
-        "class": "devui-transfer-panel-body-list-item",
-        "label": item.key,
-        "value": item.value,
-        "disabled": item.disabled,
-        "key": idx
-      }, null);
+      return renderCheckbox(item, idx, showTooltip, tooltipPosition);
     })) ? _slot : {
       default: () => [_slot]
     }) : createVNode("div", {
@@ -1043,11 +1281,12 @@ var Icon = defineComponent({
       color,
       classPrefix
     } = this;
-    return createVNode(Fragment, null, [/^((https?):)?\/\//.test(name) ? createVNode("img", {
+    return /^((https?):)?\/\//.test(name) ? createVNode("img", {
       "src": name,
       "alt": name.split("/")[name.split("/").length - 1],
       "style": {
-        width: size
+        width: size,
+        verticalAlign: "text-bottom"
       }
     }, null) : createVNode("i", {
       "class": `${classPrefix} ${classPrefix}-${name}`,
@@ -1055,18 +1294,214 @@ var Icon = defineComponent({
         fontSize: size,
         color
       }
-    }, null)]);
+    }, null);
   }
 });
 Icon.install = function(app) {
   app.component(Icon.name, Icon);
 };
+class View {
+  constructor() {
+    __publicField(this, "top", "50%");
+    __publicField(this, "left", "50%");
+  }
+}
+const componentProps = {
+  message: String,
+  backdrop: Boolean,
+  view: {
+    type: Object,
+    default: () => new View()
+  },
+  zIndex: Number,
+  isFull: {
+    type: Boolean,
+    default: false
+  }
+};
+class LoadingProps {
+  constructor() {
+    __publicField(this, "target");
+    __publicField(this, "message");
+    __publicField(this, "loadingTemplateRef");
+    __publicField(this, "backdrop", true);
+    __publicField(this, "positionType", "relative");
+    __publicField(this, "view", new View());
+    __publicField(this, "zIndex");
+  }
+}
+var loading = "";
+var Loading = defineComponent({
+  name: "DLoading",
+  inheritAttrs: false,
+  props: componentProps,
+  setup(props) {
+    const style = {
+      top: props.view.top,
+      left: props.view.left,
+      zIndex: props.zIndex
+    };
+    if (!props.message) {
+      style.background = "none";
+    }
+    const isShow = ref(false);
+    const open = () => {
+      isShow.value = true;
+    };
+    const close = () => {
+      isShow.value = false;
+    };
+    return {
+      style,
+      isShow,
+      open,
+      close
+    };
+  },
+  render() {
+    var _a;
+    const {
+      isShow,
+      isFull,
+      backdrop,
+      style,
+      message,
+      $slots
+    } = this;
+    return isShow && createVNode("div", {
+      "class": ["devui-loading-contanier", isFull ? "devui-loading--full" : ""]
+    }, [((_a = $slots.default) == null ? void 0 : _a.call($slots)) || createVNode("div", {
+      "class": "devui-loading-wrapper"
+    }, [backdrop ? createVNode("div", {
+      "class": "devui-loading-mask"
+    }, null) : null, createVNode("div", {
+      "style": style,
+      "class": "devui-loading-area"
+    }, [createVNode("div", {
+      "class": "devui-busy-default-spinner"
+    }, [createVNode("div", {
+      "class": "devui-loading-bar1"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar2"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar3"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar4"
+    }, null)]), message ? createVNode("span", {
+      "class": "devui-loading-text"
+    }, [message]) : null])])]);
+  }
+});
+const COMPONENT_CONTAINER_SYMBOL = Symbol("dev_component_container");
+function createComponent(Component, props, children = null) {
+  const vnode = h(Component, __spreadValues({}, props), children);
+  const container = document.createElement("div");
+  vnode[COMPONENT_CONTAINER_SYMBOL] = container;
+  render(vnode, container);
+  return vnode.component;
+}
+function unmountComponent(ComponnetInstance) {
+  render(null, ComponnetInstance == null ? void 0 : ComponnetInstance.vnode[COMPONENT_CONTAINER_SYMBOL]);
+}
+const loadingConstructor = defineComponent(Loading);
+const cacheInstance = new WeakSet();
+const isEmpty = (val) => {
+  if (!val)
+    return true;
+  if (Array.isArray(val))
+    return val.length === 0;
+  if (val instanceof Set || val instanceof Map)
+    return val.size === 0;
+  if (val instanceof Promise)
+    return false;
+  if (typeof val === "object") {
+    try {
+      return Object.keys(val).length === 0;
+    } catch (e) {
+      return false;
+    }
+  }
+  return false;
+};
+const getType = (vari) => {
+  return Object.prototype.toString.call(vari).slice(8, -1).toLowerCase();
+};
+const isPromise = (value) => {
+  const type = getType(value);
+  switch (type) {
+    case "promise":
+      return [value];
+    case "array":
+      if (value.some((val) => getType(val) !== "promise")) {
+        console.error(new TypeError("Binding values should all be of type Promise"));
+        return "error";
+      }
+      return value;
+    default:
+      return false;
+  }
+};
+const unmount = (el) => {
+  cacheInstance.delete(el);
+  el.instance.proxy.close();
+  unmountComponent(el.instance);
+};
+const toggleLoading = (el, binding) => {
+  if (binding.value) {
+    const vals = isPromise(binding.value);
+    if (vals === "error")
+      return;
+    el.instance.proxy.open();
+    el.appendChild(el.mask);
+    cacheInstance.add(el);
+    if (vals) {
+      Promise.all(vals).catch((err) => {
+        console.error(new Error("Promise handling errors"), err);
+      }).finally(() => {
+        unmount(el);
+      });
+    }
+  } else {
+    unmount(el);
+  }
+};
+const removeAttribute = (el) => {
+  el.removeAttribute("zindex");
+  el.removeAttribute("positiontype");
+  el.removeAttribute("backdrop");
+  el.removeAttribute("message");
+  el.removeAttribute("view");
+  el.removeAttribute("loadingtemplateref");
+};
+const handleProps = (el, vprops) => {
+  const props = __spreadValues(__spreadValues({}, new LoadingProps()), vprops);
+  const loadingTemplateRef = props.loadingTemplateRef;
+  const loadingInstance = createComponent(loadingConstructor, __spreadValues({}, props), loadingTemplateRef ? () => loadingTemplateRef : null);
+  el.style.position = props.positionType;
+  el.options = props;
+  el.instance = loadingInstance;
+  el.mask = loadingInstance.proxy.$el;
+};
+const loadingDirective = {
+  mounted: function(el, binding, vnode) {
+    handleProps(el, vnode.props);
+    removeAttribute(el);
+    !isEmpty(binding.value) && toggleLoading(el, binding);
+  },
+  updated: function(el, binding, vnode) {
+    if (!isEmpty(binding.value) && cacheInstance.has(el) || isEmpty(binding.value) && !cacheInstance.has(el))
+      return;
+    !cacheInstance.has(el) && handleProps(el, vnode.props);
+    removeAttribute(el);
+    toggleLoading(el, binding);
+  }
+};
 const buttonProps = {
   type: {
     type: String,
     default: "button"
   },
-  btnStyle: {
+  variant: {
     type: String,
     default: "primary"
   },
@@ -1108,6 +1543,9 @@ const buttonProps = {
 var button = "";
 var DButton = defineComponent({
   name: "DButton",
+  directives: {
+    devLoading: loadingDirective
+  },
   props: buttonProps,
   setup(props, ctx) {
     const buttonContent = ref(null);
@@ -1121,15 +1559,15 @@ var DButton = defineComponent({
     const hasContent = computed(() => ctx.slots.default);
     const btnClass = computed(() => {
       const {
-        btnStyle,
+        variant,
         size,
         position,
         bordered,
         icon
       } = props;
-      const origin = `devui-btn devui-btn-${btnStyle} devui-btn-${size} devui-btn-${position}`;
+      const origin = `devui-btn devui-btn-${variant} devui-btn-${size} devui-btn-${position}`;
       const borderedClass = bordered ? "bordered" : "";
-      const btnIcon = !!icon && !hasContent.value && btnStyle !== "primary" ? "d-btn-icon" : "";
+      const btnIcon = !!icon && !hasContent.value && variant !== "primary" ? "d-btn-icon" : "";
       const btnIconWrap = !!icon ? "d-btn-icon-wrap" : "";
       return `${origin} ${borderedClass} ${btnIcon} ${btnIconWrap}`;
     });
@@ -1155,7 +1593,7 @@ var DButton = defineComponent({
       } = props;
       return createVNode("div", mergeProps({
         "class": "devui-btn-host"
-      }, ctx.attrs), [createVNode("button", {
+      }, ctx.attrs), [withDirectives(createVNode("button", {
         "class": btnClass.value,
         "type": type,
         "disabled": disabled,
@@ -1164,12 +1602,12 @@ var DButton = defineComponent({
         },
         "onClick": onClick
       }, [!!icon ? createVNode(Icon, {
-        "name": props.icon,
+        "name": icon,
         "class": iconClass.value
       }, null) : null, createVNode("span", {
         "class": "button-content",
         "ref": buttonContent
-      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])])]);
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])]), [[resolveDirective("devLoading"), showLoading]])]);
     };
   }
 });
@@ -1250,30 +1688,52 @@ const transferProps = {
   },
   height: {
     type: String,
-    default: "320px"
+    default: () => "320px"
   },
   isSearch: {
     type: Boolean,
-    default: false
+    default: () => false
   },
   isSourceDroppable: {
     type: Boolean,
-    default: false
+    default: () => false
   },
   isTargetDroppable: {
     type: Boolean,
-    default: false
+    default: () => false
   },
   disabled: {
     type: Boolean,
-    default: false
+    default: () => false
   },
-  showOptionTitle: {
+  showTooltip: {
     type: Boolean,
-    default: false
+    default: () => false
+  },
+  tooltipPosition: {
+    type: String,
+    default: () => "top"
+  },
+  beforeTransfer: {
+    type: Function
   },
   slots: {
     type: Object
+  },
+  searching: {
+    type: Function
+  },
+  transferToSource: {
+    type: Function
+  },
+  transferToTarget: {
+    type: Function
+  },
+  transferring: {
+    type: Function
+  },
+  afterTransfer: {
+    type: Function
   }
 };
 const headerSlot = (ctx, name) => {
@@ -1295,10 +1755,16 @@ var Transfer = defineComponent({
   },
   props: transferProps,
   setup(props, ctx) {
-    const leftOptions = reactive(initState(props, "source"));
-    const rightOptions = reactive(initState(props, "target"));
+    let leftOptions = reactive(initState(props, "source"));
+    let rightOptions = reactive(initState(props, "target"));
     const origin = ref(null);
-    watch(() => leftOptions.query, (nVal) => {
+    watch(() => props.sourceOption, () => {
+      leftOptions = reactive(initState(props, "source"));
+    });
+    watch(() => props.targetOption, () => {
+      rightOptions = reactive(initState(props, "target"));
+    });
+    watch(() => leftOptions.keyword, (nVal) => {
       searchFilterData(leftOptions);
     });
     watch(() => leftOptions.checkedValues, (values) => {
@@ -1307,7 +1773,7 @@ var Transfer = defineComponent({
     }, {
       deep: true
     });
-    watch(() => rightOptions.query, (nVal) => {
+    watch(() => rightOptions.keyword, (nVal) => {
       searchFilterData(rightOptions);
     });
     watch(() => rightOptions.checkedValues, (values) => {
@@ -1323,19 +1789,35 @@ var Transfer = defineComponent({
         source.allChecked = value.length === source.data.filter((item) => !item.disabled).length ? true : false;
       }
     };
-    const updateFilterData = (source, target) => {
-      const newData = [];
-      source.data = source.data.filter((item) => {
-        const hasInclues = source.checkedValues.includes(item.value);
-        hasInclues && newData.push(item);
-        return !hasInclues;
-      });
-      target.data = target.data.concat(newData);
+    const updateFilterData = async (source, target, direction) => {
+      if (isFunction("beforeTransfer")) {
+        const res = await props.beforeTransfer.call(null, source, target);
+        if (typeof res === "boolean" && res === false) {
+          return;
+        }
+      }
+      const hasToSource = isFunction("transferToSource");
+      const hasToTarget = isFunction("transferToTarget");
+      const hasTransfering = isFunction("transferring");
+      if (hasToSource || hasToTarget) {
+        direction === "right" && props.transferToSource.call(null, source, target);
+        direction === "left" && props.transferToTarget.call(null, source, target);
+      } else {
+        source.data = source.data.filter((item) => {
+          const hasInclues = source.checkedValues.includes(item.value);
+          hasInclues && target.data.push(item);
+          return !hasInclues;
+        });
+      }
+      if (hasTransfering) {
+        props.transferring.call(null, target);
+      }
       source.checkedValues = [];
       target.disabled = !target.disabled;
       searchFilterData(source, target);
       searchFilterData(target, source);
       setOrigin("click");
+      isFunction("afterTransfer") && props.afterTransfer.call(null, target);
     };
     const changeAllSource = (source, value) => {
       if (source.filterData.every((item) => item.disabled))
@@ -1357,7 +1839,7 @@ var Transfer = defineComponent({
       setOrigin("change");
     };
     const searchFilterData = (source, target) => {
-      source.filterData = source.data.filter((item) => item.key.indexOf(source.query) !== -1);
+      source.filterData = source.data.filter((item) => item.key.indexOf(source.keyword) !== -1);
       if (target) {
         target.allChecked = false;
       }
@@ -1365,25 +1847,35 @@ var Transfer = defineComponent({
     const setOrigin = (value) => {
       origin.value = value;
     };
+    const changeQueryHandle = (source, direction, value) => {
+      if ((props == null ? void 0 : props.searching) && typeof props.searching === "function") {
+        props.searching.call(null, direction, value, source);
+        return;
+      }
+      source.keyword = value;
+    };
+    const isFunction = (type) => {
+      return props[type] && typeof props[type] === "function";
+    };
     return () => {
       return createVNode("div", {
         "class": "devui-transfer"
       }, [createVNode(DTransferBase, {
-        "style": {
-          height: props.height
-        },
         "sourceOption": leftOptions.filterData,
         "title": props.titles[0],
         "type": "source",
         "search": props.isSearch,
         "allChecked": leftOptions.allChecked,
         "checkedNum": leftOptions.checkedNum,
-        "query": leftOptions.query,
+        "filter": leftOptions.keyword,
+        "height": props.height,
         "checkedValues": leftOptions.checkedValues,
         "allCount": leftOptions.data.length,
+        "showTooltip": props.showTooltip,
+        "tooltipPosition": props.tooltipPosition,
         "onChangeAllSource": (value) => changeAllSource(leftOptions, value),
         "onUpdateCheckeds": updateLeftCheckeds,
-        "onChangeQuery": (value) => leftOptions.query = value
+        "onChangeQuery": (value) => changeQueryHandle(leftOptions, "left", value)
       }, {
         header: headerSlot(ctx, "left"),
         body: bodySlot(ctx, "left")
@@ -1392,29 +1884,29 @@ var Transfer = defineComponent({
         "sourceDisabled": rightOptions.checkedNum > 0 ? false : true,
         "targetDisabled": leftOptions.checkedNum > 0 ? false : true,
         "onUpdateSourceData": () => {
-          updateFilterData(rightOptions, leftOptions);
+          updateFilterData(rightOptions, leftOptions, "left");
         },
         "onUpdateTargetData": () => {
-          updateFilterData(leftOptions, rightOptions);
+          updateFilterData(leftOptions, rightOptions, "right");
         }
       }, {
         operation: opeartionSlot(ctx)
       }), createVNode(DTransferBase, {
-        "style": {
-          height: props.height
-        },
         "sourceOption": rightOptions.filterData,
         "title": props.titles[1],
         "type": "target",
         "search": props.isSearch,
         "allChecked": rightOptions.allChecked,
         "checkedNum": rightOptions.checkedNum,
-        "query": rightOptions.query,
+        "filter": rightOptions.keyword,
+        "height": props.height,
         "checkedValues": rightOptions.checkedValues,
         "allCount": rightOptions.data.length,
+        "showTooltip": props.showTooltip,
+        "tooltipPosition": props.tooltipPosition,
         "onChangeAllSource": (value) => changeAllSource(rightOptions, value),
         "onUpdateCheckeds": updateRightCheckeds,
-        "onChangeQuery": (value) => rightOptions.query = value
+        "onChangeQuery": (value) => changeQueryHandle(rightOptions, "right", value)
       }, {
         header: headerSlot(ctx, "right"),
         body: bodySlot(ctx, "right")