@element-plus/nightly 0.0.20240803 → 0.0.20240804

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20240803 */
+/*! Element Plus v0.0.20240804 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -11536,7 +11536,7 @@
 
   const ElConfigProvider = withInstall(ConfigProvider);
 
-  const version$1 = "0.0.20240803";
+  const version$1 = "0.0.20240804";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -11589,7 +11589,7 @@
   const __default__$1N = vue.defineComponent({
     name: COMPONENT_NAME$n
   });
-  const _sfc_main$2s = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$2t = /* @__PURE__ */ vue.defineComponent({
     ...__default__$1N,
     props: affixProps,
     emits: affixEmits,
@@ -11693,7 +11693,7 @@
       };
     }
   });
-  var Affix = /* @__PURE__ */ _export_sfc(_sfc_main$2s, [["__file", "affix.vue"]]);
+  var Affix = /* @__PURE__ */ _export_sfc(_sfc_main$2t, [["__file", "affix.vue"]]);
 
   const ElAffix = withInstall(Affix);
 
@@ -11710,7 +11710,7 @@
     name: "ElIcon",
     inheritAttrs: false
   });
-  const _sfc_main$2r = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$2s = /* @__PURE__ */ vue.defineComponent({
     ...__default__$1M,
     props: iconProps,
     setup(__props) {
@@ -11735,7 +11735,7 @@
       };
     }
   });
-  var Icon = /* @__PURE__ */ _export_sfc(_sfc_main$2r, [["__file", "icon.vue"]]);
+  var Icon = /* @__PURE__ */ _export_sfc(_sfc_main$2s, [["__file", "icon.vue"]]);
 
   const ElIcon = withInstall(Icon);
 
@@ -11777,7 +11777,7 @@
   const __default__$1L = vue.defineComponent({
     name: "ElAlert"
   });
-  const _sfc_main$2q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$2r = /* @__PURE__ */ vue.defineComponent({
     ...__default__$1L,
     props: alertProps,
     emits: alertEmits,
@@ -11863,7 +11863,7 @@
       };
     }
   });
-  var Alert = /* @__PURE__ */ _export_sfc(_sfc_main$2q, [["__file", "alert.vue"]]);
+  var Alert = /* @__PURE__ */ _export_sfc(_sfc_main$2r, [["__file", "alert.vue"]]);
 
   const ElAlert = withInstall(Alert);
 
@@ -12031,7 +12031,7 @@
   const __default__$1K = vue.defineComponent({
     name: COMPONENT_NAME$m
   });
-  const _sfc_main$2p = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$2q = /* @__PURE__ */ vue.defineComponent({
     ...__default__$1K,
     props: formProps,
     emits: formEmits,
@@ -12165,7 +12165,7 @@
       };
     }
   });
-  var Form = /* @__PURE__ */ _export_sfc(_sfc_main$2p, [["__file", "form.vue"]]);
+  var Form = /* @__PURE__ */ _export_sfc(_sfc_main$2q, [["__file", "form.vue"]]);
 
   function _extends() {
     _extends = Object.assign ? Object.assign.bind() : function(target) {
@@ -13353,7 +13353,7 @@
   const __default__$1J = vue.defineComponent({
     name: "ElFormItem"
   });
-  const _sfc_main$2o = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$2p = /* @__PURE__ */ vue.defineComponent({
     ...__default__$1J,
     props: formItemProps,
     setup(__props, { expose }) {
@@ -13654,7 +13654,7 @@
       };
     }
   });
-  var FormItem = /* @__PURE__ */ _export_sfc(_sfc_main$2o, [["__file", "form-item.vue"]]);
+  var FormItem = /* @__PURE__ */ _export_sfc(_sfc_main$2p, [["__file", "form-item.vue"]]);
 
   const ElForm = withInstall(Form, {
     FormItem
@@ -13839,7 +13839,7 @@
     name: "ElInput",
     inheritAttrs: false
   });
-  const _sfc_main$2n = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$2o = /* @__PURE__ */ vue.defineComponent({
     ...__default__$1I,
     props: inputProps,
     emits: inputEmits,
@@ -14256,7 +14256,7 @@
       };
     }
   });
-  var Input = /* @__PURE__ */ _export_sfc(_sfc_main$2n, [["__file", "input.vue"]]);
+  var Input = /* @__PURE__ */ _export_sfc(_sfc_main$2o, [["__file", "input.vue"]]);
 
   const ElInput = withInstall(Input);
 
@@ -14306,7 +14306,7 @@
   });
 
   const COMPONENT_NAME$k = "Thumb";
-  const _sfc_main$2m = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$2n = /* @__PURE__ */ vue.defineComponent({
     __name: "thumb",
     props: thumbProps,
     setup(__props) {
@@ -14425,7 +14425,7 @@
       };
     }
   });
-  var Thumb = /* @__PURE__ */ _export_sfc(_sfc_main$2m, [["__file", "thumb.vue"]]);
+  var Thumb = /* @__PURE__ */ _export_sfc(_sfc_main$2n, [["__file", "thumb.vue"]]);
 
   const barProps = buildProps({
     always: {
@@ -14438,7 +14438,7 @@
     }
   });
 
-  const _sfc_main$2l = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$2m = /* @__PURE__ */ vue.defineComponent({
     __name: "bar",
     props: barProps,
     setup(__props, { expose }) {
@@ -14496,7 +14496,7 @@
       };
     }
   });
-  var Bar = /* @__PURE__ */ _export_sfc(_sfc_main$2l, [["__file", "bar.vue"]]);
+  var Bar = /* @__PURE__ */ _export_sfc(_sfc_main$2m, [["__file", "bar.vue"]]);
 
   const scrollbarProps = buildProps({
     height: {
@@ -14552,7 +14552,7 @@
   const __default__$1H = vue.defineComponent({
     name: COMPONENT_NAME$j
   });
-  const _sfc_main$2k = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$2l = /* @__PURE__ */ vue.defineComponent({
     ...__default__$1H,
     props: scrollbarProps,
     emits: scrollbarEmits,
@@ -14702,7 +14702,7 @@
       };
     }
   });
-  var Scrollbar$1 = /* @__PURE__ */ _export_sfc(_sfc_main$2k, [["__file", "scrollbar.vue"]]);
+  var Scrollbar$1 = /* @__PURE__ */ _export_sfc(_sfc_main$2l, [["__file", "scrollbar.vue"]]);
 
   const ElScrollbar = withInstall(Scrollbar$1);
 
@@ -14736,7 +14736,7 @@
     name: "ElPopper",
     inheritAttrs: false
   });
-  const _sfc_main$2j = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$2k = /* @__PURE__ */ vue.defineComponent({
     ...__default__$1G,
     props: popperProps,
     setup(__props, { expose }) {
@@ -14760,7 +14760,7 @@
       };
     }
   });
