images-viewer-vue3 - npm Package Compare versions

Comparing version 1.0.15 to 1.0.16

dist/es/components/index.vue.d.ts

@@ -0,1 +1,2 @@
+import { PropType } from 'vue';
 declare const _default: import('vue').DefineComponent<{
@@ -11,4 +12,4 @@ visible: {
     images: {
-        type: ArrayConstructor;
-        default: () => never[];
+        type: PropType<string[]>;
+        required: true;
     };
@@ -42,2 +43,6 @@ zIndex: {
     };
+    playSpeed: {
+        type: NumberConstructor;
+        default: () => number;
+    };
 }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -57,4 +62,4 @@ "on-close": (...args: any[]) => void;
     images: {
-        type: ArrayConstructor;
-        default: () => never[];
+        type: PropType<string[]>;
+        required: true;
     };
@@ -88,2 +93,6 @@ zIndex: {
     };
+    playSpeed: {
+        type: NumberConstructor;
+        default: () => number;
+    };
 }>> & {
@@ -95,5 +104,4 @@ "onOn-close"?: ((...args: any[]) => any) | undefined;
     visible: boolean;
+    zIndex: number;
     current: string;
-    images: unknown[];
-    zIndex: number;
     from: string;
@@ -103,3 +111,4 @@ handleChange: Function;
     language: string;
+    playSpeed: number;
 }, {}>;
 export default _default;

dist/es/components/index.vue.js

@@ -1,7 +0,7 @@
-import e from "./index.vue2.js";
+import o from "./index.vue2.js";
 /* empty css                   */
-import o from "../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ o(e, [["__scopeId", "data-v-4ebfff3e"]]);
+import r from "../_virtual/_plugin-vue_export-helper.js";
+const a = /* @__PURE__ */ r(o, [["__scopeId", "data-v-6c102bb4"]]);
 export {
-  m as default
+  a as default
 };

dist/es/components/index.vue2.js

