vue-devui 1.0.0-beta.9 → 1.0.0-pre.0

package/auto-complete/index.es.js

@@ -0,0 +1,976 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { ref, nextTick, defineComponent, createVNode, h, render, inject, withDirectives, createTextVNode, resolveDirective, vShow, watch, onUnmounted, unref, mergeProps, toRefs, provide, reactive, isVNode, Transition } from "vue";
+import { offset, autoPlacement, arrow, computePosition } from "@floating-ui/dom";
+const defaultFormatter = (item) => item ? item.label || item.toString() : "";
+const defaultValueParse = (item) => item;
+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 = (item, index2) => {
+    const arr = { item, 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((item) => {
+        let cur = formatter.value(item);
+        cur = cur.toLowerCase();
+        if (cur.startsWith(term)) {
+          arr.push(item);
+        }
+      });
+    } 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 debounce = (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 = debounce(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 = (item) => {
+    if (searchList.value.length == 0) {
+      return 0;
+    }
+    const ind = searchList.value.indexOf(item);
+    return ind == -1 ? 0 : ind;
+  };
+  const selectOptionClick = async (item) => {
+    const cur = formatter.value(item);
+    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(() => {
+      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 status = visible.value && searchList.value.length && !searchStatus.value && !showNoResultItemTemplate.value;
+    if (keyCode === "ArrowDown" && status) {
+      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" && status) {
+      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" && status) {
+      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 = {
+  message: String,
+  backdrop: Boolean,
+  view: {
+    type: Object,
+    default: () => new View()
+  },
+  zIndex: Number,
+  isFull: {
+    type: Boolean,
+    default: false
+  }
+};
+class LoadingProps {
+  constructor() {
+    __publicField(this, "target");
+    __publicField(this, "message");
+    __publicField(this, "loadingTemplateRef");
+    __publicField(this, "backdrop", true);
+    __publicField(this, "positionType", "relative");
+    __publicField(this, "view", new View());
+    __publicField(this, "zIndex");
+  }
+}
+var loading = "";
+var Loading = defineComponent({
+  name: "DLoading",
+  inheritAttrs: false,
+  props: componentProps,
+  setup(props) {
+    const style = {
+      top: props.view.top,
+      left: props.view.left,
+      zIndex: props.zIndex
+    };
+    if (!props.message) {
+      style.background = "none";
+    }
+    const isShow = ref(false);
+    const open = () => {
+      isShow.value = true;
+    };
+    const close = () => {
+      isShow.value = false;
+    };
+    return {
+      style,
+      isShow,
+      open,
+      close
+    };
+  },
+  render() {
+    var _a;
+    const {
+      isShow,
+      isFull,
+      backdrop,
+      style,
+      message,
+      $slots
+    } = this;
+    return isShow && createVNode("div", {
+      "class": ["devui-loading-contanier", isFull ? "devui-loading--full" : ""]
+    }, [((_a = $slots.default) == null ? void 0 : _a.call($slots)) || createVNode("div", {
+      "class": "devui-loading-wrapper"
+    }, [backdrop ? createVNode("div", {
+      "class": "devui-loading-mask"
+    }, null) : null, createVNode("div", {
+      "style": style,
+      "class": "devui-loading-area"
+    }, [createVNode("div", {
+      "class": "devui-busy-default-spinner"
+    }, [createVNode("div", {
+      "class": "devui-loading-bar1"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar2"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar3"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar4"
+    }, null)]), message ? createVNode("span", {
+      "class": "devui-loading-text"
+    }, [message]) : null])])]);
+  }
+});
+const COMPONENT_CONTAINER_SYMBOL = Symbol("dev_component_container");
+function createComponent(Component, props, children = null) {
+  const vnode = h(Component, __spreadValues({}, props), children);
+  const container = document.createElement("div");
+  vnode[COMPONENT_CONTAINER_SYMBOL] = container;
+  render(vnode, container);
+  return vnode.component;
+}
+function unmountComponent(ComponnetInstance) {
+  render(null, ComponnetInstance == null ? void 0 : ComponnetInstance.vnode[COMPONENT_CONTAINER_SYMBOL]);
+}
+const loadingConstructor = defineComponent(Loading);
+const cacheInstance = /* @__PURE__ */ new WeakSet();
+const isEmpty = (val) => {
+  if (!val)
+    return true;
+  if (Array.isArray(val))
+    return val.length === 0;
+  if (val instanceof Set || val instanceof Map)
+    return val.size === 0;
+  if (val instanceof Promise)
+    return false;
+  if (typeof val === "object") {
+    try {
+      return Object.keys(val).length === 0;
+    } catch (e) {
+      return false;
+    }
+  }
+  return false;
+};
+const getType = (vari) => {
+  return Object.prototype.toString.call(vari).slice(8, -1).toLowerCase();
+};
+const isPromise = (value) => {
+  const type = getType(value);
+  switch (type) {
+    case "promise":
+      return [value];
+    case "array":
+      if (value.some((val) => getType(val) !== "promise")) {
+        console.error(new TypeError("Binding values should all be of type Promise"));
+        return "error";
+      }
+      return value;
+    default:
+      return false;
+  }
+};
+const unmount = (el) => {
+  cacheInstance.delete(el);
+  el.instance.proxy.close();
+  unmountComponent(el.instance);
+};
+const toggleLoading = (el, binding) => {
+  if (binding.value) {
+    const vals = isPromise(binding.value);
+    if (vals === "error")
+      return;
+    el.instance.proxy.open();
+    el.appendChild(el.mask);
+    cacheInstance.add(el);
+    if (vals) {
+      Promise.all(vals).catch((err) => {
+        console.error(new Error("Promise handling errors"), err);
+      }).finally(() => {
+        unmount(el);
+      });
+    }
+  } else {
+    unmount(el);
+  }
+};
+const removeAttribute = (el) => {
+  el.removeAttribute("zindex");
+  el.removeAttribute("positiontype");
+  el.removeAttribute("backdrop");
+  el.removeAttribute("message");
+  el.removeAttribute("view");
+  el.removeAttribute("loadingtemplateref");
+};
+const handleProps = (el, vprops) => {
+  const props = __spreadValues(__spreadValues({}, new LoadingProps()), vprops);
+  const loadingTemplateRef = props.loadingTemplateRef;
+  const loadingInstance = createComponent(loadingConstructor, __spreadValues({}, props), loadingTemplateRef ? () => loadingTemplateRef : null);
+  el.style.position = props.positionType;
+  el.options = props;
+  el.instance = loadingInstance;
+  el.mask = loadingInstance.proxy.$el;
+};
+const loadingDirective = {
+  mounted: function(el, binding, vnode) {
+    handleProps(el, vnode.props);
+    removeAttribute(el);
+    !isEmpty(binding.value) && toggleLoading(el, binding);
+  },
+  updated: function(el, binding, vnode) {
+    if (!isEmpty(binding.value) && cacheInstance.has(el) || isEmpty(binding.value) && !cacheInstance.has(el))
+      return;
+    !cacheInstance.has(el) && handleProps(el, vnode.props);
+    removeAttribute(el);
+    toggleLoading(el, binding);
+  }
+};
+var DAutoCompleteDropdown = defineComponent({
+  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 = (item) => {
+      if (item[disabledKey]) {
+        return;
+      }
+      selectOptionClick(item);
+    };
+    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((item, index2) => {
+        return createVNode("li", {
+          "onClick": () => onSelect(item),
+          "class": ["devui-dropdown-item", selectedIndex.value == index2 && "selected", {
+            "disabled": disabledKey && item[disabledKey]
+          }, {
+            "devui-dropdown-bg": hoverIndex.value == index2
+          }],
+          "title": formatter(item),
+          "key": formatter(item)
+        }, [ctx2.slots.itemTemplate ? ctx2.slots.itemTemplate(item, index2) : formatter(item)]);
+      }), !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]]);
+    };
+  }
+});
+const inBrowser = typeof window !== "undefined";
+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);
+    }
+  }
+}
+const ctx = Symbol("@@clickoutside");
+const nodeList = /* @__PURE__ */ 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];
+  }
+};
+const flexibleOverlayProps = {
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  origin: {
+    type: Object,
+    require: true
+  },
+  position: {
+    type: Array,
+    default: ["bottom"]
+  },
+  offset: {
+    type: [Number, Object],
+    default: 8
+  },
+  align: {
+    type: String,
+    default: null
+  },
+  showArrow: {
+    type: Boolean,
+    default: false
+  },
+  isArrowCenter: {
+    type: Boolean,
+    default: true
+  }
+};
+function getScrollParent(element) {
+  const overflowRegex = /(auto|scroll|hidden)/;
+  for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
+    const style = window.getComputedStyle(parent);
+    if (overflowRegex.test(style.overflow + style.overflowX + style.overflowY)) {
+      return parent;
+    }
+  }
+  return window;
+}
+function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
+  let { x, y } = point;
+  if (!isArrowCenter) {
+    const { width, height } = originRect;
+    if (x && placement.includes("start")) {
+      x = 12;
+    }
+    if (x && placement.includes("end")) {
+      x = Math.round(width - 24);
+    }
+    if (y && placement.includes("start")) {
+      y = 10;
+    }
+    if (y && placement.includes("end")) {
+      y = height - 14;
+    }
+  }
+  return { x, y };
+}
+function useOverlay(props, emit) {
+  const overlayRef = ref();
+  const arrowRef = ref();
+  const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
+    const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
+    const staticSide = {
+      top: "bottom",
+      right: "left",
+      bottom: "top",
+      left: "right"
+    }[placement.split("-")[0]];
+    Object.assign(arrowEl.style, {
+      left: x ? `${x}px` : "",
+      top: y ? `${y}px` : "",
+      right: "",
+      bottom: "",
+      [staticSide]: "-4px"
+    });
+  };
+  const updatePosition = async () => {
+    const hostEl = props.origin;
+    const overlayEl = unref(overlayRef.value);
+    const arrowEl = unref(arrowRef.value);
+    const middleware = [
+      offset(props.offset),
+      autoPlacement({
+        alignment: props.align,
+        allowedPlacements: props.position
+      })
+    ];
+    props.showArrow && middleware.push(arrow({ element: arrowEl }));
+    const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
+      strategy: "fixed",
+      middleware
+    });
+    emit("positionChange", placement);
+    Object.assign(overlayEl.style, { top: `${y}px`, left: `${x}px` });
+    props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
+  };
+  watch(() => props.modelValue, () => {
+    const originParent = getScrollParent(props.origin);
+    if (props.modelValue && props.origin) {
+      nextTick(updatePosition);
+      originParent.addEventListener("scroll", updatePosition);
+      originParent !== window && window.addEventListener("scroll", updatePosition);
+      window.addEventListener("resize", updatePosition);
+    } else {
+      originParent.removeEventListener("scroll", updatePosition);
+      originParent !== window && window.removeEventListener("scroll", updatePosition);
+      window.removeEventListener("resize", updatePosition);
+    }
+  });
+  onUnmounted(() => {
+    const originParent = getScrollParent(props.origin);
+    originParent.removeEventListener("scroll", updatePosition);
+    originParent !== window && window.removeEventListener("scroll", updatePosition);
+    window.removeEventListener("resize", updatePosition);
+  });
+  return { arrowRef, overlayRef };
+}
+var flexibleOverlay = "";
+const FlexibleOverlay = defineComponent({
+  name: "DFlexibleOverlay",
+  inheritAttrs: false,
+  props: flexibleOverlayProps,
+  emits: ["update:modelValue", "positionChange"],
+  setup(props, {
+    slots,
+    attrs,
+    emit
+  }) {
+    const {
+      arrowRef,
+      overlayRef
+    } = useOverlay(props, emit);
+    return () => {
+      var _a;
+      return props.modelValue && createVNode("div", mergeProps({
+        "ref": overlayRef,
+        "class": "devui-flexible-overlay"
+      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
+        "ref": arrowRef,
+        "class": "devui-flexible-overlay-arrow"
+      }, null)]);
+    };
+  }
+});
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var AutoComplete = defineComponent({
+  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(_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(_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 index = {
+  title: "AutoComplete \u81EA\u52A8\u8865\u5168",
+  category: "\u6570\u636E\u5F55\u5165",
+  status: "100%",
+  install(app) {
+    app.use(AutoComplete);
+  }
+};
+export { AutoComplete, index as default };