Fix links not working with click handlers

This commit is contained in:
Andrew Kingston 2023-01-19 19:52:49 +00:00
parent 31a29f3260
commit 1892770032
2 changed files with 64 additions and 1 deletions

View File

@ -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>

View File

@ -15,7 +15,7 @@
</script>
<a
on:click={e => e.stopPropagation() && dispatch(e)}
on:click={e => dispatch("click") && e.stopPropagation()}
{href}
{target}
{download}