-  var Popper = /* @__PURE__ */ _export_sfc(_sfc_main$2j, [["__file", "popper.vue"]]);
+  var Popper = /* @__PURE__ */ _export_sfc(_sfc_main$2k, [["__file", "popper.vue"]]);
 
   const popperArrowProps = buildProps({
     arrowOffset: {
@@ -14774,7 +14774,7 @@
     name: "ElPopperArrow",
     inheritAttrs: false
   });
-  const _sfc_main$2i = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$2j = /* @__PURE__ */ vue.defineComponent({
     ...__default__$1F,
     props: popperArrowProps,
     setup(__props, { expose }) {
@@ -14801,7 +14801,7 @@
       };
     }
   });
-  var ElPopperArrow = /* @__PURE__ */ _export_sfc(_sfc_main$2i, [["__file", "arrow.vue"]]);
+  var ElPopperArrow = /* @__PURE__ */ _export_sfc(_sfc_main$2j, [["__file", "arrow.vue"]]);
 
   const NAME = "ElOnlyChild";
   const OnlyChild = vue.defineComponent({
@@ -14893,7 +14893,7 @@
     name: "ElPopperTrigger",
     inheritAttrs: false
   });
-  const _sfc_main$2h = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$2i = /* @__PURE__ */ vue.defineComponent({
     ...__default__$1E,
     props: popperTriggerProps,
     setup(__props, { expose }) {
@@ -14992,7 +14992,7 @@
       };
     }
   });
-  var ElPopperTrigger = /* @__PURE__ */ _export_sfc(_sfc_main$2h, [["__file", "trigger.vue"]]);
+  var ElPopperTrigger = /* @__PURE__ */ _export_sfc(_sfc_main$2i, [["__file", "trigger.vue"]]);
 
   const FOCUS_AFTER_TRAPPED = "focus-trap.focus-after-trapped";
   const FOCUS_AFTER_RELEASED = "focus-trap.focus-after-released";
@@ -15142,7 +15142,7 @@
     });
   };
 
-  const _sfc_main$2g = vue.defineComponent({
+  const _sfc_main$2h = vue.defineComponent({
     name: "ElFocusTrap",
     inheritAttrs: false,
     props: {
@@ -15381,7 +15381,7 @@
   function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.renderSlot(_ctx.$slots, "default", { handleKeydown: _ctx.onKeydown });
   }
-  var ElFocusTrap = /* @__PURE__ */ _export_sfc(_sfc_main$2g, [["render", _sfc_render$u], ["__file", "focus-trap.vue"]]);
+  var ElFocusTrap = /* @__PURE__ */ _export_sfc(_sfc_main$2h, [["render", _sfc_render$u], ["__file", "focus-trap.vue"]]);
 
   const POSITIONING_STRATEGIES = ["fixed", "absolute"];
   const popperCoreConfigProps = buildProps({
@@ -15675,7 +15675,7 @@
   const __default__$1D = vue.defineComponent({
     name: "ElPopperContent"
   });
-  const _sfc_main$2f = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$2g = /* @__PURE__ */ vue.defineComponent({
     ...__default__$1D,
     props: popperContentProps,
     emits: popperContentEmits,
@@ -15792,7 +15792,7 @@
       };
     }
   });
-  var ElPopperContent = /* @__PURE__ */ _export_sfc(_sfc_main$2f, [["__file", "content.vue"]]);
+  var ElPopperContent = /* @__PURE__ */ _export_sfc(_sfc_main$2g, [["__file", "content.vue"]]);
 
   const ElPopper = withInstall(Popper);
 
@@ -15877,7 +15877,7 @@
   const __default__$1C = vue.defineComponent({
     name: "ElTooltipTrigger"
   });
-  const _sfc_main$2e = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$2f = /* @__PURE__ */ vue.defineComponent({
     ...__default__$1C,
     props: useTooltipTriggerProps,
     setup(__props, { expose }) {
@@ -15937,7 +15937,34 @@
       };
     }
   });
-  var ElTooltipTrigger = /* @__PURE__ */ _export_sfc(_sfc_main$2e, [["__file", "trigger.vue"]]);
+  var ElTooltipTrigger = /* @__PURE__ */ _export_sfc(_sfc_main$2f, [["__file", "trigger.vue"]]);
+
+  const teleportProps = buildProps({
+    to: {
+      type: definePropType([String, Object]),
+      required: true
+    },
+    disabled: Boolean
+  });
+
+  const _sfc_main$2e = /* @__PURE__ */ vue.defineComponent({
+    __name: "teleport",
+    props: teleportProps,
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return _ctx.disabled ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : (vue.openBlock(), vue.createBlock(vue.Teleport, {
+          key: 1,
+          to: _ctx.to
+        }, [
+          vue.renderSlot(_ctx.$slots, "default")
+        ], 8, ["to"]));
+      };
+    }
+  });
+  var Teleport = /* @__PURE__ */ _export_sfc(_sfc_main$2e, [["__file", "teleport.vue"]]);
+
+  const ElTeleport = withInstall(Teleport);
+  var ElTeleport$1 = ElTeleport;
 
   const __default__$1B = vue.defineComponent({
     name: "ElTooltipContent",
@@ -16047,58 +16074,61 @@
         contentRef
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.Teleport, {
+        return vue.openBlock(), vue.createBlock(vue.unref(ElTeleport$1), {
           disabled: !_ctx.teleported,
           to: vue.unref(appendTo)
-        }, [
-          vue.createVNode(vue.Transition, {
-            name: vue.unref(transitionClass),
-            onAfterLeave: onTransitionLeave,
-            onBeforeEnter,
-            onAfterEnter: onAfterShow,
-            onBeforeLeave
-          }, {
-            default: vue.withCtx(() => [
-              vue.unref(shouldRender) ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(ElPopperContent), vue.mergeProps({
-                key: 0,
-                id: vue.unref(id),
-                ref_key: "contentRef",
-                ref: contentRef
-              }, _ctx.$attrs, {
-                "aria-label": _ctx.ariaLabel,
-                "aria-hidden": vue.unref(ariaHidden),
-                "boundaries-padding": _ctx.boundariesPadding,
-                "fallback-placements": _ctx.fallbackPlacements,
-                "gpu-acceleration": _ctx.gpuAcceleration,
-                offset: _ctx.offset,
-                placement: _ctx.placement,
-                "popper-options": _ctx.popperOptions,
-                strategy: _ctx.strategy,
-                effect: _ctx.effect,
-                enterable: _ctx.enterable,
-                pure: _ctx.pure,
-                "popper-class": _ctx.popperClass,
-                "popper-style": [_ctx.popperStyle, vue.unref(contentStyle)],
-                "reference-el": _ctx.referenceEl,
-                "trigger-target-el": _ctx.triggerTargetEl,
-                visible: vue.unref(shouldShow),
-                "z-index": _ctx.zIndex,
-                onMouseenter: vue.unref(onContentEnter),
-                onMouseleave: vue.unref(onContentLeave),
-                onBlur,
-                onClose: vue.unref(onClose)
-              }), {
-                default: vue.withCtx(() => [
-                  !destroyed.value ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : vue.createCommentVNode("v-if", true)
-                ]),
-                _: 3
-              }, 16, ["id", "aria-label", "aria-hidden", "boundaries-padding", "fallback-placements", "gpu-acceleration", "offset", "placement", "popper-options", "strategy", "effect", "enterable", "pure", "popper-class", "popper-style", "reference-el", "trigger-target-el", "visible", "z-index", "onMouseenter", "onMouseleave", "onClose"])), [
-                [vue.vShow, vue.unref(shouldShow)]
-              ]) : vue.createCommentVNode("v-if", true)
-            ]),
-            _: 3
-          }, 8, ["name"])
-        ], 8, ["disabled", "to"]);
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.Transition, {
+              name: vue.unref(transitionClass),
+              onAfterLeave: onTransitionLeave,
+              onBeforeEnter,
+              onAfterEnter: onAfterShow,
+              onBeforeLeave
+            }, {
+              default: vue.withCtx(() => [
+                vue.unref(shouldRender) ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(ElPopperContent), vue.mergeProps({
+                  key: 0,
+                  id: vue.unref(id),
+                  ref_key: "contentRef",
+                  ref: contentRef
+                }, _ctx.$attrs, {
+                  "aria-label": _ctx.ariaLabel,
+                  "aria-hidden": vue.unref(ariaHidden),
+                  "boundaries-padding": _ctx.boundariesPadding,
+                  "fallback-placements": _ctx.fallbackPlacements,
+                  "gpu-acceleration": _ctx.gpuAcceleration,
+                  offset: _ctx.offset,
+                  placement: _ctx.placement,
+                  "popper-options": _ctx.popperOptions,
+                  strategy: _ctx.strategy,
+                  effect: _ctx.effect,
+                  enterable: _ctx.enterable,
+                  pure: _ctx.pure,
+                  "popper-class": _ctx.popperClass,
+                  "popper-style": [_ctx.popperStyle, vue.unref(contentStyle)],
+                  "reference-el": _ctx.referenceEl,
+                  "trigger-target-el": _ctx.triggerTargetEl,
+                  visible: vue.unref(shouldShow),
+                  "z-index": _ctx.zIndex,
+                  onMouseenter: vue.unref(onContentEnter),
+                  onMouseleave: vue.unref(onContentLeave),
+                  onBlur,
+                  onClose: vue.unref(onClose)
+                }), {
+                  default: vue.withCtx(() => [
+                    !destroyed.value ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : vue.createCommentVNode("v-if", true)
+                  ]),
+                  _: 3
+                }, 16, ["id", "aria-label", "aria-hidden", "boundaries-padding", "fallback-placements", "gpu-acceleration", "offset", "placement", "popper-options", "strategy", "effect", "enterable", "pure", "popper-class", "popper-style", "reference-el", "trigger-target-el", "visible", "z-index", "onMouseenter", "onMouseleave", "onClose"])), [
+                  [vue.vShow, vue.unref(shouldShow)]
+                ]) : vue.createCommentVNode("v-if", true)
+              ]),
+              _: 3
+            }, 8, ["name"])
+          ]),
+          _: 3
+        }, 8, ["disabled", "to"]);
       };
     }
   });
