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

package/auto-complete/index.es.js

@@ -0,0 +1,1121 @@
+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, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, reactive, toRef, isRef, toRefs, provide } from "vue";
+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 = 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 = 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$1(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const CommonOverlay = defineComponent({
+  setup(props, ctx2) {
+    return () => {
+      let _slot;
+      return createVNode(Teleport, {
+        "to": "#d-overlay-anchor"
+      }, {
+        default: () => [createVNode(Transition, {
+          "name": "devui-overlay-fade"
+        }, _isSlot$1(_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 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 body = document.body;
+    const originOverflow = body.style.overflow;
+    const originPosition = body.style.position;
+    watch([() => props.visible, () => props.backgroundBlock], ([visible, backgroundBlock]) => {
+      if (backgroundBlock) {
+        const top = body.getBoundingClientRect().y;
+        if (visible) {
+          body.style.overflowY = "scroll";
+          body.style.position = visible ? "fixed" : "";
+          body.style.top = `${top}px`;
+        } else {
+          body.style.overflowY = originOverflow;
+          body.style.position = originPosition;
+          body.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({
+  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(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(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 };