diff --git a/cspell.json b/cspell.json index e6c9712be..2e1efae27 100644 --- a/cspell.json +++ b/cspell.json @@ -79,6 +79,7 @@ "Menlo", "minima", "mininal", + "Morty", "Muertos", "Nahua", "Neue", diff --git a/packages/skeleton/src/lib/components/TreeView/TreeView.svelte b/packages/skeleton/src/lib/components/TreeView/TreeView.svelte index d54e87097..9e4b2dd98 100644 --- a/packages/skeleton/src/lib/components/TreeView/TreeView.svelte +++ b/packages/skeleton/src/lib/components/TreeView/TreeView.svelte @@ -46,6 +46,68 @@ /** Provide the ARIA labelledby value. */ export let labelledby = ''; + // Functionality + /** + * expands all tree view items. + * @type {() => void} + */ + 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(); + } + }); + } + /** + * collapses all tree view items. + * @type {() => void} + */ + 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(); + } + }); + } + /** + * select all tree view items. Only available in Multiple selection mode. + * @type {() => void} + */ + 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) { + // needs delay + setTimeout(() => { + input.click(); + }, 5); + } + }); + } + /** + * deselect all tree view items. Only available in Multiple selection mode. + * @type {() => void} + */ + 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) { + // needs delay + setTimeout(() => { + input.click(); + }, 5); + } + }); + } + // Context API setContext('selection', selection); setContext('multiple', multiple); @@ -63,8 +125,19 @@ // Reactive $: classesBase = `${width} ${spacing} ${$$props.class ?? ''}`; + + // Locals + let tree: HTMLDivElement; -
+ By binding to the tree
we can call the functions expandAll()
,
+ collapseAll()
.
+
Books
+Clean Code
+The Clean Coder
+The Art of Unix Programming
+Movies
+The Flash
+Guardians of the Galaxy
+Black Panther
+TV
+The Simpsons
+Rick and Morty
+Family Guy
+Select children of Books
to see relational checking.
+ By binding to the tree
we can call the functions selectAll()
,
+ deselectAll()
.
+
Note: These functions are excecuted only in multiple
selection mode.
Books
+Movies
+TV
+