xxl-job-vue3 1.0.0 → 1.0.1

package/dist/{index-OKUPhEWh.js → index-D6UxUdAp.js}

@@ -1,7 +1,7 @@
-import { defineComponent, ref, provide, onMounted, createElementBlock, openBlock, unref, normalizeClass, renderSlot, getCurrentInstance, inject, createElementVNode, createBlock, withCtx, resolveDynamicComponent, toDisplayString, Transition, mergeProps, toHandlers, shallowRef, computed, watch, normalizeStyle, Fragment, renderList, watchEffect, reactive, nextTick, createCommentVNode, withDirectives, createVNode, vShow, withKeys, createTextVNode, useSlots, onBeforeUnmount, h, toRef, resolveComponent, isRef, KeepAlive, TransitionGroup } from "vue";
-import { n as buildProps, o as iconPropType, p as _export_sfc, u as useLocale, q as useNamespace, r as definePropType, E as ElIcon, w as withInstall, s as withNoopInstall, t as isClient, v as addUnit, x as EVENT_CODE, y as isString, z as isNil, C as CHANGE_EVENT, U as UPDATE_MODEL_EVENT, A as useAriaProps, B as useTooltipContentProps, D as useSizeProp, F as hasOwn, G as useFormItem, H as useFormSize, I as useFormDisabled, J as useFormItemInputId, K as useFocusController, L as debounce, M as ElTooltip, N as arrow_down_default, O as close_default, P as ElInput, Q as ElButton, R as ClickOutside, S as debugWarn, T as triggerEvent, V as addClass, W as hasClass, X as removeClass, Y as TinyColor, Z as throwError, $ as arrow_right_default, a0 as useTimeoutFn, a1 as isArray, a2 as isObject, a3 as useResizeObserver, a4 as flattedChildren, a5 as more_default, a6 as mutable, a7 as useGlobalStore, a8 as DEFAULT_PRIMARY, a9 as ElSwitch, aa as moon_default, ab as sunny_default, ac as ElDrawer, ad as _export_sfc$1, ae as piniaPersistConfig, af as getUrlWithParams, ag as router, ah as useAuthStore, ai as useRoute, aj as useRouter, ak as ElDropdown, al as ElDropdownMenu, am as ElDropdownItem, an as Sortable, ao as ElTabs, ap as ElTabPane, aq as useDebounceFn, ar as useUserStore, as as normalizeStyle$1, at as ElScrollbar } from "./index-Bf5gEacT.js";
-import { storeToRefs, defineStore } from "pinia";
+import { defineComponent, ref, provide, onMounted, createElementBlock, openBlock, unref, normalizeClass, renderSlot, getCurrentInstance, inject, createElementVNode, createBlock, withCtx, resolveDynamicComponent, toDisplayString, Transition, mergeProps, toHandlers, shallowRef, computed, watch, normalizeStyle, watchEffect, Fragment, renderList, reactive, nextTick, createCommentVNode, createVNode, withDirectives, vShow, withKeys, createTextVNode, useSlots, onBeforeUnmount, h, toRef, resolveComponent, isRef, KeepAlive, TransitionGroup } from "vue";
+import { n as buildProps, o as iconPropType, p as _export_sfc, u as useLocale, q as useNamespace, r as definePropType, E as ElIcon, w as withInstall, s as withNoopInstall, t as isClient, v as addUnit, x as getEventCode, y as EVENT_CODE, z as isString, A as isNil, U as UPDATE_MODEL_EVENT, T as TinyColor, B as hasOwn, C as useFormItem, D as useFormDisabled, F as debugWarn, G as ElInput, H as CHANGE_EVENT, I as useAriaProps, J as useEmptyValuesProps, K as useTooltipContentProps, L as useSizeProp, M as useFormSize, N as useEmptyValues, O as useFormItemInputId, P as useFocusController, Q as reactiveComputed, R as pick, S as debounce, V as ElTooltip, W as ElButton, X as ClickOutside, Y as triggerEvent, Z as addClass, $ as hasClass, a0 as removeClass, a1 as throwError, a2 as isUndefined, a3 as useTimeoutFn, a4 as focusElement, a5 as isArray, a6 as isObject, a7 as useResizeObserver, a8 as flattedChildren, a9 as mutable, aa as unrefElement, ab as isPropAbsent, ac as useGlobalStore, ad as storeToRefs, ae as DEFAULT_PRIMARY, af as ElSwitch, ag as ElDrawer, ah as _export_sfc$1, ai as defineStore, aj as piniaPersistConfig, ak as getUrlWithParams, al as router, am as useAuthStore, an as useRoute, ao as useRouter, ap as ElDropdown, aq as ElDropdownMenu, ar as ElDropdownItem, as as Sortable, at as ElTabs, au as ElTabPane, av as useDebounceFn, aw as useUserStore, ax as normalizeStyle$1, ay as ElScrollbar } from "./index-C8Y_Od96.js";
 import { ElMessage } from "element-plus";
+import { ArrowDown, Close, ArrowRight, More, Moon, Sunny } from "@element-plus/icons-vue";
 const breadcrumbKey = Symbol("breadcrumbKey");
 const breadcrumbProps = buildProps({
   separator: {
@@ -12,15 +12,16 @@ const breadcrumbProps = buildProps({
     type: iconPropType
   }
 });
-const __default__$h = defineComponent({
-  name: "ElBreadcrumb"
-});
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
-  ...__default__$h,
+const _hoisted_1$g = ["aria-label"];
+const _sfc_main$z = defineComponent({
+  ...{
+    name: "ElBreadcrumb"
+  },
+  __name: "breadcrumb",
   props: breadcrumbProps,
   setup(__props) {
-    const props = __props;
     const { t } = useLocale();
+    const props = __props;
     const ns = useNamespace("breadcrumb");
     const breadcrumb = ref();
     provide(breadcrumbKey, props);
@@ -39,11 +40,11 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         role: "navigation"
       }, [
         renderSlot(_ctx.$slots, "default")
-      ], 10, ["aria-label"]);
+      ], 10, _hoisted_1$g);
     };
   }
 });
