element-pe 2.2.88 → 2.2.90

package/dist/index.full.js

@@ -708,6 +708,7 @@
   const toRawType = (value) => {
     return toTypeString(value).slice(8, -1);
   };
+  const isPlainObject$1 = (val) => toTypeString(val) === "[object Object]";
   const cacheStringFunction = (fn) => {
     const cache = /* @__PURE__ */ Object.create(null);
     return (str) => {
@@ -13678,6 +13679,10 @@
     },
     widget: {
       type: String
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
     }
   });
   const inputEmits = {
@@ -13698,8 +13703,8 @@
   const TABLE_INJECTION_KEY = Symbol("ElTable");
 
   const _hoisted_1$15 = ["role", "widget"];
-  const _hoisted_2$J = ["id", "type", "disabled", "formatter", "parser", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form"];
-  const _hoisted_3$p = ["id", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form"];
+  const _hoisted_2$J = ["id", "type", "disabled", "formatter", "parser", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form", "autofocus"];
+  const _hoisted_3$o = ["id", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form", "autofocus"];
   const __default__$1x = vue.defineComponent({
     name: "ElInput",
     inheritAttrs: false
@@ -14022,6 +14027,7 @@
                 placeholder: vue.unref(inputViewMode) || vue.unref(isTableInput) ? "" : _ctx.placeholder,
                 style: _ctx.inputStyle,
                 form: props.form,
+                autofocus: props.autofocus,
                 onCompositionstart: handleCompositionStart,
                 onCompositionupdate: handleCompositionUpdate,
                 onCompositionend: handleCompositionEnd,
@@ -14119,6 +14125,7 @@
               "aria-label": _ctx.label,
               placeholder: vue.unref(inputViewMode) || vue.unref(isTableInput) ? "" : _ctx.placeholder,
               form: props.form,
+              autofocus: props.autofocus,
               onCompositionstart: handleCompositionStart,
               onCompositionupdate: handleCompositionUpdate,
               onCompositionend: handleCompositionEnd,
@@ -14127,7 +14134,7 @@
               onBlur: _cache[3] || (_cache[3] = (...args) => vue.unref(handleBlur) && vue.unref(handleBlur)(...args)),
               onChange: handleChange,
               onKeydown: handleKeydown
-            }), null, 16, _hoisted_3$p),
+            }), null, 16, _hoisted_3$o),
             vue.unref(isWordLimitVisible) ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 0,
               style: vue.normalizeStyle(countStyle.value),
@@ -16244,7 +16251,7 @@
 
   const _hoisted_1$13 = ["aria-expanded", "aria-owns", "widget"];
   const _hoisted_2$H = { key: 0 };
-  const _hoisted_3$o = ["id", "aria-selected", "onClick"];
+  const _hoisted_3$n = ["id", "aria-selected", "onClick"];
   const COMPONENT_NAME$i = "ElAutocomplete";
   const __default__$1o = vue.defineComponent({
     name: COMPONENT_NAME$i,
@@ -16523,7 +16530,7 @@
                       vue.renderSlot(_ctx.$slots, "default", { item }, () => [
                         vue.createTextVNode(vue.toDisplayString(item[_ctx.valueKey]), 1)
                       ])
-                    ], 10, _hoisted_3$o);
+                    ], 10, _hoisted_3$n);
                   }), 128))
                 ]),
                 _: 3
@@ -18709,7 +18716,7 @@
 
   const _hoisted_1$$ = ["widget"];
   const _hoisted_2$G = ["id", "name", "placeholder", "value", "disabled", "readonly"];
-  const _hoisted_3$n = ["id", "name", "placeholder", "value", "disabled", "readonly"];
+  const _hoisted_3$m = ["id", "name", "placeholder", "value", "disabled", "readonly"];
   const __default__$1g = vue.defineComponent({
     name: "Picker"
   });
@@ -19323,7 +19330,7 @@
                 onBlur: handleBlurInput,
                 onInput: handleEndInput,
                 onChange: handleEndChange
-              }, null, 42, _hoisted_3$n),
+              }, null, 42, _hoisted_3$m),
               _ctx.clearIcon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
                 key: 1,
                 class: vue.normalizeClass(vue.unref(clearIconKls)),
@@ -21909,7 +21916,7 @@
 
   const _hoisted_1$W = ["tabindex", "role", "aria-checked"];
   const _hoisted_2$C = ["id", "aria-hidden", "name", "tabindex", "disabled", "true-value", "false-value"];
-  const _hoisted_3$m = ["id", "aria-hidden", "disabled", "value", "name", "tabindex"];
+  const _hoisted_3$l = ["id", "aria-hidden", "disabled", "value", "name", "tabindex"];
   const __default__$1a = vue.defineComponent({
     name: "ElCheckbox"
   });
@@ -22003,7 +22010,7 @@
                 onBlur: _cache[8] || (_cache[8] = ($event) => isFocused.value = false),
                 onClick: _cache[9] || (_cache[9] = vue.withModifiers(() => {
                 }, ["stop"]))
-              }, null, 42, _hoisted_3$m)), [
+              }, null, 42, _hoisted_3$l)), [
                 [vue.vModelCheckbox, vue.unref(model)]
               ]),
               vue.createElementVNode("span", {
@@ -23597,7 +23604,7 @@
 
   const _hoisted_1$Q = ["widget"];
   const _hoisted_2$z = { key: 0 };
-  const _hoisted_3$l = ["placeholder", "onKeydown"];
+  const _hoisted_3$k = ["placeholder", "onKeydown"];
   const _hoisted_4$e = ["onClick"];
   const COMPONENT_NAME$e = "ElCascader";
   const __default__$13 = vue.defineComponent({
@@ -24147,7 +24154,7 @@
                   onCompositionend: handleComposition,
                   onFocus: handleFocus,
                   onBlur: handleBlur
-                }, null, 42, _hoisted_3$l)), [
+                }, null, 42, _hoisted_3$k)), [
                   [vue.vModelText, searchInputValue.value]
                 ]) : vue.createCommentVNode("v-if", true)
               ], 2)) : vue.createCommentVNode("v-if", true)
@@ -24513,9 +24520,7 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(vue.unref(rootKls)),
-          role: "tablist",
-          "aria-multiselectable": "true"
+          class: vue.normalizeClass(vue.unref(rootKls))
         }, [
           vue.renderSlot(_ctx.$slots, "default")
         ], 2);
@@ -24687,9 +24692,8 @@
     };
   };
 
-  const _hoisted_1$P = ["aria-expanded", "aria-controls", "aria-describedby"];
-  const _hoisted_2$y = ["id", "tabindex"];
-  const _hoisted_3$k = ["id", "aria-hidden", "aria-labelledby"];
+  const _hoisted_1$P = ["id", "aria-expanded", "aria-controls", "aria-describedby", "tabindex"];
+  const _hoisted_2$y = ["id", "aria-hidden", "aria-labelledby"];
   const __default__$Z = vue.defineComponent({
     name: "ElCollapseItem"
   });
