primevue 3.20.0 → 3.22.0

package/image/image.cjs.min.js

@@ -1 +1 @@
-"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,emits:["show","hide","error"],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},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(){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),r={class:"p-image-toolbar"},s=[i.createElementVNode("i",{class:"pi pi-refresh"},null,-1)],l=[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 0.3s;\n    transition: opacity 0.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 0.15s;\n    transition: -webkit-transform 0.15s;\n    transition: transform 0.15s;\n    transition: transform 0.15s, -webkit-transform 0.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.2, 1);\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    -webkit-transform: scale(0.7);\n            transform: scale(0.7);\n}\n"),a.render=function(e,t,n,a,b,h){const f=i.resolveComponent("Portal");return i.openBlock(),i.createElementBlock("span",{class:i.normalizeClass(h.containerClass),style:i.normalizeStyle(n.style)},[i.createElementVNode("img",i.mergeProps(e.$attrs,{style:n.imageStyle,class:n.imageClass,onError:t[0]||(t[0]=(...e)=>h.onError&&h.onError(...e))}),null,16),n.preview?(i.openBlock(),i.createElementBlock("div",{key:0,class:"p-image-preview-indicator",onClick:t[1]||(t[1]=(...e)=>h.onImageClick&&h.onImageClick(...e))},[i.renderSlot(e.$slots,"indicator",{},(()=>[o]))])):i.createCommentVNode("",!0),i.createVNode(f,null,{default:i.withCtx((()=>[b.maskVisible?(i.openBlock(),i.createElementBlock("div",{key:0,ref:h.maskRef,class:i.normalizeClass(h.maskClass),onClick:t[8]||(t[8]=(...e)=>h.onMaskClick&&h.onMaskClick(...e))},[i.createElementVNode("div",r,[i.createElementVNode("button",{class:"p-image-action p-link",onClick:t[2]||(t[2]=(...e)=>h.rotateRight&&h.rotateRight(...e)),type:"button"},s),i.createElementVNode("button",{class:"p-image-action p-link",onClick:t[3]||(t[3]=(...e)=>h.rotateLeft&&h.rotateLeft(...e)),type:"button"},l),i.createElementVNode("button",{class:"p-image-action p-link",onClick:t[4]||(t[4]=(...e)=>h.zoomOut&&h.zoomOut(...e)),type:"button",disabled:h.zoomDisabled},m,8,c),i.createElementVNode("button",{class:"p-image-action p-link",onClick:t[5]||(t[5]=(...e)=>h.zoomIn&&h.zoomIn(...e)),type:"button",disabled:h.zoomDisabled},d,8,p),i.createElementVNode("button",{class:"p-image-action p-link",type:"button",onClick:t[6]||(t[6]=(...t)=>e.hidePreview&&e.hidePreview(...t))},k)]),i.createVNode(i.Transition,{name:"p-image-preview",onBeforeEnter:h.onBeforeEnter,onEnter:h.onEnter,onLeave:h.onLeave,onBeforeLeave:h.onBeforeLeave,onAfterLeave:h.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(h.imagePreviewStyle),onClick:t[7]||(t[7]=(...e)=>h.onPreviewImageClick&&h.onPreviewImageClick(...e))},null,12,u)])):i.createCommentVNode("",!0)])),_:1},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],2)):i.createCommentVNode("",!0)])),_:1})],6)},module.exports=a;
+"use strict";var e=require("primevue/focustrap"),i=require("primevue/portal"),t=require("primevue/utils"),a=require("vue");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(e),r={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}},mask:null,data:()=>({maskVisible:!1,previewVisible:!1,rotate:0,scale:1}),beforeUnmount(){this.mask&&t.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((()=>{t.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(){t.ZIndexUtils.set("modal",this.mask,this.$primevue.config.zIndex.modal)},onEnter(){this.focus(),this.$emit("show")},onBeforeLeave(){t.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(e){t.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:n(i).default},directives:{focustrap:o.default}};const l=a.createElementVNode("i",{class:"p-image-preview-icon pi pi-eye"},null,-1),s=["aria-modal"],c={class:"p-image-toolbar"},m=["aria-label"],p=[a.createElementVNode("i",{class:"pi pi-refresh"},null,-1)],u=["aria-label"],d=[a.createElementVNode("i",{class:"pi pi-undo"},null,-1)],v=["disabled","aria-label"],h=[a.createElementVNode("i",{class:"pi pi-search-minus"},null,-1)],f=["disabled","aria-label"],g=[a.createElementVNode("i",{class:"pi pi-search-plus"},null,-1)],k=["aria-label"],b=[a.createElementVNode("i",{class:"pi pi-times"},null,-1)],w={key:0},y=["src"];!function(e,i){void 0===i&&(i={});var t=i.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.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-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: 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"),r.render=function(e,i,t,n,o,r){const C=a.resolveComponent("Portal"),E=a.resolveDirective("focustrap");return a.openBlock(),a.createElementBlock("span",{class:a.normalizeClass(r.containerClass),style:a.normalizeStyle(t.style)},[a.createElementVNode("img",a.mergeProps(e.$attrs,{style:t.imageStyle,class:t.imageClass,onError:i[0]||(i[0]=(...e)=>r.onError&&r.onError(...e))}),null,16),t.preview?(a.openBlock(),a.createElementBlock("button",a.mergeProps({key:0,ref:"previewButton",class:"p-image-preview-indicator",onClick:i[1]||(i[1]=(...e)=>r.onImageClick&&r.onImageClick(...e))},t.previewButtonProps),[a.renderSlot(e.$slots,"indicator",{},(()=>[l]))],16)):a.createCommentVNode("",!0),a.createVNode(C,null,{default:a.withCtx((()=>[o.maskVisible?a.withDirectives((a.openBlock(),a.createElementBlock("div",{key:0,ref:r.maskRef,role:"dialog",class:a.normalizeClass(r.maskClass),"aria-modal":o.maskVisible,onClick:i[8]||(i[8]=(...e)=>r.onMaskClick&&r.onMaskClick(...e)),onKeydown:i[9]||(i[9]=(...e)=>r.onMaskKeydown&&r.onMaskKeydown(...e))},[a.createElementVNode("div",c,[a.createElementVNode("button",{class:"p-image-action p-link",onClick:i[2]||(i[2]=(...e)=>r.rotateRight&&r.rotateRight(...e)),type:"button","aria-label":r.rightAriaLabel},p,8,m),a.createElementVNode("button",{class:"p-image-action p-link",onClick:i[3]||(i[3]=(...e)=>r.rotateLeft&&r.rotateLeft(...e)),type:"button","aria-label":r.leftAriaLabel},d,8,u),a.createElementVNode("button",{class:"p-image-action p-link",onClick:i[4]||(i[4]=(...e)=>r.zoomOut&&r.zoomOut(...e)),type:"button",disabled:r.zoomDisabled,"aria-label":r.zoomOutAriaLabel},h,8,v),a.createElementVNode("button",{class:"p-image-action p-link",onClick:i[5]||(i[5]=(...e)=>r.zoomIn&&r.zoomIn(...e)),type:"button",disabled:r.zoomDisabled,"aria-label":r.zoomInAriaLabel},g,8,f),a.createElementVNode("button",{class:"p-image-action p-link",type:"button",onClick:i[6]||(i[6]=(...i)=>e.hidePreview&&e.hidePreview(...i)),"aria-label":r.closeAriaLabel,autofocus:""},b,8,k)]),a.createVNode(a.Transition,{name:"p-image-preview",onBeforeEnter:r.onBeforeEnter,onEnter:r.onEnter,onLeave:r.onLeave,onBeforeLeave:r.onBeforeLeave,onAfterLeave:r.onAfterLeave},{default:a.withCtx((()=>[o.previewVisible?(a.openBlock(),a.createElementBlock("div",w,[a.createElementVNode("img",{src:e.$attrs.src,class:"p-image-preview",style:a.normalizeStyle(r.imagePreviewStyle),onClick:i[7]||(i[7]=(...e)=>r.onPreviewImageClick&&r.onPreviewImageClick(...e))},null,12,y)])):a.createCommentVNode("",!0)])),_:1},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],42,s)),[[E]]):a.createCommentVNode("",!0)])),_:1})],6)},module.exports=r;

package/image/image.esm.js

@@ -1,6 +1,7 @@
-import { ZIndexUtils, DomHandler } from 'primevue/utils';
+import FocusTrap from 'primevue/focustrap';
 import Portal from 'primevue/portal';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, mergeProps, renderSlot, createCommentVNode, createVNode, withCtx, Transition } from 'vue';
+import { ZIndexUtils, DomHandler } from 'primevue/utils';
+import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, mergeProps, renderSlot, createCommentVNode, createVNode, withCtx, withDirectives, Transition } from 'vue';
 
 var script = {
     name: 'Image',
@@ -11,10 +12,26 @@ var script = {
             type: Boolean,
             default: false
         },
-        class: null,
-        style: null,
-        imageStyle: null,
-        imageClass: null
+        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
+        }
     },
     mask: null,
     data() {
@@ -57,6 +74,18 @@ var script = {
 
             this.previewClick = false;
         },
+        onMaskKeydown(event) {
+            switch (event.code) {
+                case 'Escape':
+                    this.onMaskClick();
+                    setTimeout(() => {
+                        DomHandler.focus(this.$refs.previewButton);
+                    }, 25);
+                    event.preventDefault();
+
+                    break;
+            }
+        },
         onError() {
             this.$emit('error');
         },
@@ -80,6 +109,7 @@ var script = {
             ZIndexUtils.set('modal', this.mask, this.$primevue.config.zIndex.modal);
         },
         onEnter() {
+            this.focus();
             this.$emit('show');
         },
         onBeforeLeave() {
@@ -91,6 +121,13 @@ var script = {
         onAfterLeave(el) {
             ZIndexUtils.clear(el);
             this.maskVisible = false;
+        },
+        focus() {
+            let focusTarget = this.mask.querySelector('[autofocus]');
+
+            if (focusTarget) {
+                focusTarget.focus();
+            }
         }
     },
     computed: {
@@ -114,42 +151,65 @@ var script = {
         },
         zoomDisabled() {
             return this.scale <= 0.5 || this.scale >= 1.5;
+        },
+        rightAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.rotateRight : undefined;
+        },
+        leftAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.rotateLeft : undefined;
+        },
+        zoomInAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.zoomIn : undefined;
+        },
+        zoomOutAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.zoomOut : undefined;
+        },
+        closeAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
         }
     },
     components: {
         Portal: Portal
+    },
+    directives: {
+        focustrap: FocusTrap
     }
 };
 
 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__*/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_2 = ["aria-modal"];
