26 lines
606 B
Svelte
26 lines
606 B
Svelte
|
<script lang="ts">
|
||
|
|
import { createEventDispatcher } from 'svelte';
|
||
|
|
const dispatch = createEventDispatcher();
|
||
|
|
export let id: number;
|
||
|
|
export let value: string;
|
||
|
|
|
||
|
|
let width: number;
|
||
|
|
|
||
|
|
$: width = Math.max(value.length + 3, 6);
|
||
|
|
|
||
|
|
const handleClick = () => {
|
||
|
|
dispatch('deleted', {
|
||
|
|
tagId: id,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<input id="tag-{id}" type="text" class="letterInput" style="--valuelen: {width}ch" bind:value={value}>
|
||
|
|
<button on:click={handleClick}>X</button>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.letterInput {
|
||
|
|
width: var(--valuelen);
|
||
|
|
padding-left: 1ch;
|
||
|
|
}
|
||
|
|
</style>
|