@@ -24723,41 +24727,36 @@
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(vue.unref(rootKls))
         }, [
-          vue.createElementVNode("div", {
-            role: "tab",
+          vue.createElementVNode("button", {
+            id: vue.unref(scopedHeadId),
+            class: vue.normalizeClass(vue.unref(headKls)),
             "aria-expanded": vue.unref(isActive),
             "aria-controls": vue.unref(scopedContentId),
-            "aria-describedby": vue.unref(scopedContentId)
+            "aria-describedby": vue.unref(scopedContentId),
+            tabindex: _ctx.disabled ? -1 : 0,
+            onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(handleHeaderClick) && vue.unref(handleHeaderClick)(...args)),
+            onKeydown: _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers((...args) => vue.unref(handleEnterClick) && vue.unref(handleEnterClick)(...args), ["stop", "prevent"]), ["space", "enter"])),
+            onFocus: _cache[2] || (_cache[2] = (...args) => vue.unref(handleFocus) && vue.unref(handleFocus)(...args)),
+            onBlur: _cache[3] || (_cache[3] = ($event) => focusing.value = false)
           }, [
-            vue.createElementVNode("div", {
-              id: vue.unref(scopedHeadId),
-              class: vue.normalizeClass(vue.unref(headKls)),
-              role: "button",
-              tabindex: _ctx.disabled ? -1 : 0,
-              onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(handleHeaderClick) && vue.unref(handleHeaderClick)(...args)),
-              onKeypress: _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers((...args) => vue.unref(handleEnterClick) && vue.unref(handleEnterClick)(...args), ["stop", "prevent"]), ["space", "enter"])),
-              onFocus: _cache[2] || (_cache[2] = (...args) => vue.unref(handleFocus) && vue.unref(handleFocus)(...args)),
-              onBlur: _cache[3] || (_cache[3] = ($event) => focusing.value = false)
-            }, [
-              vue.renderSlot(_ctx.$slots, "title", {}, () => [
-                vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
+            vue.renderSlot(_ctx.$slots, "title", {}, () => [
+              vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
+            ]),
+            vue.createVNode(vue.unref(ElIcon), {
+              class: vue.normalizeClass(vue.unref(arrowKls))
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(arrow_right_default))
               ]),
-              vue.createVNode(vue.unref(ElIcon), {
-                class: vue.normalizeClass(vue.unref(arrowKls))
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(arrow_right_default))
-                ]),
-                _: 1
-              }, 8, ["class"])
-            ], 42, _hoisted_2$y)
-          ], 8, _hoisted_1$P),
+              _: 1
+            }, 8, ["class"])
+          ], 42, _hoisted_1$P),
           vue.createVNode(vue.unref(_CollapseTransition), null, {
             default: vue.withCtx(() => [
               vue.withDirectives(vue.createElementVNode("div", {
                 id: vue.unref(scopedContentId),
+                role: "region",
                 class: vue.normalizeClass(vue.unref(itemWrapperKls)),
-                role: "tabpanel",
                 "aria-hidden": !vue.unref(isActive) && !vue.unref(forEditor),
                 "aria-labelledby": vue.unref(scopedHeadId)
               }, [
@@ -24766,7 +24765,7 @@
                 }, [
                   vue.renderSlot(_ctx.$slots, "default")
                 ], 2)
-              ], 10, _hoisted_3$k), [
+              ], 10, _hoisted_2$y), [
                 [vue.vShow, vue.unref(isActive) || vue.unref(forEditor)]
               ])
             ]),
@@ -25914,15 +25913,16 @@
                     }, 8, ["class"]), [
                       [vue.vShow, (_ctx.modelValue || showPanelColor.value) && !vue.unref(colorViewMode)]
                     ]),
-                    !_ctx.modelValue && !showPanelColor.value ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
-                      key: 0,
+                    vue.withDirectives(vue.createVNode(vue.unref(ElIcon), {
                       class: vue.normalizeClass([vue.unref(ns).be("picker", "empty"), vue.unref(ns).is("icon-close")])
                     }, {
                       default: vue.withCtx(() => [
                         vue.createVNode(vue.unref(close_default))
                       ]),
                       _: 1
-                    }, 8, ["class"])) : vue.createCommentVNode("v-if", true)
+                    }, 8, ["class"]), [
+                      [vue.vShow, !_ctx.modelValue && !showPanelColor.value]
+                    ])
                   ], 6)
                 ], 2)
               ], 2)
@@ -26316,6 +26316,7 @@
     showWeekNumber: Boolean,
     selectionMode: selectionModeWithDefault("date")
   });
+  const basicDateTableEmits = ["changerange", "pick", "select"];
 
   const isValidRange = (range) => {
     if (!isArray$1(range))
@@ -26388,6 +26389,343 @@
     }
   };
 
