From 62ddc47f4dcf1bf894cb949d64aa796b66d4373e 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: Thu, 13 Apr 2023 21:05:42 +0300
Subject: [PATCH] Refactor #3832 - Update DataTable & TreeTable

---
 components/lib/datatable/BodyCell.vue       |  6 +--
 components/lib/datatable/ColumnFilter.vue   | 45 ++++++++++++++++-----
 components/lib/datatable/FooterCell.vue     |  2 +-
 components/lib/datatable/HeaderCell.vue     |  2 +-
 components/lib/datatable/HeaderCheckbox.vue |  2 +-
 components/lib/datatable/RowCheckbox.vue    |  2 +-
 components/lib/datatable/TableFooter.vue    |  2 +-
 components/lib/datatable/TableHeader.vue    |  2 +-
 components/lib/treetable/BodyCell.vue       |  2 +-
 components/lib/treetable/HeaderCell.vue     |  6 +--
 components/lib/treetable/TreeTable.vue      |  1 -
 components/lib/treetable/TreeTableRow.vue   |  2 +-
 doc/datatable/filter/AdvancedFilterDoc.vue  |  6 +++
 doc/datatable/filter/BasicFilterDoc.vue     |  6 +++
 14 files changed, 60 insertions(+), 26 deletions(-)

diff --git a/components/lib/datatable/BodyCell.vue b/components/lib/datatable/BodyCell.vue
index 9263f7ff6..98686188a 100755
--- a/components/lib/datatable/BodyCell.vue
+++ b/components/lib/datatable/BodyCell.vue
@@ -40,13 +40,13 @@
         </template>
         <template v-else-if="editMode === 'row' && columnProp('rowEditor')">
             <button v-if="!d_editing" v-ripple class="p-row-editor-init p-link" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit">
-                <component :is="(column.children && !column.children.roweditoriniticon) || 'PencilIcon'" class="p-row-editor-init-icon pi-fw" />
+                <component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" class="p-row-editor-init-icon pi-fw" />
             </button>
             <button v-if="d_editing" v-ripple class="p-row-editor-save p-link" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave">
-                <component :is="(column.children && !column.children.roweditorsaveicon) || 'CheckIcon'" class="p-row-editor-save-icon pi-fw" />
+                <component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" class="p-row-editor-save-icon pi-fw" />
             </button>
             <button v-if="d_editing" v-ripple class="p-row-editor-cancel p-link" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel">
-                <component :is="(column.children && !column.children.roweditorcancelicon) || 'TimesIcon'" class="p-row-editor-cancel-icon pi-fw" />
+                <component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" class="p-row-editor-cancel-icon pi-fw" />
             </button>
         </template>
         <template v-else>{{ resolveFieldData() }}</template>
diff --git a/components/lib/datatable/ColumnFilter.vue b/components/lib/datatable/ColumnFilter.vue
index 575e97c2a..546d91617 100644
--- a/components/lib/datatable/ColumnFilter.vue
+++ b/components/lib/datatable/ColumnFilter.vue
@@ -176,15 +176,42 @@ export default {
             type: Number,
             default: 2
         },
