Refactor #3832 Refactor #3833 - For TreeTable

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.'
     }
 ];
 

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
+        <template v-else>
-            ><span>{{ resolveFieldData(node.data, columnProp('field')) }}</span></template
+            <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
     }

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,
+                    SortAltIcon: !sorted,
-                    'pi-sort-amount-up-alt': sorted && sortOrder > 0,
+                    SortAmountUpAltIcon: sorted && sortOrder > 0,
-                    'pi-sort-amount-down': 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';
+                if (sortIcon['SortAmountDownIcon']) return 'descending';
-                else if (sortIcon[1]['pi-sort-amount-up-alt']) return 'ascending';
+                else if (sortIcon['SortAmountUpAltIcon']) return 'ascending';
                 else return 'none';
             } else {
                 return null;
             }
         }
+    },
+    components: {
+        SortAltIcon: SortAltIcon,
+        SortAmountUpAltIcon: SortAmountUpAltIcon,
+        SortAmountDownIcon: SortAmountDownIcon
     }
 };
 </script>

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[];
 }
 
 /**

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>

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,