vue-devui 1.0.0-rc.11 → 1.0.0-rc.14

package/time-select/index.es.js

@@ -29,9 +29,177 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { defineComponent, watch, provide, reactive, toRefs, createVNode, onUnmounted, Transition, mergeProps, ref, unref, nextTick, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, Teleport, createTextVNode, onBeforeUnmount, toRef, onBeforeMount, vShow, resolveDynamicComponent, resolveComponent } from "vue";
+import { ref, reactive, defineComponent, watch, provide, toRefs, createVNode, onUnmounted, Transition, mergeProps, unref, nextTick, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, Teleport, createTextVNode, onBeforeUnmount, toRef, onBeforeMount, vShow, resolveComponent, getCurrentInstance } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
+function deepAssign(...objects) {
+  const isObject2 = (obj) => obj && typeof obj === "object";
+  return objects.reduce((prev, from) => {
+    Object.keys(from).forEach((key) => {
+      const pVal = prev[key];
+      const oVal = from[key];
+      if (Array.isArray(pVal) && Array.isArray(oVal)) {
+        prev[key] = Array.from(/* @__PURE__ */ new Set([...oVal, ...pVal]));
+      } else if (isObject2(pVal) && isObject2(oVal)) {
+        prev[key] = deepAssign(pVal, oVal);
+      } else {
+        prev[key] = oVal;
+      }
+    });
+    return prev;
+  }, {});
+}
+var zhCN = {
+  pagination: {
+    totalItemText: "\u6240\u6709\u6761\u76EE",
+    goToText: "\u8DF3\u81F3"
+  },
+  accordion: {
+    loading: "\u52A0\u8F7D\u4E2D",
+    noData: "\u6CA1\u6709\u6570\u636E"
+  },
+  autoCompleteDropdown: {
+    latestInput: "\u6700\u8FD1\u8F93\u5165"
+  },
+  cascaderList: {
+    noData: "\u6CA1\u6709\u6570\u636E"
+  },
+  colorPicker: {
+    foundationPanel: "\u57FA\u7840\u9762\u677F",
+    advancedPanel: "\u9AD8\u7EA7\u9762\u677F"
+  },
+  datePickerPro: {
+    ok: "\u786E\u5B9A",
+    placeholder: "\u8BF7\u9009\u62E9\u65E5\u671F",
+    month1: "1\u6708",
+    month2: "2\u6708",
+    month3: "3\u6708",
+    month4: "4\u6708",
+    month5: "5\u6708",
+    month6: "6\u6708",
+    month7: "7\u6708",
+    month8: "8\u6708",
+    month9: "9\u6708",
+    month10: "10\u6708",
+    month11: "11\u6708",
+    month12: "12\u6708",
+    year: "\u5E74",
+    startPlaceholder: "\u8BF7\u9009\u62E9\u5F00\u59CB\u65E5\u671F",
+    endPlaceholder: "\u8BF7\u9009\u62E9\u7ED3\u675F\u65E5\u671F",
+    getWeekDays() {
+      return ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
+    },
+    getTimeArr() {
+      return ["\u65F6", "\u5206", "\u79D2"];
+    },
+    getYearMonthStr(year, month) {
+      return `${year}\u5E74${month}\u6708`;
+    }
+  },
+  editableSelect: {
+    noRelatedRecords: "\u627E\u4E0D\u5230\u76F8\u5173\u8BB0\u5F55",
+    noData: "\u6CA1\u6709\u6570\u636E"
+  },
+  input: {
+    placeholder: "\u8BF7\u8F93\u5165"
+  },
+  splitterBar: {
+    collapse: "\u6536\u8D77",
+    expand: "\u5C55\u5F00"
+  },
+  stepsGuide: {
+    previous: "\u4E0A\u4E00\u6B65",
+    continue: "\u6211\u77E5\u9053\u5566\uFF0C\u7EE7\u7EED",
+    ok: "\u6211\u77E5\u9053\u5566"
+  },
+  table: {
+    selectAll: "\u5168\u9009",
+    ok: "\u786E\u5B9A"
+  },
+  timePopup: {
+    ok: "\u786E\u5B9A"
+  },
+  transfer: {
+    unit: "\u9879",
+    panelUnit: "\u9879",
+    headerUnit: "\u9879",
+    noData: "\u6682\u65E0\u6570\u636E",
+    placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD\u641C\u7D22"
+  },
+  tree: {
+    loading: "\u52A0\u8F7D\u4E2D",
+    newNode: "\u65B0\u8282\u70B9",
+    selectPlaceholder: "\u8BF7\u9009\u62E9"
+  },
+  upload: {
+    placeholder: "\u9009\u62E9\u6587\u4EF6",
+    getExistSameNameFilesMsg(sameNames) {
+      return `\u60A8\u4E0A\u4F20\u7684 "${sameNames}" \u5B58\u5728\u91CD\u540D\u6587\u4EF6, \u8BF7\u91CD\u65B0\u9009\u62E9\u6587\u4EF6`;
+    },
+    getAllFilesBeyondMaximalFileSizeMsg(maximalSize) {
+      return `\u6700\u5927\u652F\u6301\u4E0A\u4F20${maximalSize}MB\u7684\u6587\u4EF6, \u60A8\u672C\u6B21\u4E0A\u4F20\u7684\u6240\u6709\u6587\u4EF6\u8D85\u8FC7\u53EF\u4E0A\u4F20\u6587\u4EF6\u5927\u5C0F`;
+    },
+    getBeyondMaximalFileSizeMsg(filename, maximalSize) {
+      return `\u6700\u5927\u652F\u6301\u4E0A\u4F20${maximalSize}MB\u7684\u6587\u4EF6, \u60A8\u4E0A\u4F20\u7684\u6587\u4EF6"${filename}"\u8D85\u8FC7\u53EF\u4E0A\u4F20\u6587\u4EF6\u5927\u5C0F`;
+    },
+    getNotAllowedFileTypeMsg(filename, scope) {
+      return `\u652F\u6301\u7684\u6587\u4EF6\u7C7B\u578B: "${scope}", \u60A8\u4E0A\u4F20\u7684\u6587\u4EF6"${filename}"\u4E0D\u5728\u5141\u8BB8\u8303\u56F4\u5185\uFF0C\u8BF7\u91CD\u65B0\u9009\u62E9\u6587\u4EF6`;
+    }
+  },
+  search: {
+    placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57"
+  },
+  select: {
+    placeholder: "\u8BF7\u9009\u62E9",
+    noDataText: "\u65E0\u6570\u636E",
+    noMatchText: "\u627E\u4E0D\u5230\u76F8\u5173\u8BB0\u5F55",
+    loadingText: "\u52A0\u8F7D\u4E2D..."
+  },
+  tagInput: {
+    maxTagsText: "\u5DF2\u8FBE\u5230\u6700\u5927\u4E2A\u6570\uFF1A"
+  },
+  timeSelect: {
+    placeholder: "\u8BF7\u9009\u62E9\u65F6\u95F4"
+  }
+};
+const lang = ref("zh-CN");
+let langMessages = reactive({
+  [lang.value]: zhCN
+});
+const Locale = {
+  messages() {
+    return langMessages[lang.value];
+  },
+  lang() {
+    return lang.value;
+  },
+  use(newLang, newMessages2) {
+    lang.value = newLang;
+    this.add({ [newLang]: newMessages2 });
+  },
+  add(newMessages2 = {}) {
+    langMessages = deepAssign(langMessages, newMessages2);
+  }
+};
+const camelize = (name) => name.substring(1).replace(/^\S/, (s) => s.toLocaleLowerCase());
+function get(object4, path) {
+  const keys = path.split(".");
+  let result = object4;
+  keys.forEach((key) => {
+    var _a;
+    result = (_a = result[key]) != null ? _a : "";
+  });
+  return result;
+}
+function createI18nTranslate(name, app, newPrefix) {
+  const prefix = newPrefix || camelize(name) + ".";
+  return (path) => {
+    var _a;
+    const messages2 = ((_a = app == null ? void 0 : app.appContext.config.globalProperties.langMessages) == null ? void 0 : _a.value) || Locale.messages();
+    const message = get(messages2, prefix + path) || get(messages2, path);
+    return message;
+  };
+}
 function className(classStr, classOpt) {
   let classname = classStr;
   if (typeof classOpt === "object") {
@@ -786,10 +954,10 @@ var lodash = { exports: {} };
       }();
       var ctxClearTimeout = context.clearTimeout !== root.clearTimeout && context.clearTimeout, ctxNow = Date2 && Date2.now !== root.Date.now && Date2.now, ctxSetTimeout = context.setTimeout !== root.setTimeout && context.setTimeout;
       var nativeCeil = Math2.ceil, nativeFloor = Math2.floor, nativeGetSymbols = Object2.getOwnPropertySymbols, nativeIsBuffer = Buffer2 ? Buffer2.isBuffer : undefined$1, nativeIsFinite = context.isFinite, nativeJoin = arrayProto.join, nativeKeys = overArg(Object2.keys, Object2), nativeMax = Math2.max, nativeMin = Math2.min, nativeNow = Date2.now, nativeParseInt = context.parseInt, nativeRandom = Math2.random, nativeReverse = arrayProto.reverse;
-      var DataView = getNative(context, "DataView"), Map2 = getNative(context, "Map"), Promise2 = getNative(context, "Promise"), Set = getNative(context, "Set"), WeakMap2 = getNative(context, "WeakMap"), nativeCreate = getNative(Object2, "create");
+      var DataView = getNative(context, "DataView"), Map2 = getNative(context, "Map"), Promise2 = getNative(context, "Promise"), Set2 = getNative(context, "Set"), WeakMap2 = getNative(context, "WeakMap"), nativeCreate = getNative(Object2, "create");
       var metaMap = WeakMap2 && new WeakMap2();
       var realNames = {};
-      var dataViewCtorString = toSource(DataView), mapCtorString = toSource(Map2), promiseCtorString = toSource(Promise2), setCtorString = toSource(Set), weakMapCtorString = toSource(WeakMap2);
+      var dataViewCtorString = toSource(DataView), mapCtorString = toSource(Map2), promiseCtorString = toSource(Promise2), setCtorString = toSource(Set2), weakMapCtorString = toSource(WeakMap2);
       var symbolProto = Symbol2 ? Symbol2.prototype : undefined$1, symbolValueOf = symbolProto ? symbolProto.valueOf : undefined$1, symbolToString = symbolProto ? symbolProto.toString : undefined$1;
       function lodash2(value) {
         if (isObjectLike(value) && !isArray(value) && !(value instanceof LazyWrapper)) {
@@ -1145,7 +1313,7 @@ var lodash = { exports: {} };
       function baseAt(object4, paths) {
         var index2 = -1, length = paths.length, result2 = Array2(length), skip = object4 == null;
         while (++index2 < length) {
-          result2[index2] = skip ? undefined$1 : get(object4, paths[index2]);
+          result2[index2] = skip ? undefined$1 : get2(object4, paths[index2]);
         }
         return result2;
       }
@@ -1590,7 +1758,7 @@ var lodash = { exports: {} };
           return matchesStrictComparable(toKey(path), srcValue);
         }
         return function(object4) {
-          var objValue = get(object4, path);
+          var objValue = get2(object4, path);
           return objValue === undefined$1 && objValue === srcValue ? hasIn(object4, path) : baseIsEqual(srcValue, objValue, COMPARE_PARTIAL_FLAG | COMPARE_UNORDERED_FLAG);
         };
       }
@@ -2481,8 +2649,8 @@ var lodash = { exports: {} };
           return func(number4);
         };
       }
