basic-file-preview 1.0.1 → 1.0.3

package/dist/lib/ImagePreview.js

@@ -1 +1,670 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index.js"),e=require("vue");var ie=/\s/;function ce(n){for(var c=n.length;c--&&ie.test(n.charAt(c)););return c}var ue=/^\s+/;function de(n){return n&&n.slice(0,ce(n)+1).replace(ue,"")}var re=NaN,fe=/^[-+]0x[0-9a-f]+$/i,me=/^0b[01]+$/i,ve=/^0o[0-7]+$/i,pe=parseInt;function ae(n){if(typeof n=="number")return n;if(t.isSymbol(n))return re;if(t.isObject$1(n)){var c=typeof n.valueOf=="function"?n.valueOf():n;n=t.isObject$1(c)?c+"":c}if(typeof n!="string")return n===0?n:+n;n=de(n);var f=me.test(n);return f||ve.test(n)?pe(n.slice(2),f?2:8):fe.test(n)?re:+n}var te=function(){return t.root.Date.now()},ge="Expected a function",he=Math.max,Ee=Math.min;function we(n,c,f){var s,o,h,p,g,l,z=0,b=!1,y=!1,k=!0;if(typeof n!="function")throw new TypeError(ge);c=ae(c)||0,t.isObject$1(f)&&(b=!!f.leading,y="maxWait"in f,h=y?he(ae(f.maxWait)||0,c):h,k="trailing"in f?!!f.trailing:k);function x(d){var E=s,I=o;return s=o=void 0,z=d,p=n.apply(I,E),p}function C(d){return z=d,g=setTimeout(v,c),b?x(d):p}function N(d){var E=d-l,I=d-z,D=c-E;return y?Ee(D,h-I):D}function O(d){var E=d-l,I=d-z;return l===void 0||E>=c||E<0||y&&I>=h}function v(){var d=te();if(O(d))return V(d);g=setTimeout(v,N(d))}function V(d){return g=void 0,k&&s?x(d):(s=o=void 0,p)}function u(){g!==void 0&&clearTimeout(g),z=0,s=l=o=g=void 0}function P(){return g===void 0?p:V(te())}function _(){var d=te(),E=O(d);if(s=arguments,o=this,l=d,E){if(g===void 0)return C(l);if(y)return clearTimeout(g),g=setTimeout(v,c),x(l)}return g===void 0&&(g=setTimeout(v,c)),p}return _.cancel=u,_.flush=P,_}var ye="Expected a function";function K(n,c,f){var s=!0,o=!0;if(typeof n!="function")throw new TypeError(ye);return t.isObject$1(f)&&(s="leading"in f?!!f.leading:s,o="trailing"in f?!!f.trailing:o),we(n,c,{leading:s,maxWait:c,trailing:o})}const Ce=["class","style"],ke=/^on[A-Z]/,Ne=(n={})=>{const{excludeListeners:c=!1,excludeKeys:f}=n,s=e.computed(()=>(f?.value||[]).concat(Ce)),o=e.getCurrentInstance();return o?e.computed(()=>t.fromPairs(Object.entries(o.proxy?.$attrs).filter(([h])=>!s.value.includes(h)&&!(c&&ke.test(h))))):(t.debugWarn("use-attrs","getCurrentInstance() returned null. useAttrs() must be called at the top of a setup function"),e.computed(()=>({})))},be=t.buildProps({hideOnClickModal:Boolean,src:{type:String,default:""},fit:{type:String,values:["","contain","cover","fill","none","scale-down"],default:""},loading:{type:String,values:["eager","lazy"]},lazy:Boolean,scrollContainer:{type:t.definePropType([String,Object])},previewSrcList:{type:t.definePropType(Array),default:()=>t.mutable([])},previewTeleported:Boolean,zIndex:{type:Number},initialIndex:{type:Number,default:0},infinite:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!0},zoomRate:{type:Number,default:1.2},scale:{type:Number,default:1},minScale:{type:Number,default:.2},maxScale:{type:Number,default:7},showProgress:Boolean,crossorigin:{type:t.definePropType(String)}}),Ie={load:n=>n instanceof Event,error:n=>n instanceof Event,switch:n=>t.isNumber(n),close:()=>!0,show:()=>!0},xe=t.buildProps({urlList:{type:t.definePropType(Array),default:()=>t.mutable([])},zIndex:{type:Number},initialIndex:{type:Number,default:0},infinite:{type:Boolean,default:!0},hideOnClickModal:Boolean,teleported:Boolean,closeOnPressEscape:{type:Boolean,default:!0},zoomRate:{type:Number,default:1.2},scale:{type:Number,default:1},minScale:{type:Number,default:.2},maxScale:{type:Number,default:7},showProgress:Boolean,crossorigin:{type:t.definePropType(String)}}),Se={close:()=>!0,error:n=>n instanceof Event,switch:n=>t.isNumber(n),rotate:n=>t.isNumber(n)},Te=["src","crossorigin"];var ze=e.defineComponent({name:"ElImageViewer",__name:"image-viewer",props:xe,emits:Se,setup(n,{expose:c,emit:f}){const s={CONTAIN:{name:"contain",icon:e.markRaw(t.full_screen_default)},ORIGINAL:{name:"original",icon:e.markRaw(t.scale_to_original_default)}},o=n,h=f;let p;const{t:g}=t.useLocale(),l=t.useNamespace("image-viewer"),{nextZIndex:z}=t.useZIndex(),b=e.ref(),y=e.ref(),k=e.effectScope(),x=e.computed(()=>{const{scale:r,minScale:i,maxScale:m}=o;return t.clamp(r,i,m)}),C=e.ref(!0),N=e.ref(!1),O=e.ref(!1),v=e.ref(o.initialIndex),V=e.shallowRef(s.CONTAIN),u=e.ref({scale:x.value,deg:0,offsetX:0,offsetY:0,enableTransition:!1}),P=e.ref(o.zIndex??z());t.useLockscreen(O,{ns:l});const _=e.computed(()=>{const{urlList:r}=o;return r.length<=1}),d=e.computed(()=>v.value===0),E=e.computed(()=>v.value===o.urlList.length-1),I=e.computed(()=>o.urlList[v.value]),D=e.computed(()=>[l.e("btn"),l.e("prev"),l.is("disabled",!o.infinite&&d.value)]),q=e.computed(()=>[l.e("btn"),l.e("next"),l.is("disabled",!o.infinite&&E.value)]),F=e.computed(()=>{const{scale:r,deg:i,offsetX:m,offsetY:L,enableTransition:$}=u.value;let S=m/r,T=L/r;const X=i*Math.PI/180,M=Math.cos(X),Y=Math.sin(X);S=S*M+T*Y,T=T*M-m/r*Y;const ee={transform:`scale(${r}) rotate(${i}deg) translate(${S}px, ${T}px)`,transition:$?"transform .3s":""};return V.value.name===s.CONTAIN.name&&(ee.maxWidth=ee.maxHeight="100%"),ee}),W=e.computed(()=>`${v.value+1} / ${o.urlList.length}`);function R(){U(),p?.(),O.value=!1,h("close")}function j(){const r=K(m=>{switch(t.getEventCode(m)){case t.EVENT_CODE.esc:o.closeOnPressEscape&&R();break;case t.EVENT_CODE.space:G();break;case t.EVENT_CODE.left:J();break;case t.EVENT_CODE.up:B("zoomIn");break;case t.EVENT_CODE.right:Q();break;case t.EVENT_CODE.down:B("zoomOut");break}}),i=K(m=>{B((m.deltaY||m.deltaX)<0?"zoomIn":"zoomOut",{zoomRate:o.zoomRate,enableTransition:!1})});k.run(()=>{t.useEventListener(document,"keydown",r),t.useEventListener(b,"wheel",i)})}function U(){k.stop()}function Z(){C.value=!1}function a(r){N.value=!0,C.value=!1,h("error",r),r.target.alt=g("el.image.error")}function A(r){if(C.value||r.button!==0||!b.value)return;u.value.enableTransition=!1;const{offsetX:i,offsetY:m}=u.value,L=r.pageX,$=r.pageY,S=K(M=>{u.value={...u.value,offsetX:i+M.pageX-L,offsetY:m+M.pageY-$}}),T=t.useEventListener(document,"mousemove",S),X=t.useEventListener(document,"mouseup",()=>{T(),X()});r.preventDefault()}function w(r){if(C.value||!b.value||r.touches.length!==1)return;u.value.enableTransition=!1;const{offsetX:i,offsetY:m}=u.value,{pageX:L,pageY:$}=r.touches[0],S=K(M=>{const Y=M.touches[0];u.value={...u.value,offsetX:i+Y.pageX-L,offsetY:m+Y.pageY-$}}),T=t.useEventListener(document,"touchmove",S),X=t.useEventListener(document,"touchend",()=>{T(),X()});r.preventDefault()}function ne(){u.value={scale:x.value,deg:0,offsetX:0,offsetY:0,enableTransition:!1}}function G(){if(C.value||N.value)return;const r=t.keysOf(s),i=Object.values(s),m=V.value.name;V.value=s[r[(i.findIndex(L=>L.name===m)+1)%r.length]],ne()}function H(r){N.value=!1;const i=o.urlList.length;v.value=(r+i)%i}function J(){d.value&&!o.infinite||H(v.value-1)}function Q(){E.value&&!o.infinite||H(v.value+1)}function B(r,i={}){if(C.value||N.value)return;const{minScale:m,maxScale:L}=o,{zoomRate:$,rotateDeg:S,enableTransition:T}={zoomRate:o.zoomRate,rotateDeg:90,enableTransition:!0,...i};switch(r){case"zoomOut":u.value.scale>m&&(u.value.scale=Number.parseFloat((u.value.scale/$).toFixed(3)));break;case"zoomIn":u.value.scale<L&&(u.value.scale=Number.parseFloat((u.value.scale*$).toFixed(3)));break;case"clockwise":u.value.deg+=S,h("rotate",u.value.deg);break;case"anticlockwise":u.value.deg-=S,h("rotate",u.value.deg);break}u.value.enableTransition=T}function oe(r){r.detail?.focusReason==="pointer"&&r.preventDefault()}function le(){o.closeOnPressEscape&&R()}function se(r){if(r.ctrlKey){if(r.deltaY<0)return r.preventDefault(),!1;if(r.deltaY>0)return r.preventDefault(),!1}}return e.watch(()=>x.value,r=>{u.value.scale=r}),e.watch(I,()=>{e.nextTick(()=>{y.value?.complete||(C.value=!0)})}),e.watch(v,r=>{ne(),h("switch",r)}),e.onMounted(()=>{O.value=!0,j(),p=t.useEventListener("wheel",se,{passive:!1})}),c({setActiveItem:H}),(r,i)=>(e.openBlock(),e.createBlock(e.unref(t.ElTeleport),{to:"body",disabled:!n.teleported},{default:e.withCtx(()=>[e.createVNode(e.Transition,{name:"viewer-fade",appear:""},{default:e.withCtx(()=>[e.createElementVNode("div",{ref_key:"wrapper",ref:b,tabindex:-1,class:e.normalizeClass(e.unref(l).e("wrapper")),style:e.normalizeStyle({zIndex:P.value})},[e.createVNode(e.unref(t.focus_trap_default$1),{loop:"",trapped:"","focus-trap-el":b.value,"focus-start-el":"container",onFocusoutPrevented:oe,onReleaseRequested:le},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(l).e("mask")),onClick:i[0]||(i[0]=e.withModifiers(m=>n.hideOnClickModal&&R(),["self"]))},null,2),e.createCommentVNode(" CLOSE "),e.createElementVNode("span",{class:e.normalizeClass([e.unref(l).e("btn"),e.unref(l).e("close")]),onClick:R},[e.createVNode(e.unref(t.ElIcon),null,{default:e.withCtx(()=>[e.createVNode(e.unref(t.close_default))]),_:1})],2),e.createCommentVNode(" ARROW "),_.value?e.createCommentVNode("v-if",!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("span",{class:e.normalizeClass(D.value),onClick:J},[e.createVNode(e.unref(t.ElIcon),null,{default:e.withCtx(()=>[e.createVNode(e.unref(t.arrow_left_default))]),_:1})],2),e.createElementVNode("span",{class:e.normalizeClass(q.value),onClick:Q},[e.createVNode(e.unref(t.ElIcon),null,{default:e.withCtx(()=>[e.createVNode(e.unref(t.arrow_right_default))]),_:1})],2)],64)),r.$slots.progress||n.showProgress?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass([e.unref(l).e("btn"),e.unref(l).e("progress")])},[e.renderSlot(r.$slots,"progress",{activeIndex:v.value,total:n.urlList.length},()=>[e.createTextVNode(e.toDisplayString(W.value),1)])],2)):e.createCommentVNode("v-if",!0),e.createCommentVNode(" ACTIONS "),e.createElementVNode("div",{class:e.normalizeClass([e.unref(l).e("btn"),e.unref(l).e("actions")])},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(l).e("actions__inner"))},[e.renderSlot(r.$slots,"toolbar",{actions:B,prev:J,next:Q,reset:G,activeIndex:v.value,setActiveItem:H},()=>[e.createVNode(e.unref(t.ElIcon),{onClick:i[1]||(i[1]=m=>B("zoomOut"))},{default:e.withCtx(()=>[e.createVNode(e.unref(t.zoom_out_default))]),_:1}),e.createVNode(e.unref(t.ElIcon),{onClick:i[2]||(i[2]=m=>B("zoomIn"))},{default:e.withCtx(()=>[e.createVNode(e.unref(t.zoom_in_default))]),_:1}),e.createElementVNode("i",{class:e.normalizeClass(e.unref(l).e("actions__divider"))},null,2),e.createVNode(e.unref(t.ElIcon),{onClick:G},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(V.value.icon)))]),_:1}),e.createElementVNode("i",{class:e.normalizeClass(e.unref(l).e("actions__divider"))},null,2),e.createVNode(e.unref(t.ElIcon),{onClick:i[3]||(i[3]=m=>B("anticlockwise"))},{default:e.withCtx(()=>[e.createVNode(e.unref(t.refresh_left_default))]),_:1}),e.createVNode(e.unref(t.ElIcon),{onClick:i[4]||(i[4]=m=>B("clockwise"))},{default:e.withCtx(()=>[e.createVNode(e.unref(t.refresh_right_default))]),_:1})])],2)],2),e.createCommentVNode(" CANVAS "),e.createElementVNode("div",{class:e.normalizeClass(e.unref(l).e("canvas"))},[N.value&&r.$slots["viewer-error"]?e.renderSlot(r.$slots,"viewer-error",{key:0,activeIndex:v.value,src:I.value}):(e.openBlock(),e.createElementBlock("img",{ref_key:"imgRef",ref:y,key:I.value,src:I.value,style:e.normalizeStyle(F.value),class:e.normalizeClass(e.unref(l).e("img")),crossorigin:n.crossorigin,onLoad:Z,onError:a,onMousedown:A,onTouchstart:w},null,46,Te))],2),e.renderSlot(r.$slots,"default")]),_:3},8,["focus-trap-el"])],6)]),_:3})]),_:3},8,["disabled"]))}}),Ve=ze;const Le=t.withInstall(Ve),Oe=["src","loading","crossorigin"],Be={key:0};var $e=e.defineComponent({name:"ElImage",inheritAttrs:!1,__name:"image",props:be,emits:Ie,setup(n,{expose:c,emit:f}){const s=n,o=f,{t:h}=t.useLocale(),p=t.useNamespace("image"),g=e.useAttrs(),l=e.computed(()=>t.fromPairs(Object.entries(g).filter(([a])=>/^(data-|on[A-Z])/i.test(a)||["id","style"].includes(a)))),z=Ne({excludeListeners:!0,excludeKeys:e.computed(()=>Object.keys(l.value))}),b=e.ref(),y=e.ref(!1),k=e.ref(!0),x=e.ref(!1),C=e.ref(),N=e.ref(),O=t.isClient&&"loading"in HTMLImageElement.prototype;let v;const V=e.computed(()=>[p.e("inner"),P.value&&p.e("preview"),k.value&&p.is("loading")]),u=e.computed(()=>{const{fit:a}=s;return t.isClient&&a?{objectFit:a}:{}}),P=e.computed(()=>{const{previewSrcList:a}=s;return t.isArray(a)&&a.length>0}),_=e.computed(()=>{const{previewSrcList:a,initialIndex:A}=s;let w=A;return A>a.length-1&&(w=0),w}),d=e.computed(()=>s.loading==="eager"?!1:!O&&s.loading==="lazy"||s.lazy),E=()=>{t.isClient&&(k.value=!0,y.value=!1,b.value=s.src)};function I(a){k.value=!1,y.value=!1,o("load",a)}function D(a){k.value=!1,y.value=!0,o("error",a)}function q(a){a&&(E(),R())}const F=t.useThrottleFn(q,200,!0);async function W(){if(!t.isClient)return;await e.nextTick();const{scrollContainer:a}=s;if(t.isElement(a))N.value=a;else if(t.isString(a)&&a!=="")N.value=document.querySelector(a)??void 0;else if(C.value){const w=t.getScrollContainer(C.value);N.value=t.isWindow(w)?void 0:w}const{stop:A}=t.useIntersectionObserver(C,([w])=>{F(w.isIntersecting)},{root:N});v=A}function R(){!t.isClient||!F||(v?.(),N.value=void 0,v=void 0)}function j(){P.value&&(x.value=!0,o("show"))}function U(){x.value=!1,o("close")}function Z(a){o("switch",a)}return e.watch(()=>s.src,()=>{d.value?(k.value=!0,y.value=!1,R(),W()):E()}),e.onMounted(()=>{d.value?W():E()}),c({showPreview:j}),(a,A)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({ref_key:"container",ref:C},l.value,{class:[e.unref(p).b(),a.$attrs.class]}),[y.value?e.renderSlot(a.$slots,"error",{key:0},()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(p).e("error"))},e.toDisplayString(e.unref(h)("el.image.error")),3)]):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[b.value!==void 0?(e.openBlock(),e.createElementBlock("img",e.mergeProps({key:0},e.unref(z),{src:b.value,loading:n.loading,style:u.value,class:V.value,crossorigin:n.crossorigin,onClick:j,onLoad:I,onError:D}),null,16,Oe)):e.createCommentVNode("v-if",!0),k.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(p).e("wrapper"))},[e.renderSlot(a.$slots,"placeholder",{},()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(p).e("placeholder"))},null,2)])],2)):e.createCommentVNode("v-if",!0)],64)),P.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[x.value?(e.openBlock(),e.createBlock(e.unref(Le),{key:0,"z-index":n.zIndex,"initial-index":_.value,infinite:n.infinite,"zoom-rate":n.zoomRate,"min-scale":n.minScale,"max-scale":n.maxScale,"show-progress":n.showProgress,"url-list":n.previewSrcList,scale:n.scale,crossorigin:n.crossorigin,"hide-on-click-modal":n.hideOnClickModal,teleported:n.previewTeleported,"close-on-press-escape":n.closeOnPressEscape,onClose:U,onSwitch:Z},e.createSlots({toolbar:e.withCtx(w=>[e.renderSlot(a.$slots,"toolbar",e.normalizeProps(e.guardReactiveProps(w)))]),default:e.withCtx(()=>[a.$slots.viewer?(e.openBlock(),e.createElementBlock("div",Be,[e.renderSlot(a.$slots,"viewer")])):e.createCommentVNode("v-if",!0)]),_:2},[a.$slots.progress?{name:"progress",fn:e.withCtx(w=>[e.renderSlot(a.$slots,"progress",e.normalizeProps(e.guardReactiveProps(w)))]),key:"0"}:void 0,a.$slots["viewer-error"]?{name:"viewer-error",fn:e.withCtx(w=>[e.renderSlot(a.$slots,"viewer-error",e.normalizeProps(e.guardReactiveProps(w)))]),key:"1"}:void 0]),1032,["z-index","initial-index","infinite","zoom-rate","min-scale","max-scale","show-progress","url-list","scale","crossorigin","hide-on-click-modal","teleported","close-on-press-escape"])):e.createCommentVNode("v-if",!0)],64)):e.createCommentVNode("v-if",!0)],16))}}),Pe=$e;const _e=t.withInstall(Pe),Re=e.defineComponent({name:"ImagePreview",__name:"ImagePreview",props:{url:{}},setup(n){return(c,f)=>{const s=_e;return e.openBlock(),e.createBlock(s,{src:n.url,fit:"contain",class:"w-full h-full"},null,8,["src"])}}});exports.default=Re;
+import { d as Fe, e as ue, f as Ve, j as We, k as Ne, l as ke, m as Oe, n as ne, o as $e, s as He, p as Ke, q as Re, t as Ae, v as je, w as qe, x as Ue, y as Z, E as Ze, z as Ge, A as W, B as Je, C as Qe, D as et, F as tt, G as nt, H as at, I as st, J as rt, K as Q, L as ot, M as _e, i as te, N as lt, O as it, P as ut, a as ct, Q as ft, R as dt, S as vt } from "./index.js";
+import { computed as m, getCurrentInstance as mt, defineComponent as Ee, markRaw as Le, ref as L, effectScope as gt, shallowRef as pt, watch as ie, nextTick as Pe, onMounted as Me, openBlock as C, createBlock as ce, unref as a, withCtx as I, createVNode as p, Transition as ht, createElementVNode as O, normalizeStyle as Se, normalizeClass as k, withModifiers as yt, createCommentVNode as R, createElementBlock as Y, Fragment as Ie, renderSlot as P, createTextVNode as wt, toDisplayString as Xe, resolveDynamicComponent as bt, useAttrs as kt, mergeProps as Te, createSlots as It, normalizeProps as ye, guardReactiveProps as we } from "vue";
+var Et = /\s/;
+function xt(e) {
+  for (var i = e.length; i-- && Et.test(e.charAt(i)); )
+    ;
+  return i;
+}
+var Lt = /^\s+/;
+function St(e) {
+  return e && e.slice(0, xt(e) + 1).replace(Lt, "");
+}
+var Ce = NaN, Tt = /^[-+]0x[0-9a-f]+$/i, Ct = /^0b[01]+$/i, zt = /^0o[0-7]+$/i, Nt = parseInt;
+function ze(e) {
+  if (typeof e == "number")
+    return e;
+  if (Fe(e))
+    return Ce;
+  if (ue(e)) {
+    var i = typeof e.valueOf == "function" ? e.valueOf() : e;
+    e = ue(i) ? i + "" : i;
+  }
+  if (typeof e != "string")
+    return e === 0 ? e : +e;
+  e = St(e);
+  var f = Ct.test(e);
+  return f || zt.test(e) ? Nt(e.slice(2), f ? 2 : 8) : Tt.test(e) ? Ce : +e;
+}
+var be = function() {
+  return Ve.Date.now();
+}, Ot = "Expected a function", $t = Math.max, Rt = Math.min;
+function At(e, i, f) {
+  var o, s, y, g, h, r, M = 0, z = !1, E = !1, S = !0;
+  if (typeof e != "function")
+    throw new TypeError(Ot);
+  i = ze(i) || 0, ue(f) && (z = !!f.leading, E = "maxWait" in f, y = E ? $t(ze(f.maxWait) || 0, i) : y, S = "trailing" in f ? !!f.trailing : S);
+  function $(c) {
+    var w = o, N = s;
+    return o = s = void 0, M = c, g = e.apply(N, w), g;
+  }
+  function x(c) {
+    return M = c, h = setTimeout(v, i), z ? $(c) : g;
+  }
+  function T(c) {
+    var w = c - r, N = c - M, G = i - w;
+    return E ? Rt(G, y - N) : G;
+  }
+  function D(c) {
+    var w = c - r, N = c - M;
+    return r === void 0 || w >= i || w < 0 || E && N >= y;
+  }
+  function v() {
+    var c = be();
+    if (D(c))
+      return X(c);
+    h = setTimeout(v, T(c));
+  }
+  function X(c) {
+    return h = void 0, S && o ? $(c) : (o = s = void 0, g);
+  }
+  function u() {
+    h !== void 0 && clearTimeout(h), M = 0, o = r = s = h = void 0;
+  }
+  function H() {
+    return h === void 0 ? g : X(be());
+  }
+  function K() {
+    var c = be(), w = D(c);
+    if (o = arguments, s = this, r = c, w) {
+      if (h === void 0)
+        return x(r);
+      if (E)
+        return clearTimeout(h), h = setTimeout(v, i), $(r);
+    }
+    return h === void 0 && (h = setTimeout(v, i)), g;
+  }
+  return K.cancel = u, K.flush = H, K;
+}
+var _t = "Expected a function";
+function le(e, i, f) {
+  var o = !0, s = !0;
+  if (typeof e != "function")
+    throw new TypeError(_t);
+  return ue(f) && (o = "leading" in f ? !!f.leading : o, s = "trailing" in f ? !!f.trailing : s), At(e, i, {
+    leading: o,
+    maxWait: i,
+    trailing: s
+  });
+}
+const Pt = ["class", "style"], Mt = /^on[A-Z]/, Xt = (e = {}) => {
+  const { excludeListeners: i = !1, excludeKeys: f } = e, o = m(() => (f?.value || []).concat(Pt)), s = mt();
+  return s ? m(() => Ne(Object.entries(s.proxy?.$attrs).filter(([y]) => !o.value.includes(y) && !(i && Mt.test(y))))) : (We("use-attrs", "getCurrentInstance() returned null. useAttrs() must be called at the top of a setup function"), m(() => ({})));
+}, Bt = Oe({
+  hideOnClickModal: Boolean,
+  src: {
+    type: String,
+    default: ""
+  },
+  fit: {
+    type: String,
+    values: [
+      "",
+      "contain",
+      "cover",
+      "fill",
+      "none",
+      "scale-down"
+    ],
+    default: ""
+  },
+  loading: {
+    type: String,
+    values: ["eager", "lazy"]
+  },
+  lazy: Boolean,
+  scrollContainer: { type: ne([String, Object]) },
+  previewSrcList: {
+    type: ne(Array),
+    default: () => $e([])
+  },
+  previewTeleported: Boolean,
+  zIndex: { type: Number },
+  initialIndex: {
+    type: Number,
+    default: 0
+  },
+  infinite: {
+    type: Boolean,
+    default: !0
+  },
+  closeOnPressEscape: {
+    type: Boolean,
+    default: !0
+  },
+  zoomRate: {
+    type: Number,
+    default: 1.2
+  },
+  scale: {
+    type: Number,
+    default: 1
+  },
+  minScale: {
+    type: Number,
+    default: 0.2
+  },
+  maxScale: {
+    type: Number,
+    default: 7
+  },
+  showProgress: Boolean,
+  crossorigin: { type: ne(String) }
+}), Yt = {
+  load: (e) => e instanceof Event,
+  error: (e) => e instanceof Event,
+  switch: (e) => ke(e),
+  close: () => !0,
+  show: () => !0
+}, Dt = Oe({
+  urlList: {
+    type: ne(Array),
+    default: () => $e([])
+  },
+  zIndex: { type: Number },
+  initialIndex: {
+    type: Number,
+    default: 0
+  },
+  infinite: {
+    type: Boolean,
+    default: !0
+  },
+  hideOnClickModal: Boolean,
+  teleported: Boolean,
+  closeOnPressEscape: {
+    type: Boolean,
+    default: !0
+  },
+  zoomRate: {
+    type: Number,
+    default: 1.2
+  },
+  scale: {
+    type: Number,
+    default: 1
+  },
+  minScale: {
+    type: Number,
+    default: 0.2
+  },
+  maxScale: {
+    type: Number,
+    default: 7
+  },
+  showProgress: Boolean,
+  crossorigin: { type: ne(String) }
+}), Ft = {
+  close: () => !0,
+  error: (e) => e instanceof Event,
+  switch: (e) => ke(e),
+  rotate: (e) => ke(e)
+}, Vt = ["src", "crossorigin"];
+var Wt = /* @__PURE__ */ Ee({
+  name: "ElImageViewer",
+  __name: "image-viewer",
+  props: Dt,
+  emits: Ft,
+  setup(e, { expose: i, emit: f }) {
+    const o = {
+      CONTAIN: {
+        name: "contain",
+        icon: Le(Ke)
+      },
+      ORIGINAL: {
+        name: "original",
+        icon: Le(He)
+      }
+    }, s = e, y = f;
+    let g;
+    const { t: h } = Re(), r = Ae("image-viewer"), { nextZIndex: M } = je(), z = L(), E = L(), S = gt(), $ = m(() => {
+      const { scale: t, minScale: l, maxScale: d } = s;
+      return qe(t, l, d);
+    }), x = L(!0), T = L(!1), D = L(!1), v = L(s.initialIndex), X = pt(o.CONTAIN), u = L({
+      scale: $.value,
+      deg: 0,
+      offsetX: 0,
+      offsetY: 0,
+      enableTransition: !1
+    }), H = L(s.zIndex ?? M());
+    Ue(D, { ns: r });
+    const K = m(() => {
+      const { urlList: t } = s;
+      return t.length <= 1;
+    }), c = m(() => v.value === 0), w = m(() => v.value === s.urlList.length - 1), N = m(() => s.urlList[v.value]), G = m(() => [
+      r.e("btn"),
+      r.e("prev"),
+      r.is("disabled", !s.infinite && c.value)
+    ]), fe = m(() => [
+      r.e("btn"),
+      r.e("next"),
+      r.is("disabled", !s.infinite && w.value)
+    ]), ae = m(() => {
+      const { scale: t, deg: l, offsetX: d, offsetY: B, enableTransition: V } = u.value;
+      let A = d / t, _ = B / t;
+      const J = l * Math.PI / 180, U = Math.cos(J), ee = Math.sin(J);
+      A = A * U + _ * ee, _ = _ * U - d / t * ee;
+      const he = {
+        transform: `scale(${t}) rotate(${l}deg) translate(${A}px, ${_}px)`,
+        transition: V ? "transform .3s" : ""
+      };
+      return X.value.name === o.CONTAIN.name && (he.maxWidth = he.maxHeight = "100%"), he;
+    }), se = m(() => `${v.value + 1} / ${s.urlList.length}`);
+    function j() {
+      de(), g?.(), D.value = !1, y("close");
+    }
+    function re() {
+      const t = le((d) => {
+        switch (rt(d)) {
+          case Q.esc:
+            s.closeOnPressEscape && j();
+            break;
+          case Q.space:
+            me();
+            break;
+          case Q.left:
+            ge();
+            break;
+          case Q.up:
+            F("zoomIn");
+            break;
+          case Q.right:
+            pe();
+            break;
+          case Q.down:
+            F("zoomOut");
+            break;
+        }
+      }), l = le((d) => {
+        F((d.deltaY || d.deltaX) < 0 ? "zoomIn" : "zoomOut", {
+          zoomRate: s.zoomRate,
+          enableTransition: !1
+        });
+      });
+      S.run(() => {
+        Z(document, "keydown", t), Z(z, "wheel", l);
+      });
+    }
+    function de() {
+      S.stop();
+    }
+    function ve() {
+      x.value = !1;
+    }
+    function n(t) {
+      T.value = !0, x.value = !1, y("error", t), t.target.alt = h("el.image.error");
+    }
+    function q(t) {
+      if (x.value || t.button !== 0 || !z.value) return;
+      u.value.enableTransition = !1;
+      const { offsetX: l, offsetY: d } = u.value, B = t.pageX, V = t.pageY, A = le((U) => {
+        u.value = {
+          ...u.value,
+          offsetX: l + U.pageX - B,
+          offsetY: d + U.pageY - V
+        };
+      }), _ = Z(document, "mousemove", A), J = Z(document, "mouseup", () => {
+        _(), J();
+      });
+      t.preventDefault();
+    }
+    function b(t) {
+      if (x.value || !z.value || t.touches.length !== 1) return;
+      u.value.enableTransition = !1;
+      const { offsetX: l, offsetY: d } = u.value, { pageX: B, pageY: V } = t.touches[0], A = le((U) => {
+        const ee = U.touches[0];
+        u.value = {
+          ...u.value,
+          offsetX: l + ee.pageX - B,
+          offsetY: d + ee.pageY - V
+        };
+      }), _ = Z(document, "touchmove", A), J = Z(document, "touchend", () => {
+        _(), J();
+      });
+      t.preventDefault();
+    }
+    function xe() {
+      u.value = {
+        scale: $.value,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: !1
+      };
+    }
+    function me() {
+      if (x.value || T.value) return;
+      const t = ot(o), l = Object.values(o), d = X.value.name;
+      X.value = o[t[(l.findIndex((B) => B.name === d) + 1) % t.length]], xe();
+    }
+    function oe(t) {
+      T.value = !1;
+      const l = s.urlList.length;
+      v.value = (t + l) % l;
+    }
+    function ge() {
+      c.value && !s.infinite || oe(v.value - 1);
+    }
+    function pe() {
+      w.value && !s.infinite || oe(v.value + 1);
+    }
+    function F(t, l = {}) {
+      if (x.value || T.value) return;
+      const { minScale: d, maxScale: B } = s, { zoomRate: V, rotateDeg: A, enableTransition: _ } = {
+        zoomRate: s.zoomRate,
+        rotateDeg: 90,
+        enableTransition: !0,
+        ...l
+      };
+      switch (t) {
+        case "zoomOut":
+          u.value.scale > d && (u.value.scale = Number.parseFloat((u.value.scale / V).toFixed(3)));
+          break;
+        case "zoomIn":
+          u.value.scale < B && (u.value.scale = Number.parseFloat((u.value.scale * V).toFixed(3)));
+          break;
+        case "clockwise":
+          u.value.deg += A, y("rotate", u.value.deg);
+          break;
+        case "anticlockwise":
+          u.value.deg -= A, y("rotate", u.value.deg);
+          break;
+      }
+      u.value.enableTransition = _;
+    }
+    function Be(t) {
+      t.detail?.focusReason === "pointer" && t.preventDefault();
+    }
+    function Ye() {
+      s.closeOnPressEscape && j();
+    }
+    function De(t) {
+      if (t.ctrlKey) {
+        if (t.deltaY < 0)
+          return t.preventDefault(), !1;
+        if (t.deltaY > 0)
+          return t.preventDefault(), !1;
+      }
+    }
+    return ie(() => $.value, (t) => {
+      u.value.scale = t;
+    }), ie(N, () => {
+      Pe(() => {
+        E.value?.complete || (x.value = !0);
+      });
+    }), ie(v, (t) => {
+      xe(), y("switch", t);
+    }), Me(() => {
+      D.value = !0, re(), g = Z("wheel", De, { passive: !1 });
+    }), i({ setActiveItem: oe }), (t, l) => (C(), ce(a(Ze), {
+      to: "body",
+      disabled: !e.teleported
+    }, {
+      default: I(() => [p(ht, {
+        name: "viewer-fade",
+        appear: ""
+      }, {
+        default: I(() => [O("div", {
+          ref_key: "wrapper",
+          ref: z,
+          tabindex: -1,
+          class: k(a(r).e("wrapper")),
+          style: Se({ zIndex: H.value })
+        }, [p(a(Ge), {
+          loop: "",
+          trapped: "",
+          "focus-trap-el": z.value,
+          "focus-start-el": "container",
+          onFocusoutPrevented: Be,
+          onReleaseRequested: Ye
+        }, {
+          default: I(() => [
+            O("div", {
+              class: k(a(r).e("mask")),
+              onClick: l[0] || (l[0] = yt((d) => e.hideOnClickModal && j(), ["self"]))
+            }, null, 2),
+            R(" CLOSE "),
+            O("span", {
+              class: k([a(r).e("btn"), a(r).e("close")]),
+              onClick: j
+            }, [p(a(W), null, {
+              default: I(() => [p(a(Je))]),
+              _: 1
+            })], 2),
+            R(" ARROW "),
+            K.value ? R("v-if", !0) : (C(), Y(Ie, { key: 0 }, [O("span", {
+              class: k(G.value),
+              onClick: ge
+            }, [p(a(W), null, {
+              default: I(() => [p(a(Qe))]),
+              _: 1
+            })], 2), O("span", {
+              class: k(fe.value),
+              onClick: pe
+            }, [p(a(W), null, {
+              default: I(() => [p(a(et))]),
+              _: 1
+            })], 2)], 64)),
+            t.$slots.progress || e.showProgress ? (C(), Y("div", {
+              key: 1,
+              class: k([a(r).e("btn"), a(r).e("progress")])
+            }, [P(t.$slots, "progress", {
+              activeIndex: v.value,
+              total: e.urlList.length
+            }, () => [wt(Xe(se.value), 1)])], 2)) : R("v-if", !0),
+            R(" ACTIONS "),
+            O("div", { class: k([a(r).e("btn"), a(r).e("actions")]) }, [O("div", { class: k(a(r).e("actions__inner")) }, [P(t.$slots, "toolbar", {
+              actions: F,
+              prev: ge,
+              next: pe,
+              reset: me,
+              activeIndex: v.value,
+              setActiveItem: oe
+            }, () => [
+              p(a(W), { onClick: l[1] || (l[1] = (d) => F("zoomOut")) }, {
+                default: I(() => [p(a(tt))]),
+                _: 1
+              }),
+              p(a(W), { onClick: l[2] || (l[2] = (d) => F("zoomIn")) }, {
+                default: I(() => [p(a(nt))]),
+                _: 1
+              }),
+              O("i", { class: k(a(r).e("actions__divider")) }, null, 2),
+              p(a(W), { onClick: me }, {
+                default: I(() => [(C(), ce(bt(X.value.icon)))]),
+                _: 1
+              }),
+              O("i", { class: k(a(r).e("actions__divider")) }, null, 2),
+              p(a(W), { onClick: l[3] || (l[3] = (d) => F("anticlockwise")) }, {
+                default: I(() => [p(a(at))]),
+                _: 1
+              }),
+              p(a(W), { onClick: l[4] || (l[4] = (d) => F("clockwise")) }, {
+                default: I(() => [p(a(st))]),
+                _: 1
+              })
+            ])], 2)], 2),
+            R(" CANVAS "),
+            O("div", { class: k(a(r).e("canvas")) }, [T.value && t.$slots["viewer-error"] ? P(t.$slots, "viewer-error", {
+              key: 0,
+              activeIndex: v.value,
+              src: N.value
+            }) : (C(), Y("img", {
+              ref_key: "imgRef",
+              ref: E,
+              key: N.value,
+              src: N.value,
+              style: Se(ae.value),
+              class: k(a(r).e("img")),
+              crossorigin: e.crossorigin,
+              onLoad: ve,
+              onError: n,
+              onMousedown: q,
+              onTouchstart: b
+            }, null, 46, Vt))], 2),
+            P(t.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["focus-trap-el"])], 6)]),
+        _: 3
+      })]),
+      _: 3
+    }, 8, ["disabled"]));
+  }
+}), Ht = Wt;
+const Kt = _e(Ht), jt = [
+  "src",
+  "loading",
+  "crossorigin"
+], qt = { key: 0 };
+var Ut = /* @__PURE__ */ Ee({
+  name: "ElImage",
+  inheritAttrs: !1,
+  __name: "image",
+  props: Bt,
+  emits: Yt,
+  setup(e, { expose: i, emit: f }) {
+    const o = e, s = f, { t: y } = Re(), g = Ae("image"), h = kt(), r = m(() => Ne(Object.entries(h).filter(([n]) => /^(data-|on[A-Z])/i.test(n) || ["id", "style"].includes(n)))), M = Xt({
+      excludeListeners: !0,
+      excludeKeys: m(() => Object.keys(r.value))
+    }), z = L(), E = L(!1), S = L(!0), $ = L(!1), x = L(), T = L(), D = te && "loading" in HTMLImageElement.prototype;
+    let v;
+    const X = m(() => [
+      g.e("inner"),
+      H.value && g.e("preview"),
+      S.value && g.is("loading")
+    ]), u = m(() => {
+      const { fit: n } = o;
+      return te && n ? { objectFit: n } : {};
+    }), H = m(() => {
+      const { previewSrcList: n } = o;
+      return lt(n) && n.length > 0;
+    }), K = m(() => {
+      const { previewSrcList: n, initialIndex: q } = o;
+      let b = q;
+      return q > n.length - 1 && (b = 0), b;
+    }), c = m(() => o.loading === "eager" ? !1 : !D && o.loading === "lazy" || o.lazy), w = () => {
+      te && (S.value = !0, E.value = !1, z.value = o.src);
+    };
+    function N(n) {
+      S.value = !1, E.value = !1, s("load", n);
+    }
+    function G(n) {
+      S.value = !1, E.value = !0, s("error", n);
+    }
+    function fe(n) {
+      n && (w(), j());
+    }
+    const ae = it(fe, 200, !0);
+    async function se() {
+      if (!te) return;
+      await Pe();
+      const { scrollContainer: n } = o;
+      if (ut(n)) T.value = n;
+      else if (ct(n) && n !== "") T.value = document.querySelector(n) ?? void 0;
+      else if (x.value) {
+        const b = ft(x.value);
+        T.value = dt(b) ? void 0 : b;
+      }
+      const { stop: q } = vt(x, ([b]) => {
+        ae(b.isIntersecting);
+      }, { root: T });
+      v = q;
+    }
+    function j() {
+      !te || !ae || (v?.(), T.value = void 0, v = void 0);
+    }
+    function re() {
+      H.value && ($.value = !0, s("show"));
+    }
+    function de() {
+      $.value = !1, s("close");
+    }
+    function ve(n) {
+      s("switch", n);
+    }
+    return ie(() => o.src, () => {
+      c.value ? (S.value = !0, E.value = !1, j(), se()) : w();
+    }), Me(() => {
+      c.value ? se() : w();
+    }), i({ showPreview: re }), (n, q) => (C(), Y("div", Te({
+      ref_key: "container",
+      ref: x
+    }, r.value, { class: [a(g).b(), n.$attrs.class] }), [E.value ? P(n.$slots, "error", { key: 0 }, () => [O("div", { class: k(a(g).e("error")) }, Xe(a(y)("el.image.error")), 3)]) : (C(), Y(Ie, { key: 1 }, [z.value !== void 0 ? (C(), Y("img", Te({ key: 0 }, a(M), {
+      src: z.value,
+      loading: e.loading,
+      style: u.value,
+      class: X.value,
+      crossorigin: e.crossorigin,
+      onClick: re,
+      onLoad: N,
+      onError: G
+    }), null, 16, jt)) : R("v-if", !0), S.value ? (C(), Y("div", {
+      key: 1,
+      class: k(a(g).e("wrapper"))
+    }, [P(n.$slots, "placeholder", {}, () => [O("div", { class: k(a(g).e("placeholder")) }, null, 2)])], 2)) : R("v-if", !0)], 64)), H.value ? (C(), Y(Ie, { key: 2 }, [$.value ? (C(), ce(a(Kt), {
+      key: 0,
+      "z-index": e.zIndex,
+      "initial-index": K.value,
+      infinite: e.infinite,
+      "zoom-rate": e.zoomRate,
+      "min-scale": e.minScale,
+      "max-scale": e.maxScale,
+      "show-progress": e.showProgress,
+      "url-list": e.previewSrcList,
+      scale: e.scale,
+      crossorigin: e.crossorigin,
+      "hide-on-click-modal": e.hideOnClickModal,
+      teleported: e.previewTeleported,
+      "close-on-press-escape": e.closeOnPressEscape,
+      onClose: de,
+      onSwitch: ve
+    }, It({
+      toolbar: I((b) => [P(n.$slots, "toolbar", ye(we(b)))]),
+      default: I(() => [n.$slots.viewer ? (C(), Y("div", qt, [P(n.$slots, "viewer")])) : R("v-if", !0)]),
+      _: 2
+    }, [n.$slots.progress ? {
+      name: "progress",
+      fn: I((b) => [P(n.$slots, "progress", ye(we(b)))]),
+      key: "0"
+    } : void 0, n.$slots["viewer-error"] ? {
+      name: "viewer-error",
+      fn: I((b) => [P(n.$slots, "viewer-error", ye(we(b)))]),
+      key: "1"
+    } : void 0]), 1032, [
+      "z-index",
+      "initial-index",
+      "infinite",
+      "zoom-rate",
+      "min-scale",
+      "max-scale",
+      "show-progress",
+      "url-list",
+      "scale",
+      "crossorigin",
+      "hide-on-click-modal",
+      "teleported",
+      "close-on-press-escape"
+    ])) : R("v-if", !0)], 64)) : R("v-if", !0)], 16));
+  }
+}), Zt = Ut;
+const Gt = _e(Zt), en = /* @__PURE__ */ Ee({
+  name: "ImagePreview",
+  __name: "ImagePreview",
+  props: {
+    url: {}
+  },
+  setup(e) {
+    return (i, f) => {
+      const o = Gt;
+      return C(), ce(o, {
+        src: e.url,
+        fit: "contain",
+        class: "w-full h-full"
+      }, null, 8, ["src"]);
+    };
+  }
+});
+export {
+  en as default
+};