forked from tsai/budibase
Andrew Kingston
6 years ago
21 changed files with 51 additions and 474 deletions
@ -1,70 +0,0 @@ |
|||||
<script> |
|
||||
export let disabled = false |
|
||||
export let hidden = false |
|
||||
export let secondary = false |
|
||||
export let primary = true |
|
||||
export let cancel = false |
|
||||
export let alert = false |
|
||||
export let warning = false |
|
||||
</script> |
|
||||
|
|
||||
<button |
|
||||
on:click |
|
||||
class="button" |
|
||||
class:hidden |
|
||||
class:secondary |
|
||||
class:primary |
|
||||
class:alert |
|
||||
class:cancel |
|
||||
class:warning |
|
||||
{disabled}> |
|
||||
<slot /> |
|
||||
</button> |
|
||||
|
|
||||
<style> |
|
||||
.primary { |
|
||||
color: #ffffff; |
|
||||
background: var(--blue); |
|
||||
border: solid 1px var(--blue); |
|
||||
} |
|
||||
|
|
||||
.alert { |
|
||||
color: white; |
|
||||
background: #e26d69; |
|
||||
border: solid 1px #e26d69; |
|
||||
} |
|
||||
|
|
||||
.cancel { |
|
||||
color: var(--secondary40); |
|
||||
background: none; |
|
||||
} |
|
||||
|
|
||||
.secondary { |
|
||||
color: var(--ink); |
|
||||
border: solid 1px var(--grey-4); |
|
||||
background: white; |
|
||||
} |
|
||||
|
|
||||
.button { |
|
||||
font-size: 14px; |
|
||||
font-weight: 500; |
|
||||
border-radius: 3px; |
|
||||
padding: 10px 20px; |
|
||||
height: 40px; |
|
||||
} |
|
||||
|
|
||||
.button:hover { |
|
||||
cursor: pointer; |
|
||||
filter: saturate(90%); |
|
||||
} |
|
||||
|
|
||||
.button:disabled { |
|
||||
color: rgba(22, 48, 87, 0.2); |
|
||||
cursor: default; |
|
||||
background: transparent; |
|
||||
} |
|
||||
|
|
||||
.hidden { |
|
||||
visibility: hidden; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,171 +0,0 @@ |
|||||
<script> |
|
||||
export let color = "primary" |
|
||||
export let className = "" |
|
||||
export let style = "" |
|
||||
export let groupPosition = "" |
|
||||
export let grouped = false |
|
||||
|
|
||||
$: borderClass = grouped ? "" : "border-normal" |
|
||||
</script> |
|
||||
|
|
||||
<button |
|
||||
class="{color} |
|
||||
{className} |
|
||||
{borderClass} |
|
||||
{grouped ? 'grouped' : ''}" |
|
||||
{style} |
|
||||
on:click> |
|
||||
<slot /> |
|
||||
</button> |
|
||||
|
|
||||
<style> |
|
||||
.border-normal { |
|
||||
border-radius: var(--borderradiusall); |
|
||||
} |
|
||||
.border-left { |
|
||||
border-radius: var(--borderradius) 0 0 var(--borderradius); |
|
||||
} |
|
||||
.border-right { |
|
||||
border-radius: 0 var(--borderradius) var(--borderradius) 0; |
|
||||
} |
|
||||
.border-middle { |
|
||||
border-radius: 0; |
|
||||
} |
|
||||
|
|
||||
button { |
|
||||
border-style: solid; |
|
||||
padding: 7.5px 15px; |
|
||||
cursor: pointer; |
|
||||
margin: 5px; |
|
||||
border-radius: 5px; |
|
||||
} |
|
||||
|
|
||||
/* ---- PRIMARY ----*/ |
|
||||
.primary { |
|
||||
background-color: var(--blue); |
|
||||
border-color: var(--blue); |
|
||||
color: var(--white); |
|
||||
} |
|
||||
|
|
||||
.primary:hover { |
|
||||
background-color: var(--blue); |
|
||||
border-color: var(--blue); |
|
||||
} |
|
||||
|
|
||||
.primary:active { |
|
||||
background-color: var(--primarydark); |
|
||||
border-color: var(--primarydark); |
|
||||
} |
|
||||
|
|
||||
.primary-outline { |
|
||||
background-color: var(--white); |
|
||||
border-color: var(--blue); |
|
||||
color: var(--blue); |
|
||||
} |
|
||||
|
|
||||
.primary-outline:hover { |
|
||||
background-color: var(--primary10); |
|
||||
} |
|
||||
|
|
||||
.primary-outline:pressed { |
|
||||
background-color: var(--primary25); |
|
||||
} |
|
||||
|
|
||||
/* ---- secondary ----*/ |
|
||||
|
|
||||
.secondary { |
|
||||
background-color: var(--ink); |
|
||||
border-color: var(--ink); |
|
||||
color: var(--white); |
|
||||
} |
|
||||
|
|
||||
.secondary:hover { |
|
||||
background-color: var(--secondary75); |
|
||||
border-color: var(--secondary75); |
|
||||
} |
|
||||
|
|
||||
.secondary:pressed { |
|
||||
background-color: var(--secondarydark); |
|
||||
border-color: var(--secondarydark); |
|
||||
} |
|
||||
|
|
||||
.secondary-outline { |
|
||||
background-color: var(--white); |
|
||||
border-color: var(--ink); |
|
||||
color: var(--ink); |
|
||||
} |
|
||||
|
|
||||
.secondary-outline:hover { |
|
||||
background-color: var(--secondary10); |
|
||||
} |
|
||||
|
|
||||
.secondary-outline:pressed { |
|
||||
background-color: var(--secondary25); |
|
||||
} |
|
||||
|
|
||||
/* ---- success ----*/ |
|
||||
.success { |
|
||||
background-color: var(--success100); |
|
||||
border-color: var(--success100); |
|
||||
color: var(--white); |
|
||||
} |
|
||||
|
|
||||
.success:hover { |
|
||||
background-color: var(--success75); |
|
||||
border-color: var(--success75); |
|
||||
} |
|
||||
|
|
||||
.success:pressed { |
|
||||
background-color: var(--successdark); |
|
||||
border-color: var(--successdark); |
|
||||
} |
|
||||
|
|
||||
.success-outline { |
|
||||
background-color: var(--white); |
|
||||
border-color: var(--success100); |
|
||||
color: var(--success100); |
|
||||
} |
|
||||
|
|
||||
.success-outline:hover { |
|
||||
background-color: var(--success10); |
|
||||
} |
|
||||
|
|
||||
.success-outline:pressed { |
|
||||
background-color: var(--success25); |
|
||||
} |
|
||||
|
|
||||
/* ---- deletion ----*/ |
|
||||
.deletion { |
|
||||
background-color: var(--red); |
|
||||
border-color: var(--red); |
|
||||
color: var(--white); |
|
||||
} |
|
||||
|
|
||||
.deletion:hover { |
|
||||
background-color: var(--red-light); |
|
||||
border-color: var(--red); |
|
||||
color: var(--red); |
|
||||
} |
|
||||
|
|
||||
.deletion:pressed { |
|
||||
background-color: var(--red-dark); |
|
||||
border-color: var(--red-dark); |
|
||||
color: var(--white); |
|
||||
} |
|
||||
|
|
||||
.deletion-outline { |
|
||||
background-color: var(--white); |
|
||||
border-color: var(--red); |
|
||||
color: var(--red); |
|
||||
} |
|
||||
|
|
||||
.deletion-outline:hover { |
|
||||
background-color: var(--red-light); |
|
||||
color: var(--red); |
|
||||
} |
|
||||
|
|
||||
.deletion-outline:pressed { |
|
||||
background-color: var(--red-dark); |
|
||||
color: var(--white); |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,15 +0,0 @@ |
|||||
<script> |
|
||||
export let style = "" |
|
||||
</script> |
|
||||
|
|
||||
<div class="root" {style}> |
|
||||
<slot /> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.root { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: space-between; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,36 +0,0 @@ |
|||||
<script> |
|
||||
export let value |
|
||||
export let label |
|
||||
|
|
||||
const inputChanged = ev => { |
|
||||
try { |
|
||||
value = Number(ev.target.value) |
|
||||
} catch (_) { |
|
||||
value = null |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
let numberText = value === null || value === undefined ? "" : value.toString() |
|
||||
</script> |
|
||||
|
|
||||
<div class="numberbox"> |
|
||||
<label>{label}</label> |
|
||||
<input |
|
||||
class="budibase__input" |
|
||||
type="number" |
|
||||
{value} |
|
||||
on:change={inputChanged} /> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.numberbox { |
|
||||
display: grid; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
label { |
|
||||
font-size: 14px; |
|
||||
font-weight: 500; |
|
||||
margin-bottom: 8px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,76 +0,0 @@ |
|||||
<script> |
|
||||
export let tabs = [] |
|
||||
export const selectTab = tabName => { |
|
||||
selected = tabName |
|
||||
selectedIndex = tabs.indexOf(selected) |
|
||||
} |
|
||||
|
|
||||
let selected = tabs.length > 0 && tabs[0] |
|
||||
let selectedIndex = 0 |
|
||||
|
|
||||
const isSelected = tab => selected === tab |
|
||||
</script> |
|
||||
|
|
||||
<div class="root"> |
|
||||
<div class="switcher"> |
|
||||
{#each tabs as tab} |
|
||||
<button class:selected={selected === tab} on:click={() => selectTab(tab)}> |
|
||||
{tab} |
|
||||
</button> |
|
||||
{/each} |
|
||||
</div> |
|
||||
|
|
||||
<div class="panel"> |
|
||||
{#if selectedIndex === 0} |
|
||||
<slot name="0" /> |
|
||||
{:else if selectedIndex === 1} |
|
||||
<slot name="1" /> |
|
||||
{:else if selectedIndex === 2} |
|
||||
<slot name="2" /> |
|
||||
{:else if selectedIndex === 3} |
|
||||
<slot name="3" /> |
|
||||
{/if} |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.root { |
|
||||
height: 100%; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
padding: 20px 20px; |
|
||||
border-left: solid 1px var(--grey-2); |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
.switcher { |
|
||||
display: flex; |
|
||||
margin: 0px 20px 20px 0px; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
.switcher > button { |
|
||||
display: inline-block; |
|
||||
border: none; |
|
||||
margin: 0; |
|
||||
padding: 0; |
|
||||
cursor: pointer; |
|
||||
font-size: 18px; |
|
||||
font-weight: 600; |
|
||||
color: var(--grey-5); |
|
||||
margin-right: 20px; |
|
||||
background: none; |
|
||||
outline: none; |
|
||||
font-family: Inter; |
|
||||
} |
|
||||
|
|
||||
.switcher > .selected { |
|
||||
color: var(--ink); |
|
||||
} |
|
||||
|
|
||||
.panel { |
|
||||
min-height: 0; |
|
||||
height: 100%; |
|
||||
overflow-y: auto; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,3 +0,0 @@ |
|||||
import { flow } from "lodash/fp" |
|
||||
|
|
||||
export const pipe = (arg, funcs) => flow(funcs)(arg) |
|
||||
@ -1,13 +0,0 @@ |
|||||
import { eventHandlers } from "../../../../client/src/state/eventHandlers" |
|
||||
export { EVENT_TYPE_MEMBER_NAME } from "../../../../client/src/state/eventHandlers" |
|
||||
|
|
||||
export const allHandlers = () => { |
|
||||
const handlersObj = eventHandlers() |
|
||||
|
|
||||
const handlers = Object.keys(handlersObj).map(name => ({ |
|
||||
name, |
|
||||
...handlersObj[name], |
|
||||
})) |
|
||||
|
|
||||
return handlers |
|
||||
} |
|
||||
Loading…
Reference in new issue