Merge branch 'spectrum-bbui' of github.com:Budibase/budibase into spectrum-bbui
This commit is contained in:
commit
0acc823af4
40 changed files with 280 additions and 288 deletions
|
@ -40,6 +40,10 @@
|
||||||
"build:docker:staging": "cd hosting/scripts/linux/ && ./release-to-docker-hub.sh staging && cd -"
|
"build:docker:staging": "cd hosting/scripts/linux/ && ./release-to-docker-hub.sh staging && cd -"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@spectrum-css/actionbutton": "^1.0.1",
|
||||||
|
"@spectrum-css/actiongroup": "^1.0.1",
|
||||||
|
"@spectrum-css/link": "^3.1.1",
|
||||||
|
"@spectrum-css/menu": "^3.0.1",
|
||||||
"@spectrum-css/toast": "^3.0.1"
|
"@spectrum-css/toast": "^3.0.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
65
packages/bbui/src/ActionButton/ActionButton.svelte
Normal file
65
packages/bbui/src/ActionButton/ActionButton.svelte
Normal file
|
@ -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>
|
||||||
|
|
24
packages/bbui/src/ActionGroup/ActionGroup.svelte
Normal file
24
packages/bbui/src/ActionGroup/ActionGroup.svelte
Normal file
|
@ -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>
|
30
packages/bbui/src/ActionMenu/ActionMenu.svelte
Normal file
30
packages/bbui/src/ActionMenu/ActionMenu.svelte
Normal file
|
@ -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>
|
|
@ -18,10 +18,10 @@ export default function positionDropdown(element, { anchor, align }) {
|
||||||
if (spaceAbove > spaceBelow) {
|
if (spaceAbove > spaceBelow) {
|
||||||
positionSide = "bottom"
|
positionSide = "bottom"
|
||||||
maxHeight = spaceAbove - 20
|
maxHeight = spaceAbove - 20
|
||||||
y = window.innerHeight - spaceAbove
|
y = window.innerHeight - spaceAbove + 5
|
||||||
} else {
|
} else {
|
||||||
positionSide = "top"
|
positionSide = "top"
|
||||||
y = bottom
|
y = bottom + 5
|
||||||
maxHeight = spaceBelow - 20
|
maxHeight = spaceBelow - 20
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,15 +1,13 @@
|
||||||
<script>
|
<script>
|
||||||
import "@spectrum-css/button/dist/index-vars.css"
|
import "@spectrum-css/button/dist/index-vars.css"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export let href = false
|
|
||||||
export let disabled = false
|
export let disabled = false
|
||||||
|
|
||||||
/** @type {('S', 'M', 'L', 'XL')} Size of button */
|
/** @type {('S', 'M', 'L', 'XL')} Size of button */
|
||||||
export let size = "M";
|
export let size = "M";
|
||||||
/** @type {('cta','primary','secondary','warning', 'overBackground')} Type of button */
|
|
||||||
export let type = "primary"
|
// Types
|
||||||
|
export let cta, primary, secondary, warning, overBackground;
|
||||||
|
|
||||||
export let quiet = false
|
export let quiet = false
|
||||||
|
|
||||||
|
@ -17,21 +15,14 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
{#if href}
|
|
||||||
<a
|
|
||||||
class="spectrum-Button spectrum-Button--{type} spectrum-Button--size{size.toUpperCase()}"
|
|
||||||
{href}
|
|
||||||
{disabled}>
|
|
||||||
{#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}
|
|
||||||
<span class="spectrum-Button-label"><slot /></span>
|
|
||||||
</a>
|
|
||||||
{:else}
|
|
||||||
<button
|
<button
|
||||||
class="spectrum-Button spectrum-Button--{type} spectrum-Button--size{size.toUpperCase()} {quiet && 'spectrum-Button--quiet'}"
|
class:spectrum-Button--cta={cta}
|
||||||
|
class:spectrum-Button--primary={primary}
|
||||||
|
class:spectrum-Button--secondary={secondary}
|
||||||
|
class:spectrum-Button--warning={warning}
|
||||||
|
class:spectrum-Button--overBackground={overBackground}
|
||||||
|
class:spectrum-Button--quiet={quiet}
|
||||||
|
class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
|
||||||
{disabled}
|
{disabled}
|
||||||
on:click|preventDefault>
|
on:click|preventDefault>
|
||||||
{#if icon}
|
{#if icon}
|
||||||
|
@ -43,7 +34,6 @@
|
||||||
<span class="spectrum-Button-label"><slot /></span>
|
<span class="spectrum-Button-label"><slot /></span>
|
||||||
{/if}
|
{/if}
|
||||||
</button>
|
</button>
|
||||||
{/if}
|
|
||||||
|
|
||||||
<style>
|
<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>
|
|
|
@ -1,6 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import Flatpickr from "svelte-flatpickr"
|
import Flatpickr from "svelte-flatpickr"
|
||||||
import { Label, Input } from "../"
|
import { Label } from "../"
|
||||||
import "flatpickr/dist/flatpickr.css"
|
import "flatpickr/dist/flatpickr.css"
|
||||||
|
|
||||||
const PICKER_OPTIONS = {
|
const PICKER_OPTIONS = {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { slide } from "svelte/transition"
|
import { slide } from "svelte/transition"
|
||||||
import Portal from "svelte-portal"
|
import Portal from "svelte-portal"
|
||||||
import clickOutside from "../Actions/click_outside"
|
import ActionButton from '../ActionButton/ActionButton.svelte'
|
||||||
|
|
||||||
export let title
|
export let title
|
||||||
|
|
||||||
|
@ -40,7 +40,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<slot name="buttons" />
|
<slot name="buttons" />
|
||||||
<i class="ri-close-fill close" on:click={hide} />
|
<ActionButton quiet icon="Close" on:click={hide} />
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<slot name="body" />
|
<slot name="body" />
|
||||||
|
|
17
packages/bbui/src/Link/Link.svelte
Normal file
17
packages/bbui/src/Link/Link.svelte
Normal file
|
@ -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>
|
15
packages/bbui/src/Menu/Item.svelte
Normal file
15
packages/bbui/src/Menu/Item.svelte
Normal file
|
@ -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>
|
7
packages/bbui/src/Menu/Menu.svelte
Normal file
7
packages/bbui/src/Menu/Menu.svelte
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
<script>
|
||||||
|
import "@spectrum-css/menu/dist/index-vars.css"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ul class="spectrum-Menu" role="menu">
|
||||||
|
<slot />
|
||||||
|
</ul>
|
19
packages/bbui/src/Menu/Menu.svench
Normal file
19
packages/bbui/src/Menu/Menu.svench
Normal file
|
@ -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>
|
9
packages/bbui/src/Menu/Section.svelte
Normal file
9
packages/bbui/src/Menu/Section.svelte
Normal file
|
@ -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>
|
1
packages/bbui/src/Menu/Separator.svelte
Normal file
1
packages/bbui/src/Menu/Separator.svelte
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<li class="spectrum-Menu-divider" role="separator"></li>
|
|
@ -46,11 +46,11 @@
|
||||||
<div class="spectrum-ButtonGroup-item">
|
<div class="spectrum-ButtonGroup-item">
|
||||||
<slot name="footer" />
|
<slot name="footer" />
|
||||||
{#if showCancelButton}
|
{#if showCancelButton}
|
||||||
<Button type="secondary" on:click={hide}>{cancelText}</Button>
|
<Button secondary on:click={hide}>{cancelText}</Button>
|
||||||
{/if}
|
{/if}
|
||||||
{#if showConfirmButton}
|
{#if showConfirmButton}
|
||||||
<Button
|
<Button
|
||||||
type="cta"
|
cta
|
||||||
primary
|
primary
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
disabled={confirmDisabled}
|
disabled={confirmDisabled}
|
||||||
|
|
|
@ -8,9 +8,11 @@ export { default as Select } from "./Form/Select.svelte"
|
||||||
export { default as DataList } from "./Form/DataList.svelte"
|
export { default as DataList } from "./Form/DataList.svelte"
|
||||||
export { default as Dropzone } from "./Dropzone/Dropzone.svelte"
|
export { default as Dropzone } from "./Dropzone/Dropzone.svelte"
|
||||||
export { default as Drawer } from "./Drawer/Drawer.svelte"
|
export { default as Drawer } from "./Drawer/Drawer.svelte"
|
||||||
|
export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
|
||||||
|
export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"
|
||||||
|
export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte"
|
||||||
export { default as Button } from "./Button/Button.svelte"
|
export { default as Button } from "./Button/Button.svelte"
|
||||||
export { default as Icon, iconOptions, directions } from "./Icons/Icon.svelte"
|
export { default as Icon, iconOptions, directions } from "./Icons/Icon.svelte"
|
||||||
export { default as TextButton } from "./Button/TextButton.svelte"
|
|
||||||
export { default as Toggle } from "./Form/Toggle.svelte"
|
export { default as Toggle } from "./Form/Toggle.svelte"
|
||||||
export { default as Radio } from "./Form/Radio.svelte"
|
export { default as Radio } from "./Form/Radio.svelte"
|
||||||
export { default as Checkbox } from "./Form/Checkbox.svelte"
|
export { default as Checkbox } from "./Form/Checkbox.svelte"
|
||||||
|
@ -22,7 +24,12 @@ export { default as Popover } from "./Popover/Popover.svelte"
|
||||||
export { default as Body } from "./Styleguide/Body.svelte"
|
export { default as Body } from "./Styleguide/Body.svelte"
|
||||||
export { default as Heading } from "./Styleguide/Heading.svelte"
|
export { default as Heading } from "./Styleguide/Heading.svelte"
|
||||||
export { default as Label } from "./Styleguide/Label.svelte"
|
export { default as Label } from "./Styleguide/Label.svelte"
|
||||||
|
export { default as Link } from "./Link/Link.svelte"
|
||||||
export { default as Close } from "./Button/Close.svelte"
|
export { default as Close } from "./Button/Close.svelte"
|
||||||
|
export { default as Menu } from "./Menu/Menu.svelte"
|
||||||
|
export { default as MenuSection } from "./Menu/Section.svelte"
|
||||||
|
export { default as MenuSeparator } from "./Menu/Separator.svelte"
|
||||||
|
export { default as MenuItem } from "./Menu/Item.svelte"
|
||||||
export { default as Modal } from "./Modal/Modal.svelte"
|
export { default as Modal } from "./Modal/Modal.svelte"
|
||||||
export { default as ModalContent } from "./Modal/ModalContent.svelte"
|
export { default as ModalContent } from "./Modal/ModalContent.svelte"
|
||||||
export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
|
export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { sortBy } from "lodash/fp"
|
import { sortBy } from "lodash/fp"
|
||||||
import { automationStore } from "builderStore"
|
import { automationStore } from "builderStore"
|
||||||
import { Button, DropdownMenu, Modal } from "@budibase/bbui"
|
import { ActionButton, DropdownMenu, Modal } from "@budibase/bbui"
|
||||||
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
|
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
|
||||||
import CreateWebhookModal from "../Shared/CreateWebhookModal.svelte"
|
import CreateWebhookModal from "../Shared/CreateWebhookModal.svelte"
|
||||||
|
|
||||||
|
@ -64,14 +64,14 @@
|
||||||
<div class="tab-container">
|
<div class="tab-container">
|
||||||
{#each tabs as tab, idx}
|
{#each tabs as tab, idx}
|
||||||
<div bind:this={anchors[idx]}>
|
<div bind:this={anchors[idx]}>
|
||||||
<Button
|
<ActionButton
|
||||||
size="S"
|
size="S"
|
||||||
quiet
|
quiet
|
||||||
icon={tab.icon}
|
icon={tab.icon}
|
||||||
disabled={tab.disabled}
|
disabled={tab.disabled}
|
||||||
on:click={tab.disabled ? null : () => onChangeTab(idx)}>
|
on:click={tab.disabled ? null : () => onChangeTab(idx)}>
|
||||||
{tab.label}
|
{tab.label}
|
||||||
</Button>
|
</ActionButton>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -92,7 +92,7 @@
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
{#if stepId === 'WEBHOOK'}
|
{#if stepId === 'WEBHOOK'}
|
||||||
<Button type="secondary" on:click={() => webhookModal.show()}>
|
<Button secondary on:click={() => webhookModal.show()}>
|
||||||
Set Up Webhook
|
Set Up Webhook
|
||||||
</Button>
|
</Button>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -65,7 +65,7 @@
|
||||||
{webhookModal} />
|
{webhookModal} />
|
||||||
{:else if $automationStore.selectedAutomation}
|
{:else if $automationStore.selectedAutomation}
|
||||||
<div class="block-label">{automation.name}</div>
|
<div class="block-label">{automation.name}</div>
|
||||||
<Button type="secondary" on:click={testAutomation}>Test Automation</Button>
|
<Button secondary on:click={testAutomation}>Test Automation</Button>
|
||||||
{/if}
|
{/if}
|
||||||
<Button
|
<Button
|
||||||
secondary
|
secondary
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div bind:this={anchor}>
|
<div bind:this={anchor}>
|
||||||
<Button icon="Calculator" type="overBackground" size="S" quiet
|
<Button icon="Calculator" primary size="S" quiet
|
||||||
on:click={dropdown.show}
|
on:click={dropdown.show}
|
||||||
active={view.field && view.calculation}>
|
active={view.field && view.calculation}>
|
||||||
Calculate
|
Calculate
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
let modal
|
let modal
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Button icon="AddCircle" type="overBackground" size="S" quiet on:click={modal.show}>
|
<Button icon="AddCircle" primary size="S" quiet on:click={modal.show}>
|
||||||
Create New Column
|
Create New Column
|
||||||
</Button>
|
</Button>
|
||||||
<Modal bind:this={modal}>
|
<Modal bind:this={modal}>
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
let modal
|
let modal
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Button icon="Add" type="overBackground" size="S" quiet on:click={modal.show}>
|
<Button icon="Add" primary size="S" quiet on:click={modal.show}>
|
||||||
{title}
|
{title}
|
||||||
</Button>
|
</Button>
|
||||||
<Modal bind:this={modal}>
|
<Modal bind:this={modal}>
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div bind:this={anchor}>
|
<div bind:this={anchor}>
|
||||||
<Button icon="CollectionAdd" type="overBackground" size="S" quiet on:click={dropdown.show}>
|
<Button icon="CollectionAdd" primary size="S" quiet on:click={dropdown.show}>
|
||||||
Create New View
|
Create New View
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Button icon="Delete" size="s" type="overBackground" quiet on:click={modal.show}>
|
<Button icon="Delete" size="s" primary quiet on:click={modal.show}>
|
||||||
Delete
|
Delete
|
||||||
{selectedRows.length}
|
{selectedRows.length}
|
||||||
row(s)
|
row(s)
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<Button icon="UsersLock" type="overBackground" size="S" quiet on:click={modal.show}>
|
<Button icon="UsersLock" primary size="S" quiet on:click={modal.show}>
|
||||||
Edit Roles
|
Edit Roles
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div bind:this={anchor}>
|
<div bind:this={anchor}>
|
||||||
<Button icon="Download" type="overBackground" size="S" quiet on:click={dropdown.show}>
|
<Button icon="Download" primary size="S" quiet on:click={dropdown.show}>
|
||||||
Export
|
Export
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div bind:this={anchor}>
|
<div bind:this={anchor}>
|
||||||
<Button icon="Filter" type="overBackground" size="S" quiet
|
<Button icon="Filter" primary size="S" quiet
|
||||||
on:click={dropdown.show}
|
on:click={dropdown.show}
|
||||||
active={view.filters && view.filters.length}>
|
active={view.filters && view.filters.length}>
|
||||||
Filter
|
Filter
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div bind:this={anchor}>
|
<div bind:this={anchor}>
|
||||||
<Button icon="Group" type="overBackground" size="S" quiet active={!!view.groupBy} on:click={dropdown.show}>
|
<Button icon="Group" primary size="S" quiet active={!!view.groupBy} on:click={dropdown.show}>
|
||||||
Group By
|
Group By
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div bind:this={anchor}>
|
<div bind:this={anchor}>
|
||||||
<Button icon="MagicWand" type="overBackground" size="S" quiet on:click={hideOrUnhide}>
|
<Button icon="MagicWand" primary size="S" quiet on:click={hideOrUnhide}>
|
||||||
{#if hideAutocolumns}
|
{#if hideAutocolumns}
|
||||||
Show Auto Columns
|
Show Auto Columns
|
||||||
{:else}
|
{:else}
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div bind:this={anchor}>
|
<div bind:this={anchor}>
|
||||||
<Button icon="LockClosed" type="overBackground" size="S" quiet on:click={openDropdown}>
|
<Button icon="LockClosed" primary size="S" quiet on:click={openDropdown}>
|
||||||
Manage Access
|
Manage Access
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -288,10 +288,10 @@
|
||||||
{/if}
|
{/if}
|
||||||
<footer class="create-column-options">
|
<footer class="create-column-options">
|
||||||
{#if !uneditable && originalName != null}
|
{#if !uneditable && originalName != null}
|
||||||
<Button type="warning" size="S" text on:click={confirmDelete}>Delete Column</Button>
|
<Button warning size="S" text on:click={confirmDelete}>Delete Column</Button>
|
||||||
{/if}
|
{/if}
|
||||||
<Button on:click={onClosed}>Cancel</Button>
|
<Button on:click={onClosed}>Cancel</Button>
|
||||||
<Button type="cta" on:click={saveColumn} bind:disabled={invalid}>
|
<Button cta on:click={saveColumn} bind:disabled={invalid}>
|
||||||
Save Column
|
Save Column
|
||||||
</Button>
|
</Button>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
@ -81,7 +81,7 @@
|
||||||
{/each}
|
{/each}
|
||||||
<div>
|
<div>
|
||||||
<Spacer small />
|
<Spacer small />
|
||||||
<Button icon="AddCircle" size="S" type="cta" on:click={addField}>
|
<Button icon="AddCircle" size="S" cta on:click={addField}>
|
||||||
Add
|
Add
|
||||||
{fieldLabel}
|
{fieldLabel}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import { Input, Label, TextButton } from "@budibase/bbui"
|
import { Input, Label, Link } from "@budibase/bbui"
|
||||||
import api from "builderStore/api"
|
import api from "builderStore/api"
|
||||||
import { notifications } from "@budibase/bbui"
|
import { notifications } from "@budibase/bbui"
|
||||||
import { database } from "stores/backend"
|
import { database } from "stores/backend"
|
||||||
|
@ -41,9 +41,9 @@
|
||||||
edit
|
edit
|
||||||
value={keys.budibase}
|
value={keys.budibase}
|
||||||
label="Budibase Cloud API Key" />
|
label="Budibase Cloud API Key" />
|
||||||
<TextButton text medium blue href="https://portal.budi.live">
|
<Link primary href="https://portal.budi.live">
|
||||||
Log in to the Budibase Hosting Portal to get your API Key. →
|
Log in to the Budibase Hosting Portal to get your API Key. →
|
||||||
</TextButton>
|
</Link>
|
||||||
<div>
|
<div>
|
||||||
<Label extraSmall grey>Instance ID (Webhooks)</Label>
|
<Label extraSmall grey>Instance ID (Webhooks)</Label>
|
||||||
<span>{$database._id}</span>
|
<span>{$database._id}</span>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import { params, goto } from "@roxi/routify"
|
import { params, goto } from "@roxi/routify"
|
||||||
import { Input, TextArea, Button, Body } from "@budibase/bbui"
|
import { Input, Button, Body } from "@budibase/bbui"
|
||||||
import { del } from "builderStore/api"
|
import { del } from "builderStore/api"
|
||||||
|
|
||||||
let value = ""
|
let value = ""
|
||||||
|
|
|
@ -1,8 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import { TextButton } from "@budibase/bbui"
|
import { goto } from "@roxi/routify"
|
||||||
import { Heading } from "@budibase/bbui"
|
import { ActionButton, Heading, Spacer } from "@budibase/bbui"
|
||||||
import { Spacer } from "@budibase/bbui"
|
|
||||||
import api from "builderStore/api"
|
|
||||||
import { notifications } from "@budibase/bbui"
|
import { notifications } from "@budibase/bbui"
|
||||||
import Spinner from "components/common/Spinner.svelte"
|
import Spinner from "components/common/Spinner.svelte"
|
||||||
import download from "downloadjs"
|
import download from "downloadjs"
|
||||||
|
@ -31,11 +29,11 @@
|
||||||
<Heading small black>{name}</Heading>
|
<Heading small black>{name}</Heading>
|
||||||
<Spacer medium />
|
<Spacer medium />
|
||||||
<div class="card-footer" data-cy={`app-${name}`}>
|
<div class="card-footer" data-cy={`app-${name}`}>
|
||||||
<TextButton text medium blue href="/builder/{_id}">
|
<ActionButton text medium blue on:click={() => $goto(`/builder/${_id}`)}>
|
||||||
Open
|
Open
|
||||||
{name}
|
{name}
|
||||||
→
|
→
|
||||||
</TextButton>
|
</ActionButton>
|
||||||
{#if appExportLoading}
|
{#if appExportLoading}
|
||||||
<Spinner size="10" />
|
<Spinner size="10" />
|
||||||
{:else}<i class="ri-folder-download-line" on:click={exportApp} />{/if}
|
{:else}<i class="ri-folder-download-line" on:click={exportApp} />{/if}
|
||||||
|
|
|
@ -1,32 +1,15 @@
|
||||||
<script>
|
<script>
|
||||||
import { TextButton as Button, Modal } from "@budibase/bbui"
|
import { Button, Modal } from "@budibase/bbui"
|
||||||
import BuilderSettingsModal from "./BuilderSettingsModal.svelte"
|
import BuilderSettingsModal from "./BuilderSettingsModal.svelte"
|
||||||
|
|
||||||
let modal
|
let modal
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<Button text on:click={modal.show}>
|
<Button overBackground quiet icon="Settings" text on:click={modal.show}>
|
||||||
<i class="ri-settings-3-fill" />
|
Settings
|
||||||
<p>Settings</p>
|
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<Modal bind:this={modal} width="30%">
|
<Modal bind:this={modal} width="30%">
|
||||||
<BuilderSettingsModal />
|
<BuilderSettingsModal />
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
<style>
|
|
||||||
div i {
|
|
||||||
font-size: 26px;
|
|
||||||
color: var(--grey-7);
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
div p {
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
font-size: var(--font-size-s);
|
|
||||||
color: var(--ink);
|
|
||||||
font-weight: 400;
|
|
||||||
margin: 0 0 0 12px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
import AppList from "components/start/AppList.svelte"
|
import AppList from "components/start/AppList.svelte"
|
||||||
import { get } from "builderStore/api"
|
import { get } from "builderStore/api"
|
||||||
import CreateAppModal from "components/start/CreateAppModal.svelte"
|
import CreateAppModal from "components/start/CreateAppModal.svelte"
|
||||||
import { Button, Heading, Modal, Spacer } from "@budibase/bbui"
|
import { Button, Heading, Modal, Spacer, Menu, MenuSection, MenuItem } from "@budibase/bbui"
|
||||||
import TemplateList from "components/start/TemplateList.svelte"
|
import TemplateList from "components/start/TemplateList.svelte"
|
||||||
import analytics from "analytics"
|
import analytics from "analytics"
|
||||||
import Banner from "/assets/orange-landscape.png"
|
import Banner from "/assets/orange-landscape.png"
|
||||||
|
@ -61,7 +61,7 @@
|
||||||
<div class="button-group">
|
<div class="button-group">
|
||||||
<Button secondary on:click={initiateAppImport}>Import Web App</Button>
|
<Button secondary on:click={initiateAppImport}>Import Web App</Button>
|
||||||
<Spacer medium />
|
<Spacer medium />
|
||||||
<Button primary on:click={modal.show}>Create New Web App</Button>
|
<Button cta on:click={modal.show}>Create New Web App</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
20
yarn.lock
20
yarn.lock
|
@ -824,6 +824,26 @@
|
||||||
estree-walker "^1.0.1"
|
estree-walker "^1.0.1"
|
||||||
micromatch "^4.0.2"
|
micromatch "^4.0.2"
|
||||||
|
|
||||||
|
"@spectrum-css/actionbutton@^1.0.1":
|
||||||
|
version "1.0.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577"
|
||||||
|
integrity sha512-AUqtyNabHF451Aj9i3xz82TxS5Z6k1dttA68/1hMeU9kbPCSS4P6Viw3vaRGs9CSspuR8xnnhDgrq+F+zMy2Hw==
|
||||||
|
|
||||||
|
"@spectrum-css/actiongroup@^1.0.1":
|
||||||
|
version "1.0.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-1.0.1.tgz#b95b86e7af229e90fe1e70399d8d4b547b4bd31c"
|
||||||
|
integrity sha512-5Q6uMjzv5BFA2TwGASr/jAtJpTWl26fhWvgGY8kOA0RCSij35l+YJg/FPXf6Nnj2qCOl8DkNycjT9YXJ+bhyVA==
|
||||||
|
|
||||||
|
"@spectrum-css/link@^3.1.1":
|
||||||
|
version "3.1.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/@spectrum-css/link/-/link-3.1.1.tgz#cb526a2e10b50ef5a7ae29cca7272e2610d597eb"
|
||||||
|
integrity sha512-Bi88lRhTY7g6nM/ryW1yY4Cji211ZYNtRxkxbV7n2lPvwMAAQtyx0qVD3ru4kTGj/FFVvmPR3XiOE10K13HSNA==
|
||||||
|
|
||||||
|
"@spectrum-css/menu@^3.0.1":
|
||||||
|
version "3.0.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.1.tgz#2a376f991acc24e12ec892bb6b9db2650fc41fbe"
|
||||||
|
integrity sha512-Qjg0+1O0eC89sb/bRFq2AGnQ8XqhVy23TUXHyffNM8qdcMssnlny3QmhzjURCZKvx/Y5UytCpzhedPQqSpQwZg==
|
||||||
|
|
||||||
"@spectrum-css/toast@^3.0.1":
|
"@spectrum-css/toast@^3.0.1":
|
||||||
version "3.0.1"
|
version "3.0.1"
|
||||||
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"
|
||||||
|
|
Loading…
Reference in a new issue