fixed docs duplicate tree reference

skeletonlabs · Jul 23, 2023 · 9fa8dcf · 9fa8dcf
1 parent fc64efd
commit 9fa8dcf
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 28 deletions.
diff --git a/packages/skeleton/src/lib/components/TreeView/TreeView.svelte b/packages/skeleton/src/lib/components/TreeView/TreeView.svelte
@@ -53,10 +53,10 @@
 	 */
 	export function expandAll(): void {
 		const detailsElements = [...tree.querySelectorAll('details.tree-item')] as HTMLDetailsElement[];
-		detailsElements.forEach((details) => {
-			if (!details.open) {
-				const summary: HTMLElement | null = details.querySelector('summary.tree-item-summary');
-				if (summary) summary.click();
+		detailsElements.forEach(details => {
+			if(!details.open) {
+				const summary : HTMLElement | null = details.querySelector('summary.tree-item-summary');
+				if(summary) summary.click();
 			}
 		});
 	}
@@ -66,10 +66,10 @@
 	 */
 	export function collapseAll() {
 		const detailsElements = [...tree.querySelectorAll('details.tree-item')] as HTMLDetailsElement[];
-		detailsElements.forEach((details) => {
-			if (details.open) {
-				const summary: HTMLElement | null = details.querySelector('summary.tree-item-summary');
-				if (summary) summary.click();
+		detailsElements.forEach(details => {
+			if(details.open) {
+				const summary : HTMLElement | null = details.querySelector('summary.tree-item-summary');
+				if(summary) summary.click();
 			}
 		});
 	}
@@ -79,10 +79,10 @@
 	 */
 	export function selectAll() {
 		const detailsElements = [...tree.querySelectorAll('details.tree-item')] as HTMLDetailsElement[];
-		detailsElements.forEach((details) => {
-			const input: HTMLInputElement | null = details.querySelector('input[type="checkbox"].tree-item-checkbox');
-			if (!input) return;
-			if (!input.checked) {
+		detailsElements.forEach(details => {
+			const input : HTMLInputElement | null = details.querySelector('input[type="checkbox"].tree-item-checkbox');
+			if(!input) return;
+			if(!input.checked) {
 				// needs delay
 				setTimeout(() => {
 					input.click();
@@ -96,10 +96,10 @@
 	 */
 	export function deselectAll() {
 		const detailsElements = [...tree.querySelectorAll('details.tree-item')] as HTMLDetailsElement[];
-		detailsElements.forEach((details) => {
-			const input: HTMLInputElement | null = details.querySelector('input[type="checkbox"].tree-item-checkbox');
-			if (!input) return;
-			if (input.checked) {
+		detailsElements.forEach(details => {
+			const input : HTMLInputElement | null = details.querySelector('input[type="checkbox"].tree-item-checkbox');
+			if(!input) return;
+			if(input.checked){
 				// needs delay
 				setTimeout(() => {
 					input.click();
@@ -130,14 +130,6 @@
 	let tree: HTMLDivElement;
 </script>
 
-<div
-	bind:this={tree}
-	class="tree {classesBase}"
-	data-testid="tree"
-	role="tree"
-	aria-multiselectable="true"
-	aria-label={labelledby}
-	aria-disabled={disabled}
->
+<div bind:this={tree} class="tree {classesBase}" data-testid="tree" role="tree" aria-multiselectable="true" aria-label={labelledby} aria-disabled={disabled}>
 	<slot />
 </div>
diff --git a/sites/skeleton.dev/src/routes/(inner)/components/tree-views/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/components/tree-views/+page.svelte
@@ -42,6 +42,7 @@
 	let childrenMultiple: TreeViewItem[] = [];
 
 	let expandTree: TreeView;
+	let selectTree: TreeView;
 
 	let selectMultiple: string[] = [];
 </script>
@@ -677,7 +678,7 @@ tree.collapseAll();
 			<p>Note: These functions are excecuted only in <code class="code">multiple</code> selection mode.</p>
 			<DocsPreview background="neutral" regionFooter="flex justify-center gap-4">
 				<svelte:fragment slot="preview">
-					<TreeView selection multiple bind:this={expandTree}>
+					<TreeView selection multiple bind:this={selectTree}>
 						<TreeViewItem bind:group={selectMultiple} name="s_medium" value="books">
 							<svelte:fragment slot="lead">
 								<i class="fa-solid fa-book-skull" />
@@ -699,8 +700,8 @@ tree.collapseAll();
 					</TreeView>
 				</svelte:fragment>
 				<svelte:fragment slot="footer">
-					<button class="btn variant-filled-primary" on:click={expandTree.selectAll}> Select all </button>
-					<button class="btn variant-filled-secondary" on:click={expandTree.deselectAll}> Deselect all </button>
+					<button class="btn variant-filled-primary" on:click={selectTree.selectAll}> Select all </button>
+					<button class="btn variant-filled-secondary" on:click={selectTree.deselectAll}> Deselect all </button>
 				</svelte:fragment>
 				<svelte:fragment slot="source">
 					<CodeBlock