budibase/packages/bbui/src/Form/Multiselect.svelte

53 lines
1.2 KiB
Svelte
Raw Normal View History

2021-03-31 11:59:07 +02:00
<script>
import { createEventDispatcher } from "svelte"
import Multiselect from "./Core/Multiselect.svelte"
import Field from "./Field.svelte"
2021-03-31 11:59:07 +02:00
export let value = []
export let label = null
2021-03-31 11:59:07 +02:00
export let disabled = false
export let readonly = false
export let labelPosition = "above"
export let error = null
export let placeholder = null
export let options = []
export let getOptionLabel = option => option
export let getOptionValue = option => option
export let sort = false
export let autoWidth = false
2023-02-13 10:47:08 +01:00
export let autocomplete = false
2023-09-22 13:07:02 +02:00
export let searchTerm = null
export let customPopoverHeight
export let helpText = null
2024-04-03 10:08:31 +02:00
export let onOptionMouseenter = () => {}
export let onOptionMouseleave = () => {}
2023-02-13 10:47:08 +01:00
const dispatch = createEventDispatcher()
const onChange = e => {
value = e.detail
dispatch("change", e.detail)
2021-03-31 11:59:07 +02:00
}
</script>
<Field {helpText} {label} {labelPosition} {error}>
<Multiselect
{error}
{disabled}
2021-06-15 20:36:56 +02:00
{readonly}
{value}
{options}
{placeholder}
{sort}
{getOptionLabel}
{getOptionValue}
{autoWidth}
2023-02-13 10:47:08 +01:00
{autocomplete}
{customPopoverHeight}
2024-04-03 10:08:31 +02:00
{onOptionMouseenter}
{onOptionMouseleave}
2023-09-22 13:07:02 +02:00
bind:searchTerm
on:change={onChange}
on:click
/>
</Field>