primevue 3.29.2 → 3.30.0

package/confirmpopup/confirmpopup.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.confirmpopup=function(e,t,n,i,o,r,s,c){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=l(e),p=l(t),u=l(n),m=l(i),f=l(o),d=l(r),h={name:"ConfirmPopup",extends:a.default,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},u.default.on("confirm",this.confirmListener),u.default.on("close",this.closeListener)},beforeUnmount(){u.default.off("confirm",this.confirmListener),u.default.off("close",this.closeListener),this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.unbindResizeListener(),this.container&&(s.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(),s.DomHandler.focus(this.target),e.preventDefault())},onRejectKeydown(e){"Space"!==e.code&&"Enter"!==e.code||(this.reject(),s.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(),s.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){s.ZIndexUtils.clear(e)},alignOverlay(){s.DomHandler.absolutePosition(this.container,this.target);const e=s.DomHandler.getOffset(this.container),t=s.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&&s.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 s.ConnectedOverlayScrollHandler(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!s.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){f.default.emit("overlay-click",{originalEvent:e,target:this.target})},onOverlayKeydown(e){"Escape"===e.code&&(u.default.emit("close",this.closeListener),s.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:p.default,Portal:d.default},directives:{focustrap:m.default}};const v=["aria-modal"];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"),h.render=function(e,t,n,i,o,r){const s=c.resolveComponent("CPButton"),l=c.resolveComponent("Portal"),a=c.resolveDirective("focustrap");return c.openBlock(),c.createBlock(l,null,{default:c.withCtx((()=>[c.createVNode(c.Transition,{name:"p-confirm-popup",onEnter:r.onEnter,onAfterEnter:r.onAfterEnter,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave},{default:c.withCtx((()=>[o.visible?c.withDirectives((c.openBlock(),c.createElementBlock("div",c.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.ptm("root")}),[e.$slots.message?(c.openBlock(),c.createBlock(c.resolveDynamicComponent(e.$slots.message),{key:1,message:o.confirmation},null,8,["message"])):(c.openBlock(),c.createElementBlock("div",c.mergeProps({key:0,class:"p-confirm-popup-content"},e.ptm("content")),[c.renderSlot(e.$slots,"icon",{class:"p-confirm-popup-icon"},(()=>[e.$slots.icon?(c.openBlock(),c.createBlock(c.resolveDynamicComponent(e.$slots.icon),{key:0,class:"p-confirm-popup-icon"})):o.confirmation.icon?(c.openBlock(),c.createElementBlock("span",c.mergeProps({key:1,class:r.iconClass},e.ptm("icon")),null,16)):c.createCommentVNode("",!0)])),c.createElementVNode("span",c.mergeProps({class:"p-confirm-popup-message"},e.ptm("message")),c.toDisplayString(o.confirmation.message),17)],16)),c.createElementVNode("div",c.mergeProps({class:"p-confirm-popup-footer"},e.ptm("footer")),[c.createVNode(s,{label:r.rejectLabel,class:c.normalizeClass(r.rejectClass),onClick:t[0]||(t[0]=e=>r.reject()),onKeydown:r.onRejectKeydown,autofocus:o.autoFocusReject,pt:e.ptm("rejectButton")},{icon:c.withCtx((t=>[c.renderSlot(e.$slots,"rejecticon",{},(()=>[c.createElementVNode("span",c.mergeProps({class:[r.rejectIcon,t.class]},e.ptm("rejectButton").icon),null,16)]))])),_:3},8,["label","class","onKeydown","autofocus","pt"]),c.createVNode(s,{label:r.acceptLabel,class:c.normalizeClass(r.acceptClass),onClick:t[1]||(t[1]=e=>r.accept()),onKeydown:r.onAcceptKeydown,autofocus:o.autoFocusAccept,pt:e.ptm("acceptButton")},{icon:c.withCtx((t=>[c.renderSlot(e.$slots,"accepticon",{},(()=>[c.createElementVNode("span",c.mergeProps({class:[r.acceptIcon,t.class]},e.ptm("acceptButton").icon),null,16)]))])),_:3},8,["label","class","onKeydown","autofocus","pt"])],16)],16,v)),[[a]]):c.createCommentVNode("",!0)])),_:3},8,["onEnter","onAfterEnter","onLeave","onAfterLeave"])])),_:3})},h}(primevue.basecomponent,primevue.button,primevue.confirmationeventbus,primevue.focustrap,primevue.overlayeventbus,primevue.portal,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.confirmpopup=function(e,n,t,o,i,r,c,s,a){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=l(e),p=l(n),f=l(t),m=l(o),d=l(i),h=l(c),v=s.useStyle("\n.p-confirm-popup {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\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\n.p-confirm-popup-leave-to {\n    opacity: 0;\n}\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\n.p-confirm-popup-leave-active {\n    transition: opacity 0.1s linear;\n}\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\n.p-confirm-popup:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n\n.p-confirm-popup:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n\n.p-confirm-popup-flipped:after,\n.p-confirm-popup-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n\n.p-confirm-popup.p-confirm-popup-flipped:after {\n    border-bottom-color: transparent;\n}\n\n.p-confirm-popup.p-confirm-popup-flipped:before {\n    border-bottom-color: transparent;\n}\n\n.p-confirm-popup .p-confirm-popup-content {\n    display: flex;\n    align-items: center;\n}\n",{name:"confirmpopup",manual:!0}),b={name:"ConfirmPopup",extends:{name:"BaseConfirmPopup",extends:h.default,props:{group:String},css:{classes:{root:function(e){var n=e.instance;return["p-confirm-popup p-component",{"p-input-filled":"filled"===n.$primevue.config.inputStyle,"p-ripple-disabled":!1===n.$primevue.config.ripple}]},content:"p-confirm-popup-content",icon:function(e){var n=e.instance;return["p-confirm-popup-icon",n.confirmation?n.confirmation.icon:null]},message:"p-confirm-popup-message",footer:"p-confirm-popup-footer",rejectButton:function(e){var n=e.instance;return["p-confirm-dialog-reject",n.confirmation?n.confirmation.rejectClass||"p-button-text":null]},acceptButton:function(e){var n=e.instance;return["p-confirm-dialog-accept",n.confirmation?n.confirmation.acceptClass:null]}},loadStyle:v.load},provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,data:function(){return{visible:!1,confirmation:null,autoFocusAccept:null,autoFocusReject:null}},target:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,confirmListener:null,closeListener:null,mounted:function(){var e=this;this.confirmListener=function(n){n&&n.group===e.group&&(e.confirmation=n,e.target=n.target,e.confirmation.onShow&&e.confirmation.onShow(),e.visible=!0)},this.closeListener=function(){e.visible=!1,e.confirmation=null},p.default.on("confirm",this.confirmListener),p.default.on("close",this.closeListener)},beforeUnmount:function(){p.default.off("confirm",this.confirmListener),p.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:function(){this.confirmation.accept&&this.confirmation.accept(),this.visible=!1},reject:function(){this.confirmation.reject&&this.confirmation.reject(),this.visible=!1},onHide:function(){this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1},onAcceptKeydown:function(e){"Space"!==e.code&&"Enter"!==e.code||(this.accept(),r.DomHandler.focus(this.target),e.preventDefault())},onRejectKeydown:function(e){"Space"!==e.code&&"Enter"!==e.code||(this.reject(),r.DomHandler.focus(this.target),e.preventDefault())},onEnter:function(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:function(){this.focus()},onLeave:function(){this.autoFocusAccept=null,this.autoFocusReject=null,this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener()},onAfterLeave:function(e){r.ZIndexUtils.clear(e)},alignOverlay:function(){r.DomHandler.absolutePosition(this.container,this.target);var e=r.DomHandler.getOffset(this.container),n=r.DomHandler.getOffset(this.target),t=0;e.left<n.left&&(t=n.left-e.left),this.container.style.setProperty("--overlayArrowLeft","".concat(t,"px")),e.top<n.top&&(this.container.setAttribute("data-p-confirm-popup-flipped","true"),!this.isUnstyled&&r.DomHandler.addClass(this.container,"p-confirm-popup-flipped"))},bindOutsideClickListener:function(){var e=this;this.outsideClickListener||(this.outsideClickListener=function(n){e.visible&&e.container&&!e.container.contains(n.target)&&!e.isTargetClicked(n)?(e.confirmation.onHide&&e.confirmation.onHide(),e.visible=!1):e.alignOverlay()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener:function(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener:function(){var e=this;this.scrollHandler||(this.scrollHandler=new r.ConnectedOverlayScrollHandler(this.target,(function(){e.visible&&(e.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener:function(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener:function(){var e=this;this.resizeListener||(this.resizeListener=function(){e.visible&&!r.DomHandler.isTouchDevice()&&(e.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener:function(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},focus:function(){var e=this.container.querySelector("[autofocus]");e&&e.focus({preventScroll:!0})},isTargetClicked:function(e){return this.target&&(this.target===e.target||this.target.contains(e.target))},containerRef:function(e){this.container=e},onOverlayClick:function(e){m.default.emit("overlay-click",{originalEvent:e,target:this.target})},onOverlayKeydown:function(e){"Escape"===e.code&&(p.default.emit("close",this.closeListener),r.DomHandler.focus(this.target))},getCXOptions:function(e,n){return{contenxt:{icon:e,iconClass:n.class}}}},computed:{message:function(){return this.confirmation?this.confirmation.message:null},acceptLabel:function(){return this.confirmation?this.confirmation.acceptLabel||this.$primevue.config.locale.accept:null},rejectLabel:function(){return this.confirmation?this.confirmation.rejectLabel||this.$primevue.config.locale.reject:null},acceptIcon:function(){return this.confirmation?this.confirmation.acceptIcon:null},rejectIcon:function(){return this.confirmation?this.confirmation.rejectIcon:null}},components:{CPButton:u.default,Portal:d.default},directives:{focustrap:f.default}};function y(e){return y="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},y(e)}function g(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function L(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?g(Object(t),!0).forEach((function(n){j(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):g(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function j(e,n,t){return(n=k(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function k(e){var n=C(e,"string");return"symbol"===y(n)?n:String(n)}function C(e,n){if("object"!==y(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var o=t.call(e,n||"default");if("object"!==y(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}var w=["aria-modal"];return b.render=function(e,n,t,o,i,r){var c=a.resolveComponent("CPButton"),s=a.resolveComponent("Portal"),l=a.resolveDirective("focustrap");return a.openBlock(),a.createBlock(s,null,{default:a.withCtx((function(){return[a.createVNode(a.Transition,{name:"p-confirm-popup",onEnter:r.onEnter,onAfterEnter:r.onAfterEnter,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave},{default:a.withCtx((function(){return[i.visible?a.withDirectives((a.openBlock(),a.createElementBlock("div",a.mergeProps({key:0,ref:r.containerRef,role:"alertdialog",class:e.cx("root"),"aria-modal":i.visible,onClick:n[2]||(n[2]=function(){return r.onOverlayClick&&r.onOverlayClick.apply(r,arguments)}),onKeydown:n[3]||(n[3]=function(){return r.onOverlayKeydown&&r.onOverlayKeydown.apply(r,arguments)})},L(L({},e.$attrs),e.ptm("root"))),[e.$slots.message?(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.$slots.message),{key:1,message:i.confirmation},null,8,["message"])):(a.openBlock(),a.createElementBlock("div",a.mergeProps({key:0,class:e.cx("content")},e.ptm("content")),[a.renderSlot(e.$slots,"icon",{},(function(){return[e.$slots.icon?(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.$slots.icon),{key:0,class:a.normalizeClass(e.cx("icon"))},null,8,["class"])):i.confirmation.icon?(a.openBlock(),a.createElementBlock("span",a.mergeProps({key:1,class:e.cx("icon")},e.ptm("icon")),null,16)):a.createCommentVNode("",!0)]})),a.createElementVNode("span",a.mergeProps({class:e.cx("message")},e.ptm("message")),a.toDisplayString(i.confirmation.message),17)],16)),a.createElementVNode("div",a.mergeProps({class:e.cx("footer")},e.ptm("footer")),[a.createVNode(c,{label:r.rejectLabel,onClick:n[0]||(n[0]=function(e){return r.reject()}),onKeydown:r.onRejectKeydown,autofocus:i.autoFocusReject,class:a.normalizeClass(e.cx("rejectButton")),unstyled:e.unstyled,pt:e.ptm("rejectButton"),"data-pc-name":"rejectbutton"},a.createSlots({_:2},[r.rejectIcon||e.$slots.rejecticon?{name:"icon",fn:a.withCtx((function(n){return[a.renderSlot(e.$slots,"rejecticon",{},(function(){return[a.createElementVNode("span",a.mergeProps({class:[r.rejectIcon,n.class]},e.ptm("rejectButton").icon,{"data-pc-name":"rejectbuttonicon"}),null,16)]}))]})),key:"0"}:void 0]),1032,["label","onKeydown","autofocus","class","unstyled","pt"]),a.createVNode(c,{label:r.acceptLabel,onClick:n[1]||(n[1]=function(e){return r.accept()}),onKeydown:r.onAcceptKeydown,autofocus:i.autoFocusAccept,class:a.normalizeClass(e.cx("acceptButton")),unstyled:e.unstyled,pt:e.ptm("acceptButton"),"data-pc-name":"acceptbutton"},a.createSlots({_:2},[r.acceptIcon||e.$slots.accepticon?{name:"icon",fn:a.withCtx((function(n){return[a.renderSlot(e.$slots,"accepticon",{},(function(){return[a.createElementVNode("span",a.mergeProps({class:[r.acceptIcon,n.class]},e.ptm("acceptButton").icon,{"data-pc-name":"acceptbuttonicon"}),null,16)]}))]})),key:"0"}:void 0]),1032,["label","onKeydown","autofocus","class","unstyled","pt"])],16)],16,w)),[[l]]):a.createCommentVNode("",!0)]})),_:3},8,["onEnter","onAfterEnter","onLeave","onAfterLeave"])]})),_:3})},b}(primevue.button,primevue.confirmationeventbus,primevue.focustrap,primevue.overlayeventbus,primevue.portal,primevue.utils,primevue.basecomponent,primevue.usestyle,Vue);

package/contextmenu/BaseContextMenu.vue

@@ -0,0 +1,133 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-contextmenu ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.p-contextmenu .p-submenu-list {
+    position: absolute;
+    min-width: 100%;
+    z-index: 1;
+}
+
+.p-contextmenu .p-menuitem-link {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-contextmenu .p-menuitem-text {
+    line-height: 1;
+}
+
+.p-contextmenu .p-menuitem {
+    position: relative;
+}
+
+.p-contextmenu .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+}
+
+.p-contextmenu-enter-from {
+    opacity: 0;
+}
+
+.p-contextmenu-enter-active {
+    transition: opacity 250ms;
+}
+`;
+
+const classes = {
+    root: ({ instance }) => [
+        'p-contextmenu p-component',
+        {
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    menu: 'p-contextmenu-root-list',
+    menuitem: ({ instance, processedItem }) => [
+        'p-menuitem',
+        {
+            'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
+            'p-focus': instance.isItemFocused(processedItem),
+            'p-disabled': instance.isItemDisabled(processedItem)
+        }
+    ],
+    content: 'p-menuitem-content',
+    action: ({ props, isActive, isExactActive }) => [
+        'p-menuitem-link',
+        {
+            'router-link-active': isActive,
+            'router-link-active-exact': props.exact && isExactActive
+        }
+    ],
+    icon: 'p-menuitem-icon',
+    label: 'p-menuitem-text',
+    submenuIcon: 'p-submenu-icon',
+    submenu: 'p-submenu-list',
+    separator: 'p-menuitem-separator'
+};
+
+const { load: loadStyle } = useStyle(styles, { name: 'contextmenu', manual: true });
+
+export default {
+    name: 'BaseContextMenu',
+    extends: BaseComponent,
+    props: {
+        model: {
+            type: Array,
+            default: null
+        },
+        appendTo: {
+            type: String,
+            default: 'body'
+        },
+        autoZIndex: {
+            type: Boolean,
+            default: true
+        },
+        baseZIndex: {
+            type: Number,
+            default: 0
+        },
+        global: {
+            type: Boolean,
+            default: false
+        },
+        exact: {
+            type: Boolean,
+            default: true
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

package/contextmenu/ContextMenu.d.ts

@@ -9,6 +9,7 @@
  *
  */
 import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
@@ -18,6 +19,7 @@ export declare type ContextMenuPassThroughOptionType = ContextMenuPassThroughAtt
  * Custom passthrough(pt) option method.
  */
 export interface ContextMenuPassThroughMethodOptions {
+    instance: any;
     props: ContextMenuProps;
     state: ContextMenuState;
     context: ContextMenuContext;
@@ -64,6 +66,15 @@ export interface ContextMenuPassThroughOptions {
      * Uses to pass attributes to the separator's DOM element.
      */
     separator?: ContextMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the submenu's DOM element.
+     */
+    submenu?: ContextMenuPassThroughOptionType;
+    /**
+     * Uses to manage all lifecycle hooks
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
 }
 
 /**
@@ -192,6 +203,11 @@ export interface ContextMenuProps {
      * @type {ContextMenuPassThroughOptions}
      */
     pt?: ContextMenuPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

package/contextmenu/ContextMenu.vue

@@ -1,11 +1,11 @@
 <template>
     <Portal :appendTo="appendTo">
         <transition name="p-contextmenu" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div v-if="visible" :ref="containerRef" :class="containerClass" v-bind="{ ...$attrs, ...ptm('root') }">
+            <div v-if="visible" :ref="containerRef" :class="cx('root')" v-bind="{ ...$attrs, ...ptm('root') }" data-pc-name="contextmenu">
                 <ContextMenuSub
                     :ref="listRef"
                     :id="id + '_list'"
-                    class="p-contextmenu-root-list"
+                    :class="cx('menu')"
                     role="menubar"
                     :root="true"
                     :tabindex="tabindex"
@@ -34,54 +34,16 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import Portal from 'primevue/portal';
 import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import BaseContextMenu from './BaseContextMenu.vue';
 import ContextMenuSub from './ContextMenuSub.vue';
 
 export default {
     name: 'ContextMenu',
-    extends: BaseComponent,
+    extends: BaseContextMenu,
     inheritAttrs: false,
     emits: ['focus', 'blur', 'show', 'hide'],
-    props: {
-        model: {
-            type: Array,
-            default: null
-        },
-        appendTo: {
-            type: String,
-            default: 'body'
-        },
-        autoZIndex: {
-            type: Boolean,
-            default: true
-        },
-        baseZIndex: {
-            type: Number,
-            default: 0
-        },
-        global: {
-            type: Boolean,
-            default: false
-        },
-        exact: {
-            type: Boolean,
-            default: true
-        },
-        tabindex: {
-            type: Number,
-            default: 0
-        },
-        'aria-labelledby': {
-            type: String,
-            default: null
-        },
-        'aria-label': {
-            type: String,
-            default: null
-        }
-    },
     target: null,
     outsideClickListener: null,
     resizeListener: null,
@@ -349,7 +311,7 @@ export default {
         onEnterKey(event) {
             if (this.focusedItemInfo.index !== -1) {
                 const element = DomHandler.findSingle(this.list, `li[id="${`${this.focusedItemId}`}"]`);
-                const anchorElement = element && DomHandler.findSingle(element, '.p-menuitem-link');
+                const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
 
                 anchorElement ? anchorElement.click() : element && element.click();
                 const processedItem = this.visibleItems[this.focusedItemInfo.index];
@@ -380,6 +342,7 @@ export default {
             this.hide();
         },
         onEnter(el) {
+            DomHandler.addStyles(el, { position: 'absolute' });
             this.position();
 
             if (this.autoZIndex) {
@@ -609,9 +572,6 @@ export default {
         }
     },
     computed: {
-        containerClass() {
-            return ['p-contextmenu p-component', { 'p-input-filled': this.$primevue.config.inputStyle === 'filled', 'p-ripple-disabled': this.$primevue.config.ripple === false }];
-        },
         processedItems() {
             return this.createProcessedItems(this.model || []);
         },
@@ -630,50 +590,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-contextmenu {
-    position: absolute;
-}
-
-.p-contextmenu ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.p-contextmenu .p-submenu-list {
-    position: absolute;
-    min-width: 100%;
-    z-index: 1;
-}
-
-.p-contextmenu .p-menuitem-link {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    overflow: hidden;
-    position: relative;
-}
-
-.p-contextmenu .p-menuitem-text {
-    line-height: 1;
-}
-
-.p-contextmenu .p-menuitem {
-    position: relative;
-}
-
-.p-contextmenu .p-menuitem-link .p-submenu-icon {
-    margin-left: auto;
-}
-
-.p-contextmenu-enter-from {
-    opacity: 0;
-}
-
-.p-contextmenu-enter-active {
-    transition: opacity 250ms;
-}
-</style>

package/contextmenu/ContextMenuSub.vue

@@ -1,12 +1,12 @@
 <template>
     <transition name="p-contextmenusub" @enter="onEnter">
-        <ul v-if="root ? true : visible" ref="container" v-bind="ptm('menu')">
+        <ul v-if="root ? true : visible" ref="container" :tabindex="tabindex" v-bind="ptm('menu')">
             <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
                 <li
                     v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
                     :id="getItemId(processedItem)"
                     :style="getItemProp(processedItem, 'style')"
-                    :class="getItemClass(processedItem)"
+                    :class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
                     role="menuitem"
                     :aria-label="getItemLabel(processedItem)"
                     :aria-disabled="isItemDisabled(processedItem) || undefined"
@@ -16,40 +16,26 @@
                     :aria-setsize="getAriaSetSize()"
                     :aria-posinset="getAriaPosInset(index)"
                     v-bind="getPTOptions(processedItem, 'menuitem')"
+                    :data-p-highlight="isItemActive(processedItem)"
+                    :data-p-focused="isItemFocused(processedItem)"
+                    :data-p-disabled="isItemDisabled(processedItem)"
                 >
-                    <div class="p-menuitem-content" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                    <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
                         <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)"
-                                    v-bind="getPTOptions(processedItem, 'action')"
-                                >
-                                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
-                                    <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
-                                    <span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                                <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
+                                    <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                                    <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ 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"
-                                v-bind="getPTOptions(processedItem, 'action')"
-                            >
-                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
-                                <span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</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" v-bind="getPTOptions(processedItem, 'submenuicon')" />
+                                    <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" />
+                                    <AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuicon')" />
                                 </template>
                             </a>
                         </template>
@@ -59,7 +45,7 @@
                         v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
                         :id="getItemId(processedItem) + '_list'"
                         role="menu"
-                        class="p-submenu-list"
+                        :class="cx('submenu')"
                         :menuId="menuId"
                         :focusedItemId="focusedItemId"
                         :items="processedItem.items"
@@ -71,13 +57,14 @@
                         :visible="isItemActive(processedItem) && isItemGroup(processedItem)"
                         @item-click="$emit('item-click', $event)"
                         @item-mouseenter="$emit('item-mouseenter', $event)"
+                        v-bind="ptm('submenu')"
                     />
                 </li>
                 <li
                     v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
                     :id="getItemId(processedItem)"
                     :style="getItemProp(processedItem, 'style')"
-                    :class="getSeparatorItemClass(processedItem)"
+                    :class="[cx('separator'), getItemProp(processedItem, 'class')]"
                     role="separator"
                     v-bind="ptm('separator')"
                 ></li>
@@ -94,6 +81,7 @@ import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'ContextMenuSub',
+    hostName: 'ContextMenu',
     extends: BaseComponent,
     emits: ['item-click', 'item-mouseenter'],
     props: {
@@ -132,6 +120,10 @@ export default {
         activeItemPath: {
             type: Object,
             default: null
+        },
+        tabindex: {
+            type: Number,
+            default: 0
         }
     },
     methods: {
@@ -203,32 +195,6 @@ export default {
             } else {
                 this.$refs.container.style.left = itemOuterWidth + 'px';
             }
-        },
-        getItemClass(processedItem) {
-            return [
-                'p-menuitem',
-                this.getItemProp(processedItem, 'class'),
-                {
-                    'p-menuitem-active p-highlight': this.isItemActive(processedItem),
-                    'p-focus': this.isItemFocused(processedItem),
-                    'p-disabled': this.isItemDisabled(processedItem)
-                }
-            ];
-        },
-        getItemActionClass(processedItem, routerProps) {
-            return [
-                'p-menuitem-link',
-                {
-                    'router-link-active': routerProps && routerProps.isActive,
-                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-                }
-            ];
-        },
-        getItemIconClass(processedItem) {
-            return ['p-menuitem-icon', this.getItemProp(processedItem, 'icon')];
-        },
-        getSeparatorItemClass(processedItem) {
-            return ['p-menuitem-separator', this.getItemProp(processedItem, 'class')];
         }
     },
     components: {