wip: tree component
This commit is contained in:
parent
641b6022de
commit
ff72127875
6 changed files with 51 additions and 1 deletions
|
@ -61,6 +61,7 @@
|
||||||
"@spectrum-css/table": "^3.0.1",
|
"@spectrum-css/table": "^3.0.1",
|
||||||
"@spectrum-css/tabs": "^3.0.1",
|
"@spectrum-css/tabs": "^3.0.1",
|
||||||
"@spectrum-css/toast": "^3.0.1",
|
"@spectrum-css/toast": "^3.0.1",
|
||||||
|
"@spectrum-css/treeview": "^3.0.2",
|
||||||
"@spectrum-css/typography": "^3.0.1",
|
"@spectrum-css/typography": "^3.0.1",
|
||||||
"@spectrum-css/underlay": "^2.0.9",
|
"@spectrum-css/underlay": "^2.0.9",
|
||||||
"@spectrum-css/vars": "^3.0.1",
|
"@spectrum-css/vars": "^3.0.1",
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
<script>
|
<script>
|
||||||
export let direction = "n"
|
export let direction = "n"
|
||||||
export let name = "Add"
|
export let name = "Add"
|
||||||
export let hidden = false
|
export let hidden = true
|
||||||
export let s = false
|
export let s = false
|
||||||
export let m = false;
|
export let m = false;
|
||||||
export let l = false;
|
export let l = false;
|
||||||
|
|
32
packages/bbui/src/TreeView/Item.svelte
Normal file
32
packages/bbui/src/TreeView/Item.svelte
Normal 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
10
packages/bbui/src/TreeView/Tree.svelte
Normal 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>
|
|
@ -41,6 +41,8 @@ export { default as Context } from "./context"
|
||||||
export { default as Table } from "./Table/Table.svelte"
|
export { default as Table } from "./Table/Table.svelte"
|
||||||
export { default as Tabs } from "./Tabs/Tabs.svelte"
|
export { default as Tabs } from "./Tabs/Tabs.svelte"
|
||||||
export { default as Tab } from "./Tabs/Tab.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"
|
export { default as Divider } from "./Divider/Divider.svelte"
|
||||||
|
|
||||||
// Typography
|
// Typography
|
||||||
|
|
|
@ -500,6 +500,11 @@
|
||||||
resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"
|
resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"
|
||||||
integrity sha512-jov++S358BrN2tmMfaoYk1N6u9HojgeuQk61keXrK2m3VE5/n94x7Lg3kIPeSWO0odyDfBlMqT9jacbRey3QTg==
|
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":
|
"@spectrum-css/typography@^3.0.1":
|
||||||
version "3.0.1"
|
version "3.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-3.0.1.tgz#957dafd9b18c314fa37a88b549042ba2175f5b3f"
|
resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-3.0.1.tgz#957dafd9b18c314fa37a88b549042ba2175f5b3f"
|
||||||
|
|
Loading…
Reference in a new issue