primevue 3.26.0 → 3.27.0

package/confirmpopup/confirmpopup.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/button"),t=require("primevue/confirmationeventbus"),n=require("primevue/focustrap"),i=require("primevue/overlayeventbus"),o=require("primevue/portal"),r=require("primevue/utils"),s=require("vue");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=c(e),a=c(t),p=c(n),u=c(i),f=c(o),d={name:"ConfirmPopup",inheritAttrs:!1,props:{group:String},data:()=>({visible:!1,confirmation:null,autoFocusAccept:null,autoFocusReject:null}),target:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,confirmListener:null,closeListener:null,mounted(){this.confirmListener=e=>{e&&e.group===this.group&&(this.confirmation=e,this.target=e.target,this.confirmation.onShow&&this.confirmation.onShow(),this.visible=!0)},this.closeListener=()=>{this.visible=!1,this.confirmation=null},a.default.on("confirm",this.confirmListener),a.default.on("close",this.closeListener)},beforeUnmount(){a.default.off("confirm",this.confirmListener),a.default.off("close",this.closeListener),this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.unbindResizeListener(),this.container&&(r.ZIndexUtils.clear(this.container),this.container=null),this.target=null,this.confirmation=null},methods:{accept(){this.confirmation.accept&&this.confirmation.accept(),this.visible=!1},reject(){this.confirmation.reject&&this.confirmation.reject(),this.visible=!1},onHide(){this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1},onAcceptKeydown(e){"Space"!==e.code&&"Enter"!==e.code||(this.accept(),r.DomHandler.focus(this.target),e.preventDefault())},onRejectKeydown(e){"Space"!==e.code&&"Enter"!==e.code||(this.reject(),r.DomHandler.focus(this.target),e.preventDefault())},onEnter(e){this.autoFocusAccept=void 0===this.confirmation.defaultFocus||"accept"===this.confirmation.defaultFocus,this.autoFocusReject="reject"===this.confirmation.defaultFocus,this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),r.ZIndexUtils.set("overlay",e,this.$primevue.config.zIndex.overlay)},onAfterEnter(){this.focus()},onLeave(){this.autoFocusAccept=null,this.autoFocusReject=null,this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener()},onAfterLeave(e){r.ZIndexUtils.clear(e)},alignOverlay(){r.DomHandler.absolutePosition(this.container,this.target);const e=r.DomHandler.getOffset(this.container),t=r.DomHandler.getOffset(this.target);let n=0;e.left<t.left&&(n=t.left-e.left),this.container.style.setProperty("--overlayArrowLeft",`${n}px`),e.top<t.top&&r.DomHandler.addClass(this.container,"p-confirm-popup-flipped")},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.visible&&this.container&&!this.container.contains(e.target)&&!this.isTargetClicked(e)?(this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1):this.alignOverlay()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new r.ConnectedOverlayScrollHandler(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!r.DomHandler.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus({preventScroll:!0})},isTargetClicked(e){return this.target&&(this.target===e.target||this.target.contains(e.target))},containerRef(e){this.container=e},onOverlayClick(e){u.default.emit("overlay-click",{originalEvent:e,target:this.target})},onOverlayKeydown(e){"Escape"===e.code&&(a.default.emit("close",this.closeListener),r.DomHandler.focus(this.target))}},computed:{containerClass(){return["p-confirm-popup p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},message(){return this.confirmation?this.confirmation.message:null},iconClass(){return["p-confirm-popup-icon",this.confirmation?this.confirmation.icon:null]},acceptLabel(){return this.confirmation?this.confirmation.acceptLabel||this.$primevue.config.locale.accept:null},rejectLabel(){return this.confirmation?this.confirmation.rejectLabel||this.$primevue.config.locale.reject:null},acceptIcon(){return this.confirmation?this.confirmation.acceptIcon:null},rejectIcon(){return this.confirmation?this.confirmation.rejectIcon:null},acceptClass(){return["p-confirm-popup-accept p-button-sm",this.confirmation?this.confirmation.acceptClass:null]},rejectClass(){return["p-confirm-popup-reject p-button-sm",this.confirmation?this.confirmation.rejectClass||"p-button-text":null]}},components:{CPButton:l.default,Portal:f.default},directives:{focustrap:p.default}};const m=["aria-modal"],h={key:0,class:"p-confirm-popup-content"},v={class:"p-confirm-popup-message"},b={class:"p-confirm-popup-footer"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-confirm-popup {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-confirm-popup-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n\n/* Animation */\n.p-confirm-popup-enter-from {\n    opacity: 0;\n    transform: scaleY(0.8);\n}\n.p-confirm-popup-leave-to {\n    opacity: 0;\n}\n.p-confirm-popup-enter-active {\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-confirm-popup-leave-active {\n    transition: opacity 0.1s linear;\n}\n.p-confirm-popup:after,\n.p-confirm-popup:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-confirm-popup:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-confirm-popup:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-confirm-popup-flipped:after,\n.p-confirm-popup-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-confirm-popup.p-confirm-popup-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-confirm-popup.p-confirm-popup-flipped:before {\n    border-bottom-color: transparent;\n}\n.p-confirm-popup .p-confirm-popup-content {\n    display: flex;\n    align-items: center;\n}\n"),d.render=function(e,t,n,i,o,r){const c=s.resolveComponent("CPButton"),l=s.resolveComponent("Portal"),a=s.resolveDirective("focustrap");return s.openBlock(),s.createBlock(l,null,{default:s.withCtx((()=>[s.createVNode(s.Transition,{name:"p-confirm-popup",onEnter:r.onEnter,onAfterEnter:r.onAfterEnter,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave},{default:s.withCtx((()=>[o.visible?s.withDirectives((s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,ref:r.containerRef,role:"alertdialog",class:r.containerClass,"aria-modal":o.visible,onClick:t[2]||(t[2]=(...e)=>r.onOverlayClick&&r.onOverlayClick(...e)),onKeydown:t[3]||(t[3]=(...e)=>r.onOverlayKeydown&&r.onOverlayKeydown(...e))},e.$attrs),[e.$slots.message?(s.openBlock(),s.createBlock(s.resolveDynamicComponent(e.$slots.message),{key:1,message:o.confirmation},null,8,["message"])):(s.openBlock(),s.createElementBlock("div",h,[s.createElementVNode("i",{class:s.normalizeClass(r.iconClass)},null,2),s.createElementVNode("span",v,s.toDisplayString(o.confirmation.message),1)])),s.createElementVNode("div",b,[s.createVNode(c,{label:r.rejectLabel,icon:r.rejectIcon,class:s.normalizeClass(r.rejectClass),onClick:t[0]||(t[0]=e=>r.reject()),onKeydown:r.onRejectKeydown,autofocus:o.autoFocusReject},null,8,["label","icon","class","onKeydown","autofocus"]),s.createVNode(c,{label:r.acceptLabel,icon:r.acceptIcon,class:s.normalizeClass(r.acceptClass),onClick:t[1]||(t[1]=e=>r.accept()),onKeydown:r.onAcceptKeydown,autofocus:o.autoFocusAccept},null,8,["label","icon","class","onKeydown","autofocus"])])],16,m)),[[a]]):s.createCommentVNode("",!0)])),_:1},8,["onEnter","onAfterEnter","onLeave","onAfterLeave"])])),_:1})},module.exports=d;
+"use strict";var e=require("primevue/button"),t=require("primevue/confirmationeventbus"),n=require("primevue/focustrap"),i=require("primevue/overlayeventbus"),o=require("primevue/portal"),r=require("primevue/utils"),s=require("vue");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=c(e),a=c(t),p=c(n),u=c(i),f=c(o),m={name:"ConfirmPopup",inheritAttrs:!1,props:{group:String},data:()=>({visible:!1,confirmation:null,autoFocusAccept:null,autoFocusReject:null}),target:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,confirmListener:null,closeListener:null,mounted(){this.confirmListener=e=>{e&&e.group===this.group&&(this.confirmation=e,this.target=e.target,this.confirmation.onShow&&this.confirmation.onShow(),this.visible=!0)},this.closeListener=()=>{this.visible=!1,this.confirmation=null},a.default.on("confirm",this.confirmListener),a.default.on("close",this.closeListener)},beforeUnmount(){a.default.off("confirm",this.confirmListener),a.default.off("close",this.closeListener),this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.unbindResizeListener(),this.container&&(r.ZIndexUtils.clear(this.container),this.container=null),this.target=null,this.confirmation=null},methods:{accept(){this.confirmation.accept&&this.confirmation.accept(),this.visible=!1},reject(){this.confirmation.reject&&this.confirmation.reject(),this.visible=!1},onHide(){this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1},onAcceptKeydown(e){"Space"!==e.code&&"Enter"!==e.code||(this.accept(),r.DomHandler.focus(this.target),e.preventDefault())},onRejectKeydown(e){"Space"!==e.code&&"Enter"!==e.code||(this.reject(),r.DomHandler.focus(this.target),e.preventDefault())},onEnter(e){this.autoFocusAccept=void 0===this.confirmation.defaultFocus||"accept"===this.confirmation.defaultFocus,this.autoFocusReject="reject"===this.confirmation.defaultFocus,this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),r.ZIndexUtils.set("overlay",e,this.$primevue.config.zIndex.overlay)},onAfterEnter(){this.focus()},onLeave(){this.autoFocusAccept=null,this.autoFocusReject=null,this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener()},onAfterLeave(e){r.ZIndexUtils.clear(e)},alignOverlay(){r.DomHandler.absolutePosition(this.container,this.target);const e=r.DomHandler.getOffset(this.container),t=r.DomHandler.getOffset(this.target);let n=0;e.left<t.left&&(n=t.left-e.left),this.container.style.setProperty("--overlayArrowLeft",`${n}px`),e.top<t.top&&r.DomHandler.addClass(this.container,"p-confirm-popup-flipped")},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.visible&&this.container&&!this.container.contains(e.target)&&!this.isTargetClicked(e)?(this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1):this.alignOverlay()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new r.ConnectedOverlayScrollHandler(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!r.DomHandler.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus({preventScroll:!0})},isTargetClicked(e){return this.target&&(this.target===e.target||this.target.contains(e.target))},containerRef(e){this.container=e},onOverlayClick(e){u.default.emit("overlay-click",{originalEvent:e,target:this.target})},onOverlayKeydown(e){"Escape"===e.code&&(a.default.emit("close",this.closeListener),r.DomHandler.focus(this.target))}},computed:{containerClass(){return["p-confirm-popup p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},message(){return this.confirmation?this.confirmation.message:null},iconClass(){return["p-confirm-popup-icon",this.confirmation?this.confirmation.icon:null]},acceptLabel(){return this.confirmation?this.confirmation.acceptLabel||this.$primevue.config.locale.accept:null},rejectLabel(){return this.confirmation?this.confirmation.rejectLabel||this.$primevue.config.locale.reject:null},acceptIcon(){return this.confirmation?this.confirmation.acceptIcon:null},rejectIcon(){return this.confirmation?this.confirmation.rejectIcon:null},acceptClass(){return["p-confirm-popup-accept p-button-sm",this.confirmation?this.confirmation.acceptClass:null]},rejectClass(){return["p-confirm-popup-reject p-button-sm",this.confirmation?this.confirmation.rejectClass||"p-button-text":null]}},components:{CPButton:l.default,Portal:f.default},directives:{focustrap:p.default}};const d=["aria-modal"],h={key:0,class:"p-confirm-popup-content"},v={class:"p-confirm-popup-message"},b={class:"p-confirm-popup-footer"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-confirm-popup {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-confirm-popup-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n\n/* Animation */\n.p-confirm-popup-enter-from {\n    opacity: 0;\n    transform: scaleY(0.8);\n}\n.p-confirm-popup-leave-to {\n    opacity: 0;\n}\n.p-confirm-popup-enter-active {\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-confirm-popup-leave-active {\n    transition: opacity 0.1s linear;\n}\n.p-confirm-popup:after,\n.p-confirm-popup:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-confirm-popup:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-confirm-popup:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-confirm-popup-flipped:after,\n.p-confirm-popup-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-confirm-popup.p-confirm-popup-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-confirm-popup.p-confirm-popup-flipped:before {\n    border-bottom-color: transparent;\n}\n.p-confirm-popup .p-confirm-popup-content {\n    display: flex;\n    align-items: center;\n}\n"),m.render=function(e,t,n,i,o,r){const c=s.resolveComponent("CPButton"),l=s.resolveComponent("Portal"),a=s.resolveDirective("focustrap");return s.openBlock(),s.createBlock(l,null,{default:s.withCtx((()=>[s.createVNode(s.Transition,{name:"p-confirm-popup",onEnter:r.onEnter,onAfterEnter:r.onAfterEnter,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave},{default:s.withCtx((()=>[o.visible?s.withDirectives((s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,ref:r.containerRef,role:"alertdialog",class:r.containerClass,"aria-modal":o.visible,onClick:t[2]||(t[2]=(...e)=>r.onOverlayClick&&r.onOverlayClick(...e)),onKeydown:t[3]||(t[3]=(...e)=>r.onOverlayKeydown&&r.onOverlayKeydown(...e))},e.$attrs),[e.$slots.message?(s.openBlock(),s.createBlock(s.resolveDynamicComponent(e.$slots.message),{key:1,message:o.confirmation},null,8,["message"])):(s.openBlock(),s.createElementBlock("div",h,[s.renderSlot(e.$slots,"icon",{class:"p-confirm-popup-icon"},(()=>[e.$slots.icon?(s.openBlock(),s.createBlock(s.resolveDynamicComponent(e.$slots.icon),{key:0,class:"p-confirm-popup-icon"})):o.confirmation.icon?(s.openBlock(),s.createElementBlock("span",{key:1,class:s.normalizeClass(r.iconClass)},null,2)):s.createCommentVNode("",!0)])),s.createElementVNode("span",v,s.toDisplayString(o.confirmation.message),1)])),s.createElementVNode("div",b,[s.createVNode(c,{label:r.rejectLabel,class:s.normalizeClass(r.rejectClass),onClick:t[0]||(t[0]=e=>r.reject()),onKeydown:r.onRejectKeydown,autofocus:o.autoFocusReject},{icon:s.withCtx((t=>[s.renderSlot(e.$slots,"rejecticon",{},(()=>[s.createElementVNode("span",{class:s.normalizeClass([r.rejectIcon,t.class])},null,2)]))])),_:3},8,["label","class","onKeydown","autofocus"]),s.createVNode(c,{label:r.acceptLabel,class:s.normalizeClass(r.acceptClass),onClick:t[1]||(t[1]=e=>r.accept()),onKeydown:r.onAcceptKeydown,autofocus:o.autoFocusAccept},{icon:s.withCtx((t=>[s.renderSlot(e.$slots,"accepticon",{},(()=>[s.createElementVNode("span",{class:s.normalizeClass([r.acceptIcon,t.class])},null,2)]))])),_:3},8,["label","class","onKeydown","autofocus"])])],16,d)),[[a]]):s.createCommentVNode("",!0)])),_:3},8,["onEnter","onAfterEnter","onLeave","onAfterLeave"])])),_:3})},module.exports=m;

package/confirmpopup/confirmpopup.esm.js

@@ -4,7 +4,7 @@ import FocusTrap from 'primevue/focustrap';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import { ZIndexUtils, DomHandler, ConnectedOverlayScrollHandler } from 'primevue/utils';
-import { resolveComponent, resolveDirective, openBlock, createBlock, withCtx, createVNode, Transition, withDirectives, createElementBlock, mergeProps, createElementVNode, normalizeClass, toDisplayString, resolveDynamicComponent, createCommentVNode } from 'vue';
+import { resolveComponent, resolveDirective, openBlock, createBlock, withCtx, createVNode, Transition, withDirectives, createElementBlock, mergeProps, renderSlot, resolveDynamicComponent, normalizeClass, createCommentVNode, createElementVNode, toDisplayString } from 'vue';
 
 var script = {
     name: 'ConfirmPopup',
@@ -312,9 +312,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               }, _ctx.$attrs), [
                 (!_ctx.$slots.message)
                   ? (openBlock(), createElementBlock("div", _hoisted_2, [
-                      createElementVNode("i", {
-                        class: normalizeClass($options.iconClass)
-                      }, null, 2),
+                      renderSlot(_ctx.$slots, "icon", { class: "p-confirm-popup-icon" }, () => [
+                        (_ctx.$slots.icon)
+                          ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.icon), {
+                              key: 0,
+                              class: "p-confirm-popup-icon"
+                            }))
+                          : ($data.confirmation.icon)
+                            ? (openBlock(), createElementBlock("span", {
+                                key: 1,
+                                class: normalizeClass($options.iconClass)
+                              }, null, 2))
+                            : createCommentVNode("", true)
+                      ]),
                       createElementVNode("span", _hoisted_3, toDisplayString($data.confirmation.message), 1)
                     ]))
                   : (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.message), {
@@ -324,30 +334,46 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 createElementVNode("div", _hoisted_4, [
                   createVNode(_component_CPButton, {
                     label: $options.rejectLabel,
-                    icon: $options.rejectIcon,
                     class: normalizeClass($options.rejectClass),
                     onClick: _cache[0] || (_cache[0] = $event => ($options.reject())),
                     onKeydown: $options.onRejectKeydown,
                     autofocus: $data.autoFocusReject
-                  }, null, 8, ["label", "icon", "class", "onKeydown", "autofocus"]),
+                  }, {
+                    icon: withCtx((iconProps) => [
+                      renderSlot(_ctx.$slots, "rejecticon", {}, () => [
+                        createElementVNode("span", {
+                          class: normalizeClass([$options.rejectIcon, iconProps.class])
+                        }, null, 2)
+                      ])
+                    ]),
+                    _: 3
+                  }, 8, ["label", "class", "onKeydown", "autofocus"]),
                   createVNode(_component_CPButton, {
                     label: $options.acceptLabel,
-                    icon: $options.acceptIcon,
                     class: normalizeClass($options.acceptClass),
                     onClick: _cache[1] || (_cache[1] = $event => ($options.accept())),
                     onKeydown: $options.onAcceptKeydown,
                     autofocus: $data.autoFocusAccept
-                  }, null, 8, ["label", "icon", "class", "onKeydown", "autofocus"])
+                  }, {
+                    icon: withCtx((iconProps) => [
+                      renderSlot(_ctx.$slots, "accepticon", {}, () => [
+                        createElementVNode("span", {
+                          class: normalizeClass([$options.acceptIcon, iconProps.class])
+                        }, null, 2)
+                      ])
+                    ]),
+                    _: 3
+                  }, 8, ["label", "class", "onKeydown", "autofocus"])
                 ])
               ], 16, _hoisted_1)), [
                 [_directive_focustrap]
               ])
             : createCommentVNode("", true)
         ]),
