34 lines
867 B
Svelte
34 lines
867 B
Svelte
|
<script>
|
||
|
|
import { onMount } from "svelte"
|
||
|
|
export let value = ""
|
||
|
|
export let onChange = value => {}
|
||
|
|
export let options = []
|
||
|
|
export let initialValue = ""
|
||
|
|
export let styleBindingProperty = ""
|
||
|
|
|
||
|
|
const handleStyleBind = value =>
|
||
|
|
!!styleBindingProperty ? { style: `${styleBindingProperty}: ${value}` } : {}
|
||
|
|
|
||
|
|
$: isOptionsObject = options.every(o => typeof o === "object")
|
||
|
|
|
||
|
|
onMount(() => {
|
||
|
|
if (!value && !!initialValue) {
|
||
|
|
value = initialValue
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<select {value} on:change={ev => onChange(ev.target.value)}>
|
||
|
|
{#if isOptionsObject}
|
||
|
|
{#each options as { value, label }}
|
||
|
|
<option {...handleStyleBind(value || label)} value={value || label}>
|
||
|
|
{label}
|
||
|
|
</option>
|
||
|
|
{/each}
|
||
|
|
{:else}
|
||
|
|
{#each options as value}
|
||
|
|
<option {...handleStyleBind(value)} {value}>{value}</option>
|
||
|
|
{/each}
|
||
|
|
{/if}
|
||
|
|
</select>
|