From 43faf8704d6ff6fb4107f65189ad5dee3fdf81bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 6 Sep 2023 11:50:14 +0300
Subject: [PATCH] Fixed #3921 - DataTable and TreeTable: new Paginator dropdown
 icon slots

---
 components/lib/datatable/DataTable.d.ts       | 20 +++++++++++++++++++
 components/lib/datatable/DataTable.vue        | 12 +++++++++++
 .../lib/paginator/JumpToPageDropdown.vue      |  9 +++++++--
 components/lib/paginator/Paginator.d.ts       | 20 +++++++++++++++++++
 components/lib/paginator/Paginator.vue        |  2 ++
 .../lib/paginator/RowsPerPageDropdown.vue     |  9 +++++++--
 components/lib/treetable/TreeTable.d.ts       | 20 +++++++++++++++++++
 components/lib/treetable/TreeTable.vue        | 12 +++++++++++
 8 files changed, 100 insertions(+), 4 deletions(-)

diff --git a/components/lib/datatable/DataTable.d.ts b/components/lib/datatable/DataTable.d.ts
index 1e67b6c955..009e268e48 100755
--- a/components/lib/datatable/DataTable.d.ts
+++ b/components/lib/datatable/DataTable.d.ts
@@ -1224,6 +1224,26 @@ export interface DataTableSlots {
      * Custom paginator last page link icon template.
      */
     paginatorlastpagelinkicon(): VNode[];
+    /**
+     * Custom paginatorrowsperpagedropdownicon template.
+     * @param {Object} scope - paginator rowsperpagedropdownicon's params.
+     */
+    paginatorrowsperpagedropdownicon(scope: {
+        /**
+         * Style class of the paginator rowsperpagedropdown icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom paginatorjumptopagedropdownicon template.
+     * @param {Object} scope - paginator jumptopagedropdownicon's params.
+     */
+    paginatorjumptopagedropdownicon(scope: {
+        /**
+         * Style class of the paginator jumptopagedropdown icon.
+         */
+        class: string;
+    }): VNode[];
 }
 /**
  * Defines valid emits in Datatable component.
diff --git a/components/lib/datatable/DataTable.vue b/components/lib/datatable/DataTable.vue
index dbe2b22517..aefafabab6 100755
--- a/components/lib/datatable/DataTable.vue
+++ b/components/lib/datatable/DataTable.vue
@@ -45,6 +45,12 @@
             <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
                 <slot name="paginatorlastpagelinkicon"></slot>
             </template>
+            <template v-if="$slots.paginatorjumptopagedropdownicon" #jumptopagedropdownicon>
+                <slot name="paginatorjumptopagedropdownicon"></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')">
             <DTVirtualScroller
@@ -257,6 +263,12 @@
             <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
                 <slot name="paginatorlastpagelinkicon"></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 ref="resizeHelper" :class="cx('resizeHelper')" style="display: none" v-bind="ptm('resizeHelper')"></div>
         <span v-if="reorderableColumns" ref="reorderIndicatorUp" :class="cx('reorderIndicatorUp')" style="position: absolute; display: none" v-bind="ptm('reorderIndicatorUp')">
diff --git a/components/lib/paginator/JumpToPageDropdown.vue b/components/lib/paginator/JumpToPageDropdown.vue
index cdaf0f6e54..9fa40a0e0f 100644
--- a/components/lib/paginator/JumpToPageDropdown.vue
+++ b/components/lib/paginator/JumpToPageDropdown.vue
@@ -11,7 +11,11 @@
         :pt="ptm('jumpToPageDropdown')"
         data-pc-section="jumptopagedropdown"
         data-pc-group-section="pagedropdown"
-    ></JTPDropdown>
+    >
+        <template v-if="templates['jumptopagedropdownicon']" #dropdownicon="slotProps">
+            <component :is="templates['jumptopagedropdownicon']" :class="slotProps.class" />
+        </template>
+    </JTPDropdown>
 </template>
 
 <script>
@@ -26,7 +30,8 @@ export default {
     props: {
         page: Number,
         pageCount: Number,
-        disabled: Boolean
+        disabled: Boolean,
+        templates: null
     },
     methods: {
         onChange(value) {
diff --git a/components/lib/paginator/Paginator.d.ts b/components/lib/paginator/Paginator.d.ts
index ae0c33bb95..10503bd8cd 100755
--- a/components/lib/paginator/Paginator.d.ts
+++ b/components/lib/paginator/Paginator.d.ts
@@ -302,6 +302,26 @@ export interface PaginatorSlots {
      * Custom last page link icon template.
      */
     lastpagelinkicon(): VNode[];
+    /**
+     * Custom rowsperpagedropdownicon template.
+     * @param {Object} scope - rowsperpagedropdownicon's params.
+     */
+    rowsperpagedropdownicon(scope: {
+        /**
+         * Style class of the rowsperpagedropdown icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom jumptopagedropdownicon template.
+     * @param {Object} scope - jumptopagedropdownicon's params.
+     */
+    jumptopagedropdownicon(scope: {
+        /**
+         * Style class of the jumptopagedropdown icon.
+         */
+        class: string;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/paginator/Paginator.vue b/components/lib/paginator/Paginator.vue
index e8c624eab1..43e4789eb1 100755
--- a/components/lib/paginator/Paginator.vue
+++ b/components/lib/paginator/Paginator.vue
@@ -30,6 +30,7 @@
                     :options="rowsPerPageOptions"
                     @rows-change="onRowChange($event)"
                     :disabled="empty"
+                    :templates="$slots"
                     :unstyled="unstyled"
                     :pt="pt"
                 />
@@ -40,6 +41,7 @@
                     :pageCount="pageCount"
                     @page-change="changePage($event)"
                     :disabled="empty"
+                    :templates="$slots"
                     :unstyled="unstyled"
                     :pt="pt"
                 />
diff --git a/components/lib/paginator/RowsPerPageDropdown.vue b/components/lib/paginator/RowsPerPageDropdown.vue
index 02f9b90e15..7e8bec5c49 100755
--- a/components/lib/paginator/RowsPerPageDropdown.vue
+++ b/components/lib/paginator/RowsPerPageDropdown.vue
@@ -11,7 +11,11 @@
         :pt="ptm('rowPerPageDropdown')"
         data-pc-section="rowperpagedropdown"
         data-pc-group-section="pagedropdown"
-    ></RPPDropdown>
+    >
+        <template v-if="templates['rowsperpagedropdownicon']" #dropdownicon="slotProps">
+            <component :is="templates['rowsperpagedropdownicon']" :class="slotProps.class" />
+        </template>
+    </RPPDropdown>
 </template>
 
 <script>
@@ -26,7 +30,8 @@ export default {
     props: {
         options: Array,
         rows: Number,
-        disabled: Boolean
+        disabled: Boolean,
+        templates: null
     },
     methods: {
         onChange(value) {
diff --git a/components/lib/treetable/TreeTable.d.ts b/components/lib/treetable/TreeTable.d.ts
index 028e074981..e96e7fed1b 100755
--- a/components/lib/treetable/TreeTable.d.ts
+++ b/components/lib/treetable/TreeTable.d.ts
@@ -655,6 +655,26 @@ export interface TreeTableSlots {
      * Custom paginator last page link icon template.
      */
     paginatorlastpagelinkicon(): VNode[];
+    /**
+     * Custom paginatorrowsperpagedropdownicon template.
+     * @param {Object} scope - paginator rowsperpagedropdownicon's params.
+     */
+    paginatorrowsperpagedropdownicon(scope: {
+        /**
+         * Style class of the paginator rowsperpagedropdown icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom paginatorjumptopagedropdownicon template.
+     * @param {Object} scope - paginator jumptopagedropdownicon's params.
+     */
+    paginatorjumptopagedropdownicon(scope: {
+        /**
+         * Style class of the paginator jumptopagedropdown icon.
+         */
+        class: string;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/treetable/TreeTable.vue b/components/lib/treetable/TreeTable.vue
index 53caa185f9..1af24ff378 100755
--- a/components/lib/treetable/TreeTable.vue
+++ b/components/lib/treetable/TreeTable.vue
@@ -44,6 +44,12 @@
             <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
                 <slot name="paginatorlastpagelinkicon"></slot>
             </template>
+            <template v-if="$slots.paginatorjumptopagedropdownicon" #jumptopagedropdownicon>
+                <slot name="paginatorjumptopagedropdownicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorrowsperpagedropdownicon" #rowsperpagedropdownicon="slotProps">
+                <slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
+            </template>
         </TTPaginator>
         <div :class="cx('wrapper')" :style="{ maxHeight: scrollHeight }" v-bind="ptm('wrapper')">
             <table ref="table" role="table" v-bind="{ ...tableProps, ...ptm('table') }">
@@ -144,6 +150,12 @@
             <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
                 <slot name="paginatorlastpagelinkicon"></slot>
             </template>
+            <template v-if="$slots.paginatorjumptopagedropdownicon" #jumptopagedropdownicon>
+                <slot name="paginatorjumptopagedropdownicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorrowsperpagedropdownicon" #rowsperpagedropdownicon="slotProps">
+                <slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
+            </template>
         </TTPaginator>
         <div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')">
             <slot name="footer"></slot>