-        _: 1
+        _: 3
       }, 8, ["onEnter", "onAfterEnter", "onLeave", "onAfterLeave"])
     ]),
-    _: 1
+    _: 3
   }))
 }
 

package/confirmpopup/confirmpopup.esm.min.js

@@ -1 +1 @@
-import e from"primevue/button";import t from"primevue/confirmationeventbus";import i from"primevue/focustrap";import n from"primevue/overlayeventbus";import o from"primevue/portal";import{ZIndexUtils as r,DomHandler as s,ConnectedOverlayScrollHandler as c}from"primevue/utils";import{resolveComponent as l,resolveDirective as a,openBlock as p,createBlock as u,withCtx as f,createVNode as m,Transition as h,withDirectives as d,createElementBlock as v,mergeProps as b,createElementVNode as L,normalizeClass as g,toDisplayString as y,resolveDynamicComponent as C,createCommentVNode as k}from"vue";var w={name:"ConfirmPopup",inheritAttrs:!1,props:{group:String},data:()=>({visible:!1,confirmation:null,autoFocusAccept:null,autoFocusReject:null}),target:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,confirmListener:null,closeListener:null,mounted(){this.confirmListener=e=>{e&&e.group===this.group&&(this.confirmation=e,this.target=e.target,this.confirmation.onShow&&this.confirmation.onShow(),this.visible=!0)},this.closeListener=()=>{this.visible=!1,this.confirmation=null},t.on("confirm",this.confirmListener),t.on("close",this.closeListener)},beforeUnmount(){t.off("confirm",this.confirmListener),t.off("close",this.closeListener),this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.unbindResizeListener(),this.container&&(r.clear(this.container),this.container=null),this.target=null,this.confirmation=null},methods:{accept(){this.confirmation.accept&&this.confirmation.accept(),this.visible=!1},reject(){this.confirmation.reject&&this.confirmation.reject(),this.visible=!1},onHide(){this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1},onAcceptKeydown(e){"Space"!==e.code&&"Enter"!==e.code||(this.accept(),s.focus(this.target),e.preventDefault())},onRejectKeydown(e){"Space"!==e.code&&"Enter"!==e.code||(this.reject(),s.focus(this.target),e.preventDefault())},onEnter(e){this.autoFocusAccept=void 0===this.confirmation.defaultFocus||"accept"===this.confirmation.defaultFocus,this.autoFocusReject="reject"===this.confirmation.defaultFocus,this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),r.set("overlay",e,this.$primevue.config.zIndex.overlay)},onAfterEnter(){this.focus()},onLeave(){this.autoFocusAccept=null,this.autoFocusReject=null,this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener()},onAfterLeave(e){r.clear(e)},alignOverlay(){s.absolutePosition(this.container,this.target);const e=s.getOffset(this.container),t=s.getOffset(this.target);let i=0;e.left<t.left&&(i=t.left-e.left),this.container.style.setProperty("--overlayArrowLeft",`${i}px`),e.top<t.top&&s.addClass(this.container,"p-confirm-popup-flipped")},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.visible&&this.container&&!this.container.contains(e.target)&&!this.isTargetClicked(e)?(this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1):this.alignOverlay()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new c(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!s.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus({preventScroll:!0})},isTargetClicked(e){return this.target&&(this.target===e.target||this.target.contains(e.target))},containerRef(e){this.container=e},onOverlayClick(e){n.emit("overlay-click",{originalEvent:e,target:this.target})},onOverlayKeydown(e){"Escape"===e.code&&(t.emit("close",this.closeListener),s.focus(this.target))}},computed:{containerClass(){return["p-confirm-popup p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},message(){return this.confirmation?this.confirmation.message:null},iconClass(){return["p-confirm-popup-icon",this.confirmation?this.confirmation.icon:null]},acceptLabel(){return this.confirmation?this.confirmation.acceptLabel||this.$primevue.config.locale.accept:null},rejectLabel(){return this.confirmation?this.confirmation.rejectLabel||this.$primevue.config.locale.reject:null},acceptIcon(){return this.confirmation?this.confirmation.acceptIcon:null},rejectIcon(){return this.confirmation?this.confirmation.rejectIcon:null},acceptClass(){return["p-confirm-popup-accept p-button-sm",this.confirmation?this.confirmation.acceptClass:null]},rejectClass(){return["p-confirm-popup-reject p-button-sm",this.confirmation?this.confirmation.rejectClass||"p-button-text":null]}},components:{CPButton:e,Portal:o},directives:{focustrap:i}};const j=["aria-modal"],A={key:0,class:"p-confirm-popup-content"},E={class:"p-confirm-popup-message"},z={class:"p-confirm-popup-footer"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===i&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-confirm-popup {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-confirm-popup-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n\n/* Animation */\n.p-confirm-popup-enter-from {\n    opacity: 0;\n    transform: scaleY(0.8);\n}\n.p-confirm-popup-leave-to {\n    opacity: 0;\n}\n.p-confirm-popup-enter-active {\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-confirm-popup-leave-active {\n    transition: opacity 0.1s linear;\n}\n.p-confirm-popup:after,\n.p-confirm-popup:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-confirm-popup:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-confirm-popup:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-confirm-popup-flipped:after,\n.p-confirm-popup-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-confirm-popup.p-confirm-popup-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-confirm-popup.p-confirm-popup-flipped:before {\n    border-bottom-color: transparent;\n}\n.p-confirm-popup .p-confirm-popup-content {\n    display: flex;\n    align-items: center;\n}\n"),w.render=function(e,t,i,n,o,r){const s=l("CPButton"),c=l("Portal"),w=a("focustrap");return p(),u(c,null,{default:f((()=>[m(h,{name:"p-confirm-popup",onEnter:r.onEnter,onAfterEnter:r.onAfterEnter,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave},{default:f((()=>[o.visible?d((p(),v("div",b({key:0,ref:r.containerRef,role:"alertdialog",class:r.containerClass,"aria-modal":o.visible,onClick:t[2]||(t[2]=(...e)=>r.onOverlayClick&&r.onOverlayClick(...e)),onKeydown:t[3]||(t[3]=(...e)=>r.onOverlayKeydown&&r.onOverlayKeydown(...e))},e.$attrs),[e.$slots.message?(p(),u(C(e.$slots.message),{key:1,message:o.confirmation},null,8,["message"])):(p(),v("div",A,[L("i",{class:g(r.iconClass)},null,2),L("span",E,y(o.confirmation.message),1)])),L("div",z,[m(s,{label:r.rejectLabel,icon:r.rejectIcon,class:g(r.rejectClass),onClick:t[0]||(t[0]=e=>r.reject()),onKeydown:r.onRejectKeydown,autofocus:o.autoFocusReject},null,8,["label","icon","class","onKeydown","autofocus"]),m(s,{label:r.acceptLabel,icon:r.acceptIcon,class:g(r.acceptClass),onClick:t[1]||(t[1]=e=>r.accept()),onKeydown:r.onAcceptKeydown,autofocus:o.autoFocusAccept},null,8,["label","icon","class","onKeydown","autofocus"])])],16,j)),[[w]]):k("",!0)])),_:1},8,["onEnter","onAfterEnter","onLeave","onAfterLeave"])])),_:1})};export{w as default};
+import e from"primevue/button";import t from"primevue/confirmationeventbus";import n from"primevue/focustrap";import i from"primevue/overlayeventbus";import o from"primevue/portal";import{ZIndexUtils as s,DomHandler as r,ConnectedOverlayScrollHandler as c}from"primevue/utils";import{resolveComponent as l,resolveDirective as a,openBlock as p,createBlock as u,withCtx as f,createVNode as m,Transition as h,withDirectives as d,createElementBlock as v,mergeProps as b,renderSlot as L,resolveDynamicComponent as g,normalizeClass as y,createCommentVNode as C,createElementVNode as k,toDisplayString as j}from"vue";var w={name:"ConfirmPopup",inheritAttrs:!1,props:{group:String},data:()=>({visible:!1,confirmation:null,autoFocusAccept:null,autoFocusReject:null}),target:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,confirmListener:null,closeListener:null,mounted(){this.confirmListener=e=>{e&&e.group===this.group&&(this.confirmation=e,this.target=e.target,this.confirmation.onShow&&this.confirmation.onShow(),this.visible=!0)},this.closeListener=()=>{this.visible=!1,this.confirmation=null},t.on("confirm",this.confirmListener),t.on("close",this.closeListener)},beforeUnmount(){t.off("confirm",this.confirmListener),t.off("close",this.closeListener),this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.unbindResizeListener(),this.container&&(s.clear(this.container),this.container=null),this.target=null,this.confirmation=null},methods:{accept(){this.confirmation.accept&&this.confirmation.accept(),this.visible=!1},reject(){this.confirmation.reject&&this.confirmation.reject(),this.visible=!1},onHide(){this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1},onAcceptKeydown(e){"Space"!==e.code&&"Enter"!==e.code||(this.accept(),r.focus(this.target),e.preventDefault())},onRejectKeydown(e){"Space"!==e.code&&"Enter"!==e.code||(this.reject(),r.focus(this.target),e.preventDefault())},onEnter(e){this.autoFocusAccept=void 0===this.confirmation.defaultFocus||"accept"===this.confirmation.defaultFocus,this.autoFocusReject="reject"===this.confirmation.defaultFocus,this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),s.set("overlay",e,this.$primevue.config.zIndex.overlay)},onAfterEnter(){this.focus()},onLeave(){this.autoFocusAccept=null,this.autoFocusReject=null,this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener()},onAfterLeave(e){s.clear(e)},alignOverlay(){r.absolutePosition(this.container,this.target);const e=r.getOffset(this.container),t=r.getOffset(this.target);let n=0;e.left<t.left&&(n=t.left-e.left),this.container.style.setProperty("--overlayArrowLeft",`${n}px`),e.top<t.top&&r.addClass(this.container,"p-confirm-popup-flipped")},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.visible&&this.container&&!this.container.contains(e.target)&&!this.isTargetClicked(e)?(this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1):this.alignOverlay()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new c(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!r.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus({preventScroll:!0})},isTargetClicked(e){return this.target&&(this.target===e.target||this.target.contains(e.target))},containerRef(e){this.container=e},onOverlayClick(e){i.emit("overlay-click",{originalEvent:e,target:this.target})},onOverlayKeydown(e){"Escape"===e.code&&(t.emit("close",this.closeListener),r.focus(this.target))}},computed:{containerClass(){return["p-confirm-popup p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},message(){return this.confirmation?this.confirmation.message:null},iconClass(){return["p-confirm-popup-icon",this.confirmation?this.confirmation.icon:null]},acceptLabel(){return this.confirmation?this.confirmation.acceptLabel||this.$primevue.config.locale.accept:null},rejectLabel(){return this.confirmation?this.confirmation.rejectLabel||this.$primevue.config.locale.reject:null},acceptIcon(){return this.confirmation?this.confirmation.acceptIcon:null},rejectIcon(){return this.confirmation?this.confirmation.rejectIcon:null},acceptClass(){return["p-confirm-popup-accept p-button-sm",this.confirmation?this.confirmation.acceptClass:null]},rejectClass(){return["p-confirm-popup-reject p-button-sm",this.confirmation?this.confirmation.rejectClass||"p-button-text":null]}},components:{CPButton:e,Portal:o},directives:{focustrap:n}};const A=["aria-modal"],E={key:0,class:"p-confirm-popup-content"},z={class:"p-confirm-popup-message"},S={class:"p-confirm-popup-footer"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-confirm-popup {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-confirm-popup-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n\n/* Animation */\n.p-confirm-popup-enter-from {\n    opacity: 0;\n    transform: scaleY(0.8);\n}\n.p-confirm-popup-leave-to {\n    opacity: 0;\n}\n.p-confirm-popup-enter-active {\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-confirm-popup-leave-active {\n    transition: opacity 0.1s linear;\n}\n.p-confirm-popup:after,\n.p-confirm-popup:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-confirm-popup:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-confirm-popup:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-confirm-popup-flipped:after,\n.p-confirm-popup-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-confirm-popup.p-confirm-popup-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-confirm-popup.p-confirm-popup-flipped:before {\n    border-bottom-color: transparent;\n}\n.p-confirm-popup .p-confirm-popup-content {\n    display: flex;\n    align-items: center;\n}\n"),w.render=function(e,t,n,i,o,s){const r=l("CPButton"),c=l("Portal"),w=a("focustrap");return p(),u(c,null,{default:f((()=>[m(h,{name:"p-confirm-popup",onEnter:s.onEnter,onAfterEnter:s.onAfterEnter,onLeave:s.onLeave,onAfterLeave:s.onAfterLeave},{default:f((()=>[o.visible?d((p(),v("div",b({key:0,ref:s.containerRef,role:"alertdialog",class:s.containerClass,"aria-modal":o.visible,onClick:t[2]||(t[2]=(...e)=>s.onOverlayClick&&s.onOverlayClick(...e)),onKeydown:t[3]||(t[3]=(...e)=>s.onOverlayKeydown&&s.onOverlayKeydown(...e))},e.$attrs),[e.$slots.message?(p(),u(g(e.$slots.message),{key:1,message:o.confirmation},null,8,["message"])):(p(),v("div",E,[L(e.$slots,"icon",{class:"p-confirm-popup-icon"},(()=>[e.$slots.icon?(p(),u(g(e.$slots.icon),{key:0,class:"p-confirm-popup-icon"})):o.confirmation.icon?(p(),v("span",{key:1,class:y(s.iconClass)},null,2)):C("",!0)])),k("span",z,j(o.confirmation.message),1)])),k("div",S,[m(r,{label:s.rejectLabel,class:y(s.rejectClass),onClick:t[0]||(t[0]=e=>s.reject()),onKeydown:s.onRejectKeydown,autofocus:o.autoFocusReject},{icon:f((t=>[L(e.$slots,"rejecticon",{},(()=>[k("span",{class:y([s.rejectIcon,t.class])},null,2)]))])),_:3},8,["label","class","onKeydown","autofocus"]),m(r,{label:s.acceptLabel,class:y(s.acceptClass),onClick:t[1]||(t[1]=e=>s.accept()),onKeydown:s.onAcceptKeydown,autofocus:o.autoFocusAccept},{icon:f((t=>[L(e.$slots,"accepticon",{},(()=>[k("span",{class:y([s.acceptIcon,t.class])},null,2)]))])),_:3},8,["label","class","onKeydown","autofocus"])])],16,A)),[[w]]):C("",!0)])),_:3},8,["onEnter","onAfterEnter","onLeave","onAfterLeave"])])),_:3})};export{w as default};

package/confirmpopup/confirmpopup.js

@@ -316,9 +316,19 @@ this.primevue.confirmpopup = (function (Button, ConfirmationEventBus, FocusTrap,
                   }, _ctx.$attrs), [
                     (!_ctx.$slots.message)
                       ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-                          vue.createElementVNode("i", {
-                            class: vue.normalizeClass($options.iconClass)
-                          }, null, 2),
+                          vue.renderSlot(_ctx.$slots, "icon", { class: "p-confirm-popup-icon" }, () => [
+                            (_ctx.$slots.icon)
+                              ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.icon), {
+                                  key: 0,
+                                  class: "p-confirm-popup-icon"
+                                }))
+                              : ($data.confirmation.icon)
+                                ? (vue.openBlock(), vue.createElementBlock("span", {
+                                    key: 1,
+                                    class: vue.normalizeClass($options.iconClass)
+                                  }, null, 2))
+                                : vue.createCommentVNode("", true)
+                          ]),
                           vue.createElementVNode("span", _hoisted_3, vue.toDisplayString($data.confirmation.message), 1)
                         ]))
                       : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.message), {
@@ -328,30 +338,46 @@ this.primevue.confirmpopup = (function (Button, ConfirmationEventBus, FocusTrap,
                     vue.createElementVNode("div", _hoisted_4, [
                       vue.createVNode(_component_CPButton, {
                         label: $options.rejectLabel,
-                        icon: $options.rejectIcon,
                         class: vue.normalizeClass($options.rejectClass),
                         onClick: _cache[0] || (_cache[0] = $event => ($options.reject())),
                         onKeydown: $options.onRejectKeydown,
                         autofocus: $data.autoFocusReject
-                      }, null, 8, ["label", "icon", "class", "onKeydown", "autofocus"]),
+                      }, {
+                        icon: vue.withCtx((iconProps) => [
+                          vue.renderSlot(_ctx.$slots, "rejecticon", {}, () => [
+                            vue.createElementVNode("span", {
+                              class: vue.normalizeClass([$options.rejectIcon, iconProps.class])
+                            }, null, 2)
+                          ])
+                        ]),
+                        _: 3
+                      }, 8, ["label", "class", "onKeydown", "autofocus"]),
                       vue.createVNode(_component_CPButton, {
                         label: $options.acceptLabel,
-                        icon: $options.acceptIcon,
                         class: vue.normalizeClass($options.acceptClass),
                         onClick: _cache[1] || (_cache[1] = $event => ($options.accept())),
                         onKeydown: $options.onAcceptKeydown,
                         autofocus: $data.autoFocusAccept
-                      }, null, 8, ["label", "icon", "class", "onKeydown", "autofocus"])
+                      }, {
+                        icon: vue.withCtx((iconProps) => [
+                          vue.renderSlot(_ctx.$slots, "accepticon", {}, () => [
+                            vue.createElementVNode("span", {
+                              class: vue.normalizeClass([$options.acceptIcon, iconProps.class])
+                            }, null, 2)
+                          ])
+                        ]),
+                        _: 3
+                      }, 8, ["label", "class", "onKeydown", "autofocus"])
                     ])
                   ], 16, _hoisted_1)), [
                     [_directive_focustrap]
                   ])
                 : vue.createCommentVNode("", true)
             ]),
