diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 746b9c1e..4d196074 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -4690,26 +4690,26 @@ export interface TreeNode { text: any; icon?: typeof import("svelte").SvelteComponent; disabled?: boolean; - children?: TreeNode[]; + nodes?: TreeNode[]; } ``` ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | -| expandedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be expanded | -| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be selected | -| activeId | No | let | Yes | TreeNodeId | "" | Set the current active node id
Only one node can be active | -| children | No | let | No | Array | [] | Provide an array of children nodes to render | -| size | No | let | No | "default" | "compact" | "default" | Specify the TreeView size | -| labelText | No | let | No | string | "" | Specify the label text | -| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | -| expandAll | No | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes | -| collapseAll | No | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes | -| expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter( (node) => filterNode(node) || node.children?.some((child) => filterNode(child) && child.children) ) .map((node) => node.id); } | Programmatically expand a subset of nodes.
Expands all nodes if no argument is provided | -| collapseNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes.
Collapses all nodes if no argument is provided | -| showNode | No | function | No | (id: TreeNodeId) => void | () => { for (const child of children) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(\`[id="${lastId}"]\`)?.focus(); }); // Break out of the loop if the node is found. break; } } } | Programmatically show a node by `id`.
The matching node will be expanded, selected, and focused | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | +| expandedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be expanded | +| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be selected | +| activeId | No | let | Yes | TreeNodeId | "" | Set the current active node id
Only one node can be active | +| nodes | No | let | Yes | Array | [] | Provide an array of nodes to render | +| size | No | let | No | "default" | "compact" | "default" | Specify the TreeView size | +| labelText | No | let | No | string | "" | Specify the label text | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| expandAll | No | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes | +| collapseAll | No | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes | +| expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter( (node) => filterNode(node) || node.nodes?.some((child) => filterNode(child) && child.nodes) ) .map((node) => node.id); } | Programmatically expand a subset of nodes.
Expands all nodes if no argument is provided | +| collapseNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes.
Collapses all nodes if no argument is provided | +| showNode | No | function | No | (id: TreeNodeId) => void | () => { for (const child of nodes) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(\`[id="${lastId}"]\`)?.focus(); }); // Break out of the loop if the node is found. break; } } } | Programmatically show a node by `id`.
The matching node will be expanded, selected, and focused | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 43d936c4..b906235c 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -14710,16 +14710,16 @@ "filePath": "src/TreeView/TreeView.svelte", "props": [ { - "name": "children", + "name": "nodes", "kind": "let", - "description": "Provide an array of children nodes to render", + "description": "Provide an array of nodes to render", "type": "Array", "value": "[]", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, "constant": false, - "reactive": false + "reactive": true }, { "name": "activeId", @@ -14822,7 +14822,7 @@ "kind": "function", "description": "Programmatically expand a subset of nodes.\nExpands all nodes if no argument is provided", "type": "(filterId?: (node: TreeNode) => boolean) => void", - "value": "() => { expandedIds = nodes .filter( (node) => filterNode(node) || node.children?.some((child) => filterNode(child) && child.children) ) .map((node) => node.id); }", + "value": "() => { expandedIds = nodes .filter( (node) => filterNode(node) || node.nodes?.some((child) => filterNode(child) && child.nodes) ) .map((node) => node.id); }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -14846,7 +14846,7 @@ "kind": "function", "description": "Programmatically show a node by `id`.\nThe matching node will be expanded, selected, and focused", "type": "(id: TreeNodeId) => void", - "value": "() => { for (const child of children) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(`[id=\"${lastId}\"]`)?.focus(); }); // Break out of the loop if the node is found. break; } } }", + "value": "() => { for (const child of nodes) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(`[id=\"${lastId}\"]`)?.focus(); }); // Break out of the loop if the node is found. break; } } }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -14894,9 +14894,9 @@ "ts": "type TreeNodeId = string | number" }, { - "type": "{ id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; children?: TreeNode[]; }", + "type": "{ id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; nodes?: TreeNode[]; }", "name": "TreeNode", - "ts": "interface TreeNode { id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; children?: TreeNode[]; }" + "ts": "interface TreeNode { id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; nodes?: TreeNode[]; }" } ], "generics": null, diff --git a/src/TreeView/TreeView.svelte b/src/TreeView/TreeView.svelte index 0400102a..ab8c3dad 100644 --- a/src/TreeView/TreeView.svelte +++ b/src/TreeView/TreeView.svelte @@ -9,11 +9,11 @@ function findNodeById(node, id) { if (node === null) return null; if (node.id === id) return [node]; - if (!Array.isArray(node.children)) { + if (!Array.isArray(node.nodes)) { return null; } - for (const child of node.children) { + for (const child of node.nodes) { const nodes = findNodeById(child, id); if (Array.isArray(nodes)) { @@ -29,7 +29,7 @@ {#if root} - {#each children as child (child.id)} - {#if Array.isArray(child.children)} + {#each nodes as child (child.id)} + {#if Array.isArray(child.nodes)} @@ -162,8 +162,8 @@ {#if expanded}
    - {#each children as child (child.id)} - {#if Array.isArray(child.children)} + {#each nodes as child (child.id)} + {#if Array.isArray(child.nodes)} diff --git a/tests/TreeView.test.svelte b/tests/TreeView.test.svelte index 04c633c2..2c9dfce8 100644 --- a/tests/TreeView.test.svelte +++ b/tests/TreeView.test.svelte @@ -8,16 +8,16 @@ let activeId: TreeNodeId = ""; let selectedIds: TreeNodeId[] = []; let expandedIds: TreeNodeId[] = [1]; - let children: ComponentProps["children"] = [ + let nodes: ComponentProps["nodes"] = [ { id: 0, text: "AI / Machine learning", icon: Analytics }, { id: 1, text: 0, - children: [ + nodes: [ { id: 2, text: "IBM Analytics Engine", - children: [ + nodes: [ { id: 3, text: "Apache Spark" }, { id: 4, text: "Hadoop" }, ], @@ -29,12 +29,12 @@ { id: 7, text: "Blockchain", - children: [{ id: 8, text: "IBM Blockchain Platform" }], + nodes: [{ id: 8, text: "IBM Blockchain Platform" }], }, { id: 9, text: "Databases", - children: [ + nodes: [ { id: 10, text: "IBM Cloud Databases for Elasticsearch" }, { id: 11, text: "IBM Cloud Databases for Enterprise DB" }, { id: 12, text: "IBM Cloud Databases for MongoDB" }, @@ -45,7 +45,7 @@ id: 14, text: "Integration", disabled: true, - children: [{ id: 15, text: "IBM API Connect", disabled: true }], + nodes: [{ id: 15, text: "IBM API Connect", disabled: true }], }, ]; @@ -66,7 +66,7 @@ bind:this="{treeview}" size="compact" labelText="Cloud Products" - children="{children}" + {nodes} bind:activeId bind:selectedIds bind:expandedIds diff --git a/types/TreeView/TreeView.svelte.d.ts b/types/TreeView/TreeView.svelte.d.ts index 75a55834..342f24c9 100644 --- a/types/TreeView/TreeView.svelte.d.ts +++ b/types/TreeView/TreeView.svelte.d.ts @@ -8,17 +8,17 @@ export interface TreeNode { text: any; icon?: typeof import("svelte").SvelteComponent; disabled?: boolean; - children?: TreeNode[]; + nodes?: TreeNode[]; } type $RestProps = SvelteHTMLElements["ul"]; type $Props = { /** - * Provide an array of children nodes to render + * Provide an array of nodes to render * @default [] */ - children?: Array; + nodes?: Array; /** * Set the current active node id