budibase/packages/builder/src/components/common/Dropdown.svelte

46 lines
1.2 KiB
Svelte
Raw Normal View History

2019-07-13 11:35:57 +02:00
<script>
2020-02-03 10:50:30 +01:00
import { createEventDispatcher } from "svelte"
2020-02-25 16:21:23 +01:00
import Select from "../common/Select.svelte"
2020-02-03 10:50:30 +01:00
export let selected
export let label
export let options
export let valueMember
export let textMember
export let multiple = false
export let width = "medium"
export let size = "small"
const dispatch = createEventDispatcher()
2019-07-13 11:35:57 +02:00
</script>
<div class="uk-margin">
2020-02-03 10:50:30 +01:00
<label class="uk-form-label">{label}</label>
<div class="uk-form-controls">
{#if multiple}
2020-02-24 16:00:48 +01:00
<Select
2020-02-03 10:50:30 +01:00
class="uk-select uk-form-width-{width} uk-form-{size}"
multiple
bind:value={selected}
on:change>
{#each options as option}
<option value={!valueMember ? option : valueMember(option)}>
{!textMember ? option : textMember(option)}
</option>
{/each}
2020-02-24 16:00:48 +01:00
</Select>
2020-02-03 10:50:30 +01:00
{:else}
2020-02-24 16:00:48 +01:00
<Select
2020-02-03 10:50:30 +01:00
class="uk-select uk-form-width-{width} uk-form-{size}"
bind:value={selected}
on:change>
{#each options as option}
<option value={!valueMember ? option : valueMember(option)}>
{!textMember ? option : textMember(option)}
</option>
{/each}
2020-02-24 16:00:48 +01:00
</Select>
2020-02-03 10:50:30 +01:00
{/if}
</div>
2019-07-13 11:35:57 +02:00
</div>