vant 4.6.4-beta.2 → 4.6.5

package/es/locale/lang/sr-RS.mjs

@@ -0,0 +1,73 @@
+var stdin_default = {
+  name: "Ime i prezime",
+  tel: "Broj telefona",
+  save: "Sa\u010Duvaj",
+  clear: "Prazno",
+  cancel: "Otka\u017Ei",
+  confirm: "Potvrdi",
+  delete: "Brisanje",
+  loading: "U\u010Ditavanje...",
+  noCoupon: "Jo\u0161 nema kupona",
+  nameEmpty: "Molimo unesite ime",
+  addContact: "Dodaj kontakte",
+  telInvalid: "Molimo unesite broj telefona",
+  vanCalendar: {
+    end: "Zavr\u0161etak",
+    start: "Po\u010Detak",
+    title: "Izaberite Datum",
+    weekdays: [
+      "Nedelja",
+      "Ponedeljak",
+      "Utorak",
+      "Sreda",
+      "\u010Cetvrtak",
+      "Petak",
+      "Subota"
+    ],
+    monthTitle: (year, month) => `${year}/${month}`,
+    rangePrompt: (maxRange) => `Izaberite do ${maxRange} dana`
+  },
+  vanCascader: {
+    select: "Molimo izaberite "
+  },
+  vanPagination: {
+    prev: "Prethodna strana",
+    next: "Sledec\u0301a strana"
+  },
+  vanPullRefresh: {
+    pulling: "Prevucite nadole da osve\u017Eite...",
+    loosing: "Otpustite da osve\u017Eite..."
+  },
+  vanSubmitBar: {
+    label: "Ukupno:"
+  },
+  vanCoupon: {
+    unlimited: "No threshold",
+    discount: (discount) => `${discount} puta`,
+    condition: (condition) => `Dostupno za preko ${condition} juana`
+  },
+  vanCouponCell: {
+    title: "Kupon",
+    count: (count) => `Dostupan ${count}`
+  },
+  vanCouponList: {
+    exchange: "Razmeni",
+    close: "Ne koristi",
+    enable: "Iskoristi",
+    disabled: "Nedostupno",
+    placeholder: "Unesite promo kod"
+  },
+  vanAddressEdit: {
+    area: "Region",
+    areaEmpty: "Molimo odaberite region",
+    addressEmpty: "Molimo upi\u0161ite adresu",
+    addressDetail: "Adresa",
+    defaultAddress: "Postavi kao podrazumevanu adresu za isporuku"
+  },
+  vanAddressList: {
+    add: "Dodaj adresu"
+  }
+};
+export {
+  stdin_default as default
+};

package/es/text-ellipsis/TextEllipsis.mjs