@@ -19033,11 +19063,14 @@
         if (showClose.value) {
           event.stopPropagation();
           focusOnInputBox();
-          emitInput(valueOnClear.value);
+          if (pickerOptions.value.handleClear) {
+            pickerOptions.value.handleClear();
+          } else {
+            emitInput(valueOnClear.value);
+          }
           emitChange(valueOnClear.value, true);
           showClose.value = false;
           pickerVisible.value = false;
-          pickerOptions.value.handleClear && pickerOptions.value.handleClear();
         }
         emit("clear");
       };
@@ -30009,96 +30042,99 @@
         dialogContentRef
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.Teleport, {
+        return vue.openBlock(), vue.createBlock(vue.unref(ElTeleport$1), {
           to: _ctx.appendTo,
           disabled: _ctx.appendTo !== "body" ? false : !_ctx.appendToBody
-        }, [
-          vue.createVNode(vue.Transition, {
-            name: "dialog-fade",
-            onAfterEnter: vue.unref(afterEnter),
-            onAfterLeave: vue.unref(afterLeave),
-            onBeforeLeave: vue.unref(beforeLeave),
-            persisted: ""
-          }, {
-            default: vue.withCtx(() => [
-              vue.withDirectives(vue.createVNode(vue.unref(ElOverlay), {
-                "custom-mask-event": "",
-                mask: _ctx.modal,
-                "overlay-class": _ctx.modalClass,
-                "z-index": vue.unref(zIndex)
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createElementVNode("div", {
-                    role: "dialog",
-                    "aria-modal": "true",
-                    "aria-label": _ctx.title || void 0,
-                    "aria-labelledby": !_ctx.title ? vue.unref(titleId) : void 0,
-                    "aria-describedby": vue.unref(bodyId),
-                    class: vue.normalizeClass(`${vue.unref(ns).namespace.value}-overlay-dialog`),
-                    style: vue.normalizeStyle(vue.unref(overlayDialogStyle)),
-                    onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(overlayEvent).onClick && vue.unref(overlayEvent).onClick(...args)),
-                    onMousedown: _cache[1] || (_cache[1] = (...args) => vue.unref(overlayEvent).onMousedown && vue.unref(overlayEvent).onMousedown(...args)),
-                    onMouseup: _cache[2] || (_cache[2] = (...args) => vue.unref(overlayEvent).onMouseup && vue.unref(overlayEvent).onMouseup(...args))
-                  }, [
-                    vue.createVNode(vue.unref(ElFocusTrap), {
-                      loop: "",
-                      trapped: vue.unref(visible),
-                      "focus-start-el": "container",
-                      onFocusAfterTrapped: vue.unref(onOpenAutoFocus),
-                      onFocusAfterReleased: vue.unref(onCloseAutoFocus),
-                      onFocusoutPrevented: vue.unref(onFocusoutPrevented),
-                      onReleaseRequested: vue.unref(onCloseRequested)
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.unref(rendered) ? (vue.openBlock(), vue.createBlock(ElDialogContent, vue.mergeProps({
-                          key: 0,
-                          ref_key: "dialogContentRef",
-                          ref: dialogContentRef
-                        }, _ctx.$attrs, {
-                          center: _ctx.center,
-                          "align-center": _ctx.alignCenter,
-                          "close-icon": _ctx.closeIcon,
-                          draggable: vue.unref(draggable),
-                          overflow: _ctx.overflow,
-                          fullscreen: _ctx.fullscreen,
-                          "show-close": _ctx.showClose,
-                          title: _ctx.title,
-                          "aria-level": _ctx.headerAriaLevel,
-                          onClose: vue.unref(handleClose)
-                        }), vue.createSlots({
-                          header: vue.withCtx(() => [
-                            !_ctx.$slots.title ? vue.renderSlot(_ctx.$slots, "header", {
-                              key: 0,
-                              close: vue.unref(handleClose),
-                              titleId: vue.unref(titleId),
-                              titleClass: vue.unref(ns).e("title")
-                            }) : vue.renderSlot(_ctx.$slots, "title", { key: 1 })
-                          ]),
-                          default: vue.withCtx(() => [
-                            vue.renderSlot(_ctx.$slots, "default")
-                          ]),
-                          _: 2
-                        }, [
-                          _ctx.$slots.footer ? {
-                            name: "footer",
-                            fn: vue.withCtx(() => [
-                              vue.renderSlot(_ctx.$slots, "footer")
-                            ])
-                          } : void 0
-                        ]), 1040, ["center", "align-center", "close-icon", "draggable", "overflow", "fullscreen", "show-close", "title", "aria-level", "onClose"])) : vue.createCommentVNode("v-if", true)
-                      ]),
-                      _: 3
-                    }, 8, ["trapped", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
-                  ], 46, _hoisted_1$G)
-                ]),
-                _: 3
-              }, 8, ["mask", "overlay-class", "z-index"]), [
-                [vue.vShow, vue.unref(visible)]
-              ])
-            ]),
-            _: 3
-          }, 8, ["onAfterEnter", "onAfterLeave", "onBeforeLeave"])
-        ], 8, ["to", "disabled"]);
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.Transition, {
+              name: "dialog-fade",
+              onAfterEnter: vue.unref(afterEnter),
+              onAfterLeave: vue.unref(afterLeave),
+              onBeforeLeave: vue.unref(beforeLeave),
+              persisted: ""
+            }, {
+              default: vue.withCtx(() => [
+                vue.withDirectives(vue.createVNode(vue.unref(ElOverlay), {
+                  "custom-mask-event": "",
+                  mask: _ctx.modal,
+                  "overlay-class": _ctx.modalClass,
+                  "z-index": vue.unref(zIndex)
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createElementVNode("div", {
+                      role: "dialog",
+                      "aria-modal": "true",
+                      "aria-label": _ctx.title || void 0,
+                      "aria-labelledby": !_ctx.title ? vue.unref(titleId) : void 0,
+                      "aria-describedby": vue.unref(bodyId),
+                      class: vue.normalizeClass(`${vue.unref(ns).namespace.value}-overlay-dialog`),
+                      style: vue.normalizeStyle(vue.unref(overlayDialogStyle)),
+                      onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(overlayEvent).onClick && vue.unref(overlayEvent).onClick(...args)),
+                      onMousedown: _cache[1] || (_cache[1] = (...args) => vue.unref(overlayEvent).onMousedown && vue.unref(overlayEvent).onMousedown(...args)),
+                      onMouseup: _cache[2] || (_cache[2] = (...args) => vue.unref(overlayEvent).onMouseup && vue.unref(overlayEvent).onMouseup(...args))
+                    }, [
+                      vue.createVNode(vue.unref(ElFocusTrap), {
+                        loop: "",
+                        trapped: vue.unref(visible),
+                        "focus-start-el": "container",
+                        onFocusAfterTrapped: vue.unref(onOpenAutoFocus),
+                        onFocusAfterReleased: vue.unref(onCloseAutoFocus),
+                        onFocusoutPrevented: vue.unref(onFocusoutPrevented),
+                        onReleaseRequested: vue.unref(onCloseRequested)
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.unref(rendered) ? (vue.openBlock(), vue.createBlock(ElDialogContent, vue.mergeProps({
+                            key: 0,
+                            ref_key: "dialogContentRef",
+                            ref: dialogContentRef
+                          }, _ctx.$attrs, {
+                            center: _ctx.center,
+                            "align-center": _ctx.alignCenter,
+                            "close-icon": _ctx.closeIcon,
+                            draggable: vue.unref(draggable),
+                            overflow: _ctx.overflow,
+                            fullscreen: _ctx.fullscreen,
+                            "show-close": _ctx.showClose,
+                            title: _ctx.title,
+                            "aria-level": _ctx.headerAriaLevel,
+                            onClose: vue.unref(handleClose)
+                          }), vue.createSlots({
+                            header: vue.withCtx(() => [
+                              !_ctx.$slots.title ? vue.renderSlot(_ctx.$slots, "header", {
+                                key: 0,
+                                close: vue.unref(handleClose),
+                                titleId: vue.unref(titleId),
+                                titleClass: vue.unref(ns).e("title")
+                              }) : vue.renderSlot(_ctx.$slots, "title", { key: 1 })
+                            ]),
+                            default: vue.withCtx(() => [
+                              vue.renderSlot(_ctx.$slots, "default")
+                            ]),
+                            _: 2
+                          }, [
+                            _ctx.$slots.footer ? {
+                              name: "footer",
+                              fn: vue.withCtx(() => [
+                                vue.renderSlot(_ctx.$slots, "footer")
+                              ])
+                            } : void 0
+                          ]), 1040, ["center", "align-center", "close-icon", "draggable", "overflow", "fullscreen", "show-close", "title", "aria-level", "onClose"])) : vue.createCommentVNode("v-if", true)
+                        ]),
+                        _: 3
+                      }, 8, ["trapped", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
+                    ], 46, _hoisted_1$G)
+                  ]),
+                  _: 3
+                }, 8, ["mask", "overlay-class", "z-index"]), [
+                  [vue.vShow, vue.unref(visible)]
+                ])
+              ]),
+              _: 3
+            }, 8, ["onAfterEnter", "onAfterLeave", "onBeforeLeave"])
+          ]),
+          _: 3
+        }, 8, ["to", "disabled"]);
       };
     }
   });
