primevue 3.28.0 → 3.29.0

package/image/image.cjs.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var FocusTrap = require('primevue/focustrap');
 var EyeIcon = require('primevue/icons/eye');
 var RefreshIcon = require('primevue/icons/refresh');
@@ -13,6 +14,7 @@ var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
 var EyeIcon__default = /*#__PURE__*/_interopDefaultLegacy(EyeIcon);
 var RefreshIcon__default = /*#__PURE__*/_interopDefaultLegacy(RefreshIcon);
@@ -24,6 +26,7 @@ var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 
 var script = {
     name: 'Image',
+    extends: BaseComponent__default["default"],
     inheritAttrs: false,
     emits: ['show', 'hide', 'error'],
     props: {
@@ -54,6 +57,14 @@ var script = {
         indicatorIcon: {
             type: String,
             default: undefined
+        },
+        zoomInDisabled: {
+            type: Boolean,
+            default: false
+        },
+        zoomOutDisabled: {
+            type: Boolean,
+            default: false
         }
     },
     mask: null,
@@ -88,7 +99,13 @@ var script = {
         onPreviewImageClick() {
             this.previewClick = true;
         },
-        onMaskClick() {
+        onMaskClick(event) {
+            const isActionbarTarget = [event.target.classList].includes('p-image-action') || event.target.closest('.p-image-action');
+
+            if (isActionbarTarget) {
+                return;
+            }
+
             if (!this.previewClick) {
                 this.previewVisible = false;
                 this.rotate = 0;
@@ -151,6 +168,11 @@ var script = {
             if (focusTarget) {
                 focusTarget.focus();
             }
+        },
+        hidePreview() {
+            this.previewVisible = false;
+            this.rotate = 0;
+            this.scale = 1;
         }
     },
     computed: {
@@ -172,8 +194,11 @@ var script = {
         imagePreviewStyle() {
             return { transform: 'rotate(' + this.rotate + 'deg) scale(' + this.scale + ')' };
         },
-        zoomDisabled() {
-            return this.scale <= 0.5 || this.scale >= 1.5;
+        isZoomInDisabled() {
+            return this.zoomInDisabled || this.scale >= 1.5;
+        },
+        isZoomOutDisabled() {
+            return this.zoomOutDisabled || this.scale <= 0.5;
         },
         rightAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.rotateRight : undefined;
@@ -206,14 +231,12 @@ var script = {
 };
 
 const _hoisted_1 = ["aria-modal"];
-const _hoisted_2 = { class: "p-image-toolbar" };
+const _hoisted_2 = ["aria-label"];
 const _hoisted_3 = ["aria-label"];
-const _hoisted_4 = ["aria-label"];
+const _hoisted_4 = ["disabled", "aria-label"];
 const _hoisted_5 = ["disabled", "aria-label"];
-const _hoisted_6 = ["disabled", "aria-label"];
-const _hoisted_7 = ["aria-label"];
-const _hoisted_8 = { key: 0 };
-const _hoisted_9 = ["src"];
+const _hoisted_6 = ["aria-label"];
+const _hoisted_7 = ["src"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_RefreshIcon = vue.resolveComponent("RefreshIcon");
@@ -224,94 +247,100 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Portal = vue.resolveComponent("Portal");
   const _directive_focustrap = vue.resolveDirective("focustrap");
 
-  return (vue.openBlock(), vue.createElementBlock("span", {
-    class: vue.normalizeClass($options.containerClass),
-    style: vue.normalizeStyle($props.style)
-  }, [
-    vue.createElementVNode("img", vue.mergeProps(_ctx.$attrs, {
-      style: $props.imageStyle,
-      class: $props.imageClass,
-      onError: _cache[0] || (_cache[0] = (...args) => ($options.onError && $options.onError(...args)))
-    }), null, 16),
+  return (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+    class: $options.containerClass,
+    style: $props.style
+  }, _ctx.ptm('root')), [
+    vue.renderSlot(_ctx.$slots, "image", {
+      class: vue.normalizeClass($props.imageClass),
+      style: vue.normalizeStyle($props.imageStyle),
+      onError: $options.onError
+    }, () => [
+      vue.createElementVNode("img", vue.mergeProps({
+        style: $props.imageStyle,
+        class: $props.imageClass,
+        onError: _cache[0] || (_cache[0] = (...args) => ($options.onError && $options.onError(...args)))
+      }, { ..._ctx.$attrs, ..._ctx.ptm('image') }), null, 16)
+    ]),
     ($props.preview)
       ? (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
           key: 0,
           ref: "previewButton",
           class: "p-image-preview-indicator",
           onClick: _cache[1] || (_cache[1] = (...args) => ($options.onImageClick && $options.onImageClick(...args)))
-        }, $props.previewButtonProps), [
+        }, { ...$props.previewButtonProps, ..._ctx.ptm('button') }), [
           vue.renderSlot(_ctx.$slots, "indicatoricon", {}, () => [
-            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.indicatorIcon ? 'i' : 'EyeIcon'), { class: "p-image-preview-icon" }))
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.indicatorIcon ? 'i' : 'EyeIcon'), vue.mergeProps({ class: "p-image-preview-icon" }, _ctx.ptm('icon')), null, 16))
           ])
         ], 16))
       : vue.createCommentVNode("", true),
     vue.createVNode(_component_Portal, null, {
       default: vue.withCtx(() => [
         ($data.maskVisible)
-          ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+          ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
               key: 0,
               ref: $options.maskRef,
               role: "dialog",
-              class: vue.normalizeClass($options.maskClass),
+              class: $options.maskClass,
               "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)))
-            }, [
-              vue.createElementVNode("div", _hoisted_2, [
-                vue.createElementVNode("button", {
+            }, _ctx.ptm('mask')), [
+              vue.createElementVNode("div", vue.mergeProps({ class: "p-image-toolbar" }, _ctx.ptm('toolbar')), [
+                vue.createElementVNode("button", vue.mergeProps({
                   class: "p-image-action p-link",
                   onClick: _cache[2] || (_cache[2] = (...args) => ($options.rotateRight && $options.rotateRight(...args))),
                   type: "button",
                   "aria-label": $options.rightAriaLabel
-                }, [
+                }, _ctx.ptm('rotateRightButton')), [
                   vue.renderSlot(_ctx.$slots, "refresh", {}, () => [
-                    vue.createVNode(_component_RefreshIcon)
+                    vue.createVNode(_component_RefreshIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('rotateRightIcon'))), null, 16)
                   ])
-                ], 8, _hoisted_3),
-                vue.createElementVNode("button", {
+                ], 16, _hoisted_2),
+                vue.createElementVNode("button", vue.mergeProps({
                   class: "p-image-action p-link",
                   onClick: _cache[3] || (_cache[3] = (...args) => ($options.rotateLeft && $options.rotateLeft(...args))),
                   type: "button",
                   "aria-label": $options.leftAriaLabel
-                }, [
+                }, _ctx.ptm('rotateLeftButton')), [
                   vue.renderSlot(_ctx.$slots, "undo", {}, () => [
-                    vue.createVNode(_component_UndoIcon)
+                    vue.createVNode(_component_UndoIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('rotateLeftIcon'))), null, 16)
                   ])
-                ], 8, _hoisted_4),
-                vue.createElementVNode("button", {
-                  class: "p-image-action p-link",
+                ], 16, _hoisted_3),
+                vue.createElementVNode("button", vue.mergeProps({
+                  class: ['p-image-action p-link', { 'p-disabled': $options.isZoomOutDisabled }],
                   onClick: _cache[4] || (_cache[4] = (...args) => ($options.zoomOut && $options.zoomOut(...args))),
                   type: "button",
-                  disabled: $options.zoomDisabled,
+                  disabled: $options.isZoomOutDisabled,
                   "aria-label": $options.zoomOutAriaLabel
-                }, [
+                }, _ctx.ptm('zoomOutButton')), [
                   vue.renderSlot(_ctx.$slots, "zoomout", {}, () => [
-                    vue.createVNode(_component_SearchMinusIcon)
+                    vue.createVNode(_component_SearchMinusIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('zoomOutIcon'))), null, 16)
                   ])
-                ], 8, _hoisted_5),
-                vue.createElementVNode("button", {
-                  class: "p-image-action p-link",
+                ], 16, _hoisted_4),
+                vue.createElementVNode("button", vue.mergeProps({
+                  class: ['p-image-action p-link', { 'p-disabled': $options.isZoomInDisabled }],
                   onClick: _cache[5] || (_cache[5] = (...args) => ($options.zoomIn && $options.zoomIn(...args))),
                   type: "button",
-                  disabled: $options.zoomDisabled,
+                  disabled: $options.isZoomInDisabled,
                   "aria-label": $options.zoomInAriaLabel
-                }, [
+                }, _ctx.ptm('zoomInButton')), [
                   vue.renderSlot(_ctx.$slots, "zoomin", {}, () => [
-                    vue.createVNode(_component_SearchPlusIcon)
+                    vue.createVNode(_component_SearchPlusIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('zoomInIcon'))), null, 16)
                   ])
-                ], 8, _hoisted_6),
-                vue.createElementVNode("button", {
+                ], 16, _hoisted_5),
+                vue.createElementVNode("button", vue.mergeProps({
                   class: "p-image-action p-link",
                   type: "button",
-                  onClick: _cache[6] || (_cache[6] = (...args) => (_ctx.hidePreview && _ctx.hidePreview(...args))),
+                  onClick: _cache[6] || (_cache[6] = (...args) => ($options.hidePreview && $options.hidePreview(...args))),
                   "aria-label": $options.closeAriaLabel,
                   autofocus: ""
-                }, [
+                }, _ctx.ptm('closeButton')), [
                   vue.renderSlot(_ctx.$slots, "close", {}, () => [
-                    vue.createVNode(_component_TimesIcon)
+                    vue.createVNode(_component_TimesIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('closeIcon'))), null, 16)
                   ])
-                ], 8, _hoisted_7)
-              ]),
+                ], 16, _hoisted_6)
+              ], 16),
               vue.createVNode(vue.Transition, {
                 name: "p-image-preview",
                 onBeforeEnter: $options.onBeforeEnter,
@@ -322,26 +351,32 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               }, {
                 default: vue.withCtx(() => [
                   ($data.previewVisible)
-                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
-                        vue.createElementVNode("img", {
-                          src: _ctx.$attrs.src,
+                    ? (vue.openBlock(), vue.createElementBlock("div", vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.ptm('previewContainer'))), [
+                        vue.renderSlot(_ctx.$slots, "preview", {
                           class: "p-image-preview",
                           style: vue.normalizeStyle($options.imagePreviewStyle),
-                          onClick: _cache[7] || (_cache[7] = (...args) => ($options.onPreviewImageClick && $options.onPreviewImageClick(...args)))
-                        }, null, 12, _hoisted_9)
-                      ]))
+                          onClick: $options.onPreviewImageClick
+                        }, () => [
+                          vue.createElementVNode("img", vue.mergeProps({
+                            src: _ctx.$attrs.src,
+                            class: "p-image-preview",
+                            style: $options.imagePreviewStyle,
+                            onClick: _cache[7] || (_cache[7] = (...args) => ($options.onPreviewImageClick && $options.onPreviewImageClick(...args)))
+                          }, _ctx.ptm('preview')), null, 16, _hoisted_7)
+                        ])
+                      ], 16))
                     : vue.createCommentVNode("", true)
                 ]),
