Fix links not working with click handlers
This commit is contained in:
parent
31a29f3260
commit
1892770032
2 changed files with 64 additions and 1 deletions
63
packages/bbui/src/FancyForm/FancyButtonRadio.svelte
Normal file
63
packages/bbui/src/FancyForm/FancyButtonRadio.svelte
Normal 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>
|
|
@ -15,7 +15,7 @@
|
|||
</script>
|
||||
|
||||
<a
|
||||
on:click={e => e.stopPropagation() && dispatch(e)}
|
||||
on:click={e => dispatch("click") && e.stopPropagation()}
|
||||
{href}
|
||||
{target}
|
||||
{download}
|
||||
|
|
Loading…
Reference in a new issue