Spaces:
Running
Running
File size: 1,469 Bytes
4e62630 89cd532 98051f8 4e62630 98051f8 8aab1a5 4e62630 6a0861b 89cd532 4e62630 98051f8 4e62630 89cd532 4e62630 8aab1a5 4e62630 6a0861b 4e62630 02f32f0 4e62630 02f32f0 4e62630 9273cbe 4e62630 9f5dff0 4e62630 02f32f0 4e62630 8aab1a5 4e62630 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<script lang="ts">
import { createEventDispatcher } from "svelte";
export let value = "";
export let minRows = 1;
export let maxRows: null | number = null;
export let placeholder = "";
export let disabled = false;
export let autofocus = false;
const dispatch = createEventDispatcher<{ submit: void }>();
$: minHeight = `${1 + minRows * 1.5}em`;
$: maxHeight = maxRows ? `${1 + maxRows * 1.5}em` : `auto`;
function handleKeydown(event: KeyboardEvent) {
// submit on enter
if (event.key === "Enter" && !event.shiftKey) {
event.preventDefault();
dispatch("submit"); // use a custom event instead of `event.target.form.requestSubmit()` as it does not work on Safari 14
}
}
let textareaElement: HTMLTextAreaElement;
</script>
<div class="relative min-w-0 flex-1">
<pre
class="invisible whitespace-pre-wrap p-3"
aria-hidden="true"
style="min-height: {minHeight}; max-height: {maxHeight}">{value + "\n"}</pre>
<!-- svelte-ignore a11y-autofocus -->
<textarea
enterkeyhint="send"
tabindex="0"
rows="1"
class="scrollbar-custom absolute top-0 m-0 h-full w-full resize-none scroll-p-3 overflow-x-hidden overflow-y-scroll border-0 bg-transparent p-3 outline-none focus:ring-0 focus-visible:ring-0"
bind:value
bind:this={textareaElement}
{disabled}
on:keydown={handleKeydown}
{placeholder}
{autofocus}
/>
</div>
<style>
pre,
textarea {
font-family: inherit;
box-sizing: border-box;
line-height: 1.5;
}
</style>
|