images-viewer-vue3/dist/es/index.js

A lightweight image viewer for Vue3

(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("@charset \"UTF-8\";.hotkey-tip__wrap[data-v-ca959f3e]{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-ca959f3e]{opacity:.8}.hotkey-tip__wrap .item-key[data-v-ca959f3e]{border-radius:.2rem;display:inline-block;padding:.2em .5em;text-transform:capitalize;margin-inline-start:.2em;margin-inline-end:.2em;margin-block-start:.2em;margin-block-end:.2em;color:#eee}.mobile-vierwer__wrapper[data-v-f5ef7b0f]{margin:auto 0}.mobile-vierwer__wrapper.cus-img-preview[data-v-f5ef7b0f]{width:100%;position:relative;overflow:hidden}.mobile-vierwer__wrapper.cus-img-preview ul[data-v-f5ef7b0f]{display:flex;flex-wrap:nowrap;align-items:center}.mobile-vierwer__wrapper.cus-img-preview ul li .viewer-image[data-v-f5ef7b0f]{width:100%;height:100%;object-fit:cover;max-width:100%;max-height:100%}.loading-image__wrap .item1[data-v-ce91e1c9]{animation-delay:var(--i);background:#10ac84;box-shadow:0 0 15px #10ac84}.loading-image__wrap .item2[data-v-ce91e1c9]{animation-delay:var(--i);background:#14ffec;box-shadow:0 0 15px #14ffec}.loading-image__wrap .item3[data-v-ce91e1c9]{animation-delay:var(--i);background:#c62a88;box-shadow:0 0 15px #c62a88}.loading-image__wrap span[data-v-ce91e1c9]{display:inline-block;width:calc(var(--load-size, 40) * 1px);aspect-ratio:1;border-radius:50%;margin:0 6px;animation:loading-ce91e1c9 1.4s cubic-bezier(0,.55,.45,1) infinite;-webkit-animation:loading-ce91e1c9 1.4s cubic-bezier(0,.55,.45,1) infinite}@-webkit-keyframes loading-ce91e1c9{0%,80%,to{opacity:0;-webkit-transform:scale(0);transform:scale(0)}40%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes loading-ce91e1c9{0%,80%,to{opacity:0;-webkit-transform:scale(0);transform:scale(0)}40%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.nav-image-loading__wrap .loading-spin[data-v-1e420db0]{--loading-w: 5;width:30px;aspect-ratio:1;border:calc(var(--loading-w) * 1px) solid #f3f3f3;border-radius:50%;border-top:calc(var(--loading-w) * 1px) solid #10ac84;border-bottom:calc(var(--loading-w) * 1px) solid tomato;-webkit-animation:animate-1e420db0 1s linear infinite;animation:animate-1e420db0 1s linear infinite;position:absolute;top:15px;left:20px}@-webkit-keyframes animate-1e420db0{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@keyframes animate-1e420db0{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.scroll-item-nav__wrapper[data-v-dbad959b]{background-color:#0009;width:100%;overflow:hidden}.scroll-item-nav__wrapper .nav-header__wrap[data-v-dbad959b]{height:20px;overflow:hidden;display:flex}.scroll-item-nav__wrapper .nav-header__wrap .image-index[data-v-dbad959b]{outline:none;border:none;text-align:center;flex:1;padding-left:.1em}.scroll-item-nav__wrapper .nav-header__wrap .query-btn[data-v-dbad959b]{background:#3a8df5;color:#eee;border:none;cursor:pointer}.scroll-item-nav__wrapper .nav-header__wrap .query-btn.is-disabled[data-v-dbad959b]{cursor:not-allowed;opacity:.7}.scroll-item-nav__wrapper .nav-scroll__wrap[data-v-dbad959b]{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-dbad959b]{border:1px solid transparent;margin-bottom:.5rem;border-radius:4px;position:relative;opacity:.5}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item[data-v-dbad959b]:hover{opacity:1}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item.active-item[data-v-dbad959b]{opacity:1;border:1px solid var(--active-icon-color)}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item .index[data-v-dbad959b]{position:absolute;top:10px;left:20px;color:red}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item .error-text[data-v-dbad959b]{position:absolute;top:20px;left:15px;color:tomato;font-size:12px}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item .list-group-image[data-v-dbad959b]{width:100%;height:100%;object-fit:cover;border-radius:4px}.image-action-btns__wrapper[data-v-7893620c]{position:fixed;bottom:30px;left:0;right:0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding:10px 0;z-index:10}.image-action-btns__wrapper .control-info[data-v-7893620c]{display:flex;align-items:center;color:#eee;padding-bottom:6px}.image-action-btns__wrapper .position[data-v-7893620c]{position:absolute;left:30px}.control-svg__btns[data-v-7893620c]{background-color:#00000080;border-radius:8px;padding:8px 10px!important;display:flex;align-items:center}.control-svg__btns .svg-action--btn[data-v-7893620c]{margin:0 6px;cursor:pointer}.control-svg__btns .svg-action--btn[data-v-7893620c]:hover{fill:var(--active-icon-color);color:var(--active-icon-color)}.image-viewer-vue3__root[data-v-5d897577]{position:fixed;top:0;right:0;bottom:0;left:0}.nav-scroll-style__wrap[data-v-5d897577] ::-webkit-scrollbar{width:6px;height:6px;background:#f7f7f7}.nav-scroll-style__wrap[data-v-5d897577] ::-webkit-scrollbar-track{border-radius:10px}.nav-scroll-style__wrap[data-v-5d897577] ::-webkit-scrollbar-thumb{background-color:#4593fb5e}.images-viewer-vue3__wrapper[data-v-5d897577] *{box-sizing:border-box;padding:0;margin:0}.images-viewer-vue3__wrapper[data-v-5d897577]{--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;overflow:hidden;opacity:0;transition:opacity 1s ease}.images-viewer-vue3__wrapper ul[data-v-5d897577]{padding:0;list-style:none;margin:0}.images-viewer-vue3__wrapper .svg-icon__action[data-v-5d897577]{width:20px;height:20px}.images-viewer-vue3__wrapper .svg-icon__action path[data-v-5d897577]{fill:#eee}.images-viewer-vue3__wrapper.is-active[data-v-5d897577]{opacity:1}.images-viewer-vue3__wrapper .is-hidden[data-v-5d897577]{display:none!important}.images-viewer-vue3__wrapper .is-show[data-v-5d897577]{display:block}.images-viewer-vue3__wrapper .cursor[data-v-5d897577]{cursor:pointer}.images-viewer-vue3__wrapper .images-viewer-vue3__mobile[data-v-5d897577]{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-5d897577]{position:absolute;top:15px;left:40%;z-index:10;color:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content[data-v-5d897577]{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-5d897577]{width:0px;overflow:hidden;transition:width .6s ease,opacity .5s ease;opacity:0;transform:skew(0)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper.nav-active[data-v-5d897577]{width:var(--nav-width);opacity:1}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .nav-vnode-scroll__wrapper[data-v-5d897577]{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-5d897577]{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-5d897577]{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-5d897577]{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-5d897577]:hover{opacity:1}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item span[data-v-5d897577]{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-5d897577]{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-5d897577]{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-5d897577]{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-5d897577]{transform:scale(-1)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-header__inner[data-v-5d897577]{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;z-index:10;padding:8px 6px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-header__inner.flex-end[data-v-5d897577]{justify-content:flex-end}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info--group[data-v-5d897577]{display:flex;align-items:center}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info--group .info-icon__item[data-v-5d897577]{margin:0 12px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info--group .info-icon__item[data-v-5d897577]:first-child{position:relative}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info--group .info-icon__item:first-child .info-details[data-v-5d897577]{position:absolute;left:-150px;opacity:0;transition:opacity .3s ease;min-width:230px;font-size:12px;padding:.8rem;border-radius:6px;background:#00000080}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info--group .info-icon__item:first-child .info-details li[data-v-5d897577]{margin-bottom:5px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info--group .info-icon__item:first-child .info-details li .link-a[data-v-5d897577]{max-width:190px;white-space:wrap;word-break:break-all;word-wrap:break-word;color:#3a8df5}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info--group .info-icon__item:first-child:hover .info-details[data-v-5d897577]{opacity:1}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info--group .images-viewer-vue3__close[data-v-5d897577]{background:#0000004d;border-radius:50%;width:26px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;cursor:pointer}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__inner[data-v-5d897577]{flex:0 1 auto;z-index:1;-webkit-user-select:none;user-select:none;width:auto;height:auto;object-fit:cover;padding:99px;display:inline-block}.images-viewer-vue3__wrapper .icon-is-hover[data-v-5d897577]:hover{cursor:pointer}.images-viewer-vue3__wrapper .icon-is-hover:hover path[data-v-5d897577]{fill:var(--active-icon-color)!important}.images-viewer-vue3__wrapper .close-icon[data-v-5d897577]{transition:fill .3s ease}.images-viewer-vue3__wrapper .viewer-previous-icon[data-v-5d897577],.images-viewer-vue3__wrapper .viewer-next-icon[data-v-5d897577]{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-5d897577]{top:40%;left:0}.images-viewer-vue3__wrapper .viewer-next-icon[data-v-5d897577]{top:40%;right:0}.cus-transition[data-v-5d897577]{transform:scale(1);transition:transform .3s ease}.is-active-border-color[data-v-5d897577]{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 g, render as f } from "vue";
import { _ as d } from "./js/components-PreviewImageWrapper.vue_vue_type_script_setup_true_name_PreviewImageWrapper_lang.ts-Sep4OOmZ.js";
import { P as u } from "./js/components-PreviewImageModal.vue-Lva14val.js";
import { V as v } from "./js/directive-v-image-viewer.ts-BowM4bqr.js";
import { L as y } from "./js/directive-v-lazy-image.ts-DgNldlep.js";
import { v as p, P as w } from "./js/utils-constant.ts-DQxBjGsQ.js";
import { a as I, c as V, s as x } from "./js/utils-common.ts-D9djKXpT.js";
import "./js/npm-hotkeys-js-CQ2lDUlP.js";
import { I as b } from "./js/utils-core.ts-33QG0uRn.js";
import { i as s } from "./js/langs-index.ts-D1fGuzZg.js";
let m;
const t = b.getInStance();
var n = (e, i) => {
};
function H(e, i) {
  i && (t.setConfigOptions(i), s.global.locale.value = i.language || "zh-cn"), console.log(`%cimages-viewer-vue3_V${p}`, "color: #eee;background:#646cff;padding:2px 5px;border-radius:4px;"), e.directive("image-viewer", v), e.directive("lazy-image", y), e.component("ImagesViewerVue3", d), e.config.globalProperties.$imageViewerApi = S;
}
async function S(e) {
  var i = [];
  await I(e.images || []).then((a) => {
    i = a.data;
  }).catch((a) => {
    console.error("images-viewer-vue3:", JSON.stringify(a));
  });
  const o = t.getConfigOptions();
  var r = null;
  if (r)
    r && document.body.removeChild(r);
  else {
    const a = {
      visible: !0,
      specifyIndex: e.specifyIndex,
      current: e.current,
      images: i,
      zIndex: o.zIndex,
      image: e.imageDom,
      from: e.from || "api",
      language: o.language || "zh-cn",
      playSpeed: o.playSpeed,
      isDownLoad: o.isDownLoad,
      isHiddenSiderNav: o.isHiddenSiderNav,
      isHiddenSearch: o.isHiddenSearch,
      i18n: s.global,
      handleChange: ({ image: c, index: l }) => {
        n && n(c, l);
      },
      handleClose: () => {
        h();
      }
    };
    m = g(u, a), r = V(), r.style.zIndex = o.zIndex + "", f(m, r), x(r), n && n(e.current, e.imageDom && e.imageDom.getAttribute("data-index"));
  }
}
function h() {
  const e = document.querySelector(`.${w}`);
  e && (document.body.style.removeProperty("overflow"), document.body.style.removeProperty("margin"), document.body.style.removeProperty("padding"), document.body.removeChild(e)), t.destroyed();
}
function R(e) {
  e && (n = e);
}
const B = d;
export {
  B as ImageViewerVue3,
  v as VImageViewer,
  H as default,
  S as imageViewerApi,
  h as onClose,
  R as onUpdate
};