-        filterElement: null,
-        filterHeaderTemplate: null,
-        filterFooterTemplate: null,
-        filterClearTemplate: null,
-        filterApplyTemplate: null,
-        filterIconTemplate: null,
-        filterAddIconTemplate: null,
-        filterRemoveIconTemplate: null,
-        filterClearIconTemplate: null,
+        filterElement: {
+            type: Function,
+            default: null
+        },
+        filterHeaderTemplate: {
+            type: Function,
+            default: null
+        },
+        filterFooterTemplate: {
+            type: Function,
+            default: null
+        },
+        filterClearTemplate: {
+            type: Function,
+            default: null
+        },
+        filterApplyTemplate: {
+            type: Function,
+            default: null
+        },
+        filterIconTemplate: {
+            type: Function,
+            default: null
+        },
+        filterAddIconTemplate: {
+            type: Function,
+            default: null
+        },
+        filterRemoveIconTemplate: {
+            type: Function,
+            default: null
+        },
+        filterClearIconTemplate: {
+            type: Function,
+            default: null
+        },
         filters: {
             type: Object,
             default: null
diff --git a/components/lib/datatable/FooterCell.vue b/components/lib/datatable/FooterCell.vue
index 2f7ae600f..1b619a2ef 100644
--- a/components/lib/datatable/FooterCell.vue
+++ b/components/lib/datatable/FooterCell.vue
@@ -12,7 +12,7 @@ export default {
     name: 'FooterCell',
     props: {
         column: {
-            type: null,
+            type: Object,
             default: null
         }
     },
diff --git a/components/lib/datatable/HeaderCell.vue b/components/lib/datatable/HeaderCell.vue
index 15f3686e3..20e6a2226 100644
--- a/components/lib/datatable/HeaderCell.vue
+++ b/components/lib/datatable/HeaderCell.vue
@@ -157,7 +157,7 @@ export default {
             default: null
         },
         headerCheckboxIconTemplate: {
-            type: null,
+            type: Function,
             default: null
         }
     },
diff --git a/components/lib/datatable/HeaderCheckbox.vue b/components/lib/datatable/HeaderCheckbox.vue
index 43ff66745..071a11581 100755
--- a/components/lib/datatable/HeaderCheckbox.vue
+++ b/components/lib/datatable/HeaderCheckbox.vue
@@ -20,7 +20,7 @@ export default {
         checked: null,
         disabled: null,
         headerCheckboxIconTemplate: {
-            type: null,
+            type: Function,
             default: null
         }
     },
diff --git a/components/lib/datatable/RowCheckbox.vue b/components/lib/datatable/RowCheckbox.vue
index 433360637..2fe176fed 100755
--- a/components/lib/datatable/RowCheckbox.vue
+++ b/components/lib/datatable/RowCheckbox.vue
@@ -20,7 +20,7 @@ export default {
         value: null,
         checked: null,
         rowCheckboxIconTemplate: {
-            type: null,
+            type: Function,
             default: null
         }
     },
diff --git a/components/lib/datatable/TableFooter.vue b/components/lib/datatable/TableFooter.vue
index 49392dafe..1c66cd57c 100755
--- a/components/lib/datatable/TableFooter.vue
+++ b/components/lib/datatable/TableFooter.vue
@@ -27,7 +27,7 @@ export default {
             default: null
         },
         columns: {
-            type: null,
+            type: Object,
             default: null
         }
     },
diff --git a/components/lib/datatable/TableHeader.vue b/components/lib/datatable/TableHeader.vue
index 8fb02da17..9cba256ab 100755
--- a/components/lib/datatable/TableHeader.vue
+++ b/components/lib/datatable/TableHeader.vue
@@ -209,7 +209,7 @@ export default {
             default: null
         },
         headerCheckboxIconTemplate: {
-            type: null,
+            type: Function,
             default: null
         }
     },
diff --git a/components/lib/treetable/BodyCell.vue b/components/lib/treetable/BodyCell.vue
index 4c5045e80..7f14530fd 100644
--- a/components/lib/treetable/BodyCell.vue
+++ b/components/lib/treetable/BodyCell.vue
@@ -67,7 +67,7 @@ export default {
             default: false
         },
         templates: {
-            type: null,
+            type: Object,
             default: null
         }
     },
diff --git a/components/lib/treetable/HeaderCell.vue b/components/lib/treetable/HeaderCell.vue
index 5e09ec1d7..00fbe97e7 100644
--- a/components/lib/treetable/HeaderCell.vue
+++ b/components/lib/treetable/HeaderCell.vue
@@ -4,7 +4,7 @@
         <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
         <span v-if="columnProp('header')" class="p-column-title">{{ columnProp('header') }}</span>
         <span v-if="columnProp('sortable')">
