element-plus 2.10.5 → 2.10.6

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v2.10.5 */
+/*! Element Plus v2.10.6 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -757,6 +757,65 @@
     };
   }
 
+  function useIntersectionObserver(target, callback, options = {}) {
+    const {
+      root,
+      rootMargin = "0px",
+      threshold = 0.1,
+      window = defaultWindow,
+      immediate = true
+    } = options;
+    const isSupported = useSupported(() => window && "IntersectionObserver" in window);
+    const targets = vue.computed(() => {
+      const _target = toValue(target);
+      return (Array.isArray(_target) ? _target : [_target]).map(unrefElement).filter(notNullish);
+    });
+    let cleanup = noop$1;
+    const isActive = vue.ref(immediate);
+    const stopWatch = isSupported.value ? vue.watch(
+      () => [targets.value, unrefElement(root), isActive.value],
+      ([targets2, root2]) => {
+        cleanup();
+        if (!isActive.value)
+          return;
+        if (!targets2.length)
+          return;
+        const observer = new IntersectionObserver(
+          callback,
+          {
+            root: unrefElement(root2),
+            rootMargin,
+            threshold
+          }
+        );
+        targets2.forEach((el) => el && observer.observe(el));
+        cleanup = () => {
+          observer.disconnect();
+          cleanup = noop$1;
+        };
+      },
+      { immediate, flush: "post" }
+    ) : noop$1;
+    const stop = () => {
+      cleanup();
+      stopWatch();
+      isActive.value = false;
+    };
+    tryOnScopeDispose(stop);
+    return {
+      isSupported,
+      isActive,
+      pause() {
+        cleanup();
+        isActive.value = false;
+      },
+      resume() {
+        isActive.value = true;
+      },
+      stop
+    };
+  }
+
   function useVModel(props, key, emit, options = {}) {
     var _a, _b, _c;
     const {
@@ -868,23 +927,6 @@
 
   const isFirefox = () => isClient && /firefox/i.test(window.navigator.userAgent);
 
-  const isInContainer = (el, container) => {
-    if (!isClient || !el || !container)
-      return false;
-    const elRect = el.getBoundingClientRect();
-    let containerRect;
-    if (container instanceof Element) {
-      containerRect = container.getBoundingClientRect();
-    } else {
-      containerRect = {
-        top: 0,
-        right: window.innerWidth,
-        bottom: window.innerHeight,
-        left: 0
-      };
-    }
-    return elRect.top < containerRect.bottom && elRect.bottom > containerRect.top && elRect.right > containerRect.left && elRect.left < containerRect.right;
-  };
   const getOffsetTop = (el) => {
     let offset = 0;
     let parent = el;
@@ -8939,6 +8981,17 @@
     });
     return result;
   };
+  function ensureValidVNode(vnodes) {
+    return vnodes.some((child) => {
+      if (!vue.isVNode(child))
+        return true;
+      if (child.type === vue.Comment)
+        return false;
+      if (child.type === vue.Fragment && !ensureValidVNode(child.children))
+        return false;
+      return true;
+    }) ? vnodes : null;
+  }
 
   const unique = (arr) => [...new Set(arr)];
   const castArray = (arr) => {
@@ -11832,7 +11885,7 @@
 
   const ElConfigProvider = withInstall(ConfigProvider);
 
-  const version$1 = "2.10.5";
+  const version$1 = "2.10.6";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -17042,6 +17095,14 @@
               }),
               role: "region"
             }, [
+              _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                class: vue.normalizeClass(vue.unref(ns).be("suggestion", "header")),
+                onClick: vue.withModifiers(() => {
+                }, ["stop"])
+              }, [
+                vue.renderSlot(_ctx.$slots, "header")
+              ], 10, ["onClick"])) : vue.createCommentVNode("v-if", true),
               vue.createVNode(vue.unref(ElScrollbar), {
                 id: vue.unref(listboxId),
                 tag: "ul",
@@ -17077,7 +17138,15 @@
                   }), 128))
                 ]),
                 _: 3
-              }, 8, ["id", "wrap-class", "view-class"])
+              }, 8, ["id", "wrap-class", "view-class"]),
+              _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 1,
+                class: vue.normalizeClass(vue.unref(ns).be("suggestion", "footer")),
+                onClick: vue.withModifiers(() => {
+                }, ["stop"])
+              }, [
+                vue.renderSlot(_ctx.$slots, "footer")
+              ], 10, ["onClick"])) : vue.createCommentVNode("v-if", true)
             ], 6)
           ]),
           default: vue.withCtx(() => [
@@ -29031,10 +29100,15 @@
       }
     }, { immediate: true });
     vue.watch(() => props.parsedValue, (parsedValue) => {
-      if (!props.visible || !(parsedValue == null ? void 0 : parsedValue.length)) {
+      if (!(parsedValue == null ? void 0 : parsedValue.length)) {
         onReset(parsedValue);
       }
     }, { immediate: true });
+    vue.watch(() => props.visible, () => {
+      if (props.visible) {
+        onReset(props.parsedValue);
+      }
+    }, { immediate: true });
     return {
       minDate,
       maxDate,
@@ -29160,6 +29234,7 @@
       const { lang } = useLocale();
       const leftDate = vue.ref(dayjs().locale(lang.value));
       const rightDate = vue.ref(dayjs().locale(lang.value).add(1, unit$2));
+      let shouldBeVisible = true;
       const {
         minDate,
         maxDate,
@@ -29332,12 +29407,16 @@
         emit("calendar-change", [min_.toDate(), max_ && max_.toDate()]);
         maxDate.value = maxDate_;
         minDate.value = minDate_;
-        handleRangeConfirm(close);
+        if (!showTime.value && close) {
+          close = !minDate_ || !maxDate_;
+        }
+        shouldBeVisible = close;
       };
-      vue.watch([maxDate, minDate], ([min, max]) => {
-        if (min && max)
-          handleRangeConfirm(true);
-      }, { flush: "post" });
+      vue.watch([maxDate, minDate], ([max, min]) => {
+        if (max && min) {
+          handleRangeConfirm(shouldBeVisible);
+        }
+      });
       const minTimePickerVisible = vue.ref(false);
       const maxTimePickerVisible = vue.ref(false);
       const handleMinTimeClose = () => {
@@ -33719,8 +33798,8 @@
         hasLoadError.value = true;
         emit("error", event);
       }
-      function handleLazyLoad() {
-        if (isInContainer(container.value, _scrollContainer.value)) {
+      function handleLazyLoad(isIntersecting) {
+        if (isIntersecting) {
           loadImage();
           removeLazyLoadListener();
         }
@@ -33737,18 +33816,20 @@
         } else if (isString$1(scrollContainer) && scrollContainer !== "") {
           _scrollContainer.value = (_a = document.querySelector(scrollContainer)) != null ? _a : void 0;
         } else if (container.value) {
-          _scrollContainer.value = getScrollContainer(container.value);
-        }
-        if (_scrollContainer.value) {
-          stopScrollListener = useEventListener(_scrollContainer, "scroll", lazyLoadHandler);
-          setTimeout(() => handleLazyLoad(), 100);
+          const scrollContainer2 = getScrollContainer(container.value);
+          _scrollContainer.value = isWindow$1(scrollContainer2) ? void 0 : scrollContainer2;
         }
+        const { stop } = useIntersectionObserver(container, ([entry]) => {
+          lazyLoadHandler(entry.isIntersecting);
+        }, { root: _scrollContainer });
+        stopScrollListener = stop;
       }
       function removeLazyLoadListener() {
-        if (!isClient || !_scrollContainer.value || !lazyLoadHandler)
+        if (!isClient || !lazyLoadHandler)
           return;
         stopScrollListener == null ? void 0 : stopScrollListener();
         _scrollContainer.value = void 0;
+        stopScrollListener = void 0;
       }
       function clickHandler() {
         if (!preview.value)
@@ -42890,10 +42971,12 @@
               name: "header",
               fn: vue.withCtx(() => [
                 vue.createElementVNode("div", {
-                  class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "header"))
+                  class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "header")),
+                  onClick: vue.withModifiers(() => {
+                  }, ["stop"])
                 }, [
                   vue.renderSlot(_ctx.$slots, "header")
-                ], 2)
+                ], 10, ["onClick"])
               ])
             } : void 0,
             _ctx.$slots.loading && _ctx.loading ? {
@@ -42921,10 +43004,12 @@
               name: "footer",
               fn: vue.withCtx(() => [
                 vue.createElementVNode("div", {
-                  class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "footer"))
+                  class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "footer")),
+                  onClick: vue.withModifiers(() => {
+                  }, ["stop"])
                 }, [
                   vue.renderSlot(_ctx.$slots, "footer")
-                ], 2)
+                ], 10, ["onClick"])
               ])
             } : void 0
           ]), 1032, ["data", "width", "hovering-index", "scrollbar-always-on"])
@@ -49456,7 +49541,7 @@
           let children = null;
           if (slots.default) {
             const vnodes = slots.default(data);
-            children = vnodes.some((v) => v.type !== vue.Comment) ? vnodes : originRenderCell(data);
+            children = ensureValidVNode(vnodes) ? vnodes : originRenderCell(data);
           } else {
             children = originRenderCell(data);
           }
@@ -57977,6 +58062,13 @@
   };
 
   const FontGap = 3;
+  const TEXT_ALIGN_RATIO_MAP = {
+    left: [0, 0.5],
+    start: [0, 0.5],
+    center: [0.5, 0],
+    right: [1, -0.5],
+    end: [1, -0.5]
+  };
   function prepareCanvas(width, height, ratio = 1) {
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
@@ -57988,7 +58080,7 @@
     return [ctx, canvas, realWidth, realHeight];
   }
   function useClips() {
-    function getClips(content, rotate, ratio, width, height, font, gapX, gapY) {
+    function getClips(content, rotate, ratio, width, height, font, gapX, gapY, space) {
       const [ctx, canvas, contentWidth, contentHeight] = prepareCanvas(width, height, ratio);
       if (content instanceof HTMLImageElement) {
         ctx.drawImage(content, 0, 0, contentWidth, contentHeight);
@@ -58009,7 +58101,8 @@
         ctx.textBaseline = textBaseline;
         const contents = isArray$1(content) ? content : [content];
         contents == null ? void 0 : contents.forEach((item, index) => {
-          ctx.fillText(item != null ? item : "", contentWidth / 2, index * (mergedFontSize + FontGap * ratio));
+          const [alignRatio, spaceRatio] = TEXT_ALIGN_RATIO_MAP[textAlign];
+          ctx.fillText(item != null ? item : "", contentWidth * alignRatio + space * spaceRatio, index * (mergedFontSize + FontGap * ratio));
         });
       }
       const angle = Math.PI / 180 * Number(rotate);
@@ -58168,6 +58261,7 @@
       const getMarkSize = (ctx) => {
         let defaultWidth = 120;
         let defaultHeight = 64;
+        let space = 0;
         const { image, content, width, height, rotate } = props;
         if (!image && ctx.measureText) {
           ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`;
@@ -58191,10 +58285,10 @@
           defaultWidth = maxWidth;
           defaultHeight = maxHeight * contents.length + (contents.length - 1) * FontGap;
           const angle = Math.PI / 180 * Number(rotate);
-          const space = Math.ceil(Math.abs(Math.sin(angle) * defaultHeight) / 2);
+          space = Math.ceil(Math.abs(Math.sin(angle) * defaultHeight) / 2);
           defaultWidth += space;
         }
-        return [width != null ? width : defaultWidth, height != null ? height : defaultHeight];
+        return [width != null ? width : defaultWidth, height != null ? height : defaultHeight, space];
       };
       const getClips = useClips();
       const renderWatermark = () => {
@@ -58208,7 +58302,7 @@
             watermarkRef.value = document.createElement("div");
           }
           const ratio = getPixelRatio();
-          const [markWidth, markHeight] = getMarkSize(ctx);
+          const [markWidth, markHeight, space] = getMarkSize(ctx);
           const drawCanvas = (drawContent) => {
             const [textClips, clipWidth] = getClips(drawContent || "", rotate, ratio, markWidth, markHeight, {
               color: color.value,
@@ -58218,7 +58312,7 @@
               fontFamily: fontFamily.value,
               textAlign: textAlign.value,
               textBaseline: textBaseline.value
-            }, gapX.value, gapY.value);
+            }, gapX.value, gapY.value, space);
             appendWatermark(textClips, clipWidth);
           };
           if (image) {
@@ -58531,13 +58625,20 @@
         const _radius = radius.value;
         return props.pos ? `${_path} M${props.pos.left + _radius},${props.pos.top} h${props.pos.width - _radius * 2} ${info.topRight} v${props.pos.height - _radius * 2} ${info.bottomRight} h${-props.pos.width + _radius * 2} ${info.bottomLeft} v${-props.pos.height + _radius * 2} ${info.topLeft} z` : _path;
       });
-      const pathStyle = vue.computed(() => {
-        return {
-          fill: props.fill,
-          pointerEvents: "auto",
-          cursor: "auto"
-        };
-      });
+      const maskStyle = vue.computed(() => ({
+        position: "fixed",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        zIndex: props.zIndex,
+        pointerEvents: props.pos && props.targetAreaClickable ? "none" : "auto"
+      }));
+      const pathStyle = vue.computed(() => ({
+        fill: props.fill,
+        pointerEvents: "auto",
+        cursor: "auto"
+      }));
       useLockscreen(vue.toRef(props, "visible"), {
         ns
       });
@@ -58545,15 +58646,7 @@
         return _ctx.visible ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
           key: 0,
           class: vue.unref(ns).e("mask"),
-          style: {
-            position: "fixed",
-            left: 0,
-            right: 0,
-            top: 0,
-            bottom: 0,
-            zIndex: _ctx.zIndex,
-            pointerEvents: _ctx.pos && _ctx.targetAreaClickable ? "none" : "auto"
-          }
+          style: vue.unref(maskStyle)
         }, _ctx.$attrs), [
           (vue.openBlock(), vue.createElementBlock("svg", { style: {
             width: "100%",
@@ -60490,7 +60583,8 @@
     setup(__props, { emit: emits }) {
       const props = __props;
       const ns = useNamespace("splitter");
-      const { containerEl, containerSize } = useContainer(vue.toRef(props, "layout"));
+      const layout = vue.toRef(props, "layout");
+      const { containerEl, containerSize } = useContainer(layout);
       const {
         removeChild: unregisterPanel,
         children: panels,
@@ -60524,7 +60618,7 @@
         panels,
         percentSizes,
         pxSizes,
-        layout: props.layout,
+        layout,
         movingIndex,
         containerSize,
         onMoveStart: onResizeStart,
@@ -60538,14 +60632,14 @@
         return vue.openBlock(), vue.createElementBlock("div", {
           ref_key: "containerEl",
           ref: containerEl,
-          class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(ns).e(_ctx.layout)])
+          class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(ns).e(vue.unref(layout))])
         }, [
           vue.renderSlot(_ctx.$slots, "default"),
           vue.createVNode(vue.unref(PanelsSorter)),
           vue.createCommentVNode(" Prevent iframe touch events from breaking "),
           vue.unref(movingIndex) ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
-            class: vue.normalizeClass([vue.unref(ns).e("mask"), vue.unref(ns).e(`mask-${_ctx.layout}`)])
+            class: vue.normalizeClass([vue.unref(ns).e("mask"), vue.unref(ns).e(`mask-${vue.unref(layout)}`)])
           }, null, 2)) : vue.createCommentVNode("v-if", true)
         ], 2);
       };
@@ -62178,13 +62272,9 @@
                           vue.renderSlot(_ctx.$slots, "default", {}, () => [
                             !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.showInput ? "label" : "p"), {
                               key: 0,
-                              for: _ctx.showInput ? _ctx.inputId : void 0
-                            }, {
-                              default: vue.withCtx(() => [
-                                vue.createTextVNode(vue.toDisplayString(!_ctx.dangerouslyUseHTMLString ? _ctx.message : ""), 1)
-                              ]),
-                              _: 1
-                            }, 8, ["for"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.showInput ? "label" : "p"), {
+                              for: _ctx.showInput ? _ctx.inputId : void 0,
+                              textContent: vue.toDisplayString(_ctx.message)
+                            }, null, 8, ["for", "textContent"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.showInput ? "label" : "p"), {
                               key: 1,
                               for: _ctx.showInput ? _ctx.inputId : void 0,
                               innerHTML: _ctx.message