forked from tsai/budibase
Andrew Kingston
6 years ago
10 changed files with 114 additions and 428 deletions
@ -0,0 +1,27 @@ |
|||||
|
<script> |
||||
|
import "@spectrum-css/switch/dist/index-vars.css" |
||||
|
import { createEventDispatcher } from "svelte" |
||||
|
|
||||
|
export let value = false |
||||
|
export let error = null |
||||
|
export let id = null |
||||
|
export let text = null |
||||
|
export let disabled = false |
||||
|
|
||||
|
const dispatch = createEventDispatcher() |
||||
|
const onChange = event => { |
||||
|
dispatch("change", event.target.checked) |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<div class="spectrum-Switch spectrum-Switch--emphasized"> |
||||
|
<input |
||||
|
checked={value} |
||||
|
{disabled} |
||||
|
on:change={onChange} |
||||
|
{id} |
||||
|
type="checkbox" |
||||
|
class="spectrum-Switch-input" /> |
||||
|
<span class="spectrum-Switch-switch" /> |
||||
|
<label class="spectrum-Switch-label" for={id}>{text}</label> |
||||
|
</div> |
||||
@ -1,88 +0,0 @@ |
|||||
<script> |
|
||||
import Label from "../Styleguide/Label.svelte" |
|
||||
|
|
||||
export let label |
|
||||
export let min = 0 |
|
||||
export let max = 100 |
|
||||
export let step = 1 |
|
||||
export let value |
|
||||
export let showValue = false |
|
||||
export let showRange = false |
|
||||
</script> |
|
||||
|
|
||||
<div> |
|
||||
{#if label} |
|
||||
<Label extraSmall grey> |
|
||||
{label} |
|
||||
{#if showValue && value != null}({value}){/if} |
|
||||
</Label> |
|
||||
{/if} |
|
||||
<div class="container"> |
|
||||
{#if showRange && min != null}<span>{min}</span>{/if} |
|
||||
<input type="range" bind:value {min} {max} {step} /> |
|
||||
{#if showRange && max != null}<span>{max}</span>{/if} |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.container { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: flex-start; |
|
||||
align-items: center; |
|
||||
gap: var(--spacing-s); |
|
||||
} |
|
||||
|
|
||||
span { |
|
||||
flex: 0 0 auto; |
|
||||
color: var(--grey-5); |
|
||||
font-family: var(--font-sans); |
|
||||
font-size: var(--font-size-xs); |
|
||||
font-weight: 400; |
|
||||
} |
|
||||
|
|
||||
input[type="range"] { |
|
||||
width: 100%; |
|
||||
margin: 0; |
|
||||
background-color: transparent; |
|
||||
-webkit-appearance: none; |
|
||||
flex: 1 1 auto; |
|
||||
} |
|
||||
input[type="range"]:focus { |
|
||||
outline: none; |
|
||||
} |
|
||||
input[type="range"]::-webkit-slider-runnable-track { |
|
||||
background: var(--grey-4); |
|
||||
border-radius: 9px; |
|
||||
width: 100%; |
|
||||
height: 18px; |
|
||||
cursor: pointer; |
|
||||
padding: 0 2px; |
|
||||
} |
|
||||
input[type="range"]::-webkit-slider-thumb { |
|
||||
width: 14px; |
|
||||
height: 14px; |
|
||||
background: white; |
|
||||
border-radius: 100%; |
|
||||
cursor: pointer; |
|
||||
-webkit-appearance: none; |
|
||||
border: none; |
|
||||
margin-top: 2px; |
|
||||
} |
|
||||
input[type="range"]::-moz-range-track { |
|
||||
background: var(--grey-4); |
|
||||
border-radius: 9px; |
|
||||
width: 100%; |
|
||||
height: 18px; |
|
||||
cursor: pointer; |
|
||||
padding: 0 2px; |
|
||||
} |
|
||||
input[type="range"]::-moz-range-thumb { |
|
||||
width: 14px; |
|
||||
height: 14px; |
|
||||
background: white; |
|
||||
border-radius: 100%; |
|
||||
cursor: pointer; |
|
||||
border: none; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,110 +1,22 @@ |
|||||
<script> |
<script> |
||||
export let name = undefined |
import Field from "./Field.svelte" |
||||
export let text = "" |
import Switch from "./Core/Switch.svelte" |
||||
export let checked = false |
import { createEventDispatcher } from "svelte" |
||||
|
|
||||
|
export let value = null |
||||
|
export let label = null |
||||
|
export let labelPosition = "above" |
||||
|
export let text = null |
||||
export let disabled = false |
export let disabled = false |
||||
export let screenreader = true |
export let error = null |
||||
export let thin = false |
|
||||
</script> |
|
||||
|
|
||||
<label for={name} class="container"> |
|
||||
<div class="toggle"> |
|
||||
<input |
|
||||
id={name} |
|
||||
{name} |
|
||||
type="checkbox" |
|
||||
class:screenreader |
|
||||
{disabled} |
|
||||
bind:checked |
|
||||
on:change /> |
|
||||
<div class="track"> |
|
||||
<div class="thumb" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
{#if text}<span class="text" class:thin>{text}</span>{/if} |
|
||||
</label> |
|
||||
|
|
||||
<style> |
|
||||
.container { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
gap: var(--spacing-s); |
|
||||
} |
|
||||
.container:disabled { |
|
||||
background-color: var(--grey-2); |
|
||||
cursor: not-allowed; |
|
||||
} |
|
||||
|
|
||||
.toggle { |
const dispatch = createEventDispatcher() |
||||
position: relative; |
const onChange = e => { |
||||
display: inline-block; |
dispatch("change", e.detail) |
||||
align-self: center; |
value = e.detail |
||||
cursor: pointer; |
|
||||
-webkit-user-select: none; |
|
||||
background: transparent; |
|
||||
} |
|
||||
|
|
||||
.track { |
|
||||
width: 32px; |
|
||||
height: 18px; |
|
||||
background-color: var(--grey-4); |
|
||||
border-radius: 9px; |
|
||||
transition-delay: 0.12s; |
|
||||
transition-duration: 0.2s; |
|
||||
transition-property: background; |
|
||||
transition-timing-function: cubic-bezier(0, 0, 0.2, 1); |
|
||||
position: relative; |
|
||||
} |
|
||||
|
|
||||
.thumb { |
|
||||
cursor: pointer; |
|
||||
position: absolute; |
|
||||
transition-duration: 0.28s; |
|
||||
transition-property: all; |
|
||||
transition-timing-function: cubic-bezier(0, 0, 0.2, 1); |
|
||||
top: 2px; |
|
||||
left: 2px; |
|
||||
width: 14px; |
|
||||
height: 14px; |
|
||||
background-color: white; |
|
||||
border-radius: var(--border-radius-xl); |
|
||||
} |
|
||||
|
|
||||
input[type="checkbox"]:checked ~ .track .thumb { |
|
||||
transform: translateX(14px); |
|
||||
} |
|
||||
input[type="checkbox"]:checked ~ .track { |
|
||||
background-color: var(--blue); |
|
||||
} |
|
||||
input[type="checkbox"]:disabled ~ .track { |
|
||||
background-color: var(--grey-4); |
|
||||
cursor: not-allowed; |
|
||||
} |
|
||||
input[type="checkbox"]:disabled ~ .track .thumb { |
|
||||
background-color: var(--grey-2); |
|
||||
cursor: not-allowed; |
|
||||
} |
|
||||
|
|
||||
.screenreader { |
|
||||
position: absolute; |
|
||||
width: 1px; |
|
||||
height: 1px; |
|
||||
padding: 0; |
|
||||
margin: -1px; |
|
||||
overflow: hidden; |
|
||||
clip: rect(0, 0, 0, 0); |
|
||||
white-space: nowrap; |
|
||||
border-width: 0; |
|
||||
} |
} |
||||
|
</script> |
||||
|
|
||||
.text { |
<Field {label} {labelPosition} {disabled} {error}> |
||||
font-size: var(--font-size-s); |
<Switch {error} {disabled} {text} {value} on:change={onChange} /> |
||||
font-family: var(--font-sans); |
</Field> |
||||
cursor: pointer; |
|
||||
user-select: none; |
|
||||
color: var(--ink); |
|
||||
} |
|
||||
.text.thin { |
|
||||
font-size: var(--font-size-xs); |
|
||||
} |
|
||||
</style> |
|
||||
|
|||||
Loading…
Reference in new issue