@@ -30233,119 +30269,122 @@
         afterLeave
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.Teleport, {
+        return vue.openBlock(), vue.createBlock(vue.unref(ElTeleport$1), {
           to: "body",
           disabled: !_ctx.appendToBody
-        }, [
-          vue.createVNode(vue.Transition, {
-            name: vue.unref(ns).b("fade"),
-            onAfterEnter: vue.unref(afterEnter),
-            onAfterLeave: vue.unref(afterLeave),
-            onBeforeLeave: vue.unref(beforeLeave),
-            persisted: ""
-          }, {
-            default: vue.withCtx(() => [
-              vue.withDirectives(vue.createVNode(vue.unref(ElOverlay), {
-                mask: _ctx.modal,
-                "overlay-class": _ctx.modalClass,
-                "z-index": vue.unref(zIndex),
-                onClick: vue.unref(onModalClick)
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(ElFocusTrap), {
-                    loop: "",
-                    trapped: vue.unref(visible),
-                    "focus-trap-el": drawerRef.value,
-                    "focus-start-el": focusStartRef.value,
-                    onFocusAfterTrapped: vue.unref(onOpenAutoFocus),
-                    onFocusAfterReleased: vue.unref(onCloseAutoFocus),
-                    onFocusoutPrevented: vue.unref(onFocusoutPrevented),
-                    onReleaseRequested: vue.unref(onCloseRequested)
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createElementVNode("div", vue.mergeProps({
-                        ref_key: "drawerRef",
-                        ref: drawerRef,
-                        "aria-modal": "true",
-                        "aria-label": _ctx.title || void 0,
-                        "aria-labelledby": !_ctx.title ? vue.unref(titleId) : void 0,
-                        "aria-describedby": vue.unref(bodyId)
-                      }, _ctx.$attrs, {
-                        class: [vue.unref(ns).b(), _ctx.direction, vue.unref(visible) && "open"],
-                        style: vue.unref(isHorizontal) ? "width: " + vue.unref(drawerSize) : "height: " + vue.unref(drawerSize),
-                        role: "dialog",
-                        onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
-                        }, ["stop"]))
-                      }), [
-                        vue.createElementVNode("span", {
-                          ref_key: "focusStartRef",
-                          ref: focusStartRef,
-                          class: vue.normalizeClass(vue.unref(ns).e("sr-focus")),
-                          tabindex: "-1"
-                        }, null, 2),
-                        _ctx.withHeader ? (vue.openBlock(), vue.createElementBlock("header", {
-                          key: 0,
-                          class: vue.normalizeClass(vue.unref(ns).e("header"))
-                        }, [
-                          !_ctx.$slots.title ? vue.renderSlot(_ctx.$slots, "header", {
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.Transition, {
+              name: vue.unref(ns).b("fade"),
+              onAfterEnter: vue.unref(afterEnter),
+              onAfterLeave: vue.unref(afterLeave),
+              onBeforeLeave: vue.unref(beforeLeave),
+              persisted: ""
+            }, {
+              default: vue.withCtx(() => [
+                vue.withDirectives(vue.createVNode(vue.unref(ElOverlay), {
+                  mask: _ctx.modal,
+                  "overlay-class": _ctx.modalClass,
+                  "z-index": vue.unref(zIndex),
+                  onClick: vue.unref(onModalClick)
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(ElFocusTrap), {
+                      loop: "",
+                      trapped: vue.unref(visible),
+                      "focus-trap-el": drawerRef.value,
+                      "focus-start-el": focusStartRef.value,
+                      onFocusAfterTrapped: vue.unref(onOpenAutoFocus),
+                      onFocusAfterReleased: vue.unref(onCloseAutoFocus),
+                      onFocusoutPrevented: vue.unref(onFocusoutPrevented),
+                      onReleaseRequested: vue.unref(onCloseRequested)
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createElementVNode("div", vue.mergeProps({
+                          ref_key: "drawerRef",
+                          ref: drawerRef,
+                          "aria-modal": "true",
+                          "aria-label": _ctx.title || void 0,
+                          "aria-labelledby": !_ctx.title ? vue.unref(titleId) : void 0,
+                          "aria-describedby": vue.unref(bodyId)
+                        }, _ctx.$attrs, {
+                          class: [vue.unref(ns).b(), _ctx.direction, vue.unref(visible) && "open"],
+                          style: vue.unref(isHorizontal) ? "width: " + vue.unref(drawerSize) : "height: " + vue.unref(drawerSize),
+                          role: "dialog",
+                          onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+                          }, ["stop"]))
+                        }), [
+                          vue.createElementVNode("span", {
+                            ref_key: "focusStartRef",
+                            ref: focusStartRef,
+                            class: vue.normalizeClass(vue.unref(ns).e("sr-focus")),
+                            tabindex: "-1"
+                          }, null, 2),
+                          _ctx.withHeader ? (vue.openBlock(), vue.createElementBlock("header", {
                             key: 0,
-                            close: vue.unref(handleClose),
-                            titleId: vue.unref(titleId),
-                            titleClass: vue.unref(ns).e("title")
-                          }, () => [
-                            !_ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("span", {
+                            class: vue.normalizeClass(vue.unref(ns).e("header"))
+                          }, [
+                            !_ctx.$slots.title ? vue.renderSlot(_ctx.$slots, "header", {
                               key: 0,
-                              id: vue.unref(titleId),
-                              role: "heading",
-                              "aria-level": _ctx.headerAriaLevel,
-                              class: vue.normalizeClass(vue.unref(ns).e("title"))
-                            }, vue.toDisplayString(_ctx.title), 11, _hoisted_2$o)) : vue.createCommentVNode("v-if", true)
-                          ]) : vue.renderSlot(_ctx.$slots, "title", { key: 1 }, () => [
-                            vue.createCommentVNode(" DEPRECATED SLOT ")
-                          ]),
-                          _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
+                              close: vue.unref(handleClose),
+                              titleId: vue.unref(titleId),
+                              titleClass: vue.unref(ns).e("title")
+                            }, () => [
+                              !_ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("span", {
+                                key: 0,
+                                id: vue.unref(titleId),
+                                role: "heading",
+                                "aria-level": _ctx.headerAriaLevel,
+                                class: vue.normalizeClass(vue.unref(ns).e("title"))
+                              }, vue.toDisplayString(_ctx.title), 11, _hoisted_2$o)) : vue.createCommentVNode("v-if", true)
+                            ]) : vue.renderSlot(_ctx.$slots, "title", { key: 1 }, () => [
+                              vue.createCommentVNode(" DEPRECATED SLOT ")
+                            ]),
+                            _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
+                              key: 2,
+                              "aria-label": vue.unref(t)("el.drawer.close"),
+                              class: vue.normalizeClass(vue.unref(ns).e("close-btn")),
+                              type: "button",
+                              onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(handleClose) && vue.unref(handleClose)(...args))
+                            }, [
+                              vue.createVNode(vue.unref(ElIcon), {
+                                class: vue.normalizeClass(vue.unref(ns).e("close"))
+                              }, {
+                                default: vue.withCtx(() => [
+                                  vue.createVNode(vue.unref(close_default))
+                                ]),
+                                _: 1
+                              }, 8, ["class"])
+                            ], 10, _hoisted_3$a)) : vue.createCommentVNode("v-if", true)
+                          ], 2)) : vue.createCommentVNode("v-if", true),
+                          vue.unref(rendered) ? (vue.openBlock(), vue.createElementBlock("div", {
+                            key: 1,
+                            id: vue.unref(bodyId),
+                            class: vue.normalizeClass(vue.unref(ns).e("body"))
+                          }, [
+                            vue.renderSlot(_ctx.$slots, "default")
+                          ], 10, _hoisted_4$6)) : vue.createCommentVNode("v-if", true),
+                          _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", {
                             key: 2,
-                            "aria-label": vue.unref(t)("el.drawer.close"),
-                            class: vue.normalizeClass(vue.unref(ns).e("close-btn")),
-                            type: "button",
-                            onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(handleClose) && vue.unref(handleClose)(...args))
+                            class: vue.normalizeClass(vue.unref(ns).e("footer"))
                           }, [
-                            vue.createVNode(vue.unref(ElIcon), {
-                              class: vue.normalizeClass(vue.unref(ns).e("close"))
-                            }, {
-                              default: vue.withCtx(() => [
-                                vue.createVNode(vue.unref(close_default))
-                              ]),
-                              _: 1
-                            }, 8, ["class"])
-                          ], 10, _hoisted_3$a)) : vue.createCommentVNode("v-if", true)
-                        ], 2)) : vue.createCommentVNode("v-if", true),
-                        vue.unref(rendered) ? (vue.openBlock(), vue.createElementBlock("div", {
-                          key: 1,
-                          id: vue.unref(bodyId),
-                          class: vue.normalizeClass(vue.unref(ns).e("body"))
-                        }, [
-                          vue.renderSlot(_ctx.$slots, "default")
-                        ], 10, _hoisted_4$6)) : vue.createCommentVNode("v-if", true),
-                        _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", {
-                          key: 2,
-                          class: vue.normalizeClass(vue.unref(ns).e("footer"))
-                        }, [
-                          vue.renderSlot(_ctx.$slots, "footer")
-                        ], 2)) : vue.createCommentVNode("v-if", true)
-                      ], 16, _hoisted_1$F)
-                    ]),
-                    _: 3
-                  }, 8, ["trapped", "focus-trap-el", "focus-start-el", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
-                ]),
-                _: 3
-              }, 8, ["mask", "overlay-class", "z-index", "onClick"]), [
-                [vue.vShow, vue.unref(visible)]
-              ])
-            ]),
-            _: 3
-          }, 8, ["name", "onAfterEnter", "onAfterLeave", "onBeforeLeave"])
-        ], 8, ["disabled"]);
+                            vue.renderSlot(_ctx.$slots, "footer")
+                          ], 2)) : vue.createCommentVNode("v-if", true)
+                        ], 16, _hoisted_1$F)
+                      ]),
+                      _: 3
+                    }, 8, ["trapped", "focus-trap-el", "focus-start-el", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
+                  ]),
+                  _: 3
+                }, 8, ["mask", "overlay-class", "z-index", "onClick"]), [
+                  [vue.vShow, vue.unref(visible)]
+                ])
+              ]),
+              _: 3
+            }, 8, ["name", "onAfterEnter", "onAfterLeave", "onBeforeLeave"])
+          ]),
+          _: 3
+        }, 8, ["disabled"]);
       };
     }
   });
