vant 4.0.0-alpha.3 → 4.0.0-beta.1

package/lib/field/Field.js

@@ -81,15 +81,15 @@ const fieldProps = (0, import_utils.extend)({}, import_Cell.cellSharedProps, fie
 var stdin_default = (0, import_vue2.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
   }) {
     const id = (0, import_use_id.useId)();
     const state = (0, import_vue2.reactive)({
+      status: "unvalidated",
       focused: false,
-      validateFailed: false,
       validateMessage: ""
     });
     const inputRef = (0, import_vue2.ref)();
@@ -125,7 +125,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       return props.modelValue;
     });
     const runRules = (rules) => rules.reduce((promise, rule) => promise.then(() => {
-      if (state.validateFailed) {
+      if (state.status === "failed") {
         return;
       }
       let {
@@ -135,39 +135,47 @@ var stdin_default = (0, import_vue2.defineComponent)({
         value = rule.formatter(value, rule);
       }
       if (!(0, import_utils2.runSyncRule)(value, rule)) {
-        state.validateFailed = true;
+        state.status = "failed";
         state.validateMessage = (0, import_utils2.getRuleMessage)(value, rule);
         return;
       }
       if (rule.validator) {
+        if ((0, import_utils2.isEmptyValue)(value) && rule.validateEmpty === false) {
+          return;
+        }
         return (0, import_utils2.runRuleValidator)(value, rule).then((result) => {
           if (result && typeof result === "string") {
-            state.validateFailed = true;
+            state.status = "failed";
             state.validateMessage = result;
           } else if (result === false) {
-            state.validateFailed = true;
+            state.status = "failed";
             state.validateMessage = (0, import_utils2.getRuleMessage)(value, rule);
           }
         });
       }
     }), Promise.resolve());
     const resetValidation = () => {
-      if (state.validateFailed) {
-        state.validateFailed = false;
-        state.validateMessage = "";
-      }
+      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.validateFailed) {
+          if (state.status === "failed") {
             resolve({
               name: props.name,
               message: state.validateMessage
             });
+            endValidate();
           } else {
+            state.status = "passed";
             resolve();
+            endValidate();
           }
         });
       } else {
@@ -270,7 +278,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       if (typeof props.error === "boolean") {
         return props.error;
       }
-      if (form && form.props.showError && state.validateFailed) {
+      if (form && form.props.showError && state.status === "failed") {
         return true;
       }
     });
@@ -296,6 +304,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       emit("keypress", event);
     };
     const getInputId = () => props.id || `${id}-input`;
