vant 4.7.1 → 4.7.3

package/lib/vant.es.js

@@ -1,4 +1,4 @@
-import { unref, ref, reactive, inject, watch, onMounted, nextTick, createVNode, defineComponent, getCurrentInstance, computed, onActivated, onDeactivated, onBeforeUnmount, provide, watchEffect, mergeProps, Transition, withDirectives, vShow, Teleport, Fragment, onBeforeUpdate, createTextVNode, onUnmounted, createApp, resolveDirective, withKeys, onUpdated, Comment, Text, h } from "vue";
+import { unref, ref, reactive, inject, watch, onMounted, nextTick, createVNode, defineComponent, getCurrentInstance, computed, onActivated, onDeactivated, onBeforeUnmount, provide, watchEffect, mergeProps, Transition, withDirectives, vShow, Teleport, Fragment, onBeforeUpdate, Comment, createTextVNode, onUnmounted, createApp, resolveDirective, withKeys, onUpdated, Text, h } from "vue";
 import { useWindowSize, useRect, useChildren, useParent, onMountedOrActivated, getScrollParent, useEventListener, cancelRaf, raf, useScrollParent, usePageVisibility, doubleRaf, CUSTOM_FIELD_INJECTION_KEY, useCustomFieldValue, inBrowser as inBrowser$1, useToggle, useCountDown, useClickAway } from "@vant/use";
 import { normalizeClass, stringifyStyle, normalizeStyle } from "@vue/shared";
 import { offsetModifier, createPopper } from "@vant/popperjs";