@@ -22,7 +22,7 @@ var stdin_default = defineComponent({
     const expanded = ref(false);
     const hasAction = ref(false);
     const root = ref();
-    const actionText = computed(() => expanded.value ? props.expandText : props.collapseText);
+    const actionText = computed(() => expanded.value ? props.collapseText : props.expandText);
     const pxToNum = (value) => {
       if (!value)
         return 0;
@@ -64,7 +64,7 @@ var stdin_default = defineComponent({
               }
               return dots + content.slice(right, end);
             }
-            const middle2 = Math.round(left + right >> 1);
+            const middle2 = Math.round((left + right) / 2);
             if (position === "end") {
               container2.innerText = content.slice(0, middle2) + dots + actionText.value;
             } else {
@@ -85,11 +85,11 @@ var stdin_default = defineComponent({
         };
         const middleTail = (leftPart, rightPart) => {
           if (leftPart[1] - leftPart[0] <= 1 && rightPart[1] - rightPart[0] <= 1) {
-            return content.slice(0, leftPart[1]) + dots + content.slice(rightPart[1], end);
+            return content.slice(0, leftPart[0]) + dots + content.slice(rightPart[1], end);
           }
-          const leftMiddle = Math.floor(leftPart[0] + leftPart[1] >> 1);
-          const rightMiddle = Math.ceil(rightPart[0] + rightPart[1] >> 1);
-          container2.innerText = props.content.slice(0, leftMiddle) + props.dots + actionText.value + props.dots + props.content.slice(rightMiddle, end);
+          const leftMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
+          const rightMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
+          container2.innerText = props.content.slice(0, leftMiddle) + props.dots + props.content.slice(rightMiddle, end) + props.expandText;
           if (container2.offsetHeight >= maxHeight2) {
             return middleTail([leftPart[0], leftMiddle], [rightMiddle, rightPart[1]]);
           }
@@ -124,7 +124,7 @@ var stdin_default = defineComponent({
     const renderAction = () => _createVNode("span", {
       "class": bem("action"),
       "onClick": onClickAction
-    }, [expanded.value ? props.collapseText : props.expandText]);
+    }, [actionText.value]);
     onMounted(calcEllipsised);
     watch(() => [props.content, props.rows, props.position], calcEllipsised);
     useEventListener("resize", calcEllipsised);

package/es/toast/index.d.ts

@@ -79,7 +79,7 @@ export default Toast;
 export { toastProps } from './Toast';
 export { showToast, closeToast, showFailToast, showLoadingToast, showSuccessToast, allowMultipleToast, setToastDefaultOptions, resetToastDefaultOptions, } from './function-call';
 export type { ToastProps } from './Toast';
-export type { ToastType, ToastOptions, ToastPosition, ToastThemeVars, ToastWordBreak, } from './types';
+export type { ToastType, ToastOptions, ToastPosition, ToastThemeVars, ToastWordBreak, ToastWrapperInstance, } from './types';
 declare module 'vue' {
     interface GlobalComponents {
         VanToast: typeof Toast;

package/lib/dropdown-menu/DropdownMenu.d.ts

@@ -23,6 +23,7 @@ export declare const dropdownMenuProps: {
         type: BooleanConstructor;
         default: true;
     };
+    swipeThreshold: (NumberConstructor | StringConstructor)[];
 };
 export type DropdownMenuProps = ExtractPropTypes<typeof dropdownMenuProps>;
 export declare const DROPDOWN_KEY: InjectionKey<DropdownMenuProvide>;
@@ -49,6 +50,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    swipeThreshold: (NumberConstructor | StringConstructor)[];
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     overlay: {
         type: BooleanConstructor;
@@ -72,6 +74,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    swipeThreshold: (NumberConstructor | StringConstructor)[];
 }>>, {
     overlay: boolean;
     duration: string | number;

package/lib/dropdown-menu/DropdownMenu.js

@@ -36,7 +36,8 @@ const dropdownMenuProps = {
   direction: (0, import_utils.makeStringProp)("down"),
   activeColor: String,
   closeOnClickOutside: import_utils.truthProp,
-  closeOnClickOverlay: import_utils.truthProp
+  closeOnClickOverlay: import_utils.truthProp,
+  swipeThreshold: import_utils.numericProp
 };
 const DROPDOWN_KEY = Symbol(name);
 var stdin_default = (0, import_vue2.defineComponent)({
@@ -55,6 +56,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
     } = (0, import_use.useChildren)(DROPDOWN_KEY);
     const scrollParent = (0, import_use.useScrollParent)(root);
     const opened = (0, import_vue2.computed)(() => children.some((item) => item.state.showWrapper));
+    const scrollable = (0, import_vue2.computed)(() => props.swipeThreshold && children.length > +props.swipeThreshold);
     const barStyle = (0, import_vue2.computed)(() => {
       if (opened.value && (0, import_utils.isDef)(props.zIndex)) {
         return {
@@ -111,7 +113,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "role": "button",
         "tabindex": disabled ? void 0 : 0,
         "class": [bem("item", {
-          disabled
+          disabled,
+          grow: scrollable.value
         }), {
           [import_utils.HAPTICS_FEEDBACK]: !disabled
         }],
@@ -155,7 +158,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "ref": barRef,
         "style": barStyle.value,
         "class": bem("bar", {
-          opened: opened.value
+          opened: opened.value,
+          scrollable: scrollable.value
         })
       }, [children.map(renderTitle)]), (_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };

package/lib/dropdown-menu/index.css

@@ -1 +1 @@
-:root{--van-dropdown-menu-height: 48px;--van-dropdown-menu-background: var(--van-background-2);--van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, .12);--van-dropdown-menu-title-font-size: 15px;--van-dropdown-menu-title-text-color: var(--van-text-color);--van-dropdown-menu-title-active-text-color: var(--van-primary-color);--van-dropdown-menu-title-disabled-text-color: var(--van-text-color-2);--van-dropdown-menu-title-padding: 0 var(--van-padding-xs);--van-dropdown-menu-title-line-height: var(--van-line-height-lg);--van-dropdown-menu-option-active-color: var(--van-primary-color);--van-dropdown-menu-content-max-height: 80%}.van-dropdown-menu{-webkit-user-select:none;user-select:none}.van-dropdown-menu__bar{position:relative;display:flex;height:var(--van-dropdown-menu-height);background:var(--van-dropdown-menu-background);box-shadow:var(--van-dropdown-menu-shadow)}.van-dropdown-menu__bar--opened{z-index:calc(var(--van-dropdown-item-z-index) + 1)}.van-dropdown-menu__item{display:flex;flex:1;align-items:center;justify-content:center;min-width:0}.van-dropdown-menu__item--disabled .van-dropdown-menu__title{color:var(--van-dropdown-menu-title-disabled-text-color)}.van-dropdown-menu__title{position:relative;box-sizing:border-box;max-width:100%;padding:var(--van-dropdown-menu-title-padding);color:var(--van-dropdown-menu-title-text-color);font-size:var(--van-dropdown-menu-title-font-size);line-height:var(--van-dropdown-menu-title-line-height)}.van-dropdown-menu__title:after{position:absolute;top:50%;right:-4px;margin-top:-5px;border:3px solid;border-color:transparent transparent var(--van-gray-4) var(--van-gray-4);transform:rotate(-45deg);opacity:.8;content:""}.van-dropdown-menu__title--active{color:var(--van-dropdown-menu-title-active-text-color)}.van-dropdown-menu__title--active:after{border-color:transparent transparent currentColor currentColor}.van-dropdown-menu__title--down:after{margin-top:-1px;transform:rotate(135deg)}
+:root{--van-dropdown-menu-height: 48px;--van-dropdown-menu-background: var(--van-background-2);--van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, .12);--van-dropdown-menu-title-font-size: 15px;--van-dropdown-menu-title-text-color: var(--van-text-color);--van-dropdown-menu-title-active-text-color: var(--van-primary-color);--van-dropdown-menu-title-disabled-text-color: var(--van-text-color-2);--van-dropdown-menu-title-padding: 0 var(--van-padding-xs);--van-dropdown-menu-title-line-height: var(--van-line-height-lg);--van-dropdown-menu-option-active-color: var(--van-primary-color);--van-dropdown-menu-content-max-height: 80%}.van-dropdown-menu{-webkit-user-select:none;user-select:none}.van-dropdown-menu__bar{position:relative;display:flex;height:var(--van-dropdown-menu-height);background:var(--van-dropdown-menu-background);box-shadow:var(--van-dropdown-menu-shadow)}.van-dropdown-menu__bar--opened{z-index:calc(var(--van-dropdown-item-z-index) + 1)}.van-dropdown-menu__bar--scrollable{padding-left:var(--van-padding-base);padding-right:var(--van-padding-xs);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.van-dropdown-menu__bar--scrollable::-webkit-scrollbar{display:none}.van-dropdown-menu__item{display:flex;flex:1;align-items:center;justify-content:center;min-width:0}.van-dropdown-menu__item--disabled .van-dropdown-menu__title{color:var(--van-dropdown-menu-title-disabled-text-color)}.van-dropdown-menu__item--grow{flex:1 0 auto;padding-left:var(--van-padding-base);padding-right:var(--van-padding-sm)}.van-dropdown-menu__title{position:relative;box-sizing:border-box;max-width:100%;padding:var(--van-dropdown-menu-title-padding);color:var(--van-dropdown-menu-title-text-color);font-size:var(--van-dropdown-menu-title-font-size);line-height:var(--van-dropdown-menu-title-line-height)}.van-dropdown-menu__title:after{position:absolute;top:50%;right:-4px;margin-top:-5px;border:3px solid;border-color:transparent transparent var(--van-gray-4) var(--van-gray-4);transform:rotate(-45deg);opacity:.8;content:""}.van-dropdown-menu__title--active{color:var(--van-dropdown-menu-title-active-text-color)}.van-dropdown-menu__title--active:after{border-color:transparent transparent currentColor currentColor}.van-dropdown-menu__title--down:after{margin-top:-1px;transform:rotate(135deg)}

package/lib/dropdown-menu/index.d.ts

@@ -22,6 +22,7 @@ export declare const DropdownMenu: import("../utils").WithInstall<import("vue").
         type: BooleanConstructor;
         default: true;
     };
+    swipeThreshold: (NumberConstructor | StringConstructor)[];
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     overlay: {
         type: BooleanConstructor;
@@ -45,6 +46,7 @@ export declare const DropdownMenu: import("../utils").WithInstall<import("vue").
         type: BooleanConstructor;
         default: true;
     };
+    swipeThreshold: (NumberConstructor | StringConstructor)[];
 }>>, {
     overlay: boolean;
     duration: string | number;

package/lib/floating-bubble/FloatingBubble.js

@@ -57,11 +57,13 @@ const floatingBubbleProps = {
 const [name, bem] = (0, import_utils.createNamespace)("floating-bubble");
 var stdin_default = (0, import_vue2.defineComponent)({
   name,
+  inheritAttrs: false,
   props: floatingBubbleProps,
   emits: ["click", "update:offset", "offsetChange"],
   setup(props, {
     slots,
-    emit
+    emit,
+    attrs
   }) {
     const rootRef = (0, import_vue2.ref)();
     const state = (0, import_vue2.ref)({
@@ -182,7 +184,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
     });
     return () => {
-      const Content = (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
+      const Content = (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", (0, import_vue.mergeProps)({
         "class": bem(),
         "ref": rootRef,
         "onTouchstartPassive": onTouchStart,
@@ -190,7 +192,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "onTouchcancel": onTouchEnd,
         "onClick": onClick,
         "style": rootStyle.value
-      }, [slots.default ? slots.default() : (0, import_vue.createVNode)(import_icon.default, {
+      }, attrs), [slots.default ? slots.default() : (0, import_vue.createVNode)(import_icon.default, {
         "name": props.icon,
         "class": bem("icon")
       }, null)]), [[import_vue.vShow, show.value]]);

package/lib/floating-panel/FloatingPanel.d.ts

@@ -16,6 +16,7 @@ export declare const floatingPanelProps: {
         type: BooleanConstructor;
         default: true;
     };
+    lockScroll: BooleanConstructor;
     safeAreaInsetBottom: {
         type: BooleanConstructor;
         default: true;
@@ -39,6 +40,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    lockScroll: BooleanConstructor;
     safeAreaInsetBottom: {
         type: BooleanConstructor;
         default: true;
@@ -60,6 +62,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    lockScroll: BooleanConstructor;
     safeAreaInsetBottom: {
         type: BooleanConstructor;
         default: true;
@@ -71,6 +74,7 @@ declare const _default: import("vue").DefineComponent<{
     height: string | number;
     safeAreaInsetBottom: boolean;
     duration: string | number;
+    lockScroll: boolean;
     anchors: number[];
     contentDraggable: boolean;
 }, {}>;

package/lib/floating-panel/FloatingPanel.js

@@ -33,10 +33,10 @@ const floatingPanelProps = {
   anchors: (0, import_utils.makeArrayProp)(),
   duration: (0, import_utils.makeNumericProp)(0.2),
   contentDraggable: import_utils.truthProp,
+  lockScroll: Boolean,
   safeAreaInsetBottom: import_utils.truthProp
 };
 const [name, bem] = (0, import_utils.createNamespace)("floating-panel");
-const DAMP = 0.2;
 var stdin_default = (0, import_vue2.defineComponent)({
   name,
   props: floatingPanelProps,
@@ -45,6 +45,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
     emit,
     slots
   }) {
+    const DAMP = 0.2;
     const rootRef = (0, import_vue2.ref)();
     const contentRef = (0, import_vue2.ref)();
     const height = (0, import_use_sync_prop_ref.useSyncPropRef)(() => +props.height, (value) => emit("update:height", value));
@@ -77,24 +78,28 @@ var stdin_default = (0, import_vue2.defineComponent)({
       return moveY;
     };
     let startY;
+    let maxScroll = -1;
     const touch = (0, import_use_touch.useTouch)();
     const onTouchstart = (e) => {
       touch.start(e);
       dragging.value = true;
       startY = -height.value;
+      maxScroll = -1;
     };
     const onTouchmove = (e) => {
       var _a;
       touch.move(e);
       const target = e.target;
       if (contentRef.value === target || ((_a = contentRef.value) == null ? void 0 : _a.contains(target))) {
+        const {
+          scrollTop
+        } = contentRef.value;
+        maxScroll = Math.max(maxScroll, scrollTop);
         if (!props.contentDraggable)
           return;
         if (-startY < boundary.value.max) {
-          if (e.cancelable)
-            e.preventDefault();
-          e.stopPropagation();
-        } else if (!(contentRef.value.scrollTop <= 0 && touch.deltaY.value > 0)) {
+          (0, import_utils.preventDefault)(e, true);
+        } else if (!(scrollTop <= 0 && touch.deltaY.value > 0) || maxScroll > 0) {
           return;
         }
       }
@@ -102,6 +107,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       height.value = -ease(moveY);
     };
     const onTouchend = () => {
+      maxScroll = -1;
       dragging.value = false;
       height.value = (0, import_utils.closest)(anchors.value, height.value);
       if (height.value !== -startY) {
@@ -115,7 +121,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
     }, {
       immediate: true
     });
-    (0, import_use_lock_scroll.useLockScroll)(rootRef, () => true);
+    (0, import_use_lock_scroll.useLockScroll)(rootRef, () => props.lockScroll);
     (0, import_use.useEventListener)("touchmove", onTouchmove, {
       target: rootRef
     });

package/lib/floating-panel/index.d.ts

@@ -15,6 +15,7 @@ export declare const FloatingPanel: import("../utils").WithInstall<import("vue")
         type: BooleanConstructor;
         default: true;
     };
+    lockScroll: BooleanConstructor;
     safeAreaInsetBottom: {
         type: BooleanConstructor;
         default: true;
@@ -36,6 +37,7 @@ export declare const FloatingPanel: import("../utils").WithInstall<import("vue")
         type: BooleanConstructor;
         default: true;
     };
+    lockScroll: BooleanConstructor;
     safeAreaInsetBottom: {
         type: BooleanConstructor;
         default: true;
@@ -47,6 +49,7 @@ export declare const FloatingPanel: import("../utils").WithInstall<import("vue")
     height: string | number;
     safeAreaInsetBottom: boolean;
     duration: string | number;
+    lockScroll: boolean;
     anchors: number[];
     contentDraggable: boolean;
 }, {}>>;

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

@@ -50,6 +50,10 @@ export declare const imagePreviewProps: {
         type: BooleanConstructor;
         default: true;
     };
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
     closeIconPosition: {
         type: PropType<PopupCloseIconPosition>;
         default: PopupCloseIconPosition;
@@ -106,6 +110,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
     closeIconPosition: {
         type: PropType<PopupCloseIconPosition>;
         default: PopupCloseIconPosition;
@@ -160,6 +168,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
     closeIconPosition: {
         type: PropType<PopupCloseIconPosition>;
         default: PopupCloseIconPosition;
@@ -176,6 +188,7 @@ declare const _default: import("vue").DefineComponent<{
     loop: boolean;
     overlay: boolean;
     show: boolean;
+    closeOnClickOverlay: boolean;
     closeIcon: string;
     closeable: boolean;
     closeOnPopstate: boolean;

package/lib/image-preview/ImagePreview.js

@@ -61,6 +61,7 @@ const imagePreviewProps = {
   startPosition: (0, import_utils.makeNumericProp)(0),
   showIndicators: Boolean,
   closeOnPopstate: import_utils.truthProp,
+  closeOnClickOverlay: import_utils.truthProp,
   closeIconPosition: (0, import_utils.makeStringProp)("top-right"),
   teleport: [String, Object]
 };
@@ -145,6 +146,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "rootWidth": state.rootWidth,
         "rootHeight": state.rootHeight,
         "disableZoom": state.disableZoom,
+        "closeOnClickOverlay": props.closeOnClickOverlay,
         "onScale": emitScale,
         "onClose": emitClose,
         "onLongPress": () => emit("longPress", {

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

@@ -19,6 +19,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     disableZoom: BooleanConstructor;
+    closeOnClickOverlay: BooleanConstructor;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "scale" | "longPress")[], "close" | "scale" | "longPress", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     src: StringConstructor;
     show: BooleanConstructor;
@@ -40,12 +41,14 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     disableZoom: BooleanConstructor;
+    closeOnClickOverlay: BooleanConstructor;
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
     onScale?: ((...args: any[]) => any) | undefined;
     onLongPress?: ((...args: any[]) => any) | undefined;
 }, {
     show: boolean;
+    closeOnClickOverlay: boolean;
     disableZoom: boolean;
 }, {}>;
 export default _default;

package/lib/image-preview/ImagePreviewItem.js

@@ -44,7 +44,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
     maxZoom: (0, import_utils.makeRequiredProp)(import_utils.numericProp),
     rootWidth: (0, import_utils.makeRequiredProp)(Number),
     rootHeight: (0, import_utils.makeRequiredProp)(Number),
-    disableZoom: Boolean
+    disableZoom: Boolean,
+    closeOnClickOverlay: Boolean
   },
   emits: ["scale", "close", "longPress"],
   setup(props, {
@@ -204,7 +205,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
         }
       }
     };
-    const checkTap = () => {
+    const checkTap = (event) => {
+      var _a;
       if (fingerNum > 1) {
         return;
       }
@@ -221,6 +223,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
             doubleTapTimer = null;
             toggleScale();
           } else {
+            if (!props.closeOnClickOverlay && event.target === ((_a = swipeItem.value) == null ? void 0 : _a.$el)) {
+              return;
+            }
             doubleTapTimer = setTimeout(() => {
               emit("close");
               doubleTapTimer = null;
@@ -258,7 +263,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         }
       }
       (0, import_utils.preventDefault)(event, stopPropagation);
-      checkTap();
+      checkTap(event);
       touch.reset();
     };
     const resize = () => {

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

@@ -56,6 +56,7 @@ const defaultConfig = {
   swipeDuration: 300,
   showIndicators: false,
   closeOnPopstate: true,
+  closeOnClickOverlay: true,
   closeIconPosition: "top-right"
 };
 function initInstance() {

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

@@ -48,6 +48,10 @@ export declare const ImagePreview: import("../utils").WithInstall<import("vue").
         type: BooleanConstructor;
         default: true;
     };
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
     closeIconPosition: {
         type: import("vue").PropType<import("..").PopupCloseIconPosition>;
         default: import("..").PopupCloseIconPosition;
@@ -102,6 +106,10 @@ export declare const ImagePreview: import("../utils").WithInstall<import("vue").
         type: BooleanConstructor;
         default: true;
     };
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
     closeIconPosition: {
         type: import("vue").PropType<import("..").PopupCloseIconPosition>;
         default: import("..").PopupCloseIconPosition;
@@ -118,6 +126,7 @@ export declare const ImagePreview: import("../utils").WithInstall<import("vue").
     loop: boolean;
     overlay: boolean;
     show: boolean;
+    closeOnClickOverlay: boolean;
     closeIcon: string;
     closeable: boolean;
     closeOnPopstate: boolean;

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

@@ -22,6 +22,7 @@ export type ImagePreviewOptions = {
     showIndicators?: boolean;
     closeOnPopstate?: boolean;
     closeIconPosition?: PopupCloseIconPosition;
+    closeOnClickOverlay?: boolean;
     onClose?(): void;
     onScale?(args: {
         scale: number;