primevue 3.12.4 → 3.13.0

package/image/Image.vue

@@ -6,7 +6,7 @@
                 <i class="p-image-preview-icon pi pi-eye"></i>
             </slot>
         </div>
-        <Teleport to="body">
+        <Portal>
             <div :ref="maskRef" :class="maskClass" v-if="maskVisible" @click="onMaskClick">
                 <div class="p-image-toolbar">
                     <button class="p-image-action p-link" @click="rotateRight" type="button">
@@ -31,12 +31,13 @@
                     </div>
                 </transition>
             </div>
-        </Teleport>
+        </Portal>
     </span>
 </template>
 
 <script>
 import {DomHandler,ZIndexUtils} from 'primevue/utils';
+import Portal from 'primevue/portal';
 
 export default {
     name: 'Image',
@@ -143,6 +144,9 @@ export default {
         zoomDisabled() {
             return this.scale <= 0.5 || this.scale >= 1.5;
         }
+    },
+    components: {
+        'Portal': Portal
     }
 }
 </script>

package/image/image.cjs.js

@@ -1,8 +1,13 @@
 'use strict';
 
 var utils = require('primevue/utils');
+var Portal = require('primevue/portal');
 var vue = require('vue');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
+
 var script = {
     name: 'Image',
     inheritAttrs: false,
@@ -108,110 +113,126 @@ var script = {
         zoomDisabled() {
             return this.scale <= 0.5 || this.scale >= 1.5;
         }
+    },
+    components: {
+        'Portal': Portal__default["default"]
     }
 };
 
-const _hoisted_1 = /*#__PURE__*/vue.createVNode("i", { class: "p-image-preview-icon pi pi-eye" }, null, -1);
+const _hoisted_1 = /*#__PURE__*/vue.createElementVNode("i", { class: "p-image-preview-icon pi pi-eye" }, null, -1);
 const _hoisted_2 = { class: "p-image-toolbar" };
