primevue 4.2.5 → 4.3.0

package/megamenu/style/index.mjs

@@ -1,12 +1,9 @@
+import { style } from '@primeuix/styles/megamenu';
 import BaseStyle from '@primevue/core/base/style';
 
-var theme = function theme(_ref) {
-  var dt = _ref.dt;
-  return "\n.p-megamenu {\n    position: relative;\n    display: flex;\n    align-items: center;\n    background: ".concat(dt('megamenu.background'), ";\n    border: 1px solid ").concat(dt('megamenu.border.color'), ";\n    border-radius: ").concat(dt('megamenu.border.radius'), ";\n    color: ").concat(dt('megamenu.color'), ";\n    gap: ").concat(dt('megamenu.gap'), ";\n}\n\n.p-megamenu-start,\n.p-megamenu-end {\n    display: flex;\n    align-items: center;\n}\n\n.p-megamenu-root-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    outline: 0 none;\n    align-items: center;\n    display: flex;\n    flex-wrap: wrap;\n    gap: ").concat(dt('megamenu.gap'), ";\n}\n\n.p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content {\n    border-radius: ").concat(dt('megamenu.base.item.border.radius'), ";\n}\n\n.p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content > .p-megamenu-item-link {\n    padding: ").concat(dt('megamenu.base.item.padding'), ";\n}\n\n.p-megamenu-item-content {\n    transition: background ").concat(dt('megamenu.transition.duration'), ", color ").concat(dt('megamenu.transition.duration'), ";\n    border-radius: ").concat(dt('megamenu.item.border.radius'), ";\n    color: ").concat(dt('megamenu.item.color'), ";\n}\n\n.p-megamenu-item-link {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n    color: inherit;\n    padding: ").concat(dt('megamenu.item.padding'), ";\n    gap: ").concat(dt('megamenu.item.gap'), ";\n    user-select: none;\n    outline: 0 none;\n}\n\n.p-megamenu-item-label {\n    line-height: 1;\n}\n\n.p-megamenu-item-icon {\n    color: ").concat(dt('megamenu.item.icon.color'), ";\n}\n\n.p-megamenu-submenu-icon {\n    color: ").concat(dt('megamenu.submenu.icon.color'), ";\n    font-size: ").concat(dt('megamenu.submenu.icon.size'), ";\n    width: ").concat(dt('megamenu.submenu.icon.size'), ";\n    height: ").concat(dt('megamenu.submenu.icon.size'), ";\n}\n\n.p-megamenu-item.p-focus > .p-megamenu-item-content {\n    color: ").concat(dt('megamenu.item.focus.color'), ";\n    background: ").concat(dt('megamenu.item.focus.background'), ";\n}\n\n.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-item-icon {\n    color: ").concat(dt('megamenu.item.icon.focus.color'), ";\n}\n\n.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-submenu-icon {\n    color: ").concat(dt('megamenu.submenu.icon.focus.color'), ";\n}\n\n.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover {\n    color: ").concat(dt('megamenu.item.focus.color'), ";\n    background: ").concat(dt('megamenu.item.focus.background'), ";\n}\n\n.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-item-icon {\n    color: ").concat(dt('megamenu.item.icon.focus.color'), ";\n}\n\n.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-submenu-icon {\n    color: ").concat(dt('megamenu.submenu.icon.focus.color'), ";\n}\n\n.p-megamenu-item-active > .p-megamenu-item-content {\n    color: ").concat(dt('megamenu.item.active.color'), ";\n    background: ").concat(dt('megamenu.item.active.background'), ";\n}\n\n.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-item-icon {\n    color: ").concat(dt('megamenu.item.icon.active.color'), ";\n}\n\n.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {\n    color: ").concat(dt('megamenu.submenu.icon.active.color'), ";\n}\n\n.p-megamenu-overlay {\n    display: none;\n    position: absolute;\n    width: auto;\n    z-index: 1;\n    left: 0;\n    min-width: 100%;\n    padding: ").concat(dt('megamenu.overlay.padding'), ";\n    background: ").concat(dt('megamenu.overlay.background'), ";\n    color: ").concat(dt('megamenu.overlay.color'), ";\n    border: 1px solid ").concat(dt('megamenu.overlay.border.color'), ";\n    border-radius: ").concat(dt('megamenu.overlay.border.radius'), ";\n    box-shadow: ").concat(dt('megamenu.overlay.shadow'), ";\n}\n\n.p-megamenu-overlay:dir(rtl) {\n    left: auto;\n    right: 0;\n}\n\n.p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {\n    display: block;\n}\n\n.p-megamenu-submenu {\n    margin: 0;\n    list-style: none;\n    padding: ").concat(dt('megamenu.submenu.padding'), ";\n    min-width: 12.5rem;\n    display: flex;\n    flex-direction: column;\n    gap: ").concat(dt('megamenu.submenu.gap'), "\n}\n\n.p-megamenu-submenu-label {\n    padding: ").concat(dt('megamenu.submenu.label.padding'), ";\n    color: ").concat(dt('megamenu.submenu.label.color'), ";\n    font-weight: ").concat(dt('megamenu.submenu.label.font.weight'), ";\n    background: ").concat(dt('megamenu.submenu.label.background'), ";\n}\n\n.p-megamenu-separator {\n    border-block-start: 1px solid ").concat(dt('megamenu.separator.border.color'), ";\n}\n\n.p-megamenu-horizontal {\n    align-items: center;\n    padding: ").concat(dt('megamenu.horizontal.orientation.padding'), ";\n}\n\n.p-megamenu-horizontal .p-megamenu-root-list {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: ").concat(dt('megamenu.horizontal.orientation.gap'), ";\n}\n\n.p-megamenu-horizontal .p-megamenu-end {\n    margin-left: auto;\n    align-self: center;\n}\n\n.p-megamenu-horizontal .p-megamenu-end:dir(rtl) {\n    margin-left: 0;\n    margin-right: auto;\n}\n\n.p-megamenu-vertical {\n    display: inline-flex;\n    min-width: 12.5rem;\n    flex-direction: column;\n    align-items: stretch;\n    padding: ").concat(dt('megamenu.vertical.orientation.padding'), ";\n}\n\n.p-megamenu-vertical .p-megamenu-root-list {\n    align-items: stretch;\n    flex-direction: column;\n    gap: ").concat(dt('megamenu.vertical.orientation.gap'), ";\n}\n\n.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {\n    left: 100%;\n    top: 0;\n}\n\n.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay:dir(rtl) {\n    left: auto;\n    right: 100%;\n}\n\n.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon {\n    margin-left: auto;\n}\n\n.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon:dir(rtl) {\n    margin-left: 0;\n    margin-right: auto;\n    transform: rotate(180deg);\n}\n\n.p-megamenu-grid {\n    display: flex;\n}\n\n.p-megamenu-col-2,\n.p-megamenu-col-3,\n.p-megamenu-col-4,\n.p-megamenu-col-6,\n.p-megamenu-col-12 {\n    flex: 0 0 auto;\n    padding: ").concat(dt('megamenu.overlay.gap'), ";\n}\n\n.p-megamenu-col-2 {\n    width: 16.6667%;\n}\n\n.p-megamenu-col-3 {\n    width: 25%;\n}\n\n.p-megamenu-col-4 {\n    width: 33.3333%;\n}\n\n.p-megamenu-col-6 {\n    width: 50%;\n}\n\n.p-megamenu-col-12 {\n    width: 100%;\n}\n\n.p-megamenu-button {\n    display: none;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    width: ").concat(dt('megamenu.mobile.button.size'), ";\n    height: ").concat(dt('megamenu.mobile.button.size'), ";\n    position: relative;\n    color: ").concat(dt('megamenu.mobile.button.color'), ";\n    border: 0 none;\n    background: transparent;\n    border-radius: ").concat(dt('megamenu.mobile.button.border.radius'), ";\n    transition: background ").concat(dt('megamenu.transition.duration'), ", color ").concat(dt('megamenu.transition.duration'), ", outline-color ").concat(dt('megamenu.transition.duration'), ", box-shadow ").concat(dt('megamenu.transition.duration'), ";\n    outline-color: transparent;\n}\n\n.p-megamenu-button:hover {\n    color: ").concat(dt('megamenu.mobile.button.hover.color'), ";\n    background: ").concat(dt('megamenu.mobile.button.hover.background'), ";\n}\n\n.p-megamenu-button:focus-visible {\n    box-shadow: ").concat(dt('megamenu.mobile.button.focus.ring.shadow'), ";\n    outline: ").concat(dt('megamenu.mobile.button.focus.ring.width'), " ").concat(dt('megamenu.mobile.button.focus.ring.style'), " ").concat(dt('megamenu.mobile.button.focus.ring.color'), ";\n    outline-offset: ").concat(dt('megamenu.mobile.button.focus.ring.offset'), ";\n}\n\n.p-megamenu-mobile {\n    display: flex;\n}\n\n.p-megamenu-mobile .p-megamenu-button {\n    display: flex;\n}\n\n.p-megamenu-mobile .p-megamenu-root-list {\n    position: absolute;\n    display: none;\n    flex-direction: column;\n    top: 100%;\n    left: 0;\n    z-index: 1;\n    width: 100%;\n    padding: ").concat(dt('megamenu.submenu.padding'), ";\n    gap: ").concat(dt('megamenu.submenu.gap'), ";\n    background: ").concat(dt('megamenu.overlay.background'), ";\n    border: 1px solid ").concat(dt('megamenu.overlay.border.color'), ";\n    box-shadow: ").concat(dt('megamenu.overlay.shadow'), ";\n}\n\n.p-megamenu-mobile .p-megamenu-root-list:dir(rtl) {\n    left: auto;\n    right: 0;\n}\n\n.p-megamenu-mobile-active .p-megamenu-root-list {\n    display: block;\n}\n\n.p-megamenu-mobile .p-megamenu-root-list .p-megamenu-item {\n    width: 100%;\n    position: static;\n}\n\n.p-megamenu-mobile .p-megamenu-overlay {\n    position: static;\n    border: 0 none;\n    border-radius: 0;\n    box-shadow: none;\n}\n\n.p-megamenu-mobile .p-megamenu-grid {\n    flex-wrap: wrap;\n    overflow: auto;\n    max-height: 90%;\n}\n\n.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon {\n    margin-left: auto;\n    transition: transform 0.2s;\n}\n\n.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon:dir(rtl) {\n    margin-left: 0;\n    margin-right: auto;\n}\n\n.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {\n    transform: rotate(-180deg);\n}\n");
-};
 var inlineStyles = {
-  rootList: function rootList(_ref2) {
-    var props = _ref2.props;
+  rootList: function rootList(_ref) {
+    var props = _ref.props;
     return {
       'max-height': props.scrollHeight,
       overflow: 'auto'
@@ -14,8 +11,8 @@ var inlineStyles = {
   }
 };
 var classes = {
-  root: function root(_ref3) {
-    var instance = _ref3.instance;
+  root: function root(_ref2) {
+    var instance = _ref2.instance;
     return ['p-megamenu p-component', {
       'p-megamenu-mobile': instance.queryMatches,
       'p-megamenu-mobile-active': instance.mobileActive,
@@ -26,16 +23,16 @@ var classes = {
   start: 'p-megamenu-start',
   button: 'p-megamenu-button',
   rootList: 'p-megamenu-root-list',
-  submenuLabel: function submenuLabel(_ref4) {
-    var instance = _ref4.instance,
-      processedItem = _ref4.processedItem;
+  submenuLabel: function submenuLabel(_ref3) {
+    var instance = _ref3.instance,
+      processedItem = _ref3.processedItem;
     return ['p-megamenu-submenu-label', {
       'p-disabled': instance.isItemDisabled(processedItem)
     }];
   },
-  item: function item(_ref5) {
-    var instance = _ref5.instance,
-      processedItem = _ref5.processedItem;
+  item: function item(_ref4) {
+    var instance = _ref4.instance,
+      processedItem = _ref4.processedItem;
     return ['p-megamenu-item', {
       'p-megamenu-item-active': instance.isItemActive(processedItem),
       'p-focus': instance.isItemFocused(processedItem),
@@ -49,9 +46,9 @@ var classes = {
   submenuIcon: 'p-megamenu-submenu-icon',
   overlay: 'p-megamenu-overlay',
   grid: 'p-megamenu-grid',
-  column: function column(_ref6) {
-    var instance = _ref6.instance,
-      processedItem = _ref6.processedItem;
+  column: function column(_ref5) {
+    var instance = _ref5.instance,
+      processedItem = _ref5.processedItem;
     var length = instance.isItemGroup(processedItem) ? processedItem.items.length : 0;
     var columnClass;
     if (instance.$parentInstance.queryMatches) columnClass = 'p-megamenu-col-12';else {
@@ -81,7 +78,7 @@ var classes = {
 };
 var MegaMenuStyle = BaseStyle.extend({
   name: 'megamenu',
-  theme: theme,
+  style: style,
   classes: classes,
   inlineStyles: inlineStyles
 });

package/megamenu/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/megamenu/style/MegaMenuStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-megamenu {\n    position: relative;\n    display: flex;\n    align-items: center;\n    background: ${dt('megamenu.background')};\n    border: 1px solid ${dt('megamenu.border.color')};\n    border-radius: ${dt('megamenu.border.radius')};\n    color: ${dt('megamenu.color')};\n    gap: ${dt('megamenu.gap')};\n}\n\n.p-megamenu-start,\n.p-megamenu-end {\n    display: flex;\n    align-items: center;\n}\n\n.p-megamenu-root-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    outline: 0 none;\n    align-items: center;\n    display: flex;\n    flex-wrap: wrap;\n    gap: ${dt('megamenu.gap')};\n}\n\n.p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content {\n    border-radius: ${dt('megamenu.base.item.border.radius')};\n}\n\n.p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content > .p-megamenu-item-link {\n    padding: ${dt('megamenu.base.item.padding')};\n}\n\n.p-megamenu-item-content {\n    transition: background ${dt('megamenu.transition.duration')}, color ${dt('megamenu.transition.duration')};\n    border-radius: ${dt('megamenu.item.border.radius')};\n    color: ${dt('megamenu.item.color')};\n}\n\n.p-megamenu-item-link {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n    color: inherit;\n    padding: ${dt('megamenu.item.padding')};\n    gap: ${dt('megamenu.item.gap')};\n    user-select: none;\n    outline: 0 none;\n}\n\n.p-megamenu-item-label {\n    line-height: 1;\n}\n\n.p-megamenu-item-icon {\n    color: ${dt('megamenu.item.icon.color')};\n}\n\n.p-megamenu-submenu-icon {\n    color: ${dt('megamenu.submenu.icon.color')};\n    font-size: ${dt('megamenu.submenu.icon.size')};\n    width: ${dt('megamenu.submenu.icon.size')};\n    height: ${dt('megamenu.submenu.icon.size')};\n}\n\n.p-megamenu-item.p-focus > .p-megamenu-item-content {\n    color: ${dt('megamenu.item.focus.color')};\n    background: ${dt('megamenu.item.focus.background')};\n}\n\n.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-item-icon {\n    color: ${dt('megamenu.item.icon.focus.color')};\n}\n\n.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-submenu-icon {\n    color: ${dt('megamenu.submenu.icon.focus.color')};\n}\n\n.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover {\n    color: ${dt('megamenu.item.focus.color')};\n    background: ${dt('megamenu.item.focus.background')};\n}\n\n.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-item-icon {\n    color: ${dt('megamenu.item.icon.focus.color')};\n}\n\n.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-submenu-icon {\n    color: ${dt('megamenu.submenu.icon.focus.color')};\n}\n\n.p-megamenu-item-active > .p-megamenu-item-content {\n    color: ${dt('megamenu.item.active.color')};\n    background: ${dt('megamenu.item.active.background')};\n}\n\n.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-item-icon {\n    color: ${dt('megamenu.item.icon.active.color')};\n}\n\n.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {\n    color: ${dt('megamenu.submenu.icon.active.color')};\n}\n\n.p-megamenu-overlay {\n    display: none;\n    position: absolute;\n    width: auto;\n    z-index: 1;\n    left: 0;\n    min-width: 100%;\n    padding: ${dt('megamenu.overlay.padding')};\n    background: ${dt('megamenu.overlay.background')};\n    color: ${dt('megamenu.overlay.color')};\n    border: 1px solid ${dt('megamenu.overlay.border.color')};\n    border-radius: ${dt('megamenu.overlay.border.radius')};\n    box-shadow: ${dt('megamenu.overlay.shadow')};\n}\n\n.p-megamenu-overlay:dir(rtl) {\n    left: auto;\n    right: 0;\n}\n\n.p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {\n    display: block;\n}\n\n.p-megamenu-submenu {\n    margin: 0;\n    list-style: none;\n    padding: ${dt('megamenu.submenu.padding')};\n    min-width: 12.5rem;\n    display: flex;\n    flex-direction: column;\n    gap: ${dt('megamenu.submenu.gap')}\n}\n\n.p-megamenu-submenu-label {\n    padding: ${dt('megamenu.submenu.label.padding')};\n    color: ${dt('megamenu.submenu.label.color')};\n    font-weight: ${dt('megamenu.submenu.label.font.weight')};\n    background: ${dt('megamenu.submenu.label.background')};\n}\n\n.p-megamenu-separator {\n    border-block-start: 1px solid ${dt('megamenu.separator.border.color')};\n}\n\n.p-megamenu-horizontal {\n    align-items: center;\n    padding: ${dt('megamenu.horizontal.orientation.padding')};\n}\n\n.p-megamenu-horizontal .p-megamenu-root-list {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: ${dt('megamenu.horizontal.orientation.gap')};\n}\n\n.p-megamenu-horizontal .p-megamenu-end {\n    margin-left: auto;\n    align-self: center;\n}\n\n.p-megamenu-horizontal .p-megamenu-end:dir(rtl) {\n    margin-left: 0;\n    margin-right: auto;\n}\n\n.p-megamenu-vertical {\n    display: inline-flex;\n    min-width: 12.5rem;\n    flex-direction: column;\n    align-items: stretch;\n    padding: ${dt('megamenu.vertical.orientation.padding')};\n}\n\n.p-megamenu-vertical .p-megamenu-root-list {\n    align-items: stretch;\n    flex-direction: column;\n    gap: ${dt('megamenu.vertical.orientation.gap')};\n}\n\n.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {\n    left: 100%;\n    top: 0;\n}\n\n.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay:dir(rtl) {\n    left: auto;\n    right: 100%;\n}\n\n.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon {\n    margin-left: auto;\n}\n\n.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon:dir(rtl) {\n    margin-left: 0;\n    margin-right: auto;\n    transform: rotate(180deg);\n}\n\n.p-megamenu-grid {\n    display: flex;\n}\n\n.p-megamenu-col-2,\n.p-megamenu-col-3,\n.p-megamenu-col-4,\n.p-megamenu-col-6,\n.p-megamenu-col-12 {\n    flex: 0 0 auto;\n    padding: ${dt('megamenu.overlay.gap')};\n}\n\n.p-megamenu-col-2 {\n    width: 16.6667%;\n}\n\n.p-megamenu-col-3 {\n    width: 25%;\n}\n\n.p-megamenu-col-4 {\n    width: 33.3333%;\n}\n\n.p-megamenu-col-6 {\n    width: 50%;\n}\n\n.p-megamenu-col-12 {\n    width: 100%;\n}\n\n.p-megamenu-button {\n    display: none;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    width: ${dt('megamenu.mobile.button.size')};\n    height: ${dt('megamenu.mobile.button.size')};\n    position: relative;\n    color: ${dt('megamenu.mobile.button.color')};\n    border: 0 none;\n    background: transparent;\n    border-radius: ${dt('megamenu.mobile.button.border.radius')};\n    transition: background ${dt('megamenu.transition.duration')}, color ${dt('megamenu.transition.duration')}, outline-color ${dt('megamenu.transition.duration')}, box-shadow ${dt('megamenu.transition.duration')};\n    outline-color: transparent;\n}\n\n.p-megamenu-button:hover {\n    color: ${dt('megamenu.mobile.button.hover.color')};\n    background: ${dt('megamenu.mobile.button.hover.background')};\n}\n\n.p-megamenu-button:focus-visible {\n    box-shadow: ${dt('megamenu.mobile.button.focus.ring.shadow')};\n    outline: ${dt('megamenu.mobile.button.focus.ring.width')} ${dt('megamenu.mobile.button.focus.ring.style')} ${dt('megamenu.mobile.button.focus.ring.color')};\n    outline-offset: ${dt('megamenu.mobile.button.focus.ring.offset')};\n}\n\n.p-megamenu-mobile {\n    display: flex;\n}\n\n.p-megamenu-mobile .p-megamenu-button {\n    display: flex;\n}\n\n.p-megamenu-mobile .p-megamenu-root-list {\n    position: absolute;\n    display: none;\n    flex-direction: column;\n    top: 100%;\n    left: 0;\n    z-index: 1;\n    width: 100%;\n    padding: ${dt('megamenu.submenu.padding')};\n    gap: ${dt('megamenu.submenu.gap')};\n    background: ${dt('megamenu.overlay.background')};\n    border: 1px solid ${dt('megamenu.overlay.border.color')};\n    box-shadow: ${dt('megamenu.overlay.shadow')};\n}\n\n.p-megamenu-mobile .p-megamenu-root-list:dir(rtl) {\n    left: auto;\n    right: 0;\n}\n\n.p-megamenu-mobile-active .p-megamenu-root-list {\n    display: block;\n}\n\n.p-megamenu-mobile .p-megamenu-root-list .p-megamenu-item {\n    width: 100%;\n    position: static;\n}\n\n.p-megamenu-mobile .p-megamenu-overlay {\n    position: static;\n    border: 0 none;\n    border-radius: 0;\n    box-shadow: none;\n}\n\n.p-megamenu-mobile .p-megamenu-grid {\n    flex-wrap: wrap;\n    overflow: auto;\n    max-height: 90%;\n}\n\n.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon {\n    margin-left: auto;\n    transition: transform 0.2s;\n}\n\n.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon:dir(rtl) {\n    margin-left: 0;\n    margin-right: auto;\n}\n\n.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {\n    transform: rotate(-180deg);\n}\n`;\n\nconst inlineStyles = {\n    rootList: ({ props }) => ({ 'max-height': props.scrollHeight, overflow: 'auto' })\n};\n\nconst classes = {\n    root: ({ instance }) => [\n        'p-megamenu p-component',\n        {\n            'p-megamenu-mobile': instance.queryMatches,\n            'p-megamenu-mobile-active': instance.mobileActive,\n            'p-megamenu-horizontal': instance.horizontal,\n            'p-megamenu-vertical': instance.vertical\n        }\n    ],\n    start: 'p-megamenu-start',\n    button: 'p-megamenu-button',\n    rootList: 'p-megamenu-root-list',\n    submenuLabel: ({ instance, processedItem }) => [\n        'p-megamenu-submenu-label',\n        {\n            'p-disabled': instance.isItemDisabled(processedItem)\n        }\n    ],\n    item: ({ instance, processedItem }) => [\n        'p-megamenu-item',\n        {\n            'p-megamenu-item-active': instance.isItemActive(processedItem),\n            'p-focus': instance.isItemFocused(processedItem),\n            'p-disabled': instance.isItemDisabled(processedItem)\n        }\n    ],\n    itemContent: 'p-megamenu-item-content',\n    itemLink: 'p-megamenu-item-link',\n    itemIcon: 'p-megamenu-item-icon',\n    itemLabel: 'p-megamenu-item-label',\n    submenuIcon: 'p-megamenu-submenu-icon',\n    overlay: 'p-megamenu-overlay',\n    grid: 'p-megamenu-grid',\n    column: ({ instance, processedItem }) => {\n        let length = instance.isItemGroup(processedItem) ? processedItem.items.length : 0;\n        let columnClass;\n\n        if (instance.$parentInstance.queryMatches) columnClass = 'p-megamenu-col-12';\n        else {\n            switch (length) {\n                case 2:\n                    columnClass = 'p-megamenu-col-6';\n                    break;\n\n                case 3:\n                    columnClass = 'p-megamenu-col-4';\n                    break;\n\n                case 4:\n                    columnClass = 'p-megamenu-col-3';\n                    break;\n\n                case 6:\n                    columnClass = 'p-megamenu-col-2';\n                    break;\n\n                default:\n                    columnClass = 'p-megamenu-col-12';\n                    break;\n            }\n        }\n\n        return columnClass;\n    },\n    submenu: 'p-megamenu-submenu',\n    separator: 'p-megamenu-separator',\n    end: 'p-megamenu-end'\n};\n\nexport default BaseStyle.extend({\n    name: 'megamenu',\n    theme,\n    classes,\n    inlineStyles\n});\n"],"names":["theme","_ref","dt","concat","inlineStyles","rootList","_ref2","props","scrollHeight","overflow","classes","root","_ref3","instance","queryMatches","mobileActive","horizontal","vertical","start","button","submenuLabel","_ref4","processedItem","isItemDisabled","item","_ref5","isItemActive","isItemFocused","itemContent","itemLink","itemIcon","itemLabel","submenuIcon","overlay","grid","column","_ref6","length","isItemGroup","items","columnClass","$parentInstance","submenu","separator","end","BaseStyle","extend","name"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../src/megamenu/style/MegaMenuStyle.js"],"sourcesContent":["import { style } from '@primeuix/styles/megamenu';\nimport BaseStyle from '@primevue/core/base/style';\n\nconst inlineStyles = {\n    rootList: ({ props }) => ({ 'max-height': props.scrollHeight, overflow: 'auto' })\n};\n\nconst classes = {\n    root: ({ instance }) => [\n        'p-megamenu p-component',\n        {\n            'p-megamenu-mobile': instance.queryMatches,\n            'p-megamenu-mobile-active': instance.mobileActive,\n            'p-megamenu-horizontal': instance.horizontal,\n            'p-megamenu-vertical': instance.vertical\n        }\n    ],\n    start: 'p-megamenu-start',\n    button: 'p-megamenu-button',\n    rootList: 'p-megamenu-root-list',\n    submenuLabel: ({ instance, processedItem }) => [\n        'p-megamenu-submenu-label',\n        {\n            'p-disabled': instance.isItemDisabled(processedItem)\n        }\n    ],\n    item: ({ instance, processedItem }) => [\n        'p-megamenu-item',\n        {\n            'p-megamenu-item-active': instance.isItemActive(processedItem),\n            'p-focus': instance.isItemFocused(processedItem),\n            'p-disabled': instance.isItemDisabled(processedItem)\n        }\n    ],\n    itemContent: 'p-megamenu-item-content',\n    itemLink: 'p-megamenu-item-link',\n    itemIcon: 'p-megamenu-item-icon',\n    itemLabel: 'p-megamenu-item-label',\n    submenuIcon: 'p-megamenu-submenu-icon',\n    overlay: 'p-megamenu-overlay',\n    grid: 'p-megamenu-grid',\n    column: ({ instance, processedItem }) => {\n        let length = instance.isItemGroup(processedItem) ? processedItem.items.length : 0;\n        let columnClass;\n\n        if (instance.$parentInstance.queryMatches) columnClass = 'p-megamenu-col-12';\n        else {\n            switch (length) {\n                case 2:\n                    columnClass = 'p-megamenu-col-6';\n                    break;\n\n                case 3:\n                    columnClass = 'p-megamenu-col-4';\n                    break;\n\n                case 4:\n                    columnClass = 'p-megamenu-col-3';\n                    break;\n\n                case 6:\n                    columnClass = 'p-megamenu-col-2';\n                    break;\n\n                default:\n                    columnClass = 'p-megamenu-col-12';\n                    break;\n            }\n        }\n\n        return columnClass;\n    },\n    submenu: 'p-megamenu-submenu',\n    separator: 'p-megamenu-separator',\n    end: 'p-megamenu-end'\n};\n\nexport default BaseStyle.extend({\n    name: 'megamenu',\n    style,\n    classes,\n    inlineStyles\n});\n"],"names":["inlineStyles","rootList","_ref","props","scrollHeight","overflow","classes","root","_ref2","instance","queryMatches","mobileActive","horizontal","vertical","start","button","submenuLabel","_ref3","processedItem","isItemDisabled","item","_ref4","isItemActive","isItemFocused","itemContent","itemLink","itemIcon","itemLabel","submenuIcon","overlay","grid","column","_ref5","length","isItemGroup","items","columnClass","$parentInstance","submenu","separator","end","BaseStyle","extend","name","style"],"mappings":"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"}

package/menu/Menu.vue

@@ -1,13 +1,13 @@
 <template>
     <Portal :appendTo="appendTo" :disabled="!popup">
         <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
-            <div v-if="popup ? overlayVisible : true" :ref="containerRef" :id="id" :class="cx('root')" @click="onOverlayClick" v-bind="ptmi('root')">
+            <div v-if="popup ? overlayVisible : true" :ref="containerRef" :id="$id" :class="cx('root')" @click="onOverlayClick" v-bind="ptmi('root')">
                 <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
                     <slot name="start"></slot>
                 </div>
                 <ul
                     :ref="listRef"
-                    :id="id + '_list'"
+                    :id="$id + '_list'"
                     :class="cx('list')"
                     role="menu"
                     :tabindex="tabindex"
@@ -21,14 +21,14 @@
                 >
                     <template v-for="(item, i) of model" :key="label(item) + i.toString()">
                         <template v-if="item.items && visible(item) && !item.separator">
-                            <li v-if="item.items" :id="id + '_' + i" :class="[cx('submenuLabel'), item.class]" role="none" v-bind="ptm('submenuLabel')">
+                            <li v-if="item.items" :id="$id + '_' + i" :class="[cx('submenuLabel'), item.class]" role="none" v-bind="ptm('submenuLabel')">
                                 <!--TODO: submenuheader deprecated since v4.0. Use submenulabel-->
                                 <slot :name="$slots.submenulabel ? 'submenulabel' : 'submenuheader'" :item="item">{{ label(item) }}</slot>
                             </li>
                             <template v-for="(child, j) of item.items" :key="child.label + i + '_' + j">
                                 <PVMenuitem
                                     v-if="visible(child) && !child.separator"
-                                    :id="id + '_' + i + '_' + j"
+                                    :id="$id + '_' + i + '_' + j"
                                     :item="child"
                                     :templates="$slots"
                                     :focusedOptionId="focusedOptionId"
@@ -44,7 +44,7 @@
                         <PVMenuitem
                             v-else
                             :key="label(item) + i.toString()"
-                            :id="id + '_' + i"
+                            :id="$id + '_' + i"
                             :item="item"
                             :index="i"
                             :templates="$slots"
@@ -65,9 +65,9 @@
 </template>
 
 <script>
-import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
-import { focus, find, findSingle, addStyle, absolutePosition, getOuterWidth, isTouchDevice } from '@primeuix/utils/dom';
+import { absolutePosition, addStyle, find, findSingle, focus, getOuterWidth, isTouchDevice } from '@primeuix/utils/dom';
 import { ZIndex } from '@primeuix/utils/zindex';
+import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import BaseMenu from './BaseMenu.vue';
@@ -80,18 +80,12 @@ export default {
     emits: ['show', 'hide', 'focus', 'blur'],
     data() {
         return {
-            id: this.$attrs.id,
             overlayVisible: false,
             focused: false,
             focusedOptionIndex: -1,
             selectedOptionIndex: -1
         };
     },
-    watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
-    },
     target: null,
     outsideClickListener: null,
     scrollHandler: null,
@@ -99,8 +93,6 @@ export default {
     container: null,
     list: null,
     mounted() {
-        this.id = this.id || UniqueComponentId();
-
         if (!this.popup) {
             this.bindResizeListener();
             this.bindOutsideClickListener();
@@ -315,12 +307,12 @@ export default {
                     }
                 };
 
-                document.addEventListener('click', this.outsideClickListener);
+                document.addEventListener('click', this.outsideClickListener, true);
             }
         },
         unbindOutsideClickListener() {
             if (this.outsideClickListener) {
-                document.removeEventListener('click', this.outsideClickListener);
+                document.removeEventListener('click', this.outsideClickListener, true);
                 this.outsideClickListener = null;
             }
         },

package/menu/index.d.ts

@@ -330,6 +330,16 @@ export interface MenuEmitsOptions {
      * @param {Event} event - Browser event.
      */
     blur(event: Event): void;
+    /**
+     * Callback to invoke when the menu popup is shown.
+     * @remarks Emitted when {@link MenuProps.popup} is true.
+     */
+    show(): void;
+    /**
+     * Callback to invoke when the menu popup is hidden.
+     * @remarks Emitted when {@link MenuProps.popup} is true.
+     */
+    hide(): void;
 }
 
 export declare type MenuEmits = EmitFn<MenuEmitsOptions>;

package/menu/index.mjs

@@ -1,13 +1,13 @@
-import { UniqueComponentId, ConnectedOverlayScrollHandler } from '@primevue/core/utils';
-import { focus, find, findSingle, addStyle, absolutePosition, getOuterWidth, isTouchDevice } from '@primeuix/utils/dom';
+import { isTouchDevice, absolutePosition, getOuterWidth, addStyle, focus, find, findSingle } from '@primeuix/utils/dom';
 import { ZIndex } from '@primeuix/utils/zindex';
+import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import BaseComponent from '@primevue/core/basecomponent';
 import MenuStyle from 'primevue/menu/style';
 import { resolve } from '@primeuix/utils/object';
 import Ripple from 'primevue/ripple';
-import { mergeProps, resolveDirective, openBlock, createElementBlock, createElementVNode, withDirectives, createBlock, resolveDynamicComponent, normalizeClass, createCommentVNode, toDisplayString, resolveComponent, withCtx, createVNode, Transition, renderSlot, Fragment, renderList, createTextVNode } from 'vue';
+import { mergeProps, resolveDirective, createElementBlock, createCommentVNode, openBlock, createElementVNode, withDirectives, createBlock, resolveDynamicComponent, normalizeClass, toDisplayString, resolveComponent, withCtx, createVNode, Transition, renderSlot, Fragment, renderList, createTextVNode } from 'vue';
 
 var script$2 = {
   name: 'BaseMenu',
@@ -194,18 +194,12 @@ var script = {
   emits: ['show', 'hide', 'focus', 'blur'],
   data: function data() {
     return {
-      id: this.$attrs.id,
       overlayVisible: false,
       focused: false,
       focusedOptionIndex: -1,
       selectedOptionIndex: -1
     };
   },
-  watch: {
-    '$attrs.id': function $attrsId(newValue) {
-      this.id = newValue || UniqueComponentId();
-    }
-  },
   target: null,
   outsideClickListener: null,
   scrollHandler: null,
@@ -213,7 +207,6 @@ var script = {
   container: null,
   list: null,
   mounted: function mounted() {
-    this.id = this.id || UniqueComponentId();
     if (!this.popup) {
       this.bindResizeListener();
       this.bindOutsideClickListener();
@@ -404,12 +397,12 @@ var script = {
             _this.focusedOptionIndex = -1;
           }
         };
-        document.addEventListener('click', this.outsideClickListener);
+        document.addEventListener('click', this.outsideClickListener, true);
       }
     },
     unbindOutsideClickListener: function unbindOutsideClickListener() {
       if (this.outsideClickListener) {
-        document.removeEventListener('click', this.outsideClickListener);
+        document.removeEventListener('click', this.outsideClickListener, true);
         this.outsideClickListener = null;
       }
     },
@@ -500,7 +493,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           return [(_ctx.popup ? $data.overlayVisible : true) ? (openBlock(), createElementBlock("div", mergeProps({
             key: 0,
             ref: $options.containerRef,
-            id: $data.id,
+            id: _ctx.$id,
             "class": _ctx.cx('root'),
             onClick: _cache[3] || (_cache[3] = function () {
               return $options.onOverlayClick && $options.onOverlayClick.apply($options, arguments);
@@ -510,7 +503,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             "class": _ctx.cx('start')
           }, _ctx.ptm('start')), [renderSlot(_ctx.$slots, "start")], 16)) : createCommentVNode("", true), createElementVNode("ul", mergeProps({
             ref: $options.listRef,
-            id: $data.id + '_list',
+            id: _ctx.$id + '_list',
             "class": _ctx.cx('list'),
             role: "menu",
             tabindex: _ctx.tabindex,
@@ -533,7 +526,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               key: 0
             }, [item.items ? (openBlock(), createElementBlock("li", mergeProps({
               key: 0,
-              id: $data.id + '_' + i,
+              id: _ctx.$id + '_' + i,
               "class": [_ctx.cx('submenuLabel'), item["class"]],
               role: "none",
               ref_for: true
@@ -546,7 +539,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 key: child.label + i + '_' + j
               }, [$options.visible(child) && !child.separator ? (openBlock(), createBlock(_component_PVMenuitem, {
                 key: 0,
-                id: $data.id + '_' + i + '_' + j,
+                id: _ctx.$id + '_' + i + '_' + j,
                 item: child,
                 templates: _ctx.$slots,
                 focusedOptionId: $options.focusedOptionId,
@@ -569,7 +562,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               ref_for: true
             }, _ctx.ptm('separator')), null, 16)) : (openBlock(), createBlock(_component_PVMenuitem, {
               key: $options.label(item) + i.toString(),
-              id: $data.id + '_' + i,
+              id: _ctx.$id + '_' + i,
               item: item,
               index: i,
               templates: _ctx.$slots,