primevue 3.30.2 → 3.32.0

package/datatable/BaseDataTable.vue

@@ -281,7 +281,7 @@ const classes = {
     thead: 'p-datatable-thead',
     // headercell
     headerCell: ({ instance, props, column }) =>
-        column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== columnProp(column, 'field'))
+        column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== instance.columnProp(column, 'field'))
             ? [
                   'p-filter-column',
                   {

package/datatable/BodyCell.vue

@@ -314,6 +314,7 @@ export default {
             if (this.editMode === 'cell') {
                 switch (event.code) {
                     case 'Enter':
+                    case 'NumpadEnter':
                         this.completeEdit(event, 'enter');
                         break;
 

package/datatable/ColumnFilter.vue

@@ -22,7 +22,7 @@
             <component :is="filterClearIconTemplate || 'FilterSlashIcon'" v-bind="getColumnPT('filterClearIcon')" />
         </button>
         <Portal>
-            <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
+            <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="getColumnPT('transition')">
                 <div
                     v-if="overlayVisible"
                     :ref="overlayRef"

package/datatable/DataTable.d.ts

@@ -7,7 +7,7 @@
  * @module datatable
  *
  */
-import { InputHTMLAttributes, TableHTMLAttributes, VNode } from 'vue';
+import { InputHTMLAttributes, TableHTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { ColumnPassThroughOptionType } from '../column';
 import { ColumnGroupPassThroughOptionType } from '../columngroup';
@@ -18,6 +18,8 @@ import { VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../v
 
 export declare type DataTablePassThroughOptionType = DataTablePassThroughAttributes | ((options: DataTablePassThroughMethodOptions) => DataTablePassThroughAttributes | string) | string | null | undefined;
 
+export declare type DataTablePassThroughTransitionType = TransitionProps | ((options: DataTablePassThroughMethodOptions) => TransitionProps) | undefined;
+
 /**
  * Custom passthrough(pt) option method.
  */
@@ -544,116 +546,120 @@ export interface DataTableStateEvent {
  */
 export interface DataTablePassThroughOptions {
     /**
-     * Uses to pass attributes to the root's DOM element.
+     * Used to pass attributes to the root's DOM element.
      */
     root?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the loading overlay's DOM element.
+     * Used to pass attributes to the loading overlay's DOM element.
      */
     loadingOverlay?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the loading icon's DOM element.
+     * Used to pass attributes to the loading icon's DOM element.
      */
     loadingIcon?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the header's DOM element.
+     * Used to pass attributes to the header's DOM element.
      */
     header?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the Paginator component.
+     * Used to pass attributes to the Paginator component.
      * @see {@link PaginatorPassThroughOptionType}
      */
     paginator?: PaginatorPassThroughOptionType;
     /**
-     * Uses to pass attributes to the wrapper's DOM element.
+     * Used to pass attributes to the wrapper's DOM element.
      */
     wrapper?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the VirtualScroller component.
+     * Used to pass attributes to the VirtualScroller component.
      * @see {@link VirtualScrollerPassThroughOptionType}
      */
     virtualScroller?: VirtualScrollerPassThroughOptionType;
     /**
-     * Uses to pass attributes to the table's DOM element.
+     * Used to pass attributes to the table's DOM element.
      */
     table?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the virtual scroller spacer's DOM element.
+     * Used to pass attributes to the virtual scroller spacer's DOM element.
      */
     virtualScrollerSpacer?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the footer's DOM element.
+     * Used to pass attributes to the footer's DOM element.
      */
     footer?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the thead's DOM element.
+     * Used to pass attributes to the thead's DOM element.
      */
     thead?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the header row's DOM element.
+     * Used to pass attributes to the header row's DOM element.
      */
     headerRow?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the tbody's DOM element.
+     * Used to pass attributes to the tbody's DOM element.
      */
     tbody?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the rowgroup header's DOM element.
+     * Used to pass attributes to the rowgroup header's DOM element.
      */
     rowGroupHeader?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the body row's DOM element.
+     * Used to pass attributes to the body row's DOM element.
      */
     bodyRow?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the row expansion's DOM element.
+     * Used to pass attributes to the row expansion's DOM element.
      */
     rowExpansion?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the rowgroup footer's DOM element.
+     * Used to pass attributes to the rowgroup footer's DOM element.
      */
     rowGroupFooter?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the empty message's DOM element.
+     * Used to pass attributes to the empty message's DOM element.
      */
     emptyMessage?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the tfoot's DOM element.
+     * Used to pass attributes to the tfoot's DOM element.
      */
     tfoot?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the footerr ow's DOM element.
+     * Used to pass attributes to the footer row's DOM element.
      */
     footerRow?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the resize helper's DOM element.
+     * Used to pass attributes to the resize helper's DOM element.
      */
     resizeHelper?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the reorder indicator up's DOM element.
+     * Used to pass attributes to the reorder indicator up's DOM element.
      */
     reorderIndicatorUp?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the reorder indicator down's DOM element.
+     * Used to pass attributes to the reorder indicator down's DOM element.
      */
     reorderIndicatorDown?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the ColumnGroup helper components.
+     * Used to pass attributes to the ColumnGroup helper components.
      */
     columnGroup?: ColumnGroupPassThroughOptionType;
     /**
-     * Uses to pass attributes to the Row helper components.
+     * Used to pass attributes to the Row helper components.
      */
     row?: RowPassThroughOptionType;
     /**
-     * Uses to pass attributes to the Column helper components.
+     * Used to pass attributes to the Column helper components.
      */
     column?: ColumnPassThroughOptionType;
     /**
-     * Uses to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;
+    /**
+     * Used to control Vue Transition API.
+     */
+    transition?: DataTablePassThroughTransitionType;
 }
 
 /**
@@ -1052,15 +1058,15 @@ export interface DataTableProps {
      */
     tableClass?: any;
     /**
-     * Uses to pass all properties of the TableHTMLAttributes to table element inside the component.
+     * Used to pass all properties of the TableHTMLAttributes to table element inside the component.
      */
     tableProps?: TableHTMLAttributes | undefined;
     /**
-     * Uses to pass all properties of the HTMLInputElement to the focusable filter input element inside the component.
+     * Used to pass all properties of the HTMLInputElement to the focusable filter input element inside the component.
      */
     filterInputProps?: InputHTMLAttributes | undefined;
     /**
-     * Uses to pass attributes to DOM elements inside the component.
+     * Used to pass attributes to DOM elements inside the component.
      * @type {DataTablePassThroughOptions}
      */
     pt?: DataTablePassThroughOptions;

package/datatable/DataTable.vue

@@ -466,7 +466,8 @@ export default {
                     DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headercontent' ||
                     DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' ||
                     DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' ||
-                    DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon'
+                    DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon' ||
+                    targetNode.closest('[data-p-sortable-column="true"]')
                 ) {
                     DomHandler.clearSelection();
 
@@ -1851,12 +1852,14 @@ export default {
         createStyleElement() {
             this.styleElement = document.createElement('style');
             this.styleElement.type = 'text/css';
+            DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
             document.head.appendChild(this.styleElement);
         },
         createResponsiveStyle() {
             if (!this.responsiveStyleElement) {
                 this.responsiveStyleElement = document.createElement('style');
                 this.responsiveStyleElement.type = 'text/css';
+                DomHandler.setAttribute(this.responsiveStyleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
                 document.head.appendChild(this.responsiveStyleElement);
 
                 let tableSelector = `.p-datatable-wrapper ${this.virtualScrollerDisabled ? '' : '> .p-virtualscroller'} > .p-datatable-table`;

package/datatable/datatable.cjs.js

@@ -113,7 +113,7 @@ var classes = {
     var instance = _ref4.instance,
       props = _ref4.props,
       column = _ref4.column;
-    return column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== columnProp(column, 'field')) ? ['p-filter-column', {
+    return column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== instance.columnProp(column, 'field')) ? ['p-filter-column', {
       'p-frozen-column': instance.columnProp(column, 'frozen')
     }] : [{
       'p-sortable-column': instance.columnProp('sortable'),
@@ -1041,6 +1041,7 @@ var script$8 = {
       if (this.editMode === 'cell') {
         switch (event.code) {
           case 'Enter':
+          case 'NumpadEnter':
             this.completeEdit(event, 'enter');
             break;
           case 'Escape':
@@ -3001,12 +3002,12 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     })
   }, $options.getColumnPT('headerFilterClearButton', $options.ptmHeaderFilterClearParams)), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterClearIconTemplate || 'FilterSlashIcon'), vue.normalizeProps(vue.guardReactiveProps($options.getColumnPT('filterClearIcon'))), null, 16))], 16)) : vue.createCommentVNode("", true), vue.createVNode(_component_Portal, null, {
     "default": vue.withCtx(function () {
-      return [vue.createVNode(vue.Transition, {
+      return [vue.createVNode(vue.Transition, vue.mergeProps({
         name: "p-connected-overlay",
         onEnter: $options.onOverlayEnter,
         onLeave: $options.onOverlayLeave,
         onAfterLeave: $options.onOverlayAfterLeave
-      }, {
+      }, $options.getColumnPT('transition')), {
         "default": vue.withCtx(function () {
           return [$data.overlayVisible ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
             key: 0,
@@ -3194,7 +3195,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
           }]]) : vue.createCommentVNode("", true)];
         }),
         _: 1
-      }, 8, ["onEnter", "onLeave", "onAfterLeave"])];
+      }, 16, ["onEnter", "onLeave", "onAfterLeave"])];
     }),
     _: 1
   })], 16);
@@ -4275,7 +4276,7 @@ var script = {
       if (this.columnProp(column, 'sortable')) {
         var targetNode = event.target;
         var columnField = this.columnProp(column, 'sortField') || this.columnProp(column, 'field');
-        if (utils.DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true || utils.DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headertitle' || utils.DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headercontent' || utils.DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' || utils.DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' || utils.DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon') {
+        if (utils.DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true || utils.DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headertitle' || utils.DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headercontent' || utils.DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' || utils.DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' || utils.DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon' || targetNode.closest('[data-p-sortable-column="true"]')) {
           utils.DomHandler.clearSelection();
           if (this.sortMode === 'single') {
             if (this.d_sortField === columnField) {
@@ -5557,14 +5558,18 @@ var script = {
       this.d_columnOrder = columnOrder;
     },
     createStyleElement: function createStyleElement() {
+      var _this$$primevue;
       this.styleElement = document.createElement('style');
       this.styleElement.type = 'text/css';
+      utils.DomHandler.setAttribute(this.styleElement, 'nonce', (_this$$primevue = this.$primevue) === null || _this$$primevue === void 0 || (_this$$primevue = _this$$primevue.config) === null || _this$$primevue === void 0 || (_this$$primevue = _this$$primevue.csp) === null || _this$$primevue === void 0 ? void 0 : _this$$primevue.nonce);
       document.head.appendChild(this.styleElement);
     },
     createResponsiveStyle: function createResponsiveStyle() {
       if (!this.responsiveStyleElement) {
+        var _this$$primevue2;
         this.responsiveStyleElement = document.createElement('style');
         this.responsiveStyleElement.type = 'text/css';
+        utils.DomHandler.setAttribute(this.responsiveStyleElement, 'nonce', (_this$$primevue2 = this.$primevue) === null || _this$$primevue2 === void 0 || (_this$$primevue2 = _this$$primevue2.config) === null || _this$$primevue2 === void 0 || (_this$$primevue2 = _this$$primevue2.csp) === null || _this$$primevue2 === void 0 ? void 0 : _this$$primevue2.nonce);
         document.head.appendChild(this.responsiveStyleElement);
         var tableSelector = ".p-datatable-wrapper ".concat(this.virtualScrollerDisabled ? '' : '> .p-virtualscroller', " > .p-datatable-table");
         var selector = ".p-datatable[".concat(this.attributeSelector, "] > ").concat(tableSelector);