-const _hoisted_3 = /*#__PURE__*/vue.createVNode("i", { class: "pi pi-refresh" }, null, -1);
-const _hoisted_4 = /*#__PURE__*/vue.createVNode("i", { class: "pi pi-undo" }, null, -1);
-const _hoisted_5 = /*#__PURE__*/vue.createVNode("i", { class: "pi pi-search-minus" }, null, -1);
-const _hoisted_6 = /*#__PURE__*/vue.createVNode("i", { class: "pi pi-search-plus" }, null, -1);
-const _hoisted_7 = /*#__PURE__*/vue.createVNode("i", { class: "pi pi-times" }, null, -1);
-const _hoisted_8 = { key: 0 };
+const _hoisted_3 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-refresh" }, null, -1);
+const _hoisted_4 = [
+  _hoisted_3
+];
+const _hoisted_5 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-undo" }, null, -1);
+const _hoisted_6 = [
+  _hoisted_5
+];
+const _hoisted_7 = ["disabled"];
+const _hoisted_8 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-search-minus" }, null, -1);
+const _hoisted_9 = [
+  _hoisted_8
+];
+const _hoisted_10 = ["disabled"];
+const _hoisted_11 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-search-plus" }, null, -1);
+const _hoisted_12 = [
+  _hoisted_11
+];
+const _hoisted_13 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-times" }, null, -1);
+const _hoisted_14 = [
+  _hoisted_13
+];
+const _hoisted_15 = { key: 0 };
+const _hoisted_16 = ["src"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createBlock("span", {
-    class: $options.containerClass,
-    style: $props.style
+  const _component_Portal = vue.resolveComponent("Portal");
+
+  return (vue.openBlock(), vue.createElementBlock("span", {
+    class: vue.normalizeClass($options.containerClass),
+    style: vue.normalizeStyle($props.style)
   }, [
-    vue.createVNode("img", vue.mergeProps(_ctx.$attrs, {
+    vue.createElementVNode("img", vue.mergeProps(_ctx.$attrs, {
       style: $props.imageStyle,
       class: $props.imageClass
     }), null, 16),
     ($props.preview)
-      ? (vue.openBlock(), vue.createBlock("div", {
+      ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           class: "p-image-preview-indicator",
-          onClick: _cache[1] || (_cache[1] = (...args) => ($options.onImageClick && $options.onImageClick(...args)))
+          onClick: _cache[0] || (_cache[0] = (...args) => ($options.onImageClick && $options.onImageClick(...args)))
         }, [
           vue.renderSlot(_ctx.$slots, "indicator", {}, () => [
             _hoisted_1
           ])
         ]))
       : vue.createCommentVNode("", true),
-    (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-      ($data.maskVisible)
-        ? (vue.openBlock(), vue.createBlock("div", {
-            key: 0,
-            ref: $options.maskRef,
-            class: $options.maskClass,
-            onClick: _cache[8] || (_cache[8] = (...args) => ($options.onMaskClick && $options.onMaskClick(...args)))
-          }, [
-            vue.createVNode("div", _hoisted_2, [
-              vue.createVNode("button", {
-                class: "p-image-action p-link",
-                onClick: _cache[2] || (_cache[2] = (...args) => ($options.rotateRight && $options.rotateRight(...args))),
-                type: "button"
-              }, [
-                _hoisted_3
-              ]),
-              vue.createVNode("button", {
-                class: "p-image-action p-link",
-                onClick: _cache[3] || (_cache[3] = (...args) => ($options.rotateLeft && $options.rotateLeft(...args))),
-                type: "button"
-              }, [
-                _hoisted_4
-              ]),
-              vue.createVNode("button", {
-                class: "p-image-action p-link",
-                onClick: _cache[4] || (_cache[4] = (...args) => ($options.zoomOut && $options.zoomOut(...args))),
-                type: "button",
-                disabled: $options.zoomDisabled
-              }, [
-                _hoisted_5
-              ], 8, ["disabled"]),
-              vue.createVNode("button", {
-                class: "p-image-action p-link",
-                onClick: _cache[5] || (_cache[5] = (...args) => ($options.zoomIn && $options.zoomIn(...args))),
-                type: "button",
-                disabled: $options.zoomDisabled
-              }, [
-                _hoisted_6
-              ], 8, ["disabled"]),
-              vue.createVNode("button", {
-                class: "p-image-action p-link",
-                type: "button",
-                onClick: _cache[6] || (_cache[6] = (...args) => (_ctx.hidePreview && _ctx.hidePreview(...args)))
-              }, [
-                _hoisted_7
-              ])
-            ]),
-            vue.createVNode(vue.Transition, {
-              name: "p-image-preview",
-              onBeforeEnter: $options.onBeforeEnter,
-              onEnter: $options.onEnter,
-              onLeave: $options.onLeave,
-              onBeforeLeave: $options.onBeforeLeave,
-              onAfterLeave: $options.onAfterLeave
-            }, {
-              default: vue.withCtx(() => [
-                ($data.previewVisible)
-                  ? (vue.openBlock(), vue.createBlock("div", _hoisted_8, [
-                      vue.createVNode("img", {
-                        src: _ctx.$attrs.src,
-                        class: "p-image-preview",
-                        style: $options.imagePreviewStyle,
-                        onClick: _cache[7] || (_cache[7] = (...args) => ($options.onPreviewImageClick && $options.onPreviewImageClick(...args)))
-                      }, null, 12, ["src"])
-                    ]))
-                  : vue.createCommentVNode("", true)
+    vue.createVNode(_component_Portal, null, {
+      default: vue.withCtx(() => [
+        ($data.maskVisible)
+          ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              ref: $options.maskRef,
+              class: vue.normalizeClass($options.maskClass),
+              onClick: _cache[7] || (_cache[7] = (...args) => ($options.onMaskClick && $options.onMaskClick(...args)))
+            }, [
+              vue.createElementVNode("div", _hoisted_2, [
+                vue.createElementVNode("button", {
+                  class: "p-image-action p-link",
+                  onClick: _cache[1] || (_cache[1] = (...args) => ($options.rotateRight && $options.rotateRight(...args))),
+                  type: "button"
+                }, _hoisted_4),
+                vue.createElementVNode("button", {
+                  class: "p-image-action p-link",
+                  onClick: _cache[2] || (_cache[2] = (...args) => ($options.rotateLeft && $options.rotateLeft(...args))),
+                  type: "button"
+                }, _hoisted_6),
+                vue.createElementVNode("button", {
+                  class: "p-image-action p-link",
+                  onClick: _cache[3] || (_cache[3] = (...args) => ($options.zoomOut && $options.zoomOut(...args))),
+                  type: "button",
+                  disabled: $options.zoomDisabled
+                }, _hoisted_9, 8, _hoisted_7),
+                vue.createElementVNode("button", {
+                  class: "p-image-action p-link",
+                  onClick: _cache[4] || (_cache[4] = (...args) => ($options.zoomIn && $options.zoomIn(...args))),
+                  type: "button",
+                  disabled: $options.zoomDisabled
+                }, _hoisted_12, 8, _hoisted_10),
+                vue.createElementVNode("button", {
+                  class: "p-image-action p-link",
+                  type: "button",
+                  onClick: _cache[5] || (_cache[5] = (...args) => (_ctx.hidePreview && _ctx.hidePreview(...args)))
+                }, _hoisted_14)
               ]),
-              _: 1
-            }, 8, ["onBeforeEnter", "onEnter", "onLeave", "onBeforeLeave", "onAfterLeave"])
-          ], 2))
-        : vue.createCommentVNode("", true)
-    ]))
+              vue.createVNode(vue.Transition, {
+                name: "p-image-preview",
+                onBeforeEnter: $options.onBeforeEnter,
+                onEnter: $options.onEnter,
+                onLeave: $options.onLeave,
+                onBeforeLeave: $options.onBeforeLeave,
+                onAfterLeave: $options.onAfterLeave
+              }, {
+                default: vue.withCtx(() => [
+                  ($data.previewVisible)
+                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15, [
+                        vue.createElementVNode("img", {
+                          src: _ctx.$attrs.src,
+                          class: "p-image-preview",
+                          style: vue.normalizeStyle($options.imagePreviewStyle),
+                          onClick: _cache[6] || (_cache[6] = (...args) => ($options.onPreviewImageClick && $options.onPreviewImageClick(...args)))
+                        }, null, 12, _hoisted_16)
+                      ]))
+                    : vue.createCommentVNode("", true)
+                ]),
+                _: 1
+              }, 8, ["onBeforeEnter", "onEnter", "onLeave", "onBeforeLeave", "onAfterLeave"])
+            ], 2))
+          : vue.createCommentVNode("", true)
+      ]),
+      _: 1
+    })
   ], 6))
 }
 