-      var createSet = !(Set && 1 / setToArray(new Set([, -0]))[1] == INFINITY) ? noop : function(values2) {
-        return new Set(values2);
+      var createSet = !(Set2 && 1 / setToArray(new Set2([, -0]))[1] == INFINITY) ? noop : function(values2) {
+        return new Set2(values2);
       };
       function createToPairs(keysFunc) {
         return function(object4) {
@@ -2781,7 +2949,7 @@ var lodash = { exports: {} };
         return result2;
       };
       var getTag = baseGetTag;
-      if (DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag || Map2 && getTag(new Map2()) != mapTag || Promise2 && getTag(Promise2.resolve()) != promiseTag || Set && getTag(new Set()) != setTag || WeakMap2 && getTag(new WeakMap2()) != weakMapTag) {
+      if (DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag || Map2 && getTag(new Map2()) != mapTag || Promise2 && getTag(Promise2.resolve()) != promiseTag || Set2 && getTag(new Set2()) != setTag || WeakMap2 && getTag(new WeakMap2()) != weakMapTag) {
         getTag = function(value) {
           var result2 = baseGetTag(value), Ctor = result2 == objectTag ? value.constructor : undefined$1, ctorString = Ctor ? toSource(Ctor) : "";
           if (ctorString) {
@@ -4323,7 +4491,7 @@ var lodash = { exports: {} };
       function functionsIn(object4) {
         return object4 == null ? [] : baseFunctions(object4, keysIn(object4));
       }
-      function get(object4, path, defaultValue) {
+      function get2(object4, path, defaultValue) {
         var result2 = object4 == null ? undefined$1 : baseGet(object4, path);
         return result2 === undefined$1 ? defaultValue : result2;
       }
@@ -5178,7 +5346,7 @@ var lodash = { exports: {} };
       lodash2.forInRight = forInRight;
       lodash2.forOwn = forOwn;
       lodash2.forOwnRight = forOwnRight;
-      lodash2.get = get;
+      lodash2.get = get2;
       lodash2.gt = gt;
       lodash2.gte = gte;
       lodash2.has = has;
@@ -7558,7 +7726,7 @@ function useFormItemValidate(props, _rules) {
         return rule.trigger === triggerVal;
       }
     }).map((_a) => {
-      var _b = _a, { trigger } = _b, rule = __objRest(_b, ["trigger"]);
+      var rule = __objRest(_a, []);
       return rule;
     });
   };
@@ -7734,7 +7902,7 @@ defineComponent({
     };
   }
 });
-function useSelect(props, ctx, focus, blur, isSelectFocus) {
+function useSelect(props, ctx, focus, blur, isSelectFocus, t) {
   const formContext = inject(FORM_TOKEN, void 0);
   const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
   const ns2 = useNamespace("select");
@@ -7742,6 +7910,15 @@ function useSelect(props, ctx, focus, blur, isSelectFocus) {
   const dropdownRef = ref();
   const selectDisabled = computed(() => (formContext == null ? void 0 : formContext.disabled) || props.disabled);
   const selectSize = computed(() => (formContext == null ? void 0 : formContext.size) || props.size);
+  const isObjectOption = ref(false);
+  const originRef = ref();
+  const dropdownWidth = computed(() => {
+    var _a;
+    if (!((_a = originRef == null ? void 0 : originRef.value) == null ? void 0 : _a.clientWidth)) {
+      return "100%";
+    }
+    return originRef.value.clientWidth + "px";
+  });
   const isOpen = ref(false);
   const toggleChange = (bool) => {
     if (selectDisabled.value) {
@@ -7765,6 +7942,7 @@ function useSelect(props, ctx, focus, blur, isSelectFocus) {
       [ns2.m("focus")]: isSelectFocus.value
     });
   });
+  const cacheOptions = /* @__PURE__ */ new Map();
   const mergeOptions = computed(() => {
     const { multiple, modelValue } = props;
     return props.options.map((item) => {
@@ -7788,11 +7966,13 @@ function useSelect(props, ctx, focus, blur, isSelectFocus) {
           option._checked = false;
         }
       }
+      cacheOptions.set(option.value, option);
       return option;
     });
   });
+  const getValuesOption = (values) => values.map((value) => cacheOptions.get(value));
   const injectOptions = ref(/* @__PURE__ */ new Map());
-  const updateInjectOptions = (item, operation) => {
+  const updateInjectOptions = (item, operation, isObject2) => {
     if (operation === "add") {
       injectOptions.value.set(item.value, item);
     } else if (operation === "delete") {
@@ -7800,6 +7980,7 @@ function useSelect(props, ctx, focus, blur, isSelectFocus) {
         injectOptions.value.delete(item.value);
       }
     }
+    isObjectOption.value = isObject2;
   };
   const getInjectOptions = (values) => {
     return values.map((value) => {
@@ -7824,10 +8005,10 @@ function useSelect(props, ctx, focus, blur, isSelectFocus) {
   const inputValue = computed(() => {
     var _a;
     if (props.multiple && Array.isArray(props.modelValue)) {
-      selectedOptions.value = getInjectOptions(props.modelValue).filter((item) => !!item);
+      selectedOptions.value = getInjectOptions(props.modelValue).filter((item) => item ? true : false);
       return selectedOptions.value.map((item) => (item == null ? void 0 : item.name) || (item == null ? void 0 : item.value) || "").join(",");
     } else if (!Array.isArray(props.modelValue)) {
-      selectedOptions.value = getInjectOptions([props.modelValue]).filter((item) => !!item);
+      selectedOptions.value = getInjectOptions([props.modelValue]).filter((item) => item ? true : false);
       return ((_a = selectedOptions.value[0]) == null ? void 0 : _a.name) || "";
     }
     return "";
@@ -7838,7 +8019,26 @@ function useSelect(props, ctx, focus, blur, isSelectFocus) {
     toggleChange(!isOpen.value);
   };
   const isSupportFilter = computed(() => lodash.exports.isFunction(props.filter) || typeof props.filter === "boolean" && props.filter);
-  const valueChange = (item, isObjectOption) => {
+  const getMultipleSelected = (items) => {
+    if (mergeOptions.value.length) {
+      ctx.emit("value-change", getValuesOption(items).filter((item) => item ? true : false));
+    } else if (isObjectOption.value) {
+      const selectItems = getInjectOptions(items).filter((item) => item ? true : false);
+      ctx.emit("value-change", selectItems);
+    } else {
+      ctx.emit("value-change", items);
+    }
+  };
+  const getSingleSelected = (item) => {
+    if (mergeOptions.value.length) {
+      ctx.emit("value-change", getValuesOption([item.value])[0]);
+    } else if (isObjectOption.value) {
+      ctx.emit("value-change", item);
+    } else {
+      ctx.emit("value-change", item.value);
+    }
+  };
+  const valueChange = (item) => {
     const { multiple } = props;
     let { modelValue } = props;
     if (multiple) {
@@ -7848,6 +8048,10 @@ function useSelect(props, ctx, focus, blur, isSelectFocus) {
       if (option) {
         option._checked = !option._checked;
       }
+      const mergeOption = getValuesOption([item.value])[0];
+      if (mergeOption) {
+        mergeOption._checked = !mergeOption._checked;
+      }
       if (index2 > -1) {
         checkedItems.splice(index2, 1);
       } else {
@@ -7861,11 +8065,12 @@ function useSelect(props, ctx, focus, blur, isSelectFocus) {
       if (isSupportFilter.value) {
         focus();
       }
+      getMultipleSelected(checkedItems);
     } else {
       ctx.emit("update:modelValue", item.value);
+      getSingleSelected(item);
       toggleChange(false);
     }
-    ctx.emit("value-change", isObjectOption ? item : item.value);
   };
   const handleClose = () => {
     isOpen.value = false;
@@ -7874,8 +8079,10 @@ function useSelect(props, ctx, focus, blur, isSelectFocus) {
   const handleClear = () => {
     if (props.multiple) {
       ctx.emit("update:modelValue", []);
+      ctx.emit("value-change", []);
     } else {
       ctx.emit("update:modelValue", "");
+      ctx.emit("value-change", "");
     }
     ctx.emit("clear");
     if (isOpen.value) {
@@ -7895,6 +8102,7 @@ function useSelect(props, ctx, focus, blur, isSelectFocus) {
     modelValue = checkedItems;
     ctx.emit("update:modelValue", modelValue);
     ctx.emit("remove-tag", data.value);
+    getMultipleSelected(checkedItems);
   };
   const onFocus = (e) => {
     ctx.emit("focus", e);
@@ -7934,13 +8142,13 @@ function useSelect(props, ctx, focus, blur, isSelectFocus) {
       return label.toString().toLocaleLowerCase().includes(filterQuery.value.toLocaleLowerCase());
     }).length;
     if (isLoading.value) {
-      return props.loadingText;
+      return props.loadingText || t("loadingText");
     }
     if (isSupportFilter.value && filterQuery.value && injectOptionsArray.value.length > 0 && visibleOptionsCount === 0) {
-      return props.noMatchText;
+      return props.noMatchText || t("noMatchText");
     }
     if (injectOptionsArray.value.length === 0) {
-      return props.noDataText;
+      return props.noDataText || t("noDataText");
     }
     return "";
   });
@@ -7964,6 +8172,7 @@ function useSelect(props, ctx, focus, blur, isSelectFocus) {
     selectDisabled,
     selectSize,
     containerRef,
+    originRef,
     dropdownRef,
     isOpen,
     selectCls,
@@ -7974,6 +8183,7 @@ function useSelect(props, ctx, focus, blur, isSelectFocus) {
     emptyText,
     isLoading,
     isShowEmptyText,
+    dropdownWidth,
     onClick,
     handleClear,
     valueChange,
@@ -8011,7 +8221,7 @@ const selectProps = {
   },
   placeholder: {
     type: String,
-    default: "\u8BF7\u9009\u62E9"
+    default: ""
   },
   multiple: {
     type: Boolean,
@@ -8051,11 +8261,11 @@ const selectProps = {
   },
   noDataText: {
     type: String,
-    default: "\u65E0\u6570\u636E"
+    default: ""
   },
   noMatchText: {
     type: String,
-    default: "\u627E\u4E0D\u5230\u76F8\u5173\u8BB0\u5F55"
+    default: ""
   },
   loading: {
     type: Boolean,
@@ -8063,7 +8273,7 @@ const selectProps = {
   },
   loadingText: {
     type: String,
-    default: "\u52A0\u8F7D\u4E2D"
+    default: ""
   },
   onToggleChange: {
     type: Function,
@@ -8102,7 +8312,17 @@ const selectContentProps = {
     default: ""
   }
 };
+const optionGroupProps = {
+  label: {
+    type: String
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+};
 const SELECT_TOKEN = Symbol("dSelect");
+const OPTION_GROUP_TOKEN = Symbol("dOptionGroup");
 const commonProps = {
   name: {
     type: String,
@@ -8559,6 +8779,7 @@ defineComponent({
 function useOption(props) {
   const ns2 = useNamespace("select");
   const select2 = inject(SELECT_TOKEN, null);
+  const optionGroup = inject(OPTION_GROUP_TOKEN, null);
   const currentName = computed(() => {
     return props.name || props.value;
   });
@@ -8580,16 +8801,17 @@ function useOption(props) {
       _checked: false
     };
   });
+  const isDisabled = computed(() => props.disabled || ((optionGroup == null ? void 0 : optionGroup.disabled) ? true : false));
   const isObjectOption = ref(!!props.name);
   const selectOptionCls = computed(() => {
     return className(ns2.e("item"), {
       active: isOptionSelected.value,
-      disabled: props.disabled
+      disabled: isDisabled.value
     });
   });
   const optionSelect = () => {
-    if (!props.disabled) {
-      select2 == null ? void 0 : select2.valueChange(optionItem.value, isObjectOption.value);
+    if (!isDisabled.value) {
+      select2 == null ? void 0 : select2.valueChange(optionItem.value);
     }
   };
   const isVisible = computed(() => {
@@ -8601,10 +8823,10 @@ function useOption(props) {
     }
   });
   onBeforeMount(() => {
-    select2 == null ? void 0 : select2.updateInjectOptions(optionItem.value, "add");
+    select2 == null ? void 0 : select2.updateInjectOptions(optionItem.value, "add", isObjectOption.value);
   });
   onBeforeUnmount(() => {
-    select2 == null ? void 0 : select2.updateInjectOptions(optionItem.value, "delete");
+    select2 == null ? void 0 : select2.updateInjectOptions(optionItem.value, "delete", isObjectOption.value);
   });
   return {
     currentName,
@@ -8636,188 +8858,38 @@ var Option = defineComponent({
     };
   }
 });
-const DEFAULT_PREFIX = "icon";
-const iconProps = {
-  name: {
-    type: String,
-    default: "",
-    required: true
-  },
-  size: {
-    type: [Number, String],
-    default: "inherit"
-  },
-  color: {
-    type: String,
-    default: "inherit"
-  },
-  component: {
-    type: Object,
-    default: null
-  },
-  classPrefix: {
-    type: String,
-    default: DEFAULT_PREFIX
-  },
-  operable: {
-    type: Boolean,
-    default: false
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  rotate: {
-    type: [Number, String]
-  }
-};
-const svgIconProps = {
-  name: {
-    type: String,
-    default: "",
-    required: true
-  },
-  color: {
-    type: String,
-    default: "inherit"
-  },
-  size: {
-    type: [Number, String],
-    default: "inherit"
-  }
-};
-var icon = "";
-var svgIcon = defineComponent({
-  name: "DSvgIcon",
-  props: svgIconProps,
-  setup(props) {
-    const {
-      name,
-      color,
-      size
-    } = toRefs(props);
-    const ns2 = useNamespace("svg-icon");
-    const iconName = computed(() => `#icon-${name.value}`);
-    const iconSize = computed(() => {
-      return typeof size.value === "number" ? `${size.value}px` : size.value;
-    });
-    const styles = {
-      width: iconSize.value,
-      height: iconSize.value
-    };
-    return () => {
-      return createVNode("svg", {
-        "class": ns2.b(),
-        "style": styles
-      }, [createVNode("use", {
-        "xlink:href": iconName.value,
-        "fill": color.value
-      }, null)]);
-    };
-  }
-});
-function isUrl(value) {
-  return /^((http|https):)?\/\//.test(value);
-}
-function useIconDom(props, ctx) {
-  const {
-    component,
-    name,
-    size,
-    color,
-    classPrefix,
-    rotate
-  } = toRefs(props);
-  const ns2 = useNamespace("icon");
-  const iconSize = computed(() => {
-    return typeof size.value === "number" ? `${size.value}px` : size.value;
-  });
-  const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
-  const imgIconDom = () => {
-    return createVNode("img", mergeProps({
-      "src": name.value,
-      "alt": name.value.split("/")[name.value.split("/").length - 1],
-      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns2.m("spin")],
-      "style": {
-        width: iconSize.value || "",
-        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
-      }
-    }, ctx.attrs), null);
-  };
-  const svgIconDom = () => {
-    return createVNode(IconComponent, mergeProps({
-      "name": name.value,
-      "color": color.value,
-      "size": iconSize.value,
-      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns2.m("spin")],
-      "style": {
-        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
-      }
-    }, ctx.attrs), null);
-  };
-  const fontIconDom = () => {
-    const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
-    return createVNode("i", mergeProps({
-      "class": [classPrefix.value, fontIconClass, (rotate == null ? void 0 : rotate.value) === "infinite" && ns2.m("spin")],
-      "style": {
-        fontSize: iconSize.value,
-        color: color.value,
-        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
-      }
-    }, ctx.attrs), null);
-  };
-  const iconDom = () => {
-    return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
-  };
-  return {
-    iconDom
-  };
-}
-var Icon = defineComponent({
-  name: "DIcon",
-  props: iconProps,
-  setup(props, ctx) {
-    const {
-      disabled,
-      operable
-    } = toRefs(props);
-    const {
-      iconDom
-    } = useIconDom(props, ctx);
-    const ns2 = useNamespace("icon");
-    const wrapClassed = computed(() => ({
-      [ns2.e("container")]: true,
-      [ns2.m("disabled")]: disabled.value,
-      [ns2.m("operable")]: operable.value
-    }));
-    const onClick = (e) => {
-      e.stopImmediatePropagation();
-      if (disabled.value) {
-        e.preventDefault();
-      }
-    };
-    return () => {
-      var _a, _b, _c, _d;
-      return createVNode("div", {
-        "class": wrapClassed.value,
-        "onClick": onClick
-      }, [(_b = (_a = ctx.slots).prefix) == null ? void 0 : _b.call(_a), iconDom(), (_d = (_c = ctx.slots).suffix) == null ? void 0 : _d.call(_c)]);
-    };
-  }
-});
-var iconGroup = "";
-defineComponent({
-  name: "DIconGroup",
-  setup(_, ctx) {
-    const ns2 = useNamespace("icon-group");
-    return () => {
-      var _a, _b;
-      return createVNode("div", {
-        "class": ns2.b()
-      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
-    };
-  }
-});
+const AlertCloseIcon = () => createVNode("svg", {
+  "width": "10px",
+  "height": "10px",
+  "viewBox": "0 0 10 10",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg"
+}, [createVNode("g", {
+  "stroke": "none",
+  "stroke-width": "1",
+  "fill": "none",
+  "fill-rule": "evenodd"
+}, [createVNode("g", {
+  "transform": "translate(-3.000000, -3.000000)",
+  "fill-rule": "nonzero"
+}, [createVNode("path", {
+  "d": "M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"
+}, null)])])]);
+const SelectArrowIcon = () => createVNode("svg", {
+  "width": "1em",
+  "height": "1em",
+  "viewBox": "0 0 16 16",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg"
+}, [createVNode("g", {
+  "stroke": "none",
+  "stroke-width": "1",
+  "fill": "none",
+  "fill-rule": "evenodd"
+}, [createVNode("path", {
+  "d": "M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088         7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876         3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6         12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z",
+  "fill-rule": "nonzero"
+}, null)])]);
 const tagProps = {
   type: {
     type: String,
@@ -8945,6 +9017,8 @@ function useSelectContent(props) {
   const ns2 = useNamespace("select");
   const select2 = inject(SELECT_TOKEN);
   const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
+  const app = getCurrentInstance();
+  const t = createI18nTranslate("DSelect", app);
   const searchQuery = ref("");
   const selectedData = computed(() => {
     return (select2 == null ? void 0 : select2.selectedOptions) || [];
@@ -8978,7 +9052,8 @@ function useSelectContent(props) {
       [ns2.em("input", "sm")]: (select2 == null ? void 0 : select2.selectSize) === "sm"
     });
   });
-  const placeholder = computed(() => props.value.length > 0 ? "" : (select2 == null ? void 0 : select2.placeholder) || "");
+  const tagSize = computed(() => (select2 == null ? void 0 : select2.selectSize) || "sm");
+  const placeholder = computed(() => props.value.length > 0 ? "" : (select2 == null ? void 0 : select2.placeholder) || t("placeholder"));
   const isMultiple = computed(() => !!(select2 == null ? void 0 : select2.multiple));
   const handleClear = (e) => {
     e.preventDefault();
@@ -8986,7 +9061,7 @@ function useSelectContent(props) {
     select2 == null ? void 0 : select2.handleClear();
   };
   const tagDelete = (data) => {
-    if (data && data.value) {
+    if (data && (data.value || data.value === 0)) {
       select2 == null ? void 0 : select2.tagDelete(data);
     }
   };
@@ -9013,6 +9088,7 @@ function useSelectContent(props) {
     isReadOnly,
     selectionCls,
     inputCls,
+    tagSize,
     placeholder,
     isMultiple,
     handleClear,
@@ -9047,6 +9123,7 @@ var SelectContent = defineComponent({
       isReadOnly,
       selectionCls,
       inputCls,
+      tagSize,
       placeholder,
       isMultiple,
       handleClear,
@@ -9067,7 +9144,8 @@ var SelectContent = defineComponent({
           e.stopPropagation();
           tagDelete(item);
         },
-        "key": item.value
+        "key": item.value,
+        "size": tagSize.value
       }, {
         default: () => [item.name]
       })), isSupportCollapseTags.value && selectedData.value.length >= 1 && createVNode(Tag, {
@@ -9076,14 +9154,17 @@ var SelectContent = defineComponent({
           e.preventDefault();
           e.stopPropagation();
           tagDelete(selectedData.value[0]);
-        }
+        },
+        "size": tagSize.value
       }, {
         default: () => [selectedData.value[0].name]
       }), isSupportCollapseTags.value && selectedData.value.length > 1 && createVNode(Popover, {
         "trigger": "hover",
         "disabled": isDisabledTooltip.value
       }, {
-        default: () => createVNode(Tag, null, {
+        default: () => createVNode(Tag, {
+          "size": tagSize.value
+        }, {
           default: () => [`+${selectedData.value.length - 1}`]
         }),
         content: () => createVNode("div", null, [selectedData.value.map((item) => createVNode(Tag, {
@@ -9093,7 +9174,8 @@ var SelectContent = defineComponent({
             e.stopPropagation();
             tagDelete(item);
           },
-          "key": item.value
+          "key": item.value,
+          "size": tagSize.value
         }, {
           default: () => [item.name]
         }))])
@@ -9124,13 +9206,9 @@ var SelectContent = defineComponent({
       }, null), createVNode("span", {
         "onClick": handleClear,
         "class": clearCls.value
-      }, [createVNode(Icon, {
-        "name": "close"
-      }, null)]), createVNode("span", {
+      }, [createVNode(AlertCloseIcon, null, null)]), createVNode("span", {
         "class": arrowCls.value
-      }, [createVNode(Icon, {
-        "name": "select-arrow"
-      }, null)])]);
+      }, [createVNode(SelectArrowIcon, null, null)])]);
     };
   }
 });
@@ -9163,6 +9241,8 @@ var Select = defineComponent({
   props: selectProps,
   emits: ["toggle-change", "value-change", "update:modelValue", "focus", "blur", "remove-tag", "clear"],
   setup(props, ctx) {
+    const app = getCurrentInstance();
+    const t = createI18nTranslate("DSelect", app);
     const selectRef = ref();
     const {
       isSelectFocus,
@@ -9173,6 +9253,7 @@ var Select = defineComponent({
       selectDisabled,
       selectSize,
       containerRef,
+      originRef,
       dropdownRef,
       isOpen,
       selectCls,
@@ -9183,6 +9264,7 @@ var Select = defineComponent({
       emptyText,
       isLoading,
       isShowEmptyText,
+      dropdownWidth,
       onClick,
       valueChange,
       handleClear,
@@ -9194,7 +9276,7 @@ var Select = defineComponent({
       isDisabled,
       toggleChange,
       isShowCreateOption
-    } = useSelect(props, ctx, focus, blur, isSelectFocus);
+    } = useSelect(props, ctx, focus, blur, isSelectFocus, t);
     const scrollbarNs = useNamespace("scrollbar");
     const ns2 = useNamespace("select");
     const dropdownCls = ns2.e("dropdown");
@@ -9208,6 +9290,11 @@ var Select = defineComponent({
       blur,
       toggleChange
     });
+    const isRender = ref(false);
+    const position = ref(["bottom-start", "top-start"]);
+    onMounted(() => {
+      isRender.value = true;
+    });
     provide(SELECT_TOKEN, reactive(__spreadProps(__spreadValues({}, toRefs(props)), {
       selectDisabled,
       selectSize,
@@ -9227,47 +9314,83 @@ var Select = defineComponent({
         "class": selectCls.value,
         "ref": containerRef,
         "onClick": onClick
+      }, [createVNode("div", {
+        "ref": originRef
       }, [createVNode(SelectContent, {
         "ref": selectRef,
         "value": inputValue.value
-      }, null), createVNode(Transition, {
-        "name": "fade",
-        "ref": dropdownRef
+      }, null)]), createVNode(Transition, {
+        "name": "fade"
       }, {
-        default: () => {
-          var _a, _b, _c, _d;
-          return [withDirectives(createVNode("div", {
-            "class": dropdownCls
-          }, [withDirectives(createVNode("ul", {
-            "class": listCls
-          }, [isShowCreateOption.value && createVNode(Option, {
-            "value": filterQuery.value,
-            "name": filterQuery.value,
-            "create": true
-          }, {
-            default: () => [props.multiple ? createVNode(Checkbox, {
-              "modelValue": false,
-              "label": filterQuery.value
-            }, null) : filterQuery.value]
-          }), ((_a = ctx.slots) == null ? void 0 : _a.default) && ctx.slots.default(), !((_b = ctx.slots) == null ? void 0 : _b.default) && mergeOptions.value.length >= 1 && mergeOptions.value.map((item, i) => createVNode(Option, {
-            "key": i,
-            "value": item.value,
-            "name": item.name,
-            "disabled": isDisabled(item)
-          }, {
-            default: () => [props.multiple ? createVNode(Checkbox, {
-              "modelValue": item._checked,
-              "label": item.name,
+        default: () => [createVNode(FlexibleOverlay, {
+          "modelValue": isRender.value,
+          "onUpdate:modelValue": ($event) => isRender.value = $event,
+          "ref": dropdownRef,
+          "origin": originRef.value,
+          "align": "start",
+          "position": position.value,
+          "style": {
+            visibility: isOpen.value ? "visible" : "hidden",
+            "z-index": isOpen.value ? 1e3 : -1
+          }
+        }, {
+          default: () => {
+            var _a, _b, _c, _d;
+            return [createVNode("div", {
+              "class": dropdownCls,
+              "style": {
+                width: `${dropdownWidth.value}`,
+                visibility: isOpen.value ? "visible" : "hidden"
+              }
+            }, [withDirectives(createVNode("ul", {
+              "class": listCls
+            }, [isShowCreateOption.value && createVNode(Option, {
+              "value": filterQuery.value,
+              "name": filterQuery.value,
+              "create": true
+            }, {
+              default: () => [props.multiple ? createVNode(Checkbox, {
+                "modelValue": false,
+                "label": filterQuery.value
+              }, null) : filterQuery.value]
+            }), ((_a = ctx.slots) == null ? void 0 : _a.default) && ctx.slots.default(), !((_b = ctx.slots) == null ? void 0 : _b.default) && mergeOptions.value.length >= 1 && mergeOptions.value.map((item, i) => createVNode(Option, {
+              "key": i,
+              "value": item.value,
+              "name": item.name,
               "disabled": isDisabled(item)
-            }, null) : item.name || item.value]
-          }))]), [[vShow, !isLoading.value]]), isShowEmptyText.value && createVNode("div", null, [((_c = ctx.slots) == null ? void 0 : _c.empty) && ctx.slots.empty(), !((_d = ctx.slots) == null ? void 0 : _d.empty) && createVNode("p", {
-            "class": dropdownEmptyCls
-          }, [emptyText.value])])]), [[vShow, isOpen.value]])];
-        }
+            }, {
+              default: () => [props.multiple ? createVNode(Checkbox, {
+                "modelValue": item._checked,
+                "label": item.name,
+                "disabled": isDisabled(item)
+              }, null) : item.name || item.value]
+            }))]), [[vShow, !isLoading.value]]), isShowEmptyText.value && createVNode("div", null, [((_c = ctx.slots) == null ? void 0 : _c.empty) && ctx.slots.empty(), !((_d = ctx.slots) == null ? void 0 : _d.empty) && createVNode("p", {
+              "class": dropdownEmptyCls
+            }, [emptyText.value])])])];
+          }
+        })]
       })]);
     };
   }
 });
+defineComponent({
+  name: "DOptionGroup",
+  props: optionGroupProps,
+  setup(props, ctx) {
+    const ns2 = useNamespace("select");
+    provide(OPTION_GROUP_TOKEN, reactive(__spreadValues({}, toRefs(props))));
+    return () => {
+      var _a;
+      return createVNode("ul", {
+        "class": ns2.e("group")
+      }, [createVNode("li", {
+        "class": ns2.e("group-title")
+      }, [props.label || ""]), createVNode("li", null, [createVNode("ul", {
+        "class": ns2.e("group-content")
+      }, [((_a = ctx.slots) == null ? void 0 : _a.default) && ctx.slots.default()])])]);
+    };
+  }
+});
 const timeSelectProps = {
   modelValue: {
     type: String,
@@ -9299,7 +9422,7 @@ const timeSelectProps = {
   },
   placeholder: {
     type: String,
-    default: "\u8BF7\u9009\u62E9\u65F6\u95F4"
+    default: ""
   },
   size: {
     type: String,
@@ -9423,6 +9546,8 @@ var TimeSelect = defineComponent({
   props: timeSelectProps,
   emits: ["change", "blur", "focus", "update:modelValue"],
   setup(props, ctx) {
+    const app = getCurrentInstance();
+    const t = createI18nTranslate("DTimeSelect", app);
     const {
       options,
       changeData,
@@ -9437,7 +9562,7 @@ var TimeSelect = defineComponent({
         "modelValue": props.modelValue,
         "options": options.value,
         "onValueChange": changeData,
-        "placeholder": props.placeholder,
+        "placeholder": props.placeholder || t("placeholder"),
         "option-disabled-key": "disabled",
         "disabled": props.disabled,
         "allow-clear": props.clearable,