Fixed #6534 - TreeSelect: new option slot

packages/primevue/src/tree/Tree.d.ts

@@ -357,6 +357,10 @@ export interface TreeSlots {
          * Selection state
          */
         selected: boolean;
+        /**
+         * Expanded state
+         */
+        expanded: boolean;
     }): VNode[];
     /**
      * Custom loading icon template.

packages/primevue/src/tree/TreeNode.vue

@@ -46,7 +46,7 @@
             <component v-if="templates['nodeicon']" :is="templates['nodeicon']" :node="node" :class="[cx('nodeIcon')]" v-bind="getPTOptions('nodeIcon')"></component>
             <span v-else :class="[cx('nodeIcon'), node.icon]" v-bind="getPTOptions('nodeIcon')"></span>
             <span :class="cx('nodeLabel')" v-bind="getPTOptions('nodeLabel')" @keydown.stop>
-                <component v-if="templates[node.type] || templates['default']" :is="templates[node.type] || templates['default']" :node="node" :selected="checkboxMode ? checked : selected" />
+                <component v-if="templates[node.type] || templates['default']" :is="templates[node.type] || templates['default']" :node="node" :expanded="expanded" :selected="checkboxMode ? checked : selected" />
                 <template v-else>{{ label(node) }}</template>
             </span>
         </div>

packages/primevue/src/treeselect/TreeSelect.d.ts

@@ -343,6 +343,24 @@ export interface TreeSelectSlots {
          */
         placeholder: string;
     }): VNode[];
+    /**
+     * Custom option template.
+     * @param {Object} scope - option slot's params.
+     */
+    option(scope: {
+        /**
+         * Current node
+         */
+        node: TreeNode | any;
+        /**
+         * Selection state
+         */
+        selected: boolean;
+        /**
+         * Expanded state
+         */
+        expanded: boolean;
+    }): VNode[];
     /**
      * Custom header template.
      * @param {Object} scope - header slot's params.

packages/primevue/src/treeselect/TreeSelect.vue

@@ -84,15 +84,18 @@
                             :unstyled="unstyled"
                             :pt="ptm('pcTree')"
                         >
-                            <template v-if="$slots.itemtoggleicon" #toggleicon="iconProps">
+                            <template v-if="$slots.option" #default="optionSlotProps">
-                                <slot name="itemtoggleicon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />
+                                <slot name="option" :node="optionSlotProps.node" :expanded="optionSlotProps.expanded" :selected="optionSlotProps.selected" />
+                            </template>
+                            <template v-if="$slots.itemtoggleicon" #toggleicon="iconSlotProps">
+                                <slot name="itemtoggleicon" :node="iconSlotProps.node" :expanded="iconSlotProps.expanded" :class="iconSlotProps.class" />
                             </template>
                             <!--TODO: itemtogglericon deprecated since v4.0-->
-                            <template v-else-if="$slots.itemtogglericon" #togglericon="iconProps">
+                            <template v-else-if="$slots.itemtogglericon" #togglericon="iconSlotProps">
-                                <slot name="itemtogglericon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />
+                                <slot name="itemtogglericon" :node="iconSlotProps.node" :expanded="iconSlotProps.expanded" :class="iconSlotProps.class" />
                             </template>
-                            <template v-if="$slots.itemcheckboxicon" #checkboxicon="iconProps">
+                            <template v-if="$slots.itemcheckboxicon" #checkboxicon="iconSlotProps">
-                                <slot name="itemcheckboxicon" :checked="iconProps.checked" :partialChecked="iconProps.partialChecked" :class="iconProps.class" />
+                                <slot name="itemcheckboxicon" :checked="iconSlotProps.checked" :partialChecked="iconSlotProps.partialChecked" :class="iconSlotProps.class" />
                             </template>
                         </TSTree>
                         <div v-if="emptyOptions && !loading" :class="cx('emptyMessage')" v-bind="ptm('emptyMessage')">