Refactor #3832 Refactor #3833 - For TreeTable

2023-04-13 11:53:28 +03:00 · 2023-04-13 11:53:28 +03:00 · 7ee4c0ac83
parent f592ab71d8
commit 7ee4c0ac83
6 changed files with 110 additions and 30 deletions
--- a/api-generator/components/treetable.js
+++ b/api-generator/components/treetable.js
@ -443,23 +443,39 @@ const TreeTableEvents = [
 const TreeTableSlots = [
    {
        name: 'header',
-        description: "Custom content for the component's header"
+        description: "Custom content for the component's header."
    },
    {
        name: 'paginatorstart',
-        description: "Custom content for the component paginator's left side"
+        description: "Custom content for the component paginator's left side."
    },
    {
        name: 'paginatorend',
-        description: "Custom content for the component paginator's right side"
+        description: "Custom content for the component paginator's right side."
    },
    {
        name: 'empty',
-        description: 'Custom content when there is no data to display'
+        description: 'Custom content when there is no data to display.'
    },
    {
        name: 'footer',
-        description: "Custom content for the component's footer"
+        description: "Custom content for the component's footer."
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    },
+    {
+        name: 'togglericon',
+        description: 'Custom toggler icon template.'
+    },
+    {
+        name: 'checkboxicon',
+        description: 'Custom checkbox icon template.'
+    },
+    {
+        name: 'sorticon',
+        description: 'Custom sort icon template.'
    }
 ];

--- a/components/lib/treetable/BodyCell.vue
+++ b/components/lib/treetable/BodyCell.vue
@ -1,24 +1,28 @@
 <template>
    <td :style="containerStyle" :class="containerClass" role="cell">
        <button v-if="columnProp('expander')" v-ripple type="button" class="p-treetable-toggler p-link" @click="toggle" :style="togglerStyle" tabindex="-1">
-            <i :class="togglerIcon"></i>
+            <component :is="templates['togglericon'] ? templates['togglericon'] : expanded ? 'ChevronDownIcon' : 'ChevronRightIcon'" :expanded="expanded" class="p-treetable-toggler-icon" />
        </button>
        <div v-if="checkboxSelectionMode && columnProp('expander')" :class="['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': checkboxFocused }]" @click="toggleCheckbox">
            <div class="p-hidden-accessible">
                <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" />
            </div>
            <div ref="checkboxEl" :class="checkboxClass">
-                <span :class="checkboxIcon"></span>
+                <component :is="templates['checkboxicon'] ? templates['checkboxicon'] : checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" />
            </div>
        </div>
        <component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" />
-        <template v-else
-            ><span>{{ resolveFieldData(node.data, columnProp('field')) }}</span></template
-        >
+        <template v-else>
+            <span>{{ resolveFieldData(node.data, columnProp('field')) }}</span>
+        </template>
    </td>
 </template>

 <script>
+import CheckIcon from 'primevue/icon/check';
+import ChevronDownIcon from 'primevue/icon/chevrondown';
+import ChevronRightIcon from 'primevue/icon/chevronright';
+import MinusIcon from 'primevue/icon/minus';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils } from 'primevue/utils';

@ -61,6 +65,10 @@ export default {
        partialChecked: {
            type: Boolean,
            default: false
+        },
+        templates: {
+            type: null,
+            default: null
        }
    },
    data() {
@ -146,19 +154,19 @@ export default {
                visibility: this.leaf ? 'hidden' : 'visible'
            };
        },
-        togglerIcon() {
-            return ['p-treetable-toggler-icon pi', { 'pi-chevron-right': !this.expanded, 'pi-chevron-down': this.expanded }];
-        },
        checkboxSelectionMode() {
            return this.selectionMode === 'checkbox';
        },
        checkboxClass() {
            return ['p-checkbox-box', { 'p-highlight': this.checked, 'p-focus': this.checkboxFocused, 'p-indeterminate': this.partialChecked }];
-        },
-        checkboxIcon() {
-            return ['p-checkbox-icon', { 'pi pi-check': this.checked, 'pi pi-minus': this.partialChecked }];
        }
    },
+    components: {
+        ChevronRightIcon: ChevronRightIcon,
+        ChevronDownIcon: ChevronDownIcon,
+        CheckIcon: CheckIcon,
+        MinusIcon: MinusIcon
+    },
    directives: {
        ripple: Ripple
    }
--- a/components/lib/treetable/HeaderCell.vue
+++ b/components/lib/treetable/HeaderCell.vue
@ -3,12 +3,17 @@
        <span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart"></span>
        <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')" :class="sortableColumnIcon"></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" />
+        </span>
        <span v-if="isMultiSorted()" class="p-sortable-column-badge">{{ getMultiSortMetaIndex() + 1 }}</span>
    </th>
 </template>

 <script>