-            <component :is="templates ? templates : findSortIcon" :sorted="sortableColumnIcon[1].sorted" :sortOrder="sortableColumnIcon[1].sortOrder" class="p-sortable-column-icon pi-fw" />
+            <component :is="(column.children && column.children.sorticon) || findSortIcon" :sorted="sortableColumnIcon[1].sorted" :sortOrder="sortableColumnIcon[1].sortOrder" class="p-sortable-column-icon pi-fw" />
         </span>
         <span v-if="isMultiSorted()" class="p-sortable-column-badge">{{ getMultiSortMetaIndex() + 1 }}</span>
     </th>
@@ -43,10 +43,6 @@ export default {
         sortMode: {
             type: String,
             default: 'single'
-        },
-        templates: {
-            type: Function,
-            default: null
         }
     },
     data() {
diff --git a/components/lib/treetable/TreeTable.vue b/components/lib/treetable/TreeTable.vue
index a00f23a0c..7508cb58f 100755
--- a/components/lib/treetable/TreeTable.vue
+++ b/components/lib/treetable/TreeTable.vue
@@ -43,7 +43,6 @@
                                 :sortOrder="d_sortOrder"
                                 :multiSortMeta="d_multiSortMeta"
                                 :sortMode="sortMode"
-                                :templates="$slots['sorticon']"
                                 @column-click="onColumnHeaderClick"
                                 @column-resizestart="onColumnResizeStart"
                             ></TTHeaderCell>
diff --git a/components/lib/treetable/TreeTableRow.vue b/components/lib/treetable/TreeTableRow.vue
index a2deab432..f73175394 100755
--- a/components/lib/treetable/TreeTableRow.vue
+++ b/components/lib/treetable/TreeTableRow.vue
@@ -108,7 +108,7 @@ export default {
             default: null
         },
         templates: {
-            type: null,
+            type: Object,
             default: null
         }
     },
diff --git a/doc/datatable/filter/AdvancedFilterDoc.vue b/doc/datatable/filter/AdvancedFilterDoc.vue
index a5c018c71..71abe4767 100644
--- a/doc/datatable/filter/AdvancedFilterDoc.vue
+++ b/doc/datatable/filter/AdvancedFilterDoc.vue
@@ -15,6 +15,9 @@
             </template>
             <template #empty> No customers found. </template>
             <template #loading> Loading customers data. Please wait. </template>
+            <template #filtericon>
+                <i class="pi pi-discord" />
+            </template>
             <Column field="name" header="Name" style="min-width: 12rem">
                 <template #body="{ data }">
                     {{ data.name }}
@@ -22,6 +25,9 @@
                 <template #filter="{ filterModel }">
                     <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
                 </template>
+                <template #filtericon>
+                    <i class="pi pi-discord" />
+                </template>
             </Column>
             <Column header="Country" filterField="country.name" style="min-width: 12rem">
                 <template #body="{ data }">
diff --git a/doc/datatable/filter/BasicFilterDoc.vue b/doc/datatable/filter/BasicFilterDoc.vue
index d8168b984..7bc8c1af6 100644
--- a/doc/datatable/filter/BasicFilterDoc.vue
+++ b/doc/datatable/filter/BasicFilterDoc.vue
@@ -18,6 +18,9 @@
             </template>
             <template #empty> No customers found. </template>
             <template #loading> Loading customers data. Please wait. </template>
+            <template #filtericon>
+                <i class="pi pi-discord" />
+            </template>
             <Column field="name" header="Name" style="min-width: 12rem">
                 <template #body="{ data }">
                     {{ data.name }}
@@ -25,6 +28,9 @@
                 <template #filter="{ filterModel, filterCallback }">
                     <InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter" placeholder="Search by name" />
                 </template>
+                <template #filtericon>
+                    <i class="pi pi-discord" />
+                </template>
             </Column>
             <Column header="Country" filterField="country.name" style="min-width: 12rem">
                 <template #body="{ data }">