+  const isNormalDay = (type = "") => {
+    return ["normal", "today"].includes(type);
+  };
+  const useBasicDateTable = (props, emit) => {
+    const { lang } = useLocale();
+    const tbodyRef = vue.ref();
+    const currentCellRef = vue.ref();
+    const lastRow = vue.ref();
+    const lastColumn = vue.ref();
+    const tableRows = vue.ref([[], [], [], [], [], []]);
+    let focusWithClick = false;
+    const firstDayOfWeek = props.date.$locale().weekStart || 7;
+    const WEEKS_CONSTANT = props.date.locale("en").localeData().weekdaysShort().map((_) => _.toLowerCase());
+    const offsetDay = vue.computed(() => {
+      return firstDayOfWeek > 3 ? 7 - firstDayOfWeek : -firstDayOfWeek;
+    });
+    const startDate = vue.computed(() => {
+      const startDayOfMonth = props.date.startOf("month");
+      return startDayOfMonth.subtract(startDayOfMonth.day() || 7, "day");
+    });
+    const WEEKS = vue.computed(() => {
+      return WEEKS_CONSTANT.concat(WEEKS_CONSTANT).slice(firstDayOfWeek, firstDayOfWeek + 7);
+    });
+    const hasCurrent = vue.computed(() => {
+      return flatten(vue.unref(rows)).some((row) => {
+        return row.isCurrent;
+      });
+    });
+    const days = vue.computed(() => {
+      const startOfMonth = props.date.startOf("month");
+      const startOfMonthDay = startOfMonth.day() || 7;
+      const dateCountOfMonth = startOfMonth.daysInMonth();
+      const dateCountOfLastMonth = startOfMonth.subtract(1, "month").daysInMonth();
+      return {
+        startOfMonthDay,
+        dateCountOfMonth,
+        dateCountOfLastMonth
+      };
+    });
+    const selectedDate = vue.computed(() => {
+      return props.selectionMode === "dates" ? castArray(props.parsedValue) : [];
+    });
+    const setDateText = (cell, { count, rowIndex, columnIndex }) => {
+      const { startOfMonthDay, dateCountOfMonth, dateCountOfLastMonth } = vue.unref(days);
+      const offset = vue.unref(offsetDay);
+      if (rowIndex >= 0 && rowIndex <= 1) {
+        const numberOfDaysFromPreviousMonth = startOfMonthDay + offset < 0 ? 7 + startOfMonthDay + offset : startOfMonthDay + offset;
+        if (columnIndex + rowIndex * 7 >= numberOfDaysFromPreviousMonth) {
+          cell.text = count;
+          return true;
+        } else {
+          cell.text = dateCountOfLastMonth - (numberOfDaysFromPreviousMonth - columnIndex % 7) + 1 + rowIndex * 7;
+          cell.type = "prev-month";
+        }
+      } else {
+        if (count <= dateCountOfMonth) {
+          cell.text = count;
+        } else {
+          cell.text = count - dateCountOfMonth;
+          cell.type = "next-month";
+        }
+        return true;
+      }
+      return false;
+    };
+    const setCellMetadata = (cell, { columnIndex, rowIndex }, count) => {
+      const { disabledDate, cellClassName } = props;
+      const _selectedDate = vue.unref(selectedDate);
+      const shouldIncrement = setDateText(cell, { count, rowIndex, columnIndex });
+      const cellDate = cell.dayjs.toDate();
+      cell.selected = _selectedDate.find((d) => d.valueOf() === cell.dayjs.valueOf());
+      cell.isSelected = !!cell.selected;
+      cell.isCurrent = isCurrent(cell);
+      cell.disabled = disabledDate == null ? void 0 : disabledDate(cellDate);
+      cell.customClass = cellClassName == null ? void 0 : cellClassName(cellDate);
+      return shouldIncrement;
+    };
+    const setRowMetadata = (row) => {
+      if (props.selectionMode === "week") {
+        const [start, end] = props.showWeekNumber ? [1, 7] : [0, 6];
+        const isActive = isWeekActive(row[start + 1]);
+        row[start].inRange = isActive;
+        row[start].start = isActive;
+        row[end].inRange = isActive;
+        row[end].end = isActive;
+      }
+    };
+    const rows = vue.computed(() => {
+      const { minDate, maxDate, rangeState, showWeekNumber } = props;
+      const offset = vue.unref(offsetDay);
+      const rows_ = vue.unref(tableRows);
+      const dateUnit = "day";
+      let count = 1;
+      if (showWeekNumber) {
+        for (let rowIndex = 0; rowIndex < 6; rowIndex++) {
+          if (!rows_[rowIndex][0]) {
+            rows_[rowIndex][0] = {
+              type: "week",
+              text: vue.unref(startDate).add(rowIndex * 7 + 1, dateUnit).week()
+            };
+          }
+        }
+      }
+      buildPickerTable({ row: 6, column: 7 }, rows_, {
+        startDate: minDate,
+        columnIndexOffset: showWeekNumber ? 1 : 0,
+        nextEndDate: rangeState.endDate || maxDate || rangeState.selecting && minDate || null,
+        now: dayjs().locale(vue.unref(lang)).startOf(dateUnit),
+        unit: dateUnit,
+        relativeDateGetter: (idx) => vue.unref(startDate).add(idx - offset, dateUnit),
+        setCellMetadata: (...args) => {
+          if (setCellMetadata(...args, count)) {
+            count += 1;
+          }
+        },
+        setRowMetadata
+      });
+      return rows_;
+    });
+    watch(() => props.date, async () => {
+      var _a;
+      if ((_a = vue.unref(tbodyRef)) == null ? void 0 : _a.contains(document.activeElement)) {
+        await vue.nextTick();
+        await focus();
+      }
+    });
+    const focus = async () => {
+      var _a;
+      return (_a = vue.unref(currentCellRef)) == null ? void 0 : _a.focus();
+    };
+    const isCurrent = (cell) => {
+      return props.selectionMode === "date" && isNormalDay(cell.type) && cellMatchesDate(cell, props.parsedValue);
+    };
+    const cellMatchesDate = (cell, date) => {
+      if (!date)
+        return false;
+      return dayjs(date).locale(vue.unref(lang)).isSame(props.date.date(Number(cell.text)), "day");
+    };
+    const getDateOfCell = (row, column) => {
+      const offsetFromStart = row * 7 + (column - (props.showWeekNumber ? 1 : 0)) - vue.unref(offsetDay);
+      return vue.unref(startDate).add(offsetFromStart, "day");
+    };
+    const handleMouseMove = (event) => {
+      var _a;
+      if (!props.rangeState.selecting)
+        return;
+      let target = event.target;
+      if (target.tagName === "SPAN") {
+        target = (_a = target.parentNode) == null ? void 0 : _a.parentNode;
+      }
+      if (target.tagName === "DIV") {
+        target = target.parentNode;
+      }
+      if (target.tagName !== "TD")
+        return;
+      const row = target.parentNode.rowIndex - 1;
+      const column = target.cellIndex;
+      if (vue.unref(rows)[row][column].disabled)
+        return;
+      if (row !== vue.unref(lastRow) || column !== vue.unref(lastColumn)) {
+        lastRow.value = row;
+        lastColumn.value = column;
+        emit("changerange", {
+          selecting: true,
+          endDate: getDateOfCell(row, column)
+        });
+      }
+    };
+    const isSelectedCell = (cell) => {
+      return !vue.unref(hasCurrent) && (cell == null ? void 0 : cell.text) === 1 && cell.type === "normal" || cell.isCurrent;
+    };
+    const handleFocus = (event) => {
+      if (focusWithClick || vue.unref(hasCurrent) || props.selectionMode !== "date")
+        return;
+      handlePickDate(event, true);
+    };
+    const handleMouseDown = (event) => {
+      const target = event.target.closest("td");
+      if (!target)
+        return;
+      focusWithClick = true;
+    };
+    const handleMouseUp = (event) => {
+      const target = event.target.closest("td");
+      if (!target)
+        return;
+      focusWithClick = false;
+    };
+    const handleRangePick = (newDate) => {
+      if (!props.rangeState.selecting || !props.minDate) {
+        emit("pick", { minDate: newDate, maxDate: null });
+        emit("select", true);
+      } else {
+        if (newDate >= props.minDate) {
+          emit("pick", { minDate: props.minDate, maxDate: newDate });
+        } else {
+          emit("pick", { minDate: newDate, maxDate: props.minDate });
+        }
+        emit("select", false);
+      }
+    };
+    const handleWeekPick = (newDate) => {
+      const weekNumber = newDate.week();
+      const value = `${newDate.year()}w${weekNumber}`;
+      emit("pick", {
+        year: newDate.year(),
+        week: weekNumber,
+        value,
+        date: newDate.startOf("week")
+      });
+    };
+    const handleDatesPick = (newDate, selected) => {
+      const newValue = selected ? castArray(props.parsedValue).filter((d) => (d == null ? void 0 : d.valueOf()) !== newDate.valueOf()) : castArray(props.parsedValue).concat([newDate]);
+      emit("pick", newValue);
+    };
+    const handlePickDate = (event, isKeyboardMovement = false) => {
+      const target = event.target.closest("td");
+      if (!target)
+        return;
+      const row = target.parentNode.rowIndex - 1;
+      const column = target.cellIndex;
+      const cell = vue.unref(rows)[row][column];
+      if (cell.disabled || cell.type === "week")
+        return;
+      const newDate = getDateOfCell(row, column);
+      switch (props.selectionMode) {
+        case "range": {
+          handleRangePick(newDate);
+          break;
+        }
+        case "date": {
+          emit("pick", newDate, isKeyboardMovement);
+          break;
+        }
+        case "week": {
+          handleWeekPick(newDate);
+          break;
+        }
+        case "dates": {
+          handleDatesPick(newDate, !!cell.selected);
+          break;
+        }
+      }
+    };
+    const isWeekActive = (cell) => {
+      if (props.selectionMode !== "week")
+        return false;
+      let newDate = props.date.startOf("day");
+      if (cell.type === "prev-month") {
+        newDate = newDate.subtract(1, "month");
+      }
+      if (cell.type === "next-month") {
+        newDate = newDate.add(1, "month");
+      }
+      newDate = newDate.date(Number.parseInt(cell.text, 10));
+      if (props.parsedValue && !Array.isArray(props.parsedValue)) {
+        const dayOffset = (props.parsedValue.day() - firstDayOfWeek + 7) % 7 - 1;
+        const weekDate = props.parsedValue.subtract(dayOffset, "day");
+        return weekDate.isSame(newDate, "day");
+      }
+      return false;
+    };
+    return {
+      WEEKS,
+      rows,
+      tbodyRef,
+      currentCellRef,
+      focus,
+      isCurrent,
+      isWeekActive,
+      isSelectedCell,
+      handlePickDate,
+      handleMouseUp,
+      handleMouseDown,
+      handleMouseMove,
+      handleFocus
+    };
+  };
+  const useBasicDateTableDOM = (props, {
+    isCurrent,
+    isWeekActive
+  }) => {
+    const ns = useNamespace("date-table");
+    const { t } = useLocale();
+    const tableKls = vue.computed(() => [
+      ns.b(),
+      { "is-week-mode": props.selectionMode === "week" }
+    ]);
+    const tableLabel = vue.computed(() => t("el.datepicker.dateTablePrompt"));
+    const weekLabel = vue.computed(() => t("el.datepicker.week"));
+    const getCellClasses = (cell) => {
+      const classes = [];
+      if (isNormalDay(cell.type) && !cell.disabled) {
+        classes.push("available");
+        if (cell.type === "today") {
+          classes.push("today");
+        }
+      } else {
+        classes.push(cell.type);
+      }
+      if (isCurrent(cell)) {
+        classes.push("current");
+      }
+      if (cell.inRange && (isNormalDay(cell.type) || props.selectionMode === "week")) {
+        classes.push("in-range");
+        if (cell.start) {
+          classes.push("start-date");
+        }
+        if (cell.end) {
+          classes.push("end-date");
+        }
+      }
+      if (cell.disabled) {
+        classes.push("disabled");
+      }
+      if (cell.selected) {
+        classes.push("selected");
+      }
+      if (cell.customClass) {
+        classes.push(cell.customClass);
+      }
+      return classes.join(" ");
+    };
+    const getRowKls = (cell) => [
+      ns.e("row"),
+      { current: isWeekActive(cell) }
+    ];
+    return {
+      tableKls,
+      tableLabel,
+      weekLabel,
+      getCellClasses,
+      getRowKls,
+      t
+    };
+  };
+
   const basicCellProps = buildProps({
     cell: {
       type: definePropType(Object)
@@ -26423,7 +26761,7 @@
     }
   });
 
