@element-plus/nightly 0.0.20240730 → 0.0.20240731

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20240730 */
+/*! Element Plus v0.0.20240731 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -8901,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",
@@ -11532,7 +11533,7 @@
 
   const ElConfigProvider = withInstall(ConfigProvider);
 
-  const version$1 = "0.0.20240730";
+  const version$1 = "0.0.20240731";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -13345,7 +13346,7 @@
     }
   });
 
-  const _hoisted_1$18 = ["role", "aria-labelledby"];
+  const _hoisted_1$19 = ["role", "aria-labelledby"];
   const __default__$1H = vue.defineComponent({
     name: "ElFormItem"
   });
@@ -13646,7 +13647,7 @@
               _: 3
             }, 8, ["name"])
           ], 6)
-        ], 10, _hoisted_1$18);
+        ], 10, _hoisted_1$19);
       };
     }
   });
@@ -13832,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({
@@ -14258,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);
       };
     }
   });
@@ -16110,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"
@@ -16253,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,
@@ -16347,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";
@@ -16683,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"]);
@@ -16724,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"
   });
@@ -16773,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)))
             ]),
@@ -16930,7 +16931,7 @@
     }
   });
 
-  const _hoisted_1$13 = ["textContent"];
+  const _hoisted_1$14 = ["textContent"];
   const __default__$1u = vue.defineComponent({
     name: "ElBadge"
   });
@@ -17001,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)]
               ])
             ]),
@@ -17027,7 +17028,7 @@
     }
   });
 
-  const _hoisted_1$12 = ["aria-label"];
+  const _hoisted_1$13 = ["aria-label"];
   const __default__$1t = vue.defineComponent({
     name: "ElBreadcrumb"
   });
@@ -17055,7 +17056,7 @@
           role: "navigation"
         }, [
           vue.renderSlot(_ctx.$slots, "default")
-        ], 10, _hoisted_1$12);
+        ], 10, _hoisted_1$13);
       };
     }
   });
@@ -18817,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"
@@ -19403,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"))
@@ -19770,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",
@@ -19998,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
@@ -20221,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,
@@ -20484,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);
       };
@@ -20742,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"
@@ -20786,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))
@@ -21480,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"];
@@ -21606,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)
@@ -22157,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"
@@ -22230,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,
@@ -22273,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"
@@ -22335,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,
@@ -22554,7 +22555,7 @@
     };
   };
 
-  const _hoisted_1$W = ["value", "name", "disabled"];
+  const _hoisted_1$X = ["value", "name", "disabled"];
   const __default__$1g = vue.defineComponent({
     name: "ElRadio"
   });
@@ -22602,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", {
@@ -22628,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"
   });
@@ -22671,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", {
@@ -22725,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"
   });
@@ -22784,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);
       };
     }
   });
@@ -22931,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");
@@ -23014,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"]]);
 
@@ -23830,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";
@@ -24309,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"],
@@ -24922,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"
@@ -24980,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", {
@@ -25062,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)
@@ -25088,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, {
@@ -25167,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
@@ -25176,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,
@@ -25202,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);
       };
     }