primevue 3.34.0 → 3.35.0

package/datatable/BaseDataTable.vue

@@ -3,239 +3,241 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-.p-datatable {
-    position: relative;
-}
-
-.p-datatable-table {
-    border-spacing: 0px;
-    width: 100%;
-}
-
-.p-datatable .p-sortable-column {
-    cursor: pointer;
-    user-select: none;
-}
-
-.p-datatable .p-sortable-column .p-column-title,
-.p-datatable .p-sortable-column .p-sortable-column-icon,
-.p-datatable .p-sortable-column .p-sortable-column-badge {
-    vertical-align: middle;
-}
-
-.p-datatable .p-sortable-column .p-sortable-column-badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.p-datatable-hoverable-rows .p-selectable-row {
-    cursor: pointer;
-}
-
-/* Scrollable */
-.p-datatable-scrollable > .p-datatable-wrapper {
-    position: relative;
-}
-
-.p-datatable-scrollable-table > .p-datatable-thead {
-    top: 0;
-    z-index: 1;
-}
-
-.p-datatable-scrollable-table > .p-datatable-frozen-tbody {
-    position: sticky;
-    z-index: 1;
-}
-
-.p-datatable-scrollable-table > .p-datatable-tfoot {
-    bottom: 0;
-    z-index: 1;
-}
-
-.p-datatable-scrollable .p-frozen-column {
-    position: sticky;
-    background: inherit;
-}
-
-.p-datatable-scrollable th.p-frozen-column {
-    z-index: 1;
-}
-
-.p-datatable-flex-scrollable {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-.p-datatable-flex-scrollable > .p-datatable-wrapper {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    height: 100%;
-}
-
-.p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {
-    position: sticky;
-    z-index: 1;
-}
-
-/* Resizable */
-.p-datatable-resizable-table > .p-datatable-thead > tr > th,
-.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
-.p-datatable-resizable-table > .p-datatable-tbody > tr > td {
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {
-    background-clip: padding-box;
-    position: relative;
-}
-
-.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {
-    display: none;
-}
-
-.p-datatable .p-column-resizer {
-    display: block;
-    position: absolute !important;
-    top: 0;
-    right: 0;
-    margin: 0;
-    width: 0.5rem;
-    height: 100%;
-    padding: 0px;
-    cursor: col-resize;
-    border: 1px solid transparent;
-}
-
-.p-datatable .p-column-header-content {
-    display: flex;
-    align-items: center;
-}
-
-.p-datatable .p-column-resizer-helper {
-    width: 1px;
-    position: absolute;
-    z-index: 10;
-    display: none;
-}
-
-.p-datatable .p-row-editor-init,
-.p-datatable .p-row-editor-save,
-.p-datatable .p-row-editor-cancel {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-}
-
-/* Expand */
-.p-datatable .p-row-toggler {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-}
-
-/* Reorder */
-.p-datatable-reorder-indicator-up,
-.p-datatable-reorder-indicator-down {
-    position: absolute;
-    display: none;
-}
-
-.p-reorderable-column,
-.p-datatable-reorderablerow-handle {
-    cursor: move;
-}
-
-/* Loader */
-.p-datatable .p-datatable-loading-overlay {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 2;
-}
-
-/* Filter */
-.p-column-filter-row {
-    display: flex;
-    align-items: center;
-    width: 100%;
-}
-
-.p-column-filter-menu {
-    display: inline-flex;
-    margin-left: auto;
-}
-
-.p-column-filter-row .p-column-filter-element {
-    flex: 1 1 auto;
-    width: 1%;
-}
-
-.p-column-filter-menu-button,
-.p-column-filter-clear-button {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    text-decoration: none;
-    overflow: hidden;
-    position: relative;
-}
-
-.p-column-filter-row-items {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.p-column-filter-row-item {
-    cursor: pointer;
-}
-
-.p-column-filter-add-button,
-.p-column-filter-remove-button {
-    justify-content: center;
-}
-
-.p-column-filter-add-button .p-button-label,
-.p-column-filter-remove-button .p-button-label {
-    flex-grow: 0;
-}
-
-.p-column-filter-buttonbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {
-    width: auto;
-}
-
-/* Responsive */
-.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
-    display: none;
-}
-
-/* VirtualScroller */
-.p-datatable-virtualscroller-spacer {
-    display: flex;
-}
-
-.p-datatable .p-virtualscroller .p-virtualscroller-loading {
-    transform: none !important;
-    min-height: 0;
-    position: sticky;
-    top: 0;
-    left: 0;
+@layer primevue {
+    .p-datatable {
+        position: relative;
+    }
+    
+    .p-datatable-table {
+        border-spacing: 0px;
+        width: 100%;
+    }
+    
+    .p-datatable .p-sortable-column {
+        cursor: pointer;
+        user-select: none;
+    }
+    
+    .p-datatable .p-sortable-column .p-column-title,
+    .p-datatable .p-sortable-column .p-sortable-column-icon,
+    .p-datatable .p-sortable-column .p-sortable-column-badge {
+        vertical-align: middle;
+    }
+    
+    .p-datatable .p-sortable-column .p-sortable-column-badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .p-datatable-hoverable-rows .p-selectable-row {
+        cursor: pointer;
+    }
+    
+    /* Scrollable */
+    .p-datatable-scrollable > .p-datatable-wrapper {
+        position: relative;
+    }
+    
+    .p-datatable-scrollable-table > .p-datatable-thead {
+        top: 0;
+        z-index: 1;
+    }
+    
+    .p-datatable-scrollable-table > .p-datatable-frozen-tbody {
+        position: sticky;
+        z-index: 1;
+    }
+    
+    .p-datatable-scrollable-table > .p-datatable-tfoot {
+        bottom: 0;
+        z-index: 1;
+    }
+    
+    .p-datatable-scrollable .p-frozen-column {
+        position: sticky;
+        background: inherit;
+    }
+    
+    .p-datatable-scrollable th.p-frozen-column {
+        z-index: 1;
+    }
+    
+    .p-datatable-flex-scrollable {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+    
+    .p-datatable-flex-scrollable > .p-datatable-wrapper {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        height: 100%;
+    }
+    
+    .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {
+        position: sticky;
+        z-index: 1;
+    }
+    
+    /* Resizable */
+    .p-datatable-resizable-table > .p-datatable-thead > tr > th,
+    .p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
+    .p-datatable-resizable-table > .p-datatable-tbody > tr > td {
+        overflow: hidden;
+        white-space: nowrap;
+    }
+    
+    .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {
+        background-clip: padding-box;
+        position: relative;
+    }
+    
+    .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {
+        display: none;
+    }
+    
+    .p-datatable .p-column-resizer {
+        display: block;
+        position: absolute !important;
+        top: 0;
+        right: 0;
+        margin: 0;
+        width: 0.5rem;
+        height: 100%;
+        padding: 0px;
+        cursor: col-resize;
+        border: 1px solid transparent;
+    }
+    
+    .p-datatable .p-column-header-content {
+        display: flex;
+        align-items: center;
+    }
+    
+    .p-datatable .p-column-resizer-helper {
+        width: 1px;
+        position: absolute;
+        z-index: 10;
+        display: none;
+    }
+    
+    .p-datatable .p-row-editor-init,
+    .p-datatable .p-row-editor-save,
+    .p-datatable .p-row-editor-cancel {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+    }
+    
+    /* Expand */
+    .p-datatable .p-row-toggler {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+    }
+    
+    /* Reorder */
+    .p-datatable-reorder-indicator-up,
+    .p-datatable-reorder-indicator-down {
+        position: absolute;
+        display: none;
+    }
+    
+    .p-reorderable-column,
+    .p-datatable-reorderablerow-handle {
+        cursor: move;
+    }
+    
+    /* Loader */
+    .p-datatable .p-datatable-loading-overlay {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+    }
+    
+    /* Filter */
+    .p-column-filter-row {
+        display: flex;
+        align-items: center;
+        width: 100%;
+    }
+    
+    .p-column-filter-menu {
+        display: inline-flex;
+        margin-left: auto;
+    }
+    
+    .p-column-filter-row .p-column-filter-element {
+        flex: 1 1 auto;
+        width: 1%;
+    }
+    
+    .p-column-filter-menu-button,
+    .p-column-filter-clear-button {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        text-decoration: none;
+        overflow: hidden;
+        position: relative;
+    }
+    
+    .p-column-filter-row-items {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+    
+    .p-column-filter-row-item {
+        cursor: pointer;
+    }
+    
+    .p-column-filter-add-button,
+    .p-column-filter-remove-button {
+        justify-content: center;
+    }
+    
+    .p-column-filter-add-button .p-button-label,
+    .p-column-filter-remove-button .p-button-label {
+        flex-grow: 0;
+    }
+    
+    .p-column-filter-buttonbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+    
+    .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {
+        width: auto;
+    }
+    
+    /* Responsive */
+    .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
+        display: none;
+    }
+    
+    /* VirtualScroller */
+    .p-datatable-virtualscroller-spacer {
+        display: flex;
+    }
+    
+    .p-datatable .p-virtualscroller .p-virtualscroller-loading {
+        transform: none !important;
+        min-height: 0;
+        position: sticky;
+        top: 0;
+        left: 0;
+    }
 }
 `;
 

package/datatable/BodyCell.vue

@@ -63,7 +63,7 @@
                 v-bind="getColumnPT('rowToggler')"
                 data-pc-group-section="rowactionbutton"
             >
-                <component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :rowExpanded="isRowExpanded" />
+                <component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :class="cx('rowTogglerIcon')" :rowExpanded="isRowExpanded" />
                 <template v-else>
                     <span v-if="isRowExpanded && expandedRowIcon" :class="[cx('rowTogglerIcon'), expandedRowIcon]" />
                     <ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" />

package/datatable/ColumnFilter.vue

@@ -87,7 +87,7 @@
                                     :pt="getColumnPT('filterMatchModeDropdown')"
                                     data-pc-section="filtermatchmodedropdown"
                                 ></CFDropdown>
-                                <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
+                                <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" :applyFilter="applyFilter" />
                                 <div v-bind="getColumnPT('filterRemove')">
                                     <CFButton
                                         v-if="showRemoveIcon"

package/datatable/DataTable.d.ts

@@ -1211,19 +1211,63 @@ export interface DataTableSlots {
     /**
      * Custom paginator first page link icon template.
      */
-    paginatorfirstpagelinkicon(): VNode[];
+    paginatorfirstpagelinkicon(scope: {
+        /**
+         * Style class of the paginator first page link icon.
+         * @param {Object} scope - paginatorfirstpagelinkicon's params.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom paginator previous page link icon template.
      */
-    paginatorprevpagelinkicon(): VNode[];
+    paginatorprevpagelinkicon(scope: {
+        /**
+         * Style class of the paginator prev page link icon.
+         * @param {Object} scope - paginatorprevpagelinkicon's params.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom paginator next page link icon template.
      */
-    paginatornextpagelinkicon(): VNode[];
+    paginatornextpagelinkicon(scope: {
+        /**
+         * Style class of the paginator next page link icon.
+         * @param {Object} scope - paginatornextpagelinkicon's params.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom paginator last page link icon template.
      */
-    paginatorlastpagelinkicon(): VNode[];
+    paginatorlastpagelinkicon(scope: {
+        /**
+         * Style class of the paginator last page link icon.
+         * @param {Object} scope - paginatorlastpagelinkicon's params.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom paginatorrowsperpagedropdownicon template.
+     * @param {Object} scope - paginatorrowsperpagedropdownicon's params.
+     */
+    paginatorrowsperpagedropdownicon(scope: {
+        /**
+         * Style class of the paginator rows per page dropdown icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom paginatorjumptopagedropdownicon template.
+     * @param {Object} scope - paginatorjumptopagedropdownicon's params.
+     */
+    paginatorjumptopagedropdownicon(scope: {
+        /**
+         * Style class of the paginator jump to page dropdown icon.
+         */
+        class: string;
+    }): VNode[];
 }
 /**
  * Defines valid emits in Datatable component.

package/datatable/DataTable.vue

@@ -33,17 +33,23 @@
             <template v-if="$slots.paginatorend" #end>
                 <slot name="paginatorend"></slot>
             </template>
-            <template v-if="$slots.paginatorfirstpagelinkicon" #firstpagelinkicon>
-                <slot name="paginatorfirstpagelinkicon"></slot>
+            <template v-if="$slots.paginatorfirstpagelinkicon" #firstpagelinkicon="slotProps">
+                <slot name="paginatorfirstpagelinkicon" :class="slotProps.class"></slot>
             </template>
-            <template v-if="$slots.paginatorprevpagelinkicon" #prevpagelinkicon>
-                <slot name="paginatorprevpagelinkicon"></slot>
+            <template v-if="$slots.paginatorprevpagelinkicon" #prevpagelinkicon="slotProps">
+                <slot name="paginatorprevpagelinkicon" :class="slotProps.class"></slot>
             </template>
-            <template v-if="$slots.paginatornextpagelinkicon" #nextpagelinkicon>
-                <slot name="paginatornextpagelinkicon"></slot>
+            <template v-if="$slots.paginatornextpagelinkicon" #nextpagelinkicon="slotProps">
+                <slot name="paginatornextpagelinkicon" :class="slotProps.class"></slot>
             </template>
-            <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
-                <slot name="paginatorlastpagelinkicon"></slot>
+            <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon="slotProps">
+                <slot name="paginatorlastpagelinkicon" :class="slotProps.class"></slot>
+            </template>
+            <template v-if="$slots.paginatorjumptopagedropdownicon" #jumptopagedropdownicon="slotProps">
+                <slot name="paginatorjumptopagedropdownicon" :class="slotProps.class"></slot>
+            </template>
+            <template v-if="$slots.paginatorrowsperpagedropdownicon" #rowsperpagedropdownicon="slotProps">
+                <slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
             </template>
         </DTPaginator>
         <div :class="cx('wrapper')" :style="[sx('wrapper'), { maxHeight: virtualScrollerDisabled ? scrollHeight : '' }]" v-bind="ptm('wrapper')">
@@ -245,17 +251,23 @@
             <template v-if="$slots.paginatorend" #end>
                 <slot name="paginatorend"></slot>
             </template>
-            <template v-if="$slots.paginatorfirstpagelinkicon" #firstpagelinkicon>
-                <slot name="paginatorfirstpagelinkicon"></slot>
+            <template v-if="$slots.paginatorfirstpagelinkicon" #firstpagelinkicon="slotProps">
+                <slot name="paginatorfirstpagelinkicon" :class="slotProps.class"></slot>
+            </template>
+            <template v-if="$slots.paginatorprevpagelinkicon" #prevpagelinkicon="slotProps">
+                <slot name="paginatorprevpagelinkicon" :class="slotProps.class"></slot>
             </template>
-            <template v-if="$slots.paginatorprevpagelinkicon" #prevpagelinkicon>
-                <slot name="paginatorprevpagelinkicon"></slot>
+            <template v-if="$slots.paginatornextpagelinkicon" #nextpagelinkicon="slotProps">
+                <slot name="paginatornextpagelinkicon" :class="slotProps.class"></slot>
             </template>
-            <template v-if="$slots.paginatornextpagelinkicon" #nextpagelinkicon>
-                <slot name="paginatornextpagelinkicon"></slot>
+            <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon="slotProps">
+                <slot name="paginatorlastpagelinkicon" :class="slotProps.class"></slot>
             </template>
-            <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
-                <slot name="paginatorlastpagelinkicon"></slot>
+            <template v-if="$slots.paginatorjumptopagedropdownicon" #jumptopagedropdownicon="slotProps">
+                <slot name="paginatorjumptopagedropdownicon" :class="slotProps.class"></slot>
+            </template>
+            <template v-if="$slots.paginatorrowsperpagedropdownicon" #rowsperpagedropdownicon="slotProps">
+                <slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
             </template>
         </DTPaginator>
         <div ref="resizeHelper" :class="cx('resizeHelper')" style="display: none" v-bind="ptm('resizeHelper')"></div>
@@ -710,7 +722,6 @@ export default {
         },
         onRowClick(e) {
             const event = e.originalEvent;
-            const index = e.index;
             const body = this.$refs.bodyRef && this.$refs.bodyRef.$el;
             const focusedItem = DomHandler.findSingle(body, 'tr[data-p-selectable-row="true"][tabindex="0"]');
 
@@ -791,8 +802,10 @@ export default {
             this.rowTouched = false;
 
             if (focusedItem) {
+                const targetRow = e.originalEvent.target.closest('tr[data-p-selectable-row="true"]');
+
                 focusedItem.tabIndex = '-1';
-                DomHandler.find(body, 'tr[data-p-selectable-row="true"]')[index].tabIndex = '0';
+                targetRow.tabIndex = '0';
             }
         },
         onRowDblClick(e) {
@@ -1466,7 +1479,7 @@ export default {
             return null;
         },
         onRowMouseDown(event) {
-            if (DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon') event.currentTarget.draggable = true;
+            if (DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon' || DomHandler.getAttribute(event.target.parentElement, 'data-pc-section') === 'rowreordericon') event.currentTarget.draggable = true;
             else event.currentTarget.draggable = false;
         },
         onRowDragStart(e) {