vue-devui 1.5.12-hotfix.1 → 1.5.13

package/select/index.es.js

@@ -29,10 +29,10 @@ 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 } from "vue";
+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 { onClickOutside } from "@vueuse/core";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
-import "clipboard";
 function className(classStr, classOpt) {
   let classname = classStr;
   if (typeof classOpt === "object") {
@@ -42,6 +42,25 @@ 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) {
@@ -1245,7 +1264,7 @@ var lodash = { exports: {} };
         if (typeof func != "function") {
           throw new TypeError2(FUNC_ERROR_TEXT);
         }
-        return setTimeout(function() {
+        return setTimeout2(function() {
           func.apply(undefined$1, args);
         }, wait);
       }
@@ -3054,7 +3073,7 @@ var lodash = { exports: {} };
         return object4[key];
       }
       var setData = shortOut(baseSetData);
-      var setTimeout = ctxSetTimeout || function(func, wait) {
+      var setTimeout2 = ctxSetTimeout || function(func, wait) {
         return root.setTimeout(func, wait);
       };
       var setToString = shortOut(baseSetToString);
@@ -3846,7 +3865,7 @@ var lodash = { exports: {} };
         }
         function leadingEdge(time) {
           lastInvokeTime = time;
-          timerId = setTimeout(timerExpired, wait);
+          timerId = setTimeout2(timerExpired, wait);
           return leading ? invokeFunc(time) : result2;
         }
         function remainingWait(time) {
@@ -3862,7 +3881,7 @@ var lodash = { exports: {} };
           if (shouldInvoke(time)) {
             return trailingEdge(time);
           }
-          timerId = setTimeout(timerExpired, remainingWait(time));
+          timerId = setTimeout2(timerExpired, remainingWait(time));
         }
         function trailingEdge(time) {
           timerId = undefined$1;
@@ -3893,12 +3912,12 @@ var lodash = { exports: {} };
             }
             if (maxing) {
               clearTimeout(timerId);
-              timerId = setTimeout(timerExpired, wait);
+              timerId = setTimeout2(timerExpired, wait);
               return invokeFunc(lastCallTime);
             }
           }
           if (timerId === undefined$1) {
-            timerId = setTimeout(timerExpired, wait);
+            timerId = setTimeout2(timerExpired, wait);
           }
           return result2;
         }
@@ -5523,9 +5542,18 @@ const formProps = {
   hideRequiredMark: {
     type: Boolean,
     default: false
+  },
+  styleType: {
+    type: String,
+    default: "default"
+  },
+  appendToBodyScrollStrategy: {
+    type: String,
+    default: "reposition"
   }
 };
 const FORM_TOKEN = Symbol("dForm");
+const STYLE_TOKEN = Symbol("dForm");
 function useFieldCollection() {
   const itemContexts = [];
   const addItemContext = (field) => {
@@ -5620,6 +5648,7 @@ defineComponent({
       addItemContext,
       removeItemContext
     })));