-            _: 1
+            _: 3
           }, 8, ["onEnter", "onAfterEnter", "onLeave", "onAfterLeave"])
         ]),
-        _: 1
+        _: 3
       }))
     }
 

package/confirmpopup/confirmpopup.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.confirmpopup=function(e,t,n,i,o,r,s){"use strict";function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=c(e),a=c(t),p=c(n),u=c(i),f=c(o),m={name:"ConfirmPopup",inheritAttrs:!1,props:{group:String},data:()=>({visible:!1,confirmation:null,autoFocusAccept:null,autoFocusReject:null}),target:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,confirmListener:null,closeListener:null,mounted(){this.confirmListener=e=>{e&&e.group===this.group&&(this.confirmation=e,this.target=e.target,this.confirmation.onShow&&this.confirmation.onShow(),this.visible=!0)},this.closeListener=()=>{this.visible=!1,this.confirmation=null},a.default.on("confirm",this.confirmListener),a.default.on("close",this.closeListener)},beforeUnmount(){a.default.off("confirm",this.confirmListener),a.default.off("close",this.closeListener),this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.unbindResizeListener(),this.container&&(r.ZIndexUtils.clear(this.container),this.container=null),this.target=null,this.confirmation=null},methods:{accept(){this.confirmation.accept&&this.confirmation.accept(),this.visible=!1},reject(){this.confirmation.reject&&this.confirmation.reject(),this.visible=!1},onHide(){this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1},onAcceptKeydown(e){"Space"!==e.code&&"Enter"!==e.code||(this.accept(),r.DomHandler.focus(this.target),e.preventDefault())},onRejectKeydown(e){"Space"!==e.code&&"Enter"!==e.code||(this.reject(),r.DomHandler.focus(this.target),e.preventDefault())},onEnter(e){this.autoFocusAccept=void 0===this.confirmation.defaultFocus||"accept"===this.confirmation.defaultFocus,this.autoFocusReject="reject"===this.confirmation.defaultFocus,this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),r.ZIndexUtils.set("overlay",e,this.$primevue.config.zIndex.overlay)},onAfterEnter(){this.focus()},onLeave(){this.autoFocusAccept=null,this.autoFocusReject=null,this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener()},onAfterLeave(e){r.ZIndexUtils.clear(e)},alignOverlay(){r.DomHandler.absolutePosition(this.container,this.target);const e=r.DomHandler.getOffset(this.container),t=r.DomHandler.getOffset(this.target);let n=0;e.left<t.left&&(n=t.left-e.left),this.container.style.setProperty("--overlayArrowLeft",`${n}px`),e.top<t.top&&r.DomHandler.addClass(this.container,"p-confirm-popup-flipped")},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.visible&&this.container&&!this.container.contains(e.target)&&!this.isTargetClicked(e)?(this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1):this.alignOverlay()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new r.ConnectedOverlayScrollHandler(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!r.DomHandler.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus({preventScroll:!0})},isTargetClicked(e){return this.target&&(this.target===e.target||this.target.contains(e.target))},containerRef(e){this.container=e},onOverlayClick(e){u.default.emit("overlay-click",{originalEvent:e,target:this.target})},onOverlayKeydown(e){"Escape"===e.code&&(a.default.emit("close",this.closeListener),r.DomHandler.focus(this.target))}},computed:{containerClass(){return["p-confirm-popup p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},message(){return this.confirmation?this.confirmation.message:null},iconClass(){return["p-confirm-popup-icon",this.confirmation?this.confirmation.icon:null]},acceptLabel(){return this.confirmation?this.confirmation.acceptLabel||this.$primevue.config.locale.accept:null},rejectLabel(){return this.confirmation?this.confirmation.rejectLabel||this.$primevue.config.locale.reject:null},acceptIcon(){return this.confirmation?this.confirmation.acceptIcon:null},rejectIcon(){return this.confirmation?this.confirmation.rejectIcon:null},acceptClass(){return["p-confirm-popup-accept p-button-sm",this.confirmation?this.confirmation.acceptClass:null]},rejectClass(){return["p-confirm-popup-reject p-button-sm",this.confirmation?this.confirmation.rejectClass||"p-button-text":null]}},components:{CPButton:l.default,Portal:f.default},directives:{focustrap:p.default}};const d=["aria-modal"],h={key:0,class:"p-confirm-popup-content"},v={class:"p-confirm-popup-message"},b={class:"p-confirm-popup-footer"};return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-confirm-popup {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-confirm-popup-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n\n/* Animation */\n.p-confirm-popup-enter-from {\n    opacity: 0;\n    transform: scaleY(0.8);\n}\n.p-confirm-popup-leave-to {\n    opacity: 0;\n}\n.p-confirm-popup-enter-active {\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-confirm-popup-leave-active {\n    transition: opacity 0.1s linear;\n}\n.p-confirm-popup:after,\n.p-confirm-popup:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-confirm-popup:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-confirm-popup:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-confirm-popup-flipped:after,\n.p-confirm-popup-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-confirm-popup.p-confirm-popup-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-confirm-popup.p-confirm-popup-flipped:before {\n    border-bottom-color: transparent;\n}\n.p-confirm-popup .p-confirm-popup-content {\n    display: flex;\n    align-items: center;\n}\n"),m.render=function(e,t,n,i,o,r){const c=s.resolveComponent("CPButton"),l=s.resolveComponent("Portal"),a=s.resolveDirective("focustrap");return s.openBlock(),s.createBlock(l,null,{default:s.withCtx((()=>[s.createVNode(s.Transition,{name:"p-confirm-popup",onEnter:r.onEnter,onAfterEnter:r.onAfterEnter,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave},{default:s.withCtx((()=>[o.visible?s.withDirectives((s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,ref:r.containerRef,role:"alertdialog",class:r.containerClass,"aria-modal":o.visible,onClick:t[2]||(t[2]=(...e)=>r.onOverlayClick&&r.onOverlayClick(...e)),onKeydown:t[3]||(t[3]=(...e)=>r.onOverlayKeydown&&r.onOverlayKeydown(...e))},e.$attrs),[e.$slots.message?(s.openBlock(),s.createBlock(s.resolveDynamicComponent(e.$slots.message),{key:1,message:o.confirmation},null,8,["message"])):(s.openBlock(),s.createElementBlock("div",h,[s.createElementVNode("i",{class:s.normalizeClass(r.iconClass)},null,2),s.createElementVNode("span",v,s.toDisplayString(o.confirmation.message),1)])),s.createElementVNode("div",b,[s.createVNode(c,{label:r.rejectLabel,icon:r.rejectIcon,class:s.normalizeClass(r.rejectClass),onClick:t[0]||(t[0]=e=>r.reject()),onKeydown:r.onRejectKeydown,autofocus:o.autoFocusReject},null,8,["label","icon","class","onKeydown","autofocus"]),s.createVNode(c,{label:r.acceptLabel,icon:r.acceptIcon,class:s.normalizeClass(r.acceptClass),onClick:t[1]||(t[1]=e=>r.accept()),onKeydown:r.onAcceptKeydown,autofocus:o.autoFocusAccept},null,8,["label","icon","class","onKeydown","autofocus"])])],16,d)),[[a]]):s.createCommentVNode("",!0)])),_:1},8,["onEnter","onAfterEnter","onLeave","onAfterLeave"])])),_:1})},m}(primevue.button,primevue.confirmationeventbus,primevue.focustrap,primevue.overlayeventbus,primevue.portal,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.confirmpopup=function(e,t,n,i,o,r,s){"use strict";function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=c(e),a=c(t),p=c(n),u=c(i),f=c(o),m={name:"ConfirmPopup",inheritAttrs:!1,props:{group:String},data:()=>({visible:!1,confirmation:null,autoFocusAccept:null,autoFocusReject:null}),target:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,confirmListener:null,closeListener:null,mounted(){this.confirmListener=e=>{e&&e.group===this.group&&(this.confirmation=e,this.target=e.target,this.confirmation.onShow&&this.confirmation.onShow(),this.visible=!0)},this.closeListener=()=>{this.visible=!1,this.confirmation=null},a.default.on("confirm",this.confirmListener),a.default.on("close",this.closeListener)},beforeUnmount(){a.default.off("confirm",this.confirmListener),a.default.off("close",this.closeListener),this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.unbindResizeListener(),this.container&&(r.ZIndexUtils.clear(this.container),this.container=null),this.target=null,this.confirmation=null},methods:{accept(){this.confirmation.accept&&this.confirmation.accept(),this.visible=!1},reject(){this.confirmation.reject&&this.confirmation.reject(),this.visible=!1},onHide(){this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1},onAcceptKeydown(e){"Space"!==e.code&&"Enter"!==e.code||(this.accept(),r.DomHandler.focus(this.target),e.preventDefault())},onRejectKeydown(e){"Space"!==e.code&&"Enter"!==e.code||(this.reject(),r.DomHandler.focus(this.target),e.preventDefault())},onEnter(e){this.autoFocusAccept=void 0===this.confirmation.defaultFocus||"accept"===this.confirmation.defaultFocus,this.autoFocusReject="reject"===this.confirmation.defaultFocus,this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),r.ZIndexUtils.set("overlay",e,this.$primevue.config.zIndex.overlay)},onAfterEnter(){this.focus()},onLeave(){this.autoFocusAccept=null,this.autoFocusReject=null,this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener()},onAfterLeave(e){r.ZIndexUtils.clear(e)},alignOverlay(){r.DomHandler.absolutePosition(this.container,this.target);const e=r.DomHandler.getOffset(this.container),t=r.DomHandler.getOffset(this.target);let n=0;e.left<t.left&&(n=t.left-e.left),this.container.style.setProperty("--overlayArrowLeft",`${n}px`),e.top<t.top&&r.DomHandler.addClass(this.container,"p-confirm-popup-flipped")},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.visible&&this.container&&!this.container.contains(e.target)&&!this.isTargetClicked(e)?(this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1):this.alignOverlay()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new r.ConnectedOverlayScrollHandler(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!r.DomHandler.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus({preventScroll:!0})},isTargetClicked(e){return this.target&&(this.target===e.target||this.target.contains(e.target))},containerRef(e){this.container=e},onOverlayClick(e){u.default.emit("overlay-click",{originalEvent:e,target:this.target})},onOverlayKeydown(e){"Escape"===e.code&&(a.default.emit("close",this.closeListener),r.DomHandler.focus(this.target))}},computed:{containerClass(){return["p-confirm-popup p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},message(){return this.confirmation?this.confirmation.message:null},iconClass(){return["p-confirm-popup-icon",this.confirmation?this.confirmation.icon:null]},acceptLabel(){return this.confirmation?this.confirmation.acceptLabel||this.$primevue.config.locale.accept:null},rejectLabel(){return this.confirmation?this.confirmation.rejectLabel||this.$primevue.config.locale.reject:null},acceptIcon(){return this.confirmation?this.confirmation.acceptIcon:null},rejectIcon(){return this.confirmation?this.confirmation.rejectIcon:null},acceptClass(){return["p-confirm-popup-accept p-button-sm",this.confirmation?this.confirmation.acceptClass:null]},rejectClass(){return["p-confirm-popup-reject p-button-sm",this.confirmation?this.confirmation.rejectClass||"p-button-text":null]}},components:{CPButton:l.default,Portal:f.default},directives:{focustrap:p.default}};const d=["aria-modal"],h={key:0,class:"p-confirm-popup-content"},v={class:"p-confirm-popup-message"},b={class:"p-confirm-popup-footer"};return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-confirm-popup {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-confirm-popup-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n\n/* Animation */\n.p-confirm-popup-enter-from {\n    opacity: 0;\n    transform: scaleY(0.8);\n}\n.p-confirm-popup-leave-to {\n    opacity: 0;\n}\n.p-confirm-popup-enter-active {\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-confirm-popup-leave-active {\n    transition: opacity 0.1s linear;\n}\n.p-confirm-popup:after,\n.p-confirm-popup:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-confirm-popup:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-confirm-popup:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-confirm-popup-flipped:after,\n.p-confirm-popup-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-confirm-popup.p-confirm-popup-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-confirm-popup.p-confirm-popup-flipped:before {\n    border-bottom-color: transparent;\n}\n.p-confirm-popup .p-confirm-popup-content {\n    display: flex;\n    align-items: center;\n}\n"),m.render=function(e,t,n,i,o,r){const c=s.resolveComponent("CPButton"),l=s.resolveComponent("Portal"),a=s.resolveDirective("focustrap");return s.openBlock(),s.createBlock(l,null,{default:s.withCtx((()=>[s.createVNode(s.Transition,{name:"p-confirm-popup",onEnter:r.onEnter,onAfterEnter:r.onAfterEnter,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave},{default:s.withCtx((()=>[o.visible?s.withDirectives((s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,ref:r.containerRef,role:"alertdialog",class:r.containerClass,"aria-modal":o.visible,onClick:t[2]||(t[2]=(...e)=>r.onOverlayClick&&r.onOverlayClick(...e)),onKeydown:t[3]||(t[3]=(...e)=>r.onOverlayKeydown&&r.onOverlayKeydown(...e))},e.$attrs),[e.$slots.message?(s.openBlock(),s.createBlock(s.resolveDynamicComponent(e.$slots.message),{key:1,message:o.confirmation},null,8,["message"])):(s.openBlock(),s.createElementBlock("div",h,[s.renderSlot(e.$slots,"icon",{class:"p-confirm-popup-icon"},(()=>[e.$slots.icon?(s.openBlock(),s.createBlock(s.resolveDynamicComponent(e.$slots.icon),{key:0,class:"p-confirm-popup-icon"})):o.confirmation.icon?(s.openBlock(),s.createElementBlock("span",{key:1,class:s.normalizeClass(r.iconClass)},null,2)):s.createCommentVNode("",!0)])),s.createElementVNode("span",v,s.toDisplayString(o.confirmation.message),1)])),s.createElementVNode("div",b,[s.createVNode(c,{label:r.rejectLabel,class:s.normalizeClass(r.rejectClass),onClick:t[0]||(t[0]=e=>r.reject()),onKeydown:r.onRejectKeydown,autofocus:o.autoFocusReject},{icon:s.withCtx((t=>[s.renderSlot(e.$slots,"rejecticon",{},(()=>[s.createElementVNode("span",{class:s.normalizeClass([r.rejectIcon,t.class])},null,2)]))])),_:3},8,["label","class","onKeydown","autofocus"]),s.createVNode(c,{label:r.acceptLabel,class:s.normalizeClass(r.acceptClass),onClick:t[1]||(t[1]=e=>r.accept()),onKeydown:r.onAcceptKeydown,autofocus:o.autoFocusAccept},{icon:s.withCtx((t=>[s.renderSlot(e.$slots,"accepticon",{},(()=>[s.createElementVNode("span",{class:s.normalizeClass([r.acceptIcon,t.class])},null,2)]))])),_:3},8,["label","class","onKeydown","autofocus"])])],16,d)),[[a]]):s.createCommentVNode("",!0)])),_:3},8,["onEnter","onAfterEnter","onLeave","onAfterLeave"])])),_:3})},m}(primevue.button,primevue.confirmationeventbus,primevue.focustrap,primevue.overlayeventbus,primevue.portal,primevue.utils,Vue);

