Skip to content

Commit

Permalink
implemented exported functions
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mahmoud-zino
Mahmoud-zino committed Jul 23, 2023
1 parent 893ec95 commit fc64efd
Show file tree
Hide file tree
Showing 4 changed files with 233 additions and 12 deletions.
1 change: 1 addition & 0 deletions cspell.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@
"Menlo",
"minima",
"mininal",
"Morty",
"Muertos",
"Nahua",
"Neue",
Expand Down
75 changes: 74 additions & 1 deletion packages/skeleton/src/lib/components/TreeView/TreeView.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -63,8 +125,19 @@
// Reactive
$: classesBase = `${width} ${spacing} ${$$props.class ?? ''}`;
// Locals
let tree: HTMLDivElement;
</script>

<div 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>
4 changes: 2 additions & 2 deletions packages/skeleton/src/lib/components/TreeView/TreeViewItem.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,9 +234,9 @@
<!-- Selection -->
{#if selection && name && group}
{#if multiple}
<input class="checkbox" type="checkbox" {name} {value} bind:checked bind:indeterminate on:click on:change />
<input class="checkbox tree-item-checkbox" type="checkbox" {name} {value} bind:checked bind:indeterminate on:click on:change />
{:else}
<input class="radio" type="radio" bind:group {name} {value} on:click on:change />
<input class="radio tree-item-radio" type="radio" bind:group {name} {value} on:click on:change />
{/if}
{/if}

Expand Down
165 changes: 156 additions & 9 deletions sites/skeleton.dev/src/routes/(inner)/components/tree-views/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@
let relationalMediumMultiple = ['movies'];
let relationalBooksMultiple: string[] = [];
let childrenMultiple: TreeViewItem[] = [];
let expandTree: TreeView;
let selectMultiple: string[] = [];
</script>

<DocsShell {settings}>
Expand Down Expand Up @@ -168,7 +172,7 @@
<h3 class="h3">Single</h3>
<DocsPreview background="neutral">
<svelte:fragment slot="preview">
<TreeView selection={true}>
<TreeView selection>
<TreeViewItem bind:group={mediumSingle} name="medium" value="books">
<svelte:fragment slot="lead">
<i class="fa-solid fa-book-skull" />
Expand Down Expand Up @@ -211,7 +215,7 @@ let booksSingle: string = 'Clean Code';
<CodeBlock
language="html"
code={`
<TreeView selection={true}>
<TreeView selection>
<TreeViewItem bind:group={mediumSingle} name="medium" value="books">
<svelte:fragment slot="lead">
(icon)
Expand Down Expand Up @@ -253,7 +257,7 @@ let booksSingle: string = 'Clean Code';
<h3 class="h3">Multiple</h3>
<DocsPreview background="neutral">
<svelte:fragment slot="preview">
<TreeView selection={true} multiple={true}>
<TreeView selection multiple>
<TreeViewItem bind:group={mediumMultiple} name="medium" value="books">
<svelte:fragment slot="lead">
<i class="fa-solid fa-book-skull" />
Expand Down Expand Up @@ -296,7 +300,7 @@ let booksMultiple = ['Clean Code', 'The Art of Unix Programming']
<CodeBlock
language="html"
code={`
<TreeView selection={true} multiple={true}>
<TreeView selection multiple>
<TreeViewItem bind:group={mediumMultiple} name="medium" value="books">
<svelte:fragment slot="lead">
(icon)
Expand Down Expand Up @@ -348,7 +352,7 @@ let booksMultiple = ['Clean Code', 'The Art of Unix Programming']
</p>
<DocsPreview background="neutral" regionFooter="text-center">
<svelte:fragment slot="preview">
<TreeView selection={true}>
<TreeView selection>
<TreeViewItem bind:group={relationalMediumSingle} name="r_medium" value="books" open children={childrenSingle}>
<svelte:fragment slot="lead">
<i class="fa-solid fa-book-skull" />
Expand Down Expand Up @@ -397,7 +401,7 @@ let children: TreeViewItem[] = [];
<CodeBlock
language="html"
code={`
<TreeView selection={true}>
<TreeView selection>
<TreeViewItem bind:group={mediumSingle} name="medium" value="books" children={children}>
<svelte:fragment slot="lead">
(icon)
Expand Down Expand Up @@ -426,7 +430,7 @@ let children: TreeViewItem[] = [];
</DocsPreview>
<DocsPreview background="neutral" regionFooter="text-center">
<svelte:fragment slot="preview">
<TreeView selection={true} multiple={true}>
<TreeView selection multiple>
<TreeViewItem bind:group={relationalMediumMultiple} name="r_medium" value="books" open children={childrenMultiple}>
<svelte:fragment slot="lead">
<i class="fa-solid fa-book-skull" />
Expand Down Expand Up @@ -475,7 +479,7 @@ let children: TreeViewItem[] = [];
<CodeBlock
language="html"
code={`
<TreeView selection={true} multiple={true}>
<TreeView selection multiple>
<TreeViewItem bind:group={mediumMultiple} name="medium" value="books" children={children}>
<svelte:fragment slot="lead">
(icon)
Expand Down Expand Up @@ -572,8 +576,151 @@ let children: TreeViewItem[] = [];
`}
/>
</svelte:fragment>
</DocsPreview>
</section>
<!-- Expand/Collapse all -->
<section class="space-y-4">
<h2 class="h2">Expand/Collapse all</h2>
<p>
By binding to the <code class="code">tree</code> we can call the functions <code class="code">expandAll()</code>,
<code class="code">collapseAll()</code>.
</p>
<DocsPreview background="neutral" regionFooter="flex justify-center gap-4">
<svelte:fragment slot="preview">
<TreeView bind:this={expandTree}>
<TreeViewItem>
<svelte:fragment slot="lead">
<i class="fa-solid fa-book-skull" />
</svelte:fragment>
<p>Books</p>
<svelte:fragment slot="children">
<TreeViewItem>
<p>Clean Code</p>
</TreeViewItem>
<TreeViewItem>
<p>The Clean Coder</p>
</TreeViewItem>
<TreeViewItem>
<p>The Art of Unix Programming</p>
</TreeViewItem>
</svelte:fragment>
</TreeViewItem>
<TreeViewItem>
<svelte:fragment slot="lead">
<i class="fa-solid fa-film" />
</svelte:fragment>
<p>Movies</p>
<svelte:fragment slot="children">
<TreeViewItem>
<p>The Flash</p>
</TreeViewItem>
<TreeViewItem>
<p>Guardians of the Galaxy</p>
</TreeViewItem>
<TreeViewItem>
<p>Black Panther</p>
</TreeViewItem>
</svelte:fragment>
</TreeViewItem>
<TreeViewItem>
<svelte:fragment slot="lead">
<i class="fa-solid fa-tv" />
</svelte:fragment>
<p>TV</p>
<svelte:fragment slot="children">
<TreeViewItem>
<p>The Simpsons</p>
</TreeViewItem>
<TreeViewItem>
<p>Rick and Morty</p>
</TreeViewItem>
<TreeViewItem>
<p>Family Guy</p>
</TreeViewItem>
</svelte:fragment>
</TreeViewItem>
</TreeView>
</svelte:fragment>
<svelte:fragment slot="footer">
<p>Select children of <code class="code">Books</code> to see relational checking.</p>
<button class="btn variant-filled-primary" on:click={expandTree.expandAll}> Expand all </button>
<button class="btn variant-filled-secondary" on:click={expandTree.collapseAll}> Collapse all </button>
</svelte:fragment>
<svelte:fragment slot="source">
<CodeBlock
language="ts"
code={`
let tree: TreeView;
// expand all
tree.expandAll();
// collapse all
tree.collapseAll();
`}
/>
<CodeBlock
language="html"
code={`
<TreeView bind:this={tree}>
<!-- ... -->
</TreeView>
`}
/>
</svelte:fragment>
</DocsPreview>
</section>
<!-- Select/Deselect all -->
<section class="space-y-4">
<h2 class="h2">Select/Deselect all</h2>
<p>
By binding to the <code class="code">tree</code> we can call the functions <code class="code">selectAll()</code>,
<code class="code">deselectAll()</code>.
</p>
<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}>
<TreeViewItem bind:group={selectMultiple} name="s_medium" value="books">
<svelte:fragment slot="lead">
<i class="fa-solid fa-book-skull" />
</svelte:fragment>
<p>Books</p>
</TreeViewItem>
<TreeViewItem bind:group={selectMultiple} name="s_medium" value="movies">
<svelte:fragment slot="lead">
<i class="fa-solid fa-film" />
</svelte:fragment>
<p>Movies</p>
</TreeViewItem>
<TreeViewItem bind:group={selectMultiple} name="s_medium" value="tv">
<svelte:fragment slot="lead">
<i class="fa-solid fa-tv" />
</svelte:fragment>
<p>TV</p>
</TreeViewItem>
</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>
</svelte:fragment>
<svelte:fragment slot="source">
<CodeBlock
language="ts"
code={`
let tree: TreeView;
// select all
tree.selectAll();
// deselect all
tree.deselectAll();
`}
/>
<CodeBlock
language="html"
code={`
<TreeView bind:this={tree} selection multiple>
<!-- ... -->
</TreeView>
`}
/>
</svelte:fragment>
</DocsPreview>
</section>
Expand Down

0 comments on commit fc64efd

Please sign in to comment.