vue-devui 1.5.13 → 1.5.15-feat.1

package/select/index.es.js

@@ -29,9 +29,9 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { defineComponent, watch, provide, reactive, toRefs, createVNode, onUnmounted, Transition, mergeProps, ref, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, Teleport, createTextVNode, onBeforeUnmount, toRef, onBeforeMount, vShow, resolveComponent, getCurrentInstance, vModelText } from "vue";
-import "clipboard";
+import { defineComponent, watch, provide, reactive, toRefs, createVNode, onUnmounted, Transition, mergeProps, ref, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, Teleport, createTextVNode, onBeforeUnmount, toRef, onBeforeMount, vShow, resolveComponent, getCurrentInstance } from "vue";
 import { onClickOutside } from "@vueuse/core";
+import "clipboard";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 function className(classStr, classOpt) {
   let classname = classStr;
@@ -42,25 +42,6 @@ function className(classStr, classOpt) {
   }
   return classname;
 }
-function lockScroll() {
-  if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
-    const scrollTop = document.documentElement.scrollTop;
-    const style = document.documentElement.getAttribute("style");
-    document.documentElement.style.position = "fixed";
-    document.documentElement.style.top = `-${scrollTop}px`;
-    document.documentElement.style.width = document.documentElement.style.width || "100%";
-    document.documentElement.style.overflowY = "scroll";
-    return () => {
-      if (style) {
-        document.documentElement.setAttribute("style", style);
-      } else {
-        document.documentElement.removeAttribute("style");
-      }
-      document.documentElement.scrollTop = scrollTop;
-    };
-  }
-  return;
-}
 function createBem$1(namespace, element, modifier) {
   let cls = namespace;
   if (element) {
@@ -5554,6 +5535,48 @@ const formProps = {
 };
 const FORM_TOKEN = Symbol("dForm");
 const STYLE_TOKEN = Symbol("dForm");
+function lockScroll() {
+  if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
+    const scrollTop = document.documentElement.scrollTop;
+    const style = document.documentElement.getAttribute("style");
+    document.documentElement.style.position = "fixed";
+    document.documentElement.style.top = `-${scrollTop}px`;
+    document.documentElement.style.width = document.documentElement.style.width || "100%";
+    document.documentElement.style.overflowY = "scroll";
+    return () => {
+      if (style) {
+        document.documentElement.setAttribute("style", style);
+      } else {
+        document.documentElement.removeAttribute("style");
+      }
+      document.documentElement.scrollTop = scrollTop;
+    };
+  }
+  return;
+}
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
 function useFieldCollection() {
   const itemContexts = [];
   const addItemContext = (field) => {
@@ -5621,7 +5644,7 @@ defineComponent({
   props: formProps,
   emits: ["validate"],
   setup(props, ctx) {
-    const ns2 = useNamespace$1("form");
+    const ns2 = useNamespace("form");
     const {
       itemContexts,
       addItemContext,
@@ -5739,29 +5762,6 @@ function useFixedOverlay(props, ctx) {
   onUnmounted(removeBodyAdditions);
   return { onClick };
 }
-function createBem(namespace, element, modifier) {
-  let cls = namespace;
-  if (element) {
-    cls += `__${element}`;
-  }
-  if (modifier) {
-    cls += `--${modifier}`;
-  }
-  return cls;
-}
-function useNamespace(block, needDot = false) {
-  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
-  const b = () => createBem(namespace);
-  const e = (element) => element ? createBem(namespace, element) : "";
-  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
-  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
-  return {
-    b,
-    e,
-    m,
-    em
-  };
-}
 var fixedOverlay = "";
 defineComponent({
   name: "DFixedOverlay",
@@ -5772,7 +5772,7 @@ defineComponent({
     const {
       modelValue
     } = toRefs(props);
-    const ns2 = useNamespace("fixed-overlay");
+    const ns2 = useNamespace$1("fixed-overlay");
     const {
       onClick
     } = useFixedOverlay(props, ctx);
@@ -5889,6 +5889,9 @@ function useOverlay(props, emit) {
     ];
     props.showArrow && middleware.push(arrow({ element: arrowEl }));
     props.shiftOffset !== void 0 && middleware.push(shift());
+    if (!overlayEl) {
+      return;
+    }
     const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
       strategy: "fixed",
       middleware
@@ -5938,7 +5941,7 @@ const FlexibleOverlay = defineComponent({
     emit,
     expose
   }) {
-    const ns2 = useNamespace("flexible-overlay");
+    const ns2 = useNamespace$1("flexible-overlay");
     const {
       clickEventBubble
     } = toRefs(props);
@@ -5967,7 +5970,7 @@ const FlexibleOverlay = defineComponent({
 });
 const POPPER_TRIGGER_TOKEN = Symbol("popper-trigger");
 const isObject = (val) => val !== null && typeof val === "object";
-const ns$1 = useNamespace("popper-trigger");
+const ns$1 = useNamespace$1("popper-trigger");
 function wrapContent(content) {
   return h("span", { class: ns$1.b() }, content);
 }
@@ -6154,7 +6157,7 @@ function usePopoverEvent(props, visible, origin) {
   });
   return { placement, handlePositionChange, onMouseenter, onMouseleave };
 }
-const ns = useNamespace("popover");
+const ns = useNamespace$1("popover");
 function SuccessIcon$1() {
   return createVNode("svg", {
     "class": [ns.e("icon"), ns.em("icon", "success")],
@@ -6256,7 +6259,7 @@ var PopoverIcon = defineComponent({
     }
   },
   setup(props) {
-    const ns2 = useNamespace("popover");
+    const ns2 = useNamespace$1("popover");
     return () => props.type && props.type !== "default" && createVNode("span", {
       "class": ns2.e("icon-wrap")
     }, [props.type === "success" && createVNode(SuccessIcon$1, null, null), props.type === "warning" && createVNode(WarningIcon, null, null), props.type === "info" && createVNode(InfoIcon, null, null), props.type === "error" && createVNode(ErrorIcon$1, null, null)]);
@@ -6293,7 +6296,7 @@ var Popover = defineComponent({
     const {
       overlayStyles
     } = usePopover(props, visible, placement, origin, popoverRef);
-    const ns2 = useNamespace("popover");
+    const ns2 = useNamespace$1("popover");
     provide(POPPER_TRIGGER_TOKEN, origin);
     watch(visible, (newVal) => {
       if (newVal) {
@@ -6426,7 +6429,7 @@ function useFormLabel() {
   const formContext = inject(FORM_TOKEN);
   const formItemContext = inject(FORM_ITEM_TOKEN);
   const labelData = inject(LABEL_DATA);
-  const ns2 = useNamespace$1("form");
+  const ns2 = useNamespace("form");
   const defaultTipsPopover = {
     content: "",
     position: ["top"],
@@ -6457,7 +6460,7 @@ var formLabel = "";
 var FormLabel = defineComponent({
   name: "DFormLabel",
   setup(_, ctx) {
-    const ns2 = useNamespace$1("form");
+    const ns2 = useNamespace("form");
     const {
       labelClasses,
       labelInnerClasses,
@@ -6490,7 +6493,7 @@ const formControlProps = {
 };
 function useFormControl(props) {
   const labelData = inject(LABEL_DATA);
-  const ns2 = useNamespace$1("form");
+  const ns2 = useNamespace("form");
   const { feedbackStatus } = toRefs(props);
   const controlClasses = computed(() => ({
     [ns2.e("control")]: true,
@@ -6522,7 +6525,7 @@ var FormControl = defineComponent({
     const formContext = inject(FORM_TOKEN);
     const formControl2 = ref();
     const popoverRef = ref();
-    const ns2 = useNamespace$1("form");
+    const ns2 = useNamespace("form");
     const showPopoverClick = ref(true);
     const {
       controlClasses,
@@ -7613,7 +7616,7 @@ function getFieldValue(obj, path) {
 }
 function useFormItem(messageType, _rules, validateState) {
   const formContext = inject(FORM_TOKEN);
-  const ns2 = useNamespace$1("form");
+  const ns2 = useNamespace("form");
   const itemClasses = computed(() => ({
     [`${ns2.em("item", "horizontal")}`]: formContext.layout === "horizontal",
     [`${ns2.em("item", "vertical")}`]: formContext.layout === "vertical",
@@ -7852,6 +7855,7 @@ function useSelect(props, selectRef, ctx, focus, blur, isSelectFocus, t) {
   const selectDisabled = computed(() => (formContext == null ? void 0 : formContext.disabled) || props.disabled);
   const selectSize = computed(() => props.size || (formContext == null ? void 0 : formContext.size) || "md");
   const isObjectOption = ref(false);
+  const originRef = ref();
   const isOpen = ref(false);
   const toggleChange = (bool) => {
     if (selectDisabled.value) {
@@ -7861,14 +7865,7 @@ function useSelect(props, selectRef, ctx, focus, blur, isSelectFocus, t) {
     ctx.emit("toggle-change", bool);
   };
   onClickOutside(dropdownRef, () => {
-    var _a;
-    if (props.multiple && isOpen.value) {
-      (_a = selectRef.value) == null ? void 0 : _a.clearMultipleSearchKey();
-      onBlur();
-    }
-    if (isOpen.value) {
-      toggleChange(false);
-    }
+    toggleChange(false);
   }, { ignore: [selectRef] });
   const dropdownMenuMultipleNs = useNamespace$1("dropdown-menu-multiple");
   const selectCls = computed(() => {
@@ -7981,11 +7978,8 @@ function useSelect(props, selectRef, ctx, focus, blur, isSelectFocus, t) {
     }
   };
   const valueChange = (item) => {
-    var _a;
     const { multiple } = props;
     let { modelValue } = props;
-    filterQuery.value = "";
-    handlerQueryFunc("");
     if (multiple) {
       const checkedItems = Array.isArray(modelValue) ? modelValue.slice() : [];
       const index2 = checkedItems.indexOf(item.value);
@@ -8012,7 +8006,6 @@ function useSelect(props, selectRef, ctx, focus, blur, isSelectFocus, t) {
       }
       getMultipleSelected(checkedItems);
     } else {
-      (_a = selectRef.value) == null ? void 0 : _a.clearSingleSearchKey();
       ctx.emit("update:modelValue", item.value);
       getSingleSelected(item);
       toggleChange(false);
@@ -8023,8 +8016,6 @@ function useSelect(props, selectRef, ctx, focus, blur, isSelectFocus, t) {
     ctx.emit("toggle-change", false);
   };
   const handleClear = () => {
-    filterQuery.value = "";
-    handlerQueryFunc("");
     if (props.multiple) {
       ctx.emit("update:modelValue", []);
       ctx.emit("value-change", []);
@@ -8037,6 +8028,7 @@ function useSelect(props, selectRef, ctx, focus, blur, isSelectFocus, t) {
       handleClose();
       blur();
     }
+    filterQuery.value = "";
   };
   const tagDelete = (data) => {
     let { modelValue } = props;
@@ -8054,22 +8046,21 @@ function useSelect(props, selectRef, ctx, focus, blur, isSelectFocus, t) {
     ctx.emit("remove-tag", data.value);
     getMultipleSelected(checkedItems);
   };
-  const onFocus = () => {
+  const onFocus = (e) => {
+    ctx.emit("focus", e);
     if (!selectDisabled.value) {
       isSelectFocus.value = true;
     }
   };
-  const onBlur = () => {
+  const onBlur = (e) => {
+    ctx.emit("blur", e);
     if (!selectDisabled.value) {
-      setTimeout(() => {
-        filterQuery.value = "";
-        handlerQueryFunc("");
-      }, 150);
       isSelectFocus.value = false;
     }
   };
   const queryChange = (query) => {
     filterQuery.value = query;
+    ctx.emit("input-change", query);
   };
   const isLoading = computed(() => typeof props.loading === "boolean" && props.loading);
   const debounceTime = computed(() => props.remote ? 300 : 0);
@@ -8097,7 +8088,7 @@ function useSelect(props, selectRef, ctx, focus, blur, isSelectFocus, t) {
   const emptyText = computed(() => {
     const visibleOptionsCount = injectOptionsArray.value.filter((item) => {
       const label = item.name || item.value;
-      return label.toString().toLocaleLowerCase().includes(filterQuery.value.trim().toLocaleLowerCase());
+      return label.toString().toLocaleLowerCase().includes(filterQuery.value.toLocaleLowerCase().trim());
     }).length;
     if (isLoading.value) {
       return props.loadingText || t("loadingText");
@@ -8124,8 +8115,7 @@ function useSelect(props, selectRef, ctx, focus, blur, isSelectFocus, t) {
     }
   };
   watch(() => props.modelValue, () => {
-    formItemContext == null ? void 0 : formItemContext.validate("change").catch(() => {
-    });
+    formItemContext == null ? void 0 : formItemContext.validate("change").catch((err) => console.warn(err));
     updateInjectOptionsStatus();
   }, { deep: true });
   watch(injectOptions, () => {
@@ -8140,17 +8130,10 @@ function useSelect(props, selectRef, ctx, focus, blur, isSelectFocus, t) {
       (_a = dropdownRef.value) == null ? void 0 : _a.updatePosition();
     }
   }, { flush: "post" });
-  watch(isSelectFocus, (val) => {
-    if (val) {
-      ctx.emit("focus");
-    } else {
-      ctx.emit("blur");
-    }
-  });
-  onMounted(updateInjectOptionsStatus);
   return {
     selectDisabled,
     selectSize,
+    originRef,
     dropdownRef,
     isOpen,
     selectCls,
@@ -8175,7 +8158,7 @@ function useSelect(props, selectRef, ctx, focus, blur, isSelectFocus, t) {
 }
 const selectProps = {
   modelValue: {
-    type: [String, Number, Array, Boolean],
+    type: [String, Number, Array],
     default: ""
   },
   "onUpdate:modelValue": {
@@ -8190,10 +8173,6 @@ const selectProps = {
     type: String,
     default: ""
   },
-  position: {
-    type: Array,
-    default: () => ["bottom", "top"]
-  },
   overview: {
     type: String,
     default: "border"
@@ -8265,10 +8244,6 @@ const selectProps = {
   multipleLimit: {
     type: Number,
     default: 0
-  },
-  showEmptyWhenUnmatched: {
-    type: Boolean,
-    default: true
   }
 };
 const optionProps = {
@@ -8565,7 +8540,7 @@ var Checkbox = defineComponent({
   props: checkboxProps,
   emits: ["change", "update:checked", "update:modelValue"],
   setup(props, ctx) {
-    const ns2 = useNamespace$1("checkbox");
+    const ns2 = useNamespace("checkbox");
     const {
       mergedChecked,
       mergedDisabled,
@@ -8666,7 +8641,7 @@ defineComponent({
   props: checkboxGroupProps,
   emits: ["change", "update:modelValue"],
   setup(props, ctx) {
-    const ns2 = useNamespace$1("checkbox");
+    const ns2 = useNamespace("checkbox");
     const {
       defaultOpt
     } = useCheckboxGroup(props, ctx);
@@ -8712,7 +8687,7 @@ defineComponent({
   props: checkboxProps,
   emits: ["change", "update:checked", "update:modelValue"],
   setup(props, ctx) {
-    const ns2 = useNamespace$1("checkbox-button");
+    const ns2 = useNamespace("checkbox-button");
     const {
       mergedChecked,
       mergedDisabled,
@@ -8775,23 +8750,20 @@ function useOption(props) {
       return select2.modelValue === props.value;
     }
   });
-  const isDisabled = computed(() => props.disabled || ((optionGroup == null ? void 0 : optionGroup.disabled) ? true : false));
   const optionItem = computed(() => {
     return {
       name: props.name || props.value + "" || "",
       value: props.value,
       create: props.create,
-      _checked: false,
-      disabled: isDisabled.value
+      _checked: false
     };
   });
+  const isDisabled = computed(() => props.disabled || ((optionGroup == null ? void 0 : optionGroup.disabled) ? true : false));
   const isObjectOption = ref(!!props.name);
   const selectOptionCls = computed(() => {
     return className(ns2.e("item"), {
       active: isOptionSelected.value,
-      disabled: isDisabled.value,
-      [ns2.em("item", "sm")]: (select2 == null ? void 0 : select2.selectSize) === "sm",
-      [ns2.em("item", "lg")]: (select2 == null ? void 0 : select2.selectSize) === "lg"
+      disabled: isDisabled.value
     });
   });
   const optionSelect = () => {
@@ -8907,7 +8879,7 @@ const tagProps = {
   }
 };
 function useClass(props) {
-  const ns2 = useNamespace("tag");
+  const ns2 = useNamespace$1("tag");
   return computed(() => {
     const { type: type4, color, deletable } = props;
     return `${ns2.e("item")} ${ns2.m(type4 || (color ? "colorful" : "") || "default")} ${deletable ? ns2.m("deletable") : ""} ${ns2.m(props.size)}`;
@@ -8949,7 +8921,7 @@ var Tag = defineComponent({
     slots,
     emit
   }) {
-    const ns2 = useNamespace("tag");
+    const ns2 = useNamespace$1("tag");
     const {
       type: type4,
       color,
@@ -9176,13 +9148,9 @@ function useSelectContent() {
   const ns2 = useNamespace$1("select");
   const select2 = inject(SELECT_TOKEN);
   const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
-  const styleType = inject(STYLE_TOKEN, void 0);
   const app = getCurrentInstance();
   const t = createI18nTranslate("DSelect", app);
   const searchQuery = ref("");
-  const singleSearchKey = ref("");
-  const singleInputRef = ref();
-  const singlePlaceholderWidth = computed(() => (select2 == null ? void 0 : select2.dropdownWidth) ? `${(select2 == null ? void 0 : select2.dropdownWidth) - 40}px` : "auto");
   const selectedData = computed(() => {
     return (select2 == null ? void 0 : select2.selectedOptions) || [];
   });
@@ -9200,37 +9168,21 @@ function useSelectContent() {
   const displayInputValue = computed(() => {
     var _a;
     if (select2 == null ? void 0 : select2.selectedOptions) {
-      return select2.selectedOptions.length > 1 ? select2.selectedOptions.map((item) => (item == null ? void 0 : item.name) || (item == null ? void 0 : item.value) || "").join(",") : ((_a = select2.selectedOptions[0]) == null ? void 0 : _a.name) || (select2.showEmptyWhenUnmatched ? "" : select2.modelValue);
+      return select2.selectedOptions.length > 1 ? select2.selectedOptions.map((item) => (item == null ? void 0 : item.name) || (item == null ? void 0 : item.value) || "").join(",") : ((_a = select2.selectedOptions[0]) == null ? void 0 : _a.name) || "";
     } else {
       return "";
     }
   });
-  const isPlaceholderDark = computed(() => {
-    if (!singleSearchKey.value) {
-      if (isSelectDisable.value) {
-        return false;
-      }
-      if (!displayInputValue.value) {
-        return true;
-      } else {
-        return select2 == null ? void 0 : select2.isSelectFocus;
-      }
-    } else {
-      return false;
-    }
-  });
   const mergeClearable = computed(() => {
     return !isSelectDisable.value && !!(select2 == null ? void 0 : select2.allowClear) && (displayInputValue.value ? true : false);
   });
   const isDisabledTooltip = computed(() => {
     return !isSupportTagsTooltip.value || !!(select2 == null ? void 0 : select2.isOpen);
   });
-  const isSupportFilter = computed(() => lodash.exports.isFunction(select2 == null ? void 0 : select2.filter) || typeof (select2 == null ? void 0 : select2.filter) === "boolean" && (select2 == null ? void 0 : select2.filter));
   const selectionCls = computed(() => {
     return className(ns2.e("selection"), {
       [ns2.e("clearable")]: mergeClearable.value,
-      [ns2.em("selection", "error")]: isValidateError.value,
-      [ns2.em("selection", "gray-style")]: styleType === "gray"
+      [ns2.em("selection", "error")]: isValidateError.value
     });
   });
   const inputCls = computed(() => {
@@ -9241,20 +9193,12 @@ function useSelectContent() {
   });
   const tagSize = computed(() => (select2 == null ? void 0 : select2.selectSize) || "sm");
   const placeholder = computed(() => displayInputValue.value ? "" : (select2 == null ? void 0 : select2.placeholder) || t("placeholder"));
-  const singlePlaceholder = computed(() => (select2 == null ? void 0 : select2.placeholder) || t("placeholder"));
   const isMultiple = computed(() => !!(select2 == null ? void 0 : select2.multiple));
   const handleClear = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    searchQuery.value = "";
-    singleSearchKey.value = "";
     select2 == null ? void 0 : select2.handleClear();
   };
-  const onSingleInputWrapClick = () => {
-    if (!(select2 == null ? void 0 : select2.selectDisabled)) {
-      singleInputRef.value.focus();
-    }
-  };
   const tagDelete = (data) => {
     if (data && (data.value || data.value === 0)) {
       select2 == null ? void 0 : select2.tagDelete(data);
@@ -9264,67 +9208,39 @@ function useSelectContent() {
     select2 == null ? void 0 : select2.onFocus(e);
   };
   const onBlur = (e) => {
-    singleSearchKey.value = "";
     select2 == null ? void 0 : select2.onBlur(e);
   };
-  const onMultipleClick = () => {
-    if (select2 == null ? void 0 : select2.selectDisabled) {
-      return;
-    }
-    if (select2 == null ? void 0 : select2.isOpen) {
-      searchQuery.value = "";
-      select2 == null ? void 0 : select2.onBlur();
-    } else {
-      select2 == null ? void 0 : select2.onFocus();
-    }
-  };
-  const onArrowClick = () => {
-    if (isMultiple.value) {
-      onMultipleClick();
-    }
-  };
   const queryFilter = (e) => {
     e.preventDefault();
     e.stopPropagation();
     const query = e.target.value;
-    singleSearchKey.value = query;
-    searchQuery.value = query;
     if (!isReadOnly.value && (select2 == null ? void 0 : select2.debounceQueryFilter)) {
       select2 == null ? void 0 : select2.debounceQueryFilter(query);
     }
   };
   return {
-    singleInputRef,
     searchQuery,
-    singleSearchKey,
     selectedData,
     isSelectDisable,
     isSupportCollapseTags,
     isDisabledTooltip,
-    isSupportFilter,
     isReadOnly,
     selectionCls,
     inputCls,
     tagSize,
     placeholder,
-    singlePlaceholder,
-    singlePlaceholderWidth,
     isMultiple,
     displayInputValue,
-    isPlaceholderDark,
-    onSingleInputWrapClick,
     handleClear,
     tagDelete,
     onFocus,
     onBlur,
-    onMultipleClick,
-    onArrowClick,
     queryFilter
   };
 }
 var SelectContent = defineComponent({
   name: "SelectContent",
-  setup(_, ctx) {
+  setup() {
     const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
     const ns2 = useNamespace$1("select");
     const clearCls = computed(() => ({
@@ -9338,71 +9254,44 @@ var SelectContent = defineComponent({
     const multipleCls = ns2.e("multiple");
     const multipleInputCls = ns2.em("multiple", "input");
     const {
-      singleInputRef,
       searchQuery,
-      singleSearchKey,
       selectedData,
       isSelectDisable,
       isSupportCollapseTags,
       isDisabledTooltip,
       isReadOnly,
-      isSupportFilter,
       selectionCls,
       inputCls,
       tagSize,
       placeholder,
-      singlePlaceholder,
-      singlePlaceholderWidth,
       isMultiple,
-      isPlaceholderDark,
       displayInputValue,
-      onSingleInputWrapClick,
-      onMultipleClick,
-      onArrowClick,
       handleClear,
       tagDelete,
       onFocus,
       onBlur,
       queryFilter
     } = useSelectContent();
-    const clearSingleSearchKey = () => {
-      singleSearchKey.value = "";
-    };
-    const clearMultipleSearchKey = () => {
-      searchQuery.value = "";
-    };
-    ctx.expose({
-      clearSingleSearchKey,
-      clearMultipleSearchKey
-    });
     return () => {
       return createVNode("div", {
         "class": selectionCls.value
       }, [isMultiple.value ? createVNode("div", {
-        "class": multipleCls,
-        "onClick": onMultipleClick
+        "class": multipleCls
       }, [!isSupportCollapseTags.value && selectedData.value.length >= 1 && selectedData.value.map((item) => createVNode(Tag, {
-        "deletable": !(isSelectDisable.value || item.disabled),
+        "deletable": true,
         "onTagDelete": withModifiers(() => tagDelete(item), ["prevent", "stop"]),
         "key": item.value,
-        "maxWidth": "78%",
-        "class": ["multiple-tag", {
-          disabled: isSelectDisable.value || item.disabled
-        }],
         "size": tagSize.value
       }, {
         default: () => [item.name]
       })), isSupportCollapseTags.value && selectedData.value.length >= 1 && createVNode(Tag, {
         "deletable": true,
-        "maxWidth": "75%",
-        "class": "multiple-tag",
         "onTagDelete": withModifiers(() => tagDelete(selectedData.value[0]), ["prevent", "stop"]),
         "size": tagSize.value
       }, {
         default: () => [selectedData.value[0].name]
       }), isSupportCollapseTags.value && selectedData.value.length > 1 && createVNode(Popover, {
         "trigger": "hover",
-        "auto-update-position": true,
         "disabled": isDisabledTooltip.value
       }, {
         default: () => createVNode(Tag, {
@@ -9414,49 +9303,39 @@ var SelectContent = defineComponent({
           "deletable": true,
           "onTagDelete": withModifiers(() => tagDelete(item), ["prevent", "stop"]),
           "key": item.value,
-          "class": "popover-tag",
           "size": tagSize.value
         }, {
           default: () => [item.name]
         }))])
       }), createVNode("div", {
         "class": multipleInputCls
-      }, [withDirectives(createVNode("input", {
+      }, [createVNode("input", {
         "ref": "input",
         "value": searchQuery.value,
         "type": "text",
         "class": inputCls.value,
         "placeholder": placeholder.value,
-        "readonly": isReadOnly.value || !isSupportFilter.value,
+        "readonly": isReadOnly.value,
         "disabled": isSelectDisable.value,
-        "onInput": queryFilter
-      }, null), [[vShow, !selectedData.value.length || isSupportFilter.value]])])]) : createVNode("div", {
-        "class": "single-inner-input",
-        "onClick": onSingleInputWrapClick
-      }, [!singleSearchKey.value && createVNode("span", {
-        "class": ["input-placeholder", {
-          "placeholder-dark": isPlaceholderDark.value
-        }],
-        "style": {
-          width: singlePlaceholderWidth.value
-        },
-        "title": displayInputValue.value || singlePlaceholder.value
-      }, [displayInputValue.value || singlePlaceholder.value]), withDirectives(createVNode("input", {
-        "ref": singleInputRef,
+        "onInput": queryFilter,
+        "onFocus": onFocus,
+        "onBlur": onBlur
+      }, null)])]) : createVNode("input", {
+        "ref": "input",
+        "value": displayInputValue.value,
         "type": "text",
-        "onUpdate:modelValue": ($event) => singleSearchKey.value = $event,
         "class": inputCls.value,
+        "placeholder": placeholder.value,
         "readonly": isReadOnly.value,
         "disabled": isSelectDisable.value,
         "onFocus": onFocus,
         "onBlur": onBlur,
         "onInput": queryFilter
-      }, null), [[vModelText, singleSearchKey.value]])]), createVNode("span", {
+      }, null), createVNode("span", {
         "onClick": handleClear,
         "class": clearCls.value
       }, [createVNode(AlertCloseIcon, null, null)]), createVNode("span", {
-        "class": arrowCls.value,
-        "onClick": onArrowClick
+        "class": arrowCls.value
       }, [createVNode(SelectArrowIcon, null, null)])]);
     };
   }
@@ -9484,38 +9363,11 @@ function useSelectFunction(props, selectRef) {
   };
   return { isSelectFocus, focus, blur };
 }
-function useSelectMenuSize(selectRef, dropdownRef, isOpen) {
-  const originRef = ref();
-  const dropdownWidth = ref(0);
-  let observer;
-  const updateDropdownWidth = () => {
-    var _a;
-    dropdownWidth.value = ((_a = originRef.value) == null ? void 0 : _a.getBoundingClientRect().width) || 0;
-    if (isOpen.value) {
-      dropdownRef.value.updatePosition();
-    }
-  };
-  const watchInputSize = () => {
-    if (window) {
-      observer = new window.ResizeObserver(updateDropdownWidth);
-      observer.observe(originRef.value);
-    }
-  };
-  onMounted(() => {
-    originRef.value = selectRef.value.$el;
-    watchInputSize();
-    updateDropdownWidth();
-  });
-  onBeforeUnmount(() => {
-    observer == null ? void 0 : observer.unobserve(originRef.value);
-  });
-  return { originRef, dropdownWidth };
-}
 var select = "";
 var Select = defineComponent({
   name: "DSelect",
   props: selectProps,
-  emits: ["toggle-change", "value-change", "update:modelValue", "focus", "blur", "remove-tag", "clear", "load-more"],
+  emits: ["toggle-change", "value-change", "update:modelValue", "focus", "blur", "remove-tag", "clear", "input-change"],
   setup(props, ctx) {
     const app = getCurrentInstance();
     const t = createI18nTranslate("DSelect", app);
@@ -9528,6 +9380,7 @@ var Select = defineComponent({
     const {
       selectDisabled,
       selectSize,
+      originRef,
       dropdownRef,
       isOpen,
       selectCls,
@@ -9549,16 +9402,9 @@ var Select = defineComponent({
       isShowCreateOption
     } = useSelect(props, selectRef, ctx, focus, blur, isSelectFocus, t);
     const dropdownContainer = ref();
-    const {
-      originRef,
-      dropdownWidth
-    } = useSelectMenuSize(selectRef, dropdownRef, isOpen);
     const scrollbarNs = useNamespace$1("scrollbar");
     const ns2 = useNamespace$1("select");
-    const dropdownCls = {
-      [ns2.e("dropdown")]: true,
-      [ns2.em("dropdown", "multiple")]: props.multiple
-    };
+    const dropdownCls = ns2.e("dropdown");
     const listCls = {
       [ns2.e("dropdown-list")]: true,
       [scrollbarNs.b()]: true
@@ -9570,8 +9416,17 @@ var Select = defineComponent({
       toggleChange
     });
     const isRender = ref(false);
-    onBeforeMount(() => {
-      isRender.value = true;
+    const position = ref(["bottom-start", "top-start"]);
+    const dropdownWidth = ref("0");
+    const updateDropdownWidth = () => {
+      var _a;
+      dropdownWidth.value = ((_a = originRef == null ? void 0 : originRef.value) == null ? void 0 : _a.clientWidth) ? originRef.value.clientWidth + "px" : "100%";
+    };
+    watch(selectRef, (val) => {
+      if (val) {
+        originRef.value = val.$el;
+        updateDropdownWidth();
+      }
     });
     const scrollToBottom = () => {
       const compareHeight = dropdownContainer.value.scrollHeight - dropdownContainer.value.clientHeight;
@@ -9581,18 +9436,22 @@ var Select = defineComponent({
       }
     };
     onMounted(() => {
+      isRender.value = true;
+      updateDropdownWidth();
+      window.addEventListener("resize", updateDropdownWidth);
       nextTick(() => {
         dropdownContainer.value.addEventListener("scroll", scrollToBottom);
       });
     });
+    onUnmounted(() => {
+      window.removeEventListener("resize", updateDropdownWidth);
+    });
     provide(SELECT_TOKEN, reactive(__spreadProps(__spreadValues({}, toRefs(props)), {
       selectDisabled,
       selectSize,
       isOpen,
-      isSelectFocus,
       selectedOptions,
       filterQuery,
-      dropdownWidth,
       valueChange,
       handleClear,
       updateInjectOptions,
@@ -9606,7 +9465,7 @@ var Select = defineComponent({
         "class": selectCls.value,
         "onClick": withModifiers(() => {
           toggleChange(!isOpen.value);
-        }, [])
+        }, ["stop"])
       }, [createVNode(SelectContent, {
         "ref": selectRef
       }, null), createVNode(Teleport, {
@@ -9620,9 +9479,9 @@ var Select = defineComponent({
             "onUpdate:modelValue": ($event) => isRender.value = $event,
             "ref": dropdownRef,
             "origin": originRef.value,
+            "align": "start",
             "offset": 4,
-            "place-strategy": "no-space",
-            "position": props.position,
+            "position": position.value,
             "style": {
               visibility: isOpen.value ? "visible" : "hidden",
               "z-index": isOpen.value ? "var(--devui-z-index-dropdown, 1052)" : -1
@@ -9633,14 +9492,11 @@ var Select = defineComponent({
               return [createVNode("div", {
                 "class": dropdownCls,
                 "style": {
-                  width: `${dropdownWidth.value}px`,
+                  width: `${dropdownWidth.value}`,
                   visibility: isOpen.value ? "visible" : "hidden"
                 }
               }, [withDirectives(createVNode("ul", {
                 "class": listCls,
-                "style": {
-                  padding: isShowEmptyText.value ? "0" : "12px"
-                },
                 "ref": dropdownContainer
               }, [isShowCreateOption.value && createVNode(Option, {
                 "value": filterQuery.value,
@@ -9660,8 +9516,7 @@ var Select = defineComponent({
                 default: () => [props.multiple ? createVNode(Checkbox, {
                   "modelValue": item._checked,
                   "label": item.name,
-                  "disabled": isDisabled(item),
-                  "class": "select-checkbox"
+                  "disabled": isDisabled(item)
                 }, null) : item.name || item.value]
               }))]), [[vShow, !isLoading.value]]), isShowEmptyText.value && createVNode("div", null, [((_c = ctx.slots) == null ? void 0 : _c.empty) && ctx.slots.empty(), !((_d = ctx.slots) == null ? void 0 : _d.empty) && createVNode("p", {
                 "class": dropdownEmptyCls