@@ -31902,143 +31941,146 @@
         setActiveItem
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.Teleport, {
+        return vue.openBlock(), vue.createBlock(vue.unref(ElTeleport$1), {
           to: "body",
           disabled: !_ctx.teleported
-        }, [
-          vue.createVNode(vue.Transition, {
-            name: "viewer-fade",
-            appear: ""
-          }, {
-            default: vue.withCtx(() => [
-              vue.createElementVNode("div", {
-                ref_key: "wrapper",
-                ref: wrapper,
-                tabindex: -1,
-                class: vue.normalizeClass(vue.unref(ns).e("wrapper")),
-                style: vue.normalizeStyle({ zIndex: zIndex.value })
-              }, [
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.Transition, {
+              name: "viewer-fade",
+              appear: ""
+            }, {
+              default: vue.withCtx(() => [
                 vue.createElementVNode("div", {
-                  class: vue.normalizeClass(vue.unref(ns).e("mask")),
-                  onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => _ctx.hideOnClickModal && hide(), ["self"]))
-                }, null, 2),
-                vue.createCommentVNode(" CLOSE "),
-                vue.createElementVNode("span", {
-                  class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("close")]),
-                  onClick: hide
+                  ref_key: "wrapper",
+                  ref: wrapper,
+                  tabindex: -1,
+                  class: vue.normalizeClass(vue.unref(ns).e("wrapper")),
+                  style: vue.normalizeStyle({ zIndex: zIndex.value })
                 }, [
-                  vue.createVNode(vue.unref(ElIcon), null, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(close_default))
-                    ]),
-                    _: 1
-                  })
-                ], 2),
-                vue.createCommentVNode(" ARROW "),
-                !vue.unref(isSingle) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                  vue.createElementVNode("div", {
+                    class: vue.normalizeClass(vue.unref(ns).e("mask")),
+                    onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => _ctx.hideOnClickModal && hide(), ["self"]))
+                  }, null, 2),
+                  vue.createCommentVNode(" CLOSE "),
                   vue.createElementVNode("span", {
-                    class: vue.normalizeClass(vue.unref(arrowPrevKls)),
-                    onClick: prev
+                    class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("close")]),
+                    onClick: hide
                   }, [
                     vue.createVNode(vue.unref(ElIcon), null, {
                       default: vue.withCtx(() => [
-                        vue.createVNode(vue.unref(arrow_left_default))
+                        vue.createVNode(vue.unref(close_default))
                       ]),
                       _: 1
                     })
                   ], 2),
