@element-plus/nightly 0.0.20240729 → 0.0.20240731

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20240729 */
+/*! Element Plus v0.0.20240731 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -7823,7 +7823,9 @@
     if (id !== void 0) {
       el.setAttribute("id", id);
     }
-    target.appendChild(el);
+    if (target) {
+      target.appendChild(el);
+    }
     return el;
   }
   function removeGlobalNode(el) {
@@ -8899,7 +8901,8 @@
         confirm: "OK",
         clear: "Clear",
         defaultLabel: "color picker",
-        description: "current color is {color}. press enter to select a new color."
+        description: "current color is {color}. press enter to select a new color.",
+        alphaLabel: "pick alpha value"
       },
       datepicker: {
         now: "Now",
@@ -11312,7 +11315,7 @@
         el.setAttribute("tabindex", "-1");
       }
     });
-    useEventListener(wrapperRef, "click", handleClick);
+    useEventListener(wrapperRef, "click", handleClick, true);
     return {
       wrapperRef,
       isFocused,
@@ -11530,7 +11533,7 @@
 
   const ElConfigProvider = withInstall(ConfigProvider);
 
-  const version$1 = "0.0.20240729";
+  const version$1 = "0.0.20240731";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -13343,7 +13346,7 @@
     }
   });
 
-  const _hoisted_1$18 = ["role", "aria-labelledby"];
+  const _hoisted_1$19 = ["role", "aria-labelledby"];
   const __default__$1H = vue.defineComponent({
     name: "ElFormItem"
   });
@@ -13644,7 +13647,7 @@
               _: 3
             }, 8, ["name"])
           ], 6)
-        ], 10, _hoisted_1$18);
+        ], 10, _hoisted_1$19);
       };
     }
   });
@@ -13830,7 +13833,7 @@
     compositionend: (evt) => evt instanceof CompositionEvent
   };
 
-  const _hoisted_1$17 = ["role"];
+  const _hoisted_1$18 = ["role"];
   const _hoisted_2$J = ["id", "minlength", "maxlength", "type", "disabled", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form", "autofocus"];
   const _hoisted_3$l = ["id", "minlength", "maxlength", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form", "autofocus", "rows"];
   const __default__$1G = vue.defineComponent({
@@ -14256,7 +14259,7 @@
               class: vue.normalizeClass(vue.unref(nsInput).e("count"))
             }, vue.toDisplayString(vue.unref(textLength)) + " / " + vue.toDisplayString(_ctx.maxlength), 7)) : vue.createCommentVNode("v-if", true)
           ], 64))
-        ], 16, _hoisted_1$17);
+        ], 16, _hoisted_1$18);
       };
     }
   });
@@ -16108,7 +16111,7 @@
   });
   var ElTooltipContent = /* @__PURE__ */ _export_sfc(_sfc_main$2b, [["__file", "content.vue"]]);
 
-  const _hoisted_1$16 = ["innerHTML"];
+  const _hoisted_1$17 = ["innerHTML"];
   const _hoisted_2$I = { key: 1 };
   const __default__$1y = vue.defineComponent({
     name: "ElTooltip"
@@ -16251,7 +16254,7 @@
                   _ctx.rawContent ? (vue.openBlock(), vue.createElementBlock("span", {
                     key: 0,
                     innerHTML: _ctx.content
-                  }, null, 8, _hoisted_1$16)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$I, vue.toDisplayString(_ctx.content), 1))
+                  }, null, 8, _hoisted_1$17)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$I, vue.toDisplayString(_ctx.content), 1))
                 ]),
                 _ctx.showArrow ? (vue.openBlock(), vue.createBlock(vue.unref(ElPopperArrow), {
                   key: 0,
@@ -16345,7 +16348,7 @@
     select: (item) => isObject$1(item)
   };
 
-  const _hoisted_1$15 = ["aria-expanded", "aria-owns"];
+  const _hoisted_1$16 = ["aria-expanded", "aria-owns"];
   const _hoisted_2$H = { key: 0 };
   const _hoisted_3$k = ["id", "aria-selected", "onClick"];
   const COMPONENT_NAME$i = "ElAutocomplete";
@@ -16681,7 +16684,7 @@
                   ])
                 } : void 0
               ]), 1040, ["clearable", "disabled", "name", "model-value", "aria-label", "onKeydown"])
-            ], 14, _hoisted_1$15)
+            ], 14, _hoisted_1$16)
           ]),
           _: 3
         }, 8, ["visible", "placement", "popper-class", "teleported", "transition"]);
