primevue/image/image.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

this.primevue=this.primevue||{},this.primevue.image=function(e,i,t,a){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(e),r={name:"Image",inheritAttrs:!1,emits:["show","hide","error"],props:{preview:{type:Boolean,default:!1},class:{type:null,default:null},style:{type:null,default:null},imageStyle:{type:null,default:null},imageClass:{type:null,default:null},previewButtonProps:{type:null,default:null}},mask:null,data:()=>({maskVisible:!1,previewVisible:!1,rotate:0,scale:1}),beforeUnmount(){this.mask&&t.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},onMaskKeydown(e){if("Escape"===e.code)this.onMaskClick(),setTimeout((()=>{t.DomHandler.focus(this.$refs.previewButton)}),25),e.preventDefault()},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(){t.ZIndexUtils.set("modal",this.mask,this.$primevue.config.zIndex.modal)},onEnter(){this.focus(),this.$emit("show")},onBeforeLeave(){t.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(e){t.ZIndexUtils.clear(e),this.maskVisible=!1},focus(){let e=this.mask.querySelector("[autofocus]");e&&e.focus()}},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},rightAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.rotateRight:void 0},leftAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.rotateLeft:void 0},zoomInAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.zoomIn:void 0},zoomOutAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.zoomOut:void 0},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},components:{Portal:n(i).default},directives:{focustrap:o.default}};const l=a.createElementVNode("i",{class:"p-image-preview-icon pi pi-eye"},null,-1),s=["aria-modal"],c={class:"p-image-toolbar"},m=["aria-label"],p=[a.createElementVNode("i",{class:"pi pi-refresh"},null,-1)],u=["aria-label"],d=[a.createElementVNode("i",{class:"pi pi-undo"},null,-1)],v=["disabled","aria-label"],h=[a.createElementVNode("i",{class:"pi pi-search-minus"},null,-1)],f=["disabled","aria-label"],g=[a.createElementVNode("i",{class:"pi pi-search-plus"},null,-1)],k=["aria-label"],b=[a.createElementVNode("i",{class:"pi pi-times"},null,-1)],w={key:0},y=["src"];return function(e,i){void 0===i&&(i={});var t=i.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-image-mask {\n    display: flex;\n    align-items: 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: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\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: flex;\n}\n.p-image-action.p-link {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n.p-image-preview {\n    transition: transform 0.15s;\n    max-width: 100vw;\n    max-height: 100vh;\n}\n.p-image-preview-enter-active {\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-image-preview-leave-active {\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    transform: scale(0.7);\n}\n"),r.render=function(e,i,t,n,o,r){const C=a.resolveComponent("Portal"),E=a.resolveDirective("focustrap");return a.openBlock(),a.createElementBlock("span",{class:a.normalizeClass(r.containerClass),style:a.normalizeStyle(t.style)},[a.createElementVNode("img",a.mergeProps(e.$attrs,{style:t.imageStyle,class:t.imageClass,onError:i[0]||(i[0]=(...e)=>r.onError&&r.onError(...e))}),null,16),t.preview?(a.openBlock(),a.createElementBlock("button",a.mergeProps({key:0,ref:"previewButton",class:"p-image-preview-indicator",onClick:i[1]||(i[1]=(...e)=>r.onImageClick&&r.onImageClick(...e))},t.previewButtonProps),[a.renderSlot(e.$slots,"indicator",{},(()=>[l]))],16)):a.createCommentVNode("",!0),a.createVNode(C,null,{default:a.withCtx((()=>[o.maskVisible?a.withDirectives((a.openBlock(),a.createElementBlock("div",{key:0,ref:r.maskRef,role:"dialog",class:a.normalizeClass(r.maskClass),"aria-modal":o.maskVisible,onClick:i[8]||(i[8]=(...e)=>r.onMaskClick&&r.onMaskClick(...e)),onKeydown:i[9]||(i[9]=(...e)=>r.onMaskKeydown&&r.onMaskKeydown(...e))},[a.createElementVNode("div",c,[a.createElementVNode("button",{class:"p-image-action p-link",onClick:i[2]||(i[2]=(...e)=>r.rotateRight&&r.rotateRight(...e)),type:"button","aria-label":r.rightAriaLabel},p,8,m),a.createElementVNode("button",{class:"p-image-action p-link",onClick:i[3]||(i[3]=(...e)=>r.rotateLeft&&r.rotateLeft(...e)),type:"button","aria-label":r.leftAriaLabel},d,8,u),a.createElementVNode("button",{class:"p-image-action p-link",onClick:i[4]||(i[4]=(...e)=>r.zoomOut&&r.zoomOut(...e)),type:"button",disabled:r.zoomDisabled,"aria-label":r.zoomOutAriaLabel},h,8,v),a.createElementVNode("button",{class:"p-image-action p-link",onClick:i[5]||(i[5]=(...e)=>r.zoomIn&&r.zoomIn(...e)),type:"button",disabled:r.zoomDisabled,"aria-label":r.zoomInAriaLabel},g,8,f),a.createElementVNode("button",{class:"p-image-action p-link",type:"button",onClick:i[6]||(i[6]=(...i)=>e.hidePreview&&e.hidePreview(...i)),"aria-label":r.closeAriaLabel,autofocus:""},b,8,k)]),a.createVNode(a.Transition,{name:"p-image-preview",onBeforeEnter:r.onBeforeEnter,onEnter:r.onEnter,onLeave:r.onLeave,onBeforeLeave:r.onBeforeLeave,onAfterLeave:r.onAfterLeave},{default:a.withCtx((()=>[o.previewVisible?(a.openBlock(),a.createElementBlock("div",w,[a.createElementVNode("img",{src:e.$attrs.src,class:"p-image-preview",style:a.normalizeStyle(r.imagePreviewStyle),onClick:i[7]||(i[7]=(...e)=>r.onPreviewImageClick&&r.onPreviewImageClick(...e))},null,12,y)])):a.createCommentVNode("",!0)])),_:1},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],42,s)),[[E]]):a.createCommentVNode("",!0)])),_:1})],6)},r}(primevue.focustrap,primevue.portal,primevue.utils,Vue);