+const _hoisted_3 = { class: "p-image-toolbar" };
+const _hoisted_4 = ["aria-label"];
+const _hoisted_5 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-refresh" }, 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_7 = ["aria-label"];
+const _hoisted_8 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-undo" }, 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_10 = ["disabled", "aria-label"];
+const _hoisted_11 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-search-minus" }, 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_13 = ["disabled", "aria-label"];
+const _hoisted_14 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-search-plus" }, null, -1);
+const _hoisted_15 = [
+  _hoisted_14
+];
+const _hoisted_16 = ["aria-label"];
+const _hoisted_17 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-times" }, null, -1);
+const _hoisted_18 = [
+  _hoisted_17
 ];
-const _hoisted_15 = { key: 0 };
-const _hoisted_16 = ["src"];
+const _hoisted_19 = { key: 0 };
+const _hoisted_20 = ["src"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Portal = resolveComponent("Portal");
+  const _directive_focustrap = resolveDirective("focustrap");
 
   return (openBlock(), createElementBlock("span", {
     class: normalizeClass($options.containerClass),
@@ -161,53 +221,63 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       onError: _cache[0] || (_cache[0] = (...args) => ($options.onError && $options.onError(...args)))
     }), null, 16),
     ($props.preview)
-      ? (openBlock(), createElementBlock("div", {
+      ? (openBlock(), createElementBlock("button", mergeProps({
           key: 0,
+          ref: "previewButton",
           class: "p-image-preview-indicator",
           onClick: _cache[1] || (_cache[1] = (...args) => ($options.onImageClick && $options.onImageClick(...args)))
-        }, [
+        }, $props.previewButtonProps), [
           renderSlot(_ctx.$slots, "indicator", {}, () => [
             _hoisted_1
           ])
-        ]))
+        ], 16))
       : createCommentVNode("", true),
     createVNode(_component_Portal, null, {
       default: withCtx(() => [
         ($data.maskVisible)
-          ? (openBlock(), createElementBlock("div", {
+          ? withDirectives((openBlock(), createElementBlock("div", {
               key: 0,
               ref: $options.maskRef,
+              role: "dialog",
               class: normalizeClass($options.maskClass),
-              onClick: _cache[8] || (_cache[8] = (...args) => ($options.onMaskClick && $options.onMaskClick(...args)))
+              "aria-modal": $data.maskVisible,
+              onClick: _cache[8] || (_cache[8] = (...args) => ($options.onMaskClick && $options.onMaskClick(...args))),
+              onKeydown: _cache[9] || (_cache[9] = (...args) => ($options.onMaskKeydown && $options.onMaskKeydown(...args)))
             }, [
-              createElementVNode("div", _hoisted_2, [
+              createElementVNode("div", _hoisted_3, [
                 createElementVNode("button", {
                   class: "p-image-action p-link",
                   onClick: _cache[2] || (_cache[2] = (...args) => ($options.rotateRight && $options.rotateRight(...args))),
-                  type: "button"
-                }, _hoisted_4),
+                  type: "button",
+                  "aria-label": $options.rightAriaLabel
+                }, _hoisted_6, 8, _hoisted_4),
                 createElementVNode("button", {
                   class: "p-image-action p-link",
                   onClick: _cache[3] || (_cache[3] = (...args) => ($options.rotateLeft && $options.rotateLeft(...args))),
-                  type: "button"
-                }, _hoisted_6),
+                  type: "button",
+                  "aria-label": $options.leftAriaLabel
+                }, _hoisted_9, 8, _hoisted_7),
                 createElementVNode("button", {
                   class: "p-image-action p-link",
                   onClick: _cache[4] || (_cache[4] = (...args) => ($options.zoomOut && $options.zoomOut(...args))),
                   type: "button",
-                  disabled: $options.zoomDisabled
-                }, _hoisted_9, 8, _hoisted_7),
+                  disabled: $options.zoomDisabled,
+                  "aria-label": $options.zoomOutAriaLabel
+                }, _hoisted_12, 8, _hoisted_10),
                 createElementVNode("button", {
                   class: "p-image-action p-link",
                   onClick: _cache[5] || (_cache[5] = (...args) => ($options.zoomIn && $options.zoomIn(...args))),
                   type: "button",
-                  disabled: $options.zoomDisabled
-                }, _hoisted_12, 8, _hoisted_10),
+                  disabled: $options.zoomDisabled,
+                  "aria-label": $options.zoomInAriaLabel
+                }, _hoisted_15, 8, _hoisted_13),
                 createElementVNode("button", {
                   class: "p-image-action p-link",
                   type: "button",
-                  onClick: _cache[6] || (_cache[6] = (...args) => (_ctx.hidePreview && _ctx.hidePreview(...args)))
-                }, _hoisted_14)
+                  onClick: _cache[6] || (_cache[6] = (...args) => (_ctx.hidePreview && _ctx.hidePreview(...args))),
+                  "aria-label": $options.closeAriaLabel,
+                  autofocus: ""
+                }, _hoisted_18, 8, _hoisted_16)
               ]),
               createVNode(Transition, {
                 name: "p-image-preview",
@@ -219,19 +289,21 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               }, {
                 default: withCtx(() => [
                   ($data.previewVisible)
-                    ? (openBlock(), createElementBlock("div", _hoisted_15, [
+                    ? (openBlock(), createElementBlock("div", _hoisted_19, [
                         createElementVNode("img", {
                           src: _ctx.$attrs.src,
                           class: "p-image-preview",
                           style: normalizeStyle($options.imagePreviewStyle),
                           onClick: _cache[7] || (_cache[7] = (...args) => ($options.onPreviewImageClick && $options.onPreviewImageClick(...args)))
-                        }, null, 12, _hoisted_16)
+                        }, null, 12, _hoisted_20)
                       ]))
                     : createCommentVNode("", true)
                 ]),
                 _: 1
               }, 8, ["onBeforeEnter", "onEnter", "onLeave", "onBeforeLeave", "onAfterLeave"])
-            ], 2))
+            ], 42, _hoisted_2)), [
+              [_directive_focustrap]
+            ])
           : createCommentVNode("", true)
       ]),
       _: 1
