@element-plus/nightly 0.0.20240718 → 0.0.20240720

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20240718 */
+/*! Element Plus v0.0.20240720 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -8660,6 +8660,7 @@
     "year",
     "years",
     "month",
+    "months",
     "date",
     "dates",
     "week",
@@ -11494,7 +11495,7 @@
 
   const ElConfigProvider = withInstall(ConfigProvider);
 
-  const version$1 = "0.0.20240718";
+  const version$1 = "0.0.20240720";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -18617,6 +18618,7 @@
     year: "YYYY",
     years: "YYYY",
     month: "YYYY-MM",
+    months: "YYYY-MM",
     datetime: `${DEFAULT_FORMATS_DATE} ${DEFAULT_FORMATS_TIME}`,
     monthrange: "YYYY-MM",
     daterange: DEFAULT_FORMATS_DATE,
@@ -19030,13 +19032,14 @@
         if (!pickerVisible.value && valueIsEmpty.value)
           return "";
         if (formattedValue) {
-          return isDatesPicker.value || isYearsPicker.value ? formattedValue.join(", ") : formattedValue;
+          return isDatesPicker.value || isMonthsPicker.value || isYearsPicker.value ? formattedValue.join(", ") : formattedValue;
         }
         return "";
       });
       const isTimeLikePicker = vue.computed(() => props.type.includes("time"));
       const isTimePicker = vue.computed(() => props.type.startsWith("time"));
       const isDatesPicker = vue.computed(() => props.type === "dates");
+      const isMonthsPicker = vue.computed(() => props.type === "months");
       const isYearsPicker = vue.computed(() => props.type === "years");
       const triggerIcon = vue.computed(() => props.prefixIcon || (isTimeLikePicker.value ? clock_default : calendar_default));
       const showClose = vue.ref(false);
@@ -19305,7 +19308,7 @@
               placeholder: _ctx.placeholder,
               class: vue.normalizeClass([vue.unref(nsDate).b("editor"), vue.unref(nsDate).bm("editor", _ctx.type), _ctx.$attrs.class]),
               style: vue.normalizeStyle(_ctx.$attrs.style),
-              readonly: !_ctx.editable || _ctx.readonly || vue.unref(isDatesPicker) || vue.unref(isYearsPicker) || _ctx.type === "week",
+              readonly: !_ctx.editable || _ctx.readonly || vue.unref(isDatesPicker) || vue.unref(isMonthsPicker) || vue.unref(isYearsPicker) || _ctx.type === "week",
               "aria-label": _ctx.label || _ctx.ariaLabel,
               tabindex: _ctx.tabindex,
               "validate-event": false,
@@ -23787,6 +23790,7 @@
     },
     teleported: useTooltipContentProps.teleported,
     tagType: { ...tagProps.type, default: "info" },
+    tagEffect: { ...tagProps.effect, default: "light" },
     validateEvent: {
       type: Boolean,
       default: true
@@ -24172,7 +24176,7 @@
       };
       const getInputInnerHeight = (inputInner) => Number.parseFloat(useCssVar(nsInput.cssVarName("input-height"), inputInner).value) - 2;
       vue.watch(filtering, updatePopperPosition);
-      vue.watch([checkedNodes, isDisabled], calculatePresentTags);
+      vue.watch([checkedNodes, isDisabled, () => props.collapseTags], calculatePresentTags);
       vue.watch(presentTags, () => {
         vue.nextTick(() => updateStyle());
       });
@@ -24285,6 +24289,7 @@
                     key: tag.key,
                     type: _ctx.tagType,
                     size: vue.unref(tagSize),
+                    effect: _ctx.tagEffect,
                     hit: tag.hitState,
                     closable: tag.closable,
                     "disable-transitions": "",
@@ -24315,6 +24320,7 @@
                                   class: "in-tooltip",
                                   type: _ctx.tagType,
                                   size: vue.unref(tagSize),
+                                  effect: _ctx.tagEffect,
                                   hit: tag2.hitState,
                                   closable: tag2.closable,
                                   "disable-transitions": "",
@@ -24324,7 +24330,7 @@
                                     vue.createElementVNode("span", null, vue.toDisplayString(tag2.text), 1)
                                   ]),
                                   _: 2
-                                }, 1032, ["type", "size", "hit", "closable", "onClose"]))
+                                }, 1032, ["type", "size", "effect", "hit", "closable", "onClose"]))
                               ], 2);
                             }), 128))
                           ], 2)
@@ -24333,7 +24339,7 @@
                       }, 1032, ["disabled"]))
                     ]),
                     _: 2
-                  }, 1032, ["type", "size", "hit", "closable", "onClose"]);
+                  }, 1032, ["type", "size", "effect", "hit", "closable", "onClose"]);
                 }), 128)),
                 _ctx.filterable && !vue.unref(isDisabled) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
                   key: 0,
@@ -26519,6 +26525,7 @@
     "year",
     "years",
     "month",
+    "months",
     "week",
     "range"
   ];
@@ -27255,7 +27262,15 @@
         const row = target.parentNode.rowIndex;
         const month = row * 4 + column;
         const newDate = props.date.startOf("year").month(month);
-        if (props.selectionMode === "range") {
+        if (props.selectionMode === "months") {
+          if (event.type === "keydown") {
+            emit("pick", castArray(props.parsedValue), false);
+            return;
+          }
+          const newMonth = props.date.startOf("month").month(month);
+          const newValue = hasClass(target, "current") ? castArray(props.parsedValue).filter((d) => Number(d) !== Number(newMonth)) : castArray(props.parsedValue).concat([dayjs(newMonth)]);
+          emit("pick", newValue);
+        } else if (props.selectionMode === "range") {
           if (!props.rangeState.selecting) {
             emit("pick", { minDate: newDate, maxDate: null });
             emit("select", true);
@@ -27563,19 +27578,25 @@
       };
       const selectionMode = vue.computed(() => {
         const { type } = props;
-        if (["week", "month", "year", "years", "dates"].includes(type))
+        if (["week", "month", "months", "year", "years", "dates"].includes(type))
           return type;
         return "date";
       });
+      const isMultipleType = vue.computed(() => {
+        return selectionMode.value === "dates" || selectionMode.value === "months" || selectionMode.value === "years";
+      });
       const keyboardMode = vue.computed(() => {
         return selectionMode.value === "date" ? currentView.value : selectionMode.value;
       });
       const hasShortcuts = vue.computed(() => !!shortcuts.length);
-      const handleMonthPick = async (month2) => {
-        innerDate.value = innerDate.value.startOf("month").month(month2);
+      const handleMonthPick = async (month2, keepOpen) => {
         if (selectionMode.value === "month") {
+          innerDate.value = innerDate.value.startOf("month").month(month2);
           emit(innerDate.value, false);
+        } else if (selectionMode.value === "months") {
+          emit(month2, keepOpen != null ? keepOpen : true);
         } else {
+          innerDate.value = innerDate.value.startOf("month").month(month2);
           currentView.value = "date";
           if (["month", "year", "date", "week"].includes(selectionMode.value)) {
             emit(innerDate.value, true);
@@ -27611,9 +27632,11 @@
       const footerVisible = vue.computed(() => {
         const showDateFooter = showTime.value || selectionMode.value === "dates";
         const showYearFooter = selectionMode.value === "years";
+        const showMonthFooter = selectionMode.value === "months";
         const isDateView = currentView.value === "date";
         const isYearView = currentView.value === "year";
-        return showDateFooter && isDateView || showYearFooter && isYearView;
+        const isMonthView = currentView.value === "month";
+        return showDateFooter && isDateView || showYearFooter && isYearView || showMonthFooter && isMonthView;
       });
       const disabledConfirm = vue.computed(() => {
         if (!disabledDate)
@@ -27626,7 +27649,7 @@
         return disabledDate(props.parsedValue.toDate());
       });
       const onConfirm = () => {
-        if (selectionMode.value === "dates" || selectionMode.value === "years") {
+        if (isMultipleType.value) {
           emit(props.parsedValue);
         } else {
           let result = props.parsedValue;
@@ -27831,6 +27854,9 @@
         } else if (val === "years") {
           currentView.value = "year";
           return;
+        } else if (val === "months") {
+          currentView.value = "month";
+          return;
         }
         currentView.value = "date";
       }, { immediate: true });
@@ -27844,7 +27870,7 @@
       }, { immediate: true });
       vue.watch(() => props.parsedValue, (val) => {
         if (val) {
-          if (selectionMode.value === "dates" || selectionMode.value === "years")
+          if (isMultipleType.value)
             return;
           if (Array.isArray(val))
             return;
@@ -28051,11 +28077,12 @@
                   key: 2,
                   ref_key: "currentViewRef",
                   ref: currentViewRef,
+                  "selection-mode": vue.unref(selectionMode),
                   date: innerDate.value,
                   "parsed-value": _ctx.parsedValue,
                   "disabled-date": vue.unref(disabledDate),
                   onPick: handleMonthPick
-                }, null, 8, ["date", "parsed-value", "disabled-date"])) : vue.createCommentVNode("v-if", true)
+                }, null, 8, ["selection-mode", "date", "parsed-value", "disabled-date"])) : vue.createCommentVNode("v-if", true)
               ], 34)
             ], 2)
           ], 2),
@@ -28074,7 +28101,7 @@
               ]),
               _: 1
             }, 8, ["class", "disabled"]), [
-              [vue.vShow, vue.unref(selectionMode) !== "dates" && vue.unref(selectionMode) !== "years"]
+              [vue.vShow, !vue.unref(isMultipleType)]
             ]),
             vue.createVNode(vue.unref(ElButton), {
               plain: "",
@@ -41947,7 +41974,7 @@
     setup(__props, { expose, emit }) {
       const props = __props;
       let timer;
-      const rawValue = vue.ref(getTime(props.value) - Date.now());
+      const rawValue = vue.ref(0);
       const displayValue = vue.computed(() => formatTime$1(rawValue.value, props.format));
       const formatter = (val) => formatTime$1(val, props.format);
       const stopTimer = () => {
@@ -41972,11 +41999,14 @@
         };
         timer = rAF(frameFunc);
       };
-      vue.watch(() => [props.value, props.format], () => {
-        stopTimer();
-        startTimer();
-      }, {
-        immediate: true
+      vue.onMounted(() => {
+        rawValue.value = getTime(props.value) - Date.now();
+        vue.watch(() => [props.value, props.format], () => {
+          stopTimer();
+          startTimer();
+        }, {
+          immediate: true
+        });
       });
       vue.onBeforeUnmount(() => {
         stopTimer();
@@ -52798,12 +52828,18 @@
       const setCurrentNode = (node, shouldAutoExpandParent = true) => {
         if (!props.nodeKey)
           throw new Error("[Tree] nodeKey is required in setCurrentNode");
-        handleCurrentChange(store, ctx.emit, () => store.value.setUserCurrentNode(node, shouldAutoExpandParent));
+        handleCurrentChange(store, ctx.emit, () => {
+          broadcastExpanded(node);
+          store.value.setUserCurrentNode(node, shouldAutoExpandParent);
+        });
       };
       const setCurrentKey = (key, shouldAutoExpandParent = true) => {
         if (!props.nodeKey)
           throw new Error("[Tree] nodeKey is required in setCurrentKey");
-        handleCurrentChange(store, ctx.emit, () => store.value.setCurrentNodeKey(key, shouldAutoExpandParent));
+        handleCurrentChange(store, ctx.emit, () => {
+          broadcastExpanded();
+          store.value.setCurrentNodeKey(key, shouldAutoExpandParent);
+        });
       };
       const getNode = (data) => {
         return store.value.getNode(data);
@@ -57685,8 +57721,8 @@
         action: "",
         confirmButtonLoading: false,
         cancelButtonLoading: false,
-        confirmButtonLoadingIcon: loading_default,
-        cancelButtonLoadingIcon: loading_default,
+        confirmButtonLoadingIcon: vue.markRaw(loading_default),
+        cancelButtonLoadingIcon: vue.markRaw(loading_default),
         confirmButtonDisabled: false,
         editorErrorMessage: "",
         validateError: false,