-  const _hoisted_1$L = ["aria-label", "onMousedown"];
+  const _hoisted_1$L = ["aria-label"];
   const _hoisted_2$v = {
     key: 0,
     scope: "col"
@@ -26433,337 +26771,72 @@
   const _sfc_main$1n = /* @__PURE__ */ vue.defineComponent({
     __name: "basic-date-table",
     props: basicDateTableProps,
-    emits: ["changerange", "pick", "select"],
+    emits: basicDateTableEmits,
     setup(__props, { expose, emit }) {
       const props = __props;
-      const ns = useNamespace("date-table");
-      const { t, lang } = useLocale();
-      const tbodyRef = vue.ref();
-      const currentCellRef = vue.ref();
-      const lastRow = vue.ref();
-      const lastColumn = vue.ref();
-      const tableRows = vue.ref([[], [], [], [], [], []]);
-      let focusWithClick = false;
-      const firstDayOfWeek = props.date.$locale().weekStart || 7;
-      const WEEKS_CONSTANT = props.date.locale("en").localeData().weekdaysShort().map((_) => _.toLowerCase());
-      const offsetDay = vue.computed(() => {
-        return firstDayOfWeek > 3 ? 7 - firstDayOfWeek : -firstDayOfWeek;
-      });
-      const startDate = vue.computed(() => {
-        const startDayOfMonth = props.date.startOf("month");
-        return startDayOfMonth.subtract(startDayOfMonth.day() || 7, "day");
-      });
-      const WEEKS = vue.computed(() => {
-        return WEEKS_CONSTANT.concat(WEEKS_CONSTANT).slice(firstDayOfWeek, firstDayOfWeek + 7);
-      });
-      const hasCurrent = vue.computed(() => {
-        return flatten(rows.value).some((row) => {
-          return row.isCurrent;
-        });
-      });
-      const days = vue.computed(() => {
-        const startOfMonth = props.date.startOf("month");
-        const startOfMonthDay = startOfMonth.day() || 7;
-        const dateCountOfMonth = startOfMonth.daysInMonth();
-        const dateCountOfLastMonth = startOfMonth.subtract(1, "month").daysInMonth();
-        return {
-          startOfMonthDay,
-          dateCountOfMonth,
-          dateCountOfLastMonth
-        };
-      });
-      const selectedDate = vue.computed(() => {
-        return props.selectionMode === "dates" ? castArray(props.parsedValue) : [];
-      });
-      const setDateText = (cell, {
-        count,
-        rowIndex,
-        columnIndex
-      }) => {
-        const { startOfMonthDay, dateCountOfMonth, dateCountOfLastMonth } = vue.unref(days);
-        const offset = vue.unref(offsetDay);
-        if (rowIndex >= 0 && rowIndex <= 1) {
-          const numberOfDaysFromPreviousMonth = startOfMonthDay + offset < 0 ? 7 + startOfMonthDay + offset : startOfMonthDay + offset;
-          if (columnIndex + rowIndex * 7 >= numberOfDaysFromPreviousMonth) {
-            cell.text = count;
-            return true;
-          } else {
-            cell.text = dateCountOfLastMonth - (numberOfDaysFromPreviousMonth - columnIndex % 7) + 1 + rowIndex * 7;
-            cell.type = "prev-month";
-          }
-        } else {
-          if (count <= dateCountOfMonth) {
-            cell.text = count;
-          } else {
-            cell.text = count - dateCountOfMonth;
-            cell.type = "next-month";
-          }
-          return true;
-        }
-        return false;
-      };
-      const setCellMetadata = (cell, {
-        columnIndex,
-        rowIndex
-      }, count) => {
-        const { disabledDate, cellClassName } = props;
-        const _selectedDate = vue.unref(selectedDate);
-        const shouldIncrement = setDateText(cell, { count, rowIndex, columnIndex });
-        const cellDate = cell.dayjs.toDate();
-        cell.selected = _selectedDate.find((d) => d.valueOf() === cell.dayjs.valueOf());
-        cell.isSelected = !!cell.selected;
-        cell.isCurrent = isCurrent(cell);
-        cell.disabled = disabledDate == null ? void 0 : disabledDate(cellDate);
-        cell.customClass = cellClassName == null ? void 0 : cellClassName(cellDate);
-        return shouldIncrement;
-      };
-      const setRowMetadata = (row) => {
-        if (props.selectionMode === "week") {
-          const [start, end] = props.showWeekNumber ? [1, 7] : [0, 6];
-          const isActive = isWeekActive(row[start + 1]);
-          row[start].inRange = isActive;
-          row[start].start = isActive;
-          row[end].inRange = isActive;
-          row[end].end = isActive;
-        }
-      };
-      const rows = vue.computed(() => {
-        const { minDate, maxDate, rangeState, showWeekNumber } = props;
-        const offset = offsetDay.value;
-        const rows_ = tableRows.value;
-        const dateUnit = "day";
-        let count = 1;
-        if (showWeekNumber) {
-          for (let rowIndex = 0; rowIndex < 6; rowIndex++) {
-            if (!rows_[rowIndex][0]) {
-              rows_[rowIndex][0] = {
-                type: "week",
-                text: startDate.value.add(rowIndex * 7 + 1, dateUnit).week()
-              };
-            }
-          }
-        }
-        buildPickerTable({ row: 6, column: 7 }, rows_, {
-          startDate: minDate,
-          columnIndexOffset: showWeekNumber ? 1 : 0,
-          nextEndDate: rangeState.endDate || maxDate || rangeState.selecting && minDate || null,
-          now: dayjs().locale(vue.unref(lang)).startOf(dateUnit),
-          unit: dateUnit,
-          relativeDateGetter: (idx) => startDate.value.add(idx - offset, dateUnit),
-          setCellMetadata: (...args) => {
-            if (setCellMetadata(...args, count)) {
-              count += 1;
-            }
-          },
-          setRowMetadata
-        });
-        return rows_;
-      });
-      watch(() => props.date, async () => {
-        var _a, _b;
-        if ((_a = tbodyRef.value) == null ? void 0 : _a.contains(document.activeElement)) {
-          await vue.nextTick();
-          (_b = currentCellRef.value) == null ? void 0 : _b.focus();
-        }
+      const {
+        WEEKS,
+        rows,
+        tbodyRef,
+        currentCellRef,
+        focus,
+        isCurrent,
+        isWeekActive,
+        isSelectedCell,
+        handlePickDate,
+        handleMouseUp,
+        handleMouseDown,
+        handleMouseMove,
+        handleFocus
+      } = useBasicDateTable(props, emit);
+      const { tableLabel, tableKls, weekLabel, getCellClasses, getRowKls, t } = useBasicDateTableDOM(props, {
+        isCurrent,
+        isWeekActive
       });
-      const focus = async () => {
-        var _a;
-        (_a = currentCellRef.value) == null ? void 0 : _a.focus();
-      };
-      const isNormalDay = (type = "") => {
-        return ["normal", "today"].includes(type);
-      };
-      const isCurrent = (cell) => {
-        return props.selectionMode === "date" && isNormalDay(cell.type) && cellMatchesDate(cell, props.parsedValue);
-      };
-      const cellMatchesDate = (cell, date) => {
-        if (!date)
-          return false;
-        return dayjs(date).locale(lang.value).isSame(props.date.date(Number(cell.text)), "day");
-      };
-      const getCellClasses = (cell) => {
-        const classes = [];
-        if (isNormalDay(cell.type) && !cell.disabled) {
-          classes.push("available");
-          if (cell.type === "today") {
-            classes.push("today");
-          }
-        } else {
-          classes.push(cell.type);
-        }
-        if (isCurrent(cell)) {
-          classes.push("current");
-        }
-        if (cell.inRange && (isNormalDay(cell.type) || props.selectionMode === "week")) {
-          classes.push("in-range");
-          if (cell.start) {
-            classes.push("start-date");
-          }
-          if (cell.end) {
-            classes.push("end-date");
-          }
-        }
-        if (cell.disabled) {
-          classes.push("disabled");
-        }
-        if (cell.selected) {
-          classes.push("selected");
-        }
-        if (cell.customClass) {
-          classes.push(cell.customClass);
-        }
-        return classes.join(" ");
-      };
-      const getDateOfCell = (row, column) => {
-        const offsetFromStart = row * 7 + (column - (props.showWeekNumber ? 1 : 0)) - offsetDay.value;
-        return startDate.value.add(offsetFromStart, "day");
-      };
-      const handleMouseMove = (event) => {
-        var _a;
-        if (!props.rangeState.selecting)
-          return;
-        let target = event.target;
-        if (target.tagName === "SPAN") {
-          target = (_a = target.parentNode) == null ? void 0 : _a.parentNode;
-        }
-        if (target.tagName === "DIV") {
-          target = target.parentNode;
-        }
-        if (target.tagName !== "TD")
-          return;
-        const row = target.parentNode.rowIndex - 1;
-        const column = target.cellIndex;
-        if (rows.value[row][column].disabled)
-          return;
-        if (row !== lastRow.value || column !== lastColumn.value) {
-          lastRow.value = row;
-          lastColumn.value = column;
-          emit("changerange", {
-            selecting: true,
-            endDate: getDateOfCell(row, column)
-          });
-        }
-      };
-      const isSelectedCell = (cell) => {
-        return !hasCurrent.value && (cell == null ? void 0 : cell.text) === 1 && cell.type === "normal" || cell.isCurrent;
-      };
-      const handleFocus = (event) => {
-        if (focusWithClick || hasCurrent.value || props.selectionMode !== "date")
-          return;
-        handlePickDate(event, true);
-      };
-      const handleMouseDown = (event) => {
-        const target = event.target.closest("td");
-        if (!target)
-          return;
-        focusWithClick = true;
-      };
-      const handleMouseUp = (event) => {
-        const target = event.target.closest("td");
-        if (!target)
-          return;
-        focusWithClick = false;
-      };
-      const handlePickDate = (event, isKeyboardMovement = false) => {
-        const target = event.target.closest("td");
-        if (!target)
-          return;
-        const row = target.parentNode.rowIndex - 1;
-        const column = target.cellIndex;
-        const cell = rows.value[row][column];
-        if (cell.disabled || cell.type === "week")
-          return;
-        const newDate = getDateOfCell(row, column);
-        if (props.selectionMode === "range") {
-          if (!props.rangeState.selecting || !props.minDate) {
-            emit("pick", { minDate: newDate, maxDate: null });
-            emit("select", true);
-          } else {
-            if (newDate >= props.minDate) {
-              emit("pick", { minDate: props.minDate, maxDate: newDate });
-            } else {
-              emit("pick", { minDate: newDate, maxDate: props.minDate });
-            }
-            emit("select", false);
-          }
-        } else if (props.selectionMode === "date") {
-          emit("pick", newDate, isKeyboardMovement);
-        } else if (props.selectionMode === "week") {
-          const weekNumber = newDate.week();
-          const value = `${newDate.year()}w${weekNumber}`;
-          emit("pick", {
-            year: newDate.year(),
-            week: weekNumber,
-            value,
-            date: newDate.startOf("week")
-          });
-        } else if (props.selectionMode === "dates") {
-          const newValue = cell.selected ? castArray(props.parsedValue).filter((d) => (d == null ? void 0 : d.valueOf()) !== newDate.valueOf()) : castArray(props.parsedValue).concat([newDate]);
-          emit("pick", newValue);
-        }
-      };
-      const isWeekActive = (cell) => {
-        if (props.selectionMode !== "week")
-          return false;
-        let newDate = props.date.startOf("day");
-        if (cell.type === "prev-month") {
-          newDate = newDate.subtract(1, "month");
-        }
-        if (cell.type === "next-month") {
-          newDate = newDate.add(1, "month");
-        }
-        newDate = newDate.date(Number.parseInt(cell.text, 10));
-        if (props.parsedValue && !Array.isArray(props.parsedValue)) {
-          const dayOffset = (props.parsedValue.day() - firstDayOfWeek + 7) % 7 - 1;
-          const weekDate = props.parsedValue.subtract(dayOffset, "day");
-          return weekDate.isSame(newDate, "day");
-        }
-        return false;
-      };
       expose({
         focus
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("table", {
-          role: "grid",
-          "aria-label": vue.unref(t)("el.datepicker.dateTablePrompt"),
+          "aria-label": vue.unref(tableLabel),
+          class: vue.normalizeClass(vue.unref(tableKls)),
           cellspacing: "0",
           cellpadding: "0",
-          class: vue.normalizeClass([vue.unref(ns).b(), { "is-week-mode": _ctx.selectionMode === "week" }]),
-          onClick: handlePickDate,
-          onMousemove: handleMouseMove,
-          onMousedown: vue.withModifiers(handleMouseDown, ["prevent"]),
-          onMouseup: handleMouseUp
+          role: "grid",
+          onClick: _cache[1] || (_cache[1] = (...args) => vue.unref(handlePickDate) && vue.unref(handlePickDate)(...args)),
+          onMousemove: _cache[2] || (_cache[2] = (...args) => vue.unref(handleMouseMove) && vue.unref(handleMouseMove)(...args)),
+          onMousedown: _cache[3] || (_cache[3] = vue.withModifiers((...args) => vue.unref(handleMouseDown) && vue.unref(handleMouseDown)(...args), ["prevent"])),
+          onMouseup: _cache[4] || (_cache[4] = (...args) => vue.unref(handleMouseUp) && vue.unref(handleMouseUp)(...args))
         }, [
           vue.createElementVNode("tbody", {
             ref_key: "tbodyRef",
             ref: tbodyRef
           }, [
             vue.createElementVNode("tr", null, [
-              _ctx.showWeekNumber ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_2$v, vue.toDisplayString(vue.unref(t)("el.datepicker.week")), 1)) : vue.createCommentVNode("v-if", true),
+              _ctx.showWeekNumber ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_2$v, vue.toDisplayString(vue.unref(weekLabel)), 1)) : vue.createCommentVNode("v-if", true),
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(WEEKS), (week, key) => {
                 return vue.openBlock(), vue.createElementBlock("th", {
                   key,
-                  scope: "col",
-                  "aria-label": vue.unref(t)("el.datepicker.weeksFull." + week)
+                  "aria-label": vue.unref(t)("el.datepicker.weeksFull." + week),
+                  scope: "col"
                 }, vue.toDisplayString(vue.unref(t)("el.datepicker.weeks." + week)), 9, _hoisted_3$j);
               }), 128))
             ]),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(rows), (row, rowKey) => {
               return vue.openBlock(), vue.createElementBlock("tr", {
                 key: rowKey,
-                class: vue.normalizeClass([vue.unref(ns).e("row"), { current: isWeekActive(row[1]) }])
+                class: vue.normalizeClass(vue.unref(getRowKls)(row[1]))
               }, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(row, (cell, columnKey) => {
                   return vue.openBlock(), vue.createElementBlock("td", {
                     key: `${rowKey}.${columnKey}`,
                     ref_for: true,
-                    ref: (el) => isSelectedCell(cell) && (currentCellRef.value = el),
-                    class: vue.normalizeClass(getCellClasses(cell)),
+                    ref: (el) => vue.unref(isSelectedCell)(cell) && (currentCellRef.value = el),
+                    class: vue.normalizeClass(vue.unref(getCellClasses)(cell)),
                     "aria-current": cell.isCurrent ? "date" : void 0,
                     "aria-selected": cell.isCurrent,
-                    tabindex: isSelectedCell(cell) ? 0 : -1,
-                    onFocus: handleFocus
+                    tabindex: vue.unref(isSelectedCell)(cell) ? 0 : -1,
+                    onFocus: _cache[0] || (_cache[0] = (...args) => vue.unref(handleFocus) && vue.unref(handleFocus)(...args))
                   }, [
                     vue.createVNode(vue.unref(ElDatePickerCell), { cell }, null, 8, ["cell"])
                   ], 42, _hoisted_4$d);
@@ -27837,10 +27910,14 @@
   };
 
   const _hoisted_1$H = ["onClick"];
-  const _hoisted_2$r = ["disabled"];
-  const _hoisted_3$f = ["disabled"];
-  const _hoisted_4$a = ["disabled"];
-  const _hoisted_5$8 = ["disabled"];
+  const _hoisted_2$r = ["aria-label"];
+  const _hoisted_3$f = ["aria-label"];
+  const _hoisted_4$a = ["disabled", "aria-label"];
+  const _hoisted_5$8 = ["disabled", "aria-label"];
+  const _hoisted_6$5 = ["disabled", "aria-label"];
+  const _hoisted_7$1 = ["disabled", "aria-label"];
+  const _hoisted_8$1 = ["aria-label"];
+  const _hoisted_9$1 = ["aria-label"];
   const unit$1 = "month";
   const _sfc_main$1j = /* @__PURE__ */ vue.defineComponent({
     __name: "panel-date-range",
@@ -28297,6 +28374,7 @@
                   vue.createElementVNode("button", {
                     type: "button",
                     class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "d-arrow-left"]),
+                    "aria-label": vue.unref(t)(`el.datepicker.prevYear`),
                     onClick: leftPrevYear
                   }, [
                     vue.createVNode(vue.unref(ElIcon), null, {
@@ -28305,10 +28383,11 @@
                       ]),
                       _: 1
                     })
-                  ], 2),
+                  ], 10, _hoisted_2$r),
                   vue.createElementVNode("button", {
                     type: "button",
                     class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-left"]),
+                    "aria-label": vue.unref(t)(`el.datepicker.prevMonth`),
                     onClick: leftPrevMonth
                   }, [
                     vue.createVNode(vue.unref(ElIcon), null, {
@@ -28317,12 +28396,13 @@
                       ]),
                       _: 1
                     })
-                  ], 2),
+                  ], 10, _hoisted_3$f),
                   _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
                     key: 0,
                     type: "button",
                     disabled: !vue.unref(enableYearArrow),
                     class: vue.normalizeClass([[vue.unref(ppNs).e("icon-btn"), { "is-disabled": !vue.unref(enableYearArrow) }], "d-arrow-right"]),
