Refactor #3832 Refactor #3833 - For TreeSelect: Tree icon support

primefaces · Apr 17, 2023 · c0a4677 · c0a4677
1 parent 7b9255c
commit c0a4677
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 1 deletion.
diff --git a/api-generator/components/treeselect.js b/api-generator/components/treeselect.js
@@ -198,6 +198,22 @@ const TreeSelectSlots = [
     {
         name: 'indicator',
         description: 'Custom content for the dropdown indicator'
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    },
+    {
+        name: 'searchicon',
+        description: 'Custom search icon template.'
+    },
+    {
+        name: 'itemtogglericon',
+        description: 'Custom item toggler icon template.'
+    },
+    {
+        name: 'itemcheckboxicon',
+        description: 'Custom item checkbox icon template.'
     }
 ];
 

diff --git a/components/lib/treeselect/TreeSelect.d.ts b/components/lib/treeselect/TreeSelect.d.ts
@@ -150,6 +150,42 @@ export interface TreeSelectSlots {
      * Custom indicator template.
      */
     indicator(): VNode[];
+    /**
+     * Custom loading icon template.
+     */
+    loadingicon(): VNode[];
+    /**
+     * Custom search icon template.
+     */
+    searchicon(): VNode[];
+    /**
+     * Custom item toggler icon template.
+     * @param {Object} scope - item toggler icon slot's params.
+     */
+    itemtogglericon(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.
+     */
+    itemcheckboxicon(scope: {
+        /**
+         * Check state of the node
+         */
+        checked: boolean;
+        /**
+         * Partial check state of the node
+         */
+        partialChecked: boolean;
+    }): VNode[];
 }
 
 /**

diff --git a/components/lib/treeselect/TreeSelect.vue b/components/lib/treeselect/TreeSelect.vue
@@ -62,7 +62,20 @@
                             @node-select="onNodeSelect"
                             @node-unselect="onNodeUnselect"
                             :level="0"
-                        />
+                        >
+                            <template v-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">
+                                <slot name="itemcheckboxicon" :checked="iconProps.checked" :partialChecked="iconProps.partialChecked" :class="iconProps.class" />
+                            </template>
+                            <template v-if="$slots.loadingicon" #loadingicon>
+                                <slot name="loadingicon" />
+                            </template>
+                            <template v-if="$slots.searchicon" #searchicon>
+                                <slot name="searchicon" />
+                            </template>
+                        </TSTree>
                         <div v-if="emptyOptions" class="p-treeselect-empty-message">
                             <slot name="empty">{{ emptyMessageText }}</slot>
                         </div>