Refactor #5661 - For TreeTable

components/lib/column/Column.d.ts

@@ -865,6 +865,7 @@ export interface ColumnSlots {
         loadingOptions: ColumnLoadingOptions;
     }): VNode[];
     /**
+     * @deprecated since v4.0. Use 'rowtoggleicon' slot instead.
      * Custom row toggler icon template.
      * @param {Object} scope - row toggler icon slot's params.
      */
@@ -878,6 +879,20 @@ export interface ColumnSlots {
          */
         rowExpanded: boolean;
     }): VNode[];
+    /**
+     * Custom row toggler icon template.
+     * @param {Object} scope - row toggler icon slot's params.
+     */
+    rowtoggleicon(scope: {
+        /**
+         * Style class of the row toggler icon.
+         */
+        class: string;
+        /**
+         * Current row expanded state.
+         */
+        rowExpanded: boolean;
+    }): VNode[];
     /**
      * Custom row checkbox icon template.
      * @param {Object} scope - header row icon slot's params.
@@ -948,6 +963,15 @@ export interface ColumnSlots {
      * Custom row reorder icon template.
      */
     rowreordericon(): VNode[];
+    /**
+     * @deprecated since v4.0. Use 'nodetoggleicon' slot instead.
+     * Custom node toggler icon template.
+     */
+    nodetogglericon(): VNode[];
+    /**
+     * Custom node toggler icon template.
+     */
+    nodetoggleicon(): VNode[];
 }
 
 export interface ColumnEmits {}

components/lib/treetable/BodyCell.vue

@@ -2,11 +2,15 @@
     <td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }" :data-p-frozen-column="columnProp('frozen')">
         <button v-if="columnProp('expander')" v-ripple type="button" :class="cx('rowToggleButton')" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPT('rowToggleButton')" data-pc-group-section="rowactionbutton">
             <template v-if="node.loading && loadingMode === 'icon'">
-                <component v-if="templates['nodetogglericon']" :is="templates['nodetogglericon']" :class="cx('nodetogglericon')" />
+                <component v-if="templates['nodetoggleicon']" :is="templates['nodetoggleicon']" />
-                <SpinnerIcon v-else spin :class="cx('nodetogglericon')" v-bind="ptm('nodetogglericon')" />
+                <!-- TODO: Deprecated since v4.0-->
+                <component v-if="templates['nodetogglericon']" :is="templates['nodetogglericon']" />
+                <SpinnerIcon v-else spin v-bind="ptm('nodetoggleicon')" />
             </template>
             <template v-else>
-                <component v-if="column.children && column.children.rowtogglericon" :is="column.children && column.children.rowtogglericon" :node="node" :expanded="expanded" :class="cx('rowToggleIcon')" />
+                <component v-if="column.children && column.children.rowtoggleicon" :is="column.children.rowtoggleicon" :node="node" :expanded="expanded" :class="cx('rowToggleIcon')" />
+                <!-- TODO: Deprecated since v4.0-->
+                <component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :node="node" :expanded="expanded" :class="cx('rowToggleIcon')" />
                 <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('rowToggleIcon')" v-bind="getColumnPT('rowToggleIcon')" />
                 <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('rowToggleIcon')" v-bind="getColumnPT('rowToggleIcon')" />
             </template>