Merge branch 'v2' of https://git.server.flayks.com/cetrucflotte/housesof into v2
# Conflicts: # src/routes/photos.svelte
This commit is contained in:
46
src/components/molecules/Select.svelte
Normal file
46
src/components/molecules/Select.svelte
Normal file
@@ -0,0 +1,46 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
interface Option {
|
||||
value: string
|
||||
name: string
|
||||
}
|
||||
|
||||
export let id: string
|
||||
export let name: string
|
||||
export let base: Option
|
||||
export let options: Option[]
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
let current: number = 0
|
||||
let currentOptionEl: HTMLElement
|
||||
$: currentOption = options[current]
|
||||
|
||||
|
||||
/**
|
||||
* When changing select value
|
||||
*/
|
||||
const handleChange = ({ target: { value }}: any) => {
|
||||
current = options.findIndex(option => option.value === value)
|
||||
|
||||
// Dispatch event to parent
|
||||
dispatch('change', options[current].value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="select">
|
||||
<slot />
|
||||
|
||||
<span bind:this={currentOptionEl}>
|
||||
{currentOption.name}
|
||||
</span>
|
||||
|
||||
<select {name} {id} on:change={handleChange}>
|
||||
{#each options as { value, name }}
|
||||
<option {value}>
|
||||
{name}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
Reference in New Issue
Block a user