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

package/vue-devui.es.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { createVNode, getCurrentInstance, defineComponent as defineComponent$1, toRefs, inject, computed, Fragment, mergeProps, resolveComponent, createTextVNode, provide, onMounted, watch, ref, Transition, withDirectives, vShow, onBeforeUnmount, h, render, resolveDirective, Comment as Comment$1, reactive, toRef, onUpdated, onBeforeMount, nextTick as nextTick$1, readonly, unref as unref$1, Teleport, onUnmounted, createApp, renderSlot, isVNode, isRef as isRef$1, useSlots, shallowRef } from "vue";
+import { createVNode, getCurrentInstance, defineComponent as defineComponent$1, toRefs, inject, computed, Fragment, mergeProps, resolveComponent, createTextVNode, provide, onMounted, watch, ref, Transition, withDirectives, vShow, nextTick as nextTick$1, h, render, resolveDirective, Teleport, renderSlot, isVNode, onUnmounted, reactive, toRef, isRef as isRef$1, onBeforeUnmount, Comment as Comment$1, onUpdated, onBeforeMount, readonly, unref as unref$1, createApp, useSlots, shallowRef } from "vue";
 const accordionProps = {
   data: {
     type: Array,
@@ -958,6 +958,1121 @@ var AnchorInstall = {
     app.use(Anchor);
   }
 };
+const defaultFormatter = (item2) => item2 ? item2.label || item2.toString() : "";
+const defaultValueParse = (item2) => item2;
+const autoCompleteProps = {
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  source: {
+    type: Array,
+    default: null
+  },
+  allowEmptyValueSearch: {
+    type: Boolean,
+    default: false
+  },
+  appendToBody: {
+    type: Boolean,
+    default: false
+  },
+  appendToBodyDirections: {
+    type: Object,
+    default: () => ({
+      originX: "left",
+      originY: "bottom",
+      overlayX: "left",
+      overlayY: "top"
+    })
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  delay: {
+    type: Number,
+    default: 300
+  },
+  disabledKey: {
+    type: String,
+    default: null
+  },
+  formatter: {
+    type: Function,
+    default: defaultFormatter
+  },
+  isSearching: {
+    type: Boolean,
+    default: false
+  },
+  sceneType: {
+    type: String,
+    default: null
+  },
+  searchFn: {
+    type: Function,
+    default: null
+  },
+  tipsText: {
+    type: String,
+    default: "\u6700\u8FD1\u8F93\u5165"
+  },
+  latestSource: {
+    type: Array,
+    default: null
+  },
+  valueParser: {
+    type: Function,
+    default: defaultValueParse
+  },
+  enableLazyLoad: {
+    type: Boolean,
+    default: false
+  },
+  dAutoCompleteWidth: {
+    type: Number,
+    default: null
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  },
+  maxHeight: {
+    type: Number,
+    default: 300
+  },
+  transInputFocusEmit: {
+    type: Function,
+    default: null
+  },
+  selectValue: {
+    type: Function,
+    default: null
+  },
+  loadMore: {
+    type: Function,
+    default: null
+  }
+};
+const DropdownPropsKey = Symbol("DropdownPropsKey");
+function useCustomTemplate(ctx2, modelValue) {
+  const itemTemplate = (item2, index2) => {
+    const arr = { item: item2, index: index2 };
+    if (ctx2.slots.itemTemplate) {
+      return ctx2.slots.itemTemplate(arr);
+    }
+    return null;
+  };
+  const noResultItemTemplate = () => {
+    if (ctx2.slots.noResultItemTemplate) {
+      return ctx2.slots.noResultItemTemplate(modelValue.value);
+    }
+    return null;
+  };
+  const searchingTemplate = () => {
+    if (ctx2.slots.searchingTemplate) {
+      return ctx2.slots.searchingTemplate(modelValue.value);
+    }
+    return null;
+  };
+  const customRenderSolts = () => {
+    const slots = {};
+    if (ctx2.slots.itemTemplate) {
+      slots["itemTemplate"] = itemTemplate;
+    }
+    if (ctx2.slots.noResultItemTemplate) {
+      slots["noResultItemTemplate"] = noResultItemTemplate;
+    }
+    if (ctx2.slots.searchingTemplate) {
+      slots["searchingTemplate"] = searchingTemplate;
+    }
+    return slots;
+  };
+  return { customRenderSolts };
+}
+function useSearchFn(ctx2, allowEmptyValueSearch, source, searchFn, formatter) {
+  const searchList = ref([]);
+  const showNoResultItemTemplate = ref(false);
+  const handleSearch = async (term, enableLazyLoad) => {
+    if (term == "" && !allowEmptyValueSearch.value) {
+      searchList.value = [];
+      showNoResultItemTemplate.value = false;
+      return;
+    }
+    let arr = [];
+    term = term.toLowerCase();
+    if (enableLazyLoad) {
+      arr = source.value;
+    } else if (!searchFn.value) {
+      source.value.forEach((item2) => {
+        let cur = formatter.value(item2);
+        cur = cur.toLowerCase();
+        if (cur.startsWith(term)) {
+          arr.push(item2);
+        }
+      });
+    } else {
+      arr = await searchFn.value(term);
+    }
+    searchList.value = arr;
+    if (searchList.value.length == 0) {
+      showNoResultItemTemplate.value = true;
+    } else {
+      showNoResultItemTemplate.value = false;
+    }
+  };
+  const recentlyFocus = (latestSource) => {
+    if (latestSource) {
+      searchList.value = latestSource;
+    }
+  };
+  return {
+    handleSearch,
+    recentlyFocus,
+    searchList,
+    showNoResultItemTemplate
+  };
+}
+function useInputHandle(ctx2, searchList, showNoResultItemTemplate, modelValue, disabled, delay, handleSearch, transInputFocusEmit, recentlyFocus, latestSource) {
+  const visible = ref(false);
+  const inputRef = ref();
+  const searchStatus = ref(false);
+  const debounce2 = (cb, time) => {
+    let timer;
+    return (...args) => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+      timer = setTimeout(async () => {
+        searchStatus.value = true;
+        await cb(...args);
+        searchStatus.value = false;
+      }, time);
+    };
+  };
+  const onInputCb = async (value) => {
+    await handleSearch(value);
+    visible.value = true;
+  };
+  const onInputDebounce = debounce2(onInputCb, delay.value);
+  const onInput = (e) => {
+    const inp = e.target;
+    searchStatus.value = false;
+    showNoResultItemTemplate.value = false;
+    ctx2.emit("update:modelValue", inp.value);
+    onInputDebounce(inp.value);
+  };
+  const onFocus = () => {
+    handleSearch(modelValue.value);
+    recentlyFocus(latestSource.value);
+    transInputFocusEmit.value && transInputFocusEmit.value();
+  };
+  const handleClose = () => {
+    visible.value = false;
+    searchStatus.value = false;
+    showNoResultItemTemplate.value = false;
+  };
+  const toggleMenu = () => {
+    if (!disabled.value) {
+      if (visible.value) {
+        handleClose();
+      } else {
+        visible.value = true;
+        if (ctx2.slots.noResultItemTemplate && searchList.value.length == 0 && modelValue.value.trim() != "") {
+          showNoResultItemTemplate.value = true;
+        }
+      }
+    }
+  };
+  return {
+    handleClose,
+    toggleMenu,
+    onInput,
+    onFocus,
+    inputRef,
+    visible,
+    searchStatus
+  };
+}
+function useSelectHandle(ctx2, searchList, selectValue, handleSearch, formatter, handleClose) {
+  const selectedIndex = ref(0);
+  const getListIndex = (item2) => {
+    if (searchList.value.length == 0) {
+      return 0;
+    }
+    const ind = searchList.value.indexOf(item2);
+    return ind == -1 ? 0 : ind;
+  };
+  const selectOptionClick = async (item2) => {
+    const cur = formatter.value(item2);
+    ctx2.emit("update:modelValue", cur);
+    handleClose();
+    await handleSearch(cur);
+    selectedIndex.value = getListIndex(cur);
+    selectValue.value && selectValue.value();
+  };
+  return {
+    selectedIndex,
+    selectOptionClick
+  };
+}
+function useLazyHandle(props, ctx2, handleSearch) {
+  const showLoading = ref(false);
+  const dropDownRef = ref();
+  const loadMore = () => {
+    if (!props.enableLazyLoad && showLoading)
+      return;
+    const dropDownValue = dropDownRef.value;
+    const height = dropDownValue.scrollHeight;
+    const scrollTop = dropDownValue.clientHeight + dropDownValue.scrollTop;
+    if (scrollTop >= height && scrollTop >= props.maxHeight) {
+      props.loadMore();
+      showLoading.value = true;
+    }
+  };
+  ctx2.expose({ loadFinish });
+  async function loadFinish() {
+    await handleSearch(props.modelValue, props.enableLazyLoad);
+    showLoading.value = false;
+  }
+  return {
+    showLoading,
+    dropDownRef,
+    loadMore
+  };
+}
+function useKeyBoardHandle(dropDownRef, visible, searchList, selectedIndex, searchStatus, showNoResultItemTemplate, selectOptionClick, handleClose) {
+  var _a;
+  const hoverIndex = ref((_a = selectedIndex.value) != null ? _a : 0);
+  const scrollToActive = (index2) => {
+    const ul = dropDownRef.value;
+    const li = ul.children[index2];
+    nextTick$1(() => {
+      if (li.scrollIntoViewIfNeeded) {
+        li.scrollIntoViewIfNeeded(false);
+      } else {
+        const containerInfo = ul.getBoundingClientRect();
+        const elementInfo = li.getBoundingClientRect();
+        if (elementInfo.bottom > containerInfo.bottom || elementInfo.top < containerInfo.top) {
+          li.scrollIntoView(false);
+        }
+      }
+    });
+  };
+  const handlekeyDown = (e) => {
+    var _a2;
+    const keyCode = e.key || e.code;
+    if (keyCode === "Escape" && (visible.value && searchList.value.length || searchStatus.value || showNoResultItemTemplate.value)) {
+      handleClose();
+      return;
+    }
+    const status2 = visible.value && searchList.value.length && !searchStatus.value && !showNoResultItemTemplate.value;
+    if (keyCode === "ArrowDown" && status2) {
+      if (hoverIndex.value === searchList.value.length - 1) {
+        hoverIndex.value = 0;
+        scrollToActive(hoverIndex.value);
+        return;
+      }
+      hoverIndex.value = hoverIndex.value + 1;
+      scrollToActive(hoverIndex.value);
+    } else if (keyCode === "ArrowUp" && status2) {
+      if (hoverIndex.value === 0) {
+        hoverIndex.value = searchList.value.length - 1;
+        scrollToActive(hoverIndex.value);
+        return;
+      }
+      hoverIndex.value = hoverIndex.value - 1;
+      scrollToActive(hoverIndex.value);
+    }
+    if (keyCode === "Enter" && status2) {
+      selectOptionClick(searchList.value[hoverIndex.value]);
+      hoverIndex.value = (_a2 = selectedIndex.value) != null ? _a2 : 0;
+      return;
+    }
+  };
+  return {
+    hoverIndex,
+    handlekeyDown
+  };
+}
+var autoComplete = "";
+class View {
+  constructor() {
+    __publicField(this, "top", "50%");
+    __publicField(this, "left", "50%");
+  }
+}
+const componentProps$1 = {
+  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$1 = "";
+var Loading = defineComponent$1({
+  name: "DLoading",
+  inheritAttrs: false,
+  props: componentProps$1,
+  setup(props) {
+    const style2 = {
+      top: props.view.top,
+      left: props.view.left,
+      zIndex: props.zIndex
+    };
+    if (!props.message) {
+      style2.background = "none";
+    }
+    const isShow = ref(false);
+    const open = () => {
+      isShow.value = true;
+    };
+    const close = () => {
+      isShow.value = false;
+    };
+    return {
+      style: style2,
+      isShow,
+      open,
+      close
+    };
+  },
+  render() {
+    var _a;
+    const {
+      isShow,
+      isFull,
+      backdrop,
+      style: style2,
+      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": style2,
+      "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$1(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$1 = defineComponent$1(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$1 = (value) => {
+  const type4 = getType(value);
+  switch (type4) {
+    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$1(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$1(loadingConstructor$1, __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);
+  }
+};
+var DAutoCompleteDropdown = defineComponent$1({
+  name: "DAutoCompleteDropdown",
+  directives: {
+    dLoading: loadingDirective
+  },
+  setup(props, ctx2) {
+    const propsData = inject(DropdownPropsKey);
+    const {
+      visible,
+      selectedIndex,
+      selectOptionClick,
+      searchList,
+      searchStatus,
+      dropDownRef,
+      loadMore,
+      showLoading,
+      showNoResultItemTemplate,
+      latestSource,
+      modelValue,
+      hoverIndex
+    } = propsData;
+    const {
+      disabled,
+      maxHeight,
+      appendToBody,
+      formatter,
+      disabledKey,
+      isSearching
+    } = propsData.props;
+    const onSelect = (item2) => {
+      if (item2[disabledKey]) {
+        return;
+      }
+      selectOptionClick(item2);
+    };
+    return () => {
+      return withDirectives(createVNode("div", {
+        "class": ["devui-dropdown-menu", appendToBody && "devui-dropdown-menu-cdk", disabled && "disabled", latestSource.value && "devui-dropdown-latestSource"]
+      }, [createVNode("ul", {
+        "ref": dropDownRef,
+        "class": "devui-list-unstyled scroll-height",
+        "style": {
+          maxHeight: `${maxHeight}px`
+        },
+        "onScroll": loadMore
+      }, [isSearching && ctx2.slots.searchingTemplate && searchStatus.value && createVNode("li", {
+        "class": "devui-is-searching-template"
+      }, [createVNode("div", {
+        "class": "devui-no-data-tip"
+      }, [ctx2.slots.searchingTemplate()])]), latestSource.value && !modelValue.value && createVNode("li", {
+        "class": "devui-popup-tips"
+      }, [createTextVNode("\u6700\u8FD1\u8F93\u5165")]), !showNoResultItemTemplate.value && !searchStatus.value && searchList != null && searchList.value.length > 0 && searchList.value.map((item2, index2) => {
+        return createVNode("li", {
+          "onClick": () => onSelect(item2),
+          "class": ["devui-dropdown-item", selectedIndex.value == index2 && "selected", {
+            "disabled": disabledKey && item2[disabledKey]
+          }, {
+            "devui-dropdown-bg": hoverIndex.value == index2
+          }],
+          "title": formatter(item2),
+          "key": formatter(item2)
+        }, [ctx2.slots.itemTemplate ? ctx2.slots.itemTemplate(item2, index2) : formatter(item2)]);
+      }), !searchStatus.value && searchList.value.length == 0 && ctx2.slots.noResultItemTemplate && showNoResultItemTemplate.value && createVNode("li", {
+        "class": "devui-no-result-template"
+      }, [createVNode("div", {
+        "class": "devui-no-data-tip"
+      }, [ctx2.slots.noResultItemTemplate()])])])]), [[resolveDirective("dLoading"), showLoading.value], [vShow, visible.value && searchList.value.length > 0 || ctx2.slots.noResultItemTemplate && showNoResultItemTemplate.value || isSearching && ctx2.slots.searchingTemplate && searchStatus.value]]);
+    };
+  }
+});
+function on(element, eventName, handler) {
+  if (document.addEventListener) {
+    if (element && eventName && handler) {
+      element.addEventListener(eventName, handler, false);
+    }
+  } else {
+    if (element && eventName && handler) {
+      element.attachEvent("on" + eventName, handler);
+    }
+  }
+}
+function off(element, eventName, handler) {
+  if (document.removeEventListener) {
+    if (element && eventName && handler) {
+      element.removeEventListener(eventName, handler, false);
+    }
+  } else {
+    if (element && eventName && handler) {
+      element.detachEvent("on" + eventName, handler);
+    }
+  }
+}
+const ctx = Symbol("@@clickoutside");
+const nodeList = new Map();
+let startClick;
+let nid = 0;
+let isFirst = true;
+function createDocumentHandler(el, binding, vnode) {
+  if (inBrowser && isFirst) {
+    isFirst = false;
+    on(document, "mousedown", (e) => {
+      startClick = e;
+    });
+    on(document, "mouseup", (e) => {
+      for (const [id, node] of nodeList) {
+        node[ctx].documentHandler(e, startClick);
+      }
+    });
+  }
+  return function(mouseup, mousedown) {
+    if (!vnode || !binding.instance || !mouseup.target || !mousedown.target || el.contains(mouseup.target) || el.contains(mousedown.target) || el === mouseup.target) {
+      return;
+    }
+    el[ctx].bindingFn && el[ctx].bindingFn();
+  };
+}
+const clickoutsideDirective = {
+  beforeMount: function(el, binding, vnode) {
+    nid++;
+    nodeList.set(nid, el);
+    el[ctx] = {
+      nid,
+      documentHandler: createDocumentHandler(el, binding, vnode),
+      bindingFn: binding.value
+    };
+  },
+  updated: function(el, binding, vnode) {
+    el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
+    el[ctx].bindingFn = binding.value;
+  },
+  unmounted: function(el) {
+    nodeList.delete(el[ctx].nid);
+    delete el[ctx];
+  }
+};
+var overlay = "";
+function _isSlot$6(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const CommonOverlay = defineComponent$1({
+  setup(props, ctx2) {
+    return () => {
+      let _slot;
+      return createVNode(Teleport, {
+        "to": "#d-overlay-anchor"
+      }, {
+        default: () => [createVNode(Transition, {
+          "name": "devui-overlay-fade"
+        }, _isSlot$6(_slot = renderSlot(ctx2.slots, "default")) ? _slot : {
+          default: () => [_slot]
+        })]
+      });
+    };
+  }
+});
+const overlayProps = {
+  visible: {
+    type: Boolean
+  },
+  backgroundBlock: {
+    type: Boolean,
+    default: false
+  },
+  backgroundClass: {
+    type: String,
+    default: ""
+  },
+  backgroundStyle: {
+    type: [String, Object]
+  },
+  onBackdropClick: {
+    type: Function
+  },
+  backdropClose: {
+    type: Boolean,
+    default: true
+  },
+  hasBackdrop: {
+    type: Boolean,
+    default: true
+  }
+};
+const overlayEmits = ["update:visible", "backdropClick"];
+const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
+  overlayStyle: {
+    type: [String, Object],
+    default: void 0
+  }
+});
+const flexibleOverlayProps = __spreadValues({
+  origin: {
+    type: Object,
+    require: true
+  },
+  position: {
+    type: Object,
+    default: () => ({
+      originX: "left",
+      originY: "top",
+      overlayX: "left",
+      overlayY: "top"
+    })
+  }
+}, overlayProps);
+function useOverlayLogic(props, ctx2) {
+  const backgroundClass = computed(() => {
+    return [
+      "devui-overlay-background",
+      props.backgroundClass,
+      !props.hasBackdrop ? "devui-overlay-background__disabled" : "devui-overlay-background__color"
+    ];
+  });
+  const overlayClass = computed(() => {
+    return "devui-overlay";
+  });
+  const handleBackdropClick = (event) => {
+    var _a;
+    event.preventDefault();
+    (_a = props.onBackdropClick) == null ? void 0 : _a.call(props);
+    if (props.backdropClose) {
+      ctx2.emit("update:visible", false);
+    }
+  };
+  const handleOverlayBubbleCancel = (event) => event.cancelBubble = true;
+  onMounted(() => {
+    const body2 = document.body;
+    const originOverflow = body2.style.overflow;
+    const originPosition = body2.style.position;
+    watch([() => props.visible, () => props.backgroundBlock], ([visible, backgroundBlock]) => {
+      if (backgroundBlock) {
+        const top = body2.getBoundingClientRect().y;
+        if (visible) {
+          body2.style.overflowY = "scroll";
+          body2.style.position = visible ? "fixed" : "";
+          body2.style.top = `${top}px`;
+        } else {
+          body2.style.overflowY = originOverflow;
+          body2.style.position = originPosition;
+          body2.style.top = "";
+          window.scrollTo(0, -top);
+        }
+      }
+    });
+    onUnmounted(() => {
+      document.body.style.overflow = originOverflow;
+    });
+  });
+  return {
+    backgroundClass,
+    overlayClass,
+    handleBackdropClick,
+    handleOverlayBubbleCancel
+  };
+}
+function isComponent(target) {
+  return !!(target == null ? void 0 : target.$el);
+}
+function getElement(element) {
+  if (element instanceof Element) {
+    return element;
+  }
+  if (element && typeof element === "object" && element.$el instanceof Element) {
+    return element.$el;
+  }
+  return null;
+}
+const FlexibleOverlay = defineComponent$1({
+  name: "DFlexibleOverlay",
+  props: flexibleOverlayProps,
+  emits: overlayEmits,
+  setup(props, ctx2) {
+    const overlayRef = ref(null);
+    const positionedStyle = reactive({
+      position: "absolute"
+    });
+    onMounted(async () => {
+      const handleRectChange = (position, rect, origin) => {
+        const point = calculatePosition(position, rect, origin);
+        positionedStyle.left = `${point.x}px`;
+        positionedStyle.top = `${point.y}px`;
+      };
+      const locationElements = computed(() => {
+        const overlay2 = overlayRef.value;
+        const origin = getOrigin(props.origin);
+        if (!overlay2 || !origin) {
+          return;
+        }
+        return {
+          origin,
+          overlay: overlay2
+        };
+      });
+      const visibleRef = toRef(props, "visible");
+      const positionRef = toRef(props, "position");
+      watch([locationElements, visibleRef, positionRef], async ([locationElements2, visible, position], ov, onInvalidate) => {
+        if (!visible || !locationElements2) {
+          return;
+        }
+        const {
+          origin,
+          overlay: overlay2
+        } = locationElements2;
+        handleRectChange(position, overlay2.getBoundingClientRect(), origin);
+        const unsubscriptions = [subscribeLayoutEvent(() => handleRectChange(position, overlay2.getBoundingClientRect(), origin)), subscribeOverlayResize(overlay2, (entries) => handleRectChange(position, entries[0].contentRect, origin)), subscribeOriginResize(origin, () => handleRectChange(position, overlay2.getBoundingClientRect(), origin))];
+        onInvalidate(() => {
+          unsubscriptions.forEach((fn) => fn());
+        });
+      });
+    });
+    const {
+      backgroundClass,
+      overlayClass,
+      handleBackdropClick,
+      handleOverlayBubbleCancel
+    } = useOverlayLogic(props, ctx2);
+    return () => createVNode(CommonOverlay, null, {
+      default: () => [withDirectives(createVNode("div", {
+        "style": props.backgroundStyle,
+        "class": backgroundClass.value,
+        "onClick": handleBackdropClick
+      }, [createVNode("div", {
+        "ref": overlayRef,
+        "class": overlayClass.value,
+        "style": positionedStyle,
+        "onClick": handleOverlayBubbleCancel
+      }, [renderSlot(ctx2.slots, "default")])]), [[vShow, props.visible]])]
+    });
+  }
+});
+function getOrigin(origin) {
+  if (origin instanceof Element) {
+    return origin;
+  }
+  if (isRef$1(origin)) {
+    return getElement(origin.value);
+  }
+  if (isComponent(origin)) {
+    return getElement(origin);
+  }
+  return origin;
+}
+function calculatePosition(position, rect, origin) {
+  const originRect = getOriginRect(origin);
+  const originPoint = getOriginRelativePoint(originRect, position);
+  return getOverlayPoint(originPoint, rect, position);
+}
+function getOriginRect(origin) {
+  if (origin instanceof Element) {
+    return origin.getBoundingClientRect();
+  }
+  const width = origin.width || 0;
+  const height = origin.height || 0;
+  return {
+    top: origin.y,
+    bottom: origin.y + height,
+    left: origin.x,
+    right: origin.x + width,
+    height,
+    width
+  };
+}
+function getOverlayPoint(originPoint, rect, position) {
+  let x;
+  const {
+    width,
+    height
+  } = rect;
+  if (position.overlayX == "center") {
+    x = originPoint.x - width / 2;
+  } else {
+    x = position.overlayX == "left" ? originPoint.x : originPoint.x - width;
+  }
+  let y;
+  if (position.overlayY == "center") {
+    y = originPoint.y - height / 2;
+  } else {
+    y = position.overlayY == "top" ? originPoint.y : originPoint.y - height;
+  }
+  return {
+    x,
+    y
+  };
+}
+function getOriginRelativePoint(originRect, position) {
+  let x;
+  if (position.originX == "center") {
+    x = originRect.left + originRect.width / 2;
+  } else {
+    const startX = originRect.left;
+    const endX = originRect.right;
+    x = position.originX == "left" ? startX : endX;
+  }
+  let y;
+  if (position.originY == "center") {
+    y = originRect.top + originRect.height / 2;
+  } else {
+    y = position.originY == "top" ? originRect.top : originRect.bottom;
+  }
+  return {
+    x,
+    y
+  };
+}
+function subscribeLayoutEvent(event) {
+  window.addEventListener("scroll", event, true);
+  window.addEventListener("resize", event);
+  window.addEventListener("orientationchange", event);
+  return () => {
+    window.removeEventListener("scroll", event, true);
+    window.removeEventListener("resize", event);
+    window.removeEventListener("orientationchange", event);
+  };
+}
+function subscribeOverlayResize(overlay2, callback) {
+  if (overlay2 instanceof Element) {
+    const resizeObserver = new ResizeObserver(callback);
+    resizeObserver.observe(overlay2);
+    return () => resizeObserver.disconnect();
+  }
+  return () => {
+  };
+}
+function subscribeOriginResize(origin, callback) {
+  if (origin instanceof Element) {
+    const observer = new MutationObserver(callback);
+    observer.observe(origin, {
+      attributeFilter: ["style"]
+    });
+    return () => observer.disconnect();
+  }
+  return () => {
+  };
+}
+function _isSlot$5(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var AutoComplete = defineComponent$1({
+  name: "DAutoComplete",
+  directives: {
+    ClickOutside: clickoutsideDirective
+  },
+  props: autoCompleteProps,
+  emits: ["update:modelValue"],
+  setup(props, ctx2) {
+    const {
+      disabled,
+      modelValue,
+      appendToBody,
+      dAutoCompleteWidth,
+      delay,
+      allowEmptyValueSearch,
+      formatter,
+      transInputFocusEmit,
+      selectValue,
+      source,
+      searchFn,
+      appendToBodyDirections,
+      latestSource,
+      showAnimation
+    } = toRefs(props);
+    const {
+      handleSearch,
+      searchList,
+      showNoResultItemTemplate,
+      recentlyFocus
+    } = useSearchFn(ctx2, allowEmptyValueSearch, source, searchFn, formatter);
+    const {
+      onInput,
+      onFocus,
+      inputRef,
+      visible,
+      searchStatus,
+      handleClose,
+      toggleMenu
+    } = useInputHandle(ctx2, searchList, showNoResultItemTemplate, modelValue, disabled, delay, handleSearch, transInputFocusEmit, recentlyFocus, latestSource);
+    const {
+      selectedIndex,
+      selectOptionClick
+    } = useSelectHandle(ctx2, searchList, selectValue, handleSearch, formatter, handleClose);
+    const {
+      showLoading,
+      dropDownRef,
+      loadMore
+    } = useLazyHandle(props, ctx2, handleSearch);
+    const {
+      customRenderSolts
+    } = useCustomTemplate(ctx2, modelValue);
+    const {
+      hoverIndex,
+      handlekeyDown
+    } = useKeyBoardHandle(dropDownRef, visible, searchList, selectedIndex, searchStatus, showNoResultItemTemplate, selectOptionClick, handleClose);
+    provide(DropdownPropsKey, {
+      props,
+      visible,
+      term: "",
+      searchList,
+      selectedIndex,
+      searchStatus,
+      selectOptionClick,
+      dropDownRef,
+      showLoading,
+      loadMore,
+      latestSource,
+      modelValue,
+      showNoResultItemTemplate,
+      hoverIndex
+    });
+    const origin = ref();
+    const position = reactive({
+      appendToBodyDirections: {}
+    });
+    position.appendToBodyDirections = appendToBodyDirections;
+    const renderDropdown = () => {
+      if (appendToBody.value) {
+        let _slot;
+        return createVNode(FlexibleOverlay, {
+          "hasBackdrop": false,
+          "origin": origin,
+          "position": position.appendToBodyDirections,
+          "visible": visible.value,
+          "onUpdate:visible": ($event) => visible.value = $event
+        }, {
+          default: () => [createVNode("div", {
+            "class": "devui-dropdown devui-auto-complete-menu",
+            "style": {
+              width: dAutoCompleteWidth.value > 0 && dAutoCompleteWidth.value + "px"
+            }
+          }, [createVNode(DAutoCompleteDropdown, null, _isSlot$5(_slot = customRenderSolts()) ? _slot : {
+            default: () => [_slot]
+          })])]
+        });
+      } else {
+        let _slot2;
+        return createVNode("div", {
+          "class": "devui-dropdown",
+          "style": {
+            width: dAutoCompleteWidth.value > 0 && dAutoCompleteWidth.value + "px"
+          }
+        }, [createVNode(Transition, {
+          "name": showAnimation ? "fade" : ""
+        }, {
+          default: () => [createVNode(DAutoCompleteDropdown, null, _isSlot$5(_slot2 = customRenderSolts()) ? _slot2 : {
+            default: () => [_slot2]
+          })]
+        })]);
+      }
+    };
+    return () => {
+      return withDirectives(createVNode("div", {
+        "class": ["devui-auto-complete", "devui-form-group", "devui-has-feedback", visible.value && "devui-select-open"],
+        "ref": origin,
+        "style": {
+          width: dAutoCompleteWidth.value > 0 && dAutoCompleteWidth.value + "px"
+        }
+      }, [createVNode("input", {
+        "disabled": disabled.value,
+        "type": "text",
+        "onClick": toggleMenu,
+        "class": ["devui-form-control", "devui-dropdown-origin", "devui-dropdown-origin-open", disabled.value && "disabled"],
+        "placeholder": "Search",
+        "onInput": onInput,
+        "onFocus": onFocus,
+        "value": modelValue.value,
+        "ref": inputRef,
+        "onKeydown": handlekeyDown
+      }, null), renderDropdown()]), [[resolveDirective("click-outside"), handleClose]]);
+    };
+  }
+});
+AutoComplete.install = function(app) {
+  app.component(AutoComplete.name, AutoComplete);
+};
+var AutoCompleteInstall = {
+  title: "AutoComplete \u81EA\u52A8\u8865\u5168",
+  category: "\u6570\u636E\u5F55\u5165",
+  status: "100%",
+  install(app) {
+    app.use(AutoComplete);
+  }
+};
 const IconBody = (props) => {
   const {
     width,
@@ -1618,221 +2733,25 @@ var Icon = defineComponent$1({
       "style": {
         width: size,
         verticalAlign: "text-bottom"
-      }
-    }, null) : createVNode("i", {
-      "class": `${classPrefix} ${classPrefix}-${name}`,
-      "style": {
-        fontSize: size,
-        color: color2
-      }
-    }, null);
-  }
-});
-Icon.install = function(app) {
-  app.component(Icon.name, Icon);
-};
-var IconInstall = {
-  title: "Icon \u56FE\u6807",
-  category: "\u901A\u7528",
-  status: "100%",
-  install(app) {
-    app.use(Icon);
-  }
-};
-class View {
-  constructor() {
-    __publicField(this, "top", "50%");
-    __publicField(this, "left", "50%");
-  }
-}
-const componentProps$1 = {
-  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$1 = "";
-var Loading = defineComponent$1({
-  name: "DLoading",
-  inheritAttrs: false,
-  props: componentProps$1,
-  setup(props) {
-    const style2 = {
-      top: props.view.top,
-      left: props.view.left,
-      zIndex: props.zIndex
-    };
-    if (!props.message) {
-      style2.background = "none";
-    }
-    const isShow = ref(false);
-    const open = () => {
-      isShow.value = true;
-    };
-    const close = () => {
-      isShow.value = false;
-    };
-    return {
-      style: style2,
-      isShow,
-      open,
-      close
-    };
-  },
-  render() {
-    var _a;
-    const {
-      isShow,
-      isFull,
-      backdrop,
-      style: style2,
-      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": style2,
-      "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$1(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$1 = defineComponent$1(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$1 = (value) => {
-  const type4 = getType(value);
-  switch (type4) {
-    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$1(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);
+      }
+    }, null) : createVNode("i", {
+      "class": `${classPrefix} ${classPrefix}-${name}`,
+      "style": {
+        fontSize: size,
+        color: color2
+      }
+    }, null);
   }
+});
+Icon.install = function(app) {
+  app.component(Icon.name, Icon);
 };
-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$1(loadingConstructor$1, __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);
+var IconInstall = {
+  title: "Icon \u56FE\u6807",
+  category: "\u901A\u7528",
+  status: "100%",
+  install(app) {
+    app.use(Icon);
   }
 };
 const buttonProps = {
@@ -9430,18 +10349,6 @@ const dropdownProps = {
     default: "102px"
   }
 };
-function isComponent(target) {
-  return !!(target == null ? void 0 : target.$el);
-}
-function getElement(element) {
-  if (element instanceof Element) {
-    return element;
-  }
-  if (element && typeof element === "object" && element.$el instanceof Element) {
-    return element.$el;
-  }
-  return null;
-}
 function subscribeEvent(dom, type4, callback) {
   dom == null ? void 0 : dom.addEventListener(type4, callback);
   return () => {
@@ -9507,205 +10414,24 @@ const useDropdown = ({
         originEnter = false;
         if (!closeOnMouseLeaveMenu.value) {
           handleLeave("origin");
-        }
-      }), subscribeEvent(dropdownEl, "mouseenter", () => {
-        overlayEnter = true;
-        visible.value = true;
-      }), subscribeEvent(dropdownEl, "mouseleave", () => {
-        overlayEnter = false;
-        handleLeave("dropdown");
-      }));
-    }
-    onInvalidate(() => subscriptions.forEach((v) => v()));
-  });
-  return { dropdownEl: dropdownElRef };
-};
-var overlay = "";
-function _isSlot$4(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
-const CommonOverlay = defineComponent$1({
-  setup(props, ctx2) {
-    return () => {
-      let _slot;
-      return createVNode(Teleport, {
-        "to": "#d-overlay-anchor"
-      }, {
-        default: () => [createVNode(Transition, {
-          "name": "devui-overlay-fade"
-        }, _isSlot$4(_slot = renderSlot(ctx2.slots, "default")) ? _slot : {
-          default: () => [_slot]
-        })]
-      });
-    };
-  }
-});
-const overlayProps = {
-  visible: {
-    type: Boolean
-  },
-  backgroundBlock: {
-    type: Boolean,
-    default: false
-  },
-  backgroundClass: {
-    type: String,
-    default: ""
-  },
-  backgroundStyle: {
-    type: [String, Object]
-  },
-  onBackdropClick: {
-    type: Function
-  },
-  backdropClose: {
-    type: Boolean,
-    default: true
-  },
-  hasBackdrop: {
-    type: Boolean,
-    default: true
-  }
-};
-const overlayEmits = ["update:visible", "backdropClick"];
-const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
-  overlayStyle: {
-    type: [String, Object],
-    default: void 0
-  }
-});
-const flexibleOverlayProps = __spreadValues({
-  origin: {
-    type: Object,
-    require: true
-  },
-  position: {
-    type: Object,
-    default: () => ({
-      originX: "left",
-      originY: "top",
-      overlayX: "left",
-      overlayY: "top"
-    })
-  }
-}, overlayProps);
-function useOverlayLogic(props, ctx2) {
-  const backgroundClass = computed(() => {
-    return [
-      "devui-overlay-background",
-      props.backgroundClass,
-      !props.hasBackdrop ? "devui-overlay-background__disabled" : "devui-overlay-background__color"
-    ];
-  });
-  const overlayClass = computed(() => {
-    return "devui-overlay";
-  });
-  const handleBackdropClick = (event) => {
-    var _a;
-    event.preventDefault();
-    (_a = props.onBackdropClick) == null ? void 0 : _a.call(props);
-    if (props.backdropClose) {
-      ctx2.emit("update:visible", false);
-    }
-  };
-  const handleOverlayBubbleCancel = (event) => event.cancelBubble = true;
-  onMounted(() => {
-    const body2 = document.body;
-    const originOverflow = body2.style.overflow;
-    const originPosition = body2.style.position;
-    watch([() => props.visible, () => props.backgroundBlock], ([visible, backgroundBlock]) => {
-      if (backgroundBlock) {
-        const top = body2.getBoundingClientRect().y;
-        if (visible) {
-          body2.style.overflowY = "scroll";
-          body2.style.position = visible ? "fixed" : "";
-          body2.style.top = `${top}px`;
-        } else {
-          body2.style.overflowY = originOverflow;
-          body2.style.position = originPosition;
-          body2.style.top = "";
-          window.scrollTo(0, -top);
-        }
-      }
-    });
-    onUnmounted(() => {
-      document.body.style.overflow = originOverflow;
-    });
-  });
-  return {
-    backgroundClass,
-    overlayClass,
-    handleBackdropClick,
-    handleOverlayBubbleCancel
-  };
-}
-const FixedOverlay = defineComponent$1({
-  name: "DFixedOverlay",
-  props: fixedOverlayProps,
-  emits: overlayEmits,
-  setup(props, ctx2) {
-    const {
-      backgroundClass,
-      overlayClass,
-      handleBackdropClick,
-      handleOverlayBubbleCancel
-    } = useOverlayLogic(props, ctx2);
-    return () => createVNode(CommonOverlay, null, {
-      default: () => [withDirectives(createVNode("div", {
-        "class": backgroundClass.value,
-        "style": props.backgroundStyle,
-        "onClick": handleBackdropClick
-      }, [createVNode("div", {
-        "class": overlayClass.value,
-        "style": props.overlayStyle,
-        "onClick": handleOverlayBubbleCancel
-      }, [renderSlot(ctx2.slots, "default")])]), [[vShow, props.visible]])]
-    });
-  }
-});
-const FlexibleOverlay = defineComponent$1({
-  name: "DFlexibleOverlay",
-  props: flexibleOverlayProps,
-  emits: overlayEmits,
-  setup(props, ctx2) {
-    const overlayRef = ref(null);
-    const positionedStyle = reactive({
-      position: "absolute"
-    });
-    onMounted(async () => {
-      const handleRectChange = (position, rect, origin) => {
-        const point = calculatePosition(position, rect, origin);
-        positionedStyle.left = `${point.x}px`;
-        positionedStyle.top = `${point.y}px`;
-      };
-      const locationElements = computed(() => {
-        const overlay2 = overlayRef.value;
-        const origin = getOrigin(props.origin);
-        if (!overlay2 || !origin) {
-          return;
-        }
-        return {
-          origin,
-          overlay: overlay2
-        };
-      });
-      const visibleRef = toRef(props, "visible");
-      const positionRef = toRef(props, "position");
-      watch([locationElements, visibleRef, positionRef], async ([locationElements2, visible, position], ov, onInvalidate) => {
-        if (!visible || !locationElements2) {
-          return;
-        }
-        const {
-          origin,
-          overlay: overlay2
-        } = locationElements2;
-        handleRectChange(position, overlay2.getBoundingClientRect(), origin);
-        const unsubscriptions = [subscribeLayoutEvent(() => handleRectChange(position, overlay2.getBoundingClientRect(), origin)), subscribeOverlayResize(overlay2, (entries) => handleRectChange(position, entries[0].contentRect, origin)), subscribeOriginResize(origin, () => handleRectChange(position, overlay2.getBoundingClientRect(), origin))];
-        onInvalidate(() => {
-          unsubscriptions.forEach((fn) => fn());
-        });
-      });
-    });
+        }
+      }), subscribeEvent(dropdownEl, "mouseenter", () => {
+        overlayEnter = true;
+        visible.value = true;
+      }), subscribeEvent(dropdownEl, "mouseleave", () => {
+        overlayEnter = false;
+        handleLeave("dropdown");
+      }));
+    }
+    onInvalidate(() => subscriptions.forEach((v) => v()));
+  });
+  return { dropdownEl: dropdownElRef };
+};
+const FixedOverlay = defineComponent$1({
+  name: "DFixedOverlay",
+  props: fixedOverlayProps,
+  emits: overlayEmits,
+  setup(props, ctx2) {
     const {
       backgroundClass,
       overlayClass,
@@ -9714,122 +10440,17 @@ const FlexibleOverlay = defineComponent$1({
     } = useOverlayLogic(props, ctx2);
     return () => createVNode(CommonOverlay, null, {
       default: () => [withDirectives(createVNode("div", {
-        "style": props.backgroundStyle,
         "class": backgroundClass.value,
+        "style": props.backgroundStyle,
         "onClick": handleBackdropClick
       }, [createVNode("div", {
-        "ref": overlayRef,
         "class": overlayClass.value,
-        "style": positionedStyle,
+        "style": props.overlayStyle,
         "onClick": handleOverlayBubbleCancel
       }, [renderSlot(ctx2.slots, "default")])]), [[vShow, props.visible]])]
     });
   }
 });
-function getOrigin(origin) {
-  if (origin instanceof Element) {
-    return origin;
-  }
-  if (isRef$1(origin)) {
-    return getElement(origin.value);
-  }
-  if (isComponent(origin)) {
-    return getElement(origin);
-  }
-  return origin;
-}
-function calculatePosition(position, rect, origin) {
-  const originRect = getOriginRect(origin);
-  const originPoint = getOriginRelativePoint(originRect, position);
-  return getOverlayPoint(originPoint, rect, position);
-}
-function getOriginRect(origin) {
-  if (origin instanceof Element) {
-    return origin.getBoundingClientRect();
-  }
-  const width = origin.width || 0;
-  const height = origin.height || 0;
-  return {
-    top: origin.y,
-    bottom: origin.y + height,
-    left: origin.x,
-    right: origin.x + width,
-    height,
-    width
-  };
-}
-function getOverlayPoint(originPoint, rect, position) {
-  let x;
-  const {
-    width,
-    height
-  } = rect;
-  if (position.overlayX == "center") {
-    x = originPoint.x - width / 2;
-  } else {
-    x = position.overlayX == "left" ? originPoint.x : originPoint.x - width;
-  }
-  let y;
-  if (position.overlayY == "center") {
-    y = originPoint.y - height / 2;
-  } else {
-    y = position.overlayY == "top" ? originPoint.y : originPoint.y - height;
-  }
-  return {
-    x,
-    y
-  };
-}
-function getOriginRelativePoint(originRect, position) {
-  let x;
-  if (position.originX == "center") {
-    x = originRect.left + originRect.width / 2;
-  } else {
-    const startX = originRect.left;
-    const endX = originRect.right;
-    x = position.originX == "left" ? startX : endX;
-  }
-  let y;
-  if (position.originY == "center") {
-    y = originRect.top + originRect.height / 2;
-  } else {
-    y = position.originY == "top" ? originRect.top : originRect.bottom;
-  }
-  return {
-    x,
-    y
-  };
-}
-function subscribeLayoutEvent(event) {
-  window.addEventListener("scroll", event, true);
-  window.addEventListener("resize", event);
-  window.addEventListener("orientationchange", event);
-  return () => {
-    window.removeEventListener("scroll", event, true);
-    window.removeEventListener("resize", event);
-    window.removeEventListener("orientationchange", event);
-  };
-}
-function subscribeOverlayResize(overlay2, callback) {
-  if (overlay2 instanceof Element) {
-    const resizeObserver = new ResizeObserver(callback);
-    resizeObserver.observe(overlay2);
-    return () => resizeObserver.disconnect();
-  }
-  return () => {
-  };
-}
-function subscribeOriginResize(origin, callback) {
-  if (origin instanceof Element) {
-    const observer = new MutationObserver(callback);
-    observer.observe(origin, {
-      attributeFilter: ["style"]
-    });
-    return () => observer.disconnect();
-  }
-  return () => {
-  };
-}
 FlexibleOverlay.install = function(app) {
   app.component(FlexibleOverlay.name, FlexibleOverlay);
 };
@@ -9981,137 +10602,72 @@ const editableSelectProps = {
 };
 const selectDropdownProps = {
   options: {
-    type: Array,
-    default: () => []
-  }
-};
-function className$2(classStr, classOpt) {
-  let classname = classStr;
-  if (typeof classOpt === "object") {
-    Object.keys(classOpt).forEach((key) => {
-      classOpt[key] && (classname += ` ${key}`);
-    });
-  }
-  return classname;
-}
-var SelectDropdown = defineComponent$1({
-  name: "DSelectDropdown",
-  props: selectDropdownProps,
-  setup(props) {
-    const select2 = inject("InjectionKey");
-    const {
-      props: selectProps2,
-      dropdownRef,
-      visible,
-      selectOptionClick,
-      renderDefaultSlots,
-      renderEmptySlots,
-      selectedIndex,
-      hoverIndex,
-      loadMore
-    } = select2;
-    const {
-      maxHeight
-    } = selectProps2;
-    return () => {
-      const getLiCls = (item2, index2) => {
-        const {
-          disabledKey
-        } = selectProps2;
-        return className$2("devui-dropdown-item", {
-          disabled: disabledKey ? !!item2[disabledKey] : false,
-          selected: selectedIndex.value === index2,
-          "devui-dropdown-bg": hoverIndex.value === index2
-        });
-      };
-      return withDirectives(createVNode("div", {
-        "class": "devui-dropdown-menu"
-      }, [createVNode("ul", {
-        "ref": dropdownRef,
-        "class": "devui-list-unstyled scroll-height",
-        "style": {
-          maxHeight: maxHeight + "px"
-        },
-        "onScroll": loadMore
-      }, [props.options.map((o, index2) => {
-        return createVNode("li", {
-          "class": getLiCls(o, index2),
-          "onClick": ($evnet) => selectOptionClick($evnet, o)
-        }, [renderDefaultSlots(o)]);
-      }), withDirectives(createVNode("li", {
-        "class": "devui-no-result-template"
-      }, [createVNode("div", {
-        "class": "devui-no-data-tip"
-      }, [renderEmptySlots()])]), [[vShow, props.options.length === 0]])])]), [[vShow, visible]]);
-    };
-  }
-});
-var editableSelect = "";
-function on(element, eventName, handler) {
-  if (document.addEventListener) {
-    if (element && eventName && handler) {
-      element.addEventListener(eventName, handler, false);
-    }
-  } else {
-    if (element && eventName && handler) {
-      element.attachEvent("on" + eventName, handler);
-    }
-  }
-}
-function off(element, eventName, handler) {
-  if (document.removeEventListener) {
-    if (element && eventName && handler) {
-      element.removeEventListener(eventName, handler, false);
-    }
-  } else {
-    if (element && eventName && handler) {
-      element.detachEvent("on" + eventName, handler);
-    }
-  }
-}
-const ctx = Symbol("@@clickoutside");
-const nodeList = new Map();
-let startClick;
-let nid = 0;
-let isFirst = true;
-function createDocumentHandler(el, binding, vnode) {
-  if (inBrowser && isFirst) {
-    isFirst = false;
-    on(document, "mousedown", (e) => {
-      startClick = e;
-    });
-    on(document, "mouseup", (e) => {
-      for (const [id, node] of nodeList) {
-        node[ctx].documentHandler(e, startClick);
-      }
-    });
-  }
-  return function(mouseup, mousedown) {
-    if (!vnode || !binding.instance || !mouseup.target || !mousedown.target || el.contains(mouseup.target) || el.contains(mousedown.target) || el === mouseup.target) {
-      return;
-    }
-    el[ctx].bindingFn && el[ctx].bindingFn();
-  };
-}
-const clickoutsideDirective = {
-  beforeMount: function(el, binding, vnode) {
-    nid++;
-    nodeList.set(nid, el);
-    el[ctx] = {
-      nid,
-      documentHandler: createDocumentHandler(el, binding, vnode),
-      bindingFn: binding.value
-    };
-  },
-  updated: function(el, binding, vnode) {
-    el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
-    el[ctx].bindingFn = binding.value;
-  },
-  unmounted: function(el) {
-    nodeList.delete(el[ctx].nid);
-    delete el[ctx];
+    type: Array,
+    default: () => []
   }
 };
+function className$2(classStr, classOpt) {
+  let classname = classStr;
+  if (typeof classOpt === "object") {
+    Object.keys(classOpt).forEach((key) => {
+      classOpt[key] && (classname += ` ${key}`);
+    });
+  }
+  return classname;
+}
+var SelectDropdown = defineComponent$1({
+  name: "DSelectDropdown",
+  props: selectDropdownProps,
+  setup(props) {
+    const select2 = inject("InjectionKey");
+    const {
+      props: selectProps2,
+      dropdownRef,
+      visible,
+      selectOptionClick,
+      renderDefaultSlots,
+      renderEmptySlots,
+      selectedIndex,
+      hoverIndex,
+      loadMore
+    } = select2;
+    const {
+      maxHeight
+    } = selectProps2;
+    return () => {
+      const getLiCls = (item2, index2) => {
+        const {
+          disabledKey
+        } = selectProps2;
+        return className$2("devui-dropdown-item", {
+          disabled: disabledKey ? !!item2[disabledKey] : false,
+          selected: selectedIndex.value === index2,
+          "devui-dropdown-bg": hoverIndex.value === index2
+        });
+      };
+      return withDirectives(createVNode("div", {
+        "class": "devui-dropdown-menu"
+      }, [createVNode("ul", {
+        "ref": dropdownRef,
+        "class": "devui-list-unstyled scroll-height",
+        "style": {
+          maxHeight: maxHeight + "px"
+        },
+        "onScroll": loadMore
+      }, [props.options.map((o, index2) => {
+        return createVNode("li", {
+          "class": getLiCls(o, index2),
+          "onClick": ($evnet) => selectOptionClick($evnet, o)
+        }, [renderDefaultSlots(o)]);
+      }), withDirectives(createVNode("li", {
+        "class": "devui-no-result-template"
+      }, [createVNode("div", {
+        "class": "devui-no-data-tip"
+      }, [renderEmptySlots()])]), [[vShow, props.options.length === 0]])])]), [[vShow, visible]]);
+    };
+  }
+});
+var editableSelect = "";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var lodash = { exports: {} };
 /**
@@ -16180,6 +16736,9 @@ var FormItem = defineComponent$1({
 var formControl = "";
 var FormControl = defineComponent$1({
   name: "DFormControl",
+  directives: {
+    clickoutside: clickoutsideDirective
+  },
   props: formControlProps,
   setup(props, ctx2) {
     const formControl2 = ref();
@@ -16188,6 +16747,7 @@ var FormControl = defineComponent$1({
     const isHorizontal = labelData.layout === "horizontal";
     const uid = uniqueId("dfc-");
     const showPopover = ref(false);
+    const updateOn = ref("change");
     const tipMessage = ref("");
     const popPosition = ref("bottom");
     let rectInfo = {
@@ -16204,13 +16764,15 @@ var FormControl = defineComponent$1({
       const el = document.getElementById(uid);
       elOffset = getElOffset(el);
       EventBus.on("showPopoverErrorMessage", (data) => {
+        var _a;
         if (uid === data.uid) {
           rectInfo = el.getBoundingClientRect();
-          popoverLeftPosition = popPosition.value === "top" || popPosition.value === "bottom" ? rectInfo.right - rectInfo.width / 2 : rectInfo.right;
-          popoverTopPosition = popPosition.value === "top" ? elOffset.top + rectInfo.height / 2 - rectInfo.height : elOffset.top + rectInfo.height / 2;
           showPopover.value = data.showPopover;
           tipMessage.value = data.message;
           popPosition.value = data.popPosition;
+          popoverLeftPosition = popPosition.value === "top" || popPosition.value === "bottom" ? rectInfo.right - rectInfo.width / 2 : rectInfo.right;
+          popoverTopPosition = popPosition.value === "top" ? elOffset.top + rectInfo.height / 2 - rectInfo.height : elOffset.top + rectInfo.height / 2;
+          updateOn.value = (_a = data.updateOn) != null ? _a : "change";
         }
       });
     });
@@ -16238,17 +16800,22 @@ var FormControl = defineComponent$1({
           };
       }
     });
+    const handleClickOutside = () => {
+      if (updateOn.value !== "change") {
+        showPopover.value = false;
+      }
+    };
     return () => {
       var _a, _b, _c, _d, _e, _f, _g, _h;
       const {
         feedbackStatus,
         extraInfo
       } = props;
-      return createVNode("div", {
+      return withDirectives(createVNode("div", {
         "class": "form-control",
         "ref": formControl2,
         "data-uid": uid
-      }, [createVNode(Teleport, {
+      }, [showPopover.value && createVNode(Teleport, {
         "to": "body"
       }, {
         default: () => [createVNode("div", {
@@ -16260,6 +16827,7 @@ var FormControl = defineComponent$1({
             height: rectInfo.height + "px"
           }
         }, [createVNode(Popover, {
+          "controlled": updateOn.value !== "change",
           "visible": showPopover.value,
           "content": tipMessage.value,
           "popType": "error",
@@ -16277,7 +16845,7 @@ var FormControl = defineComponent$1({
         "color": iconData.value.color
       }, null)])]), extraInfo && createVNode("div", {
         "class": "devui-form-control-extra-info"
-      }, [extraInfo])]);
+      }, [extraInfo])]), [[resolveDirective("clickoutside"), handleClickOutside]]);
     };
   }
 });
@@ -16446,13 +17014,25 @@ function handleErrorStrategyPass(el) {
   index2 !== -1 && classList.splice(index2, 1);
   el.setAttribute("class", classList.join(" "));
 }
-function handleValidateError({ el, tipEl, message, isFormTag, messageShowType, dfcUID, popPosition = "right-bottom" }) {
+function getFormControlUID(el) {
+  if (el.tagName.toLocaleLowerCase() === "body")
+    return "";
+  if (el.parentElement.id.startsWith("dfc-")) {
+    return el.parentElement.id;
+  } else {
+    getFormControlUID(el.parentElement);
+  }
+}
+function handleValidateError({ el, tipEl, message = "", isFormTag, messageShowType, dfcUID, popPosition = "right-bottom", updateOn }) {
   if (isFormTag && messageShowType === MessageShowTypeEnum.toast) {
     alert(message);
     return;
   }
+  if (!dfcUID) {
+    dfcUID = getFormControlUID(el);
+  }
   if (MessageShowTypeEnum.popover === messageShowType) {
-    EventBus.emit("showPopoverErrorMessage", { showPopover: true, message, uid: dfcUID, popPosition });
+    EventBus.emit("showPopoverErrorMessage", { showPopover: true, message, uid: dfcUID, popPosition, updateOn });
     return;
   }
   tipEl.innerText = "" + message;
@@ -16474,7 +17054,7 @@ function getFormName(binding) {
   const key = Object.keys(_refs)[0];
   return _refs[key]["name"];
 }
-function validateFn({ validator, modelValue, el, tipEl, isFormTag, messageShowType, dfcUID, popPosition }) {
+function validateFn({ validator, modelValue, el, tipEl, isFormTag, messageShowType, dfcUID, popPosition, updateOn }) {
   validator.validate({ modelName: modelValue }).then(() => {
     handleValidatePass(el, tipEl);
   }).catch((err) => {
@@ -16487,7 +17067,7 @@ function validateFn({ validator, modelValue, el, tipEl, isFormTag, messageShowTy
     } else {
       msg = errors[0].message;
     }
-    handleValidateError({ el, tipEl, message: msg, isFormTag, messageShowType, dfcUID, popPosition });
+    handleValidateError({ el, tipEl, message: msg, isFormTag, messageShowType, dfcUID, popPosition, updateOn });
   });
 }
 function checkValidPopsition(positionStr) {
@@ -16586,11 +17166,16 @@ var dValidateRules = {
     const htmlEventValidateHandler = (e) => {
       const modelValue = e.target.value;
       if (messageShowType === MessageShowTypeEnum.popover) {
-        EventBus.emit("showPopoverErrorMessage", { showPopover: false, message: "", uid: dfcUID, popPosition });
+        EventBus.emit("showPopoverErrorMessage", { showPopover: false, message: "", uid: dfcUID, popPosition, updateOn });
       }
-      validateFn({ validator, modelValue, el, tipEl, isFormTag: false, messageShowType, dfcUID, popPosition });
+      validateFn({ validator, modelValue, el, tipEl, isFormTag: false, messageShowType, dfcUID, popPosition, updateOn });
     };
     vnode.children[0].el.addEventListener(updateOn, htmlEventValidateHandler);
+    if (messageShowType === MessageShowTypeEnum.popover && updateOn === UpdateOnEnum.change) {
+      vnode.children[0].el.addEventListener("focus", () => {
+        EventBus.emit("showPopoverErrorMessage", { showPopover: false, uid: dfcUID, updateOn });
+      });
+    }
     if (errorStrategy === ErrorStrategyEnum.pristine) {
       handleErrorStrategy(el);
       vnode.children[0].props.value = "" + vnode.children[0].props.value;
@@ -16598,7 +17183,7 @@ var dValidateRules = {
     const formName = getFormName(binding);
     formName && EventBus.on(`formSubmit:${formName}`, () => {
       const modelValue = isFormTag ? "" : vnode.children[0].el.value;
-      validateFn({ validator, modelValue, el, tipEl, isFormTag, messageShowType });
+      validateFn({ validator, modelValue, el, tipEl, isFormTag, messageShowType, updateOn: "submit" });
     });
   }
 };
@@ -18727,7 +19312,7 @@ const getRangeValueOf = (value, min, max) => {
   }
   return value;
 };
-function _isSlot$3(s) {
+function _isSlot$4(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 var Dialog = defineComponent$1({
@@ -18792,7 +19377,7 @@ var Dialog = defineComponent$1({
           "variant": variant,
           "disabled": disabled,
           "onClick": handler
-        }, _isSlot$3(text) ? text : {
+        }, _isSlot$4(text) ? text : {
           default: () => [text]
         });
       });
@@ -21043,7 +21628,7 @@ var Radio = defineComponent$1({
   }
 });
 var radioGroup = "";
-function _isSlot$2(s) {
+function _isSlot$3(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 var RadioGroup = defineComponent$1({
@@ -21079,7 +21664,7 @@ var RadioGroup = defineComponent$1({
           return createVNode(Radio, {
             "key": item2,
             "value": item2
-          }, _isSlot$2(item2) ? item2 : {
+          }, _isSlot$3(item2) ? item2 : {
             default: () => [item2]
           });
         });
@@ -23580,11 +24165,11 @@ const statisticProps = {
   },
   groupSeparator: {
     type: String,
-    default: ","
+    default: ""
   },
   showGroupSeparator: {
     type: Boolean,
-    default: false
+    default: true
   },
   titleStyle: {
     type: Object
@@ -27292,7 +27877,37 @@ var TooltipInstall = {
     app.use(DTooltip);
   }
 };
-const transferBaseProps = {
+const transferCommon = {
+  showTooltip: {
+    type: Boolean,
+    default: () => false
+  },
+  tooltipPosition: {
+    type: String,
+    default: () => "top"
+  }
+};
+const transferDragFunctions = {
+  onDragstart: {
+    type: Function
+  },
+  onDrop: {
+    type: Function
+  },
+  onDragleave: {
+    type: Function
+  },
+  onDragover: {
+    type: Function
+  },
+  onDragenter: {
+    type: Function
+  },
+  onDragend: {
+    type: Function
+  }
+};
+const transferBaseProps = __spreadProps(__spreadValues(__spreadValues({}, transferCommon), transferDragFunctions), {
   sourceOption: {
     type: Array,
     default() {
@@ -27345,13 +27960,13 @@ const transferBaseProps = {
     type: Number,
     default: () => 0
   },
-  showTooltip: {
+  isSourceDroppable: {
     type: Boolean,
     default: () => false
   },
-  tooltipPosition: {
-    type: String,
-    default: () => "top"
+  isTargetDroppable: {
+    type: Boolean,
+    default: () => false
   },
   scopedSlots: {
     type: Object
@@ -27364,8 +27979,11 @@ const transferBaseProps = {
   },
   onUpdateCheckeds: {
     type: Function
+  },
+  onDragend: {
+    type: Function
   }
-};
+});
 const getFilterData = (props, type4) => {
   const newModel = [];
   const data = type4 === "source" ? props.sourceOption : props.targetOption;
@@ -27397,6 +28015,168 @@ const TransferBaseClass = (props) => {
     return `devui-transfer-panel devui-transfer-${props.type}`;
   });
 };
+const transferDragProps = __spreadProps(__spreadValues(__spreadValues({}, transferCommon), transferDragFunctions), {
+  itemData: {
+    type: Object
+  },
+  id: {
+    type: Number,
+    default: () => null
+  }
+});
+const transferCheckboxProps = __spreadProps(__spreadValues({}, transferCommon), {
+  data: {
+    type: Object
+  },
+  id: {
+    type: Number
+  }
+});
+function _isSlot$2(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var DTransfeCheckbox = defineComponent$1({
+  name: "DTransferCheckbox",
+  components: {
+    DCheckbox: Checkbox,
+    DTooltip
+  },
+  props: transferCheckboxProps,
+  setup(props) {
+    const renderCheckbox = () => {
+      return createVNode(Checkbox, {
+        "label": props.data.key,
+        "value": props.data.value,
+        "disabled": props.data.disabled,
+        "class": "devui-transfer-panel-body-list-item",
+        "key": props.id
+      }, null);
+    };
+    return () => {
+      let _slot;
+      return !props.showTooltip ? renderCheckbox() : createVNode(DTooltip, {
+        "class": "devui-transfer-panel-body-list-tooltip",
+        "position": props.tooltipPosition,
+        "content": props.data.key
+      }, _isSlot$2(_slot = renderCheckbox()) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+  }
+});
+var devuiIcon = "";
+var DTransferDrag = defineComponent$1({
+  name: "DTransferDrag",
+  components: {
+    DTransfeCheckbox
+  },
+  props: transferDragProps,
+  setup(props) {
+    const dragRef = ref(null);
+    const dragHighlight = ref(false);
+    const dragOverNodeKey = ref("");
+    const dropPosition = ref(null);
+    const dragTimer = ref(null);
+    const calcDropPosition = (event) => {
+      const {
+        clientY
+      } = event;
+      const {
+        top,
+        bottom,
+        height
+      } = dragRef.value.getBoundingClientRect();
+      const des = Math.max(height * 0.25, 2);
+      if (clientY <= top + des) {
+        return -1;
+      }
+      if (clientY >= bottom - des) {
+        return 1;
+      }
+      return 0;
+    };
+    const resetState = () => {
+      dragOverNodeKey.value = "";
+      dropPosition.value = null;
+      dragHighlight.value = null;
+    };
+    onUnmounted(() => {
+      clearTimeout(dragTimer.value);
+    });
+    return () => {
+      const state = dragOverNodeKey.value === props.itemData.key;
+      return createVNode("div", {
+        "class": {
+          "devui-transfer-panel-body-list-item": true,
+          "devui-transfer-drag-dragging": dragHighlight.value,
+          "devui-transfer-drag-over": state && dropPosition.value === 0,
+          "devui-transfer\u2013drag-over-top": state && dropPosition.value === -1,
+          "devui-transfer\u2013drag-over-bottom": state && dropPosition.value === 1
+        },
+        "onDragenter": (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          clearTimeout(dragTimer.value);
+          const curDropPosition = calcDropPosition(event);
+          if (props.itemData.key === dragOverNodeKey.value && curDropPosition === 0) {
+            resetState();
+            return;
+          }
+          dragTimer.value = setTimeout(() => {
+            dragOverNodeKey.value = props.itemData.key;
+            dropPosition.value = curDropPosition;
+          }, 0);
+          props.onDragenter && props.onDragenter(event, props.itemData);
+        },
+        "onDragover": (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          if (props.itemData.key === dragOverNodeKey.value) {
+            const curDropPosition = calcDropPosition(event);
+            if (curDropPosition === dropPosition.value) {
+              return;
+            }
+            dropPosition.value = curDropPosition;
+          }
+          props.onDragover && props.onDragover(event, props.itemData);
+        },
+        "onDragleave": (event) => {
+          event.stopPropagation();
+          resetState();
+          props.onDragleave && props.onDragleave(event, props.itemData);
+        },
+        "onDrop": (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          resetState();
+          props.onDrop && props.onDrop(event, props.itemData);
+        },
+        "onDragend": (event) => {
+          event.stopPropagation();
+          props.onDragend && props.onDragend(event, props.itemData);
+        }
+      }, [createVNode("div", {
+        "class": "devui-transfer-panel-body-list-drag",
+        "draggable": true,
+        "ref": dragRef,
+        "onDragstart": (event) => {
+          event.stopPropagation();
+          dragHighlight.value = true;
+          props.onDragstart && props.onDragstart(event, props.itemData);
+        }
+      }, [createVNode("span", {
+        "class": "devui-transfer-panel-body-list-drag__icon"
+      }, [createVNode(resolveComponent("d-icon"), {
+        "name": "drag-small"
+      }, null)]), createVNode(DTransfeCheckbox, {
+        "data": props.itemData,
+        "id": props.id,
+        "showTooltip": props.showTooltip,
+        "tooltipPosition": props.tooltipPosition
+      }, null)])]);
+    };
+  }
+});
 function _isSlot$1(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
@@ -27406,54 +28186,98 @@ var DTransferBase = defineComponent$1({
     DSearch,
     DCheckboxGroup,
     DCheckbox: Checkbox,
-    DTooltip
+    DTransferDrag,
+    DTransfeCheckbox
   },
   props: transferBaseProps,
   setup(props, ctx2) {
+    const allHalfchecked = ref(false);
     const modelValues = computed(() => props.checkedValues);
+    const dragWrapClass = computed(() => {
+      const isDrag = props.isSourceDroppable || props.isTargetDroppable;
+      return `devui-transfer-panel-body-list devui-transfer-panel-body-${isDrag ? "" : "no"}drag`;
+    });
     const searchQuery = computed(() => props.filter);
     const baseClass = TransferBaseClass(props);
+    const dropItem = ref(null);
+    watch(() => props.checkedNum, (nVal) => {
+      if (props.allChecked) {
+        allHalfchecked.value = !props.allChecked;
+      } else {
+        allHalfchecked.value = nVal !== 0;
+      }
+    }, {
+      immediate: true
+    });
     const updateSearchQuery = (val) => ctx2.emit("changeQuery", val);
-    const renderCheckbox = (props2, key, showTooltip = false, tooltipPosition = "top") => {
-      const checkbox2 = createVNode(Checkbox, {
-        "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$1(checkbox2) ? checkbox2 : {
-        default: () => [checkbox2]
+    const renderCheckboxGroup = () => {
+      let _slot;
+      return createVNode(DCheckboxGroup, {
+        "modelValue": modelValues.value,
+        "onChange": (values) => ctx2.emit("updateCheckeds", values)
+      }, _isSlot$1(_slot = props.sourceOption.map((item2, idx) => {
+        return createVNode(DTransfeCheckbox, {
+          "data": item2,
+          "id": idx,
+          "showTooltip": props.showTooltip,
+          "tooltipPosition": props.tooltipPosition
+        }, null);
+      })) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+    const renderDragCheckboxGroup = () => {
+      let _slot2;
+      return createVNode(DCheckboxGroup, {
+        "modelValue": modelValues.value,
+        "onChange": (values) => ctx2.emit("updateCheckeds", values)
+      }, _isSlot$1(_slot2 = props.sourceOption.map((item2, idx) => {
+        return createVNode(DTransferDrag, {
+          "itemData": item2,
+          "id": idx,
+          "showTooltip": props.showTooltip,
+          "tooltipPosition": props.tooltipPosition,
+          "onDrop": (event, item3) => {
+            dropItem.value = item3;
+          },
+          "onDragend": (event, dragItem) => {
+            props.onDragend && props.onDragend(dragItem, dropItem.value);
+          }
+        }, null);
+      })) ? _slot2 : {
+        default: () => [_slot2]
       });
     };
     return {
       baseClass,
       searchQuery,
+      dragWrapClass,
       modelValues,
+      dropItem,
+      allHalfchecked,
       updateSearchQuery,
-      renderCheckbox
+      renderCheckboxGroup,
+      renderDragCheckboxGroup
     };
   },
   render() {
-    let _slot;
     const {
       title,
       baseClass,
       checkedNum,
       allChecked,
+      allHalfchecked,
       sourceOption,
       allCount,
       updateSearchQuery,
       search: search2,
       searchQuery,
-      modelValues,
+      dragWrapClass,
       height,
-      showTooltip,
-      tooltipPosition,
-      renderCheckbox
+      isSourceDroppable,
+      isTargetDroppable,
+      renderCheckboxGroup,
+      renderDragCheckboxGroup
     } = this;
     return createVNode("div", {
       "class": baseClass
@@ -27462,8 +28286,11 @@ var DTransferBase = defineComponent$1({
     }, [createVNode("div", {
       "class": "devui-transfer-panel-header-allChecked"
     }, [createVNode(Checkbox, {
+      "halfchecked": allHalfchecked,
       "modelValue": allChecked,
-      "onChange": (value) => this.$emit("changeAllSource", value)
+      "onChange": (value) => {
+        this.$emit("changeAllSource", value);
+      }
     }, _isSlot$1(title) ? title : {
       default: () => [title]
     })]), createVNode("div", {
@@ -27476,18 +28303,11 @@ var DTransferBase = defineComponent$1({
       "modelValue": searchQuery,
       "onUpdate:modelValue": updateSearchQuery
     }, null)]), createVNode("div", {
-      "class": "devui-transfer-panel-body-list",
+      "class": dragWrapClass,
       "style": {
         height
       }
-    }, [sourceOption.length ? createVNode(DCheckboxGroup, {
-      "modelValue": modelValues,
-      "onChange": (values) => this.$emit("updateCheckeds", values)
-    }, _isSlot$1(_slot = sourceOption.map((item2, idx) => {
-      return renderCheckbox(item2, idx, showTooltip, tooltipPosition);
-    })) ? _slot : {
-      default: () => [_slot]
-    }) : createVNode("div", {
+    }, [sourceOption.length ? isSourceDroppable || isTargetDroppable ? renderDragCheckboxGroup() : renderCheckboxGroup() : createVNode("div", {
       "class": "devui-transfer-panel-body-list-empty"
     }, [createTextVNode("\u65E0\u6570\u636E")])])])]);
   }
@@ -27544,7 +28364,7 @@ var DTransferOperation = defineComponent$1({
     };
   }
 });
-const transferProps = {
+const transferProps = __spreadProps(__spreadValues({}, transferCommon), {
   sourceOption: {
     type: Array,
     require: true,
@@ -27587,14 +28407,6 @@ const transferProps = {
     type: Boolean,
     default: () => false
   },
-  showTooltip: {
-    type: Boolean,
-    default: () => false
-  },
-  tooltipPosition: {
-    type: String,
-    default: () => "top"
-  },
   beforeTransfer: {
     type: Function
   },
@@ -27615,8 +28427,11 @@ const transferProps = {
   },
   afterTransfer: {
     type: Function
+  },
+  onDragend: {
+    type: Function
   }
-};
+});
 const headerSlot = (ctx2, name) => {
   return !ctx2.slots[`${name}-header`] ? null : () => ctx2.slots[`${name}-header`] && ctx2.slots[`${name}-header`]();
 };
@@ -27645,7 +28460,7 @@ var Transfer = defineComponent$1({
     watch(() => props.targetOption, () => {
       rightOptions = reactive(initState(props, "target"));
     });
-    watch(() => leftOptions.keyword, (nVal) => {
+    watch(() => leftOptions.keyword, () => {
       searchFilterData(leftOptions);
     });
     watch(() => leftOptions.checkedValues, (values) => {
@@ -27654,7 +28469,7 @@ var Transfer = defineComponent$1({
     }, {
       deep: true
     });
-    watch(() => rightOptions.keyword, (nVal) => {
+    watch(() => rightOptions.keyword, () => {
       searchFilterData(rightOptions);
     });
     watch(() => rightOptions.checkedValues, (values) => {
@@ -27738,6 +28553,13 @@ var Transfer = defineComponent$1({
     const isFunction2 = (type4) => {
       return props[type4] && typeof props[type4] === "function";
     };
+    const dataSort = (target, dragItem, dropItem, direction) => {
+      const startIndex = target.filterData.findIndex((item2) => item2.key === dragItem.key);
+      const endIndex = target.filterData.findIndex((item2) => item2.key === dropItem.key);
+      target.filterData.splice(endIndex, 1, dragItem);
+      target.filterData.splice(startIndex, 1, dropItem);
+      props.onDragend && props.onDragend(direction, dragItem, dropItem);
+    };
     return () => {
       return createVNode("div", {
         "class": "devui-transfer"
@@ -27754,9 +28576,11 @@ var Transfer = defineComponent$1({
         "allCount": leftOptions.data.length,
         "showTooltip": props.showTooltip,
         "tooltipPosition": props.tooltipPosition,
+        "isSourceDroppable": props.isSourceDroppable,
         "onChangeAllSource": (value) => changeAllSource(leftOptions, value),
         "onUpdateCheckeds": updateLeftCheckeds,
-        "onChangeQuery": (value) => changeQueryHandle(leftOptions, "left", value)
+        "onChangeQuery": (value) => changeQueryHandle(leftOptions, "left", value),
+        "onDragend": (dragItem, dropItem) => dataSort(leftOptions, dragItem, dropItem, "left")
       }, {
         header: headerSlot(ctx2, "left"),
         body: bodySlot(ctx2, "left")
@@ -27785,9 +28609,11 @@ var Transfer = defineComponent$1({
         "allCount": rightOptions.data.length,
         "showTooltip": props.showTooltip,
         "tooltipPosition": props.tooltipPosition,
+        "isTargetDroppable": props.isTargetDroppable,
         "onChangeAllSource": (value) => changeAllSource(rightOptions, value),
         "onUpdateCheckeds": updateRightCheckeds,
-        "onChangeQuery": (value) => changeQueryHandle(rightOptions, "right", value)
+        "onChangeQuery": (value) => changeQueryHandle(rightOptions, "right", value),
+        "onDragend": (dragItem, dropItem) => dataSort(rightOptions, dragItem, dropItem, "right")
       }, {
         header: headerSlot(ctx2, "right"),
         body: bodySlot(ctx2, "right")
@@ -27801,7 +28627,7 @@ Transfer.install = function(app) {
 var TransferInstall = {
   title: "Transfer \u7A7F\u68AD\u6846",
   category: "\u6570\u636E\u5F55\u5165",
-  status: "10%",
+  status: "40%",
   install(app) {
     app.use(Transfer);
   }
@@ -28290,13 +29116,14 @@ var Tree = defineComponent$1({
           }
           return toggle(target, item3);
         };
-        return isParent || children && children.length ? open ? createVNode(IconOpen$1, {
-          "class": "mr-xs",
+        return createVNode("div", {
+          "class": "devui-tree-node__folder",
           "onClick": handleClick
+        }, [isParent || children && children.length ? open ? createVNode(IconOpen$1, {
+          "class": "mr-xs"
         }, null) : createVNode(IconClose$1, {
-          "class": "mr-xs",
-          "onClick": handleClick
-        }, null) : createVNode(Indent, null, null);
+          "class": "mr-xs"
+        }, null) : createVNode(Indent, null, null)]);
       };
       const checkState = CHECK_CONFIG[(_a = selected.value[id]) != null ? _a : "none"];
       return createVNode("div", {
@@ -28375,6 +29202,10 @@ const treeSelectProps = {
     type: Boolean,
     default: false
   },
+  enableLabelization: {
+    type: Boolean,
+    default: false
+  },
   onToggleChange: {
     type: Function,
     default: void 0
@@ -28384,10 +29215,12 @@ const treeSelectProps = {
     default: void 0
   }
 };
+const nodeMap = new Map();
 function attributeExtension(data) {
   data.forEach((el) => {
     let level = 1;
     el.level = level;
+    nodeMap.set(el.label, el);
     const nodeQueue = [];
     nodeQueue.push(el);
     while (nodeQueue.length !== 0) {
@@ -28396,6 +29229,7 @@ function attributeExtension(data) {
         node.children.forEach((el2) => {
           el2.level = level + 1;
           el2.parent = node;
+          nodeMap.set(el2.label, el2);
           nodeQueue.push(el2);
         });
       }
@@ -28432,7 +29266,7 @@ function useToggle(props) {
   };
 }
 function useSelect(props) {
-  const inputValue = ref("");
+  const inputValue = ref([]);
   const selectedCache = new Set();
   const selectValue = (item2) => {
     if (!props.multiple) {
@@ -28444,7 +29278,7 @@ function useSelect(props) {
       useCache(item2);
       searchUp(item2);
       searchDown(item2);
-      inputValue.value = [...selectedCache].toString();
+      inputValue.value = [...selectedCache];
     }
   };
   const useCache = (item2) => {
@@ -28495,27 +29329,43 @@ function useSelect(props) {
 }
 function useClear(props, ctx2, data) {
   const isClearable = computed(() => {
-    return !props.disabled && props.allowClear && data.value.length > 0;
+    return !props.disabled && props.allowClear;
   });
-  const handleClear = (e) => {
+  const handleClearAll = (e) => {
     e.preventDefault();
     e.stopPropagation();
     if (props.multiple) {
       ctx2.emit("update:modelValue", []);
+      data.value = [];
     } else {
       ctx2.emit("update:modelValue", "");
       data.value = "";
     }
   };
+  const handleClearItem = (e, item2) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (props.multiple) {
+      data.value.splice(data.value.indexOf(item2), 1);
+      ctx2.emit("update:modelValue", data.value);
+    } else {
+      ctx2.emit("update:modelValue", []);
+      data.value = [];
+    }
+  };
   return {
     isClearable,
-    handleClear
+    handleClearAll,
+    handleClearItem
   };
 }
 var IconOpen = "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNnB4IgogIGhlaWdodD0iMTZweCIKICB2aWV3Qm94PSIwIDAgMTYgMTYiCiAgdmVyc2lvbj0iMS4xIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKICBjbGFzcz0ic3ZnLWljb24gc3ZnLWljb24tY2xvc2UiCj4KICA8ZyBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICA8cmVjdCB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9IjE1IiBoZWlnaHQ9IjE1IiByeD0iMiIgc3Ryb2tlPSIjNWU3Y2UwIj48L3JlY3Q+CiAgICA8cmVjdCB4PSI0IiB5PSI3IiB3aWR0aD0iOCIgaGVpZ2h0PSIyIiBmaWxsPSIjNWU3Y2UwIj48L3JlY3Q+CiAgPC9nPgo8L3N2Zz4=";
 var IconClose = "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNnB4IgogIGhlaWdodD0iMTZweCIKICB2aWV3Qm94PSIwIDAgMTYgMTYiCiAgdmVyc2lvbj0iMS4xIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKICBjbGFzcz0ic3ZnLWljb24iCj4KICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxyZWN0IHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSIyIiBzdHJva2U9IiMyNTJiM2EiPjwvcmVjdD4KICAgIDxwYXRoCiAgICAgIGZpbGw9IiMyNTJiM2EiCiAgICAgIGQ9Ik04Ljc1LDQgTDguNzUsNy4yNSBMMTIsNy4yNSBMMTIsOC43NSBMOC43NDksOC43NSBMOC43NSwxMiBMNy4yNSwxMiBMNy4yNDksOC43NSBMNCw4Ljc1IEw0LDcuMjUgTDcuMjUsNy4yNSBMNy4yNSw0IEw4Ljc1LDQgWiIKICAgID48L3BhdGg+CiAgPC9nPgo8L3N2Zz4K";
 var TreeSelect = defineComponent$1({
   name: "DTreeSelect",
+  directives: {
+    ClickOutside: clickoutsideDirective
+  },
   props: treeSelectProps,
   emits: ["toggleChange", "valueChange", "update:modelValue"],
   setup(props, ctx2) {
@@ -28524,8 +29374,9 @@ var TreeSelect = defineComponent$1({
       placeholder,
       disabled,
       multiple,
-      leafOnly
-    } = props;
+      leafOnly,
+      enableLabelization
+    } = toRefs(props);
     const {
       visible,
       selectToggle,
@@ -28537,22 +29388,30 @@ var TreeSelect = defineComponent$1({
     } = useSelect(props);
     const {
       isClearable,
-      handleClear
+      handleClearAll,
+      handleClearItem
     } = useClear(props, ctx2, inputValue);
     const clickNode = (item2) => {
-      if (!leafOnly) {
+      if (!leafOnly.value) {
         selectValue(item2);
-        !multiple && selectToggle(item2);
+        !multiple.value && selectToggle(item2);
       } else {
         if (!item2.children) {
           selectValue(item2);
-          !multiple && selectToggle(item2);
+          !multiple.value && selectToggle(item2);
         }
       }
     };
+    const deleteNode2 = (e, item2) => {
+      handleClearItem(e, item2);
+      selectValue(nodeMap.get(item2));
+    };
     const treeSelectCls = className("devui-tree-select", {
       "devui-tree-select-open": visible.value,
-      "devui-tree-select-disabled": disabled
+      "devui-tree-select-disabled": disabled.value
+    });
+    const treeSelectInputItem = className("devui-tree-select-value", {
+      "devui-tree-select-value-enableLabelization": enableLabelization.value
     });
     const renderNode = (item2) => createVNode("div", {
       "class": "devui-tree-select-item",
@@ -28566,7 +29425,9 @@ var TreeSelect = defineComponent$1({
     }, null) : createVNode(IconClose, {
       "class": "mr-xs",
       "onClick": (e) => treeToggle(e, item2)
-    }, null) : createVNode("span", null, ["\xA0\xA0\xA0"]), multiple ? item2.halfchecked ? createVNode(Checkbox, {
+    }, null) : createVNode("span", null, ["\xA0\xA0\xA0"]), ctx2.slots.default ? ctx2.slots.default({
+      item: item2
+    }) : multiple.value ? item2.halfchecked ? createVNode(Checkbox, {
       "label": item2.label,
       "halfchecked": item2.halfchecked
     }, null) : createVNode(Checkbox, {
@@ -28582,20 +29443,26 @@ var TreeSelect = defineComponent$1({
       });
     };
     return () => {
-      return createVNode("div", {
+      return withDirectives(createVNode("div", {
         "class": treeSelectCls
       }, [createVNode("div", {
         "class": isClearable.value ? "devui-tree-select-clearable" : "devui-tree-select-notclearable",
         "onClick": () => selectToggle()
-      }, [createVNode("input", {
-        "value": inputValue.value,
-        "type": "text",
+      }, [createVNode("div", {
         "class": "devui-tree-select-input",
-        "placeholder": placeholder,
-        "readonly": true,
-        "disabled": disabled
-      }, null), createVNode("span", {
-        "onClick": (e) => handleClear(e),
+        "placeholder": placeholder.value
+      }, [multiple.value ? inputValue.value.map((item2) => createVNode("div", {
+        "class": treeSelectInputItem
+      }, [item2, enableLabelization.value ? createVNode(resolveComponent("d-icon"), {
+        "name": "close",
+        "onClick": (e) => deleteNode2(e, item2)
+      }, null) : createVNode("span", null, [createTextVNode(",")])])) : !Array.isArray(inputValue.value) && createVNode("div", {
+        "class": treeSelectInputItem
+      }, [inputValue.value, enableLabelization.value && createVNode(resolveComponent("d-icon"), {
+        "name": "close",
+        "onClick": (e) => handleClearItem(e)
+      }, null)])]), createVNode("span", {
+        "onClick": (e) => handleClearAll(e),
         "class": "devui-tree-select-clear"
       }, [createVNode(resolveComponent("d-icon"), {
         "name": "close"
@@ -28611,8 +29478,8 @@ var TreeSelect = defineComponent$1({
           "class": "devui-tree-select-dropdown"
         }, [createVNode("ul", {
           "class": "devui-tree-select-dropdown-list"
-        }, [renderTree(attributeExtension(treeData))])]), [[vShow, visible.value]])]
-      })]);
+        }, [renderTree(attributeExtension(treeData.value))])]), [[vShow, visible.value]])]
+      })]), [[resolveDirective("click-outside"), () => visible.value = false]]);
     };
   }
 });
@@ -29410,6 +30277,7 @@ const installs = [
   AccordionInstall,
   AlertInstall,
   AnchorInstall,
+  AutoCompleteInstall,
   AvatarInstall,
   BackTopInstall,
   BadgeInstall,
@@ -29481,4 +30349,4 @@ var vueDevui = {
     installs.forEach((p) => app.use(p));
   }
 };
-export { Accordion, Alert, Anchor, Aside, Avatar, BackTop, Badge, Breadcrumb, DButton as Button, Card, Carousel, Cascader, Checkbox, Col, ColorPicker, Column, Comment, Content, Countdown, DatePicker, DraggableDirective, Drawer, DrawerService, Dropdown, DroppableDirective, EditableSelect, FixedOverlay, FlexibleOverlay, Footer, Form, FormControl, FormItem, FormLabel, FormOperation, Fullscreen, Gantt, Header, Icon, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputIcon, InputNumber, Layout, loadingDirective as Loading, loading as LoadingService, Modal, NavSprite, Pagination, Panel, Popover, Progress, QuadrantDiagram, Radio, RadioGroup, Rate, ReadTip, Result, RippleDirective, Row, DSearch as Search, Select, Skeleton, SkeletonItem, Slider, SortableDirective, Splitter, Statistic, Status, StepsGuide, StickSlider, Sticky, Switch, Table, Tabs, Tag, TagInput, Textarea, TimeAxis, TimeAxisItem, TimePicker, Toast, ToastService, DTooltip as Tooltip, Transfer, Tree, TreeSelect, Upload, vueDevui as default };
+export { Accordion, Alert, Anchor, Aside, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, DButton as Button, Card, Carousel, Cascader, Checkbox, Col, ColorPicker, Column, Comment, Content, Countdown, DatePicker, DraggableDirective, Drawer, DrawerService, Dropdown, DroppableDirective, EditableSelect, FixedOverlay, FlexibleOverlay, Footer, Form, FormControl, FormItem, FormLabel, FormOperation, Fullscreen, Gantt, Header, Icon, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputIcon, InputNumber, Layout, loadingDirective as Loading, loading as LoadingService, Modal, NavSprite, Pagination, Panel, Popover, Progress, QuadrantDiagram, Radio, RadioGroup, Rate, ReadTip, Result, RippleDirective, Row, DSearch as Search, Select, Skeleton, SkeletonItem, Slider, SortableDirective, Splitter, Statistic, Status, StepsGuide, StickSlider, Sticky, Switch, Table, Tabs, Tag, TagInput, Textarea, TimeAxis, TimeAxisItem, TimePicker, Toast, ToastService, DTooltip as Tooltip, Transfer, Tree, TreeSelect, Upload, vueDevui as default };