+                    "aria-label": vue.unref(t)(`el.datepicker.nextYear`),
                     onClick: leftNextYear
                   }, [
                     vue.createVNode(vue.unref(ElIcon), null, {
@@ -28331,7 +28411,7 @@
                       ]),
                       _: 1
                     })
-                  ], 10, _hoisted_2$r)) : vue.createCommentVNode("v-if", true),
+                  ], 10, _hoisted_4$a)) : vue.createCommentVNode("v-if", true),
                   _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
                     key: 1,
                     type: "button",
@@ -28340,6 +28420,7 @@
                       vue.unref(ppNs).e("icon-btn"),
                       { "is-disabled": !vue.unref(enableMonthArrow) }
                     ], "arrow-right"]),
+                    "aria-label": vue.unref(t)(`el.datepicker.nextMonth`),
                     onClick: leftNextMonth
                   }, [
                     vue.createVNode(vue.unref(ElIcon), null, {
@@ -28348,7 +28429,7 @@
                       ]),
                       _: 1
                     })
-                  ], 10, _hoisted_3$f)) : vue.createCommentVNode("v-if", true),
+                  ], 10, _hoisted_5$8)) : vue.createCommentVNode("v-if", true),
                   vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(leftLabel)), 1)
                 ], 2),
                 vue.createVNode(DateTable, {
@@ -28375,6 +28456,7 @@
                     type: "button",
                     disabled: !vue.unref(enableYearArrow),
                     class: vue.normalizeClass([[vue.unref(ppNs).e("icon-btn"), { "is-disabled": !vue.unref(enableYearArrow) }], "d-arrow-left"]),
+                    "aria-label": vue.unref(t)(`el.datepicker.prevYear`),
                     onClick: rightPrevYear
                   }, [
                     vue.createVNode(vue.unref(ElIcon), null, {
@@ -28383,7 +28465,7 @@
                       ]),
                       _: 1
                     })
