vant 4.0.0-alpha.0 → 4.0.0-alpha.1

package/lib/vant.es.js

@@ -560,6 +560,8 @@ var stdin_default$1y = defineComponent({
       watch(() => props.theme, (newVal, oldVal) => {
         document.body.classList.remove(`van-theme-${oldVal}`);
         document.body.classList.add(`van-theme-${newVal}`);
+      }, {
+        immediate: true
       });
     }
     provide(CONFIG_PROVIDER_KEY, props);
@@ -1134,6 +1136,7 @@ const popupProps$2 = extend({}, popupSharedProps, {
   iconPrefix: String,
   closeOnPopstate: Boolean,
   closeIconPosition: makeStringProp("top-right"),
+  safeAreaInsetTop: Boolean,
   safeAreaInsetBottom: Boolean
 });
 const [name$1k, bem$1g] = createNamespace("popup");
@@ -1228,6 +1231,7 @@ var stdin_default$1r = defineComponent({
       const {
         round,
         position,
+        safeAreaInsetTop,
         safeAreaInsetBottom
       } = props;
       return withDirectives(createVNode("div", mergeProps({
@@ -1237,6 +1241,7 @@ var stdin_default$1r = defineComponent({
           round,
           [position]: position
         }), {
+          "van-safe-area-top": safeAreaInsetTop,
           "van-safe-area-bottom": safeAreaInsetBottom
         }],
         "onKeydown": onKeydown
@@ -2906,6 +2911,7 @@ var stdin_default$1j = defineComponent({
       } = props;
       if (isDef(message) && message !== "") {
         return type === "html" ? createVNode("div", {
+          "key": 0,
           "class": bem$18("text"),
           "innerHTML": String(message)
         }, null) : createVNode("div", {
@@ -4393,6 +4399,7 @@ const calendarProps = {
   showRangePrompt: truthProp,
   confirmDisabledText: String,
   closeOnClickOverlay: truthProp,
+  safeAreaInsetTop: Boolean,
   safeAreaInsetBottom: truthProp,
   minDate: {
     type: Date,
@@ -4741,6 +4748,7 @@ var stdin_default$16 = defineComponent({
           "closeable": props.showTitle || props.showSubtitle,
           "teleport": props.teleport,
           "closeOnPopstate": props.closeOnPopstate,
+          "safeAreaInsetTop": props.safeAreaInsetTop,
           "closeOnClickOverlay": props.closeOnClickOverlay,
           "onUpdate:show": updateShow
         }, {
@@ -7713,7 +7721,7 @@ var stdin_default$I = defineComponent({
       }
     });
     watch(() => props.modelValue, (newValues) => {
-      if (isSameValue(newValues, currentValues.value)) {
+      if (!isSameValue(newValues, currentValues.value)) {
         currentValues.value = newValues;
       }
     });
@@ -9120,6 +9128,7 @@ var stdin_default$y = defineComponent({
       children,
       linkChildren
     } = useChildren(INDEX_BAR_KEY);
+    let selectActiveIndex;
     linkChildren({
       props
     });
@@ -9147,6 +9156,7 @@ var stdin_default$y = defineComponent({
       }
       return -1;
     };
+    const getMatchAnchor = (index) => children.find((item) => String(item.index) === index);
     const onScroll = () => {
       if (isHidden(root)) {
         return;
@@ -9158,7 +9168,16 @@ var stdin_default$y = defineComponent({
       const scrollTop = getScrollTop(scrollParent.value);
       const scrollParentRect = useRect(scrollParent);
       const rects = children.map((item) => item.getRect(scrollParent.value, scrollParentRect));
-      const active = getActiveAnchor(scrollTop, rects);
+      let active = -1;
+      if (selectActiveIndex) {
+        const match = getMatchAnchor(selectActiveIndex);
+        if (match) {
+          const rect = match.getRect(scrollParent.value, scrollParentRect);
+          active = getActiveAnchor(rect.top, rects);
+        }
+      } else {
+        active = getActiveAnchor(scrollTop, rects);
+      }
       activeAnchor.value = indexList[active];
       if (sticky) {
         children.forEach((item, index) => {
@@ -9177,7 +9196,7 @@ var stdin_default$y = defineComponent({
           if (index === active) {
             state.active = true;
             state.top = Math.max(props.stickyOffsetTop, rects[index].top - scrollTop) + scrollParentRect.top;
-          } else if (index === active - 1) {
+          } else if (index === active - 1 && selectActiveIndex === "") {
             const activeItemTop = rects[active].top - scrollTop;
             state.active = activeItemTop > 0;
             state.top = activeItemTop + scrollParentRect.top - rects[index].height;
@@ -9186,6 +9205,7 @@ var stdin_default$y = defineComponent({
           }
         });
       }
+      selectActiveIndex = "";
     };
     const init = () => {
       nextTick(onScroll);
@@ -9211,9 +9231,18 @@ var stdin_default$y = defineComponent({
       }, [index]);
     });
     const scrollTo = (index) => {
-      index = String(index);
-      const match = children.find((item) => String(item.index) === index);
+      selectActiveIndex = String(index);
+      const match = getMatchAnchor(selectActiveIndex);
       if (match) {
+        const scrollTop = getScrollTop(scrollParent.value);
+        const scrollParentRect = useRect(scrollParent);
+        const {
+          offsetHeight
+        } = document.documentElement;
+        if (scrollTop === offsetHeight - scrollParentRect.height) {
+          onScroll();
+          return;
+        }
         match.$el.scrollIntoView();
         if (props.sticky && props.stickyOffsetTop) {
           setRootScrollTop(getRootScrollTop() - props.stickyOffsetTop);
@@ -9547,10 +9576,10 @@ var stdin_default$v = defineComponent({
         "ref": navBarRef,
         "style": style,
         "class": [bem$p({
-          fixed,
-          "safe-area-inset-top": props.safeAreaInsetTop
+          fixed
         }), {
-          [BORDER_BOTTOM]: border
+          [BORDER_BOTTOM]: border,
+          "van-safe-area-top": props.safeAreaInsetTop
         }]
       }, [createVNode("div", {
         "class": bem$p("content")
@@ -11271,9 +11300,11 @@ const skeletonProps = {
 };
 var stdin_default$g = defineComponent({
   name: name$b,
+  inheritAttrs: false,
   props: skeletonProps,
   setup(props, {
-    slots
+    slots,
+    attrs
   }) {
     const renderAvatar = () => {
       if (props.avatar) {
@@ -11316,12 +11347,12 @@ var stdin_default$g = defineComponent({
       if (!props.loading) {
         return (_a = slots.default) == null ? void 0 : _a.call(slots);
       }
-      return createVNode("div", {
+      return createVNode("div", mergeProps({
         "class": bem$a({
           animate: props.animate,
           round: props.round
         })
-      }, [renderAvatar(), createVNode("div", {
+      }, attrs), [renderAvatar(), createVNode("div", {
         "class": bem$a("content")
       }, [renderTitle(), renderRows()])]);
     };
@@ -12211,7 +12242,7 @@ var stdin_default$a = defineComponent({
       return createVNode("div", {
         "ref": root,
         "class": bem$4(),
-        "onClick": getClickHandler("cell"),
+        "onClick": getClickHandler("cell", lockClick2),
         "onTouchstart": onTouchStart,
         "onTouchmove": onTouchMove,
         "onTouchend": onTouchEnd,
@@ -13822,7 +13853,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.0.0-alpha.0";
+const version = "4.0.0-alpha.1";
 function install(app) {
   const components = [
     ActionBar,

package/lib/vant.es.min.js

@@ -560,6 +560,8 @@ var stdin_default$1y = defineComponent({
       watch(() => props.theme, (newVal, oldVal) => {
         document.body.classList.remove(`van-theme-${oldVal}`);
         document.body.classList.add(`van-theme-${newVal}`);
+      }, {
+        immediate: true
       });
     }
     provide(CONFIG_PROVIDER_KEY, props);
@@ -1134,6 +1136,7 @@ const popupProps$2 = extend({}, popupSharedProps, {
   iconPrefix: String,
   closeOnPopstate: Boolean,
   closeIconPosition: makeStringProp("top-right"),
+  safeAreaInsetTop: Boolean,
   safeAreaInsetBottom: Boolean
 });
 const [name$1k, bem$1g] = createNamespace("popup");
@@ -1228,6 +1231,7 @@ var stdin_default$1r = defineComponent({
       const {
         round,
         position,
+        safeAreaInsetTop,
         safeAreaInsetBottom
       } = props;
       return withDirectives(createVNode("div", mergeProps({
@@ -1237,6 +1241,7 @@ var stdin_default$1r = defineComponent({
           round,
           [position]: position
         }), {
+          "van-safe-area-top": safeAreaInsetTop,
           "van-safe-area-bottom": safeAreaInsetBottom
         }],
         "onKeydown": onKeydown
@@ -2906,6 +2911,7 @@ var stdin_default$1j = defineComponent({
       } = props;
       if (isDef(message) && message !== "") {
         return type === "html" ? createVNode("div", {
+          "key": 0,
           "class": bem$18("text"),
           "innerHTML": String(message)
         }, null) : createVNode("div", {
@@ -4393,6 +4399,7 @@ const calendarProps = {
   showRangePrompt: truthProp,
   confirmDisabledText: String,
   closeOnClickOverlay: truthProp,
+  safeAreaInsetTop: Boolean,
   safeAreaInsetBottom: truthProp,
   minDate: {
     type: Date,
@@ -4741,6 +4748,7 @@ var stdin_default$16 = defineComponent({
           "closeable": props.showTitle || props.showSubtitle,
           "teleport": props.teleport,
           "closeOnPopstate": props.closeOnPopstate,
+          "safeAreaInsetTop": props.safeAreaInsetTop,
           "closeOnClickOverlay": props.closeOnClickOverlay,
           "onUpdate:show": updateShow
         }, {
@@ -7713,7 +7721,7 @@ var stdin_default$I = defineComponent({
       }
     });
     watch(() => props.modelValue, (newValues) => {
-      if (isSameValue(newValues, currentValues.value)) {
+      if (!isSameValue(newValues, currentValues.value)) {
         currentValues.value = newValues;
       }
     });
@@ -9120,6 +9128,7 @@ var stdin_default$y = defineComponent({
       children,
       linkChildren
     } = useChildren(INDEX_BAR_KEY);
+    let selectActiveIndex;
     linkChildren({
       props
     });
@@ -9147,6 +9156,7 @@ var stdin_default$y = defineComponent({
       }
       return -1;
     };
+    const getMatchAnchor = (index) => children.find((item) => String(item.index) === index);
     const onScroll = () => {
       if (isHidden(root)) {
         return;
@@ -9158,7 +9168,16 @@ var stdin_default$y = defineComponent({
       const scrollTop = getScrollTop(scrollParent.value);
       const scrollParentRect = useRect(scrollParent);
       const rects = children.map((item) => item.getRect(scrollParent.value, scrollParentRect));
-      const active = getActiveAnchor(scrollTop, rects);
+      let active = -1;
+      if (selectActiveIndex) {
+        const match = getMatchAnchor(selectActiveIndex);
+        if (match) {
+          const rect = match.getRect(scrollParent.value, scrollParentRect);
+          active = getActiveAnchor(rect.top, rects);
+        }
+      } else {
+        active = getActiveAnchor(scrollTop, rects);
+      }
       activeAnchor.value = indexList[active];
       if (sticky) {
         children.forEach((item, index) => {
@@ -9177,7 +9196,7 @@ var stdin_default$y = defineComponent({
           if (index === active) {
             state.active = true;
             state.top = Math.max(props.stickyOffsetTop, rects[index].top - scrollTop) + scrollParentRect.top;
-          } else if (index === active - 1) {
+          } else if (index === active - 1 && selectActiveIndex === "") {
             const activeItemTop = rects[active].top - scrollTop;
             state.active = activeItemTop > 0;
             state.top = activeItemTop + scrollParentRect.top - rects[index].height;
@@ -9186,6 +9205,7 @@ var stdin_default$y = defineComponent({
           }
         });
       }
+      selectActiveIndex = "";
     };
     const init = () => {
       nextTick(onScroll);
@@ -9211,9 +9231,18 @@ var stdin_default$y = defineComponent({
       }, [index]);
     });
     const scrollTo = (index) => {
-      index = String(index);
-      const match = children.find((item) => String(item.index) === index);
+      selectActiveIndex = String(index);
+      const match = getMatchAnchor(selectActiveIndex);
       if (match) {
+        const scrollTop = getScrollTop(scrollParent.value);
+        const scrollParentRect = useRect(scrollParent);
+        const {
+          offsetHeight
+        } = document.documentElement;
+        if (scrollTop === offsetHeight - scrollParentRect.height) {
+          onScroll();
+          return;
+        }
         match.$el.scrollIntoView();
         if (props.sticky && props.stickyOffsetTop) {
           setRootScrollTop(getRootScrollTop() - props.stickyOffsetTop);
@@ -9547,10 +9576,10 @@ var stdin_default$v = defineComponent({
         "ref": navBarRef,
         "style": style,
         "class": [bem$p({
-          fixed,
-          "safe-area-inset-top": props.safeAreaInsetTop
+          fixed
         }), {
-          [BORDER_BOTTOM]: border
+          [BORDER_BOTTOM]: border,
+          "van-safe-area-top": props.safeAreaInsetTop
         }]
       }, [createVNode("div", {
         "class": bem$p("content")
@@ -11271,9 +11300,11 @@ const skeletonProps = {
 };
 var stdin_default$g = defineComponent({
   name: name$b,
+  inheritAttrs: false,
   props: skeletonProps,
   setup(props, {
-    slots
+    slots,
+    attrs
   }) {
     const renderAvatar = () => {
       if (props.avatar) {
@@ -11316,12 +11347,12 @@ var stdin_default$g = defineComponent({
       if (!props.loading) {
         return (_a = slots.default) == null ? void 0 : _a.call(slots);
       }
-      return createVNode("div", {
+      return createVNode("div", mergeProps({
         "class": bem$a({
           animate: props.animate,
           round: props.round
         })
-      }, [renderAvatar(), createVNode("div", {
+      }, attrs), [renderAvatar(), createVNode("div", {
         "class": bem$a("content")
       }, [renderTitle(), renderRows()])]);
     };
@@ -12211,7 +12242,7 @@ var stdin_default$a = defineComponent({
       return createVNode("div", {
         "ref": root,
         "class": bem$4(),
-        "onClick": getClickHandler("cell"),
+        "onClick": getClickHandler("cell", lockClick2),
         "onTouchstart": onTouchStart,
         "onTouchmove": onTouchMove,
         "onTouchend": onTouchEnd,
@@ -13822,7 +13853,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.0.0-alpha.0";
+const version = "4.0.0-alpha.1";
 function install(app) {
   const components = [
     ActionBar,

package/lib/vant.js

@@ -914,6 +914,8 @@
         vue.watch(() => props.theme, (newVal, oldVal) => {
           document.body.classList.remove(`van-theme-${oldVal}`);
           document.body.classList.add(`van-theme-${newVal}`);
+        }, {
+          immediate: true
         });
       }
       vue.provide(CONFIG_PROVIDER_KEY, props);
@@ -1488,6 +1490,7 @@
     iconPrefix: String,
     closeOnPopstate: Boolean,
     closeIconPosition: makeStringProp("top-right"),
+    safeAreaInsetTop: Boolean,
     safeAreaInsetBottom: Boolean
   });
   const [name$1k, bem$1g] = createNamespace("popup");
@@ -1582,6 +1585,7 @@
         const {
           round: round2,
           position,
+          safeAreaInsetTop,
           safeAreaInsetBottom
         } = props;
         return vue.withDirectives(vue.createVNode("div", vue.mergeProps({
@@ -1591,6 +1595,7 @@
             round: round2,
             [position]: position
           }), {
+            "van-safe-area-top": safeAreaInsetTop,
             "van-safe-area-bottom": safeAreaInsetBottom
           }],
           "onKeydown": onKeydown
@@ -3260,6 +3265,7 @@
         } = props;
         if (isDef(message) && message !== "") {
           return type === "html" ? vue.createVNode("div", {
+            "key": 0,
             "class": bem$18("text"),
             "innerHTML": String(message)
           }, null) : vue.createVNode("div", {
@@ -4747,6 +4753,7 @@
     showRangePrompt: truthProp,
     confirmDisabledText: String,
     closeOnClickOverlay: truthProp,
+    safeAreaInsetTop: Boolean,
     safeAreaInsetBottom: truthProp,
     minDate: {
       type: Date,
@@ -5095,6 +5102,7 @@
             "closeable": props.showTitle || props.showSubtitle,
             "teleport": props.teleport,
             "closeOnPopstate": props.closeOnPopstate,
+            "safeAreaInsetTop": props.safeAreaInsetTop,
             "closeOnClickOverlay": props.closeOnClickOverlay,
             "onUpdate:show": updateShow
           }, {
@@ -8067,7 +8075,7 @@
         }
       });
       vue.watch(() => props.modelValue, (newValues) => {
-        if (isSameValue(newValues, currentValues.value)) {
+        if (!isSameValue(newValues, currentValues.value)) {
           currentValues.value = newValues;
         }
       });
@@ -9474,6 +9482,7 @@
         children,
         linkChildren
       } = useChildren(INDEX_BAR_KEY);
+      let selectActiveIndex;
       linkChildren({
         props
       });
@@ -9501,6 +9510,7 @@
         }
         return -1;
       };
+      const getMatchAnchor = (index) => children.find((item) => String(item.index) === index);
       const onScroll = () => {
         if (isHidden(root)) {
           return;
@@ -9512,7 +9522,16 @@
         const scrollTop = getScrollTop(scrollParent.value);
         const scrollParentRect = useRect(scrollParent);
         const rects = children.map((item) => item.getRect(scrollParent.value, scrollParentRect));
-        const active = getActiveAnchor(scrollTop, rects);
+        let active = -1;
+        if (selectActiveIndex) {
+          const match = getMatchAnchor(selectActiveIndex);
+          if (match) {
+            const rect = match.getRect(scrollParent.value, scrollParentRect);
+            active = getActiveAnchor(rect.top, rects);
+          }
+        } else {
+          active = getActiveAnchor(scrollTop, rects);
+        }
         activeAnchor.value = indexList[active];
         if (sticky) {
           children.forEach((item, index) => {
@@ -9531,7 +9550,7 @@
             if (index === active) {
               state.active = true;
               state.top = Math.max(props.stickyOffsetTop, rects[index].top - scrollTop) + scrollParentRect.top;
-            } else if (index === active - 1) {
+            } else if (index === active - 1 && selectActiveIndex === "") {
               const activeItemTop = rects[active].top - scrollTop;
               state.active = activeItemTop > 0;
               state.top = activeItemTop + scrollParentRect.top - rects[index].height;
@@ -9540,6 +9559,7 @@
             }
           });
         }
+        selectActiveIndex = "";
       };
       const init = () => {
         vue.nextTick(onScroll);
@@ -9565,9 +9585,18 @@
         }, [index]);
       });
       const scrollTo = (index) => {
-        index = String(index);
-        const match = children.find((item) => String(item.index) === index);
+        selectActiveIndex = String(index);
+        const match = getMatchAnchor(selectActiveIndex);
         if (match) {
+          const scrollTop = getScrollTop(scrollParent.value);
+          const scrollParentRect = useRect(scrollParent);
+          const {
+            offsetHeight
+          } = document.documentElement;
+          if (scrollTop === offsetHeight - scrollParentRect.height) {
+            onScroll();
+            return;
+          }
           match.$el.scrollIntoView();
           if (props.sticky && props.stickyOffsetTop) {
             setRootScrollTop(getRootScrollTop() - props.stickyOffsetTop);
@@ -9901,10 +9930,10 @@
           "ref": navBarRef,
           "style": style,
           "class": [bem$p({
-            fixed,
-            "safe-area-inset-top": props.safeAreaInsetTop
+            fixed
           }), {
-            [BORDER_BOTTOM]: border
+            [BORDER_BOTTOM]: border,
+            "van-safe-area-top": props.safeAreaInsetTop
           }]
         }, [vue.createVNode("div", {
           "class": bem$p("content")
@@ -12482,9 +12511,11 @@
   };
   var stdin_default$g = vue.defineComponent({
     name: name$b,
+    inheritAttrs: false,
     props: skeletonProps,
     setup(props, {
-      slots
+      slots,
+      attrs
     }) {
       const renderAvatar = () => {
         if (props.avatar) {
@@ -12527,12 +12558,12 @@
         if (!props.loading) {
           return (_a = slots.default) == null ? void 0 : _a.call(slots);
         }
-        return vue.createVNode("div", {
+        return vue.createVNode("div", vue.mergeProps({
           "class": bem$a({
             animate: props.animate,
             round: props.round
           })
-        }, [renderAvatar(), vue.createVNode("div", {
+        }, attrs), [renderAvatar(), vue.createVNode("div", {
           "class": bem$a("content")
         }, [renderTitle(), renderRows()])]);
       };
@@ -13422,7 +13453,7 @@
         return vue.createVNode("div", {
           "ref": root,
           "class": bem$4(),
-          "onClick": getClickHandler("cell"),
+          "onClick": getClickHandler("cell", lockClick2),
           "onTouchstart": onTouchStart,
           "onTouchmove": onTouchMove,
           "onTouchend": onTouchEnd,
@@ -15033,7 +15064,7 @@
       });
     }
   };
-  const version = "4.0.0-alpha.0";
+  const version = "4.0.0-alpha.1";
   function install(app) {
     const components = [
       ActionBar,