-var Breadcrumb$1 = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__file", "breadcrumb.vue"]]);
+var Breadcrumb$1 = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/breadcrumb/src/breadcrumb.vue"]]);
 const breadcrumbItemProps = buildProps({
   to: {
     type: definePropType([String, Object]),
@@ -51,11 +52,11 @@ const breadcrumbItemProps = buildProps({
   },
   replace: Boolean
 });
-const __default__$g = defineComponent({
-  name: "ElBreadcrumbItem"
-});
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
-  ...__default__$g,
+const _sfc_main$y = defineComponent({
+  ...{
+    name: "ElBreadcrumbItem"
+  },
+  __name: "breadcrumb-item",
   props: breadcrumbItemProps,
   setup(__props) {
     const props = __props;
@@ -63,7 +64,6 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     const breadcrumbContext = inject(breadcrumbKey, void 0);
     const ns = useNamespace("breadcrumb");
     const router2 = instance.appContext.config.globalProperties.$router;
-    const link = ref();
     const onClick = () => {
       if (!props.to || !router2)
         return;
@@ -71,45 +71,58 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       var _a, _b;
-      return openBlock(), createElementBlock("span", {
-        class: normalizeClass(unref(ns).e("item"))
-      }, [
-        createElementVNode("span", {
-          ref_key: "link",
-          ref: link,
-          class: normalizeClass([unref(ns).e("inner"), unref(ns).is("link", !!_ctx.to)]),
-          role: "link",
-          onClick
-        }, [
-          renderSlot(_ctx.$slots, "default")
-        ], 2),
-        ((_a = unref(breadcrumbContext)) == null ? void 0 : _a.separatorIcon) ? (openBlock(), createBlock(unref(ElIcon), {
-          key: 0,
-          class: normalizeClass(unref(ns).e("separator"))
-        }, {
-          default: withCtx(() => [
-            (openBlock(), createBlock(resolveDynamicComponent(unref(breadcrumbContext).separatorIcon)))
-          ]),
-          _: 1
-        }, 8, ["class"])) : (openBlock(), createElementBlock("span", {
-          key: 1,
-          class: normalizeClass(unref(ns).e("separator")),
-          role: "presentation"
-        }, toDisplayString((_b = unref(breadcrumbContext)) == null ? void 0 : _b.separator), 3))
-      ], 2);
+      return openBlock(), createElementBlock(
+        "span",
+        {
+          class: normalizeClass(unref(ns).e("item"))
+        },
+        [
+          createElementVNode(
+            "span",
+            {
+              class: normalizeClass([unref(ns).e("inner"), unref(ns).is("link", !!_ctx.to)]),
+              role: "link",
+              onClick
+            },
+            [
+              renderSlot(_ctx.$slots, "default")
+            ],
+            2
+          ),
+          ((_a = unref(breadcrumbContext)) == null ? void 0 : _a.separatorIcon) ? (openBlock(), createBlock(unref(ElIcon), {
+            key: 0,
+            class: normalizeClass(unref(ns).e("separator"))
+          }, {
+            default: withCtx(() => [
+              (openBlock(), createBlock(resolveDynamicComponent(unref(breadcrumbContext).separatorIcon)))
+            ]),
+            _: 1
+          }, 8, ["class"])) : (openBlock(), createElementBlock(
+            "span",
+            {
+              key: 1,
+              class: normalizeClass(unref(ns).e("separator")),
+              role: "presentation"
+            },
+            toDisplayString((_b = unref(breadcrumbContext)) == null ? void 0 : _b.separator),
+            3
+          ))
+        ],
+        2
+      );
     };
   }
 });
-var BreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__file", "breadcrumb-item.vue"]]);
+var BreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/breadcrumb/src/breadcrumb-item.vue"]]);
 const ElBreadcrumb = withInstall(Breadcrumb$1, {
   BreadcrumbItem
 });
 const ElBreadcrumbItem = withNoopInstall(BreadcrumbItem);
-const __default__$f = defineComponent({
-  name: "ElCollapseTransition"
-});
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
-  ...__default__$f,
+const _sfc_main$x = defineComponent({
+  ...{
+    name: "ElCollapseTransition"
+  },
+  __name: "collapse-transition",
   setup(__props) {
     const ns = useNamespace("collapse-transition");
     const reset = (el) => {
@@ -187,18 +200,17 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var CollapseTransition = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__file", "collapse-transition.vue"]]);
+var CollapseTransition = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/collapse-transition/src/collapse-transition.vue"]]);
 const ElCollapseTransition = withInstall(CollapseTransition);
 const alphaSliderProps = buildProps({
   color: {
     type: definePropType(Object),
     required: true
   },
-  vertical: {
-    type: Boolean,
-    default: false
-  }
+  vertical: Boolean,
+  disabled: Boolean
 });
+const hueSliderProps = alphaSliderProps;
 let isDragging = false;
 function draggable(element, options) {
   if (!isClient)
@@ -222,7 +234,6 @@ function draggable(element, options) {
     var _a;
     if (isDragging)
       return;
-    event.preventDefault();
     document.onselectstart = () => false;
     document.ondragstart = () => false;
     document.addEventListener("mousemove", moveFn);
@@ -253,15 +264,15 @@ const getClientXY = (event) => {
     clientY
   };
 };
-const useAlphaSlider = (props) => {
+const useSlider = (props, { key, minValue: minValue2, maxValue: maxValue2 }) => {
   const instance = getCurrentInstance();
-  const { t } = useLocale();
   const thumb = shallowRef();
   const bar = shallowRef();
-  const alpha = computed(() => props.color.get("alpha"));
-  const alphaLabel = computed(() => t("el.colorpicker.alphaLabel"));
+  const currentValue = computed(() => props.color.get(key));
   function handleClick(event) {
     var _a;
+    if (props.disabled)
+      return;
     const target = event.target;
     if (target !== thumb.value) {
       handleDrag(event);
@@ -269,63 +280,89 @@ const useAlphaSlider = (props) => {
     (_a = thumb.value) == null ? void 0 : _a.focus();
   }
   function handleDrag(event) {
-    if (!bar.value || !thumb.value)
+    if (!bar.value || !thumb.value || props.disabled)
       return;
     const el = instance.vnode.el;
     const rect = el.getBoundingClientRect();
     const { clientX, clientY } = getClientXY(event);
+    let value;
     if (!props.vertical) {
       let left = clientX - rect.left;
       left = Math.max(thumb.value.offsetWidth / 2, left);
       left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
-      props.color.set("alpha", Math.round((left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 100));
+      value = Math.round(
+        (left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * maxValue2
+      );
     } else {
       let top = clientY - rect.top;
       top = Math.max(thumb.value.offsetHeight / 2, top);
       top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
-      props.color.set("alpha", Math.round((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 100));
+      value = Math.round(
+        (top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * maxValue2
+      );
     }
+    props.color.set(key, value);
   }
   function handleKeydown(event) {
-    const { code, shiftKey } = event;
+    if (props.disabled)
+      return;
+    const { shiftKey } = event;
+    const code = getEventCode(event);
     const step = shiftKey ? 10 : 1;
+    const reverse = key === "hue" ? -1 : 1;
+    let isPreventDefault = true;
     switch (code) {
       case EVENT_CODE.left:
       case EVENT_CODE.down:
-        event.preventDefault();
-        event.stopPropagation();
-        incrementPosition(-step);
+        incrementPosition(-step * reverse);
         break;
       case EVENT_CODE.right:
       case EVENT_CODE.up:
-        event.preventDefault();
-        event.stopPropagation();
-        incrementPosition(step);
+        incrementPosition(step * reverse);
+        break;
+      case EVENT_CODE.home:
+        props.color.set(key, key === "hue" ? maxValue2 : minValue2);
+        break;
+      case EVENT_CODE.end:
+        props.color.set(key, key === "hue" ? minValue2 : maxValue2);
+        break;
+      case EVENT_CODE.pageDown:
+        incrementPosition(-4 * reverse);
+        break;
+      case EVENT_CODE.pageUp:
+        incrementPosition(4 * reverse);
+        break;
+      default:
+        isPreventDefault = false;
         break;
     }
+    isPreventDefault && event.preventDefault();
   }
   function incrementPosition(step) {
-    let next = alpha.value + step;
-    next = next < 0 ? 0 : next > 100 ? 100 : next;
-    props.color.set("alpha", next);
+    let next = currentValue.value + step;
+    next = next < minValue2 ? minValue2 : next > maxValue2 ? maxValue2 : next;
+    props.color.set(key, next);
   }
   return {
     thumb,
     bar,
-    alpha,
-    alphaLabel,
+    currentValue,
     handleDrag,
     handleClick,
     handleKeydown
   };
 };
-const useAlphaSliderDOM = (props, {
+const useSliderDOM = (props, {
+  namespace,
+  maxValue: maxValue2,
   bar,
   thumb,
-  handleDrag
+  currentValue,
+  handleDrag,
+  getBackground
 }) => {
   const instance = getCurrentInstance();
-  const ns = useNamespace("color-alpha-slider");
+  const ns = useNamespace(namespace);
   const thumbLeft = ref(0);
   const thumbTop = ref(0);
   const background = ref();
@@ -335,10 +372,12 @@ const useAlphaSliderDOM = (props, {
     if (props.vertical)
       return 0;
     const el = instance.vnode.el;
-    const alpha = props.color.get("alpha");
+    const value = currentValue.value;
     if (!el)
       return 0;
-    return Math.round(alpha * (el.offsetWidth - thumb.value.offsetWidth / 2) / 100);
+    return Math.round(
+      value * (el.offsetWidth - thumb.value.offsetWidth / 2) / maxValue2
+    );
   }
   function getThumbTop() {
     if (!thumb.value)
@@ -346,22 +385,17 @@ const useAlphaSliderDOM = (props, {
     const el = instance.vnode.el;
     if (!props.vertical)
       return 0;
-    const alpha = props.color.get("alpha");
+    const value = currentValue.value;
     if (!el)
       return 0;
-    return Math.round(alpha * (el.offsetHeight - thumb.value.offsetHeight / 2) / 100);
-  }
-  function getBackground() {
-    if (props.color && props.color.value) {
-      const { r, g, b } = props.color.toRgb();
-      return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
-    }
-    return "";
+    return Math.round(
+      value * (el.offsetHeight - thumb.value.offsetHeight / 2) / maxValue2
+    );
   }
   function update() {
     thumbLeft.value = getThumbLeft();
     thumbTop.value = getThumbTop();
-    background.value = getBackground();
+    background.value = getBackground == null ? void 0 : getBackground();
   }
   onMounted(() => {
     if (!bar.value || !thumb.value)
@@ -378,9 +412,16 @@ const useAlphaSliderDOM = (props, {
     draggable(thumb.value, dragConfig);
     update();
   });
-  watch(() => props.color.get("alpha"), () => update());
-  watch(() => props.color.value, () => update());
-  const rootKls = computed(() => [ns.b(), ns.is("vertical", props.vertical)]);
+  watch(currentValue, () => update());
+  watch(
+    () => props.color.value,
+    () => update()
+  );
+  const rootKls = computed(() => [
+    ns.b(),
+    ns.is("vertical", props.vertical),
+    ns.is("disabled", props.disabled)
+  ]);
   const barKls = computed(() => ns.e("bar"));
   const thumbKls = computed(() => ns.e("thumb"));
   const barStyle = computed(() => ({ background: background.value }));
@@ -388,353 +429,225 @@ const useAlphaSliderDOM = (props, {
     left: addUnit(thumbLeft.value),
     top: addUnit(thumbTop.value)
   }));
-  return { rootKls, barKls, barStyle, thumbKls, thumbStyle, update };
+  return {
+    rootKls,
+    barKls,
+    barStyle,
+    thumbKls,
+    thumbStyle,
+    thumbLeft,
+    thumbTop,
+    update
+  };
 };
-const COMPONENT_NAME$2 = "ElColorAlphaSlider";
-const __default__$e = defineComponent({
-  name: COMPONENT_NAME$2
-});
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
-  ...__default__$e,
+const _hoisted_1$f = ["aria-label", "aria-valuenow", "aria-valuetext", "aria-orientation", "tabindex", "aria-disabled"];
+const minValue$1 = 0;
+const maxValue$1 = 100;
+const _sfc_main$w = defineComponent({
+  ...{
+    name: "ElColorAlphaSlider"
+  },
+  __name: "alpha-slider",
   props: alphaSliderProps,
-  setup(__props, { expose }) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
-    const {
-      alpha,
-      alphaLabel,
+    const { currentValue, bar, thumb, handleDrag, handleClick, handleKeydown } = useSlider(props, { key: "alpha", minValue: minValue$1, maxValue: maxValue$1 });
+    const { rootKls, barKls, barStyle, thumbKls, thumbStyle, update } = useSliderDOM(props, {
+      namespace: "color-alpha-slider",
+      maxValue: maxValue$1,
+      currentValue,
       bar,
       thumb,
       handleDrag,
-      handleClick,
-      handleKeydown
-    } = useAlphaSlider(props);
-    const { rootKls, barKls, barStyle, thumbKls, thumbStyle, update } = useAlphaSliderDOM(props, {
-      bar,
-      thumb,
-      handleDrag
+      getBackground
     });
-    expose({
+    const { t } = useLocale();
+    const ariaLabel = computed(() => t("el.colorpicker.alphaLabel"));
+    const ariaValuetext = computed(() => {
+      return t("el.colorpicker.alphaDescription", {
+        alpha: currentValue.value,
+        color: props.color.value
+      });
+    });
+    function getBackground() {
+      if (props.color && props.color.value) {
+        const { r, g, b } = props.color.toRgb();
+        return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
+      }
+      return "";
+    }
+    __expose({
       update,
       bar,
       thumb
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(unref(rootKls))
-      }, [
-        createElementVNode("div", {
-          ref_key: "bar",
-          ref: bar,
-          class: normalizeClass(unref(barKls)),
-          style: normalizeStyle(unref(barStyle)),
-          onClick: unref(handleClick)
-        }, null, 14, ["onClick"]),
-        createElementVNode("div", {
-          ref_key: "thumb",
-          ref: thumb,
-          class: normalizeClass(unref(thumbKls)),
-          style: normalizeStyle(unref(thumbStyle)),
-          "aria-label": unref(alphaLabel),
-          "aria-valuenow": unref(alpha),
-          "aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
-          "aria-valuemin": "0",
-          "aria-valuemax": "100",
-          role: "slider",
-          tabindex: "0",
-          onKeydown: unref(handleKeydown)
-        }, null, 46, ["aria-label", "aria-valuenow", "aria-orientation", "onKeydown"])
-      ], 2);
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(unref(rootKls))
+        },
+        [
+          createElementVNode(
+            "div",
+            {
+              ref_key: "bar",
+              ref: bar,
+              class: normalizeClass(unref(barKls)),
+              style: normalizeStyle(unref(barStyle)),
+              onClick: _cache[0] || (_cache[0] = (...args) => unref(handleClick) && unref(handleClick)(...args))
+            },
+            null,
+            6
+          ),
+          createElementVNode("div", {
+            ref_key: "thumb",
+            ref: thumb,
+            class: normalizeClass(unref(thumbKls)),
+            style: normalizeStyle(unref(thumbStyle)),
+            "aria-label": ariaLabel.value,
+            "aria-valuenow": unref(currentValue),
+            "aria-valuetext": ariaValuetext.value,
+            "aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
+            "aria-valuemin": minValue$1,
+            "aria-valuemax": maxValue$1,
+            role: "slider",
+            tabindex: _ctx.disabled ? void 0 : 0,
+            "aria-disabled": _ctx.disabled,
+            onKeydown: _cache[1] || (_cache[1] = (...args) => unref(handleKeydown) && unref(handleKeydown)(...args))
+          }, null, 46, _hoisted_1$f)
+        ],
+        2
+      );
     };
   }
 });
-var AlphaSlider = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__file", "alpha-slider.vue"]]);
-const _sfc_main$u = defineComponent({
-  name: "ElColorHueSlider",
-  props: {
-    color: {
-      type: Object,
-      required: true
-    },
-    vertical: Boolean
+var AlphaSlider = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker-panel/src/components/alpha-slider.vue"]]);
+const _hoisted_1$e = ["aria-label", "aria-valuenow", "aria-valuetext", "aria-orientation", "tabindex", "aria-disabled"];
+const minValue = 0;
+const maxValue = 360;
+const _sfc_main$v = defineComponent({
+  ...{
+    name: "ElColorHueSlider"
   },
-  setup(props) {
-    const ns = useNamespace("color-hue-slider");
-    const instance = getCurrentInstance();
-    const thumb = ref();
-    const bar = ref();
-    const thumbLeft = ref(0);
-    const thumbTop = ref(0);
-    const hueValue = computed(() => {
-      return props.color.get("hue");
-    });
-    watch(() => hueValue.value, () => {
-      update();
+  __name: "hue-slider",
+  props: hueSliderProps,
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const { currentValue, bar, thumb, handleDrag, handleClick, handleKeydown } = useSlider(props, { key: "hue", minValue, maxValue });
+    const { rootKls, barKls, thumbKls, thumbStyle, thumbTop, update } = useSliderDOM(props, {
+      namespace: "color-hue-slider",
+      maxValue,
+      currentValue,
+      bar,
+      thumb,
+      handleDrag
     });
-    function handleClick(event) {
-      const target = event.target;
-      if (target !== thumb.value) {
-        handleDrag(event);
-      }
-    }
-    function handleDrag(event) {
-      if (!bar.value || !thumb.value)
-        return;
-      const el = instance.vnode.el;
-      const rect = el.getBoundingClientRect();
-      const { clientX, clientY } = getClientXY(event);
-      let hue;
-      if (!props.vertical) {
-        let left = clientX - rect.left;
-        left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
-        left = Math.max(thumb.value.offsetWidth / 2, left);
-        hue = Math.round((left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 360);
-      } else {
-        let top = clientY - rect.top;
-        top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
-        top = Math.max(thumb.value.offsetHeight / 2, top);
-        hue = Math.round((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 360);
-      }
-      props.color.set("hue", hue);
-    }
-    function getThumbLeft() {
-      if (!thumb.value)
-        return 0;
-      const el = instance.vnode.el;
-      if (props.vertical)
-        return 0;
-      const hue = props.color.get("hue");
-      if (!el)
-        return 0;
-      return Math.round(hue * (el.offsetWidth - thumb.value.offsetWidth / 2) / 360);
-    }
-    function getThumbTop() {
-      if (!thumb.value)
-        return 0;
-      const el = instance.vnode.el;
-      if (!props.vertical)
-        return 0;
-      const hue = props.color.get("hue");
-      if (!el)
-        return 0;
-      return Math.round(hue * (el.offsetHeight - thumb.value.offsetHeight / 2) / 360);
-    }
-    function update() {
-      thumbLeft.value = getThumbLeft();
-      thumbTop.value = getThumbTop();
-    }
-    onMounted(() => {
-      if (!bar.value || !thumb.value)
-        return;
-      const dragConfig = {
-        drag: (event) => {
-          handleDrag(event);
-        },
-        end: (event) => {
-          handleDrag(event);
-        }
-      };
-      draggable(bar.value, dragConfig);
-      draggable(thumb.value, dragConfig);
-      update();
+    const { t } = useLocale();
+    const ariaLabel = computed(() => t("el.colorpicker.hueLabel"));
+    const ariaValuetext = computed(() => {
+      return t("el.colorpicker.hueDescription", {
+        hue: currentValue.value,
+        color: props.color.value
+      });
     });
-    return {
+    __expose({
       bar,
       thumb,
-      thumbLeft,
       thumbTop,
-      hueValue,
-      handleClick,
-      update,
-      ns
+      update
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(unref(rootKls))
+        },
+        [
+          createElementVNode(
+            "div",
+            {
+              ref_key: "bar",
+              ref: bar,
+              class: normalizeClass(unref(barKls)),
+              onClick: _cache[0] || (_cache[0] = (...args) => unref(handleClick) && unref(handleClick)(...args))
+            },
+            null,
+            2
+          ),
+          createElementVNode("div", {
+            ref_key: "thumb",
+            ref: thumb,
+            class: normalizeClass(unref(thumbKls)),
+            style: normalizeStyle(unref(thumbStyle)),
+            "aria-label": ariaLabel.value,
+            "aria-valuenow": unref(currentValue),
+            "aria-valuetext": ariaValuetext.value,
+            "aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
+            "aria-valuemin": minValue,
+            "aria-valuemax": maxValue,
+            role: "slider",
+            tabindex: _ctx.disabled ? void 0 : 0,
+            "aria-disabled": _ctx.disabled,
+            onKeydown: _cache[1] || (_cache[1] = (...args) => unref(handleKeydown) && unref(handleKeydown)(...args))
+          }, null, 46, _hoisted_1$e)
+        ],
+        2
+      );
     };
   }
 });
-function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass([_ctx.ns.b(), _ctx.ns.is("vertical", _ctx.vertical)])
-  }, [
-    createElementVNode("div", {
-      ref: "bar",
-      class: normalizeClass(_ctx.ns.e("bar")),
-      onClick: _ctx.handleClick
-    }, null, 10, ["onClick"]),
-    createElementVNode("div", {
-      ref: "thumb",
-      class: normalizeClass(_ctx.ns.e("thumb")),
-      style: normalizeStyle({
-        left: _ctx.thumbLeft + "px",
-        top: _ctx.thumbTop + "px"
-      })
-    }, null, 6)
-  ], 2);
-}
-var HueSlider = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$4], ["__file", "hue-slider.vue"]]);
-const colorPickerProps = buildProps({
-  modelValue: String,
-  id: String,
+var HueSlider = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker-panel/src/components/hue-slider.vue"]]);
+const predefineProps = buildProps({
+  colors: {
+    type: definePropType(Array),
+    required: true
+  },
+  color: {
+    type: definePropType(Object),
+    required: true
+  },
+  enableAlpha: {
+    type: Boolean,
+    required: true
+  },
+  disabled: Boolean
+});
+const colorPickerPanelProps = buildProps({
+  modelValue: {
+    type: definePropType(String),
+    default: void 0
+  },
+  border: {
+    type: Boolean,
+    default: true
+  },
   showAlpha: Boolean,
   colorFormat: String,
   disabled: Boolean,
-  size: useSizeProp,
-  popperClass: {
-    type: String,
-    default: ""
-  },
-  tabindex: {
-    type: [String, Number],
-    default: 0
-  },
-  teleported: useTooltipContentProps.teleported,
   predefine: {
     type: definePropType(Array)
   },
   validateEvent: {
     type: Boolean,
     default: true
-  },
-  ...useAriaProps(["ariaLabel"])
-});
-const colorPickerEmits = {
-  [UPDATE_MODEL_EVENT]: (val) => isString(val) || isNil(val),
-  [CHANGE_EVENT]: (val) => isString(val) || isNil(val),
-  activeChange: (val) => isString(val) || isNil(val),
-  focus: (evt) => evt instanceof FocusEvent,
-  blur: (evt) => evt instanceof FocusEvent
-};
-const colorPickerContextKey = Symbol("colorPickerContextKey");
-const hsv2hsl = function(hue, sat, val) {
-  return [
-    hue,
-    sat * val / ((hue = (2 - sat) * val) < 1 ? hue : 2 - hue) || 0,
-    hue / 2
-  ];
-};
-const isOnePointZero = function(n) {
-  return isString(n) && n.includes(".") && Number.parseFloat(n) === 1;
-};
-const isPercentage = function(n) {
-  return isString(n) && n.includes("%");
-};
-const bound01 = function(value, max) {
-  if (isOnePointZero(value))
-    value = "100%";
-  const processPercent = isPercentage(value);
-  value = Math.min(max, Math.max(0, Number.parseFloat(`${value}`)));
-  if (processPercent) {
-    value = Number.parseInt(`${value * max}`, 10) / 100;
-  }
-  if (Math.abs(value - max) < 1e-6) {
-    return 1;
-  }
-  return value % max / Number.parseFloat(max);
-};
-const INT_HEX_MAP = {
-  10: "A",
-  11: "B",
-  12: "C",
-  13: "D",
-  14: "E",
-  15: "F"
-};
-const hexOne = (value) => {
-  value = Math.min(Math.round(value), 255);
-  const high = Math.floor(value / 16);
-  const low = value % 16;
-  return `${INT_HEX_MAP[high] || high}${INT_HEX_MAP[low] || low}`;
-};
-const toHex = function({ r, g, b }) {
-  if (Number.isNaN(+r) || Number.isNaN(+g) || Number.isNaN(+b))
-    return "";
-  return `#${hexOne(r)}${hexOne(g)}${hexOne(b)}`;
-};
-const HEX_INT_MAP = {
-  A: 10,
-  B: 11,
-  C: 12,
-  D: 13,
-  E: 14,
-  F: 15
-};
-const parseHexChannel = function(hex) {
-  if (hex.length === 2) {
-    return (HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 + (HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]);
   }
-  return HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1];
-};
-const hsl2hsv = function(hue, sat, light) {
-  sat = sat / 100;
-  light = light / 100;
-  let smin = sat;
-  const lmin = Math.max(light, 0.01);
-  light *= 2;
-  sat *= light <= 1 ? light : 2 - light;
-  smin *= lmin <= 1 ? lmin : 2 - lmin;
-  const v = (light + sat) / 2;
-  const sv = light === 0 ? 2 * smin / (lmin + smin) : 2 * sat / (light + sat);
-  return {
-    h: hue,
-    s: sv * 100,
-    v: v * 100
-  };
-};
-const rgb2hsv = (r, g, b) => {
-  r = bound01(r, 255);
-  g = bound01(g, 255);
-  b = bound01(b, 255);
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  let h2;
-  const v = max;
-  const d = max - min;
-  const s = max === 0 ? 0 : d / max;
-  if (max === min) {
-    h2 = 0;
-  } else {
-    switch (max) {
-      case r: {
-        h2 = (g - b) / d + (g < b ? 6 : 0);
-        break;
-      }
-      case g: {
-        h2 = (b - r) / d + 2;
-        break;
-      }
-      case b: {
-        h2 = (r - g) / d + 4;
-        break;
-      }
-    }
-    h2 /= 6;
-  }
-  return { h: h2 * 360, s: s * 100, v: v * 100 };
-};
-const hsv2rgb = function(h2, s, v) {
-  h2 = bound01(h2, 360) * 6;
-  s = bound01(s, 100);
-  v = bound01(v, 100);
-  const i = Math.floor(h2);
-  const f = h2 - i;
-  const p = v * (1 - s);
-  const q = v * (1 - f * s);
-  const t = v * (1 - (1 - f) * s);
-  const mod = i % 6;
-  const r = [v, q, p, p, t, v][mod];
-  const g = [t, v, v, q, p, p][mod];
-  const b = [p, p, t, v, v, q][mod];
-  return {
-    r: Math.round(r * 255),
-    g: Math.round(g * 255),
-    b: Math.round(b * 255)
-  };
+});
+const colorPickerPanelEmits = {
+  [UPDATE_MODEL_EVENT]: (val) => isString(val) || isNil(val)
 };
+const ROOT_COMMON_COLOR_INJECTION_KEY = Symbol("colorCommonPickerKey");
+const colorPickerPanelContextKey = Symbol("colorPickerPanelContextKey");
 class Color {
   constructor(options = {}) {
     this._hue = 0;
     this._saturation = 100;
     this._value = 100;
     this._alpha = 100;
+    this._tiny = new TinyColor();
+    this._isValid = false;
     this.enableAlpha = false;
-    this.format = "hex";
+    this.format = "";
     this.value = "";
     for (const option in options) {
       if (hasOwn(options, option)) {
@@ -757,349 +670,667 @@ class Color {
       return;
     }
     this[`_${prop}`] = value;
+    this._isValid = true;
     this.doOnChange();
   }
   get(prop) {
-    if (prop === "alpha") {
-      return Math.floor(this[`_${prop}`]);
+    if (["hue", "saturation", "value", "alpha"].includes(prop)) {
+      return Math.round(this[`_${prop}`]);
     }
     return this[`_${prop}`];
   }
   toRgb() {
-    return hsv2rgb(this._hue, this._saturation, this._value);
+    return this._isValid ? this._tiny.toRgb() : { r: 255, g: 255, b: 255, a: 0 };
   }
   fromString(value) {
-    if (!value) {
+    const color = new TinyColor(value);
+    this._isValid = color.isValid;
+    if (color.isValid) {
+      const { h: h2, s, v, a } = color.toHsv();
+      this._hue = h2;
+      this._saturation = s * 100;
+      this._value = v * 100;
+      this._alpha = a * 100;
+    } else {
       this._hue = 0;
       this._saturation = 100;
       this._value = 100;
-      this.doOnChange();
-      return;
-    }
-    const fromHSV = (h2, s, v) => {
-      this._hue = Math.max(0, Math.min(360, h2));
-      this._saturation = Math.max(0, Math.min(100, s));
-      this._value = Math.max(0, Math.min(100, v));
-      this.doOnChange();
-    };
-    if (value.includes("hsl")) {
-      const parts = value.replace(/hsla|hsl|\(|\)/gm, "").split(/\s|,/g).filter((val) => val !== "").map((val, index2) => index2 > 2 ? Number.parseFloat(val) : Number.parseInt(val, 10));
-      if (parts.length === 4) {
-        this._alpha = Number.parseFloat(parts[3]) * 100;
-      } else if (parts.length === 3) {
-        this._alpha = 100;
-      }
-      if (parts.length >= 3) {
-        const { h: h2, s, v } = hsl2hsv(parts[0], parts[1], parts[2]);
-        fromHSV(h2, s, v);
-      }
-    } else if (value.includes("hsv")) {
-      const parts = value.replace(/hsva|hsv|\(|\)/gm, "").split(/\s|,/g).filter((val) => val !== "").map((val, index2) => index2 > 2 ? Number.parseFloat(val) : Number.parseInt(val, 10));
-      if (parts.length === 4) {
-        this._alpha = Number.parseFloat(parts[3]) * 100;
-      } else if (parts.length === 3) {
-        this._alpha = 100;
-      }
-      if (parts.length >= 3) {
-        fromHSV(parts[0], parts[1], parts[2]);
-      }
-    } else if (value.includes("rgb")) {
-      const parts = value.replace(/rgba|rgb|\(|\)/gm, "").split(/\s|,/g).filter((val) => val !== "").map((val, index2) => index2 > 2 ? Number.parseFloat(val) : Number.parseInt(val, 10));
-      if (parts.length === 4) {
-        this._alpha = Number.parseFloat(parts[3]) * 100;
-      } else if (parts.length === 3) {
-        this._alpha = 100;
-      }
-      if (parts.length >= 3) {
-        const { h: h2, s, v } = rgb2hsv(parts[0], parts[1], parts[2]);
-        fromHSV(h2, s, v);
-      }
-    } else if (value.includes("#")) {
-      const hex = value.replace("#", "").trim();
-      if (!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$|^[0-9a-fA-F]{8}$/.test(hex))
-        return;
-      let r, g, b;
-      if (hex.length === 3) {
-        r = parseHexChannel(hex[0] + hex[0]);
-        g = parseHexChannel(hex[1] + hex[1]);
-        b = parseHexChannel(hex[2] + hex[2]);
-      } else if (hex.length === 6 || hex.length === 8) {
-        r = parseHexChannel(hex.slice(0, 2));
-        g = parseHexChannel(hex.slice(2, 4));
-        b = parseHexChannel(hex.slice(4, 6));
-      }
-      if (hex.length === 8) {
-        this._alpha = parseHexChannel(hex.slice(6)) / 255 * 100;
-      } else if (hex.length === 3 || hex.length === 6) {
-        this._alpha = 100;
-      }
-      const { h: h2, s, v } = rgb2hsv(r, g, b);
-      fromHSV(h2, s, v);
+      this._alpha = 100;
     }
+    this.doOnChange();
+  }
+  clear() {
+    this._isValid = false;
+    this.value = "";
+    this._hue = 0;
+    this._saturation = 100;
+    this._value = 100;
+    this._alpha = 100;
   }
   compare(color) {
-    return Math.abs(color._hue - this._hue) < 2 && Math.abs(color._saturation - this._saturation) < 1 && Math.abs(color._value - this._value) < 1 && Math.abs(color._alpha - this._alpha) < 1;
+    const compareColor = new TinyColor({
+      h: color._hue,
+      s: color._saturation / 100,
+      v: color._value / 100,
+      a: color._alpha / 100
+    });
+    return this._tiny.equals(compareColor);
   }
   doOnChange() {
-    const { _hue, _saturation, _value, _alpha, format } = this;
-    if (this.enableAlpha) {
-      switch (format) {
-        case "hsl": {
-          const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
-          this.value = `hsla(${_hue}, ${Math.round(hsl[1] * 100)}%, ${Math.round(hsl[2] * 100)}%, ${this.get("alpha") / 100})`;
-          break;
-        }
-        case "hsv": {
-          this.value = `hsva(${_hue}, ${Math.round(_saturation)}%, ${Math.round(_value)}%, ${this.get("alpha") / 100})`;
-          break;
-        }
-        case "hex": {
-          this.value = `${toHex(hsv2rgb(_hue, _saturation, _value))}${hexOne(_alpha * 255 / 100)}`;
-          break;
-        }
-        default: {
-          const { r, g, b } = hsv2rgb(_hue, _saturation, _value);
-          this.value = `rgba(${r}, ${g}, ${b}, ${this.get("alpha") / 100})`;
-        }
-      }
-    } else {
-      switch (format) {
-        case "hsl": {
-          const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
-          this.value = `hsl(${_hue}, ${Math.round(hsl[1] * 100)}%, ${Math.round(hsl[2] * 100)}%)`;
-          break;
-        }
-        case "hsv": {
-          this.value = `hsv(${_hue}, ${Math.round(_saturation)}%, ${Math.round(_value)}%)`;
-          break;
-        }
-        case "rgb": {
-          const { r, g, b } = hsv2rgb(_hue, _saturation, _value);
-          this.value = `rgb(${r}, ${g}, ${b})`;
-          break;
-        }
-        default: {
-          this.value = toHex(hsv2rgb(_hue, _saturation, _value));
-        }
-      }
+    const { _hue, _saturation, _value, _alpha, format, enableAlpha } = this;
+    let _format = format || (enableAlpha ? "rgb" : "hex");
+    if (format === "hex" && enableAlpha) {
+      _format = "hex8";
     }
+    this._tiny = new TinyColor({
+      h: _hue,
+      s: _saturation / 100,
+      v: _value / 100,
+      a: _alpha / 100
+    });
+    this.value = this._isValid ? this._tiny.toString(_format) : "";
   }
 }
-const _sfc_main$t = defineComponent({
-  props: {
-    colors: {
-      type: Array,
-      required: true
-    },
-    color: {
-      type: Object,
-      required: true
-    },
-    enableAlpha: {
-      type: Boolean,
-      required: true
-    }
-  },
-  setup(props) {
-    const ns = useNamespace("color-predefine");
-    const { currentColor } = inject(colorPickerContextKey);
-    const rgbaColors = ref(parseColors(props.colors, props.color));
-    watch(() => currentColor.value, (val) => {
-      const color = new Color();
-      color.fromString(val);
+const usePredefine = (props) => {
+  const { currentColor } = inject(colorPickerPanelContextKey);
+  const rgbaColors = ref(parseColors(props.colors, props.color));
+  watch(
+    () => currentColor.value,
+    (val) => {
+      const color = new Color({
+        value: val,
+        enableAlpha: props.enableAlpha
+      });
       rgbaColors.value.forEach((item) => {
         item.selected = color.compare(item);
       });
-    });
-    watchEffect(() => {
-      rgbaColors.value = parseColors(props.colors, props.color);
-    });
-    function handleSelect(index2) {
-      props.color.fromString(props.colors[index2]);
     }
-    function parseColors(colors, color) {
-      return colors.map((value) => {
-        const c = new Color();
-        c.enableAlpha = props.enableAlpha;
-        c.format = "rgba";
-        c.fromString(value);
-        c.selected = c.value === color.value;
-        return c;
+  );
+  watchEffect(() => {
+    rgbaColors.value = parseColors(props.colors, props.color);
+  });
+  function handleSelect(index2) {
+    props.color.fromString(props.colors[index2]);
+  }
+  function parseColors(colors, color) {
+    return colors.map((value) => {
+      const c = new Color({
+        value,
+        enableAlpha: props.enableAlpha
       });
-    }
-    return {
-      rgbaColors,
-      handleSelect,
-      ns
+      c.selected = c.compare(color);
+      return c;
+    });
+  }
+  return {
+    rgbaColors,
+    handleSelect
+  };
+};
+const usePredefineDOM = (props) => {
+  const ns = useNamespace("color-predefine");
+  const rootKls = computed(() => [ns.b(), ns.is("disabled", props.disabled)]);
+  const colorsKls = computed(() => ns.e("colors"));
+  function colorSelectorKls(item) {
+    return [
+      ns.e("color-selector"),
+      ns.is("alpha", item.get("alpha") < 100),
+      { selected: item.selected }
+    ];
+  }
+  return {
+    rootKls,
+    colorsKls,
+    colorSelectorKls
+  };
+};
+const _hoisted_1$d = ["disabled", "aria-label", "onClick"];
+const _sfc_main$u = defineComponent({
+  ...{
+    name: "ElColorPredefine"
+  },
+  __name: "predefine",
+  props: predefineProps,
+  setup(__props) {
+    const props = __props;
+    const { rgbaColors, handleSelect } = usePredefine(props);
+    const { rootKls, colorsKls, colorSelectorKls } = usePredefineDOM(props);
+    const { t } = useLocale();
+    const ariaLabel = (value) => {
+      return t("el.colorpicker.predefineDescription", { value });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(unref(rootKls))
+        },
+        [
+          createElementVNode(
+            "div",
+            {
+              class: normalizeClass(unref(colorsKls))
+            },
+            [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(unref(rgbaColors), (item, index2) => {
+                  return openBlock(), createElementBlock("button", {
+                    key: _ctx.colors[index2],
+                    type: "button",
+                    disabled: _ctx.disabled,
+                    "aria-label": ariaLabel(item.value),
+                    class: normalizeClass(unref(colorSelectorKls)(item)),
+                    onClick: ($event) => unref(handleSelect)(index2)
+                  }, [
+                    createElementVNode(
+                      "div",
+                      {
+                        style: normalizeStyle({ backgroundColor: item.value })
+                      },
+                      null,
+                      4
+                    )
+                  ], 10, _hoisted_1$d);
+                }),
+                128
+              ))
+            ],
+            2
+          )
+        ],
+        2
+      );
     };
   }
 });
-function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass(_ctx.ns.b())
-  }, [
-    createElementVNode("div", {
-      class: normalizeClass(_ctx.ns.e("colors"))
-    }, [
-      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.rgbaColors, (item, index2) => {
-        return openBlock(), createElementBlock("div", {
-          key: _ctx.colors[index2],
-          class: normalizeClass([
-            _ctx.ns.e("color-selector"),
-            _ctx.ns.is("alpha", item._alpha < 100),
-            { selected: item.selected }
-          ]),
-          onClick: ($event) => _ctx.handleSelect(index2)
-        }, [
-          createElementVNode("div", {
-            style: normalizeStyle({ backgroundColor: item.value })
-          }, null, 4)
-        ], 10, ["onClick"]);
-      }), 128))
-    ], 2)
-  ], 2);
-}
-var Predefine = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$3], ["__file", "predefine.vue"]]);
-const _sfc_main$s = defineComponent({
-  name: "ElSlPanel",
-  props: {
-    color: {
-      type: Object,
-      required: true
-    }
+var Predefine = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker-panel/src/components/predefine.vue"]]);
+const svPanelProps = buildProps({
+  color: {
+    type: definePropType(Object),
+    required: true
   },
-  setup(props) {
-    const ns = useNamespace("color-svpanel");
-    const instance = getCurrentInstance();
-    const cursorTop = ref(0);
-    const cursorLeft = ref(0);
-    const background = ref("hsl(0, 100%, 50%)");
-    const colorValue = computed(() => {
-      const hue = props.color.get("hue");
-      const value = props.color.get("value");
-      return { hue, value };
-    });
-    function update() {
-      const saturation = props.color.get("saturation");
-      const value = props.color.get("value");
-      const el = instance.vnode.el;
-      const { clientWidth: width, clientHeight: height } = el;
-      cursorLeft.value = saturation * width / 100;
-      cursorTop.value = (100 - value) * height / 100;
-      background.value = `hsl(${props.color.get("hue")}, 100%, 50%)`;
-    }
-    function handleDrag(event) {
-      const el = instance.vnode.el;
-      const rect = el.getBoundingClientRect();
-      const { clientX, clientY } = getClientXY(event);
-      let left = clientX - rect.left;
-      let top = clientY - rect.top;
-      left = Math.max(0, left);
-      left = Math.min(left, rect.width);
-      top = Math.max(0, top);
-      top = Math.min(top, rect.height);
-      cursorLeft.value = left;
-      cursorTop.value = top;
-      props.color.set({
-        saturation: left / rect.width * 100,
-        value: 100 - top / rect.height * 100
-      });
+  disabled: Boolean
+});
+const useSvPanel = (props) => {
+  const instance = getCurrentInstance();
+  const cursorRef = ref();
+  const cursorTop = ref(0);
+  const cursorLeft = ref(0);
+  const background = ref("hsl(0, 100%, 50%)");
+  const saturation = computed(() => props.color.get("saturation"));
+  const brightness = computed(() => props.color.get("value"));
+  const hue = computed(() => props.color.get("hue"));
+  function handleClick(event) {
+    var _a;
+    if (props.disabled)
+      return;
+    const target = event.target;
+    if (target !== cursorRef.value) {
+      handleDrag(event);
     }
-    watch(() => colorValue.value, () => {
-      update();
+    (_a = cursorRef.value) == null ? void 0 : _a.focus({ preventScroll: true });
+  }
+  function handleDrag(event) {
+    if (props.disabled)
+      return;
+    const el = instance.vnode.el;
+    const rect = el.getBoundingClientRect();
+    const { clientX, clientY } = getClientXY(event);
+    let left = clientX - rect.left;
+    let top = clientY - rect.top;
+    left = Math.max(0, left);
+    left = Math.min(left, rect.width);
+    top = Math.max(0, top);
+    top = Math.min(top, rect.height);
+    cursorLeft.value = left;
+    cursorTop.value = top;
+    props.color.set({
+      saturation: left / rect.width * 100,
+      value: 100 - top / rect.height * 100
     });
-    onMounted(() => {
-      draggable(instance.vnode.el, {
-        drag: (event) => {
-          handleDrag(event);
-        },
-        end: (event) => {
-          handleDrag(event);
-        }
-      });
-      update();
+  }
+  function handleKeydown(event) {
+    if (props.disabled)
+      return;
+    const { shiftKey } = event;
+    const code = getEventCode(event);
+    const step = shiftKey ? 10 : 1;
+    let isPreventDefault = true;
+    switch (code) {
+      case EVENT_CODE.left:
+        incrementSaturation(-step);
+        break;
+      case EVENT_CODE.right:
+        incrementSaturation(step);
+        break;
+      case EVENT_CODE.up:
+        incrementBrightness(step);
+        break;
+      case EVENT_CODE.down:
+        incrementBrightness(-step);
+        break;
+      default:
+        isPreventDefault = false;
+        break;
+    }
+    isPreventDefault && event.preventDefault();
+  }
+  function incrementSaturation(step) {
+    let next = saturation.value + step;
+    next = next < 0 ? 0 : next > 100 ? 100 : next;
+    props.color.set("saturation", next);
+  }
+  function incrementBrightness(step) {
+    let next = brightness.value + step;
+    next = next < 0 ? 0 : next > 100 ? 100 : next;
+    props.color.set("value", next);
+  }
+  return {
+    cursorRef,
+    cursorTop,
+    cursorLeft,
+    background,
+    saturation,
+    brightness,
+    hue,
+    handleClick,
+    handleDrag,
+    handleKeydown
+  };
+};
+const useSvPanelDOM = (props, {
+  cursorTop,
+  cursorLeft,
+  background,
+  handleDrag
+}) => {
+  const instance = getCurrentInstance();
+  const ns = useNamespace("color-svpanel");
+  function update() {
+    const saturation = props.color.get("saturation");
+    const brightness = props.color.get("value");
+    const el = instance.vnode.el;
+    const { clientWidth: width, clientHeight: height } = el;
+    cursorLeft.value = saturation * width / 100;
+    cursorTop.value = (100 - brightness) * height / 100;
+    background.value = `hsl(${props.color.get("hue")}, 100%, 50%)`;
+  }
+  onMounted(() => {
+    draggable(instance.vnode.el, {
+      drag: (event) => {
+        handleDrag(event);
+      },
+      end: (event) => {
+        handleDrag(event);
+      }
     });
-    return {
+    update();
+  });
+  watch(
+    [
+      () => props.color.get("hue"),
+      () => props.color.get("value"),
+      () => props.color.value
+    ],
+    () => update()
+  );
+  const rootKls = computed(() => ns.b());
+  const cursorKls = computed(() => ns.e("cursor"));
+  const rootStyle = computed(() => ({
+    backgroundColor: background.value
+  }));
+  const cursorStyle = computed(() => ({
+    top: addUnit(cursorTop.value),
+    left: addUnit(cursorLeft.value)
+  }));
+  return {
+    rootKls,
+    cursorKls,
+    rootStyle,
+    cursorStyle,
+    update
+  };
+};
+const _hoisted_1$c = ["tabindex", "aria-disabled", "aria-label", "aria-valuenow", "aria-valuetext"];
+const _sfc_main$t = defineComponent({
+  ...{
+    name: "ElSvPanel"
+  },
+  __name: "sv-panel",
+  props: svPanelProps,
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const {
+      cursorRef,
       cursorTop,
       cursorLeft,
       background,
-      colorValue,
+      saturation,
+      brightness,
+      handleClick,
       handleDrag,
-      update,
-      ns
+      handleKeydown
+    } = useSvPanel(props);
+    const { rootKls, cursorKls, rootStyle, cursorStyle, update } = useSvPanelDOM(
+      props,
+      {
+        cursorTop,
+        cursorLeft,
+        background,
+        handleDrag
+      }
+    );
+    const { t } = useLocale();
+    const ariaLabel = computed(() => t("el.colorpicker.svLabel"));
+    const ariaValuetext = computed(() => {
+      return t("el.colorpicker.svDescription", {
+        saturation: saturation.value,
+        brightness: brightness.value,
+        color: props.color.value
+      });
+    });
+    __expose({
+      update
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(unref(rootKls)),
+          style: normalizeStyle(unref(rootStyle)),
+          onClick: _cache[1] || (_cache[1] = (...args) => unref(handleClick) && unref(handleClick)(...args))
+        },
+        [
+          createElementVNode("div", {
+            ref_key: "cursorRef",
+            ref: cursorRef,
+            class: normalizeClass(unref(cursorKls)),
+            style: normalizeStyle(unref(cursorStyle)),
+            tabindex: _ctx.disabled ? void 0 : 0,
+            "aria-disabled": _ctx.disabled,
+            role: "slider",
+            "aria-valuemin": "0,0",
+            "aria-valuemax": "100,100",
+            "aria-label": ariaLabel.value,
+            "aria-valuenow": `${unref(saturation)},${unref(brightness)}`,
+            "aria-valuetext": ariaValuetext.value,
+            onKeydown: _cache[0] || (_cache[0] = (...args) => unref(handleKeydown) && unref(handleKeydown)(...args))
+          }, null, 46, _hoisted_1$c)
+        ],
+        6
+      );
     };
   }
 });
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass(_ctx.ns.b()),
-    style: normalizeStyle({
-      backgroundColor: _ctx.background
+var SvPanel = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker-panel/src/components/sv-panel.vue"]]);
+const useCommonColor = (props, emit) => {
+  const color = reactive(
+    new Color({
+      enableAlpha: props.showAlpha,
+      format: props.colorFormat || "",
+      value: props.modelValue
     })
-  }, [
-    createElementVNode("div", {
-      class: normalizeClass(_ctx.ns.e("white"))
-    }, null, 2),
-    createElementVNode("div", {
-      class: normalizeClass(_ctx.ns.e("black"))
-    }, null, 2),
-    createElementVNode("div", {
-      class: normalizeClass(_ctx.ns.e("cursor")),
-      style: normalizeStyle({
-        top: _ctx.cursorTop + "px",
-        left: _ctx.cursorLeft + "px"
-      })
-    }, [
-      createElementVNode("div")
-    ], 6)
-  ], 6);
-}
-var SvPanel = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$2], ["__file", "sv-panel.vue"]]);
-const __default__$d = defineComponent({
-  name: "ElColorPicker"
+  );
+  watch(
+    () => [props.colorFormat, props.showAlpha],
+    () => {
+      color.enableAlpha = props.showAlpha;
+      color.format = props.colorFormat || color.format;
+      color.doOnChange();
+      emit(UPDATE_MODEL_EVENT, color.value);
+    }
+  );
+  return {
+    color
+  };
+};
+const _sfc_main$s = defineComponent({
+  ...{
+    name: "ElColorPickerPanel"
+  },
+  __name: "color-picker-panel",
+  props: colorPickerPanelProps,
+  emits: colorPickerPanelEmits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const ns = useNamespace("color-picker-panel");
+    const { formItem } = useFormItem();
+    const disabled = useFormDisabled();
+    const hueRef = ref();
+    const svRef = ref();
+    const alphaRef = ref();
+    const inputRef = ref();
+    const customInput = ref("");
+    const { color } = inject(
+      ROOT_COMMON_COLOR_INJECTION_KEY,
+      () => useCommonColor(props, emit),
+      true
+    );
+    function handleConfirm() {
+      color.fromString(customInput.value);
+      if (color.value !== customInput.value) {
+        customInput.value = color.value;
+      }
+    }
+    function handleFocusout() {
+      var _a;
+      if (props.validateEvent) {
+        (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => debugWarn(err));
+      }
+    }
+    function update() {
+      var _a, _b, _c;
+      (_a = hueRef.value) == null ? void 0 : _a.update();
+      (_b = svRef.value) == null ? void 0 : _b.update();
+      (_c = alphaRef.value) == null ? void 0 : _c.update();
+    }
+    onMounted(() => {
+      if (props.modelValue) {
+        customInput.value = color.value;
+      }
+      nextTick(update);
+    });
+    watch(
+      () => props.modelValue,
+      (newVal) => {
+        if (newVal !== color.value) {
+          newVal ? color.fromString(newVal) : color.clear();
+        }
+      }
+    );
+    watch(
+      () => color.value,
+      (val) => {
+        emit(UPDATE_MODEL_EVENT, val);
+        customInput.value = val;
+        if (props.validateEvent) {
+          formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn(err));
+        }
+      }
+    );
+    provide(colorPickerPanelContextKey, {
+      currentColor: computed(() => color.value)
+    });
+    __expose({
+      color,
+      inputRef,
+      update
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass([unref(ns).b(), unref(ns).is("disabled", unref(disabled)), unref(ns).is("border", _ctx.border)]),
+          onFocusout: handleFocusout
+        },
+        [
+          createElementVNode(
+            "div",
+            {
+              class: normalizeClass(unref(ns).e("wrapper"))
+            },
+            [
+              createVNode(HueSlider, {
+                ref_key: "hueRef",
+                ref: hueRef,
+                class: "hue-slider",
+                color: unref(color),
+                vertical: "",
+                disabled: unref(disabled)
+              }, null, 8, ["color", "disabled"]),
+              createVNode(SvPanel, {
+                ref_key: "svRef",
+                ref: svRef,
+                color: unref(color),
+                disabled: unref(disabled)
+              }, null, 8, ["color", "disabled"])
+            ],
+            2
+          ),
+          _ctx.showAlpha ? (openBlock(), createBlock(AlphaSlider, {
+            key: 0,
+            ref_key: "alphaRef",
+            ref: alphaRef,
+            color: unref(color),
+            disabled: unref(disabled)
+          }, null, 8, ["color", "disabled"])) : createCommentVNode("v-if", true),
+          _ctx.predefine ? (openBlock(), createBlock(Predefine, {
+            key: 1,
+            ref: "predefine",
+            "enable-alpha": _ctx.showAlpha,
+            color: unref(color),
+            colors: _ctx.predefine,
+            disabled: unref(disabled)
+          }, null, 8, ["enable-alpha", "color", "colors", "disabled"])) : createCommentVNode("v-if", true),
+          createElementVNode(
+            "div",
+            {
+              class: normalizeClass(unref(ns).e("footer"))
+            },
+            [
+              createVNode(unref(ElInput), {
+                ref_key: "inputRef",
+                ref: inputRef,
+                modelValue: customInput.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => customInput.value = $event),
+                "validate-event": false,
+                size: "small",
+                disabled: unref(disabled),
+                onChange: handleConfirm
+              }, null, 8, ["modelValue", "disabled"]),
+              renderSlot(_ctx.$slots, "footer")
+            ],
+            2
+          )
+        ],
+        34
+      );
+    };
+  }
+});
+var ColorPickerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker-panel/src/color-picker-panel.vue"]]);
+const ElColorPickerPanel = withInstall(ColorPickerPanel);
+const colorPickerProps = buildProps({
+  persistent: {
+    type: Boolean,
+    default: true
+  },
+  modelValue: {
+    type: definePropType(String),
+    default: void 0
+  },
+  id: String,
+  showAlpha: Boolean,
+  colorFormat: String,
+  disabled: {
+    type: Boolean,
+    default: void 0
+  },
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  size: useSizeProp,
+  popperClass: useTooltipContentProps.popperClass,
+  popperStyle: useTooltipContentProps.popperStyle,
+  tabindex: {
+    type: [String, Number],
+    default: 0
+  },
+  teleported: useTooltipContentProps.teleported,
+  appendTo: useTooltipContentProps.appendTo,
+  predefine: {
+    type: definePropType(Array)
+  },
+  validateEvent: {
+    type: Boolean,
+    default: true
+  },
+  ...useEmptyValuesProps,
+  ...useAriaProps(["ariaLabel"])
 });
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
-  ...__default__$d,
+const colorPickerEmits = {
+  [UPDATE_MODEL_EVENT]: (val) => isString(val) || isNil(val),
+  [CHANGE_EVENT]: (val) => isString(val) || isNil(val),
+  activeChange: (val) => isString(val) || isNil(val),
+  focus: (evt) => evt instanceof FocusEvent,
+  blur: (evt) => evt instanceof FocusEvent,
+  clear: () => true
+};
+const _hoisted_1$b = ["id", "aria-label", "aria-labelledby", "aria-description", "aria-disabled", "tabindex"];
+const _sfc_main$r = defineComponent({
+  ...{
+    name: "ElColorPicker"
+  },
+  __name: "color-picker",
   props: colorPickerProps,
   emits: colorPickerEmits,
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const { t } = useLocale();
     const ns = useNamespace("color");
     const { formItem } = useFormItem();
     const colorSize = useFormSize();
     const colorDisabled = useFormDisabled();
+    const { valueOnClear, isEmptyValue } = useEmptyValues(props, null);
+    const commonColor = useCommonColor(props, emit);
     const { inputId: buttonId, isLabeledByFormItem } = useFormItemInputId(props, {
       formItemContext: formItem
     });
-    const hue = ref();
-    const sv = ref();
-    const alpha = ref();
     const popper = ref();
     const triggerRef = ref();
-    const inputRef = ref();
+    const pickerPanelRef = ref();
+    const showPicker = ref(false);
+    const showPanelColor = ref(false);
+    let shouldActiveChange = true;
     const { isFocused, handleFocus, handleBlur } = useFocusController(triggerRef, {
-      beforeFocus() {
-        return colorDisabled.value;
-      },
+      disabled: colorDisabled,
       beforeBlur(event) {
         var _a;
         return (_a = popper.value) == null ? void 0 : _a.isFocusInsideContent(event);
       },
       afterBlur() {
+        var _a;
         setShowPicker(false);
         resetColor();
+        if (props.validateEvent) {
+          (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => debugWarn(err));
+        }
       }
     });
-    let shouldActiveChange = true;
-    const color = reactive(new Color({
-      enableAlpha: props.showAlpha,
-      format: props.colorFormat || "",
-      value: props.modelValue
-    }));
-    const showPicker = ref(false);
-    const showPanelColor = ref(false);
-    const customInput = ref("");
+    const color = reactiveComputed(
+      () => {
+        var _a, _b;
+        return (_b = (_a = pickerPanelRef.value) == null ? void 0 : _a.color) != null ? _b : commonColor.color;
+      }
+    );
+    const panelProps = computed(
+      () => pick(props, Object.keys(colorPickerPanelProps))
+    );
     const displayedColor = computed(() => {
       if (!props.modelValue && !showPanelColor.value) {
         return "transparent";
@@ -1124,11 +1355,8 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       ];
     });
     function displayedRgb(color2, showAlpha) {
-      if (!(color2 instanceof Color)) {
-        throw new TypeError("color should be instance of _color Class");
-      }
-      const { r, g, b } = color2.toRgb();
-      return showAlpha ? `rgba(${r}, ${g}, ${b}, ${color2.get("alpha") / 100})` : `rgb(${r}, ${g}, ${b})`;
+      const { r, g, b, a } = color2.toRgb();
+      return showAlpha ? `rgba(${r}, ${g}, ${b}, ${a})` : `rgb(${r}, ${g}, ${b})`;
     }
     function setShowPicker(value) {
       showPicker.value = value;
@@ -1163,13 +1391,10 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       }
       debounceSetShowPicker(!showPicker.value);
     }
-    function handleConfirm() {
-      color.fromString(customInput.value);
-    }
     function confirmValue() {
-      const value = color.value;
+      const value = isEmptyValue(color.value) ? valueOnClear.value : color.value;
       emit(UPDATE_MODEL_EVENT, value);
-      emit("change", value);
+      emit(CHANGE_EVENT, value);
       if (props.validateEvent) {
         formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn(err));
       }
@@ -1187,12 +1412,17 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     }
     function clear() {
       debounceSetShowPicker(false);
-      emit(UPDATE_MODEL_EVENT, null);
-      emit("change", null);
-      if (props.modelValue !== null && props.validateEvent) {
+      emit(UPDATE_MODEL_EVENT, valueOnClear.value);
+      emit(CHANGE_EVENT, valueOnClear.value);
+      if (props.modelValue !== valueOnClear.value && props.validateEvent) {
         formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn(err));
       }
       resetColor();
+      emit("clear");
+    }
+    function handleShowTooltip() {
+      var _a, _b;
+      (_b = (_a = pickerPanelRef == null ? void 0 : pickerPanelRef.value) == null ? void 0 : _a.inputRef) == null ? void 0 : _b.focus();
     }
     function handleClickOutside() {
       if (!showPicker.value)
@@ -1207,14 +1437,14 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       resetColor();
     }
     function handleKeyDown(event) {
-      switch (event.code) {
+      const code = getEventCode(event);
+      switch (code) {
         case EVENT_CODE.enter:
         case EVENT_CODE.numpadEnter:
         case EVENT_CODE.space:
           event.preventDefault();
           event.stopPropagation();
           show();
-          inputRef.value.focus();
           break;
         case EVENT_CODE.esc:
           handleEsc(event);
@@ -1227,47 +1457,40 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     function blur() {
       triggerRef.value.blur();
     }
-    onMounted(() => {
-      if (props.modelValue) {
-        customInput.value = currentColor.value;
+    watch(
+      () => currentColor.value,
+      (val) => {
+        shouldActiveChange && emit("activeChange", val);
+        shouldActiveChange = true;
       }
-    });
-    watch(() => props.modelValue, (newVal) => {
-      if (!newVal) {
-        showPanelColor.value = false;
-      } else if (newVal && newVal !== color.value) {
-        shouldActiveChange = false;
-        color.fromString(newVal);
+    );
+    watch(
+      () => color.value,
+      () => {
+        if (!props.modelValue && !showPanelColor.value) {
+          showPanelColor.value = true;
+        }
       }
-    });
-    watch(() => [props.colorFormat, props.showAlpha], () => {
-      color.enableAlpha = props.showAlpha;
-      color.format = props.colorFormat || color.format;
-      color.doOnChange();
-      emit(UPDATE_MODEL_EVENT, color.value);
-    });
-    watch(() => currentColor.value, (val) => {
-      customInput.value = val;
-      shouldActiveChange && emit("activeChange", val);
-      shouldActiveChange = true;
-    });
-    watch(() => color.value, () => {
-      if (!props.modelValue && !showPanelColor.value) {
-        showPanelColor.value = true;
+    );
+    watch(
+      () => props.modelValue,
+      (newVal) => {
+        if (!newVal) {
+          showPanelColor.value = false;
+        } else if (newVal && newVal !== color.value) {
+          shouldActiveChange = false;
+          color.fromString(newVal);
+        }
       }
-    });
-    watch(() => showPicker.value, () => {
-      nextTick(() => {
-        var _a, _b, _c;
-        (_a = hue.value) == null ? void 0 : _a.update();
-        (_b = sv.value) == null ? void 0 : _b.update();
-        (_c = alpha.value) == null ? void 0 : _c.update();
-      });
-    });
-    provide(colorPickerContextKey, {
-      currentColor
-    });
-    expose({
+    );
+    watch(
+      () => showPicker.value,
+      () => {
+        pickerPanelRef.value && nextTick(pickerPanelRef.value.update);
+      }
+    );
+    provide(ROOT_COMMON_COLOR_INJECTION_KEY, commonColor);
+    __expose({
       color,
       show,
       hide,
@@ -1283,89 +1506,70 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         "fallback-placements": ["bottom", "top", "right", "left"],
         offset: 0,
         "gpu-acceleration": false,
-        "popper-class": [unref(ns).be("picker", "panel"), unref(ns).b("dropdown"), _ctx.popperClass],
+        "popper-class": [unref(ns).be("picker", "panel"), _ctx.popperClass],
+        "popper-style": _ctx.popperStyle,
         "stop-popper-mouse-event": false,
+        pure: "",
+        loop: "",
+        role: "dialog",
         effect: "light",
         trigger: "click",
         teleported: _ctx.teleported,
         transition: `${unref(ns).namespace.value}-zoom-in-top`,
-        persistent: "",
-        onHide: ($event) => setShowPicker(false)
+        persistent: _ctx.persistent,
+        "append-to": _ctx.appendTo,
+        onShow: handleShowTooltip,
+        onHide: _cache[2] || (_cache[2] = ($event) => setShowPicker(false))
       }, {
         content: withCtx(() => [
-          withDirectives((openBlock(), createElementBlock("div", {
-            onKeydown: withKeys(handleEsc, ["esc"])
-          }, [
-            createElementVNode("div", {
-              class: normalizeClass(unref(ns).be("dropdown", "main-wrapper"))
-            }, [
-              createVNode(HueSlider, {
-                ref_key: "hue",
-                ref: hue,
-                class: "hue-slider",
-                color: unref(color),
-                vertical: ""
-              }, null, 8, ["color"]),
-              createVNode(SvPanel, {
-                ref_key: "sv",
-                ref: sv,
-                color: unref(color)
-              }, null, 8, ["color"])
-            ], 2),
-            _ctx.showAlpha ? (openBlock(), createBlock(AlphaSlider, {
-              key: 0,
-              ref_key: "alpha",
-              ref: alpha,
-              color: unref(color)
-            }, null, 8, ["color"])) : createCommentVNode("v-if", true),
-            _ctx.predefine ? (openBlock(), createBlock(Predefine, {
-              key: 1,
-              ref: "predefine",
-              "enable-alpha": _ctx.showAlpha,
-              color: unref(color),
-              colors: _ctx.predefine
-            }, null, 8, ["enable-alpha", "color", "colors"])) : createCommentVNode("v-if", true),
-            createElementVNode("div", {
-              class: normalizeClass(unref(ns).be("dropdown", "btns"))
-            }, [
-              createElementVNode("span", {
-                class: normalizeClass(unref(ns).be("dropdown", "value"))
-              }, [
-                createVNode(unref(ElInput), {
-                  ref_key: "inputRef",
-                  ref: inputRef,
-                  modelValue: customInput.value,
-                  "onUpdate:modelValue": ($event) => customInput.value = $event,
-                  "validate-event": false,
-                  size: "small",
-                  onKeyup: withKeys(handleConfirm, ["enter"]),
-                  onBlur: handleConfirm
-                }, null, 8, ["modelValue", "onUpdate:modelValue", "onKeyup"])
-              ], 2),
-              createVNode(unref(ElButton), {
-                class: normalizeClass(unref(ns).be("dropdown", "link-btn")),
-                text: "",
-                size: "small",
-                onClick: clear
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(t)("el.colorpicker.clear")), 1)
-                ]),
-                _: 1
-              }, 8, ["class"]),
-              createVNode(unref(ElButton), {
-                plain: "",
-                size: "small",
-                class: normalizeClass(unref(ns).be("dropdown", "btn")),
-                onClick: confirmValue
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(t)("el.colorpicker.confirm")), 1)
-                ]),
-                _: 1
-              }, 8, ["class"])
-            ], 2)
-          ], 40, ["onKeydown"])), [
+          withDirectives((openBlock(), createBlock(
+            unref(ElColorPickerPanel),
+            mergeProps({
+              ref_key: "pickerPanelRef",
+              ref: pickerPanelRef
+            }, panelProps.value, {
+              border: false,
+              "validate-event": false,
+              onKeydown: withKeys(handleEsc, ["esc"])
+            }),
+            {
+              footer: withCtx(() => [
+                createElementVNode("div", null, [
+                  _ctx.clearable ? (openBlock(), createBlock(unref(ElButton), {
+                    key: 0,
+                    class: normalizeClass(unref(ns).be("footer", "link-btn")),
+                    text: "",
+                    size: "small",
+                    onClick: clear
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(
+                        toDisplayString(unref(t)("el.colorpicker.clear")),
+                        1
+                      )
+                    ]),
+                    _: 1
+                  }, 8, ["class"])) : createCommentVNode("v-if", true),
+                  createVNode(unref(ElButton), {
+                    plain: "",
+                    size: "small",
+                    class: normalizeClass(unref(ns).be("footer", "btn")),
+                    onClick: confirmValue
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(
+                        toDisplayString(unref(t)("el.colorpicker.confirm")),
+                        1
+                      )
+                    ]),
+                    _: 1
+                  }, 8, ["class"])
+                ])
+              ]),
+              _: 1
+            },
+            16
+          )), [
             [unref(ClickOutside), handleClickOutside, triggerRef.value]
           ])
         ]),
@@ -1375,76 +1579,88 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             ref_key: "triggerRef",
             ref: triggerRef
           }, _ctx.$attrs, {
-            class: unref(btnKls),
+            class: btnKls.value,
             role: "button",
-            "aria-label": unref(buttonAriaLabel),
-            "aria-labelledby": unref(buttonAriaLabelledby),
+            "aria-label": buttonAriaLabel.value,
+            "aria-labelledby": buttonAriaLabelledby.value,
             "aria-description": unref(t)("el.colorpicker.description", { color: _ctx.modelValue || "" }),
             "aria-disabled": unref(colorDisabled),
-            tabindex: unref(colorDisabled) ? -1 : _ctx.tabindex,
+            tabindex: unref(colorDisabled) ? void 0 : _ctx.tabindex,
             onKeydown: handleKeyDown,
-            onFocus: unref(handleFocus),
-            onBlur: unref(handleBlur)
+            onFocus: _cache[0] || (_cache[0] = (...args) => unref(handleFocus) && unref(handleFocus)(...args)),
+            onBlur: _cache[1] || (_cache[1] = (...args) => unref(handleBlur) && unref(handleBlur)(...args))
           }), [
-            unref(colorDisabled) ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              class: normalizeClass(unref(ns).be("picker", "mask"))
-            }, null, 2)) : createCommentVNode("v-if", true),
-            createElementVNode("div", {
-              class: normalizeClass(unref(ns).be("picker", "trigger")),
-              onClick: handleTrigger
-            }, [
-              createElementVNode("span", {
-                class: normalizeClass([unref(ns).be("picker", "color"), unref(ns).is("alpha", _ctx.showAlpha)])
-              }, [
-                createElementVNode("span", {
-                  class: normalizeClass(unref(ns).be("picker", "color-inner")),
-                  style: normalizeStyle({
-                    backgroundColor: unref(displayedColor)
-                  })
-                }, [
-                  withDirectives(createVNode(unref(ElIcon), {
-                    class: normalizeClass([unref(ns).be("picker", "icon"), unref(ns).is("icon-arrow-down")])
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(unref(arrow_down_default))
-                    ]),
-                    _: 1
-                  }, 8, ["class"]), [
-                    [vShow, _ctx.modelValue || showPanelColor.value]
-                  ]),
-                  withDirectives(createVNode(unref(ElIcon), {
-                    class: normalizeClass([unref(ns).be("picker", "empty"), unref(ns).is("icon-close")])
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(unref(close_default))
-                    ]),
-                    _: 1
-                  }, 8, ["class"]), [
-                    [vShow, !_ctx.modelValue && !showPanelColor.value]
-                  ])
-                ], 6)
-              ], 2)
-            ], 2)
-          ], 16, ["id", "aria-label", "aria-labelledby", "aria-description", "aria-disabled", "tabindex", "onFocus", "onBlur"])
+            createElementVNode(
+              "div",
+              {
+                class: normalizeClass(unref(ns).be("picker", "trigger")),
+                onClick: handleTrigger
+              },
+              [
+                createElementVNode(
+                  "span",
+                  {
+                    class: normalizeClass([unref(ns).be("picker", "color"), unref(ns).is("alpha", _ctx.showAlpha)])
+                  },
+                  [
+                    createElementVNode(
+                      "span",
+                      {
+                        class: normalizeClass(unref(ns).be("picker", "color-inner")),
+                        style: normalizeStyle({
+                          backgroundColor: displayedColor.value
+                        })
+                      },
+                      [
+                        withDirectives(createVNode(unref(ElIcon), {
+                          class: normalizeClass([unref(ns).be("picker", "icon"), unref(ns).is("icon-arrow-down")])
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(unref(ArrowDown))
+                          ]),
+                          _: 1
+                        }, 8, ["class"]), [
+                          [vShow, _ctx.modelValue || showPanelColor.value]
+                        ]),
+                        withDirectives(createVNode(unref(ElIcon), {
+                          class: normalizeClass([unref(ns).be("picker", "empty"), unref(ns).is("icon-close")])
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(unref(Close))
+                          ]),
+                          _: 1
+                        }, 8, ["class"]), [
+                          [vShow, !_ctx.modelValue && !showPanelColor.value]
+                        ])
+                      ],
+                      6
+                    )
+                  ],
+                  2
+                )
+              ],
+              2
+            )
+          ], 16, _hoisted_1$b)
         ]),
         _: 1
-      }, 8, ["visible", "popper-class", "teleported", "transition", "onHide"]);
+      }, 8, ["visible", "popper-class", "popper-style", "teleported", "transition", "persistent", "append-to"]);
     };
   }
 });