+    provide(STYLE_TOKEN, props.styleType);
     ctx.expose({
       validate,
       validateFields,
@@ -5661,7 +5690,7 @@ const formItemProps = {
     default: void 0
   },
   helpTips: {
-    type: String,
+    type: [String, Object],
     default: ""
   },
   feedbackStatus: {
@@ -5674,12 +5703,6 @@ const formItemProps = {
 };
 const FORM_ITEM_TOKEN = Symbol("dFormItem");
 const LABEL_DATA = Symbol("labelData");
-const formLabelProps = {
-  helpTips: {
-    type: String,
-    default: ""
-  }
-};
 const fixedOverlayProps = {
   modelValue: {
     type: Boolean,
@@ -5694,25 +5717,6 @@ const fixedOverlayProps = {
     default: true
   }
 };
-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 useFixedOverlay(props, ctx) {
   let lockScrollCb;
   const onClick = (event) => {
@@ -5735,6 +5739,29 @@ 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",
@@ -5745,7 +5772,7 @@ defineComponent({
     const {
       modelValue
     } = toRefs(props);
-    const ns2 = useNamespace$1("fixed-overlay");
+    const ns2 = useNamespace("fixed-overlay");
     const {
       onClick
     } = useFixedOverlay(props, ctx);
@@ -5911,7 +5938,7 @@ const FlexibleOverlay = defineComponent({
     emit,
     expose
   }) {
-    const ns2 = useNamespace$1("flexible-overlay");
+    const ns2 = useNamespace("flexible-overlay");
     const {
       clickEventBubble
     } = toRefs(props);
@@ -5940,7 +5967,7 @@ const FlexibleOverlay = defineComponent({
 });
 const POPPER_TRIGGER_TOKEN = Symbol("popper-trigger");
 const isObject = (val) => val !== null && typeof val === "object";
-const ns$1 = useNamespace$1("popper-trigger");
+const ns$1 = useNamespace("popper-trigger");
 function wrapContent(content) {
   return h("span", { class: ns$1.b() }, content);
 }
@@ -6127,7 +6154,7 @@ function usePopoverEvent(props, visible, origin) {
   });
   return { placement, handlePositionChange, onMouseenter, onMouseleave };
 }
-const ns = useNamespace$1("popover");
+const ns = useNamespace("popover");
 function SuccessIcon$1() {
   return createVNode("svg", {
     "class": [ns.e("icon"), ns.em("icon", "success")],
@@ -6229,7 +6256,7 @@ var PopoverIcon = defineComponent({
     }
   },
   setup(props) {
-    const ns2 = useNamespace$1("popover");
+    const ns2 = useNamespace("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)]);
@@ -6266,7 +6293,7 @@ var Popover = defineComponent({
     const {
       overlayStyles
     } = usePopover(props, visible, placement, origin, popoverRef);
-    const ns2 = useNamespace$1("popover");
+    const ns2 = useNamespace("popover");
     provide(POPPER_TRIGGER_TOKEN, origin);
     watch(visible, (newVal) => {
       if (newVal) {
@@ -6400,6 +6427,12 @@ function useFormLabel() {
   const formItemContext = inject(FORM_ITEM_TOKEN);
   const labelData = inject(LABEL_DATA);
   const ns2 = useNamespace$1("form");
+  const defaultTipsPopover = {
+    content: "",
+    position: ["top"],
+    trigger: "hover",
+    popType: "info"
+  };
   const labelClasses = computed(() => ({
     [`${ns2.e("label")}`]: true,
     [`${ns2.em("label", "vertical")}`]: labelData.value.layout === "vertical",
@@ -6411,17 +6444,24 @@ function useFormLabel() {
     [`${ns2.em("label", "required")}`]: formItemContext.isRequired,
     [`${ns2.em("label", "required-hide")}`]: formItemContext.isRequired && formContext.hideRequiredMark
   }));
-  return { labelClasses, labelInnerClasses };
+  const tipsPopover = computed(() => {
+    if (typeof labelData.value.helpTips === "string") {
+      return __spreadProps(__spreadValues({}, defaultTipsPopover), { content: labelData.value.helpTips });
+    } else {
+      return __spreadValues(__spreadValues({}, defaultTipsPopover), labelData.value.helpTips);
+    }
+  });
+  return { labelClasses, labelInnerClasses, tipsPopover };
 }
 var formLabel = "";
 var FormLabel = defineComponent({
   name: "DFormLabel",
-  props: formLabelProps,
-  setup(props, ctx) {
+  setup(_, ctx) {
     const ns2 = useNamespace$1("form");
     const {
       labelClasses,
-      labelInnerClasses
+      labelInnerClasses,
+      tipsPopover
     } = useFormLabel();
     return () => {
       var _a, _b;
@@ -6429,12 +6469,9 @@ var FormLabel = defineComponent({
         "class": labelClasses.value
       }, [createVNode("span", {
         "class": labelInnerClasses.value
-      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), props.helpTips && createVNode(Popover, {
-        "content": props.helpTips,
-        "position": ["top"],
-        "trigger": "hover",
-        "pop-type": "info"
-      }, {
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), tipsPopover.value.content && createVNode(Popover, mergeProps({
+        "class": ns2.e("label-tips-popover")
+      }, tipsPopover.value), {
         default: () => [createVNode(HelpTipsIcon, {
           "class": ns2.e("label-help")
         }, null), createTextVNode(",")]
@@ -6465,7 +6502,7 @@ function useFormControl(props) {
     [ns2.em("control-container", "has-feedback")]: Boolean(feedbackStatus == null ? void 0 : feedbackStatus.value),
     [ns2.em("control-container", "feedback-error")]: Boolean((feedbackStatus == null ? void 0 : feedbackStatus.value) === "error")
   }));
-  return { controlClasses, controlContainerClasses };
+  return { controlClasses, controlContainerClasses, labelData };
 }
 function useFormControlValidate() {
   const formItemContext = inject(FORM_ITEM_TOKEN);
@@ -6482,11 +6519,15 @@ var FormControl = defineComponent({
   name: "DFormControl",
   props: formControlProps,
   setup(props, ctx) {
+    const formContext = inject(FORM_TOKEN);
     const formControl2 = ref();
+    const popoverRef = ref();
     const ns2 = useNamespace$1("form");
+    const showPopoverClick = ref(true);
     const {
       controlClasses,
-      controlContainerClasses
+      controlContainerClasses,
+      labelData
     } = useFormControl(props);
     const {
       feedbackStatus,
@@ -6496,17 +6537,52 @@ var FormControl = defineComponent({
       errorMessage,
       popPosition
     } = useFormControlValidate();
+    const align = computed(() => {
+      var _a, _b;
+      if ((_a = popPosition.value) == null ? void 0 : _a.some((item) => item.includes("start"))) {
+        return "start";
+      }
+      if ((_b = popPosition.value) == null ? void 0 : _b.some((item) => item.includes("end"))) {
+        return "end";
+      }
+      return void 0;
+    });
+    const onDocumentClick = (e) => {
+      const composedPath = e.composedPath();
+      if (composedPath.includes(popoverRef.value.triggerEl)) {
+        showPopoverClick.value = true;
+      } else {
+        showPopoverClick.value = false;
+      }
+    };
+    watch(showPopover, (val) => {
+      if (val) {
+        setTimeout(() => {
+          document.addEventListener("click", onDocumentClick);
+        });
+      } else {
+        showPopoverClick.value = true;
+        document.removeEventListener("click", onDocumentClick);
+      }
+    });
+    onUnmounted(() => {
+      document.removeEventListener("click", onDocumentClick);
+    });
     return () => createVNode("div", {
       "class": controlClasses.value,
       "ref": formControl2
     }, [createVNode("div", {
       "class": controlContainerClasses.value
     }, [createVNode(Popover, {
-      "is-open": showPopover.value,
+      "ref": popoverRef,
+      "is-open": showPopover.value && showPopoverClick.value,
       "trigger": "manually",
       "content": errorMessage.value,
       "pop-type": "error",
-      "position": popPosition.value
+      "position": popPosition.value,
+      "align": align.value,
+      "scroll-element": "auto",
+      "append-to-body-scroll-strategy": formContext.appendToBodyScrollStrategy
     }, {
       default: () => {
         var _a, _b;
@@ -6518,7 +6594,7 @@ var FormControl = defineComponent({
       "class": ns2.e("control-info")
     }, [showMessage.value && createVNode("div", {
       "class": "error-message"
-    }, [errorMessage.value]), props.extraInfo && createVNode("div", {
+    }, [errorMessage.value]), labelData.value.formItemCtx.slots.extraInfo ? labelData.value.formItemCtx.slots.extraInfo() : props.extraInfo && createVNode("div", {
       "class": ns2.e("control-extra")
     }, [props.extraInfo])])]);
   }
@@ -7701,7 +7777,9 @@ defineComponent({
     const labelData = computed(() => ({
       layout: formContext.layout,
       labelSize: formContext.labelSize,
-      labelAlign: formContext.labelAlign
+      labelAlign: formContext.labelAlign,
+      helpTips: helpTips.value,
+      formItemCtx: ctx
     }));
     provide(LABEL_DATA, labelData);
     const context = reactive(__spreadProps(__spreadValues({}, otherProps), {
@@ -7717,6 +7795,7 @@ defineComponent({
     }));
     provide(FORM_ITEM_TOKEN, context);
     ctx.expose({
+      validate,
       resetField,
       clearValidate
     });
@@ -7730,9 +7809,7 @@ defineComponent({
     });
     return () => createVNode("div", {
       "class": itemClasses.value
-    }, [createVNode(FormLabel, {
-      "help-tips": helpTips.value
-    }, {
+    }, [createVNode(FormLabel, null, {
       default: () => [ctx.slots.label ? ctx.slots.label() : label == null ? void 0 : label.value]
     }), createVNode(FormControl, {
       "feedback-status": feedbackStatus == null ? void 0 : feedbackStatus.value,
@@ -7775,7 +7852,6 @@ 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) {
@@ -7785,7 +7861,14 @@ function useSelect(props, selectRef, ctx, focus, blur, isSelectFocus, t) {
     ctx.emit("toggle-change", bool);
   };
   onClickOutside(dropdownRef, () => {
-    toggleChange(false);
+    var _a;
+    if (props.multiple && isOpen.value) {
+      (_a = selectRef.value) == null ? void 0 : _a.clearMultipleSearchKey();
+      onBlur();
+    }
+    if (isOpen.value) {
+      toggleChange(false);
+    }
   }, { ignore: [selectRef] });
   const dropdownMenuMultipleNs = useNamespace$1("dropdown-menu-multiple");
   const selectCls = computed(() => {
@@ -7898,8 +7981,11 @@ 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);
@@ -7926,6 +8012,7 @@ 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);
@@ -7936,6 +8023,8 @@ 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", []);
@@ -7948,7 +8037,6 @@ function useSelect(props, selectRef, ctx, focus, blur, isSelectFocus, t) {
       handleClose();
       blur();
     }
-    filterQuery.value = "";
   };
   const tagDelete = (data) => {
     let { modelValue } = props;
@@ -7966,15 +8054,17 @@ function useSelect(props, selectRef, ctx, focus, blur, isSelectFocus, t) {
     ctx.emit("remove-tag", data.value);
     getMultipleSelected(checkedItems);
   };
-  const onFocus = (e) => {
-    ctx.emit("focus", e);
+  const onFocus = () => {
     if (!selectDisabled.value) {
       isSelectFocus.value = true;
     }
   };
-  const onBlur = (e) => {
-    ctx.emit("blur", e);
+  const onBlur = () => {
     if (!selectDisabled.value) {
+      setTimeout(() => {
+        filterQuery.value = "";
+        handlerQueryFunc("");
+      }, 150);
       isSelectFocus.value = false;
     }
   };
@@ -8007,7 +8097,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.toLocaleLowerCase().trim());
+      return label.toString().toLocaleLowerCase().includes(filterQuery.value.trim().toLocaleLowerCase());
     }).length;
     if (isLoading.value) {
       return props.loadingText || t("loadingText");
@@ -8034,7 +8124,8 @@ function useSelect(props, selectRef, ctx, focus, blur, isSelectFocus, t) {
     }
   };
   watch(() => props.modelValue, () => {
-    formItemContext == null ? void 0 : formItemContext.validate("change").catch((err) => console.warn(err));
+    formItemContext == null ? void 0 : formItemContext.validate("change").catch(() => {
+    });
     updateInjectOptionsStatus();
   }, { deep: true });
   watch(injectOptions, () => {
@@ -8049,10 +8140,17 @@ 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,
@@ -8077,7 +8175,7 @@ function useSelect(props, selectRef, ctx, focus, blur, isSelectFocus, t) {
 }
 const selectProps = {
   modelValue: {
-    type: [String, Number, Array],
+    type: [String, Number, Array, Boolean],
     default: ""
   },
   "onUpdate:modelValue": {
@@ -8092,6 +8190,10 @@ const selectProps = {
     type: String,
     default: ""
   },
+  position: {
+    type: Array,
+    default: () => ["bottom", "top"]
+  },
   overview: {
     type: String,
     default: "border"
@@ -8163,6 +8265,10 @@ const selectProps = {
   multipleLimit: {
     type: Number,
     default: 0
+  },
+  showEmptyWhenUnmatched: {
+    type: Boolean,
+    default: true
   }
 };
 const optionProps = {
@@ -8301,29 +8407,6 @@ const checkboxGroupProps = __spreadProps(__spreadValues({}, commonProps), {
   }
 });
 const checkboxGroupInjectionKey = Symbol("d-checkbox-group");
-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 useCheckbox(props, ctx) {
   const formContext = inject(FORM_TOKEN, void 0);
   const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
@@ -8482,7 +8565,7 @@ var Checkbox = defineComponent({
   props: checkboxProps,
   emits: ["change", "update:checked", "update:modelValue"],
   setup(props, ctx) {
-    const ns2 = useNamespace("checkbox");
+    const ns2 = useNamespace$1("checkbox");
     const {
       mergedChecked,
       mergedDisabled,
@@ -8583,7 +8666,7 @@ defineComponent({
   props: checkboxGroupProps,
   emits: ["change", "update:modelValue"],
   setup(props, ctx) {
-    const ns2 = useNamespace("checkbox");
+    const ns2 = useNamespace$1("checkbox");
     const {
       defaultOpt
     } = useCheckboxGroup(props, ctx);
@@ -8629,7 +8712,7 @@ defineComponent({
   props: checkboxProps,
   emits: ["change", "update:checked", "update:modelValue"],
   setup(props, ctx) {
-    const ns2 = useNamespace("checkbox-button");
+    const ns2 = useNamespace$1("checkbox-button");
     const {
       mergedChecked,
       mergedDisabled,
@@ -8692,20 +8775,23 @@ 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
+      _checked: false,
+      disabled: isDisabled.value
     };
   });
-  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
+      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"
     });
   });
   const optionSelect = () => {
@@ -8821,7 +8907,7 @@ const tagProps = {
   }
 };
 function useClass(props) {
-  const ns2 = useNamespace$1("tag");
+  const ns2 = useNamespace("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)}`;
@@ -8863,7 +8949,7 @@ var Tag = defineComponent({
     slots,
     emit
   }) {
-    const ns2 = useNamespace$1("tag");
+    const ns2 = useNamespace("tag");
     const {
       type: type4,
       color,
@@ -9090,9 +9176,13 @@ 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) || [];
   });
@@ -9110,21 +9200,37 @@ 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) || "";
+      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);
     } 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", "error")]: isValidateError.value,
+      [ns2.em("selection", "gray-style")]: styleType === "gray"
     });
   });
   const inputCls = computed(() => {
@@ -9135,12 +9241,20 @@ 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);
@@ -9150,39 +9264,67 @@ 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() {
+  setup(_, ctx) {
     const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
     const ns2 = useNamespace$1("select");
     const clearCls = computed(() => ({
@@ -9196,44 +9338,71 @@ 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
+        "class": multipleCls,
+        "onClick": onMultipleClick
       }, [!isSupportCollapseTags.value && selectedData.value.length >= 1 && selectedData.value.map((item) => createVNode(Tag, {
-        "deletable": true,
+        "deletable": !(isSelectDisable.value || item.disabled),
         "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, {
@@ -9245,39 +9414,49 @@ 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
-      }, [createVNode("input", {
+      }, [withDirectives(createVNode("input", {
         "ref": "input",
         "value": searchQuery.value,
         "type": "text",
         "class": inputCls.value,
         "placeholder": placeholder.value,
-        "readonly": isReadOnly.value,
+        "readonly": isReadOnly.value || !isSupportFilter.value,
         "disabled": isSelectDisable.value,
-        "onInput": queryFilter,
-        "onFocus": onFocus,
-        "onBlur": onBlur
-      }, null)])]) : createVNode("input", {
-        "ref": "input",
-        "value": displayInputValue.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,
         "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), createVNode("span", {
+      }, null), [[vModelText, singleSearchKey.value]])]), createVNode("span", {
         "onClick": handleClear,
         "class": clearCls.value
       }, [createVNode(AlertCloseIcon, null, null)]), createVNode("span", {
-        "class": arrowCls.value
+        "class": arrowCls.value,
+        "onClick": onArrowClick
       }, [createVNode(SelectArrowIcon, null, null)])]);
     };
   }
@@ -9305,11 +9484,38 @@ 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"],
+  emits: ["toggle-change", "value-change", "update:modelValue", "focus", "blur", "remove-tag", "clear", "load-more"],
   setup(props, ctx) {
     const app = getCurrentInstance();
     const t = createI18nTranslate("DSelect", app);
@@ -9322,7 +9528,6 @@ var Select = defineComponent({
     const {
       selectDisabled,
       selectSize,
-      originRef,
       dropdownRef,
       isOpen,
       selectCls,
@@ -9343,9 +9548,17 @@ var Select = defineComponent({
       toggleChange,
       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");
+    const dropdownCls = {
+      [ns2.e("dropdown")]: true,
+      [ns2.em("dropdown", "multiple")]: props.multiple
+    };
     const listCls = {
       [ns2.e("dropdown-list")]: true,
       [scrollbarNs.b()]: true
@@ -9357,32 +9570,29 @@ var Select = defineComponent({
       toggleChange
     });
     const isRender = ref(false);
-    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();
-      }
-    });
-    onMounted(() => {
+    onBeforeMount(() => {
       isRender.value = true;
-      updateDropdownWidth();
-      window.addEventListener("resize", updateDropdownWidth);
     });
-    onUnmounted(() => {
-      window.removeEventListener("resize", updateDropdownWidth);
+    const scrollToBottom = () => {
+      const compareHeight = dropdownContainer.value.scrollHeight - dropdownContainer.value.clientHeight;
+      const scrollTop = dropdownContainer.value.scrollTop;
+      if (scrollTop === compareHeight) {
+        ctx.emit("load-more");
+      }
+    };
+    onMounted(() => {
+      nextTick(() => {
+        dropdownContainer.value.addEventListener("scroll", scrollToBottom);
+      });
     });
     provide(SELECT_TOKEN, reactive(__spreadProps(__spreadValues({}, toRefs(props)), {
       selectDisabled,
       selectSize,
       isOpen,
+      isSelectFocus,
       selectedOptions,
       filterQuery,
+      dropdownWidth,
       valueChange,
       handleClear,
       updateInjectOptions,
@@ -9396,7 +9606,7 @@ var Select = defineComponent({
         "class": selectCls.value,
         "onClick": withModifiers(() => {
           toggleChange(!isOpen.value);
-        }, ["stop"])
+        }, [])
       }, [createVNode(SelectContent, {
         "ref": selectRef
       }, null), createVNode(Teleport, {
@@ -9410,9 +9620,9 @@ var Select = defineComponent({
             "onUpdate:modelValue": ($event) => isRender.value = $event,
             "ref": dropdownRef,
             "origin": originRef.value,
-            "align": "start",
             "offset": 4,
-            "position": position.value,
+            "place-strategy": "no-space",
+            "position": props.position,
             "style": {
               visibility: isOpen.value ? "visible" : "hidden",
               "z-index": isOpen.value ? "var(--devui-z-index-dropdown, 1052)" : -1
@@ -9423,11 +9633,15 @@ var Select = defineComponent({
               return [createVNode("div", {
                 "class": dropdownCls,
                 "style": {
-                  width: `${dropdownWidth.value}`,
+                  width: `${dropdownWidth.value}px`,
                   visibility: isOpen.value ? "visible" : "hidden"
                 }
               }, [withDirectives(createVNode("ul", {
-                "class": listCls
+                "class": listCls,
+                "style": {
+                  padding: isShowEmptyText.value ? "0" : "12px"
+                },
+                "ref": dropdownContainer
               }, [isShowCreateOption.value && createVNode(Option, {
                 "value": filterQuery.value,
                 "name": filterQuery.value,
@@ -9446,7 +9660,8 @@ var Select = defineComponent({
                 default: () => [props.multiple ? createVNode(Checkbox, {
                   "modelValue": item._checked,
                   "label": item.name,
-                  "disabled": isDisabled(item)
+                  "disabled": isDisabled(item),
+                  "class": "select-checkbox"
                 }, 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