primevue 3.26.1 → 3.28.0

package/image/image.esm.js

@@ -1,7 +1,13 @@
 import FocusTrap from 'primevue/focustrap';
+import EyeIcon from 'primevue/icons/eye';
+import RefreshIcon from 'primevue/icons/refresh';
+import SearchMinusIcon from 'primevue/icons/searchminus';
+import SearchPlusIcon from 'primevue/icons/searchplus';
+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, createCommentVNode, createVNode, withCtx, withDirectives, Transition } from 'vue';
+import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, mergeProps, renderSlot, createBlock, resolveDynamicComponent, createCommentVNode, createVNode, withCtx, withDirectives, Transition } from 'vue';
 
 var script = {
     name: 'Image',
@@ -34,7 +40,7 @@ var script = {
         },
         indicatorIcon: {
             type: String,
-            default: 'pi pi-eye'
+            default: undefined
         }
     },
     mask: null,
@@ -173,7 +179,13 @@ var script = {
         }
     },
     components: {
-        Portal: Portal
+        Portal: Portal,
+        EyeIcon: EyeIcon,
+        RefreshIcon: RefreshIcon,
+        UndoIcon: UndoIcon,
+        SearchMinusIcon: SearchMinusIcon,
+        SearchPlusIcon: SearchPlusIcon,
+        TimesIcon: TimesIcon
     },
     directives: {
         focustrap: FocusTrap
@@ -183,19 +195,19 @@ var script = {
 const _hoisted_1 = ["aria-modal"];
 const _hoisted_2 = { class: "p-image-toolbar" };
 const _hoisted_3 = ["aria-label"];
-const _hoisted_4 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-refresh" }, null, -1);
-const _hoisted_5 = ["aria-label"];
-const _hoisted_6 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-undo" }, null, -1);
-const _hoisted_7 = ["disabled", "aria-label"];
-const _hoisted_8 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-search-minus" }, null, -1);
-const _hoisted_9 = ["disabled", "aria-label"];
-const _hoisted_10 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-search-plus" }, null, -1);
-const _hoisted_11 = ["aria-label"];
-const _hoisted_12 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-times" }, null, -1);
-const _hoisted_13 = { key: 0 };
-const _hoisted_14 = ["src"];
+const _hoisted_4 = ["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"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_RefreshIcon = resolveComponent("RefreshIcon");
+  const _component_UndoIcon = resolveComponent("UndoIcon");
+  const _component_SearchMinusIcon = resolveComponent("SearchMinusIcon");
+  const _component_SearchPlusIcon = resolveComponent("SearchPlusIcon");
+  const _component_TimesIcon = resolveComponent("TimesIcon");
   const _component_Portal = resolveComponent("Portal");
   const _directive_focustrap = resolveDirective("focustrap");
 
@@ -215,10 +227,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           class: "p-image-preview-indicator",
           onClick: _cache[1] || (_cache[1] = (...args) => ($options.onImageClick && $options.onImageClick(...args)))
         }, $props.previewButtonProps), [
-          renderSlot(_ctx.$slots, "indicator", {}, () => [
-            createElementVNode("i", {
-              class: normalizeClass(['p-image-preview-icon', $props.indicatorIcon])
-            }, null, 2)
+          renderSlot(_ctx.$slots, "indicatoricon", {}, () => [
+            (openBlock(), createBlock(resolveDynamicComponent($props.indicatorIcon ? 'i' : 'EyeIcon'), { class: "p-image-preview-icon" }))
           ])
         ], 16))
       : createCommentVNode("", true),
@@ -242,7 +252,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   "aria-label": $options.rightAriaLabel
                 }, [
                   renderSlot(_ctx.$slots, "refresh", {}, () => [
-                    _hoisted_4
+                    createVNode(_component_RefreshIcon)
                   ])
                 ], 8, _hoisted_3),
                 createElementVNode("button", {
@@ -252,9 +262,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   "aria-label": $options.leftAriaLabel
                 }, [
                   renderSlot(_ctx.$slots, "undo", {}, () => [
-                    _hoisted_6
+                    createVNode(_component_UndoIcon)
                   ])
-                ], 8, _hoisted_5),
+                ], 8, _hoisted_4),
                 createElementVNode("button", {
                   class: "p-image-action p-link",
                   onClick: _cache[4] || (_cache[4] = (...args) => ($options.zoomOut && $options.zoomOut(...args))),
@@ -263,9 +273,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   "aria-label": $options.zoomOutAriaLabel
                 }, [
                   renderSlot(_ctx.$slots, "zoomout", {}, () => [
-                    _hoisted_8
+                    createVNode(_component_SearchMinusIcon)
                   ])
-                ], 8, _hoisted_7),
+                ], 8, _hoisted_5),
                 createElementVNode("button", {
                   class: "p-image-action p-link",
                   onClick: _cache[5] || (_cache[5] = (...args) => ($options.zoomIn && $options.zoomIn(...args))),
@@ -274,9 +284,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   "aria-label": $options.zoomInAriaLabel
                 }, [
                   renderSlot(_ctx.$slots, "zoomin", {}, () => [
-                    _hoisted_10
+                    createVNode(_component_SearchPlusIcon)
                   ])
-                ], 8, _hoisted_9),
+                ], 8, _hoisted_6),
                 createElementVNode("button", {
                   class: "p-image-action p-link",
                   type: "button",
@@ -285,9 +295,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   autofocus: ""
                 }, [
                   renderSlot(_ctx.$slots, "close", {}, () => [
-                    _hoisted_12
+                    createVNode(_component_TimesIcon)
                   ])
-                ], 8, _hoisted_11)
+                ], 8, _hoisted_7)
               ]),
               createVNode(Transition, {
                 name: "p-image-preview",
@@ -299,13 +309,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               }, {
                 default: withCtx(() => [
                   ($data.previewVisible)
-                    ? (openBlock(), createElementBlock("div", _hoisted_13, [
+                    ? (openBlock(), createElementBlock("div", _hoisted_8, [
                         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_14)
+                        }, null, 12, _hoisted_9)
                       ]))
                     : createCommentVNode("", true)
                 ]),
@@ -348,7 +358,7 @@ function styleInject(css, ref) {
   }
 }
 
-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";
+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-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 e from"primevue/focustrap";import i from"primevue/portal";import{ZIndexUtils as t,DomHandler as a}from"primevue/utils";import{resolveComponent as o,resolveDirective as n,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},indicatorIcon:{type:String,default:"pi pi-eye"}},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=["aria-modal"],w={class:"p-image-toolbar"},y=["aria-label"],C=p("i",{class:"pi pi-refresh"},null,-1),L=["aria-label"],$=p("i",{class:"pi pi-undo"},null,-1),z=["disabled","aria-label"],A=p("i",{class:"pi pi-search-minus"},null,-1),I=["disabled","aria-label"],B=p("i",{class:"pi pi-search-plus"},null,-1),E=["aria-label"],x=p("i",{class:"pi pi-times"},null,-1),P={key:0},V=["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],o=document.createElement("style");o.type="text/css","top"===t&&a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.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,R){const S=o("Portal"),M=n("focustrap");return r(),l("span",{class:s(R.containerClass),style:c(t.style)},[p("img",m(e.$attrs,{style:t.imageStyle,class:t.imageClass,onError:i[0]||(i[0]=(...e)=>R.onError&&R.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)=>R.onImageClick&&R.onImageClick(...e))},t.previewButtonProps),[u(e.$slots,"indicator",{},(()=>[p("i",{class:s(["p-image-preview-icon",t.indicatorIcon])},null,2)]))],16)):v("",!0),h(S,null,{default:f((()=>[b.maskVisible?d((r(),l("div",{key:0,ref:R.maskRef,role:"dialog",class:s(R.maskClass),"aria-modal":b.maskVisible,onClick:i[8]||(i[8]=(...e)=>R.onMaskClick&&R.onMaskClick(...e)),onKeydown:i[9]||(i[9]=(...e)=>R.onMaskKeydown&&R.onMaskKeydown(...e))},[p("div",w,[p("button",{class:"p-image-action p-link",onClick:i[2]||(i[2]=(...e)=>R.rotateRight&&R.rotateRight(...e)),type:"button","aria-label":R.rightAriaLabel},[u(e.$slots,"refresh",{},(()=>[C]))],8,y),p("button",{class:"p-image-action p-link",onClick:i[3]||(i[3]=(...e)=>R.rotateLeft&&R.rotateLeft(...e)),type:"button","aria-label":R.leftAriaLabel},[u(e.$slots,"undo",{},(()=>[$]))],8,L),p("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},[u(e.$slots,"zoomout",{},(()=>[A]))],8,z),p("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},[u(e.$slots,"zoomin",{},(()=>[B]))],8,I),p("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:""},[u(e.$slots,"close",{},(()=>[x]))],8,E)]),h(g,{name:"p-image-preview",onBeforeEnter:R.onBeforeEnter,onEnter:R.onEnter,onLeave:R.onLeave,onBeforeLeave:R.onBeforeLeave,onAfterLeave:R.onAfterLeave},{default:f((()=>[b.previewVisible?(r(),l("div",P,[p("img",{src:e.$attrs.src,class:"p-image-preview",style:c(R.imagePreviewStyle),onClick:i[7]||(i[7]=(...e)=>R.onPreviewImageClick&&R.onPreviewImageClick(...e))},null,12,V)])):v("",!0)])),_:1},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],42,k)),[[M]]):v("",!0)])),_:3})],6)};export{b as default};
+import e from"primevue/focustrap";import i from"primevue/icons/eye";import t from"primevue/icons/refresh";import o from"primevue/icons/searchminus";import a from"primevue/icons/searchplus";import n from"primevue/icons/times";import r from"primevue/icons/undo";import s from"primevue/portal";import{ZIndexUtils as l,DomHandler as c}from"primevue/utils";import{resolveComponent as m,resolveDirective as p,openBlock as u,createElementBlock as v,normalizeClass as f,normalizeStyle as h,createElementVNode as d,mergeProps as g,renderSlot as b,createBlock as k,resolveDynamicComponent as y,createCommentVNode as w,createVNode as C,withCtx as I,withDirectives as L,Transition as $}from"vue";var z={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&&l.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((()=>{c.focus(this.$refs.previewButton)}),25),e.preventDefault()},onError(){this.$emit("error")},rotateRight(){this.rotate+=90,this.previewClick=!0},rotateLeft(){this.rotate-=90,this.previewClick=!0},zoomIn(){this.scale=this.scale+.1,this.previewClick=!0},zoomOut(){this.scale=this.scale-.1,this.previewClick=!0},onBeforeEnter(){l.set("modal",this.mask,this.$primevue.config.zIndex.modal)},onEnter(){this.focus(),this.$emit("show")},onBeforeLeave(){c.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(e){l.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:s,EyeIcon:i,RefreshIcon:t,UndoIcon:r,SearchMinusIcon:o,SearchPlusIcon:a,TimesIcon:n},directives:{focustrap:e}};const E=["aria-modal"],A={class:"p-image-toolbar"},B=["aria-label"],P=["aria-label"],S=["disabled","aria-label"],x=["disabled","aria-label"],R=["aria-label"],M={key:0},V=["src"];!function(e,i){void 0===i&&(i={});var t=i.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&o.firstChild?o.insertBefore(a,o.firstChild):o.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-image-mask {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-image-preview-container {\n    position: relative;\n    display: inline-block;\n}\n.p-image-preview-indicator {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    transition: opacity 0.3s;\n}\n.p-image-preview-container:hover > .p-image-preview-indicator {\n    opacity: 1;\n    cursor: pointer;\n}\n.p-image-preview-container > img {\n    cursor: pointer;\n}\n.p-image-toolbar {\n    position: absolute;\n    top: 0;\n    right: 0;\n    display: flex;\n}\n.p-image-action.p-link {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n.p-image-preview {\n    transition: transform 0.15s;\n    max-width: 100vw;\n    max-height: 100vh;\n}\n.p-image-preview-enter-active {\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-image-preview-leave-active {\n    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-image-preview-enter-from,\n.p-image-preview-leave-to {\n    opacity: 0;\n    transform: scale(0.7);\n}\n"),z.render=function(e,i,t,o,a,n){const r=m("RefreshIcon"),s=m("UndoIcon"),l=m("SearchMinusIcon"),c=m("SearchPlusIcon"),z=m("TimesIcon"),T=m("Portal"),O=p("focustrap");return u(),v("span",{class:f(n.containerClass),style:h(t.style)},[d("img",g(e.$attrs,{style:t.imageStyle,class:t.imageClass,onError:i[0]||(i[0]=(...e)=>n.onError&&n.onError(...e))}),null,16),t.preview?(u(),v("button",g({key:0,ref:"previewButton",class:"p-image-preview-indicator",onClick:i[1]||(i[1]=(...e)=>n.onImageClick&&n.onImageClick(...e))},t.previewButtonProps),[b(e.$slots,"indicatoricon",{},(()=>[(u(),k(y(t.indicatorIcon?"i":"EyeIcon"),{class:"p-image-preview-icon"}))]))],16)):w("",!0),C(T,null,{default:I((()=>[a.maskVisible?L((u(),v("div",{key:0,ref:n.maskRef,role:"dialog",class:f(n.maskClass),"aria-modal":a.maskVisible,onClick:i[8]||(i[8]=(...e)=>n.onMaskClick&&n.onMaskClick(...e)),onKeydown:i[9]||(i[9]=(...e)=>n.onMaskKeydown&&n.onMaskKeydown(...e))},[d("div",A,[d("button",{class:"p-image-action p-link",onClick:i[2]||(i[2]=(...e)=>n.rotateRight&&n.rotateRight(...e)),type:"button","aria-label":n.rightAriaLabel},[b(e.$slots,"refresh",{},(()=>[C(r)]))],8,B),d("button",{class:"p-image-action p-link",onClick:i[3]||(i[3]=(...e)=>n.rotateLeft&&n.rotateLeft(...e)),type:"button","aria-label":n.leftAriaLabel},[b(e.$slots,"undo",{},(()=>[C(s)]))],8,P),d("button",{class:"p-image-action p-link",onClick:i[4]||(i[4]=(...e)=>n.zoomOut&&n.zoomOut(...e)),type:"button",disabled:n.zoomDisabled,"aria-label":n.zoomOutAriaLabel},[b(e.$slots,"zoomout",{},(()=>[C(l)]))],8,S),d("button",{class:"p-image-action p-link",onClick:i[5]||(i[5]=(...e)=>n.zoomIn&&n.zoomIn(...e)),type:"button",disabled:n.zoomDisabled,"aria-label":n.zoomInAriaLabel},[b(e.$slots,"zoomin",{},(()=>[C(c)]))],8,x),d("button",{class:"p-image-action p-link",type:"button",onClick:i[6]||(i[6]=(...i)=>e.hidePreview&&e.hidePreview(...i)),"aria-label":n.closeAriaLabel,autofocus:""},[b(e.$slots,"close",{},(()=>[C(z)]))],8,R)]),C($,{name:"p-image-preview",onBeforeEnter:n.onBeforeEnter,onEnter:n.onEnter,onLeave:n.onLeave,onBeforeLeave:n.onBeforeLeave,onAfterLeave:n.onAfterLeave},{default:I((()=>[a.previewVisible?(u(),v("div",M,[d("img",{src:e.$attrs.src,class:"p-image-preview",style:h(n.imagePreviewStyle),onClick:i[7]||(i[7]=(...e)=>n.onPreviewImageClick&&n.onPreviewImageClick(...e))},null,12,V)])):w("",!0)])),_:1},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],42,E)),[[O]]):w("",!0)])),_:3})],6)};export{z as default};

package/image/image.js

@@ -1,10 +1,16 @@
 this.primevue = this.primevue || {};
-this.primevue.image = (function (FocusTrap, Portal, utils, vue) {
+this.primevue.image = (function (FocusTrap, EyeIcon, RefreshIcon, SearchMinusIcon, SearchPlusIcon, TimesIcon, UndoIcon, Portal, utils, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
+    var EyeIcon__default = /*#__PURE__*/_interopDefaultLegacy(EyeIcon);
+    var RefreshIcon__default = /*#__PURE__*/_interopDefaultLegacy(RefreshIcon);
+    var SearchMinusIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchMinusIcon);
+    var SearchPlusIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchPlusIcon);
+    var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
+    var UndoIcon__default = /*#__PURE__*/_interopDefaultLegacy(UndoIcon);
     var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 
     var script = {
@@ -38,7 +44,7 @@ this.primevue.image = (function (FocusTrap, Portal, utils, vue) {
             },
             indicatorIcon: {
                 type: String,
-                default: 'pi pi-eye'
+                default: undefined
             }
         },
         mask: null,
@@ -177,7 +183,13 @@ this.primevue.image = (function (FocusTrap, Portal, utils, vue) {
             }
         },
         components: {
-            Portal: Portal__default["default"]
+            Portal: Portal__default["default"],
+            EyeIcon: EyeIcon__default["default"],
+            RefreshIcon: RefreshIcon__default["default"],
+            UndoIcon: UndoIcon__default["default"],
+            SearchMinusIcon: SearchMinusIcon__default["default"],
+            SearchPlusIcon: SearchPlusIcon__default["default"],
+            TimesIcon: TimesIcon__default["default"]
         },
         directives: {
             focustrap: FocusTrap__default["default"]
@@ -187,19 +199,19 @@ this.primevue.image = (function (FocusTrap, Portal, utils, vue) {
     const _hoisted_1 = ["aria-modal"];
     const _hoisted_2 = { class: "p-image-toolbar" };
     const _hoisted_3 = ["aria-label"];
-    const _hoisted_4 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-refresh" }, null, -1);
-    const _hoisted_5 = ["aria-label"];
-    const _hoisted_6 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-undo" }, null, -1);
-    const _hoisted_7 = ["disabled", "aria-label"];
-    const _hoisted_8 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-search-minus" }, null, -1);
-    const _hoisted_9 = ["disabled", "aria-label"];
-    const _hoisted_10 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-search-plus" }, null, -1);
-    const _hoisted_11 = ["aria-label"];
-    const _hoisted_12 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-times" }, null, -1);
-    const _hoisted_13 = { key: 0 };
-    const _hoisted_14 = ["src"];
+    const _hoisted_4 = ["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"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
+      const _component_RefreshIcon = vue.resolveComponent("RefreshIcon");
+      const _component_UndoIcon = vue.resolveComponent("UndoIcon");
+      const _component_SearchMinusIcon = vue.resolveComponent("SearchMinusIcon");
+      const _component_SearchPlusIcon = vue.resolveComponent("SearchPlusIcon");
+      const _component_TimesIcon = vue.resolveComponent("TimesIcon");
       const _component_Portal = vue.resolveComponent("Portal");
       const _directive_focustrap = vue.resolveDirective("focustrap");
 
@@ -219,10 +231,8 @@ this.primevue.image = (function (FocusTrap, Portal, utils, vue) {
               class: "p-image-preview-indicator",
               onClick: _cache[1] || (_cache[1] = (...args) => ($options.onImageClick && $options.onImageClick(...args)))
             }, $props.previewButtonProps), [
-              vue.renderSlot(_ctx.$slots, "indicator", {}, () => [
-                vue.createElementVNode("i", {
-                  class: vue.normalizeClass(['p-image-preview-icon', $props.indicatorIcon])
-                }, null, 2)
+              vue.renderSlot(_ctx.$slots, "indicatoricon", {}, () => [
+                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.indicatorIcon ? 'i' : 'EyeIcon'), { class: "p-image-preview-icon" }))
               ])
             ], 16))
           : vue.createCommentVNode("", true),
@@ -246,7 +256,7 @@ this.primevue.image = (function (FocusTrap, Portal, utils, vue) {
                       "aria-label": $options.rightAriaLabel
                     }, [
                       vue.renderSlot(_ctx.$slots, "refresh", {}, () => [
-                        _hoisted_4
+                        vue.createVNode(_component_RefreshIcon)
                       ])
                     ], 8, _hoisted_3),
                     vue.createElementVNode("button", {
@@ -256,9 +266,9 @@ this.primevue.image = (function (FocusTrap, Portal, utils, vue) {
                       "aria-label": $options.leftAriaLabel
                     }, [
                       vue.renderSlot(_ctx.$slots, "undo", {}, () => [
-                        _hoisted_6
+                        vue.createVNode(_component_UndoIcon)
                       ])
-                    ], 8, _hoisted_5),
+                    ], 8, _hoisted_4),
                     vue.createElementVNode("button", {
                       class: "p-image-action p-link",
                       onClick: _cache[4] || (_cache[4] = (...args) => ($options.zoomOut && $options.zoomOut(...args))),
@@ -267,9 +277,9 @@ this.primevue.image = (function (FocusTrap, Portal, utils, vue) {
                       "aria-label": $options.zoomOutAriaLabel
                     }, [
                       vue.renderSlot(_ctx.$slots, "zoomout", {}, () => [
-                        _hoisted_8
+                        vue.createVNode(_component_SearchMinusIcon)
                       ])
-                    ], 8, _hoisted_7),
+                    ], 8, _hoisted_5),
                     vue.createElementVNode("button", {
                       class: "p-image-action p-link",
                       onClick: _cache[5] || (_cache[5] = (...args) => ($options.zoomIn && $options.zoomIn(...args))),
@@ -278,9 +288,9 @@ this.primevue.image = (function (FocusTrap, Portal, utils, vue) {
                       "aria-label": $options.zoomInAriaLabel
                     }, [
                       vue.renderSlot(_ctx.$slots, "zoomin", {}, () => [
-                        _hoisted_10
+                        vue.createVNode(_component_SearchPlusIcon)
                       ])
-                    ], 8, _hoisted_9),
+                    ], 8, _hoisted_6),
                     vue.createElementVNode("button", {
                       class: "p-image-action p-link",
                       type: "button",
@@ -289,9 +299,9 @@ this.primevue.image = (function (FocusTrap, Portal, utils, vue) {
                       autofocus: ""
                     }, [
                       vue.renderSlot(_ctx.$slots, "close", {}, () => [
-                        _hoisted_12
+                        vue.createVNode(_component_TimesIcon)
                       ])
-                    ], 8, _hoisted_11)
+                    ], 8, _hoisted_7)
                   ]),
                   vue.createVNode(vue.Transition, {
                     name: "p-image-preview",
@@ -303,13 +313,13 @@ this.primevue.image = (function (FocusTrap, Portal, utils, vue) {
                   }, {
                     default: vue.withCtx(() => [
                       ($data.previewVisible)
-                        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
+                        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
                             vue.createElementVNode("img", {
                               src: _ctx.$attrs.src,
                               class: "p-image-preview",
                               style: vue.normalizeStyle($options.imagePreviewStyle),
                               onClick: _cache[7] || (_cache[7] = (...args) => ($options.onPreviewImageClick && $options.onPreviewImageClick(...args)))
-                            }, null, 12, _hoisted_14)
+                            }, null, 12, _hoisted_9)
                           ]))
                         : vue.createCommentVNode("", true)
                     ]),
@@ -352,11 +362,11 @@ this.primevue.image = (function (FocusTrap, Portal, utils, vue) {
       }
     }
 
-    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";
+    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-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;
 
     return script;
 
-})(primevue.focustrap, primevue.portal, primevue.utils, Vue);
+})(primevue.focustrap, primevue.icons.eye, primevue.icons.refresh, primevue.icons.searchminus, primevue.icons.searchplus, primevue.icons.times, primevue.icons.undo, primevue.portal, primevue.utils, Vue);

package/image/image.min.js

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

package/inlinemessage/InlineMessage.d.ts

@@ -10,6 +10,53 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type InlineMessagePassThroughOptionType = InlineMessagePassThroughAttributes | ((options: InlineMessagePassThroughMethodOptions) => InlineMessagePassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InlineMessagePassThroughMethodOptions {
+    props: InlineMessageProps;
+    state: InlineMessageState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InlineMessageProps.pt}
+ */
+export interface InlineMessagePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: InlineMessagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: InlineMessagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the text's DOM element.
+     */
+    text?: InlineMessagePassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface InlineMessagePassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in InlineMessage component.
+ */
+export interface InlineMessageState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+}
+
 /**
  * Defines valid properties in InlineMessage component.
  */
@@ -19,6 +66,16 @@ export interface InlineMessageProps {
      * @defaultValue info
      */
     severity?: 'success' | 'info' | 'warn' | 'error' | string | undefined;
+    /**
+     * Display a custom icon for the message.
+     * @deprecated since v3.27.0. Use 'icon' slot.
+     */
+    icon?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {InlineMessagePassThroughOptions}
+     */
+    pt?: InlineMessagePassThroughOptions;
 }
 /**
  * Defines valid slots in InlineMessage slots.
@@ -28,6 +85,10 @@ export interface InlineMessageSlots {
      * Default custom slot.
      */
     default(): VNode[];
+    /**
+     * Custom message icon template.
+     */
+    icon(): VNode[];
 }
 
 export interface InlineMessageEmits {}

package/inlinemessage/InlineMessage.vue

@@ -1,17 +1,32 @@
 <template>
-    <div aria-live="polite" :class="containerClass">
-        <span :class="iconClass"></span>
-        <span class="p-inline-message-text"><slot>&nbsp;</slot></span>
+    <div aria-live="polite" :class="containerClass" v-bind="ptm('root')">
+        <slot name="icon">
+            <component :is="icon ? 'span' : iconComponent" :class="['p-inline-message-icon', icon]" v-bind="ptm('icon')"></component>
+        </slot>
+        <span class="p-inline-message-text" v-bind="ptm('text')">
+            <slot>&nbsp;</slot>
+        </span>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+import CheckIcon from 'primevue/icons/check';
+import ExclamationTriangleIcon from 'primevue/icons/exclamationtriangle';
+import InfoCircleIcon from 'primevue/icons/infocircle';
+import TimesCircleIcon from 'primevue/icons/timescircle';
+
 export default {
     name: 'InlineMessage',
+    extends: BaseComponent,
     props: {
         severity: {
             type: String,
             default: 'error'
+        },
+        icon: {
+            type: String,
+            default: undefined
         }
     },
     timeout: null,
@@ -31,16 +46,13 @@ export default {
         containerClass() {
             return ['p-inline-message p-component p-inline-message-' + this.severity, { 'p-inline-message-icon-only': !this.$slots.default }];
         },
-        iconClass() {
-            return [
-                'p-inline-message-icon pi',
-                {
-                    'pi-info-circle': this.severity === 'info',
-                    'pi-check': this.severity === 'success',
-                    'pi-exclamation-triangle': this.severity === 'warn',
-                    'pi-times-circle': this.severity === 'error'
-                }
-            ];
+        iconComponent() {
+            return {
+                info: InfoCircleIcon,
+                success: CheckIcon,
+                warn: ExclamationTriangleIcon,
+                error: TimesCircleIcon
+            }[this.severity];
         }
     }
 };