@nutui/nutui 4.0.0 → 4.0.1-2.beta-1

package/dist/packages/_es/ImagePreview.js

@@ -1,36 +1,40 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-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, 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-991c279f.js";
-import Swiper from "./Swiper.js";
-import { f as funInterceptor } from "./interceptor-956b24fc.js";
+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";
 import "../locale/lang";
-import { C as CreateComponent } from "./mountComponent-1ece4110.js";
-import Overlay from "./Overlay.js";
-import "./index-79c5dc33.js";
-import "./raf-729dad54.js";
-const baseProps = {
-  show: { type: Boolean, default: false },
+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 },
   initNo: { type: Number, default: 0 },
-  showIndex: { type: Boolean, default: true },
+  showIndex: { type: Boolean, default: !0 },
   minZoom: { type: Number, default: 1 / 3 },
   maxZoom: { type: Number, default: 3 }
-};
-const { create: create$1 } = createComponent("image-preview-item");
-const _sfc_main$1 = create$1({
-  props: {
-    ...baseProps,
+}, { create: ke } = Q("image-preview-item"), Ze = ke({
+  props: P(S({}, x), {
     image: {
       type: Object,
       default: () => ({})
@@ -46,252 +50,153 @@ const _sfc_main$1 = create$1({
     rootHeight: {
       type: Number,
       default: 0
+    },
+    contentClose: {
+      type: Boolean,
+      default: !0
     }
-  },
+  }),
   emits: ["close", "scale"],
   components: {
-    [Video.name]: Video,
-    [SwiperItem.name]: SwiperItem
+    [B.name]: B,
+    [E.name]: E
   },
-  setup(props, { emit }) {
-    const state = reactive({
+  setup(e, { emit: t }) {
+    const o = G({
       scale: 1,
       moveX: 0,
       moveY: 0,
-      moving: false,
-      zooming: false,
+      moving: !1,
+      zooming: !1,
       imageRatio: 0,
       displayWidth: 0,
       displayHeight: 0
-    });
-    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"
+    }), 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"
         };
-        if (scale !== 1) {
-          const offsetX = moveX / scale;
-          const offsetY = moveY / scale;
-          style.transform = `scale(${scale}, ${scale}) translate(${offsetX}px, ${offsetY}px)`;
+        if (s !== 1) {
+          const ae = r / s, le = f / s;
+          F.transform = `scale(${s}, ${s}) translate(${ae}px, ${le}px)`;
         }
-        return style;
+        return F;
       }
       return {};
-    });
-    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);
+    }), 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);
       }
       return 0;
-    });
-    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);
+    }), 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);
       }
       return 0;
-    });
-    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
-        });
+    }), 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 toggleScale = () => {
-      const scale = state.scale > 1 ? 1 : 2;
-      setScale(scale);
-      state.moveX = 0;
-      state.moveY = 0;
-    };
-    const getDistance = (touches) => Math.sqrt((touches[0].clientX - touches[1].clientX) ** 2 + (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);
+      if (o.zooming && s.length === 2) {
+        const r = D(s), f = W * r / V;
+        i(f);
       }
-    };
-    const checkTap = () => {
-      if (fingerNum == 1 && props.video && props.video.source) {
-        return;
-      }
-      if (fingerNum > 1) {
+    }, ne = () => {
+      if (T == 1 && e.video && e.video.source || T > 1)
         return;
-      }
-      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(() => {
-            emit("close");
-            doubleTapTimer = null;
-          }, TAP_TIME);
-        }
-      }
-    };
-    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;
-          }
-        }
-      }
-      preventDefault(event, stopPropagation);
-      checkTap();
-      touch.reset();
-    };
-    const closeSwiper = () => {
-      emit("close");
+      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");
     };
-    watch(() => props.initNo, resetScale);
-    watch(
-      () => props.show,
-      (value) => {
-        if (!value) {
-          resetScale();
-        }
+    return Z(() => e.initNo, g), Z(
+      () => e.show,
+      (n) => {
+        n || g();
       }
-    );
-    return {
-      ...toRefs(state),
-      onTouchStart,
-      onTouchMove,
-      onTouchEnd,
-      getDistance,
-      imageStyle,
-      imageLoad,
-      closeSwiper
-    };
+    ), P(S({}, J(o)), {
+      onTouchStart: oe,
+      onTouchMove: te,
+      onTouchEnd: ie,
+      getDistance: D,
+      imageStyle: C,
+      imageLoad: m,
+      closeSwiper: se
+    });
   }
-});
-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),
+}), 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),
         class: "nut-image-preview-box",