-var ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__file", "color-picker.vue"]]);
+var ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker/src/color-picker.vue"]]);
 const ElColorPicker = withInstall(ColorPicker);
-const __default__$c = defineComponent({
-  name: "ElContainer"
-});
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
-  ...__default__$c,
-  props: {
+const _sfc_main$q = defineComponent({
+  ...{
+    name: "ElContainer"
+  },
+  __name: "container",
+  props: buildProps({
     direction: {
-      type: String
+      type: String,
+      values: ["horizontal", "vertical"]
     }
-  },
+  }),
   setup(__props) {
     const props = __props;
     const slots = useSlots();
@@ -1466,20 +1682,25 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("section", {
-        class: normalizeClass([unref(ns).b(), unref(ns).is("vertical", unref(isVertical))])
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 2);
+      return openBlock(), createElementBlock(
+        "section",
+        {
+          class: normalizeClass([unref(ns).b(), unref(ns).is("vertical", isVertical.value)])
+        },
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        2
+      );
     };
   }
 });
-var Container = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__file", "container.vue"]]);
-const __default__$b = defineComponent({
-  name: "ElAside"
-});
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
-  ...__default__$b,
+var Container = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/container/src/container.vue"]]);
+const _sfc_main$p = defineComponent({
+  ...{
+    name: "ElAside"
+  },
+  __name: "aside",
   props: {
     width: {
       type: String,
@@ -1489,23 +1710,30 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const ns = useNamespace("aside");
-    const style = computed(() => props.width ? ns.cssVarBlock({ width: props.width }) : {});
+    const style = computed(
+      () => props.width ? ns.cssVarBlock({ width: props.width }) : {}
+    );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("aside", {
-        class: normalizeClass(unref(ns).b()),
-        style: normalizeStyle(unref(style))
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 6);
+      return openBlock(), createElementBlock(
+        "aside",
+        {
+          class: normalizeClass(unref(ns).b()),
+          style: normalizeStyle(style.value)
+        },
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        6
+      );
     };
   }
 });
-var Aside = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__file", "aside.vue"]]);
-const __default__$a = defineComponent({
-  name: "ElFooter"
-});
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
-  ...__default__$a,
+var Aside = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/container/src/aside.vue"]]);
+const _sfc_main$o = defineComponent({
+  ...{
+    name: "ElFooter"
+  },
+  __name: "footer",
   props: {
     height: {
       type: String,
@@ -1515,23 +1743,30 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const ns = useNamespace("footer");
-    const style = computed(() => props.height ? ns.cssVarBlock({ height: props.height }) : {});
+    const style = computed(
+      () => props.height ? ns.cssVarBlock({ height: props.height }) : {}
+    );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("footer", {
-        class: normalizeClass(unref(ns).b()),
-        style: normalizeStyle(unref(style))
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 6);
+      return openBlock(), createElementBlock(
+        "footer",
+        {
+          class: normalizeClass(unref(ns).b()),
+          style: normalizeStyle(style.value)
+        },
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        6
+      );
     };
   }
 });
-var Footer$1 = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__file", "footer.vue"]]);
-const __default__$9 = defineComponent({
-  name: "ElHeader"
-});
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
-  ...__default__$9,
+var Footer$1 = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/container/src/footer.vue"]]);
+const _sfc_main$n = defineComponent({
+  ...{
+    name: "ElHeader"
+  },
+  __name: "header",
   props: {
     height: {
       type: String,
@@ -1547,33 +1782,43 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       }) : {};
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("header", {
-        class: normalizeClass(unref(ns).b()),
-        style: normalizeStyle(unref(style))
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 6);
+      return openBlock(), createElementBlock(
+        "header",
+        {
+          class: normalizeClass(unref(ns).b()),
+          style: normalizeStyle(style.value)
+        },
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        6
+      );
     };
   }
 });
-var Header = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__file", "header.vue"]]);
-const __default__$8 = defineComponent({
-  name: "ElMain"
-});
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
-  ...__default__$8,
+var Header = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/container/src/header.vue"]]);
+const _sfc_main$m = defineComponent({
+  ...{
+    name: "ElMain"
+  },
+  __name: "main",
   setup(__props) {
     const ns = useNamespace("main");
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("main", {
-        class: normalizeClass(unref(ns).b())
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 2);
+      return openBlock(), createElementBlock(
+        "main",
+        {
+          class: normalizeClass(unref(ns).b())
+        },
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        2
+      );
     };
   }
 });
-var Main$1 = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__file", "main.vue"]]);
+var Main$1 = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/container/src/main.vue"]]);
 const ElContainer = withInstall(Container, {
   Aside,
   Footer: Footer$1,
@@ -1600,11 +1845,11 @@ const dividerProps = buildProps({
     default: "solid"
   }
 });
-const __default__$7 = defineComponent({
-  name: "ElDivider"
-});
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
-  ...__default__$7,
+const _sfc_main$l = defineComponent({
+  ...{
+    name: "ElDivider"
+  },
+  __name: "divider",
   props: dividerProps,
   setup(__props) {
     const props = __props;
@@ -1615,22 +1860,32 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       });
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass([unref(ns).b(), unref(ns).m(_ctx.direction)]),
-        style: normalizeStyle(unref(dividerStyle)),
-        role: "separator"
-      }, [
-        _ctx.$slots.default && _ctx.direction !== "vertical" ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: normalizeClass([unref(ns).e("text"), unref(ns).is(_ctx.contentPosition)])
-        }, [
-          renderSlot(_ctx.$slots, "default")
-        ], 2)) : createCommentVNode("v-if", true)
-      ], 6);
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass([unref(ns).b(), unref(ns).m(_ctx.direction)]),
+          style: normalizeStyle(dividerStyle.value),
+          role: "separator"
+        },
+        [
+          _ctx.$slots.default && _ctx.direction !== "vertical" ? (openBlock(), createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: normalizeClass([unref(ns).e("text"), unref(ns).is(_ctx.contentPosition)])
+            },
+            [
+              renderSlot(_ctx.$slots, "default")
+            ],
+            2
+          )) : createCommentVNode("v-if", true)
+        ],
+        6
+      );
     };
   }
 });
