primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 8.63 kB
JavaScript
import e from"primevue/basecomponent";import i from"primevue/focustrap";import t from"primevue/icons/eye";import o from"primevue/icons/refresh";import a from"primevue/icons/searchminus";import n from"primevue/icons/searchplus";import r from"primevue/icons/times";import s from"primevue/icons/undo";import l from"primevue/portal";import{ZIndexUtils as m,DomHandler as c}from"primevue/utils";import{resolveComponent as p,resolveDirective as u,openBlock as v,createElementBlock as d,mergeProps as h,renderSlot as f,normalizeClass as g,normalizeStyle as b,createElementVNode as k,createBlock as w,resolveDynamicComponent as y,createCommentVNode as C,createVNode as I,withCtx as L,withDirectives as z,normalizeProps as $,guardReactiveProps as B,Transition as E}from"vue";var A={name:"Image",extends:e,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&&m.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.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(){m.set("modal",this.mask,this.$primevue.config.zIndex.modal)},onEnter(){this.focus(),this.$emit("show")},onBeforeLeave(){c.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(e){m.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:l,EyeIcon:t,RefreshIcon:o,UndoIcon:s,SearchMinusIcon:a,SearchPlusIcon:n,TimesIcon:r},directives:{focustrap:i}};const P=["aria-modal"],S=["aria-label"],O=["aria-label"],x=["disabled","aria-label"],R=["disabled","aria-label"],D=["aria-label"],V=["src"];!function(e,i){void 0===i&&(i={});var t=i.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&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"),A.render=function(e,i,t,o,a,n){const r=p("RefreshIcon"),s=p("UndoIcon"),l=p("SearchMinusIcon"),m=p("SearchPlusIcon"),c=p("TimesIcon"),A=p("Portal"),M=u("focustrap");return v(),d("span",h({class:n.containerClass,style:t.style},e.ptm("root")),[f(e.$slots,"image",{class:g(t.imageClass),style:b(t.imageStyle),onError:n.onError},(()=>[k("img",h({style:t.imageStyle,class:t.imageClass,onError:i[0]||(i[0]=(...e)=>n.onError&&n.onError(...e))},{...e.$attrs,...e.ptm("image")}),null,16)])),t.preview?(v(),d("button",h({key:0,ref:"previewButton",class:"p-image-preview-indicator",onClick:i[1]||(i[1]=(...e)=>n.onImageClick&&n.onImageClick(...e))},{...t.previewButtonProps,...e.ptm("button")}),[f(e.$slots,"indicatoricon",{},(()=>[(v(),w(y(t.indicatorIcon?"i":"EyeIcon"),h({class:"p-image-preview-icon"},e.ptm("icon")),null,16))]))],16)):C("",!0),I(A,null,{default:L((()=>[a.maskVisible?z((v(),d("div",h({key:0,ref:n.maskRef,role:"dialog",class:n.maskClass,"aria-modal":a.maskVisible,onClick:i[8]||(i[8]=(...e)=>n.onMaskClick&&n.onMaskClick(...e)),onKeydown:i[9]||(i[9]=(...e)=>n.onMaskKeydown&&n.onMaskKeydown(...e))},e.ptm("mask")),[k("div",h({class:"p-image-toolbar"},e.ptm("toolbar")),[k("button",h({class:"p-image-action p-link",onClick:i[2]||(i[2]=(...e)=>n.rotateRight&&n.rotateRight(...e)),type:"button","aria-label":n.rightAriaLabel},e.ptm("rotateRightButton")),[f(e.$slots,"refresh",{},(()=>[I(r,$(B(e.ptm("rotateRightIcon"))),null,16)]))],16,S),k("button",h({class:"p-image-action p-link",onClick:i[3]||(i[3]=(...e)=>n.rotateLeft&&n.rotateLeft(...e)),type:"button","aria-label":n.leftAriaLabel},e.ptm("rotateLeftButton")),[f(e.$slots,"undo",{},(()=>[I(s,$(B(e.ptm("rotateLeftIcon"))),null,16)]))],16,O),k("button",h({class:["p-image-action p-link",{"p-disabled":n.isZoomOutDisabled}],onClick:i[4]||(i[4]=(...e)=>n.zoomOut&&n.zoomOut(...e)),type:"button",disabled:n.isZoomOutDisabled,"aria-label":n.zoomOutAriaLabel},e.ptm("zoomOutButton")),[f(e.$slots,"zoomout",{},(()=>[I(l,$(B(e.ptm("zoomOutIcon"))),null,16)]))],16,x),k("button",h({class:["p-image-action p-link",{"p-disabled":n.isZoomInDisabled}],onClick:i[5]||(i[5]=(...e)=>n.zoomIn&&n.zoomIn(...e)),type:"button",disabled:n.isZoomInDisabled,"aria-label":n.zoomInAriaLabel},e.ptm("zoomInButton")),[f(e.$slots,"zoomin",{},(()=>[I(m,$(B(e.ptm("zoomInIcon"))),null,16)]))],16,R),k("button",h({class:"p-image-action p-link",type:"button",onClick:i[6]||(i[6]=(...e)=>n.hidePreview&&n.hidePreview(...e)),"aria-label":n.closeAriaLabel,autofocus:""},e.ptm("closeButton")),[f(e.$slots,"close",{},(()=>[I(c,$(B(e.ptm("closeIcon"))),null,16)]))],16,D)],16),I(E,{name:"p-image-preview",onBeforeEnter:n.onBeforeEnter,onEnter:n.onEnter,onLeave:n.onLeave,onBeforeLeave:n.onBeforeLeave,onAfterLeave:n.onAfterLeave},{default:L((()=>[a.previewVisible?(v(),d("div",$(h({key:0},e.ptm("previewContainer"))),[f(e.$slots,"preview",{class:"p-image-preview",style:b(n.imagePreviewStyle),onClick:n.onPreviewImageClick},(()=>[k("img",h({src:e.$attrs.src,class:"p-image-preview",style:n.imagePreviewStyle,onClick:i[7]||(i[7]=(...e)=>n.onPreviewImageClick&&n.onPreviewImageClick(...e))},e.ptm("preview")),null,16,V)]))],16)):C("",!0)])),_:3},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],16,P)),[[M]]):C("",!0)])),_:3})],16)};export{A as default};