primevue/image/image.esm.min.js

PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc

import e from"primevue/focustrap";import t from"primevue/icons/eye";import o from"primevue/icons/refresh";import i from"primevue/icons/searchminus";import r from"primevue/icons/searchplus";import n from"primevue/icons/times";import a from"primevue/icons/undo";import l from"primevue/portal";import{ZIndexUtils as c,DomHandler as s}from"primevue/utils";import u from"primevue/basecomponent";import m from"primevue/image/style";import{resolveComponent as p,resolveDirective as f,openBlock as v,createElementBlock as b,mergeProps as h,renderSlot as d,createElementVNode as y,createBlock as g,resolveDynamicComponent as k,createCommentVNode as w,createVNode as I,withCtx as C,withDirectives as L,normalizeProps as O,guardReactiveProps as B,Transition as P,normalizeClass as z,normalizeStyle as $}from"vue";var S={name:"Image",extends:{name:"BaseImage",extends:u,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}},style:m,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,emits:["show","hide","error"],mask:null,data:function(){return{maskVisible:!1,previewVisible:!1,rotate:0,scale:1}},beforeUnmount:function(){this.mask&&c.clear(this.container)},methods:{maskRef:function(e){this.mask=e},toolbarRef:function(e){this.toolbarRef=e},onImageClick:function(){var e=this;this.preview&&(s.blockBodyScroll(),this.maskVisible=!0,setTimeout((function(){e.previewVisible=!0}),25))},onPreviewImageClick:function(){this.previewClick=!0},onMaskClick:function(e){var t=s.isAttributeEquals(e.target,"data-pc-section-group","action")||e.target.closest('[data-pc-section-group="action"]');this.previewClick||t||(this.previewVisible=!1,this.rotate=0,this.scale=1),this.previewClick=!1},onMaskKeydown:function(e){var t=this;if("Escape"===e.code)this.hidePreview(),setTimeout((function(){s.focus(t.$refs.previewButton)}),200),e.preventDefault()},onError:function(){this.$emit("error")},rotateRight:function(){this.rotate+=90,this.previewClick=!0},rotateLeft:function(){this.rotate-=90,this.previewClick=!0},zoomIn:function(){this.scale=this.scale+.1,this.previewClick=!0},zoomOut:function(){this.scale=this.scale-.1,this.previewClick=!0},onBeforeEnter:function(){c.set("modal",this.mask,this.$primevue.config.zIndex.modal)},onEnter:function(){this.focus(),this.$emit("show")},onBeforeLeave:function(){!this.isUnstyled&&s.addClass(this.mask,"p-component-overlay-leave")},onLeave:function(){s.unblockBodyScroll(),this.$emit("hide")},onAfterLeave:function(e){c.clear(e),this.maskVisible=!1},focus:function(){var e=this.mask.querySelector("[autofocus]");e&&e.focus()},hidePreview:function(){this.previewVisible=!1,this.rotate=0,this.scale=1,s.unblockBodyScroll()}},computed:{containerClass:function(){return[this.cx("root"),this.class]},rotateClass:function(){return"p-image-preview-rotate-"+this.rotate},imagePreviewStyle:function(){return{transform:"rotate("+this.rotate+"deg) scale("+this.scale+")"}},isZoomInDisabled:function(){return this.zoomInDisabled||this.scale>=1.5},isZoomOutDisabled:function(){return this.zoomOutDisabled||this.scale<=.5},rightAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.rotateRight:void 0},leftAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.rotateLeft:void 0},zoomInAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.zoomIn:void 0},zoomOutAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.zoomOut:void 0},zoomImageAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.zoomImage:void 0},closeAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},components:{Portal:l,EyeIcon:t,RefreshIcon:o,UndoIcon:a,SearchMinusIcon:i,SearchPlusIcon:r,TimesIcon:n},directives:{focustrap:e}};function E(e){return E="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},E(e)}function A(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),o.push.apply(o,i)}return o}function x(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?A(Object(o),!0).forEach((function(t){j(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):A(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}function j(e,t,o){var i;return(t="symbol"==E(i=D(t,"string"))?i:String(i))in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function D(e,t){if("object"!=E(e)||!e)return e;var o=e[Symbol.toPrimitive];if(void 0!==o){var i=o.call(e,t||"default");if("object"!=E(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}var R=["aria-label"],V=["aria-modal"],M=["aria-label"],T=["aria-label"],K=["disabled","aria-label"],U=["disabled","aria-label"],Z=["aria-label"],q=["src"];S.render=function(e,t,o,i,r,n){var a=p("RefreshIcon"),l=p("UndoIcon"),c=p("SearchMinusIcon"),s=p("SearchPlusIcon"),u=p("TimesIcon"),m=p("Portal"),S=f("focustrap");return v(),b("span",h({class:n.containerClass,style:e.style},e.ptm("root"),{"data-pc-name":"image"}),[d(e.$slots,"image",{onError:n.onError,errorCallback:n.onError},(function(){return[y("img",h({style:e.imageStyle,class:[e.cx("image"),e.imageClass],onError:t[0]||(t[0]=function(){return n.onError&&n.onError.apply(n,arguments)})},x(x({},e.$attrs),e.ptm("image"))),null,16)]})),e.preview?(v(),b("button",h({key:0,ref:"previewButton","aria-label":n.zoomImageAriaLabel,type:"button",class:e.cx("button"),onClick:t[1]||(t[1]=function(){return n.onImageClick&&n.onImageClick.apply(n,arguments)})},x(x({},e.previewButtonProps),e.ptm("button"))),[d(e.$slots,"indicatoricon",{},(function(){return[(v(),g(k(e.indicatorIcon?"i":"EyeIcon"),h({class:e.cx("icon")},e.ptm("icon")),null,16,["class"]))]}))],16,R)):w("",!0),I(m,null,{default:C((function(){return[r.maskVisible?L((v(),b("div",h({key:0,ref:n.maskRef,role:"dialog",class:e.cx("mask"),"aria-modal":r.maskVisible,onClick:t[8]||(t[8]=function(){return n.onMaskClick&&n.onMaskClick.apply(n,arguments)}),onKeydown:t[9]||(t[9]=function(){return n.onMaskKeydown&&n.onMaskKeydown.apply(n,arguments)})},e.ptm("mask")),[y("div",h({class:e.cx("toolbar")},e.ptm("toolbar")),[y("button",h({class:e.cx("rotateRightButton"),onClick:t[2]||(t[2]=function(){return n.rotateRight&&n.rotateRight.apply(n,arguments)}),type:"button","aria-label":n.rightAriaLabel},e.ptm("rotateRightButton"),{"data-pc-group-section":"action"}),[d(e.$slots,"refresh",{},(function(){return[I(a,O(B(e.ptm("rotateRightIcon"))),null,16)]}))],16,M),y("button",h({class:e.cx("rotateLeftButton"),onClick:t[3]||(t[3]=function(){return n.rotateLeft&&n.rotateLeft.apply(n,arguments)}),type:"button","aria-label":n.leftAriaLabel},e.ptm("rotateLeftButton"),{"data-pc-group-section":"action"}),[d(e.$slots,"undo",{},(function(){return[I(l,O(B(e.ptm("rotateLeftIcon"))),null,16)]}))],16,T),y("button",h({class:e.cx("zoomOutButton"),onClick:t[4]||(t[4]=function(){return n.zoomOut&&n.zoomOut.apply(n,arguments)}),type:"button",disabled:n.isZoomOutDisabled,"aria-label":n.zoomOutAriaLabel},e.ptm("zoomOutButton"),{"data-pc-group-section":"action"}),[d(e.$slots,"zoomout",{},(function(){return[I(c,O(B(e.ptm("zoomOutIcon"))),null,16)]}))],16,K),y("button",h({class:e.cx("zoomInButton"),onClick:t[5]||(t[5]=function(){return n.zoomIn&&n.zoomIn.apply(n,arguments)}),type:"button",disabled:n.isZoomInDisabled,"aria-label":n.zoomInAriaLabel},e.ptm("zoomInButton"),{"data-pc-group-section":"action"}),[d(e.$slots,"zoomin",{},(function(){return[I(s,O(B(e.ptm("zoomInIcon"))),null,16)]}))],16,U),y("button",h({class:e.cx("closeButton"),type:"button",onClick:t[6]||(t[6]=function(){return n.hidePreview&&n.hidePreview.apply(n,arguments)}),"aria-label":n.closeAriaLabel,autofocus:""},e.ptm("closeButton"),{"data-pc-group-section":"action"}),[d(e.$slots,"close",{},(function(){return[I(u,O(B(e.ptm("closeIcon"))),null,16)]}))],16,Z)],16),I(P,h({name:"p-image-preview",onBeforeEnter:n.onBeforeEnter,onEnter:n.onEnter,onLeave:n.onLeave,onBeforeLeave:n.onBeforeLeave,onAfterLeave:n.onAfterLeave},e.ptm("transition")),{default:C((function(){return[r.previewVisible?(v(),b("div",O(h({key:0},e.ptm("previewContainer"))),[d(e.$slots,"preview",{class:z(e.cx("preview")),style:$(n.imagePreviewStyle),onClick:n.onPreviewImageClick,previewCallback:n.onPreviewImageClick},(function(){return[y("img",h({src:e.$attrs.src,class:e.cx("preview"),style:n.imagePreviewStyle,onClick:t[7]||(t[7]=function(){return n.onPreviewImageClick&&n.onPreviewImageClick.apply(n,arguments)})},e.ptm("preview")),null,16,q)]}))],16)):w("",!0)]})),_:3},16,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],16,V)),[[S]]):w("",!0)]})),_:3})],16)};export{S as default};