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