naive-ui 2.30.4 → 2.30.5

package/dist/index.js

@@ -848,6 +848,22 @@
       };
     }
 
+    function isNodeVShowFalse(vNode) {
+      const showDir = vNode.dirs?.find(_ref => {
+        let {
+          dir
+        } = _ref;
+        return dir === vue.vShow;
+      });
+      return !!(showDir && showDir.value === false);
+    }
+
+    const Wrapper = vue.defineComponent({
+      render() {
+        return this.$slots.default?.();
+      }
+    });
+
     const pureNumberRegex = /^(\d|\.)+$/;
     const numberRegex = /(\d|\.)+/;
     function formatLength(length) {
@@ -6203,6 +6219,10 @@
       return isDeactivatedRef;
     }
 
+    function isDocument(node) {
+      return node.nodeName === "#document";
+    }
+
     const formItemInjectionKey = createInjectionKey("n-form-item");
     function useFormItem(props) {
       let {
@@ -29561,12 +29581,6 @@
       self: self$19
     };
 
-    const Wrapper = vue.defineComponent({
-      render() {
-        return this.$slots.default?.();
-      }
-    });
-
     const {
       cubicBezierEaseInOut: cubicBezierEaseInOut$3
     } = commonVariables$l;
@@ -33962,14 +33976,16 @@
         const maxTagCountResponsive = maxTagCount === "responsive";
         const maxTagCountNumeric = typeof maxTagCount === "number";
         const useMaxTagCount = maxTagCountResponsive || maxTagCountNumeric;
-        const suffix = /* @__PURE__ */ vue.h(NBaseSuffix, {
-          clsPrefix,
-          loading: this.loading,
-          showArrow: this.showArrow,
-          showClear: this.mergedClearable && this.selected,
-          onClear: this.handleClear
-        }, {
-          default: () => this.$slots.arrow?.()
+        const suffix = /* @__PURE__ */ vue.h(Wrapper, null, {
+          default: () => /* @__PURE__ */ vue.h(NBaseSuffix, {
+            clsPrefix,
+            loading: this.loading,
+            showArrow: this.showArrow,
+            showClear: this.mergedClearable && this.selected,
+            onClear: this.handleClear
+          }, {
+            default: () => this.$slots.arrow?.()
+          })
         });
         let body;
         if (multiple) {
@@ -37296,6 +37312,8 @@
   font-size: var(--n-font-size);
   line-height: var(--n-height);
   height: var(--n-height);
+  flex-shrink: 0;
+  white-space: nowrap;
   transition: 
     color .3s var(--n-bezier),
     background-color .3s var(--n-bezier),
@@ -38332,15 +38350,19 @@
         }
         const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const scrollTopRef = vue.ref(null);
-        const uncontrolledShowRef = vue.computed(() => {
-          if (scrollTopRef.value === null)
-            return false;
-          return scrollTopRef.value >= props.visibilityHeight;
+        const uncontrolledShowRef = vue.ref(false);
+        vue.watchEffect(() => {
+          const { value: scrollTop } = scrollTopRef;
+          if (scrollTop === null) {
+            uncontrolledShowRef.value = false;
+            return;
+          }
+          uncontrolledShowRef.value = scrollTop >= props.visibilityHeight;
         });
         const DomInfoReadyRef = vue.ref(false);
         vue.watch(uncontrolledShowRef, (value) => {
           if (DomInfoReadyRef.value) {
-            props["onUpdate:show"](value);
+            props["onUpdate:show"]?.(value);
           }
         });
         const controlledShowRef = vue.toRef(props, "show");
@@ -38375,36 +38397,23 @@
             }
             return;
           }
-          scrollElement = scrollEl;
+          scrollElement = scrollEl === document.documentElement ? document : scrollEl;
           const { to } = props;
           const target = typeof to === "string" ? document.querySelector(to) : to;
           if (!target) {
             warn$2("back-top", "Target is not found.");
           }
-          if (scrollEl) {
-            scrollEl.addEventListener("scroll", handleScroll);
-            handleScroll();
-          }
+          scrollElement.addEventListener("scroll", handleScroll);
+          handleScroll();
         }
-        function handleClick(e) {
-          if (scrollElement.nodeName === "#document") {
-            scrollElement.documentElement.scrollTo({
-              top: 0,
-              behavior: "smooth"
-            });
-          } else {
-            scrollElement.scrollTo({
-              top: 0,
-              behavior: "smooth"
-            });
-          }
+        function handleClick() {
+          (isDocument(scrollElement) ? document.documentElement : scrollElement).scrollTo({
+            top: 0,
+            behavior: "smooth"
+          });
         }
         function handleScroll() {
-          if (scrollElement.nodeName === "#document") {
-            scrollTopRef.value = scrollElement.documentElement.scrollTop;
-          } else {
-            scrollTopRef.value = scrollElement.scrollTop;
-          }
+          scrollTopRef.value = (isDocument(scrollElement) ? document.documentElement : scrollElement).scrollTop;
           if (!DomInfoReadyRef.value) {
             void vue.nextTick(() => {
               DomInfoReadyRef.value = true;
@@ -58247,22 +58256,20 @@
         mergedTheme: {
           type: Object,
           required: true
-        }
+        },
+        renderCell: Function
       },
       render() {
-        const {
-          isSummary,
-          column: { render, key, ellipsis },
-          row
-        } = this;
+        const { isSummary, column, row, renderCell } = this;
         let cell;
+        const { render, key, ellipsis } = column;
         if (render && !isSummary) {
           cell = render(row, this.index);
         } else {
           if (isSummary) {
             cell = row[key].value;
           } else {
-            cell = lodash.exports.get(row, key);
+            cell = renderCell ? renderCell(lodash.exports.get(row, key), row, column) : lodash.exports.get(row, key);
           }
         }
         if (ellipsis && typeof ellipsis === "object") {
@@ -58456,7 +58463,8 @@
           doUpdateExpandedRowKeys,
           handleTableBodyScroll,
           doCheck,
-          doUncheck
+          doUncheck,
+          renderCell
         } = vue.inject(dataTableInjectionKey);
         const scrollbarInstRef = vue.ref(null);
         const virtualListRef = vue.ref(null);
@@ -58694,6 +58702,7 @@
           handleTableBodyScroll,
           handleCheckboxUpdateChecked,
           handleUpdateExpanded,
+          renderCell,
           ...exposedMethods
         };
       },
@@ -58947,7 +58956,8 @@
                   row: rowData,
                   column,
                   isSummary,
-                  mergedTheme: mergedTheme2
+                  mergedTheme: mergedTheme2,
+                  renderCell: this.renderCell
                 }));
               }));
               return row;
