mirror of https://github.com/Budibase/budibase.git
Andrew Kingston
5 years ago
229 changed files with 1749 additions and 1201 deletions
@ -1,15 +1,19 @@ |
|||
<script> |
|||
import "@spectrum-css/buttongroup/dist/index-vars.css" |
|||
export let vertical = false |
|||
import "@spectrum-css/buttongroup/dist/index-vars.css" |
|||
export let vertical = false |
|||
|
|||
function group(element) { |
|||
const buttons = Array.from(element.getElementsByTagName('button')) |
|||
buttons.forEach(button => { |
|||
button.classList.add('spectrum-ButtonGroup-item') |
|||
}) |
|||
} |
|||
function group(element) { |
|||
const buttons = Array.from(element.getElementsByTagName("button")) |
|||
buttons.forEach((button) => { |
|||
button.classList.add("spectrum-ButtonGroup-item") |
|||
}) |
|||
} |
|||
</script> |
|||
|
|||
<div use:group class="spectrum-ButtonGroup" class:spectrum-ButtonGroup--vertical={vertical}> |
|||
<slot /> |
|||
</div> |
|||
<div |
|||
use:group |
|||
class="spectrum-ButtonGroup" |
|||
class:spectrum-ButtonGroup--vertical={vertical} |
|||
> |
|||
<slot /> |
|||
</div> |
|||
|
|||
@ -1,7 +1,7 @@ |
|||
<script> |
|||
import "@spectrum-css/menu/dist/index-vars.css" |
|||
import "@spectrum-css/menu/dist/index-vars.css" |
|||
</script> |
|||
|
|||
<ul class="spectrum-Menu" role="menu"> |
|||
<slot /> |
|||
</ul> |
|||
<slot /> |
|||
</ul> |
|||
|
|||
@ -1,9 +1,10 @@ |
|||
<script> |
|||
export let heading |
|||
export let heading |
|||
</script> |
|||
|
|||
<li role="presentation"> |
|||
<span class="spectrum-Menu-sectionHeading">{heading}</span> |
|||
<ul class="spectrum-Menu" role="group"> |
|||
<slot /> |
|||
</ul> |
|||
</li> |
|||
<span class="spectrum-Menu-sectionHeading">{heading}</span> |
|||
<ul class="spectrum-Menu" role="group"> |
|||
<slot /> |
|||
</ul> |
|||
</li> |
|||
|
|||
@ -1 +1 @@ |
|||
<li class="spectrum-Menu-divider" role="separator"></li> |
|||
<li class="spectrum-Menu-divider" role="separator" /> |
|||
|
|||
@ -1,29 +1,33 @@ |
|||
<script> |
|||
// WIP! Does not yet work. |
|||
import "@spectrum-css/progresscircle/dist/index-vars.css" |
|||
import { tweened } from 'svelte/motion'; |
|||
import { cubicOut } from 'svelte/easing'; |
|||
// WIP! Does not yet work. |
|||
import "@spectrum-css/progresscircle/dist/index-vars.css" |
|||
import { tweened } from "svelte/motion" |
|||
import { cubicOut } from "svelte/easing" |
|||
|
|||
export let value = false |
|||
export let small; |
|||
export let large; |
|||
export let value = false |
|||
export let small |
|||
export let large |
|||
|
|||
export let overBackground; |
|||
export let overBackground |
|||
</script> |
|||
|
|||
<div class:spectrum-ProgressBar--indeterminate={!value} class:spectrum-ProgressCircle--small={small} class:spectrum-ProgressCircle--large={large} class="spectrum-ProgressCircle"> |
|||
<div class="spectrum-ProgressCircle-track"></div> |
|||
<div class="spectrum-ProgressCircle-fills"> |
|||
<div class="spectrum-ProgressCircle-fillMask1"> |
|||
<div class="spectrum-ProgressCircle-fillSubMask1"> |
|||
<div class="spectrum-ProgressCircle-fill"></div> |
|||
</div> |
|||
<div |
|||
class:spectrum-ProgressBar--indeterminate={!value} |
|||
class:spectrum-ProgressCircle--small={small} |
|||
class:spectrum-ProgressCircle--large={large} |
|||
class="spectrum-ProgressCircle" |
|||
> |
|||
<div class="spectrum-ProgressCircle-track" /> |
|||
<div class="spectrum-ProgressCircle-fills"> |
|||
<div class="spectrum-ProgressCircle-fillMask1"> |
|||
<div class="spectrum-ProgressCircle-fillSubMask1"> |
|||
<div class="spectrum-ProgressCircle-fill" /> |
|||
</div> |
|||
<div class="spectrum-ProgressCircle-fillMask2"> |
|||
<div class="spectrum-ProgressCircle-fillSubMask2"> |
|||
<div class="spectrum-ProgressCircle-fill"></div> |
|||
</div> |
|||
</div> |
|||
<div class="spectrum-ProgressCircle-fillMask2"> |
|||
<div class="spectrum-ProgressCircle-fillSubMask2"> |
|||
<div class="spectrum-ProgressCircle-fill" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
@ -1,30 +1,44 @@ |
|||
<script> |
|||
import { getContext } from 'svelte' |
|||
const multilevel = getContext('sidenav-type'); |
|||
export let href = ""; |
|||
export let external = false; |
|||
export let heading = "" |
|||
export let icon = ""; |
|||
export let selected = false; |
|||
export let disabled = false; |
|||
|
|||
import { getContext } from "svelte" |
|||
const multilevel = getContext("sidenav-type") |
|||
export let href = "" |
|||
export let external = false |
|||
export let heading = "" |
|||
export let icon = "" |
|||
export let selected = false |
|||
export let disabled = false |
|||
</script> |
|||
|
|||
<li class="spectrum-SideNav-item" class:is-selected={selected} class:is-disabled={disabled}> |
|||
{#if heading} |
|||
<h2 class="spectrum-SideNav-heading" id="nav-heading-{heading}">{heading}</h2> |
|||
{/if} |
|||
<a target={external ? '_blank' : '_self'} {href} class="spectrum-SideNav-itemLink" aria-current="page"> |
|||
{#if icon} |
|||
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-SideNav-itemIcon" focusable="false" aria-hidden="true"> |
|||
<use xlink:href="#spectrum-icon-18-{icon}" /> |
|||
</svg> |
|||
{/if} |
|||
<slot /> |
|||
</a> |
|||
{#if multilevel && $$slots.subnav} |
|||
<ul class="spectrum-SideNav"> |
|||
<slot name="subnav" /> |
|||
</ul> |
|||
<li |
|||
class="spectrum-SideNav-item" |
|||
class:is-selected={selected} |
|||
class:is-disabled={disabled} |
|||
> |
|||
{#if heading} |
|||
<h2 class="spectrum-SideNav-heading" id="nav-heading-{heading}"> |
|||
{heading} |
|||
</h2> |
|||
{/if} |
|||
<a |
|||
target={external ? "_blank" : "_self"} |
|||
{href} |
|||
class="spectrum-SideNav-itemLink" |
|||
aria-current="page" |
|||
> |
|||
{#if icon} |
|||
<svg |
|||
class="spectrum-Icon spectrum-Icon--sizeM spectrum-SideNav-itemIcon" |
|||
focusable="false" |
|||
aria-hidden="true" |
|||
> |
|||
<use xlink:href="#spectrum-icon-18-{icon}" /> |
|||
</svg> |
|||
{/if} |
|||
</li> |
|||
<slot /> |
|||
</a> |
|||
{#if multilevel && $$slots.subnav} |
|||
<ul class="spectrum-SideNav"> |
|||
<slot name="subnav" /> |
|||
</ul> |
|||
{/if} |
|||
</li> |
|||
|
|||
@ -1,12 +1,12 @@ |
|||
<script> |
|||
import { setContext } from 'svelte' |
|||
import "@spectrum-css/sidenav/dist/index-vars.css" |
|||
export let multilevel = false; |
|||
setContext('sidenav-type', multilevel) |
|||
import { setContext } from "svelte" |
|||
import "@spectrum-css/sidenav/dist/index-vars.css" |
|||
export let multilevel = false |
|||
setContext("sidenav-type", multilevel) |
|||
</script> |
|||
|
|||
<nav> |
|||
<ul class="spectrum-SideNav" class:spectrum-SideNav--multiLevel={multilevel}> |
|||
<slot /> |
|||
</ul> |
|||
</nav> |
|||
</nav> |
|||
|
|||
@ -1,24 +1,34 @@ |
|||
<script> |
|||
import Avatar from '../Avatar/Avatar.svelte' |
|||
import ClearButton from '../ClearButton/ClearButton.svelte' |
|||
export let icon = ""; |
|||
export let avatar = ""; |
|||
export let invalid = false; |
|||
export let disabled = false; |
|||
export let closable = false; |
|||
import Avatar from "../Avatar/Avatar.svelte" |
|||
import ClearButton from "../ClearButton/ClearButton.svelte" |
|||
export let icon = "" |
|||
export let avatar = "" |
|||
export let invalid = false |
|||
export let disabled = false |
|||
export let closable = false |
|||
</script> |
|||
|
|||
<div class:is-invalid={invalid} class:is-disabled={disabled} class="spectrum-Tags-item" role="listitem"> |
|||
<div |
|||
class:is-invalid={invalid} |
|||
class:is-disabled={disabled} |
|||
class="spectrum-Tags-item" |
|||
role="listitem" |
|||
> |
|||
{#if avatar} |
|||
<Avatar url={avatar} /> |
|||
{/if} |
|||
{#if icon} |
|||
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Tag"> |
|||
<svg |
|||
class="spectrum-Icon spectrum-Icon--sizeS" |
|||
focusable="false" |
|||
aria-hidden="true" |
|||
aria-label="Tag" |
|||
> |
|||
<use xlink:href="#spectrum-icon-24-{icon}" /> |
|||
</svg> |
|||
{/if} |
|||
<span class="spectrum-Tags-itemLabel"><slot /></span> |
|||
{#if closable} |
|||
<ClearButton on:click /> |
|||
<ClearButton on:click /> |
|||
{/if} |
|||
</div> |
|||
</div> |
|||
|
|||
@ -1,7 +1,7 @@ |
|||
<script> |
|||
import "@spectrum-css/tags/dist/index-vars.css" |
|||
import "@spectrum-css/tags/dist/index-vars.css" |
|||
</script> |
|||
|
|||
<div class="spectrum-Tags" role="list" aria-label="list"> |
|||
<slot /> |
|||
</div> |
|||
<slot /> |
|||
</div> |
|||
|
|||
@ -1,28 +1,40 @@ |
|||
<script> |
|||
export let selected = false; |
|||
export let open = false; |
|||
export let title; |
|||
export let icon; |
|||
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 on:click 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} |
|||
{#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> |
|||
</a> |
|||
{#if $$slots.default} |
|||
<ul class="spectrum-TreeView"> |
|||
<slot /> |
|||
</ul> |
|||
{/if} |
|||
</li> |
|||
class:is-selected={selected} |
|||
class:is-open={open} |
|||
class="spectrum-TreeView-item" |
|||
> |
|||
<a on:click 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} |
|||
{#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> |
|||
</a> |
|||
{#if $$slots.default} |
|||
<ul class="spectrum-TreeView"> |
|||
<slot /> |
|||
</ul> |
|||
{/if} |
|||
</li> |
|||
|
|||
@ -1,11 +1,16 @@ |
|||
<script> |
|||
import "@spectrum-css/treeview/dist/index-vars.css" |
|||
import "@spectrum-css/treeview/dist/index-vars.css" |
|||
|
|||
export let quiet = false |
|||
export let standalone = true |
|||
export let width = '250px'; |
|||
export let quiet = false |
|||
export let standalone = true |
|||
export let width = "250px" |
|||
</script> |
|||
|
|||
<ul class:spectrum-TreeView--standalone={standalone} class:spectrum-TreeView--quiet={quiet} class="spectrum-TreeView" style="width: {width}"> |
|||
<slot /> |
|||
</ul> |
|||
<ul |
|||
class:spectrum-TreeView--standalone={standalone} |
|||
class:spectrum-TreeView--quiet={quiet} |
|||
class="spectrum-TreeView" |
|||
style="width: {width}" |
|||
> |
|||
<slot /> |
|||
</ul> |
|||
|
|||
|
Before Width: | Height: | Size: 323 B After Width: | Height: | Size: 326 B |
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue