You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
764 B
41 lines
764 B
<script> |
|
let { editable = false, value = $bindable(null) } = $props(); |
|
let editing = $state(false); |
|
|
|
let editValue = value; |
|
|
|
function applyEdit(){ |
|
value = editValue; |
|
editing=false; |
|
} |
|
|
|
function resetEdit(){ |
|
editing = false; |
|
editValue = value; |
|
} |
|
|
|
function startEdit(){ |
|
editing = editable; |
|
} |
|
|
|
function typed(ev){ |
|
if (ev.keyCode == 13) applyEdit(); |
|
if (ev.keyCode == 27) resetEdit(); |
|
} |
|
</script> |
|
|
|
<style> |
|
div{ |
|
min-width: 40px; |
|
min-height: 20px; |
|
} |
|
div:hover{ |
|
border: 1px dotted; |
|
} |
|
</style> |
|
|
|
{#if editable && editing} |
|
<input bind:value={editValue} onkeyup={typed} autofocus /> |
|
{:else} |
|
<div onclick={startEdit}>{value}</div> |
|
{/if}
|
|
|