element-plus 2.10.0 → 2.10.2

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v2.10.0 */
+/*! Element Plus v2.10.2 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -11566,9 +11566,9 @@
       emit("blur", event);
       afterBlur == null ? void 0 : afterBlur();
     };
-    const handleClick = () => {
+    const handleClick = (event) => {
       var _a, _b;
-      if (((_a = wrapperRef.value) == null ? void 0 : _a.contains(document.activeElement)) && wrapperRef.value !== document.activeElement || disabled.value)
+      if (((_a = wrapperRef.value) == null ? void 0 : _a.contains(document.activeElement)) && wrapperRef.value !== document.activeElement || isFocusable(event.target) || disabled.value)
         return;
       (_b = target.value) == null ? void 0 : _b.focus();
     };
@@ -11805,7 +11805,7 @@
 
   const ElConfigProvider = withInstall(ConfigProvider);
 
-  const version$1 = "2.10.0";
+  const version$1 = "2.10.2";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -12289,8 +12289,8 @@
     };
   }
   const filterFields = (fields, props) => {
-    const normalized = castArray$1(props);
-    return normalized.length > 0 ? fields.filter((field) => field.prop && normalized.includes(field.prop)) : fields;
+    const normalized = castArray$1(props).map((prop) => isArray$1(prop) ? prop.join(".") : prop);
+    return normalized.length > 0 ? fields.filter((field) => field.propString && normalized.includes(field.propString)) : fields;
   };
 
   const COMPONENT_NAME$p = "ElForm";
@@ -12319,7 +12319,7 @@
         ];
       });
       const getField = (prop) => {
-        return fields.find((field) => field.prop === prop);
+        return filterFields(fields, [prop])[0];
       };
       const addField = (field) => {
         fields.push(field);
@@ -12376,9 +12376,10 @@
         return Promise.reject(validationErrors);
       };
       const validateField = async (modelProps = [], callback) => {
+        let result = false;
         const shouldThrow = !isFunction$1(callback);
         try {
-          const result = await doValidateField(modelProps);
+          result = await doValidateField(modelProps);
           if (result === true) {
             await (callback == null ? void 0 : callback(result));
           }
@@ -12393,13 +12394,13 @@
               formItem == null ? void 0 : formItem.scrollIntoView(props.scrollIntoViewOptions);
             }
           }
-          await (callback == null ? void 0 : callback(false, invalidFields));
+          !result && await (callback == null ? void 0 : callback(false, invalidFields));
           return shouldThrow && Promise.reject(invalidFields);
         }
       };
       const scrollToField = (prop) => {
         var _a;
-        const field = filterFields(fields, prop)[0];
+        const field = getField(prop);
         if (field) {
           (_a = field.$el) == null ? void 0 : _a.scrollIntoView(props.scrollIntoViewOptions);
         }
@@ -12426,6 +12427,7 @@
         resetFields,
         clearValidate,
         scrollToField,
+        getField,
         fields
       });
       return (_ctx, _cache) => {
@@ -13689,7 +13691,7 @@
       const propString = vue.computed(() => {
         if (!props.prop)
           return "";
-        return isString$1(props.prop) ? props.prop : props.prop.join(".");
+        return isArray$1(props.prop) ? props.prop.join(".") : props.prop;
       });
       const hasLabel = vue.computed(() => {
         return !!(props.label || slots.label);
@@ -13842,6 +13844,7 @@
         ...vue.toRefs(props),
         $el: formItemRef,
         size: _size,
+        validateMessage,
         validateState,
         labelId,
         inputIds,
@@ -13852,7 +13855,8 @@
         removeInputId,
         resetField,
         clearValidate,
-        validate
+        validate,
+        propString
       });
       vue.provide(formItemContextKey, context);
       vue.onMounted(() => {
@@ -14591,6 +14595,7 @@
       let cursorDown = false;
       let cursorLeave = false;
       let baseScrollHeight = 0;
+      let baseScrollWidth = 0;
       let originalOnSelectStart = isClient ? document.onselectstart : null;
       const bar = vue.computed(() => BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
       const thumbStyle = vue.computed(() => renderThumbStyle$1({
@@ -14623,6 +14628,7 @@
         e.stopImmediatePropagation();
         cursorDown = true;
         baseScrollHeight = scrollbar.wrapElement.scrollHeight;
+        baseScrollWidth = scrollbar.wrapElement.scrollWidth;
         document.addEventListener("mousemove", mouseMoveDocumentHandler);
         document.addEventListener("mouseup", mouseUpDocumentHandler);
         originalOnSelectStart = document.onselectstart;
@@ -14639,7 +14645,11 @@
         const offset = (instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
         const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
         const thumbPositionPercentage = (offset - thumbClickPosition) * 100 * offsetRatio.value / instance.value[bar.value.offset];
-        scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * baseScrollHeight / 100;
+        if (bar.value.scroll === "scrollLeft") {
+          scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * baseScrollWidth / 100;
+        } else {
+          scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * baseScrollHeight / 100;
+        }
       };
       const mouseUpDocumentHandler = () => {
         cursorDown = false;
@@ -24331,6 +24341,9 @@
       type: Boolean,
       default: false
     },
+    maxCollapseTagsTooltipHeight: {
+      type: [String, Number]
+    },
     debounce: {
       type: Number,
       default: 300
@@ -24872,33 +24885,38 @@
                           vue.createElementVNode("span", null, vue.toDisplayString(tag.text), 1)
                         ]),
                         content: vue.withCtx(() => [
-                          vue.createElementVNode("div", {
-                            class: vue.normalizeClass(vue.unref(nsCascader).e("collapse-tags"))
-                          }, [
-                            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(allPresentTags.value.slice(_ctx.maxCollapseTags), (tag2, idx) => {
-                              return vue.openBlock(), vue.createElementBlock("div", {
-                                key: idx,
-                                class: vue.normalizeClass(vue.unref(nsCascader).e("collapse-tag"))
+                          vue.createVNode(vue.unref(ElScrollbar), { "max-height": _ctx.maxCollapseTagsTooltipHeight }, {
+                            default: vue.withCtx(() => [
+                              vue.createElementVNode("div", {
+                                class: vue.normalizeClass(vue.unref(nsCascader).e("collapse-tags"))
                               }, [
-                                (vue.openBlock(), vue.createBlock(vue.unref(ElTag), {
-                                  key: tag2.key,
-                                  class: "in-tooltip",
-                                  type: _ctx.tagType,
-                                  size: vue.unref(tagSize),
-                                  effect: _ctx.tagEffect,
-                                  hit: tag2.hitState,
-                                  closable: tag2.closable,
-                                  "disable-transitions": "",
-                                  onClose: ($event) => deleteTag(tag2)
-                                }, {
-                                  default: vue.withCtx(() => [
-                                    vue.createElementVNode("span", null, vue.toDisplayString(tag2.text), 1)
-                                  ]),
-                                  _: 2
-                                }, 1032, ["type", "size", "effect", "hit", "closable", "onClose"]))
-                              ], 2);
-                            }), 128))
-                          ], 2)
+                                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(allPresentTags.value.slice(_ctx.maxCollapseTags), (tag2, idx) => {
+                                  return vue.openBlock(), vue.createElementBlock("div", {
+                                    key: idx,
+                                    class: vue.normalizeClass(vue.unref(nsCascader).e("collapse-tag"))
+                                  }, [
+                                    (vue.openBlock(), vue.createBlock(vue.unref(ElTag), {
+                                      key: tag2.key,
+                                      class: "in-tooltip",
+                                      type: _ctx.tagType,
+                                      size: vue.unref(tagSize),
+                                      effect: _ctx.tagEffect,
+                                      hit: tag2.hitState,
+                                      closable: tag2.closable,
+                                      "disable-transitions": "",
+                                      onClose: ($event) => deleteTag(tag2)
+                                    }, {
+                                      default: vue.withCtx(() => [
+                                        vue.createElementVNode("span", null, vue.toDisplayString(tag2.text), 1)
+                                      ]),
+                                      _: 2
+                                    }, 1032, ["type", "size", "effect", "hit", "closable", "onClose"]))
+                                  ], 2);
+                                }), 128))
+                              ], 2)
+                            ]),
+                            _: 1
+                          }, 8, ["max-height"])
                         ]),
                         _: 2
                       }, 1032, ["disabled"]))
@@ -27019,6 +27037,7 @@
   });
   const panelRangeSharedProps = buildProps({
     unlinkPanels: Boolean,
+    visible: Boolean,
     parsedValue: {
       type: definePropType(Array)
     }
@@ -27051,12 +27070,12 @@
     const [left, right] = range;
     return dayjs.isDayjs(left) && dayjs.isDayjs(right) && dayjs(left).isValid() && dayjs(right).isValid() && left.isSameOrBefore(right);
   };
-  const getDefaultValue = (defaultValue, { lang, unit, unlinkPanels }) => {
+  const getDefaultValue = (defaultValue, { lang, step = 1, unit, unlinkPanels }) => {
     let start;
     if (isArray$1(defaultValue)) {
       let [left, right] = defaultValue.map((d) => dayjs(d).locale(lang));
       if (!unlinkPanels) {
-        right = left.add(1, unit);
+        right = left.add(step, unit);
       }
       return [left, right];
     } else if (defaultValue) {
@@ -27065,7 +27084,7 @@
       start = dayjs();
     }
     start = start.locale(lang);
-    return [start, start.add(1, unit)];
+    return [start, start.add(step, unit)];
   };
   const buildPickerTable = (dimension, rows, {
     columnIndexOffset,
@@ -27116,12 +27135,12 @@
     }
   };
   const datesInMonth = (date, year, month, lang) => {
-    const firstDay = dayjs(date).locale(lang).month(month).year(year);
+    const firstDay = dayjs().locale(lang).startOf("month").month(month).year(year).hour(date.hour()).minute(date.minute()).second(date.second());
     const numOfDays = firstDay.daysInMonth();
     return rangeArr(numOfDays).map((n) => firstDay.add(n, "day").toDate());
   };
   const getValidDateOfMonth = (date, year, month, lang, disabledDate) => {
-    const _value = dayjs(date).year(year).month(month);
+    const _value = dayjs().year(year).month(month).startOf("month").hour(date.hour()).minute(date.minute()).second(date.second());
     const _date = datesInMonth(date, year, month, lang).find((date2) => {
       return !(disabledDate == null ? void 0 : disabledDate(date2));
     });
@@ -28714,8 +28733,7 @@
 
   const panelDateRangeProps = buildProps({
     ...panelSharedProps,
-    ...panelRangeSharedProps,
-    visible: Boolean
+    ...panelRangeSharedProps
   });
 
   const useShortcut = (lang) => {
@@ -28747,6 +28765,7 @@
     defaultTime,
     leftDate,
     rightDate,
+    step,
     unit,
     onParsedValueChanged
   }) => {
@@ -28791,6 +28810,7 @@
     const restoreDefault = () => {
       let [start, end] = getDefaultValue(vue.unref(defaultValue), {
         lang: vue.unref(lang),
+        step,
         unit,
         unlinkPanels: props.unlinkPanels
       });
@@ -29777,7 +29797,8 @@
         handleChangeRange,
         handleRangeConfirm,
         handleShortcutClick,
-        onSelect
+        onSelect,
+        onReset
       } = useRangePicker(props, {
         defaultValue,
         leftDate,
@@ -29840,6 +29861,12 @@
           rightDate.value = leftDate.value.add(1, unit$1);
         }
       }
+      vue.watch(() => props.visible, (visible) => {
+        if (!visible && rangeState.value.selecting) {
+          onReset(props.parsedValue);
+          onSelect(false);
+        }
+      });
       emit("set-picker-option", ["isValidValue", isValidRange]);
       emit("set-picker-option", ["formatToString", formatToString]);
       emit("set-picker-option", ["parseUserInput", parseUserInput]);
@@ -30047,6 +30074,7 @@
     };
   };
 
+  const step = 10;
   const unit = "year";
   const __default__$18 = vue.defineComponent({
     name: "DatePickerYearRange"
@@ -30059,10 +30087,45 @@
       const props = __props;
       const { lang } = useLocale();
       const leftDate = vue.ref(dayjs().locale(lang.value));
-      const rightDate = vue.ref(leftDate.value.add(10, "year"));
-      const { pickerNs: ppNs } = vue.inject(ROOT_PICKER_INJECTION_KEY);
-      const drpNs = useNamespace("date-range-picker");
+      const rightDate = vue.ref(dayjs().locale(lang.value).add(step, unit));
       const isDefaultFormat = vue.inject(ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY);
+      const pickerBase = vue.inject(PICKER_BASE_INJECTION_KEY);
+      const { shortcuts, disabledDate } = pickerBase.props;
+      const format = vue.toRef(pickerBase.props, "format");
+      const defaultValue = vue.toRef(pickerBase.props, "defaultValue");
+      const {
+        minDate,
+        maxDate,
+        rangeState,
+        ppNs,
+        drpNs,
+        handleChangeRange,
+        handleRangeConfirm,
+        handleShortcutClick,
+        onSelect,
+        onReset
+      } = useRangePicker(props, {
+        defaultValue,
+        leftDate,
+        rightDate,
+        step,
+        unit,
+        onParsedValueChanged
+      });
+      const {
+        leftPrevYear,
+        rightNextYear,
+        leftNextYear,
+        rightPrevYear,
+        leftLabel,
+        rightLabel,
+        leftYear,
+        rightYear
+      } = useYearRangeHeader({
+        unlinkPanels: vue.toRef(props, "unlinkPanels"),
+        leftDate,
+        rightDate
+      });
       const hasShortcuts = vue.computed(() => !!shortcuts.length);
       const panelKls = vue.computed(() => [
         ppNs.b(),
@@ -30093,33 +30156,9 @@
           arrowRightBtn: [ppNs.e("icon-btn"), "d-arrow-right"]
         };
       });
-      const handleShortcutClick = useShortcut(lang);
-      const {
-        leftPrevYear,
-        rightNextYear,
-        leftNextYear,
-        rightPrevYear,
-        leftLabel,
-        rightLabel,
-        leftYear,
-        rightYear
-      } = useYearRangeHeader({
-        unlinkPanels: vue.toRef(props, "unlinkPanels"),
-        leftDate,
-        rightDate
-      });
       const enableYearArrow = vue.computed(() => {
         return props.unlinkPanels && rightYear.value > leftYear.value + 1;
       });
-      const minDate = vue.ref();
-      const maxDate = vue.ref();
-      const rangeState = vue.ref({
-        endDate: null,
-        selecting: false
-      });
-      const handleChangeRange = (val) => {
-        rangeState.value = val;
-      };
       const handleRangePick = (val, close = true) => {
         const minDate_ = val.minDate;
         const maxDate_ = val.maxDate;
@@ -30131,67 +30170,8 @@
         minDate.value = minDate_;
         if (!close)
           return;
-        handleConfirm();
-      };
-      const handleConfirm = (visible = false) => {
-        if (isValidRange([minDate.value, maxDate.value])) {
-          emit("pick", [minDate.value, maxDate.value], visible);
-        }
-      };
-      const onSelect = (selecting) => {
-        rangeState.value.selecting = selecting;
-        if (!selecting) {
-          rangeState.value.endDate = null;
-        }
-      };
-      const pickerBase = vue.inject(PICKER_BASE_INJECTION_KEY);
-      const { shortcuts, disabledDate } = pickerBase.props;
-      const format = vue.toRef(pickerBase.props, "format");
-      const defaultValue = vue.toRef(pickerBase.props, "defaultValue");
-      const getDefaultValue = () => {
-        let start;
-        if (isArray$1(defaultValue.value)) {
-          const left = dayjs(defaultValue.value[0]);
-          let right = dayjs(defaultValue.value[1]);
-          if (!props.unlinkPanels) {
-            right = left.add(10, unit);
-          }
-          return [left, right];
-        } else if (defaultValue.value) {
-          start = dayjs(defaultValue.value);
-        } else {
-          start = dayjs();
-        }
-        start = start.locale(lang.value);
-        return [start, start.add(10, unit)];
+        handleRangeConfirm();
       };
-      vue.watch(() => defaultValue.value, (val) => {
-        if (val) {
-          const defaultArr = getDefaultValue();
-          leftDate.value = defaultArr[0];
-          rightDate.value = defaultArr[1];
-        }
-      }, { immediate: true });
-      vue.watch(() => props.parsedValue, (newVal) => {
-        if (newVal && newVal.length === 2) {
-          minDate.value = newVal[0];
-          maxDate.value = newVal[1];
-          leftDate.value = minDate.value;
-          if (props.unlinkPanels && maxDate.value) {
-            const minDateYear = minDate.value.year();
-            const maxDateYear = maxDate.value.year();
-            rightDate.value = minDateYear === maxDateYear ? maxDate.value.add(10, "year") : maxDate.value;
-          } else {
-            rightDate.value = leftDate.value.add(10, "year");
-          }
-        } else {
-          const defaultArr = getDefaultValue();
-          minDate.value = void 0;
-          maxDate.value = void 0;
-          leftDate.value = defaultArr[0];
-          rightDate.value = defaultArr[1];
-        }
-      }, { immediate: true });
       const parseUserInput = (value) => {
         return correctlyParseUserInput(value, format.value, lang.value, isDefaultFormat);
       };
@@ -30202,13 +30182,31 @@
         return isValidRange(date) && (disabledDate ? !disabledDate(date[0].toDate()) && !disabledDate(date[1].toDate()) : true);
       };
       const handleClear = () => {
-        const defaultArr = getDefaultValue();
+        const defaultArr = getDefaultValue(vue.unref(defaultValue), {
+          lang: vue.unref(lang),
+          step,
+          unit,
+          unlinkPanels: props.unlinkPanels
+        });
         leftDate.value = defaultArr[0];
         rightDate.value = defaultArr[1];
-        maxDate.value = void 0;
-        minDate.value = void 0;
         emit("pick", null);
       };
+      function onParsedValueChanged(minDate2, maxDate2) {
+        if (props.unlinkPanels && maxDate2) {
+          const minDateYear = (minDate2 == null ? void 0 : minDate2.year()) || 0;
+          const maxDateYear = maxDate2.year();
+          rightDate.value = minDateYear + step > maxDateYear ? maxDate2.add(step, unit) : maxDate2;
+        } else {
+          rightDate.value = leftDate.value.add(step, unit);
+        }
+      }
+      vue.watch(() => props.visible, (visible) => {
+        if (!visible && rangeState.value.selecting) {
+          onReset(props.parsedValue);
+          onSelect(false);
+        }
+      });
       emit("set-picker-option", ["isValidValue", isValidValue]);
       emit("set-picker-option", ["parseUserInput", parseUserInput]);
       emit("set-picker-option", ["formatToString", formatToString]);
@@ -30280,14 +30278,14 @@
                 vue.createVNode(YearTable, {
                   "selection-mode": "range",
                   date: leftDate.value,
-                  "min-date": minDate.value,
-                  "max-date": maxDate.value,
-                  "range-state": rangeState.value,
+                  "min-date": vue.unref(minDate),
+                  "max-date": vue.unref(maxDate),
+                  "range-state": vue.unref(rangeState),
                   "disabled-date": vue.unref(disabledDate),
-                  onChangerange: handleChangeRange,
+                  onChangerange: vue.unref(handleChangeRange),
                   onPick: handleRangePick,
-                  onSelect
-                }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date"])
+                  onSelect: vue.unref(onSelect)
+                }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "onChangerange", "onSelect"])
               ], 2),
               vue.createElementVNode("div", {
                 class: vue.normalizeClass(vue.unref(rightPanelKls).content)
@@ -30330,14 +30328,14 @@
                 vue.createVNode(YearTable, {
                   "selection-mode": "range",
                   date: rightDate.value,
-                  "min-date": minDate.value,
-                  "max-date": maxDate.value,
-                  "range-state": rangeState.value,
+                  "min-date": vue.unref(minDate),
+                  "max-date": vue.unref(maxDate),
+                  "range-state": vue.unref(rangeState),
                   "disabled-date": vue.unref(disabledDate),
-                  onChangerange: handleChangeRange,
+                  onChangerange: vue.unref(handleChangeRange),
                   onPick: handleRangePick,
-                  onSelect
-                }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date"])
+                  onSelect: vue.unref(onSelect)
+                }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "onChangerange", "onSelect"])
               ], 2)
             ], 2)
           ], 2)
@@ -36909,6 +36907,13 @@
       "popup-scroll"
     ],
     setup(props, { emit, slots }) {
+      const instance = vue.getCurrentInstance();
+      instance.appContext.config.warnHandler = (...args) => {
+        if (!args[0] || args[0].includes('Slot "default" invoked outside of the render function')) {
+          return;
+        }
+        console.warn(...args);
+      };
       const modelValue = vue.computed(() => {
         const { modelValue: rawModelValue, multiple } = props;
         const fallback = multiple ? [] : void 0;
@@ -36923,24 +36928,47 @@
       });
       const API = useSelect$3(_props, emit);
       const { calculatorRef, inputStyle } = useCalcInputWidth();
+      const flatTreeSelectData = (data) => {
+        return data.reduce((acc, item) => {
+          acc.push(item);
+          if (item.children && item.children.length > 0) {
+            acc.push(...flatTreeSelectData(item.children));
+          }
+          return acc;
+        }, []);
+      };
       const manuallyRenderSlots = (vnodes) => {
-        const children = flattedChildren(vnodes);
-        children.filter((item) => {
-          return isObject$1(item) && item.type.name === "ElOption";
-        }).forEach((item) => {
-          const obj = { ...item.props };
-          obj.currentLabel = obj.label || (isObject$1(obj.value) ? "" : obj.value);
-          API.onOptionCreate(obj);
+        const children = flattedChildren(vnodes || []);
+        children.forEach((item) => {
+          var _a;
+          if (isObject$1(item) && (item.type.name === "ElOption" || item.type.name === "ElTree")) {
+            const _name = item.type.name;
+            if (_name === "ElTree") {
+              const treeData = ((_a = item.props) == null ? void 0 : _a.data) || [];
+              const flatData = flatTreeSelectData(treeData);
+              flatData.forEach((treeItem) => {
+                treeItem.currentLabel = treeItem.label || (isObject$1(treeItem.value) ? "" : treeItem.value);
+                API.onOptionCreate(treeItem);
+              });
+            } else if (_name === "ElOption") {
+              const obj = { ...item.props };
+              obj.currentLabel = obj.label || (isObject$1(obj.value) ? "" : obj.value);
+              API.onOptionCreate(obj);
+            }
+          }
         });
       };
-      vue.watchEffect(() => {
-        if (!props.persistent) {
-          vue.nextTick(() => {
-            var _a, _b;
-            const defaultSlots = vue.h(vue.Fragment, (_b = (_a = slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : []).children;
-            manuallyRenderSlots(defaultSlots);
-          });
+      vue.watch(() => {
+        var _a;
+        const slotsContent = (_a = slots.default) == null ? void 0 : _a.call(slots);
+        return slotsContent;
+      }, (newSlot) => {
+        if (props.persistent) {
+          return;
         }
+        manuallyRenderSlots(newSlot);
+      }, {
+        immediate: true
       });
       vue.provide(selectKey, vue.reactive({
         props: _props,