-                  vue.createElementVNode("span", {
-                    class: vue.normalizeClass(vue.unref(arrowNextKls)),
-                    onClick: next
+                  vue.createCommentVNode(" ARROW "),
+                  !vue.unref(isSingle) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                    vue.createElementVNode("span", {
+                      class: vue.normalizeClass(vue.unref(arrowPrevKls)),
+                      onClick: prev
+                    }, [
+                      vue.createVNode(vue.unref(ElIcon), null, {
+                        default: vue.withCtx(() => [
+                          vue.createVNode(vue.unref(arrow_left_default))
+                        ]),
+                        _: 1
+                      })
+                    ], 2),
+                    vue.createElementVNode("span", {
+                      class: vue.normalizeClass(vue.unref(arrowNextKls)),
+                      onClick: next
+                    }, [
+                      vue.createVNode(vue.unref(ElIcon), null, {
+                        default: vue.withCtx(() => [
+                          vue.createVNode(vue.unref(arrow_right_default))
+                        ]),
+                        _: 1
+                      })
+                    ], 2)
+                  ], 64)) : vue.createCommentVNode("v-if", true),
+                  vue.createCommentVNode(" ACTIONS "),
+                  vue.createElementVNode("div", {
+                    class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("actions")])
                   }, [
-                    vue.createVNode(vue.unref(ElIcon), null, {
-                      default: vue.withCtx(() => [
-                        vue.createVNode(vue.unref(arrow_right_default))
-                      ]),
-                      _: 1
-                    })
-                  ], 2)
-                ], 64)) : vue.createCommentVNode("v-if", true),
-                vue.createCommentVNode(" ACTIONS "),
-                vue.createElementVNode("div", {
-                  class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("actions")])
-                }, [
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass(vue.unref(ns).e("actions__inner"))
+                    }, [
+                      vue.createVNode(vue.unref(ElIcon), {
+                        onClick: _cache[1] || (_cache[1] = ($event) => handleActions("zoomOut"))
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createVNode(vue.unref(zoom_out_default))
+                        ]),
+                        _: 1
+                      }),
+                      vue.createVNode(vue.unref(ElIcon), {
+                        onClick: _cache[2] || (_cache[2] = ($event) => handleActions("zoomIn"))
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createVNode(vue.unref(zoom_in_default))
+                        ]),
+                        _: 1
+                      }),
+                      vue.createElementVNode("i", {
+                        class: vue.normalizeClass(vue.unref(ns).e("actions__divider"))
+                      }, null, 2),
+                      vue.createVNode(vue.unref(ElIcon), { onClick: toggleMode }, {
+                        default: vue.withCtx(() => [
+                          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(mode).icon)))
+                        ]),
+                        _: 1
+                      }),
+                      vue.createElementVNode("i", {
+                        class: vue.normalizeClass(vue.unref(ns).e("actions__divider"))
+                      }, null, 2),
+                      vue.createVNode(vue.unref(ElIcon), {
+                        onClick: _cache[3] || (_cache[3] = ($event) => handleActions("anticlockwise"))
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createVNode(vue.unref(refresh_left_default))
+                        ]),
+                        _: 1
+                      }),
+                      vue.createVNode(vue.unref(ElIcon), {
+                        onClick: _cache[4] || (_cache[4] = ($event) => handleActions("clockwise"))
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createVNode(vue.unref(refresh_right_default))
+                        ]),
+                        _: 1
+                      })
+                    ], 2)
+                  ], 2),
+                  vue.createCommentVNode(" CANVAS "),
                   vue.createElementVNode("div", {
-                    class: vue.normalizeClass(vue.unref(ns).e("actions__inner"))
+                    class: vue.normalizeClass(vue.unref(ns).e("canvas"))
                   }, [
-                    vue.createVNode(vue.unref(ElIcon), {
-                      onClick: _cache[1] || (_cache[1] = ($event) => handleActions("zoomOut"))
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createVNode(vue.unref(zoom_out_default))
-                      ]),
-                      _: 1
-                    }),
-                    vue.createVNode(vue.unref(ElIcon), {
-                      onClick: _cache[2] || (_cache[2] = ($event) => handleActions("zoomIn"))
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createVNode(vue.unref(zoom_in_default))
-                      ]),
-                      _: 1
-                    }),
-                    vue.createElementVNode("i", {
-                      class: vue.normalizeClass(vue.unref(ns).e("actions__divider"))
-                    }, null, 2),
-                    vue.createVNode(vue.unref(ElIcon), { onClick: toggleMode }, {
-                      default: vue.withCtx(() => [
-                        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(mode).icon)))
-                      ]),
-                      _: 1
-                    }),
-                    vue.createElementVNode("i", {
-                      class: vue.normalizeClass(vue.unref(ns).e("actions__divider"))
-                    }, null, 2),
-                    vue.createVNode(vue.unref(ElIcon), {
-                      onClick: _cache[3] || (_cache[3] = ($event) => handleActions("anticlockwise"))
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createVNode(vue.unref(refresh_left_default))
-                      ]),
-                      _: 1
-                    }),
-                    vue.createVNode(vue.unref(ElIcon), {
-                      onClick: _cache[4] || (_cache[4] = ($event) => handleActions("clockwise"))
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createVNode(vue.unref(refresh_right_default))
-                      ]),
-                      _: 1
-                    })
-                  ], 2)
-                ], 2),
-                vue.createCommentVNode(" CANVAS "),
-                vue.createElementVNode("div", {
-                  class: vue.normalizeClass(vue.unref(ns).e("canvas"))
-                }, [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.urlList, (url, i) => {
-                    return vue.withDirectives((vue.openBlock(), vue.createElementBlock("img", {
-                      ref_for: true,
-                      ref: (el) => imgRefs.value[i] = el,
-                      key: url,
-                      src: url,
-                      style: vue.normalizeStyle(vue.unref(imgStyle)),
-                      class: vue.normalizeClass(vue.unref(ns).e("img")),
-                      crossorigin: _ctx.crossorigin,
-                      onLoad: handleImgLoad,
-                      onError: handleImgError,
-                      onMousedown: handleMouseDown
-                    }, null, 46, _hoisted_1$A)), [
-                      [vue.vShow, i === activeIndex.value]
-                    ]);
-                  }), 128))
-                ], 2),
-                vue.renderSlot(_ctx.$slots, "default")
-              ], 6)
-            ]),
-            _: 3
-          })
-        ], 8, ["disabled"]);
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.urlList, (url, i) => {
+                      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("img", {
+                        ref_for: true,
+                        ref: (el) => imgRefs.value[i] = el,
+                        key: url,
+                        src: url,
+                        style: vue.normalizeStyle(vue.unref(imgStyle)),
+                        class: vue.normalizeClass(vue.unref(ns).e("img")),
+                        crossorigin: _ctx.crossorigin,
+                        onLoad: handleImgLoad,
+                        onError: handleImgError,
+                        onMousedown: handleMouseDown
+                      }, null, 46, _hoisted_1$A)), [
+                        [vue.vShow, i === activeIndex.value]
+                      ]);
+                    }), 128))
+                  ], 2),
+                  vue.renderSlot(_ctx.$slots, "default")
+                ], 6)
+              ]),
+              _: 3
+            })
+          ]),
+          _: 3
+        }, 8, ["disabled"]);
       };
     }
   });