package/contextmenu/ContextMenu.d.ts

@@ -73,6 +73,29 @@ export interface ContextMenuSlots {
          */
         item: MenuItem;
     }): VNode[];
+    /**
+     * Custom item icon template.
+     * @param {Object} scope - item icon slot's params.
+     */
+    itemicon(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom submenu icon template.
+     */
+    submenuicon(scope: {
+        /**
+         * Whether item is active
+         */
+        active: boolean;
+    }): VNode[];
 }
 
 /**

package/contextmenu/ContextMenu.vue

@@ -14,7 +14,7 @@
                     :menuId="id"
                     :focusedItemId="focused ? focusedItemId : undefined"
                     :items="processedItems"
-                    :template="$slots.item"
+                    :templates="$slots"
                     :activeItemPath="activeItemPath"
                     :exact="exact"
                     :aria-labelledby="ariaLabelledby"

package/contextmenu/ContextMenuSub.vue

@@ -17,20 +17,25 @@
                     :aria-posinset="getAriaPosInset(index)"
                 >
                     <div class="p-menuitem-content" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)">
-                        <template v-if="!template">
+                        <template v-if="!templates.item">
                             <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
                                 <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
-                                    <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
+                                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                    <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
                                     <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
                                 </a>
                             </router-link>
                             <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
-                                <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
                                 <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
-                                <span v-if="getItemProp(processedItem, 'items')" class="p-submenu-icon pi pi-angle-right"></span>
+                                <template v-if="getItemProp(processedItem, 'items')">
+                                    <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" class="p-submenu-icon" />
+                                    <AngleRightIcon v-else class="p-submenu-icon" />
+                                </template>
                             </a>
                         </template>
-                        <component v-else :is="template" :item="processedItem.item"></component>
+                        <component v-else :is="templates.item" :item="processedItem.item"></component>
                     </div>
                     <ContextMenuSub
                         v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
@@ -40,7 +45,7 @@
                         :menuId="menuId"
                         :focusedItemId="focusedItemId"
                         :items="processedItem.items"
-                        :template="template"
+                        :templates="templates"
                         :activeItemPath="activeItemPath"
                         :exact="exact"
                         :level="level + 1"
@@ -56,6 +61,7 @@
 </template>
 
 <script>
+import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 
@@ -87,8 +93,8 @@ export default {
             type: Number,
             default: 0
         },
-        template: {
-            type: Function,
+        templates: {
+            type: Object,
             default: null
         },
         exact: {
@@ -189,6 +195,9 @@ export default {
             return ['p-menuitem-separator', this.getItemProp(processedItem, 'class')];
         }
     },
+    components: {
+        AngleRightIcon: AngleRightIcon
+    },
     directives: {
         ripple: Ripple
     }

package/contextmenu/contextmenu.cjs.js

@@ -2,12 +2,14 @@
 
 var Portal = require('primevue/portal');
 var utils = require('primevue/utils');
+var AngleRightIcon = require('primevue/icons/angleright');
 var Ripple = require('primevue/ripple');
 var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
+var AngleRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(AngleRightIcon);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
 var script$1 = {
@@ -38,8 +40,8 @@ var script$1 = {
             type: Number,
             default: 0
         },
-        template: {
-            type: Function,
+        templates: {
+            type: Object,
             default: null
         },
         exact: {
@@ -140,6 +142,9 @@ var script$1 = {
             return ['p-menuitem-separator', this.getItemProp(processedItem, 'class')];
         }
     },
+    components: {
+        AngleRightIcon: AngleRightIcon__default["default"]
+    },
     directives: {
         ripple: Ripple__default["default"]
     }
@@ -155,14 +160,11 @@ const _hoisted_4 = ["href", "onClick"];
 const _hoisted_5 = { class: "p-menuitem-text" };
 const _hoisted_6 = ["href", "target"];
 const _hoisted_7 = { class: "p-menuitem-text" };
-const _hoisted_8 = {
-  key: 1,
-  class: "p-submenu-icon pi pi-angle-right"
-};
-const _hoisted_9 = ["id"];
+const _hoisted_8 = ["id"];
 
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_router_link = vue.resolveComponent("router-link");
+  const _component_AngleRightIcon = vue.resolveComponent("AngleRightIcon");
   const _component_ContextMenuSub = vue.resolveComponent("ContextMenuSub", true);
   const _directive_ripple = vue.resolveDirective("ripple");
 
@@ -197,7 +199,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                         onClick: $event => ($options.onItemClick($event, processedItem)),
                         onMouseenter: $event => ($options.onItemMouseEnter($event, processedItem))
                       }, [
-                        (!$props.template)
+                        (!$props.templates.item)
                           ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                               ($options.getItemProp(processedItem, 'to') && !$options.isItemDisabled(processedItem))
                                 ? (vue.openBlock(), vue.createBlock(_component_router_link, {
@@ -213,12 +215,18 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                         "aria-hidden": "true",
                                         onClick: $event => ($options.onItemActionClick($event, navigate))
                                       }, [
-                                        ($options.getItemProp(processedItem, 'icon'))
-                                          ? (vue.openBlock(), vue.createElementBlock("span", {
+                                        ($props.templates.itemicon)
+                                          ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                                               key: 0,
+                                              item: processedItem.item,
                                               class: vue.normalizeClass($options.getItemIconClass(processedItem))
-                                            }, null, 2))
-                                          : vue.createCommentVNode("", true),
+                                            }, null, 8, ["item", "class"]))
+                                          : ($options.getItemProp(processedItem, 'icon'))
+                                            ? (vue.openBlock(), vue.createElementBlock("span", {
+                                                key: 1,
+                                                class: vue.normalizeClass($options.getItemIconClass(processedItem))
+                                              }, null, 2))
+                                            : vue.createCommentVNode("", true),
                                         vue.createElementVNode("span", _hoisted_5, vue.toDisplayString($options.getItemLabel(processedItem)), 1)
                                       ], 10, _hoisted_4)), [
                                         [_directive_ripple]
@@ -234,21 +242,38 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                     tabindex: "-1",
                                     "aria-hidden": "true"
                                   }, [
-                                    ($options.getItemProp(processedItem, 'icon'))
-                                      ? (vue.openBlock(), vue.createElementBlock("span", {
+                                    ($props.templates.itemicon)
+                                      ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                                           key: 0,
+                                          item: processedItem.item,
                                           class: vue.normalizeClass($options.getItemIconClass(processedItem))
-                                        }, null, 2))
-                                      : vue.createCommentVNode("", true),
+                                        }, null, 8, ["item", "class"]))
+                                      : ($options.getItemProp(processedItem, 'icon'))
+                                        ? (vue.openBlock(), vue.createElementBlock("span", {
+                                            key: 1,
+                                            class: vue.normalizeClass($options.getItemIconClass(processedItem))
+                                          }, null, 2))
+                                        : vue.createCommentVNode("", true),
                                     vue.createElementVNode("span", _hoisted_7, vue.toDisplayString($options.getItemLabel(processedItem)), 1),
                                     ($options.getItemProp(processedItem, 'items'))
-                                      ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_8))
+                                      ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+                                          ($props.templates.submenuicon)
+                                            ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.submenuicon), {
+                                                key: 0,
+                                                active: $options.isItemActive(processedItem),
+                                                class: "p-submenu-icon"
+                                              }, null, 8, ["active"]))
+                                            : (vue.openBlock(), vue.createBlock(_component_AngleRightIcon, {
+                                                key: 1,
+                                                class: "p-submenu-icon"
+                                              }))
+                                        ], 64))
                                       : vue.createCommentVNode("", true)
                                   ], 10, _hoisted_6)), [
                                     [_directive_ripple]
                                   ])
                             ], 64))
-                          : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template), {
+                          : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.item), {
                               key: 1,
                               item: processedItem.item
                             }, null, 8, ["item"]))
@@ -262,14 +287,14 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                             menuId: $props.menuId,
                             focusedItemId: $props.focusedItemId,
                             items: processedItem.items,
-                            template: $props.template,
+                            templates: $props.templates,
                             activeItemPath: $props.activeItemPath,
                             exact: $props.exact,
                             level: $props.level + 1,
                             visible: $options.isItemActive(processedItem) && $options.isItemGroup(processedItem),
                             onItemClick: _cache[0] || (_cache[0] = $event => (_ctx.$emit('item-click', $event))),
                             onItemMouseenter: _cache[1] || (_cache[1] = $event => (_ctx.$emit('item-mouseenter', $event)))
-                          }, null, 8, ["id", "menuId", "focusedItemId", "items", "template", "activeItemPath", "exact", "level", "visible"]))
+                          }, null, 8, ["id", "menuId", "focusedItemId", "items", "templates", "activeItemPath", "exact", "level", "visible"]))
                         : vue.createCommentVNode("", true)
                     ], 14, _hoisted_2))
                   : vue.createCommentVNode("", true),
@@ -280,7 +305,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                       style: vue.normalizeStyle($options.getItemProp(processedItem, 'style')),
                       class: vue.normalizeClass($options.getSeparatorItemClass(processedItem)),
                       role: "separator"
-                    }, null, 14, _hoisted_9))
+                    }, null, 14, _hoisted_8))
                   : vue.createCommentVNode("", true)
               ], 64))
             }), 128))
@@ -915,7 +940,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   menuId: $data.id,
                   focusedItemId: $data.focused ? $options.focusedItemId : undefined,
                   items: $options.processedItems,
-                  template: _ctx.$slots.item,
+                  templates: _ctx.$slots,
                   activeItemPath: $data.activeItemPath,
                   exact: $props.exact,
                   "aria-labelledby": _ctx.ariaLabelledby,
@@ -927,7 +952,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   onKeydown: $options.onKeyDown,
                   onItemClick: $options.onItemClick,
                   onItemMouseenter: $options.onItemMouseEnter
-                }, null, 8, ["id", "tabindex", "aria-activedescendant", "menuId", "focusedItemId", "items", "template", "activeItemPath", "exact", "aria-labelledby", "aria-label", "visible", "onFocus", "onBlur", "onKeydown", "onItemClick", "onItemMouseenter"])
+                }, null, 8, ["id", "tabindex", "aria-activedescendant", "menuId", "focusedItemId", "items", "templates", "activeItemPath", "exact", "aria-labelledby", "aria-label", "visible", "onFocus", "onBlur", "onKeydown", "onItemClick", "onItemMouseenter"])
               ], 16))
             : vue.createCommentVNode("", true)
         ]),