-                  ], 10, _hoisted_4$a)) : vue.createCommentVNode("v-if", true),
+                  ], 10, _hoisted_6$5)) : vue.createCommentVNode("v-if", true),
                   _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
                     key: 1,
                     type: "button",
@@ -28392,6 +28474,7 @@
                       vue.unref(ppNs).e("icon-btn"),
                       { "is-disabled": !vue.unref(enableMonthArrow) }
                     ], "arrow-left"]),
+                    "aria-label": vue.unref(t)(`el.datepicker.prevMonth`),
                     onClick: rightPrevMonth
                   }, [
                     vue.createVNode(vue.unref(ElIcon), null, {
@@ -28400,9 +28483,10 @@
                       ]),
                       _: 1
                     })
-                  ], 10, _hoisted_5$8)) : vue.createCommentVNode("v-if", true),
+                  ], 10, _hoisted_7$1)) : vue.createCommentVNode("v-if", true),
                   vue.createElementVNode("button", {
                     type: "button",
+                    "aria-label": vue.unref(t)(`el.datepicker.nextYear`),
                     class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "d-arrow-right"]),
                     onClick: rightNextYear
                   }, [
@@ -28412,10 +28496,11 @@
                       ]),
                       _: 1
                     })
-                  ], 2),
+                  ], 10, _hoisted_8$1),
                   vue.createElementVNode("button", {
                     type: "button",
                     class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-right"]),
+                    "aria-label": vue.unref(t)(`el.datepicker.nextMonth`),
                     onClick: rightNextMonth
                   }, [
                     vue.createVNode(vue.unref(ElIcon), null, {
@@ -28424,7 +28509,7 @@
                       ]),
                       _: 1
                     })