-                _: 1
+                _: 3
               }, 8, ["onBeforeEnter", "onEnter", "onLeave", "onBeforeLeave", "onAfterLeave"])
-            ], 42, _hoisted_1)), [
+            ], 16, _hoisted_1)), [
               [_directive_focustrap]
             ])
           : vue.createCommentVNode("", true)
       ]),
       _: 3
     })
-  ], 6))
+  ], 16))
 }
 
 function styleInject(css, ref) {

package/image/image.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/focustrap"),t=require("primevue/icons/eye"),i=require("primevue/icons/refresh"),o=require("primevue/icons/searchminus"),a=require("primevue/icons/searchplus"),n=require("primevue/icons/times"),r=require("primevue/icons/undo"),l=require("primevue/portal"),s=require("primevue/utils"),c=require("vue");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=m(e),u=m(t),d=m(i),v=m(o),h=m(a),f=m(n),g=m(r),k={name:"Image",inheritAttrs:!1,emits:["show","hide","error"],props:{preview:{type:Boolean,default:!1},class:{type:null,default:null},style:{type:null,default:null},imageStyle:{type:null,default:null},imageClass:{type:null,default:null},previewButtonProps:{type:null,default:null},indicatorIcon:{type:String,default:void 0}},mask:null,data:()=>({maskVisible:!1,previewVisible:!1,rotate:0,scale:1}),beforeUnmount(){this.mask&&s.ZIndexUtils.clear(this.container)},methods:{maskRef(e){this.mask=e},toolbarRef(e){this.toolbarRef=e},onImageClick(){this.preview&&(this.maskVisible=!0,setTimeout((()=>{this.previewVisible=!0}),25))},onPreviewImageClick(){this.previewClick=!0},onMaskClick(){this.previewClick||(this.previewVisible=!1,this.rotate=0,this.scale=1),this.previewClick=!1},onMaskKeydown(e){if("Escape"===e.code)this.onMaskClick(),setTimeout((()=>{s.DomHandler.focus(this.$refs.previewButton)}),25),e.preventDefault()},onError(){this.$emit("error")},rotateRight(){this.rotate+=90,this.previewClick=!0},rotateLeft(){this.rotate-=90,this.previewClick=!0},zoomIn(){this.scale=this.scale+.1,this.previewClick=!0},zoomOut(){this.scale=this.scale-.1,this.previewClick=!0},onBeforeEnter(){s.ZIndexUtils.set("modal",this.mask,this.$primevue.config.zIndex.modal)},onEnter(){this.focus(),this.$emit("show")},onBeforeLeave(){s.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(e){s.ZIndexUtils.clear(e),this.maskVisible=!1},focus(){let e=this.mask.querySelector("[autofocus]");e&&e.focus()}},computed:{containerClass(){return["p-image p-component",this.class,{"p-image-preview-container":this.preview}]},maskClass:()=>["p-image-mask p-component-overlay p-component-overlay-enter"],rotateClass(){return"p-image-preview-rotate-"+this.rotate},imagePreviewStyle(){return{transform:"rotate("+this.rotate+"deg) scale("+this.scale+")"}},zoomDisabled(){return this.scale<=.5||this.scale>=1.5},rightAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.rotateRight:void 0},leftAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.rotateLeft:void 0},zoomInAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.zoomIn:void 0},zoomOutAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.zoomOut:void 0},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},components:{Portal:m(l).default,EyeIcon:u.default,RefreshIcon:d.default,UndoIcon:g.default,SearchMinusIcon:v.default,SearchPlusIcon:h.default,TimesIcon:f.default},directives:{focustrap:p.default}};const b=["aria-modal"],y={class:"p-image-toolbar"},w=["aria-label"],C=["aria-label"],I=["disabled","aria-label"],E=["disabled","aria-label"],V=["aria-label"],L={key:0},B=["src"];!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===i&&o.firstChild?o.insertBefore(a,o.firstChild):o.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-image-mask {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-image-preview-container {\n    position: relative;\n    display: inline-block;\n}\n.p-image-preview-indicator {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    transition: opacity 0.3s;\n}\n.p-image-preview-container:hover > .p-image-preview-indicator {\n    opacity: 1;\n    cursor: pointer;\n}\n.p-image-preview-container > img {\n    cursor: pointer;\n}\n.p-image-toolbar {\n    position: absolute;\n    top: 0;\n    right: 0;\n    display: flex;\n}\n.p-image-action.p-link {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n.p-image-preview {\n    transition: transform 0.15s;\n    max-width: 100vw;\n    max-height: 100vh;\n}\n.p-image-preview-enter-active {\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-image-preview-leave-active {\n    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-image-preview-enter-from,\n.p-image-preview-leave-to {\n    opacity: 0;\n    transform: scale(0.7);\n}\n"),k.render=function(e,t,i,o,a,n){const r=c.resolveComponent("RefreshIcon"),l=c.resolveComponent("UndoIcon"),s=c.resolveComponent("SearchMinusIcon"),m=c.resolveComponent("SearchPlusIcon"),p=c.resolveComponent("TimesIcon"),u=c.resolveComponent("Portal"),d=c.resolveDirective("focustrap");return c.openBlock(),c.createElementBlock("span",{class:c.normalizeClass(n.containerClass),style:c.normalizeStyle(i.style)},[c.createElementVNode("img",c.mergeProps(e.$attrs,{style:i.imageStyle,class:i.imageClass,onError:t[0]||(t[0]=(...e)=>n.onError&&n.onError(...e))}),null,16),i.preview?(c.openBlock(),c.createElementBlock("button",c.mergeProps({key:0,ref:"previewButton",class:"p-image-preview-indicator",onClick:t[1]||(t[1]=(...e)=>n.onImageClick&&n.onImageClick(...e))},i.previewButtonProps),[c.renderSlot(e.$slots,"indicatoricon",{},(()=>[(c.openBlock(),c.createBlock(c.resolveDynamicComponent(i.indicatorIcon?"i":"EyeIcon"),{class:"p-image-preview-icon"}))]))],16)):c.createCommentVNode("",!0),c.createVNode(u,null,{default:c.withCtx((()=>[a.maskVisible?c.withDirectives((c.openBlock(),c.createElementBlock("div",{key:0,ref:n.maskRef,role:"dialog",class:c.normalizeClass(n.maskClass),"aria-modal":a.maskVisible,onClick:t[8]||(t[8]=(...e)=>n.onMaskClick&&n.onMaskClick(...e)),onKeydown:t[9]||(t[9]=(...e)=>n.onMaskKeydown&&n.onMaskKeydown(...e))},[c.createElementVNode("div",y,[c.createElementVNode("button",{class:"p-image-action p-link",onClick:t[2]||(t[2]=(...e)=>n.rotateRight&&n.rotateRight(...e)),type:"button","aria-label":n.rightAriaLabel},[c.renderSlot(e.$slots,"refresh",{},(()=>[c.createVNode(r)]))],8,w),c.createElementVNode("button",{class:"p-image-action p-link",onClick:t[3]||(t[3]=(...e)=>n.rotateLeft&&n.rotateLeft(...e)),type:"button","aria-label":n.leftAriaLabel},[c.renderSlot(e.$slots,"undo",{},(()=>[c.createVNode(l)]))],8,C),c.createElementVNode("button",{class:"p-image-action p-link",onClick:t[4]||(t[4]=(...e)=>n.zoomOut&&n.zoomOut(...e)),type:"button",disabled:n.zoomDisabled,"aria-label":n.zoomOutAriaLabel},[c.renderSlot(e.$slots,"zoomout",{},(()=>[c.createVNode(s)]))],8,I),c.createElementVNode("button",{class:"p-image-action p-link",onClick:t[5]||(t[5]=(...e)=>n.zoomIn&&n.zoomIn(...e)),type:"button",disabled:n.zoomDisabled,"aria-label":n.zoomInAriaLabel},[c.renderSlot(e.$slots,"zoomin",{},(()=>[c.createVNode(m)]))],8,E),c.createElementVNode("button",{class:"p-image-action p-link",type:"button",onClick:t[6]||(t[6]=(...t)=>e.hidePreview&&e.hidePreview(...t)),"aria-label":n.closeAriaLabel,autofocus:""},[c.renderSlot(e.$slots,"close",{},(()=>[c.createVNode(p)]))],8,V)]),c.createVNode(c.Transition,{name:"p-image-preview",onBeforeEnter:n.onBeforeEnter,onEnter:n.onEnter,onLeave:n.onLeave,onBeforeLeave:n.onBeforeLeave,onAfterLeave:n.onAfterLeave},{default:c.withCtx((()=>[a.previewVisible?(c.openBlock(),c.createElementBlock("div",L,[c.createElementVNode("img",{src:e.$attrs.src,class:"p-image-preview",style:c.normalizeStyle(n.imagePreviewStyle),onClick:t[7]||(t[7]=(...e)=>n.onPreviewImageClick&&n.onPreviewImageClick(...e))},null,12,B)])):c.createCommentVNode("",!0)])),_:1},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],42,b)),[[d]]):c.createCommentVNode("",!0)])),_:3})],6)},module.exports=k;
+"use strict";var e=require("primevue/basecomponent"),t=require("primevue/focustrap"),o=require("primevue/icons/eye"),i=require("primevue/icons/refresh"),r=require("primevue/icons/searchminus"),a=require("primevue/icons/searchplus"),n=require("primevue/icons/times"),l=require("primevue/icons/undo"),s=require("primevue/portal"),c=require("primevue/utils"),m=require("vue");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=p(e),d=p(t),v=p(o),h=p(i),g=p(r),f=p(a),b=p(n),k=p(l),y=p(s),w={name:"Image",extends:u.default,inheritAttrs:!1,emits:["show","hide","error"],props:{preview:{type:Boolean,default:!1},class:{type:null,default:null},style:{type:null,default:null},imageStyle:{type:null,default:null},imageClass:{type:null,default:null},previewButtonProps:{type:null,default:null},indicatorIcon:{type:String,default:void 0},zoomInDisabled:{type:Boolean,default:!1},zoomOutDisabled:{type:Boolean,default:!1}},mask:null,data:()=>({maskVisible:!1,previewVisible:!1,rotate:0,scale:1}),beforeUnmount(){this.mask&&c.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(e){[e.target.classList].includes("p-image-action")||e.target.closest(".p-image-action")||(this.previewClick||(this.previewVisible=!1,this.rotate=0,this.scale=1),this.previewClick=!1)},onMaskKeydown(e){if("Escape"===e.code)this.onMaskClick(),setTimeout((()=>{c.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(){c.ZIndexUtils.set("modal",this.mask,this.$primevue.config.zIndex.modal)},onEnter(){this.focus(),this.$emit("show")},onBeforeLeave(){c.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(e){c.ZIndexUtils.clear(e),this.maskVisible=!1},focus(){let e=this.mask.querySelector("[autofocus]");e&&e.focus()},hidePreview(){this.previewVisible=!1,this.rotate=0,this.scale=1}},computed:{containerClass(){return["p-image p-component",this.class,{"p-image-preview-container":this.preview}]},maskClass:()=>["p-image-mask p-component-overlay p-component-overlay-enter"],rotateClass(){return"p-image-preview-rotate-"+this.rotate},imagePreviewStyle(){return{transform:"rotate("+this.rotate+"deg) scale("+this.scale+")"}},isZoomInDisabled(){return this.zoomInDisabled||this.scale>=1.5},isZoomOutDisabled(){return this.zoomOutDisabled||this.scale<=.5},rightAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.rotateRight:void 0},leftAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.rotateLeft:void 0},zoomInAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.zoomIn:void 0},zoomOutAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.zoomOut:void 0},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},components:{Portal:y.default,EyeIcon:v.default,RefreshIcon:h.default,UndoIcon:k.default,SearchMinusIcon:g.default,SearchPlusIcon:f.default,TimesIcon:b.default},directives:{focustrap:d.default}};const C=["aria-modal"],I=["aria-label"],P=["aria-label"],z=["disabled","aria-label"],B=["disabled","aria-label"],E=["aria-label"],L=["src"];!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("\n.p-image-mask {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-image-preview-container {\n    position: relative;\n    display: inline-block;\n}\n.p-image-preview-indicator {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    transition: opacity 0.3s;\n}\n.p-image-preview-container:hover > .p-image-preview-indicator {\n    opacity: 1;\n    cursor: pointer;\n}\n.p-image-preview-container > img {\n    cursor: pointer;\n}\n.p-image-toolbar {\n    position: absolute;\n    top: 0;\n    right: 0;\n    display: flex;\n}\n.p-image-action.p-link {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n.p-image-preview {\n    transition: transform 0.15s;\n    max-width: 100vw;\n    max-height: 100vh;\n}\n.p-image-preview-enter-active {\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-image-preview-leave-active {\n    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-image-preview-enter-from,\n.p-image-preview-leave-to {\n    opacity: 0;\n    transform: scale(0.7);\n}\n"),w.render=function(e,t,o,i,r,a){const n=m.resolveComponent("RefreshIcon"),l=m.resolveComponent("UndoIcon"),s=m.resolveComponent("SearchMinusIcon"),c=m.resolveComponent("SearchPlusIcon"),p=m.resolveComponent("TimesIcon"),u=m.resolveComponent("Portal"),d=m.resolveDirective("focustrap");return m.openBlock(),m.createElementBlock("span",m.mergeProps({class:a.containerClass,style:o.style},e.ptm("root")),[m.renderSlot(e.$slots,"image",{class:m.normalizeClass(o.imageClass),style:m.normalizeStyle(o.imageStyle),onError:a.onError},(()=>[m.createElementVNode("img",m.mergeProps({style:o.imageStyle,class:o.imageClass,onError:t[0]||(t[0]=(...e)=>a.onError&&a.onError(...e))},{...e.$attrs,...e.ptm("image")}),null,16)])),o.preview?(m.openBlock(),m.createElementBlock("button",m.mergeProps({key:0,ref:"previewButton",class:"p-image-preview-indicator",onClick:t[1]||(t[1]=(...e)=>a.onImageClick&&a.onImageClick(...e))},{...o.previewButtonProps,...e.ptm("button")}),[m.renderSlot(e.$slots,"indicatoricon",{},(()=>[(m.openBlock(),m.createBlock(m.resolveDynamicComponent(o.indicatorIcon?"i":"EyeIcon"),m.mergeProps({class:"p-image-preview-icon"},e.ptm("icon")),null,16))]))],16)):m.createCommentVNode("",!0),m.createVNode(u,null,{default:m.withCtx((()=>[r.maskVisible?m.withDirectives((m.openBlock(),m.createElementBlock("div",m.mergeProps({key:0,ref:a.maskRef,role:"dialog",class:a.maskClass,"aria-modal":r.maskVisible,onClick:t[8]||(t[8]=(...e)=>a.onMaskClick&&a.onMaskClick(...e)),onKeydown:t[9]||(t[9]=(...e)=>a.onMaskKeydown&&a.onMaskKeydown(...e))},e.ptm("mask")),[m.createElementVNode("div",m.mergeProps({class:"p-image-toolbar"},e.ptm("toolbar")),[m.createElementVNode("button",m.mergeProps({class:"p-image-action p-link",onClick:t[2]||(t[2]=(...e)=>a.rotateRight&&a.rotateRight(...e)),type:"button","aria-label":a.rightAriaLabel},e.ptm("rotateRightButton")),[m.renderSlot(e.$slots,"refresh",{},(()=>[m.createVNode(n,m.normalizeProps(m.guardReactiveProps(e.ptm("rotateRightIcon"))),null,16)]))],16,I),m.createElementVNode("button",m.mergeProps({class:"p-image-action p-link",onClick:t[3]||(t[3]=(...e)=>a.rotateLeft&&a.rotateLeft(...e)),type:"button","aria-label":a.leftAriaLabel},e.ptm("rotateLeftButton")),[m.renderSlot(e.$slots,"undo",{},(()=>[m.createVNode(l,m.normalizeProps(m.guardReactiveProps(e.ptm("rotateLeftIcon"))),null,16)]))],16,P),m.createElementVNode("button",m.mergeProps({class:["p-image-action p-link",{"p-disabled":a.isZoomOutDisabled}],onClick:t[4]||(t[4]=(...e)=>a.zoomOut&&a.zoomOut(...e)),type:"button",disabled:a.isZoomOutDisabled,"aria-label":a.zoomOutAriaLabel},e.ptm("zoomOutButton")),[m.renderSlot(e.$slots,"zoomout",{},(()=>[m.createVNode(s,m.normalizeProps(m.guardReactiveProps(e.ptm("zoomOutIcon"))),null,16)]))],16,z),m.createElementVNode("button",m.mergeProps({class:["p-image-action p-link",{"p-disabled":a.isZoomInDisabled}],onClick:t[5]||(t[5]=(...e)=>a.zoomIn&&a.zoomIn(...e)),type:"button",disabled:a.isZoomInDisabled,"aria-label":a.zoomInAriaLabel},e.ptm("zoomInButton")),[m.renderSlot(e.$slots,"zoomin",{},(()=>[m.createVNode(c,m.normalizeProps(m.guardReactiveProps(e.ptm("zoomInIcon"))),null,16)]))],16,B),m.createElementVNode("button",m.mergeProps({class:"p-image-action p-link",type:"button",onClick:t[6]||(t[6]=(...e)=>a.hidePreview&&a.hidePreview(...e)),"aria-label":a.closeAriaLabel,autofocus:""},e.ptm("closeButton")),[m.renderSlot(e.$slots,"close",{},(()=>[m.createVNode(p,m.normalizeProps(m.guardReactiveProps(e.ptm("closeIcon"))),null,16)]))],16,E)],16),m.createVNode(m.Transition,{name:"p-image-preview",onBeforeEnter:a.onBeforeEnter,onEnter:a.onEnter,onLeave:a.onLeave,onBeforeLeave:a.onBeforeLeave,onAfterLeave:a.onAfterLeave},{default:m.withCtx((()=>[r.previewVisible?(m.openBlock(),m.createElementBlock("div",m.normalizeProps(m.mergeProps({key:0},e.ptm("previewContainer"))),[m.renderSlot(e.$slots,"preview",{class:"p-image-preview",style:m.normalizeStyle(a.imagePreviewStyle),onClick:a.onPreviewImageClick},(()=>[m.createElementVNode("img",m.mergeProps({src:e.$attrs.src,class:"p-image-preview",style:a.imagePreviewStyle,onClick:t[7]||(t[7]=(...e)=>a.onPreviewImageClick&&a.onPreviewImageClick(...e))},e.ptm("preview")),null,16,L)]))],16)):m.createCommentVNode("",!0)])),_:3},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],16,C)),[[d]]):m.createCommentVNode("",!0)])),_:3})],16)},module.exports=w;

package/image/image.esm.js

@@ -1,3 +1,4 @@
+import BaseComponent from 'primevue/basecomponent';
 import FocusTrap from 'primevue/focustrap';
 import EyeIcon from 'primevue/icons/eye';
 import RefreshIcon from 'primevue/icons/refresh';
@@ -7,10 +8,11 @@ import TimesIcon from 'primevue/icons/times';
 import UndoIcon from 'primevue/icons/undo';
 import Portal from 'primevue/portal';
 import { ZIndexUtils, DomHandler } from 'primevue/utils';
-import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, mergeProps, renderSlot, createBlock, resolveDynamicComponent, createCommentVNode, createVNode, withCtx, withDirectives, Transition } from 'vue';
+import { resolveComponent, resolveDirective, openBlock, createElementBlock, mergeProps, renderSlot, normalizeClass, normalizeStyle, createElementVNode, createBlock, resolveDynamicComponent, createCommentVNode, createVNode, withCtx, withDirectives, normalizeProps, guardReactiveProps, Transition } from 'vue';
 
 var script = {
     name: 'Image',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['show', 'hide', 'error'],
     props: {
@@ -41,6 +43,14 @@ var script = {
         indicatorIcon: {
             type: String,
             default: undefined
+        },
+        zoomInDisabled: {
+            type: Boolean,
+            default: false
+        },
+        zoomOutDisabled: {
+            type: Boolean,
+            default: false
         }
     },
     mask: null,
@@ -75,7 +85,13 @@ var script = {
         onPreviewImageClick() {
             this.previewClick = true;
         },
-        onMaskClick() {
+        onMaskClick(event) {
+            const isActionbarTarget = [event.target.classList].includes('p-image-action') || event.target.closest('.p-image-action');
+
+            if (isActionbarTarget) {
+                return;
+            }
+
             if (!this.previewClick) {
                 this.previewVisible = false;
                 this.rotate = 0;
@@ -138,6 +154,11 @@ var script = {
             if (focusTarget) {
                 focusTarget.focus();
             }
+        },
+        hidePreview() {
+            this.previewVisible = false;
+            this.rotate = 0;
+            this.scale = 1;
         }
     },
     computed: {
@@ -159,8 +180,11 @@ var script = {
         imagePreviewStyle() {
             return { transform: 'rotate(' + this.rotate + 'deg) scale(' + this.scale + ')' };
         },
-        zoomDisabled() {
-            return this.scale <= 0.5 || this.scale >= 1.5;
+        isZoomInDisabled() {
+            return this.zoomInDisabled || this.scale >= 1.5;
+        },
+        isZoomOutDisabled() {
+            return this.zoomOutDisabled || this.scale <= 0.5;
         },
         rightAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.rotateRight : undefined;
@@ -193,14 +217,12 @@ var script = {
 };
 
 const _hoisted_1 = ["aria-modal"];
-const _hoisted_2 = { class: "p-image-toolbar" };
+const _hoisted_2 = ["aria-label"];
 const _hoisted_3 = ["aria-label"];
-const _hoisted_4 = ["aria-label"];
+const _hoisted_4 = ["disabled", "aria-label"];
 const _hoisted_5 = ["disabled", "aria-label"];
-const _hoisted_6 = ["disabled", "aria-label"];
-const _hoisted_7 = ["aria-label"];
-const _hoisted_8 = { key: 0 };
-const _hoisted_9 = ["src"];
+const _hoisted_6 = ["aria-label"];
+const _hoisted_7 = ["src"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_RefreshIcon = resolveComponent("RefreshIcon");
@@ -211,94 +233,100 @@ 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),
-    style: normalizeStyle($props.style)
-  }, [
-    createElementVNode("img", mergeProps(_ctx.$attrs, {
-      style: $props.imageStyle,
-      class: $props.imageClass,
-      onError: _cache[0] || (_cache[0] = (...args) => ($options.onError && $options.onError(...args)))
-    }), null, 16),
+  return (openBlock(), createElementBlock("span", mergeProps({
+    class: $options.containerClass,
+    style: $props.style
+  }, _ctx.ptm('root')), [
+    renderSlot(_ctx.$slots, "image", {
+      class: normalizeClass($props.imageClass),
+      style: normalizeStyle($props.imageStyle),
+      onError: $options.onError
+    }, () => [
+      createElementVNode("img", mergeProps({
+        style: $props.imageStyle,
+        class: $props.imageClass,
+        onError: _cache[0] || (_cache[0] = (...args) => ($options.onError && $options.onError(...args)))
+      }, { ..._ctx.$attrs, ..._ctx.ptm('image') }), null, 16)
+    ]),
     ($props.preview)
       ? (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), [
+        }, { ...$props.previewButtonProps, ..._ctx.ptm('button') }), [
           renderSlot(_ctx.$slots, "indicatoricon", {}, () => [
-            (openBlock(), createBlock(resolveDynamicComponent($props.indicatorIcon ? 'i' : 'EyeIcon'), { class: "p-image-preview-icon" }))
+            (openBlock(), createBlock(resolveDynamicComponent($props.indicatorIcon ? 'i' : 'EyeIcon'), mergeProps({ class: "p-image-preview-icon" }, _ctx.ptm('icon')), null, 16))
           ])
         ], 16))
       : createCommentVNode("", true),
     createVNode(_component_Portal, null, {
       default: withCtx(() => [
         ($data.maskVisible)
-          ? withDirectives((openBlock(), createElementBlock("div", {
+          ? withDirectives((openBlock(), createElementBlock("div", mergeProps({
               key: 0,
               ref: $options.maskRef,
               role: "dialog",
-              class: normalizeClass($options.maskClass),
+              class: $options.maskClass,
               "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("button", {
+            }, _ctx.ptm('mask')), [
+              createElementVNode("div", mergeProps({ class: "p-image-toolbar" }, _ctx.ptm('toolbar')), [
+                createElementVNode("button", mergeProps({
                   class: "p-image-action p-link",
                   onClick: _cache[2] || (_cache[2] = (...args) => ($options.rotateRight && $options.rotateRight(...args))),
                   type: "button",
                   "aria-label": $options.rightAriaLabel
-                }, [
+                }, _ctx.ptm('rotateRightButton')), [
                   renderSlot(_ctx.$slots, "refresh", {}, () => [
-                    createVNode(_component_RefreshIcon)
+                    createVNode(_component_RefreshIcon, normalizeProps(guardReactiveProps(_ctx.ptm('rotateRightIcon'))), null, 16)
                   ])
-                ], 8, _hoisted_3),
-                createElementVNode("button", {
+                ], 16, _hoisted_2),
+                createElementVNode("button", mergeProps({
                   class: "p-image-action p-link",
                   onClick: _cache[3] || (_cache[3] = (...args) => ($options.rotateLeft && $options.rotateLeft(...args))),
                   type: "button",
                   "aria-label": $options.leftAriaLabel
-                }, [
+                }, _ctx.ptm('rotateLeftButton')), [
                   renderSlot(_ctx.$slots, "undo", {}, () => [
-                    createVNode(_component_UndoIcon)
+                    createVNode(_component_UndoIcon, normalizeProps(guardReactiveProps(_ctx.ptm('rotateLeftIcon'))), null, 16)
                   ])
-                ], 8, _hoisted_4),
-                createElementVNode("button", {
-                  class: "p-image-action p-link",
+                ], 16, _hoisted_3),
+                createElementVNode("button", mergeProps({
+                  class: ['p-image-action p-link', { 'p-disabled': $options.isZoomOutDisabled }],
                   onClick: _cache[4] || (_cache[4] = (...args) => ($options.zoomOut && $options.zoomOut(...args))),
                   type: "button",
-                  disabled: $options.zoomDisabled,
+                  disabled: $options.isZoomOutDisabled,
                   "aria-label": $options.zoomOutAriaLabel
-                }, [
+                }, _ctx.ptm('zoomOutButton')), [
                   renderSlot(_ctx.$slots, "zoomout", {}, () => [
-                    createVNode(_component_SearchMinusIcon)
+                    createVNode(_component_SearchMinusIcon, normalizeProps(guardReactiveProps(_ctx.ptm('zoomOutIcon'))), null, 16)
                   ])
-                ], 8, _hoisted_5),
-                createElementVNode("button", {
-                  class: "p-image-action p-link",
+                ], 16, _hoisted_4),
+                createElementVNode("button", mergeProps({
+                  class: ['p-image-action p-link', { 'p-disabled': $options.isZoomInDisabled }],
                   onClick: _cache[5] || (_cache[5] = (...args) => ($options.zoomIn && $options.zoomIn(...args))),
                   type: "button",
-                  disabled: $options.zoomDisabled,
+                  disabled: $options.isZoomInDisabled,
                   "aria-label": $options.zoomInAriaLabel
-                }, [
+                }, _ctx.ptm('zoomInButton')), [
                   renderSlot(_ctx.$slots, "zoomin", {}, () => [
-                    createVNode(_component_SearchPlusIcon)
+                    createVNode(_component_SearchPlusIcon, normalizeProps(guardReactiveProps(_ctx.ptm('zoomInIcon'))), null, 16)
                   ])
-                ], 8, _hoisted_6),
-                createElementVNode("button", {
+                ], 16, _hoisted_5),
+                createElementVNode("button", mergeProps({
                   class: "p-image-action p-link",
                   type: "button",
-                  onClick: _cache[6] || (_cache[6] = (...args) => (_ctx.hidePreview && _ctx.hidePreview(...args))),
+                  onClick: _cache[6] || (_cache[6] = (...args) => ($options.hidePreview && $options.hidePreview(...args))),
                   "aria-label": $options.closeAriaLabel,
                   autofocus: ""
-                }, [
+                }, _ctx.ptm('closeButton')), [
                   renderSlot(_ctx.$slots, "close", {}, () => [
-                    createVNode(_component_TimesIcon)
+                    createVNode(_component_TimesIcon, normalizeProps(guardReactiveProps(_ctx.ptm('closeIcon'))), null, 16)
                   ])
-                ], 8, _hoisted_7)
-              ]),
+                ], 16, _hoisted_6)
+              ], 16),
               createVNode(Transition, {
                 name: "p-image-preview",
                 onBeforeEnter: $options.onBeforeEnter,
@@ -309,26 +337,32 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               }, {
                 default: withCtx(() => [
                   ($data.previewVisible)
-                    ? (openBlock(), createElementBlock("div", _hoisted_8, [
-                        createElementVNode("img", {
-                          src: _ctx.$attrs.src,
+                    ? (openBlock(), createElementBlock("div", normalizeProps(mergeProps({ key: 0 }, _ctx.ptm('previewContainer'))), [
+                        renderSlot(_ctx.$slots, "preview", {
                           class: "p-image-preview",
                           style: normalizeStyle($options.imagePreviewStyle),
-                          onClick: _cache[7] || (_cache[7] = (...args) => ($options.onPreviewImageClick && $options.onPreviewImageClick(...args)))
-                        }, null, 12, _hoisted_9)
-                      ]))
+                          onClick: $options.onPreviewImageClick
+                        }, () => [
+                          createElementVNode("img", mergeProps({
+                            src: _ctx.$attrs.src,
+                            class: "p-image-preview",
+                            style: $options.imagePreviewStyle,
+                            onClick: _cache[7] || (_cache[7] = (...args) => ($options.onPreviewImageClick && $options.onPreviewImageClick(...args)))
+                          }, _ctx.ptm('preview')), null, 16, _hoisted_7)
+                        ])
+                      ], 16))
                     : createCommentVNode("", true)
                 ]),
-                _: 1
+                _: 3
               }, 8, ["onBeforeEnter", "onEnter", "onLeave", "onBeforeLeave", "onAfterLeave"])
-            ], 42, _hoisted_1)), [
+            ], 16, _hoisted_1)), [
               [_directive_focustrap]
             ])
           : createCommentVNode("", true)
       ]),
       _: 3
     })
-  ], 6))
+  ], 16))
 }
 
 function styleInject(css, ref) {