Refactor #5785

api-generator/components/column.js

@@ -301,11 +301,7 @@ const ColumnSlots = [
         description: 'Custom loading template.'
     },
     {
-        name: 'rowtogglericon',
+        name: 'rowtoggleicon',
-        description: 'Custom row toggler icon template.'
-    },
-    {
-        name: 'rowtogglericon',
         description: 'Custom row toggler icon template.'
     },
     {

api-generator/components/datatable.js

@@ -1177,7 +1177,7 @@ const DataTableSlots = [
         description: 'Custom reorder indicator down icon template.'
     },
     {
-        name: 'rowgrouptogglericon',
+        name: 'rowgrouptoggleicon',
         description: 'Custom rowgroup toggler icon template.'
     },
     {

api-generator/components/fieldset.js

@@ -62,7 +62,7 @@ const FieldsetSlots = [
         description: 'Custom legend template.'
     },
     {
-        name: 'togglericon',
+        name: 'toggleicon',
         description: 'Custom toggler icon template.'
     }
 ];

api-generator/components/organizationchart.js

@@ -92,7 +92,7 @@ const OrganizationChartEvents = [
 
 const OrganizationChartSlots = [
     {
-        name: 'togglericon',
+        name: 'toggleicon',
         description: 'Custom toggler icon template.'
     }
 ];

api-generator/components/panel.js

@@ -66,7 +66,7 @@ const PanelSlots = [
         description: "Custom content for the header's icon."
     },
     {
-        name: 'togglericon',
+        name: 'toggleicon',
         description: "Custom content for the component's toggler icon."
     },
     {

api-generator/components/tree.js

@@ -155,7 +155,7 @@ const TreeSlots = [
         description: 'Custom search icon template.'
     },
     {
-        name: 'togglericon',
+        name: 'toggleicon',
         description: 'Custom toggler icon template.'
     },
     {

api-generator/components/treeselect.js

@@ -224,7 +224,7 @@ const TreeSelectSlots = [
         description: 'Custom content for the dropdown indicator'
     },
     {
-        name: 'itemtogglericon',
+        name: 'itemtoggleicon',
         description: 'Custom item toggler icon template.'
     },
     {

api-generator/components/treetable.js

@@ -478,7 +478,7 @@ const TreeTableSlots = [
         description: 'Custom loading icon template.'
     },
     {
-        name: 'togglericon',
+        name: 'toggleicon',
         description: 'Custom toggler icon template.'
     },
     {

components/lib/datatable/DataTable.vue

@@ -792,7 +792,7 @@ export default {
             this.rowTouched = false;
 
             if (focusedItem) {
-                if (event.target?.getAttribute('data-pc-section') === 'rowtogglericon' || event.target?.parentElement?.getAttribute('data-pc-section') === 'rowtogglericon') return;
+                if (event.target?.getAttribute('data-pc-section') === 'rowtoggleicon' || event.target?.parentElement?.getAttribute('data-pc-section') === 'rowtoggleicon') return;
 
                 const targetRow = event.target?.closest('tr[data-p-selectable-row="true"]');
 

components/lib/organizationchart/OrganizationChart.d.ts

@@ -293,6 +293,7 @@ export interface OrganizationChartSlots {
      */
     [key: string]: (node: any) => VNode[];
     /**
+     * @deprecated since v4.0. Use 'toggleicon' slot instead.
      * Custom toggler icon template.
      * @param {Object} scope - togglericon slot's params.
      */
@@ -302,6 +303,16 @@ export interface OrganizationChartSlots {
          */
         expanded: boolean;
     }): VNode[];
+    /**
+     * Custom toggler icon template.
+     * @param {Object} scope - togglericon slot's params.
+     */
+    toggleicon(scope: {
+        /**
+         * Curent state of the node
+         */
+        expanded: boolean;
+    }): VNode[];
 }
 
 /**

components/lib/organizationchart/OrganizationChartNode.vue

@@ -6,7 +6,8 @@
                     <div :class="[cx('node'), node.styleClass]" @click="onNodeClick" v-bind="getPTOptions('node')">
                         <component :is="templates[node.type] || templates['default']" :node="node" />
                         <a v-if="toggleable" tabindex="0" :class="cx('nodeToggleButton')" @click="toggleNode" @keydown="onKeydown" v-bind="getPTOptions('nodeToggleButton')">
-                            <component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" :class="cx('nodeToggleButtonIcon')" v-bind="getPTOptions('nodeToggleButtonIcon')" />
+                            <!--TODO: togglericon deprecated since v4.0-->
+                            <component v-if="templates.toggleicon || templates.togglericon" :is="templates.toggleicon || templates.togglericon" :expanded="expanded" :class="cx('nodeToggleButtonIcon')" v-bind="getPTOptions('nodeToggleButtonIcon')" />
                             <component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" :class="cx('nodeToggleButtonIcon')" v-bind="getPTOptions('nodeToggleButtonIcon')" />
                         </a>
                     </div>

components/lib/tree/Tree.d.ts

@@ -378,8 +378,9 @@ export interface TreeSlots {
         class: string;
     }): VNode[];
     /**
-     * Custom toggler icon template.
+     * @deprecated since v4.0. Use 'nodetoggleicon' slot instead.
-     * @param {Object} scope - togglericon slot's params.
+     * Custom toggle icon template.
+     * @param {Object} scope - toggleicon slot's params.
      */
     togglericon(scope: {
         /**
@@ -391,6 +392,35 @@ export interface TreeSlots {
          */
         expanded: boolean;
     }): VNode[];
+    /**
+     * @deprecated since v4.0. Use 'nodetoggleicon' slot instead.
+     * Custom node toggle icon template.
+     * @param {Object} scope - toggleicon slot's params.
+     */
+    nodetogglericon(scope: {
+        /**
+         * Tree node instance
+         */
+        node: TreeNode;
+        /**
+         * Expanded state of the node
+         */
+        expanded: boolean;
+    }): VNode[];
+    /**
+     * Custom node toggle icon template.
+     * @param {Object} scope - toggleicon slot's params.
+     */
+    nodetoggleicon(scope: {
+        /**
+         * Tree node instance
+         */
+        node: TreeNode;
+        /**
+         * Expanded state of the node
+         */
+        expanded: boolean;
+    }): VNode[];
     /**
      * Custom node icon template.
      * @param {Object} scope - nodeicon slot's params.

components/lib/tree/TreeNode.vue

@@ -17,11 +17,13 @@
         <div :class="cx('nodeContent')" @click="onClick" @touchend="onTouchEnd" :style="node.style" v-bind="getPTOptions('nodeContent')" :data-p-selected="checkboxMode ? checked : selected" :data-p-selectable="selectable">
             <button v-ripple type="button" :class="cx('nodeToggleButton')" @click="toggle" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('nodeToggleButton')">
                 <template v-if="node.loading && loadingMode === 'icon'">
-                    <component v-if="templates['nodetogglericon']" :is="templates['nodetogglericon']" :class="cx('nodetogglericon')" />
+                    <!-- TODO: nodetogglericon deprecated since v4.0-->
-                    <SpinnerIcon v-else spin :class="cx('nodetogglericon')" v-bind="ptm('nodetogglericon')" />
+                    <component v-if="templates['nodetoggleicon'] || templates['nodetogglericon']" :is="templates['nodetoggleicon'] || templates['nodetogglericon']" :class="cx('nodeToggleIcon')" />
+                    <SpinnerIcon v-else spin :class="cx('nodetogglericon')" v-bind="ptm('nodeToggleIcon')" />
                 </template>
                 <template v-else>
-                    <component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" :class="cx('nodeToggleIcon')" />
+                    <!-- TODO: togglericon deprecated since v4.0-->
+                    <component v-if="templates['nodetoggleicon'] || templates['togglericon']" :is="templates['nodetoggleicon'] || templates['togglericon']" :node="node" :expanded="expanded" :class="cx('nodeToggleIcon')" />
                     <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('nodeToggleIcon')" v-bind="getPTOptions('nodeToggleIcon')" />
                     <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('nodeToggleIcon')" v-bind="getPTOptions('nodeToggleIcon')" />
                 </template>

components/lib/tree/style/TreeStyle.d.ts

@@ -50,10 +50,6 @@ export enum TreeClasses {
      * Class name of the node toggle icon element
      */
     nodeToggleIcon = 'p-tree-node-toggle-icon',
-    /**
-     * Class name of the node toggler icon element
-     */
-    nodeTogglerIcon = 'p-tree-node-toggler-icon',
     /**
      * Class name of the node checkbox element
      */

components/lib/tree/style/TreeStyle.js

@@ -176,7 +176,6 @@ const classes = {
     ],
     nodeToggleButton: 'p-tree-node-toggle-button',
     nodeToggleIcon: 'p-tree-node-toggle-icon',
-    nodeTogglerIcon: 'p-tree-node-toggler-icon', //TODO: discuss
     nodeCheckbox: 'p-tree-node-checkbox',
     nodeIcon: 'p-tree-node-icon',
     nodeLabel: 'p-tree-node-label',

components/lib/treeselect/TreeSelect.d.ts

@@ -346,6 +346,7 @@ export interface TreeSelectSlots {
         class: string;
     }): VNode[];
     /**
+     * @deprecated since v4.0. Use 'itemtoggleicon' slot instead.
      * Custom item toggler icon template.
      * @param {Object} scope - item toggler icon slot's params.
      */
@@ -359,6 +360,20 @@ export interface TreeSelectSlots {
          */
         expanded: TreeNode[];
     }): VNode[];
+    /**
+     * Custom item toggle icon template.
+     * @param {Object} scope - item toggle icon slot's params.
+     */
+    itemtoggleicon(scope: {
+        /**
+         * Node instance
+         */
+        node: TreeNode | any;
+        /**
+         * Expanded state of the node
+         */
+        expanded: TreeNode[];
+    }): VNode[];
     /**
      * Custom item checkbox icon template.
      * @param {Object} scope - item checkbox icon slot's params.

components/lib/treeselect/TreeSelect.vue

@@ -77,7 +77,11 @@
                             :unstyled="unstyled"
                             :pt="ptm('pcTree')"
                         >
-                            <template v-if="$slots.itemtogglericon" #togglericon="iconProps">
+                            <template v-if="$slots.itemtoggleicon" #toggleicon="iconProps">
+                                <slot name="itemtoggleicon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />
+                            </template>
+                            <!--TODO: itemtogglericon deprecated since v4.0-->
+                            <template v-else-if="$slots.itemtogglericon" #togglericon="iconProps">
                                 <slot name="itemtogglericon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />
                             </template>
                             <template v-if="$slots.itemcheckboxicon" #checkboxicon="iconProps">

doc/common/apidoc/index.json

@@ -51794,6 +51794,20 @@
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "",
+                            "deprecated": "since v4.0. Use 'toggleicon' slot instead.\nCustom toggler icon template."
+                        },
+                        {
+                            "name": "toggleicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">expanded</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Curent state of the node</span>\n }",
+                                    "description": "togglericon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom toggler icon template."
                         }
                     ]
@@ -102515,11 +102529,39 @@
                                     "name": "scope",
                                     "optional": false,
                                     "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">node</span>: <span class=\"doc-option-parameter-type\">TreeNode</span>, <span class=\"doc-option-parameter-type\">// Tree node instance</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">expanded</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Expanded state of the node</span>\n }",
-                                    "description": "togglericon slot's params."
+                                    "description": "toggleicon slot's params."
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
-                            "description": "Custom toggler icon template."
+                            "description": "",
+                            "deprecated": "since v4.0. Use 'nodetoggleicon' slot instead.\nCustom toggle icon template."
+                        },
+                        {
+                            "name": "nodetogglericon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">node</span>: <span class=\"doc-option-parameter-type\">TreeNode</span>, <span class=\"doc-option-parameter-type\">// Tree node instance</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">expanded</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Expanded state of the node</span>\n }",
+                                    "description": "toggleicon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "",
+                            "deprecated": "since v4.0. Use 'nodetoggleicon' slot instead.\nCustom node toggle icon template."
+                        },
+                        {
+                            "name": "nodetoggleicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">node</span>: <span class=\"doc-option-parameter-type\">TreeNode</span>, <span class=\"doc-option-parameter-type\">// Tree node instance</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">expanded</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Expanded state of the node</span>\n }",
+                                    "description": "toggleicon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom node toggle icon template."
                         },
                         {
                             "name": "nodeicon",
@@ -102855,13 +102897,6 @@
                             "value": "\"p-tree-node-toggle-icon\"",
                             "description": "Class name of the node toggle icon element"
                         },
-                        {
-                            "name": "nodeTogglerIcon",
-                            "optional": false,
-                            "readonly": false,
-                            "value": "\"p-tree-node-toggler-icon\"",
-                            "description": "Class name of the node toggler icon element"
-                        },
                         {
                             "name": "nodeCheckbox",
                             "optional": false,
@@ -103585,7 +103620,21 @@
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
-                            "description": "Custom item toggler icon template."
+                            "description": "",
+                            "deprecated": "since v4.0. Use 'itemtoggleicon' slot instead.\nCustom item toggler icon template."
+                        },
+                        {
+                            "name": "itemtoggleicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">node</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Node instance</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">expanded</span>: <span class=\"doc-option-parameter-type\">TreeNode</span>, <span class=\"doc-option-parameter-type\">// Expanded state of the node</span>\n }",
+                                    "description": "item toggle icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom item toggle icon template."
                         },
                         {
                             "name": "itemcheckboxicon",