58 lines
No EOL
1.2 KiB
Svelte
58 lines
No EOL
1.2 KiB
Svelte
<script>
|
|
import { Button } from '$lib/components';
|
|
|
|
let { values = $bindable([]), onAdd = () => {} } = $props();
|
|
let newValue = $state('');
|
|
|
|
function onAddNewValue() {
|
|
onAdd?.(newValue);
|
|
newValue = '';
|
|
}
|
|
</script>
|
|
|
|
<div class="chips-container">
|
|
<form>
|
|
<input bind:value={newValue} type="text" />
|
|
<Button type="submit" onclick={onAddNewValue}>Add</Button>
|
|
</form>
|
|
<div class="chips">
|
|
{#if values}
|
|
{#each values as chip}
|
|
<div class="chip">
|
|
<Button onclick={() => {
|
|
values = values.filter(value => value !== chip);
|
|
}}>{chip}</Button>
|
|
</div>
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.chips-container {
|
|
display: grid;
|
|
grid-gap: 10px;
|
|
}
|
|
|
|
.chips {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.chip {
|
|
color: white;
|
|
|
|
background-color: #4b5563;
|
|
border-radius: 10px;
|
|
|
|
&:hover {
|
|
background-color: #434b58;
|
|
}
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
</style> |