forked from tsai/budibase
Andrew Kingston
6 years ago
40 changed files with 280 additions and 288 deletions
@ -0,0 +1,65 @@ |
|||||
|
<script> |
||||
|
import "@spectrum-css/actionbutton/dist/index-vars.css" |
||||
|
import { createEventDispatcher } from "svelte" |
||||
|
const dispatch = createEventDispatcher() |
||||
|
|
||||
|
|
||||
|
/** @type {('S', 'M', 'L', 'XL')} Size of button */ |
||||
|
export let size = "M"; |
||||
|
export let quiet = false; |
||||
|
export let emphasized = false; |
||||
|
export let selected = false |
||||
|
export let longPressable = false; |
||||
|
export let disabled = false |
||||
|
export let icon = ''; |
||||
|
|
||||
|
function longPress(element) { |
||||
|
if (!longPressable) return |
||||
|
let timer |
||||
|
|
||||
|
const listener = () => { |
||||
|
timer = setTimeout(() => { |
||||
|
dispatch('longpress') |
||||
|
}, 700) |
||||
|
} |
||||
|
|
||||
|
element.addEventListener('pointerdown', listener) |
||||
|
|
||||
|
return { |
||||
|
destroy() { |
||||
|
clearTimeout(timer) |
||||
|
element.removeEventListener('pointerdown', longPress) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<button |
||||
|
use:longPress |
||||
|
class:spectrum-ActionButton--quiet={quiet} |
||||
|
class:spectrum-ActionButton--emphasized={emphasized} |
||||
|
class:is-selected={selected} |
||||
|
class="spectrum-ActionButton spectrum-ActionButton--size{size.toUpperCase()}" |
||||
|
{disabled} |
||||
|
on:longPress |
||||
|
on:click|preventDefault> |
||||
|
{#if longPressable} |
||||
|
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true"> |
||||
|
<use xlink:href="#spectrum-css-icon-CornerTriangle100" /> |
||||
|
</svg> |
||||
|
{/if} |
||||
|
{#if icon} |
||||
|
<svg class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" focusable="false" aria-hidden="true" aria-label="{icon}"> |
||||
|
<use xlink:href="#spectrum-icon-18-{icon}" /> |
||||
|
</svg> |
||||
|
{/if} |
||||
|
{#if $$slots} |
||||
|
<span class="spectrum-ActionButton-label"><slot /></span> |
||||
|
{/if} |
||||
|
</button> |
||||
|
|
||||
|
<style> |
||||
|
|
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,24 @@ |
|||||
|
<script> |
||||
|
import "@spectrum-css/actiongroup/dist/index-vars.css" |
||||
|
export let vertical; |
||||
|
export let justified; |
||||
|
export let quiet; |
||||
|
export let compact; |
||||
|
|
||||
|
// Attaches a spectrum-ActionGroup-item class to buttons inside the div |
||||
|
function group(element) { |
||||
|
const buttons = Array.from(element.getElementsByTagName('button')) |
||||
|
buttons.forEach(button => { |
||||
|
button.classList.add('spectrum-ActionGroup-item') |
||||
|
}) |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<div use:group |
||||
|
class:spectrum-ActionGroup--vertical={vertical} |
||||
|
class:spectrum-ActionGroup--justified={justified} |
||||
|
class:spectrum-ActionGroup--quiet={quiet} |
||||
|
class:spectrum-ActionGroup--compact={compact} |
||||
|
class="spectrum-ActionGroup"> |
||||
|
<slot /> |
||||
|
</div> |
||||
@ -0,0 +1,30 @@ |
|||||
|
<script> |
||||
|
import DropdownMenu from '../DropdownMenu/DropdownMenu.svelte' |
||||
|
import Menu from '../Menu/Menu.svelte' |
||||
|
let anchor; |
||||
|
let dropdown; |
||||
|
|
||||
|
// This is needed because display: contents is considered "invisible". |
||||
|
// It should only ever be an action button, so should be fine. |
||||
|
function getAnchor(node) { |
||||
|
anchor = node.firstChild |
||||
|
} |
||||
|
|
||||
|
export const hide = () => { dropdown.hide() } |
||||
|
export const show = () => { dropdown.show() } |
||||
|
</script> |
||||
|
|
||||
|
<div class="contents" use:getAnchor on:click={dropdown.show}> |
||||
|
<slot name="button" /> |
||||
|
</div> |
||||
|
<DropdownMenu bind:this={dropdown} {anchor} align="left"> |
||||
|
<Menu> |
||||
|
<slot /> |
||||
|
</Menu> |
||||
|
</DropdownMenu> |
||||
|
|
||||
|
<style> |
||||
|
div { |
||||
|
display: contents; |
||||
|
} |
||||
|
</style> |
||||
@ -1,128 +0,0 @@ |
|||||
<script> |
|
||||
export let active = false, |
|
||||
text = false, |
|
||||
small = false, |
|
||||
medium = false, |
|
||||
large = false, |
|
||||
blue = false, |
|
||||
green = false, |
|
||||
yellow = false, |
|
||||
purple = false, |
|
||||
red = false, |
|
||||
orange = false, |
|
||||
disabled = false, |
|
||||
href = false |
|
||||
</script> |
|
||||
|
|
||||
{#if href} |
|
||||
<a |
|
||||
{href} |
|
||||
class:active |
|
||||
class:small |
|
||||
class:medium |
|
||||
class:large |
|
||||
class:text |
|
||||
class:blue |
|
||||
class:green |
|
||||
class:yellow |
|
||||
class:purple |
|
||||
class:red |
|
||||
class:orange><slot /></a> |
|
||||
{:else} |
|
||||
<button |
|
||||
class:active |
|
||||
class:small |
|
||||
class:medium |
|
||||
class:large |
|
||||
class:text |
|
||||
class:blue |
|
||||
class:green |
|
||||
class:yellow |
|
||||
class:purple |
|
||||
class:red |
|
||||
class:orange |
|
||||
{disabled} |
|
||||
on:click|preventDefault> |
|
||||
<slot /> |
|
||||
</button> |
|
||||
{/if} |
|
||||
|
|
||||
<style> |
|
||||
button, |
|
||||
a { |
|
||||
font-family: var(--font-sans); |
|
||||
cursor: pointer; |
|
||||
font-weight: 600; |
|
||||
box-sizing: border-box; |
|
||||
overflow: hidden; |
|
||||
transition: all 0.08s ease 0s; |
|
||||
display: inline-flex; |
|
||||
align-items: center; |
|
||||
text-rendering: optimizeLegibility; |
|
||||
text-decoration: none; |
|
||||
outline: none; |
|
||||
-webkit-box-align: center; |
|
||||
user-select: none; |
|
||||
margin: 0; |
|
||||
padding: 0; |
|
||||
} |
|
||||
|
|
||||
.text { |
|
||||
background-color: transparent; |
|
||||
color: var(--grey-7); |
|
||||
border: none; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
button.text:hover:not([disabled]) { |
|
||||
color: var(--ink); |
|
||||
} |
|
||||
button.text:active:not([disabled]) { |
|
||||
color: var(--blue); |
|
||||
} |
|
||||
button.text.active:not([disabled]) { |
|
||||
color: var(--blue); |
|
||||
} |
|
||||
button.text:disabled { |
|
||||
cursor: not-allowed; |
|
||||
color: var(--grey-4); |
|
||||
} |
|
||||
|
|
||||
.blue { |
|
||||
color: var(--blue); |
|
||||
} |
|
||||
|
|
||||
.green { |
|
||||
color: var(--green); |
|
||||
} |
|
||||
|
|
||||
.red { |
|
||||
color: var(--red); |
|
||||
} |
|
||||
|
|
||||
.purple { |
|
||||
color: var(--purple); |
|
||||
} |
|
||||
|
|
||||
.yellow { |
|
||||
color: var(--yellow); |
|
||||
} |
|
||||
|
|
||||
.orange { |
|
||||
color: var(--orange); |
|
||||
} |
|
||||
|
|
||||
.small { |
|
||||
font-size: var(--font-size-xs); |
|
||||
margin: 0; |
|
||||
} |
|
||||
|
|
||||
.medium { |
|
||||
font-size: var(--font-size-s); |
|
||||
margin: 0; |
|
||||
} |
|
||||
|
|
||||
.large { |
|
||||
font-size: var(--font-size-m); |
|
||||
margin: 0; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,69 +0,0 @@ |
|||||
<script> |
|
||||
import { View } from "svench"; |
|
||||
import TextButton from "./TextButton.svelte"; |
|
||||
import Icon from "../Icons/Icon.svelte"; |
|
||||
</script> |
|
||||
|
|
||||
<style> |
|
||||
div { |
|
||||
display: grid; |
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr; |
|
||||
gap: var(--spacing-xl); |
|
||||
} |
|
||||
</style> |
|
||||
|
|
||||
<View name="Text"> |
|
||||
<div> |
|
||||
<TextButton text small on:click={() => alert('Clicked!')}> |
|
||||
<Icon name="view" /> |
|
||||
Add View |
|
||||
</TextButton> |
|
||||
<TextButton text medium on:click={() => alert('Clicked!')}> |
|
||||
<Icon name="addcolumn" /> |
|
||||
Add Column |
|
||||
</TextButton> |
|
||||
<TextButton text large on:click={() => alert('Clicked!')}> |
|
||||
<Icon name="addrow" /> |
|
||||
Add Row |
|
||||
</TextButton> |
|
||||
<TextButton text disabled on:click={() => alert('Clicked!')}> |
|
||||
<Icon name="arrow" direction="w" /> |
|
||||
Disabled Text Button |
|
||||
</TextButton> |
|
||||
<TextButton active text on:click={() => alert('Clicked!')}> |
|
||||
<Icon name="calculate" /> |
|
||||
Active Calculation |
|
||||
</TextButton> |
|
||||
</div> |
|
||||
</View> |
|
||||
|
|
||||
<View name="Colours"> |
|
||||
<div> |
|
||||
<TextButton text medium yellow on:click={() => alert('Clicked!')}> |
|
||||
<Icon name="view" /> |
|
||||
Add View |
|
||||
</TextButton> |
|
||||
<TextButton text medium blue on:click={() => alert('Clicked!')}> |
|
||||
<Icon name="addcolumn" /> |
|
||||
Add Column |
|
||||
</TextButton> |
|
||||
<TextButton text medium purple on:click={() => alert('Clicked!')}> |
|
||||
<Icon name="addrow" /> |
|
||||
Add Row |
|
||||
</TextButton> |
|
||||
<TextButton text medium red on:click={() => alert('Clicked!')}> |
|
||||
<Icon name="arrow" /> |
|
||||
Delete |
|
||||
</TextButton> |
|
||||
<TextButton text medium green on:click={() => alert('Clicked!')}> |
|
||||
<Icon name="calculate" /> |
|
||||
Calculate |
|
||||
</TextButton> |
|
||||
</div> |
|
||||
</View> |
|
||||
|
|
||||
<View name="Usage as a link"> |
|
||||
<div> |
|
||||
<TextButton green text href="https://google.com">This is a link</TextButton> |
|
||||
</div> |
|
||||
</View> |
|
||||
@ -0,0 +1,17 @@ |
|||||
|
<script> |
||||
|
import "@spectrum-css/link/dist/index-vars.css" |
||||
|
|
||||
|
export let href = "#" |
||||
|
export let size = "M" |
||||
|
export let quiet = false; |
||||
|
export let primary = false; |
||||
|
export let secondary = false; |
||||
|
export let overBackground = false |
||||
|
</script> |
||||
|
|
||||
|
<a {href} |
||||
|
class:spectrum-Link--primary={primary} |
||||
|
class:spectrum-Link--secondary={secondary} |
||||
|
class:spectrum-Link--overBackground={overBackground} |
||||
|
class:spectrum-Link--quiet={quiet} |
||||
|
class="spectrum-Link spectrum-Link--size{size}"><slot /></a> |
||||
@ -0,0 +1,15 @@ |
|||||
|
<script> |
||||
|
export let icon = undefined; |
||||
|
export let disabled = undefined; |
||||
|
</script> |
||||
|
|
||||
|
<li on:click class="spectrum-Menu-item" class:is-disabled={disabled} role="menuitem" tabindex="0"> |
||||
|
<span class="spectrum-Menu-itemLabel"> |
||||
|
{#if icon} |
||||
|
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label={icon}> |
||||
|
<use xlink:href="#spectrum-icon-18-{icon}"></use> |
||||
|
</svg> |
||||
|
{/if} |
||||
|
<span class="spectrum-Menu-itemLabel"><slot /></span> |
||||
|
</span> |
||||
|
</li> |
||||
@ -0,0 +1,7 @@ |
|||||
|
<script> |
||||
|
import "@spectrum-css/menu/dist/index-vars.css" |
||||
|
</script> |
||||
|
|
||||
|
<ul class="spectrum-Menu" role="menu"> |
||||
|
<slot /> |
||||
|
</ul> |
||||
@ -0,0 +1,19 @@ |
|||||
|
<script> |
||||
|
import Menu from './Menu.svelte' |
||||
|
import Separator from './Separator.svelte' |
||||
|
import Section from './Section.svelte' |
||||
|
import Item from './Item.svelte' |
||||
|
</script> |
||||
|
|
||||
|
<Menu> |
||||
|
<Section heading="Section heading"> |
||||
|
<Item>Some Item 1</Item> |
||||
|
<Item>Some Item 2</Item> |
||||
|
<Item>Some Item 3</Item> |
||||
|
</Section> |
||||
|
<Separator /> |
||||
|
<Section heading="Section heading"> |
||||
|
<Item icon="SaveFloppy">Save</Item> |
||||
|
<Item disabled icon="DataDownload">Download</Item> |
||||
|
</Section> |
||||
|
</Menu> |
||||
@ -0,0 +1,9 @@ |
|||||
|
<script> |
||||
|
export let heading |
||||
|
</script> |
||||
|
<li role="presentation"> |
||||
|
<span class="spectrum-Menu-sectionHeading">{heading}</span> |
||||
|
<ul class="spectrum-Menu" role="group"> |
||||
|
<slot /> |
||||
|
</ul> |
||||
|
</li> |
||||
@ -0,0 +1 @@ |
|||||
|
<li class="spectrum-Menu-divider" role="separator"></li> |
||||
Loading…
Reference in new issue