vant 4.8.1 → 4.8.3

package/lib/vant.es.js

@@ -116,6 +116,22 @@ function isHidden(elementRef) {
   return hidden || parentHidden;
 }
 const { width: windowWidth, height: windowHeight } = useWindowSize();
+function isContainingBlock(el) {
+  const css = window.getComputedStyle(el);
+  return css.transform !== "none" || css.perspective !== "none" || ["transform", "perspective", "filter"].some(
+    (value) => (css.willChange || "").includes(value)
+  );
+}
+function getContainingBlock(el) {
+  let node = el.parentElement;
+  while (node) {
+    if (node && node.tagName !== "HTML" && node.tagName !== "BODY" && isContainingBlock(node)) {
+      return node;
+    }
+    node = node.parentElement;
+  }
+  return null;
+}
 function addUnit(value) {
   if (isDef(value)) {
     return isNumeric(value) ? `${value}px` : String(value);
@@ -2113,7 +2129,7 @@ var stdin_default$1G = defineComponent({
         if (container) {
           const containerRect = useRect(container);
           const difference = containerRect.bottom - offset.value - state.height;
-          state.fixed = offset.value > rootRect.top && containerRect.bottom > 0;
+          state.fixed = offset.value >= rootRect.top && containerRect.bottom > 0;
           state.transform = difference < 0 ? difference : 0;
         } else {
           state.fixed = offset.value > rootRect.top;
@@ -4546,7 +4562,7 @@ function lockClick(lock) {
   }
 }
 const [name$1k, bem$1g] = createNamespace("toast");
-const popupInheritProps = ["show", "overlay", "teleport", "transition", "overlayClass", "overlayStyle", "closeOnClickOverlay"];
+const popupInheritProps$1 = ["show", "overlay", "teleport", "transition", "overlayClass", "overlayStyle", "closeOnClickOverlay", "zIndex"];
 const toastProps = {
   icon: String,
   show: Boolean,
@@ -4566,7 +4582,8 @@ const toastProps = {
   overlayClass: unknownProp,
   overlayStyle: Object,
   closeOnClick: Boolean,
-  closeOnClickOverlay: Boolean
+  closeOnClickOverlay: Boolean,
+  zIndex: numericProp
 };
 var stdin_default$1u = defineComponent({
   name: name$1k,
@@ -4656,7 +4673,7 @@ var stdin_default$1u = defineComponent({
       "onClick": onClick,
       "onClosed": clearTimer,
       "onUpdate:show": updateShow
-    }, pick(props2, popupInheritProps)), {
+    }, pick(props2, popupInheritProps$1)), {
       default: () => [renderIcon(), renderMessage()]
     });
   }
@@ -9541,6 +9558,7 @@ const dropdownMenuProps = {
   duration: makeNumericProp(0.2),
   direction: makeStringProp("down"),
   activeColor: String,
+  autoLocate: Boolean,
   closeOnClickOutside: truthProp,
   closeOnClickOverlay: truthProp,
   swipeThreshold: numericProp
@@ -9696,6 +9714,7 @@ var stdin_default$T = defineComponent({
       transition: true,
       showWrapper: false
     });
+    const wrapperRef = ref();
     const {
       parent,
       index
@@ -9784,6 +9803,7 @@ var stdin_default$T = defineComponent({
         offset
       } = parent;
       const {
+        autoLocate,
         zIndex,
         overlay,
         duration,
@@ -9791,12 +9811,20 @@ var stdin_default$T = defineComponent({
         closeOnClickOverlay
       } = parent.props;
       const style = getZIndexStyle(zIndex);
+      let offsetValue = offset.value;
+      if (autoLocate && wrapperRef.value) {
+        const offsetParent = getContainingBlock(wrapperRef.value);
+        if (offsetParent) {
+          offsetValue -= useRect(offsetParent).top;
+        }
+      }
       if (direction === "down") {
-        style.top = `${offset.value}px`;
+        style.top = `${offsetValue}px`;
       } else {
-        style.bottom = `${offset.value}px`;
+        style.bottom = `${offsetValue}px`;
       }
       return withDirectives(createVNode("div", mergeProps({
+        "ref": wrapperRef,
         "style": style,
         "class": bem$K([direction]),
         "onClick": onClickWrapper
@@ -10443,6 +10471,7 @@ const imagePreviewItemProps = {
   rootHeight: makeRequiredProp(Number),
   disableZoom: Boolean,
   doubleScale: Boolean,
+  closeOnClickImage: Boolean,
   closeOnClickOverlay: Boolean
 };
 var stdin_default$N = defineComponent({
@@ -10605,18 +10634,25 @@ var stdin_default$N = defineComponent({
         }
       }
     };
-    const checkTap = (event) => {
+    const checkClose = (event) => {
       var _a;
+      const swipeItemEl = (_a = swipeItem.value) == null ? void 0 : _a.$el;
+      const imageEl = swipeItemEl.firstElementChild;
+      const isClickOverlay = event.target === swipeItemEl;
+      const isClickImage = imageEl == null ? void 0 : imageEl.contains(event.target);
+      if (!props2.closeOnClickImage && isClickImage)
+        return;
+      if (!props2.closeOnClickOverlay && isClickOverlay)
+        return;
+      emit("close");
+    };
+    const checkTap = (event) => {
       if (fingerNum > 1) {
         return;
       }
-      const {
-        offsetX,
-        offsetY
-      } = touch;
       const deltaTime = Date.now() - touchStartTime;
       const TAP_TIME = 250;
-      if (offsetX.value < TAP_OFFSET && offsetY.value < TAP_OFFSET) {
+      if (touch.isTap.value) {
         if (deltaTime < TAP_TIME) {
           if (props2.doubleScale) {
             if (doubleTapTimer) {
@@ -10624,16 +10660,13 @@ var stdin_default$N = defineComponent({
               doubleTapTimer = null;
               toggleScale();
             } else {
-              if (!props2.closeOnClickOverlay && event.target === ((_a = swipeItem.value) == null ? void 0 : _a.$el)) {
-                return;
-              }
               doubleTapTimer = setTimeout(() => {
-                emit("close");
+                checkClose(event);
                 doubleTapTimer = null;
               }, TAP_TIME);
             }
           } else {
-            emit("close");
+            checkClose(event);
           }
         } else if (deltaTime > LONG_PRESS_START_TIME) {
           emit("longPress");
@@ -10768,6 +10801,7 @@ const imagePreviewProps = {
   startPosition: makeNumericProp(0),
   showIndicators: Boolean,
   closeOnPopstate: truthProp,
+  closeOnClickImage: truthProp,
   closeOnClickOverlay: truthProp,
   closeIconPosition: makeStringProp("top-right"),
   teleport: [String, Object]
@@ -10860,6 +10894,7 @@ var stdin_default$M = defineComponent({
         "rootHeight": state.rootHeight,
         "disableZoom": state.disableZoom,
         "doubleScale": props2.doubleScale,
+        "closeOnClickImage": props2.closeOnClickImage,
         "closeOnClickOverlay": props2.closeOnClickOverlay,
         "onScale": emitScale,
         "onClose": emitClose,
@@ -11669,6 +11704,7 @@ var stdin_default$H = defineComponent({
 });
 const NoticeBar = withInstall(stdin_default$H);
 const [name$y, bem$x] = createNamespace("notify");
+const popupInheritProps = ["lockScroll", "position", "show", "teleport", "zIndex"];
 const notifyProps = extend({}, popupSharedProps, {
   type: makeStringProp("danger"),
   color: String,
@@ -11687,20 +11723,16 @@ var stdin_default$G = defineComponent({
     slots
   }) {
     const updateShow = (show) => emit("update:show", show);
-    return () => createVNode(Popup, {
-      "show": props2.show,
+    return () => createVNode(Popup, mergeProps({
       "class": [bem$x([props2.type]), props2.className],
       "style": {
         color: props2.color,
         background: props2.background
       },
       "overlay": false,
-      "zIndex": props2.zIndex,
-      "position": props2.position,
       "duration": 0.2,
-      "lockScroll": props2.lockScroll,
       "onUpdate:show": updateShow
-    }, {
+    }, pick(props2, popupInheritProps)), {
       default: () => [slots.default ? slots.default() : props2.message]
     });
   }
@@ -14945,7 +14977,8 @@ var stdin_default$9 = defineComponent({
   props: textEllipsisProps,
   emits: ["clickAction"],
   setup(props2, {
-    emit
+    emit,
+    slots
   }) {
     const text = ref("");
     const expanded = ref(false);
@@ -15053,10 +15086,15 @@ var stdin_default$9 = defineComponent({
       toggle();
       emit("clickAction", event);
     };
-    const renderAction = () => createVNode("span", {
-      "class": bem$3("action"),
-      "onClick": onClickAction
-    }, [actionText.value]);
+    const renderAction = () => {
+      const action = slots.action ? slots.action({
+        expanded: expanded.value
+      }) : actionText.value;
+      return createVNode("span", {
+        "class": bem$3("action"),
+        "onClick": onClickAction
+      }, [action]);
+    };
     onMounted(calcEllipsised);
     watch([windowWidth, () => [props2.content, props2.rows, props2.position]], calcEllipsised);
     useExpose({
@@ -16728,7 +16766,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.8.1";
+const version = "4.8.3";
 function install(app) {
   const components = [
     ActionBar,

package/lib/vant.js

@@ -506,6 +506,22 @@
     return hidden || parentHidden;
   }
   const { width: windowWidth, height: windowHeight } = useWindowSize();
+  function isContainingBlock(el) {
+    const css = window.getComputedStyle(el);
+    return css.transform !== "none" || css.perspective !== "none" || ["transform", "perspective", "filter"].some(
+      (value) => (css.willChange || "").includes(value)
+    );
+  }
+  function getContainingBlock$1(el) {
+    let node = el.parentElement;
+    while (node) {
+      if (node && node.tagName !== "HTML" && node.tagName !== "BODY" && isContainingBlock(node)) {
+        return node;
+      }
+      node = node.parentElement;
+    }
+    return null;
+  }
   function addUnit(value) {
     if (isDef(value)) {
       return isNumeric(value) ? `${value}px` : String(value);
@@ -2335,6 +2351,11 @@
     });
     return propRef;
   };
+  /**
+  * @vue/shared v3.4.12
+  * (c) 2018-present Yuxi (Evan) You and Vue contributors
+  * @license MIT
+  **/
   const isArray = Array.isArray;
   const isString = (val) => typeof val === "string";
   const isObject = (val) => val !== null && typeof val === "object";
@@ -2362,9 +2383,7 @@
         }
       }
       return res;
-    } else if (isString(value)) {
-      return value;
-    } else if (isObject(value)) {
+    } else if (isString(value) || isObject(value)) {
       return value;
     }
   }
@@ -2580,7 +2599,7 @@
           if (container) {
             const containerRect = useRect(container);
             const difference = containerRect.bottom - offset2.value - state.height;
-            state.fixed = offset2.value > rootRect.top && containerRect.bottom > 0;
+            state.fixed = offset2.value >= rootRect.top && containerRect.bottom > 0;
             state.transform = difference < 0 ? difference : 0;
           } else {
             state.fixed = offset2.value > rootRect.top;
@@ -5007,7 +5026,7 @@
     }
   }
   const [name$1k, bem$1g] = createNamespace("toast");
-  const popupInheritProps = ["show", "overlay", "teleport", "transition", "overlayClass", "overlayStyle", "closeOnClickOverlay"];
+  const popupInheritProps$1 = ["show", "overlay", "teleport", "transition", "overlayClass", "overlayStyle", "closeOnClickOverlay", "zIndex"];
   const toastProps = {
     icon: String,
     show: Boolean,
@@ -5027,7 +5046,8 @@
     overlayClass: unknownProp,
     overlayStyle: Object,
     closeOnClick: Boolean,
-    closeOnClickOverlay: Boolean
+    closeOnClickOverlay: Boolean,
+    zIndex: numericProp
   };
   var stdin_default$1u = vue.defineComponent({
     name: name$1k,
@@ -5117,7 +5137,7 @@
         "onClick": onClick,
         "onClosed": clearTimer,
         "onUpdate:show": updateShow
-      }, pick(props2, popupInheritProps)), {
+      }, pick(props2, popupInheritProps$1)), {
         default: () => [renderIcon(), renderMessage()]
       });
     }
@@ -9979,6 +9999,7 @@
     duration: makeNumericProp(0.2),
     direction: makeStringProp("down"),
     activeColor: String,
+    autoLocate: Boolean,
     closeOnClickOutside: truthProp,
     closeOnClickOverlay: truthProp,
     swipeThreshold: numericProp
@@ -10134,6 +10155,7 @@
         transition: true,
         showWrapper: false
       });
+      const wrapperRef = vue.ref();
       const {
         parent,
         index
@@ -10219,6 +10241,7 @@
           offset: offset2
         } = parent;
         const {
+          autoLocate,
           zIndex,
           overlay,
           duration,
@@ -10226,12 +10249,20 @@
           closeOnClickOverlay
         } = parent.props;
         const style = getZIndexStyle(zIndex);
+        let offsetValue = offset2.value;
+        if (autoLocate && wrapperRef.value) {
+          const offsetParent = getContainingBlock$1(wrapperRef.value);
+          if (offsetParent) {
+            offsetValue -= useRect(offsetParent).top;
+          }
+        }
         if (direction === "down") {
-          style.top = `${offset2.value}px`;
+          style.top = `${offsetValue}px`;
         } else {
-          style.bottom = `${offset2.value}px`;
+          style.bottom = `${offsetValue}px`;
         }
         return vue.withDirectives(vue.createVNode("div", vue.mergeProps({
+          "ref": wrapperRef,
           "style": style,
           "class": bem$K([direction]),
           "onClick": onClickWrapper
@@ -10875,6 +10906,7 @@
     rootHeight: makeRequiredProp(Number),
     disableZoom: Boolean,
     doubleScale: Boolean,
+    closeOnClickImage: Boolean,
     closeOnClickOverlay: Boolean
   };
   var stdin_default$N = vue.defineComponent({
@@ -11037,18 +11069,25 @@
           }
         }
       };
-      const checkTap = (event) => {
+      const checkClose = (event) => {
         var _a;
+        const swipeItemEl = (_a = swipeItem.value) == null ? void 0 : _a.$el;
+        const imageEl = swipeItemEl.firstElementChild;
+        const isClickOverlay = event.target === swipeItemEl;
+        const isClickImage = imageEl == null ? void 0 : imageEl.contains(event.target);
+        if (!props2.closeOnClickImage && isClickImage)
+          return;
+        if (!props2.closeOnClickOverlay && isClickOverlay)
+          return;
+        emit("close");
+      };
+      const checkTap = (event) => {
         if (fingerNum > 1) {
           return;
         }
-        const {
-          offsetX,
-          offsetY
-        } = touch;
         const deltaTime = Date.now() - touchStartTime;
         const TAP_TIME = 250;
-        if (offsetX.value < TAP_OFFSET && offsetY.value < TAP_OFFSET) {
+        if (touch.isTap.value) {
           if (deltaTime < TAP_TIME) {
             if (props2.doubleScale) {
               if (doubleTapTimer) {
@@ -11056,16 +11095,13 @@
                 doubleTapTimer = null;
                 toggleScale();
               } else {
-                if (!props2.closeOnClickOverlay && event.target === ((_a = swipeItem.value) == null ? void 0 : _a.$el)) {
-                  return;
-                }
                 doubleTapTimer = setTimeout(() => {
-                  emit("close");
+                  checkClose(event);
                   doubleTapTimer = null;
                 }, TAP_TIME);
               }
             } else {
-              emit("close");
+              checkClose(event);
             }
           } else if (deltaTime > LONG_PRESS_START_TIME) {
             emit("longPress");
@@ -11200,6 +11236,7 @@
     startPosition: makeNumericProp(0),
     showIndicators: Boolean,
     closeOnPopstate: truthProp,
+    closeOnClickImage: truthProp,
     closeOnClickOverlay: truthProp,
     closeIconPosition: makeStringProp("top-right"),
     teleport: [String, Object]
@@ -11292,6 +11329,7 @@
           "rootHeight": state.rootHeight,
           "disableZoom": state.disableZoom,
           "doubleScale": props2.doubleScale,
+          "closeOnClickImage": props2.closeOnClickImage,
           "closeOnClickOverlay": props2.closeOnClickOverlay,
           "onScale": emitScale,
           "onClose": emitClose,
@@ -12098,6 +12136,7 @@
   });
   const NoticeBar = withInstall(stdin_default$H);
   const [name$y, bem$x] = createNamespace("notify");
+  const popupInheritProps = ["lockScroll", "position", "show", "teleport", "zIndex"];
   const notifyProps = extend({}, popupSharedProps, {
     type: makeStringProp("danger"),
     color: String,
@@ -12116,20 +12155,16 @@
       slots
     }) {
       const updateShow = (show) => emit("update:show", show);
-      return () => vue.createVNode(Popup, {
-        "show": props2.show,
+      return () => vue.createVNode(Popup, vue.mergeProps({
         "class": [bem$x([props2.type]), props2.className],
         "style": {
           color: props2.color,
           background: props2.background
         },
         "overlay": false,
-        "zIndex": props2.zIndex,
-        "position": props2.position,
         "duration": 0.2,
-        "lockScroll": props2.lockScroll,
         "onUpdate:show": updateShow
-      }, {
+      }, pick(props2, popupInheritProps)), {
         default: () => [slots.default ? slots.default() : props2.message]
       });
     }
@@ -16177,7 +16212,8 @@
     props: textEllipsisProps,
     emits: ["clickAction"],
     setup(props2, {
-      emit
+      emit,
+      slots
     }) {
       const text = vue.ref("");
       const expanded = vue.ref(false);
@@ -16285,10 +16321,15 @@
         toggle();
         emit("clickAction", event);
       };
-      const renderAction = () => vue.createVNode("span", {
-        "class": bem$3("action"),
-        "onClick": onClickAction
-      }, [actionText.value]);
+      const renderAction = () => {
+        const action = slots.action ? slots.action({
+          expanded: expanded.value
+        }) : actionText.value;
+        return vue.createVNode("span", {
+          "class": bem$3("action"),
+          "onClick": onClickAction
+        }, [action]);
+      };
       vue.onMounted(calcEllipsised);
       vue.watch([windowWidth, () => [props2.content, props2.rows, props2.position]], calcEllipsised);
       useExpose({
@@ -17940,7 +17981,7 @@
       });
     }
   };
-  const version = "4.8.1";
+  const version = "4.8.3";
   function install(app) {
     const components = [
       ActionBar,