Refactor #3832 - Update DataTable & TreeTable

2023-04-13 21:05:42 +03:00 · 2023-04-13 21:05:42 +03:00 · 62ddc47f4d
parent 661d4dc718
commit 62ddc47f4d
14 changed files with 60 additions and 26 deletions
--- 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>
--- 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
--- 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
        }
    },
--- 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
        }
    },
--- 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
        }
    },
--- 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
        }
    },
--- 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
        }
    },
--- 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
        }
    },
--- 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
        }
    },
--- 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() {
--- 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>
--- 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
        }
    },
--- 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 }">
--- 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 }">