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

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

	interface Props {
		line: TextareaLine;
		inline?: boolean;
		value?: string;
		oninput?: (value: string) => void;
		onchange?: (value: string) => void;
		onfocus?: () => void;
		onblur?: () => void;
	}

	let {
		line,
		inline = false,
		value = $bindable(""),
		oninput,
		onchange,
		onfocus,
		onblur,
	}: Props = $props();

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

	let isFocused = $state(false);
	let charCount = $state(value.length);

	function handleInput(e: Event) {
		const target = e.target as HTMLTextAreaElement;
		value = target.value;
		charCount = value.length;
		oninput?.(value);
	}

	function handleChange(e: Event) {
		const target = e.target as HTMLTextAreaElement;
		onchange?.(target.value);
	}

	function handleFocus() {
		isFocused = true;
		onfocus?.();
	}

	function handleBlur() {
		isFocused = false;
		onblur?.();
	}
</script>

<div
	class="tui-textarea"
	class: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
			oninput={handleInput}
			onchange={handleChange}
			onfocus={handleFocus}
			onblur={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>