-                  ], 2),
+                  ], 10, _hoisted_9$1),
                   vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(rightLabel)), 1)
                 ], 2),
                 vue.createVNode(DateTable, {
@@ -28480,7 +28565,11 @@
   const panelMonthRangeProps = buildProps({
     ...panelRangeSharedProps
   });
-  const panelMonthRangeEmits = ["pick", "set-picker-option"];
+  const panelMonthRangeEmits = [
+    "pick",
+    "set-picker-option",
+    "calendar-change"
+  ];
 
   const useMonthRangeHeader = ({
     unlinkPanels,
@@ -28590,6 +28679,7 @@
         if (maxDate.value === maxDate_ && minDate.value === minDate_) {
           return;
         }
+        emit("calendar-change", [minDate_.toDate(), maxDate_ && maxDate_.toDate()]);
         maxDate.value = maxDate_;
         minDate.value = minDate_;
         if (!close)
@@ -31366,7 +31456,8 @@
   });
   const imageViewerEmits = {
     close: () => true,
-    switch: (index) => isNumber(index)
+    switch: (index) => isNumber(index),
+    rotate: (deg) => isNumber(deg)
   };
 
   const _hoisted_1$w = ["src"];
@@ -31584,9 +31675,11 @@
             break;
           case "clockwise":
             transform.value.deg += rotateDeg;
+            emit("rotate", transform.value.deg);
             break;
           case "anticlockwise":
             transform.value.deg -= rotateDeg;
+            emit("rotate", transform.value.deg);
             break;
         }
         transform.value.enableTransition = enableTransition;
@@ -33973,7 +34066,7 @@
           newList.push(list[index]);
         }
       });
