primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 8.06 kB
JavaScript
this.primevue=this.primevue||{},this.primevue.image=function(e,t,i,o,a,n,r,l,s,c){"use strict";function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=m(e),u=m(t),d=m(i),v=m(o),h=m(a),f=m(n),g=m(r),k={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},indicatorIcon:{type:String,default:void 0}},mask:null,data:()=>({maskVisible:!1,previewVisible:!1,rotate:0,scale:1}),beforeUnmount(){this.mask&&s.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((()=>{s.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(){s.ZIndexUtils.set("modal",this.mask,this.$primevue.config.zIndex.modal)},onEnter(){this.focus(),this.$emit("show")},onBeforeLeave(){s.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(e){s.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:m(l).default,EyeIcon:u.default,RefreshIcon:d.default,UndoIcon:g.default,SearchMinusIcon:v.default,SearchPlusIcon:h.default,TimesIcon:f.default},directives:{focustrap:p.default}};const b=["aria-modal"],y={class:"p-image-toolbar"},w=["aria-label"],C=["aria-label"],I=["disabled","aria-label"],E=["disabled","aria-label"],V=["aria-label"],L={key:0},B=["src"];return function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===i&&o.firstChild?o.insertBefore(a,o.firstChild):o.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.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"),k.render=function(e,t,i,o,a,n){const r=c.resolveComponent("RefreshIcon"),l=c.resolveComponent("UndoIcon"),s=c.resolveComponent("SearchMinusIcon"),m=c.resolveComponent("SearchPlusIcon"),p=c.resolveComponent("TimesIcon"),u=c.resolveComponent("Portal"),d=c.resolveDirective("focustrap");return c.openBlock(),c.createElementBlock("span",{class:c.normalizeClass(n.containerClass),style:c.normalizeStyle(i.style)},[c.createElementVNode("img",c.mergeProps(e.$attrs,{style:i.imageStyle,class:i.imageClass,onError:t[0]||(t[0]=(...e)=>n.onError&&n.onError(...e))}),null,16),i.preview?(c.openBlock(),c.createElementBlock("button",c.mergeProps({key:0,ref:"previewButton",class:"p-image-preview-indicator",onClick:t[1]||(t[1]=(...e)=>n.onImageClick&&n.onImageClick(...e))},i.previewButtonProps),[c.renderSlot(e.$slots,"indicatoricon",{},(()=>[(c.openBlock(),c.createBlock(c.resolveDynamicComponent(i.indicatorIcon?"i":"EyeIcon"),{class:"p-image-preview-icon"}))]))],16)):c.createCommentVNode("",!0),c.createVNode(u,null,{default:c.withCtx((()=>[a.maskVisible?c.withDirectives((c.openBlock(),c.createElementBlock("div",{key:0,ref:n.maskRef,role:"dialog",class:c.normalizeClass(n.maskClass),"aria-modal":a.maskVisible,onClick:t[8]||(t[8]=(...e)=>n.onMaskClick&&n.onMaskClick(...e)),onKeydown:t[9]||(t[9]=(...e)=>n.onMaskKeydown&&n.onMaskKeydown(...e))},[c.createElementVNode("div",y,[c.createElementVNode("button",{class:"p-image-action p-link",onClick:t[2]||(t[2]=(...e)=>n.rotateRight&&n.rotateRight(...e)),type:"button","aria-label":n.rightAriaLabel},[c.renderSlot(e.$slots,"refresh",{},(()=>[c.createVNode(r)]))],8,w),c.createElementVNode("button",{class:"p-image-action p-link",onClick:t[3]||(t[3]=(...e)=>n.rotateLeft&&n.rotateLeft(...e)),type:"button","aria-label":n.leftAriaLabel},[c.renderSlot(e.$slots,"undo",{},(()=>[c.createVNode(l)]))],8,C),c.createElementVNode("button",{class:"p-image-action p-link",onClick:t[4]||(t[4]=(...e)=>n.zoomOut&&n.zoomOut(...e)),type:"button",disabled:n.zoomDisabled,"aria-label":n.zoomOutAriaLabel},[c.renderSlot(e.$slots,"zoomout",{},(()=>[c.createVNode(s)]))],8,I),c.createElementVNode("button",{class:"p-image-action p-link",onClick:t[5]||(t[5]=(...e)=>n.zoomIn&&n.zoomIn(...e)),type:"button",disabled:n.zoomDisabled,"aria-label":n.zoomInAriaLabel},[c.renderSlot(e.$slots,"zoomin",{},(()=>[c.createVNode(m)]))],8,E),c.createElementVNode("button",{class:"p-image-action p-link",type:"button",onClick:t[6]||(t[6]=(...t)=>e.hidePreview&&e.hidePreview(...t)),"aria-label":n.closeAriaLabel,autofocus:""},[c.renderSlot(e.$slots,"close",{},(()=>[c.createVNode(p)]))],8,V)]),c.createVNode(c.Transition,{name:"p-image-preview",onBeforeEnter:n.onBeforeEnter,onEnter:n.onEnter,onLeave:n.onLeave,onBeforeLeave:n.onBeforeLeave,onAfterLeave:n.onAfterLeave},{default:c.withCtx((()=>[a.previewVisible?(c.openBlock(),c.createElementBlock("div",L,[c.createElementVNode("img",{src:e.$attrs.src,class:"p-image-preview",style:c.normalizeStyle(n.imagePreviewStyle),onClick:t[7]||(t[7]=(...e)=>n.onPreviewImageClick&&n.onPreviewImageClick(...e))},null,12,B)])):c.createCommentVNode("",!0)])),_:1},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],42,b)),[[d]]):c.createCommentVNode("",!0)])),_:3})],6)},k}(primevue.focustrap,primevue.icons.eye,primevue.icons.refresh,primevue.icons.searchminus,primevue.icons.searchplus,primevue.icons.times,primevue.icons.undo,primevue.portal,primevue.utils,Vue);