fix(tree-view): make TreeView children prop type work recursively (#1566)

This commit is contained in:
DetachHead 2022-12-08 13:54:14 +10:00 committed by GitHub
commit 21d841feeb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 9 additions and 7 deletions

View file

@ -4658,6 +4658,7 @@ export interface TreeNode {
icon?: typeof import("svelte").SvelteComponent; icon?: typeof import("svelte").SvelteComponent;
disabled?: boolean; disabled?: boolean;
expanded?: boolean; expanded?: boolean;
children?: TreeNode[];
} }
``` ```
@ -4668,7 +4669,7 @@ export interface TreeNode {
| expandedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be expanded | | expandedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be expanded |
| selectedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be selected | | selectedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be selected |
| activeId | No | <code>let</code> | Yes | <code>TreeNodeId</code> | <code>""</code> | Set the current active node id<br />Only one node can be active | | activeId | No | <code>let</code> | Yes | <code>TreeNodeId</code> | <code>""</code> | Set the current active node id<br />Only one node can be active |
| children | No | <code>let</code> | No | <code>Array<TreeNode & { children?: TreeNode[] }></code> | <code>[]</code> | Provide an array of children nodes to render | | children | No | <code>let</code> | No | <code>Array<TreeNode></code> | <code>[]</code> | Provide an array of children nodes to render |
| size | No | <code>let</code> | No | <code>"default" &#124; "compact"</code> | <code>"default"</code> | Specify the TreeView size | | size | No | <code>let</code> | No | <code>"default" &#124; "compact"</code> | <code>"default"</code> | Specify the TreeView size |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text | | labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text | | hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |

View file

@ -14320,7 +14320,7 @@
"name": "children", "name": "children",
"kind": "let", "kind": "let",
"description": "Provide an array of children nodes to render", "description": "Provide an array of children nodes to render",
"type": "Array<TreeNode & { children?: TreeNode[] }>", "type": "Array<TreeNode>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -14483,9 +14483,9 @@
"ts": "type TreeNodeId = string | number" "ts": "type TreeNodeId = string | number"
}, },
{ {
"type": "{ id: TreeNodeId; text: string; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; expanded?: boolean; }", "type": "{ id: TreeNodeId; text: string; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; expanded?: boolean; children?: TreeNode[]; }",
"name": "TreeNode", "name": "TreeNode",
"ts": "interface TreeNode { id: TreeNodeId; text: string; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; expanded?: boolean; }" "ts": "interface TreeNode { id: TreeNodeId; text: string; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; expanded?: boolean; children?: TreeNode[]; }"
} }
], ],
"rest_props": { "type": "Element", "name": "ul" } "rest_props": { "type": "Element", "name": "ul" }

View file

@ -1,7 +1,7 @@
<script> <script>
/** /**
* @typedef {string | number} TreeNodeId * @typedef {string | number} TreeNodeId
* @typedef {{ id: TreeNodeId; text: string; icon?: typeof import("svelte").SvelteComponent; disabled?: boolean; expanded?: boolean; }} TreeNode * @typedef {{ id: TreeNodeId; text: string; icon?: typeof import("svelte").SvelteComponent; disabled?: boolean; expanded?: boolean; children?: TreeNode[]; }} TreeNode
* @event {TreeNode & { expanded: boolean; leaf: boolean; }} select * @event {TreeNode & { expanded: boolean; leaf: boolean; }} select
* @event {TreeNode & { expanded: boolean; leaf: boolean; }} toggle * @event {TreeNode & { expanded: boolean; leaf: boolean; }} toggle
* @event {TreeNode & { expanded: boolean; leaf: boolean; }} focus * @event {TreeNode & { expanded: boolean; leaf: boolean; }} focus
@ -9,7 +9,7 @@
/** /**
* Provide an array of children nodes to render * Provide an array of children nodes to render
* @type {Array<TreeNode & { children?: TreeNode[] }>} * @type {Array<TreeNode>}
*/ */
export let children = []; export let children = [];

View file

@ -9,6 +9,7 @@ export interface TreeNode {
icon?: typeof import("svelte").SvelteComponent; icon?: typeof import("svelte").SvelteComponent;
disabled?: boolean; disabled?: boolean;
expanded?: boolean; expanded?: boolean;
children?: TreeNode[];
} }
export interface TreeViewProps export interface TreeViewProps
@ -17,7 +18,7 @@ export interface TreeViewProps
* Provide an array of children nodes to render * Provide an array of children nodes to render
* @default [] * @default []
*/ */
children?: Array<TreeNode & { children?: TreeNode[] }>; children?: Array<TreeNode>;
/** /**
* Set the current active node id * Set the current active node id