primevue 4.0.7 → 4.1.0

package/contextmenu/style/index.mjs

@@ -2,14 +2,19 @@ import BaseStyle from '@primevue/core/base/style';
 
 var theme = function theme(_ref) {
   var dt = _ref.dt;
-  return "\n.p-contextmenu {\n    background: ".concat(dt('contextmenu.background'), ";\n    color: ").concat(dt('contextmenu.color'), ";\n    border: 1px solid ").concat(dt('contextmenu.border.color'), ";\n    border-radius: ").concat(dt('contextmenu.border.radius'), ";\n    box-shadow: ").concat(dt('contextmenu.shadow'), ";\n    min-width: 12.5rem;\n}\n\n.p-contextmenu-root-list,\n.p-contextmenu-submenu {\n    margin: 0;\n    padding: ").concat(dt('contextmenu.list.padding'), ";\n    list-style: none;\n    outline: 0 none;\n    display: flex;\n    flex-direction: column;\n    gap: ").concat(dt('contextmenu.list.gap'), ";\n}\n\n.p-contextmenu-submenu {\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    min-width: 100%;\n    z-index: 1;\n    background: ").concat(dt('contextmenu.background'), ";\n    color: ").concat(dt('contextmenu.color'), ";\n    border: 1px solid ").concat(dt('contextmenu.border.color'), ";\n    border-radius: ").concat(dt('contextmenu.border.radius'), ";\n    box-shadow: ").concat(dt('contextmenu.shadow'), ";\n}\n\n.p-contextmenu-item {\n    position: relative;\n}\n\n.p-contextmenu-item-content {\n    transition: background ").concat(dt('contextmenu.transition.duration'), ", color ").concat(dt('contextmenu.transition.duration'), ";\n    border-radius: ").concat(dt('contextmenu.item.border.radius'), ";\n    color: ").concat(dt('contextmenu.item.color'), ";\n}\n\n.p-contextmenu-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('contextmenu.item.padding'), ";\n    gap: ").concat(dt('contextmenu.item.gap'), ";\n    user-select: none;\n}\n\n.p-contextmenu-item-label {\n    line-height: 1;\n}\n\n.p-contextmenu-item-icon {\n    color: ").concat(dt('contextmenu.item.icon.color'), ";\n}\n\n.p-contextmenu-submenu-icon {\n    color: ").concat(dt('contextmenu.submenu.icon.color'), ";\n    margin-left: auto;\n    font-size: ").concat(dt('contextmenu.submenu.icon.size'), ";\n    width: ").concat(dt('contextmenu.submenu.icon.size'), ";\n    height: ").concat(dt('contextmenu.submenu.icon.size'), ";\n}\n\n.p-contextmenu-item.p-focus > .p-contextmenu-item-content {\n    color: ").concat(dt('contextmenu.item.focus.color'), ";\n    background: ").concat(dt('contextmenu.item.focus.background'), ";\n}\n\n.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-item-icon {\n    color: ").concat(dt('contextmenu.item.icon.focus.color'), ";\n}\n\n.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-submenu-icon {\n    color: ").concat(dt('contextmenu.submenu.icon.focus.color'), ";\n}\n\n.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover {\n    color: ").concat(dt('contextmenu.item.focus.color'), ";\n    background: ").concat(dt('contextmenu.item.focus.background'), ";\n}\n\n.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-item-icon {\n    color: ").concat(dt('contextmenu.item.icon.focus.color'), ";\n}\n\n.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-submenu-icon {\n    color: ").concat(dt('contextmenu.submenu.icon.focus.color'), ";\n}\n\n.p-contextmenu-item-active > .p-contextmenu-item-content {\n    color: ").concat(dt('contextmenu.item.active.color'), ";\n    background: ").concat(dt('contextmenu.item.active.background'), ";\n}\n\n.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-item-icon {\n    color: ").concat(dt('contextmenu.item.icon.active.color'), ";\n}\n\n.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {\n    color: ").concat(dt('contextmenu.submenu.icon.active.color'), ";\n}\n\n.p-contextmenu-separator {\n    border-top: 1px solid  ").concat(dt('contextmenu.separator.border.color'), ";\n}\n\n.p-contextmenu-enter-from,\n.p-contextmenu-leave-active {\n    opacity: 0;\n}\n\n.p-contextmenu-enter-active {\n    transition: opacity 250ms;\n}\n");
+  return "\n.p-contextmenu {\n    background: ".concat(dt('contextmenu.background'), ";\n    color: ").concat(dt('contextmenu.color'), ";\n    border: 1px solid ").concat(dt('contextmenu.border.color'), ";\n    border-radius: ").concat(dt('contextmenu.border.radius'), ";\n    box-shadow: ").concat(dt('contextmenu.shadow'), ";\n    min-width: 12.5rem;\n}\n\n.p-contextmenu-root-list,\n.p-contextmenu-submenu {\n    margin: 0;\n    padding: ").concat(dt('contextmenu.list.padding'), ";\n    list-style: none;\n    outline: 0 none;\n    display: flex;\n    flex-direction: column;\n    gap: ").concat(dt('contextmenu.list.gap'), ";\n}\n\n.p-contextmenu-submenu {\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    min-width: 100%;\n    z-index: 1;\n    background: ").concat(dt('contextmenu.background'), ";\n    color: ").concat(dt('contextmenu.color'), ";\n    border: 1px solid ").concat(dt('contextmenu.border.color'), ";\n    border-radius: ").concat(dt('contextmenu.border.radius'), ";\n    box-shadow: ").concat(dt('contextmenu.shadow'), ";\n}\n\n.p-contextmenu-item {\n    position: relative;\n}\n\n.p-contextmenu-item-content {\n    transition: background ").concat(dt('contextmenu.transition.duration'), ", color ").concat(dt('contextmenu.transition.duration'), ";\n    border-radius: ").concat(dt('contextmenu.item.border.radius'), ";\n    color: ").concat(dt('contextmenu.item.color'), ";\n}\n\n.p-contextmenu-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('contextmenu.item.padding'), ";\n    gap: ").concat(dt('contextmenu.item.gap'), ";\n    user-select: none;\n}\n\n.p-contextmenu-item-label {\n    line-height: 1;\n}\n\n.p-contextmenu-item-icon {\n    color: ").concat(dt('contextmenu.item.icon.color'), ";\n}\n\n.p-contextmenu-submenu-icon {\n    color: ").concat(dt('contextmenu.submenu.icon.color'), ";\n    margin-left: auto;\n    font-size: ").concat(dt('contextmenu.submenu.icon.size'), ";\n    width: ").concat(dt('contextmenu.submenu.icon.size'), ";\n    height: ").concat(dt('contextmenu.submenu.icon.size'), ";\n}\n\n.p-contextmenu-item.p-focus > .p-contextmenu-item-content {\n    color: ").concat(dt('contextmenu.item.focus.color'), ";\n    background: ").concat(dt('contextmenu.item.focus.background'), ";\n}\n\n.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-item-icon {\n    color: ").concat(dt('contextmenu.item.icon.focus.color'), ";\n}\n\n.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-submenu-icon {\n    color: ").concat(dt('contextmenu.submenu.icon.focus.color'), ";\n}\n\n.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover {\n    color: ").concat(dt('contextmenu.item.focus.color'), ";\n    background: ").concat(dt('contextmenu.item.focus.background'), ";\n}\n\n.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-item-icon {\n    color: ").concat(dt('contextmenu.item.icon.focus.color'), ";\n}\n\n.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-submenu-icon {\n    color: ").concat(dt('contextmenu.submenu.icon.focus.color'), ";\n}\n\n.p-contextmenu-item-active > .p-contextmenu-item-content {\n    color: ").concat(dt('contextmenu.item.active.color'), ";\n    background: ").concat(dt('contextmenu.item.active.background'), ";\n}\n\n.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-item-icon {\n    color: ").concat(dt('contextmenu.item.icon.active.color'), ";\n}\n\n.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {\n    color: ").concat(dt('contextmenu.submenu.icon.active.color'), ";\n}\n\n.p-contextmenu-separator {\n    border-top: 1px solid  ").concat(dt('contextmenu.separator.border.color'), ";\n}\n\n.p-contextmenu-enter-from,\n.p-contextmenu-leave-active {\n    opacity: 0;\n}\n\n.p-contextmenu-enter-active {\n    transition: opacity 250ms;\n}\n\n.p-contextmenu-mobile {\n    position: relative;\n}\n\n.p-contextmenu-mobile .p-contextmenu-button {\n    display: flex;\n}\n\n.p-contextmenu-mobile .p-contextmenu-root-list .p-contextmenu-item {\n    position: static;\n}\n\n.p-contextmenu-mobile .p-contextmenu-root-list .p-contextmenu-separator {\n    border-top: 1px solid ").concat(dt('contextmenu.separator.border.color'), ";\n}\n\n.p-contextmenu-mobile .p-contextmenu-root-list > .p-contextmenu-item > .p-contextmenu-item-content .p-contextmenu-submenu-icon {\n    margin-left: auto;\n    transition: transform 0.2s;\n}\n\n.p-contextmenu-mobile .p-contextmenu-root-list > .p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {\n    transform: rotate(-90deg);\n}\n\n.p-contextmenu-mobile .p-contextmenu-submenu .p-contextmenu-submenu-icon {\n    transition: transform 0.2s;\n    transform: rotate(90deg);\n}\n\n.p-contextmenu-mobile  .p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {\n    transform: rotate(-90deg);\n}\n\n.p-contextmenu-mobile .p-contextmenu-submenu {\n    position: static;\n    box-shadow: none;\n    border: 0 none;\n    padding-left: ").concat(dt('contextmenu.submenu.mobile.indent'), ";\n}\n");
 };
 var classes = {
-  root: 'p-contextmenu p-component',
+  root: function root(_ref2) {
+    var instance = _ref2.instance;
+    return ['p-contextmenu p-component', {
+      'p-contextmenu-mobile': instance.queryMatches
+    }];
+  },
   rootList: 'p-contextmenu-root-list',
-  item: function item(_ref2) {
-    var instance = _ref2.instance,
-      processedItem = _ref2.processedItem;
+  item: function item(_ref3) {
+    var instance = _ref3.instance,
+      processedItem = _ref3.processedItem;
     return ['p-contextmenu-item', {
       'p-contextmenu-item-active': instance.isItemActive(processedItem),
       'p-focus': instance.isItemFocused(processedItem),

package/contextmenu/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/contextmenu/style/ContextMenuStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-contextmenu {\n    background: ${dt('contextmenu.background')};\n    color: ${dt('contextmenu.color')};\n    border: 1px solid ${dt('contextmenu.border.color')};\n    border-radius: ${dt('contextmenu.border.radius')};\n    box-shadow: ${dt('contextmenu.shadow')};\n    min-width: 12.5rem;\n}\n\n.p-contextmenu-root-list,\n.p-contextmenu-submenu {\n    margin: 0;\n    padding: ${dt('contextmenu.list.padding')};\n    list-style: none;\n    outline: 0 none;\n    display: flex;\n    flex-direction: column;\n    gap: ${dt('contextmenu.list.gap')};\n}\n\n.p-contextmenu-submenu {\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    min-width: 100%;\n    z-index: 1;\n    background: ${dt('contextmenu.background')};\n    color: ${dt('contextmenu.color')};\n    border: 1px solid ${dt('contextmenu.border.color')};\n    border-radius: ${dt('contextmenu.border.radius')};\n    box-shadow: ${dt('contextmenu.shadow')};\n}\n\n.p-contextmenu-item {\n    position: relative;\n}\n\n.p-contextmenu-item-content {\n    transition: background ${dt('contextmenu.transition.duration')}, color ${dt('contextmenu.transition.duration')};\n    border-radius: ${dt('contextmenu.item.border.radius')};\n    color: ${dt('contextmenu.item.color')};\n}\n\n.p-contextmenu-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('contextmenu.item.padding')};\n    gap: ${dt('contextmenu.item.gap')};\n    user-select: none;\n}\n\n.p-contextmenu-item-label {\n    line-height: 1;\n}\n\n.p-contextmenu-item-icon {\n    color: ${dt('contextmenu.item.icon.color')};\n}\n\n.p-contextmenu-submenu-icon {\n    color: ${dt('contextmenu.submenu.icon.color')};\n    margin-left: auto;\n    font-size: ${dt('contextmenu.submenu.icon.size')};\n    width: ${dt('contextmenu.submenu.icon.size')};\n    height: ${dt('contextmenu.submenu.icon.size')};\n}\n\n.p-contextmenu-item.p-focus > .p-contextmenu-item-content {\n    color: ${dt('contextmenu.item.focus.color')};\n    background: ${dt('contextmenu.item.focus.background')};\n}\n\n.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-item-icon {\n    color: ${dt('contextmenu.item.icon.focus.color')};\n}\n\n.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-submenu-icon {\n    color: ${dt('contextmenu.submenu.icon.focus.color')};\n}\n\n.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover {\n    color: ${dt('contextmenu.item.focus.color')};\n    background: ${dt('contextmenu.item.focus.background')};\n}\n\n.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-item-icon {\n    color: ${dt('contextmenu.item.icon.focus.color')};\n}\n\n.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-submenu-icon {\n    color: ${dt('contextmenu.submenu.icon.focus.color')};\n}\n\n.p-contextmenu-item-active > .p-contextmenu-item-content {\n    color: ${dt('contextmenu.item.active.color')};\n    background: ${dt('contextmenu.item.active.background')};\n}\n\n.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-item-icon {\n    color: ${dt('contextmenu.item.icon.active.color')};\n}\n\n.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {\n    color: ${dt('contextmenu.submenu.icon.active.color')};\n}\n\n.p-contextmenu-separator {\n    border-top: 1px solid  ${dt('contextmenu.separator.border.color')};\n}\n\n.p-contextmenu-enter-from,\n.p-contextmenu-leave-active {\n    opacity: 0;\n}\n\n.p-contextmenu-enter-active {\n    transition: opacity 250ms;\n}\n`;\n\nconst classes = {\n    root: 'p-contextmenu p-component',\n    rootList: 'p-contextmenu-root-list',\n    item: ({ instance, processedItem }) => [\n        'p-contextmenu-item',\n        {\n            'p-contextmenu-item-active': instance.isItemActive(processedItem),\n            'p-focus': instance.isItemFocused(processedItem),\n            'p-disabled': instance.isItemDisabled(processedItem)\n        }\n    ],\n    itemContent: 'p-contextmenu-item-content',\n    itemLink: 'p-contextmenu-item-link',\n    itemIcon: 'p-contextmenu-item-icon',\n    itemLabel: 'p-contextmenu-item-label',\n    submenuIcon: 'p-contextmenu-submenu-icon',\n    submenu: 'p-contextmenu-submenu',\n    separator: 'p-contextmenu-separator'\n};\n\nexport default BaseStyle.extend({\n    name: 'contextmenu',\n    theme,\n    classes\n});\n"],"names":["theme","_ref","dt","concat","classes","root","rootList","item","_ref2","instance","processedItem","isItemActive","isItemFocused","isItemDisabled","itemContent","itemLink","itemIcon","itemLabel","submenuIcon","submenu","separator","BaseStyle","extend","name"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../src/contextmenu/style/ContextMenuStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-contextmenu {\n    background: ${dt('contextmenu.background')};\n    color: ${dt('contextmenu.color')};\n    border: 1px solid ${dt('contextmenu.border.color')};\n    border-radius: ${dt('contextmenu.border.radius')};\n    box-shadow: ${dt('contextmenu.shadow')};\n    min-width: 12.5rem;\n}\n\n.p-contextmenu-root-list,\n.p-contextmenu-submenu {\n    margin: 0;\n    padding: ${dt('contextmenu.list.padding')};\n    list-style: none;\n    outline: 0 none;\n    display: flex;\n    flex-direction: column;\n    gap: ${dt('contextmenu.list.gap')};\n}\n\n.p-contextmenu-submenu {\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    min-width: 100%;\n    z-index: 1;\n    background: ${dt('contextmenu.background')};\n    color: ${dt('contextmenu.color')};\n    border: 1px solid ${dt('contextmenu.border.color')};\n    border-radius: ${dt('contextmenu.border.radius')};\n    box-shadow: ${dt('contextmenu.shadow')};\n}\n\n.p-contextmenu-item {\n    position: relative;\n}\n\n.p-contextmenu-item-content {\n    transition: background ${dt('contextmenu.transition.duration')}, color ${dt('contextmenu.transition.duration')};\n    border-radius: ${dt('contextmenu.item.border.radius')};\n    color: ${dt('contextmenu.item.color')};\n}\n\n.p-contextmenu-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('contextmenu.item.padding')};\n    gap: ${dt('contextmenu.item.gap')};\n    user-select: none;\n}\n\n.p-contextmenu-item-label {\n    line-height: 1;\n}\n\n.p-contextmenu-item-icon {\n    color: ${dt('contextmenu.item.icon.color')};\n}\n\n.p-contextmenu-submenu-icon {\n    color: ${dt('contextmenu.submenu.icon.color')};\n    margin-left: auto;\n    font-size: ${dt('contextmenu.submenu.icon.size')};\n    width: ${dt('contextmenu.submenu.icon.size')};\n    height: ${dt('contextmenu.submenu.icon.size')};\n}\n\n.p-contextmenu-item.p-focus > .p-contextmenu-item-content {\n    color: ${dt('contextmenu.item.focus.color')};\n    background: ${dt('contextmenu.item.focus.background')};\n}\n\n.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-item-icon {\n    color: ${dt('contextmenu.item.icon.focus.color')};\n}\n\n.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-submenu-icon {\n    color: ${dt('contextmenu.submenu.icon.focus.color')};\n}\n\n.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover {\n    color: ${dt('contextmenu.item.focus.color')};\n    background: ${dt('contextmenu.item.focus.background')};\n}\n\n.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-item-icon {\n    color: ${dt('contextmenu.item.icon.focus.color')};\n}\n\n.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-submenu-icon {\n    color: ${dt('contextmenu.submenu.icon.focus.color')};\n}\n\n.p-contextmenu-item-active > .p-contextmenu-item-content {\n    color: ${dt('contextmenu.item.active.color')};\n    background: ${dt('contextmenu.item.active.background')};\n}\n\n.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-item-icon {\n    color: ${dt('contextmenu.item.icon.active.color')};\n}\n\n.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {\n    color: ${dt('contextmenu.submenu.icon.active.color')};\n}\n\n.p-contextmenu-separator {\n    border-top: 1px solid  ${dt('contextmenu.separator.border.color')};\n}\n\n.p-contextmenu-enter-from,\n.p-contextmenu-leave-active {\n    opacity: 0;\n}\n\n.p-contextmenu-enter-active {\n    transition: opacity 250ms;\n}\n\n.p-contextmenu-mobile {\n    position: relative;\n}\n\n.p-contextmenu-mobile .p-contextmenu-button {\n    display: flex;\n}\n\n.p-contextmenu-mobile .p-contextmenu-root-list .p-contextmenu-item {\n    position: static;\n}\n\n.p-contextmenu-mobile .p-contextmenu-root-list .p-contextmenu-separator {\n    border-top: 1px solid ${dt('contextmenu.separator.border.color')};\n}\n\n.p-contextmenu-mobile .p-contextmenu-root-list > .p-contextmenu-item > .p-contextmenu-item-content .p-contextmenu-submenu-icon {\n    margin-left: auto;\n    transition: transform 0.2s;\n}\n\n.p-contextmenu-mobile .p-contextmenu-root-list > .p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {\n    transform: rotate(-90deg);\n}\n\n.p-contextmenu-mobile .p-contextmenu-submenu .p-contextmenu-submenu-icon {\n    transition: transform 0.2s;\n    transform: rotate(90deg);\n}\n\n.p-contextmenu-mobile  .p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {\n    transform: rotate(-90deg);\n}\n\n.p-contextmenu-mobile .p-contextmenu-submenu {\n    position: static;\n    box-shadow: none;\n    border: 0 none;\n    padding-left: ${dt('contextmenu.submenu.mobile.indent')};\n}\n`;\n\nconst classes = {\n    root: ({ instance }) => [\n        'p-contextmenu p-component',\n        {\n            'p-contextmenu-mobile': instance.queryMatches\n        }\n    ],\n    rootList: 'p-contextmenu-root-list',\n    item: ({ instance, processedItem }) => [\n        'p-contextmenu-item',\n        {\n            'p-contextmenu-item-active': instance.isItemActive(processedItem),\n            'p-focus': instance.isItemFocused(processedItem),\n            'p-disabled': instance.isItemDisabled(processedItem)\n        }\n    ],\n    itemContent: 'p-contextmenu-item-content',\n    itemLink: 'p-contextmenu-item-link',\n    itemIcon: 'p-contextmenu-item-icon',\n    itemLabel: 'p-contextmenu-item-label',\n    submenuIcon: 'p-contextmenu-submenu-icon',\n    submenu: 'p-contextmenu-submenu',\n    separator: 'p-contextmenu-separator'\n};\n\nexport default BaseStyle.extend({\n    name: 'contextmenu',\n    theme,\n    classes\n});\n"],"names":["theme","_ref","dt","concat","classes","root","_ref2","instance","queryMatches","rootList","item","_ref3","processedItem","isItemActive","isItemFocused","isItemDisabled","itemContent","itemLink","itemIcon","itemLabel","submenuIcon","submenu","separator","BaseStyle","extend","name"],"mappings":"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"}

package/datatable/BaseDataTable.vue

@@ -238,6 +238,10 @@ export default {
             type: String,
             default: '960px'
         },
+        showHeaders: {
+            type: Boolean,
+            default: true
+        },
         showGridlines: {
             type: Boolean,
             default: false

package/datatable/DataTable.vue

@@ -70,6 +70,7 @@
                 <template #content="slotProps">
                     <table ref="table" role="table" :class="[cx('table'), tableClass]" :style="[tableStyle, slotProps.spacerStyle]" v-bind="{ ...tableProps, ...ptm('table') }">
                         <DTTableHeader
+                            v-if="showHeaders"
                             :columnGroup="headerColumnGroup"
                             :columns="slotProps.columns"
                             :rowGroupMode="rowGroupMode"
@@ -295,14 +296,13 @@ import {
     getOffset,
     getOuterHeight,
     getOuterWidth,
-    getWindowScrollTop,
     isClickable,
     removeClass,
     setAttribute
 } from '@primeuix/utils/dom';
 import { equals, findIndexInList, isEmpty, isNotEmpty, localeComparator, reorderArray, resolveFieldData, sort } from '@primeuix/utils/object';
 import { FilterMatchMode, FilterOperator, FilterService } from '@primevue/core/api';
-import { HelperSet, UniqueComponentId, getVNodeProp } from '@primevue/core/utils';
+import { HelperSet, getVNodeProp } from '@primevue/core/utils';
 import ArrowDownIcon from '@primevue/icons/arrowdown';
 import ArrowUpIcon from '@primevue/icons/arrowup';
 import SpinnerIcon from '@primevue/icons/spinner';
@@ -442,8 +442,6 @@ export default {
         }
     },
     mounted() {
-        this.$el.setAttribute(this.attributeSelector, '');
-
         if (this.isStateful()) {
             this.restoreState();
 
@@ -1321,7 +1319,7 @@ export default {
             this.createStyleElement();
 
             let innerHTML = '';
-            let selector = `[data-pc-name="datatable"][${this.attributeSelector}] > [data-pc-section="tablecontainer"] ${this.virtualScrollerDisabled ? '' : '> [data-pc-name="virtualscroller"]'} > table[data-pc-section="table"]`;
+            let selector = `[data-pc-name="datatable"][${this.$attrSelector}] > [data-pc-section="tablecontainer"] ${this.virtualScrollerDisabled ? '' : '> [data-pc-name="virtualscroller"]'} > table[data-pc-section="table"]`;
 
             widths.forEach((width, index) => {
                 let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
@@ -1532,7 +1530,7 @@ export default {
 
             if (this.rowDragging && this.draggedRowIndex !== index) {
                 let rowElement = event.currentTarget;
-                let rowY = getOffset(rowElement).top + getWindowScrollTop();
+                let rowY = getOffset(rowElement).top;
                 let pageY = event.pageY;
                 let rowMidY = rowY + getOuterHeight(rowElement) / 2;
                 let prevRowElement = rowElement.previousElementSibling;
@@ -1788,7 +1786,7 @@ export default {
             this.createStyleElement();
 
             let innerHTML = '';
-            let selector = `[data-pc-name="datatable"][${this.attributeSelector}] > [data-pc-section="tablecontainer"] ${this.virtualScrollerDisabled ? '' : '> [data-pc-name="virtualscroller"]'} > table[data-pc-section="table"]`;
+            let selector = `[data-pc-name="datatable"][${this.$attrSelector}] > [data-pc-section="tablecontainer"] ${this.virtualScrollerDisabled ? '' : '> [data-pc-name="virtualscroller"]'} > table[data-pc-section="table"]`;
 
             widths.forEach((width, index) => {
                 let style = `width: ${width}px !important; max-width: ${width}px !important`;
@@ -2031,9 +2029,6 @@ export default {
                 return isNotEmpty(val) && this.selection && Array.isArray(this.selection) && val.every((v) => this.selection.some((s) => this.equals(s, v)));
             }
         },
-        attributeSelector() {
-            return UniqueComponentId();
-        },
         groupRowSortField() {
             return this.sortMode === 'single' ? this.sortField : this.d_groupRowsSortMeta ? this.d_groupRowsSortMeta.field : null;
         },

package/datatable/HeaderCheckbox.vue

@@ -1,5 +1,5 @@
 <template>
-    <Checkbox :modelValue="checked" :binary="true" :disabled="disabled" :aria-label="headerCheckboxAriaLabel" @change="onChange" :pt="getColumnPT('pcHeaderCheckbox')">
+    <Checkbox :modelValue="checked" :binary="true" :disabled="disabled" :aria-label="headerCheckboxAriaLabel" @change="onChange" :unstyled="unstyled" :pt="getColumnPT('pcHeaderCheckbox')">
         <template #icon="slotProps">
             <component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="slotProps.checked" :class="slotProps.class" />
             <CheckIcon v-else-if="!headerCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('pcHeaderCheckbox')['icon']" />

package/datatable/TableBody.vue

@@ -65,7 +65,7 @@
                 />
             </template>
         </template>
-        <DTBodyRow v-else :empty="empty" :columns="columns" :templates="templates" />
+        <DTBodyRow v-else :empty="empty" :columns="columns" :templates="templates" :unstyled="unstyled" :pt="pt" />
     </tbody>
 </template>
 

package/datatable/TableHeader.vue

@@ -43,57 +43,6 @@
                     />
                 </template>
             </tr>
-            <tr v-if="filterDisplay === 'row'" role="row" v-bind="ptm('headerRow')">
-                <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
-                    <th
-                        v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))"
-                        :style="getFilterColumnHeaderStyle(col)"
-                        :class="getFilterColumnHeaderClass(col)"
-                        v-bind="{ ...getColumnPT(col, 'root', i), ...getColumnPT(col, 'headerCell', i) }"
-                    >
-                        <DTHeaderCheckbox v-if="columnProp(col, 'selectionMode') === 'multiple'" :checked="allRowsSelected" :disabled="empty" @change="$emit('checkbox-change', $event)" :column="col" :unstyled="unstyled" :pt="pt" />
-                        <DTColumnFilter
-                            v-if="col.children && col.children.filter"
-                            :field="columnProp(col, 'filterField') || columnProp(col, 'field')"
-                            :type="columnProp(col, 'dataType')"
-                            display="row"
-                            :showMenu="columnProp(col, 'showFilterMenu')"
-                            :filterElement="col.children && col.children.filter"
-                            :filterHeaderTemplate="col.children && col.children.filterheader"
-                            :filterFooterTemplate="col.children && col.children.filterfooter"
-                            :filterClearTemplate="col.children && col.children.filterclear"
-                            :filterApplyTemplate="col.children && col.children.filterapply"
-                            :filterIconTemplate="col.children && col.children.filtericon"
-                            :filterAddIconTemplate="col.children && col.children.filteraddicon"
-                            :filterRemoveIconTemplate="col.children && col.children.filterremoveicon"
-                            :filterClearIconTemplate="col.children && col.children.filterclearicon"
-                            :filters="filters"
-                            :filtersStore="filtersStore"
-                            :filterInputProps="filterInputProps"
-                            :filterButtonProps="filterButtonProps"
-                            @filter-change="$emit('filter-change', $event)"
-                            @filter-apply="$emit('filter-apply')"
-                            :filterMenuStyle="columnProp(col, 'filterMenuStyle')"
-                            :filterMenuClass="columnProp(col, 'filterMenuClass')"
-                            :showOperator="columnProp(col, 'showFilterOperator')"
-                            :showClearButton="columnProp(col, 'showClearButton')"
-                            :showApplyButton="columnProp(col, 'showApplyButton')"
-                            :showMatchModes="columnProp(col, 'showFilterMatchModes')"
-                            :showAddButton="columnProp(col, 'showAddButton')"
-                            :matchModeOptions="columnProp(col, 'filterMatchModeOptions')"
-                            :maxConstraints="columnProp(col, 'maxConstraints')"
-                            @operator-change="$emit('operator-change', $event)"
-                            @matchmode-change="$emit('matchmode-change', $event)"
-                            @constraint-add="$emit('constraint-add', $event)"
-                            @constraint-remove="$emit('constraint-remove', $event)"
-                            @apply-click="$emit('apply-click', $event)"
-                            :column="col"
-                            :unstyled="unstyled"
-                            :pt="pt"
-                        />
-                    </th>
-                </template>
-            </tr>
         </template>
         <template v-else>
             <tr v-for="(row, i) of getHeaderRows()" :key="i" role="row" v-bind="{ ...ptm('headerRow'), ...getRowPT(row, 'root', i) }">
@@ -128,6 +77,57 @@
                 </template>
             </tr>
         </template>
+        <tr v-if="filterDisplay === 'row'" role="row" v-bind="ptm('headerRow')">
+            <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
+                <th
+                    v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))"
+                    :style="getFilterColumnHeaderStyle(col)"
+                    :class="getFilterColumnHeaderClass(col)"
+                    v-bind="{ ...getColumnPT(col, 'root', i), ...getColumnPT(col, 'headerCell', i) }"
+                >
+                    <DTHeaderCheckbox v-if="columnProp(col, 'selectionMode') === 'multiple'" :checked="allRowsSelected" :disabled="empty" @change="$emit('checkbox-change', $event)" :column="col" :unstyled="unstyled" :pt="pt" />
+                    <DTColumnFilter
+                        v-if="col.children && col.children.filter"
+                        :field="columnProp(col, 'filterField') || columnProp(col, 'field')"
+                        :type="columnProp(col, 'dataType')"
+                        display="row"
+                        :showMenu="columnProp(col, 'showFilterMenu')"
+                        :filterElement="col.children && col.children.filter"
+                        :filterHeaderTemplate="col.children && col.children.filterheader"
+                        :filterFooterTemplate="col.children && col.children.filterfooter"
+                        :filterClearTemplate="col.children && col.children.filterclear"
+                        :filterApplyTemplate="col.children && col.children.filterapply"
+                        :filterIconTemplate="col.children && col.children.filtericon"
+                        :filterAddIconTemplate="col.children && col.children.filteraddicon"
+                        :filterRemoveIconTemplate="col.children && col.children.filterremoveicon"
+                        :filterClearIconTemplate="col.children && col.children.filterclearicon"
+                        :filters="filters"
+                        :filtersStore="filtersStore"
+                        :filterInputProps="filterInputProps"
+                        :filterButtonProps="filterButtonProps"
+                        @filter-change="$emit('filter-change', $event)"
+                        @filter-apply="$emit('filter-apply')"
+                        :filterMenuStyle="columnProp(col, 'filterMenuStyle')"
+                        :filterMenuClass="columnProp(col, 'filterMenuClass')"
+                        :showOperator="columnProp(col, 'showFilterOperator')"
+                        :showClearButton="columnProp(col, 'showClearButton')"
+                        :showApplyButton="columnProp(col, 'showApplyButton')"
+                        :showMatchModes="columnProp(col, 'showFilterMatchModes')"
+                        :showAddButton="columnProp(col, 'showAddButton')"
+                        :matchModeOptions="columnProp(col, 'filterMatchModeOptions')"
+                        :maxConstraints="columnProp(col, 'maxConstraints')"
+                        @operator-change="$emit('operator-change', $event)"
+                        @matchmode-change="$emit('matchmode-change', $event)"
+                        @constraint-add="$emit('constraint-add', $event)"
+                        @constraint-remove="$emit('constraint-remove', $event)"
+                        @apply-click="$emit('apply-click', $event)"
+                        :column="col"
+                        :unstyled="unstyled"
+                        :pt="pt"
+                    />
+                </th>
+            </template>
+        </tr>
     </thead>
 </template>
 

package/datatable/index.d.ts

@@ -1164,6 +1164,11 @@ export interface DataTableProps {
      * @defaultValue 960px
      */
     breakpoint?: string | undefined;
+    /**
+     * Whether to display table headers
+     * @defaultValue true
+     */
+    showHeaders?: boolean | undefined;
     /**
      * Whether to show grid lines between cells.
      * @defaultValue false