Fixed #6513 - Tree: new header and footer slots

primefaces · Oct 2, 2024 · da7b4fb · da7b4fb
1 parent 9d45883
commit da7b4fb
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 0 deletions.
diff --git a/packages/primevue/src/tree/Tree.d.ts b/packages/primevue/src/tree/Tree.d.ts
@@ -461,6 +461,42 @@ export interface TreeSlots {
          */
         partialChecked: boolean;
     }): VNode[];
+    /**
+     * Custom header
+     * @param {Object} scope - header slot's params.
+     */
+    header(scope: {
+        /**
+         * Current value
+         */
+        value: TreeNode[];
+        /**
+         * Current expanded key
+         */
+        expandedKeys: TreeExpandedKeys;
+        /**
+         * Current selected keys
+         */
+        selectionKeys: TreeSelectionKeys;
+    }): VNode[];
+    /**
+     * Custom footer
+     * @param {Object} scope - footer slot's params.
+     */
+    footer(scope: {
+        /**
+         * Current value
+         */
+        value: TreeNode[];
+        /**
+         * Current expanded key
+         */
+        expandedKeys: TreeExpandedKeys;
+        /**
+         * Current selected keys
+         */
+        selectionKeys: TreeSelectionKeys;
+    }): VNode[];
     /**
      * Optional slots.
      * @todo

diff --git a/packages/primevue/src/tree/Tree.vue b/packages/primevue/src/tree/Tree.vue
@@ -18,6 +18,7 @@
             </InputIcon>
         </IconField>
         <div :class="cx('wrapper')" :style="{ maxHeight: scrollHeight }" v-bind="ptm('wrapper')">
+            <slot name="header" :value="value" :expandedKeys="expandedKeys" :selectionKeys="selectionKeys" />
             <ul :class="cx('rootChildren')" role="tree" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('rootChildren')">
                 <TreeNode
                     v-for="(node, index) of valueToRender"
@@ -37,6 +38,7 @@
                     :pt="pt"
                 ></TreeNode>
             </ul>
+            <slot name="footer" :value="value" :expandedKeys="expandedKeys" :selectionKeys="selectionKeys" />
         </div>
     </div>
 </template>