@@ -16722,7 +16725,7 @@
     error: (evt) => evt instanceof Event
   };
 
-  const _hoisted_1$14 = ["src", "alt", "srcset"];
+  const _hoisted_1$15 = ["src", "alt", "srcset"];
   const __default__$1w = vue.defineComponent({
     name: "ElAvatar"
   });
@@ -16771,7 +16774,7 @@
             srcset: _ctx.srcSet,
             style: vue.normalizeStyle(vue.unref(fitStyle)),
             onError: handleError
-          }, null, 44, _hoisted_1$14)) : _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 1 }, {
+          }, null, 44, _hoisted_1$15)) : _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 1 }, {
             default: vue.withCtx(() => [
               (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
             ]),
@@ -16928,7 +16931,7 @@
     }
   });
 
-  const _hoisted_1$13 = ["textContent"];
+  const _hoisted_1$14 = ["textContent"];
   const __default__$1u = vue.defineComponent({
     name: "ElBadge"
   });
@@ -16999,7 +17002,7 @@
                 ]),
                 style: vue.normalizeStyle(vue.unref(style)),
                 textContent: vue.toDisplayString(vue.unref(content))
-              }, null, 14, _hoisted_1$13), [
+              }, null, 14, _hoisted_1$14), [
                 [vue.vShow, !_ctx.hidden && (vue.unref(content) || _ctx.isDot)]
               ])
             ]),
@@ -17025,7 +17028,7 @@
     }
   });
 
-  const _hoisted_1$12 = ["aria-label"];
+  const _hoisted_1$13 = ["aria-label"];
   const __default__$1t = vue.defineComponent({
     name: "ElBreadcrumb"
   });
@@ -17053,7 +17056,7 @@
           role: "navigation"
         }, [
           vue.renderSlot(_ctx.$slots, "default")
-        ], 10, _hoisted_1$12);
+        ], 10, _hoisted_1$13);
       };
     }
   });
@@ -18815,7 +18818,7 @@
     ...useAriaProps(["ariaLabel"])
   });
 
-  const _hoisted_1$11 = ["id", "name", "placeholder", "value", "disabled", "readonly"];
+  const _hoisted_1$12 = ["id", "name", "placeholder", "value", "disabled", "readonly"];
   const _hoisted_2$G = ["id", "name", "placeholder", "value", "disabled", "readonly"];
   const __default__$1p = vue.defineComponent({
     name: "Picker"
@@ -19401,7 +19404,7 @@
                 onChange: handleStartChange,
                 onFocus: handleFocusInput,
                 onBlur: handleBlurInput
-              }, null, 42, _hoisted_1$11),
+              }, null, 42, _hoisted_1$12),
               vue.renderSlot(_ctx.$slots, "range-separator", {}, () => [
                 vue.createElementVNode("span", {
                   class: vue.normalizeClass(vue.unref(nsRange).b("separator"))
@@ -19768,7 +19771,7 @@
     ...disabledTimeListsProps
   });
 
-  const _hoisted_1$10 = ["onClick"];
+  const _hoisted_1$11 = ["onClick"];
   const _hoisted_2$F = ["onMouseenter"];
   const _sfc_main$20 = /* @__PURE__ */ vue.defineComponent({
     __name: "basic-time-spinner",
@@ -19996,7 +19999,7 @@
                     ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                       vue.createTextVNode(vue.toDisplayString(("0" + key).slice(-2)), 1)
                     ], 64))
-                  ], 10, _hoisted_1$10);
+                  ], 10, _hoisted_1$11);
                 }), 128))
               ]),
               _: 2
@@ -20219,7 +20222,7 @@
     }
   });
 
-  const _hoisted_1$$ = ["disabled"];
+  const _hoisted_1$10 = ["disabled"];
   const _sfc_main$1_ = /* @__PURE__ */ vue.defineComponent({
     __name: "panel-time-range",
     props: panelTimeRangeProps,
@@ -20482,7 +20485,7 @@
               class: vue.normalizeClass([vue.unref(nsTime).be("panel", "btn"), "confirm"]),
               disabled: vue.unref(btnConfirmDisabled),
               onClick: _cache[1] || (_cache[1] = ($event) => handleConfirm())
-            }, vue.toDisplayString(vue.unref(t)("el.datepicker.confirm")), 11, _hoisted_1$$)
+            }, vue.toDisplayString(vue.unref(t)("el.datepicker.confirm")), 11, _hoisted_1$10)
           ], 2)
         ], 2)) : vue.createCommentVNode("v-if", true);
       };
@@ -20740,7 +20743,7 @@
     };
   };
 
