TreeNode .d.ts and apidoc updates

components/doc/DocApiSection.vue

@@ -324,14 +324,14 @@ export default {
             return interfaces;
         },
         findOptions(values, docName) {
-            const validOptionsDocNames = ['MenuItem', 'ConfirmationOptions'];
+            const validOptionsDocNames = ['MenuItem', 'ConfirmationOptions', 'TreeNode'];
 
             if (!validOptionsDocNames.includes(docName)) return;
 
             const options = [];
 
             for (const key of Object.keys(values)) {
-                if (key === 'MenuItem' || key === 'ConfirmationOptions') {
+                if (key === 'MenuItem' || key === 'ConfirmationOptions' || key === 'TreeNode') {
                     options.push({ key, values: values[key] });
                 }
             }

components/lib/tree/Tree.d.ts

@@ -10,6 +10,7 @@
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
+import { TreeNode } from '../treenode';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
 export declare type TreePassThroughOptionType = TreePassThroughAttributes | ((options: TreePassThroughMethodOptions) => TreePassThroughAttributes | string) | string | null | undefined;
@@ -40,66 +41,6 @@ export interface TreePassThroughMethodOptions {
     global: object | undefined;
 }
 
-/**
- * Custom TreeNode metadata.
- */
-export interface TreeNode {
-    /**
-     * Mandatory unique key of the node.
-     */
-    key?: string;
-    /**
-     * Label of the node.
-     */
-    label?: string;
-    /**
-     * Data represented by the node.
-     */
-    data?: any;
-    /**
-     * Type of the node to match a template.
-     */
-    type?: string;
-    /**
-     * Icon of the node to display next to content.
-     */
-    icon?: string;
-    /**
-     * An array of treenodes as children.
-     */
-    children?: TreeNode[];
-    /**
-     * Inline style of the node.
-     */
-    style?: any;
-    /**
-     * Style class of the node.
-     */
-    styleClass?: string;
-    /**
-     * Whether the node is selectable when selection mode is enabled.
-     * @defaultValue false
-     */
-    selectable?: boolean;
-    /**
-     * Specifies if the node has children. Used in lazy loading.
-     * @defaultValue false
-     */
-    leaf?: boolean;
-    /**
-     * Optional
-     */
-    [key: string]: any;
-    /**
-     * Icon to use in expanded state.
-     */
-    expandedIcon?: string;
-    /**
-     * Icon to use in collapsed state.
-     */
-    collapsedIcon?: string;
-}
-
 /**
  * Custom expanded keys metadata.
  */

components/lib/treenode/TreeNode.d.ts

@@ -0,0 +1,67 @@
+/**
+ *
+ * PrimeVue tree components share a common api to specify the node.
+ *
+ * @module treenode
+ *
+ */
+
+/**
+ * Custom TreeNode metadata.
+ */
+export interface TreeNode {
+    /**
+     * Mandatory unique key of the node.
+     */
+    key?: string;
+    /**
+     * Label of the node.
+     */
+    label?: string;
+    /**
+     * Data represented by the node.
+     */
+    data?: any;
+    /**
+     * Type of the node to match a template.
+     */
+    type?: string;
+    /**
+     * Icon of the node to display next to content.
+     */
+    icon?: string;
+    /**
+     * An array of treenodes as children.
+     */
+    children?: TreeNode[];
+    /**
+     * Inline style of the node.
+     */
+    style?: any;
+    /**
+     * Style class of the node.
+     */
+    styleClass?: string;
+    /**
+     * Whether the node is selectable when selection mode is enabled.
+     * @defaultValue false
+     */
+    selectable?: boolean;
+    /**
+     * Specifies if the node has children. Used in lazy loading.
+     * @defaultValue false
+     */
+    leaf?: boolean;
+    /**
+     * Optional
+     */
+    [key: string]: any;
+    /**
+     * Icon to use in expanded state.
+     */
+    expandedIcon?: string;
+    /**
+     * Icon to use in collapsed state.
+     */
+    collapsedIcon?: string;
+}

components/lib/treenode/package.json

@@ -0,0 +1,3 @@
+{
+    "types": "./TreeNode.d.ts"
+}

components/lib/treeselect/TreeSelect.d.ts

@@ -10,7 +10,8 @@
 import { InputHTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
-import { TreeExpandedKeys, TreeNode, TreePassThroughOptionType } from '../tree';
+import { TreeExpandedKeys, TreePassThroughOptionType } from '../tree';
+import { TreeNode } from '../treenode';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
 export declare type TreeSelectPassThroughOptionType = TreeSelectPassThroughAttributes | ((options: TreeSelectPassThroughMethodOptions) => TreeSelectPassThroughAttributes | string) | string | null | undefined;

components/lib/treetable/TreeTable.d.ts

@@ -12,7 +12,7 @@ import { ComponentHooks } from '../basecomponent';
 import { ColumnPassThroughOptionType } from '../column';
 import { PaginatorPassThroughOptionType } from '../paginator';
 import { PassThroughOptions } from '../passthrough';
-import { TreeNode } from '../tree';
+import { TreeNode } from '../treenode';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
 export declare type TreeTablePassThroughOptionType = TreeTablePassThroughAttributes | ((options: TreeTablePassThroughMethodOptions) => TreeTablePassThroughAttributes | string) | string | null | undefined;

pages/tree/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Tree Component" header="Tree" description="Tree is used to display hierarchical data." :componentDocs="docs" :apiDocs="['Tree']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
+    <DocComponent title="Vue Tree Component" header="Tree" description="Tree is used to display hierarchical data." :componentDocs="docs" :apiDocs="['Tree', 'TreeNode']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 <script>
 import AccessibilityDoc from '@/doc/tree/AccessibilityDoc.vue';

pages/treeselect/index.vue

@@ -4,7 +4,7 @@
         header="TreeSelect"
         description="TreeSelect is a form component to choose from hierarchical data."
         :componentDocs="docs"
-        :apiDocs="['TreeSelect']"
+        :apiDocs="['TreeSelect', 'TreeNode']"
         :ptTabComponent="ptComponent"
         :themingDocs="themingDoc"
     />

pages/treetable/index.vue

@@ -4,7 +4,7 @@
         header="TreeTable"
         description="TreeTable is used to display hierarchical data in tabular format."
         :componentDocs="docs"
-        :apiDocs="['TreeTable', 'Column']"
+        :apiDocs="['TreeTable', 'Column', 'TreeNode']"
         :ptTabComponent="ptComponent"
         :themingDocs="themingDoc"
     />