File Tree

1<script lang="ts" module>
2	export type TreeViewElement = {
3		id: string;
4		name: string;
5		isSelectable?: boolean;
6		children?: TreeViewElement[];
7	};
8</script>
9 
10<script lang="ts">
11	import { setContext, getContext } from "svelte";
12	import { cn } from "$UTILS$";
13	import type { Snippet } from "svelte";
14	import type { HTMLAttributes } from "svelte/elements";
15 
16	interface TreeProps extends HTMLAttributes<HTMLDivElement> {
17		/**
18		 * Initial selected item ID
19		 */
20		initialSelectedId?: string;
21		/**
22		 * Initial expanded items
23		 */
24		initialExpandedItems?: string[];
25		/**
26		 * Tree elements data
27		 */
28		elements?: TreeViewElement[];
29		/**
30		 * Show indicator line
31		 */
32		indicator?: boolean;
33		/**
34		 * Open folder icon
35		 */
36		openIcon?: Snippet;
37		/**
38		 * Close folder icon
39		 */
40		closeIcon?: Snippet;
41		/**
42		 * Text direction
43		 */
44		dir?: "rtl" | "ltr";
45		/**
46		 * Children content
47		 */
48		children: Snippet;
49		/**
50		 * Additional CSS classes
51		 */
52		class?: string;
53	}
54 
55	let {
56		initialSelectedId,
57		initialExpandedItems = [],
58		elements,
59		indicator = true,
60		openIcon,
61		closeIcon,
62		dir = "ltr",
63		children,
64		class: className,
65		...props
66	}: TreeProps = $props();
67 
68	let selectedId = $state(initialSelectedId);
69	let expandedItems = $state<string[]>(initialExpandedItems);
70 
71	const selectItem = (id: string) => {
72		selectedId = id;
73	};
74 
75	const handleExpand = (id: string) => {
76		if (expandedItems.includes(id)) {
77			expandedItems = expandedItems.filter((item) => item !== id);
78		} else {
79			expandedItems = [...expandedItems, id];
80		}
81	};
82 
83	const setExpandedItems = (items: string[]) => {
84		expandedItems = items;
85	};
86 
87	const direction = dir === "rtl" ? "rtl" : "ltr";
88 
89	setContext("tree", {
90		selectedId: () => selectedId,
91		expandedItems: () => expandedItems,
92		handleExpand,
93		selectItem,
94		setExpandedItems,
95		indicator,
96		openIcon,
97		closeIcon,
98		direction,
99	});
100</script>
101 
102<div class={cn("size-full", className)} {...props}>
103	<div class="relative h-full overflow-auto px-2" dir={direction}>
104		<div class="flex flex-col gap-1">
105			{@render children()}
106		</div>
107	</div>
108</div>