primevue/image/image.cjs.min.js

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

"use strict";var e=require("primevue/basecomponent"),t=require("primevue/focustrap"),o=require("primevue/icons/eye"),i=require("primevue/icons/refresh"),r=require("primevue/icons/searchminus"),a=require("primevue/icons/searchplus"),n=require("primevue/icons/times"),l=require("primevue/icons/undo"),s=require("primevue/portal"),c=require("primevue/utils"),m=require("vue");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=p(e),d=p(t),v=p(o),h=p(i),g=p(r),f=p(a),b=p(n),k=p(l),y=p(s),w={name:"Image",extends:u.default,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},indicatorIcon:{type:String,default:void 0},zoomInDisabled:{type:Boolean,default:!1},zoomOutDisabled:{type:Boolean,default:!1}},mask:null,data:()=>({maskVisible:!1,previewVisible:!1,rotate:0,scale:1}),beforeUnmount(){this.mask&&c.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(e){[e.target.classList].includes("p-image-action")||e.target.closest(".p-image-action")||(this.previewClick||(this.previewVisible=!1,this.rotate=0,this.scale=1),this.previewClick=!1)},onMaskKeydown(e){if("Escape"===e.code)this.onMaskClick(),setTimeout((()=>{c.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(){c.ZIndexUtils.set("modal",this.mask,this.$primevue.config.zIndex.modal)},onEnter(){this.focus(),this.$emit("show")},onBeforeLeave(){c.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(e){c.ZIndexUtils.clear(e),this.maskVisible=!1},focus(){let e=this.mask.querySelector("[autofocus]");e&&e.focus()},hidePreview(){this.previewVisible=!1,this.rotate=0,this.scale=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+")"}},isZoomInDisabled(){return this.zoomInDisabled||this.scale>=1.5},isZoomOutDisabled(){return this.zoomOutDisabled||this.scale<=.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:y.default,EyeIcon:v.default,RefreshIcon:h.default,UndoIcon:k.default,SearchMinusIcon:g.default,SearchPlusIcon:f.default,TimesIcon:b.default},directives:{focustrap:d.default}};const C=["aria-modal"],I=["aria-label"],P=["aria-label"],z=["disabled","aria-label"],B=["disabled","aria-label"],E=["aria-label"],L=["src"];!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.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-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"),w.render=function(e,t,o,i,r,a){const n=m.resolveComponent("RefreshIcon"),l=m.resolveComponent("UndoIcon"),s=m.resolveComponent("SearchMinusIcon"),c=m.resolveComponent("SearchPlusIcon"),p=m.resolveComponent("TimesIcon"),u=m.resolveComponent("Portal"),d=m.resolveDirective("focustrap");return m.openBlock(),m.createElementBlock("span",m.mergeProps({class:a.containerClass,style:o.style},e.ptm("root")),[m.renderSlot(e.$slots,"image",{class:m.normalizeClass(o.imageClass),style:m.normalizeStyle(o.imageStyle),onError:a.onError},(()=>[m.createElementVNode("img",m.mergeProps({style:o.imageStyle,class:o.imageClass,onError:t[0]||(t[0]=(...e)=>a.onError&&a.onError(...e))},{...e.$attrs,...e.ptm("image")}),null,16)])),o.preview?(m.openBlock(),m.createElementBlock("button",m.mergeProps({key:0,ref:"previewButton",class:"p-image-preview-indicator",onClick:t[1]||(t[1]=(...e)=>a.onImageClick&&a.onImageClick(...e))},{...o.previewButtonProps,...e.ptm("button")}),[m.renderSlot(e.$slots,"indicatoricon",{},(()=>[(m.openBlock(),m.createBlock(m.resolveDynamicComponent(o.indicatorIcon?"i":"EyeIcon"),m.mergeProps({class:"p-image-preview-icon"},e.ptm("icon")),null,16))]))],16)):m.createCommentVNode("",!0),m.createVNode(u,null,{default:m.withCtx((()=>[r.maskVisible?m.withDirectives((m.openBlock(),m.createElementBlock("div",m.mergeProps({key:0,ref:a.maskRef,role:"dialog",class:a.maskClass,"aria-modal":r.maskVisible,onClick:t[8]||(t[8]=(...e)=>a.onMaskClick&&a.onMaskClick(...e)),onKeydown:t[9]||(t[9]=(...e)=>a.onMaskKeydown&&a.onMaskKeydown(...e))},e.ptm("mask")),[m.createElementVNode("div",m.mergeProps({class:"p-image-toolbar"},e.ptm("toolbar")),[m.createElementVNode("button",m.mergeProps({class:"p-image-action p-link",onClick:t[2]||(t[2]=(...e)=>a.rotateRight&&a.rotateRight(...e)),type:"button","aria-label":a.rightAriaLabel},e.ptm("rotateRightButton")),[m.renderSlot(e.$slots,"refresh",{},(()=>[m.createVNode(n,m.normalizeProps(m.guardReactiveProps(e.ptm("rotateRightIcon"))),null,16)]))],16,I),m.createElementVNode("button",m.mergeProps({class:"p-image-action p-link",onClick:t[3]||(t[3]=(...e)=>a.rotateLeft&&a.rotateLeft(...e)),type:"button","aria-label":a.leftAriaLabel},e.ptm("rotateLeftButton")),[m.renderSlot(e.$slots,"undo",{},(()=>[m.createVNode(l,m.normalizeProps(m.guardReactiveProps(e.ptm("rotateLeftIcon"))),null,16)]))],16,P),m.createElementVNode("button",m.mergeProps({class:["p-image-action p-link",{"p-disabled":a.isZoomOutDisabled}],onClick:t[4]||(t[4]=(...e)=>a.zoomOut&&a.zoomOut(...e)),type:"button",disabled:a.isZoomOutDisabled,"aria-label":a.zoomOutAriaLabel},e.ptm("zoomOutButton")),[m.renderSlot(e.$slots,"zoomout",{},(()=>[m.createVNode(s,m.normalizeProps(m.guardReactiveProps(e.ptm("zoomOutIcon"))),null,16)]))],16,z),m.createElementVNode("button",m.mergeProps({class:["p-image-action p-link",{"p-disabled":a.isZoomInDisabled}],onClick:t[5]||(t[5]=(...e)=>a.zoomIn&&a.zoomIn(...e)),type:"button",disabled:a.isZoomInDisabled,"aria-label":a.zoomInAriaLabel},e.ptm("zoomInButton")),[m.renderSlot(e.$slots,"zoomin",{},(()=>[m.createVNode(c,m.normalizeProps(m.guardReactiveProps(e.ptm("zoomInIcon"))),null,16)]))],16,B),m.createElementVNode("button",m.mergeProps({class:"p-image-action p-link",type:"button",onClick:t[6]||(t[6]=(...e)=>a.hidePreview&&a.hidePreview(...e)),"aria-label":a.closeAriaLabel,autofocus:""},e.ptm("closeButton")),[m.renderSlot(e.$slots,"close",{},(()=>[m.createVNode(p,m.normalizeProps(m.guardReactiveProps(e.ptm("closeIcon"))),null,16)]))],16,E)],16),m.createVNode(m.Transition,{name:"p-image-preview",onBeforeEnter:a.onBeforeEnter,onEnter:a.onEnter,onLeave:a.onLeave,onBeforeLeave:a.onBeforeLeave,onAfterLeave:a.onAfterLeave},{default:m.withCtx((()=>[r.previewVisible?(m.openBlock(),m.createElementBlock("div",m.normalizeProps(m.mergeProps({key:0},e.ptm("previewContainer"))),[m.renderSlot(e.$slots,"preview",{class:"p-image-preview",style:m.normalizeStyle(a.imagePreviewStyle),onClick:a.onPreviewImageClick},(()=>[m.createElementVNode("img",m.mergeProps({src:e.$attrs.src,class:"p-image-preview",style:a.imagePreviewStyle,onClick:t[7]||(t[7]=(...e)=>a.onPreviewImageClick&&a.onPreviewImageClick(...e))},e.ptm("preview")),null,16,L)]))],16)):m.createCommentVNode("",!0)])),_:3},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],16,C)),[[d]]):m.createCommentVNode("",!0)])),_:3})],16)},module.exports=w;