forked from tsai/budibase
Andrew Kingston
6 years ago
5 changed files with 69 additions and 136 deletions
@ -1,140 +1,22 @@ |
|||||
<script> |
<script> |
||||
|
import Field from "./Field.svelte" |
||||
|
import Checkbox from "./Core/Checkbox.svelte" |
||||
import { createEventDispatcher } from "svelte" |
import { createEventDispatcher } from "svelte" |
||||
|
|
||||
const dispatch = createEventDispatcher() |
export let value = null |
||||
|
export let label = null |
||||
export let checked = false |
export let labelPosition = "above" |
||||
export let value |
export let text = null |
||||
export let name |
export let disabled = false |
||||
export let disabled |
export let error = null |
||||
|
|
||||
function handleChange() { |
const dispatch = createEventDispatcher() |
||||
if (disabled) return |
const onChange = e => { |
||||
checked = !checked |
dispatch("change", e.detail) |
||||
dispatch("change", checked) |
value = e.detail |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<div class="container"> |
<Field {label} {labelPosition} {disabled} {error}> |
||||
<input |
<Checkbox {error} {disabled} {text} {value} on:change={onChange} /> |
||||
{disabled} |
</Field> |
||||
on:change={handleChange} |
|
||||
{value} |
|
||||
bind:checked |
|
||||
type="checkbox" |
|
||||
{name} |
|
||||
class="checkbox" |
|
||||
id={value} /> |
|
||||
<div class="checkbox-container" on:click={handleChange}> |
|
||||
<div class:disabled class="check-div" class:checked> |
|
||||
<div class="tick_mark" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<slot /> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.container { |
|
||||
display: flex; |
|
||||
gap: var(--spacing-s); |
|
||||
} |
|
||||
.checkbox-container { |
|
||||
position: relative; |
|
||||
z-index: 0; |
|
||||
} |
|
||||
|
|
||||
.checkbox { |
|
||||
display: none; |
|
||||
} |
|
||||
|
|
||||
.check-div { |
|
||||
position: relative; |
|
||||
width: 20px; |
|
||||
height: 20px; |
|
||||
background-color: var(--grey-2); |
|
||||
cursor: pointer; |
|
||||
transition: 0.2s ease transform, 0.2s ease background-color, |
|
||||
0.2s ease box-shadow; |
|
||||
overflow: hidden; |
|
||||
border-radius: 4px; |
|
||||
} |
|
||||
|
|
||||
.check-div:before { |
|
||||
content: ""; |
|
||||
position: absolute; |
|
||||
top: 50%; |
|
||||
right: 0; |
|
||||
left: 0; |
|
||||
width: 12px; |
|
||||
height: 12px; |
|
||||
margin: 0 auto; |
|
||||
background-color: var(--background); |
|
||||
transform: translateY(-50%); |
|
||||
transition: 0.2s ease width, 0.2s ease height; |
|
||||
border-radius: 2px; |
|
||||
} |
|
||||
|
|
||||
.check-div:active { |
|
||||
transform: translateY(-50%) scale(0.9); |
|
||||
} |
|
||||
|
|
||||
.tick_mark { |
|
||||
position: absolute; |
|
||||
top: 50%; |
|
||||
left: 6px; |
|
||||
width: 5px; |
|
||||
height: 4px; |
|
||||
margin: 0 auto; |
|
||||
transform: rotateZ(-40deg); |
|
||||
} |
|
||||
|
|
||||
.tick_mark:before, |
|
||||
.tick_mark:after { |
|
||||
content: ""; |
|
||||
position: absolute; |
|
||||
background-color: var(--ink); |
|
||||
border-radius: 2px; |
|
||||
opacity: 0; |
|
||||
transition: 0.2s ease transform, 0.2s ease opacity; |
|
||||
} |
|
||||
|
|
||||
.tick_mark:before { |
|
||||
left: 0; |
|
||||
bottom: 0; |
|
||||
width: 2px; |
|
||||
height: 6px; |
|
||||
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23); |
|
||||
transform: translateY(-68px); |
|
||||
} |
|
||||
|
|
||||
.tick_mark:after { |
|
||||
left: 0; |
|
||||
bottom: 0; |
|
||||
width: 12px; |
|
||||
height: 2px; |
|
||||
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23); |
|
||||
transform: translateX(78px); |
|
||||
} |
|
||||
|
|
||||
.check-div.disabled:active { |
|
||||
transform: none; |
|
||||
} |
|
||||
|
|
||||
.checked { |
|
||||
background-color: var(--grey-2); |
|
||||
} |
|
||||
.checked.disabled { |
|
||||
background-color: var(--grey-5); |
|
||||
} |
|
||||
|
|
||||
.checked:before { |
|
||||
width: 0; |
|
||||
height: 0; |
|
||||
} |
|
||||
|
|
||||
.checked .tick_mark:before, |
|
||||
.checked .tick_mark:after { |
|
||||
transform: translate(0); |
|
||||
opacity: 1; |
|
||||
} |
|
||||
</style> |
|
||||
|
|||||
@ -0,0 +1,43 @@ |
|||||
|
<script> |
||||
|
import "@spectrum-css/checkbox/dist/index-vars.css" |
||||
|
import "@spectrum-css/fieldgroup/dist/index-vars.css" |
||||
|
import { createEventDispatcher } from "svelte" |
||||
|
|
||||
|
export let value = false |
||||
|
export let error = null |
||||
|
export let fieldId = null |
||||
|
export let text = null |
||||
|
export let disabled = false |
||||
|
|
||||
|
const dispatch = createEventDispatcher() |
||||
|
const onChange = event => { |
||||
|
dispatch("change", event.target.checked) |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<label |
||||
|
class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized" |
||||
|
class:is-invalid={!!error}> |
||||
|
<input |
||||
|
checked={value} |
||||
|
{disabled} |
||||
|
on:change={onChange} |
||||
|
type="checkbox" |
||||
|
class="spectrum-Checkbox-input" |
||||
|
id={fieldId} /> |
||||
|
<span class="spectrum-Checkbox-box"> |
||||
|
<svg |
||||
|
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" |
||||
|
focusable="false" |
||||
|
aria-hidden="true"> |
||||
|
<use xlink:href="#spectrum-css-icon-Checkmark100" /> |
||||
|
</svg> |
||||
|
<svg |
||||
|
class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" |
||||
|
focusable="false" |
||||
|
aria-hidden="true"> |
||||
|
<use xlink:href="#spectrum-css-icon-Dash100" /> |
||||
|
</svg> |
||||
|
</span> |
||||
|
<span class="spectrum-Checkbox-label">{text || ''}</span> |
||||
|
</label> |
||||
@ -1,3 +1,4 @@ |
|||||
export { default as CoreTextField } from "./TextField.svelte" |
export { default as CoreTextField } from "./TextField.svelte" |
||||
export { default as CoreSelect } from "./Select.svelte" |
export { default as CoreSelect } from "./Select.svelte" |
||||
export { default as CoreMultiselect } from "./Multiselect.svelte" |
export { default as CoreMultiselect } from "./Multiselect.svelte" |
||||
|
export { default as Checkbox } from "./Checkbox.svelte" |
||||
|
|||||
Loading…
Reference in new issue