5 changed files with 94 additions and 27 deletions
@ -0,0 +1,50 @@
@@ -0,0 +1,50 @@
|
||||
<script> |
||||
let { editable = false, value = $bindable(null) } = $props(); |
||||
let editing = $state(false); |
||||
|
||||
let editValue = $state(value); |
||||
|
||||
let timer = null; |
||||
function applyEdit(){ |
||||
value = editValue; |
||||
editing = false; |
||||
} |
||||
|
||||
function resetEdit(){ |
||||
editing = false; |
||||
editValue = value; |
||||
} |
||||
|
||||
function startEdit(){ |
||||
editing = editable; |
||||
} |
||||
|
||||
function typed(ev){ |
||||
if (ev.keyCode == 13 && ev.ctrlKey) applyEdit(); |
||||
if (ev.keyCode == 27) resetEdit(); |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
textarea{ |
||||
width: 100%; |
||||
min-height: 100px; |
||||
} |
||||
div{ |
||||
min-width: 40px; |
||||
min-height: 20px; |
||||
} |
||||
div:hover{ |
||||
border: 1px dotted; |
||||
} |
||||
</style> |
||||
|
||||
{#if editable && editing} |
||||
<textarea bind:value={editValue} onkeyup={typed} autofocus></textarea> |
||||
{:else} |
||||
<div onclick={startEdit}> |
||||
{#each value.split("\n") as line} |
||||
{line}<br/> |
||||
{/each} |
||||
</div> |
||||
{/if} |
||||
Loading…
Reference in new issue