-  const _hoisted_1$_ = { key: 0 };
+  const _hoisted_1$$ = { key: 0 };
   const _hoisted_2$E = ["onClick"];
   const __default__$1o = vue.defineComponent({
     name: "DateTable"
@@ -20784,7 +20787,7 @@
           cellspacing: "0",
           cellpadding: "0"
         }, [
-          !_ctx.hideHeader ? (vue.openBlock(), vue.createElementBlock("thead", _hoisted_1$_, [
+          !_ctx.hideHeader ? (vue.openBlock(), vue.createElementBlock("thead", _hoisted_1$$, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(weekDays), (day) => {
               return vue.openBlock(), vue.createElementBlock("th", { key: day }, vue.toDisplayString(day), 1);
             }), 128))
@@ -21478,7 +21481,7 @@
     };
   };
 
-  const _hoisted_1$Z = ["aria-label"];
+  const _hoisted_1$_ = ["aria-label"];
   const _hoisted_2$D = ["aria-label"];
   const _hoisted_3$j = ["onMouseenter", "onClick"];
   const _hoisted_4$b = ["aria-label"];
@@ -21604,7 +21607,7 @@
                   ]),
                   _: 1
                 })
-              ], 42, _hoisted_1$Z), [
+              ], 42, _hoisted_1$_), [
                 [
                   vue.vShow,
                   (_ctx.arrow === "always" || vue.unref(hover)) && (props.loop || vue.unref(activeIndex) > 0)
@@ -22155,7 +22158,7 @@
     };
   };
 
-  const _hoisted_1$Y = ["id", "indeterminate", "name", "tabindex", "disabled", "true-value", "false-value"];
+  const _hoisted_1$Z = ["id", "indeterminate", "name", "tabindex", "disabled", "true-value", "false-value"];
   const _hoisted_2$C = ["id", "indeterminate", "disabled", "value", "name", "tabindex"];
   const __default__$1j = vue.defineComponent({
     name: "ElCheckbox"
@@ -22228,7 +22231,7 @@
                   onBlur: _cache[3] || (_cache[3] = ($event) => isFocused.value = false),
                   onClick: _cache[4] || (_cache[4] = vue.withModifiers(() => {
                   }, ["stop"]))
-                }, null, 42, _hoisted_1$Y)), [
+                }, null, 42, _hoisted_1$Z)), [
                   [vue.vModelCheckbox, vue.unref(model)]
                 ]) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
                   key: 1,
@@ -22271,7 +22274,7 @@
   });
   var Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$1U, [["__file", "checkbox.vue"]]);
 
-  const _hoisted_1$X = ["name", "tabindex", "disabled", "true-value", "false-value"];
+  const _hoisted_1$Y = ["name", "tabindex", "disabled", "true-value", "false-value"];
   const _hoisted_2$B = ["name", "tabindex", "disabled", "value"];
   const __default__$1i = vue.defineComponent({
     name: "ElCheckboxButton"
@@ -22333,7 +22336,7 @@
             onBlur: _cache[3] || (_cache[3] = ($event) => isFocused.value = false),
             onClick: _cache[4] || (_cache[4] = vue.withModifiers(() => {
             }, ["stop"]))
-          }, null, 42, _hoisted_1$X)), [
+          }, null, 42, _hoisted_1$Y)), [
             [vue.vModelCheckbox, vue.unref(model)]
           ]) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
             key: 1,
@@ -22552,7 +22555,7 @@
     };
   };
 
-  const _hoisted_1$W = ["value", "name", "disabled"];
+  const _hoisted_1$X = ["value", "name", "disabled"];
   const __default__$1g = vue.defineComponent({
     name: "ElRadio"
   });
@@ -22600,7 +22603,7 @@
               onChange: handleChange,
               onClick: _cache[3] || (_cache[3] = vue.withModifiers(() => {
               }, ["stop"]))
-            }, null, 42, _hoisted_1$W), [
+            }, null, 42, _hoisted_1$X), [
               [vue.vModelRadio, vue.unref(modelValue)]
             ]),
             vue.createElementVNode("span", {
@@ -22626,7 +22629,7 @@
     ...radioPropsBase
   });
 
-  const _hoisted_1$V = ["value", "name", "disabled"];
+  const _hoisted_1$W = ["value", "name", "disabled"];
   const __default__$1f = vue.defineComponent({
     name: "ElRadioButton"
   });
@@ -22669,7 +22672,7 @@
             onBlur: _cache[2] || (_cache[2] = ($event) => focus.value = false),
             onClick: _cache[3] || (_cache[3] = vue.withModifiers(() => {
             }, ["stop"]))
