mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-12-19 07:32:22 +03:00
59 lines
1.3 KiB
Svelte
59 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { createEventDispatcher } from 'svelte';
|
|
|
|
export let value: string | undefined;
|
|
export let placeholder: string | undefined = undefined;
|
|
export let required = false;
|
|
export let rows = 4;
|
|
export let id: string | undefined = undefined;
|
|
export let disabled = false;
|
|
export let autocomplete: string | undefined = undefined;
|
|
export let autocorrect: string | undefined = undefined;
|
|
export let spellcheck = false;
|
|
export let label: string | undefined = undefined;
|
|
|
|
const dispatch = createEventDispatcher<{ input: string; change: string }>();
|
|
</script>
|
|
|
|
<div class="textarea-wrapper">
|
|
{#if label}
|
|
<label class="textbox__label text-base-13 text-semibold" for={id}>
|
|
{label}
|
|
</label>
|
|
{/if}
|
|
<textarea
|
|
class="text-input text-base-body-13 textarea"
|
|
bind:value
|
|
{disabled}
|
|
{id}
|
|
name={id}
|
|
{placeholder}
|
|
{required}
|
|
{rows}
|
|
{autocomplete}
|
|
{autocorrect}
|
|
{spellcheck}
|
|
on:input={(e) => dispatch('input', e.currentTarget.value)}
|
|
on:change={(e) => dispatch('change', e.currentTarget.value)}
|
|
/>
|
|
</div>
|
|
|
|
<style lang="postcss">
|
|
.textarea-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-6);
|
|
}
|
|
.textarea {
|
|
width: 100%;
|
|
resize: none;
|
|
padding-top: var(--size-12);
|
|
padding-bottom: var(--size-12);
|
|
}
|
|
|
|
.textbox__label {
|
|
color: var(--clr-scale-ntrl-50);
|
|
}
|
|
</style>
|