@@ -40867,6 +40909,11 @@
         emitChange();
       }
     };
+    const onSliderMarkerDown = (position) => {
+      if (sliderDisabled.value || initData.dragging)
+        return;
+      setPosition(position);
+    };
     return {
       elFormItem,
       slider,
@@ -40883,6 +40930,7 @@
       onSliderWrapperPrevent,
       onSliderClick,
       onSliderDown,
+      onSliderMarkerDown,
       setFirstValue,
       setSecondValue
     };
@@ -41371,6 +41419,7 @@
         onSliderWrapperPrevent,
         onSliderClick,
         onSliderDown,
+        onSliderMarkerDown,
         setFirstValue,
         setSecondValue
       } = useSlide(props, initData, emit);
@@ -41530,8 +41579,9 @@
                   return vue.openBlock(), vue.createBlock(vue.unref(SliderMarker), {
                     key,
                     mark: item.mark,
-                    style: vue.normalizeStyle(vue.unref(getStopStyle)(item.position))
-                  }, null, 8, ["mark", "style"]);
+                    style: vue.normalizeStyle(vue.unref(getStopStyle)(item.position)),
+                    onMousedown: vue.withModifiers(($event) => vue.unref(onSliderMarkerDown)(item.position), ["stop"])
+                  }, null, 8, ["mark", "style", "onMousedown"]);
                 }), 128))
               ], 2)
             ], 64)) : vue.createCommentVNode("v-if", true)
@@ -50631,12 +50681,28 @@
               ]),
               _: 3
             }, 16),
