mirror of https://github.com/Budibase/budibase.git
Maurits Lourens
5 years ago
20 changed files with 274 additions and 30 deletions
@ -0,0 +1,82 @@ |
|||
<script> |
|||
import { |
|||
Icon, |
|||
Button, |
|||
Input, |
|||
DrawerContent, |
|||
Layout, |
|||
Body, |
|||
} from "@budibase/bbui" |
|||
import { generate } from "shortid" |
|||
|
|||
export let options = [] |
|||
|
|||
const removeOption = id => { |
|||
options = options.filter(option => option.id !== id) |
|||
} |
|||
|
|||
const addOption = () => { |
|||
options = [ |
|||
...options, |
|||
{ |
|||
id: generate(), |
|||
label: null, |
|||
value: null, |
|||
}, |
|||
] |
|||
} |
|||
</script> |
|||
|
|||
<DrawerContent> |
|||
<div class="container"> |
|||
<Layout noPadding gap="S"> |
|||
{#if !options.length} |
|||
<Body size="S">Add an option to get started.</Body> |
|||
{/if} |
|||
{#if options?.length} |
|||
<div class="options"> |
|||
{#each options as option (option.id)} |
|||
<Input |
|||
placeholder="Label" |
|||
bind:value={option.label} |
|||
label="Label" |
|||
labelPosition="left" |
|||
/> |
|||
<Input |
|||
placeholder="Value" |
|||
bind:value={option.value} |
|||
label="Value" |
|||
labelPosition="left" |
|||
/> |
|||
<Icon |
|||
name="Close" |
|||
hoverable |
|||
size="S" |
|||
on:click={() => removeOption(option.id)} |
|||
/> |
|||
{/each} |
|||
</div> |
|||
{/if} |
|||
<div> |
|||
<Button icon="AddCircle" size="M" on:click={addOption} secondary> |
|||
Add Option |
|||
</Button> |
|||
</div> |
|||
</Layout> |
|||
</div> |
|||
</DrawerContent> |
|||
|
|||
<style> |
|||
.container { |
|||
width: 100%; |
|||
max-width: 800px; |
|||
margin: 0 auto; |
|||
} |
|||
.options { |
|||
display: grid; |
|||
column-gap: var(--spacing-l); |
|||
row-gap: var(--spacing-s); |
|||
align-items: center; |
|||
grid-template-columns: 1fr 1fr auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,28 @@ |
|||
<script> |
|||
import { ActionButton, Button, Drawer } from "@budibase/bbui" |
|||
import { createEventDispatcher } from "svelte" |
|||
import OptionsDrawer from "./OptionsDrawer.svelte" |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
|
|||
export let value |
|||
|
|||
let drawer |
|||
let tempValue = value || [] |
|||
|
|||
const saveFilter = async () => { |
|||
// Filter out incomplete options |
|||
tempValue = tempValue.filter(option => option.value && option.label) |
|||
dispatch("change", tempValue) |
|||
drawer.hide() |
|||
} |
|||
</script> |
|||
|
|||
<ActionButton on:click={drawer.show}>Define Options</ActionButton> |
|||
<Drawer bind:this={drawer} title="Options"> |
|||
<svelte:fragment slot="description"> |
|||
Define the options for this picker. |
|||
</svelte:fragment> |
|||
<Button cta slot="buttons" on:click={saveFilter}>Save</Button> |
|||
<OptionsDrawer bind:options={tempValue} slot="body" /> |
|||
</Drawer> |
|||
Loading…
Reference in new issue