-var Divider = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__file", "divider.vue"]]);
+var Divider = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/divider/src/divider.vue"]]);
 const ElDivider = withInstall(Divider);
 let SubMenu$1 = class SubMenu {
   constructor(parent, domNode) {
@@ -1657,8 +1912,9 @@ let SubMenu$1 = class SubMenu {
     const parentNode = this.parent.domNode;
     Array.prototype.forEach.call(this.subMenuItems, (el) => {
       el.addEventListener("keydown", (event) => {
+        const code = getEventCode(event);
         let prevDef = false;
-        switch (event.code) {
+        switch (code) {
           case EVENT_CODE.down: {
             this.gotoSubIndex(this.subIndex + 1);
             prevDef = true;
@@ -1707,8 +1963,9 @@ let MenuItem$1 = class MenuItem {
   }
   addListeners() {
     this.domNode.addEventListener("keydown", (event) => {
+      const code = getEventCode(event);
       let prevDef = false;
-      switch (event.code) {
+      switch (code) {
         case EVENT_CODE.down: {
           triggerEvent(event.currentTarget, "mouseenter");
           this.submenu && this.submenu.gotoSubIndex(0);
@@ -1753,11 +2010,11 @@ let Menu$1 = class Menu {
     });
   }
 };
-const __default__$6 = defineComponent({
-  name: "ElMenuCollapseTransition"
-});
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
-  ...__default__$6,
+const _sfc_main$k = defineComponent({
+  ...{
+    name: "ElMenuCollapseTransition"
+  },
+  __name: "menu-collapse-transition",
   setup(__props) {
     const ns = useNamespace("menu");
     const listeners = {
@@ -1794,16 +2051,21 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(Transition, mergeProps({ mode: "out-in" }, unref(listeners)), {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 16);
+      return openBlock(), createBlock(
+        Transition,
+        mergeProps({ mode: "out-in" }, listeners),
+        {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          _: 3
+        },
+        16
+      );
     };
   }
 });
-var ElMenuCollapseTransition = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__file", "menu-collapse-transition.vue"]]);
+var ElMenuCollapseTransition = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/menu/src/menu-collapse-transition.vue"]]);
 function useMenu(instance, currentIndex) {
   const indexPath = computed(() => {
     let parent = instance.parent;
@@ -1837,15 +2099,19 @@ function useMenuColor(props) {
 }
 const useMenuCssVar = (props, level) => {
   const ns = useNamespace("menu");
-  return computed(() => ns.cssVarBlock({
-    "text-color": props.textColor || "",
-    "hover-text-color": props.textColor || "",
-    "bg-color": props.backgroundColor || "",
-    "hover-bg-color": useMenuColor(props).value || "",
-    "active-color": props.activeTextColor || "",
-    level: `${level}`
-  }));
+  return computed(
+    () => ns.cssVarBlock({
+      "text-color": props.textColor || "",
+      "hover-text-color": props.textColor || "",
+      "bg-color": props.backgroundColor || "",
+      "hover-bg-color": useMenuColor(props).value || "",
+      "active-color": props.activeTextColor || "",
+      level: `${level}`
+    })
+  );
 };
+const MENU_INJECTION_KEY = "rootMenu";
+const SUB_MENU_INJECTION_KEY = "subMenu:";
 const subMenuProps = buildProps({
   index: {
     type: String,
@@ -1854,6 +2120,9 @@ const subMenuProps = buildProps({
   showTimeout: Number,
   hideTimeout: Number,
   popperClass: String,
+  popperStyle: {
+    type: definePropType([String, Object])
+  },
   disabled: Boolean,
   teleported: {
     type: Boolean,
@@ -1879,13 +2148,18 @@ var SubMenu2 = defineComponent({
   props: subMenuProps,
   setup(props, { slots, expose }) {
     const instance = getCurrentInstance();
-    const { indexPath, parentMenu } = useMenu(instance, computed(() => props.index));
+    const { indexPath, parentMenu } = useMenu(
+      instance,
+      computed(() => props.index)
+    );
     const nsMenu = useNamespace("menu");
     const nsSubMenu = useNamespace("sub-menu");
-    const rootMenu = inject("rootMenu");
+    const rootMenu = inject(MENU_INJECTION_KEY);
     if (!rootMenu)
       throwError(COMPONENT_NAME$1, "can not inject root menu");
-    const subMenu = inject(`subMenu:${parentMenu.value.uid}`);
+    const subMenu = inject(
+      `${SUB_MENU_INJECTION_KEY}${parentMenu.value.uid}`
+    );
     if (!subMenu)
       throwError(COMPONENT_NAME$1, "can not inject sub menu");
     const items = ref({});
@@ -1894,35 +2168,56 @@ var SubMenu2 = defineComponent({
     const mouseInChild = ref(false);
     const verticalTitleRef = ref();
     const vPopper = ref();
-    const currentPlacement = computed(() => mode.value === "horizontal" && isFirstLevel.value ? "bottom-start" : "right-start");
+    const isFirstLevel = computed(() => subMenu.level === 0);
+    const currentPlacement = computed(
+      () => mode.value === "horizontal" && isFirstLevel.value ? "bottom-start" : "right-start"
+    );
     const subMenuTitleIcon = computed(() => {
-      return mode.value === "horizontal" && isFirstLevel.value || mode.value === "vertical" && !rootMenu.props.collapse ? props.expandCloseIcon && props.expandOpenIcon ? opened.value ? props.expandOpenIcon : props.expandCloseIcon : arrow_down_default : props.collapseCloseIcon && props.collapseOpenIcon ? opened.value ? props.collapseOpenIcon : props.collapseCloseIcon : arrow_right_default;
+      const isExpandedMode = mode.value === "horizontal" && isFirstLevel.value || mode.value === "vertical" && !rootMenu.props.collapse;
+      if (isExpandedMode) {
+        if (props.expandCloseIcon && props.expandOpenIcon) {
+          return opened.value ? props.expandOpenIcon : props.expandCloseIcon;
+        }
+        return ArrowDown;
+      } else {
+        if (props.collapseCloseIcon && props.collapseOpenIcon) {
+          return opened.value ? props.collapseOpenIcon : props.collapseCloseIcon;
+        }
+        return ArrowRight;
+      }
     });
-    const isFirstLevel = computed(() => subMenu.level === 0);
     const appendToBody = computed(() => {
       const value = props.teleported;
-      return value === void 0 ? isFirstLevel.value : value;
+      return isUndefined(value) ? isFirstLevel.value : value;
     });
-    const menuTransitionName = computed(() => rootMenu.props.collapse ? `${nsMenu.namespace.value}-zoom-in-left` : `${nsMenu.namespace.value}-zoom-in-top`);
-    const fallbackPlacements = computed(() => mode.value === "horizontal" && isFirstLevel.value ? [
-      "bottom-start",
-      "bottom-end",
-      "top-start",
-      "top-end",
-      "right-start",
-      "left-start"
-    ] : [
-      "right-start",
-      "right",
-      "right-end",
-      "left-start",
-      "bottom-start",
-      "bottom-end",
-      "top-start",
-      "top-end"
-    ]);
+    const menuTransitionName = computed(
+      () => rootMenu.props.collapse ? `${nsMenu.namespace.value}-zoom-in-left` : `${nsMenu.namespace.value}-zoom-in-top`
+    );
+    const fallbackPlacements = computed(
+      () => mode.value === "horizontal" && isFirstLevel.value ? [
+        "bottom-start",
+        "bottom-end",
+        "top-start",
+        "top-end",
+        "right-start",
+        "left-start"
+      ] : [
+        "right-start",
+        "right",
+        "right-end",
+        "left-start",
+        "bottom-start",
+        "bottom-end",
+        "top-start",
+        "top-end"
+      ]
+    );
     const opened = computed(() => rootMenu.openedMenus.includes(props.index));
-    const active = computed(() => [...Object.values(items.value), ...Object.values(subMenus.value)].some(({ active: active2 }) => active2));
+    const active = computed(
+      () => [...Object.values(items.value), ...Object.values(subMenus.value)].some(
+        ({ active: active2 }) => active2
+      )
+    );
     const mode = computed(() => rootMenu.props.mode);
     const persistent = computed(() => rootMenu.props.persistent);
     const item = reactive({
@@ -1931,22 +2226,36 @@ var SubMenu2 = defineComponent({
       active
     });
     const ulStyle = useMenuCssVar(rootMenu.props, subMenu.level + 1);
-    const subMenuPopperOffset = computed(() => {
-      var _a;
-      return (_a = props.popperOffset) != null ? _a : rootMenu.props.popperOffset;
-    });
-    const subMenuPopperClass = computed(() => {
-      var _a;
-      return (_a = props.popperClass) != null ? _a : rootMenu.props.popperClass;
-    });
-    const subMenuShowTimeout = computed(() => {
-      var _a;
-      return (_a = props.showTimeout) != null ? _a : rootMenu.props.showTimeout;
-    });
-    const subMenuHideTimeout = computed(() => {
-      var _a;
-      return (_a = props.hideTimeout) != null ? _a : rootMenu.props.hideTimeout;
-    });
+    const subMenuPopperOffset = computed(
+      () => {
+        var _a;
+        return (_a = props.popperOffset) != null ? _a : rootMenu.props.popperOffset;
+      }
+    );
+    const subMenuPopperClass = computed(
+      () => {
+        var _a;
+        return (_a = props.popperClass) != null ? _a : rootMenu.props.popperClass;
+      }
+    );
+    const subMenuPopperStyle = computed(
+      () => {
+        var _a;
+        return (_a = props.popperStyle) != null ? _a : rootMenu.props.popperStyle;
+      }
+    );
+    const subMenuShowTimeout = computed(
+      () => {
+        var _a;
+        return (_a = props.showTimeout) != null ? _a : rootMenu.props.showTimeout;
+      }
+    );
+    const subMenuHideTimeout = computed(
+      () => {
+        var _a;
+        return (_a = props.hideTimeout) != null ? _a : rootMenu.props.hideTimeout;
+      }
+    );
     const doDestroy = () => {
       var _a, _b, _c;
       return (_c = (_b = (_a = vPopper.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.popperInstanceRef) == null ? void 0 : _c.destroy();
@@ -1981,6 +2290,11 @@ var SubMenu2 = defineComponent({
       if (appendToBody.value) {
         (_a = parentMenu.value.vnode.el) == null ? void 0 : _a.dispatchEvent(new MouseEvent("mouseenter"));
       }
+      if (event.type === "mouseenter" && event.target) {
+        nextTick(() => {
+          focusElement(event.target, { preventScroll: true });
+        });
+      }
     };
     const handleMouseleave = (deepDispatch = false) => {
       var _a;
@@ -1990,12 +2304,18 @@ var SubMenu2 = defineComponent({
       }
       timeout == null ? void 0 : timeout();
       subMenu.mouseInChild.value = false;
-      ({ stop: timeout } = useTimeoutFn(() => !mouseInChild.value && rootMenu.closeMenu(props.index, indexPath.value), subMenuHideTimeout.value));
+      ({ stop: timeout } = useTimeoutFn(
+        () => !mouseInChild.value && rootMenu.closeMenu(props.index, indexPath.value),
+        subMenuHideTimeout.value
+      ));
       if (appendToBody.value && deepDispatch) {
         (_a = subMenu.handleMouseleave) == null ? void 0 : _a.call(subMenu, true);
       }
     };
-    watch(() => rootMenu.props.collapse, (value) => handleCollapseToggle(Boolean(value)));
+    watch(
+      () => rootMenu.props.collapse,
+      (value) => handleCollapseToggle(Boolean(value))
+    );
     {
       const addSubMenu = (item2) => {
         subMenus.value[item2.index] = item2;
@@ -2003,7 +2323,7 @@ var SubMenu2 = defineComponent({
       const removeSubMenu = (item2) => {
         delete subMenus.value[item2.index];
       };
-      provide(`subMenu:${instance.uid}`, {
+      provide(`${SUB_MENU_INJECTION_KEY}${instance.uid}`, {
         addSubMenu,
         removeSubMenu,
         handleMouseleave,
@@ -2026,87 +2346,127 @@ var SubMenu2 = defineComponent({
       var _a;
       const titleTag = [
         (_a = slots.title) == null ? void 0 : _a.call(slots),
-        h(ElIcon, {
-          class: nsSubMenu.e("icon-arrow"),
-          style: {
-            transform: opened.value ? props.expandCloseIcon && props.expandOpenIcon || props.collapseCloseIcon && props.collapseOpenIcon && rootMenu.props.collapse ? "none" : "rotateZ(180deg)" : "none"
+        h(
+          ElIcon,
+          {
+            class: nsSubMenu.e("icon-arrow"),
+            style: {
+              transform: opened.value ? props.expandCloseIcon && props.expandOpenIcon || props.collapseCloseIcon && props.collapseOpenIcon && rootMenu.props.collapse ? "none" : "rotateZ(180deg)" : "none"
+            }
+          },
+          {
+            default: () => isString(subMenuTitleIcon.value) ? h(instance.appContext.components[subMenuTitleIcon.value]) : h(subMenuTitleIcon.value)
           }
-        }, {
-          default: () => isString(subMenuTitleIcon.value) ? h(instance.appContext.components[subMenuTitleIcon.value]) : h(subMenuTitleIcon.value)
-        })
+        )
       ];
-      const child = rootMenu.isMenuPopup ? h(ElTooltip, {
-        ref: vPopper,
-        visible: opened.value,
-        effect: "light",
-        pure: true,
-        offset: subMenuPopperOffset.value,
-        showArrow: false,
-        persistent: persistent.value,
-        popperClass: subMenuPopperClass.value,
-        placement: currentPlacement.value,
-        teleported: appendToBody.value,
-        fallbackPlacements: fallbackPlacements.value,
-        transition: menuTransitionName.value,
-        gpuAcceleration: false
-      }, {
-        content: () => {
-          var _a2;
-          return h("div", {
-            class: [
-              nsMenu.m(mode.value),
-              nsMenu.m("popup-container"),
-              subMenuPopperClass.value
-            ],
-            onMouseenter: (evt) => handleMouseenter(evt, 100),
-            onMouseleave: () => handleMouseleave(true),
-            onFocus: (evt) => handleMouseenter(evt, 100)
-          }, [
-            h("ul", {
-              class: [
-                nsMenu.b(),
-                nsMenu.m("popup"),
-                nsMenu.m(`popup-${currentPlacement.value}`)
-              ],
-              style: ulStyle.value
-            }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)])
-          ]);
+      const child = rootMenu.isMenuPopup ? h(
+        ElTooltip,
+        {
+          ref: vPopper,
+          visible: opened.value,
+          effect: "light",
+          pure: true,
+          offset: subMenuPopperOffset.value,
+          showArrow: false,
+          persistent: persistent.value,
+          popperClass: subMenuPopperClass.value,
+          popperStyle: subMenuPopperStyle.value,
+          placement: currentPlacement.value,
+          teleported: appendToBody.value,
+          fallbackPlacements: fallbackPlacements.value,
+          transition: menuTransitionName.value,
+          gpuAcceleration: false
         },
-        default: () => h("div", {
-          class: nsSubMenu.e("title"),
-          onClick: handleClick
-        }, titleTag)
-      }) : h(Fragment, {}, [
-        h("div", {
-          class: nsSubMenu.e("title"),
-          ref: verticalTitleRef,
-          onClick: handleClick
-        }, titleTag),
-        h(ElCollapseTransition, {}, {
-          default: () => {
+        {
+          content: () => {
             var _a2;
-            return withDirectives(h("ul", {
-              role: "menu",
-              class: [nsMenu.b(), nsMenu.m("inline")],
-              style: ulStyle.value
-            }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)]), [[vShow, opened.value]]);
+            return h(
+              "div",
+              {
+                class: [
+                  nsMenu.m(mode.value),
+                  nsMenu.m("popup-container"),
+                  subMenuPopperClass.value
+                ],
+                onMouseenter: (evt) => handleMouseenter(evt, 100),
+                onMouseleave: () => handleMouseleave(true),
+                onFocus: (evt) => handleMouseenter(evt, 100)
+              },
+              [
+                h(
+                  "ul",
+                  {
+                    class: [
+                      nsMenu.b(),
+                      nsMenu.m("popup"),
+                      nsMenu.m(`popup-${currentPlacement.value}`)
+                    ],
+                    style: ulStyle.value
+                  },
+                  [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)]
+                )
+              ]
+            );
+          },
+          default: () => h(
+            "div",
+            {
+              class: nsSubMenu.e("title"),
+              onClick: handleClick
+            },
+            titleTag
+          )
+        }
+      ) : h(Fragment, {}, [
+        h(
+          "div",
+          {
+            class: nsSubMenu.e("title"),
+            ref: verticalTitleRef,
+            onClick: handleClick
+          },
+          titleTag
+        ),
+        h(
+          ElCollapseTransition,
+          {},
+          {
+            default: () => {
+              var _a2;
+              return withDirectives(
+                h(
+                  "ul",
+                  {
+                    role: "menu",
+                    class: [nsMenu.b(), nsMenu.m("inline")],
+                    style: ulStyle.value
+                  },
+                  [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)]
+                ),
+                [[vShow, opened.value]]
+              );
+            }
           }
-        })
+        )
       ]);
-      return h("li", {
-        class: [
-          nsSubMenu.b(),
-          nsSubMenu.is("active", active.value),
-          nsSubMenu.is("opened", opened.value),
-          nsSubMenu.is("disabled", props.disabled)
-        ],
-        role: "menuitem",
-        ariaHaspopup: true,
-        ariaExpanded: opened.value,
-        onMouseenter: handleMouseenter,
-        onMouseleave: () => handleMouseleave(),
-        onFocus: handleMouseenter
-      }, [child]);
+      return h(
+        "li",
+        {
+          class: [
+            nsSubMenu.b(),
+            nsSubMenu.is("active", active.value),
+            nsSubMenu.is("opened", opened.value),
+            nsSubMenu.is("disabled", props.disabled)
+          ],
+          role: "menuitem",
+          ariaHaspopup: true,
+          ariaExpanded: opened.value,
+          onMouseenter: handleMouseenter,
+          onMouseleave: () => handleMouseleave(),
+          onFocus: handleMouseenter
+        },
+        [child]
+      );
     };
   }
 });
@@ -2150,13 +2510,16 @@ const menuProps = buildProps({
   },
   ellipsisIcon: {
     type: iconPropType,
-    default: () => more_default
+    default: () => More
   },
   popperEffect: {
     type: definePropType(String),
     default: "dark"
   },
   popperClass: String,
+  popperStyle: {
+    type: definePropType([String, Object])
+  },
   showTimeout: {
     type: Number,
     default: 300
@@ -2174,8 +2537,9 @@ const checkIndexPath = (indexPath) => isArray(indexPath) && indexPath.every((pat
 const menuEmits = {
   close: (index2, indexPath) => isString(index2) && checkIndexPath(indexPath),
   open: (index2, indexPath) => isString(index2) && checkIndexPath(indexPath),
-  select: (index2, indexPath, item, routerResult) => isString(index2) && checkIndexPath(indexPath) && isObject(item) && (routerResult === void 0 || routerResult instanceof Promise)
+  select: (index2, indexPath, item, routerResult) => isString(index2) && checkIndexPath(indexPath) && isObject(item) && (isUndefined(routerResult) || routerResult instanceof Promise)
 };
+const DEFAULT_MORE_ITEM_WIDTH = 64;
 var Menu2 = defineComponent({
   name: "ElMenu",
   props: menuProps,
@@ -2184,29 +2548,37 @@ var Menu2 = defineComponent({
     const instance = getCurrentInstance();
     const router2 = instance.appContext.config.globalProperties.$router;
     const menu = ref();
+    const subMenu = ref();
     const nsMenu = useNamespace("menu");
     const nsSubMenu = useNamespace("sub-menu");
+    let moreItemWidth = DEFAULT_MORE_ITEM_WIDTH;
     const sliceIndex = ref(-1);
-    const openedMenus = ref(props.defaultOpeneds && !props.collapse ? props.defaultOpeneds.slice(0) : []);
+    const openedMenus = ref(
+      props.defaultOpeneds && !props.collapse ? props.defaultOpeneds.slice(0) : []
+    );
     const activeIndex = ref(props.defaultActive);
     const items = ref({});
     const subMenus = ref({});
-    const isMenuPopup = computed(() => props.mode === "horizontal" || props.mode === "vertical" && props.collapse);
+    const isMenuPopup = computed(
+      () => props.mode === "horizontal" || props.mode === "vertical" && props.collapse
+    );
     const initMenu = () => {
       const activeItem = activeIndex.value && items.value[activeIndex.value];
       if (!activeItem || props.mode === "horizontal" || props.collapse)
         return;
       const indexPath = activeItem.indexPath;
       indexPath.forEach((index2) => {
-        const subMenu = subMenus.value[index2];
-        subMenu && openMenu(index2, subMenu.indexPath);
+        const subMenu2 = subMenus.value[index2];
+        subMenu2 && openMenu(index2, subMenu2.indexPath);
       });
     };
     const openMenu = (index2, indexPath) => {
       if (openedMenus.value.includes(index2))
         return;
       if (props.uniqueOpened) {
-        openedMenus.value = openedMenus.value.filter((index22) => indexPath.includes(index22));
+        openedMenus.value = openedMenus.value.filter(
+          (index22) => indexPath.includes(index22)
+        );
       }
       openedMenus.value.push(index2);
       emit("open", index2, indexPath);
@@ -2242,7 +2614,13 @@ var Menu2 = defineComponent({
             activeIndex.value = index2;
           return res;
         });
-        emit("select", index2, indexPath, { index: index2, indexPath, route }, routerResult);
+        emit(
+          "select",
+          index2,
+          indexPath,
+          { index: index2, indexPath, route },
+          routerResult
+        );
       } else {
         activeIndex.value = index2;
         emit("select", index2, indexPath, { index: index2, indexPath });
@@ -2261,11 +2639,11 @@ var Menu2 = defineComponent({
       return menuItem.offsetWidth + marginLeft + marginRight || 0;
     };
     const calcSliceIndex = () => {
-      var _a, _b;
       if (!menu.value)
         return -1;
-      const items2 = Array.from((_b = (_a = menu.value) == null ? void 0 : _a.childNodes) != null ? _b : []).filter((item) => item.nodeName !== "#text" || item.nodeValue);
-      const moreItemWidth = 64;
+      const items2 = Array.from(menu.value.childNodes).filter(
+        (item) => item.nodeName !== "#comment" && (item.nodeName !== "#text" || item.nodeValue)
+      );
       const computedMenuStyle = getComputedStyle(menu.value);
       const paddingLeft = Number.parseInt(computedMenuStyle.paddingLeft, 10);
       const paddingRight = Number.parseInt(computedMenuStyle.paddingRight, 10);
@@ -2273,8 +2651,6 @@ var Menu2 = defineComponent({
       let calcWidth = 0;
       let sliceIndex2 = 0;
       items2.forEach((item, index2) => {
-        if (item.nodeName === "#comment")
-          return;
         calcWidth += calcMenuItemWidth(item);
         if (calcWidth <= menuWidth - moreItemWidth) {
           sliceIndex2 = index2 + 1;
@@ -2284,16 +2660,19 @@ var Menu2 = defineComponent({
     };
     const getIndexPath = (index2) => subMenus.value[index2].indexPath;
     const debounce2 = (fn, wait = 33.34) => {
-      let timmer;
+      let timer;
       return () => {
-        timmer && clearTimeout(timmer);
-        timmer = setTimeout(() => {
+        timer && clearTimeout(timer);
+        timer = setTimeout(() => {
           fn();
         }, wait);
       };
     };
     let isFirstTimeRender = true;
     const handleResize = () => {
+      const el = unrefElement(subMenu);
+      if (el)
+        moreItemWidth = calcMenuItemWidth(el) || DEFAULT_MORE_ITEM_WIDTH;
       if (sliceIndex.value === calcSliceIndex())
         return;
       const callback = () => {
@@ -2305,16 +2684,22 @@ var Menu2 = defineComponent({
       isFirstTimeRender ? callback() : debounce2(callback)();
       isFirstTimeRender = false;
     };
-    watch(() => props.defaultActive, (currentActive) => {
-      if (!items.value[currentActive]) {
-        activeIndex.value = "";
+    watch(
+      () => props.defaultActive,
+      (currentActive) => {
+        if (!items.value[currentActive]) {
+          activeIndex.value = "";
+        }
+        updateActiveIndex(currentActive);
       }
-      updateActiveIndex(currentActive);
-    });
-    watch(() => props.collapse, (value) => {
-      if (value)
-        openedMenus.value = [];
-    });
+    );
+    watch(
+      () => props.collapse,
+      (value) => {
+        if (value)
+          openedMenus.value = [];
+      }
+    );
     watch(items.value, initMenu);
     let resizeStopper;
     watchEffect(() => {
@@ -2337,23 +2722,26 @@ var Menu2 = defineComponent({
       const removeMenuItem = (item) => {
         delete items.value[item.index];
       };
-      provide("rootMenu", reactive({
-        props,
-        openedMenus,
-        items,
-        subMenus,
-        activeIndex,
-        isMenuPopup,
-        addMenuItem,
-        removeMenuItem,
-        addSubMenu,
-        removeSubMenu,
-        openMenu,
-        closeMenu,
-        handleMenuItemClick,
-        handleSubMenuClick
-      }));
-      provide(`subMenu:${instance.uid}`, {
+      provide(
+        MENU_INJECTION_KEY,
+        reactive({
+          props,
+          openedMenus,
+          items,
+          subMenus,
+          activeIndex,
+          isMenuPopup,
+          addMenuItem,
+          removeMenuItem,
+          addSubMenu,
+          removeSubMenu,
+          openMenu,
+          closeMenu,
+          handleMenuItemClick,
+          handleSubMenuClick
+        })
+      );
+      provide(`${SUB_MENU_INJECTION_KEY}${instance.uid}`, {
         addSubMenu,
         removeSubMenu,
         mouseInChild,
@@ -2373,6 +2761,7 @@ var Menu2 = defineComponent({
       expose({
         open,
         close,
+        updateActiveIndex,
         handleResize
       });
     }
@@ -2382,23 +2771,36 @@ var Menu2 = defineComponent({
       let slot = (_b = (_a = slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : [];
       const vShowMore = [];
       if (props.mode === "horizontal" && menu.value) {
-        const originalSlot = flattedChildren(slot);
+        const originalSlot = flattedChildren(slot).filter((vnode) => {
+          return (vnode == null ? void 0 : vnode.shapeFlag) !== 8;
+        });
         const slotDefault = sliceIndex.value === -1 ? originalSlot : originalSlot.slice(0, sliceIndex.value);
         const slotMore = sliceIndex.value === -1 ? [] : originalSlot.slice(sliceIndex.value);
         if ((slotMore == null ? void 0 : slotMore.length) && props.ellipsis) {
           slot = slotDefault;
-          vShowMore.push(h(SubMenu2, {
-            index: "sub-menu-more",
-            class: nsSubMenu.e("hide-arrow"),
-            popperOffset: props.popperOffset
-          }, {
-            title: () => h(ElIcon, {
-              class: nsSubMenu.e("icon-more")
-            }, {
-              default: () => h(props.ellipsisIcon)
-            }),
-            default: () => slotMore
-          }));
+          vShowMore.push(
+            h(
+              SubMenu2,
+              {
+                ref: subMenu,
+                index: "sub-menu-more",
+                class: nsSubMenu.e("hide-arrow"),
+                popperOffset: props.popperOffset
+              },
+              {
+                title: () => h(
+                  ElIcon,
+                  {
+                    class: nsSubMenu.e("icon-more")
+                  },
+                  {
+                    default: () => h(props.ellipsisIcon)
+                  }
+                ),
+                default: () => slotMore
+              }
+            )
+          );
         }
       }
       const directives = props.closeOnClickOutside ? [
@@ -2408,23 +2810,32 @@ var Menu2 = defineComponent({
             if (!openedMenus.value.length)
               return;
             if (!mouseInChild.value) {
-              openedMenus.value.forEach((openedMenu) => emit("close", openedMenu, getIndexPath(openedMenu)));
+              openedMenus.value.forEach(
+                (openedMenu) => emit("close", openedMenu, getIndexPath(openedMenu))
+              );
               openedMenus.value = [];
             }
           }
         ]
       ] : [];
-      const vMenu = withDirectives(h("ul", {
-        key: String(props.collapse),
-        role: "menubar",
-        ref: menu,
-        style: ulStyle.value,
-        class: {
-          [nsMenu.b()]: true,
-          [nsMenu.m(props.mode)]: true,
-          [nsMenu.m("collapse")]: props.collapse
-        }
-      }, [...slot, ...vShowMore]), directives);
+      const vMenu = withDirectives(
+        h(
+          "ul",
+          {
+            key: String(props.collapse),
+            role: "menubar",
+            ref: menu,
+            style: ulStyle.value,
+            class: {
+              [nsMenu.b()]: true,
+              [nsMenu.m(props.mode)]: true,
+              [nsMenu.m("collapse")]: props.collapse
+            }
+          },
+          [...slot, ...vShowMore]
+        ),
+        directives
+      );
       if (props.collapseTransition && props.mode === "vertical") {
         return h(ElMenuCollapseTransition, () => vMenu);
       }
@@ -2446,23 +2857,27 @@ const menuItemEmits = {
   click: (item) => isString(item.index) && isArray(item.indexPath)
 };
 const COMPONENT_NAME = "ElMenuItem";
-const __default__$5 = defineComponent({
-  name: COMPONENT_NAME
-});
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
-  ...__default__$5,
+const _sfc_main$j = defineComponent({
+  ...{
+    name: COMPONENT_NAME
+  },
+  __name: "menu-item",
   props: menuItemProps,
   emits: menuItemEmits,
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
+    isPropAbsent(props.index) && debugWarn(COMPONENT_NAME, 'Missing required prop: "index"');
     const instance = getCurrentInstance();
-    const rootMenu = inject("rootMenu");
+    const rootMenu = inject(MENU_INJECTION_KEY);
     const nsMenu = useNamespace("menu");
     const nsMenuItem = useNamespace("menu-item");
     if (!rootMenu)
       throwError(COMPONENT_NAME, "can not inject root menu");
     const { parentMenu, indexPath } = useMenu(instance, toRef(props, "index"));
-    const subMenu = inject(`subMenu:${parentMenu.value.uid}`);
+    const subMenu = inject(
+      `${SUB_MENU_INJECTION_KEY}${parentMenu.value.uid}`
+    );
     if (!subMenu)
       throwError(COMPONENT_NAME, "can not inject sub menu");
     const active = computed(() => props.index === rootMenu.activeIndex);
@@ -2489,7 +2904,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       subMenu.removeSubMenu(item);
       rootMenu.removeMenuItem(item);
     });
-    expose({
+    __expose({
       parentMenu,
       rootMenu,
       active,
@@ -2498,73 +2913,109 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       handleClick
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("li", {
-        class: normalizeClass([
-          unref(nsMenuItem).b(),
-          unref(nsMenuItem).is("active", unref(active)),
-          unref(nsMenuItem).is("disabled", _ctx.disabled)
-        ]),
-        role: "menuitem",
-        tabindex: "-1",
-        onClick: handleClick
-      }, [
-        unref(parentMenu).type.name === "ElMenu" && unref(rootMenu).props.collapse && _ctx.$slots.title ? (openBlock(), createBlock(unref(ElTooltip), {
-          key: 0,
-          effect: unref(rootMenu).props.popperEffect,
-          placement: "right",
-          "fallback-placements": ["left"],
-          persistent: unref(rootMenu).props.persistent
-        }, {
-          content: withCtx(() => [
-            renderSlot(_ctx.$slots, "title")
-          ]),
-          default: withCtx(() => [
-            createElementVNode("div", {
-              class: normalizeClass(unref(nsMenu).be("tooltip", "trigger"))
-            }, [
-              renderSlot(_ctx.$slots, "default")
-            ], 2)
+      return openBlock(), createElementBlock(
+        "li",
+        {
+          class: normalizeClass([
+            unref(nsMenuItem).b(),
+            unref(nsMenuItem).is("active", active.value),
+            unref(nsMenuItem).is("disabled", _ctx.disabled)
           ]),
-          _: 3
-        }, 8, ["effect", "persistent"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          renderSlot(_ctx.$slots, "default"),
-          renderSlot(_ctx.$slots, "title")
-        ], 64))
-      ], 2);
+          role: "menuitem",
+          tabindex: "-1",
+          onClick: handleClick
+        },
+        [
+          unref(parentMenu).type.name === "ElMenu" && unref(rootMenu).props.collapse && _ctx.$slots.title ? (openBlock(), createBlock(unref(ElTooltip), {
+            key: 0,
+            effect: unref(rootMenu).props.popperEffect,
+            placement: "right",
+            "fallback-placements": ["left"],
+            "popper-class": unref(rootMenu).props.popperClass,
+            "popper-style": unref(rootMenu).props.popperStyle,
+            persistent: unref(rootMenu).props.persistent,
+            "focus-on-target": ""
+          }, {
+            content: withCtx(() => [
+              renderSlot(_ctx.$slots, "title")
+            ]),
+            default: withCtx(() => [
+              createElementVNode(
+                "div",
+                {
+                  class: normalizeClass(unref(nsMenu).be("tooltip", "trigger"))
+                },
+                [
+                  renderSlot(_ctx.$slots, "default")
+                ],
+                2
+              )
+            ]),
+            _: 3
+          }, 8, ["effect", "popper-class", "popper-style", "persistent"])) : (openBlock(), createElementBlock(
+            Fragment,
+            { key: 1 },
+            [
+              renderSlot(_ctx.$slots, "default"),
+              renderSlot(_ctx.$slots, "title")
+            ],
+            64
+          ))
+        ],
+        2
+      );
     };
   }
 });
-var MenuItem2 = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__file", "menu-item.vue"]]);
+var MenuItem2 = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/menu/src/menu-item.vue"]]);
 const menuItemGroupProps = {
   title: String
 };
-const __default__$4 = defineComponent({
-  name: "ElMenuItemGroup"
-});
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
-  ...__default__$4,
+const _sfc_main$i = defineComponent({
+  ...{
+    name: "ElMenuItemGroup"
+  },
+  __name: "menu-item-group",
   props: menuItemGroupProps,
   setup(__props) {
     const ns = useNamespace("menu-item-group");
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("li", {
-        class: normalizeClass(unref(ns).b())
-      }, [
-        createElementVNode("div", {
-          class: normalizeClass(unref(ns).e("title"))
-        }, [
-          !_ctx.$slots.title ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-            createTextVNode(toDisplayString(_ctx.title), 1)
-          ], 64)) : renderSlot(_ctx.$slots, "title", { key: 1 })
-        ], 2),
-        createElementVNode("ul", null, [
-          renderSlot(_ctx.$slots, "default")
-        ])
-      ], 2);
+      return openBlock(), createElementBlock(
+        "li",
+        {
+          class: normalizeClass(unref(ns).b())
+        },
+        [
+          createElementVNode(
+            "div",
+            {
+              class: normalizeClass(unref(ns).e("title"))
+            },
+            [
+              !_ctx.$slots.title ? (openBlock(), createElementBlock(
+                Fragment,
+                { key: 0 },
+                [
+                  createTextVNode(
+                    toDisplayString(_ctx.title),
+                    1
+                  )
+                ],
+                64
+              )) : renderSlot(_ctx.$slots, "title", { key: 1 })
+            ],
+            2
+          ),
+          createElementVNode("ul", null, [
+            renderSlot(_ctx.$slots, "default")
+          ])
+        ],
+        2
+      );
     };
   }
 });
-var MenuItemGroup = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__file", "menu-item-group.vue"]]);
+var MenuItemGroup = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/menu/src/menu-item-group.vue"]]);
 const ElMenu = withInstall(Menu2, {
   MenuItem: MenuItem2,
   MenuItemGroup,
@@ -2784,8 +3235,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         modelValue: unref(globalStore).isDark,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(globalStore).isDark = $event),
         "inline-prompt": "",
-        "active-icon": unref(sunny_default),
-        "inactive-icon": unref(moon_default),
+        "active-icon": unref(Sunny),
+        "inactive-icon": unref(Moon),
         onChange: unref(switchDark)
       }, null, 8, ["modelValue", "active-icon", "inactive-icon", "onChange"]);
     };
@@ -2881,7 +3332,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [createVNode(_component_el_icon, null, {
             default: withCtx(() => [createVNode(_component_Notification)]),
             _: 1
-          }), _cache[13] || (_cache[13] = createTextVNode(" 布局样式 "))]),
+          }), _cache[13] || (_cache[13] = createTextVNode(" 布局样式 ", -1))]),
           _: 1
         }), createElementVNode("div", _hoisted_1$a, [createVNode(_component_el_tooltip, {
           effect: "dark",
@@ -2931,7 +3382,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             _: 1
           })) : createCommentVNode("", true)], 2)]),
           _: 1
-        })]), createElementVNode("div", _hoisted_2$6, [createElementVNode("span", null, [_cache[18] || (_cache[18] = createTextVNode(" 头部反转色 ")), createVNode(_component_el_tooltip, {
+        })]), createElementVNode("div", _hoisted_2$6, [createElementVNode("span", null, [_cache[18] || (_cache[18] = createTextVNode(" 头部反转色 ", -1)), createVNode(_component_el_tooltip, {
           effect: "dark",
           content: "头部颜色变为深色模式",
           placement: "top"
@@ -2952,7 +3403,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [createVNode(_component_el_icon, null, {
             default: withCtx(() => [createVNode(_component_ColdDrink)]),
             _: 1
-          }), _cache[19] || (_cache[19] = createTextVNode(" 全局主题 "))]),
+          }), _cache[19] || (_cache[19] = createTextVNode(" 全局主题 ", -1))]),
           _: 1
         }), createElementVNode("div", _hoisted_3$2, [_cache[20] || (_cache[20] = createElementVNode("span", null, "主题颜色", -1)), createVNode(_component_el_color_picker, {
           modelValue: unref(primary),
@@ -2966,7 +3417,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [createVNode(_component_el_icon, null, {
             default: withCtx(() => [createVNode(_component_Setting)]),
             _: 1
-          }), _cache[22] || (_cache[22] = createTextVNode(" 界面设置 "))]),
+          }), _cache[22] || (_cache[22] = createTextVNode(" 界面设置 ", -1))]),
           _: 1
         }), createElementVNode("div", _hoisted_5, [_cache[23] || (_cache[23] = createElementVNode("span", null, "主菜单折叠", -1)), createVNode(_component_el_switch, {
           modelValue: unref(isCollapse),
@@ -3031,9 +3482,9 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: "maximize",
         onClick: exitMaximize
-      }, _cache[0] || (_cache[0] = [createElementVNode("i", {
+      }, [..._cache[0] || (_cache[0] = [createElementVNode("i", {
         class: normalizeClass("iconfont icon-tuichu")
-      }, null, -1)]));
+      }, null, -1)])]);
     };
   }
 });
@@ -3338,10 +3789,10 @@ const _hoisted_1$8 = {
   class: "footer flx-center"
 };
 function _sfc_render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$8, _cache[0] || (_cache[0] = [createElementVNode("a", {
+  return openBlock(), createElementBlock("div", _hoisted_1$8, [..._cache[0] || (_cache[0] = [createElementVNode("a", {
     href: "#",
     target: "_blank"
-  }, " 2024 © 青岛安工数联信息科技有限公司 ", -1)]));
+  }, " 2024 © 青岛安工数联信息科技有限公司 ", -1)])]);
 }
 const Footer = /* @__PURE__ */ _export_sfc$1(_sfc_main$c, [["render", _sfc_render$1], ["__scopeId", "data-v-1254311c"]]);
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
@@ -3414,9 +3865,9 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       const _component_el_main = ElMain;
       const _component_el_footer = ElFooter;
       return openBlock(), createElementBlock(Fragment, null, [withDirectives(createVNode(Maximize, null, null, 512), [[vShow, unref(maximize)]]), withDirectives(createVNode(Tabs, {
-        "is-custom-tabs": _ctx.isShowCustomTabs
+        "is-custom-tabs": __props.isShowCustomTabs
       }, null, 8, ["is-custom-tabs"]), [[vShow, props.isShowCustomTabs && unref(tabs)]]), withDirectives(createVNode(Tabs, {
-        "is-custom-tabs": _ctx.isShowCustomTabs
+        "is-custom-tabs": __props.isShowCustomTabs
       }, null, 8, ["is-custom-tabs"]), [[vShow, !props.isShowCustomTabs && unref(tabs)]]), createVNode(_component_el_main, null, {
         default: withCtx(() => [createVNode(_component_router_view, null, {
           default: withCtx(({
@@ -3467,7 +3918,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       const _component_SubMenu = resolveComponent("SubMenu", true);
       const _component_el_sub_menu = ElSubMenu;
       const _component_el_menu_item = ElMenuItem;
-      return openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuList, (subItem) => {
+      return openBlock(true), createElementBlock(Fragment, null, renderList(__props.menuList, (subItem) => {
         var _a;
         return openBlock(), createElementBlock(Fragment, {
           key: subItem.path
@@ -3552,7 +4003,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["breadcrumb-box mask-image", !unref(globalStore).breadcrumbIcon && "no-icon"])
       }, [createVNode(_component_el_breadcrumb, {
-        "separator-icon": unref(arrow_right_default)
+        "separator-icon": unref(ArrowRight)
       }, {
         default: withCtx(() => [createVNode(TransitionGroup, {
           name: "breadcrumb"
@@ -3787,12 +4238,12 @@ function _sfc_render(_ctx, _cache) {
   return openBlock(), createBlock(_component_el_dropdown, {
     trigger: "click"
   }, {
-    default: withCtx(() => _cache[0] || (_cache[0] = [createElementVNode("div", {
+    default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("div", {
       class: "avatar"
     }, [createElementVNode("img", {
       src: _imports_0,
       alt: "avatar"
-    })], -1)])),
+    })], -1)])]),
     _: 1
   });
 }