-          }, null, 42, _hoisted_1$V), [
+          }, null, 42, _hoisted_1$W), [
             [vue.vModelRadio, vue.unref(modelValue)]
           ]),
           vue.createElementVNode("span", {
@@ -22723,7 +22726,7 @@
   });
   const radioGroupEmits = radioEmits;
 
-  const _hoisted_1$U = ["id", "aria-label", "aria-labelledby"];
+  const _hoisted_1$V = ["id", "aria-label", "aria-labelledby"];
   const __default__$1e = vue.defineComponent({
     name: "ElRadioGroup"
   });
@@ -22782,7 +22785,7 @@
           "aria-labelledby": vue.unref(isLabeledByFormItem) ? vue.unref(formItem).labelId : void 0
         }, [
           vue.renderSlot(_ctx.$slots, "default")
-        ], 10, _hoisted_1$U);
+        ], 10, _hoisted_1$V);
       };
     }
   });
@@ -22929,7 +22932,7 @@
       };
     }
   });
-  const _hoisted_1$T = ["id", "aria-haspopup", "aria-owns", "aria-expanded", "tabindex"];
+  const _hoisted_1$U = ["id", "aria-haspopup", "aria-owns", "aria-expanded", "tabindex"];
   const _hoisted_2$A = /* @__PURE__ */ vue.createElementVNode("span", null, null, -1);
   function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_checkbox = vue.resolveComponent("el-checkbox");
@@ -23012,7 +23015,7 @@
           _: 1
         }, 8, ["class"]))
       ], 64)) : vue.createCommentVNode("v-if", true)
-    ], 42, _hoisted_1$T);
+    ], 42, _hoisted_1$U);
   }
   var ElCascaderNode = /* @__PURE__ */ _export_sfc(_sfc_main$1O, [["render", _sfc_render$t], ["__file", "node.vue"]]);
 
@@ -23828,7 +23831,7 @@
     removeTag: (val) => !!val
   };
 
-  const _hoisted_1$S = { key: 0 };
+  const _hoisted_1$T = { key: 0 };
   const _hoisted_2$z = ["placeholder", "onKeydown"];
   const _hoisted_3$i = ["onClick"];
   const COMPONENT_NAME$e = "ElCascader";
