CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-14 08:24:48 +12:00
Code Issues Projects Releases Wiki Activity

wip: tree component

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-04-16 16:17:26 +02:00
parent 7e7e501244
commit 8aa6e66be2
6 changed files with 51 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/bbui/package.json
View file

@ -61,6 +61,7 @@
"@spectrum-css/table": "^3.0.1",
"@spectrum-css/tabs": "^3.0.1",
"@spectrum-css/toast": "^3.0.1",
"@spectrum-css/treeview": "^3.0.2",
"@spectrum-css/typography": "^3.0.1",
"@spectrum-css/underlay": "^2.0.9",
"@spectrum-css/vars": "^3.0.1",

2
packages/bbui/src/Icon/Icon.svelte
View file

@ -5,7 +5,7 @@
<script>
export let direction = "n"
export let name = "Add"
export let hidden = false
export let hidden = true
export let s = false
export let m = false;
export let l = false;

32
packages/bbui/src/TreeView/Item.svelte Normal file
View file

@ -0,0 +1,32 @@
<script>
export let selected = false;
export let open = false;
export let title;
export let icon;
</script>
<li class:is-selected={selected} class:is-open={open} class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
{#if $$slots.default}
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
{#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>
<ul class="spectrum-TreeView">
<slot />
</ul>
{:else}
{#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>
</li>

10
packages/bbui/src/TreeView/Tree.svelte Normal file
View file

@ -0,0 +1,10 @@
<script>
import "@spectrum-css/treeview/dist/index-vars.css"
export let quiet = false
export let width;
</script>
<ul class:spectrum-TreeView--quiet={quiet} class="spectrum-TreeView" style="width: {width}">
<slot />
</ul>

2
packages/bbui/src/index.js
View file

@ -41,6 +41,8 @@ export { default as Context } from "./context"
export { default as Table } from "./Table/Table.svelte"
export { default as Tabs } from "./Tabs/Tabs.svelte"
export { default as Tab } from "./Tabs/Tab.svelte"
export { default as TreeView } from "./TreeView/Tree.svelte"
export { default as TreeItem } from "./TreeView/Item.svelte"
export { default as Divider } from "./Divider/Divider.svelte"
// Typography

5
packages/bbui/yarn.lock
View file

@ -500,6 +500,11 @@
resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"
integrity sha512-jov++S358BrN2tmMfaoYk1N6u9HojgeuQk61keXrK2m3VE5/n94x7Lg3kIPeSWO0odyDfBlMqT9jacbRey3QTg==
"@spectrum-css/treeview@^3.0.2":
version "3.0.2"
resolved "https://registry.yarnpkg.com/@spectrum-css/treeview/-/treeview-3.0.2.tgz#d54d8f17290babb1c885f5d9355e225421beb0d2"
integrity sha512-foO7UBJv1JMFaKgDPVt8jBghZSVbqhXR8TaGaxHSnMubv7ygmKkc1AITrWC2STILCn84ju2vchOohMZfW6sYwg==
"@spectrum-css/typography@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-3.0.1.tgz#957dafd9b18c314fa37a88b549042ba2175f5b3f"