@@ -266,7 +338,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\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 0.3s;\n    transition: opacity 0.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 0.15s;\n    transition: -webkit-transform 0.15s;\n    transition: transform 0.15s;\n    transition: transform 0.15s, -webkit-transform 0.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.2, 1);\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    -webkit-transform: scale(0.7);\n            transform: scale(0.7);\n}\n";
+var css_248z = "\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-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: 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";
 styleInject(css_248z);
 
 script.render = render;

package/image/image.esm.min.js

@@ -1 +1 @@
-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 r,createElementVNode as l,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,emits:["show","hide","error"],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},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(){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 h=l("i",{class:"p-image-preview-icon pi pi-eye"},null,-1),f={class:"p-image-toolbar"},u=[l("i",{class:"pi pi-refresh"},null,-1)],g=[l("i",{class:"pi pi-undo"},null,-1)],w=["disabled"],y=[l("i",{class:"pi pi-search-minus"},null,-1)],C=["disabled"],x=[l("i",{class:"pi pi-search-plus"},null,-1)],z=[l("i",{class:"pi pi-times"},null,-1)],L={key:0},E=["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 0.3s;\n    transition: opacity 0.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 0.15s;\n    transition: -webkit-transform 0.15s;\n    transition: transform 0.15s;\n    transition: transform 0.15s, -webkit-transform 0.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.2, 1);\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    -webkit-transform: scale(0.7);\n            transform: scale(0.7);\n}\n"),d.render=function(e,i,t,d,B,I){const P=n("Portal");return a(),s("span",{class:o(I.containerClass),style:r(t.style)},[l("img",c(e.$attrs,{style:t.imageStyle,class:t.imageClass,onError:i[0]||(i[0]=(...e)=>I.onError&&I.onError(...e))}),null,16),t.preview?(a(),s("div",{key:0,class:"p-image-preview-indicator",onClick:i[1]||(i[1]=(...e)=>I.onImageClick&&I.onImageClick(...e))},[p(e.$slots,"indicator",{},(()=>[h]))])):m("",!0),k(P,null,{default:v((()=>[B.maskVisible?(a(),s("div",{key:0,ref:I.maskRef,class:o(I.maskClass),onClick:i[8]||(i[8]=(...e)=>I.onMaskClick&&I.onMaskClick(...e))},[l("div",f,[l("button",{class:"p-image-action p-link",onClick:i[2]||(i[2]=(...e)=>I.rotateRight&&I.rotateRight(...e)),type:"button"},u),l("button",{class:"p-image-action p-link",onClick:i[3]||(i[3]=(...e)=>I.rotateLeft&&I.rotateLeft(...e)),type:"button"},g),l("button",{class:"p-image-action p-link",onClick:i[4]||(i[4]=(...e)=>I.zoomOut&&I.zoomOut(...e)),type:"button",disabled:I.zoomDisabled},y,8,w),l("button",{class:"p-image-action p-link",onClick:i[5]||(i[5]=(...e)=>I.zoomIn&&I.zoomIn(...e)),type:"button",disabled:I.zoomDisabled},x,8,C),l("button",{class:"p-image-action p-link",type:"button",onClick:i[6]||(i[6]=(...i)=>e.hidePreview&&e.hidePreview(...i))},z)]),k(b,{name:"p-image-preview",onBeforeEnter:I.onBeforeEnter,onEnter:I.onEnter,onLeave:I.onLeave,onBeforeLeave:I.onBeforeLeave,onAfterLeave:I.onAfterLeave},{default:v((()=>[B.previewVisible?(a(),s("div",L,[l("img",{src:e.$attrs.src,class:"p-image-preview",style:r(I.imagePreviewStyle),onClick:i[7]||(i[7]=(...e)=>I.onPreviewImageClick&&I.onPreviewImageClick(...e))},null,12,E)])):m("",!0)])),_:1},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],2)):m("",!0)])),_:1})],6)};export{d as default};
+import e from"primevue/focustrap";import i from"primevue/portal";import{ZIndexUtils as t,DomHandler as a}from"primevue/utils";import{resolveComponent as n,resolveDirective as o,openBlock as r,createElementBlock as l,normalizeClass as s,normalizeStyle as c,createElementVNode as p,mergeProps as m,renderSlot as u,createCommentVNode as v,createVNode as h,withCtx as f,withDirectives as d,Transition as g}from"vue";var b={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}},mask:null,data:()=>({maskVisible:!1,previewVisible:!1,rotate:0,scale:1}),beforeUnmount(){this.mask&&t.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((()=>{a.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(){t.set("modal",this.mask,this.$primevue.config.zIndex.modal)},onEnter(){this.focus(),this.$emit("show")},onBeforeLeave(){a.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(e){t.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:i},directives:{focustrap:e}};const k=p("i",{class:"p-image-preview-icon pi pi-eye"},null,-1),w=["aria-modal"],y={class:"p-image-toolbar"},C=["aria-label"],L=[p("i",{class:"pi pi-refresh"},null,-1)],z=["aria-label"],$=[p("i",{class:"pi pi-undo"},null,-1)],A=["disabled","aria-label"],B=[p("i",{class:"pi pi-search-minus"},null,-1)],E=["disabled","aria-label"],I=[p("i",{class:"pi pi-search-plus"},null,-1)],x=["aria-label"],P=[p("i",{class:"pi pi-times"},null,-1)],V={key:0},R=["src"];!function(e,i){void 0===i&&(i={});var t=i.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.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-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: 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"),b.render=function(e,i,t,a,b,M){const S=n("Portal"),O=o("focustrap");return r(),l("span",{class:s(M.containerClass),style:c(t.style)},[p("img",m(e.$attrs,{style:t.imageStyle,class:t.imageClass,onError:i[0]||(i[0]=(...e)=>M.onError&&M.onError(...e))}),null,16),t.preview?(r(),l("button",m({key:0,ref:"previewButton",class:"p-image-preview-indicator",onClick:i[1]||(i[1]=(...e)=>M.onImageClick&&M.onImageClick(...e))},t.previewButtonProps),[u(e.$slots,"indicator",{},(()=>[k]))],16)):v("",!0),h(S,null,{default:f((()=>[b.maskVisible?d((r(),l("div",{key:0,ref:M.maskRef,role:"dialog",class:s(M.maskClass),"aria-modal":b.maskVisible,onClick:i[8]||(i[8]=(...e)=>M.onMaskClick&&M.onMaskClick(...e)),onKeydown:i[9]||(i[9]=(...e)=>M.onMaskKeydown&&M.onMaskKeydown(...e))},[p("div",y,[p("button",{class:"p-image-action p-link",onClick:i[2]||(i[2]=(...e)=>M.rotateRight&&M.rotateRight(...e)),type:"button","aria-label":M.rightAriaLabel},L,8,C),p("button",{class:"p-image-action p-link",onClick:i[3]||(i[3]=(...e)=>M.rotateLeft&&M.rotateLeft(...e)),type:"button","aria-label":M.leftAriaLabel},$,8,z),p("button",{class:"p-image-action p-link",onClick:i[4]||(i[4]=(...e)=>M.zoomOut&&M.zoomOut(...e)),type:"button",disabled:M.zoomDisabled,"aria-label":M.zoomOutAriaLabel},B,8,A),p("button",{class:"p-image-action p-link",onClick:i[5]||(i[5]=(...e)=>M.zoomIn&&M.zoomIn(...e)),type:"button",disabled:M.zoomDisabled,"aria-label":M.zoomInAriaLabel},I,8,E),p("button",{class:"p-image-action p-link",type:"button",onClick:i[6]||(i[6]=(...i)=>e.hidePreview&&e.hidePreview(...i)),"aria-label":M.closeAriaLabel,autofocus:""},P,8,x)]),h(g,{name:"p-image-preview",onBeforeEnter:M.onBeforeEnter,onEnter:M.onEnter,onLeave:M.onLeave,onBeforeLeave:M.onBeforeLeave,onAfterLeave:M.onAfterLeave},{default:f((()=>[b.previewVisible?(r(),l("div",V,[p("img",{src:e.$attrs.src,class:"p-image-preview",style:c(M.imagePreviewStyle),onClick:i[7]||(i[7]=(...e)=>M.onPreviewImageClick&&M.onPreviewImageClick(...e))},null,12,R)])):v("",!0)])),_:1},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],42,w)),[[O]]):v("",!0)])),_:1})],6)};export{b as default};