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

package/select/index.es.js

@@ -29,7 +29,7 @@ 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 { 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, resolveComponent, getCurrentInstance } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 function className(classStr, classOpt) {
@@ -1145,7 +1145,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 +1590,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);
         };
       }
@@ -4323,7 +4323,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 +5178,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;
@@ -7734,7 +7734,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 +7742,7 @@ 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 isOpen = ref(false);
   const toggleChange = (bool) => {
     if (selectDisabled.value) {
@@ -7765,6 +7766,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 +7790,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 +7804,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 +7829,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 +7843,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 +7872,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 +7889,12 @@ function useSelect(props, ctx, focus, blur, isSelectFocus) {
       if (isSupportFilter.value) {
         focus();
       }
+      getMultipleSelected(checkedItems);
     } else {
       ctx.emit("update:modelValue", item.value);
       toggleChange(false);
+      getSingleSelected(item);
     }
-    ctx.emit("value-change", isObjectOption ? item : item.value);
   };
   const handleClose = () => {
     isOpen.value = false;
@@ -7874,8 +7903,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 +7926,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 +7966,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 "";
   });
@@ -8011,7 +8043,7 @@ const selectProps = {
   },
   placeholder: {
     type: String,
-    default: "\u8BF7\u9009\u62E9"
+    default: ""
   },
   multiple: {
     type: Boolean,
@@ -8051,11 +8083,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 +8095,7 @@ const selectProps = {
   },
   loadingText: {
     type: String,
-    default: "\u52A0\u8F7D\u4E2D"
+    default: ""
   },
   onToggleChange: {
     type: Function,
@@ -8102,7 +8134,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 +8601,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 +8623,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 +8645,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 +8680,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,
@@ -8941,10 +8835,30 @@ var Tag = defineComponent({
     };
   }
 });
+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) => {
+    const messages2 = app == null ? void 0 : app.appContext.config.globalProperties.langMessages.value;
+    const message = get(messages2, prefix + path) || get(messages2, path);
+    return message;
+  };
+}
 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 +8892,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 +8901,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 +8928,7 @@ function useSelectContent(props) {
     isReadOnly,
     selectionCls,
     inputCls,
+    tagSize,
     placeholder,
     isMultiple,
     handleClear,
@@ -9047,6 +8963,7 @@ var SelectContent = defineComponent({
       isReadOnly,
       selectionCls,
       inputCls,
+      tagSize,
       placeholder,
       isMultiple,
       handleClear,
@@ -9067,7 +8984,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,7 +8994,8 @@ 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, {
@@ -9093,7 +9012,8 @@ var SelectContent = defineComponent({
             e.stopPropagation();
             tagDelete(item);
           },
-          "key": item.value
+          "key": item.value,
+          "size": tagSize.value
         }, {
           default: () => [item.name]
         }))])
@@ -9124,13 +9044,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 +9079,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,
@@ -9194,7 +9112,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");
@@ -9268,13 +9186,32 @@ var Select = defineComponent({
     };
   }
 });
+var OptionGroup = 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()])])]);
+    };
+  }
+});
 var index = {
   title: "Select \u4E0B\u62C9\u6846",
   category: "\u6570\u636E\u5F55\u5165",
-  status: "90%",
+  status: "100%",
   install(app) {
     app.component(Select.name, Select);
     app.component(Option.name, Option);
+    app.component(OptionGroup.name, OptionGroup);
   }
 };
-export { Option, Select, index as default };
+export { Option, OptionGroup, Select, index as default };