-            (vue.openBlock(), vue.createBlock(vue.Teleport, {
+            vue.createVNode(vue.unref(ElTeleport$1), {
               to: _ctx.to,
               disabled: !_ctx.teleported
-            }, [
-              _ctx.fullTransition ? (vue.openBlock(), vue.createBlock(vue.Transition, vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.transitionProps)), {
-                default: vue.withCtx(() => [
+            }, {
+              default: vue.withCtx(() => [
+                _ctx.fullTransition ? (vue.openBlock(), vue.createBlock(vue.Transition, vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.transitionProps)), {
+                  default: vue.withCtx(() => [
+                    _ctx.alwaysOn || open ? (vue.openBlock(), vue.createBlock(TooltipV2Content, vue.normalizeProps(vue.mergeProps({ key: 0 }, contentProps)), {
+                      arrow: vue.withCtx(({ style, side }) => [
+                        _ctx.showArrow ? (vue.openBlock(), vue.createBlock(TooltipV2Arrow, vue.mergeProps({ key: 0 }, arrowProps, {
+                          style,
+                          side
+                        }), null, 16, ["style", "side"])) : vue.createCommentVNode("v-if", true)
+                      ]),
+                      default: vue.withCtx(() => [
+                        vue.renderSlot(_ctx.$slots, "default")
+                      ]),
+                      _: 3
+                    }, 16)) : vue.createCommentVNode("v-if", true)
+                  ]),
+                  _: 2
+                }, 1040)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                   _ctx.alwaysOn || open ? (vue.openBlock(), vue.createBlock(TooltipV2Content, vue.normalizeProps(vue.mergeProps({ key: 0 }, contentProps)), {
                     arrow: vue.withCtx(({ style, side }) => [
                       _ctx.showArrow ? (vue.openBlock(), vue.createBlock(TooltipV2Arrow, vue.mergeProps({ key: 0 }, arrowProps, {
@@ -50649,23 +50715,10 @@
                     ]),
                     _: 3
                   }, 16)) : vue.createCommentVNode("v-if", true)
-                ]),
-                _: 2
-              }, 1040)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                _ctx.alwaysOn || open ? (vue.openBlock(), vue.createBlock(TooltipV2Content, vue.normalizeProps(vue.mergeProps({ key: 0 }, contentProps)), {
-                  arrow: vue.withCtx(({ style, side }) => [
-                    _ctx.showArrow ? (vue.openBlock(), vue.createBlock(TooltipV2Arrow, vue.mergeProps({ key: 0 }, arrowProps, {
-                      style,
-                      side
-                    }), null, 16, ["style", "side"])) : vue.createCommentVNode("v-if", true)
-                  ]),
-                  default: vue.withCtx(() => [
-                    vue.renderSlot(_ctx.$slots, "default")
-                  ]),
-                  _: 3
-                }, 16)) : vue.createCommentVNode("v-if", true)
-              ], 64))
-            ], 8, ["to", "disabled"]))
+                ], 64))
+              ]),
+              _: 2
+            }, 1032, ["to", "disabled"])
           ]),
           _: 3
         }, 16);
@@ -55930,42 +55983,47 @@
         }
       });
       return (_ctx, _cache) => {
-        var _a, _b;
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          (vue.openBlock(), vue.createBlock(vue.Teleport, { to: _ctx.appendTo }, [
-            vue.createElementVNode("div", vue.mergeProps({ class: vue.unref(kls) }, _ctx.$attrs), [
-              vue.createVNode(ElTourMask, {
-                visible: vue.unref(mergedShowMask),
-                fill: (_a = vue.unref(mergedMaskStyle)) == null ? void 0 : _a.color,
-                style: vue.normalizeStyle((_b = vue.unref(mergedMaskStyle)) == null ? void 0 : _b.style),
-                pos: vue.unref(pos),
-                "z-index": vue.unref(mergedZIndex),
-                "target-area-clickable": _ctx.targetAreaClickable
-              }, null, 8, ["visible", "fill", "style", "pos", "z-index", "target-area-clickable"]),
-              _ctx.modelValue ? (vue.openBlock(), vue.createBlock(ElTourContent, {
-                key: vue.unref(current),
-                reference: vue.unref(triggerTarget),
-                placement: vue.unref(mergedPlacement),
-                "show-arrow": vue.unref(mergedShowArrow),
-                "z-index": vue.unref(mergedZIndex),
-                style: vue.normalizeStyle(vue.unref(mergedContentStyle)),
-                onClose: onEscClose
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(ElTourSteps), {
-                    current: vue.unref(current),
-                    onUpdateTotal
+          vue.createVNode(vue.unref(ElTeleport$1), { to: _ctx.appendTo }, {
+            default: vue.withCtx(() => {
+              var _a, _b;
+              return [
+                vue.createElementVNode("div", vue.mergeProps({ class: vue.unref(kls) }, _ctx.$attrs), [
+                  vue.createVNode(ElTourMask, {
+                    visible: vue.unref(mergedShowMask),
+                    fill: (_a = vue.unref(mergedMaskStyle)) == null ? void 0 : _a.color,
+                    style: vue.normalizeStyle((_b = vue.unref(mergedMaskStyle)) == null ? void 0 : _b.style),
+                    pos: vue.unref(pos),
+                    "z-index": vue.unref(mergedZIndex),
+                    "target-area-clickable": _ctx.targetAreaClickable
+                  }, null, 8, ["visible", "fill", "style", "pos", "z-index", "target-area-clickable"]),
+                  _ctx.modelValue ? (vue.openBlock(), vue.createBlock(ElTourContent, {
+                    key: vue.unref(current),
+                    reference: vue.unref(triggerTarget),
+                    placement: vue.unref(mergedPlacement),
+                    "show-arrow": vue.unref(mergedShowArrow),
+                    "z-index": vue.unref(mergedZIndex),
+                    style: vue.normalizeStyle(vue.unref(mergedContentStyle)),
+                    onClose: onEscClose
                   }, {
                     default: vue.withCtx(() => [
-                      vue.renderSlot(_ctx.$slots, "default")
+                      vue.createVNode(vue.unref(ElTourSteps), {
+                        current: vue.unref(current),
+                        onUpdateTotal
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.renderSlot(_ctx.$slots, "default")
+                        ]),
+                        _: 3
+                      }, 8, ["current"])
                     ]),
                     _: 3
-                  }, 8, ["current"])
-                ]),
-                _: 3
-              }, 8, ["reference", "placement", "show-arrow", "z-index", "style"])) : vue.createCommentVNode("v-if", true)
-            ], 16)
-          ], 8, ["to"])),
+                  }, 8, ["reference", "placement", "show-arrow", "z-index", "style"])) : vue.createCommentVNode("v-if", true)
+                ], 16)
+              ];
+            }),
+            _: 3
+          }, 8, ["to"]),
           vue.createCommentVNode(" just for IDE "),
           vue.createCommentVNode("v-if", true)
         ], 64);