-        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))
+        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))
       }, [
-        _ctx.image && _ctx.image.src ? (openBlock(), createElementBlock("img", {
+        e.image && e.image.src ? (p(), k("img", {
           key: 0,
-          src: _ctx.image.src,
+          src: e.image.src,
           class: "nut-image-preview-img",
-          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, {
+          onLoad: t[0] || (t[0] = (...m) => e.imageLoad && e.imageLoad(...m))
+        }, null, 40, De)) : N("", !0),
+        e.video && e.video.source ? (p(), I(c, {
           key: 1,
-          source: _ctx.video.source,
-          options: _ctx.video.options
-        }, null, 8, ["source", "options"])) : createCommentVNode("", true)
+          source: e.video.source,
+          options: e.video.options
+        }, null, 8, ["source", "options"])) : N("", !0)
       ], 36)
     ]),
     _: 1
   }, 8, ["onClick"]);
 }
-const ImagePreviewItem = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-const { create } = createComponent("image-preview");
-const _sfc_main = create({
-  props: {
-    ...baseProps,
+const ze = /* @__PURE__ */ _(Ze, [["render", We]]), { create: He } = Q("image-preview"), Me = He({
+  props: P(S({}, x), {
     images: { type: Array, default: () => [] },
     videos: { type: Array, default: () => [] },
-    contentClose: { type: Boolean, default: true },
-    paginationVisible: { type: Boolean, default: false },
+    contentClose: { type: Boolean, default: !0 },
+    paginationVisible: { type: Boolean, default: !1 },
     paginationColor: { type: String, default: "#fff" },
     autoplay: { type: [Number, String], default: 0 },
     teleport: { type: [String, Element], default: "body" },
-    teleportDisable: { ype: Boolean, default: false },
+    teleportDisable: { ype: Boolean, default: !1 },
     closeable: {
       type: Boolean,
-      default: false
+      default: !1
     },
     closeIconPosition: {
       type: String,
@@ -301,207 +206,172 @@ const _sfc_main = create({
     beforeClose: Function,
     isLoop: {
       type: Boolean,
-      default: true
+      default: !0
     }
-  },
+  }),
   emits: ["close", "change"],
   components: {
-    ImagePreviewItem,
-    CircleClose,
-    [Popup.name]: Popup,
-    [Swiper.name]: Swiper
+    ImagePreviewItem: ze,
+    CircleClose: Ie,
+    [L.name]: L,
+    [A.name]: A
   },
-  setup(props, { emit }) {
-    const swipeRef = ref();
-    const state = reactive({
-      showPop: props.show,
+  setup(e, { emit: t }) {
+    const o = ge(), a = G({
+      showPop: e.show,
       active: 0,
       rootWidth: 0,
       rootHeight: 0
-    });
-    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()
+    }), 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 closeDone = () => {
-      state.showPop = false;
-      emit("close");
-    };
-    const init = () => {
-      if (swipeRef.value) {
-        const rect = useRect(swipeRef.value);
-        console.log("show");
-        state.rootHeight = rect.height;
-        state.rootWidth = rect.width;
+    }, m = () => {
+      a.showPop = !1, t("close");
+    }, g = () => {
+      if (o.value) {
+        const i = Pe(o.value);
+        a.rootHeight = i.height, a.rootWidth = i.width;
       }
     };
-    watch(
-      () => props.show,
-      (val) => {
-        console.log("展示", val);
-        state.showPop = val;
-        init();
+    return Z(
+      () => e.show,
+      (i) => {
+        a.showPop = i, i && (c(e.initNo), g());
       }
-    );
-    watch(
-      () => props.initNo,
-      (val) => {
-        if (val != state.active)
-          setActive(val);
+    ), Z(
+      () => e.initNo,
+      (i) => {
+        i != a.active && c(i);
       }
-    );
-    onMounted(() => {
-      setActive(props.initNo);
+    ), ve(() => {
+      c(e.initNo);
+    }), P(S({
+      swipeRef: o
+    }, J(a)), {
+      onClose: u,
+      mergeImages: C,
+      setActive: c,
+      iconClasses: v
     });
-    return {
-      swipeRef,
-      ...toRefs(state),
-      onClose,
-      mergeImages,
-      setActive,
-      iconClasses
-    };
   }
-});
-const _hoisted_1 = {
+}), Re = {
   class: "nut-image-preview",
   ref: "swipeRef"
-};
-const _hoisted_2 = {
+}, Be = {
   key: 0,
   class: "nut-image-preview-index"
 };
-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, {
+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, {
     "pop-class": "nut-image-preview-custom-pop",
-    visible: _ctx.showPop,
-    "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => _ctx.showPop = $event),
-    teleportDisable: _ctx.teleportDisable,
-    teleport: _ctx.teleport,
-    onClosed: _ctx.onClose,
+    visible: e.showPop,
+    "onUpdate:visible": t[1] || (t[1] = (i) => e.showPop = i),
+    teleportDisable: e.teleportDisable,
+    teleport: e.teleport,
+    onClosed: e.onClose,
     "lock-scroll": ""
   }, {
-    default: withCtx(() => [
-      createElementVNode("view", _hoisted_1, [
-        _ctx.showPop ? (openBlock(), createBlock(_component_nut_swiper, {
+    default: R(() => [
+      K("view", Re, [
+        e.showPop ? (p(), I(u, {
           key: 0,
-          "auto-play": _ctx.autoplay,
+          "auto-play": e.autoplay,
           class: "nut-image-preview-swiper",
-          loop: _ctx.isLoop,
-          "is-preventDefault": false,
+          loop: e.isLoop,
+          "is-preventDefault": !1,
           direction: "horizontal",
-          onChange: _ctx.setActive,
-          "init-page": _ctx.initNo,
-          "pagination-visible": _ctx.paginationVisible,
-          "pagination-color": _ctx.paginationColor
+          onChange: e.setActive,
+          "init-page": e.initNo,
+          "pagination-visible": e.paginationVisible,
+          "pagination-color": e.paginationColor
         }, {
-          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,
-                maxZoom: _ctx.maxZoom,
-                minZoom: _ctx.minZoom
-              }, null, 8, ["video", "image", "rootHeight", "rootWidth", "show", "init-no", "onClose", "maxZoom", "minZoom"]);
-            }), 128))
+          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))
           ]),
           _: 1
-        }, 8, ["auto-play", "loop", "onChange", "init-page", "pagination-visible", "pagination-color"])) : createCommentVNode("", true)
+        }, 8, ["auto-play", "loop", "onChange", "init-page", "pagination-visible", "pagination-color"])) : N("", !0)
       ], 512),
-      _ctx.showIndex ? (openBlock(), createElementBlock("view", _hoisted_2, toDisplayString(_ctx.active + 1) + " / " + toDisplayString(_ctx.mergeImages.length), 1)) : createCommentVNode("", true),
-      _ctx.closeable ? (openBlock(), createElementBlock("view", {
+      e.showIndex ? (p(), k("view", Be, q(e.active + 1) + " / " + q(e.mergeImages.length), 1)) : N("", !0),
+      e.closeable ? (p(), k("view", {
         key: 1,
-        class: normalizeClass(_ctx.iconClasses),
-        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClose && _ctx.onClose(...args))
+        class: we(e.iconClasses),
+        onClick: t[0] || (t[0] = (...i) => e.onClose && e.onClose(...i))
       }, [
-        renderSlot(_ctx.$slots, "close-icon", {}, () => [
-          createVNode(_component_CircleClose, { color: "#ffffff" })
+        ye(e.$slots, "close-icon", {}, () => [
+          Ce(m, { color: "#ffffff" })
         ])
-      ], 2)) : createCommentVNode("", true)
+      ], 2)) : N("", !0)
     ]),
     _: 3
   }, 8, ["visible", "teleportDisable", "teleport", "onClosed"]);
 }
-const ImagePreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-class ImagePreviewOptions {
+const ee = /* @__PURE__ */ _(Me, [["render", Ee]]);
+class Le {
   constructor() {
-    __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");
+    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");
   }
 }
-class ImagePreviewFunction {
-  constructor(_options) {
-    __publicField(this, "options", new ImagePreviewOptions());
-    const options = Object.assign(this.options, _options);
-    const { unmount } = CreateComponent(options, {
+class Ae {
+  constructor(t) {
+    l(this, "options", new Le());
+    const o = Object.assign(this.options, t), { unmount: a } = Xe(o, {
       name: "image-preview",
-      components: [Popup, Video, Swiper, SwiperItem, Overlay],
-      wrapper: () => {
-        return {
-          setup() {
-            return () => {
-              options.onClose = () => {
-                unmount();
-              };
-              return h(ImagePreview, options);
-            };
-          }
-        };
-      }
+      components: [L, B, A, E, Ye],
+      wrapper: () => ({
+        setup() {
+          return () => (o.onClose = () => {
+            o.show = !1, be(() => {
+              a();
+            });
+          }, Te(ee, o));
+        }
+      })
     });
   }
 }
-const showImagePreview = (options) => new ImagePreviewFunction(options);
-showImagePreview.install = (app) => {
-  app.use(ImagePreview);
+const Ve = (e) => new Ae(e);
+Ve.install = (e) => {
+  e.use(ee);
 };
 export {
-  ImagePreviewOptions,
-  ImagePreview as default,
-  showImagePreview
+  Le as ImagePreviewOptions,
+  ee as default,
+  Ve as showImagePreview
 };