You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
2.0 KiB
Svelte
76 lines
2.0 KiB
Svelte
10 months ago
|
<script>import { createEventDispatcher, setContext } from "svelte";
|
||
|
|
import RecursiveTreeViewItem from "./RecursiveTreeViewItem.svelte";
|
||
|
|
export let selection = false;
|
||
|
|
export let multiple = false;
|
||
|
|
export let relational = false;
|
||
|
|
export let nodes = [];
|
||
|
|
export let expandedNodes = [];
|
||
|
|
export let disabledNodes = [];
|
||
|
|
export let checkedNodes = [];
|
||
|
|
export let indeterminateNodes = [];
|
||
|
|
export let width = "w-full";
|
||
|
|
export let spacing = "space-y-1";
|
||
|
|
export let open = false;
|
||
|
|
export let disabled = false;
|
||
|
|
export let padding = "py-4 px-4";
|
||
|
|
export let indent = "ml-4";
|
||
|
|
export let hover = "hover:variant-soft";
|
||
|
|
export let rounded = "rounded-container-token";
|
||
|
|
export let caretOpen = "rotate-180";
|
||
|
|
export let caretClosed = "";
|
||
|
|
export let hyphenOpacity = "opacity-10";
|
||
|
|
export let regionSummary = "";
|
||
|
|
export let regionSymbol = "";
|
||
|
|
export let regionChildren = "";
|
||
|
|
export let labelledby = "";
|
||
|
|
setContext("open", open);
|
||
|
|
setContext("selection", selection);
|
||
|
|
setContext("multiple", multiple);
|
||
|
|
setContext("relational", relational);
|
||
|
|
setContext("disabled", disabled);
|
||
|
|
setContext("padding", padding);
|
||
|
|
setContext("indent", indent);
|
||
|
|
setContext("hover", hover);
|
||
|
|
setContext("rounded", rounded);
|
||
|
|
setContext("caretOpen", caretOpen);
|
||
|
|
setContext("caretClosed", caretClosed);
|
||
|
|
setContext("hyphenOpacity", hyphenOpacity);
|
||
|
|
setContext("regionSummary", regionSummary);
|
||
|
|
setContext("regionSymbol", regionSymbol);
|
||
|
|
setContext("regionChildren", regionChildren);
|
||
|
|
const dispatch = createEventDispatcher();
|
||
|
|
function onClick(event) {
|
||
|
|
dispatch("click", {
|
||
|
|
id: event.detail.id
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function onToggle(event) {
|
||
|
|
dispatch("toggle", {
|
||
|
|
id: event.detail.id
|
||
|
|
});
|
||
|
|
}
|
||
|
|
$:
|
||
|
|
classesBase = `${width} ${spacing} ${$$props.class ?? ""}`;
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="tree {classesBase}"
|
||
|
|
data-testid="tree"
|
||
|
|
role="tree"
|
||
|
|
aria-multiselectable={multiple}
|
||
|
|
aria-label={labelledby}
|
||
|
|
aria-disabled={disabled}
|
||
|
|
>
|
||
|
|
{#if nodes && nodes.length > 0}
|
||
|
|
<RecursiveTreeViewItem
|
||
|
|
{nodes}
|
||
|
|
bind:expandedNodes
|
||
|
|
bind:disabledNodes
|
||
|
|
bind:checkedNodes
|
||
|
|
bind:indeterminateNodes
|
||
|
|
on:click={onClick}
|
||
|
|
on:toggle={onToggle}
|
||
|
|
/>
|
||
|
|
{/if}
|
||
|
|
</div>
|