diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 4ce17d312a..456514df54 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -4691,19 +4691,20 @@ export interface 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 | +| 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 | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index d631b8eed6..6a1d816914 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -14664,6 +14664,18 @@ "isRequired": false, "constant": false, "reactive": false + }, + { + "name": "showNode", + "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; } } }", + "isFunction": true, + "isFunctionDeclaration": true, + "isRequired": false, + "constant": false, + "reactive": false } ], "moduleExports": [], diff --git a/docs/src/pages/components/TreeView.svx b/docs/src/pages/components/TreeView.svx index 112941793f..fc35f11066 100644 --- a/docs/src/pages/components/TreeView.svx +++ b/docs/src/pages/components/TreeView.svx @@ -92,4 +92,12 @@ Use the `TreeView.collapseNodes` method to collapse a subset of nodes. If no argument is provided, all nodes will be collapsed. - \ No newline at end of file + + +## Show a specific node + +Use the `TreeView.showNode` method to show a specific node. + +If a matching node is found, it will be expanded, selected, and focused. + + diff --git a/docs/src/pages/framed/TreeView/TreeViewShowNode.svelte b/docs/src/pages/framed/TreeView/TreeViewShowNode.svelte new file mode 100644 index 0000000000..4ce54f292d --- /dev/null +++ b/docs/src/pages/framed/TreeView/TreeViewShowNode.svelte @@ -0,0 +1,49 @@ + + + + {#each [nodeSpark, nodeBlockchain] as { id, text }} + + {/each} + + + + diff --git a/src/TreeView/TreeView.svelte b/src/TreeView/TreeView.svelte index eabe6255de..0400102ab7 100644 --- a/src/TreeView/TreeView.svelte +++ b/src/TreeView/TreeView.svelte @@ -1,3 +1,31 @@ + + diff --git a/types/TreeView/TreeView.svelte.d.ts b/types/TreeView/TreeView.svelte.d.ts index afabd0f1f0..6dbdfbf6fd 100644 --- a/types/TreeView/TreeView.svelte.d.ts +++ b/types/TreeView/TreeView.svelte.d.ts @@ -103,4 +103,10 @@ export default class TreeView extends SvelteComponentTyped< * Collapses all nodes if no argument is provided */ collapseNodes: (filterId?: (node: TreeNode) => boolean) => void; + + /** + * Programmatically show a node by `id`. + * The matching node will be expanded, selected, and focused + */ + showNode: (id: TreeNodeId) => void; }