vue-previewable-image/dist/vue-previewable-image.umd.cjs

A previewable image Vue component based on viewerjs.

(function(c,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("viewerjs")):typeof define=="function"&&define.amd?define(["exports","vue","viewerjs"],e):(c=typeof globalThis!="undefined"?globalThis:c||self,e(c.VuePreviewableImage={},c.Vue,c.Viewer))})(this,function(c,e,V){"use strict";const L=(t,n=!0,a,i)=>{const o=e.ref(),u=e.ref(""),s=e.ref(!1),l=e.ref(!1),p=e.ref(!1),d=e.ref(!1),f=e.ref(),g=()=>{f.value=new IntersectionObserver(v=>{v.forEach(y=>{const{intersectionRatio:h,target:m}=y;if(h>0&&!m.classList.contains("lazy-loaded")){const r=new Image;d.value=!0,r.addEventListener("load",w=>{m.classList.add("lazy-loaded"),u.value=t,p.value=!0,s.value=!0,l.value=!1,d.value=!1,i&&i(w)}),r.addEventListener("error",w=>{m.classList.add("lazy-loaded"),p.value=!0,l.value=!0,s.value=!1,d.value=!1,a&&a(w)}),r.src=t}})},{threshold:[1]}),o.value&&f.value.observe(o.value)};return e.onMounted(()=>{n?g():u.value=t}),e.onUnmounted(()=>{var v;o.value&&((v=f.value)==null||v.unobserve(o.value))}),{lazySrc:u,lazyloadSuccess:s,lazyloadError:l,lazyloaded:p,lazyloading:d,lazyloadTrigger:o}};function E(t){return typeof t[0]=="string"}const O=e.defineComponent({props:{modelValue:{type:Boolean,default:!1},currentPreviewIndex:{type:Number,default:0},previewSrcList:{type:Array,default:()=>[]},viewerOptions:{type:Object,default:()=>({})},viewerTitle:{type:Function,default:void 0},zIndex:{type:[Number,String],default:2015}},emits:["update:modelValue","update:currentPreviewIndex","switch"],setup(t,{emit:n}){const{modelValue:a,previewSrcList:i,currentPreviewIndex:o}=e.toRefs(t),u=e.computed(()=>i.value&&i.value.length>0),s=e.ref(),l=()=>{var r;(r=s.value)==null||r.view(d.value)};e.watch(a,r=>{r&&l()});const p=e.computed(()=>u.value?E(i.value)?i.value.map(r=>({src:r,alt:r})):i.value:[]),d=e.computed({get(){return o.value},set(r){n("update:currentPreviewIndex",r)}}),f=e.computed(()=>i.value.length||0),g=()=>{const r=document.createElement("div");return p.value.forEach(w=>{const I=new Image;Object.keys(w).forEach(P=>{I[P]=w[P]}),r.appendChild(I)}),r.addEventListener("view",w=>{const I=w;d.value=I.detail.index,n("switch",d.value,s.value)}),r.addEventListener("hidden",()=>{n("update:modelValue",!1)}),r},v=e.computed(()=>t.viewerTitle?r=>t.viewerTitle(r,{index:d.value,total:f.value}):r=>`${r.alt} (${d.value+1}/${f.value})`),y=e.computed(()=>Object.assign({title:v.value,zIndex:t.zIndex},t.viewerOptions)),h=()=>{u.value&&(s.value=new V(g(),y.value),a.value&&l())},m=()=>{h()};return e.watch([p,y],()=>{m()},{deep:!0}),e.onMounted(()=>{m()}),e.onUnmounted(()=>{var r;(r=s.value)==null||r.destroy()}),{hasPreviewList:u,PreviewListLength:f,finalPreviewSrcList:p,viewer:s,handleImgView:l}}}),S=(t,n)=>{const a=t.__vccOpts||t;for(const[i,o]of n)a[i]=o;return a},k={class:"image-viewer"};function $(t,n,a,i,o,u){return e.openBlock(),e.createElementBlock("div",k)}const b=S(O,[["render",$],["__scopeId","data-v-0c5bf984"]]),B=e.defineComponent({name:"PreviewableImage",components:{ImageViewer:b},props:{width:{type:String,default:void 0},height:{type:String,default:void 0},src:{type:String,default:""},alt:{type:String,default:""},referrerPolicy:{type:String,default:void 0},fit:{type:String,default:"fill"},zIndex:{type:[Number,String],default:2015},previewSrcList:{type:Array,default:()=>[]},currentPreviewIndex:{type:Number,default:0},viewerOptions:{type:Object,default:()=>({})},viewerTitle:{type:Function,default:void 0},lazy:{type:Boolean,default:!0}},emits:["switch","update:currentPreviewIndex","load","error"],setup(t,{emit:n}){const{previewSrcList:a,currentPreviewIndex:i}=e.toRefs(t),o=e.computed(()=>({"--img-object-fit":t.fit})),{lazySrc:u,lazyloadTrigger:s,lazyloading:l,lazyloadError:p,lazyloadSuccess:d}=L(t.src,t.lazy,r=>{n("load",r)},r=>{n("error",r)}),f=e.computed(()=>a.value&&a.value.length>0),g=e.computed(()=>!(!f.value||t.lazy&&!d.value)),v=e.ref(!1),y=()=>{f.value&&(v.value=!0)},h=e.computed({get(){return i.value},set(r){n("update:currentPreviewIndex",r)}});return{lazyloadTrigger:s,imgStyleVars:o,hasPreviewList:f,lazySrc:u,lazyloading:l,lazyloadError:p,lazyloadSuccess:d,showImageViewer:v,handleImgView:y,currentViewerIndex:h,handleSwitch:(r,w)=>{n("switch",r,w)},initViewer:g}}}),T={key:0,class:"previewable-image__placeholder"},j={key:1,class:"previewable-image__error"},N=["src","alt","referrerpolicy"];function _(t,n,a,i,o,u){const s=e.resolveComponent("ImageViewer");return e.openBlock(),e.createElementBlock("div",{ref:"lazyloadTrigger",class:"previewable-image",style:e.normalizeStyle([{width:t.width,height:t.height},t.imgStyleVars])},[t.lazy&&t.lazyloading?(e.openBlock(),e.createElementBlock("div",T,[e.renderSlot(t.$slots,"placeholder",{},()=>[e.createTextVNode("Loading...")])])):t.lazy&&t.lazyloadError?(e.openBlock(),e.createElementBlock("div",j,[e.renderSlot(t.$slots,"error",{},()=>[e.createTextVNode("Load Error")])])):(e.openBlock(),e.createElementBlock("img",{key:2,src:t.lazySrc,alt:t.alt,referrerpolicy:t.referrerPolicy,class:e.normalizeClass(["previewable-image__inner",{"previewable-image__preview":t.hasPreviewList}]),onClick:n[0]||(n[0]=(...l)=>t.handleImgView&&t.handleImgView(...l))},null,10,N)),t.initViewer?(e.openBlock(),e.createBlock(s,{key:3,modelValue:t.showImageViewer,"onUpdate:modelValue":n[1]||(n[1]=l=>t.showImageViewer=l),"current-preview-index":t.currentViewerIndex,"onUpdate:currentPreviewIndex":n[2]||(n[2]=l=>t.currentViewerIndex=l),"preview-src-list":t.previewSrcList,"viewer-options":t.viewerOptions,"viewer-title":t.viewerTitle,"z-index":t.zIndex,onSwitch:t.handleSwitch},null,8,["modelValue","current-preview-index","preview-src-list","viewer-options","viewer-title","z-index","onSwitch"])):e.createCommentVNode("",!0)],4)}const z=S(B,[["render",_]]),C={install:(t,n)=>{const a=Object.assign({componentName:z.name,defaultViewerOptions:{}},n);t.component(a.componentName,z),V.setDefaults(a.defaultViewerOptions)}};c.Viewer=V,c.ImageViewer=b,c.PreviewableImage=z,c.default=C,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});