forked from tsai/budibase
Andrew Kingston
6 years ago
31 changed files with 109 additions and 1026 deletions
@ -1,67 +0,0 @@ |
|||||
<script> |
|
||||
import { View } from "svench"; |
|
||||
import Checkbox from "./Checkbox.svelte"; |
|
||||
|
|
||||
let checked = false |
|
||||
|
|
||||
let menu = [ |
|
||||
{text: 'Cookies and cream', checked: false}, |
|
||||
{text: 'Mint choc chip', checked: false}, |
|
||||
{text: 'Raspberry ripple', checked: true} |
|
||||
]; |
|
||||
</script> |
|
||||
|
|
||||
<View name="Single checkbox"> |
|
||||
<Checkbox bind:checked value="value"> |
|
||||
<label for="value">One single checkbox with text</label> |
|
||||
</Checkbox> |
|
||||
</View> |
|
||||
|
|
||||
<View name="Single disabled checkbox"> |
|
||||
<Checkbox disabled checked value="value"> |
|
||||
<label for="someOtherValue">A disabled checkbox</label> |
|
||||
</Checkbox> |
|
||||
</View> |
|
||||
|
|
||||
<View name="No text"> |
|
||||
<Checkbox bind:checked value="somevalue" /> |
|
||||
</View> |
|
||||
|
|
||||
## Multiple checkboxes |
|
||||
Use an array and an each block to use multiple checkboxes |
|
||||
```svelte |
|
||||
<script> |
|
||||
let menu = [ |
|
||||
{text: 'Cookies and cream', checked: false}, |
|
||||
{text: 'Mint choc chip', checked: false}, |
|
||||
{text: 'Raspberry ripple', checked: true} |
|
||||
]; |
|
||||
</script> |
|
||||
|
|
||||
{#each menu as {text, checked}} |
|
||||
<Checkbox value={text} bind:checked> |
|
||||
<label for={text}>{text}</label> |
|
||||
</Checkbox> |
|
||||
{/each} |
|
||||
``` |
|
||||
|
|
||||
<View name="Multiple checkboxes"> |
|
||||
<div class="container"> |
|
||||
{#each menu as {text, checked}} |
|
||||
<Checkbox value={text} bind:checked> |
|
||||
<label for={text}>{text}</label> |
|
||||
</Checkbox> |
|
||||
{/each} |
|
||||
</div> |
|
||||
</View> |
|
||||
|
|
||||
<style> |
|
||||
label { |
|
||||
display: grid; |
|
||||
place-items: center; |
|
||||
} |
|
||||
.container { |
|
||||
display: grid; |
|
||||
grid-gap: 10px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,36 @@ |
|||||
|
<script> |
||||
|
import "@spectrum-css/fieldgroup/dist/index-vars.css" |
||||
|
import "@spectrum-css/radio/dist/index-vars.css" |
||||
|
import { createEventDispatcher } from "svelte" |
||||
|
|
||||
|
export let direction = "vertical" |
||||
|
export let value = null |
||||
|
export let options = [] |
||||
|
export let error = null |
||||
|
export let disabled = false |
||||
|
export let getOptionLabel = option => option |
||||
|
export let getOptionValue = option => option |
||||
|
|
||||
|
const dispatch = createEventDispatcher() |
||||
|
const onChange = e => dispatch("change", e.target.value) |
||||
|
</script> |
||||
|
|
||||
|
<div class={`spectrum-FieldGroup spectrum-FieldGroup--${direction}`}> |
||||
|
{#if options && Array.isArray(options)} |
||||
|
{#each options as option} |
||||
|
<div |
||||
|
class="spectrum-Radio spectrum-FieldGroup-item spectrum-Radio--emphasized" |
||||
|
class:is-invalid={!!error}> |
||||
|
<input |
||||
|
on:change={onChange} |
||||
|
bind:group={value} |
||||
|
value={getOptionValue(option)} |
||||
|
type="radio" |
||||
|
class="spectrum-Radio-input" |
||||
|
{disabled} /> |
||||
|
<span class="spectrum-Radio-button" /> |
||||
|
<label class="spectrum-Radio-label">{getOptionLabel(option)}</label> |
||||
|
</div> |
||||
|
{/each} |
||||
|
{/if} |
||||
|
</div> |
||||
@ -1,57 +0,0 @@ |
|||||
<script> |
|
||||
import { View } from "svench"; |
|
||||
import Select from "./Select.svelte"; |
|
||||
import DataList from "./DataList.svelte"; |
|
||||
import Spacer from "../Spacer/Spacer.svelte" |
|
||||
|
|
||||
const options = ["Chocolate", "Vanilla", "Strawberry Cheesecake"]; |
|
||||
</script> |
|
||||
|
|
||||
<View name="default"> |
|
||||
<DataList name="Test" label="Flavour"> |
|
||||
{#each options as option} |
|
||||
<option value={option}>{option}</option> |
|
||||
{/each} |
|
||||
</DataList> |
|
||||
</View> |
|
||||
|
|
||||
<View name="secondary"> |
|
||||
<DataList secondary name="Test" label="Flavour"> |
|
||||
{#each options as option} |
|
||||
<option value={option}>{option}</option> |
|
||||
{/each} |
|
||||
</DataList> |
|
||||
</View> |
|
||||
|
|
||||
<View name="outline"> |
|
||||
<DataList outline name="Test" label="Flavour"> |
|
||||
{#each options as option} |
|
||||
<option value={option}>{option}</option> |
|
||||
{/each} |
|
||||
</DataList> |
|
||||
</View> |
|
||||
|
|
||||
<View name="disabled"> |
|
||||
<DataList disabled name="Test" label="Flavour"> |
|
||||
{#each options as option} |
|
||||
<option value={option}>{option}</option> |
|
||||
{/each} |
|
||||
</DataList> |
|
||||
</View> |
|
||||
|
|
||||
<View name="thin"> |
|
||||
<DataList thin name="Test" label="Flavour"> |
|
||||
{#each options as option} |
|
||||
<option value={option}>{option}</option> |
|
||||
{/each} |
|
||||
</DataList> |
|
||||
</View> |
|
||||
|
|
||||
<View name="extraThin"> |
|
||||
<DataList extraThin name="Test" label="Flavour"> |
|
||||
{#each options as option} |
|
||||
<option value={option}>{option}</option> |
|
||||
{/each} |
|
||||
</DataList> |
|
||||
</View> |
|
||||
|
|
||||
@ -1,62 +0,0 @@ |
|||||
<script> |
|
||||
import { View } from "svench"; |
|
||||
import Input from "./Input.svelte"; |
|
||||
import Button from "../Button/Button.svelte"; |
|
||||
</script> |
|
||||
|
|
||||
<View name="default"> |
|
||||
<Input placeholder="Enter your name" label="Name" /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="presentation"> |
|
||||
<Input presentation placeholder="Enter your name" label="Name" /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="outline"> |
|
||||
<Input outline placeholder="Enter your name" label="Name" /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="disabled"> |
|
||||
<Input disabled placeholder="Enter your name" label="Name" /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="disabled with value"> |
|
||||
<Input value="Some text" disabled placeholder="Enter your name" label="Name" /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="thin"> |
|
||||
<Input thin placeholder="Enter your name" label="Name" /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="extraThin"> |
|
||||
<Input extraThin placeholder="Enter your name" label="Name" /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="large"> |
|
||||
<Input large placeholder="Enter your name" label="Name" /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="border"> |
|
||||
<Input border presentation placeholder="Enter your name" label="Name" /> |
|
||||
</View> |
|
||||
|
|
||||
|
|
||||
<View name="number"> |
|
||||
<Input type="number" placeholder="Enter your age" label="Age" /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="with edit buttons"> |
|
||||
<Input |
|
||||
thin |
|
||||
edit |
|
||||
placeholder="Enter your name" |
|
||||
label="Name" |
|
||||
on:save={console.log} /> |
|
||||
</View> |
|
||||
<View name="with error message"> |
|
||||
<Input |
|
||||
placeholder="Enter your name" |
|
||||
label="Name" |
|
||||
error="This is an error message!" |
|
||||
on:save={console.log} /> |
|
||||
</View> |
|
||||
@ -1,63 +0,0 @@ |
|||||
<script> |
|
||||
import { View } from "svench"; |
|
||||
import Multiselect from "./Multiselect.svelte"; |
|
||||
|
|
||||
const options = ["Red", "Blue", "Yellow", "Green", "Pink", "Very long color name to show text wrapping"]; |
|
||||
</script> |
|
||||
|
|
||||
<View name="default"> |
|
||||
<Multiselect name="Test" label="Colours" placeholder="Choose some colours"> |
|
||||
{#each options as option} |
|
||||
<option value={option}>{option}</option> |
|
||||
{/each} |
|
||||
</Multiselect> |
|
||||
</View> |
|
||||
|
|
||||
<View name="right aligned"> |
|
||||
<div class="max-width"> |
|
||||
<Multiselect align="right" name="Test" label="Colours" placeholder="Choose some colours"> |
|
||||
{#each options as option} |
|
||||
<option value={option}>{option}</option> |
|
||||
{/each} |
|
||||
</Multiselect> |
|
||||
</div> |
|
||||
</View> |
|
||||
|
|
||||
<View name="secondary"> |
|
||||
<Multiselect name="Test" label="Colours" secondary placeholder="Choose some colours"> |
|
||||
{#each options as option} |
|
||||
<option value={option}>{option}</option> |
|
||||
{/each} |
|
||||
</Multiselect> |
|
||||
</View> |
|
||||
|
|
||||
<View name="outline"> |
|
||||
<Multiselect name="Test" label="Colours" outline placeholder="Choose some colours"> |
|
||||
{#each options as option} |
|
||||
<option value={option}>{option}</option> |
|
||||
{/each} |
|
||||
</Multiselect> |
|
||||
</View> |
|
||||
|
|
||||
<View name="disabled"> |
|
||||
<Multiselect name="Test" label="Colours" disabled placeholder="Choose some colours"> |
|
||||
{#each options as option} |
|
||||
<option value={option}>{option}</option> |
|
||||
{/each} |
|
||||
</Multiselect> |
|
||||
</View> |
|
||||
|
|
||||
<View name="extraThin"> |
|
||||
<Multiselect name="Test" label="Colours" extraThin placeholder="Choose some colours"> |
|
||||
{#each options as option} |
|
||||
<option value={option}>{option}</option> |
|
||||
{/each} |
|
||||
</Multiselect> |
|
||||
</View> |
|
||||
|
|
||||
<style> |
|
||||
.max-width { |
|
||||
align-self: flex-end; |
|
||||
max-width: 150px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,140 +0,0 @@ |
|||||
<script> |
|
||||
import { createEventDispatcher } from "svelte" |
|
||||
|
|
||||
const dispatch = createEventDispatcher() |
|
||||
|
|
||||
export let value |
|
||||
export let group |
|
||||
export let name |
|
||||
export let disabled = false |
|
||||
|
|
||||
function handleChange() { |
|
||||
if (disabled) return |
|
||||
group = value |
|
||||
dispatch("change", group) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<div class="container"> |
|
||||
<input |
|
||||
{disabled} |
|
||||
on:change={handleChange} |
|
||||
{value} |
|
||||
bind:group |
|
||||
type="radio" |
|
||||
{name} |
|
||||
class="checkbox" |
|
||||
id={value} /> |
|
||||
<div class="checkbox-container" on:click={handleChange}> |
|
||||
<div class:disabled class="check-div" class:checked={group === value}> |
|
||||
<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> |
|
||||
@ -1,64 +0,0 @@ |
|||||
<script> |
|
||||
import { View } from "svench"; |
|
||||
import Radio from "./Radio.svelte"; |
|
||||
|
|
||||
let selected = 'Cookies and cream' |
|
||||
let selected2 = 'Mint choc chip' |
|
||||
|
|
||||
let menu = [ |
|
||||
'Cookies and cream', |
|
||||
'Mint choc chip', |
|
||||
'Raspberry ripple' |
|
||||
]; |
|
||||
</script> |
|
||||
|
|
||||
## Multiple checkboxes |
|
||||
Use an array and an each block to use the radio button. |
|
||||
```svelte |
|
||||
<script> |
|
||||
let selected = 'Cookies and cream' |
|
||||
let selected2 = 'Cookies and cream' |
|
||||
|
|
||||
let menu = [ |
|
||||
'Cookies and cream', |
|
||||
'Mint choc chip', |
|
||||
'Raspberry ripple' |
|
||||
]; |
|
||||
</script> |
|
||||
|
|
||||
{#each menu as flavour} |
|
||||
<Radio name="Ice Cream Flavour" value={flavour} bind:group={selected} label={flavour} showLabel/> |
|
||||
{/each} |
|
||||
``` |
|
||||
|
|
||||
|
|
||||
<View name="Multiple radio buttons"> |
|
||||
<div class="container"> |
|
||||
{#each menu as flavour} |
|
||||
<Radio name="Ice Cream Flavour" value={flavour} bind:group={selected}> |
|
||||
<label for={flavour}>{flavour}</label> |
|
||||
</Radio> |
|
||||
{/each} |
|
||||
</div> |
|
||||
</View> |
|
||||
|
|
||||
<View name="Disabled Radio inputs"> |
|
||||
<div class="container"> |
|
||||
{#each menu as flavour} |
|
||||
<Radio disabled name="Ice Cream Flavour" value={flavour} bind:group={selected2}> |
|
||||
<label for={flavour}>{flavour}</label> |
|
||||
</Radio> |
|
||||
{/each} |
|
||||
</div> |
|
||||
</View> |
|
||||
|
|
||||
<style> |
|
||||
label { |
|
||||
display: grid; |
|
||||
place-items: center; |
|
||||
} |
|
||||
.container { |
|
||||
display: grid; |
|
||||
grid-gap: 10px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,37 @@ |
|||||
|
<script> |
||||
|
import Field from "./Field.svelte" |
||||
|
import RadioGroup from "./Core/RadioGroup.svelte" |
||||
|
import { createEventDispatcher } from "svelte" |
||||
|
|
||||
|
export let value = null |
||||
|
export let label = undefined |
||||
|
export let disabled = false |
||||
|
export let labelPosition = "above" |
||||
|
export let error = null |
||||
|
export let options = [] |
||||
|
export let getOptionLabel = option => extractProperty(option, "label") |
||||
|
export let getOptionValue = option => extractProperty(option, "value") |
||||
|
|
||||
|
const dispatch = createEventDispatcher() |
||||
|
const onChange = e => { |
||||
|
dispatch("change", e.detail) |
||||
|
value = e.detail |
||||
|
} |
||||
|
const extractProperty = (value, property) => { |
||||
|
if (value && typeof value === "object") { |
||||
|
return value[property] |
||||
|
} |
||||
|
return value |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<Field {label} {labelPosition} {disabled} {error}> |
||||
|
<RadioGroup |
||||
|
{error} |
||||
|
{disabled} |
||||
|
{value} |
||||
|
{options} |
||||
|
{getOptionLabel} |
||||
|
{getOptionValue} |
||||
|
on:change={onChange} /> |
||||
|
</Field> |
||||
@ -1,40 +0,0 @@ |
|||||
<script> |
|
||||
import { View } from "svench"; |
|
||||
import RichText from "./RichText.svelte"; |
|
||||
|
|
||||
const options = { placeholder: "this is not the default value!" }; |
|
||||
let value; |
|
||||
</script> |
|
||||
|
|
||||
### Rich Text Component |
|
||||
|
|
||||
This component uses the QuillJS library to add Rich Text editing functionality. |
|
||||
|
|
||||
It exposes a <code>content</code> variable that you can bind to in order to get Markdown out of the component. |
|
||||
|
|
||||
As well as the content you can also pass in an option object that looks like so: |
|
||||
|
|
||||
```js |
|
||||
let options = { |
|
||||
modules: { |
|
||||
toolbar: [ |
|
||||
[{ header: [1, 2, 3, false] }], |
|
||||
['bold', 'italic', 'underline', 'strike'] |
|
||||
] |
|
||||
}, |
|
||||
placeholder: 'Type something...', |
|
||||
theme: 'snow' |
|
||||
} |
|
||||
``` |
|
||||
|
|
||||
<View name="default"> |
|
||||
<RichText bind:value /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="passing in Markdown"> |
|
||||
<RichText value="# This is an h1 heading!" /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="passing in custom options"> |
|
||||
<RichText {options} /> |
|
||||
</View> |
|
||||
@ -1,62 +0,0 @@ |
|||||
<script> |
|
||||
import { View } from "svench"; |
|
||||
import Select from "./Select.svelte"; |
|
||||
import Spacer from "../Spacer/Spacer.svelte" |
|
||||
|
|
||||
const options = ["Chocolate", "Vanilla", "Strawberry Cheesecake"]; |
|
||||
</script> |
|
||||
|
|
||||
<View name="default"> |
|
||||
<Select name="Test" label="Flavour"> |
|
||||
<option value="">Choose an option</option> |
|
||||
{#each options as option} |
|
||||
<option value={option}>{option}</option> |
|
||||
{/each} |
|
||||
</Select> |
|
||||
</View> |
|
||||
|
|
||||
<View name="secondary"> |
|
||||
<Select secondary name="Test" label="Flavour"> |
|
||||
<option value="">Choose an option</option> |
|
||||
{#each options as option} |
|
||||
<option value={option}>{option}</option> |
|
||||
{/each} |
|
||||
</Select> |
|
||||
</View> |
|
||||
|
|
||||
<View name="outline"> |
|
||||
<Select outline name="Test" label="Flavour"> |
|
||||
<option value="">Choose an option</option> |
|
||||
{#each options as option} |
|
||||
<option value={option}>{option}</option> |
|
||||
{/each} |
|
||||
</Select> |
|
||||
</View> |
|
||||
|
|
||||
<View name="disabled"> |
|
||||
<Select disabled name="Test" label="Flavour"> |
|
||||
<option value="">Choose an option</option> |
|
||||
{#each options as option} |
|
||||
<option value={option}>{option}</option> |
|
||||
{/each} |
|
||||
</Select> |
|
||||
</View> |
|
||||
|
|
||||
<View name="thin"> |
|
||||
<Select thin name="Test" label="Flavour"> |
|
||||
<option value="">Choose an option</option> |
|
||||
{#each options as option} |
|
||||
<option value={option}>{option}</option> |
|
||||
{/each} |
|
||||
</Select> |
|
||||
</View> |
|
||||
|
|
||||
<View name="extraThin"> |
|
||||
<Select extraThin name="Test" label="Flavour"> |
|
||||
<option value="">Choose an option</option> |
|
||||
{#each options as option} |
|
||||
<option value={option}>{option}</option> |
|
||||
{/each} |
|
||||
</Select> |
|
||||
</View> |
|
||||
|
|
||||
@ -1,26 +0,0 @@ |
|||||
<script> |
|
||||
import { View } from "svench"; |
|
||||
import Slider from "./Slider.svelte"; |
|
||||
</script> |
|
||||
|
|
||||
<View name="default"> |
|
||||
<Slider label=Quantity value="50" /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="show value"> |
|
||||
<Slider label="Quantity" value="50" showValue /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="show range"> |
|
||||
<Slider label="Quantity" value="25" showValue showRange min="0" max="100" /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="custom min and max"> |
|
||||
<Slider label="Quantity" value="350" showValue showRange min="50" max="500" /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="custom step"> |
|
||||
<Slider label="Quantity" value="25" step="25" showValue showRange min="0" max="100" /> |
|
||||
</View> |
|
||||
|
|
||||
|
|
||||
@ -1,30 +0,0 @@ |
|||||
<script> |
|
||||
import { View } from "svench"; |
|
||||
import TextArea from "./TextArea.svelte"; |
|
||||
|
|
||||
import Button from "../Button/Button.svelte"; |
|
||||
</script> |
|
||||
|
|
||||
<View name="default"> |
|
||||
<TextArea placeholder="Enter your email text" label="Email Body" /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="disabled"> |
|
||||
<TextArea disabled placeholder="Enter your email text" label="Email Body" /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="no label"> |
|
||||
<TextArea placeholder="Enter your email text" /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="thin"> |
|
||||
<TextArea thin placeholder="Enter your email text" label="Email Body" /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="extraThin"> |
|
||||
<TextArea extraThin placeholder="Enter your email text" label="Email Body" /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="with buttons"> |
|
||||
<TextArea edit placeholder="Enter your email text" label="Email Body" /> |
|
||||
</View> |
|
||||
@ -1,21 +0,0 @@ |
|||||
<script> |
|
||||
import { View } from "svench"; |
|
||||
import Toggle from "./Toggle.svelte"; |
|
||||
</script> |
|
||||
|
|
||||
<View name="default"> |
|
||||
<Toggle /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="checked with text"> |
|
||||
<Toggle text="Display on mobile?" /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="thin"> |
|
||||
<Toggle text="Display on mobile?" thin /> |
|
||||
</View> |
|
||||
|
|
||||
<View name="disabled"> |
|
||||
<Toggle disabled={true} /> |
|
||||
</View> |
|
||||
|
|
||||
@ -1,171 +0,0 @@ |
|||||
<script> |
|
||||
import { onMount, onDestroy } from "svelte" |
|
||||
import { Modal, ModalContent } from "@budibase/bbui" |
|
||||
import CreateEditColumn from "../modals/CreateEditColumn.svelte" |
|
||||
import { FIELDS } from "constants/backend" |
|
||||
|
|
||||
const SORT_ICON_MAP = { |
|
||||
asc: "ri-arrow-down-fill", |
|
||||
desc: "ri-arrow-up-fill", |
|
||||
} |
|
||||
|
|
||||
export let field |
|
||||
export let displayName |
|
||||
export let column |
|
||||
export let enableSorting = true |
|
||||
export let showColumnMenu |
|
||||
export let progressSort |
|
||||
export let editable |
|
||||
|
|
||||
let menuButton |
|
||||
let sortDirection = "" |
|
||||
let modal |
|
||||
let hovered |
|
||||
let filterActive |
|
||||
|
|
||||
function toggleMenu() { |
|
||||
showColumnMenu(menuButton) |
|
||||
} |
|
||||
|
|
||||
function onSort(event) { |
|
||||
progressSort(event.shiftKey) |
|
||||
} |
|
||||
|
|
||||
function showModal() { |
|
||||
modal.show() |
|
||||
} |
|
||||
|
|
||||
function setSort() { |
|
||||
sortDirection = column.getSort() |
|
||||
} |
|
||||
|
|
||||
function setFilterActive(e) { |
|
||||
filterActive = e.column.filterActive |
|
||||
} |
|
||||
|
|
||||
onMount(() => { |
|
||||
column.addEventListener("sortChanged", setSort) |
|
||||
column.addEventListener("filterActiveChanged", setFilterActive) |
|
||||
}) |
|
||||
|
|
||||
onDestroy(() => { |
|
||||
column.removeEventListener("sortChanged", setSort) |
|
||||
column.removeEventListener("filterActiveChanged", setFilterActive) |
|
||||
}) |
|
||||
|
|
||||
$: type = FIELDS[field?.type?.toUpperCase()]?.name |
|
||||
</script> |
|
||||
|
|
||||
<header |
|
||||
on:click={onSort} |
|
||||
data-cy="table-header" |
|
||||
on:mouseover={() => (hovered = true)} |
|
||||
on:mouseleave={() => (hovered = false)}> |
|
||||
<div class="column-header"> |
|
||||
<div class="column-header-text"> |
|
||||
<div class="column-header-name"> |
|
||||
{displayName} |
|
||||
{#if field.autocolumn}<i class="auto ri-magic-fill" />{/if} |
|
||||
</div> |
|
||||
{#if type} |
|
||||
<div class="column-header-type">{type}</div> |
|
||||
{/if} |
|
||||
</div> |
|
||||
<i class={`${SORT_ICON_MAP[sortDirection]} icon`} /> |
|
||||
</div> |
|
||||
<Modal bind:this={modal}> |
|
||||
<ModalContent |
|
||||
size="large" |
|
||||
showCancelButton={false} |
|
||||
showConfirmButton={false} |
|
||||
title={`Edit Column: ${field.name}`}> |
|
||||
<CreateEditColumn onClosed={modal.hide} {field} /> |
|
||||
</ModalContent> |
|
||||
</Modal> |
|
||||
<section class:show={hovered || filterActive}> |
|
||||
{#if editable && hovered} |
|
||||
<span on:click|stopPropagation={showModal}> |
|
||||
<i class="ri-pencil-line icon" /> |
|
||||
</span> |
|
||||
{/if} |
|
||||
<span on:click|stopPropagation={toggleMenu} bind:this={menuButton}> |
|
||||
<i class="ri-filter-line icon" class:active={filterActive} /> |
|
||||
</span> |
|
||||
</section> |
|
||||
</header> |
|
||||
|
|
||||
<style> |
|
||||
header { |
|
||||
font-family: Inter; |
|
||||
font-weight: 600; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
height: 100%; |
|
||||
width: 100%; |
|
||||
align-items: center; |
|
||||
color: var(--ink); |
|
||||
} |
|
||||
|
|
||||
section { |
|
||||
opacity: 0; |
|
||||
transition: 0.3s all; |
|
||||
} |
|
||||
|
|
||||
section.show { |
|
||||
opacity: 1; |
|
||||
} |
|
||||
|
|
||||
.column-header { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: flex-start; |
|
||||
align-items: center; |
|
||||
gap: var(--spacing-s); |
|
||||
} |
|
||||
|
|
||||
.column-header-text { |
|
||||
flex: 1 1 auto; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: flex-start; |
|
||||
align-items: stretch; |
|
||||
gap: var(--spacing-xs); |
|
||||
} |
|
||||
|
|
||||
.column-header-name { |
|
||||
white-space: normal !important; |
|
||||
text-overflow: ellipsis; |
|
||||
display: -webkit-box; |
|
||||
-webkit-box-orient: vertical; |
|
||||
-webkit-line-clamp: 1; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.column-header-type { |
|
||||
font-size: var(--font-size-xs); |
|
||||
color: var(--grey-6); |
|
||||
} |
|
||||
|
|
||||
.icon { |
|
||||
transition: 0.2s all; |
|
||||
font-size: var(--font-size-m); |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
.auto { |
|
||||
font-size: 9px; |
|
||||
transition: none; |
|
||||
position: relative; |
|
||||
margin-left: 2px; |
|
||||
top: -3px; |
|
||||
color: var(--grey-6); |
|
||||
} |
|
||||
|
|
||||
.icon:hover { |
|
||||
color: var(--blue); |
|
||||
} |
|
||||
|
|
||||
.icon.active, |
|
||||
.icon:hover { |
|
||||
color: var(--blue); |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,35 +0,0 @@ |
|||||
import TableHeader from "./TableHeader.svelte" |
|
||||
|
|
||||
export default class TableHeaderWrapper { |
|
||||
constructor() {} |
|
||||
|
|
||||
init(params) { |
|
||||
this.agParams = params |
|
||||
this.container = document.createElement("div") |
|
||||
this.container.style.height = "100%" |
|
||||
this.container.style.width = "100%" |
|
||||
|
|
||||
this.headerComponent = new TableHeader({ |
|
||||
target: this.container, |
|
||||
props: params, |
|
||||
}) |
|
||||
this.gui = this.container |
|
||||
} |
|
||||
|
|
||||
// can get called more than once, you should return the HTML element
|
|
||||
getGui() { |
|
||||
return this.gui |
|
||||
} |
|
||||
|
|
||||
// gets called when a new Column Definition has been set for this header
|
|
||||
refresh(params) { |
|
||||
this.agParams = params |
|
||||
this.headerComponent = new TableHeader({ |
|
||||
target: this.container, |
|
||||
props: params, |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
// optional method, gets called once, when component is destroyed
|
|
||||
destroy() {} |
|
||||
} |
|
||||
@ -1,27 +0,0 @@ |
|||||
<script> |
|
||||
import Spinner from "components/common/Spinner.svelte" |
|
||||
import { fade } from "svelte/transition" |
|
||||
import Logo from "/assets/bb-logo.svg" |
|
||||
</script> |
|
||||
|
|
||||
<div class="ag-overlay-loading-center loading-container"> |
|
||||
<div transition:fade class="loading-overlay"> |
|
||||
<img height="30" width="30" src={Logo} alt="Budibase icon" /> |
|
||||
<span> Loading Your Data </span> |
|
||||
<Spinner size="12" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.loading-overlay { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
font-family: var(--font-sans); |
|
||||
font-weight: 500; |
|
||||
color: var(--ink); |
|
||||
} |
|
||||
|
|
||||
.loading-overlay > * { |
|
||||
margin-right: var(--spacing-m); |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,17 +0,0 @@ |
|||||
import LoadingOverlay from "./LoadingOverlay.svelte" |
|
||||
|
|
||||
export default class LoadingOverlayWrapper { |
|
||||
init(params) { |
|
||||
this.gui = document.createElement("div") |
|
||||
new LoadingOverlay({ |
|
||||
target: this.gui, |
|
||||
props: { |
|
||||
params, |
|
||||
}, |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
getGui() { |
|
||||
return this.gui |
|
||||
} |
|
||||
} |
|
||||
@ -1,110 +0,0 @@ |
|||||
<script> |
|
||||
import "@spectrum-css/picker/dist/index-vars.css" |
|
||||
import "@spectrum-css/popover/dist/index-vars.css" |
|
||||
import "@spectrum-css/menu/dist/index-vars.css" |
|
||||
import { fly } from "svelte/transition" |
|
||||
|
|
||||
export let fieldState |
|
||||
export let fieldText = "" |
|
||||
export let isPlaceholder = false |
|
||||
export let placeholderOption = null |
|
||||
export let options = [] |
|
||||
export let isOptionSelected = () => false |
|
||||
export let onSelectOption = () => {} |
|
||||
export let getOptionLabel = option => option |
|
||||
export let getOptionValue = option => option |
|
||||
export let open = false |
|
||||
</script> |
|
||||
|
|
||||
{#if fieldState} |
|
||||
<button |
|
||||
id={$fieldState.fieldId} |
|
||||
class="spectrum-Picker spectrum-Picker--sizeM" |
|
||||
disabled={$fieldState.disabled} |
|
||||
class:is-invalid={!$fieldState.valid} |
|
||||
class:is-open={open} |
|
||||
aria-haspopup="listbox" |
|
||||
on:click={() => (open = true)}> |
|
||||
<span class="spectrum-Picker-label" class:is-placeholder={isPlaceholder}> |
|
||||
{fieldText} |
|
||||
</span> |
|
||||
{#if !$fieldState.valid} |
|
||||
<svg |
|
||||
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon" |
|
||||
focusable="false" |
|
||||
aria-hidden="true" |
|
||||
aria-label="Folder"> |
|
||||
<use xlink:href="#spectrum-icon-18-Alert" /> |
|
||||
</svg> |
|
||||
{/if} |
|
||||
<svg |
|
||||
class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" |
|
||||
focusable="false" |
|
||||
aria-hidden="true"> |
|
||||
<use xlink:href="#spectrum-css-icon-Chevron100" /> |
|
||||
</svg> |
|
||||
</button> |
|
||||
{#if open} |
|
||||
<div class="overlay" on:mousedown|self={() => (open = false)} /> |
|
||||
<div |
|
||||
transition:fly={{ y: -20, duration: 200 }} |
|
||||
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"> |
|
||||
<ul class="spectrum-Menu" role="listbox"> |
|
||||
{#if placeholderOption} |
|
||||
<li |
|
||||
class="spectrum-Menu-item" |
|
||||
class:is-selected={isPlaceholder} |
|
||||
role="option" |
|
||||
aria-selected="true" |
|
||||
tabindex="0" |
|
||||
on:click={() => onSelectOption(null)}> |
|
||||
<span class="spectrum-Menu-itemLabel">{placeholderOption}</span> |
|
||||
<svg |
|
||||
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" |
|
||||
focusable="false" |
|
||||
aria-hidden="true"> |
|
||||
<use xlink:href="#spectrum-css-icon-Checkmark100" /> |
|
||||
</svg> |
|
||||
</li> |
|
||||
{/if} |
|
||||
{#each options as option} |
|
||||
<li |
|
||||
class="spectrum-Menu-item" |
|
||||
class:is-selected={isOptionSelected(getOptionValue(option))} |
|
||||
role="option" |
|
||||
aria-selected="true" |
|
||||
tabindex="0" |
|
||||
on:click={() => onSelectOption(getOptionValue(option))}> |
|
||||
<span |
|
||||
class="spectrum-Menu-itemLabel">{getOptionLabel(option)}</span> |
|
||||
<svg |
|
||||
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" |
|
||||
focusable="false" |
|
||||
aria-hidden="true"> |
|
||||
<use xlink:href="#spectrum-css-icon-Checkmark100" /> |
|
||||
</svg> |
|
||||
</li> |
|
||||
{/each} |
|
||||
</ul> |
|
||||
</div> |
|
||||
{/if} |
|
||||
{/if} |
|
||||
|
|
||||
<style> |
|
||||
.overlay { |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
width: 100vw; |
|
||||
height: 100vh; |
|
||||
z-index: 999; |
|
||||
} |
|
||||
.spectrum-Popover { |
|
||||
max-height: 240px; |
|
||||
width: 100%; |
|
||||
z-index: 999; |
|
||||
} |
|
||||
.spectrum-Picker { |
|
||||
width: 100%; |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue