vue-devui 1.5.12 → 1.5.13

package/vue-devui.es.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { createVNode, getCurrentInstance, defineComponent, toRefs, inject, computed, Fragment, mergeProps, resolveComponent, isVNode, ref, reactive, createTextVNode, provide, onMounted, watch, Transition, withDirectives, vShow, nextTick, onUnmounted, unref, withModifiers, Comment as Comment$1, Text, h, cloneVNode, Teleport, onBeforeUnmount, render as render$1, resolveDirective, resolveDynamicComponent, toRef, shallowRef, onBeforeMount, onUpdated, readonly, toRaw, watchEffect, renderSlot, useSlots, createApp, shallowReactive, effect, TransitionGroup } from "vue";
+import { createVNode, getCurrentInstance, defineComponent, toRefs, inject, computed, Fragment, mergeProps, resolveComponent, isVNode, ref, reactive, createTextVNode, provide, onMounted, watch, Transition, withDirectives, vShow, nextTick, onUnmounted, unref, withModifiers, Comment as Comment$1, Text, h, cloneVNode, Teleport, onBeforeUnmount, render as render$1, resolveDirective, resolveDynamicComponent, toRef, shallowRef, onBeforeMount, onUpdated, readonly, toRaw, watchEffect, renderSlot, useSlots, createApp, shallowReactive, vModelText, effect, TransitionGroup } from "vue";
 import { useRoute } from "vue-router";
 import Clipboard from "clipboard";
 import { offset, autoPlacement, arrow, shift, computePosition, flip } from "@floating-ui/dom";