package/image/image.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),i=require("vue"),t={name:"Image",inheritAttrs:!1,props:{preview:{type:Boolean,default:!1},class:null,style:null,imageStyle:null,imageClass:null},mask:null,data:()=>({maskVisible:!1,previewVisible:!1,rotate:0,scale:1}),beforeUnmount(){this.mask&&e.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},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(){e.ZIndexUtils.set("modal",this.mask,this.$primevue.config.zIndex.modal)},onEnter(){this.$emit("show")},onBeforeLeave(){e.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(i){e.ZIndexUtils.clear(i),this.maskVisible=!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+")"}},zoomDisabled(){return this.scale<=.5||this.scale>=1.5}}};const n=i.createVNode("i",{class:"p-image-preview-icon pi pi-eye"},null,-1),a={class:"p-image-toolbar"},o=i.createVNode("i",{class:"pi pi-refresh"},null,-1),s=i.createVNode("i",{class:"pi pi-undo"},null,-1),r=i.createVNode("i",{class:"pi pi-search-minus"},null,-1),l=i.createVNode("i",{class:"pi pi-search-plus"},null,-1),c=i.createVNode("i",{class:"pi pi-times"},null,-1),p={key:0};!function(e,i){void 0===i&&(i={});var t=i.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-image-mask {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: 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: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    opacity: 0;\n    -webkit-transition: opacity .3s;\n    transition: opacity .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: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-image-action.p-link {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-image-preview {\n    -webkit-transition: -webkit-transform .15s;\n    transition: -webkit-transform .15s;\n    transition: transform .15s;\n    transition: transform .15s, -webkit-transform .15s;\n    max-width: 100vw;\n    max-height: 100vh;\n}\n.p-image-preview-enter-active {\n    -webkit-transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-image-preview-leave-active {\n    -webkit-transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n}\n.p-image-preview-enter-from,\n.p-image-preview-leave-to {\n    opacity: 0;\n    -webkit-transform: scale(0.7);\n            transform: scale(0.7);\n}\n"),t.render=function(e,t,m,d,k,b){return i.openBlock(),i.createBlock("span",{class:b.containerClass,style:m.style},[i.createVNode("img",i.mergeProps(e.$attrs,{style:m.imageStyle,class:m.imageClass}),null,16),m.preview?(i.openBlock(),i.createBlock("div",{key:0,class:"p-image-preview-indicator",onClick:t[1]||(t[1]=(...e)=>b.onImageClick&&b.onImageClick(...e))},[i.renderSlot(e.$slots,"indicator",{},(()=>[n]))])):i.createCommentVNode("",!0),(i.openBlock(),i.createBlock(i.Teleport,{to:"body"},[k.maskVisible?(i.openBlock(),i.createBlock("div",{key:0,ref:b.maskRef,class:b.maskClass,onClick:t[8]||(t[8]=(...e)=>b.onMaskClick&&b.onMaskClick(...e))},[i.createVNode("div",a,[i.createVNode("button",{class:"p-image-action p-link",onClick:t[2]||(t[2]=(...e)=>b.rotateRight&&b.rotateRight(...e)),type:"button"},[o]),i.createVNode("button",{class:"p-image-action p-link",onClick:t[3]||(t[3]=(...e)=>b.rotateLeft&&b.rotateLeft(...e)),type:"button"},[s]),i.createVNode("button",{class:"p-image-action p-link",onClick:t[4]||(t[4]=(...e)=>b.zoomOut&&b.zoomOut(...e)),type:"button",disabled:b.zoomDisabled},[r],8,["disabled"]),i.createVNode("button",{class:"p-image-action p-link",onClick:t[5]||(t[5]=(...e)=>b.zoomIn&&b.zoomIn(...e)),type:"button",disabled:b.zoomDisabled},[l],8,["disabled"]),i.createVNode("button",{class:"p-image-action p-link",type:"button",onClick:t[6]||(t[6]=(...i)=>e.hidePreview&&e.hidePreview(...i))},[c])]),i.createVNode(i.Transition,{name:"p-image-preview",onBeforeEnter:b.onBeforeEnter,onEnter:b.onEnter,onLeave:b.onLeave,onBeforeLeave:b.onBeforeLeave,onAfterLeave:b.onAfterLeave},{default:i.withCtx((()=>[k.previewVisible?(i.openBlock(),i.createBlock("div",p,[i.createVNode("img",{src:e.$attrs.src,class:"p-image-preview",style:b.imagePreviewStyle,onClick:t[7]||(t[7]=(...e)=>b.onPreviewImageClick&&b.onPreviewImageClick(...e))},null,12,["src"])])):i.createCommentVNode("",!0)])),_:1},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],2)):i.createCommentVNode("",!0)]))],6)},module.exports=t;
+"use strict";var e=require("primevue/utils"),t=require("primevue/portal"),i=require("vue");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a={name:"Image",inheritAttrs:!1,props:{preview:{type:Boolean,default:!1},class:null,style:null,imageStyle:null,imageClass:null},mask:null,data:()=>({maskVisible:!1,previewVisible:!1,rotate:0,scale:1}),beforeUnmount(){this.mask&&e.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},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(){e.ZIndexUtils.set("modal",this.mask,this.$primevue.config.zIndex.modal)},onEnter(){this.$emit("show")},onBeforeLeave(){e.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(t){e.ZIndexUtils.clear(t),this.maskVisible=!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+")"}},zoomDisabled(){return this.scale<=.5||this.scale>=1.5}},components:{Portal:n(t).default}};const o=i.createElementVNode("i",{class:"p-image-preview-icon pi pi-eye"},null,-1),s={class:"p-image-toolbar"},l=[i.createElementVNode("i",{class:"pi pi-refresh"},null,-1)],r=[i.createElementVNode("i",{class:"pi pi-undo"},null,-1)],c=["disabled"],m=[i.createElementVNode("i",{class:"pi pi-search-minus"},null,-1)],p=["disabled"],d=[i.createElementVNode("i",{class:"pi pi-search-plus"},null,-1)],k=[i.createElementVNode("i",{class:"pi pi-times"},null,-1)],v={key:0},u=["src"];!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===i&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-image-mask {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: 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: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    opacity: 0;\n    -webkit-transition: opacity .3s;\n    transition: opacity .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: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-image-action.p-link {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-image-preview {\n    -webkit-transition: -webkit-transform .15s;\n    transition: -webkit-transform .15s;\n    transition: transform .15s;\n    transition: transform .15s, -webkit-transform .15s;\n    max-width: 100vw;\n    max-height: 100vh;\n}\n.p-image-preview-enter-active {\n    -webkit-transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-image-preview-leave-active {\n    -webkit-transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n}\n.p-image-preview-enter-from,\n.p-image-preview-leave-to {\n    opacity: 0;\n    -webkit-transform: scale(0.7);\n            transform: scale(0.7);\n}\n"),a.render=function(e,t,n,a,b,f){const h=i.resolveComponent("Portal");return i.openBlock(),i.createElementBlock("span",{class:i.normalizeClass(f.containerClass),style:i.normalizeStyle(n.style)},[i.createElementVNode("img",i.mergeProps(e.$attrs,{style:n.imageStyle,class:n.imageClass}),null,16),n.preview?(i.openBlock(),i.createElementBlock("div",{key:0,class:"p-image-preview-indicator",onClick:t[0]||(t[0]=(...e)=>f.onImageClick&&f.onImageClick(...e))},[i.renderSlot(e.$slots,"indicator",{},(()=>[o]))])):i.createCommentVNode("",!0),i.createVNode(h,null,{default:i.withCtx((()=>[b.maskVisible?(i.openBlock(),i.createElementBlock("div",{key:0,ref:f.maskRef,class:i.normalizeClass(f.maskClass),onClick:t[7]||(t[7]=(...e)=>f.onMaskClick&&f.onMaskClick(...e))},[i.createElementVNode("div",s,[i.createElementVNode("button",{class:"p-image-action p-link",onClick:t[1]||(t[1]=(...e)=>f.rotateRight&&f.rotateRight(...e)),type:"button"},l),i.createElementVNode("button",{class:"p-image-action p-link",onClick:t[2]||(t[2]=(...e)=>f.rotateLeft&&f.rotateLeft(...e)),type:"button"},r),i.createElementVNode("button",{class:"p-image-action p-link",onClick:t[3]||(t[3]=(...e)=>f.zoomOut&&f.zoomOut(...e)),type:"button",disabled:f.zoomDisabled},m,8,c),i.createElementVNode("button",{class:"p-image-action p-link",onClick:t[4]||(t[4]=(...e)=>f.zoomIn&&f.zoomIn(...e)),type:"button",disabled:f.zoomDisabled},d,8,p),i.createElementVNode("button",{class:"p-image-action p-link",type:"button",onClick:t[5]||(t[5]=(...t)=>e.hidePreview&&e.hidePreview(...t))},k)]),i.createVNode(i.Transition,{name:"p-image-preview",onBeforeEnter:f.onBeforeEnter,onEnter:f.onEnter,onLeave:f.onLeave,onBeforeLeave:f.onBeforeLeave,onAfterLeave:f.onAfterLeave},{default:i.withCtx((()=>[b.previewVisible?(i.openBlock(),i.createElementBlock("div",v,[i.createElementVNode("img",{src:e.$attrs.src,class:"p-image-preview",style:i.normalizeStyle(f.imagePreviewStyle),onClick:t[6]||(t[6]=(...e)=>f.onPreviewImageClick&&f.onPreviewImageClick(...e))},null,12,u)])):i.createCommentVNode("",!0)])),_:1},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],2)):i.createCommentVNode("",!0)])),_:1})],6)},module.exports=a;

package/image/image.esm.js

@@ -1,5 +1,6 @@
 import { ZIndexUtils, DomHandler } from 'primevue/utils';
-import { openBlock, createBlock, createVNode, mergeProps, renderSlot, createCommentVNode, Teleport, Transition, withCtx } from 'vue';
+import Portal from 'primevue/portal';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, mergeProps, renderSlot, createCommentVNode, createVNode, withCtx, Transition } from 'vue';
 
 var script = {
     name: 'Image',
@@ -106,110 +107,126 @@ var script = {
         zoomDisabled() {
             return this.scale <= 0.5 || this.scale >= 1.5;
         }
+    },
+    components: {
+        'Portal': Portal
     }
 };
 
-const _hoisted_1 = /*#__PURE__*/createVNode("i", { class: "p-image-preview-icon pi pi-eye" }, null, -1);
+const _hoisted_1 = /*#__PURE__*/createElementVNode("i", { class: "p-image-preview-icon pi pi-eye" }, null, -1);
 const _hoisted_2 = { class: "p-image-toolbar" };
-const _hoisted_3 = /*#__PURE__*/createVNode("i", { class: "pi pi-refresh" }, null, -1);
-const _hoisted_4 = /*#__PURE__*/createVNode("i", { class: "pi pi-undo" }, null, -1);
-const _hoisted_5 = /*#__PURE__*/createVNode("i", { class: "pi pi-search-minus" }, null, -1);
-const _hoisted_6 = /*#__PURE__*/createVNode("i", { class: "pi pi-search-plus" }, null, -1);
-const _hoisted_7 = /*#__PURE__*/createVNode("i", { class: "pi pi-times" }, null, -1);
-const _hoisted_8 = { key: 0 };
+const _hoisted_3 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-refresh" }, null, -1);
+const _hoisted_4 = [
+  _hoisted_3
+];
+const _hoisted_5 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-undo" }, null, -1);
+const _hoisted_6 = [
+  _hoisted_5
+];
+const _hoisted_7 = ["disabled"];
+const _hoisted_8 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-search-minus" }, null, -1);
+const _hoisted_9 = [
+  _hoisted_8
+];
+const _hoisted_10 = ["disabled"];
+const _hoisted_11 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-search-plus" }, null, -1);
+const _hoisted_12 = [
+  _hoisted_11
+];
+const _hoisted_13 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-times" }, null, -1);
+const _hoisted_14 = [
+  _hoisted_13
+];
+const _hoisted_15 = { key: 0 };
+const _hoisted_16 = ["src"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createBlock("span", {
-    class: $options.containerClass,
-    style: $props.style
+  const _component_Portal = resolveComponent("Portal");
+
+  return (openBlock(), createElementBlock("span", {
+    class: normalizeClass($options.containerClass),
+    style: normalizeStyle($props.style)
   }, [
-    createVNode("img", mergeProps(_ctx.$attrs, {
+    createElementVNode("img", mergeProps(_ctx.$attrs, {
       style: $props.imageStyle,
       class: $props.imageClass
     }), null, 16),
     ($props.preview)
-      ? (openBlock(), createBlock("div", {
+      ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: "p-image-preview-indicator",
-          onClick: _cache[1] || (_cache[1] = (...args) => ($options.onImageClick && $options.onImageClick(...args)))
+          onClick: _cache[0] || (_cache[0] = (...args) => ($options.onImageClick && $options.onImageClick(...args)))
         }, [
           renderSlot(_ctx.$slots, "indicator", {}, () => [
             _hoisted_1
           ])
         ]))
       : createCommentVNode("", true),
-    (openBlock(), createBlock(Teleport, { to: "body" }, [
-      ($data.maskVisible)
-        ? (openBlock(), createBlock("div", {
-            key: 0,
-            ref: $options.maskRef,
-            class: $options.maskClass,
-            onClick: _cache[8] || (_cache[8] = (...args) => ($options.onMaskClick && $options.onMaskClick(...args)))
-          }, [
-            createVNode("div", _hoisted_2, [
-              createVNode("button", {
-                class: "p-image-action p-link",
-                onClick: _cache[2] || (_cache[2] = (...args) => ($options.rotateRight && $options.rotateRight(...args))),
-                type: "button"
-              }, [
-                _hoisted_3
-              ]),
-              createVNode("button", {
-                class: "p-image-action p-link",
-                onClick: _cache[3] || (_cache[3] = (...args) => ($options.rotateLeft && $options.rotateLeft(...args))),
-                type: "button"
-              }, [
-                _hoisted_4
-              ]),
-              createVNode("button", {
-                class: "p-image-action p-link",
-                onClick: _cache[4] || (_cache[4] = (...args) => ($options.zoomOut && $options.zoomOut(...args))),
-                type: "button",
-                disabled: $options.zoomDisabled
-              }, [
-                _hoisted_5
-              ], 8, ["disabled"]),
-              createVNode("button", {
-                class: "p-image-action p-link",
-                onClick: _cache[5] || (_cache[5] = (...args) => ($options.zoomIn && $options.zoomIn(...args))),
-                type: "button",
-                disabled: $options.zoomDisabled
-              }, [
-                _hoisted_6
-              ], 8, ["disabled"]),
-              createVNode("button", {
-                class: "p-image-action p-link",
-                type: "button",
-                onClick: _cache[6] || (_cache[6] = (...args) => (_ctx.hidePreview && _ctx.hidePreview(...args)))
-              }, [
-                _hoisted_7
-              ])
-            ]),
-            createVNode(Transition, {
-              name: "p-image-preview",
-              onBeforeEnter: $options.onBeforeEnter,
-              onEnter: $options.onEnter,
-              onLeave: $options.onLeave,
-              onBeforeLeave: $options.onBeforeLeave,
-              onAfterLeave: $options.onAfterLeave
-            }, {
-              default: withCtx(() => [
-                ($data.previewVisible)
-                  ? (openBlock(), createBlock("div", _hoisted_8, [
-                      createVNode("img", {
-                        src: _ctx.$attrs.src,
-                        class: "p-image-preview",
-                        style: $options.imagePreviewStyle,
-                        onClick: _cache[7] || (_cache[7] = (...args) => ($options.onPreviewImageClick && $options.onPreviewImageClick(...args)))
-                      }, null, 12, ["src"])
-                    ]))
-                  : createCommentVNode("", true)
+    createVNode(_component_Portal, null, {
+      default: withCtx(() => [
+        ($data.maskVisible)
+          ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              ref: $options.maskRef,
+              class: normalizeClass($options.maskClass),
+              onClick: _cache[7] || (_cache[7] = (...args) => ($options.onMaskClick && $options.onMaskClick(...args)))
+            }, [
+              createElementVNode("div", _hoisted_2, [
+                createElementVNode("button", {
+                  class: "p-image-action p-link",
+                  onClick: _cache[1] || (_cache[1] = (...args) => ($options.rotateRight && $options.rotateRight(...args))),
+                  type: "button"
+                }, _hoisted_4),
+                createElementVNode("button", {
+                  class: "p-image-action p-link",
+                  onClick: _cache[2] || (_cache[2] = (...args) => ($options.rotateLeft && $options.rotateLeft(...args))),
+                  type: "button"
+                }, _hoisted_6),
+                createElementVNode("button", {
+                  class: "p-image-action p-link",
+                  onClick: _cache[3] || (_cache[3] = (...args) => ($options.zoomOut && $options.zoomOut(...args))),
+                  type: "button",
+                  disabled: $options.zoomDisabled
+                }, _hoisted_9, 8, _hoisted_7),
+                createElementVNode("button", {
+                  class: "p-image-action p-link",
+                  onClick: _cache[4] || (_cache[4] = (...args) => ($options.zoomIn && $options.zoomIn(...args))),
+                  type: "button",
+                  disabled: $options.zoomDisabled
+                }, _hoisted_12, 8, _hoisted_10),
+                createElementVNode("button", {
+                  class: "p-image-action p-link",
+                  type: "button",
+                  onClick: _cache[5] || (_cache[5] = (...args) => (_ctx.hidePreview && _ctx.hidePreview(...args)))
+                }, _hoisted_14)
               ]),
-              _: 1
-            }, 8, ["onBeforeEnter", "onEnter", "onLeave", "onBeforeLeave", "onAfterLeave"])
-          ], 2))
-        : createCommentVNode("", true)
-    ]))
+              createVNode(Transition, {
+                name: "p-image-preview",
+                onBeforeEnter: $options.onBeforeEnter,
+                onEnter: $options.onEnter,
+                onLeave: $options.onLeave,
+                onBeforeLeave: $options.onBeforeLeave,
+                onAfterLeave: $options.onAfterLeave
+              }, {
+                default: withCtx(() => [
+                  ($data.previewVisible)
+                    ? (openBlock(), createElementBlock("div", _hoisted_15, [
+                        createElementVNode("img", {
+                          src: _ctx.$attrs.src,
+                          class: "p-image-preview",
+                          style: normalizeStyle($options.imagePreviewStyle),
+                          onClick: _cache[6] || (_cache[6] = (...args) => ($options.onPreviewImageClick && $options.onPreviewImageClick(...args)))
+                        }, null, 12, _hoisted_16)
+                      ]))
+                    : createCommentVNode("", true)
+                ]),
+                _: 1
+              }, 8, ["onBeforeEnter", "onEnter", "onLeave", "onBeforeLeave", "onAfterLeave"])
+            ], 2))
+          : createCommentVNode("", true)
+      ]),
+      _: 1
+    })
   ], 6))
 }
 
@@ -245,4 +262,4 @@ styleInject(css_248z);
 
 script.render = render;
 
-export default script;
+export { script as default };

package/image/image.esm.min.js

@@ -1 +1 @@
-import{ZIndexUtils as e,DomHandler as i}from"primevue/utils";import{openBlock as t,createBlock as n,createVNode as a,mergeProps as s,renderSlot as o,createCommentVNode as l,Teleport as r,Transition as c,withCtx as p}from"vue";var m={name:"Image",inheritAttrs:!1,props:{preview:{type:Boolean,default:!1},class:null,style:null,imageStyle:null,imageClass:null},mask:null,data:()=>({maskVisible:!1,previewVisible:!1,rotate:0,scale:1}),beforeUnmount(){this.mask&&e.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},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(){e.set("modal",this.mask,this.$primevue.config.zIndex.modal)},onEnter(){this.$emit("show")},onBeforeLeave(){i.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(i){e.clear(i),this.maskVisible=!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+")"}},zoomDisabled(){return this.scale<=.5||this.scale>=1.5}}};const k=a("i",{class:"p-image-preview-icon pi pi-eye"},null,-1),b={class:"p-image-toolbar"},v=a("i",{class:"pi pi-refresh"},null,-1),d=a("i",{class:"pi pi-undo"},null,-1),h=a("i",{class:"pi pi-search-minus"},null,-1),f=a("i",{class:"pi pi-search-plus"},null,-1),g=a("i",{class:"pi pi-times"},null,-1),u={key:0};!function(e,i){void 0===i&&(i={});var t=i.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-image-mask {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: 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: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    opacity: 0;\n    -webkit-transition: opacity .3s;\n    transition: opacity .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: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-image-action.p-link {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-image-preview {\n    -webkit-transition: -webkit-transform .15s;\n    transition: -webkit-transform .15s;\n    transition: transform .15s;\n    transition: transform .15s, -webkit-transform .15s;\n    max-width: 100vw;\n    max-height: 100vh;\n}\n.p-image-preview-enter-active {\n    -webkit-transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-image-preview-leave-active {\n    -webkit-transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n}\n.p-image-preview-enter-from,\n.p-image-preview-leave-to {\n    opacity: 0;\n    -webkit-transform: scale(0.7);\n            transform: scale(0.7);\n}\n"),m.render=function(e,i,m,w,y,C){return t(),n("span",{class:C.containerClass,style:m.style},[a("img",s(e.$attrs,{style:m.imageStyle,class:m.imageClass}),null,16),m.preview?(t(),n("div",{key:0,class:"p-image-preview-indicator",onClick:i[1]||(i[1]=(...e)=>C.onImageClick&&C.onImageClick(...e))},[o(e.$slots,"indicator",{},(()=>[k]))])):l("",!0),(t(),n(r,{to:"body"},[y.maskVisible?(t(),n("div",{key:0,ref:C.maskRef,class:C.maskClass,onClick:i[8]||(i[8]=(...e)=>C.onMaskClick&&C.onMaskClick(...e))},[a("div",b,[a("button",{class:"p-image-action p-link",onClick:i[2]||(i[2]=(...e)=>C.rotateRight&&C.rotateRight(...e)),type:"button"},[v]),a("button",{class:"p-image-action p-link",onClick:i[3]||(i[3]=(...e)=>C.rotateLeft&&C.rotateLeft(...e)),type:"button"},[d]),a("button",{class:"p-image-action p-link",onClick:i[4]||(i[4]=(...e)=>C.zoomOut&&C.zoomOut(...e)),type:"button",disabled:C.zoomDisabled},[h],8,["disabled"]),a("button",{class:"p-image-action p-link",onClick:i[5]||(i[5]=(...e)=>C.zoomIn&&C.zoomIn(...e)),type:"button",disabled:C.zoomDisabled},[f],8,["disabled"]),a("button",{class:"p-image-action p-link",type:"button",onClick:i[6]||(i[6]=(...i)=>e.hidePreview&&e.hidePreview(...i))},[g])]),a(c,{name:"p-image-preview",onBeforeEnter:C.onBeforeEnter,onEnter:C.onEnter,onLeave:C.onLeave,onBeforeLeave:C.onBeforeLeave,onAfterLeave:C.onAfterLeave},{default:p((()=>[y.previewVisible?(t(),n("div",u,[a("img",{src:e.$attrs.src,class:"p-image-preview",style:C.imagePreviewStyle,onClick:i[7]||(i[7]=(...e)=>C.onPreviewImageClick&&C.onPreviewImageClick(...e))},null,12,["src"])])):l("",!0)])),_:1},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],2)):l("",!0)]))],6)};export default m;
+import{ZIndexUtils as e,DomHandler as i}from"primevue/utils";import t from"primevue/portal";import{resolveComponent as n,openBlock as a,createElementBlock as s,normalizeClass as o,normalizeStyle as l,createElementVNode as r,mergeProps as c,renderSlot as p,createCommentVNode as m,createVNode as k,withCtx as v,Transition as b}from"vue";var d={name:"Image",inheritAttrs:!1,props:{preview:{type:Boolean,default:!1},class:null,style:null,imageStyle:null,imageClass:null},mask:null,data:()=>({maskVisible:!1,previewVisible:!1,rotate:0,scale:1}),beforeUnmount(){this.mask&&e.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},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(){e.set("modal",this.mask,this.$primevue.config.zIndex.modal)},onEnter(){this.$emit("show")},onBeforeLeave(){i.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(i){e.clear(i),this.maskVisible=!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+")"}},zoomDisabled(){return this.scale<=.5||this.scale>=1.5}},components:{Portal:t}};const f=r("i",{class:"p-image-preview-icon pi pi-eye"},null,-1),u={class:"p-image-toolbar"},h=[r("i",{class:"pi pi-refresh"},null,-1)],g=[r("i",{class:"pi pi-undo"},null,-1)],w=["disabled"],y=[r("i",{class:"pi pi-search-minus"},null,-1)],C=["disabled"],x=[r("i",{class:"pi pi-search-plus"},null,-1)],z=[r("i",{class:"pi pi-times"},null,-1)],L={key:0},B=["src"];!function(e,i){void 0===i&&(i={});var t=i.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-image-mask {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: 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: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    opacity: 0;\n    -webkit-transition: opacity .3s;\n    transition: opacity .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: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-image-action.p-link {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-image-preview {\n    -webkit-transition: -webkit-transform .15s;\n    transition: -webkit-transform .15s;\n    transition: transform .15s;\n    transition: transform .15s, -webkit-transform .15s;\n    max-width: 100vw;\n    max-height: 100vh;\n}\n.p-image-preview-enter-active {\n    -webkit-transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-image-preview-leave-active {\n    -webkit-transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n}\n.p-image-preview-enter-from,\n.p-image-preview-leave-to {\n    opacity: 0;\n    -webkit-transform: scale(0.7);\n            transform: scale(0.7);\n}\n"),d.render=function(e,i,t,d,I,E){const P=n("Portal");return a(),s("span",{class:o(E.containerClass),style:l(t.style)},[r("img",c(e.$attrs,{style:t.imageStyle,class:t.imageClass}),null,16),t.preview?(a(),s("div",{key:0,class:"p-image-preview-indicator",onClick:i[0]||(i[0]=(...e)=>E.onImageClick&&E.onImageClick(...e))},[p(e.$slots,"indicator",{},(()=>[f]))])):m("",!0),k(P,null,{default:v((()=>[I.maskVisible?(a(),s("div",{key:0,ref:E.maskRef,class:o(E.maskClass),onClick:i[7]||(i[7]=(...e)=>E.onMaskClick&&E.onMaskClick(...e))},[r("div",u,[r("button",{class:"p-image-action p-link",onClick:i[1]||(i[1]=(...e)=>E.rotateRight&&E.rotateRight(...e)),type:"button"},h),r("button",{class:"p-image-action p-link",onClick:i[2]||(i[2]=(...e)=>E.rotateLeft&&E.rotateLeft(...e)),type:"button"},g),r("button",{class:"p-image-action p-link",onClick:i[3]||(i[3]=(...e)=>E.zoomOut&&E.zoomOut(...e)),type:"button",disabled:E.zoomDisabled},y,8,w),r("button",{class:"p-image-action p-link",onClick:i[4]||(i[4]=(...e)=>E.zoomIn&&E.zoomIn(...e)),type:"button",disabled:E.zoomDisabled},x,8,C),r("button",{class:"p-image-action p-link",type:"button",onClick:i[5]||(i[5]=(...i)=>e.hidePreview&&e.hidePreview(...i))},z)]),k(b,{name:"p-image-preview",onBeforeEnter:E.onBeforeEnter,onEnter:E.onEnter,onLeave:E.onLeave,onBeforeLeave:E.onBeforeLeave,onAfterLeave:E.onAfterLeave},{default:v((()=>[I.previewVisible?(a(),s("div",L,[r("img",{src:e.$attrs.src,class:"p-image-preview",style:l(E.imagePreviewStyle),onClick:i[6]||(i[6]=(...e)=>E.onPreviewImageClick&&E.onPreviewImageClick(...e))},null,12,B)])):m("",!0)])),_:1},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],2)):m("",!0)])),_:1})],6)};export{d as default};