vant 4.6.8 → 4.7.1

package/lib/vant.es.js

@@ -378,7 +378,8 @@ const TAP_OFFSET = 5;
 function callInterceptor(interceptor, {
   args = [],
   done,
-  canceled
+  canceled,
+  error
 }) {
   if (interceptor) {
     const returnVal = interceptor.apply(null, args);
@@ -389,7 +390,7 @@ function callInterceptor(interceptor, {
         } else if (canceled) {
           canceled();
         }
-      }).catch(noop);
+      }).catch(error || noop);
     } else if (returnVal) {
       done();
     } else if (canceled) {
@@ -1247,6 +1248,11 @@ function useLazyRender(show) {
   );
   return (render) => () => inited.value ? render() : null;
 }
+const useScopeId = () => {
+  var _a;
+  const { scopeId } = ((_a = getCurrentInstance()) == null ? void 0 : _a.vnode) || {};
+  return scopeId ? { [scopeId]: "" } : null;
+};
 const [name$1B, bem$1w] = createNamespace("overlay");
 const overlayProps = {
   show: Boolean,
@@ -1358,16 +1364,17 @@ var stdin_default$1J = defineComponent({
     };
     const renderOverlay = () => {
       if (props2.overlay) {
-        return createVNode(Overlay, {
+        return createVNode(Overlay, mergeProps({
           "show": props2.show,
           "class": props2.overlayClass,
           "zIndex": zIndex.value,
           "duration": props2.duration,
           "customStyle": props2.overlayStyle,
           "role": props2.closeOnClickOverlay ? "button" : void 0,
-          "tabindex": props2.closeOnClickOverlay ? 0 : void 0,
+          "tabindex": props2.closeOnClickOverlay ? 0 : void 0
+        }, useScopeId(), {
           "onClick": onClickOverlay
-        }, {
+        }), {
           default: slots["overlay-content"]
         });
       }
@@ -1419,7 +1426,7 @@ var stdin_default$1J = defineComponent({
           "van-safe-area-bottom": safeAreaInsetBottom
         }],
         "onKeydown": onKeydown
-      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon()]), [[vShow, props2.show]]);
+      }, attrs, useScopeId()), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon()]), [[vShow, props2.show]]);
     });
     const renderTransition = () => {
       const {
@@ -2219,7 +2226,7 @@ var stdin_default$1E = defineComponent({
     const trackStyle = computed(() => {
       const style = {
         transitionDuration: `${state.swiping ? 0 : props2.duration}ms`,
-        transform: `translate${props2.vertical ? "Y" : "X"}(${state.offset}px)`
+        transform: `translate${props2.vertical ? "Y" : "X"}(${+state.offset.toFixed(2)}px)`
       };
       if (size.value) {
         const mainAxis = props2.vertical ? "height" : "width";
@@ -4990,7 +4997,7 @@ const addressEditProps = {
 var stdin_default$1q = defineComponent({
   name: name$1g,
   props: addressEditProps,
-  emits: ["save", "focus", "delete", "clickArea", "changeArea", "changeDetail", "selectSearch", "changeDefault"],
+  emits: ["save", "focus", "change", "delete", "clickArea", "changeArea", "changeDetail", "selectSearch", "changeDefault"],
   setup(props2, {
     emit,
     slots
@@ -5024,6 +5031,12 @@ var stdin_default$1q = defineComponent({
       detailFocused.value = key === "addressDetail";
       emit("focus", key);
     };
+    const onChange = (key, value) => {
+      emit("change", {
+        key,
+        value
+      });
+    };
     const rules = computed(() => {
       const {
         validator,
@@ -5135,7 +5148,7 @@ var stdin_default$1q = defineComponent({
             "class": bem$1c("fields")
           }, [createVNode(Field, {
             "modelValue": data.name,
-            "onUpdate:modelValue": ($event) => data.name = $event,
+            "onUpdate:modelValue": [($event) => data.name = $event, (val) => onChange("name", val)],
             "clearable": true,
             "label": t$i("name"),
             "rules": rules.value.name,
@@ -5143,7 +5156,7 @@ var stdin_default$1q = defineComponent({
             "onFocus": () => onFocus("name")
           }, null), createVNode(Field, {
             "modelValue": data.tel,
-            "onUpdate:modelValue": ($event) => data.tel = $event,
+            "onUpdate:modelValue": [($event) => data.tel = $event, (val) => onChange("tel", val)],
             "clearable": true,
             "type": "tel",
             "label": t$i("tel"),
@@ -6138,7 +6151,7 @@ var stdin_default$1h = defineComponent({
     offset: makeNumberProp(0),
     rowHeight: String
   },
-  emits: ["click"],
+  emits: ["click", "clickDisabledDate"],
   setup(props2, {
     emit,
     slots
@@ -6184,6 +6197,8 @@ var stdin_default$1h = defineComponent({
     const onClick = () => {
       if (props2.item.type !== "disabled") {
         emit("click", props2.item);
+      } else {
+        emit("clickDisabledDate", props2.item);
       }
     };
     const renderTopInfo = () => {
@@ -6270,7 +6285,7 @@ const calendarMonthProps = {
 var stdin_default$1g = defineComponent({
   name: name$16,
   props: calendarMonthProps,
-  emits: ["click"],
+  emits: ["click", "clickDisabledDate"],
   setup(props2, {
     emit,
     slots
@@ -6429,7 +6444,8 @@ var stdin_default$1g = defineComponent({
       "color": props2.color,
       "offset": offset.value,
       "rowHeight": rowHeight.value,
-      "onClick": (item2) => emit("click", item2)
+      "onClick": (item2) => emit("click", item2),
+      "onClickDisabledDate": (item2) => emit("clickDisabledDate", item2)
     }, pick(slots, ["top-info", "bottom-info"]));
     const renderDays = () => createVNode("div", {
       "ref": daysRef,
@@ -6554,7 +6570,7 @@ const calendarProps = {
 var stdin_default$1e = defineComponent({
   name: name$18,
   props: calendarProps,
-  emits: ["select", "confirm", "unselect", "monthShow", "overRange", "update:show", "clickSubtitle"],
+  emits: ["select", "confirm", "unselect", "monthShow", "overRange", "update:show", "clickSubtitle", "clickDisabledDate"],
   setup(props2, {
     emit,
     slots
@@ -6822,7 +6838,8 @@ var stdin_default$1e = defineComponent({
         "showMonthTitle": showMonthTitle,
         "firstDayOfWeek": dayOffset.value
       }, pick(props2, ["type", "color", "minDate", "maxDate", "showMark", "formatter", "rowHeight", "lazyRender", "showSubtitle", "allowSameDay"]), {
-        "onClick": onClickDay
+        "onClick": onClickDay,
+        "onClickDisabledDate": (item) => emit("clickDisabledDate", item)
       }), pick(slots, ["top-info", "bottom-info", "month-title"]));
     };
     const renderFooterButton = () => {
@@ -7440,7 +7457,7 @@ var stdin_default$1a = defineComponent({
         }), {
           [BORDER_TOP_BOTTOM]: props2.border && !props2.inset
         }]
-      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+      }, attrs, useScopeId()), [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
     const renderTitle = () => createVNode("div", {
       "class": bem$10("title", {
@@ -9400,7 +9417,7 @@ function initInstance$2() {
 }
 function showDialog(options) {
   if (!inBrowser) {
-    return Promise.resolve();
+    return Promise.resolve(void 0);
   }
   return new Promise((resolve, reject) => {
     if (!instance$2) {
@@ -9941,7 +9958,7 @@ const FloatingBubble = withInstall(stdin_default$R);
 const floatingPanelProps = {
   height: makeNumericProp(0),
   anchors: makeArrayProp(),
-  duration: makeNumericProp(0.2),
+  duration: makeNumericProp(0.3),
   contentDraggable: truthProp,
   lockScroll: Boolean,
   safeAreaInsetBottom: truthProp
@@ -9971,7 +9988,7 @@ var stdin_default$Q = defineComponent({
     const rootStyle = computed(() => ({
       height: addUnit(boundary.value.max),
       transform: `translateY(calc(100% + ${addUnit(-height.value)}))`,
-      transition: !dragging.value ? `transform ${props2.duration}s` : "none"
+      transition: !dragging.value ? `transform ${props2.duration}s cubic-bezier(0.18, 0.89, 0.32, 1.28)` : "none"
     }));
     const ease = (moveY) => {
       const absDistance = Math.abs(moveY);
@@ -10031,7 +10048,7 @@ var stdin_default$Q = defineComponent({
     }, {
       immediate: true
     });
-    useLockScroll(rootRef, () => props2.lockScroll);
+    useLockScroll(rootRef, () => props2.lockScroll || dragging.value);
     useEventListener("touchmove", onTouchmove, {
       target: rootRef
     });
@@ -12254,7 +12271,7 @@ var stdin_default$B = defineComponent({
         "transition": "van-popover-zoom",
         "lockScroll": false,
         "onUpdate:show": updateShow
-      }, attrs, pick(props2, popupProps)), {
+      }, attrs, useScopeId(), pick(props2, popupProps)), {
         default: () => [props2.showArrow && createVNode("div", {
           "class": bem$s("arrow")
         }, null), createVNode("div", {
@@ -13257,12 +13274,16 @@ var stdin_default$r = defineComponent({
       const empty = document.createElement("canvas");
       empty.width = canvas.width;
       empty.height = canvas.height;
+      if (props2.backgroundColor) {
+        const emptyCtx = empty.getContext("2d");
+        setCanvasBgColor(emptyCtx);
+      }
       return canvas.toDataURL() === empty.toDataURL();
     };
-    const setCanvasBgColor = () => {
-      if (state.ctx && props2.backgroundColor) {
-        state.ctx.fillStyle = props2.backgroundColor;
-        state.ctx.fillRect(0, 0, state.width, state.height);
+    const setCanvasBgColor = (ctx) => {
+      if (ctx && props2.backgroundColor) {
+        ctx.fillStyle = props2.backgroundColor;
+        ctx.fillRect(0, 0, state.width, state.height);
       }
     };
     const submit = () => {
@@ -13285,7 +13306,7 @@ var stdin_default$r = defineComponent({
       if (state.ctx) {
         state.ctx.clearRect(0, 0, state.width, state.height);
         state.ctx.closePath();
-        setCanvasBgColor();
+        setCanvasBgColor(state.ctx);
       }
       emit("clear");
     };
@@ -13296,7 +13317,7 @@ var stdin_default$r = defineComponent({
         state.width = (((_b = wrapRef.value) == null ? void 0 : _b.offsetWidth) || 0) * state.ratio;
         state.height = (((_c = wrapRef.value) == null ? void 0 : _c.offsetHeight) || 0) * state.ratio;
         nextTick(() => {
-          setCanvasBgColor();
+          setCanvasBgColor(state.ctx);
         });
       }
     });
@@ -14370,6 +14391,7 @@ var stdin_default$c = defineComponent({
     let opened;
     let lockClick2;
     let startOffset;
+    let isInBeforeClosing;
     const root = ref();
     const leftRef = ref();
     const rightRef = ref();
@@ -14446,14 +14468,22 @@ var stdin_default$c = defineComponent({
       }
     };
     const onClick = (position = "outside") => {
+      if (isInBeforeClosing)
+        return;
       emit("click", position);
       if (opened && !lockClick2) {
+        isInBeforeClosing = true;
         callInterceptor(props2.beforeClose, {
           args: [{
             name: props2.name,
             position
           }],
-          done: () => close(position)
+          done: () => {
+            isInBeforeClosing = false;
+            close(position);
+          },
+          canceled: () => isInBeforeClosing = false,
+          error: () => isInBeforeClosing = false
         });
       }
     };
@@ -16473,7 +16503,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.6.8";
+const version = "4.7.1";
 function install(app) {
   const components = [
     ActionBar,

package/lib/vant.js

@@ -768,7 +768,8 @@
   function callInterceptor(interceptor, {
     args = [],
     done,
-    canceled
+    canceled,
+    error
   }) {
     if (interceptor) {
       const returnVal = interceptor.apply(null, args);
@@ -779,7 +780,7 @@
           } else if (canceled) {
             canceled();
           }
-        }).catch(noop);
+        }).catch(error || noop);
       } else if (returnVal) {
         done();
       } else if (canceled) {
@@ -1637,6 +1638,11 @@
     );
     return (render) => () => inited.value ? render() : null;
   }
+  const useScopeId = () => {
+    var _a;
+    const { scopeId } = ((_a = vue.getCurrentInstance()) == null ? void 0 : _a.vnode) || {};
+    return scopeId ? { [scopeId]: "" } : null;
+  };
   const [name$1B, bem$1w] = createNamespace("overlay");
   const overlayProps = {
     show: Boolean,
@@ -1748,16 +1754,17 @@
       };
       const renderOverlay = () => {
         if (props2.overlay) {
-          return vue.createVNode(Overlay, {
+          return vue.createVNode(Overlay, vue.mergeProps({
             "show": props2.show,
             "class": props2.overlayClass,
             "zIndex": zIndex.value,
             "duration": props2.duration,
             "customStyle": props2.overlayStyle,
             "role": props2.closeOnClickOverlay ? "button" : void 0,
-            "tabindex": props2.closeOnClickOverlay ? 0 : void 0,
+            "tabindex": props2.closeOnClickOverlay ? 0 : void 0
+          }, useScopeId(), {
             "onClick": onClickOverlay
-          }, {
+          }), {
             default: slots["overlay-content"]
           });
         }
@@ -1809,7 +1816,7 @@
             "van-safe-area-bottom": safeAreaInsetBottom
           }],
           "onKeydown": onKeydown
-        }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon()]), [[vue.vShow, props2.show]]);
+        }, attrs, useScopeId()), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon()]), [[vue.vShow, props2.show]]);
       });
       const renderTransition = () => {
         const {
@@ -2686,7 +2693,7 @@
       const trackStyle = vue.computed(() => {
         const style = {
           transitionDuration: `${state.swiping ? 0 : props2.duration}ms`,
-          transform: `translate${props2.vertical ? "Y" : "X"}(${state.offset}px)`
+          transform: `translate${props2.vertical ? "Y" : "X"}(${+state.offset.toFixed(2)}px)`
         };
         if (size.value) {
           const mainAxis = props2.vertical ? "height" : "width";
@@ -5451,7 +5458,7 @@
   var stdin_default$1q = vue.defineComponent({
     name: name$1g,
     props: addressEditProps,
-    emits: ["save", "focus", "delete", "clickArea", "changeArea", "changeDetail", "selectSearch", "changeDefault"],
+    emits: ["save", "focus", "change", "delete", "clickArea", "changeArea", "changeDetail", "selectSearch", "changeDefault"],
     setup(props2, {
       emit,
       slots
@@ -5485,6 +5492,12 @@
         detailFocused.value = key === "addressDetail";
         emit("focus", key);
       };
+      const onChange = (key, value) => {
+        emit("change", {
+          key,
+          value
+        });
+      };
       const rules = vue.computed(() => {
         const {
           validator,
@@ -5596,7 +5609,7 @@
               "class": bem$1c("fields")
             }, [vue.createVNode(Field, {
               "modelValue": data.name,
-              "onUpdate:modelValue": ($event) => data.name = $event,
+              "onUpdate:modelValue": [($event) => data.name = $event, (val) => onChange("name", val)],
               "clearable": true,
               "label": t$i("name"),
               "rules": rules.value.name,
@@ -5604,7 +5617,7 @@
               "onFocus": () => onFocus("name")
             }, null), vue.createVNode(Field, {
               "modelValue": data.tel,
-              "onUpdate:modelValue": ($event) => data.tel = $event,
+              "onUpdate:modelValue": [($event) => data.tel = $event, (val) => onChange("tel", val)],
               "clearable": true,
               "type": "tel",
               "label": t$i("tel"),
@@ -6596,7 +6609,7 @@
       offset: makeNumberProp(0),
       rowHeight: String
     },
-    emits: ["click"],
+    emits: ["click", "clickDisabledDate"],
     setup(props2, {
       emit,
       slots
@@ -6642,6 +6655,8 @@
       const onClick = () => {
         if (props2.item.type !== "disabled") {
           emit("click", props2.item);
+        } else {
+          emit("clickDisabledDate", props2.item);
         }
       };
       const renderTopInfo = () => {
@@ -6728,7 +6743,7 @@
   var stdin_default$1g = vue.defineComponent({
     name: name$16,
     props: calendarMonthProps,
-    emits: ["click"],
+    emits: ["click", "clickDisabledDate"],
     setup(props2, {
       emit,
       slots
@@ -6887,7 +6902,8 @@
         "color": props2.color,
         "offset": offset2.value,
         "rowHeight": rowHeight.value,
-        "onClick": (item2) => emit("click", item2)
+        "onClick": (item2) => emit("click", item2),
+        "onClickDisabledDate": (item2) => emit("clickDisabledDate", item2)
       }, pick(slots, ["top-info", "bottom-info"]));
       const renderDays = () => vue.createVNode("div", {
         "ref": daysRef,
@@ -7012,7 +7028,7 @@
   var stdin_default$1e = vue.defineComponent({
     name: name$18,
     props: calendarProps,
-    emits: ["select", "confirm", "unselect", "monthShow", "overRange", "update:show", "clickSubtitle"],
+    emits: ["select", "confirm", "unselect", "monthShow", "overRange", "update:show", "clickSubtitle", "clickDisabledDate"],
     setup(props2, {
       emit,
       slots
@@ -7280,7 +7296,8 @@
           "showMonthTitle": showMonthTitle,
           "firstDayOfWeek": dayOffset.value
         }, pick(props2, ["type", "color", "minDate", "maxDate", "showMark", "formatter", "rowHeight", "lazyRender", "showSubtitle", "allowSameDay"]), {
-          "onClick": onClickDay
+          "onClick": onClickDay,
+          "onClickDisabledDate": (item) => emit("clickDisabledDate", item)
         }), pick(slots, ["top-info", "bottom-info", "month-title"]));
       };
       const renderFooterButton = () => {
@@ -7898,7 +7915,7 @@
           }), {
             [BORDER_TOP_BOTTOM]: props2.border && !props2.inset
           }]
-        }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+        }, attrs, useScopeId()), [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
       };
       const renderTitle = () => vue.createVNode("div", {
         "class": bem$10("title", {
@@ -9838,7 +9855,7 @@
   }
   function showDialog(options) {
     if (!inBrowser$1) {
-      return Promise.resolve();
+      return Promise.resolve(void 0);
     }
     return new Promise((resolve, reject) => {
       if (!instance$2) {
@@ -10376,7 +10393,7 @@
   const floatingPanelProps = {
     height: makeNumericProp(0),
     anchors: makeArrayProp(),
-    duration: makeNumericProp(0.2),
+    duration: makeNumericProp(0.3),
     contentDraggable: truthProp,
     lockScroll: Boolean,
     safeAreaInsetBottom: truthProp
@@ -10406,7 +10423,7 @@
       const rootStyle = vue.computed(() => ({
         height: addUnit(boundary.value.max),
         transform: `translateY(calc(100% + ${addUnit(-height2.value)}))`,
-        transition: !dragging.value ? `transform ${props2.duration}s` : "none"
+        transition: !dragging.value ? `transform ${props2.duration}s cubic-bezier(0.18, 0.89, 0.32, 1.28)` : "none"
       }));
       const ease = (moveY) => {
         const absDistance = Math.abs(moveY);
@@ -10466,7 +10483,7 @@
       }, {
         immediate: true
       });
-      useLockScroll(rootRef, () => props2.lockScroll);
+      useLockScroll(rootRef, () => props2.lockScroll || dragging.value);
       useEventListener("touchmove", onTouchmove, {
         target: rootRef
       });
@@ -13495,7 +13512,7 @@
           "transition": "van-popover-zoom",
           "lockScroll": false,
           "onUpdate:show": updateShow
-        }, attrs, pick(props2, popupProps)), {
+        }, attrs, useScopeId(), pick(props2, popupProps)), {
           default: () => [props2.showArrow && vue.createVNode("div", {
             "class": bem$s("arrow")
           }, null), vue.createVNode("div", {
@@ -14495,12 +14512,16 @@
         const empty = document.createElement("canvas");
         empty.width = canvas.width;
         empty.height = canvas.height;
+        if (props2.backgroundColor) {
+          const emptyCtx = empty.getContext("2d");
+          setCanvasBgColor(emptyCtx);
+        }
         return canvas.toDataURL() === empty.toDataURL();
       };
-      const setCanvasBgColor = () => {
-        if (state.ctx && props2.backgroundColor) {
-          state.ctx.fillStyle = props2.backgroundColor;
-          state.ctx.fillRect(0, 0, state.width, state.height);
+      const setCanvasBgColor = (ctx) => {
+        if (ctx && props2.backgroundColor) {
+          ctx.fillStyle = props2.backgroundColor;
+          ctx.fillRect(0, 0, state.width, state.height);
         }
       };
       const submit = () => {
@@ -14523,7 +14544,7 @@
         if (state.ctx) {
           state.ctx.clearRect(0, 0, state.width, state.height);
           state.ctx.closePath();
-          setCanvasBgColor();
+          setCanvasBgColor(state.ctx);
         }
         emit("clear");
       };
@@ -14534,7 +14555,7 @@
           state.width = (((_b = wrapRef.value) == null ? void 0 : _b.offsetWidth) || 0) * state.ratio;
           state.height = (((_c = wrapRef.value) == null ? void 0 : _c.offsetHeight) || 0) * state.ratio;
           vue.nextTick(() => {
-            setCanvasBgColor();
+            setCanvasBgColor(state.ctx);
           });
         }
       });
@@ -15605,6 +15626,7 @@
       let opened;
       let lockClick2;
       let startOffset;
+      let isInBeforeClosing;
       const root = vue.ref();
       const leftRef = vue.ref();
       const rightRef = vue.ref();
@@ -15681,14 +15703,22 @@
         }
       };
       const onClick = (position = "outside") => {
+        if (isInBeforeClosing)
+          return;
         emit("click", position);
         if (opened && !lockClick2) {
+          isInBeforeClosing = true;
           callInterceptor(props2.beforeClose, {
             args: [{
               name: props2.name,
               position
             }],
-            done: () => close(position)
+            done: () => {
+              isInBeforeClosing = false;
+              close(position);
+            },
+            canceled: () => isInBeforeClosing = false,
+            error: () => isInBeforeClosing = false
           });
         }
       };
@@ -17685,7 +17715,7 @@
       });
     }
   };
-  const version = "4.6.8";
+  const version = "4.7.1";
   function install(app) {
     const components = [
       ActionBar,