@@ -2168,9 +2168,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) => {
@@ -7650,7 +7659,7 @@ var Form = defineComponent({
   props: formProps,
   emits: ["validate"],
   setup(props, ctx2) {
-    const ns2 = useNamespace$1("form");
+    const ns2 = useNamespace("form");
     const {
       itemContexts,
       addItemContext,
@@ -7677,6 +7686,7 @@ var Form = defineComponent({
       addItemContext,
       removeItemContext
     })));
+    provide(STYLE_TOKEN, props.styleType);
     ctx2.expose({
       validate,
       validateFields,
@@ -7718,7 +7728,7 @@ const formItemProps = {
     default: void 0
   },
   helpTips: {
-    type: String,
+    type: [String, Object],
     default: ""
   },
   feedbackStatus: {
@@ -7731,12 +7741,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,
@@ -8456,7 +8460,13 @@ 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"],
+    trigger: "hover",
+    popType: "info"
+  };
   const labelClasses = computed(() => ({
     [`${ns2.e("label")}`]: true,
     [`${ns2.em("label", "vertical")}`]: labelData.value.layout === "vertical",
@@ -8468,17 +8478,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, ctx2) {
-    const ns2 = useNamespace$1("form");
+  setup(_, ctx2) {
+    const ns2 = useNamespace("form");
     const {
       labelClasses,
-      labelInnerClasses
+      labelInnerClasses,
+      tipsPopover
     } = useFormLabel();
     return () => {
       var _a, _b;
@@ -8486,12 +8503,9 @@ var FormLabel = defineComponent({
         "class": labelClasses.value
       }, [createVNode("span", {
         "class": labelInnerClasses.value
-      }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)]), props.helpTips && createVNode(Popover, {
-        "content": props.helpTips,
-        "position": ["top"],
-        "trigger": "hover",
-        "pop-type": "info"
-      }, {
+      }, [(_b = (_a = ctx2.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(",")]
@@ -8518,7 +8532,7 @@ var PopoverInstall = {
 };
 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,
@@ -8530,7 +8544,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);
@@ -8547,11 +8561,15 @@ var FormControl = defineComponent({
   name: "DFormControl",
   props: formControlProps,
   setup(props, ctx2) {
+    const formContext = inject(FORM_TOKEN);
     const formControl2 = ref();
-    const ns2 = useNamespace$1("form");
+    const popoverRef = ref();
+    const ns2 = useNamespace("form");
+    const showPopoverClick = ref(true);
     const {
       controlClasses,
-      controlContainerClasses
+      controlContainerClasses,
+      labelData
     } = useFormControl(props);
     const {
       feedbackStatus,
@@ -8561,17 +8579,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;
@@ -8583,7 +8636,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])])]);
   }
@@ -9602,7 +9655,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",
@@ -9766,7 +9819,9 @@ var FormItem = defineComponent({
     const labelData = computed(() => ({
       layout: formContext.layout,
       labelSize: formContext.labelSize,
-      labelAlign: formContext.labelAlign
+      labelAlign: formContext.labelAlign,
+      helpTips: helpTips.value,
+      formItemCtx: ctx2
     }));
     provide(LABEL_DATA, labelData);
     const context = reactive(__spreadProps(__spreadValues({}, otherProps), {
@@ -9782,6 +9837,7 @@ var FormItem = defineComponent({
     }));
     provide(FORM_ITEM_TOKEN, context);
     ctx2.expose({
+      validate,
       resetField,
       clearValidate
     });
@@ -9795,9 +9851,7 @@ var FormItem = defineComponent({
     });
     return () => createVNode("div", {
       "class": itemClasses.value
-    }, [createVNode(FormLabel, {
-      "help-tips": helpTips.value
-    }, {
+    }, [createVNode(FormLabel, null, {
       default: () => [ctx2.slots.label ? ctx2.slots.label() : label == null ? void 0 : label.value]
     }), createVNode(FormControl, {
       "feedback-status": feedbackStatus == null ? void 0 : feedbackStatus.value,
@@ -10617,6 +10671,20 @@ var AutoCompleteInstall = {
     app.component(AutoComplete.name, AutoComplete);
   }
 };
+var AutoFocus = {
+  mounted: (el, binding) => {
+    if (binding.value) {
+      el.focus();
+    }
+  }
+};
+var AutoFocusInstall = {
+  title: "AutoFocus \u81EA\u52A8\u805A\u7126",
+  category: "\u516C\u5171",
+  install(app) {
+    app.directive("dAutoFocus", AutoFocus);
+  }
+};
 const IconBody = (props) => {
   const {
     width,
@@ -13392,19 +13460,28 @@ const inputProps = {
   placeholder: {
     type: String,
     default: ""
+  },
+  title: {
+    type: String,
+    default: ""
+  },
+  autofocus: {
+    type: Boolean,
+    default: false
   }
 };
 function useInputRender$1(props, ctx2) {
   const formContext = inject(FORM_TOKEN, void 0);
   const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
   const isValidateError = computed(() => (formItemContext == null ? void 0 : formItemContext.validateState) === "error");
-  const ns2 = useNamespace$1("input");
-  const slotNs = useNamespace$1("input-slot");
+  const ns2 = useNamespace("input");
+  const slotNs = useNamespace("input-slot");
   const isFocus = ref(false);
   const { error: error2, size, disabled } = toRefs(props);
   const slots = ctx2.slots;
   const inputDisabled = computed(() => disabled.value || (formContext == null ? void 0 : formContext.disabled));
   const inputSize = computed(() => (size == null ? void 0 : size.value) || (formContext == null ? void 0 : formContext.size) || "");
+  const styleType = inject(STYLE_TOKEN, void 0);
   const _a = ctx2.attrs, { style, class: customClass } = _a, otherAttrs = __objRest(_a, ["style", "class"]);
   const customStyle = { style };
   const wrapClasses = computed(() => ({
@@ -13420,7 +13497,8 @@ function useInputRender$1(props, ctx2) {
       [ns2.m(inputSize.value)]: Boolean(inputSize.value),
       [slotNs.b()]: slots.prepend || slots.append,
       [ns2.m("append")]: slots.append,
-      [ns2.m("prepend")]: slots.prepend
+      [ns2.m("prepend")]: slots.prepend,
+      [ns2.m("gray-style")]: styleType === "gray"
     },
     customClass
   ]);
@@ -13428,6 +13506,7 @@ function useInputRender$1(props, ctx2) {
 }
 function useInputEvent$1(isFocus, props, ctx2, focus) {
   const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
+  const isComposition = ref(false);
   const onFocus = (e) => {
     isFocus.value = true;
     ctx2.emit("focus", e);
@@ -13441,6 +13520,9 @@ function useInputEvent$1(isFocus, props, ctx2, focus) {
   };
   const onInput = (e) => {
     ctx2.emit("input", e.target.value);
+    if (isComposition.value) {
+      return;
+    }
     ctx2.emit("update:modelValue", e.target.value);
   };
   const onChange = (e) => {
@@ -13454,7 +13536,22 @@ function useInputEvent$1(isFocus, props, ctx2, focus) {
     ctx2.emit("clear");
     focus();
   };
-  return { onFocus, onBlur, onInput, onChange, onKeydown, onClear };
+  const onCompositionStart = () => {
+    isComposition.value = true;
+  };
+  const onCompositionUpdate = (e) => {
+    var _a;
+    const text = (_a = e.target) == null ? void 0 : _a.value;
+    const lastCharacter = text[text.length - 1] || "";
+    isComposition.value = !/([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi.test(lastCharacter);
+  };
+  const onCompositionEnd = (e) => {
+    if (isComposition.value) {
+      isComposition.value = false;
+      onInput(e);
+    }
+  };
+  return { onFocus, onBlur, onInput, onChange, onKeydown, onClear, onCompositionStart, onCompositionUpdate, onCompositionEnd };
 }
 function useInputFunction(input2) {
   const refInput = computed(() => input2.value);
@@ -13475,6 +13572,9 @@ function useInputFunction(input2) {
 var input = "";
 var DInput = defineComponent({
   name: "DInput",
+  directives: {
+    dAutoFocus: AutoFocus
+  },
   inheritAttrs: false,
   props: inputProps,
   emits: ["update:modelValue", "focus", "blur", "input", "change", "keydown", "clear"],
@@ -13483,10 +13583,13 @@ var DInput = defineComponent({
     const t = createI18nTranslate("DInput", app);
     const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
     const {
-      modelValue
+      modelValue,
+      placeholder,
+      title,
+      autofocus
     } = toRefs(props);
-    const ns2 = useNamespace$1("input");
-    const slotNs = useNamespace$1("input-slot");
+    const ns2 = useNamespace("input");
+    const slotNs = useNamespace("input-slot");
     const {
       inputDisabled,
       inputSize,
@@ -13508,7 +13611,10 @@ var DInput = defineComponent({
       onInput,
       onChange,
       onKeydown,
-      onClear
+      onClear,
+      onCompositionStart,
+      onCompositionUpdate,
+      onCompositionEnd
     } = useInputEvent$1(isFocus, props, ctx2, focus);
     const passwordVisible = ref(false);
     const clickPasswordIcon = () => {
@@ -13533,7 +13639,7 @@ var DInput = defineComponent({
       blur: blur2
     });
     return () => {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i;
       return createVNode("div", mergeProps({
         "class": inputClasses.value
       }, customStyle), [ctx2.slots.prepend && createVNode("div", {
@@ -13545,25 +13651,29 @@ var DInput = defineComponent({
       }, [ctx2.slots.prefix && ((_d = (_c = ctx2.slots).prefix) == null ? void 0 : _d.call(_c)), props.prefix && createVNode(DIcon, {
         "size": inputSize.value,
         "name": props.prefix
-      }, null)]), createVNode("input", mergeProps({
+      }, null)]), withDirectives(createVNode("input", mergeProps({
         "ref": input2,
         "value": modelValue.value,
         "disabled": inputDisabled.value,
         "class": ns2.e("inner"),
-        "placeholder": props.placeholder || t("placeholder")
+        "placeholder": (_e = placeholder.value) != null ? _e : t("placeholder")
       }, otherAttrs, {
+        "title": title.value,
         "type": props.showPassword ? passwordVisible.value ? "text" : "password" : "text",
         "onInput": onInput,
         "onFocus": onFocus,
         "onBlur": onBlur,
         "onChange": onChange,
-        "onKeydown": onKeydown
-      }), null), suffixVisible && createVNode("span", {
+        "onKeydown": onKeydown,
+        "onCompositionstart": onCompositionStart,
+        "onCompositionupdate": onCompositionUpdate,
+        "onCompositionend": onCompositionEnd
+      }), null), [[resolveDirective("dAutoFocus"), autofocus.value]]), suffixVisible && createVNode("span", {
         "class": slotNs.e("suffix")
       }, [props.suffix && createVNode(DIcon, {
         "size": inputSize.value,
         "name": props.suffix
-      }, null), ctx2.slots.suffix && ((_f = (_e = ctx2.slots).suffix) == null ? void 0 : _f.call(_e)), showPwdVisible.value && createVNode(DIcon, {
+      }, null), ctx2.slots.suffix && ((_g = (_f = ctx2.slots).suffix) == null ? void 0 : _g.call(_f)), showPwdVisible.value && createVNode(DIcon, {
         "size": inputSize.value,
         "class": ns2.em("password", "icon"),
         "name": passwordVisible.value ? "preview" : "preview-forbidden",
@@ -13571,11 +13681,12 @@ var DInput = defineComponent({
       }, null), showClearable.value && createVNode(DIcon, {
         "size": inputSize.value,
         "class": ns2.em("clear", "icon"),
-        "name": "close",
+        "name": "error-o",
+        "color": "#adb0b8",
         "onClick": onClear
       }, null)])]), ctx2.slots.append && createVNode("div", {
         "class": slotNs.e("append")
-      }, [(_h = (_g = ctx2.slots).append) == null ? void 0 : _h.call(_g)])]);
+      }, [(_i = (_h = ctx2.slots).append) == null ? void 0 : _i.call(_h)])]);
     };
   }
 });
@@ -13899,8 +14010,11 @@ function useCodeEditor(props, ctx2) {
       model = diffEditor.getModel().modified;
     }
     model == null ? void 0 : model.onDidChangeContent(lodash.exports.throttle(() => {
-      modifyValueFromInner = true;
-      ctx2.emit("update:modelValue", model.getValue());
+      const editorValue = model.getValue();
+      if (modelValue.value !== editorValue) {
+        modifyValueFromInner = true;
+        ctx2.emit("update:modelValue", model.getValue());
+      }
     }, 100));
   }
   function setDiffEditorOriginValue() {
@@ -14294,6 +14408,10 @@ const codeReviewProps = {
     type: Boolean,
     default: false
   },
+  diffType: {
+    type: String,
+    default: "modify"
+  },
   outputFormat: {
     type: String,
     default: "line-by-line"
@@ -14322,6 +14440,7 @@ var CodeReviewHeader = defineComponent({
   setup(_, ctx2) {
     const ns2 = useNamespace$1("code-review");
     const {
+      diffType,
       diffInfo,
       isFold,
       rootCtx
@@ -14346,7 +14465,9 @@ var CodeReviewHeader = defineComponent({
         [ns2.em("header", "unfold")]: !isFold.value
       }],
       "onClick": onClick
-    }, [createVNode("div", {
+    }, [createVNode("span", {
+      "class": ["diff-type", diffType.value]
+    }, [diffType.value[0].toUpperCase()]), createVNode("div", {
       "class": "file-info"
     }, [createVNode(FoldIcon, {
       "class": {
@@ -15151,6 +15272,9 @@ var CodeReview = defineComponent({
   emits: ["foldChange", "addComment", "afterViewInit", "contentRefresh"],
   setup(props, ctx2) {
     const ns2 = useNamespace$1("code-review");
+    const {
+      diffType
+    } = toRefs(props);
     const {
       renderHtml,
       reviewContentRef,
@@ -15178,6 +15302,7 @@ var CodeReview = defineComponent({
       });
     });
     provide(CodeReviewInjectionKey, {
+      diffType,
       reviewContentRef,
       diffInfo: diffFile.value[0],
       isFold,
@@ -25171,7 +25296,7 @@ function locale(key) {
     underline: "\u4E0B\u5212\u7EBF",
     strike: "\u5220\u9664\u7EBF",
     color: "\u5B57\u4F53\u989C\u8272",
-    backgound: "\u80CC\u666F\u8272",
+    background: "\u80CC\u666F\u8272",
     orderedlist: "\u6709\u5E8F\u5217\u8868",
     unorderedlist: "\u65E0\u5E8F\u5217\u8868",
     checklist: "\u4EFB\u52A1\u5217\u8868",
@@ -28055,7 +28180,7 @@ var imagePreview = defineComponent({
   props: imagePreviewProps,
   emits: [],
   setup(props) {
-    const ns2 = useNamespace$1("image-preview");
+    const ns2 = useNamespace("image-preview");
     let transform = null;
     const index2 = ref(0);
     const url2 = computed(() => props.previewUrlList[index2.value]);
@@ -28350,16 +28475,11 @@ function unmountedPreviewImages() {
   ImagePreviewService.close();
 }
 function getImgByEl(el) {
-  const imgs = [...el.querySelectorAll("img")];
-  const urlList = imgs.map((item) => {
-    var _a;
-    return (_a = item.getAttribute("preview-src") || item.getAttribute("src")) != null ? _a : "";
-  });
+  const urlList = [...el.querySelectorAll("img")].map((ele) => ele.getAttribute("src"));
   return urlList;
 }
 function handleImg(e) {
   var _a;
-  e.stopPropagation();
   const el = e.currentTarget;
   const target = e.target;
   if (((_a = target == null ? void 0 : target.nodeName) == null ? void 0 : _a.toLowerCase()) === "img") {
@@ -28892,7 +29012,7 @@ var List = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace$1("list");
+    const ns2 = useNamespace("list");
     return () => {
       var _a;
       return createVNode("div", {
@@ -28907,7 +29027,7 @@ var ListItem = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace$1("list-item");
+    const ns2 = useNamespace("list-item");
     return () => {
       var _a;
       return createVNode("div", {
@@ -28919,7 +29039,6 @@ var ListItem = defineComponent({
 var ListInstall = {
   title: "List \u5217\u8868",
   category: "\u6570\u636E\u5C55\u793A",
-  status: "10%",
   install(app) {
     app.component(List.name, List);
     app.component(ListItem.name, ListItem);
@@ -31443,12 +31562,11 @@ function className$1(classStr, classOpt) {
 function useSelect$2(props, selectRef, ctx2, focus, blur2, isSelectFocus, t) {
   const formContext = inject(FORM_TOKEN, void 0);
   const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
-  const ns2 = useNamespace$1("select");
+  const ns2 = useNamespace("select");
   const dropdownRef = ref();
   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) {
@@ -31458,9 +31576,16 @@ function useSelect$2(props, selectRef, ctx2, focus, blur2, isSelectFocus, t) {
     ctx2.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 dropdownMenuMultipleNs = useNamespace("dropdown-menu-multiple");
   const selectCls = computed(() => {
     return className$1(ns2.b(), {
       [ns2.m("open")]: isOpen.value,
@@ -31571,8 +31696,11 @@ function useSelect$2(props, selectRef, ctx2, focus, blur2, 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);
@@ -31599,6 +31727,7 @@ function useSelect$2(props, selectRef, ctx2, focus, blur2, isSelectFocus, t) {
       }
       getMultipleSelected(checkedItems);
     } else {
+      (_a = selectRef.value) == null ? void 0 : _a.clearSingleSearchKey();
       ctx2.emit("update:modelValue", item.value);
       getSingleSelected(item);
       toggleChange(false);
@@ -31609,6 +31738,8 @@ function useSelect$2(props, selectRef, ctx2, focus, blur2, isSelectFocus, t) {
     ctx2.emit("toggle-change", false);
   };
   const handleClear = () => {
+    filterQuery.value = "";
+    handlerQueryFunc("");
     if (props.multiple) {
       ctx2.emit("update:modelValue", []);
       ctx2.emit("value-change", []);
@@ -31621,7 +31752,6 @@ function useSelect$2(props, selectRef, ctx2, focus, blur2, isSelectFocus, t) {
       handleClose();
       blur2();
     }
-    filterQuery.value = "";
   };
   const tagDelete = (data) => {
     let { modelValue } = props;
@@ -31639,15 +31769,17 @@ function useSelect$2(props, selectRef, ctx2, focus, blur2, isSelectFocus, t) {
     ctx2.emit("remove-tag", data.value);
     getMultipleSelected(checkedItems);
   };
-  const onFocus = (e) => {
-    ctx2.emit("focus", e);
+  const onFocus = () => {
     if (!selectDisabled.value) {
       isSelectFocus.value = true;
     }
   };
-  const onBlur = (e) => {
-    ctx2.emit("blur", e);
+  const onBlur = () => {
     if (!selectDisabled.value) {
+      setTimeout(() => {
+        filterQuery.value = "";
+        handlerQueryFunc("");
+      }, 150);
       isSelectFocus.value = false;
     }
   };
@@ -31680,7 +31812,7 @@ function useSelect$2(props, selectRef, ctx2, focus, blur2, 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");
@@ -31707,7 +31839,8 @@ function useSelect$2(props, selectRef, ctx2, focus, blur2, 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, () => {
@@ -31722,10 +31855,17 @@ function useSelect$2(props, selectRef, ctx2, focus, blur2, isSelectFocus, t) {
       (_a = dropdownRef.value) == null ? void 0 : _a.updatePosition();
     }
   }, { flush: "post" });
+  watch(isSelectFocus, (val) => {
+    if (val) {
+      ctx2.emit("focus");
+    } else {
+      ctx2.emit("blur");
+    }
+  });
+  onMounted(updateInjectOptionsStatus);
   return {
     selectDisabled,
     selectSize,
-    originRef,
     dropdownRef,
     isOpen,
     selectCls,
@@ -31750,7 +31890,7 @@ function useSelect$2(props, selectRef, ctx2, focus, blur2, isSelectFocus, t) {
 }
 const selectProps = {
   modelValue: {
-    type: [String, Number, Array],
+    type: [String, Number, Array, Boolean],
     default: ""
   },
   "onUpdate:modelValue": {
@@ -31765,6 +31905,10 @@ const selectProps = {
     type: String,
     default: ""
   },
+  position: {
+    type: Array,
+    default: () => ["bottom", "top"]
+  },
   overview: {
     type: String,
     default: "border"
@@ -31836,6 +31980,10 @@ const selectProps = {
   multipleLimit: {
     type: Number,
     default: 0
+  },
+  showEmptyWhenUnmatched: {
+    type: Boolean,
+    default: true
   }
 };
 const optionProps = {
@@ -31868,7 +32016,7 @@ const optionGroupProps = {
 const SELECT_TOKEN = Symbol("dSelect");
 const OPTION_GROUP_TOKEN = Symbol("dOptionGroup");
 function useOption(props) {
-  const ns2 = useNamespace$1("select");
+  const ns2 = useNamespace("select");
   const select2 = inject(SELECT_TOKEN, null);
   const optionGroup = inject(OPTION_GROUP_TOKEN, null);
   const currentName = computed(() => {
@@ -31884,20 +32032,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$1(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 = () => {
@@ -32095,12 +32246,16 @@ var TagInstall = {
   }
 };
 function useSelectContent() {
-  const ns2 = useNamespace$1("select");
+  const ns2 = useNamespace("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) || [];
   });
@@ -32118,21 +32273,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$1(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(() => {
@@ -32143,12 +32314,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);
@@ -32158,41 +32337,69 @@ 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(_, ctx2) {
     const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
-    const ns2 = useNamespace$1("select");
+    const ns2 = useNamespace("select");
     const clearCls = computed(() => ({
       [ns2.e("clear")]: true,
       [ns2.em("clear", "feedback")]: Boolean(formItemContext == null ? void 0 : formItemContext.validateState) && (formItemContext == null ? void 0 : formItemContext.showFeedback)
@@ -32204,44 +32411,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 = "";
+    };
+    ctx2.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, {
@@ -32253,39 +32487,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)])]);
     };
   }
@@ -32313,11 +32557,38 @@ function useSelectFunction(props, selectRef) {
   };
   return { isSelectFocus, focus, blur: blur2 };
 }
+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, ctx2) {
     const app = getCurrentInstance();
     const t = createI18nTranslate("DSelect", app);
@@ -32330,7 +32601,6 @@ var Select = defineComponent({
     const {
       selectDisabled,
       selectSize,
-      originRef,
       dropdownRef,
       isOpen,
       selectCls,
@@ -32351,9 +32621,17 @@ var Select = defineComponent({
       toggleChange,
       isShowCreateOption
     } = useSelect$2(props, selectRef, ctx2, focus, blur2, isSelectFocus, t);
-    const scrollbarNs = useNamespace$1("scrollbar");
-    const ns2 = useNamespace$1("select");
-    const dropdownCls = ns2.e("dropdown");
+    const dropdownContainer = ref();
+    const {
+      originRef,
+      dropdownWidth
+    } = useSelectMenuSize(selectRef, dropdownRef, isOpen);
+    const scrollbarNs = useNamespace("scrollbar");
+    const ns2 = useNamespace("select");
+    const dropdownCls = {
+      [ns2.e("dropdown")]: true,
+      [ns2.em("dropdown", "multiple")]: props.multiple
+    };
     const listCls = {
       [ns2.e("dropdown-list")]: true,
       [scrollbarNs.b()]: true
@@ -32365,32 +32643,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) {
+        ctx2.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,
@@ -32404,7 +32679,7 @@ var Select = defineComponent({
         "class": selectCls.value,
         "onClick": withModifiers(() => {
           toggleChange(!isOpen.value);
-        }, ["stop"])
+        }, [])
       }, [createVNode(SelectContent, {
         "ref": selectRef
       }, null), createVNode(Teleport, {
@@ -32418,9 +32693,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
@@ -32431,11 +32706,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,
@@ -32454,7 +32733,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 = ctx2.slots) == null ? void 0 : _c.empty) && ctx2.slots.empty(), !((_d = ctx2.slots) == null ? void 0 : _d.empty) && createVNode("p", {
                 "class": dropdownEmptyCls
@@ -32470,7 +32750,7 @@ var OptionGroup = defineComponent({
   name: "DOptionGroup",
   props: optionGroupProps,
   setup(props, ctx2) {
-    const ns2 = useNamespace$1("select");
+    const ns2 = useNamespace("select");
     provide(OPTION_GROUP_TOKEN, reactive(__spreadValues({}, toRefs(props))));
     return () => {
       var _a;
@@ -33468,7 +33748,7 @@ var Progress = defineComponent({
       data,
       $slots
     } = this;
-    const ns2 = useNamespace$1("progress");
+    const ns2 = useNamespace("progress");
     const isOutside = percentageTextPlacement === "outside";
     const isInsideBg = percentageTextPlacement === "insideBg";
     const createPercentageText = () => {
@@ -35097,7 +35377,7 @@ const skeletonProps = {
 const roundInjectionKey = Symbol("round");
 const animationInjectionKey = Symbol("showAnimation");
 function useSkeletonItem(props) {
-  const ns2 = useNamespace$1("skeleton-item");
+  const ns2 = useNamespace("skeleton-item");
   const { variant, size } = toRefs(props);
   const round = inject(roundInjectionKey, void 0);
   const showAnimation = inject(animationInjectionKey, void 0);
@@ -35171,7 +35451,7 @@ var Skeleton = defineComponent({
   name: "DSkeleton",
   props: skeletonProps,
   setup(props, ctx2) {
-    const ns2 = useNamespace$1("skeleton");
+    const ns2 = useNamespace("skeleton");
     const {
       loading: loading2,
       rows,
@@ -36358,7 +36638,7 @@ var Steps = defineComponent({
       direction,
       simple
     } = toRefs(props);
-    const ns2 = useNamespace$1("steps");
+    const ns2 = useNamespace("steps");
     const activeStep = ref(modelValue.value);
     provide(ACTIVE_STEP, activeStep);
     provide(STEPS_PROPS, props);
@@ -36408,7 +36688,7 @@ var Step = defineComponent({
       icon: icon2,
       status: status2
     } = toRefs(props);
-    const ns2 = useNamespace$1("step");
+    const ns2 = useNamespace("step");
     const instance = getCurrentInstance();
     const activeStep = inject(ACTIVE_STEP);
     const steps2 = inject(STEPS);
@@ -43681,6 +43961,7 @@ const installs = [
   AlertInstall,
   AnchorInstall,
   AutoCompleteInstall,
+  AutoFocusInstall,
   AvatarInstall,
   BackTopInstall,
   BadgeInstall,
@@ -43762,9 +44043,9 @@ const installs = [
   VirtualListInstall
 ];
 var vueDevui = {
-  version: "1.5.12",
+  version: "1.5.13",
   install(app) {
     installs.forEach((p) => app.use(p));
   }
 };
-export { Accordion, ActionTimeline, Alert, Anchor, Aside, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, BreadcrumbItem, DButton as Button, ButtonGroup, Card, Carousel, CarouselItem, Cascader, Checkbox, CheckboxButton, DCheckboxGroup as CheckboxGroup, CodeEditor, CodeReview, Col, Collapse, CollapseItem, ColorPicker, Column, Comment, Content, Countdown, DChart, DRangeDatePickerPro, DatePicker, DatePickerPro, draggableDirective as DraggableDirective, Drawer, DrawerService, Dropdown$1 as Dropdown, DropdownMenu, droppableDirective as DroppableDirective, EditableSelect, EditorMd, FixedOverlay, FlexibleOverlay, Footer, Form, FormItem, FormOperation, Fullscreen, Gantt, GitGraph, Header, DIcon as Icon, IconGroup, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputIcon, InputNumber, Layout, List, ListItem, LoadingDirective, loading as LoadingService, MdRender, Mention, Menu, MenuItem, Message, Modal, ModalBody, ModalFooter, ModalHeader, MultiAutoComplete, NavSprite, Notification, NotificationService, Option, OptionGroup, Pagination, Panel, PanelBody, PanelFooter, PanelHeader, Popover, Progress, QuadrantDiagram, Radio, RadioButton, RadioGroup, Rate, ReadTip, Result, RippleDirective, Row, DSearch as Search, Select, Skeleton, SkeletonItem, Slider, SortableDirective, Splitter, SplitterPane, Statistic, Status, Step, Steps, StepsGuide, StepsGuideDirective, StickSlider, Sticky, SubMenu, Switch, Tab, Table, Tabs, Tag, TagInput, Textarea, TimePicker, TimeSelect, Timeline, TimelineItem, Tooltip, Transfer, Tree, TreeSelect, Upload, VirtualList, vueDevui as default, fileDropDirective };
+export { Accordion, ActionTimeline, Alert, Anchor, Aside, AutoComplete, AutoFocus, Avatar, BackTop, Badge, Breadcrumb, BreadcrumbItem, DButton as Button, ButtonGroup, Card, Carousel, CarouselItem, Cascader, Checkbox, CheckboxButton, DCheckboxGroup as CheckboxGroup, CodeEditor, CodeReview, Col, Collapse, CollapseItem, ColorPicker, Column, Comment, Content, Countdown, DChart, DRangeDatePickerPro, DatePicker, DatePickerPro, draggableDirective as DraggableDirective, Drawer, DrawerService, Dropdown$1 as Dropdown, DropdownMenu, droppableDirective as DroppableDirective, EditableSelect, EditorMd, FixedOverlay, FlexibleOverlay, Footer, Form, FormItem, FormOperation, Fullscreen, Gantt, GitGraph, Header, DIcon as Icon, IconGroup, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputIcon, InputNumber, Layout, List, ListItem, LoadingDirective, loading as LoadingService, MdRender, Mention, Menu, MenuItem, Message, Modal, ModalBody, ModalFooter, ModalHeader, MultiAutoComplete, NavSprite, Notification, NotificationService, Option, OptionGroup, Pagination, Panel, PanelBody, PanelFooter, PanelHeader, Popover, Progress, QuadrantDiagram, Radio, RadioButton, RadioGroup, Rate, ReadTip, Result, RippleDirective, Row, DSearch as Search, Select, Skeleton, SkeletonItem, Slider, SortableDirective, Splitter, SplitterPane, Statistic, Status, Step, Steps, StepsGuide, StepsGuideDirective, StickSlider, Sticky, SubMenu, Switch, Tab, Table, Tabs, Tag, TagInput, Textarea, TimePicker, TimeSelect, Timeline, TimelineItem, Tooltip, Transfer, Tree, TreeSelect, Upload, VirtualList, vueDevui as default, fileDropDirective };