@@ -24307,7 +24310,7 @@
                     onClose: ($event) => deleteTag(tag)
                   }, {
                     default: vue.withCtx(() => [
-                      tag.isCollapseTag === false ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$S, vue.toDisplayString(tag.text), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(ElTooltip), {
+                      tag.isCollapseTag === false ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$T, vue.toDisplayString(tag.text), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(ElTooltip), {
                         key: 1,
                         disabled: popperVisible.value || !_ctx.collapseTagsTooltip,
                         "fallback-placements": ["bottom", "top", "right", "left"],
@@ -24920,7 +24923,7 @@
     };
   };
 
-  const _hoisted_1$R = ["id", "aria-expanded", "aria-controls", "aria-describedby", "tabindex"];
+  const _hoisted_1$S = ["id", "aria-expanded", "aria-controls", "aria-describedby", "tabindex"];
   const _hoisted_2$y = ["id", "aria-hidden", "aria-labelledby"];
   const __default__$16 = vue.defineComponent({
     name: "ElCollapseItem"
@@ -24978,7 +24981,7 @@
               ]),
               _: 1
             }, 8, ["class"])
-          ], 42, _hoisted_1$R),
+          ], 42, _hoisted_1$S),
           vue.createVNode(vue.unref(_CollapseTransition), null, {
             default: vue.withCtx(() => [
               vue.withDirectives(vue.createElementVNode("div", {
@@ -25060,13 +25063,18 @@
 
   const useAlphaSlider = (props) => {
     const instance = vue.getCurrentInstance();
+    const { t } = useLocale();
     const thumb = vue.shallowRef();
     const bar = vue.shallowRef();
+    const alpha = vue.computed(() => props.color.get("alpha"));
+    const alphaLabel = vue.computed(() => t("el.colorpicker.alphaLabel"));
     function handleClick(event) {
+      var _a;
       const target = event.target;
       if (target !== thumb.value) {
         handleDrag(event);
       }
+      (_a = thumb.value) == null ? void 0 : _a.focus();
     }
     function handleDrag(event) {
       if (!bar.value || !thumb.value)
@@ -25086,11 +25094,37 @@
         props.color.set("alpha", Math.round((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 100));
       }
     }
+    function handleKeydown(event) {
+      const { code, shiftKey } = event;
+      const step = shiftKey ? 10 : 1;
+      switch (code) {
+        case EVENT_CODE.left:
+        case EVENT_CODE.down:
+          event.preventDefault();
+          event.stopPropagation();
+          incrementPosition(-step);
+          break;
+        case EVENT_CODE.right:
+        case EVENT_CODE.up:
+          event.preventDefault();
+          event.stopPropagation();
+          incrementPosition(step);
+          break;
+      }
+    }
+    function incrementPosition(step) {
+      let next = alpha.value + step;
+      next = next < 0 ? 0 : next > 100 ? 100 : next;
+      props.color.set("alpha", next);
+    }
     return {
       thumb,
       bar,
+      alpha,
+      alphaLabel,
       handleDrag,
-      handleClick
+      handleClick,
+      handleKeydown
     };
   };
   const useAlphaSliderDOM = (props, {
@@ -25165,6 +25199,7 @@
     return { rootKls, barKls, barStyle, thumbKls, thumbStyle, update };
   };
 
+  const _hoisted_1$R = ["aria-label", "aria-valuenow", "aria-orientation"];
   const COMPONENT_NAME$d = "ElColorAlphaSlider";
   const __default__$15 = vue.defineComponent({
     name: COMPONENT_NAME$d
@@ -25174,7 +25209,15 @@
     props: alphaSliderProps,
     setup(__props, { expose }) {
       const props = __props;
-      const { bar, thumb, handleDrag, handleClick } = useAlphaSlider(props);
+      const {
+        alpha,
+        alphaLabel,
+        bar,
+        thumb,
+        handleDrag,
+        handleClick,
+        handleKeydown
+      } = useAlphaSlider(props);
       const { rootKls, barKls, barStyle, thumbKls, thumbStyle, update } = useAlphaSliderDOM(props, {
         bar,
         thumb,
@@ -25200,8 +25243,16 @@
             ref_key: "thumb",
             ref: thumb,
             class: vue.normalizeClass(vue.unref(thumbKls)),
-            style: vue.normalizeStyle(vue.unref(thumbStyle))
-          }, null, 6)
+            style: vue.normalizeStyle(vue.unref(thumbStyle)),
+            "aria-label": vue.unref(alphaLabel),
+            "aria-valuenow": vue.unref(alpha),
+            "aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
+            "aria-valuemin": "0",
+            "aria-valuemax": "100",
+            role: "slider",
+            tabindex: "0",
+            onKeydown: _cache[1] || (_cache[1] = (...args) => vue.unref(handleKeydown) && vue.unref(handleKeydown)(...args))
+          }, null, 46, _hoisted_1$R)
         ], 2);
       };
     }
@@ -49316,7 +49367,6 @@
       expose,
       emit
     }) {
-      const vm = vue.getCurrentInstance();
       const rootTabs = vue.inject(tabsRootContextKey);
       if (!rootTabs)
         throwError(COMPONENT_NAME$2, `<el-tabs><tab-nav /></el-tabs>`);
@@ -49472,10 +49522,6 @@
         scrollToActiveTab,
         removeFocus
       });
-      vue.watch(() => props.panes, () => vm.update(), {
-        flush: "post",
-        deep: true
-      });
       return () => {
         const scrollBtn = scrollable.value ? [vue.createVNode("span", {
           "class": [ns.e("nav-prev"), ns.is("disabled", !scrollable.value.prev)],
@@ -49671,16 +49717,21 @@
         const header = vue.createVNode("div", {
           "class": [ns.e("header"), isVertical.value && ns.e("header-vertical"), ns.is(props.tabPosition)]
         }, [vue.createVNode(TabNavRenderer, {
-          "render": () => vue.createVNode(TabNav, {
-            "ref": nav$,
-            "currentName": currentName.value,
-            "editable": props.editable,
-            "type": props.type,
-            "panes": panes.value,
-            "stretch": props.stretch,
-            "onTabClick": handleTabClick,
-            "onTabRemove": handleTabRemove
-          }, null)
+          "render": () => {
+            const hasLabelSlot = panes.value.some((pane) => pane.slots.label);
+            return vue.createVNode(TabNav, {
+              ref: nav$,
+              currentName: currentName.value,
+              editable: props.editable,
+              type: props.type,
+              panes: panes.value,
+              stretch: props.stretch,
+              onTabClick: handleTabClick,
+              onTabRemove: handleTabRemove
+            }, {
+              $stable: !hasLabelSlot
+            });
+          }
         }, null), newButton]);
         const panels = vue.createVNode("div", {
           "class": ns.e("content")