website/src/lib/components/tui/TuiTextarea.svelte

<script lang="ts">
	import Icon from '@iconify/svelte';
	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
	import type { TerminalLine } from './types';
	import { createEventDispatcher } from 'svelte';
	import '$lib/assets/css/tui-textarea.css';

	export let line: TerminalLine;
	export let inline: boolean = false;
	export let value: string = '';

	const dispatch = createEventDispatcher<{
		input: string;
		change: string;
		focus: void;
		blur: void;
	}>();

	$: labelSegments = line.content ? parseColorText(line.content) : [];
	$: placeholder = line.inputPlaceholder || '';
	$: isDisabled = line.inputDisabled || false;
	$: hasError = line.inputError;
	$: errorMessage = line.inputErrorMessage || '';
	$: rows = line.textareaRows || 4;
	$: maxLength = line.textareaMaxLength;

	let isFocused = false;
	let charCount = 0;

	function handleInput(e: Event) {
		const target = e.target as HTMLTextAreaElement;
		value = target.value;
		charCount = value.length;
		dispatch('input', value);
	}

	function handleChange(e: Event) {
		const target = e.target as HTMLTextAreaElement;
		dispatch('change', target.value);
	}

	function handleFocus() {
		isFocused = true;
		dispatch('focus');
	}

	function handleBlur() {
		isFocused = false;
		dispatch('blur');
	}
</script>

<div 
	class="tui-textarea" 
	class:inline={inline}
	class:focused={isFocused}
	class:error={hasError}
	class:disabled={isDisabled}
	style="--input-color: {getButtonStyle(line.style)}"
>
	{#if line.content}
		<label class="textarea-label">
			{#if line.icon}
				<Icon icon={line.icon} width="14" class="label-icon" />
			{/if}
			{#each labelSegments as segment}
				{#if segment.icon}
					<Icon icon={segment.icon} width="14" class="inline-icon" />
				{:else if getSegmentStyle(segment)}
					<span style={getSegmentStyle(segment)}>{segment.text}</span>
				{:else}
					{segment.text}
				{/if}
			{/each}
		</label>
	{/if}
	
	<div class="textarea-wrapper">
		<div class="line-numbers">
			{#each Array(Math.max(rows, value.split('\n').length)) as _, i}
				<span class="line-num">{i + 1}</span>
			{/each}
		</div>
		<textarea
			{placeholder}
			{rows}
			maxlength={maxLength}
			disabled={isDisabled}
			bind:value
			on:input={handleInput}
			on:change={handleChange}
			on:focus={handleFocus}
			on:blur={handleBlur}
		></textarea>
	</div>

	<div class="textarea-footer">
		{#if hasError && errorMessage}
			<div class="textarea-error">
				<Icon icon="mdi:alert-circle" width="12" />
				<span>{errorMessage}</span>
			</div>
		{/if}
		{#if maxLength}
			<div class="char-count" class:warning={charCount > maxLength * 0.9}>
				{charCount}/{maxLength}
			</div>
		{/if}
	</div>
</div>

<style>
	.tui-textarea {
		margin: 0.5rem 0;
		font-size: 0.9rem;
	}

	.tui-textarea.inline {
		display: inline-flex;
		flex-direction: column;
		margin: 0 0.5rem 0 0;
	}

	.textarea-label {
		display: flex;
		align-items: center;
		gap: 0.35rem;
		margin-bottom: 0.35rem;
		color: var(--terminal-muted);
		font-size: 0.85rem;
	}

	:global(.label-icon) {
		color: var(--input-color);
	}

	.textarea-wrapper {
		display: flex;
		background: color-mix(in srgb, var(--terminal-bg) 80%, black);
		border: 1px solid var(--terminal-muted);
		border-radius: 4px;
		transition: all 0.15s ease;
		overflow: hidden;
	}

	.tui-textarea.focused .textarea-wrapper {
		border-color: var(--input-color);
		box-shadow: 0 0 0 1px color-mix(in srgb, var(--input-color) 30%, transparent);
	}

	.tui-textarea.error .textarea-wrapper {
		border-color: #f38ba8;
	}

	.tui-textarea.disabled .textarea-wrapper {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.line-numbers {
		display: flex;
		flex-direction: column;
		padding: 0.5rem 0;
		background: color-mix(in srgb, var(--terminal-bg) 60%, black);
		border-right: 1px solid var(--terminal-muted);
		user-select: none;
	}

	.line-num {
		padding: 0 0.5rem;
		color: var(--terminal-muted);
		font-size: 0.8rem;
		line-height: 1.5;
		text-align: right;
		min-width: 2rem;
	}

	textarea {
		flex: 1;
		min-width: 0;
		padding: 0.5rem 0.75rem;
		background: transparent;
		border: none;
		color: var(--terminal-text);
		font-family: inherit;
		font-size: inherit;
		line-height: 1.5;
		resize: vertical;
		outline: none;
	}

	textarea::placeholder {
		color: var(--terminal-muted);
		opacity: 0.6;
	}

	textarea:disabled {
		cursor: not-allowed;
		resize: none;
	}

	.textarea-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 0.35rem;
	}

	.textarea-error {
		display: flex;
		align-items: center;
		gap: 0.35rem;
		color: #f38ba8;
		font-size: 0.8rem;
	}

	.char-count {
		margin-left: auto;
		color: var(--terminal-muted);
		font-size: 0.75rem;
	}

	.char-count.warning {
		color: #f9e2af;
	}
</style>