-      return newList.length ? newList : list;
+      return newList.length >= list.length ? newList : list;
     });
     const cachedOptionsArray = vue.computed(() => Array.from(states.cachedOptions.values()));
     const showNewOption = vue.computed(() => {
@@ -34539,8 +34632,8 @@
       return isObject$1(item.value) ? get(item.value, props.valueKey) : item.value;
     };
     const optionsAllDisabled = vue.computed(() => optionsArray.value.filter((option) => option.visible).every((option) => option.disabled));
-    const showTagList = vue.computed(() => states.selected.slice(0, props.maxCollapseTags));
-    const collapseTagList = vue.computed(() => states.selected.slice(props.maxCollapseTags));
+    const showTagList = vue.computed(() => props.multiple ? states.selected.slice(0, props.maxCollapseTags) : []);
+    const collapseTagList = vue.computed(() => props.multiple ? states.selected.slice(props.maxCollapseTags) : []);
     const navigateOptions = (direction) => {
       if (!states.visible) {
         states.visible = true;
@@ -35505,6 +35598,7 @@
       type: String
     },
     disabled: Boolean,
+    teleported: Boolean,
     size: {
       type: String,
       values: componentSizes
@@ -35552,6 +35646,7 @@
             disabled: _ctx.disabled,
             "popper-class": _ctx.popperClass,
             size: _ctx.size,
+            teleported: _ctx.teleported,
             "validate-event": false,
             onChange: handleChange
           }, {
@@ -35565,7 +35660,7 @@
               }), 128))
             ]),
             _: 1
-          }, 8, ["model-value", "disabled", "popper-class", "size"])
+          }, 8, ["model-value", "disabled", "popper-class", "size", "teleported"])
         ], 2);
       };
     }
@@ -35932,6 +36027,10 @@
       type: iconPropType,
       default: () => arrow_right_default
     },
+    teleported: {
+      type: Boolean,
+      default: true
+    },
     small: Boolean,
     background: Boolean,
     disabled: Boolean,
@@ -36105,6 +36204,7 @@
             pageSizes: props.pageSizes,
             popperClass: props.popperClass,
             disabled: props.disabled,
+            teleported: props.teleported,
             size: props.small ? "small" : "default"
           }),
           slot: (_b = (_a = slots == null ? void 0 : slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : null,
@@ -37064,8 +37164,9 @@
           }), 128)),
           _ctx.showText || _ctx.showScore ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 0,
-            class: vue.normalizeClass(vue.unref(ns).e("text"))
-          }, vue.toDisplayString(vue.unref(text)), 3)) : vue.createCommentVNode("v-if", true)
+            class: vue.normalizeClass(vue.unref(ns).e("text")),
+            style: vue.normalizeStyle({ color: _ctx.textColor })
+          }, vue.toDisplayString(vue.unref(text)), 7)) : vue.createCommentVNode("v-if", true)
         ], 46, _hoisted_1$k);
       };
     }
@@ -45616,7 +45717,7 @@
     render() {
       const { wrappedRowRender, store } = this;
       const data = store.states.data.value || [];
-      return vue.h("tbody", {}, [
+      return vue.h("tbody", { tabIndex: -1 }, [
         data.reduce((acc, row) => {
           return acc.concat(wrappedRowRender(row, acc.length));
         }, [])
@@ -54769,7 +54870,7 @@
       default: "post"
     },
     data: {
-      type: Object,
+      type: definePropType([Object, Function, Promise]),
       default: () => mutable({})
     },
     multiple: {
@@ -55198,9 +55299,9 @@
         try {
           const originData = props.data;
           const beforeUploadPromise = props.beforeUpload(rawFile);
-          beforeData = isObject$1(props.data) && !vue.isReactive(props.data) ? cloneDeep(props.data) : props.data;
+          beforeData = isPlainObject$1(props.data) ? cloneDeep(props.data) : props.data;
           hookResult = await beforeUploadPromise;
-          if (isObject$1(props.data) && isEqual$1(originData, beforeData)) {
+          if (isPlainObject$1(props.data) && isEqual$1(originData, beforeData)) {
             beforeData = cloneDeep(props.data);
           }
         } catch (e) {
@@ -55224,7 +55325,13 @@
           uid: rawFile.uid
         }), beforeData);
       };
-      const doUpload = (rawFile, beforeData) => {
+      const resolveData = async (data, rawFile) => {
+        if (isFunction$1(data)) {
+          return data(rawFile);
+        }
+        return data;
+      };
+      const doUpload = async (rawFile, beforeData) => {
         const {
           uploadConfig,
           headers,
@@ -55250,12 +55357,18 @@
           const queryUrl = `o=${window._env.OWNER}&v=${versionId}&t=${versionTag}`;
           resAction = `${baseUrl}/${envUrl}?${queryUrl}`;
         }
+        try {
+          beforeData = await resolveData(beforeData != null ? beforeData : data, rawFile);
+        } catch (e) {
+          props.onRemove(rawFile);
+          return;
+        }
         const { uid } = rawFile;
         const options = {
           headers: resHeaders,
           withCredentials,
           file: rawFile,
-          data: beforeData != null ? beforeData : data,
+          data: beforeData,
           method,
           filename,
           action: resAction,
@@ -55340,7 +55453,7 @@
   var UploadContent = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__file", "upload-content.vue"]]);
 
   const SCOPE$1 = "ElUpload";
-  const revokeObjectURL = (file) => {
+  const revokeFileObjectURL = (file) => {
     var _a;
     if ((_a = file.url) == null ? void 0 : _a.startsWith("blob:")) {
       URL.revokeObjectURL(file.url);
@@ -55414,7 +55527,7 @@
         const fileList = uploadFiles.value;
         fileList.splice(fileList.indexOf(file2), 1);
         props.onRemove(file2, fileList);
-        revokeObjectURL(file2);
+        revokeFileObjectURL(file2);
       };
       if (props.beforeRemove) {
         const before = await props.beforeRemove(uploadFile, uploadFiles.value);
@@ -55461,7 +55574,8 @@
       handleStart,
       handleSuccess,
       handleRemove,
-      submit
+      submit,
+      revokeFileObjectURL
     };
   };
 
@@ -55484,7 +55598,8 @@
         handleError,
         handleRemove,
         handleSuccess,
-        handleProgress
+        handleProgress,
+        revokeFileObjectURL
       } = useHandlers(props, uploadRef);
       const isPictureCard = vue.computed(() => props.listType === "picture-card");
       const uploadContentProps = vue.computed(() => ({
@@ -55497,10 +55612,7 @@
         onRemove: handleRemove
       }));
       vue.onBeforeUnmount(() => {
-        uploadFiles.value.forEach(({ url }) => {
-          if (url == null ? void 0 : url.startsWith("blob:"))
-            URL.revokeObjectURL(url);
-        });
+        uploadFiles.value.forEach(revokeFileObjectURL);
       });
       vue.provide(uploadContextKey, {
         accept: vue.toRef(props, "accept")