svelte_treeview_basic_nested_recursive_structure_quickstart.ts

1<script lang="ts">
2  import { TreeView, type TreeItem } from '@keenmate/svelte-treeview'
3
4  // Define the tree data structure
5  const items: TreeItem[] = [
6    {
7      id: '1',
8      label: 'Root Folder',
9      expanded: true,
10      children: [
11        {
12          id: '1.1',
13          label: 'Subfolder A',
14          children: [
15            { id: '1.1.1', label: 'File A1' },
16            { id: '1.1.2', label: 'File A2' }
17          ]
18        },
19        {
20          id: '1.2',
21          label: 'Subfolder B',
22          children: [
23            { id: '1.2.1', label: 'File B1' }
24          ]
25        }
26      ]
27    },
28    {
29      id: '2',
30      label: 'Another Root',
31      children: []
32    }
33  ]
34
35  // Handle selection events
36  function handleSelect(event: CustomEvent<TreeItem>) {
37    console.log('Selected item:', event.detail)
38  }
39</script>
40
41<TreeView 
42  {items} 
43  on:select={handleSelect}
44/>
45
46<style>
47  /* Basic styling for the tree container if needed */
48  :global(.tree-view) {
49    font-family: sans-serif;
50  }
51</style>