vue-devui 1.4.0 → 1.5.0

package/vue-devui.es.js

@@ -420,7 +420,7 @@ var DAccordionItemHreflink = defineComponent({
     };
   }
 });
-function _isSlot$b(s) {
+function _isSlot$c(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 var DAccordionItemRouterlink = defineComponent({
@@ -507,7 +507,7 @@ var DAccordionItemRouterlink = defineComponent({
           parent: parentValue,
           event: e
         })
-      }, _isSlot$b(_slot = renderContent()) ? _slot : {
+      }, _isSlot$c(_slot = renderContent()) ? _slot : {
         default: () => [_slot]
       }), !isUsedVueRouter.value && createVNode("a", {
         "href": link.value,
@@ -10156,7 +10156,7 @@ var IconInstall = {
     app.component(IconGroup.name, IconGroup);
   }
 };
-function _isSlot$a(s) {
+function _isSlot$b(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 var AutoComplete = defineComponent({
@@ -10273,7 +10273,7 @@ var AutoComplete = defineComponent({
                       ${width.value + "px"}
                     `
             }
-          }, [createVNode(DAutoCompleteDropdown, null, _isSlot$a(_slot = customRenderSolts()) ? _slot : {
+          }, [createVNode(DAutoCompleteDropdown, null, _isSlot$b(_slot = customRenderSolts()) ? _slot : {
             default: () => [_slot]
           })])]
         })]
@@ -10284,7 +10284,7 @@ var AutoComplete = defineComponent({
         let _slot2;
         return createVNode(Teleport, {
           "to": "body"
-        }, _isSlot$a(_slot2 = renderBasicDropdown()) ? _slot2 : {
+        }, _isSlot$b(_slot2 = renderBasicDropdown()) ? _slot2 : {
           default: () => [_slot2]
         });
       } else {
@@ -10866,7 +10866,7 @@ const breadcrumbItemProps = {
   }
 };
 var breadcrumbItem = "";
-const dropdownProps = {
+const dropdownProps$1 = {
   visible: {
     type: Boolean,
     default: false
@@ -11066,10 +11066,10 @@ function useOverlayProps(props, currentPosition, isOpen) {
 }
 var dropdown = "";
 let dropdownId = 1;
-var Dropdown = defineComponent({
+var Dropdown$1 = defineComponent({
   name: "DDropdown",
   inheritAttrs: false,
-  props: dropdownProps,
+  props: dropdownProps$1,
   emits: ["toggle"],
   setup(props, {
     slots,
@@ -11160,7 +11160,7 @@ var Dropdown = defineComponent({
 var BreadcrumbItem = defineComponent({
   name: "DBreadcrumbItem",
   components: {
-    DDropdown: Dropdown
+    DDropdown: Dropdown$1
   },
   props: breadcrumbItemProps,
   setup(props, {
@@ -13037,7 +13037,7 @@ const inputProps = {
     default: ""
   }
 };
-function useInputRender(props, ctx2) {
+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");
@@ -13069,7 +13069,7 @@ function useInputRender(props, ctx2) {
   ]);
   return { inputDisabled, inputSize, isFocus, wrapClasses, inputClasses, customStyle, otherAttrs };
 }
-function useInputEvent(isFocus, props, ctx2, focus) {
+function useInputEvent$1(isFocus, props, ctx2, focus) {
   const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
   const onFocus = (e) => {
     isFocus.value = true;
@@ -13109,11 +13109,11 @@ function useInputFunction(input2) {
     var _a;
     (_a = refInput.value) == null ? void 0 : _a.focus();
   };
-  const blur = () => {
+  const blur2 = () => {
     var _a;
     (_a = refInput.value) == null ? void 0 : _a.blur();
   };
-  return { select: select2, focus, blur };
+  return { select: select2, focus, blur: blur2 };
 }
 var input = "";
 var DInput = defineComponent({
@@ -13138,12 +13138,12 @@ var DInput = defineComponent({
       inputClasses,
       customStyle,
       otherAttrs
-    } = useInputRender(props, ctx2);
+    } = useInputRender$1(props, ctx2);
     const input2 = shallowRef();
     const {
       select: select2,
       focus,
-      blur
+      blur: blur2
     } = useInputFunction(input2);
     const {
       onFocus,
@@ -13152,11 +13152,11 @@ var DInput = defineComponent({
       onChange,
       onKeydown,
       onClear
-    } = useInputEvent(isFocus, props, ctx2, focus);
+    } = useInputEvent$1(isFocus, props, ctx2, focus);
     const passwordVisible = ref(false);
     const clickPasswordIcon = () => {
       passwordVisible.value = !passwordVisible.value;
-      blur();
+      blur2();
     };
     const prefixVisible = ctx2.slots.prefix || props.prefix;
     const suffixVisible = ctx2.slots.suffix || props.suffix || props.showPassword || props.clearable;
@@ -13173,7 +13173,7 @@ var DInput = defineComponent({
     ctx2.expose({
       select: select2,
       focus,
-      blur
+      blur: blur2
     });
     return () => {
       var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -13800,10 +13800,12 @@ var TabNav = defineComponent({
       }
     });
     watch(() => props.modelValue, () => {
-      const tab2 = tabsList.value.find((item) => item.props.id === props.modelValue);
-      if (tab2) {
-        activeClick(tab2);
-      }
+      nextTick(() => {
+        const tab2 = tabsList.value.find((item) => item.props.id === props.modelValue);
+        if (tab2) {
+          activeClick(tab2);
+        }
+      });
     });
     return () => {
       const closeIconEl = (item) => {
@@ -18068,7 +18070,7 @@ var ScrollBar = defineComponent({
     };
   }
 });
-function _isSlot$9(s) {
+function _isSlot$a(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 const Item = ({
@@ -18100,7 +18102,7 @@ function renderChildren(list2, startIndex, endIndex, setNodeRef, {
     return createVNode(Item, {
       "key": key,
       "setRef": (ele) => setNodeRef(item, ele)
-    }, _isSlot$9(node) ? node : {
+    }, _isSlot$a(node) ? node : {
       default: () => [node]
     });
   });
@@ -19654,7 +19656,7 @@ function useDatePicker(props, ctx2) {
     onChangeRangeFocusType
   };
 }
-function _isSlot$8(s) {
+function _isSlot$9(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 var DatePickerProPanel = defineComponent({
@@ -19706,7 +19708,7 @@ var DatePickerProPanel = defineComponent({
       }, [createVNode(DButton, {
         "variant": "solid",
         "onClick": handlerConfirm
-      }, _isSlot$8(_slot = t("ok")) ? _slot : {
+      }, _isSlot$9(_slot = t("ok")) ? _slot : {
         default: () => [_slot]
       })])])]);
     };
@@ -20451,7 +20453,7 @@ var Drawer = defineComponent({
     });
   }
 });
-function _isSlot$7(s) {
+function _isSlot$8(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 const defaultOptions$2 = {
@@ -20478,7 +20480,7 @@ function initInstance$2(state) {
       });
       return () => createVNode(Drawer, mergeProps(state, {
         "onUpdate:modelValue": handleVisibleChange
-      }), _isSlot$7(content2) ? content2 : {
+      }), _isSlot$8(content2) ? content2 : {
         default: () => [content2]
       });
     }
@@ -20612,127 +20614,277 @@ var DropdownInstall = {
   category: "\u5BFC\u822A",
   status: "50%",
   install(app) {
-    app.component(Dropdown.name, Dropdown);
+    app.component(Dropdown$1.name, Dropdown$1);
     app.component(DropdownMenu.name, DropdownMenu);
   }
 };
 const editableSelectProps = {
   modelValue: {
-    type: String,
-    default: ""
+    type: [String, Number]
+  },
+  appendToBody: {
+    type: Boolean,
+    default: false
+  },
+  position: {
+    type: Array,
+    default: ["bottom"]
   },
   options: {
     type: Array,
     default: () => []
   },
+  width: {
+    type: Number
+  },
+  maxHeight: {
+    type: Number
+  },
+  size: {
+    type: String
+  },
+  placeholder: {
+    type: String,
+    default: "Select"
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
   allowClear: {
     type: Boolean,
     default: false
   },
   disabled: {
-    type: Boolean
+    type: Boolean,
+    default: false
   },
   disabledKey: {
     type: String,
     default: ""
   },
-  placeholder: {
-    type: String,
-    default: "Search"
+  remote: {
+    type: Boolean,
+    default: false
+  },
+  filterMethod: {
+    type: Function
+  },
+  remoteMethod: {
+    type: Function
+  },
+  enableLazyLoad: {
+    type: Boolean,
+    default: false
+  }
+};
+const SELECT_KEY = Symbol("EditableSelect");
+const dropdownProps = {
+  options: {
+    type: Array,
+    default: () => []
   },
   width: {
     type: Number
   },
   maxHeight: {
     type: Number
+  }
+};
+const editableSelectOptionProps = {
+  label: {
+    type: String
   },
-  loading: {
-    type: Boolean
+  value: {
+    type: [String, Number]
   },
-  enableLazyLoad: {
+  disabled: {
     type: Boolean,
     default: false
   },
-  searchFn: {
-    type: Function
+  hovering: {
+    type: Boolean,
+    default: false
   }
 };
-function className$2(classStr, classOpt) {
-  let classname = classStr;
-  if (typeof classOpt === "object") {
-    Object.keys(classOpt).forEach((key) => {
-      classOpt[key] && (classname += ` ${key}`);
-    });
-  }
-  return classname;
+function useOption$1(props) {
+  const ns2 = useNamespace("editable-select");
+  const select2 = inject(SELECT_KEY);
+  const { disabled, hovering } = toRefs(props);
+  const isSelected = computed(() => {
+    var _a;
+    return ((_a = select2 == null ? void 0 : select2.modelValue) == null ? void 0 : _a.value) === props.value;
+  });
+  const optionClasses = computed(() => ({
+    [ns2.e("item")]: true,
+    [ns2.em("item", "selected")]: isSelected.value,
+    [ns2.em("item", "disabled")]: disabled.value,
+    [ns2.em("item", "hover")]: hovering.value,
+    [ns2.em("item", "no-data-tip")]: !(props.label || props.value)
+  }));
+  return { optionClasses };
 }
-var editableSelect = "";
-function useSelect$3(props) {
-  const normalizeOptions2 = computed(() => {
-    return props.options.map((option2) => {
-      let res;
-      if (option2 !== "null" && typeof option2 === "object") {
-        res = __spreadProps(__spreadValues({}, option2), {
-          label: option2.label || "",
-          value: option2.value !== void 0 ? option2.value : option2.label || ""
-        });
-      } else {
-        res = {
-          label: String(option2),
-          value: option2
-        };
+var Option$1 = defineComponent({
+  name: "DEditableSelectOption",
+  props: editableSelectOptionProps,
+  emits: ["select"],
+  setup(props, ctx2) {
+    const {
+      optionClasses
+    } = useOption$1(props);
+    const currentLabel = computed(() => props.label || props.value);
+    const handleClick = () => {
+      if (!props.disabled) {
+        ctx2.emit("select");
       }
-      return res;
-    });
+    };
+    return () => {
+      return createVNode("li", {
+        "class": optionClasses.value,
+        "onClick": handleClick
+      }, [ctx2.slots.default ? ctx2.slots.default() : currentLabel.value]);
+    };
+  }
+});
+var Dropdown = defineComponent({
+  name: "DEditableSelectDropdown",
+  directives: {
+    Loading: LoadingDirective
+  },
+  props: dropdownProps,
+  setup(props, {
+    slots
+  }) {
+    const ns2 = useNamespace("editable-select");
+    const {
+      width,
+      maxHeight
+    } = toRefs(props);
+    const select2 = inject(SELECT_KEY);
+    const {
+      dropdownRef,
+      hoveringIndex,
+      handleOptionSelect,
+      loadMore,
+      emptyText
+    } = select2;
+    const isHovering = (index2) => {
+      return hoveringIndex.value === index2;
+    };
+    const isDisabled = (option2) => {
+      return select2.disabledKey ? !!option2[select2.disabledKey] : false;
+    };
+    const debounceLoadMore = lodash.exports.debounce(loadMore, 300);
+    const onScroll2 = () => {
+      debounceLoadMore();
+    };
+    const renderOption = () => {
+      if (props.options.length === 0) {
+        return createVNode("li", {
+          "class": ns2.em("item", "no-data-tip")
+        }, [slots.noResultItem ? slots.noResultItem() : emptyText.value]);
+      }
+      return props.options.map((option2, index2) => {
+        return createVNode(Option$1, {
+          "label": option2.label,
+          "value": option2.value,
+          "hovering": isHovering(index2),
+          "disabled": isDisabled(option2),
+          "onSelect": () => {
+            handleOptionSelect(option2, true);
+          }
+        }, slots.item ? {
+          default: () => renderSlot(useSlots(), "item", {
+            option: option2,
+            index: index2
+          })
+        } : {});
+      });
+    };
+    return () => {
+      return withDirectives(createVNode("div", {
+        "class": ns2.e("dropdown"),
+        "style": {
+          width: `${width == null ? void 0 : width.value}px`
+        }
+      }, [createVNode("div", {
+        "ref": dropdownRef,
+        "class": ns2.e("inner"),
+        "style": {
+          maxHeight: `${maxHeight == null ? void 0 : maxHeight.value}px`
+        },
+        "onScroll": onScroll2
+      }, [renderOption()])]), [[resolveDirective("loading"), select2.loading.value]]);
+    };
+  }
+});
+function useSelectStates() {
+  return reactive({
+    hoveringIndex: -1,
+    selectedIndex: -1,
+    query: "",
+    inputValue: "",
+    selectedLabel: "",
+    isFocus: false,
+    visible: false,
+    softFocus: false,
+    isSilentBlur: false,
+    inputHovering: false
   });
-  return { normalizeOptions: normalizeOptions2 };
 }
-function useFilterOptions(enableLazyLoad, normalizeOptions2, inputValue, searchFn) {
+function useSelect$3(dropdownRef, props, states, setSoftFocus, ctx2) {
+  const app = getCurrentInstance();
+  const t = createI18nTranslate("DEditableSelect", app);
+  const cachedOptions = ref(props.options);
   const filteredOptions = computed(() => {
-    if (!inputValue.value || enableLazyLoad) {
-      return normalizeOptions2.value;
-    }
-    return normalizeOptions2.value.filter((option2) => {
-      return searchFn(option2, inputValue.value);
+    return cachedOptions.value.filter((option2) => {
+      return option2.label.toLocaleLowerCase().includes(states.query.toLocaleLowerCase().trim());
     });
   });
-  return { filteredOptions };
-}
-function useInput(inputValue, ctx2) {
-  const onInputChange = (value) => {
-    ctx2.emit("search", value);
-  };
-  const handleInput = (event) => {
-    const value = event.target.value;
-    inputValue.value = value;
-    onInputChange(value);
-  };
-  return {
-    handleInput
-  };
-}
-function useLazyLoad$2(dropdownRef, enableLazyLoad, ctx2) {
-  const loadMore = () => {
-    const dropdownVal = dropdownRef.value;
-    if (!enableLazyLoad) {
-      return;
-    }
-    if (dropdownVal.clientHeight + dropdownVal.scrollTop >= dropdownVal.scrollHeight - 12) {
-      ctx2.emit("loadMore");
+  const emptyText = computed(() => {
+    let text = "";
+    props.remote ? text = t("noData") : text = t("noRelatedRecords");
+    return text;
+  });
+  const showClearable = computed(() => {
+    const hasModelValue = !lodash.exports.isNil(props.modelValue) && props.modelValue !== "";
+    return props.allowClear && !props.disabled && states.inputHovering && hasModelValue;
+  });
+  const toggleMenu = () => {
+    if (!props.disabled) {
+      states.visible = !states.visible;
     }
   };
-  return { loadMore };
-}
-function useKeyboardSelect(dropdownRef, hoverIndex, filteredOptions, disabledKey, visible, loading2, handleClick, toggleMenu, closeMenu) {
-  const handleEscape = () => {
-    closeMenu();
+  const updateIndex = (index2) => {
+    states.hoveringIndex = index2;
+    states.selectedIndex = index2;
+  };
+  const setSelected = () => {
+    const options = cachedOptions.value;
+    if (!lodash.exports.isNil(props.modelValue)) {
+      const index2 = options.findIndex((option2) => option2.value === props.modelValue);
+      if (index2 !== -1) {
+        states.inputValue = options[index2].label;
+        states.selectedLabel = options[index2].label;
+        updateIndex(index2);
+      } else {
+        states.inputValue = `${props.modelValue}`;
+        states.selectedLabel = `${props.modelValue}`;
+      }
+    } else {
+      states.inputValue = "";
+    }
   };
-  const handleEnter = () => {
-    handleClick(filteredOptions.value[hoverIndex.value], hoverIndex.value);
+  const handleOptionSelect = (option2, byClick) => {
+    ctx2.emit("update:modelValue", option2.value);
+    ctx2.emit("change", option2.value);
+    states.isSilentBlur = byClick;
+    setSoftFocus();
+    states.visible = false;
   };
-  const scrollToItem = (index2) => {
+  const scrollToItem = (idx) => {
     const ul = dropdownRef.value;
-    const li = ul.children[index2];
+    const li = ul.children[idx];
     nextTick(() => {
       if (li.scrollIntoViewIfNeeded) {
         li.scrollIntoViewIfNeeded(false);
@@ -20745,232 +20897,375 @@ function useKeyboardSelect(dropdownRef, hoverIndex, filteredOptions, disabledKey
       }
     });
   };
-  const updateIndex = (index2) => {
-    hoverIndex.value = index2;
+  watch(() => states.visible, (visible) => {
+    if (visible) {
+      states.selectedIndex !== -1 && nextTick(() => {
+        scrollToItem(states.selectedIndex);
+      });
+    } else {
+      states.query = "";
+      states.inputValue = states.selectedLabel;
+    }
+    ctx2.emit("visibleChange", visible);
+  });
+  watch(() => props.modelValue, () => {
+    setSelected();
+  });
+  watch(() => props.options, (newOptions) => {
+    if (newOptions.length !== 0) {
+      cachedOptions.value = newOptions;
+    }
+  });
+  onMounted(() => {
+    setSelected();
+  });
+  return {
+    cachedOptions,
+    filteredOptions,
+    emptyText,
+    showClearable,
+    toggleMenu,
+    handleOptionSelect,
+    scrollToItem
+  };
+}
+const EVENT_CODE = {
+  tab: "Tab",
+  enter: "Enter",
+  up: "ArrowUp",
+  down: "ArrowDown",
+  esc: "Escape"
+};
+function useKeyboardSelect(props, states, filteredOptions, scrollToItem, handleOptionSelect) {
+  const updateHoveringIndex = (index2) => {
+    states.hoveringIndex = index2;
   };
-  const handleKeyboardNavigation = (direction, index2 = hoverIndex.value) => {
-    const len = filteredOptions.value.length;
-    if (len === 0) {
+  const onKeyboardNavigate = (direction, hoverIndex = states.hoveringIndex) => {
+    if (!states.visible) {
+      states.visible = true;
       return;
     }
-    if (!["ArrowUp", "ArrowDown"].includes(direction)) {
+    if (filteredOptions.value.length === 0 || props.loading) {
       return;
     }
-    if (direction === "ArrowUp") {
-      index2 -= 1;
-      if (index2 === -1) {
-        index2 = len - 1;
+    let newIndex = 0;
+    if (direction === "ArrowDown") {
+      newIndex = hoverIndex + 1;
+      if (newIndex > filteredOptions.value.length - 1) {
+        newIndex = 0;
       }
-    } else if (direction === "ArrowDown") {
-      index2 += 1;
-      if (index2 === len) {
-        index2 = 0;
+    } else if (direction === "ArrowUp") {
+      newIndex = hoverIndex - 1;
+      if (newIndex < 0) {
+        newIndex = filteredOptions.value.length - 1;
       }
     }
-    const option2 = filteredOptions.value[index2];
-    if (option2[disabledKey]) {
-      return handleKeyboardNavigation(direction, index2);
+    const option2 = filteredOptions.value[newIndex];
+    if (option2[props.disabledKey]) {
+      return onKeyboardNavigate(direction, newIndex);
+    } else {
+      updateHoveringIndex(newIndex);
+      scrollToItem(newIndex);
     }
-    updateIndex(index2);
-    scrollToItem(index2);
   };
-  const handleKeydown = (event) => {
-    const keyCode = event.key || event.code;
-    if (loading2.value) {
-      return;
+  const onEscOrTab = () => {
+    states.visible = false;
+  };
+  const onKeyboardSelect = () => {
+    if (!states.visible) {
+      return states.visible = true;
+    }
+    const option2 = filteredOptions.value[states.hoveringIndex];
+    if (option2) {
+      handleOptionSelect(option2, false);
     }
-    if (!visible.value) {
-      return toggleMenu();
+  };
+  const onKeydown = (e) => {
+    const keyCode = e.key || e.code;
+    const { tab: tab2, esc, down, up, enter } = EVENT_CODE;
+    if (keyCode === up || keyCode === down) {
+      e.preventDefault();
     }
     switch (keyCode) {
-      case "Escape":
-        handleEscape();
+      case up:
+        onKeyboardNavigate("ArrowUp");
         break;
-      case "Enter":
-        handleEnter();
+      case down:
+        onKeyboardNavigate("ArrowDown");
+        break;
+      case esc:
+      case tab2:
+        onEscOrTab();
+        break;
+      case enter:
+        onKeyboardSelect();
         break;
-      default:
-        handleKeyboardNavigation(keyCode);
     }
   };
   return {
-    handleKeydown
+    onKeydown
   };
 }
-function useCacheFilteredOptions(filteredOptions) {
-  const cacheFilteredOptions = computed(() => {
-    const map = /* @__PURE__ */ new Map();
-    filteredOptions.value.forEach((item) => {
-      map.set(item, item.value);
-    });
-    return map;
-  });
-  const getOptionValue = (option2) => cacheFilteredOptions.value.get(option2);
+function useInputRender(props, states) {
+  const ns2 = useNamespace("editable-select-input");
+  const inputClasses = computed(() => ({
+    [ns2.b()]: true,
+    [ns2.m("sm")]: props.size === "sm",
+    [ns2.m("lg")]: props.size === "lg",
+    [ns2.m("open")]: states.visible
+  }));
+  const inputWrapperClasses = computed(() => ({
+    [ns2.e("wrapper")]: true,
+    [ns2.em("wrapper", "focus")]: states.isFocus,
+    [ns2.em("wrapper", "disabled")]: props.disabled
+  }));
+  const inputInnerClasses = computed(() => ({
+    [ns2.e("inner")]: true
+  }));
+  const inputPlaceholderClasses = computed(() => ({
+    [ns2.e("placeholder")]: true
+  }));
+  const inputSuffixClasses = computed(() => ({
+    [ns2.e("suffix")]: true
+  }));
+  return {
+    inputClasses,
+    inputWrapperClasses,
+    inputInnerClasses,
+    inputPlaceholderClasses,
+    inputSuffixClasses
+  };
+}
+function useInputEvent(inputRef, props, states, ctx2) {
+  const delay = computed(() => props.remote ? 300 : 0);
+  const setSoftFocus = () => {
+    var _a;
+    const _input = inputRef.value;
+    if (_input) {
+      (_a = _input.focus) == null ? void 0 : _a.call(_input);
+    }
+  };
+  const handleFocus = (e) => {
+    if (!states.softFocus) {
+      ctx2.emit("focus", e);
+      states.isFocus = true;
+    } else {
+      states.softFocus = false;
+    }
+  };
+  const handleBlur = async (e) => {
+    if (states.isSilentBlur) {
+      states.isSilentBlur = false;
+    } else {
+      ctx2.emit("blur", e);
+      states.isFocus = true;
+    }
+    states.softFocus = false;
+  };
+  const updateInputValue = (value) => {
+    states.inputValue = value;
+  };
+  const handleQueryChange = (value) => {
+    if (props.remote && lodash.exports.isFunction(props.remoteMethod)) {
+      props.remoteMethod(value);
+    } else if (lodash.exports.isFunction(props.filterMethod)) {
+      props.filterMethod(value);
+    }
+  };
+  const handleInputChange = () => {
+    states.query = states.inputValue;
+    handleQueryChange(states.query);
+  };
+  const debouncedOnInputChange = lodash.exports.debounce(handleInputChange, delay.value);
+  const onInput = (e) => {
+    const value = e.target.value;
+    updateInputValue(value);
+    if (states.inputValue.length > 0 && !states.visible) {
+      states.visible = true;
+    }
+    if (props.remote) {
+      debouncedOnInputChange();
+    } else {
+      handleInputChange();
+    }
+  };
+  const onMouseenter = () => {
+    states.inputHovering = true;
+  };
+  const onMouseleave = () => {
+    states.inputHovering = false;
+  };
+  const handleClear = () => {
+    ctx2.emit("update:modelValue", "");
+    ctx2.emit("change", "");
+    ctx2.emit("clear");
+    states.hoveringIndex = -1;
+    states.visible = false;
+  };
   return {
-    getOptionValue
+    blur,
+    setSoftFocus,
+    handleFocus,
+    handleBlur,
+    handleClear,
+    onInput,
+    onMouseenter,
+    onMouseleave
   };
 }
+function useLazyLoad$2(dropdownRef, props, ctx2) {
+  const { enableLazyLoad } = toRefs(props);
+  const loadMore = () => {
+    if (!dropdownRef.value || !enableLazyLoad.value) {
+      return;
+    }
+    if ((dropdownRef == null ? void 0 : dropdownRef.value.clientHeight) + dropdownRef.value.scrollTop >= dropdownRef.value.scrollHeight - 12) {
+      ctx2.emit("loadMore");
+    }
+  };
+  return { loadMore };
+}
+var editableSelect = "";
+function _isSlot$7(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
 var EditableSelect = defineComponent({
   name: "DEditableSelect",
-  directives: {
-    ClickOutside: clickoutsideDirective,
-    Loading: LoadingDirective
-  },
   props: editableSelectProps,
-  emits: ["update:modelValue", "search", "loadMore"],
+  emits: ["update:modelValue", "focus", "blur", "clear", "change", "visibleChange", "loadMore"],
   setup(props, ctx2) {
-    const app = getCurrentInstance();
-    const t = createI18nTranslate("DEditableSelect", app);
     const ns2 = useNamespace("editable-select");
+    const inputRef = ref();
+    const originRef = ref();
     const dropdownRef = ref();
-    const origin = ref();
-    const hoverIndex = ref(0);
-    const selectedIndex = ref(0);
-    const position = ref(["bottom"]);
-    const visible = ref(false);
-    const inputValue = ref(props.modelValue);
-    const loading2 = ref(props.loading);
+    const overlayRef = ref();
+    const states = useSelectStates();
     const {
-      normalizeOptions: normalizeOptions2
-    } = useSelect$3(props);
-    const searchFn = props.searchFn || ((option2, term) => option2.label.toLocaleLowerCase().includes(term.trim().toLocaleLowerCase()));
+      appendToBody,
+      disabled,
+      modelValue,
+      position,
+      placeholder
+    } = toRefs(props);
     const {
-      filteredOptions
-    } = useFilterOptions(props.enableLazyLoad, normalizeOptions2, inputValue, searchFn);
+      onInput,
+      onMouseenter,
+      onMouseleave,
+      setSoftFocus,
+      handleBlur,
+      handleFocus,
+      handleClear
+    } = useInputEvent(inputRef, props, states, ctx2);
     const {
-      getOptionValue
-    } = useCacheFilteredOptions(filteredOptions);
-    const emptyText = computed(() => {
-      let text;
-      if (props.enableLazyLoad) {
-        text = t("noData");
-      } else {
-        text = t("noRelatedRecords");
-      }
-      return text;
-    });
-    watch(() => props.loading, (newVal) => {
-      loading2.value = newVal;
-    });
-    const toggleMenu = () => {
-      visible.value = !visible.value;
-    };
-    const closeMenu = () => {
-      visible.value = false;
-    };
+      filteredOptions,
+      emptyText,
+      showClearable,
+      toggleMenu,
+      handleOptionSelect,
+      scrollToItem
+    } = useSelect$3(dropdownRef, props, states, setSoftFocus, ctx2);
     const {
-      loadMore
-    } = useLazyLoad$2(dropdownRef, props.enableLazyLoad, ctx2);
+      onKeydown
+    } = useKeyboardSelect(props, states, filteredOptions, scrollToItem, handleOptionSelect);
     const {
-      handleInput
-    } = useInput(inputValue, ctx2);
-    const handleClick = (option2, index2) => {
-      const {
-        disabledKey
-      } = props;
-      if (disabledKey && !!option2[disabledKey]) {
-        return;
-      }
-      inputValue.value = option2.label;
-      hoverIndex.value = selectedIndex.value;
-      selectedIndex.value = index2;
-      const value = getOptionValue(option2);
-      ctx2.emit("update:modelValue", value + "");
-      closeMenu();
-    };
+      loadMore
+    } = useLazyLoad$2(dropdownRef, props, ctx2);
+    provide(SELECT_KEY, {
+      dropdownRef,
+      disabledKey: props.disabledKey,
+      modelValue,
+      inputValue: toRef(states, "inputValue"),
+      query: toRef(states, "query"),
+      hoveringIndex: toRef(states, "hoveringIndex"),
+      loading: toRef(props, "loading"),
+      emptyText,
+      loadMore,
+      handleOptionSelect,
+      setSoftFocus
+    });
+    onClickOutside(originRef, () => {
+      states.visible = false;
+      states.isFocus = false;
+    }, {
+      ignore: [overlayRef]
+    });
     const {
-      handleKeydown
-    } = useKeyboardSelect(dropdownRef, hoverIndex, filteredOptions, props.disabledKey, visible, loading2, handleClick, toggleMenu, closeMenu);
-    const handleClear = () => {
-      inputValue.value = "";
-      ctx2.emit("update:modelValue", "");
-    };
-    const getItemCls = (option2, index2) => {
-      const {
-        disabledKey
-      } = props;
-      return className$2(`devui-dropdown-item`, {
-        disabled: disabledKey ? !!option2[disabledKey] : false,
-        selected: filteredOptions.value.length === 1 || index2 === selectedIndex.value,
-        [`${ns2.em("dropdown", "bg")}`]: index2 === hoverIndex.value
+      inputClasses,
+      inputWrapperClasses,
+      inputInnerClasses,
+      inputSuffixClasses
+    } = useInputRender(props, states);
+    const renderBasicDropdown = () => {
+      return createVNode(Transition, {
+        "name": "fade"
+      }, {
+        default: () => [createVNode(FlexibleOverlay, {
+          "ref": overlayRef,
+          "modelValue": states.visible,
+          "onUpdate:modelValue": ($event) => states.visible = $event,
+          "origin": originRef.value,
+          "position": position.value,
+          "style": {
+            zIndex: "var(--devui-z-index-dropdown, 1052)"
+          }
+        }, {
+          default: () => [createVNode(Dropdown, {
+            "options": filteredOptions.value,
+            "width": props.width,
+            "maxHeight": props.maxHeight
+          }, ctx2.slots)]
+        })]
       });
     };
+    const renderDropdown = () => {
+      if (appendToBody.value) {
+        let _slot;
+        return createVNode(Teleport, {
+          "to": "body"
+        }, _isSlot$7(_slot = renderBasicDropdown()) ? _slot : {
+          default: () => [_slot]
+        });
+      } else {
+        return renderBasicDropdown();
+      }
+    };
     return () => {
-      const selectCls = className$2(`${ns2.b()} devui-form-group devui-has-feedback ${inputValue.value && props.allowClear && "allow-clear"}`, {
-        [`${ns2.m("open")}`]: visible.value === true
-      });
-      const inputCls = className$2(`devui-form-control devui-dropdown-origin`, {
-        "devui-dropdown-origin-open": visible.value === true
-      });
-      return withDirectives(createVNode("div", {
-        "class": selectCls,
-        "ref": origin,
+      return createVNode("div", {
+        "ref": originRef,
+        "class": ns2.b(),
         "style": {
           width: props.width + "px"
-        }
+        },
+        "onClick": toggleMenu
+      }, [createVNode("div", {
+        "class": inputClasses.value,
+        "onMouseenter": onMouseenter,
+        "onMouseleave": onMouseleave
+      }, [createVNode("div", {
+        "class": inputWrapperClasses.value
       }, [createVNode("input", {
-        "class": inputCls,
-        "onClick": withModifiers(toggleMenu, ["self"]),
-        "onInput": handleInput,
-        "onKeydown": handleKeydown,
-        "value": inputValue.value,
-        "disabled": props.disabled,
-        "placeholder": props.placeholder,
-        "type": "text"
+        "ref": inputRef,
+        "class": inputInnerClasses.value,
+        "disabled": disabled.value,
+        "placeholder": placeholder.value,
+        "value": states.inputValue,
+        "type": "text",
+        "onInput": onInput,
+        "onFocus": handleFocus,
+        "onBlur": handleBlur,
+        "onKeydown": onKeydown
       }, null), createVNode("span", {
-        "class": "devui-form-control-feedback"
-      }, [createVNode("span", {
-        "class": "devui-select-clear-icon",
-        "onClick": handleClear
-      }, [createVNode(resolveComponent("d-icon"), {
+        "class": inputSuffixClasses.value
+      }, [withDirectives(createVNode("span", {
+        "class": ns2.e("clear-icon"),
+        "onClick": withModifiers(handleClear, ["stop"])
+      }, [createVNode(DIcon, {
         "name": "icon-remove"
-      }, null)]), createVNode("span", {
-        "class": "devui-select-chevron-icon"
-      }, [createVNode(resolveComponent("d-icon"), {
+      }, null)]), [[vShow, showClearable.value]]), withDirectives(createVNode("span", {
+        "class": ns2.e("arrow-icon")
+      }, [createVNode(DIcon, {
         "name": "select-arrow"
-      }, null)])]), createVNode(Teleport, {
-        "to": "body"
-      }, {
-        default: () => [createVNode(Transition, {
-          "name": "fade"
-        }, {
-          default: () => [createVNode(FlexibleOverlay, {
-            "origin": origin.value,
-            "modelValue": visible.value,
-            "onUpdate:modelValue": ($event) => visible.value = $event,
-            "position": position.value,
-            "style": {
-              zIndex: "var(--devui-z-index-dropdown, 1052)"
-            }
-          }, {
-            default: () => [createVNode("div", {
-              "style": {
-                width: props.width + "px"
-              },
-              "class": `${ns2.e("menu")}`
-            }, [withDirectives(createVNode("div", {
-              "class": `devui-dropdown-menu`
-            }, [createVNode("ul", {
-              "ref": dropdownRef,
-              "class": `${ns2.em("list", "unstyled")} devui-scrollbar scroll-height`,
-              "style": {
-                maxHeight: props.maxHeight + "px"
-              },
-              "onScroll": loadMore
-            }, [filteredOptions.value.map((option2, index2) => {
-              return createVNode("li", {
-                "class": getItemCls(option2, index2),
-                "onClick": (e) => {
-                  e.stopPropagation();
-                  handleClick(option2, index2);
-                }
-              }, [ctx2.slots.item ? ctx2.slots.item(option2) : option2.label]);
-            }), withDirectives(createVNode("div", {
-              "class": "devui-no-data-tip"
-            }, [ctx2.slots.noResultItem ? ctx2.slots.noResultItem(inputValue.value) : emptyText.value]), [[vShow, !filteredOptions.value.length]])])]), [[vShow, visible.value], [resolveDirective("loading"), props.loading]])])]
-          })]
-        })]
-      })]), [[resolveDirective("click-outside"), closeMenu]]);
+      }, null)]), [[vShow, !showClearable.value]])])])]), renderDropdown()]);
     };
   }
 });
@@ -22547,13 +22842,13 @@ function useExpose(ctx2) {
   const focus = () => {
     inputRef.value.focus();
   };
-  const blur = () => {
+  const blur2 = () => {
     inputRef.value.blur();
   };
   const select2 = () => {
     inputRef.value.select();
   };
-  ctx2.expose({ focus, blur, select: select2 });
+  ctx2.expose({ focus, blur: blur2, select: select2 });
   return { inputRef };
 }
 function getPrecision(pre) {
@@ -24769,19 +25064,23 @@ var Modal = defineComponent({
       const typeList = [{
         type: "success",
         text: "\u6210\u529F",
-        icon: "right-o"
+        icon: "right-o",
+        color: "var(--devui-success)"
       }, {
         type: "failed",
         text: "\u9519\u8BEF",
-        icon: "error-o"
+        icon: "error-o",
+        color: "var(--devui-danger)"
       }, {
         type: "warning",
         text: "\u8B66\u544A",
-        icon: "warning-o"
+        icon: "warning-o",
+        color: "var(--devui-warning)"
       }, {
         type: "info",
         text: "\u4FE1\u606F",
-        icon: "info-o"
+        icon: "info-o",
+        color: "var(--devui-info)"
       }];
       const item = typeList.find((i) => i.type === props.type);
       return createVNode("div", {
@@ -24795,7 +25094,8 @@ var Modal = defineComponent({
         }, [createVNode("div", {
           "class": "type-content-icon"
         }, [createVNode(DIcon, {
-          "name": item == null ? void 0 : item.icon
+          "name": item == null ? void 0 : item.icon,
+          "color": item == null ? void 0 : item.color
         }, null)]), createVNode("div", {
           "class": "type-content-text"
         }, [item == null ? void 0 : item.text])])]
@@ -25354,7 +25654,7 @@ function className$1(classStr, classOpt) {
   }
   return classname;
 }
-function useSelect$2(props, selectRef, ctx2, focus, blur, isSelectFocus, t) {
+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("select");
@@ -25533,7 +25833,7 @@ function useSelect$2(props, selectRef, ctx2, focus, blur, isSelectFocus, t) {
     ctx2.emit("clear");
     if (isOpen.value) {
       handleClose();
-      blur();
+      blur2();
     }
   };
   const tagDelete = (data) => {
@@ -26214,14 +26514,14 @@ function useSelectFunction(props, selectRef) {
     }
     (_a = inputRef == null ? void 0 : inputRef.value) == null ? void 0 : _a.focus();
   };
-  const blur = () => {
+  const blur2 = () => {
     var _a;
     if (!props.disabled) {
       isSelectFocus.value = false;
     }
     (_a = inputRef == null ? void 0 : inputRef.value) == null ? void 0 : _a.blur();
   };
-  return { isSelectFocus, focus, blur };
+  return { isSelectFocus, focus, blur: blur2 };
 }
 var select = "";
 var Select = defineComponent({
@@ -26235,7 +26535,7 @@ var Select = defineComponent({
     const {
       isSelectFocus,
       focus,
-      blur
+      blur: blur2
     } = useSelectFunction(props, selectRef);
     const {
       selectDisabled,
@@ -26260,7 +26560,7 @@ var Select = defineComponent({
       isDisabled,
       toggleChange,
       isShowCreateOption
-    } = useSelect$2(props, selectRef, ctx2, focus, blur, isSelectFocus, t);
+    } = useSelect$2(props, selectRef, ctx2, focus, blur2, isSelectFocus, t);
     const scrollbarNs = useNamespace("scrollbar");
     const ns2 = useNamespace("select");
     const dropdownCls = ns2.e("dropdown");
@@ -26271,7 +26571,7 @@ var Select = defineComponent({
     const dropdownEmptyCls = ns2.em("dropdown", "empty");
     ctx2.expose({
       focus,
-      blur,
+      blur: blur2,
       toggleChange
     });
     const isRender = ref(false);
@@ -26876,7 +27176,7 @@ var PageSize = defineComponent({
     const onDropdownToggle = (e) => {
       iconRotate.value = e ? 180 : 0;
     };
-    return () => createVNode(Fragment, null, [createVNode(Dropdown, {
+    return () => createVNode(Fragment, null, [createVNode(Dropdown$1, {
       "position": ["bottom", "top"],
       "class": ns2.e("size-list"),
       "onToggle": onDropdownToggle
@@ -28932,6 +29232,7 @@ var DSearch = defineComponent({
         size: searchSize.value,
         disabled: props.disabled,
         autoFocus: props.autoFocus,
+        maxlength: props.maxLength,
         modelValue: keywords.value,
         placeholder: props.placeholder || t("placeholder"),
         onKeydown: onInputKeydown,
@@ -32015,7 +32316,7 @@ var Filter = defineComponent({
       handleConfirm,
       handleSelect
     } = useFilterRender(ctx2);
-    return () => createVNode(Dropdown, {
+    return () => createVNode(Dropdown$1, {
       "visible": showMenu.value,
       "trigger": "manually",
       "close-scope": "none",
@@ -38733,9 +39034,9 @@ const installs = [
   VirtualListInstall
 ];
 var vueDevui = {
-  version: "1.4.0",
+  version: "1.5.0",
   install(app) {
     installs.forEach((p) => app.use(p));
   }
 };
-export { Accordion, Alert, Anchor, Aside, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, DButton as Button, ButtonGroup, Card, Carousel, CarouselItem, Cascader, Checkbox, CheckboxButton, DCheckboxGroup as CheckboxGroup, Col, Collapse, CollapseItem, ColorPicker, Column, Comment, Content, Countdown, DRangeDatePickerPro, DatePicker, DatePickerPro, DraggableDirective, Drawer, DrawerService, Dropdown, DropdownMenu, DroppableDirective, EditableSelect, FixedOverlay, FlexibleOverlay, Footer$1 as Footer, Form, FormItem, FormOperation, Fullscreen, Gantt, Header$1 as Header, DIcon as Icon, IconGroup, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputIcon, InputNumber, Layout, List, ListItem, LoadingDirective, loading as LoadingService, Mention, Menu, MenuItem, Message, Modal, 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, 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 };
+export { Accordion, Alert, Anchor, Aside, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, DButton as Button, ButtonGroup, Card, Carousel, CarouselItem, Cascader, Checkbox, CheckboxButton, DCheckboxGroup as CheckboxGroup, Col, Collapse, CollapseItem, ColorPicker, Column, Comment, Content, Countdown, DRangeDatePickerPro, DatePicker, DatePickerPro, DraggableDirective, Drawer, DrawerService, Dropdown$1 as Dropdown, DropdownMenu, DroppableDirective, EditableSelect, FixedOverlay, FlexibleOverlay, Footer$1 as Footer, Form, FormItem, FormOperation, Fullscreen, Gantt, Header$1 as Header, DIcon as Icon, IconGroup, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputIcon, InputNumber, Layout, List, ListItem, LoadingDirective, loading as LoadingService, Mention, Menu, MenuItem, Message, Modal, 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, 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 };