80 lines
1.5 KiB
Svelte
80 lines
1.5 KiB
Svelte
<script lang='ts'>
|
|
|
|
|
|
|
|
export let value = '';
|
|
export let placeholder = '';
|
|
export let id;
|
|
export let label;
|
|
export let type = 'text';
|
|
export let disabled = false;
|
|
export let required = false;
|
|
export let hidden = false;
|
|
|
|
export let maxLength = 512;
|
|
export let showCounter = false;
|
|
|
|
export let errors;
|
|
|
|
let inputValue = value;
|
|
let counterColor;
|
|
|
|
$: counter = `${inputValue.length}/${maxLength}`;
|
|
|
|
$: {
|
|
if (inputValue.length > maxLength) {
|
|
counterColor = 'text-error';
|
|
} else {
|
|
counterColor = 'text-white';
|
|
}
|
|
}
|
|
|
|
function handleInput(event) {
|
|
inputValue = event.target.value;
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
|
|
</svelte:head>
|
|
|
|
|
|
<div class="form-control w-full h-auto max-w-2xl {hidden ? 'hidden' : ''}">
|
|
<label for={id} class="label font-medium pb-1">
|
|
<span class="label-text">{label}</span>
|
|
</label>
|
|
|
|
|
|
|
|
<textarea
|
|
input='text'
|
|
class="min-h-[290px] placeholder:text-gray-300 h-auto text-sm bg-[#242527] w-full resize-none focus-none ring-none rounded-lg text-white"
|
|
{type}
|
|
{placeholder}
|
|
{required}
|
|
{disabled}
|
|
{id}
|
|
name={id}
|
|
value={inputValue}
|
|
on:input={handleInput}
|
|
/>
|
|
|
|
{#if showCounter}
|
|
<div class="flex justify-end mt-1 -mb-1">
|
|
<span class={`label-text text-xs ${counterColor}`}>{counter}</span>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if errors}
|
|
{#each errors as error}
|
|
<label for={id} class="label py-0 pt-1">
|
|
<span class="label-text-alt text-error">
|
|
{error}
|
|
</span>
|
|
</label>
|
|
{/each}
|
|
{/if}
|
|
</div>
|