@@ -59181,9 +59191,19 @@
           onUpdateCheckedRowKeys,
           onCheckedRowKeysChange
         } = props;
-        if (_onUpdateCheckedRowKeys) call(_onUpdateCheckedRowKeys, keys);
-        if (onUpdateCheckedRowKeys) call(onUpdateCheckedRowKeys, keys);
-        if (onCheckedRowKeysChange) call(onCheckedRowKeysChange, keys);
+        const rows = [];
+        const {
+          value: {
+            getNode
+          }
+        } = treeMateRef;
+        keys.forEach(key => {
+          const row = getNode(key)?.rawNode;
+          rows.push(row);
+        });
+        if (_onUpdateCheckedRowKeys) call(_onUpdateCheckedRowKeys, keys, rows);
+        if (onUpdateCheckedRowKeys) call(onUpdateCheckedRowKeys, keys, rows);
+        if (onCheckedRowKeysChange) call(onCheckedRowKeysChange, keys, rows);
         uncontrolledCheckedRowKeysRef.value = keys;
       }
 
@@ -60635,6 +60655,7 @@
         type: String,
         default: "current"
       },
+      renderCell: Function,
       onLoad: Function,
       "onUpdate:page": [Function, Array],
       onUpdatePage: [Function, Array],
@@ -60837,7 +60858,8 @@
           doUpdateExpandedRowKeys,
           handleTableHeaderScroll,
           handleTableBodyScroll,
-          setHeaderScrollLeft
+          setHeaderScrollLeft,
+          renderCell: vue.toRef(props, "renderCell")
         });
         const exposedMethods = {
           filter,
@@ -65894,7 +65916,10 @@
     	  var date = (0, _index2.default)(dirtyDate, options);
     	  var offsetMilliseconds = (0, _index.default)(timeZone, date, true);
     	  var d = new Date(date.getTime() - offsetMilliseconds);
-    	  return new Date(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate(), d.getUTCHours(), d.getUTCMinutes(), d.getUTCSeconds(), d.getUTCMilliseconds());
+    	  var resultDate = new Date(0);
+    	  resultDate.setFullYear(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate());
+    	  resultDate.setHours(d.getUTCHours(), d.getUTCMinutes(), d.getUTCSeconds(), d.getUTCMilliseconds());
+    	  return resultDate;
     	}
 
     	module.exports = exports.default;