+    const getValidationStatus = () => state.status;
     const renderInput = () => {
       const controlClass = bem("control", [getProp("inputAlign"), {
         error: showError.value,
@@ -314,7 +323,6 @@ var stdin_default = (0, import_vue2.defineComponent)({
         name: props.name,
         rows: props.rows !== void 0 ? +props.rows : void 0,
         class: controlClass,
-        value: props.modelValue,
         disabled: getProp("disabled"),
         readonly: getProp("readonly"),
         autofocus: props.autofocus,
@@ -411,7 +419,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
       focus,
       validate,
       formValue,
-      resetValidation
+      resetValidation,
+      getValidationStatus
     });
     (0, import_vue2.provide)(import_use.CUSTOM_FIELD_INJECTION_KEY, {
       customValue,

package/lib/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;
@@ -193,7 +195,7 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
 }>>;
 export default Field;
 export type { FieldProps };
-export type { FieldType, FieldRule, FieldInstance, FieldTextAlign, FieldRuleMessage, FieldClearTrigger, FieldFormatTrigger, FieldRuleValidator, FiledRuleFormatter, FieldValidateError, FieldAutosizeConfig, FieldValidateTrigger, } from './types';
+export type { FieldType, FieldRule, FieldInstance, FieldTextAlign, FieldRuleMessage, FieldClearTrigger, FieldFormatTrigger, FieldRuleValidator, FiledRuleFormatter, FieldValidateError, FieldAutosizeConfig, FieldValidateTrigger, FieldValidationStatus, } from './types';
 declare module 'vue' {
     interface GlobalComponents {
         VanField: typeof Field;

package/lib/field/types.d.ts

@@ -23,13 +23,16 @@ 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';
 export declare type FieldExpose = {
     blur: () => void | undefined;
     focus: () => void | undefined;
     validate: (rules?: FieldRule[] | undefined) => Promise<void | FieldValidateError>;
     resetValidation: () => void;
+    getValidationStatus: () => FieldValidationStatus;
     /** @private */
     formValue: ComputedRef<unknown>;
 };

package/lib/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/lib/field/utils.js

@@ -21,6 +21,7 @@ __export(stdin_exports, {
   endComposing: () => endComposing,
   getRuleMessage: () => getRuleMessage,
   getStringLength: () => getStringLength,
+  isEmptyValue: () => isEmptyValue,
   mapInputType: () => mapInputType,
   resizeTextarea: () => resizeTextarea,
   runRuleValidator: () => runRuleValidator,
@@ -39,8 +40,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;

package/lib/form/Form.js

@@ -122,6 +122,10 @@ var stdin_default = (0, import_vue2.defineComponent)({
         item.resetValidation();
       });
     };
+    const getValidationStatus = () => children.reduce((form, field) => {
+      form[field.name] = field.getValidationStatus();
+      return form;
+    }, {});
     const scrollToField = (name2, options) => {
       children.some((item) => {
         if (item.name === name2) {
@@ -159,7 +163,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
       validate,
       getValues,
       scrollToField,
-      resetValidation
+      resetValidation,
+      getValidationStatus
     });
     return () => {
       var _a;

package/lib/form/types.d.ts

@@ -1,11 +1,13 @@
 import type { ComponentPublicInstance } from 'vue';
 import type { FormProps } from './Form';
+import type { FieldValidationStatus } from '../field';
 export declare type FormExpose = {
     submit: () => void;
     validate: (name?: string | string[] | undefined) => Promise<void>;
     getValues: () => Record<string, unknown>;
     scrollToField: (name: string, options?: boolean | ScrollIntoViewOptions | undefined) => void;
     resetValidation: (name?: string | string[] | undefined) => void;
+    getValidationStatus: () => Record<string, FieldValidationStatus>;
 };
 export declare type FormProvide = {
     props: FormProps;

package/lib/image-preview/ImagePreviewItem.js

@@ -247,7 +247,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       };
       return (0, import_vue.createVNode)(import_swipe_item.SwipeItem, {
         "class": bem("swipe-item"),
-        "onTouchstart": onTouchStart,
+        "onTouchstartPassive": onTouchStart,
         "onTouchmove": onTouchMove,
         "onTouchend": onTouchEnd,
         "onTouchcancel": onTouchEnd

package/lib/image-preview/function-call.d.ts

@@ -1,136 +1,3 @@
 import { ComponentInstance } from '../utils';
-import type { App } from 'vue';
 import type { ImagePreviewOptions } from './types';
-declare const ImagePreview: {
-    (options: string[] | ImagePreviewOptions, startPosition?: number): ComponentInstance | undefined;
-    Component: import("../utils").WithInstall<import("vue").DefineComponent<{
-        show: BooleanConstructor;
-        loop: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        images: {
-            type: import("vue").PropType<string[]>;
-            default: () => never[];
-        };
-        minZoom: {
-            type: (NumberConstructor | StringConstructor)[];
-            default: number;
-        };
-        maxZoom: {
-            type: (NumberConstructor | StringConstructor)[];
-            default: number;
-        };
-        overlay: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        closeable: BooleanConstructor;
-        showIndex: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        className: import("vue").PropType<unknown>;
-        closeIcon: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        transition: StringConstructor;
-        beforeClose: import("vue").PropType<import("../utils").Interceptor>;
-        overlayClass: import("vue").PropType<unknown>;
-        overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
-        swipeDuration: {
-            type: (NumberConstructor | StringConstructor)[];
-            default: number;
-        };
-        startPosition: {
-            type: (NumberConstructor | StringConstructor)[];
-            default: number;
-        };
-        showIndicators: BooleanConstructor;
-        closeOnPopstate: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        closeIconPosition: {
-            type: import("vue").PropType<import("..").PopupCloseIconPosition>;
-            default: import("..").PopupCloseIconPosition;
-        };
-    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "closed" | "update:show" | "scale")[], "change" | "close" | "closed" | "update:show" | "scale", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-        show: BooleanConstructor;
-        loop: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        images: {
-            type: import("vue").PropType<string[]>;
-            default: () => never[];
-        };
-        minZoom: {
-            type: (NumberConstructor | StringConstructor)[];
-            default: number;
-        };
-        maxZoom: {
-            type: (NumberConstructor | StringConstructor)[];
-            default: number;
-        };
-        overlay: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        closeable: BooleanConstructor;
-        showIndex: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        className: import("vue").PropType<unknown>;
-        closeIcon: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        transition: StringConstructor;
-        beforeClose: import("vue").PropType<import("../utils").Interceptor>;
-        overlayClass: import("vue").PropType<unknown>;
-        overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
-        swipeDuration: {
-            type: (NumberConstructor | StringConstructor)[];
-            default: number;
-        };
-        startPosition: {
-            type: (NumberConstructor | StringConstructor)[];
-            default: number;
-        };
-        showIndicators: BooleanConstructor;
-        closeOnPopstate: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        closeIconPosition: {
-            type: import("vue").PropType<import("..").PopupCloseIconPosition>;
-            default: import("..").PopupCloseIconPosition;
-        };
-    }>> & {
-        onChange?: ((...args: any[]) => any) | undefined;
-        onClose?: ((...args: any[]) => any) | undefined;
-        onClosed?: ((...args: any[]) => any) | undefined;
-        "onUpdate:show"?: ((...args: any[]) => any) | undefined;
-        onScale?: ((...args: any[]) => any) | undefined;
-    }, {
-        loop: boolean;
-        overlay: boolean;
-        show: boolean;
-        closeIcon: string;
-        closeable: boolean;
-        closeOnPopstate: boolean;
-        closeIconPosition: import("..").PopupCloseIconPosition;
-        swipeDuration: string | number;
-        showIndicators: boolean;
-        startPosition: string | number;
-        minZoom: string | number;
-        maxZoom: string | number;
-        images: string[];
-        showIndex: boolean;
-    }>>;
-    install(app: App): void;
-};
-export { ImagePreview };
+export declare const showImagePreview: (options: string[] | ImagePreviewOptions, startPosition?: number) => ComponentInstance | undefined;

package/lib/image-preview/function-call.js

@@ -20,7 +20,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var stdin_exports = {};
 __export(stdin_exports, {
-  ImagePreview: () => ImagePreview
+  showImagePreview: () => showImagePreview
 });
 module.exports = __toCommonJS(stdin_exports);
 var import_vue = require("vue");
@@ -70,7 +70,7 @@ function initInstance() {
     }
   }));
 }
-const ImagePreview = (options, startPosition = 0) => {
+const showImagePreview = (options, startPosition = 0) => {
   if (!import_utils.inBrowser) {
     return;
   }
@@ -84,7 +84,3 @@ const ImagePreview = (options, startPosition = 0) => {
   instance.open((0, import_utils.extend)({}, defaultConfig, options));
   return instance;
 };
-ImagePreview.Component = (0, import_utils.withInstall)(import_ImagePreview.default);
-ImagePreview.install = (app) => {
-  app.use(ImagePreview.Component);
-};

package/lib/image-preview/index.css

@@ -1 +1 @@
-body{--van-image-preview-index-text-color: var(--van-white);--van-image-preview-index-font-size: var(--van-font-size-md);--van-image-preview-index-line-height: var(--van-line-height-md);--van-image-preview-index-text-shadow: 0 1px 1px var(--van-gray-8);--van-image-preview-overlay-background: rgba(0, 0, 0, .9);--van-image-preview-close-icon-size: 22px;--van-image-preview-close-icon-color: var(--van-gray-5);--van-image-preview-close-icon-margin: var(--van-padding-md);--van-image-preview-close-icon-z-index: 1}.van-image-preview{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;transform:none}.van-image-preview__swipe{height:100%}.van-image-preview__swipe-item{display:flex;align-items:center;justify-content:center;overflow:hidden}.van-image-preview__cover{position:absolute;top:0;left:0}.van-image-preview__image{width:100%;transition-property:transform}.van-image-preview__image--vertical{width:auto;height:100%}.van-image-preview__image img{-webkit-user-drag:none}.van-image-preview__image .van-image__error{top:30%;height:40%}.van-image-preview__image .van-image__error-icon{font-size:36px}.van-image-preview__image .van-image__loading{background-color:transparent}.van-image-preview__index{position:absolute;top:var(--van-padding-md);left:50%;color:var(--van-image-preview-index-text-color);font-size:var(--van-image-preview-index-font-size);line-height:var(--van-image-preview-index-line-height);text-shadow:var(--van-image-preview-index-text-shadow);transform:translate(-50%)}.van-image-preview__overlay{background:var(--van-image-preview-overlay-background)}.van-image-preview__close-icon{position:absolute;z-index:var(--van-image-preview-close-icon-z-index);color:var(--van-image-preview-close-icon-color);font-size:var(--van-image-preview-close-icon-size)}.van-image-preview__close-icon--top-left{top:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--top-right{top:var(--van-image-preview-close-icon-margin);right:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-left{bottom:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-right{right:var(--van-image-preview-close-icon-margin);bottom:var(--van-image-preview-close-icon-margin)}
+body{--van-image-preview-index-text-color: var(--van-white);--van-image-preview-index-font-size: var(--van-font-size-md);--van-image-preview-index-line-height: var(--van-line-height-md);--van-image-preview-index-text-shadow: 0 1px 1px var(--van-gray-8);--van-image-preview-overlay-background: rgba(0, 0, 0, .9);--van-image-preview-close-icon-size: 22px;--van-image-preview-close-icon-color: var(--van-gray-5);--van-image-preview-close-icon-margin: var(--van-padding-md);--van-image-preview-close-icon-z-index: 1}.van-image-preview{position:fixed;top:0;left:0;width:100%;height:100%;max-width:none;background-color:transparent;transform:none}.van-image-preview__swipe{height:100%}.van-image-preview__swipe-item{display:flex;align-items:center;justify-content:center;overflow:hidden}.van-image-preview__cover{position:absolute;top:0;left:0}.van-image-preview__image{width:100%;transition-property:transform}.van-image-preview__image--vertical{width:auto;height:100%}.van-image-preview__image img{-webkit-user-drag:none}.van-image-preview__image .van-image__error{top:30%;height:40%}.van-image-preview__image .van-image__error-icon{font-size:36px}.van-image-preview__image .van-image__loading{background-color:transparent}.van-image-preview__index{position:absolute;top:var(--van-padding-md);left:50%;color:var(--van-image-preview-index-text-color);font-size:var(--van-image-preview-index-font-size);line-height:var(--van-image-preview-index-line-height);text-shadow:var(--van-image-preview-index-text-shadow);transform:translate(-50%)}.van-image-preview__overlay{background:var(--van-image-preview-overlay-background)}.van-image-preview__close-icon{position:absolute;z-index:var(--van-image-preview-close-icon-z-index);color:var(--van-image-preview-close-icon-color);font-size:var(--van-image-preview-close-icon-size)}.van-image-preview__close-icon--top-left{top:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--top-right{top:var(--van-image-preview-close-icon-margin);right:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-left{bottom:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-right{right:var(--van-image-preview-close-icon-margin);bottom:var(--van-image-preview-close-icon-margin)}

package/lib/image-preview/index.d.ts

@@ -1,7 +1,134 @@
-import { ImagePreview } from './function-call';
 import type { ImagePreviewProps } from './ImagePreview';
+export declare const ImagePreview: import("../utils").WithInstall<import("vue").DefineComponent<{
+    show: BooleanConstructor;
+    loop: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    images: {
+        type: import("vue").PropType<string[]>;
+        default: () => never[];
+    };
+    minZoom: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxZoom: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeable: BooleanConstructor;
+    showIndex: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    className: import("vue").PropType<unknown>;
+    closeIcon: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    transition: StringConstructor;
+    beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+    overlayClass: import("vue").PropType<unknown>;
+    overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    startPosition: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    showIndicators: BooleanConstructor;
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeIconPosition: {
+        type: import("vue").PropType<import("..").PopupCloseIconPosition>;
+        default: import("..").PopupCloseIconPosition;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "closed" | "update:show" | "scale")[], "change" | "close" | "closed" | "update:show" | "scale", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    show: BooleanConstructor;
+    loop: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    images: {
+        type: import("vue").PropType<string[]>;
+        default: () => never[];
+    };
+    minZoom: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxZoom: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeable: BooleanConstructor;
+    showIndex: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    className: import("vue").PropType<unknown>;
+    closeIcon: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    transition: StringConstructor;
+    beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+    overlayClass: import("vue").PropType<unknown>;
+    overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    startPosition: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    showIndicators: BooleanConstructor;
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeIconPosition: {
+        type: import("vue").PropType<import("..").PopupCloseIconPosition>;
+        default: import("..").PopupCloseIconPosition;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+    onClosed?: ((...args: any[]) => any) | undefined;
+    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+    onScale?: ((...args: any[]) => any) | undefined;
+}, {
+    loop: boolean;
+    overlay: boolean;
+    show: boolean;
+    closeIcon: string;
+    closeable: boolean;
+    closeOnPopstate: boolean;
+    closeIconPosition: import("..").PopupCloseIconPosition;
+    swipeDuration: string | number;
+    showIndicators: boolean;
+    startPosition: string | number;
+    minZoom: string | number;
+    maxZoom: string | number;
+    images: string[];
+    showIndex: boolean;
+}>>;
 export default ImagePreview;
-export { ImagePreview };
+export { showImagePreview } from './function-call';
 export type { ImagePreviewProps };
 export type { ImagePreviewOptions, ImagePreviewInstance, ImagePreviewScaleEventParams, } from './types';
 declare module 'vue' {

package/lib/image-preview/index.js

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,12 +16,17 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var stdin_exports = {};
 __export(stdin_exports, {
-  ImagePreview: () => import_function_call.ImagePreview,
-  default: () => stdin_default
+  ImagePreview: () => ImagePreview,
+  default: () => stdin_default,
+  showImagePreview: () => import_function_call.showImagePreview
 });
 module.exports = __toCommonJS(stdin_exports);
+var import_utils = require("../utils");
+var import_ImagePreview = __toESM(require("./ImagePreview"));
 var import_function_call = require("./function-call");
-var stdin_default = import_function_call.ImagePreview;
+const ImagePreview = (0, import_utils.withInstall)(import_ImagePreview.default);
+var stdin_default = ImagePreview;

package/lib/index-bar/IndexBar.js

@@ -144,7 +144,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
       (0, import_vue2.nextTick)(onScroll);
     };
     (0, import_use.useEventListener)("scroll", onScroll, {
-      target: scrollParent
+      target: scrollParent,
+      passive: true
     });
     (0, import_vue2.onMounted)(init);
     (0, import_vue2.watch)(() => props.indexList, init);
@@ -219,7 +220,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       "class": bem("sidebar"),
       "style": sidebarStyle.value,
       "onClick": onClickSidebar,
-      "onTouchstart": touch.start,
+      "onTouchstartPassive": touch.start,
       "onTouchmove": onTouchMove
     }, [renderIndexes()]);
     (0, import_use_expose.useExpose)({