vant 4.6.7 → 4.7.0

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) {
@@ -630,10 +631,14 @@ const configProviderProps = {
   themeVarsScope: makeStringProp("local"),
   iconPrefix: String
 };
+function insertDash(str) {
+  return str.replace(/([a-zA-Z])(\d)/g, "$1-$2");
+}
 function mapThemeVarsToCSSVars(themeVars) {
   const cssVars = {};
   Object.keys(themeVars).forEach((key) => {
-    cssVars[`--van-${kebabCase(key)}`] = themeVars[key];
+    const formattedKey = insertDash(kebabCase(key));
+    cssVars[`--van-${formattedKey}`] = themeVars[key];
   });
   return cssVars;
 }
@@ -4986,7 +4991,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
@@ -5020,6 +5025,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,
@@ -5131,7 +5142,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,
@@ -5139,7 +5150,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"),
@@ -6134,7 +6145,7 @@ var stdin_default$1h = defineComponent({
     offset: makeNumberProp(0),
     rowHeight: String
   },
-  emits: ["click"],
+  emits: ["click", "clickDisabledDate"],
   setup(props2, {
     emit,
     slots
@@ -6180,6 +6191,8 @@ var stdin_default$1h = defineComponent({
     const onClick = () => {
       if (props2.item.type !== "disabled") {
         emit("click", props2.item);
+      } else {
+        emit("clickDisabledDate", props2.item);
       }
     };
     const renderTopInfo = () => {
@@ -6266,7 +6279,7 @@ const calendarMonthProps = {
 var stdin_default$1g = defineComponent({
   name: name$16,
   props: calendarMonthProps,
-  emits: ["click"],
+  emits: ["click", "clickDisabledDate"],
   setup(props2, {
     emit,
     slots
@@ -6425,7 +6438,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,
@@ -6550,7 +6564,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
@@ -6818,7 +6832,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 = () => {
@@ -9396,7 +9411,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) {
@@ -10027,7 +10042,7 @@ var stdin_default$Q = defineComponent({
     }, {
       immediate: true
     });
-    useLockScroll(rootRef, () => props2.lockScroll);
+    useLockScroll(rootRef, () => props2.lockScroll || dragging.value);
     useEventListener("touchmove", onTouchmove, {
       target: rootRef
     });
@@ -11202,6 +11217,8 @@ const navBarProps = {
   border: truthProp,
   leftText: String,
   rightText: String,
+  leftDisabled: Boolean,
+  rightDisabled: Boolean,
   leftArrow: Boolean,
   placeholder: Boolean,
   safeAreaInsetTop: Boolean,
@@ -11217,8 +11234,16 @@ var stdin_default$I = defineComponent({
   }) {
     const navBarRef = ref();
     const renderPlaceholder = usePlaceholder(navBarRef, bem$z);
-    const onClickLeft = (event) => emit("clickLeft", event);
-    const onClickRight = (event) => emit("clickRight", event);
+    const onClickLeft = (event) => {
+      if (!props2.leftDisabled) {
+        emit("clickLeft", event);
+      }
+    };
+    const onClickRight = (event) => {
+      if (!props2.rightDisabled) {
+        emit("clickRight", event);
+      }
+    };
     const renderLeft = () => {
       if (slots.left) {
         return slots.left();
@@ -11260,12 +11285,16 @@ var stdin_default$I = defineComponent({
       }, [createVNode("div", {
         "class": bem$z("content")
       }, [hasLeft && createVNode("div", {
-        "class": [bem$z("left"), props2.clickable ? HAPTICS_FEEDBACK : ""],
+        "class": [bem$z("left", {
+          disabled: props2.leftDisabled
+        }), props2.clickable && !props2.leftDisabled ? HAPTICS_FEEDBACK : ""],
         "onClick": onClickLeft
       }, [renderLeft()]), createVNode("div", {
         "class": [bem$z("title"), "van-ellipsis"]
       }, [slots.title ? slots.title() : title]), hasRight && createVNode("div", {
-        "class": [bem$z("right"), props2.clickable ? HAPTICS_FEEDBACK : ""],
+        "class": [bem$z("right", {
+          disabled: props2.rightDisabled
+        }), props2.clickable && !props2.rightDisabled ? HAPTICS_FEEDBACK : ""],
         "onClick": onClickRight
       }, [renderRight()])])]);
     };
@@ -13239,12 +13268,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 = () => {
@@ -13267,7 +13300,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");
     };
@@ -13278,7 +13311,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);
         });
       }
     });
@@ -14352,6 +14385,7 @@ var stdin_default$c = defineComponent({
     let opened;
     let lockClick2;
     let startOffset;
+    let isInBeforeClosing;
     const root = ref();
     const leftRef = ref();
     const rightRef = ref();
@@ -14428,14 +14462,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
         });
       }
     };
@@ -16455,7 +16497,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.6.7";
+const version = "4.7.0";
 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) {
@@ -1020,10 +1021,14 @@
     themeVarsScope: makeStringProp("local"),
     iconPrefix: String
   };
+  function insertDash(str) {
+    return str.replace(/([a-zA-Z])(\d)/g, "$1-$2");
+  }
   function mapThemeVarsToCSSVars(themeVars) {
     const cssVars = {};
     Object.keys(themeVars).forEach((key) => {
-      cssVars[`--van-${kebabCase(key)}`] = themeVars[key];
+      const formattedKey = insertDash(kebabCase(key));
+      cssVars[`--van-${formattedKey}`] = themeVars[key];
     });
     return cssVars;
   }
@@ -5447,7 +5452,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
@@ -5481,6 +5486,12 @@
         detailFocused.value = key === "addressDetail";
         emit("focus", key);
       };
+      const onChange = (key, value) => {
+        emit("change", {
+          key,
+          value
+        });
+      };
       const rules = vue.computed(() => {
         const {
           validator,
@@ -5592,7 +5603,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,
@@ -5600,7 +5611,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"),
@@ -6592,7 +6603,7 @@
       offset: makeNumberProp(0),
       rowHeight: String
     },
-    emits: ["click"],
+    emits: ["click", "clickDisabledDate"],
     setup(props2, {
       emit,
       slots
@@ -6638,6 +6649,8 @@
       const onClick = () => {
         if (props2.item.type !== "disabled") {
           emit("click", props2.item);
+        } else {
+          emit("clickDisabledDate", props2.item);
         }
       };
       const renderTopInfo = () => {
@@ -6724,7 +6737,7 @@
   var stdin_default$1g = vue.defineComponent({
     name: name$16,
     props: calendarMonthProps,
-    emits: ["click"],
+    emits: ["click", "clickDisabledDate"],
     setup(props2, {
       emit,
       slots
@@ -6883,7 +6896,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,
@@ -7008,7 +7022,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
@@ -7276,7 +7290,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 = () => {
@@ -9834,7 +9849,7 @@
   }
   function showDialog(options) {
     if (!inBrowser$1) {
-      return Promise.resolve();
+      return Promise.resolve(void 0);
     }
     return new Promise((resolve, reject) => {
       if (!instance$2) {
@@ -10462,7 +10477,7 @@
       }, {
         immediate: true
       });
-      useLockScroll(rootRef, () => props2.lockScroll);
+      useLockScroll(rootRef, () => props2.lockScroll || dragging.value);
       useEventListener("touchmove", onTouchmove, {
         target: rootRef
       });
@@ -11631,6 +11646,8 @@
     border: truthProp,
     leftText: String,
     rightText: String,
+    leftDisabled: Boolean,
+    rightDisabled: Boolean,
     leftArrow: Boolean,
     placeholder: Boolean,
     safeAreaInsetTop: Boolean,
@@ -11646,8 +11663,16 @@
     }) {
       const navBarRef = vue.ref();
       const renderPlaceholder = usePlaceholder(navBarRef, bem$z);
-      const onClickLeft = (event) => emit("clickLeft", event);
-      const onClickRight = (event) => emit("clickRight", event);
+      const onClickLeft = (event) => {
+        if (!props2.leftDisabled) {
+          emit("clickLeft", event);
+        }
+      };
+      const onClickRight = (event) => {
+        if (!props2.rightDisabled) {
+          emit("clickRight", event);
+        }
+      };
       const renderLeft = () => {
         if (slots.left) {
           return slots.left();
@@ -11689,12 +11714,16 @@
         }, [vue.createVNode("div", {
           "class": bem$z("content")
         }, [hasLeft && vue.createVNode("div", {
-          "class": [bem$z("left"), props2.clickable ? HAPTICS_FEEDBACK : ""],
+          "class": [bem$z("left", {
+            disabled: props2.leftDisabled
+          }), props2.clickable && !props2.leftDisabled ? HAPTICS_FEEDBACK : ""],
           "onClick": onClickLeft
         }, [renderLeft()]), vue.createVNode("div", {
           "class": [bem$z("title"), "van-ellipsis"]
         }, [slots.title ? slots.title() : title]), hasRight && vue.createVNode("div", {
-          "class": [bem$z("right"), props2.clickable ? HAPTICS_FEEDBACK : ""],
+          "class": [bem$z("right", {
+            disabled: props2.rightDisabled
+          }), props2.clickable && !props2.rightDisabled ? HAPTICS_FEEDBACK : ""],
           "onClick": onClickRight
         }, [renderRight()])])]);
       };
@@ -14477,12 +14506,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 = () => {
@@ -14505,7 +14538,7 @@
         if (state.ctx) {
           state.ctx.clearRect(0, 0, state.width, state.height);
           state.ctx.closePath();
-          setCanvasBgColor();
+          setCanvasBgColor(state.ctx);
         }
         emit("clear");
       };
@@ -14516,7 +14549,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);
           });
         }
       });
@@ -15587,6 +15620,7 @@
       let opened;
       let lockClick2;
       let startOffset;
+      let isInBeforeClosing;
       const root = vue.ref();
       const leftRef = vue.ref();
       const rightRef = vue.ref();
@@ -15663,14 +15697,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
           });
         }
       };
@@ -17667,7 +17709,7 @@
       });
     }
   };
-  const version = "4.6.7";
+  const version = "4.7.0";
   function install(app) {
     const components = [
       ActionBar,