vant 4.0.0-alpha.4 → 4.0.0-rc.0

package/es/empty/Empty.mjs

@@ -1,14 +1,8 @@
 import { createVNode as _createVNode } from "vue";
 import { defineComponent } from "vue";
+import { useId } from "../composables/use-id.mjs";
 import { getSizeStyle, makeStringProp, createNamespace } from "../utils/index.mjs";
-import { renderError, renderSearch, renderNetwork, renderMaterial } from "./Images.mjs";
 const [name, bem] = createNamespace("empty");
-const PRESET_IMAGES = {
-  error: renderError,
-  search: renderSearch,
-  network: renderNetwork,
-  default: renderMaterial
-};
 const emptyProps = {
   image: makeStringProp("default"),
   imageSize: [Number, String, Array],
@@ -20,15 +14,6 @@ var stdin_default = defineComponent({
   setup(props, {
     slots
   }) {
-    const renderImage = () => {
-      var _a;
-      if (slots.image) {
-        return slots.image();
-      }
-      return ((_a = PRESET_IMAGES[props.image]) == null ? void 0 : _a.call(PRESET_IMAGES)) || _createVNode("img", {
-        "src": props.image
-      }, null);
-    };
     const renderDescription = () => {
       const description = slots.description ? slots.description() : props.description;
       if (description) {
@@ -44,6 +29,286 @@ var stdin_default = defineComponent({
         }, [slots.default()]);
       }
     };
+    const baseId = useId();
+    const getId = (num) => `${baseId}-${num}`;
+    const getUrlById = (num) => `url(#${getId(num)})`;
+    const renderStop = (color, offset, opacity) => _createVNode("stop", {
+      "stop-color": color,
+      "offset": `${offset}%`,
+      "stop-opacity": opacity
+    }, null);
+    const renderStops = (fromColor, toColor) => [renderStop(fromColor, 0), renderStop(toColor, 100)];
+    const renderShadow = (id) => [_createVNode("defs", null, [_createVNode("radialGradient", {
+      "id": getId(id),
+      "cx": "50%",
+      "cy": "54%",
+      "fx": "50%",
+      "fy": "54%",
+      "r": "297%",
+      "gradientTransform": "matrix(-.16 0 0 -.33 .58 .72)"
+    }, [renderStop("#EBEDF0", 0), renderStop("#F2F3F5", 100, 0.3)])]), _createVNode("ellipse", {
+      "fill": getUrlById(id),
+      "opacity": ".8",
+      "cx": "80",
+      "cy": "140",
+      "rx": "46",
+      "ry": "8"
+    }, null)];
+    const renderBuilding = () => [_createVNode("defs", null, [_createVNode("linearGradient", {
+      "id": getId("a"),
+      "x1": "64%",
+      "y1": "100%",
+      "x2": "64%"
+    }, [renderStop("#FFF", 0, 0.5), renderStop("#F2F3F5", 100)])]), _createVNode("g", {
+      "opacity": ".8"
+    }, [_createVNode("path", {
+      "d": "M36 131V53H16v20H2v58h34z",
+      "fill": getUrlById("a")
+    }, null), _createVNode("path", {
+      "d": "M123 15h22v14h9v77h-31V15z",
+      "fill": getUrlById("a")
+    }, null)])];
+    const renderCloud = () => [_createVNode("defs", null, [_createVNode("linearGradient", {
+      "id": getId("b"),
+      "x1": "64%",
+      "y1": "97%",
+      "x2": "64%",
+      "y2": "0%"
+    }, [renderStop("#F2F3F5", 0, 0.3), renderStop("#F2F3F5", 100)])]), _createVNode("g", {
+      "opacity": ".8"
+    }, [_createVNode("path", {
+      "d": "M87 6c3 0 7 3 8 6a8 8 0 1 1-1 16H80a7 7 0 0 1-8-6c0-4 3-7 6-7 0-5 4-9 9-9Z",
+      "fill": getUrlById("b")
+    }, null), _createVNode("path", {
+      "d": "M19 23c2 0 3 1 4 3 2 0 4 2 4 4a4 4 0 0 1-4 3v1h-7v-1l-1 1c-2 0-3-2-3-4 0-1 1-3 3-3 0-2 2-4 4-4Z",
+      "fill": getUrlById("b")
+    }, null)])];
+    const renderNetwork = () => _createVNode("svg", {
+      "viewBox": "0 0 160 160"
+    }, [_createVNode("defs", null, [_createVNode("linearGradient", {
+      "id": getId(1),
+      "x1": "64%",
+      "y1": "100%",
+      "x2": "64%"
+    }, [renderStop("#FFF", 0, 0.5), renderStop("#F2F3F5", 100)]), _createVNode("linearGradient", {
+      "id": getId(2),
+      "x1": "50%",
+      "x2": "50%",
+      "y2": "84%"
+    }, [renderStop("#EBEDF0", 0), renderStop("#DCDEE0", 100, 0)]), _createVNode("linearGradient", {
+      "id": getId(3),
+      "x1": "100%",
+      "x2": "100%",
+      "y2": "100%"
+    }, [renderStops("#EAEDF0", "#DCDEE0")]), _createVNode("radialGradient", {
+      "id": getId(4),
+      "cx": "50%",
+      "cy": "0%",
+      "fx": "50%",
+      "fy": "0%",
+      "r": "100%",
+      "gradientTransform": "matrix(0 1 -.54 0 .5 -.5)"
+    }, [renderStop("#EBEDF0", 0), renderStop("#FFF", 100, 0)])]), _createVNode("g", {
+      "fill": "none"
+    }, [renderBuilding(), _createVNode("path", {
+      "fill": getUrlById(4),
+      "d": "M0 139h160v21H0z"
+    }, null), _createVNode("path", {
+      "d": "M80 54a7 7 0 0 1 3 13v27l-2 2h-2a2 2 0 0 1-2-2V67a7 7 0 0 1 3-13z",
+      "fill": getUrlById(2)
+    }, null), _createVNode("g", {
+      "opacity": ".6",
+      "stroke-linecap": "round",
+      "stroke-width": "7"
+    }, [_createVNode("path", {
+      "d": "M64 47a19 19 0 0 0-5 13c0 5 2 10 5 13",
+      "stroke": getUrlById(3)
+    }, null), _createVNode("path", {
+      "d": "M53 36a34 34 0 0 0 0 48",
+      "stroke": getUrlById(3)
+    }, null), _createVNode("path", {
+      "d": "M95 73a19 19 0 0 0 6-13c0-5-2-9-6-13",
+      "stroke": getUrlById(3)
+    }, null), _createVNode("path", {
+      "d": "M106 84a34 34 0 0 0 0-48",
+      "stroke": getUrlById(3)
+    }, null)]), _createVNode("g", {
+      "transform": "translate(31 105)"
+    }, [_createVNode("rect", {
+      "fill": "#EBEDF0",
+      "width": "98",
+      "height": "34",
+      "rx": "2"
+    }, null), _createVNode("rect", {
+      "fill": "#FFF",
+      "x": "9",
+      "y": "8",
+      "width": "80",
+      "height": "18",
+      "rx": "1.1"
+    }, null), _createVNode("rect", {
+      "fill": "#EBEDF0",
+      "x": "15",
+      "y": "12",
+      "width": "18",
+      "height": "6",
+      "rx": "1.1"
+    }, null)])])]);
+    const renderMaterial = () => _createVNode("svg", {
+      "viewBox": "0 0 160 160"
+    }, [_createVNode("defs", null, [_createVNode("linearGradient", {
+      "x1": "50%",
+      "x2": "50%",
+      "y2": "100%",
+      "id": getId(5)
+    }, [renderStops("#F2F3F5", "#DCDEE0")]), _createVNode("linearGradient", {
+      "x1": "95%",
+      "y1": "48%",
+      "x2": "5.5%",
+      "y2": "51%",
+      "id": getId(6)
+    }, [renderStops("#EAEDF1", "#DCDEE0")]), _createVNode("linearGradient", {
+      "y1": "45%",
+      "x2": "100%",
+      "y2": "54%",
+      "id": getId(7)
+    }, [renderStops("#EAEDF1", "#DCDEE0")])]), renderBuilding(), renderCloud(), _createVNode("g", {
+      "transform": "translate(36 50)",
+      "fill": "none"
+    }, [_createVNode("g", {
+      "transform": "translate(8)"
+    }, [_createVNode("rect", {
+      "fill": "#EBEDF0",
+      "opacity": ".6",
+      "x": "38",
+      "y": "13",
+      "width": "36",
+      "height": "53",
+      "rx": "2"
+    }, null), _createVNode("rect", {
+      "fill": getUrlById(5),
+      "width": "64",
+      "height": "66",
+      "rx": "2"
+    }, null), _createVNode("rect", {
+      "fill": "#FFF",
+      "x": "6",
+      "y": "6",
+      "width": "52",
+      "height": "55",
+      "rx": "1"
+    }, null), _createVNode("g", {
+      "transform": "translate(15 17)",
+      "fill": getUrlById(6)
+    }, [_createVNode("rect", {
+      "width": "34",
+      "height": "6",
+      "rx": "1"
+    }, null), _createVNode("path", {
+      "d": "M0 14h34v6H0z"
+    }, null), _createVNode("rect", {
+      "y": "28",
+      "width": "34",
+      "height": "6",
+      "rx": "1"
+    }, null)])]), _createVNode("rect", {
+      "fill": getUrlById(7),
+      "y": "61",
+      "width": "88",
+      "height": "28",
+      "rx": "1"
+    }, null), _createVNode("rect", {
+      "fill": "#F7F8FA",
+      "x": "29",
+      "y": "72",
+      "width": "30",
+      "height": "6",
+      "rx": "1"
+    }, null)])]);
+    const renderError = () => _createVNode("svg", {
+      "viewBox": "0 0 160 160"
+    }, [_createVNode("defs", null, [_createVNode("linearGradient", {
+      "x1": "50%",
+      "x2": "50%",
+      "y2": "100%",
+      "id": getId(8)
+    }, [renderStops("#EAEDF1", "#DCDEE0")])]), renderBuilding(), renderCloud(), renderShadow("c"), _createVNode("path", {
+      "d": "m59 60 21 21 21-21h3l9 9v3L92 93l21 21v3l-9 9h-3l-21-21-21 21h-3l-9-9v-3l21-21-21-21v-3l9-9h3Z",
+      "fill": getUrlById(8)
+    }, null)]);
+    const renderSearch = () => _createVNode("svg", {
+      "viewBox": "0 0 160 160"
+    }, [_createVNode("defs", null, [_createVNode("linearGradient", {
+      "x1": "50%",
+      "y1": "100%",
+      "x2": "50%",
+      "id": getId(9)
+    }, [renderStops("#EEE", "#D8D8D8")]), _createVNode("linearGradient", {
+      "x1": "100%",
+      "y1": "50%",
+      "y2": "50%",
+      "id": getId(10)
+    }, [renderStops("#F2F3F5", "#DCDEE0")]), _createVNode("linearGradient", {
+      "x1": "50%",
+      "x2": "50%",
+      "y2": "100%",
+      "id": getId(11)
+    }, [renderStops("#F2F3F5", "#DCDEE0")]), _createVNode("linearGradient", {
+      "x1": "50%",
+      "x2": "50%",
+      "y2": "100%",
+      "id": getId(12)
+    }, [renderStops("#FFF", "#F7F8FA")])]), renderBuilding(), renderCloud(), renderShadow("d"), _createVNode("g", {
+      "transform": "rotate(-45 113 -4)",
+      "fill": "none"
+    }, [_createVNode("rect", {
+      "fill": getUrlById(9),
+      "x": "24",
+      "y": "52.8",
+      "width": "5.8",
+      "height": "19",
+      "rx": "1"
+    }, null), _createVNode("rect", {
+      "fill": getUrlById(10),
+      "x": "22.1",
+      "y": "67.3",
+      "width": "9.9",
+      "height": "28",
+      "rx": "1"
+    }, null), _createVNode("circle", {
+      "stroke": getUrlById(11),
+      "stroke-width": "8",
+      "cx": "27",
+      "cy": "27",
+      "r": "27"
+    }, null), _createVNode("circle", {
+      "fill": getUrlById(12),
+      "cx": "27",
+      "cy": "27",
+      "r": "16"
+    }, null), _createVNode("path", {
+      "d": "M37 7c-8 0-15 5-16 12",
+      "stroke": getUrlById(11),
+      "stroke-width": "3",
+      "opacity": ".5",
+      "stroke-linecap": "round",
+      "transform": "rotate(45 29 13)"
+    }, null)])]);
+    const renderImage = () => {
+      var _a;
+      if (slots.image) {
+        return slots.image();
+      }
+      const PRESET_IMAGES = {
+        error: renderError,
+        search: renderSearch,
+        network: renderNetwork,
+        default: renderMaterial
+      };
+      return ((_a = PRESET_IMAGES[props.image]) == null ? void 0 : _a.call(PRESET_IMAGES)) || _createVNode("img", {
+        "src": props.image
+      }, null);
+    };
     return () => _createVNode("div", {
       "class": bem()
     }, [_createVNode("div", {

package/es/empty/index.d.ts

@@ -5,7 +5,7 @@ export declare const Empty: import("../utils").WithInstall<import("vue").DefineC
     };
     imageSize: import("vue").PropType<import("../utils").Numeric | [import("../utils").Numeric, import("../utils").Numeric]>;
     description: StringConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     image: {
         type: import("vue").PropType<string>;
         default: string;

package/es/field/Field.d.ts

@@ -209,7 +209,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: null;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "focus" | "blur" | "keypress" | "clickInput" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue")[], "clear" | "focus" | "blur" | "keypress" | "clickInput" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "focus" | "blur" | "keypress" | "clickInput" | "endValidate" | "startValidate" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue")[], "clear" | "focus" | "blur" | "keypress" | "clickInput" | "endValidate" | "startValidate" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     icon: StringConstructor;
     size: PropType<import("../cell").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -297,17 +297,19 @@ declare const _default: import("vue").DefineComponent<{
     onKeypress?: ((...args: any[]) => any) | undefined;
     onClear?: ((...args: any[]) => any) | undefined;
     onClickInput?: ((...args: any[]) => any) | undefined;
+    onEndValidate?: ((...args: any[]) => any) | undefined;
+    onStartValidate?: ((...args: any[]) => any) | undefined;
     onClickLeftIcon?: ((...args: any[]) => any) | undefined;
     onClickRightIcon?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     type: FieldType;
+    required: boolean;
     center: boolean;
     autofocus: boolean;
     disabled: boolean;
     isLink: boolean;
     border: boolean;
-    required: boolean;
     clickable: boolean | null;
     clearable: boolean;
     clearIcon: string;

package/es/field/Field.mjs

@@ -1,9 +1,9 @@
 import { createTextVNode as _createTextVNode, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 import { ref, watch, provide, computed, nextTick, reactive, onMounted, defineComponent } from "vue";
 import { isDef, extend, addUnit, toArray, FORM_KEY, numericProp, unknownProp, resetScroll, formatNumber, preventDefault, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
-import { cutString, runSyncRule, endComposing, mapInputType, startComposing, getRuleMessage, resizeTextarea, getStringLength, runRuleValidator } from "./utils.mjs";
+import { cutString, runSyncRule, endComposing, mapInputType, isEmptyValue, startComposing, getRuleMessage, resizeTextarea, getStringLength, runRuleValidator } from "./utils.mjs";
 import { cellSharedProps } from "../cell/Cell.mjs";
-import { CUSTOM_FIELD_INJECTION_KEY, useParent } from "@vant/use";
+import { useParent, useEventListener, CUSTOM_FIELD_INJECTION_KEY } from "@vant/use";
 import { useId } from "../composables/use-id.mjs";
 import { useExpose } from "../composables/use-expose.mjs";
 import { Icon } from "../icon/index.mjs";
@@ -58,7 +58,7 @@ const fieldProps = extend({}, cellSharedProps, fieldSharedProps, {
 var stdin_default = defineComponent({
   name,
   props: fieldProps,
-  emits: ["blur", "focus", "clear", "keypress", "clickInput", "clickLeftIcon", "clickRightIcon", "update:modelValue"],
+  emits: ["blur", "focus", "clear", "keypress", "clickInput", "endValidate", "startValidate", "clickLeftIcon", "clickRightIcon", "update:modelValue"],
   setup(props, {
     emit,
     slots
@@ -70,6 +70,7 @@ var stdin_default = defineComponent({
       validateMessage: ""
     });
     const inputRef = ref();
+    const clearIconRef = ref();
     const customValue = ref();
     const {
       parent: form
@@ -117,6 +118,9 @@ var stdin_default = defineComponent({
         return;
       }
       if (rule.validator) {
+        if (isEmptyValue(value) && rule.validateEmpty === false) {
+          return;
+        }
         return runRuleValidator(value, rule).then((result) => {
           if (result && typeof result === "string") {
             state.status = "failed";
@@ -132,18 +136,24 @@ var stdin_default = defineComponent({
       state.status = "unvalidated";
       state.validateMessage = "";
     };
+    const endValidate = () => emit("endValidate", {
+      status: state.status
+    });
     const validate = (rules = props.rules) => new Promise((resolve) => {
       resetValidation();
       if (rules) {
+        emit("startValidate");
         runRules(rules).then(() => {
           if (state.status === "failed") {
             resolve({
               name: props.name,
               message: state.validateMessage
             });
+            endValidate();
           } else {
             state.status = "passed";
             resolve();
+            endValidate();
           }
         });
       } else {
@@ -376,9 +386,9 @@ var stdin_default = defineComponent({
     const renderFieldBody = () => [_createVNode("div", {
       "class": bem("body")
     }, [renderInput(), showClear.value && _createVNode(Icon, {
+      "ref": clearIconRef,
       "name": props.clearIcon,
-      "class": bem("clear"),
-      "onTouchstart": onClear
+      "class": bem("clear")
     }, null), renderRightIcon(), slots.button && _createVNode("div", {
       "class": bem("button")
     }, [slots.button()])]), renderWordLimit(), renderMessage()];
@@ -405,6 +415,12 @@ var stdin_default = defineComponent({
       updateValue(getModelValue(), props.formatTrigger);
       nextTick(adjustTextareaSize);
     });
+    useEventListener("touchstart", onClear, {
+      target: computed(() => {
+        var _a;
+        return (_a = clearIconRef.value) == null ? void 0 : _a.$el;
+      })
+    });
     return () => {
       const disabled = getProp("disabled");
       const labelAlign = getProp("labelAlign");

package/es/field/index.d.ts

@@ -81,7 +81,7 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
         type: BooleanConstructor;
         default: null;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "focus" | "blur" | "keypress" | "clickInput" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue")[], "clear" | "focus" | "blur" | "keypress" | "clickInput" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "focus" | "blur" | "keypress" | "clickInput" | "endValidate" | "startValidate" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue")[], "clear" | "focus" | "blur" | "keypress" | "clickInput" | "endValidate" | "startValidate" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     icon: StringConstructor;
     size: import("vue").PropType<import("..").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -169,17 +169,19 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
     onKeypress?: ((...args: any[]) => any) | undefined;
     onClear?: ((...args: any[]) => any) | undefined;
     onClickInput?: ((...args: any[]) => any) | undefined;
+    onEndValidate?: ((...args: any[]) => any) | undefined;
+    onStartValidate?: ((...args: any[]) => any) | undefined;
     onClickLeftIcon?: ((...args: any[]) => any) | undefined;
     onClickRightIcon?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     type: import("./types").FieldType;
+    required: boolean;
     center: boolean;
     autofocus: boolean;
     disabled: boolean;
     isLink: boolean;
     border: boolean;
-    required: boolean;
     clickable: boolean | null;
     clearable: boolean;
     clearIcon: string;

package/es/field/types.d.ts

@@ -23,6 +23,7 @@ export declare type FieldRule = {
     required?: boolean;
     validator?: FieldRuleValidator;
     formatter?: FiledRuleFormatter;
+    validateEmpty?: boolean;
 };
 export declare type FieldValidationStatus = 'passed' | 'failed' | 'unvalidated';
 export declare type FieldFormSharedProps = 'colon' | 'disabled' | 'readonly' | 'labelWidth' | 'labelAlign' | 'inputAlign' | 'errorMessageAlign';

package/es/field/utils.d.ts

@@ -1,5 +1,6 @@
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import type { FieldRule, FieldType, FieldAutosizeConfig } from './types';
+export declare function isEmptyValue(value: unknown): boolean;
 export declare function runSyncRule(value: unknown, rule: FieldRule): boolean;
 export declare function runRuleValidator(value: unknown, rule: FieldRule): Promise<unknown>;
 export declare function getRuleMessage(value: unknown, rule: FieldRule): string;

package/es/field/utils.mjs

@@ -15,8 +15,13 @@ function isEmptyValue(value) {
   return !value;
 }
 function runSyncRule(value, rule) {
-  if (rule.required && isEmptyValue(value)) {
-    return false;
+  if (isEmptyValue(value)) {
+    if (rule.required) {
+      return false;
+    }
+    if (rule.validateEmpty === false) {
+      return true;
+    }
   }
   if (rule.pattern && !rule.pattern.test(String(value))) {
     return false;
@@ -93,6 +98,7 @@ export {
   endComposing,
   getRuleMessage,
   getStringLength,
+  isEmptyValue,
   mapInputType,
   resizeTextarea,
   runRuleValidator,

package/es/grid/Grid.d.ts

@@ -44,7 +44,7 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     square: BooleanConstructor;
     center: {
         type: BooleanConstructor;

package/es/grid/index.d.ts

@@ -17,7 +17,7 @@ export declare const Grid: import("../utils").WithInstall<import("vue").DefineCo
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     square: BooleanConstructor;
     center: {
         type: BooleanConstructor;

package/es/grid-item/GridItem.d.ts

@@ -26,7 +26,7 @@ declare const _default: import("vue").DefineComponent<{
     iconColor: StringConstructor;
     iconPrefix: StringConstructor;
     badgeProps: PropType<Partial<BadgeProps>>;
-}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     to: PropType<import("vue-router").RouteLocationRaw>;
     url: StringConstructor;
     replace: BooleanConstructor;

package/es/grid-item/index.d.ts

@@ -10,7 +10,7 @@ export declare const GridItem: import("../utils").WithInstall<import("vue").Defi
     iconColor: StringConstructor;
     iconPrefix: StringConstructor;
     badgeProps: import("vue").PropType<Partial<import("..").BadgeProps>>;
-}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
     url: StringConstructor;
     replace: BooleanConstructor;

package/es/icon/Icon.d.ts

@@ -26,7 +26,7 @@ declare const _default: import("vue").DefineComponent<{
     color: StringConstructor;
     badgeProps: PropType<Partial<BadgeProps>>;
     classPrefix: StringConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     dot: BooleanConstructor;
     tag: {
         type: PropType<keyof HTMLElementTagNameMap>;

package/es/icon/index.d.ts

@@ -10,7 +10,7 @@ export declare const Icon: import("../utils").WithInstall<import("vue").DefineCo
     color: StringConstructor;
     badgeProps: import("vue").PropType<Partial<import("..").BadgeProps>>;
     classPrefix: StringConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     dot: BooleanConstructor;
     tag: {
         type: import("vue").PropType<keyof HTMLElementTagNameMap>;

package/es/image-preview/ImagePreviewItem.mjs

@@ -1,7 +1,8 @@
 import { createVNode as _createVNode } from "vue";
-import { watch, computed, reactive, defineComponent } from "vue";
+import { ref, watch, computed, reactive, defineComponent } from "vue";
 import { clamp, numericProp, preventDefault, createNamespace, makeRequiredProp } from "../utils/index.mjs";
 import { useTouch } from "../composables/use-touch.mjs";
+import { useEventListener } from "@vant/use";
 import { Image } from "../image/index.mjs";
 import { Loading } from "../loading/index.mjs";
 import { SwipeItem } from "../swipe-item/index.mjs";
@@ -32,6 +33,7 @@ var stdin_default = defineComponent({
       displayHeight: 0
     });
     const touch = useTouch();
+    const swipeItem = ref();
     const vertical = computed(() => {
       const {
         rootWidth,
@@ -217,6 +219,12 @@ var stdin_default = defineComponent({
         resetScale();
       }
     });
+    useEventListener("touchmove", onTouchMove, {
+      target: computed(() => {
+        var _a;
+        return (_a = swipeItem.value) == null ? void 0 : _a.$el;
+      })
+    });
     return () => {
       const imageSlots = {
         loading: () => _createVNode(Loading, {
@@ -224,9 +232,9 @@ var stdin_default = defineComponent({
         }, null)
       };
       return _createVNode(SwipeItem, {
+        "ref": swipeItem,
         "class": bem("swipe-item"),
-        "onTouchstart": onTouchStart,
-        "onTouchmove": onTouchMove,
+        "onTouchstartPassive": onTouchStart,
         "onTouchend": onTouchEnd,
         "onTouchcancel": onTouchEnd
       }, {