@@ -2608,6 +2608,7 @@ const tabsProps = {
   offsetTop: makeNumericProp(0),
   background: String,
   lazyRender: truthProp,
+  showHeader: truthProp,
   lineWidth: numericProp,
   lineHeight: numericProp,
   beforeChange: Function,
@@ -2909,13 +2910,13 @@ var stdin_default$1C = defineComponent({
     return () => createVNode("div", {
       "ref": root,
       "class": bem$1o([props2.type])
-    }, [props2.sticky ? createVNode(Sticky, {
+    }, [props2.showHeader ? props2.sticky ? createVNode(Sticky, {
       "container": root.value,
       "offsetTop": offsetTopPx.value,
       "onScroll": onStickyScroll
     }, {
       default: () => [renderHeader()]
-    }) : renderHeader(), createVNode(stdin_default$1D, {
+    }) : renderHeader() : null, createVNode(stdin_default$1D, {
       "ref": contentRef,
       "count": children.length,
       "inited": state.inited,
@@ -3262,8 +3263,8 @@ var stdin_default$1z = defineComponent({
     };
     const onCancel = () => emit("cancel");
     return () => {
-      var _a;
-      const childNodes = (_a = slots.default) == null ? void 0 : _a.call(slots);
+      var _a, _b;
+      const childNodes = (_b = (_a = slots.default) == null ? void 0 : _a.call(slots)) == null ? void 0 : _b.filter((node) => node.type !== Comment);
       const confirmButtonText = showNextButton() ? props2.nextStepText : props2.confirmButtonText;
       return createVNode("div", {
         "class": bem$1k()
@@ -3653,13 +3654,16 @@ const cellSharedProps = {
   center: Boolean,
   isLink: Boolean,
   border: truthProp,
-  required: Boolean,
   iconPrefix: String,
   valueClass: unknownProp,
   labelClass: unknownProp,
   titleClass: unknownProp,
   titleStyle: null,
   arrowDirection: String,
+  required: {
+    type: [Boolean, String],
+    default: null
+  },
   clickable: {
     type: Boolean,
     default: null
@@ -3740,7 +3744,7 @@ var stdin_default$1w = defineComponent({
       const clickable = (_a = props2.clickable) != null ? _a : isLink;
       const classes = {
         center,
-        required,
+        required: !!required,
         clickable,
         borderless: !border
       };
@@ -3767,6 +3771,7 @@ const formProps = {
   colon: Boolean,
   disabled: Boolean,
   readonly: Boolean,
+  required: [Boolean, String],
   showError: Boolean,
   labelWidth: numericProp,
   labelAlign: String,
@@ -4022,12 +4027,12 @@ const fieldSharedProps = {
   autocorrect: String,
   errorMessage: String,
   enterkeyhint: String,
+  clearTrigger: makeStringProp("focus"),
+  formatTrigger: makeStringProp("onChange"),
   spellcheck: {
     type: Boolean,
     default: null
   },
-  clearTrigger: makeStringProp("focus"),
-  formatTrigger: makeStringProp("onChange"),
   error: {
     type: Boolean,
     default: null
@@ -4103,6 +4108,14 @@ var stdin_default$1u = defineComponent({
       }
       return props2.modelValue;
     });
+    const showRequiredMark = computed(() => {
+      var _a;
+      const required = getProp("required");
+      if (required === "auto") {
+        return (_a = props2.rules) == null ? void 0 : _a.some((rule) => rule.required);
+      }
+      return required;
+    });
     const runRules = (rules) => rules.reduce((promise, rule) => promise.then(() => {
       if (state.status === "failed") {
         return;
@@ -4505,7 +4518,7 @@ var stdin_default$1u = defineComponent({
         "titleStyle": labelStyle.value,
         "valueClass": bem$1g("value"),
         "titleClass": [bem$1g("label", [labelAlign, {
-          required: props2.required
+          required: showRequiredMark.value
         }]), props2.labelClass],
         "arrowDirection": props2.arrowDirection
       }, {
@@ -5169,7 +5182,7 @@ var stdin_default$1q = defineComponent({
             "label": t$i("area"),
             "is-link": !disableArea,
             "modelValue": areaText.value,
-            "rules": rules.value.areaCode,
+            "rules": props2.showArea ? rules.value.areaCode : void 0,
             "placeholder": props2.areaPlaceholder || t$i("area"),
             "onFocus": () => onFocus("areaCode"),
             "onClick": () => {
@@ -10266,6 +10279,7 @@ var stdin_default$N = defineComponent({
     rootWidth: makeRequiredProp(Number),
     rootHeight: makeRequiredProp(Number),
     disableZoom: Boolean,
+    doubleScale: Boolean,
     closeOnClickOverlay: Boolean
   },
   emits: ["scale", "close", "longPress"],
@@ -10439,18 +10453,22 @@ var stdin_default$N = defineComponent({
       const TAP_TIME = 250;
       if (offsetX.value < TAP_OFFSET && offsetY.value < TAP_OFFSET) {
         if (deltaTime < TAP_TIME) {
-          if (doubleTapTimer) {
-            clearTimeout(doubleTapTimer);
-            doubleTapTimer = null;
-            toggleScale();
-          } else {
-            if (!props2.closeOnClickOverlay && event.target === ((_a = swipeItem.value) == null ? void 0 : _a.$el)) {
-              return;
-            }
-            doubleTapTimer = setTimeout(() => {
-              emit("close");
+          if (props2.doubleScale) {
+            if (doubleTapTimer) {
+              clearTimeout(doubleTapTimer);
               doubleTapTimer = null;
-            }, TAP_TIME);
+              toggleScale();
+            } else {
+              if (!props2.closeOnClickOverlay && event.target === ((_a = swipeItem.value) == null ? void 0 : _a.$el)) {
+                return;
+              }
+              doubleTapTimer = setTimeout(() => {
+                emit("close");
+                doubleTapTimer = null;
+              }, TAP_TIME);
+            }
+          } else {
+            emit("close");
           }
         } else if (deltaTime > LONG_PRESS_START_TIME) {
           emit("longPress");
@@ -10575,6 +10593,7 @@ const imagePreviewProps = {
   closeIcon: makeStringProp("clear"),
   transition: String,
   beforeClose: Function,
+  doubleScale: truthProp,
   overlayClass: unknownProp,
   overlayStyle: Object,
   swipeDuration: makeNumericProp(300),
@@ -10666,6 +10685,7 @@ var stdin_default$M = defineComponent({
         "rootWidth": state.rootWidth,
         "rootHeight": state.rootHeight,
         "disableZoom": state.disableZoom,
+        "doubleScale": props2.doubleScale,
         "closeOnClickOverlay": props2.closeOnClickOverlay,
         "onScale": emitScale,
         "onClose": emitClose,
@@ -10743,6 +10763,7 @@ const defaultConfig = {
   closeIcon: "clear",
   transition: void 0,
   beforeClose: void 0,
+  doubleScale: true,
   overlayStyle: void 0,
   overlayClass: void 0,
   startPosition: 0,
@@ -12962,7 +12983,9 @@ var stdin_default$v = defineComponent({
       return createVNode(Field, mergeProps({
         "ref": fieldRef,
         "type": "search",
-        "class": bem$m("field"),
+        "class": bem$m("field", {
+          "with-message": fieldAttrs.errorMessage
+        }),
         "border": false,
         "onBlur": onBlur,
         "onFocus": onFocus,
@@ -13233,37 +13256,37 @@ var stdin_default$r = defineComponent({
   }) {
     const canvasRef = ref();
     const wrapRef = ref();
-    const state = reactive({
-      width: 0,
-      height: 0,
-      ctx: null,
-      ratio: inBrowser ? window.devicePixelRatio : 1
+    const ctx = computed(() => {
+      if (!canvasRef.value)
+        return null;
+      return canvasRef.value.getContext("2d");
     });
-    let canvasRect;
     const isRenderCanvas = inBrowser ? hasCanvasSupport() : true;
+    let canvasWidth = 0;
+    let canvasHeight = 0;
+    let canvasRect;
     const touchStart = () => {
-      if (!state.ctx) {
+      if (!ctx.value) {
         return false;
       }
-      state.ctx.beginPath();
-      state.ctx.lineWidth = props2.lineWidth * state.ratio;
-      state.ctx.strokeStyle = props2.penColor;
+      ctx.value.beginPath();
+      ctx.value.lineWidth = props2.lineWidth;
+      ctx.value.strokeStyle = props2.penColor;
       canvasRect = useRect(canvasRef);
       emit("start");
     };
     const touchMove = (event) => {
-      var _a, _b;
-      if (!state.ctx) {
+      if (!ctx.value) {
         return false;
       }
       preventDefault(event);
       const touch = event.touches[0];
-      const mouseX = (touch.clientX - ((canvasRect == null ? void 0 : canvasRect.left) || 0)) * state.ratio;
-      const mouseY = (touch.clientY - ((canvasRect == null ? void 0 : canvasRect.top) || 0)) * state.ratio;
-      state.ctx.lineCap = "round";
-      state.ctx.lineJoin = "round";
-      (_a = state.ctx) == null ? void 0 : _a.lineTo(mouseX, mouseY);
-      (_b = state.ctx) == null ? void 0 : _b.stroke();
+      const mouseX = touch.clientX - ((canvasRect == null ? void 0 : canvasRect.left) || 0);
+      const mouseY = touch.clientY - ((canvasRect == null ? void 0 : canvasRect.top) || 0);
+      ctx.value.lineCap = "round";
+      ctx.value.lineJoin = "round";
+      ctx.value.lineTo(mouseX, mouseY);
+      ctx.value.stroke();
       emit("signing", event);
     };
     const touchEnd = (event) => {
@@ -13280,10 +13303,10 @@ var stdin_default$r = defineComponent({
       }
       return canvas.toDataURL() === empty.toDataURL();
     };
-    const setCanvasBgColor = (ctx) => {
-      if (ctx && props2.backgroundColor) {
-        ctx.fillStyle = props2.backgroundColor;
-        ctx.fillRect(0, 0, state.width, state.height);
+    const setCanvasBgColor = (ctx2) => {
+      if (ctx2 && props2.backgroundColor) {
+        ctx2.fillStyle = props2.backgroundColor;
+        ctx2.fillRect(0, 0, canvasWidth, canvasHeight);
       }
     };
     const submit = () => {
@@ -13303,23 +13326,35 @@ var stdin_default$r = defineComponent({
       });
     };
     const clear = () => {
-      if (state.ctx) {
-        state.ctx.clearRect(0, 0, state.width, state.height);
-        state.ctx.closePath();
-        setCanvasBgColor(state.ctx);
+      if (ctx.value) {
+        ctx.value.clearRect(0, 0, canvasWidth, canvasHeight);
+        ctx.value.closePath();
+        setCanvasBgColor(ctx.value);
       }
       emit("clear");
     };
-    onMounted(() => {
+    const initialize = () => {
       var _a, _b, _c;
-      if (isRenderCanvas) {
-        state.ctx = (_a = canvasRef.value) == null ? void 0 : _a.getContext("2d");
-        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(state.ctx);
-        });
+      if (isRenderCanvas && canvasRef.value) {
+        const canvas = canvasRef.value;
+        const dpr = inBrowser ? window.devicePixelRatio : 1;
+        canvasWidth = canvas.width = (((_a = wrapRef.value) == null ? void 0 : _a.offsetWidth) || 0) * dpr;
+        canvasHeight = canvas.height = (((_b = wrapRef.value) == null ? void 0 : _b.offsetHeight) || 0) * dpr;
+        (_c = ctx.value) == null ? void 0 : _c.scale(dpr, dpr);
+        setCanvasBgColor(ctx.value);
       }
+    };
+    const resize = () => {
+      if (ctx.value) {
+        const data = ctx.value.getImageData(0, 0, canvasWidth, canvasHeight);
+        initialize();
+        ctx.value.putImageData(data, 0, 0);
+      }
+    };
+    watch(windowWidth, resize);
+    onMounted(initialize);
+    useExpose({
+      resize
     });
     return () => createVNode("div", {
       "class": bem$i()
@@ -13328,8 +13363,6 @@ var stdin_default$r = defineComponent({
       "ref": wrapRef
     }, [isRenderCanvas ? createVNode("canvas", {
       "ref": canvasRef,
-      "width": state.width,
-      "height": state.height,
       "onTouchstartPassive": touchStart,
       "onTouchmove": touchMove,
       "onTouchend": touchEnd
@@ -15287,6 +15320,7 @@ var stdin_default$5 = defineComponent({
     const inputRef = ref();
     const urls = [];
     const reuploadIndex = ref(-1);
+    const isReuploading = ref(false);
     const getDetail = (index = props2.modelValue.length) => ({
       name: props2.name,
       index
@@ -15423,8 +15457,15 @@ var stdin_default$5 = defineComponent({
       emit("delete", item, getDetail(index));
     };
     const reuploadImage = (index) => {
-      chooseFile();
+      isReuploading.value = true;
       reuploadIndex.value = index;
+      nextTick(() => chooseFile());
+    };
+    const onInputClick = () => {
+      if (!isReuploading.value) {
+        reuploadIndex.value = -1;
+      }
+      isReuploading.value = false;
     };
     const renderPreviewItem = (item, index) => {
       const needPickData = ["imageFit", "deletable", "reupload", "previewSize", "beforeDelete"];
@@ -15457,7 +15498,8 @@ var stdin_default$5 = defineComponent({
         "capture": props2.capture,
         "multiple": props2.multiple && reuploadIndex.value === -1,
         "disabled": props2.disabled,
-        "onChange": onChange
+        "onChange": onChange,
+        "onClick": onInputClick
       }, null);
       if (slots.default) {
         return withDirectives(createVNode("div", {
@@ -16503,7 +16545,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.7.1";
+const version = "4.7.3";
 function install(app) {
   const components = [
     ActionBar,