@@ -73910,10 +73935,18 @@
         type: [String, Number, Array],
         default: "medium"
       },
+      wrapItem: {
+        type: Boolean,
+        default: true
+      },
       itemStyle: [String, Object],
       wrap: {
         type: Boolean,
         default: true
+      },
+      internalUseGap: {
+        type: Boolean,
+        default: void 0
       }
     };
     var NSpace = vue.defineComponent({
@@ -73963,7 +73996,9 @@
           wrap,
           mergedClsPrefix,
           rtlEnabled,
-          useGap
+          useGap,
+          wrapItem,
+          internalUseGap
         } = this;
         const children = flatten$3(getSlot$1(this));
         if (!children.length)
@@ -73990,7 +74025,7 @@
             alignItems: align,
             gap: useGap ? `${margin.vertical}px ${margin.horizontal}px` : ""
           }
-        }, children.map((child, index) => /* @__PURE__ */ vue.h("div", {
+        }, !wrapItem && (useGap || internalUseGap) ? children : children.map((child, index) => /* @__PURE__ */ vue.h("div", {
           role: "none",
           style: [
             itemStyle,
@@ -74531,7 +74566,7 @@
     });
 
     function _extends() {
-      _extends = Object.assign || function (target) {
+      _extends = Object.assign ? Object.assign.bind() : function (target) {
         for (var i = 1; i < arguments.length; i++) {
           var source = arguments[i];
 
@@ -74544,7 +74579,6 @@
 
         return target;
       };
-
       return _extends.apply(this, arguments);
     }
 
@@ -74556,18 +74590,17 @@
     }
 
     function _getPrototypeOf(o) {
-      _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+      _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
         return o.__proto__ || Object.getPrototypeOf(o);
       };
       return _getPrototypeOf(o);
     }
 
     function _setPrototypeOf(o, p) {
-      _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
       };
-
       return _setPrototypeOf(o, p);
     }
 
@@ -74586,7 +74619,7 @@
 
     function _construct(Parent, args, Class) {
       if (_isNativeReflectConstruct()) {
-        _construct = Reflect.construct;
+        _construct = Reflect.construct.bind();
       } else {
         _construct = function _construct(Parent, args, Class) {
           var a = [null];
@@ -74940,6 +74973,54 @@
       if (/^\s+$/.test(value) || value === '') {
         errors.push(format$1(options.messages.whitespace, rule.fullField));
       }
+    }; // https://github.com/kevva/url-regex/blob/master/index.js
+
+
+    var urlReg;
+
+    var getUrlRegex = function () {
+      if (urlReg) {
+        return urlReg;
+      }
+
+      var word = '[a-fA-F\\d:]';
+
+      var b = function b(options) {
+        return options && options.includeBoundaries ? "(?:(?<=\\s|^)(?=" + word + ")|(?<=" + word + ")(?=\\s|$))" : '';
+      };
+
+      var v4 = '(?:25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]\\d|\\d)(?:\\.(?:25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]\\d|\\d)){3}';
+      var v6seg = '[a-fA-F\\d]{1,4}';
+      var v6 = ("\n(?:\n(?:" + v6seg + ":){7}(?:" + v6seg + "|:)|                                    // 1:2:3:4:5:6:7::  1:2:3:4:5:6:7:8\n(?:" + v6seg + ":){6}(?:" + v4 + "|:" + v6seg + "|:)|                             // 1:2:3:4:5:6::    1:2:3:4:5:6::8   1:2:3:4:5:6::8  1:2:3:4:5:6::1.2.3.4\n(?:" + v6seg + ":){5}(?::" + v4 + "|(?::" + v6seg + "){1,2}|:)|                   // 1:2:3:4:5::      1:2:3:4:5::7:8   1:2:3:4:5::8    1:2:3:4:5::7:1.2.3.4\n(?:" + v6seg + ":){4}(?:(?::" + v6seg + "){0,1}:" + v4 + "|(?::" + v6seg + "){1,3}|:)| // 1:2:3:4::        1:2:3:4::6:7:8   1:2:3:4::8      1:2:3:4::6:7:1.2.3.4\n(?:" + v6seg + ":){3}(?:(?::" + v6seg + "){0,2}:" + v4 + "|(?::" + v6seg + "){1,4}|:)| // 1:2:3::          1:2:3::5:6:7:8   1:2:3::8        1:2:3::5:6:7:1.2.3.4\n(?:" + v6seg + ":){2}(?:(?::" + v6seg + "){0,3}:" + v4 + "|(?::" + v6seg + "){1,5}|:)| // 1:2::            1:2::4:5:6:7:8   1:2::8          1:2::4:5:6:7:1.2.3.4\n(?:" + v6seg + ":){1}(?:(?::" + v6seg + "){0,4}:" + v4 + "|(?::" + v6seg + "){1,6}|:)| // 1::              1::3:4:5:6:7:8   1::8            1::3:4:5:6:7:1.2.3.4\n(?::(?:(?::" + v6seg + "){0,5}:" + v4 + "|(?::" + v6seg + "){1,7}|:))             // ::2:3:4:5:6:7:8  ::2:3:4:5:6:7:8  ::8             ::1.2.3.4\n)(?:%[0-9a-zA-Z]{1,})?                                             // %eth0            %1\n").replace(/\s*\/\/.*$/gm, '').replace(/\n/g, '').trim(); // Pre-compile only the exact regexes because adding a global flag make regexes stateful
+
+      var v46Exact = new RegExp("(?:^" + v4 + "$)|(?:^" + v6 + "$)");
+      var v4exact = new RegExp("^" + v4 + "$");
+      var v6exact = new RegExp("^" + v6 + "$");
+
+      var ip = function ip(options) {
+        return options && options.exact ? v46Exact : new RegExp("(?:" + b(options) + v4 + b(options) + ")|(?:" + b(options) + v6 + b(options) + ")", 'g');
+      };
+
+      ip.v4 = function (options) {
+        return options && options.exact ? v4exact : new RegExp("" + b(options) + v4 + b(options), 'g');
+      };
+
+      ip.v6 = function (options) {
+        return options && options.exact ? v6exact : new RegExp("" + b(options) + v6 + b(options), 'g');
+      };
+
+      var protocol = "(?:(?:[a-z]+:)?//)";
+      var auth = '(?:\\S+(?::\\S*)?@)?';
+      var ipv4 = ip.v4().source;
+      var ipv6 = ip.v6().source;
+      var host = "(?:(?:[a-z\\u00a1-\\uffff0-9][-_]*)*[a-z\\u00a1-\\uffff0-9]+)";
+      var domain = "(?:\\.(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)*";
+      var tld = "(?:\\.(?:[a-z\\u00a1-\\uffff]{2,}))";
+      var port = '(?::\\d{2,5})?';
+      var path = '(?:[/?#][^\\s"]*)?';
+      var regex = "(?:" + protocol + "|www\\.)" + auth + "(?:localhost|" + ipv4 + "|" + ipv6 + "|" + host + domain + tld + ")" + port + path;
+      urlReg = new RegExp("(?:^" + regex + "$)", 'i');
+      return urlReg;
     };
     /* eslint max-len:0 */
 
@@ -74947,7 +75028,10 @@
     var pattern$2 = {
       // http://emailregex.com/
       email: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+\.)+[a-zA-Z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]{2,}))$/,
-      url: new RegExp("^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$", 'i'),
+      // url: new RegExp(
+      //   '^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$',
+      //   'i',
+      // ),
       hex: /^#?([a-f0-9]{6}|[a-f0-9]{3})$/i
     };
     var types = {
@@ -74991,7 +75075,7 @@
         return typeof value === 'string' && value.length <= 320 && !!value.match(pattern$2.email);
       },
       url: function url(value) {
-        return typeof value === 'string' && value.length <= 2048 && !!value.match(pattern$2.url);
+        return typeof value === 'string' && value.length <= 2048 && !!value.match(getUrlRegex());
       },
       hex: function hex(value) {
         return typeof value === 'string' && !!value.match(pattern$2.hex);
@@ -75737,9 +75821,12 @@
             } catch (error) {
               console.error == null ? void 0 : console.error(error); // rethrow to report error
 
-              setTimeout(function () {
-                throw error;
-              }, 0);
+              if (!options.suppressValidatorError) {
+                setTimeout(function () {
+                  throw error;
+                }, 0);
+              }
+
               cb(error.message);
             }
 
@@ -77177,6 +77264,20 @@
           rawChildren.forEach((child) => {
             if (child?.type?.__GRID_ITEM__ !== true)
               return;
+            if (isNodeVShowFalse(child)) {
+              const clonedNode = vue.cloneVNode(child);
+              if (clonedNode.props) {
+                clonedNode.props.privateShow = false;
+              } else {
+                clonedNode.props = { pirvateShow: false };
+              }
+              childrenAndRawSpan.push({
+                child: clonedNode,
+                rawChildSpan: 0
+              });
+              return;
+            }
+            child.dirs = child.dirs?.filter(({ dir }) => dir !== vue.vShow) || null;
             const clonedChild = vue.cloneVNode(child);
             const rawChildSpan = Number(parseResponsivePropValue(clonedChild.props?.span, responsiveQuery) ?? defaultSpan$1);
             if (rawChildSpan === 0)
@@ -77194,7 +77295,7 @@
               suffixSpan = maybeSuffixNode.props?.span ?? defaultSpan$1;
               maybeSuffixNode.props.privateSpan = suffixSpan;
               maybeSuffixNode.props.privateColStart = responsiveCols + 1 - suffixSpan;
-              maybeSuffixNode.props.privateShow = true;
+              maybeSuffixNode.props.privateShow = maybeSuffixNode.props.privateShow ?? true;
             }
           }
           let spanCounter = 0;
@@ -77205,7 +77306,7 @@
             }
             if (!done) {
               const childOffset = Number(parseResponsivePropValue(child.props?.offset, responsiveQuery) ?? 0);
-              const childSpan = Math.min(rawChildSpan + childOffset, responsiveCols) || 1;
+              const childSpan = Math.min(rawChildSpan + childOffset, responsiveCols);
               if (!child.props) {
                 child.props = {
                   privateSpan: childSpan,
@@ -79857,10 +79958,103 @@
       }
     });
 
+    const resolveOptionsAndHash = function () {
+      let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      const {
+        root = null
+      } = options;
+      return {
+        hash: `${options.rootMargin || "0px 0px 0px 0px"}-${Array.isArray(options.threshold) ? options.threshold.join(",") : options.threshold ?? "0"}`,
+        options: { ...options,
+          root: (typeof root === "string" ? document.querySelector(root) : root) || document.documentElement
+        }
+      };
+    };
+    const observers = /* @__PURE__ */new WeakMap();
+    const unobserveHandleMap = /* @__PURE__ */new WeakMap();
+    const shouldStartLoadingRefMap = /* @__PURE__ */new WeakMap();
+    const observeIntersection = (el, options, shouldStartLoadingRef) => {
+      if (!el) return () => {};
+      const resolvedOptionsAndHash = resolveOptionsAndHash(options);
+      const {
+        root
+      } = resolvedOptionsAndHash.options;
+      let rootObservers;
+
+      const _rootObservers = observers.get(root);
+
+      if (_rootObservers) {
+        rootObservers = _rootObservers;
+      } else {
+        rootObservers = /* @__PURE__ */new Map();
+        observers.set(root, rootObservers);
+      }
+
+      let observer;
+      let observerAndObservedElements;
+
+      if (rootObservers.has(resolvedOptionsAndHash.hash)) {
+        observerAndObservedElements = rootObservers.get(resolvedOptionsAndHash.hash);
+
+        if (!observerAndObservedElements[1].has(el)) {
+          observer = observerAndObservedElements[0];
+          observerAndObservedElements[1].add(el);
+          observer.observe(el);
+        }
+      } else {
+        observer = new IntersectionObserver(entries => {
+          entries.forEach(entry => {
+            if (entry.isIntersecting) {
+              const _unobserve = unobserveHandleMap.get(entry.target);
+
+              const _shouldStartLoadingRef = shouldStartLoadingRefMap.get(entry.target);
+
+              if (_unobserve) _unobserve();
+
+              if (_shouldStartLoadingRef) {
+                _shouldStartLoadingRef.value = true;
+              }
+            }
+          });
+        }, resolvedOptionsAndHash.options);
+        observer.observe(el);
+        observerAndObservedElements = [observer, /* @__PURE__ */new Set([el])];
+        rootObservers.set(resolvedOptionsAndHash.hash, observerAndObservedElements);
+      }
+
+      let unobservered = false;
+
+      const unobserve = () => {
+        if (unobservered) return;
+        unobserveHandleMap.delete(el);
+        shouldStartLoadingRefMap.delete(el);
+        unobservered = true;
+
+        if (observerAndObservedElements[1].has(el)) {
+          observerAndObservedElements[0].unobserve(el);
+          observerAndObservedElements[1].delete(el);
+        }
+
+        if (observerAndObservedElements[1].size <= 0) {
+          rootObservers.delete(resolvedOptionsAndHash.hash);
+        }
+
+        if (!rootObservers.size) {
+          observers.delete(root);
+        }
+      };
+
+      unobserveHandleMap.set(el, unobserve);
+      shouldStartLoadingRefMap.set(el, shouldStartLoadingRef);
+      return unobserve;
+    };
+
     const imageProps = {
       alt: String,
       height: [String, Number],
       imgProps: Object,
+      lazy: Boolean,
+      intersectionObserverOptions: Object,
       objectFit: {
         type: String,
         default: "fill"
@@ -79905,14 +80099,30 @@
             previewInst.toggleShow();
           }
         };
+        const shouldStartLoadingRef = vue.ref(!props.lazy);
         vue.onMounted(() => {
           imageRef.value?.setAttribute("data-group-id", imageGroupHandle?.groupId || "");
         });
+        vue.onMounted(() => {
+          let unobserve;
+          const stopWatchHandle = vue.watchEffect(() => {
+            unobserve?.();
+            unobserve = void 0;
+            if (props.lazy) {
+              unobserve = observeIntersection(imageRef.value, props.intersectionObserverOptions, shouldStartLoadingRef);
+            }
+          });
+          vue.onBeforeUnmount(() => {
+            stopWatchHandle();
+            unobserve?.();
+          });
+        });
         vue.watchEffect(() => {
           void props.src;
           void props.imgProps?.src;
           showErrorRef.value = false;
         });
+        const loadedRef = vue.ref(false);
         return {
           mergedClsPrefix: mergedClsPrefixRef,
           groupId: imageGroupHandle?.groupId,
@@ -79920,6 +80130,8 @@
           imageRef,
           imgProps: imgPropsRef,
           showError: showErrorRef,
+          shouldStartLoading: shouldStartLoadingRef,
+          loaded: loadedRef,
           mergedOnError: (e) => {
             showErrorRef.value = true;
             const { onError, imgProps: { onError: imgPropsOnError } = {} } = props;
@@ -79930,25 +80142,31 @@
             const { onLoad, imgProps: { onLoad: imgPropsOnLoad } = {} } = props;
             onLoad?.(e);
             imgPropsOnLoad?.(e);
+            loadedRef.value = true;
           },
           ...exposedMethods
         };
       },
       render() {
-        const { mergedClsPrefix, imgProps = {}, $attrs } = this;
+        const { mergedClsPrefix, imgProps = {}, loaded, $attrs } = this;
+        const placeholderNode = this.$slots.placeholder?.();
         const imgNode = /* @__PURE__ */ vue.h("img", {
           ...imgProps,
           class: imgProps.class,
           ref: "imageRef",
           width: this.width || imgProps.width,
           height: this.height || imgProps.height,
-          src: this.showError ? this.fallbackSrc : this.src || imgProps.src,
+          src: this.showError ? this.fallbackSrc : this.shouldStartLoading ? this.src || imgProps.src : void 0,
           alt: this.alt || imgProps.alt,
           "aria-label": this.alt || imgProps.alt,
           onClick: this.click,
           onError: this.mergedOnError,
           onLoad: this.mergedOnLoad,
-          style: [imgProps.style || "", { objectFit: this.objectFit }],
+          style: [
+            imgProps.style || "",
+            placeholderNode && !loaded ? { height: "0", width: "0", visibility: "hidden" } : "",
+            { objectFit: this.objectFit }
+          ],
           "data-error": this.showError,
           "data-preview-src": this.previewSrc || this.src
         });
@@ -79969,7 +80187,7 @@
           showToolbarTooltip: this.showToolbarTooltip
         }, {
           default: () => imgNode
-        }));
+        }), !loaded && placeholderNode);
       }
     });
 
@@ -96390,7 +96608,7 @@
         createDiscreteApi: createDiscreteApi
     });
 
-    var version = "2.30.4";
+    var version = "2.30.5";
 
     function create() {
       let {