@nutui/nutui 4.0.12-beta.1 → 4.0.12

package/dist/packages/_es/ImagePreview.js

@@ -1,40 +1,53 @@
-var re = Object.defineProperty, me = Object.defineProperties;
-var ce = Object.getOwnPropertyDescriptors;
-var j = Object.getOwnPropertySymbols;
-var ue = Object.prototype.hasOwnProperty, pe = Object.prototype.propertyIsEnumerable;
-var M = Math.pow, H = (e, t, o) => t in e ? re(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, S = (e, t) => {
-  for (var o in t || (t = {}))
-    ue.call(t, o) && H(e, o, t[o]);
-  if (j)
-    for (var o of j(t))
-      pe.call(t, o) && H(e, o, t[o]);
-  return e;
-}, P = (e, t) => me(e, ce(t));
-var l = (e, t, o) => (H(e, typeof t != "symbol" ? t + "" : t, o), o);
-import { reactive as G, computed as w, watch as Z, toRefs as J, resolveComponent as y, openBlock as p, createBlock as I, withCtx as R, createElementVNode as K, normalizeStyle as fe, createElementBlock as k, createCommentVNode as N, ref as ge, onMounted as ve, Fragment as de, renderList as he, toDisplayString as q, normalizeClass as we, renderSlot as ye, createVNode as Ce, nextTick as be, h as Te } from "vue";
-import { c as Q, e as $, d as U, i as Se } from "./component-234624bc.js";
-import { u as Pe } from "./index-192a3ef6.js";
-import { u as $e } from "./index-53ec2d4d.js";
-import B from "./Video.js";
-import E from "./SwiperItem.js";
-import { _ } from "./_plugin-vue_export-helper-dad06003.js";
-import { CircleClose as Ie } from "@nutui/icons-vue";
-import { P as L } from "./index-360c5092.js";
-import A from "./Swiper.js";
-import { f as Ne } from "./Interceptor-6e26b757.js";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __pow = Math.pow;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { reactive, computed, watch, toRefs, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, normalizeStyle, createElementBlock, createCommentVNode, ref, onMounted, Fragment, renderList, toDisplayString, normalizeClass, renderSlot, createVNode, nextTick, h } from "vue";
+import { c as createComponent, e as clamp, d as preventDefault, i as isArray } from "./component-81a4c1d0.js";
+import { u as useRect } from "./index-29892cda.js";
+import { u as useTouch } from "./index-7a7385e4.js";
+import Video from "./Video.js";
+import SwiperItem from "./SwiperItem.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
+import { CircleClose } from "@nutui/icons-vue";
+import { P as Popup } from "./index-da0a7662.js";
+import Swiper from "./Swiper.js";
+import { f as funInterceptor } from "./Interceptor-956b24fc.js";
 import "../locale/lang";
-import { C as Xe } from "./mountComponent-6d4ff200.js";
-import Ye from "./Overlay.js";
-import "./index-fadb0974.js";
-import "./raf-a74f1a06.js";
-const x = {
-  show: { type: Boolean, default: !1 },
+import { C as CreateComponent } from "./mountComponent-8b24c346.js";
+import Overlay from "./Overlay.js";
+import "./index-79c5dc33.js";
+import "./raf-729dad54.js";
+const baseProps = {
+  show: { type: Boolean, default: false },
   initNo: { type: Number, default: 0 },
-  showIndex: { type: Boolean, default: !0 },
+  showIndex: { type: Boolean, default: true },
   minZoom: { type: Number, default: 1 / 3 },
   maxZoom: { type: Number, default: 3 }
-}, { create: ke } = Q("image-preview-item"), Ze = ke({
-  props: P(S({}, x), {
+};
+const { create: create$1 } = createComponent("image-preview-item");
+const _sfc_main$1 = create$1({
+  props: __spreadProps(__spreadValues({}, baseProps), {
     image: {
       type: Object,
       default: () => ({})
@@ -53,150 +66,253 @@ const x = {
     },
     contentClose: {
       type: Boolean,
-      default: !0
+      default: true
     }
   }),
   emits: ["close", "scale"],
   components: {
-    [B.name]: B,
-    [E.name]: E
+    [Video.name]: Video,
+    [SwiperItem.name]: SwiperItem
   },
-  setup(e, { emit: t }) {
-    const o = G({
+  setup(props, { emit }) {
+    const state = reactive({
       scale: 1,
       moveX: 0,
       moveY: 0,
-      moving: !1,
-      zooming: !1,
+      moving: false,
+      zooming: false,
       imageRatio: 0,
       displayWidth: 0,
       displayHeight: 0
-    }), a = $e(), v = w(() => {
-      const { rootWidth: n, rootHeight: s } = e, r = s / n;
-      return o.imageRatio > r;
-    }), C = w(() => {
-      const n = e.image;
-      if (n && n.src) {
-        const { scale: s, moveX: r, moveY: f, moving: h, zooming: z } = o, F = {
-          transitionDuration: z || h ? "0s" : ".3s"
+    });
+    const touch = useTouch();
+    const vertical = computed(() => {
+      const { rootWidth, rootHeight } = props;
+      const rootRatio = rootHeight / rootWidth;
+      return state.imageRatio > rootRatio;
+    });
+    const imageStyle = computed(() => {
+      const images = props.image;
+      if (images && images.src) {
+        const { scale, moveX, moveY, moving, zooming } = state;
+        const style = {
+          transitionDuration: zooming || moving ? "0s" : ".3s"
         };
-        if (s !== 1) {
-          const ae = r / s, le = f / s;
-          F.transform = `scale(${s}, ${s}) translate(${ae}px, ${le}px)`;
+        if (scale !== 1) {
+          const offsetX = moveX / scale;
+          const offsetY = moveY / scale;
+          style.transform = `scale(${scale}, ${scale}) translate(${offsetX}px, ${offsetY}px)`;
         }
-        return F;
+        return style;
       }
       return {};
-    }), c = w(() => {
-      if (o.imageRatio) {
-        const { rootWidth: n, rootHeight: s } = e, r = v.value ? s / o.imageRatio : n;
-        return Math.max(0, (o.scale * r - n) / 2);
+    });
+    const maxMoveX = computed(() => {
+      if (state.imageRatio) {
+        const { rootWidth, rootHeight } = props;
+        const displayWidth = vertical.value ? rootHeight / state.imageRatio : rootWidth;
+        return Math.max(0, (state.scale * displayWidth - rootWidth) / 2);
       }
       return 0;
-    }), u = w(() => {
-      if (o.imageRatio) {
-        const { rootWidth: n, rootHeight: s } = e, r = v.value ? s : n * o.imageRatio;
-        return Math.max(0, (o.scale * r - s) / 2);
+    });
+    const maxMoveY = computed(() => {
+      if (state.imageRatio) {
+        const { rootWidth, rootHeight } = props;
+        const displayHeight = vertical.value ? rootHeight : rootWidth * state.imageRatio;
+        return Math.max(0, (state.scale * displayHeight - rootHeight) / 2);
       }
       return 0;
-    }), m = (n) => {
-      const { naturalWidth: s, naturalHeight: r } = n.target;
-      o.imageRatio = r / s;
-    }, g = () => {
-      i(1), o.moveX = 0, o.moveY = 0;
-    }, i = (n) => {
-      n = $(n, +e.minZoom, +e.maxZoom + 1), n !== o.scale && (o.scale = n, t("scale", {
-        scale: n,
-        index: e.initNo
-      }));
-    }, d = () => {
-      const n = o.scale > 1 ? 1 : 2;
-      i(n), o.moveX = 0, o.moveY = 0;
-    }, D = (n) => Math.sqrt(M(n[0].clientX - n[1].clientX, 2) + M(n[0].clientY - n[1].clientY, 2));
-    let X, Y, W, V, b, O, T;
-    const oe = (n) => {
-      const { touches: s } = n, { offsetX: r } = a;
-      a.start(n), T = s.length, X = o.moveX, Y = o.moveY, O = Date.now(), o.moving = T === 1 && o.scale !== 1, o.zooming = T === 2 && !r.value, o.zooming && (W = o.scale, V = D(n.touches));
-    }, te = (n) => {
-      const { touches: s } = n;
-      if (a.move(n), (o.moving || o.zooming) && U(n, !0), o.moving) {
-        const { deltaX: r, deltaY: f } = a, h = r.value + X, z = f.value + Y;
-        o.moveX = $(h, -c.value, c.value), o.moveY = $(z, -u.value, u.value);
+    });
+    const imageLoad = (event) => {
+      const { naturalWidth, naturalHeight } = event.target;
+      state.imageRatio = naturalHeight / naturalWidth;
+    };
+    const resetScale = () => {
+      setScale(1);
+      state.moveX = 0;
+      state.moveY = 0;
+    };
+    const setScale = (scale) => {
+      scale = clamp(scale, +props.minZoom, +props.maxZoom + 1);
+      if (scale !== state.scale) {
+        state.scale = scale;
+        emit("scale", {
+          scale,
+          index: props.initNo
+        });
       }
-      if (o.zooming && s.length === 2) {
-        const r = D(s), f = W * r / V;
-        i(f);
+    };
+    const toggleScale = () => {
+      const scale = state.scale > 1 ? 1 : 2;
+      setScale(scale);
+      state.moveX = 0;
+      state.moveY = 0;
+    };
+    const getDistance = (touches) => Math.sqrt(__pow(touches[0].clientX - touches[1].clientX, 2) + __pow(touches[0].clientY - touches[1].clientY, 2));
+    let startMoveX;
+    let startMoveY;
+    let startScale;
+    let startDistance;
+    let doubleTapTimer;
+    let touchStartTime;
+    let fingerNum;
+    const onTouchStart = (event) => {
+      const { touches } = event;
+      const { offsetX } = touch;
+      touch.start(event);
+      fingerNum = touches.length;
+      startMoveX = state.moveX;
+      startMoveY = state.moveY;
+      touchStartTime = Date.now();
+      state.moving = fingerNum === 1 && state.scale !== 1;
+      state.zooming = fingerNum === 2 && !offsetX.value;
+      if (state.zooming) {
+        startScale = state.scale;
+        startDistance = getDistance(event.touches);
+      }
+    };
+    const onTouchMove = (event) => {
+      const { touches } = event;
+      touch.move(event);
+      if (state.moving || state.zooming) {
+        preventDefault(event, true);
+      }
+      if (state.moving) {
+        const { deltaX, deltaY } = touch;
+        const moveX = deltaX.value + startMoveX;
+        const moveY = deltaY.value + startMoveY;
+        state.moveX = clamp(moveX, -maxMoveX.value, maxMoveX.value);
+        state.moveY = clamp(moveY, -maxMoveY.value, maxMoveY.value);
+      }
+      if (state.zooming && touches.length === 2) {
+        const distance = getDistance(touches);
+        const scale = startScale * distance / startDistance;
+        setScale(scale);
       }
-    }, ne = () => {
-      if (T == 1 && e.video && e.video.source || T > 1)
+    };
+    const checkTap = () => {
+      if (fingerNum == 1 && props.video && props.video.source) {
+        return;
+      }
+      if (fingerNum > 1) {
         return;
-      const { offsetX: n, offsetY: s } = a, r = Date.now() - O, f = 250, h = 5;
-      n.value < h && s.value < h && r < f && (b ? (clearTimeout(b), b = null, d()) : b = setTimeout(() => {
-        e.contentClose && t("close"), b = null;
-      }, f));
-    }, ie = (n) => {
-      let s = !1;
-      (o.moving || o.zooming) && (s = !0, o.moving && X === o.moveX && Y === o.moveY && (s = !1), n.touches.length || (o.zooming && (o.moveX = $(o.moveX, -c.value, c.value), o.moveY = $(o.moveY, -u.value, u.value), o.zooming = !1), o.moving = !1, X = 0, Y = 0, W = 1, o.scale < 1 && g(), o.scale > e.maxZoom && (o.scale = +e.maxZoom))), U(n, s), ne(), a.reset();
-    }, se = () => {
-      t("close");
+      }
+      const { offsetX, offsetY } = touch;
+      const deltaTime = Date.now() - touchStartTime;
+      const TAP_TIME = 250;
+      const TAP_OFFSET = 5;
+      if (offsetX.value < TAP_OFFSET && offsetY.value < TAP_OFFSET && deltaTime < TAP_TIME) {
+        if (doubleTapTimer) {
+          clearTimeout(doubleTapTimer);
+          doubleTapTimer = null;
+          toggleScale();
+        } else {
+          doubleTapTimer = setTimeout(() => {
+            if (props.contentClose) {
+              emit("close");
+            }
+            doubleTapTimer = null;
+          }, TAP_TIME);
+        }
+      }
     };
-    return Z(() => e.initNo, g), Z(
-      () => e.show,
-      (n) => {
-        n || g();
+    const onTouchEnd = (event) => {
+      let stopPropagation = false;
+      if (state.moving || state.zooming) {
+        stopPropagation = true;
+        if (state.moving && startMoveX === state.moveX && startMoveY === state.moveY) {
+          stopPropagation = false;
+        }
+        if (!event.touches.length) {
+          if (state.zooming) {
+            state.moveX = clamp(state.moveX, -maxMoveX.value, maxMoveX.value);
+            state.moveY = clamp(state.moveY, -maxMoveY.value, maxMoveY.value);
+            state.zooming = false;
+          }
+          state.moving = false;
+          startMoveX = 0;
+          startMoveY = 0;
+          startScale = 1;
+          if (state.scale < 1) {
+            resetScale();
+          }
+          if (state.scale > props.maxZoom) {
+            state.scale = +props.maxZoom;
+          }
+        }
       }
-    ), P(S({}, J(o)), {
-      onTouchStart: oe,
-      onTouchMove: te,
-      onTouchEnd: ie,
-      getDistance: D,
-      imageStyle: C,
-      imageLoad: m,
-      closeSwiper: se
+      preventDefault(event, stopPropagation);
+      checkTap();
+      touch.reset();
+    };
+    const closeSwiper = () => {
+      emit("close");
+    };
+    watch(() => props.initNo, resetScale);
+    watch(
+      () => props.show,
+      (value) => {
+        if (!value) {
+          resetScale();
+        }
+      }
+    );
+    return __spreadProps(__spreadValues({}, toRefs(state)), {
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      getDistance,
+      imageStyle,
+      imageLoad,
+      closeSwiper
     });
   }
-}), De = ["src"];
-function We(e, t, o, a, v, C) {
-  const c = y("nut-video"), u = y("nut-swiper-item");
-  return p(), I(u, { onClick: e.closeSwiper }, {
-    default: R(() => [
-      K("view", {
-        style: fe(e.imageStyle),
+});
+const _hoisted_1$1 = ["src"];
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_video = resolveComponent("nut-video");
+  const _component_nut_swiper_item = resolveComponent("nut-swiper-item");
+  return openBlock(), createBlock(_component_nut_swiper_item, { onClick: _ctx.closeSwiper }, {
+    default: withCtx(() => [
+      createElementVNode("view", {
+        style: normalizeStyle(_ctx.imageStyle),
         class: "nut-image-preview-box",
-        onTouchstart: t[1] || (t[1] = (...m) => e.onTouchStart && e.onTouchStart(...m)),
-        onTouchmove: t[2] || (t[2] = (...m) => e.onTouchMove && e.onTouchMove(...m)),
-        onTouchend: t[3] || (t[3] = (...m) => e.onTouchEnd && e.onTouchEnd(...m)),
-        onTouchcancel: t[4] || (t[4] = (...m) => e.onTouchEnd && e.onTouchEnd(...m))
+        onTouchstart: _cache[1] || (_cache[1] = (...args) => _ctx.onTouchStart && _ctx.onTouchStart(...args)),
+        onTouchmove: _cache[2] || (_cache[2] = (...args) => _ctx.onTouchMove && _ctx.onTouchMove(...args)),
+        onTouchend: _cache[3] || (_cache[3] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args)),
+        onTouchcancel: _cache[4] || (_cache[4] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args))
       }, [
-        e.image && e.image.src ? (p(), k("img", {
+        _ctx.image && _ctx.image.src ? (openBlock(), createElementBlock("img", {
           key: 0,
-          src: e.image.src,
+          src: _ctx.image.src,
           class: "nut-image-preview-img",
-          onLoad: t[0] || (t[0] = (...m) => e.imageLoad && e.imageLoad(...m))
-        }, null, 40, De)) : N("", !0),
-        e.video && e.video.source ? (p(), I(c, {
+          onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.imageLoad && _ctx.imageLoad(...args))
+        }, null, 40, _hoisted_1$1)) : createCommentVNode("", true),
+        _ctx.video && _ctx.video.source ? (openBlock(), createBlock(_component_nut_video, {
           key: 1,
-          source: e.video.source,
-          options: e.video.options
-        }, null, 8, ["source", "options"])) : N("", !0)
+          source: _ctx.video.source,
+          options: _ctx.video.options
+        }, null, 8, ["source", "options"])) : createCommentVNode("", true)
       ], 36)
     ]),
     _: 1
   }, 8, ["onClick"]);
 }
-const ze = /* @__PURE__ */ _(Ze, [["render", We]]), { create: He } = Q("image-preview"), Me = He({
-  props: P(S({}, x), {
+const ImagePreviewItem = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const { create } = createComponent("image-preview");
+const _sfc_main = create({
+  props: __spreadProps(__spreadValues({}, baseProps), {
     images: { type: Array, default: () => [] },
     videos: { type: Array, default: () => [] },
-    contentClose: { type: Boolean, default: !0 },
-    paginationVisible: { type: Boolean, default: !1 },
+    contentClose: { type: Boolean, default: true },
+    paginationVisible: { type: Boolean, default: false },
     paginationColor: { type: String, default: "#fff" },
     autoplay: { type: [Number, String], default: 0 },
     teleport: { type: [String, Element], default: "body" },
-    teleportDisable: { ype: Boolean, default: !1 },
+    teleportDisable: { ype: Boolean, default: false },
     closeable: {
       type: Boolean,
-      default: !1
+      default: false
     },
     closeIconPosition: {
       type: String,
@@ -206,172 +322,212 @@ const ze = /* @__PURE__ */ _(Ze, [["render", We]]), { create: He } = Q("image-pr
     beforeClose: Function,
     isLoop: {
       type: Boolean,
-      default: !0
+      default: true
     }
   }),
   emits: ["close", "change"],
   components: {
-    ImagePreviewItem: ze,
-    CircleClose: Ie,
-    [L.name]: L,
-    [A.name]: A
+    ImagePreviewItem,
+    CircleClose,
+    [Popup.name]: Popup,
+    [Swiper.name]: Swiper
   },
-  setup(e, { emit: t }) {
-    const o = ge(), a = G({
-      showPop: e.show,
+  setup(props, { emit }) {
+    const swipeRef = ref();
+    const state = reactive({
+      showPop: props.show,
       active: 0,
       rootWidth: 0,
       rootHeight: 0
-    }), v = w(() => {
-      const i = "nut-image-preview-close";
-      return `nut-image-preview-close-icon ${e.closeIconPosition == "top-right" ? `${i}-right` : `${i}-left`}`;
-    }), C = w(() => Se(e.videos) ? [].concat(e.videos).concat(e.images) : e.images), c = (i) => {
-      i !== a.active && (a.active = i, t("change", a.active));
-    }, u = () => {
-      Ne(e.beforeClose, {
-        args: [a.active],
-        done: () => m()
+    });
+    const iconClasses = computed(() => {
+      const pre = "nut-image-preview-close";
+      const iconn = props.closeIconPosition == "top-right" ? `${pre}-right` : `${pre}-left`;
+      return `nut-image-preview-close-icon ${iconn}`;
+    });
+    const mergeImages = computed(() => {
+      if (isArray(props.videos)) {
+        return [].concat(props.videos).concat(props.images);
+      }
+      return props.images;
+    });
+    const setActive = (active) => {
+      if (active !== state.active) {
+        state.active = active;
+        emit("change", state.active);
+      }
+    };
+    const onClose = () => {
+      funInterceptor(props.beforeClose, {
+        args: [state.active],
+        done: () => closeDone()
       });
-    }, m = () => {
-      a.showPop = !1, t("close");
-    }, g = () => {
-      if (o.value) {
-        const i = Pe(o.value);
-        a.rootHeight = i.height, a.rootWidth = i.width;
+    };
+    const closeDone = () => {
+      state.showPop = false;
+      emit("close");
+    };
+    const init = () => {
+      if (swipeRef.value) {
+        const rect = useRect(swipeRef.value);
+        state.rootHeight = rect.height;
+        state.rootWidth = rect.width;
       }
     };
-    return Z(
-      () => e.show,
-      (i) => {
-        a.showPop = i, i && (c(e.initNo), g());
+    watch(
+      () => props.show,
+      (val) => {
+        state.showPop = val;
+        if (val) {
+          setActive(props.initNo);
+          init();
+        }
       }
-    ), Z(
-      () => e.initNo,
-      (i) => {
-        i != a.active && c(i);
+    );
+    watch(
+      () => props.initNo,
+      (val) => {
+        if (val != state.active)
+          setActive(val);
       }
-    ), ve(() => {
-      c(e.initNo);
-    }), P(S({
-      swipeRef: o
-    }, J(a)), {
-      onClose: u,
-      mergeImages: C,
-      setActive: c,
-      iconClasses: v
+    );
+    onMounted(() => {
+      setActive(props.initNo);
+    });
+    return __spreadProps(__spreadValues({
+      swipeRef
+    }, toRefs(state)), {
+      onClose,
+      mergeImages,
+      setActive,
+      iconClasses
     });
   }
-}), Re = {
+});
+const _hoisted_1 = {
   class: "nut-image-preview",
   ref: "swipeRef"
-}, Be = {
+};
+const _hoisted_2 = {
   key: 0,
   class: "nut-image-preview-index"
 };
-function Ee(e, t, o, a, v, C) {
-  const c = y("image-preview-item"), u = y("nut-swiper"), m = y("CircleClose"), g = y("nut-popup");
-  return p(), I(g, {
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_image_preview_item = resolveComponent("image-preview-item");
+  const _component_nut_swiper = resolveComponent("nut-swiper");
+  const _component_CircleClose = resolveComponent("CircleClose");
+  const _component_nut_popup = resolveComponent("nut-popup");
+  return openBlock(), createBlock(_component_nut_popup, {
     "pop-class": "nut-image-preview-custom-pop",
-    visible: e.showPop,
-    "onUpdate:visible": t[1] || (t[1] = (i) => e.showPop = i),
-    teleportDisable: e.teleportDisable,
-    teleport: e.teleport,
-    onClosed: e.onClose,
+    visible: _ctx.showPop,
+    "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => _ctx.showPop = $event),
+    teleportDisable: _ctx.teleportDisable,
+    teleport: _ctx.teleport,
+    onClosed: _ctx.onClose,
     "lock-scroll": ""
   }, {
-    default: R(() => [
-      K("view", Re, [
-        e.showPop ? (p(), I(u, {
+    default: withCtx(() => [
+      createElementVNode("view", _hoisted_1, [
+        _ctx.showPop ? (openBlock(), createBlock(_component_nut_swiper, {
           key: 0,
-          "auto-play": e.autoplay,
+          "auto-play": _ctx.autoplay,
           class: "nut-image-preview-swiper",
-          loop: e.isLoop,
-          "is-preventDefault": !1,
+          loop: _ctx.isLoop,
+          "is-preventDefault": false,
           direction: "horizontal",
-          onChange: e.setActive,
-          "init-page": e.initNo,
-          "pagination-visible": e.paginationVisible,
-          "pagination-color": e.paginationColor
+          onChange: _ctx.setActive,
+          "init-page": _ctx.initNo,
+          "pagination-visible": _ctx.paginationVisible,
+          "pagination-color": _ctx.paginationColor
         }, {
-          default: R(() => [
-            (p(!0), k(de, null, he(e.mergeImages, (i, d) => (p(), I(c, {
-              key: d,
-              video: d < e.videos.length ? i : {},
-              image: d >= e.videos.length ? i : {},
-              rootHeight: e.rootHeight,
-              rootWidth: e.rootWidth,
-              show: e.showPop,
-              "init-no": e.active + 1,
-              onClose: e.onClose,
-              "content-close": e.contentClose,
-              maxZoom: e.maxZoom,
-              minZoom: e.minZoom
-            }, null, 8, ["video", "image", "rootHeight", "rootWidth", "show", "init-no", "onClose", "content-close", "maxZoom", "minZoom"]))), 128))
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.mergeImages, (item, index) => {
+              return openBlock(), createBlock(_component_image_preview_item, {
+                key: index,
+                video: index < _ctx.videos.length ? item : {},
+                image: index >= _ctx.videos.length ? item : {},
+                rootHeight: _ctx.rootHeight,
+                rootWidth: _ctx.rootWidth,
+                show: _ctx.showPop,
+                "init-no": _ctx.active + 1,
+                onClose: _ctx.onClose,
+                "content-close": _ctx.contentClose,
+                maxZoom: _ctx.maxZoom,
+                minZoom: _ctx.minZoom
+              }, null, 8, ["video", "image", "rootHeight", "rootWidth", "show", "init-no", "onClose", "content-close", "maxZoom", "minZoom"]);
+            }), 128))
           ]),
           _: 1
-        }, 8, ["auto-play", "loop", "onChange", "init-page", "pagination-visible", "pagination-color"])) : N("", !0)
+        }, 8, ["auto-play", "loop", "onChange", "init-page", "pagination-visible", "pagination-color"])) : createCommentVNode("", true)
       ], 512),
-      e.showIndex ? (p(), k("view", Be, q(e.active + 1) + " / " + q(e.mergeImages.length), 1)) : N("", !0),
-      e.closeable ? (p(), k("view", {
+      _ctx.showIndex ? (openBlock(), createElementBlock("view", _hoisted_2, toDisplayString(_ctx.active + 1) + " / " + toDisplayString(_ctx.mergeImages.length), 1)) : createCommentVNode("", true),
+      _ctx.closeable ? (openBlock(), createElementBlock("view", {
         key: 1,
-        class: we(e.iconClasses),
-        onClick: t[0] || (t[0] = (...i) => e.onClose && e.onClose(...i))
+        class: normalizeClass(_ctx.iconClasses),
+        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClose && _ctx.onClose(...args))
       }, [
-        ye(e.$slots, "close-icon", {}, () => [
-          Ce(m, { color: "#ffffff" })
+        renderSlot(_ctx.$slots, "close-icon", {}, () => [
+          createVNode(_component_CircleClose, { color: "#ffffff" })
         ])
-      ], 2)) : N("", !0)
+      ], 2)) : createCommentVNode("", true)
     ]),
     _: 3
   }, 8, ["visible", "teleportDisable", "teleport", "onClosed"]);
 }
-const ee = /* @__PURE__ */ _(Me, [["render", Ee]]);
-class Le {
+const ImagePreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+class ImagePreviewOptions {
   constructor() {
-    l(this, "show", !1);
-    l(this, "images", []);
-    l(this, "videos", []);
-    l(this, "contentClose", !0);
-    l(this, "initNo", 0);
-    l(this, "paginationVisible", !1);
-    l(this, "paginationColor", "");
-    l(this, "autoplay", 0);
-    l(this, "isWrapTeleport", !1);
-    l(this, "showIndex", !0);
-    l(this, "closeable", !1);
-    l(this, "closeIcon", "circle-close");
-    l(this, "closeIconPosition", "top-right");
-    l(this, "beforeClose");
-    l(this, "maxZoom", 3);
-    l(this, "minZoom", 1 / 3);
-    l(this, "isLoop", !0);
-    l(this, "teleport", "body");
+    __publicField(this, "show", false);
+    __publicField(this, "images", []);
+    __publicField(this, "videos", []);
+    __publicField(this, "contentClose", true);
+    __publicField(this, "initNo", 0);
+    __publicField(this, "paginationVisible", false);
+    __publicField(this, "paginationColor", "");
+    __publicField(this, "autoplay", 0);
+    __publicField(this, "isWrapTeleport", false);
+    __publicField(this, "showIndex", true);
+    __publicField(this, "closeable", false);
+    __publicField(this, "closeIcon", "circle-close");
+    __publicField(this, "closeIconPosition", "top-right");
+    __publicField(this, "beforeClose");
+    __publicField(this, "maxZoom", 3);
+    __publicField(this, "minZoom", 1 / 3);
+    __publicField(this, "isLoop", true);
+    __publicField(this, "teleport", "body");
   }
 }
-class Ae {
-  constructor(t) {
-    l(this, "options", new Le());
-    const o = Object.assign(this.options, t), { unmount: a } = Xe(o, {
+class ImagePreviewFunction {
+  constructor(_options) {
+    __publicField(this, "options", new ImagePreviewOptions());
+    const options = Object.assign(this.options, _options);
+    const { unmount } = CreateComponent(options, {
       name: "image-preview",
-      components: [L, B, A, E, Ye],
-      wrapper: () => ({
-        setup() {
-          return () => (o.onClose = () => {
-            o.show = !1, be(() => {
-              a();
-            });
-          }, Te(ee, o));
-        }
-      })
+      components: [Popup, Video, Swiper, SwiperItem, Overlay],
+      wrapper: () => {
+        return {
+          setup() {
+            return () => {
+              options.onClose = () => {
+                options.show = false;
+                nextTick(() => {
+                  unmount();
+                });
+              };
+              return h(ImagePreview, options);
+            };
+          }
+        };
+      }
     });
   }
 }
-const Ve = (e) => new Ae(e);
-Ve.install = (e) => {
-  e.use(ee);
+const showImagePreview = (options) => new ImagePreviewFunction(options);
+showImagePreview.install = (app) => {
+  app.use(ImagePreview);
 };
 export {
-  Le as ImagePreviewOptions,
-  ee as default,
-  Ve as showImagePreview
+  ImagePreviewOptions,
+  ImagePreview as default,
+  showImagePreview
 };