MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

implements working TreeView component

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-16 16:41:04 +02:00
parent ff72127875
commit 0365e86876
2 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/bbui/src/TreeView/Item.svelte
View File

@ -6,8 +6,8 @@
</script>
<li class:is-selected={selected} class:is-open={open} class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
{#if $$slots.default}
{#if $$slots.default}
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
@ -17,16 +17,18 @@
</svg>
{/if}
<span class="spectrum-TreeView-itemLabel">{title}</span>
<ul class="spectrum-TreeView">
<slot />
</ul>
{:else}
</a>
<ul class="spectrum-TreeView">
<slot />
</ul>
{:else}
<a class="spectrum-TreeView-itemLink" href="#">
{#if icon}
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
{/if}
<span class="spectrum-TreeView-itemLabel">{title}</span>
{/if}
</a>
</a>
{/if}
</li>

5
packages/bbui/src/TreeView/Tree.svelte
View File

@ -2,9 +2,10 @@
import "@spectrum-css/treeview/dist/index-vars.css"
export let quiet = false
export let width;
export let standalone = true
export let width = '250px';
</script>
<ul class:spectrum-TreeView--quiet={quiet} class="spectrum-TreeView" style="width: {width}">
<ul class:spectrum-TreeView--standalone={standalone} class:spectrum-TreeView--quiet={quiet} class="spectrum-TreeView" style="width: {width}">
<slot />
</ul>