Fix links not working with click handlers
This commit is contained in:
parent
31a29f3260
commit
1892770032
|
@ -0,0 +1,63 @@
|
||||||
|
<script>
|
||||||
|
import { createEventDispatcher } from "svelte"
|
||||||
|
import FancyField from "./FancyField.svelte"
|
||||||
|
import FancyFieldLabel from "./FancyFieldLabel.svelte"
|
||||||
|
import ActionButton from "../ActionButton/ActionButton.svelte"
|
||||||
|
|
||||||
|
export let label
|
||||||
|
export let value
|
||||||
|
export let disabled = false
|
||||||
|
export let error = null
|
||||||
|
export let validate = null
|
||||||
|
export let options = []
|
||||||
|
export let getOptionLabel = option => extractProperty(option, "label")
|
||||||
|
export let getOptionValue = option => extractProperty(option, "value")
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
|
$: placeholder = !value
|
||||||
|
|
||||||
|
const extractProperty = (value, property) => {
|
||||||
|
if (value && typeof value === "object") {
|
||||||
|
return value[property]
|
||||||
|
}
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
|
||||||
|
const onChange = newValue => {
|
||||||
|
dispatch("change", newValue)
|
||||||
|
value = newValue
|
||||||
|
if (validate) {
|
||||||
|
error = validate(newValue)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<FancyField {error} {value} {validate} {disabled}>
|
||||||
|
{#if label}
|
||||||
|
<FancyFieldLabel placeholder={false}>{label}</FancyFieldLabel>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="options">
|
||||||
|
{#each options as option}
|
||||||
|
<ActionButton
|
||||||
|
selected={getOptionValue(option) === value}
|
||||||
|
size="S"
|
||||||
|
on:click={() => onChange(getOptionValue(option))}
|
||||||
|
>
|
||||||
|
{getOptionLabel(option)}
|
||||||
|
</ActionButton>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</FancyField>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.options {
|
||||||
|
margin-top: 22px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -15,7 +15,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<a
|
<a
|
||||||
on:click={e => e.stopPropagation() && dispatch(e)}
|
on:click={e => dispatch("click") && e.stopPropagation()}
|
||||||
{href}
|
{href}
|
||||||
{target}
|
{target}
|
||||||
{download}
|
{download}
|
||||||
|
|
Loading…
Reference in New Issue