+import SortAltIcon from 'primevue/icon/sortalt';
+import SortAmountDownIcon from 'primevue/icon/sortamountdown';
+import SortAmountUpAltIcon from 'primevue/icon/sortamountupalt';
 import { DomHandler, ObjectUtils } from 'primevue/utils';

 export default {
@ -38,6 +43,10 @@ export default {
        sortMode: {
            type: String,
            default: 'single'
+        },
+        templates: {
+            type: Function,
+            default: null
        }
    },
    data() {
@ -163,25 +172,38 @@ export default {
            }

            return [
-                'p-sortable-column-icon pi pi-fw',
                {
-                    'pi-sort-alt': !sorted,
-                    'pi-sort-amount-up-alt': sorted && sortOrder > 0,
-                    'pi-sort-amount-down': sorted && sortOrder < 0
+                    SortAltIcon: !sorted,
+                    SortAmountUpAltIcon: sorted && sortOrder > 0,
+                    SortAmountDownIcon: sorted && sortOrder < 0
+                },
+                {
+                    sorted,
+                    sortOrder
                }
            ];
        },
+        findSortIcon() {
+            const sortIcon = this.sortableColumnIcon[0];
+
+            return Object.keys(sortIcon).find((key) => sortIcon[key] === true);
+        },
        ariaSort() {
            if (this.columnProp('sortable')) {
-                const sortIcon = this.sortableColumnIcon;
+                const sortIcon = this.sortableColumnIcon[0];

-                if (sortIcon[1]['pi-sort-amount-down']) return 'descending';
-                else if (sortIcon[1]['pi-sort-amount-up-alt']) return 'ascending';
+                if (sortIcon['SortAmountDownIcon']) return 'descending';
+                else if (sortIcon['SortAmountUpAltIcon']) return 'ascending';
                else return 'none';
            } else {
                return null;
            }
        }
+    },
+    components: {
+        SortAltIcon: SortAltIcon,
+        SortAmountUpAltIcon: SortAmountUpAltIcon,
+        SortAmountDownIcon: SortAmountDownIcon
    }
 };
 </script>
--- a/components/lib/treetable/TreeTable.d.ts
+++ b/components/lib/treetable/TreeTable.d.ts
@ -382,6 +382,31 @@ export interface TreeTableSlots {
     * Custom empty template.
     */
    empty(): VNode[];
+    /**
+     * Custom loading icon template.
+     */
+    loadingicon(): VNode[];
+    /**
+     * Custom toggler icon template.
+     */
+    togglericon(): VNode[];
+    /**
+     * Custom checkbox icon template.
+     */
+    checkboxicon(): VNode[];
+    /**
+     * Custom sort icon template.
+     */
+    sorticon(scope: {
+        /**
+         * Whether or not column is sorted
+         */
+        sorted: TreeNode;
+        /**
+         * Current sort order
+         */
+        sortOrder: boolean;
+    }): VNode[];
 }

 /**
--- a/components/lib/treetable/TreeTable.vue
+++ b/components/lib/treetable/TreeTable.vue
@ -2,7 +2,9 @@
    <div :class="containerClass" data-scrollselectors=".p-treetable-scrollable-body" role="table">
        <div v-if="loading" class="p-treetable-loading">
            <div class="p-treetable-loading-overlay p-component-overlay">
-                <i :class="loadingIconClass"></i>
+                <slot name="loadingicon">
+                    <component :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="['p-treetable-loading-icon', loadingIcon]" />
+                </slot>
            </div>
        </div>
        <div v-if="$slots.header" class="p-treetable-header">
@ -41,6 +43,7 @@
                                :sortOrder="d_sortOrder"
                                :multiSortMeta="d_multiSortMeta"
                                :sortMode="sortMode"
+                                :templates="$slots['sorticon']"
                                @column-click="onColumnHeaderClick"
                                @column-resizestart="onColumnResizeStart"
                            ></TTHeaderCell>
@ -69,6 +72,7 @@
                            :ariaSetSize="dataToRender.length"
                            :ariaPosInset="index + 1"
                            :tabindex="setTabindex(node, index)"
+                            :templates="$slots"
                            @node-toggle="onNodeToggle"
                            @node-click="onNodeClick"
                            @checkbox-change="onCheckboxChange"
@ -118,6 +122,7 @@

 <script>
 import { FilterService } from 'primevue/api';
+import SpinnerIcon from 'primevue/icon/spinner';
 import Paginator from 'primevue/paginator';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 import FooterCell from './FooterCell.vue';
@ -214,7 +219,7 @@ export default {
        },
        loadingIcon: {
            type: String,
-            default: 'pi pi-spinner'
+            default: undefined
        },
        rowHover: {
            type: Boolean,
@ -970,16 +975,14 @@ export default {

                return data ? data.length : 0;
            }
-        },
-        loadingIconClass() {
-            return ['p-treetable-loading-icon pi-spin', this.loadingIcon];
        }
    },
    components: {
        TTRow: TreeTableRow,
        TTPaginator: Paginator,
        TTHeaderCell: HeaderCell,
-        TTFooterCell: FooterCell
+        TTFooterCell: FooterCell,
+        SpinnerIcon: SpinnerIcon
    }
 };
 </script>
--- a/components/lib/treetable/TreeTableRow.vue
+++ b/components/lib/treetable/TreeTableRow.vue
@ -27,6 +27,7 @@
                :selectionMode="selectionMode"
                :checked="checked"
                :partialChecked="partialChecked"
+                :templates="templates"
                @node-toggle="$emit('node-toggle', $event)"
                @checkbox-toggle="toggleCheckbox"
            ></TTBodyCell>
@ -46,6 +47,7 @@
            :indentation="indentation"
            :ariaPosInset="node.children.indexOf(childNode) + 1"
            :ariaSetSize="node.children.length"
+            :templates="templates"
            @node-toggle="$emit('node-toggle', $event)"
            @node-click="$emit('node-click', $event)"
            @checkbox-change="onCheckboxChange"
@ -104,6 +106,10 @@ export default {
        ariaPosInset: {
            type: Number,
            default: null
+        },
+        templates: {
+            type: null,
+            default: null
        }
    },
    nodeTouched: false,