@@ -1,56 +0,39 @@
-import { defineComponent as f1, ref as x, watch as e1, nextTick as z1, onBeforeUnmount as y1, openBlock as n, createElementBlock as a, normalizeClass as f, unref as t, createElementVNode as s, Fragment as U, renderList as M1, withModifiers as u, createCommentVNode as z, withDirectives as t1, vShow as o1, toDisplayString as r, createBlock as k1, createVNode as s1, pushScopeId as x1, popScopeId as C1 } from "vue";
-import { useToolbar as w1 } from "../hooks/toolbar.js";
-import { getUserAgent as K } from "../utils/index.js";
-import { FlipAnimate as i1 } from "../utils/flip-animate.js";
-import S1 from "./HotKeys.vue.js";
-import I1 from "./Message.vue.js";
-import b1 from "./Loading.vue.js";
-import { useCusShortKey as n1 } from "../utils/hotkeys.js";
-import { messages as B1 } from "../langs/index.js";
-import { useMouse as V1 } from "../hooks/mouse.js";
-const l = (g) => (x1("data-v-4ebfff3e"), g = g(), C1(), g), H1 = { class: "images-viewer-vue3__content" }, R1 = ["data-id"], A1 = ["data-id", "src", "onClick"], L1 = /* @__PURE__ */ l(() => /* @__PURE__ */ s("path", { d: "M322.12 353.93L104.61 490.77c-18.45 11.61-18.44 38.51 0.02 50.1l217.51 136.64c19.71 12.38 45.33-1.78 45.33-25.06V378.98c0-23.29-25.64-37.45-45.35-25.05zM94.78 125.02h834.44c16.84 0 30.5-13.66 30.5-30.5s-13.66-30.5-30.5-30.5H94.78c-16.84 0-30.5 13.66-30.5 30.5s13.66 30.5 30.5 30.5zM929.22 342.34H444.11c-16.84 0-30.5 13.66-30.5 30.5s13.66 30.5 30.5 30.5h485.11c16.84 0 30.5-13.66 30.5-30.5s-13.66-30.5-30.5-30.5zM929.22 620.66H444.11c-16.84 0-30.5 13.66-30.5 30.5s13.66 30.5 30.5 30.5h485.11c16.84 0 30.5-13.66 30.5-30.5s-13.66-30.5-30.5-30.5zM929.22 898.98H94.78c-16.84 0-30.5 13.66-30.5 30.5s13.66 30.5 30.5 30.5h834.44c16.84 0 30.5-13.66 30.5-30.5s-13.66-30.5-30.5-30.5z" }, null, -1)), E1 = [
-  L1
-], T1 = {
+import { defineComponent as de, ref as x, nextTick as ve, watch as fe, onBeforeUnmount as pe, provide as F, openBlock as v, createElementBlock as p, normalizeClass as _, unref as e, createElementVNode as i, toDisplayString as s, createCommentVNode as O, createVNode as I, isRef as ye, withDirectives as Y, withModifiers as he, vShow as $, createBlock as _e, pushScopeId as Ie, popScopeId as ke } from "vue";
+import { useToolbar as we } from "../hooks/toolbar.js";
+import { getUserAgent as k } from "../utils/index.js";
+import { FlipAnimate as q } from "../utils/flip-animate.js";
+import xe from "./HotKeys.vue.js";
+import Oe from "./Message.vue.js";
+import Ce from "./MobileViewer.vue.js";
+import Se from "./Loading.vue.js";
+import be from "./ScrollItemNav.vue.js";
+import Me from "./ToolsBar.vue.js";
+import { useCusShortKey as j } from "../utils/hotkeys.js";
+import { messages as Re } from "../langs/index.js";
+import { useMouse as ze } from "../hooks/mouse.js";
+import { usePlayer as Ne } from "../hooks/player.js";
+const G = (c) => (Ie("data-v-6c102bb4"), c = c(), ke(), c), Be = {
   key: 0,
-  class: "image-info"
-}, N1 = {
-  key: 1,
+  class: "images-viewer-vue3__mobile"
+}, Ae = {
+  key: 0,
+  class: "cus-head-info"
+}, Pe = /* @__PURE__ */ G(() => /* @__PURE__ */ i("path", { d: "M322.12 353.93L104.61 490.77c-18.45 11.61-18.44 38.51 0.02 50.1l217.51 136.64c19.71 12.38 45.33-1.78 45.33-25.06V378.98c0-23.29-25.64-37.45-45.35-25.05zM94.78 125.02h834.44c16.84 0 30.5-13.66 30.5-30.5s-13.66-30.5-30.5-30.5H94.78c-16.84 0-30.5 13.66-30.5 30.5s13.66 30.5 30.5 30.5zM929.22 342.34H444.11c-16.84 0-30.5 13.66-30.5 30.5s13.66 30.5 30.5 30.5h485.11c16.84 0 30.5-13.66 30.5-30.5s-13.66-30.5-30.5-30.5zM929.22 620.66H444.11c-16.84 0-30.5 13.66-30.5 30.5s13.66 30.5 30.5 30.5h485.11c16.84 0 30.5-13.66 30.5-30.5s-13.66-30.5-30.5-30.5zM929.22 898.98H94.78c-16.84 0-30.5 13.66-30.5 30.5s13.66 30.5 30.5 30.5h834.44c16.84 0 30.5-13.66 30.5-30.5s-13.66-30.5-30.5-30.5z" }, null, -1)), Ve = [
+  Pe
+], Ee = { class: "image-info" }, Le = {
+  key: 0,
   style: { "user-select": "text" }
-}, U1 = { style: { color: "orange", "text-decoration": "solid" } }, K1 = { class: "image-viewer__controls" }, D1 = { class: "control-svg__btns" }, F1 = /* @__PURE__ */ l(() => /* @__PURE__ */ s("path", { d: "M476.48 903.36C248.96 903.36 64 718.4 64 491.2S248.96 78.72 476.48 78.72s412.48 184.96 412.48 412.48-185.28 412.16-412.48 412.16z m0-741.12c-181.44 0-328.96 147.52-328.96 328.96s147.52 328.96 328.96 328.96 328.96-147.52 328.96-328.96S657.6 162.24 476.48 162.24z" }, null, -1)), W1 = /* @__PURE__ */ l(() => /* @__PURE__ */ s("path", { d: "M918.4 945.28c-9.28 0-18.56-2.88-26.24-9.28l-156.48-126.4c-17.92-14.4-20.8-40.64-6.08-58.56 14.4-17.92 40.64-20.8 58.56-6.08l156.48 126.4c17.92 14.4 20.8 40.64 6.08 58.56-8.32 9.92-20.16 15.36-32.32 15.36zM643.84 532.8H309.12c-23.04 0-41.6-18.56-41.6-41.6s18.56-41.6 41.6-41.6h334.72c23.04 0 41.6 18.56 41.6 41.6s-18.56 41.6-41.6 41.6z" }, null, -1)), P1 = /* @__PURE__ */ l(() => /* @__PURE__ */ s("path", { d: "M476.48 700.16c-23.04 0-41.6-18.56-41.6-41.6V323.84c0-23.04 18.56-41.6 41.6-41.6s41.6 18.56 41.6 41.6v334.72c0 23.04-18.56 41.6-41.6 41.6z" }, null, -1)), X1 = [
-  F1,
-  W1,
-  P1
-], $1 = /* @__PURE__ */ l(() => /* @__PURE__ */ s("path", { d: "M485.76 921.92C253.12 921.92 64 732.8 64 500.48 64 267.84 253.12 78.72 485.76 78.72s421.76 189.12 421.76 421.76c-0.32 232.32-189.44 421.44-421.76 421.44z m0-759.68c-186.56 0-338.24 151.68-338.24 338.24s151.68 338.24 338.24 338.24 338.24-151.68 338.24-338.24S672 162.24 485.76 162.24z" }, null, -1)), q1 = /* @__PURE__ */ l(() => /* @__PURE__ */ s("path", { d: "M918.4 945.28c-9.28 0-18.56-2.88-26.24-9.28l-156.48-126.4c-17.92-14.4-20.8-40.64-6.08-58.56 14.4-17.92 40.64-20.8 58.56-6.08l156.48 126.4c17.92 14.4 20.8 40.64 6.08 58.56-8.32 9.92-20.16 15.36-32.32 15.36zM657.28 542.08H314.24c-23.04 0-41.6-18.56-41.6-41.6 0-23.04 18.56-41.6 41.6-41.6h343.04c23.04 0 41.6 18.56 41.6 41.6 0 23.04-18.56 41.6-41.6 41.6z" }, null, -1)), O1 = [
-  $1,
-  q1
-], Y1 = /* @__PURE__ */ l(() => /* @__PURE__ */ s("path", { d: "M981.675 313.572c-25.714-60.758-62.464-115.257-109.227-162.02S771.186 68.039 710.428 42.325C647.51 15.815 580.836 2.275 512 2.275s-135.51 13.54-198.428 40.05c-60.758 25.714-115.257 62.464-162.02 109.227-25.486 25.486-48.014 53.248-67.356 83.172V188.87c0-22.528-18.432-40.96-40.96-40.96s-40.96 18.432-40.96 40.96v327.68c0 22.528 18.432 40.96 40.96 40.96s40.96-18.432 40.96-40.96v-57.116c4.778-39.595 15.018-78.166 30.72-115.143 21.731-51.314 52.792-97.394 92.387-136.989s85.675-70.77 136.989-92.387C397.426 92.5 453.86 81.01 512 81.01c58.254 0 114.688 11.378 167.708 33.906 51.314 21.731 97.394 52.792 136.989 92.387s70.77 85.675 92.387 136.989C931.5 397.426 942.99 453.86 942.99 512c0 58.254-11.378 114.688-33.906 167.708-21.731 51.314-52.792 97.394-92.387 136.989s-85.675 70.77-136.989 92.387C626.574 931.5 570.14 942.99 512 942.99c-73.5 0-146.09-18.773-209.806-54.386-61.895-34.588-114.802-84.309-153.145-144.042-11.72-18.318-36.068-23.666-54.386-11.833-18.318 11.719-23.666 36.067-11.833 54.386 45.284 70.542 107.862 129.365 181.02 170.211 75.322 42.098 161.224 64.398 248.15 64.398 68.836 0 135.51-13.54 198.428-40.05 60.758-25.713 115.257-62.463 162.02-109.226 46.763-46.763 83.513-101.262 109.227-162.02 26.51-62.919 40.05-129.592 40.05-198.428s-13.54-135.51-40.05-198.428z" }, null, -1)), j1 = /* @__PURE__ */ l(() => /* @__PURE__ */ s("path", { d: "M242.802 584.249c10.809-2.845 21.731 3.3 25.372 13.88 3.982 11.606 11.264 20.14 21.732 25.715 8.078 4.437 17.18 6.599 27.306 6.599 18.888 0 35.044-7.851 48.356-23.666 13.312-15.701 22.756-37.205 28.33-85.447-8.76 13.88-19.683 23.666-32.654 29.354-12.97 5.69-26.965 8.42-41.87 8.42-30.378 0-54.272-9.444-72.021-28.33-17.636-18.888-26.51-43.122-26.51-72.932 0-28.558 8.76-53.59 26.169-75.321 17.408-21.618 43.121-32.54 77.14-32.54 45.853 0 77.484 20.593 94.892 61.895 9.67 22.641 14.45 51.086 14.45 85.22 0 38.456-5.803 72.59-17.409 102.285-19.228 49.494-51.769 74.183-97.621 74.183-30.72 0-54.158-8.078-70.087-24.12-11.378-11.492-18.66-25.032-21.96-40.733-2.275-10.923 4.552-21.731 15.36-24.576l1.025 0.114z m117.19-84.65c10.696-8.534 16.044-23.439 16.044-44.715 0-19.115-4.78-33.337-14.45-42.667s-21.846-13.995-36.75-13.995c-15.93 0-28.672 5.348-38.002 16.043-9.33 10.695-14.109 25.031-14.109 42.894 0 16.953 4.096 30.379 12.402 40.391 8.192 10.013 21.39 14.905 39.367 14.905 12.97 0 24.804-4.323 35.499-12.857z m305.153-98.646c14.108 25.941 21.049 61.44 21.049 106.61 0 42.78-6.372 78.165-19.115 106.154-18.432 40.164-48.697 60.189-90.567 60.189-37.774 0-65.877-16.384-84.423-49.266-15.36-27.42-23.097-64.17-23.097-110.364 0-35.727 4.665-66.447 13.88-92.047 17.295-47.786 48.584-71.68 93.868-71.68 40.846 0 70.314 16.84 88.405 50.404zM619.406 598.13c10.695-15.815 15.93-45.398 15.93-88.747 0-31.175-3.87-56.889-11.492-77.027-7.737-20.14-22.642-30.265-44.829-30.265-20.366 0-35.271 9.557-44.715 28.672-9.443 19.114-14.108 47.331-14.108 84.537 0 27.989 2.958 50.517 8.988 67.584 9.216 25.94 25.032 39.025 47.332 39.025 17.863 0 32.2-7.964 42.894-23.78z m224.029-228.125c12.743 12.857 19.114 28.445 19.114 46.877 0 19-6.599 34.93-19.91 47.559-13.199 12.743-28.673 19.115-46.195 19.115-19.456 0-35.498-6.6-47.9-19.798-12.402-13.198-18.66-28.558-18.66-46.194 0-18.773 6.6-34.588 19.684-47.445 13.084-12.857 28.786-19.342 46.876-19.342 18.546 0 34.248 6.485 46.99 19.228z m-72.59 72.59c7.054 7.055 15.587 10.582 25.6 10.582 9.557 0 17.976-3.527 25.144-10.581 7.168-7.055 10.695-15.588 10.695-25.714 0-9.671-3.527-18.09-10.58-25.145-7.055-7.054-15.475-10.581-25.26-10.581s-18.318 3.527-25.486 10.58c-7.168 7.055-10.695 15.588-10.695 25.715-0.114 9.557 3.413 17.977 10.581 25.145z" }, null, -1)), G1 = [
-  Y1,
-  j1
-], J1 = /* @__PURE__ */ l(() => /* @__PURE__ */ s("path", { d: "M512 1021.724c-68.836 0-135.51-13.54-198.428-40.05-60.758-25.713-115.257-62.463-162.02-109.226S68.039 771.186 42.325 710.428C15.815 647.51 2.275 580.836 2.275 512s13.54-135.51 40.05-198.428c25.714-60.758 62.464-115.257 109.227-162.02s101.262-83.513 162.02-109.227C376.49 15.815 443.164 2.275 512 2.275s135.51 13.54 198.428 40.05c60.758 25.714 115.257 62.464 162.02 109.227s83.513 101.262 109.227 162.02c26.51 62.919 40.05 129.592 40.05 198.428 0 21.732-17.636 39.367-39.368 39.367S942.99 533.732 942.99 512c0-58.254-11.378-114.688-33.906-167.708-21.731-51.314-52.792-97.394-92.387-136.989s-85.675-70.77-136.989-92.387C626.574 92.5 570.14 81.01 512 81.01c-58.254 0-114.688 11.378-167.708 33.906-51.314 21.731-97.394 52.792-136.989 92.387s-70.77 85.675-92.387 136.989C92.5 397.426 81.01 453.86 81.01 512c0 58.254 11.378 114.688 33.906 167.708 21.731 51.314 52.792 97.394 92.387 136.989s85.675 70.77 136.989 92.387C397.426 931.5 453.86 942.99 512 942.99c73.5 0 146.09-18.773 209.806-54.386 61.895-34.588 114.802-84.309 153.145-144.042 11.72-18.318 36.068-23.666 54.386-11.833 18.318 11.719 23.666 36.067 11.833 54.386-45.284 70.542-107.862 129.365-181.02 170.211-75.322 42.098-161.224 64.398-248.15 64.398z" }, null, -1)), Q1 = /* @__PURE__ */ l(() => /* @__PURE__ */ s("path", { d: "M980.764 557.511c-22.528 0-40.96-18.432-40.96-40.96v-327.68c0-22.528 18.432-40.96 40.96-40.96s40.96 18.432 40.96 40.96v327.68c0 22.528-18.432 40.96-40.96 40.96zM242.802 584.25c10.809-2.845 21.731 3.3 25.372 13.88 3.982 11.606 11.264 20.14 21.732 25.715 8.078 4.437 17.18 6.599 27.306 6.599 18.888 0 35.044-7.851 48.356-23.666 13.312-15.701 22.756-37.205 28.33-85.447-8.76 13.88-19.683 23.666-32.654 29.354-12.97 5.69-26.965 8.42-41.87 8.42-30.378 0-54.272-9.444-72.021-28.33-17.636-18.888-26.51-43.122-26.51-72.932 0-28.558 8.76-53.59 26.169-75.321 17.408-21.618 43.121-32.54 77.14-32.54 45.853 0 77.484 20.593 94.892 61.895 9.67 22.641 14.45 51.086 14.45 85.22 0 38.456-5.803 72.59-17.409 102.285-19.228 49.494-51.769 74.183-97.621 74.183-30.72 0-54.158-8.078-70.087-24.12-11.378-11.492-18.66-25.032-21.96-40.733-2.275-10.923 4.552-21.731 15.36-24.576l1.025 0.114z m117.19-84.65c10.696-8.534 16.044-23.439 16.044-44.715 0-19.115-4.78-33.337-14.45-42.667s-21.846-13.995-36.75-13.995c-15.93 0-28.672 5.348-38.002 16.043-9.33 10.695-14.109 25.031-14.109 42.894 0 16.953 4.096 30.379 12.402 40.391 8.192 10.013 21.39 14.905 39.367 14.905 12.97 0 24.804-4.323 35.499-12.857z m305.153-98.646c14.108 25.941 21.049 61.44 21.049 106.61 0 42.78-6.372 78.165-19.115 106.154-18.432 40.164-48.697 60.189-90.567 60.189-37.774 0-65.877-16.384-84.423-49.266-15.36-27.42-23.097-64.17-23.097-110.364 0-35.727 4.665-66.447 13.88-92.047 17.295-47.786 48.584-71.68 93.868-71.68 40.846 0 70.314 16.84 88.405 50.404zM619.406 598.13c10.695-15.815 15.93-45.398 15.93-88.747 0-31.175-3.87-56.889-11.492-77.027-7.737-20.14-22.642-30.265-44.829-30.265-20.366 0-35.271 9.557-44.715 28.672-9.443 19.114-14.108 47.331-14.108 84.537 0 27.989 2.958 50.517 8.988 67.584 9.216 25.94 25.032 39.025 47.332 39.025 17.863 0 32.2-7.964 42.894-23.78z m224.029-228.125c12.743 12.857 19.114 28.445 19.114 46.877 0 19-6.599 34.93-19.91 47.559-13.199 12.743-28.673 19.115-46.195 19.115-19.456 0-35.498-6.6-47.9-19.798-12.402-13.198-18.66-28.558-18.66-46.194 0-18.773 6.6-34.588 19.684-47.445 13.084-12.857 28.786-19.342 46.876-19.342 18.546 0 34.248 6.485 46.99 19.228z m-72.59 72.59c7.054 7.055 15.587 10.582 25.6 10.582 9.557 0 17.976-3.527 25.144-10.581 7.168-7.055 10.695-15.588 10.695-25.714 0-9.671-3.527-18.09-10.58-25.145-7.055-7.054-15.475-10.581-25.26-10.581s-18.318 3.527-25.486 10.58c-7.168 7.055-10.695 15.588-10.695 25.715-0.114 9.557 3.413 17.977 10.581 25.145z" }, null, -1)), Z1 = [
-  J1,
-  Q1
-], e2 = /* @__PURE__ */ l(() => /* @__PURE__ */ s("path", { d: "M573.248 832v88h-96V832h96zM128 224a64 64 0 0 1 45.248 18.752l229.504 229.504a64 64 0 0 1 0 90.496l-229.504 229.504A64 64 0 0 1 64 747.008V288a64 64 0 0 1 64-64z m781.248-5.504a64 64 0 0 1 63.552 56.576l0.448 7.424v459.008a64 64 0 0 1-103.232 50.56l-6.016-5.312-229.504-229.504a64 64 0 0 1-5.312-84.48l5.312-6.016L864 237.248a64 64 0 0 1 45.248-18.752zM128 288v459.008l229.504-229.504L128 288z m445.248 368v88h-96V656h96z m0-176v88h-96V480h96z m0-176v88h-96V304h96z m0-176v88h-96V128h96z" }, null, -1)), t2 = [
-  e2
-], o2 = /* @__PURE__ */ l(() => /* @__PURE__ */ s("path", { d: "M660.48 106.24L512 291.84l-149.12-185.6h297.6M768 69.12c1.28-19.2-13.44-36.48-33.28-37.12H289.28c-19.2 1.28-33.92 17.92-33.28 37.12 0 8.96 3.2 17.92 8.32 24.96l222.72 277.76a30.72 30.72 0 0 0 49.28 0l222.72-277.76c6.4-7.04 8.96-16 8.96-24.96zM768 954.88c1.28 19.2-13.44 36.48-33.28 37.12H289.28a35.52 35.52 0 0 1-33.28-37.12c0-8.96 3.2-17.92 8.32-24.96l222.72-277.76a30.72 30.72 0 0 1 49.28 0l222.72 277.76c6.4 7.04 8.96 16 8.96 24.96zM800 480h64v64h-64zM928 480h64v64h-64zM672 480h64v64h-64zM544 480h64v64h-64zM416 480h64v64h-64zM288 480h64v64h-64zM160 480h64v64h-64zM32 480h64v64h-64z" }, null, -1)), s2 = [
-  o2
-], i2 = /* @__PURE__ */ l(() => /* @__PURE__ */ s("path", { d: "M863.153113 702.196507h116.959605a43.887282 43.887282 0 0 1 0 87.774563H863.153113A73.182042 73.182042 0 0 0 789.97107 863.153113v116.959605a43.887282 43.887282 0 0 1-87.774563 0V863.153113A160.956606 160.956606 0 0 1 863.153113 702.196507z m0-380.393014h116.959605a43.887282 43.887282 0 0 0 0-87.774563H863.153113A73.182042 73.182042 0 0 1 789.97107 160.956606V43.887282a43.887282 43.887282 0 0 0-87.774563 0v117.069324a160.846887 160.846887 0 0 0 160.956606 160.846887z m-702.196507 0H43.887282a43.887282 43.887282 0 0 1 0-87.774563h117.069324a73.072324 73.072324 0 0 0 73.072324-73.072324V43.887282a43.887282 43.887282 0 0 1 87.774563 0v117.069324a160.846887 160.846887 0 0 1-160.846887 160.846887z m0 380.393014H43.887282a43.887282 43.887282 0 0 0 0 87.774563h117.069324a73.182042 73.182042 0 0 1 73.072324 73.182043v116.959605a43.887282 43.887282 0 0 0 87.774563 0V863.153113A160.846887 160.846887 0 0 0 160.956606 702.196507z" }, null, -1)), n2 = [
-  i2
-], l2 = /* @__PURE__ */ l(() => /* @__PURE__ */ s("path", { d: "M768.35456 416a256 256 0 1 0-512 0 192 192 0 1 0 0 384v64a256 256 0 0 1-58.88-505.216 320.128 320.128 0 0 1 629.76 0A256.128 256.128 0 0 1 768.35456 864v-64a192 192 0 0 0 0-384z m-512 384h64v64H256.35456v-64z m448 0h64v64h-64v-64z" }, null, -1)), a2 = /* @__PURE__ */ l(() => /* @__PURE__ */ s("path", { d: "M539.04256 845.248V512.192a32.448 32.448 0 0 0-32-32.192c-17.664 0-32 14.912-32 32.192v333.056l-36.096-36.096a32.192 32.192 0 0 0-45.056 0.192 31.616 31.616 0 0 0-0.192 45.056l90.88 90.944a31.36 31.36 0 0 0 22.528 9.088 30.08 30.08 0 0 0 22.4-9.088l90.88-90.88a32.192 32.192 0 0 0-0.192-45.12 31.616 31.616 0 0 0-45.056-0.192l-36.096 36.096z" }, null, -1)), c2 = [
-  l2,
-  a2
-], r2 = /* @__PURE__ */ l(() => /* @__PURE__ */ s("path", { d: "M512 2.56C231.424 2.56 3.584 229.888 3.584 510.976S231.424 1018.88 512 1018.88s508.416-227.328 508.416-508.416S793.088 2.56 512 2.56z m0 941.568c-239.616 0-433.664-194.048-433.664-433.664S272.384 76.8 512 76.8s433.664 194.048 433.664 433.664-194.048 433.664-433.664 433.664z" }, null, -1)), v2 = /* @__PURE__ */ l(() => /* @__PURE__ */ s("path", { d: "M409.6 730.112c-19.968 0-35.84-15.872-35.84-35.84v-332.8c0-19.968 15.872-35.84 35.84-35.84s35.84 15.872 35.84 35.84v332.8c0 19.968-15.872 35.84-35.84 35.84zM614.4 730.112c-19.968 0-35.84-15.872-35.84-35.84v-332.8c0-19.968 15.872-35.84 35.84-35.84s35.84 15.872 35.84 35.84v332.8c0 19.968-15.872 35.84-35.84 35.84z" }, null, -1)), u2 = [
-  r2,
-  v2
-], d2 = /* @__PURE__ */ l(() => /* @__PURE__ */ s("path", { d: "M423.687947 757.47897a100.195631 100.195631 0 0 1-100.195631-101.197587V366.716009a100.195631 100.195631 0 0 1 153.299316-85.166286l232.453863 145.283665a100.195631 100.195631 0 0 1 0 170.332573L476.791632 741.447669a100.195631 100.195631 0 0 1-52.101729 15.029345z m0-410.802087a21.041083 21.041083 0 0 0-10.019563 3.005869 20.039126 20.039126 0 0 0-10.019563 17.033257v289.565374a20.039126 20.039126 0 0 0 31.060646 17.033257l232.453863-145.283665a20.039126 20.039126 0 0 0 0-34.066514L433.70751 349.682752a19.03717 19.03717 0 0 0-10.019563-4.007825z" }, null, -1)), m2 = /* @__PURE__ */ l(() => /* @__PURE__ */ s("path", { d: "M512.862059 1023.999349A511.999674 511.999674 0 0 1 313.472753 40.078252a511.999674 511.999674 0 0 1 398.778611 942.840888 508.993805 508.993805 0 0 1-199.389305 41.080209z m0-943.842844C274.396457 80.156505 81.018889 273.534073 81.018889 511.999674s193.377568 431.84317 431.84317 431.84317 431.84317-194.379524 431.843169-431.84317S750.325704 80.156505 512.862059 80.156505z" }, null, -1)), h2 = [
-  d2,
-  m2
-], p2 = /* @__PURE__ */ l(() => /* @__PURE__ */ s("svg", {
+}, Te = { style: { color: "orange", "text-decoration": "solid" } }, He = {
+  class: /* @__PURE__ */ _(["image-viewer__controls"])
+}, Ke = { class: "control-info position" }, Ue = /* @__PURE__ */ G(() => /* @__PURE__ */ i("svg", {
   class: "close-icon icon-is-hover svg-icon__action",
-  viewBox: "0 0 1024 1024"
+  viewBox: "0 0 1024 1024",
+  width: "15",
+  height: "15"
 }, [
-  /* @__PURE__ */ s("path", { d: "M835.2 854.4c-12.8 0-22.4-3.2-32-12.8L211.2 256C192 240 192 211.2 208 195.2s44.8-16 60.8 0L864 780.8c16 16 16 44.8 0 60.8-6.4 9.6-16 12.8-28.8 12.8z" }),
-  /* @__PURE__ */ s("path", { d: "M236.8 848c-12.8 0-22.4-3.2-32-12.8-16-16-16-44.8 0-60.8l604.8-576c16-16 44.8-16 60.8 0s16 44.8 0 60.8l-604.8 576c-9.6 9.6-19.2 12.8-28.8 12.8z" })
-], -1)), g2 = [
-  p2
-], b2 = /* @__PURE__ */ f1({
+  /* @__PURE__ */ i("path", { d: "M835.2 854.4c-12.8 0-22.4-3.2-32-12.8L211.2 256C192 240 192 211.2 208 195.2s44.8-16 60.8 0L864 780.8c16 16 16 44.8 0 60.8-6.4 9.6-16 12.8-28.8 12.8z" }),
+  /* @__PURE__ */ i("path", { d: "M236.8 848c-12.8 0-22.4-3.2-32-12.8-16-16-16-44.8 0-60.8l604.8-576c16-16 44.8-16 60.8 0s16 44.8 0 60.8l-604.8 576c-9.6 9.6-19.2 12.8-28.8 12.8z" })
+], -1)), De = [
+  Ue
+], it = /* @__PURE__ */ de({
   __name: "index",
@@ -68,3 +51,3 @@ props: {
       type: Array,
-      default: () => []
+      required: !0
     },
@@ -96,319 +79,222 @@ zIndex: {
       default: () => "zh"
+    },
+    playSpeed: {
+      type: Number,
+      default: () => 2e3
     }
   },
   emits: ["on-close", "on-change", "onUpdate:value"],
-  setup(g, { emit: _2 }) {
-    const v = g, p = (i = "") => {
-      const o = B1[v.language];
-      if (o) {
-        const { image: e } = o, c = i.split(".");
-        return e[c[1]] || i;
+  setup(c, { emit: We }) {
+    const o = c, g = (n = "") => {
+      const t = Re[o.language];
+      if (t) {
+        const { image: a } = t, u = n.split(".");
+        return a[u[1]] || n;
       } else
-        return console.warn(`[images-viewer-vue3]:The current language '${v.language}' is not supported`), v.language;
+        return console.warn(`[images-viewer-vue3]:The current language '${o.language}' is not supported`), o.language;
     }, {
-      onMouseEnterImage: D,
-      updateImageSrc: y,
-      playState: F,
-      stopPlay: C,
-      autoPlay: w,
-      isMultipleImage: M,
-      onWheelListener: W,
-      imageInfo: P,
-      originImages: X,
-      nextImage: l1,
-      previousImage: a1,
-      onRectScroll: $,
-      renderData: q,
-      vnodeUlRef: c1,
-      vnodeScrollRef: r1,
-      destroyedExe: O,
-      resetStyle: S,
-      downloads: Y,
-      loadImageErrorText: j,
-      loading: v1,
-      imageRef: d,
-      imageVieverWidgetRef: u1,
-      loadImage: G,
-      errorImage: J,
-      zoomIn: I,
-      zoomOut: b,
-      inevrtY: B,
-      inevrtX: V,
-      clockwise: H,
-      counterclockwise: R,
-      currentIndex: _,
-      activeIndex: A
-    } = w1(v.images, v.current, v.handleChange);
-    V1();
-    const L = x(""), E = x(!1);
-    function m(i, o, e = !0) {
-      n1({
-        [i]: (c, h) => {
-          o(), T(c, h, e);
+      updateImageSrc: f,
+      isMultipleImage: y,
+      onWheelListener: R,
+      imageInfo: z,
+      nextImage: N,
+      previousImage: B,
+      destroyedExe: A,
+      resetStyle: P,
+      downloads: J,
+      loadImageErrorText: V,
+      loading: E,
+      imageRef: r,
+      imageVieverWidgetRef: Q,
+      loadImage: L,
+      errorImage: T,
+      zoomIn: H,
+      zoomOut: K,
+      inevrtY: U,
+      inevrtX: D,
+      clockwise: W,
+      counterclockwise: X,
+      currentIndex: l
+    } = we(o.images, o.handleChange);
+    ze();
+    const { scrollItemNavRef: ee, playState: te, autoPlay: ne, stopPlay: w, hotKeyAutoPlay: oe } = Ne(l, o.images, r, o.handleChange, o.playSpeed), ae = (n) => {
+      w();
+    }, ie = () => {
+      w(), B();
+    }, le = () => {
+      w(), N();
+    }, C = x(""), S = x(!1);
+    function m(n, t, a = !0) {
+      j({
+        [n]: (u, d) => {
+          t(), b(u, d, a);
         }
       });
     }
-    m("right", l1), m("left", a1), m("ctrl+i+y", B), m("ctrl+i+x", V), m("ctrl+c+r", H), m("ctrl+c+l", R), m("ctrl+z", S), m("esc", Q), m("space", h1), n1({ "ctrl+*": (i, o) => {
-      switch (i.key) {
+    m("right", N), m("left", B), m("ctrl+i+y", U), m("ctrl+i+x", D), m("ctrl+c+r", W), m("ctrl+c+l", X), m("ctrl+z", P), m("esc", Z), m("space", oe), j({ "ctrl+*": (n, t) => {
+      switch (n.key) {
         case "-":
-          b(i), T(i, o, !0, "ctrl + " + i.key);
+          K(n), b(n, t, !0, "ctrl + " + n.key);
           break;
         case "+":
-          I(i), T(i, o, !0, "ctrl + " + i.key);
+          H(n), b(n, t, !0, "ctrl + " + n.key);
           break;
       }
     } });
-    function T(i, o, e = !1, c = "") {
-      e && i.preventDefault();
-      const { key: h } = o;
-      L.value = c || h, E.value = !0, setTimeout(() => {
-        E.value = !1;
+    function b(n, t, a = !1, u = "") {
+      a && n.preventDefault();
+      const { key: d } = t;
+      C.value = u || d, S.value = !0, setTimeout(() => {
+        S.value = !1;
       }, 2e3);
     }
-    const k = x(!1), N = x(!1), d1 = () => {
-      k.value = !k.value;
+    const se = ({ index: n, url: t }) => {
+      l.value = n, f.value = t, o.handleChange({ image: t, index: l.value });
+    }, h = x(!1), M = x(!1), re = () => {
+      h.value = !h.value;
     };
-    e1(() => v.current, (i, o) => {
-      i && z1().then((e) => {
-        if (d.value)
-          if (v.image === void 0)
-            d.value.src = i;
-          else {
-            const c = v.image.getBoundingClientRect();
-            y.value = d.value.src = v.image.src;
-            const h = d.value.getBoundingClientRect();
-            i1(d.value, c, h).addEventListener("finish", (Z) => {
-              k.value = !0;
-            });
-          }
-      });
-    }, {
-      deep: !0,
-      immediate: !0
-    }), e1(() => _.value, (i, o) => {
-      if (i) {
-        if (!d.value) return;
-        q.value.findIndex((e) => e.index === _.value), m1();
-      }
+    ve(() => {
+      if (k()) {
+        f.value = o.current, E.value = !1;
+        const n = o.images.findIndex((t) => t === o.current);
+        n !== -1 && (l.value = n);
+      } else ce();
     });
-    function m1() {
-      _.value === X.value.length - 1 && (N.value = !0, setTimeout(() => {
-        N.value = !1;
+    function ce() {
+      if (r.value)
+        if (o.image === void 0)
+          r.value.src = o.current;
+        else {
+          const n = o.images.findIndex((d) => d === o.current);
+          n !== -1 && (l.value = n);
+          const t = o.image.getBoundingClientRect();
+          f.value = r.value.src = o.image.src;
+          const a = r.value.getBoundingClientRect();
+          q(r.value, t, a).addEventListener("finish", (d) => {
+            h.value = !0;
+          });
+        }
+    }
+    fe(() => l.value, (n, t) => {
+      n && ue();
+    });
+    function ue() {
+      l.value === o.images.length - 1 && (M.value = !0, setTimeout(() => {
+        M.value = !1;
       }, 2e3));
     }
-    function h1() {
-      F.value ? C() : w();
-    }
-    function p1(i, o, e) {
-      if (j.value = "", !!d.value && i.target) {
-        const c = i.target, h = c.getBoundingClientRect();
-        if (Number(c.getAttribute("data-id")) === A.value) return;
-        A.value = o.index, _.value = X.value.findIndex((_1) => _1.index === A.value), y.value = d.value.src = c.src;
-        const Z = d.value.getBoundingClientRect();
-        v.handleChange({ image: y.value, index: _.value }), i1(d.value, h, Z);
+    function me({ evt: n, item: t, index: a }) {
+      if (V.value = "", !!r.value && n.target) {
+        const u = n.target, d = u.getBoundingClientRect();
+        if (Number(u.getAttribute("data-id")) === l.value) return;
+        l.value = t.index, f.value = r.value.src = u.src;
+        const ge = r.value.getBoundingClientRect();
+        o.handleChange({ image: f.value, index: l.value }), q(r.value, d, ge);
       }
     }
-    function Q() {
-      O(), v.handleClose(), y.value = "";
+    function Z() {
+      A(), o.handleClose(), f.value = "";
     }
-    return y1(() => {
-      O();
-    }), (i, o) => (n(), a("div", {
+    return pe(() => {
+      A();
+    }), F("images", o.images), F("isMultipleImage", y.value), (n, t) => (v(), p("div", {
       ref_key: "imageVieverWidgetRef",
-      ref: u1,
-      class: f([
+      ref: Q,
+      class: _([
         "images-viewer-vue3__wrapper",
-        { "is-active": g.visible },
-        { "nav-scroll-style__wrap": !t(K)() }
+        { "is-active": c.visible },
+        { "nav-scroll-style__wrap": !e(k)() }
       ])
     }, [
-      s("div", H1, [
-        t(M) ? (n(), a("div", {
+      e(k)() ? (v(), p("div", Be, [
+        e(y) ? (v(), p("div", Ae, [
+          i("span", null, s(c.images.length) + "  / " + s(e(l) + 1), 1)
+        ])) : O("", !0),
+        I(Ce, {
+          currentImage: c.current,
+          activeImage: c.image,
+          onOnCb: se
+        }, null, 8, ["currentImage", "activeImage"])
+      ])) : (v(), p("div", {
+        key: 1,
+        class: _(["images-viewer-vue3__content", { "active-grid": !h.value }, { "close-grid": !e(y) }])
+      }, [
+        e(y) ? (v(), p("div", {
           key: 0,
-          class: f(["content-nav__wrapper", { "nav-active": k.value }])
+          class: _(["content-nav__wrapper", { "nav-active": h.value }, { "is-hidden": e(k)() }])
         }, [
-          s("div", {
-            ref_key: "vnodeScrollRef",
-            ref: r1,
-            class: f(["nav-vnode-scroll__wrapper"]),
-            onScroll: o[0] || (o[0] = //@ts-ignore
-            (...e) => t($) && t($)(...e))
-          }, [
-            s("ul", {
-              ref_key: "vnodeUlRef",
-              ref: c1,
-              class: f(["vnode-list-group"])
-            }, [
-              (n(!0), a(U, null, M1(t(q), (e, c) => (n(), a("li", {
-                class: f(["list-group-item", { "list-group-item__active": t(_) === e.index }]),
-                style: { height: "50px" },
-                key: c,
-                "data-id": e.index
-              }, [
-                s("img", {
-                  class: "list-group-item__image",
-                  "data-id": e.index,
-                  src: e.url,
-                  alt: "picture",
-                  onClick: u((h) => p1(h, e), ["stop", "prevent"])
-                }, null, 8, A1)
-              ], 10, R1))), 128))
-            ], 512)
-          ], 544)
-        ], 2)) : z("", !0),
-        s("div", {
+          I(be, {
+            ref_key: "scrollItemNavRef",
+            ref: ee,
+            modelValue: e(l),
+            "onUpdate:modelValue": t[0] || (t[0] = (a) => ye(l) ? l.value = a : null),
+            onOnClick: me
+          }, null, 8, ["modelValue"])
+        ], 2)) : O("", !0),
+        i("div", {
           class: "content-viewer-image__wrapper",
-          onWheel: o[14] || (o[14] = //@ts-ignore
-          (...e) => t(W) && t(W)(...e))
+          onWheel: t[3] || (t[3] = //@ts-ignore
+          (...a) => e(R) && e(R)(...a))
         }, [
-          t1((n(), a("svg", {
-            onClick: u(d1, ["stop", "prevent"]),
-            class: f(["icon-is-hover cus-cursor image-collapse-nav__btn svg-icon__action", { "rotate-right__btn": !k.value }]),
+          Y((v(), p("svg", {
+            onClick: he(re, ["stop", "prevent"]),
+            class: _(["icon-is-hover cursor image-collapse-nav__btn svg-icon__action", { "rotate-right__btn": !h.value }, { "is-hidden": e(k)() }]),
             viewBox: "0 0 1024 1024"
-          }, E1, 2)), [
-            [o1, t(M)]
+          }, Ve, 2)), [
+            [$, e(y)]
           ]),
-          t(K)() ? z("", !0) : (n(), a("ul", T1, [
-            s("li", null, r(p("image.ruleText")) + "：" + r(t(P).width) + r(p("image.px")) + " X " + r(t(P).height) + r(p("image.px")), 1)
-          ])),
-          t(j) ? (n(), a("div", N1, [
-            s("p", U1, r(p("image.loadErrorText")), 1),
-            s("p", null, r(t(y)), 1)
-          ])) : z("", !0),
-          s("img", {
+          i("ul", Ee, [
+            i("li", null, s(g("image.ruleText")) + "：" + s(e(z).width) + s(g("image.px")) + " X " + s(e(z).height) + s(g("image.px")), 1)
+          ]),
+          e(V) ? (v(), p("div", Le, [
+            i("p", Te, s(g("image.loadErrorText")), 1),
+            i("p", null, s(e(f)), 1)
+          ])) : O("", !0),
+          i("img", {
             ref_key: "imageRef",
-            ref: d,
-            class: "image-viewer__inner cus-transition",
-            onLoad: o[1] || (o[1] = //@ts-ignore
-            (...e) => t(G) && t(G)(...e)),
-            onError: o[2] || (o[2] = //@ts-ignore
-            (...e) => t(J) && t(J)(...e)),
-            src: "",
+            ref: r,
+            class: _(["image-viewer__inner cus-transition"]),
+            onLoad: t[1] || (t[1] = //@ts-ignore
+            (...a) => e(L) && e(L)(...a)),
+            onError: t[2] || (t[2] = //@ts-ignore
+            (...a) => e(T) && e(T)(...a)),
             alt: "picture",
-            style: { width: "120px", height: "120px" },
-            onMouseenter: o[3] || (o[3] = //@ts-ignore
-            (...e) => t(D) && t(D)(...e))
+            onMouseenter: ae
           }, null, 544),
-          t(v1) ? (n(), k1(b1, { key: 2 })) : z("", !0),
-          s("div", K1, [
-            t1(s("div", {
-              class: f(["control-info", { position: !t(K)() }])
-            }, [
-              s("span", null, r(p("image.total")) + " " + r(g.images.length) + " " + r(p("image.pictures")) + " ", 1),
-              s("span", null, "/ " + r(p("image.the")) + " " + r(t(_) + 1) + " " + r(p("image.img")) + " ", 1)
-            ], 2), [
-              [o1, t(M)]
+          e(E) ? (v(), _e(Se, { key: 1 })) : O("", !0),
+          i("div", He, [
+            Y(i("div", Ke, [
+              i("span", null, s(g("image.total")) + " " + s(c.images.length) + " " + s(g("image.pictures")) + " ", 1),
+              i("span", null, "/ " + s(g("image.the")) + " " + s(e(l) + 1) + " " + s(g("image.img")) + " ", 1)
+            ], 512), [
+              [$, e(y)]
             ]),
-            s("div", D1, [
-              (n(), a("svg", {
-                onClick: o[4] || (o[4] = u(
-                  //@ts-ignore
-                  (...e) => t(I) && t(I)(...e),
-                  ["stop", "prevent"]
-                )),
-                class: "tool-item-icon__btn icon-is-hover",
-                viewBox: "0 0 1024 1024"
-              }, X1)),
-              (n(), a("svg", {
-                onClick: o[5] || (o[5] = u(
-                  //@ts-ignore
-                  (...e) => t(b) && t(b)(...e),
-                  ["stop", "prevent"]
-                )),
-                class: "tool-item-icon__btn icon-is-hover",
-                viewBox: "0 0 1024 1024"
-              }, O1)),
-              (n(), a("svg", {
-                onClick: o[6] || (o[6] = u(
-                  //@ts-ignore
-                  (...e) => t(R) && t(R)(...e),
-                  ["stop", "prevent"]
-                )),
-                class: "tool-item-icon__btn icon-is-hover",
-                viewBox: "0 0 1024 1024"
-              }, G1)),
-              (n(), a("svg", {
-                onClick: o[7] || (o[7] = u(
-                  //@ts-ignore
-                  (...e) => t(H) && t(H)(...e),
-                  ["stop", "prevent"]
-                )),
-                class: "tool-item-icon__btn icon-is-hover",
-                viewBox: "0 0 1024 1024"
-              }, Z1)),
-              (n(), a("svg", {
-                onClick: o[8] || (o[8] = u(
-                  //@ts-ignore
-                  (...e) => t(V) && t(V)(...e),
-                  ["stop", "prevent"]
-                )),
-                class: "tool-item-icon__btn icon-is-hover",
-                viewBox: "0 0 1024 1024"
-              }, t2)),
-              (n(), a("svg", {
-                onClick: o[9] || (o[9] = u(
-                  //@ts-ignore
-                  (...e) => t(B) && t(B)(...e),
-                  ["stop", "prevent"]
-                )),
-                class: "tool-item-icon__btn icon-is-hover",
-                viewBox: "0 0 1024 1024"
-              }, s2)),
-              (n(), a("svg", {
-                onClick: o[10] || (o[10] = u(
-                  //@ts-ignore
-                  (...e) => t(S) && t(S)(...e),
-                  ["stop", "prevent"]
-                )),
-                class: "tool-item-icon__btn icon-is-hover",
-                viewBox: "0 0 1024 1024",
-                width: "20",
-                height: "20"
-              }, n2)),
-              (n(), a("svg", {
-                onClick: o[11] || (o[11] = u(
-                  //@ts-ignore
-                  (...e) => t(Y) && t(Y)(...e),
-                  ["stop", "prevent"]
-                )),
-                class: "tool-item-icon__btn icon-is-hover",
-                viewBox: "0 0 1024 1024"
-              }, c2)),
-              t(F) ? (n(), a(U, { key: 0 }, [
-                t(M) ? (n(), a("svg", {
-                  key: 0,
-                  onClick: o[12] || (o[12] = u(
-                    //@ts-ignore
-                    (...e) => t(C) && t(C)(...e),
-                    ["stop", "prevent"]
-                  )),
-                  class: "tool-item-icon__btn icon-is-hover",
-                  viewBox: "0 0 1024 1024"
-                }, u2)) : z("", !0)
-              ], 64)) : (n(), a(U, { key: 1 }, [
-                t(M) ? (n(), a("svg", {
-                  key: 0,
-                  onClick: o[13] || (o[13] = u(
-                    //@ts-ignore
-                    (...e) => t(w) && t(w)(...e),
-                    ["stop", "prevent"]
-                  )),
-                  class: "tool-item-icon__btn icon-is-hover",
-                  viewBox: "0 0 1024 1024"
-                }, h2)) : z("", !0)
-              ], 64))
-            ])
+            I(Me, {
+              playState: e(te),
+              onOnPrevious: ie,
+              onOnNext: le,
+              onOnResetStyle: e(P),
+              onOnDownloads: e(J),
+              onOnZoomIn: e(H),
+              onOnZoomOut: e(K),
+              onOnInevrtY: e(U),
+              onOnInevrtX: e(D),
+              onOnClockwise: e(W),
+              onOnCounterclockwise: e(X),
+              onOnStopPlay: e(w),
+              onOnAutoPlay: e(ne)
+            }, null, 8, ["playState", "onOnResetStyle", "onOnDownloads", "onOnZoomIn", "onOnZoomOut", "onOnInevrtY", "onOnInevrtX", "onOnClockwise", "onOnCounterclockwise", "onOnStopPlay", "onOnAutoPlay"])
           ])
         ], 32)
-      ]),
-      s("div", {
+      ], 2)),
+      i("div", {
         class: "images-viewer-vue3__close close-btn",
-        onClick: Q
-      }, g2),
-      s1(S1, {
-        hotkey: L.value,
-        "onUpdate:hotkey": o[15] || (o[15] = (e) => L.value = e),
-        isActiveKey: E.value
+        onClick: Z
+      }, De),
+      I(xe, {
+        hotkey: C.value,
+        "onUpdate:hotkey": t[4] || (t[4] = (a) => C.value = a),
+        isActiveKey: S.value
       }, null, 8, ["hotkey", "isActiveKey"]),
-      s1(I1, { "is-active": N.value }, null, 8, ["is-active"])
+      I(Oe, { "is-active": M.value }, null, 8, ["is-active"])
     ], 2));
@@ -418,3 +304,3 @@ }
 export {
-  b2 as default
+  it as default
 };

dist/es/components/Message.vue.js

 import o from "./Message.vue2.js";
 /* empty css             */
 import t from "../_virtual/_plugin-vue_export-helper.js";
-const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-17985293"]]);
+const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-75db11c1"]]);
 export {
   e as default
 };

dist/es/components/Message.vue2.js

@@ -1,5 +0,6 @@
-import { defineComponent as c, watch as a, openBlock as i, createElementBlock as p, normalizeClass as n, pushScopeId as l, popScopeId as r, createElementVNode as d } from "vue";
-const _ = (e) => (l("data-v-17985293"), e = e(), r(), e), m = /* @__PURE__ */ _(() => /* @__PURE__ */ d("p", { class: "item-key" }, "已经是最后一张图片了", -1)), u = [
-  m
-], h = /* @__PURE__ */ c({
+import { defineComponent as a, watch as p, openBlock as n, createElementBlock as r, normalizeClass as l, unref as o, pushScopeId as d, popScopeId as m, createElementVNode as _ } from "vue";
+import { getUserAgent as s } from "../utils/index.js";
+const u = (e) => (d("data-v-75db11c1"), e = e(), m(), e), f = /* @__PURE__ */ u(() => /* @__PURE__ */ _("p", { class: "item-key" }, "⚠ 已经是最后一张图片了", -1)), h = [
+  f
+], y = /* @__PURE__ */ a({
   __name: "Message",
@@ -13,13 +14,13 @@ props: {
   setup(e) {
-    const o = e;
-    return a(() => o.isActive, (t, s) => {
+    const c = e;
+    return p(() => c.isActive, (t, i) => {
       t && setTimeout(() => {
       }, 2e3);
-    }), (t, s) => (i(), p("div", {
-      class: n(["hotkey-tip__wrap", { "is-active_key": e.isActive }])
-    }, u, 2));
+    }), (t, i) => (n(), r("div", {
+      class: l(["hotkey-tip__wrap", { "is-active_key": e.isActive }, { "is-mobile": o(s)() }, { "is-pc": !o(s)() }])
+    }, h, 2));
   }
 });
 export {
-  h as default
+  y as default
 };

dist/es/hooks/toolbar.d.ts

@@ -1,7 +0,3 @@
-export declare const useToolbar: (images: string[], currentUrl: string, cb: Function) => {
-    onMouseEnterImage: () => void;
+export declare const useToolbar: (images: string[], cb: Function) => {
     updateImageSrc: import('vue').Ref<string>;
-    playState: import('vue').Ref<boolean>;
-    stopPlay: () => void;
-    autoPlay: () => void;
     isMultipleImage: import('vue').Ref<boolean>;
@@ -13,15 +9,4 @@ onWheelListener: (evt: WheelEvent) => void;
     };
-    originImages: import('vue').Ref<{
-        index: number;
-        url: string;
-    }[]>;
     nextImage: () => void;
     previousImage: () => void;
-    onRectScroll: (evt: Event) => void;
-    renderData: import('vue').Ref<{
-        index: number;
-        url: string;
-    }[]>;
-    vnodeUlRef: import('vue').Ref<HTMLElement | null>;
-    vnodeScrollRef: import('vue').Ref<HTMLElement | null>;
     destroyedExe: () => void;
@@ -43,3 +28,2 @@ resetStyle: () => void;
     currentIndex: import('vue').Ref<number>;
-    activeIndex: import('vue').Ref<number>;
 };

dist/es/hooks/toolbar.js

@@ -1,150 +0,82 @@
-import le from "../utils/ViewerCore.js";
-import { getUserAgent as k, downloadExe as ae } from "../utils/index.js";
-import { ref as l, reactive as ne, nextTick as oe, toRefs as ue } from "vue";
-k();
-const re = 3e3;
-var U = 0;
-const ce = (h, Y, _) => {
-  const g = l(null), a = l(null), d = l(""), f = l(!0), v = le.getInStance(), u = l(-1), M = l(-1), R = l(""), o = l([]), C = ne({
+import V from "../utils/ViewerCore.js";
+import { downloadExe as b } from "../utils/index.js";
+import { ref as a, reactive as H, nextTick as L, toRefs as M } from "vue";
+const j = (s, f) => {
+  const c = a(null), e = a(null), r = a(""), u = a(!0), o = V.getInStance(), n = a(-1), d = a(-1), i = a(""), m = H({
     width: 0,
     height: 0
-  }), m = l(!0);
-  var w;
-  const I = l(!1), r = l(null), x = l(null), y = l(0), p = 50, i = l(0), z = l(0), A = l(0), E = l([]);
-  function b(e) {
-    v.horizontalInvert();
+  }), I = a(s.length > 0);
+  function h(t) {
+    o.horizontalInvert();
   }
-  function B(e) {
-    v.verticalInvert();
+  function p(t) {
+    o.verticalInvert();
   }
-  function H(e) {
-    v.zoomIn();
+  function x(t) {
+    o.zoomIn();
   }
-  function J(e) {
-    v.zoomOut();
+  function y(t) {
+    o.zoomOut();
   }
-  function L(e) {
-    v.rotate("+");
+  function w(t) {
+    o.rotate("+");
   }
-  function N(e) {
-    v.rotate("-");
+  function z(t) {
+    o.rotate("-");
   }
-  const V = (e) => {
-    v.onWheel(e);
-  }, $ = (e) => {
-    var s;
-    const t = (s = a.value) == null ? void 0 : s.src;
-    ae(t);
-  }, j = () => {
-    g.value = null, a.value = null, d.value = "", f.value = !0, u.value = -1, M.value = -1, o.value = [], v.destroyed(), clearInterval(w);
-  }, D = () => {
-    v.removeStyleProperty();
-  }, X = (e) => {
-    v.setImage(a.value);
-    const t = new Image();
-    t.src = a.value && a.value.src;
-    const { width: s, height: c } = ue(C);
-    if (s.value = t.width, c.value = t.height, a.value && g.value) {
-      const n = g.value.getBoundingClientRect();
-      k() ? (a.value.style.width = n.width + "px", a.value.style.height = n.height / 2 + "px") : t.width < n.width && t.height < n.height ? (a.value.style.width = t.width + "px", a.value.style.height = t.height + "px") : (a.value.style.width = n.width / 1.3 + "px", a.value.style.height = n.height / 1.3 + "px");
-    }
-    d.value = "", f.value = !1;
-  }, q = (e) => {
-    f.value = !1, d.value = "加载图片失败，请仔细检测图片地址！";
-  }, F = () => new Promise((e, t) => {
-    if (Array.isArray(h) && h.length > 0) {
-      const s = h.filter((n) => n == null || n === ""), c = h.filter((n) => n).map((n, te) => ({
-        index: te,
-        url: n
-      }));
-      s.length && console.warn(`images-viewer-vue3:The image parameter 'images' contains illegal characters:[${JSON.stringify(s)}]`), e({ data: c });
-    } else e({ data: [] });
-  }), S = () => {
-    o.value.length > 1 ? m.value = !0 : m.value = !1;
-    const e = i.value + y.value;
-    z.value = o.value[e] !== void 0 ? e : o.value.length, E.value = o.value.slice(i.value, z.value);
-  }, G = (e) => {
-    if (!(!r.value || !x.value) && (i.value = Math.floor(r.value.scrollTop / p), A.value !== i.value))
-      if (A.value = i.value, S(), o.value.length - i.value >= y.value)
-        U = i.value * p, x.value.style.transform = `translateY(${U}px)`;
-      else
-        return;
-  }, K = async (e) => {
-    await F().then((t) => {
-      o.value = t.data, u.value = o.value.findIndex((s) => s.url === Y);
-    }).catch((t) => {
-      m.value = !1, console.log("images-viewer-vue3:", JSON.stringify(t));
-    }), y.value = Math.floor(e.height / p) + 4, S();
-  }, O = (e) => {
-    if (!r.value) return;
-    const t = p + 2, s = Math.floor(r.value.clientHeight / t), c = e * t, n = c + t;
-    (c < r.value.scrollTop || n > r.value.scrollTop + r.value.clientHeight) && (r.value.scrollTop = e * t), i.value = Math.max(0, e - Math.floor(s)), S();
-  }, P = () => {
-    if (u.value === o.value.length - 1) {
-      T();
-      return;
-    }
-    const e = Math.min(u.value + 1, o.value.length - 1);
-    u.value = e, O(e), W();
-  }, Q = () => {
-    if (u.value === 0)
-      return;
-    const e = Math.max(u.value - 1, 0);
-    u.value = e, O(e), W();
-  }, W = () => {
-    if (!a.value) return;
-    const e = o.value[u.value];
-    e && (R.value = a.value.src = e.url, _({ image: a.value.src, index: u.value }));
-  }, Z = () => {
-    I.value = !0, w = setInterval(() => {
-      P();
-    }, re);
-  }, T = () => {
-    I.value = !1, clearInterval(w);
-  }, ee = () => {
-    I.value && T();
+  const S = (t) => {
+    o.onWheel(t);
+  }, W = (t) => {
+    var v;
+    const l = (v = e.value) == null ? void 0 : v.src;
+    b(l);
+  }, k = () => {
+    c.value = null, e.value = null, r.value = "", u.value = !0, n.value = -1, d.value = -1, o.destroyed();
+  }, E = () => {
+    o.removeStyleProperty();
+  }, R = (t) => {
+    o.setImage(e.value);
+    const l = new Image();
+    l.src = e.value && e.value.src;
+    const { width: v, height: P } = M(m);
+    v.value = l.width, P.value = l.height, e.value && c.value && (e.value.style.transform = "", e.value.style.removeProperty("position"), e.value.style.maxHeight = "100%", e.value.style.maxWidth = "100%"), r.value = "", u.value = !1;
+  }, T = (t) => {
+    u.value = !1, r.value = "加载图片失败，请仔细检测图片访问路径！";
+  }, C = () => {
+    n.value !== s.length - 1 && (n.value++, g());
+  }, O = () => {
+    n.value !== 0 && (n.value--, g());
+  }, g = () => {
+    if (console.log(n.value, e.value), !e.value) return;
+    const t = s[n.value];
+    t && (i.value = e.value.src = t, f({ image: e.value.src, index: n.value }));
   };
-  return oe(() => {
-    var e;
-    if (r.value) {
-      const t = (e = r.value) == null ? void 0 : e.getBoundingClientRect();
-      K(t);
-    }
+  return L(() => {
   }), {
-    onMouseEnterImage: ee,
-    updateImageSrc: R,
-    playState: I,
-    stopPlay: T,
-    autoPlay: Z,
-    isMultipleImage: m,
-    onWheelListener: V,
-    imageInfo: C,
-    originImages: o,
-    nextImage: P,
-    previousImage: Q,
-    onRectScroll: G,
-    renderData: E,
-    vnodeUlRef: x,
-    vnodeScrollRef: r,
-    destroyedExe: j,
-    resetStyle: D,
-    downloads: $,
-    loadImageErrorText: d,
-    loading: f,
-    errorImage: q,
-    loadImage: X,
-    imageRef: a,
-    imageVieverWidgetRef: g,
-    inevrtY: b,
-    inevrtX: B,
-    zoomIn: H,
-    zoomOut: J,
-    clockwise: L,
-    counterclockwise: N,
-    currentIndex: u,
-    activeIndex: M
+    updateImageSrc: i,
+    isMultipleImage: I,
+    onWheelListener: S,
+    imageInfo: m,
+    nextImage: C,
+    previousImage: O,
+    destroyedExe: k,
+    resetStyle: E,
+    downloads: W,
+    loadImageErrorText: r,
+    loading: u,
+    errorImage: T,
+    loadImage: R,
+    imageRef: e,
+    imageVieverWidgetRef: c,
+    inevrtY: h,
+    inevrtX: p,
+    zoomIn: x,
+    zoomOut: y,
+    clockwise: w,
+    counterclockwise: z,
+    currentIndex: n
   };
 };
 export {
-  ce as useToolbar
+  j as useToolbar
 };

dist/es/index.d.ts

@@ -5,3 +5,3 @@ import { App } from 'vue';
 export default function install(app: App, config?: ImageViewerInstallConfig): void;
-declare function imageViewerApi(opt: ImageViewerOptions): void;
+declare function imageViewerApi(opt: ImageViewerOptions): Promise<void>;
 declare function onClose(): void;
@@ -8,0 +8,0 @@ declare function onUpdate(fn?: Function): void;

dist/es/index.js

@@ -1,48 +0,56 @@
-(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("@charset \"UTF-8\";.hotkey-tip__wrap[data-v-f9972721]{padding:.5rem;border-radius:.66rem;background:#000c;bottom:10px;right:10px;position:fixed;opacity:0;transition:opacity .3s ease-in-out}.hotkey-tip__wrap.is-active_key[data-v-f9972721]{opacity:.8}.hotkey-tip__wrap .item-key[data-v-f9972721]{border-radius:.2rem;display:inline-block;text-transform:capitalize;margin-inline-start:.2em;margin-inline-end:.2em;margin-block-start:.2em;margin-block-end:.2em;color:#eee}.hotkey-tip__wrap[data-v-17985293]{padding:.5rem;border-radius:.66rem;background:#000c;position:fixed;left:50%;top:10px;opacity:0;transition:opacity .3s ease-in-out}.hotkey-tip__wrap.is-active_key[data-v-17985293]{opacity:.8}.hotkey-tip__wrap .item-key[data-v-17985293]{border-radius:.2rem;display:inline-block;text-transform:capitalize;margin-inline-start:.2em;margin-inline-end:.2em;margin-block-start:.2em;margin-block-end:.2em;color:tomato}.loading-image__wrap .item1[data-v-7c175f68]{animation-delay:var(--i);background:#10ac84;box-shadow:0 0 15px #10ac84}.loading-image__wrap .item2[data-v-7c175f68]{animation-delay:var(--i);background:#14ffec;box-shadow:0 0 15px #14ffec}.loading-image__wrap .item3[data-v-7c175f68]{animation-delay:var(--i);background:#c62a88;box-shadow:0 0 15px #c62a88}.loading-image__wrap span[data-v-7c175f68]{display:inline-block;width:calc(var(--load-size, 40) * 1px);aspect-ratio:1;border-radius:50%;margin:0 6px;animation:loading-7c175f68 1.4s cubic-bezier(0,.55,.45,1) infinite;-webkit-animation:loading-7c175f68 1.4s cubic-bezier(0,.55,.45,1) infinite}@-webkit-keyframes loading-7c175f68{0%,80%,to{opacity:0;-webkit-transform:scale(0);transform:scale(0)}40%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes loading-7c175f68{0%,80%,to{opacity:0;-webkit-transform:scale(0);transform:scale(0)}40%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.image-viewer-vue3__root[data-v-4ebfff3e]{position:fixed;top:0;right:0;bottom:0;left:0}.nav-scroll-style__wrap[data-v-4ebfff3e] ::-webkit-scrollbar{width:6px;height:6px;background:#f7f7f7}.nav-scroll-style__wrap[data-v-4ebfff3e] ::-webkit-scrollbar-track{border-radius:10px}.nav-scroll-style__wrap[data-v-4ebfff3e] ::-webkit-scrollbar-thumb{background-color:#4593fb5e}.images-viewer-vue3__wrapper[data-v-4ebfff3e]{--active-icon-color: #3A8DF5;--active-text-color: var(--text-color, #eee);--nav-width: 90px;background:#0009;position:fixed;left:0;top:0;bottom:0;width:100%;height:100%;max-height:100%;-ms-touch-action:none;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:9999;overflow:hidden;opacity:0;transition:opacity 1s ease}.images-viewer-vue3__wrapper ul[data-v-4ebfff3e]{padding:0;list-style:none;margin:0}.images-viewer-vue3__wrapper .svg-icon__action[data-v-4ebfff3e]{width:25px;height:25px}.images-viewer-vue3__wrapper .svg-icon__action path[data-v-4ebfff3e]{fill:#eee}.images-viewer-vue3__wrapper.is-active[data-v-4ebfff3e]{opacity:1}.images-viewer-vue3__wrapper .images-viewer-vue3__content[data-v-4ebfff3e]{position:absolute;top:0;bottom:0;left:0;right:0;display:flex}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper[data-v-4ebfff3e]{width:0px;overflow:hidden;transition:width .3s ease-out}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper.nav-active[data-v-4ebfff3e]{width:calc(var(--nav-width) - 5px)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .nav-vnode-scroll__wrapper[data-v-4ebfff3e]{width:100%;height:100%;overflow-y:auto;background-color:#0009}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group[data-v-4ebfff3e]{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item[data-v-4ebfff3e]{width:80%;opacity:.5;border:1px solid transparent;position:relative;border-radius:6px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item.list-group-item__active[data-v-4ebfff3e]{opacity:1;border:2px solid var(--active-icon-color)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item[data-v-4ebfff3e]:hover{opacity:1}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item span[data-v-4ebfff3e]{position:absolute;left:20px;top:20px;color:red}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item .list-group-item__image[data-v-4ebfff3e]{width:100%;object-fit:cover;height:100%;border-radius:6px;cursor:pointer}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper[data-v-4ebfff3e]{flex:1;width:100%;height:100%;transform-origin:top left;display:flex;flex-direction:column;justify-content:center;align-items:center;perspective:1000px;transform-style:preserve-3d;overflow:hidden;color:var(--active-text-color)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-collapse-nav__btn[data-v-4ebfff3e]{position:absolute;top:15px;left:8px;z-index:10;transition:transform .3s ease}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-collapse-nav__btn.rotate-right__btn[data-v-4ebfff3e]{transform:scale(-1)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info[data-v-4ebfff3e]{position:absolute;top:15px;left:40%;z-index:10;color:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__inner[data-v-4ebfff3e]{flex:0 1 auto;z-index:1;-webkit-user-select:none;user-select:none;width:auto;height:auto;object-fit:cover}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls[data-v-4ebfff3e]{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding:10px 0;z-index:10}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .tool-item-icon__btn[data-v-4ebfff3e]{margin:0 4px;width:25px;height:25px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .tool-item-icon__btn path[data-v-4ebfff3e]{fill:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .control-info[data-v-4ebfff3e]{display:flex;align-items:center;color:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .position[data-v-4ebfff3e]{position:absolute;left:30px}.images-viewer-vue3__wrapper .images-viewer-vue3__close[data-v-4ebfff3e]{position:absolute;top:15px;right:15px;background:#0000004d;border-radius:50%;width:44px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;z-index:10;cursor:pointer}.images-viewer-vue3__wrapper .icon-is-hover:hover path[data-v-4ebfff3e]{fill:var(--active-icon-color)!important}.images-viewer-vue3__wrapper .close-icon[data-v-4ebfff3e]{transition:fill .3s ease}.images-viewer-vue3__wrapper .viewer-previous-icon[data-v-4ebfff3e],.images-viewer-vue3__wrapper .viewer-next-icon[data-v-4ebfff3e]{position:fixed;background:#0000004d;border-radius:50%;width:44px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;z-index:10}.images-viewer-vue3__wrapper .viewer-previous-icon[data-v-4ebfff3e]{top:40%;left:0}.images-viewer-vue3__wrapper .viewer-next-icon[data-v-4ebfff3e]{top:40%;right:0}.cus-transition[data-v-4ebfff3e]{transform:scale(1);transition:transform .3s ease}.is-active-border-color[data-v-4ebfff3e]{border:1px solid var(--active-icon-color);opacity:1!important}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { createVNode as c, render as l } from "vue";
-import m from "./components/viewer.vue.js";
-import g from "./components/index.vue.js";
-import s from "./directive/v-image-viewer.js";
-import u from "./utils/ViewerCore.js";
-import { versions as f } from "./utils/index.js";
-let t;
-const n = u.getInStance();
-var i = (e, r) => {
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("@charset \"UTF-8\";.hotkey-tip__wrap[data-v-f9972721]{padding:.5rem;border-radius:.66rem;background:#000c;bottom:10px;right:10px;position:fixed;opacity:0;transition:opacity .3s ease-in-out}.hotkey-tip__wrap.is-active_key[data-v-f9972721]{opacity:.8}.hotkey-tip__wrap .item-key[data-v-f9972721]{border-radius:.2rem;display:inline-block;text-transform:capitalize;margin-inline-start:.2em;margin-inline-end:.2em;margin-block-start:.2em;margin-block-end:.2em;color:#eee}.hotkey-tip__wrap[data-v-75db11c1]{padding:.5rem;border-radius:.66rem;background:#000c;position:fixed;opacity:0;transition:opacity .3s ease-in-out}.hotkey-tip__wrap.is-pc[data-v-75db11c1]{left:50%;top:10px}.hotkey-tip__wrap.is-mobile[data-v-75db11c1]{bottom:0;left:30%}.hotkey-tip__wrap.is-active_key[data-v-75db11c1]{opacity:.8}.hotkey-tip__wrap .item-key[data-v-75db11c1]{border-radius:.2rem;display:inline-block;text-transform:capitalize;margin-inline-start:.2em;margin-inline-end:.2em;margin-block-start:.2em;margin-block-end:.2em;color:#fff}.mobile-vierwer__wrapper[data-v-8ebb7a18]{margin:auto 0}.mobile-vierwer__wrapper.cus-img-preview[data-v-8ebb7a18]{width:100%;position:relative;overflow:hidden}.mobile-vierwer__wrapper.cus-img-preview ul[data-v-8ebb7a18]{display:flex;flex-wrap:nowrap;align-items:center}.mobile-vierwer__wrapper.cus-img-preview ul li .viewer-image[data-v-8ebb7a18]{width:100%;height:100%;object-fit:cover;max-width:100%;max-height:100%}.loading-image__wrap .item1[data-v-7c175f68]{animation-delay:var(--i);background:#10ac84;box-shadow:0 0 15px #10ac84}.loading-image__wrap .item2[data-v-7c175f68]{animation-delay:var(--i);background:#14ffec;box-shadow:0 0 15px #14ffec}.loading-image__wrap .item3[data-v-7c175f68]{animation-delay:var(--i);background:#c62a88;box-shadow:0 0 15px #c62a88}.loading-image__wrap span[data-v-7c175f68]{display:inline-block;width:calc(var(--load-size, 40) * 1px);aspect-ratio:1;border-radius:50%;margin:0 6px;animation:loading-7c175f68 1.4s cubic-bezier(0,.55,.45,1) infinite;-webkit-animation:loading-7c175f68 1.4s cubic-bezier(0,.55,.45,1) infinite}@-webkit-keyframes loading-7c175f68{0%,80%,to{opacity:0;-webkit-transform:scale(0);transform:scale(0)}40%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes loading-7c175f68{0%,80%,to{opacity:0;-webkit-transform:scale(0);transform:scale(0)}40%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.scroll-item-nav__wrapper[data-v-e7a8318a]{background-color:#0009;width:100%;overflow:hidden}.scroll-item-nav__wrapper .nav-header__wrap[data-v-e7a8318a]{height:50px;overflow:hidden}.scroll-item-nav__wrapper .nav-header__wrap .image-index[data-v-e7a8318a]{width:100%;outline:none;border:none;text-align:center}.scroll-item-nav__wrapper .nav-header__wrap .query-btn[data-v-e7a8318a]{width:100%;background:#3a8df5;color:#eee;border:none;border-radius:4px}.scroll-item-nav__wrapper .nav-scroll__wrap[data-v-e7a8318a]{height:calc(var(--sider-height, 600) * 1px);background-color:#6b72800d;padding:.5rem .3rem;overflow-y:auto}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item[data-v-e7a8318a]{border:1px solid transparent;margin-bottom:.5rem;border-radius:4px;position:relative;opacity:.5}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item.active-item[data-v-e7a8318a]{opacity:1;border:1px solid var(--active-icon-color)}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item .index[data-v-e7a8318a]{position:absolute;top:10px;left:20px;color:red}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item .list-group-image[data-v-e7a8318a]{width:100%;height:100%;object-fit:cover;border-radius:4px}.image-viewer-vue3__root[data-v-6c102bb4]{position:fixed;top:0;right:0;bottom:0;left:0}.nav-scroll-style__wrap[data-v-6c102bb4] ::-webkit-scrollbar{width:6px;height:6px;background:#f7f7f7}.nav-scroll-style__wrap[data-v-6c102bb4] ::-webkit-scrollbar-track{border-radius:10px}.nav-scroll-style__wrap[data-v-6c102bb4] ::-webkit-scrollbar-thumb{background-color:#4593fb5e}.images-viewer-vue3__wrapper[data-v-6c102bb4]{--active-icon-color: #3A8DF5;--active-text-color: var(--text-color, #eee);--nav-width: 90px;background:#0009;position:fixed;left:0;top:0;bottom:0;width:100%;height:100%;max-height:100%;-ms-touch-action:none;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:9999;overflow:hidden;opacity:0;transition:opacity 1s ease}.images-viewer-vue3__wrapper ul[data-v-6c102bb4]{padding:0;list-style:none;margin:0}.images-viewer-vue3__wrapper .svg-icon__action[data-v-6c102bb4]{width:25px;height:25px}.images-viewer-vue3__wrapper .svg-icon__action path[data-v-6c102bb4]{fill:#eee}.images-viewer-vue3__wrapper.is-active[data-v-6c102bb4]{opacity:1}.images-viewer-vue3__wrapper .is-hidden[data-v-6c102bb4]{display:none!important}.images-viewer-vue3__wrapper .is-show[data-v-6c102bb4]{display:block}.images-viewer-vue3__wrapper .cursor[data-v-6c102bb4]{cursor:pointer}.images-viewer-vue3__wrapper .images-viewer-vue3__mobile[data-v-6c102bb4]{max-width:100%;max-height:100%;position:relative;display:grid;place-items:center;height:100vh}.images-viewer-vue3__wrapper .images-viewer-vue3__mobile .cus-head-info[data-v-6c102bb4]{position:absolute;top:15px;left:40%;z-index:10;color:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content[data-v-6c102bb4]{position:absolute;top:0;bottom:0;left:0;right:0;display:grid;grid-template-columns:90px 1fr}.images-viewer-vue3__wrapper .images-viewer-vue3__content.active-grid[data-v-6c102bb4]{grid-template-columns:0px 1fr}.images-viewer-vue3__wrapper .images-viewer-vue3__content.close-grid[data-v-6c102bb4]{grid-template-columns:1fr}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper[data-v-6c102bb4]{width:0px;overflow:hidden;transition:width .3s ease-out;opacity:0}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper.nav-active[data-v-6c102bb4]{width:var(--nav-width);opacity:1}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .nav-vnode-scroll__wrapper[data-v-6c102bb4]{width:100%;height:100%;overflow-y:auto;background-color:#0009}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group[data-v-6c102bb4]{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item[data-v-6c102bb4]{width:80%;opacity:.5;border:1px solid transparent;position:relative;border-radius:6px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item.list-group-item__active[data-v-6c102bb4]{opacity:1;border:2px solid var(--active-icon-color)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item[data-v-6c102bb4]:hover{opacity:1}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item span[data-v-6c102bb4]{position:absolute;left:20px;top:20px;color:red}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item .list-group-item__image[data-v-6c102bb4]{width:100%;object-fit:cover;height:100%;border-radius:6px;cursor:pointer}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper[data-v-6c102bb4]{flex:1;width:100%;height:100%;transform-origin:top left;display:flex;flex-direction:column;justify-content:center;align-items:center;perspective:1000px;transform-style:preserve-3d;overflow:hidden;color:var(--active-text-color)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-collapse-nav__btn[data-v-6c102bb4]{position:absolute;top:15px;left:8px;z-index:10;transition:transform .3s ease}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-collapse-nav__btn.rotate-right__btn[data-v-6c102bb4]{transform:scale(-1)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info[data-v-6c102bb4]{position:absolute;top:15px;left:40%;z-index:10;color:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__inner[data-v-6c102bb4]{flex:0 1 auto;z-index:1;-webkit-user-select:none;user-select:none;width:auto;height:auto;object-fit:cover}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls[data-v-6c102bb4]{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding:10px 0;z-index:10}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .control-svg__btns[data-v-6c102bb4]{background-color:#00000080;border-radius:8px;padding:8px 10px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .tool-item-icon__btn[data-v-6c102bb4]{margin:0 4px;width:25px;height:25px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .tool-item-icon__btn path[data-v-6c102bb4]{fill:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .control-info[data-v-6c102bb4]{display:flex;align-items:center;color:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .position[data-v-6c102bb4]{position:absolute;left:30px}.images-viewer-vue3__wrapper .images-viewer-vue3__close[data-v-6c102bb4]{position:absolute;top:15px;right:15px;background:#0000004d;border-radius:50%;width:30px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;z-index:10;cursor:pointer}.images-viewer-vue3__wrapper .icon-is-hover:hover path[data-v-6c102bb4]{fill:var(--active-icon-color)!important}.images-viewer-vue3__wrapper .close-icon[data-v-6c102bb4]{transition:fill .3s ease}.images-viewer-vue3__wrapper .viewer-previous-icon[data-v-6c102bb4],.images-viewer-vue3__wrapper .viewer-next-icon[data-v-6c102bb4]{position:fixed;background:#0000004d;border-radius:50%;width:44px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;z-index:10}.images-viewer-vue3__wrapper .viewer-previous-icon[data-v-6c102bb4]{top:40%;left:0}.images-viewer-vue3__wrapper .viewer-next-icon[data-v-6c102bb4]{top:40%;right:0}.cus-transition[data-v-6c102bb4]{transform:scale(1);transition:transform .3s ease}.is-active-border-color[data-v-6c102bb4]{border:1px solid var(--active-icon-color);opacity:1!important}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { createVNode as l, render as g } from "vue";
+import d from "./components/viewer.vue.js";
+import s from "./components/index.vue.js";
+import u from "./directive/v-image-viewer.js";
+import y from "./directive/v-lazy-image.js";
+import v from "./utils/ViewerCore.js";
+import { versions as f, asyncVerifyIllegalImage as p } from "./utils/index.js";
+let m;
+const a = v.getInStance();
+var t = (e, r) => {
 };
-function C(e, r) {
-  r && n.setConfigOptions(r), console.log(`%cimages-viewer-vue3_V${f}`, "color: #eee;background:#646cff;padding:2px 5px;border-radius:4px;"), e.directive("image-viewer", s), e.component("ImagesViewerVue3", m), e.config.globalProperties.$imageViewerApi = v;
+function S(e, r) {
+  r && a.setConfigOptions(r), console.log(`%cimages-viewer-vue3_V${f}`, "color: #eee;background:#646cff;padding:2px 5px;border-radius:4px;"), e.directive("image-viewer", u), e.directive("lazy-image", y), e.component("ImagesViewerVue3", d), e.config.globalProperties.$imageViewerApi = w;
 }
-function v(e) {
-  const r = n.getConfigOptions();
+async function w(e) {
+  var r = [];
+  await p(e.images || []).then((i) => {
+    r = i.data;
+  }).catch((i) => {
+    console.error("images-viewer-vue3:", JSON.stringify(i));
+  });
+  const n = a.getConfigOptions();
   var o = null;
-  o ? o && document.body.removeChild(o) : (t = c(g, {
+  o ? o && document.body.removeChild(o) : (m = l(s, {
     visible: !0,
     current: e.current,
-    images: e.images || [],
-    zIndex: r.zIndex,
+    images: r,
+    zIndex: n.zIndex,
     image: e.imageDom,
     from: e.from || "api",
-    language: r.language || "zh",
-    handleChange: ({ image: d, index: a }) => {
-      i && i(d, a);
+    language: n.language || "zh",
+    playSpeed: n.playSpeed,
+    handleChange: ({ image: i, index: c }) => {
+      t && t(i, c);
     },
     handleClose: () => {
-      p();
+      I();
     }
-  }), o = document.createElement("div"), o.style.zIndex = r.zIndex + "", o.classList.add("image-viewer-vue3__root"), l(t, o), document.body.style.overflow = "hidden", document.body.style.margin = "0px", document.body.style.padding = "0px", document.body.appendChild(o));
+  }), o = document.createElement("div"), o.style.zIndex = n.zIndex + "", o.classList.add("image-viewer-vue3__root"), g(m, o), document.body.style.overflow = "hidden", document.body.style.margin = "0px", document.body.style.padding = "0px", document.body.appendChild(o));
 }
-function p() {
+function I() {
   const e = document.querySelector(".image-viewer-vue3__root");
-  e && (document.body.style.removeProperty("overflow"), document.body.style.removeProperty("margin"), document.body.style.removeProperty("padding"), document.body.removeChild(e)), n.destroyed();
+  e && (document.body.style.removeProperty("overflow"), document.body.style.removeProperty("margin"), document.body.style.removeProperty("padding"), document.body.removeChild(e)), a.destroyed();
 }
-function h(e) {
-  e && (i = e);
+function P(e) {
+  e && (t = e);
 }
-const _ = m;
+const D = d;
 export {
-  _ as ImageViewerVue3,
-  s as VImageViewer,
-  C as default,
-  v as imageViewerApi,
-  p as onClose,
-  h as onUpdate
+  D as ImageViewerVue3,
+  u as VImageViewer,
+  S as default,
+  w as imageViewerApi,
+  I as onClose,
+  P as onUpdate
 };

dist/es/langs/enCn.d.ts

@@ -13,4 +13,6 @@ declare const _default: {
         img: string;
+        previousText: string;
+        nextText: string;
     };
 };
 export default _default;

dist/es/langs/enCn.js

@@ -12,3 +12,5 @@ const e = {
     the: "The",
-    img: "Image"
+    img: "Image",
+    previousText: "Previous",
+    nextText: "Next"
   }
@@ -15,0 +17,0 @@ };

dist/es/langs/index.d.ts

@@ -14,2 +14,4 @@ export declare const messages: {
             img: string;
+            previousText: string;
+            nextText: string;
         };
@@ -29,2 +31,4 @@ };
             img: string;
+            previousText: string;
+            nextText: string;
         };
@@ -31,0 +35,0 @@ };

dist/es/langs/zhCn.d.ts

@@ -13,4 +13,6 @@ declare const _default: {
         img: string;
+        previousText: string;
+        nextText: string;
     };
 };
 export default _default;

dist/es/langs/zhCn.js

@@ -12,3 +12,5 @@ const e = {
     the: "第",
-    img: "张图片"
+    img: "张图片",
+    previousText: "上一张",
+    nextText: "下一张"
   }
@@ -15,0 +17,0 @@ };

dist/es/types/image-viewer.d.ts

@@ -18,2 +18,3 @@ type fromType = 'api' | 'directive' | 'component';
     language: langType;
+    playSpeed: number;
 }
@@ -27,2 +28,3 @@ export interface ImageViewerInstallConfig {
     language?: langType;
+    playSpeed?: number;
 }
@@ -34,3 +36,3 @@ export type ImageObjectTypes = {
 export type AsyncSetImageReturnType = Promise<{
-    data: ImageObjectTypes[];
+    data: string[];
 } | {
@@ -37,0 +39,0 @@ data: [];

dist/es/utils/index.d.ts

@@ -0,2 +1,10 @@
+import { AsyncSetImageReturnType } from '../types/image-viewer';
+export declare const versions = "1.0.16";
 /**
+ * Verify illegal image paths, such as null, undefined, ''
+ *
+ * @returns AsyncSetImageReturnType
+ */
+export declare const asyncVerifyIllegalImage: (images: string[]) => AsyncSetImageReturnType;
+/**
  * debounce
@@ -19,3 +27,2 @@ *
 export declare const getUserAgent: () => boolean;
-export declare const getDeviceType: () => "Android" | "iOS" | "Windows Phone" | "Other Mobile" | "Tablet" | "Desktop";
-export declare const versions = "1.0.15";
+export declare const isTrueArray: (value: any) => boolean;

dist/es/utils/index.js

@@ -1,21 +0,30 @@
-const d = () => {
-  var e = /* @__PURE__ */ new Date(), n = e.getFullYear(), t = e.getMonth() + 1, o = e.getDate(), r = e.getHours(), a = e.getMinutes(), i = e.getSeconds();
-  return `${n}${t}${o}_${r}${a}${i}`;
-}, s = (e, n) => {
+const c = "1.0.16", d = (e) => new Promise((a, t) => {
+  if (l(e) && e.length > 0) {
+    const [n, r] = e.reduce((o, i) => (i ? o[0].push(i) : o[1].push(i), o), [[], []]);
+    r.length && console.warn(`images-viewer-vue3:The image parameter 'images' contains illegal characters:[${JSON.stringify(r)}]`), a({ data: n });
+  } else a({ data: e || [] });
+}), s = () => {
+  var e = /* @__PURE__ */ new Date(), a = e.getFullYear(), t = e.getMonth() + 1, n = e.getDate(), r = e.getHours(), o = e.getMinutes(), i = e.getSeconds();
+  return `${a}${t}${n}_${r}${o}${i}`;
+}, g = (e, a) => {
   fetch(e).then((t) => t.blob()).then((t) => {
-    var o = document.createElement("a");
-    o.style.display = "none", document.body.appendChild(o);
+    var n = document.createElement("a");
+    n.style.display = "none", document.body.appendChild(n);
     var r = window.URL.createObjectURL(t);
-    o.href = r, o.download = d(), o.click(), window.URL.revokeObjectURL(r), document.body.removeChild(o);
+    n.href = r, n.download = s(), n.click(), window.URL.revokeObjectURL(r), document.body.removeChild(n);
   });
-}, c = () => {
-  const e = navigator.userAgent || navigator.vendor || window.opera, n = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(e.toLowerCase());
+}, u = () => {
+  const e = navigator.userAgent || navigator.vendor || window.opera, a = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
+    e.toLowerCase()
+  );
   let t = !1;
-  return n && (t = !0), ("ontouchstart" in window || navigator.maxTouchPoints > 0) && (t = !0), t;
-}, l = "1.0.15";
+  return a && (t = !0), ("ontouchstart" in window || navigator.maxTouchPoints > 0) && (t = !0), t;
+}, l = (e) => Object.prototype.toString.call(e) === "[object Array]";
 export {
-  s as downloadExe,
-  d as getTimeStamp,
-  c as getUserAgent,
-  l as versions
+  d as asyncVerifyIllegalImage,
+  g as downloadExe,
+  s as getTimeStamp,
+  u as getUserAgent,
+  l as isTrueArray,
+  c as versions
 };

dist/es/utils/ViewerCore.d.ts

@@ -9,5 +9,7 @@ import { ImageViewerType } from '../types/image-viewer';
     private config;
+    private transforms;
     private constructor();
     static getInStance(): ImageViewerCore;
     private initialize;
+    private setImageTransform;
     onWheel(evt: WheelEvent): void;
@@ -14,0 +16,0 @@ setConfigOptions(opts: ImageViewerType): void;

dist/es/utils/ViewerCore.js

@@ -1,10 +0,10 @@
-var g = Object.defineProperty;
-var m = (c, e, t) => e in c ? g(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t;
-var a = (c, e, t) => m(c, typeof e != "symbol" ? e + "" : e, t);
+var m = Object.defineProperty;
+var g = (c, t, e) => t in c ? m(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
+var r = (c, t, e) => g(c, typeof t != "symbol" ? t + "" : t, e);
 const l = class l {
   constructor() {
-    a(this, "currentImage", null);
-    a(this, "totalRotate", 0);
-    a(this, "isMouseDown", !1);
-    a(this, "config", {
+    r(this, "currentImage", null);
+    r(this, "totalRotate", 0);
+    r(this, "isMouseDown", !1);
+    r(this, "config", {
       scaleRatio: 1,
@@ -15,4 +15,11 @@ rotateRatio: 90,
       zIndex: 2e3,
-      language: "zh"
+      language: "zh",
+      playSpeed: 2e3
     });
+    r(this, "transforms", {
+      scale: 1,
+      rotate: "0deg",
+      scaleY: "",
+      scaleX: ""
+    });
   }
@@ -24,8 +31,23 @@ static getInStance() {
   }
-  onWheel(e) {
-    e.deltaY < 0 && this.zoomIn(), e.deltaY >= 0 && this.zoomOut();
+  setImageTransform() {
+    if (!this.currentImage) return;
+    let t = "";
+    Object.keys(this.transforms).forEach((e) => {
+      const s = e;
+      switch (s) {
+        case "scaleX":
+        case "scaleY":
+        case "scale":
+        case "rotate":
+          this.transforms[s] && (t += `${e}(${this.transforms[s]}) `);
+          break;
+      }
+    }), this.currentImage.style.transform = t;
   }
-  setConfigOptions(e) {
-    this.config = Object.assign(this.config, e);
+  onWheel(t) {
+    t.deltaY < 0 && this.zoomIn(), t.deltaY >= 0 && this.zoomOut();
   }
+  setConfigOptions(t) {
+    this.config = Object.assign(this.config, t);
+  }
   getConfigOptions() {
@@ -40,11 +62,12 @@ return this.config;
   }
-  setInvert(e = "scaleX") {
-    if (!e || !this.currentImage) return;
-    let t = this.currentImage.style.transform;
-    const s = new RegExp(`${e}\\(([^)]+)\\)`);
-    if (s.test(t)) {
-      const o = t.match(s), i = (o && parseInt(o[1])) === 1 ? -1 : 1;
-      t = t.replace(s, `${e}(${i})`);
-    } else t += ` ${e}(-1)`;
-    this.currentImage.style.transform = t;
+  setInvert(t = "scaleX") {
+    if (!t || !this.currentImage) return;
+    let e = this.currentImage.style.transform;
+    const s = new RegExp(`${t}\\(([^)]+)\\)`);
+    if (s.test(e)) {
+      const n = e.match(s), o = (n && parseInt(n[1])) === 1 ? -1 : 1;
+      t === "scaleX" && (this.transforms.scaleX = `${o}`), t === "scaleY" && (this.transforms.scaleY = `${o}`);
+    } else
+      t === "scaleX" && (this.transforms.scaleX = "-1"), t === "scaleY" && (this.transforms.scaleY = "-1");
+    this.setImageTransform();
   }
@@ -57,64 +80,58 @@ zoomIn() {
   }
-  rotate(e = "+") {
-    if (!this.currentImage) return;
-    let t = this.currentImage.style.transform;
-    const s = new RegExp("rotate\\(([^)]+)\\)", "i");
-    s.test(t) ? (e === "+" ? this.totalRotate += this.config.rotateRatio : this.totalRotate -= this.config.rotateRatio, t = t.replace(s, `rotate(${this.totalRotate}deg)`)) : (e === "+" ? this.totalRotate = this.config.rotateRatio : this.totalRotate = -this.config.rotateRatio, t += ` rotate(${this.totalRotate}deg)`), this.currentImage.style.transform = t;
+  rotate(t = "+") {
+    this.currentImage && (t === "+" ? this.totalRotate += this.config.rotateRatio : this.totalRotate -= this.config.rotateRatio, this.transforms.rotate = `${this.totalRotate}deg`, this.setImageTransform());
   }
-  setZoom(e = "+") {
-    if (!this.currentImage) return;
-    let t = this.currentImage.style.transform;
-    const s = new RegExp("scale\\(([^)]+)\\)", "i");
-    s.test(t) ? (e === "+" ? this.config.scaleRatio += 0.1 : this.config.scaleRatio >= 0.3 && (this.config.scaleRatio -= 0.1), t = t.replace(s, `scale(${this.config.scaleRatio})`)) : (e === "+" ? this.config.scaleRatio += 0.1 : this.config.scaleRatio >= 0.3 && (this.config.scaleRatio -= 0.1), t += ` scale(${this.config.scaleRatio})`), this.currentImage.style.transform = t;
+  setZoom(t = "+") {
+    this.currentImage && (t === "+" ? this.config.scaleRatio += 0.1 : this.config.scaleRatio >= 0.3 && (this.config.scaleRatio -= 0.1), this.transforms.scale = this.config.scaleRatio, this.setImageTransform());
   }
-  setImage(e) {
-    this.currentImage = e, this.currentImage && this.config.isEnableDrag && (this.currentImage.onmousedown = this.onMouseMove.bind(this), this.currentImage.ontouchstart = this.onTouchstart.bind(this));
+  setImage(t) {
+    this.currentImage = t, this.currentImage && this.config.isEnableDrag && (this.currentImage.onmousedown = this.onMouseMove.bind(this));
   }
-  onMouseMove(e) {
+  onMouseMove(t) {
     if (!this.currentImage) return;
-    const t = this;
+    const e = this;
     this.isMouseDown = !0, this.currentImage.style.position = "absolute";
-    const s = e.clientX - this.currentImage.offsetLeft, o = e.clientY - this.currentImage.offsetTop;
-    return document.onmousemove = function(n) {
-      if (n = n || window.event, t.isMouseDown) {
-        let i = n.clientX - s, r = n.clientY - o;
-        t.currentImage && (t.currentImage.style.left = `${i}px`), t.currentImage && (t.currentImage.style.top = `${r}px`);
+    const s = t.clientX - this.currentImage.offsetLeft, n = t.clientY - this.currentImage.offsetTop;
+    return document.onmousemove = function(i) {
+      if (i = i || window.event, e.isMouseDown) {
+        let o = i.clientX - s, a = i.clientY - n;
+        e.currentImage && (e.currentImage.style.left = `${o}px`), e.currentImage && (e.currentImage.style.top = `${a}px`);
       }
     }, document.onmouseup = function() {
-      t.isMouseDown = !1, document.onmousemove = null, document.onmouseup = null;
+      e.isMouseDown = !1, document.onmousemove = null, document.onmouseup = null;
     }, !1;
   }
-  onTouchstart(e) {
+  onTouchstart(t) {
     if (!this.currentImage) return;
-    const t = this;
+    const e = this;
     this.isMouseDown = !0;
-    const s = e.touches[0];
+    const s = t.touches[0];
     this.currentImage.style.position = "absolute";
-    const o = s.clientX - this.currentImage.offsetLeft, n = s.clientY - this.currentImage.offsetTop;
-    e.touches.length === 2 && (this.config.scaleRatio = this.getDistance(e.touches[0], e.touches[1])), document.ontouchmove = function(i) {
-      if (t.isMouseDown) {
-        const r = i.touches[0];
-        let u = r.clientX - o, f = r.clientY - n;
-        t.currentImage && (t.currentImage.style.left = `${u}px`), t.currentImage && (t.currentImage.style.top = `${f}px`);
+    const n = s.clientX - this.currentImage.offsetLeft, i = s.clientY - this.currentImage.offsetTop;
+    t.touches.length === 2 && (this.config.scaleRatio = this.getDistance(t.touches[0], t.touches[1])), document.ontouchmove = function(o) {
+      if (e.isMouseDown) {
+        const a = o.touches[0];
+        let u = a.clientX - n, h = a.clientY - i;
+        e.currentImage && (e.currentImage.style.left = `${u}px`), e.currentImage && (e.currentImage.style.top = `${h}px`);
       }
-      if (i.touches.length === 2 && t.config.scaleRatio) {
-        const r = t.getDistance(i.touches[0], i.touches[1]), u = r / t.config.scaleRatio;
-        r > t.config.scaleRatio, t.setMobileZoom(u), i.preventDefault();
+      if (o.touches.length === 2 && e.config.scaleRatio) {
+        const a = e.getDistance(o.touches[0], o.touches[1]), u = a / e.config.scaleRatio;
+        a > e.config.scaleRatio, e.setMobileZoom(u), o.preventDefault();
       }
     }, document.ontouchend = function() {
-      t.isMouseDown = !1;
+      e.isMouseDown = !1;
     }, document.ontouchcancel = function() {
-      t.isMouseDown = !1;
+      e.isMouseDown = !1;
     };
   }
-  setMobileZoom(e = 0) {
+  setMobileZoom(t = 0) {
     if (!this.currentImage) return;
-    let t = this.currentImage.style.transform;
+    let e = this.currentImage.style.transform;
     const s = new RegExp("scale\\(([^)]+)\\)", "i");
-    s.test(t) ? t = t.replace(s, `scale(${e})`) : t += ` scale(${e})`, this.currentImage.style.transform = t;
+    s.test(e) ? e = e.replace(s, `scale(${t})`) : e += ` scale(${t})`, this.currentImage.style.transform = e;
   }
   // 计算两个触摸点之间的距离
-  getDistance(e, t) {
-    const s = t.clientX - e.clientX, o = t.clientY - e.clientY;
-    return Math.sqrt(s * s + o * o);
+  getDistance(t, e) {
+    const s = e.clientX - t.clientX, n = e.clientY - t.clientY;
+    return Math.sqrt(s * s + n * n);
   }
@@ -132,7 +149,7 @@ static addTotal() {
 // 配置全局变量供外部调用
-a(l, "viewer"), // 配置静态属性，防止被外部修改
-a(l, "total", 0);
-let h = l;
+r(l, "viewer"), // 配置静态属性，防止被外部修改
+r(l, "total", 0);
+let f = l;
 export {
-  h as default
+  f as default
 };

dist/lib/components/index.vue.d.ts

@@ -0,1 +1,2 @@
+import { PropType } from 'vue';
 declare const _default: import('vue').DefineComponent<{
@@ -11,4 +12,4 @@ visible: {
     images: {
-        type: ArrayConstructor;
-        default: () => never[];
+        type: PropType<string[]>;
+        required: true;
     };
@@ -42,2 +43,6 @@ zIndex: {
     };
+    playSpeed: {
+        type: NumberConstructor;
+        default: () => number;
+    };
 }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -57,4 +62,4 @@ "on-close": (...args: any[]) => void;
     images: {
-        type: ArrayConstructor;
-        default: () => never[];
+        type: PropType<string[]>;
+        required: true;
     };
@@ -88,2 +93,6 @@ zIndex: {
     };
+    playSpeed: {
+        type: NumberConstructor;
+        default: () => number;
+    };
 }>> & {
@@ -95,5 +104,4 @@ "onOn-close"?: ((...args: any[]) => any) | undefined;
     visible: boolean;
+    zIndex: number;
     current: string;
-    images: unknown[];
-    zIndex: number;
     from: string;
@@ -103,3 +111,4 @@ handleChange: Function;
     language: string;
+    playSpeed: number;
 }, {}>;
 export default _default;

dist/lib/components/index.vue.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./index.vue2.js");;/* empty css                    */const t=require("../_virtual/_plugin-vue_export-helper.js"),u=t.default(e.default,[["__scopeId","data-v-4ebfff3e"]]);exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./index.vue2.js");;/* empty css                    */const t=require("../_virtual/_plugin-vue_export-helper.js"),u=t.default(e.default,[["__scopeId","data-v-6c102bb4"]]);exports.default=u;

dist/lib/components/index.vue2.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s1=require("../hooks/toolbar.js"),S=require("../utils/index.js"),$=require("../utils/flip-animate.js"),i1=require("./HotKeys.vue.js"),r1=require("./Message.vue.js"),c1=require("./Loading.vue.js"),O=require("../utils/hotkeys.js"),a1=require("../langs/index.js"),u1=require("../hooks/mouse.js"),l=d=>(e.pushScopeId("data-v-4ebfff3e"),d=d(),e.popScopeId(),d),d1={class:"images-viewer-vue3__content"},v1=["data-id"],m1=["data-id","src","onClick"],p1=l(()=>e.createElementVNode("path",{d:"M322.12 353.93L104.61 490.77c-18.45 11.61-18.44 38.51 0.02 50.1l217.51 136.64c19.71 12.38 45.33-1.78 45.33-25.06V378.98c0-23.29-25.64-37.45-45.35-25.05zM94.78 125.02h834.44c16.84 0 30.5-13.66 30.5-30.5s-13.66-30.5-30.5-30.5H94.78c-16.84 0-30.5 13.66-30.5 30.5s13.66 30.5 30.5 30.5zM929.22 342.34H444.11c-16.84 0-30.5 13.66-30.5 30.5s13.66 30.5 30.5 30.5h485.11c16.84 0 30.5-13.66 30.5-30.5s-13.66-30.5-30.5-30.5zM929.22 620.66H444.11c-16.84 0-30.5 13.66-30.5 30.5s13.66 30.5 30.5 30.5h485.11c16.84 0 30.5-13.66 30.5-30.5s-13.66-30.5-30.5-30.5zM929.22 898.98H94.78c-16.84 0-30.5 13.66-30.5 30.5s13.66 30.5 30.5 30.5h834.44c16.84 0 30.5-13.66 30.5-30.5s-13.66-30.5-30.5-30.5z"},null,-1)),h1=[p1],g1={key:0,class:"image-info"},f1={key:1,style:{"user-select":"text"}},_1={style:{color:"orange","text-decoration":"solid"}},k1={class:"image-viewer__controls"},z1={class:"control-svg__btns"},y1=l(()=>e.createElementVNode("path",{d:"M476.48 903.36C248.96 903.36 64 718.4 64 491.2S248.96 78.72 476.48 78.72s412.48 184.96 412.48 412.48-185.28 412.16-412.48 412.16z m0-741.12c-181.44 0-328.96 147.52-328.96 328.96s147.52 328.96 328.96 328.96 328.96-147.52 328.96-328.96S657.6 162.24 476.48 162.24z"},null,-1)),E1=l(()=>e.createElementVNode("path",{d:"M918.4 945.28c-9.28 0-18.56-2.88-26.24-9.28l-156.48-126.4c-17.92-14.4-20.8-40.64-6.08-58.56 14.4-17.92 40.64-20.8 58.56-6.08l156.48 126.4c17.92 14.4 20.8 40.64 6.08 58.56-8.32 9.92-20.16 15.36-32.32 15.36zM643.84 532.8H309.12c-23.04 0-41.6-18.56-41.6-41.6s18.56-41.6 41.6-41.6h334.72c23.04 0 41.6 18.56 41.6 41.6s-18.56 41.6-41.6 41.6z"},null,-1)),M1=l(()=>e.createElementVNode("path",{d:"M476.48 700.16c-23.04 0-41.6-18.56-41.6-41.6V323.84c0-23.04 18.56-41.6 41.6-41.6s41.6 18.56 41.6 41.6v334.72c0 23.04-18.56 41.6-41.6 41.6z"},null,-1)),V1=[y1,E1,M1],B1=l(()=>e.createElementVNode("path",{d:"M485.76 921.92C253.12 921.92 64 732.8 64 500.48 64 267.84 253.12 78.72 485.76 78.72s421.76 189.12 421.76 421.76c-0.32 232.32-189.44 421.44-421.76 421.44z m0-759.68c-186.56 0-338.24 151.68-338.24 338.24s151.68 338.24 338.24 338.24 338.24-151.68 338.24-338.24S672 162.24 485.76 162.24z"},null,-1)),C1=l(()=>e.createElementVNode("path",{d:"M918.4 945.28c-9.28 0-18.56-2.88-26.24-9.28l-156.48-126.4c-17.92-14.4-20.8-40.64-6.08-58.56 14.4-17.92 40.64-20.8 58.56-6.08l156.48 126.4c17.92 14.4 20.8 40.64 6.08 58.56-8.32 9.92-20.16 15.36-32.32 15.36zM657.28 542.08H314.24c-23.04 0-41.6-18.56-41.6-41.6 0-23.04 18.56-41.6 41.6-41.6h343.04c23.04 0 41.6 18.56 41.6 41.6 0 23.04-18.56 41.6-41.6 41.6z"},null,-1)),w1=[B1,C1],N1=l(()=>e.createElementVNode("path",{d:"M981.675 313.572c-25.714-60.758-62.464-115.257-109.227-162.02S771.186 68.039 710.428 42.325C647.51 15.815 580.836 2.275 512 2.275s-135.51 13.54-198.428 40.05c-60.758 25.714-115.257 62.464-162.02 109.227-25.486 25.486-48.014 53.248-67.356 83.172V188.87c0-22.528-18.432-40.96-40.96-40.96s-40.96 18.432-40.96 40.96v327.68c0 22.528 18.432 40.96 40.96 40.96s40.96-18.432 40.96-40.96v-57.116c4.778-39.595 15.018-78.166 30.72-115.143 21.731-51.314 52.792-97.394 92.387-136.989s85.675-70.77 136.989-92.387C397.426 92.5 453.86 81.01 512 81.01c58.254 0 114.688 11.378 167.708 33.906 51.314 21.731 97.394 52.792 136.989 92.387s70.77 85.675 92.387 136.989C931.5 397.426 942.99 453.86 942.99 512c0 58.254-11.378 114.688-33.906 167.708-21.731 51.314-52.792 97.394-92.387 136.989s-85.675 70.77-136.989 92.387C626.574 931.5 570.14 942.99 512 942.99c-73.5 0-146.09-18.773-209.806-54.386-61.895-34.588-114.802-84.309-153.145-144.042-11.72-18.318-36.068-23.666-54.386-11.833-18.318 11.719-23.666 36.067-11.833 54.386 45.284 70.542 107.862 129.365 181.02 170.211 75.322 42.098 161.224 64.398 248.15 64.398 68.836 0 135.51-13.54 198.428-40.05 60.758-25.713 115.257-62.463 162.02-109.226 46.763-46.763 83.513-101.262 109.227-162.02 26.51-62.919 40.05-129.592 40.05-198.428s-13.54-135.51-40.05-198.428z"},null,-1)),x1=l(()=>e.createElementVNode("path",{d:"M242.802 584.249c10.809-2.845 21.731 3.3 25.372 13.88 3.982 11.606 11.264 20.14 21.732 25.715 8.078 4.437 17.18 6.599 27.306 6.599 18.888 0 35.044-7.851 48.356-23.666 13.312-15.701 22.756-37.205 28.33-85.447-8.76 13.88-19.683 23.666-32.654 29.354-12.97 5.69-26.965 8.42-41.87 8.42-30.378 0-54.272-9.444-72.021-28.33-17.636-18.888-26.51-43.122-26.51-72.932 0-28.558 8.76-53.59 26.169-75.321 17.408-21.618 43.121-32.54 77.14-32.54 45.853 0 77.484 20.593 94.892 61.895 9.67 22.641 14.45 51.086 14.45 85.22 0 38.456-5.803 72.59-17.409 102.285-19.228 49.494-51.769 74.183-97.621 74.183-30.72 0-54.158-8.078-70.087-24.12-11.378-11.492-18.66-25.032-21.96-40.733-2.275-10.923 4.552-21.731 15.36-24.576l1.025 0.114z m117.19-84.65c10.696-8.534 16.044-23.439 16.044-44.715 0-19.115-4.78-33.337-14.45-42.667s-21.846-13.995-36.75-13.995c-15.93 0-28.672 5.348-38.002 16.043-9.33 10.695-14.109 25.031-14.109 42.894 0 16.953 4.096 30.379 12.402 40.391 8.192 10.013 21.39 14.905 39.367 14.905 12.97 0 24.804-4.323 35.499-12.857z m305.153-98.646c14.108 25.941 21.049 61.44 21.049 106.61 0 42.78-6.372 78.165-19.115 106.154-18.432 40.164-48.697 60.189-90.567 60.189-37.774 0-65.877-16.384-84.423-49.266-15.36-27.42-23.097-64.17-23.097-110.364 0-35.727 4.665-66.447 13.88-92.047 17.295-47.786 48.584-71.68 93.868-71.68 40.846 0 70.314 16.84 88.405 50.404zM619.406 598.13c10.695-15.815 15.93-45.398 15.93-88.747 0-31.175-3.87-56.889-11.492-77.027-7.737-20.14-22.642-30.265-44.829-30.265-20.366 0-35.271 9.557-44.715 28.672-9.443 19.114-14.108 47.331-14.108 84.537 0 27.989 2.958 50.517 8.988 67.584 9.216 25.94 25.032 39.025 47.332 39.025 17.863 0 32.2-7.964 42.894-23.78z m224.029-228.125c12.743 12.857 19.114 28.445 19.114 46.877 0 19-6.599 34.93-19.91 47.559-13.199 12.743-28.673 19.115-46.195 19.115-19.456 0-35.498-6.6-47.9-19.798-12.402-13.198-18.66-28.558-18.66-46.194 0-18.773 6.6-34.588 19.684-47.445 13.084-12.857 28.786-19.342 46.876-19.342 18.546 0 34.248 6.485 46.99 19.228z m-72.59 72.59c7.054 7.055 15.587 10.582 25.6 10.582 9.557 0 17.976-3.527 25.144-10.581 7.168-7.055 10.695-15.588 10.695-25.714 0-9.671-3.527-18.09-10.58-25.145-7.055-7.054-15.475-10.581-25.26-10.581s-18.318 3.527-25.486 10.58c-7.168 7.055-10.695 15.588-10.695 25.715-0.114 9.557 3.413 17.977 10.581 25.145z"},null,-1)),S1=[N1,x1],b1=l(()=>e.createElementVNode("path",{d:"M512 1021.724c-68.836 0-135.51-13.54-198.428-40.05-60.758-25.713-115.257-62.463-162.02-109.226S68.039 771.186 42.325 710.428C15.815 647.51 2.275 580.836 2.275 512s13.54-135.51 40.05-198.428c25.714-60.758 62.464-115.257 109.227-162.02s101.262-83.513 162.02-109.227C376.49 15.815 443.164 2.275 512 2.275s135.51 13.54 198.428 40.05c60.758 25.714 115.257 62.464 162.02 109.227s83.513 101.262 109.227 162.02c26.51 62.919 40.05 129.592 40.05 198.428 0 21.732-17.636 39.367-39.368 39.367S942.99 533.732 942.99 512c0-58.254-11.378-114.688-33.906-167.708-21.731-51.314-52.792-97.394-92.387-136.989s-85.675-70.77-136.989-92.387C626.574 92.5 570.14 81.01 512 81.01c-58.254 0-114.688 11.378-167.708 33.906-51.314 21.731-97.394 52.792-136.989 92.387s-70.77 85.675-92.387 136.989C92.5 397.426 81.01 453.86 81.01 512c0 58.254 11.378 114.688 33.906 167.708 21.731 51.314 52.792 97.394 92.387 136.989s85.675 70.77 136.989 92.387C397.426 931.5 453.86 942.99 512 942.99c73.5 0 146.09-18.773 209.806-54.386 61.895-34.588 114.802-84.309 153.145-144.042 11.72-18.318 36.068-23.666 54.386-11.833 18.318 11.719 23.666 36.067 11.833 54.386-45.284 70.542-107.862 129.365-181.02 170.211-75.322 42.098-161.224 64.398-248.15 64.398z"},null,-1)),I1=l(()=>e.createElementVNode("path",{d:"M980.764 557.511c-22.528 0-40.96-18.432-40.96-40.96v-327.68c0-22.528 18.432-40.96 40.96-40.96s40.96 18.432 40.96 40.96v327.68c0 22.528-18.432 40.96-40.96 40.96zM242.802 584.25c10.809-2.845 21.731 3.3 25.372 13.88 3.982 11.606 11.264 20.14 21.732 25.715 8.078 4.437 17.18 6.599 27.306 6.599 18.888 0 35.044-7.851 48.356-23.666 13.312-15.701 22.756-37.205 28.33-85.447-8.76 13.88-19.683 23.666-32.654 29.354-12.97 5.69-26.965 8.42-41.87 8.42-30.378 0-54.272-9.444-72.021-28.33-17.636-18.888-26.51-43.122-26.51-72.932 0-28.558 8.76-53.59 26.169-75.321 17.408-21.618 43.121-32.54 77.14-32.54 45.853 0 77.484 20.593 94.892 61.895 9.67 22.641 14.45 51.086 14.45 85.22 0 38.456-5.803 72.59-17.409 102.285-19.228 49.494-51.769 74.183-97.621 74.183-30.72 0-54.158-8.078-70.087-24.12-11.378-11.492-18.66-25.032-21.96-40.733-2.275-10.923 4.552-21.731 15.36-24.576l1.025 0.114z m117.19-84.65c10.696-8.534 16.044-23.439 16.044-44.715 0-19.115-4.78-33.337-14.45-42.667s-21.846-13.995-36.75-13.995c-15.93 0-28.672 5.348-38.002 16.043-9.33 10.695-14.109 25.031-14.109 42.894 0 16.953 4.096 30.379 12.402 40.391 8.192 10.013 21.39 14.905 39.367 14.905 12.97 0 24.804-4.323 35.499-12.857z m305.153-98.646c14.108 25.941 21.049 61.44 21.049 106.61 0 42.78-6.372 78.165-19.115 106.154-18.432 40.164-48.697 60.189-90.567 60.189-37.774 0-65.877-16.384-84.423-49.266-15.36-27.42-23.097-64.17-23.097-110.364 0-35.727 4.665-66.447 13.88-92.047 17.295-47.786 48.584-71.68 93.868-71.68 40.846 0 70.314 16.84 88.405 50.404zM619.406 598.13c10.695-15.815 15.93-45.398 15.93-88.747 0-31.175-3.87-56.889-11.492-77.027-7.737-20.14-22.642-30.265-44.829-30.265-20.366 0-35.271 9.557-44.715 28.672-9.443 19.114-14.108 47.331-14.108 84.537 0 27.989 2.958 50.517 8.988 67.584 9.216 25.94 25.032 39.025 47.332 39.025 17.863 0 32.2-7.964 42.894-23.78z m224.029-228.125c12.743 12.857 19.114 28.445 19.114 46.877 0 19-6.599 34.93-19.91 47.559-13.199 12.743-28.673 19.115-46.195 19.115-19.456 0-35.498-6.6-47.9-19.798-12.402-13.198-18.66-28.558-18.66-46.194 0-18.773 6.6-34.588 19.684-47.445 13.084-12.857 28.786-19.342 46.876-19.342 18.546 0 34.248 6.485 46.99 19.228z m-72.59 72.59c7.054 7.055 15.587 10.582 25.6 10.582 9.557 0 17.976-3.527 25.144-10.581 7.168-7.055 10.695-15.588 10.695-25.714 0-9.671-3.527-18.09-10.58-25.145-7.055-7.054-15.475-10.581-25.26-10.581s-18.318 3.527-25.486 10.58c-7.168 7.055-10.695 15.588-10.695 25.715-0.114 9.557 3.413 17.977 10.581 25.145z"},null,-1)),A1=[b1,I1],D1=l(()=>e.createElementVNode("path",{d:"M573.248 832v88h-96V832h96zM128 224a64 64 0 0 1 45.248 18.752l229.504 229.504a64 64 0 0 1 0 90.496l-229.504 229.504A64 64 0 0 1 64 747.008V288a64 64 0 0 1 64-64z m781.248-5.504a64 64 0 0 1 63.552 56.576l0.448 7.424v459.008a64 64 0 0 1-103.232 50.56l-6.016-5.312-229.504-229.504a64 64 0 0 1-5.312-84.48l5.312-6.016L864 237.248a64 64 0 0 1 45.248-18.752zM128 288v459.008l229.504-229.504L128 288z m445.248 368v88h-96V656h96z m0-176v88h-96V480h96z m0-176v88h-96V304h96z m0-176v88h-96V128h96z"},null,-1)),H1=[D1],R1=l(()=>e.createElementVNode("path",{d:"M660.48 106.24L512 291.84l-149.12-185.6h297.6M768 69.12c1.28-19.2-13.44-36.48-33.28-37.12H289.28c-19.2 1.28-33.92 17.92-33.28 37.12 0 8.96 3.2 17.92 8.32 24.96l222.72 277.76a30.72 30.72 0 0 0 49.28 0l222.72-277.76c6.4-7.04 8.96-16 8.96-24.96zM768 954.88c1.28 19.2-13.44 36.48-33.28 37.12H289.28a35.52 35.52 0 0 1-33.28-37.12c0-8.96 3.2-17.92 8.32-24.96l222.72-277.76a30.72 30.72 0 0 1 49.28 0l222.72 277.76c6.4 7.04 8.96 16 8.96 24.96zM800 480h64v64h-64zM928 480h64v64h-64zM672 480h64v64h-64zM544 480h64v64h-64zM416 480h64v64h-64zM288 480h64v64h-64zM160 480h64v64h-64zM32 480h64v64h-64z"},null,-1)),L1=[R1],q1=l(()=>e.createElementVNode("path",{d:"M863.153113 702.196507h116.959605a43.887282 43.887282 0 0 1 0 87.774563H863.153113A73.182042 73.182042 0 0 0 789.97107 863.153113v116.959605a43.887282 43.887282 0 0 1-87.774563 0V863.153113A160.956606 160.956606 0 0 1 863.153113 702.196507z m0-380.393014h116.959605a43.887282 43.887282 0 0 0 0-87.774563H863.153113A73.182042 73.182042 0 0 1 789.97107 160.956606V43.887282a43.887282 43.887282 0 0 0-87.774563 0v117.069324a160.846887 160.846887 0 0 0 160.956606 160.846887z m-702.196507 0H43.887282a43.887282 43.887282 0 0 1 0-87.774563h117.069324a73.072324 73.072324 0 0 0 73.072324-73.072324V43.887282a43.887282 43.887282 0 0 1 87.774563 0v117.069324a160.846887 160.846887 0 0 1-160.846887 160.846887z m0 380.393014H43.887282a43.887282 43.887282 0 0 0 0 87.774563h117.069324a73.182042 73.182042 0 0 1 73.072324 73.182043v116.959605a43.887282 43.887282 0 0 0 87.774563 0V863.153113A160.846887 160.846887 0 0 0 160.956606 702.196507z"},null,-1)),T1=[q1],U1=l(()=>e.createElementVNode("path",{d:"M768.35456 416a256 256 0 1 0-512 0 192 192 0 1 0 0 384v64a256 256 0 0 1-58.88-505.216 320.128 320.128 0 0 1 629.76 0A256.128 256.128 0 0 1 768.35456 864v-64a192 192 0 0 0 0-384z m-512 384h64v64H256.35456v-64z m448 0h64v64h-64v-64z"},null,-1)),F1=l(()=>e.createElementVNode("path",{d:"M539.04256 845.248V512.192a32.448 32.448 0 0 0-32-32.192c-17.664 0-32 14.912-32 32.192v333.056l-36.096-36.096a32.192 32.192 0 0 0-45.056 0.192 31.616 31.616 0 0 0-0.192 45.056l90.88 90.944a31.36 31.36 0 0 0 22.528 9.088 30.08 30.08 0 0 0 22.4-9.088l90.88-90.88a32.192 32.192 0 0 0-0.192-45.12 31.616 31.616 0 0 0-45.056-0.192l-36.096 36.096z"},null,-1)),K1=[U1,F1],P1=l(()=>e.createElementVNode("path",{d:"M512 2.56C231.424 2.56 3.584 229.888 3.584 510.976S231.424 1018.88 512 1018.88s508.416-227.328 508.416-508.416S793.088 2.56 512 2.56z m0 941.568c-239.616 0-433.664-194.048-433.664-433.664S272.384 76.8 512 76.8s433.664 194.048 433.664 433.664-194.048 433.664-433.664 433.664z"},null,-1)),W1=l(()=>e.createElementVNode("path",{d:"M409.6 730.112c-19.968 0-35.84-15.872-35.84-35.84v-332.8c0-19.968 15.872-35.84 35.84-35.84s35.84 15.872 35.84 35.84v332.8c0 19.968-15.872 35.84-35.84 35.84zM614.4 730.112c-19.968 0-35.84-15.872-35.84-35.84v-332.8c0-19.968 15.872-35.84 35.84-35.84s35.84 15.872 35.84 35.84v332.8c0 19.968-15.872 35.84-35.84 35.84z"},null,-1)),$1=[P1,W1],O1=l(()=>e.createElementVNode("path",{d:"M423.687947 757.47897a100.195631 100.195631 0 0 1-100.195631-101.197587V366.716009a100.195631 100.195631 0 0 1 153.299316-85.166286l232.453863 145.283665a100.195631 100.195631 0 0 1 0 170.332573L476.791632 741.447669a100.195631 100.195631 0 0 1-52.101729 15.029345z m0-410.802087a21.041083 21.041083 0 0 0-10.019563 3.005869 20.039126 20.039126 0 0 0-10.019563 17.033257v289.565374a20.039126 20.039126 0 0 0 31.060646 17.033257l232.453863-145.283665a20.039126 20.039126 0 0 0 0-34.066514L433.70751 349.682752a19.03717 19.03717 0 0 0-10.019563-4.007825z"},null,-1)),X1=l(()=>e.createElementVNode("path",{d:"M512.862059 1023.999349A511.999674 511.999674 0 0 1 313.472753 40.078252a511.999674 511.999674 0 0 1 398.778611 942.840888 508.993805 508.993805 0 0 1-199.389305 41.080209z m0-943.842844C274.396457 80.156505 81.018889 273.534073 81.018889 511.999674s193.377568 431.84317 431.84317 431.84317 431.84317-194.379524 431.843169-431.84317S750.325704 80.156505 512.862059 80.156505z"},null,-1)),j1=[O1,X1],Y1=l(()=>e.createElementVNode("svg",{class:"close-icon icon-is-hover svg-icon__action",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{d:"M835.2 854.4c-12.8 0-22.4-3.2-32-12.8L211.2 256C192 240 192 211.2 208 195.2s44.8-16 60.8 0L864 780.8c16 16 16 44.8 0 60.8-6.4 9.6-16 12.8-28.8 12.8z"}),e.createElementVNode("path",{d:"M236.8 848c-12.8 0-22.4-3.2-32-12.8-16-16-16-44.8 0-60.8l604.8-576c16-16 44.8-16 60.8 0s16 44.8 0 60.8l-604.8 576c-9.6 9.6-19.2 12.8-28.8 12.8z"})],-1)),G1=[Y1],J1=e.defineComponent({__name:"index",props:{visible:{type:Boolean,default:!1},current:{type:String,default:()=>""},images:{type:Array,default:()=>[]},zIndex:{type:Number,default:()=>2e3},image:{type:HTMLImageElement,required:!1},from:{type:String,default:()=>""},handleChange:{type:Function,default:()=>()=>{}},handleClose:{type:Function,default:()=>()=>{}},language:{type:String,default:()=>"zh"}},emits:["on-close","on-change","onUpdate:value"],setup(d,{emit:Q1}){const i=d,u=(n="")=>{const o=a1.messages[i.language];if(o){const{image:t}=o,s=n.split(".");return t[s[1]]||n}else return console.warn(`[images-viewer-vue3]:The current language '${i.language}' is not supported`),i.language},{onMouseEnterImage:b,updateImageSrc:m,playState:I,stopPlay:g,autoPlay:f,isMultipleImage:p,onWheelListener:A,imageInfo:D,originImages:H,nextImage:X,previousImage:j,onRectScroll:R,renderData:L,vnodeUlRef:Y,vnodeScrollRef:G,destroyedExe:q,resetStyle:_,downloads:T,loadImageErrorText:U,loading:J,imageRef:r,imageVieverWidgetRef:Q,loadImage:F,errorImage:K,zoomIn:k,zoomOut:z,inevrtY:y,inevrtX:E,clockwise:M,counterclockwise:V,currentIndex:v,activeIndex:B}=s1.useToolbar(i.images,i.current,i.handleChange);u1.useMouse();const C=e.ref(""),w=e.ref(!1);function c(n,o,t=!0){O.useCusShortKey({[n]:(s,a)=>{o(),N(s,a,t)}})}c("right",X),c("left",j),c("ctrl+i+y",y),c("ctrl+i+x",E),c("ctrl+c+r",M),c("ctrl+c+l",V),c("ctrl+z",_),c("esc",P),c("space",t1),O.useCusShortKey({"ctrl+*":(n,o)=>{switch(n.key){case"-":z(n),N(n,o,!0,"ctrl + "+n.key);break;case"+":k(n),N(n,o,!0,"ctrl + "+n.key);break}}});function N(n,o,t=!1,s=""){t&&n.preventDefault();const{key:a}=o;C.value=s||a,w.value=!0,setTimeout(()=>{w.value=!1},2e3)}const h=e.ref(!1),x=e.ref(!1),Z=()=>{h.value=!h.value};e.watch(()=>i.current,(n,o)=>{n&&e.nextTick().then(t=>{if(r.value)if(i.image===void 0)r.value.src=n;else{const s=i.image.getBoundingClientRect();m.value=r.value.src=i.image.src;const a=r.value.getBoundingClientRect();$.FlipAnimate(r.value,s,a).addEventListener("finish",W=>{h.value=!0})}})},{deep:!0,immediate:!0}),e.watch(()=>v.value,(n,o)=>{if(n){if(!r.value)return;L.value.findIndex(t=>t.index===v.value),e1()}});function e1(){v.value===H.value.length-1&&(x.value=!0,setTimeout(()=>{x.value=!1},2e3))}function t1(){I.value?g():f()}function o1(n,o,t){if(U.value="",!!r.value&&n.target){const s=n.target,a=s.getBoundingClientRect();if(Number(s.getAttribute("data-id"))===B.value)return;B.value=o.index,v.value=H.value.findIndex(l1=>l1.index===B.value),m.value=r.value.src=s.src;const W=r.value.getBoundingClientRect();i.handleChange({image:m.value,index:v.value}),$.FlipAnimate(r.value,a,W)}}function P(){q(),i.handleClose(),m.value=""}return e.onBeforeUnmount(()=>{q()}),(n,o)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"imageVieverWidgetRef",ref:Q,class:e.normalizeClass(["images-viewer-vue3__wrapper",{"is-active":d.visible},{"nav-scroll-style__wrap":!e.unref(S.getUserAgent)()}])},[e.createElementVNode("div",d1,[e.unref(p)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["content-nav__wrapper",{"nav-active":h.value}])},[e.createElementVNode("div",{ref_key:"vnodeScrollRef",ref:G,class:e.normalizeClass(["nav-vnode-scroll__wrapper"]),onScroll:o[0]||(o[0]=(...t)=>e.unref(R)&&e.unref(R)(...t))},[e.createElementVNode("ul",{ref_key:"vnodeUlRef",ref:Y,class:e.normalizeClass(["vnode-list-group"])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(L),(t,s)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass(["list-group-item",{"list-group-item__active":e.unref(v)===t.index}]),style:{height:"50px"},key:s,"data-id":t.index},[e.createElementVNode("img",{class:"list-group-item__image","data-id":t.index,src:t.url,alt:"picture",onClick:e.withModifiers(a=>o1(a,t),["stop","prevent"])},null,8,m1)],10,v1))),128))],512)],544)],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"content-viewer-image__wrapper",onWheel:o[14]||(o[14]=(...t)=>e.unref(A)&&e.unref(A)(...t))},[e.withDirectives((e.openBlock(),e.createElementBlock("svg",{onClick:e.withModifiers(Z,["stop","prevent"]),class:e.normalizeClass(["icon-is-hover cus-cursor image-collapse-nav__btn svg-icon__action",{"rotate-right__btn":!h.value}]),viewBox:"0 0 1024 1024"},h1,2)),[[e.vShow,e.unref(p)]]),e.unref(S.getUserAgent)()?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("ul",g1,[e.createElementVNode("li",null,e.toDisplayString(u("image.ruleText"))+"："+e.toDisplayString(e.unref(D).width)+e.toDisplayString(u("image.px"))+" X "+e.toDisplayString(e.unref(D).height)+e.toDisplayString(u("image.px")),1)])),e.unref(U)?(e.openBlock(),e.createElementBlock("div",f1,[e.createElementVNode("p",_1,e.toDisplayString(u("image.loadErrorText")),1),e.createElementVNode("p",null,e.toDisplayString(e.unref(m)),1)])):e.createCommentVNode("",!0),e.createElementVNode("img",{ref_key:"imageRef",ref:r,class:"image-viewer__inner cus-transition",onLoad:o[1]||(o[1]=(...t)=>e.unref(F)&&e.unref(F)(...t)),onError:o[2]||(o[2]=(...t)=>e.unref(K)&&e.unref(K)(...t)),src:"",alt:"picture",style:{width:"120px",height:"120px"},onMouseenter:o[3]||(o[3]=(...t)=>e.unref(b)&&e.unref(b)(...t))},null,544),e.unref(J)?(e.openBlock(),e.createBlock(c1.default,{key:2})):e.createCommentVNode("",!0),e.createElementVNode("div",k1,[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["control-info",{position:!e.unref(S.getUserAgent)()}])},[e.createElementVNode("span",null,e.toDisplayString(u("image.total"))+" "+e.toDisplayString(d.images.length)+" "+e.toDisplayString(u("image.pictures"))+" ",1),e.createElementVNode("span",null,"/ "+e.toDisplayString(u("image.the"))+" "+e.toDisplayString(e.unref(v)+1)+" "+e.toDisplayString(u("image.img"))+" ",1)],2),[[e.vShow,e.unref(p)]]),e.createElementVNode("div",z1,[(e.openBlock(),e.createElementBlock("svg",{onClick:o[4]||(o[4]=e.withModifiers((...t)=>e.unref(k)&&e.unref(k)(...t),["stop","prevent"])),class:"tool-item-icon__btn icon-is-hover",viewBox:"0 0 1024 1024"},V1)),(e.openBlock(),e.createElementBlock("svg",{onClick:o[5]||(o[5]=e.withModifiers((...t)=>e.unref(z)&&e.unref(z)(...t),["stop","prevent"])),class:"tool-item-icon__btn icon-is-hover",viewBox:"0 0 1024 1024"},w1)),(e.openBlock(),e.createElementBlock("svg",{onClick:o[6]||(o[6]=e.withModifiers((...t)=>e.unref(V)&&e.unref(V)(...t),["stop","prevent"])),class:"tool-item-icon__btn icon-is-hover",viewBox:"0 0 1024 1024"},S1)),(e.openBlock(),e.createElementBlock("svg",{onClick:o[7]||(o[7]=e.withModifiers((...t)=>e.unref(M)&&e.unref(M)(...t),["stop","prevent"])),class:"tool-item-icon__btn icon-is-hover",viewBox:"0 0 1024 1024"},A1)),(e.openBlock(),e.createElementBlock("svg",{onClick:o[8]||(o[8]=e.withModifiers((...t)=>e.unref(E)&&e.unref(E)(...t),["stop","prevent"])),class:"tool-item-icon__btn icon-is-hover",viewBox:"0 0 1024 1024"},H1)),(e.openBlock(),e.createElementBlock("svg",{onClick:o[9]||(o[9]=e.withModifiers((...t)=>e.unref(y)&&e.unref(y)(...t),["stop","prevent"])),class:"tool-item-icon__btn icon-is-hover",viewBox:"0 0 1024 1024"},L1)),(e.openBlock(),e.createElementBlock("svg",{onClick:o[10]||(o[10]=e.withModifiers((...t)=>e.unref(_)&&e.unref(_)(...t),["stop","prevent"])),class:"tool-item-icon__btn icon-is-hover",viewBox:"0 0 1024 1024",width:"20",height:"20"},T1)),(e.openBlock(),e.createElementBlock("svg",{onClick:o[11]||(o[11]=e.withModifiers((...t)=>e.unref(T)&&e.unref(T)(...t),["stop","prevent"])),class:"tool-item-icon__btn icon-is-hover",viewBox:"0 0 1024 1024"},K1)),e.unref(I)?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.unref(p)?(e.openBlock(),e.createElementBlock("svg",{key:0,onClick:o[12]||(o[12]=e.withModifiers((...t)=>e.unref(g)&&e.unref(g)(...t),["stop","prevent"])),class:"tool-item-icon__btn icon-is-hover",viewBox:"0 0 1024 1024"},$1)):e.createCommentVNode("",!0)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.unref(p)?(e.openBlock(),e.createElementBlock("svg",{key:0,onClick:o[13]||(o[13]=e.withModifiers((...t)=>e.unref(f)&&e.unref(f)(...t),["stop","prevent"])),class:"tool-item-icon__btn icon-is-hover",viewBox:"0 0 1024 1024"},j1)):e.createCommentVNode("",!0)],64))])])],32)]),e.createElementVNode("div",{class:"images-viewer-vue3__close close-btn",onClick:P},G1),e.createVNode(i1.default,{hotkey:C.value,"onUpdate:hotkey":o[15]||(o[15]=t=>C.value=t),isActiveKey:w.value},null,8,["hotkey","isActiveKey"]),e.createVNode(r1.default,{"is-active":x.value},null,8,["is-active"])],2))}});exports.default=J1;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),ne=require("../hooks/toolbar.js"),f=require("../utils/index.js"),P=require("../utils/flip-animate.js"),oe=require("./HotKeys.vue.js"),ae=require("./Message.vue.js"),re=require("./MobileViewer.vue.js"),le=require("./Loading.vue.js"),ie=require("./ScrollItemNav.vue.js"),se=require("./ToolsBar.vue.js"),T=require("../utils/hotkeys.js"),ue=require("../langs/index.js"),ce=require("../hooks/mouse.js"),de=require("../hooks/player.js"),L=i=>(e.pushScopeId("data-v-6c102bb4"),i=i(),e.popScopeId(),i),ge={key:0,class:"images-viewer-vue3__mobile"},me={key:0,class:"cus-head-info"},ve=L(()=>e.createElementVNode("path",{d:"M322.12 353.93L104.61 490.77c-18.45 11.61-18.44 38.51 0.02 50.1l217.51 136.64c19.71 12.38 45.33-1.78 45.33-25.06V378.98c0-23.29-25.64-37.45-45.35-25.05zM94.78 125.02h834.44c16.84 0 30.5-13.66 30.5-30.5s-13.66-30.5-30.5-30.5H94.78c-16.84 0-30.5 13.66-30.5 30.5s13.66 30.5 30.5 30.5zM929.22 342.34H444.11c-16.84 0-30.5 13.66-30.5 30.5s13.66 30.5 30.5 30.5h485.11c16.84 0 30.5-13.66 30.5-30.5s-13.66-30.5-30.5-30.5zM929.22 620.66H444.11c-16.84 0-30.5 13.66-30.5 30.5s13.66 30.5 30.5 30.5h485.11c16.84 0 30.5-13.66 30.5-30.5s-13.66-30.5-30.5-30.5zM929.22 898.98H94.78c-16.84 0-30.5 13.66-30.5 30.5s13.66 30.5 30.5 30.5h834.44c16.84 0 30.5-13.66 30.5-30.5s-13.66-30.5-30.5-30.5z"},null,-1)),fe=[ve],pe={class:"image-info"},ye={key:0,style:{"user-select":"text"}},he={style:{color:"orange","text-decoration":"solid"}},ke={class:e.normalizeClass(["image-viewer__controls"])},_e={class:"control-info position"},Se=L(()=>e.createElementVNode("svg",{class:"close-icon icon-is-hover svg-icon__action",viewBox:"0 0 1024 1024",width:"15",height:"15"},[e.createElementVNode("path",{d:"M835.2 854.4c-12.8 0-22.4-3.2-32-12.8L211.2 256C192 240 192 211.2 208 195.2s44.8-16 60.8 0L864 780.8c16 16 16 44.8 0 60.8-6.4 9.6-16 12.8-28.8 12.8z"}),e.createElementVNode("path",{d:"M236.8 848c-12.8 0-22.4-3.2-32-12.8-16-16-16-44.8 0-60.8l604.8-576c16-16 44.8-16 60.8 0s16 44.8 0 60.8l-604.8 576c-9.6 9.6-19.2 12.8-28.8 12.8z"})],-1)),Ie=[Se],we=e.defineComponent({__name:"index",props:{visible:{type:Boolean,default:!1},current:{type:String,default:()=>""},images:{type:Array,required:!0},zIndex:{type:Number,default:()=>2e3},image:{type:HTMLImageElement,required:!1},from:{type:String,default:()=>""},handleChange:{type:Function,default:()=>()=>{}},handleClose:{type:Function,default:()=>()=>{}},language:{type:String,default:()=>"zh"},playSpeed:{type:Number,default:()=>2e3}},emits:["on-close","on-change","onUpdate:value"],setup(i,{emit:Ne}){const o=i,c=(n="")=>{const t=ue.messages[o.language];if(t){const{image:a}=t,s=n.split(".");return a[s[1]]||n}else return console.warn(`[images-viewer-vue3]:The current language '${o.language}' is not supported`),o.language},{updateImageSrc:g,isMultipleImage:m,onWheelListener:S,imageInfo:I,nextImage:w,previousImage:N,destroyedExe:C,resetStyle:V,downloads:U,loadImageErrorText:E,loading:x,imageRef:l,imageVieverWidgetRef:H,loadImage:O,errorImage:B,zoomIn:b,zoomOut:D,inevrtY:M,inevrtX:z,clockwise:A,counterclockwise:R,currentIndex:r}=ne.useToolbar(o.images,o.handleChange);ce.useMouse();const{scrollItemNavRef:K,playState:F,autoPlay:W,stopPlay:p,hotKeyAutoPlay:X}=de.usePlayer(r,o.images,l,o.handleChange,o.playSpeed),Z=n=>{p()},Y=()=>{p(),N()},$=()=>{p(),w()},y=e.ref(""),h=e.ref(!1);function u(n,t,a=!0){T.useCusShortKey({[n]:(s,d)=>{t(),k(s,d,a)}})}u("right",w),u("left",N),u("ctrl+i+y",M),u("ctrl+i+x",z),u("ctrl+c+r",A),u("ctrl+c+l",R),u("ctrl+z",V),u("esc",q),u("space",X),T.useCusShortKey({"ctrl+*":(n,t)=>{switch(n.key){case"-":D(n),k(n,t,!0,"ctrl + "+n.key);break;case"+":b(n),k(n,t,!0,"ctrl + "+n.key);break}}});function k(n,t,a=!1,s=""){a&&n.preventDefault();const{key:d}=t;y.value=s||d,h.value=!0,setTimeout(()=>{h.value=!1},2e3)}const j=({index:n,url:t})=>{r.value=n,g.value=t,o.handleChange({image:t,index:r.value})},v=e.ref(!1),_=e.ref(!1),G=()=>{v.value=!v.value};e.nextTick(()=>{if(f.getUserAgent()){g.value=o.current,x.value=!1;const n=o.images.findIndex(t=>t===o.current);n!==-1&&(r.value=n)}else J()});function J(){if(l.value)if(o.image===void 0)l.value.src=o.current;else{const n=o.images.findIndex(d=>d===o.current);n!==-1&&(r.value=n);const t=o.image.getBoundingClientRect();g.value=l.value.src=o.image.src;const a=l.value.getBoundingClientRect();P.FlipAnimate(l.value,t,a).addEventListener("finish",d=>{v.value=!0})}}e.watch(()=>r.value,(n,t)=>{n&&Q()});function Q(){r.value===o.images.length-1&&(_.value=!0,setTimeout(()=>{_.value=!1},2e3))}function ee({evt:n,item:t,index:a}){if(E.value="",!!l.value&&n.target){const s=n.target,d=s.getBoundingClientRect();if(Number(s.getAttribute("data-id"))===r.value)return;r.value=t.index,g.value=l.value.src=s.src;const te=l.value.getBoundingClientRect();o.handleChange({image:g.value,index:r.value}),P.FlipAnimate(l.value,d,te)}}function q(){C(),o.handleClose(),g.value=""}return e.onBeforeUnmount(()=>{C()}),e.provide("images",o.images),e.provide("isMultipleImage",m.value),(n,t)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"imageVieverWidgetRef",ref:H,class:e.normalizeClass(["images-viewer-vue3__wrapper",{"is-active":i.visible},{"nav-scroll-style__wrap":!e.unref(f.getUserAgent)()}])},[e.unref(f.getUserAgent)()?(e.openBlock(),e.createElementBlock("div",ge,[e.unref(m)?(e.openBlock(),e.createElementBlock("div",me,[e.createElementVNode("span",null,e.toDisplayString(i.images.length)+"  / "+e.toDisplayString(e.unref(r)+1),1)])):e.createCommentVNode("",!0),e.createVNode(re.default,{currentImage:i.current,activeImage:i.image,onOnCb:j},null,8,["currentImage","activeImage"])])):(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["images-viewer-vue3__content",{"active-grid":!v.value},{"close-grid":!e.unref(m)}])},[e.unref(m)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["content-nav__wrapper",{"nav-active":v.value},{"is-hidden":e.unref(f.getUserAgent)()}])},[e.createVNode(ie.default,{ref_key:"scrollItemNavRef",ref:K,modelValue:e.unref(r),"onUpdate:modelValue":t[0]||(t[0]=a=>e.isRef(r)?r.value=a:null),onOnClick:ee},null,8,["modelValue"])],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"content-viewer-image__wrapper",onWheel:t[3]||(t[3]=(...a)=>e.unref(S)&&e.unref(S)(...a))},[e.withDirectives((e.openBlock(),e.createElementBlock("svg",{onClick:e.withModifiers(G,["stop","prevent"]),class:e.normalizeClass(["icon-is-hover cursor image-collapse-nav__btn svg-icon__action",{"rotate-right__btn":!v.value},{"is-hidden":e.unref(f.getUserAgent)()}]),viewBox:"0 0 1024 1024"},fe,2)),[[e.vShow,e.unref(m)]]),e.createElementVNode("ul",pe,[e.createElementVNode("li",null,e.toDisplayString(c("image.ruleText"))+"："+e.toDisplayString(e.unref(I).width)+e.toDisplayString(c("image.px"))+" X "+e.toDisplayString(e.unref(I).height)+e.toDisplayString(c("image.px")),1)]),e.unref(E)?(e.openBlock(),e.createElementBlock("div",ye,[e.createElementVNode("p",he,e.toDisplayString(c("image.loadErrorText")),1),e.createElementVNode("p",null,e.toDisplayString(e.unref(g)),1)])):e.createCommentVNode("",!0),e.createElementVNode("img",{ref_key:"imageRef",ref:l,class:e.normalizeClass(["image-viewer__inner cus-transition"]),onLoad:t[1]||(t[1]=(...a)=>e.unref(O)&&e.unref(O)(...a)),onError:t[2]||(t[2]=(...a)=>e.unref(B)&&e.unref(B)(...a)),alt:"picture",onMouseenter:Z},null,544),e.unref(x)?(e.openBlock(),e.createBlock(le.default,{key:1})):e.createCommentVNode("",!0),e.createElementVNode("div",ke,[e.withDirectives(e.createElementVNode("div",_e,[e.createElementVNode("span",null,e.toDisplayString(c("image.total"))+" "+e.toDisplayString(i.images.length)+" "+e.toDisplayString(c("image.pictures"))+" ",1),e.createElementVNode("span",null,"/ "+e.toDisplayString(c("image.the"))+" "+e.toDisplayString(e.unref(r)+1)+" "+e.toDisplayString(c("image.img"))+" ",1)],512),[[e.vShow,e.unref(m)]]),e.createVNode(se.default,{playState:e.unref(F),onOnPrevious:Y,onOnNext:$,onOnResetStyle:e.unref(V),onOnDownloads:e.unref(U),onOnZoomIn:e.unref(b),onOnZoomOut:e.unref(D),onOnInevrtY:e.unref(M),onOnInevrtX:e.unref(z),onOnClockwise:e.unref(A),onOnCounterclockwise:e.unref(R),onOnStopPlay:e.unref(p),onOnAutoPlay:e.unref(W)},null,8,["playState","onOnResetStyle","onOnDownloads","onOnZoomIn","onOnZoomOut","onOnInevrtY","onOnInevrtX","onOnClockwise","onOnCounterclockwise","onOnStopPlay","onOnAutoPlay"])])],32)],2)),e.createElementVNode("div",{class:"images-viewer-vue3__close close-btn",onClick:q},Ie),e.createVNode(oe.default,{hotkey:y.value,"onUpdate:hotkey":t[4]||(t[4]=a=>y.value=a),isActiveKey:h.value},null,8,["hotkey","isActiveKey"]),e.createVNode(ae.default,{"is-active":_.value},null,8,["is-active"])],2))}});exports.default=we;

dist/lib/components/Message.vue.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Message.vue2.js");;/* empty css              */const t=require("../_virtual/_plugin-vue_export-helper.js"),u=t.default(e.default,[["__scopeId","data-v-17985293"]]);exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Message.vue2.js");;/* empty css              */const t=require("../_virtual/_plugin-vue_export-helper.js"),u=t.default(e.default,[["__scopeId","data-v-75db11c1"]]);exports.default=u;

dist/lib/components/Message.vue2.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),i=t=>(e.pushScopeId("data-v-17985293"),t=t(),e.popScopeId(),t),a=i(()=>e.createElementVNode("p",{class:"item-key"},"已经是最后一张图片了",-1)),l=[a],n=e.defineComponent({__name:"Message",props:{isActive:{type:Boolean,default:()=>!1}},setup(t){const s=t;return e.watch(()=>s.isActive,(o,c)=>{o&&setTimeout(()=>{},2e3)}),(o,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["hotkey-tip__wrap",{"is-active_key":t.isActive}])},l,2))}});exports.default=n;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),o=require("../utils/index.js"),n=t=>(e.pushScopeId("data-v-75db11c1"),t=t(),e.popScopeId(),t),r=n(()=>e.createElementVNode("p",{class:"item-key"},"⚠ 已经是最后一张图片了",-1)),a=[r],l=e.defineComponent({__name:"Message",props:{isActive:{type:Boolean,default:()=>!1}},setup(t){const c=t;return e.watch(()=>c.isActive,(s,i)=>{s&&setTimeout(()=>{},2e3)}),(s,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["hotkey-tip__wrap",{"is-active_key":t.isActive},{"is-mobile":e.unref(o.getUserAgent)()},{"is-pc":!e.unref(o.getUserAgent)()}])},a,2))}});exports.default=l;

dist/lib/hooks/toolbar.d.ts

@@ -1,7 +0,3 @@
-export declare const useToolbar: (images: string[], currentUrl: string, cb: Function) => {
-    onMouseEnterImage: () => void;
+export declare const useToolbar: (images: string[], cb: Function) => {
     updateImageSrc: import('vue').Ref<string>;
-    playState: import('vue').Ref<boolean>;
-    stopPlay: () => void;
-    autoPlay: () => void;
     isMultipleImage: import('vue').Ref<boolean>;
@@ -13,15 +9,4 @@ onWheelListener: (evt: WheelEvent) => void;
     };
-    originImages: import('vue').Ref<{
-        index: number;
-        url: string;
-    }[]>;
     nextImage: () => void;
     previousImage: () => void;
-    onRectScroll: (evt: Event) => void;
-    renderData: import('vue').Ref<{
-        index: number;
-        url: string;
-    }[]>;
-    vnodeUlRef: import('vue').Ref<HTMLElement | null>;
-    vnodeScrollRef: import('vue').Ref<HTMLElement | null>;
     destroyedExe: () => void;
@@ -43,3 +28,2 @@ resetStyle: () => void;
     currentIndex: import('vue').Ref<number>;
-    activeIndex: import('vue').Ref<number>;
 };

dist/lib/hooks/toolbar.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const le=require("../utils/ViewerCore.js"),M=require("../utils/index.js"),l=require("vue");M.getUserAgent();const ae=3e3;var W=0;const ne=(f,k,q)=>{const g=l.ref(null),a=l.ref(null),h=l.ref(""),d=l.ref(!0),i=le.default.getInStance(),r=l.ref(-1),R=l.ref(-1),A=l.ref(""),o=l.ref([]),C=l.reactive({width:0,height:0}),m=l.ref(!0);var x;const I=l.ref(!1),u=l.ref(null),y=l.ref(null),p=l.ref(0),w=50,v=l.ref(0),O=l.ref(0),P=l.ref(0),b=l.ref([]);function Y(e){i.horizontalInvert()}function _(e){i.verticalInvert()}function j(e){i.zoomIn()}function B(e){i.zoomOut()}function H(e){i.rotate("+")}function J(e){i.rotate("-")}const L=e=>{i.onWheel(e)},N=e=>{var s;const t=(s=a.value)==null?void 0:s.src;M.downloadExe(t)},V=()=>{g.value=null,a.value=null,h.value="",d.value=!0,r.value=-1,R.value=-1,o.value=[],i.destroyed(),clearInterval(x)},$=()=>{i.removeStyleProperty()},D=e=>{i.setImage(a.value);const t=new Image;t.src=a.value&&a.value.src;const{width:s,height:c}=l.toRefs(C);if(s.value=t.width,c.value=t.height,a.value&&g.value){const n=g.value.getBoundingClientRect();M.getUserAgent()?(a.value.style.width=n.width+"px",a.value.style.height=n.height/2+"px"):t.width<n.width&&t.height<n.height?(a.value.style.width=t.width+"px",a.value.style.height=t.height+"px"):(a.value.style.width=n.width/1.3+"px",a.value.style.height=n.height/1.3+"px")}h.value="",d.value=!1},X=e=>{d.value=!1,h.value="加载图片失败，请仔细检测图片地址！"},F=()=>new Promise((e,t)=>{if(Array.isArray(f)&&f.length>0){const s=f.filter(n=>n==null||n===""),c=f.filter(n=>n).map((n,te)=>({index:te,url:n}));s.length&&console.warn(`images-viewer-vue3:The image parameter 'images' contains illegal characters:[${JSON.stringify(s)}]`),e({data:c})}else e({data:[]})}),S=()=>{o.value.length>1?m.value=!0:m.value=!1;const e=v.value+p.value;O.value=o.value[e]!==void 0?e:o.value.length,b.value=o.value.slice(v.value,O.value)},G=e=>{if(!(!u.value||!y.value)&&(v.value=Math.floor(u.value.scrollTop/w),P.value!==v.value))if(P.value=v.value,S(),o.value.length-v.value>=p.value)W=v.value*w,y.value.style.transform=`translateY(${W}px)`;else return},K=async e=>{await F().then(t=>{o.value=t.data,r.value=o.value.findIndex(s=>s.url===k)}).catch(t=>{m.value=!1,console.log("images-viewer-vue3:",JSON.stringify(t))}),p.value=Math.floor(e.height/w)+4,S()},z=e=>{if(!u.value)return;const t=w+2,s=Math.floor(u.value.clientHeight/t),c=e*t,n=c+t;(c<u.value.scrollTop||n>u.value.scrollTop+u.value.clientHeight)&&(u.value.scrollTop=e*t),v.value=Math.max(0,e-Math.floor(s)),S()},E=()=>{if(r.value===o.value.length-1){T();return}const e=Math.min(r.value+1,o.value.length-1);r.value=e,z(e),U()},Q=()=>{if(r.value===0)return;const e=Math.max(r.value-1,0);r.value=e,z(e),U()},U=()=>{if(!a.value)return;const e=o.value[r.value];e&&(A.value=a.value.src=e.url,q({image:a.value.src,index:r.value}))},Z=()=>{I.value=!0,x=setInterval(()=>{E()},ae)},T=()=>{I.value=!1,clearInterval(x)},ee=()=>{I.value&&T()};return l.nextTick(()=>{var e;if(u.value){const t=(e=u.value)==null?void 0:e.getBoundingClientRect();K(t)}}),{onMouseEnterImage:ee,updateImageSrc:A,playState:I,stopPlay:T,autoPlay:Z,isMultipleImage:m,onWheelListener:L,imageInfo:C,originImages:o,nextImage:E,previousImage:Q,onRectScroll:G,renderData:b,vnodeUlRef:y,vnodeScrollRef:u,destroyedExe:V,resetStyle:$,downloads:N,loadImageErrorText:h,loading:d,errorImage:X,loadImage:D,imageRef:a,imageVieverWidgetRef:g,inevrtY:Y,inevrtX:_,zoomIn:j,zoomOut:B,clockwise:H,counterclockwise:J,currentIndex:r,activeIndex:R}};exports.useToolbar=ne;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("../utils/ViewerCore.js"),C=require("../utils/index.js"),o=require("vue"),M=(s,d)=>{const c=o.ref(null),e=o.ref(null),r=o.ref(""),u=o.ref(!0),n=R.default.getInStance(),l=o.ref(-1),m=o.ref(-1),i=o.ref(""),f=o.reactive({width:0,height:0}),I=o.ref(s.length>0);function h(t){n.horizontalInvert()}function y(t){n.verticalInvert()}function x(t){n.zoomIn()}function w(t){n.zoomOut()}function p(t){n.rotate("+")}function S(t){n.rotate("-")}const z=t=>{n.onWheel(t)},T=t=>{var v;const a=(v=e.value)==null?void 0:v.src;C.downloadExe(a)},b=()=>{c.value=null,e.value=null,r.value="",u.value=!0,l.value=-1,m.value=-1,n.destroyed()},W=()=>{n.removeStyleProperty()},k=t=>{n.setImage(e.value);const a=new Image;a.src=e.value&&e.value.src;const{width:v,height:P}=o.toRefs(f);v.value=a.width,P.value=a.height,e.value&&c.value&&(e.value.style.transform="",e.value.style.removeProperty("position"),e.value.style.maxHeight="100%",e.value.style.maxWidth="100%"),r.value="",u.value=!1},q=t=>{u.value=!1,r.value="加载图片失败，请仔细检测图片访问路径！"},E=()=>{l.value!==s.length-1&&(l.value++,g())},O=()=>{l.value!==0&&(l.value--,g())},g=()=>{if(console.log(l.value,e.value),!e.value)return;const t=s[l.value];t&&(i.value=e.value.src=t,d({image:e.value.src,index:l.value}))};return o.nextTick(()=>{}),{updateImageSrc:i,isMultipleImage:I,onWheelListener:z,imageInfo:f,nextImage:E,previousImage:O,destroyedExe:b,resetStyle:W,downloads:T,loadImageErrorText:r,loading:u,errorImage:q,loadImage:k,imageRef:e,imageVieverWidgetRef:c,inevrtY:h,inevrtX:y,zoomIn:x,zoomOut:w,clockwise:p,counterclockwise:S,currentIndex:l}};exports.useToolbar=M;

dist/lib/index.d.ts

@@ -5,3 +5,3 @@ import { App } from 'vue';
 export default function install(app: App, config?: ImageViewerInstallConfig): void;
-declare function imageViewerApi(opt: ImageViewerOptions): void;
+declare function imageViewerApi(opt: ImageViewerOptions): Promise<void>;
 declare function onClose(): void;
@@ -8,0 +8,0 @@ declare function onUpdate(fn?: Function): void;

dist/lib/index.js

@@ -1,1 +0,1 @@
-(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("@charset \"UTF-8\";.hotkey-tip__wrap[data-v-f9972721]{padding:.5rem;border-radius:.66rem;background:#000c;bottom:10px;right:10px;position:fixed;opacity:0;transition:opacity .3s ease-in-out}.hotkey-tip__wrap.is-active_key[data-v-f9972721]{opacity:.8}.hotkey-tip__wrap .item-key[data-v-f9972721]{border-radius:.2rem;display:inline-block;text-transform:capitalize;margin-inline-start:.2em;margin-inline-end:.2em;margin-block-start:.2em;margin-block-end:.2em;color:#eee}.hotkey-tip__wrap[data-v-17985293]{padding:.5rem;border-radius:.66rem;background:#000c;position:fixed;left:50%;top:10px;opacity:0;transition:opacity .3s ease-in-out}.hotkey-tip__wrap.is-active_key[data-v-17985293]{opacity:.8}.hotkey-tip__wrap .item-key[data-v-17985293]{border-radius:.2rem;display:inline-block;text-transform:capitalize;margin-inline-start:.2em;margin-inline-end:.2em;margin-block-start:.2em;margin-block-end:.2em;color:tomato}.loading-image__wrap .item1[data-v-7c175f68]{animation-delay:var(--i);background:#10ac84;box-shadow:0 0 15px #10ac84}.loading-image__wrap .item2[data-v-7c175f68]{animation-delay:var(--i);background:#14ffec;box-shadow:0 0 15px #14ffec}.loading-image__wrap .item3[data-v-7c175f68]{animation-delay:var(--i);background:#c62a88;box-shadow:0 0 15px #c62a88}.loading-image__wrap span[data-v-7c175f68]{display:inline-block;width:calc(var(--load-size, 40) * 1px);aspect-ratio:1;border-radius:50%;margin:0 6px;animation:loading-7c175f68 1.4s cubic-bezier(0,.55,.45,1) infinite;-webkit-animation:loading-7c175f68 1.4s cubic-bezier(0,.55,.45,1) infinite}@-webkit-keyframes loading-7c175f68{0%,80%,to{opacity:0;-webkit-transform:scale(0);transform:scale(0)}40%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes loading-7c175f68{0%,80%,to{opacity:0;-webkit-transform:scale(0);transform:scale(0)}40%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.image-viewer-vue3__root[data-v-4ebfff3e]{position:fixed;top:0;right:0;bottom:0;left:0}.nav-scroll-style__wrap[data-v-4ebfff3e] ::-webkit-scrollbar{width:6px;height:6px;background:#f7f7f7}.nav-scroll-style__wrap[data-v-4ebfff3e] ::-webkit-scrollbar-track{border-radius:10px}.nav-scroll-style__wrap[data-v-4ebfff3e] ::-webkit-scrollbar-thumb{background-color:#4593fb5e}.images-viewer-vue3__wrapper[data-v-4ebfff3e]{--active-icon-color: #3A8DF5;--active-text-color: var(--text-color, #eee);--nav-width: 90px;background:#0009;position:fixed;left:0;top:0;bottom:0;width:100%;height:100%;max-height:100%;-ms-touch-action:none;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:9999;overflow:hidden;opacity:0;transition:opacity 1s ease}.images-viewer-vue3__wrapper ul[data-v-4ebfff3e]{padding:0;list-style:none;margin:0}.images-viewer-vue3__wrapper .svg-icon__action[data-v-4ebfff3e]{width:25px;height:25px}.images-viewer-vue3__wrapper .svg-icon__action path[data-v-4ebfff3e]{fill:#eee}.images-viewer-vue3__wrapper.is-active[data-v-4ebfff3e]{opacity:1}.images-viewer-vue3__wrapper .images-viewer-vue3__content[data-v-4ebfff3e]{position:absolute;top:0;bottom:0;left:0;right:0;display:flex}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper[data-v-4ebfff3e]{width:0px;overflow:hidden;transition:width .3s ease-out}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper.nav-active[data-v-4ebfff3e]{width:calc(var(--nav-width) - 5px)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .nav-vnode-scroll__wrapper[data-v-4ebfff3e]{width:100%;height:100%;overflow-y:auto;background-color:#0009}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group[data-v-4ebfff3e]{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item[data-v-4ebfff3e]{width:80%;opacity:.5;border:1px solid transparent;position:relative;border-radius:6px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item.list-group-item__active[data-v-4ebfff3e]{opacity:1;border:2px solid var(--active-icon-color)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item[data-v-4ebfff3e]:hover{opacity:1}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item span[data-v-4ebfff3e]{position:absolute;left:20px;top:20px;color:red}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item .list-group-item__image[data-v-4ebfff3e]{width:100%;object-fit:cover;height:100%;border-radius:6px;cursor:pointer}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper[data-v-4ebfff3e]{flex:1;width:100%;height:100%;transform-origin:top left;display:flex;flex-direction:column;justify-content:center;align-items:center;perspective:1000px;transform-style:preserve-3d;overflow:hidden;color:var(--active-text-color)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-collapse-nav__btn[data-v-4ebfff3e]{position:absolute;top:15px;left:8px;z-index:10;transition:transform .3s ease}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-collapse-nav__btn.rotate-right__btn[data-v-4ebfff3e]{transform:scale(-1)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info[data-v-4ebfff3e]{position:absolute;top:15px;left:40%;z-index:10;color:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__inner[data-v-4ebfff3e]{flex:0 1 auto;z-index:1;-webkit-user-select:none;user-select:none;width:auto;height:auto;object-fit:cover}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls[data-v-4ebfff3e]{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding:10px 0;z-index:10}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .tool-item-icon__btn[data-v-4ebfff3e]{margin:0 4px;width:25px;height:25px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .tool-item-icon__btn path[data-v-4ebfff3e]{fill:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .control-info[data-v-4ebfff3e]{display:flex;align-items:center;color:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .position[data-v-4ebfff3e]{position:absolute;left:30px}.images-viewer-vue3__wrapper .images-viewer-vue3__close[data-v-4ebfff3e]{position:absolute;top:15px;right:15px;background:#0000004d;border-radius:50%;width:44px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;z-index:10;cursor:pointer}.images-viewer-vue3__wrapper .icon-is-hover:hover path[data-v-4ebfff3e]{fill:var(--active-icon-color)!important}.images-viewer-vue3__wrapper .close-icon[data-v-4ebfff3e]{transition:fill .3s ease}.images-viewer-vue3__wrapper .viewer-previous-icon[data-v-4ebfff3e],.images-viewer-vue3__wrapper .viewer-next-icon[data-v-4ebfff3e]{position:fixed;background:#0000004d;border-radius:50%;width:44px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;z-index:10}.images-viewer-vue3__wrapper .viewer-previous-icon[data-v-4ebfff3e]{top:40%;left:0}.images-viewer-vue3__wrapper .viewer-next-icon[data-v-4ebfff3e]{top:40%;right:0}.cus-transition[data-v-4ebfff3e]{transform:scale(1);transition:transform .3s ease}.is-active-border-color[data-v-4ebfff3e]{border:1px solid var(--active-icon-color);opacity:1!important}\n@charset \"UTF-8\";.hotkey-tip__wrap[data-v-f9972721]{padding:.5rem;border-radius:.66rem;background:#000c;bottom:10px;right:10px;position:fixed;opacity:0;transition:opacity .3s ease-in-out}.hotkey-tip__wrap.is-active_key[data-v-f9972721]{opacity:.8}.hotkey-tip__wrap .item-key[data-v-f9972721]{border-radius:.2rem;display:inline-block;text-transform:capitalize;margin-inline-start:.2em;margin-inline-end:.2em;margin-block-start:.2em;margin-block-end:.2em;color:#eee}.hotkey-tip__wrap[data-v-17985293]{padding:.5rem;border-radius:.66rem;background:#000c;position:fixed;left:50%;top:10px;opacity:0;transition:opacity .3s ease-in-out}.hotkey-tip__wrap.is-active_key[data-v-17985293]{opacity:.8}.hotkey-tip__wrap .item-key[data-v-17985293]{border-radius:.2rem;display:inline-block;text-transform:capitalize;margin-inline-start:.2em;margin-inline-end:.2em;margin-block-start:.2em;margin-block-end:.2em;color:tomato}.loading-image__wrap .item1[data-v-7c175f68]{animation-delay:var(--i);background:#10ac84;box-shadow:0 0 15px #10ac84}.loading-image__wrap .item2[data-v-7c175f68]{animation-delay:var(--i);background:#14ffec;box-shadow:0 0 15px #14ffec}.loading-image__wrap .item3[data-v-7c175f68]{animation-delay:var(--i);background:#c62a88;box-shadow:0 0 15px #c62a88}.loading-image__wrap span[data-v-7c175f68]{display:inline-block;width:calc(var(--load-size, 40) * 1px);aspect-ratio:1;border-radius:50%;margin:0 6px;animation:loading-7c175f68 1.4s cubic-bezier(0,.55,.45,1) infinite;-webkit-animation:loading-7c175f68 1.4s cubic-bezier(0,.55,.45,1) infinite}@-webkit-keyframes loading-7c175f68{0%,80%,to{opacity:0;-webkit-transform:scale(0);transform:scale(0)}40%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes loading-7c175f68{0%,80%,to{opacity:0;-webkit-transform:scale(0);transform:scale(0)}40%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.image-viewer-vue3__root[data-v-4ebfff3e]{position:fixed;top:0;right:0;bottom:0;left:0}.nav-scroll-style__wrap[data-v-4ebfff3e] ::-webkit-scrollbar{width:6px;height:6px;background:#f7f7f7}.nav-scroll-style__wrap[data-v-4ebfff3e] ::-webkit-scrollbar-track{border-radius:10px}.nav-scroll-style__wrap[data-v-4ebfff3e] ::-webkit-scrollbar-thumb{background-color:#4593fb5e}.images-viewer-vue3__wrapper[data-v-4ebfff3e]{--active-icon-color: #3A8DF5;--active-text-color: var(--text-color, #eee);--nav-width: 90px;background:#0009;position:fixed;left:0;top:0;bottom:0;width:100%;height:100%;max-height:100%;-ms-touch-action:none;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:9999;overflow:hidden;opacity:0;transition:opacity 1s ease}.images-viewer-vue3__wrapper ul[data-v-4ebfff3e]{padding:0;list-style:none;margin:0}.images-viewer-vue3__wrapper .svg-icon__action[data-v-4ebfff3e]{width:25px;height:25px}.images-viewer-vue3__wrapper .svg-icon__action path[data-v-4ebfff3e]{fill:#eee}.images-viewer-vue3__wrapper.is-active[data-v-4ebfff3e]{opacity:1}.images-viewer-vue3__wrapper .images-viewer-vue3__content[data-v-4ebfff3e]{position:absolute;top:0;bottom:0;left:0;right:0;display:flex}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper[data-v-4ebfff3e]{width:0px;overflow:hidden;transition:width .3s ease-out}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper.nav-active[data-v-4ebfff3e]{width:calc(var(--nav-width) - 5px)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .nav-vnode-scroll__wrapper[data-v-4ebfff3e]{width:100%;height:100%;overflow-y:auto;background-color:#0009}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group[data-v-4ebfff3e]{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item[data-v-4ebfff3e]{width:80%;opacity:.5;border:1px solid transparent;position:relative;border-radius:6px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item.list-group-item__active[data-v-4ebfff3e]{opacity:1;border:2px solid var(--active-icon-color)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item[data-v-4ebfff3e]:hover{opacity:1}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item span[data-v-4ebfff3e]{position:absolute;left:20px;top:20px;color:red}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item .list-group-item__image[data-v-4ebfff3e]{width:100%;object-fit:cover;height:100%;border-radius:6px;cursor:pointer}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper[data-v-4ebfff3e]{flex:1;width:100%;height:100%;transform-origin:top left;display:flex;flex-direction:column;justify-content:center;align-items:center;perspective:1000px;transform-style:preserve-3d;overflow:hidden;color:var(--active-text-color)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-collapse-nav__btn[data-v-4ebfff3e]{position:absolute;top:15px;left:8px;z-index:10;transition:transform .3s ease}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-collapse-nav__btn.rotate-right__btn[data-v-4ebfff3e]{transform:scale(-1)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info[data-v-4ebfff3e]{position:absolute;top:15px;left:40%;z-index:10;color:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__inner[data-v-4ebfff3e]{flex:0 1 auto;z-index:1;-webkit-user-select:none;user-select:none;width:auto;height:auto;object-fit:cover}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls[data-v-4ebfff3e]{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding:10px 0;z-index:10}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .tool-item-icon__btn[data-v-4ebfff3e]{margin:0 4px;width:25px;height:25px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .tool-item-icon__btn path[data-v-4ebfff3e]{fill:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .control-info[data-v-4ebfff3e]{display:flex;align-items:center;color:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .position[data-v-4ebfff3e]{position:absolute;left:30px}.images-viewer-vue3__wrapper .images-viewer-vue3__close[data-v-4ebfff3e]{position:absolute;top:15px;right:15px;background:#0000004d;border-radius:50%;width:44px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;z-index:10;cursor:pointer}.images-viewer-vue3__wrapper .icon-is-hover:hover path[data-v-4ebfff3e]{fill:var(--active-icon-color)!important}.images-viewer-vue3__wrapper .close-icon[data-v-4ebfff3e]{transition:fill .3s ease}.images-viewer-vue3__wrapper .viewer-previous-icon[data-v-4ebfff3e],.images-viewer-vue3__wrapper .viewer-next-icon[data-v-4ebfff3e]{position:fixed;background:#0000004d;border-radius:50%;width:44px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;z-index:10}.images-viewer-vue3__wrapper .viewer-previous-icon[data-v-4ebfff3e]{top:40%;left:0}.images-viewer-vue3__wrapper .viewer-next-icon[data-v-4ebfff3e]{top:40%;right:0}.cus-transition[data-v-4ebfff3e]{transform:scale(1);transition:transform .3s ease}.is-active-border-color[data-v-4ebfff3e]{border:1px solid var(--active-icon-color);opacity:1!important}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),a=require("./components/viewer.vue.js"),g=require("./components/index.vue.js"),u=require("./directive/v-image-viewer.js"),v=require("./utils/ViewerCore.js"),f=require("./utils/index.js");let d;const n=v.default.getInStance();var r=(e,i)=>{};function y(e,i){i&&n.setConfigOptions(i),console.log(`%cimages-viewer-vue3_V${f.versions}`,"color: #eee;background:#646cff;padding:2px 5px;border-radius:4px;"),e.directive("image-viewer",u.default),e.component("ImagesViewerVue3",a.default),e.config.globalProperties.$imageViewerApi=l}function l(e){const i=n.getConfigOptions();var o=null;o?o&&document.body.removeChild(o):(d=t.createVNode(g.default,{visible:!0,current:e.current,images:e.images||[],zIndex:i.zIndex,image:e.imageDom,from:e.from||"api",language:i.language||"zh",handleChange:({image:m,index:s})=>{r&&r(m,s)},handleClose:()=>{c()}}),o=document.createElement("div"),o.style.zIndex=i.zIndex+"",o.classList.add("image-viewer-vue3__root"),t.render(d,o),document.body.style.overflow="hidden",document.body.style.margin="0px",document.body.style.padding="0px",document.body.appendChild(o))}function c(){const e=document.querySelector(".image-viewer-vue3__root");e&&(document.body.style.removeProperty("overflow"),document.body.style.removeProperty("margin"),document.body.style.removeProperty("padding"),document.body.removeChild(e)),n.destroyed()}function w(e){e&&(r=e)}const p=a.default;exports.VImageViewer=u.default;exports.ImageViewerVue3=p;exports.default=y;exports.imageViewerApi=l;exports.onClose=c;exports.onUpdate=w;
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("@charset \"UTF-8\";.hotkey-tip__wrap[data-v-f9972721]{padding:.5rem;border-radius:.66rem;background:#000c;bottom:10px;right:10px;position:fixed;opacity:0;transition:opacity .3s ease-in-out}.hotkey-tip__wrap.is-active_key[data-v-f9972721]{opacity:.8}.hotkey-tip__wrap .item-key[data-v-f9972721]{border-radius:.2rem;display:inline-block;text-transform:capitalize;margin-inline-start:.2em;margin-inline-end:.2em;margin-block-start:.2em;margin-block-end:.2em;color:#eee}.hotkey-tip__wrap[data-v-75db11c1]{padding:.5rem;border-radius:.66rem;background:#000c;position:fixed;opacity:0;transition:opacity .3s ease-in-out}.hotkey-tip__wrap.is-pc[data-v-75db11c1]{left:50%;top:10px}.hotkey-tip__wrap.is-mobile[data-v-75db11c1]{bottom:0;left:30%}.hotkey-tip__wrap.is-active_key[data-v-75db11c1]{opacity:.8}.hotkey-tip__wrap .item-key[data-v-75db11c1]{border-radius:.2rem;display:inline-block;text-transform:capitalize;margin-inline-start:.2em;margin-inline-end:.2em;margin-block-start:.2em;margin-block-end:.2em;color:#fff}.mobile-vierwer__wrapper[data-v-8ebb7a18]{margin:auto 0}.mobile-vierwer__wrapper.cus-img-preview[data-v-8ebb7a18]{width:100%;position:relative;overflow:hidden}.mobile-vierwer__wrapper.cus-img-preview ul[data-v-8ebb7a18]{display:flex;flex-wrap:nowrap;align-items:center}.mobile-vierwer__wrapper.cus-img-preview ul li .viewer-image[data-v-8ebb7a18]{width:100%;height:100%;object-fit:cover;max-width:100%;max-height:100%}.loading-image__wrap .item1[data-v-7c175f68]{animation-delay:var(--i);background:#10ac84;box-shadow:0 0 15px #10ac84}.loading-image__wrap .item2[data-v-7c175f68]{animation-delay:var(--i);background:#14ffec;box-shadow:0 0 15px #14ffec}.loading-image__wrap .item3[data-v-7c175f68]{animation-delay:var(--i);background:#c62a88;box-shadow:0 0 15px #c62a88}.loading-image__wrap span[data-v-7c175f68]{display:inline-block;width:calc(var(--load-size, 40) * 1px);aspect-ratio:1;border-radius:50%;margin:0 6px;animation:loading-7c175f68 1.4s cubic-bezier(0,.55,.45,1) infinite;-webkit-animation:loading-7c175f68 1.4s cubic-bezier(0,.55,.45,1) infinite}@-webkit-keyframes loading-7c175f68{0%,80%,to{opacity:0;-webkit-transform:scale(0);transform:scale(0)}40%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes loading-7c175f68{0%,80%,to{opacity:0;-webkit-transform:scale(0);transform:scale(0)}40%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.scroll-item-nav__wrapper[data-v-e7a8318a]{background-color:#0009;width:100%;overflow:hidden}.scroll-item-nav__wrapper .nav-header__wrap[data-v-e7a8318a]{height:50px;overflow:hidden}.scroll-item-nav__wrapper .nav-header__wrap .image-index[data-v-e7a8318a]{width:100%;outline:none;border:none;text-align:center}.scroll-item-nav__wrapper .nav-header__wrap .query-btn[data-v-e7a8318a]{width:100%;background:#3a8df5;color:#eee;border:none;border-radius:4px}.scroll-item-nav__wrapper .nav-scroll__wrap[data-v-e7a8318a]{height:calc(var(--sider-height, 600) * 1px);background-color:#6b72800d;padding:.5rem .3rem;overflow-y:auto}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item[data-v-e7a8318a]{border:1px solid transparent;margin-bottom:.5rem;border-radius:4px;position:relative;opacity:.5}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item.active-item[data-v-e7a8318a]{opacity:1;border:1px solid var(--active-icon-color)}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item .index[data-v-e7a8318a]{position:absolute;top:10px;left:20px;color:red}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item .list-group-image[data-v-e7a8318a]{width:100%;height:100%;object-fit:cover;border-radius:4px}.image-viewer-vue3__root[data-v-6c102bb4]{position:fixed;top:0;right:0;bottom:0;left:0}.nav-scroll-style__wrap[data-v-6c102bb4] ::-webkit-scrollbar{width:6px;height:6px;background:#f7f7f7}.nav-scroll-style__wrap[data-v-6c102bb4] ::-webkit-scrollbar-track{border-radius:10px}.nav-scroll-style__wrap[data-v-6c102bb4] ::-webkit-scrollbar-thumb{background-color:#4593fb5e}.images-viewer-vue3__wrapper[data-v-6c102bb4]{--active-icon-color: #3A8DF5;--active-text-color: var(--text-color, #eee);--nav-width: 90px;background:#0009;position:fixed;left:0;top:0;bottom:0;width:100%;height:100%;max-height:100%;-ms-touch-action:none;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:9999;overflow:hidden;opacity:0;transition:opacity 1s ease}.images-viewer-vue3__wrapper ul[data-v-6c102bb4]{padding:0;list-style:none;margin:0}.images-viewer-vue3__wrapper .svg-icon__action[data-v-6c102bb4]{width:25px;height:25px}.images-viewer-vue3__wrapper .svg-icon__action path[data-v-6c102bb4]{fill:#eee}.images-viewer-vue3__wrapper.is-active[data-v-6c102bb4]{opacity:1}.images-viewer-vue3__wrapper .is-hidden[data-v-6c102bb4]{display:none!important}.images-viewer-vue3__wrapper .is-show[data-v-6c102bb4]{display:block}.images-viewer-vue3__wrapper .cursor[data-v-6c102bb4]{cursor:pointer}.images-viewer-vue3__wrapper .images-viewer-vue3__mobile[data-v-6c102bb4]{max-width:100%;max-height:100%;position:relative;display:grid;place-items:center;height:100vh}.images-viewer-vue3__wrapper .images-viewer-vue3__mobile .cus-head-info[data-v-6c102bb4]{position:absolute;top:15px;left:40%;z-index:10;color:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content[data-v-6c102bb4]{position:absolute;top:0;bottom:0;left:0;right:0;display:grid;grid-template-columns:90px 1fr}.images-viewer-vue3__wrapper .images-viewer-vue3__content.active-grid[data-v-6c102bb4]{grid-template-columns:0px 1fr}.images-viewer-vue3__wrapper .images-viewer-vue3__content.close-grid[data-v-6c102bb4]{grid-template-columns:1fr}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper[data-v-6c102bb4]{width:0px;overflow:hidden;transition:width .3s ease-out;opacity:0}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper.nav-active[data-v-6c102bb4]{width:var(--nav-width);opacity:1}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .nav-vnode-scroll__wrapper[data-v-6c102bb4]{width:100%;height:100%;overflow-y:auto;background-color:#0009}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group[data-v-6c102bb4]{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item[data-v-6c102bb4]{width:80%;opacity:.5;border:1px solid transparent;position:relative;border-radius:6px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item.list-group-item__active[data-v-6c102bb4]{opacity:1;border:2px solid var(--active-icon-color)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item[data-v-6c102bb4]:hover{opacity:1}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item span[data-v-6c102bb4]{position:absolute;left:20px;top:20px;color:red}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item .list-group-item__image[data-v-6c102bb4]{width:100%;object-fit:cover;height:100%;border-radius:6px;cursor:pointer}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper[data-v-6c102bb4]{flex:1;width:100%;height:100%;transform-origin:top left;display:flex;flex-direction:column;justify-content:center;align-items:center;perspective:1000px;transform-style:preserve-3d;overflow:hidden;color:var(--active-text-color)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-collapse-nav__btn[data-v-6c102bb4]{position:absolute;top:15px;left:8px;z-index:10;transition:transform .3s ease}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-collapse-nav__btn.rotate-right__btn[data-v-6c102bb4]{transform:scale(-1)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info[data-v-6c102bb4]{position:absolute;top:15px;left:40%;z-index:10;color:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__inner[data-v-6c102bb4]{flex:0 1 auto;z-index:1;-webkit-user-select:none;user-select:none;width:auto;height:auto;object-fit:cover}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls[data-v-6c102bb4]{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding:10px 0;z-index:10}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .control-svg__btns[data-v-6c102bb4]{background-color:#00000080;border-radius:8px;padding:8px 10px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .tool-item-icon__btn[data-v-6c102bb4]{margin:0 4px;width:25px;height:25px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .tool-item-icon__btn path[data-v-6c102bb4]{fill:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .control-info[data-v-6c102bb4]{display:flex;align-items:center;color:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .position[data-v-6c102bb4]{position:absolute;left:30px}.images-viewer-vue3__wrapper .images-viewer-vue3__close[data-v-6c102bb4]{position:absolute;top:15px;right:15px;background:#0000004d;border-radius:50%;width:30px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;z-index:10;cursor:pointer}.images-viewer-vue3__wrapper .icon-is-hover:hover path[data-v-6c102bb4]{fill:var(--active-icon-color)!important}.images-viewer-vue3__wrapper .close-icon[data-v-6c102bb4]{transition:fill .3s ease}.images-viewer-vue3__wrapper .viewer-previous-icon[data-v-6c102bb4],.images-viewer-vue3__wrapper .viewer-next-icon[data-v-6c102bb4]{position:fixed;background:#0000004d;border-radius:50%;width:44px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;z-index:10}.images-viewer-vue3__wrapper .viewer-previous-icon[data-v-6c102bb4]{top:40%;left:0}.images-viewer-vue3__wrapper .viewer-next-icon[data-v-6c102bb4]{top:40%;right:0}.cus-transition[data-v-6c102bb4]{transform:scale(1);transition:transform .3s ease}.is-active-border-color[data-v-6c102bb4]{border:1px solid var(--active-icon-color);opacity:1!important}\n@charset \"UTF-8\";.hotkey-tip__wrap[data-v-f9972721]{padding:.5rem;border-radius:.66rem;background:#000c;bottom:10px;right:10px;position:fixed;opacity:0;transition:opacity .3s ease-in-out}.hotkey-tip__wrap.is-active_key[data-v-f9972721]{opacity:.8}.hotkey-tip__wrap .item-key[data-v-f9972721]{border-radius:.2rem;display:inline-block;text-transform:capitalize;margin-inline-start:.2em;margin-inline-end:.2em;margin-block-start:.2em;margin-block-end:.2em;color:#eee}.hotkey-tip__wrap[data-v-75db11c1]{padding:.5rem;border-radius:.66rem;background:#000c;position:fixed;opacity:0;transition:opacity .3s ease-in-out}.hotkey-tip__wrap.is-pc[data-v-75db11c1]{left:50%;top:10px}.hotkey-tip__wrap.is-mobile[data-v-75db11c1]{bottom:0;left:30%}.hotkey-tip__wrap.is-active_key[data-v-75db11c1]{opacity:.8}.hotkey-tip__wrap .item-key[data-v-75db11c1]{border-radius:.2rem;display:inline-block;text-transform:capitalize;margin-inline-start:.2em;margin-inline-end:.2em;margin-block-start:.2em;margin-block-end:.2em;color:#fff}.mobile-vierwer__wrapper[data-v-8ebb7a18]{margin:auto 0}.mobile-vierwer__wrapper.cus-img-preview[data-v-8ebb7a18]{width:100%;position:relative;overflow:hidden}.mobile-vierwer__wrapper.cus-img-preview ul[data-v-8ebb7a18]{display:flex;flex-wrap:nowrap;align-items:center}.mobile-vierwer__wrapper.cus-img-preview ul li .viewer-image[data-v-8ebb7a18]{width:100%;height:100%;object-fit:cover;max-width:100%;max-height:100%}.loading-image__wrap .item1[data-v-7c175f68]{animation-delay:var(--i);background:#10ac84;box-shadow:0 0 15px #10ac84}.loading-image__wrap .item2[data-v-7c175f68]{animation-delay:var(--i);background:#14ffec;box-shadow:0 0 15px #14ffec}.loading-image__wrap .item3[data-v-7c175f68]{animation-delay:var(--i);background:#c62a88;box-shadow:0 0 15px #c62a88}.loading-image__wrap span[data-v-7c175f68]{display:inline-block;width:calc(var(--load-size, 40) * 1px);aspect-ratio:1;border-radius:50%;margin:0 6px;animation:loading-7c175f68 1.4s cubic-bezier(0,.55,.45,1) infinite;-webkit-animation:loading-7c175f68 1.4s cubic-bezier(0,.55,.45,1) infinite}@-webkit-keyframes loading-7c175f68{0%,80%,to{opacity:0;-webkit-transform:scale(0);transform:scale(0)}40%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes loading-7c175f68{0%,80%,to{opacity:0;-webkit-transform:scale(0);transform:scale(0)}40%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.scroll-item-nav__wrapper[data-v-e7a8318a]{background-color:#0009;width:100%;overflow:hidden}.scroll-item-nav__wrapper .nav-header__wrap[data-v-e7a8318a]{height:50px;overflow:hidden}.scroll-item-nav__wrapper .nav-header__wrap .image-index[data-v-e7a8318a]{width:100%;outline:none;border:none;text-align:center}.scroll-item-nav__wrapper .nav-header__wrap .query-btn[data-v-e7a8318a]{width:100%;background:#3a8df5;color:#eee;border:none;border-radius:4px}.scroll-item-nav__wrapper .nav-scroll__wrap[data-v-e7a8318a]{height:calc(var(--sider-height, 600) * 1px);background-color:#6b72800d;padding:.5rem .3rem;overflow-y:auto}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item[data-v-e7a8318a]{border:1px solid transparent;margin-bottom:.5rem;border-radius:4px;position:relative;opacity:.5}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item.active-item[data-v-e7a8318a]{opacity:1;border:1px solid var(--active-icon-color)}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item .index[data-v-e7a8318a]{position:absolute;top:10px;left:20px;color:red}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item .list-group-image[data-v-e7a8318a]{width:100%;height:100%;object-fit:cover;border-radius:4px}.image-viewer-vue3__root[data-v-6c102bb4]{position:fixed;top:0;right:0;bottom:0;left:0}.nav-scroll-style__wrap[data-v-6c102bb4] ::-webkit-scrollbar{width:6px;height:6px;background:#f7f7f7}.nav-scroll-style__wrap[data-v-6c102bb4] ::-webkit-scrollbar-track{border-radius:10px}.nav-scroll-style__wrap[data-v-6c102bb4] ::-webkit-scrollbar-thumb{background-color:#4593fb5e}.images-viewer-vue3__wrapper[data-v-6c102bb4]{--active-icon-color: #3A8DF5;--active-text-color: var(--text-color, #eee);--nav-width: 90px;background:#0009;position:fixed;left:0;top:0;bottom:0;width:100%;height:100%;max-height:100%;-ms-touch-action:none;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:9999;overflow:hidden;opacity:0;transition:opacity 1s ease}.images-viewer-vue3__wrapper ul[data-v-6c102bb4]{padding:0;list-style:none;margin:0}.images-viewer-vue3__wrapper .svg-icon__action[data-v-6c102bb4]{width:25px;height:25px}.images-viewer-vue3__wrapper .svg-icon__action path[data-v-6c102bb4]{fill:#eee}.images-viewer-vue3__wrapper.is-active[data-v-6c102bb4]{opacity:1}.images-viewer-vue3__wrapper .is-hidden[data-v-6c102bb4]{display:none!important}.images-viewer-vue3__wrapper .is-show[data-v-6c102bb4]{display:block}.images-viewer-vue3__wrapper .cursor[data-v-6c102bb4]{cursor:pointer}.images-viewer-vue3__wrapper .images-viewer-vue3__mobile[data-v-6c102bb4]{max-width:100%;max-height:100%;position:relative;display:grid;place-items:center;height:100vh}.images-viewer-vue3__wrapper .images-viewer-vue3__mobile .cus-head-info[data-v-6c102bb4]{position:absolute;top:15px;left:40%;z-index:10;color:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content[data-v-6c102bb4]{position:absolute;top:0;bottom:0;left:0;right:0;display:grid;grid-template-columns:90px 1fr}.images-viewer-vue3__wrapper .images-viewer-vue3__content.active-grid[data-v-6c102bb4]{grid-template-columns:0px 1fr}.images-viewer-vue3__wrapper .images-viewer-vue3__content.close-grid[data-v-6c102bb4]{grid-template-columns:1fr}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper[data-v-6c102bb4]{width:0px;overflow:hidden;transition:width .3s ease-out;opacity:0}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper.nav-active[data-v-6c102bb4]{width:var(--nav-width);opacity:1}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .nav-vnode-scroll__wrapper[data-v-6c102bb4]{width:100%;height:100%;overflow-y:auto;background-color:#0009}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group[data-v-6c102bb4]{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item[data-v-6c102bb4]{width:80%;opacity:.5;border:1px solid transparent;position:relative;border-radius:6px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item.list-group-item__active[data-v-6c102bb4]{opacity:1;border:2px solid var(--active-icon-color)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item[data-v-6c102bb4]:hover{opacity:1}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item span[data-v-6c102bb4]{position:absolute;left:20px;top:20px;color:red}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item .list-group-item__image[data-v-6c102bb4]{width:100%;object-fit:cover;height:100%;border-radius:6px;cursor:pointer}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper[data-v-6c102bb4]{flex:1;width:100%;height:100%;transform-origin:top left;display:flex;flex-direction:column;justify-content:center;align-items:center;perspective:1000px;transform-style:preserve-3d;overflow:hidden;color:var(--active-text-color)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-collapse-nav__btn[data-v-6c102bb4]{position:absolute;top:15px;left:8px;z-index:10;transition:transform .3s ease}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-collapse-nav__btn.rotate-right__btn[data-v-6c102bb4]{transform:scale(-1)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info[data-v-6c102bb4]{position:absolute;top:15px;left:40%;z-index:10;color:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__inner[data-v-6c102bb4]{flex:0 1 auto;z-index:1;-webkit-user-select:none;user-select:none;width:auto;height:auto;object-fit:cover}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls[data-v-6c102bb4]{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding:10px 0;z-index:10}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .control-svg__btns[data-v-6c102bb4]{background-color:#00000080;border-radius:8px;padding:8px 10px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .tool-item-icon__btn[data-v-6c102bb4]{margin:0 4px;width:25px;height:25px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .tool-item-icon__btn path[data-v-6c102bb4]{fill:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .control-info[data-v-6c102bb4]{display:flex;align-items:center;color:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .position[data-v-6c102bb4]{position:absolute;left:30px}.images-viewer-vue3__wrapper .images-viewer-vue3__close[data-v-6c102bb4]{position:absolute;top:15px;right:15px;background:#0000004d;border-radius:50%;width:30px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;z-index:10;cursor:pointer}.images-viewer-vue3__wrapper .icon-is-hover:hover path[data-v-6c102bb4]{fill:var(--active-icon-color)!important}.images-viewer-vue3__wrapper .close-icon[data-v-6c102bb4]{transition:fill .3s ease}.images-viewer-vue3__wrapper .viewer-previous-icon[data-v-6c102bb4],.images-viewer-vue3__wrapper .viewer-next-icon[data-v-6c102bb4]{position:fixed;background:#0000004d;border-radius:50%;width:44px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;z-index:10}.images-viewer-vue3__wrapper .viewer-previous-icon[data-v-6c102bb4]{top:40%;left:0}.images-viewer-vue3__wrapper .viewer-next-icon[data-v-6c102bb4]{top:40%;right:0}.cus-transition[data-v-6c102bb4]{transform:scale(1);transition:transform .3s ease}.is-active-border-color[data-v-6c102bb4]{border:1px solid var(--active-icon-color);opacity:1!important}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("vue"),u=require("./components/viewer.vue.js"),y=require("./components/index.vue.js"),c=require("./directive/v-image-viewer.js"),f=require("./directive/v-lazy-image.js"),w=require("./utils/ViewerCore.js"),s=require("./utils/index.js");let l;const a=w.default.getInStance();var n=(e,i)=>{};function p(e,i){i&&a.setConfigOptions(i),console.log(`%cimages-viewer-vue3_V${s.versions}`,"color: #eee;background:#646cff;padding:2px 5px;border-radius:4px;"),e.directive("image-viewer",c.default),e.directive("lazy-image",f.default),e.component("ImagesViewerVue3",u.default),e.config.globalProperties.$imageViewerApi=m}async function m(e){var i=[];await s.asyncVerifyIllegalImage(e.images||[]).then(r=>{i=r.data}).catch(r=>{console.error("images-viewer-vue3:",JSON.stringify(r))});const t=a.getConfigOptions();var o=null;o?o&&document.body.removeChild(o):(l=d.createVNode(y.default,{visible:!0,current:e.current,images:i,zIndex:t.zIndex,image:e.imageDom,from:e.from||"api",language:t.language||"zh",playSpeed:t.playSpeed,handleChange:({image:r,index:v})=>{n&&n(r,v)},handleClose:()=>{g()}}),o=document.createElement("div"),o.style.zIndex=t.zIndex+"",o.classList.add("image-viewer-vue3__root"),d.render(l,o),document.body.style.overflow="hidden",document.body.style.margin="0px",document.body.style.padding="0px",document.body.appendChild(o))}function g(){const e=document.querySelector(".image-viewer-vue3__root");e&&(document.body.style.removeProperty("overflow"),document.body.style.removeProperty("margin"),document.body.style.removeProperty("padding"),document.body.removeChild(e)),a.destroyed()}function V(e){e&&(n=e)}const b=u.default;exports.VImageViewer=c.default;exports.ImageViewerVue3=b;exports.default=p;exports.imageViewerApi=m;exports.onClose=g;exports.onUpdate=V;

dist/lib/langs/enCn.d.ts

@@ -13,4 +13,6 @@ declare const _default: {
         img: string;
+        previousText: string;
+        nextText: string;
     };
 };
 export default _default;

dist/lib/langs/enCn.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={image:{total:"Total",pictures:"Pictures",leaf:"leaf",page:"Page",current:"Current page",loadErrorText:"Failed to load the image, please check the image access path carefully!",ruleText:"Image size",px:"px",the:"The",img:"Image"}};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={image:{total:"Total",pictures:"Pictures",leaf:"leaf",page:"Page",current:"Current page",loadErrorText:"Failed to load the image, please check the image access path carefully!",ruleText:"Image size",px:"px",the:"The",img:"Image",previousText:"Previous",nextText:"Next"}};exports.default=e;

dist/lib/langs/index.d.ts

@@ -14,2 +14,4 @@ export declare const messages: {
             img: string;
+            previousText: string;
+            nextText: string;
         };
@@ -29,2 +31,4 @@ };
             img: string;
+            previousText: string;
+            nextText: string;
         };
@@ -31,0 +35,0 @@ };

dist/lib/langs/zhCn.d.ts

@@ -13,4 +13,6 @@ declare const _default: {
         img: string;
+        previousText: string;
+        nextText: string;
     };
 };
 export default _default;

dist/lib/langs/zhCn.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={image:{total:"共",pictures:"图片",leaf:"张",page:"页",current:"当前页",loadErrorText:"加载图片失败，请仔细检测图片访问路径！",ruleText:"图片尺寸",px:"像素",the:"第",img:"张图片"}};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={image:{total:"共",pictures:"图片",leaf:"张",page:"页",current:"当前页",loadErrorText:"加载图片失败，请仔细检测图片访问路径！",ruleText:"图片尺寸",px:"像素",the:"第",img:"张图片",previousText:"上一张",nextText:"下一张"}};exports.default=e;

dist/lib/types/image-viewer.d.ts

@@ -18,2 +18,3 @@ type fromType = 'api' | 'directive' | 'component';
     language: langType;
+    playSpeed: number;
 }
@@ -27,2 +28,3 @@ export interface ImageViewerInstallConfig {
     language?: langType;
+    playSpeed?: number;
 }
@@ -34,3 +36,3 @@ export type ImageObjectTypes = {
 export type AsyncSetImageReturnType = Promise<{
-    data: ImageObjectTypes[];
+    data: string[];
 } | {
@@ -37,0 +39,0 @@ data: [];

dist/lib/utils/index.d.ts

@@ -0,2 +1,10 @@
+import { AsyncSetImageReturnType } from '../types/image-viewer';
+export declare const versions = "1.0.16";
 /**
+ * Verify illegal image paths, such as null, undefined, ''
+ *
+ * @returns AsyncSetImageReturnType
+ */
+export declare const asyncVerifyIllegalImage: (images: string[]) => AsyncSetImageReturnType;
+/**
  * debounce
@@ -19,3 +27,2 @@ *
 export declare const getUserAgent: () => boolean;
-export declare const getDeviceType: () => "Android" | "iOS" | "Windows Phone" | "Other Mobile" | "Tablet" | "Desktop";
-export declare const versions = "1.0.15";
+export declare const isTrueArray: (value: any) => boolean;

dist/lib/utils/index.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=()=>{var e=new Date,n=e.getFullYear(),t=e.getMonth()+1,o=e.getDate(),r=e.getHours(),i=e.getMinutes(),s=e.getSeconds();return`${n}${t}${o}_${r}${i}${s}`},d=(e,n)=>{fetch(e).then(t=>t.blob()).then(t=>{var o=document.createElement("a");o.style.display="none",document.body.appendChild(o);var r=window.URL.createObjectURL(t);o.href=r,o.download=a(),o.click(),window.URL.revokeObjectURL(r),document.body.removeChild(o)})},c=()=>{const e=navigator.userAgent||navigator.vendor||window.opera,n=/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(e.toLowerCase());let t=!1;return n&&(t=!0),("ontouchstart"in window||navigator.maxTouchPoints>0)&&(t=!0),t},l="1.0.15";exports.downloadExe=d;exports.getTimeStamp=a;exports.getUserAgent=c;exports.versions=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c="1.0.16",d=e=>new Promise((a,t)=>{if(l(e)&&e.length>0){const[r,n]=e.reduce((o,i)=>(i?o[0].push(i):o[1].push(i),o),[[],[]]);n.length&&console.warn(`images-viewer-vue3:The image parameter 'images' contains illegal characters:[${JSON.stringify(n)}]`),a({data:r})}else a({data:e||[]})}),s=()=>{var e=new Date,a=e.getFullYear(),t=e.getMonth()+1,r=e.getDate(),n=e.getHours(),o=e.getMinutes(),i=e.getSeconds();return`${a}${t}${r}_${n}${o}${i}`},g=(e,a)=>{fetch(e).then(t=>t.blob()).then(t=>{var r=document.createElement("a");r.style.display="none",document.body.appendChild(r);var n=window.URL.createObjectURL(t);r.href=n,r.download=s(),r.click(),window.URL.revokeObjectURL(n),document.body.removeChild(r)})},u=()=>{const e=navigator.userAgent||navigator.vendor||window.opera,a=/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(e.toLowerCase());let t=!1;return a&&(t=!0),("ontouchstart"in window||navigator.maxTouchPoints>0)&&(t=!0),t},l=e=>Object.prototype.toString.call(e)==="[object Array]";exports.asyncVerifyIllegalImage=d;exports.downloadExe=g;exports.getTimeStamp=s;exports.getUserAgent=u;exports.isTrueArray=l;exports.versions=c;

dist/lib/utils/ViewerCore.d.ts

@@ -9,5 +9,7 @@ import { ImageViewerType } from '../types/image-viewer';
     private config;
+    private transforms;
     private constructor();
     static getInStance(): ImageViewerCore;
     private initialize;
+    private setImageTransform;
     onWheel(evt: WheelEvent): void;
@@ -14,0 +16,0 @@ setConfigOptions(opts: ImageViewerType): void;

dist/lib/utils/ViewerCore.js

@@ -1,1 +0,1 @@
-"use strict";var g=Object.defineProperty;var m=(c,e,t)=>e in c?g(c,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[e]=t;var a=(c,e,t)=>m(c,typeof e!="symbol"?e+"":e,t);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=class l{constructor(){a(this,"currentImage",null);a(this,"totalRotate",0);a(this,"isMouseDown",!1);a(this,"config",{scaleRatio:1,rotateRatio:90,isEnableDrag:!0,isEnableWheel:!0,zIndex:2e3,language:"zh"})}static getInStance(){return!this.viewer&&(this.viewer=new l),this.viewer.initialize(),this.viewer}initialize(){}onWheel(e){e.deltaY<0&&this.zoomIn(),e.deltaY>=0&&this.zoomOut()}setConfigOptions(e){this.config=Object.assign(this.config,e)}getConfigOptions(){return this.config}horizontalInvert(){this.setInvert("scaleY")}verticalInvert(){this.setInvert("scaleX")}setInvert(e="scaleX"){if(!e||!this.currentImage)return;let t=this.currentImage.style.transform;const s=new RegExp(`${e}\\(([^)]+)\\)`);if(s.test(t)){const o=t.match(s),i=(o&&parseInt(o[1]))===1?-1:1;t=t.replace(s,`${e}(${i})`)}else t+=` ${e}(-1)`;this.currentImage.style.transform=t}zoomIn(){this.setZoom("+")}zoomOut(){this.setZoom("-")}rotate(e="+"){if(!this.currentImage)return;let t=this.currentImage.style.transform;const s=new RegExp("rotate\\(([^)]+)\\)","i");s.test(t)?(e==="+"?this.totalRotate+=this.config.rotateRatio:this.totalRotate-=this.config.rotateRatio,t=t.replace(s,`rotate(${this.totalRotate}deg)`)):(e==="+"?this.totalRotate=this.config.rotateRatio:this.totalRotate=-this.config.rotateRatio,t+=` rotate(${this.totalRotate}deg)`),this.currentImage.style.transform=t}setZoom(e="+"){if(!this.currentImage)return;let t=this.currentImage.style.transform;const s=new RegExp("scale\\(([^)]+)\\)","i");s.test(t)?(e==="+"?this.config.scaleRatio+=.1:this.config.scaleRatio>=.3&&(this.config.scaleRatio-=.1),t=t.replace(s,`scale(${this.config.scaleRatio})`)):(e==="+"?this.config.scaleRatio+=.1:this.config.scaleRatio>=.3&&(this.config.scaleRatio-=.1),t+=` scale(${this.config.scaleRatio})`),this.currentImage.style.transform=t}setImage(e){this.currentImage=e,this.currentImage&&this.config.isEnableDrag&&(this.currentImage.onmousedown=this.onMouseMove.bind(this),this.currentImage.ontouchstart=this.onTouchstart.bind(this))}onMouseMove(e){if(!this.currentImage)return;const t=this;this.isMouseDown=!0,this.currentImage.style.position="absolute";const s=e.clientX-this.currentImage.offsetLeft,o=e.clientY-this.currentImage.offsetTop;return document.onmousemove=function(n){if(n=n||window.event,t.isMouseDown){let i=n.clientX-s,r=n.clientY-o;t.currentImage&&(t.currentImage.style.left=`${i}px`),t.currentImage&&(t.currentImage.style.top=`${r}px`)}},document.onmouseup=function(){t.isMouseDown=!1,document.onmousemove=null,document.onmouseup=null},!1}onTouchstart(e){if(!this.currentImage)return;const t=this;this.isMouseDown=!0;const s=e.touches[0];this.currentImage.style.position="absolute";const o=s.clientX-this.currentImage.offsetLeft,n=s.clientY-this.currentImage.offsetTop;e.touches.length===2&&(this.config.scaleRatio=this.getDistance(e.touches[0],e.touches[1])),document.ontouchmove=function(i){if(t.isMouseDown){const r=i.touches[0];let u=r.clientX-o,f=r.clientY-n;t.currentImage&&(t.currentImage.style.left=`${u}px`),t.currentImage&&(t.currentImage.style.top=`${f}px`)}if(i.touches.length===2&&t.config.scaleRatio){const r=t.getDistance(i.touches[0],i.touches[1]),u=r/t.config.scaleRatio;r>t.config.scaleRatio,t.setMobileZoom(u),i.preventDefault()}},document.ontouchend=function(){t.isMouseDown=!1},document.ontouchcancel=function(){t.isMouseDown=!1}}setMobileZoom(e=0){if(!this.currentImage)return;let t=this.currentImage.style.transform;const s=new RegExp("scale\\(([^)]+)\\)","i");s.test(t)?t=t.replace(s,`scale(${e})`):t+=` scale(${e})`,this.currentImage.style.transform=t}getDistance(e,t){const s=t.clientX-e.clientX,o=t.clientY-e.clientY;return Math.sqrt(s*s+o*o)}static addTotal(){this.total+=3}removeStyleProperty(){this.currentImage&&(this.currentImage.style.removeProperty("top"),this.currentImage.style.removeProperty("left"),this.currentImage.style.removeProperty("position"),this.currentImage.style.removeProperty("transform"))}destroyed(){this.removeStyleProperty(),this.currentImage=null}};a(l,"viewer"),a(l,"total",0);let h=l;exports.default=h;
+"use strict";var m=Object.defineProperty;var g=(c,t,e)=>t in c?m(c,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):c[t]=e;var n=(c,t,e)=>g(c,typeof t!="symbol"?t+"":t,e);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=class l{constructor(){n(this,"currentImage",null);n(this,"totalRotate",0);n(this,"isMouseDown",!1);n(this,"config",{scaleRatio:1,rotateRatio:90,isEnableDrag:!0,isEnableWheel:!0,zIndex:2e3,language:"zh",playSpeed:2e3});n(this,"transforms",{scale:1,rotate:"0deg",scaleY:"",scaleX:""})}static getInStance(){return!this.viewer&&(this.viewer=new l),this.viewer.initialize(),this.viewer}initialize(){}setImageTransform(){if(!this.currentImage)return;let t="";Object.keys(this.transforms).forEach(e=>{const s=e;switch(s){case"scaleX":case"scaleY":case"scale":case"rotate":this.transforms[s]&&(t+=`${e}(${this.transforms[s]}) `);break}}),this.currentImage.style.transform=t}onWheel(t){t.deltaY<0&&this.zoomIn(),t.deltaY>=0&&this.zoomOut()}setConfigOptions(t){this.config=Object.assign(this.config,t)}getConfigOptions(){return this.config}horizontalInvert(){this.setInvert("scaleY")}verticalInvert(){this.setInvert("scaleX")}setInvert(t="scaleX"){if(!t||!this.currentImage)return;let e=this.currentImage.style.transform;const s=new RegExp(`${t}\\(([^)]+)\\)`);if(s.test(e)){const r=e.match(s),o=(r&&parseInt(r[1]))===1?-1:1;t==="scaleX"&&(this.transforms.scaleX=`${o}`),t==="scaleY"&&(this.transforms.scaleY=`${o}`)}else t==="scaleX"&&(this.transforms.scaleX="-1"),t==="scaleY"&&(this.transforms.scaleY="-1");this.setImageTransform()}zoomIn(){this.setZoom("+")}zoomOut(){this.setZoom("-")}rotate(t="+"){this.currentImage&&(t==="+"?this.totalRotate+=this.config.rotateRatio:this.totalRotate-=this.config.rotateRatio,this.transforms.rotate=`${this.totalRotate}deg`,this.setImageTransform())}setZoom(t="+"){this.currentImage&&(t==="+"?this.config.scaleRatio+=.1:this.config.scaleRatio>=.3&&(this.config.scaleRatio-=.1),this.transforms.scale=this.config.scaleRatio,this.setImageTransform())}setImage(t){this.currentImage=t,this.currentImage&&this.config.isEnableDrag&&(this.currentImage.onmousedown=this.onMouseMove.bind(this))}onMouseMove(t){if(!this.currentImage)return;const e=this;this.isMouseDown=!0,this.currentImage.style.position="absolute";const s=t.clientX-this.currentImage.offsetLeft,r=t.clientY-this.currentImage.offsetTop;return document.onmousemove=function(i){if(i=i||window.event,e.isMouseDown){let o=i.clientX-s,a=i.clientY-r;e.currentImage&&(e.currentImage.style.left=`${o}px`),e.currentImage&&(e.currentImage.style.top=`${a}px`)}},document.onmouseup=function(){e.isMouseDown=!1,document.onmousemove=null,document.onmouseup=null},!1}onTouchstart(t){if(!this.currentImage)return;const e=this;this.isMouseDown=!0;const s=t.touches[0];this.currentImage.style.position="absolute";const r=s.clientX-this.currentImage.offsetLeft,i=s.clientY-this.currentImage.offsetTop;t.touches.length===2&&(this.config.scaleRatio=this.getDistance(t.touches[0],t.touches[1])),document.ontouchmove=function(o){if(e.isMouseDown){const a=o.touches[0];let u=a.clientX-r,h=a.clientY-i;e.currentImage&&(e.currentImage.style.left=`${u}px`),e.currentImage&&(e.currentImage.style.top=`${h}px`)}if(o.touches.length===2&&e.config.scaleRatio){const a=e.getDistance(o.touches[0],o.touches[1]),u=a/e.config.scaleRatio;a>e.config.scaleRatio,e.setMobileZoom(u),o.preventDefault()}},document.ontouchend=function(){e.isMouseDown=!1},document.ontouchcancel=function(){e.isMouseDown=!1}}setMobileZoom(t=0){if(!this.currentImage)return;let e=this.currentImage.style.transform;const s=new RegExp("scale\\(([^)]+)\\)","i");s.test(e)?e=e.replace(s,`scale(${t})`):e+=` scale(${t})`,this.currentImage.style.transform=e}getDistance(t,e){const s=e.clientX-t.clientX,r=e.clientY-t.clientY;return Math.sqrt(s*s+r*r)}static addTotal(){this.total+=3}removeStyleProperty(){this.currentImage&&(this.currentImage.style.removeProperty("top"),this.currentImage.style.removeProperty("left"),this.currentImage.style.removeProperty("position"),this.currentImage.style.removeProperty("transform"))}destroyed(){this.removeStyleProperty(),this.currentImage=null}};n(l,"viewer"),n(l,"total",0);let f=l;exports.default=f;

package.json

 {
     "name": "images-viewer-vue3",
     "scope": "ImagesViewerVue3",
-    "version": "1.0.15",
+    "version": "1.0.16",
     "description": "A lightweight image viewer for Vue3",
@@ -6,0 +6,0 @@ "type": "module",

README.md

@@ -44,3 +44,3 @@ [![npm version](https://img.shields.io/npm/v/images-viewer-vue3.svg)](https://npmjs.org/package/images-viewer-vue3)
 const app = createApp(App)
-// Image preview directive will be automatically injected here
+// Image preview directive will be automatically injected here.
 app.use(ImagesViewerVue3, {
@@ -53,2 +53,3 @@ zIndex: 999, // Default 999
     isEnableWheel: true, // Enabled by default
+    playSpeed: 2000, // playSpeed Default 2000 ms
 })
@@ -75,2 +76,3 @@ app.mount("#app")
 | language | 'zh' or 'en' | 'zh' | Define the prompt text display language.|
+| playSpeed | number | 2000 | play speed, Default 2000 ms.|
 
@@ -77,0 +79,0 @@ ## Command preview image

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of package files

105

increased by36.36%

Lines of code

3316

increased by11.09%

Number of lines in readme file

124

increased by1.64%

Worsened metrics

Total package byte prevSize

204048

decreased by-30.55%

Number of low quality alerts

18

increased by50%

No dependency changes