primevue/image/image.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Actions CI](https://github.com/primefaces/primevue/wo

this.primevue=this.primevue||{},this.primevue.image=function(e,t,i){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a={name:"Image",inheritAttrs:!1,emits:["show","hide","error"],props:{preview:{type:Boolean,default:!1},class:null,style:null,imageStyle:null,imageClass:null},mask:null,data:()=>({maskVisible:!1,previewVisible:!1,rotate:0,scale:1}),beforeUnmount(){this.mask&&e.ZIndexUtils.clear(this.container)},methods:{maskRef(e){this.mask=e},toolbarRef(e){this.toolbarRef=e},onImageClick(){this.preview&&(this.maskVisible=!0,setTimeout((()=>{this.previewVisible=!0}),25))},onPreviewImageClick(){this.previewClick=!0},onMaskClick(){this.previewClick||(this.previewVisible=!1,this.rotate=0,this.scale=1),this.previewClick=!1},onError(){this.$emit("error")},rotateRight(){this.rotate+=90,this.previewClick=!0},rotateLeft(){this.rotate-=90,this.previewClick=!0},zoomIn(){this.scale=this.scale+.1,this.previewClick=!0},zoomOut(){this.scale=this.scale-.1,this.previewClick=!0},onBeforeEnter(){e.ZIndexUtils.set("modal",this.mask,this.$primevue.config.zIndex.modal)},onEnter(){this.$emit("show")},onBeforeLeave(){e.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(t){e.ZIndexUtils.clear(t),this.maskVisible=!1}},computed:{containerClass(){return["p-image p-component",this.class,{"p-image-preview-container":this.preview}]},maskClass:()=>["p-image-mask p-component-overlay p-component-overlay-enter"],rotateClass(){return"p-image-preview-rotate-"+this.rotate},imagePreviewStyle(){return{transform:"rotate("+this.rotate+"deg) scale("+this.scale+")"}},zoomDisabled(){return this.scale<=.5||this.scale>=1.5}},components:{Portal:n(t).default}};const o=i.createElementVNode("i",{class:"p-image-preview-icon pi pi-eye"},null,-1),s={class:"p-image-toolbar"},r=[i.createElementVNode("i",{class:"pi pi-refresh"},null,-1)],l=[i.createElementVNode("i",{class:"pi pi-undo"},null,-1)],c=["disabled"],m=[i.createElementVNode("i",{class:"pi pi-search-minus"},null,-1)],p=["disabled"],d=[i.createElementVNode("i",{class:"pi pi-search-plus"},null,-1)],k=[i.createElementVNode("i",{class:"pi pi-times"},null,-1)],v={key:0},u=["src"];return function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===i&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-image-mask {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-image-preview-container {\n    position: relative;\n    display: inline-block;\n}\n.p-image-preview-indicator {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    opacity: 0;\n    -webkit-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n}\n.p-image-preview-icon {\n    font-size: 1.5rem;\n}\n.p-image-preview-container:hover > .p-image-preview-indicator {\n    opacity: 1;\n    cursor: pointer;\n}\n.p-image-preview-container > img {\n    cursor: pointer;\n}\n.p-image-toolbar {\n    position: absolute;\n    top: 0;\n    right: 0;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-image-action.p-link {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-image-preview {\n    -webkit-transition: -webkit-transform 0.15s;\n    transition: -webkit-transform 0.15s;\n    transition: transform 0.15s;\n    transition: transform 0.15s, -webkit-transform 0.15s;\n    max-width: 100vw;\n    max-height: 100vh;\n}\n.p-image-preview-enter-active {\n    -webkit-transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-image-preview-leave-active {\n    -webkit-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-image-preview-enter-from,\n.p-image-preview-leave-to {\n    opacity: 0;\n    -webkit-transform: scale(0.7);\n            transform: scale(0.7);\n}\n"),a.render=function(e,t,n,a,b,h){const f=i.resolveComponent("Portal");return i.openBlock(),i.createElementBlock("span",{class:i.normalizeClass(h.containerClass),style:i.normalizeStyle(n.style)},[i.createElementVNode("img",i.mergeProps(e.$attrs,{style:n.imageStyle,class:n.imageClass,onError:t[0]||(t[0]=(...e)=>h.onError&&h.onError(...e))}),null,16),n.preview?(i.openBlock(),i.createElementBlock("div",{key:0,class:"p-image-preview-indicator",onClick:t[1]||(t[1]=(...e)=>h.onImageClick&&h.onImageClick(...e))},[i.renderSlot(e.$slots,"indicator",{},(()=>[o]))])):i.createCommentVNode("",!0),i.createVNode(f,null,{default:i.withCtx((()=>[b.maskVisible?(i.openBlock(),i.createElementBlock("div",{key:0,ref:h.maskRef,class:i.normalizeClass(h.maskClass),onClick:t[8]||(t[8]=(...e)=>h.onMaskClick&&h.onMaskClick(...e))},[i.createElementVNode("div",s,[i.createElementVNode("button",{class:"p-image-action p-link",onClick:t[2]||(t[2]=(...e)=>h.rotateRight&&h.rotateRight(...e)),type:"button"},r),i.createElementVNode("button",{class:"p-image-action p-link",onClick:t[3]||(t[3]=(...e)=>h.rotateLeft&&h.rotateLeft(...e)),type:"button"},l),i.createElementVNode("button",{class:"p-image-action p-link",onClick:t[4]||(t[4]=(...e)=>h.zoomOut&&h.zoomOut(...e)),type:"button",disabled:h.zoomDisabled},m,8,c),i.createElementVNode("button",{class:"p-image-action p-link",onClick:t[5]||(t[5]=(...e)=>h.zoomIn&&h.zoomIn(...e)),type:"button",disabled:h.zoomDisabled},d,8,p),i.createElementVNode("button",{class:"p-image-action p-link",type:"button",onClick:t[6]||(t[6]=(...t)=>e.hidePreview&&e.hidePreview(...t))},k)]),i.createVNode(i.Transition,{name:"p-image-preview",onBeforeEnter:h.onBeforeEnter,onEnter:h.onEnter,onLeave:h.onLeave,onBeforeLeave:h.onBeforeLeave,onAfterLeave:h.onAfterLeave},{default:i.withCtx((()=>[b.previewVisible?(i.openBlock(),i.createElementBlock("div",v,[i.createElementVNode("img",{src:e.$attrs.src,class:"p-image-preview",style:i.normalizeStyle(h.imagePreviewStyle),onClick:t[7]||(t[7]=(...e)=>h.onPreviewImageClick&&h.onPreviewImageClick(...e))},null,12,u)])):i.createCommentVNode("",!0)])),_:1},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],2)):i.createCommentVNode("",!0)])),_:1})],6)},a}(primevue.utils,primevue.portal,Vue);