CSS Files Styling

src/lib/components/tui/TuiInput.svelte

@@ -0,0 +1,197 @@
+<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-input.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 || '';
+	$: inputType = line.inputType || 'text';
+	$: isDisabled = line.inputDisabled || false;
+	$: hasError = line.inputError;
+	$: errorMessage = line.inputErrorMessage || '';
+	$: prefix = line.inputPrefix || '';
+	$: suffix = line.inputSuffix || '';
+
+	function handleInput(e: Event) {
+		const target = e.target as HTMLInputElement;
+		value = target.value;
+		dispatch('input', value);
+	}
+
+	function handleChange(e: Event) {
+		const target = e.target as HTMLInputElement;
+		dispatch('change', target.value);
+	}
+
+	function handleFocus() {
+		dispatch('focus');
+	}
+
+	function handleBlur() {
+		dispatch('blur');
+	}
+</script>
+
+<div 
+	class="tui-input" 
+	class:inline={inline}
+	class:error={hasError}
+	class:disabled={isDisabled}
+	style="--input-color: {getButtonStyle(line.style)}"
+>
+	{#if line.content}
+		<label class="input-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="input-wrapper">
+		<span class="input-prompt">❯</span>
+		{#if prefix}
+			<span class="input-affix prefix">{prefix}</span>
+		{/if}
+		<input
+			type={inputType}
+			{placeholder}
+			{value}
+			disabled={isDisabled}
+			on:input={handleInput}
+			on:change={handleChange}
+			on:focus={handleFocus}
+			on:blur={handleBlur}
+		/>
+		{#if suffix}
+			<span class="input-affix suffix">{suffix}</span>
+		{/if}
+	</div>
+
+	{#if hasError && errorMessage}
+		<div class="input-error">
+			<Icon icon="mdi:alert-circle" width="12" />
+			<span>{errorMessage}</span>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.tui-input {
+		margin: 0.5rem 0;
+		font-size: 0.9rem;
+	}
+
+	.tui-input.inline {
+		display: inline-flex;
+		flex-direction: column;
+		margin: 0 0.5rem 0 0;
+	}
+
+	.input-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);
+	}
+
+	.input-wrapper {
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+		padding: 0.5rem 0.75rem;
+		background: color-mix(in srgb, var(--terminal-bg) 80%, black);
+		border: 1px solid var(--terminal-muted);
+		border-radius: 4px;
+		transition: all 0.15s ease;
+	}
+
+	.input-wrapper:focus-within {
+		border-color: var(--input-color);
+		box-shadow: 0 0 0 1px color-mix(in srgb, var(--input-color) 30%, transparent);
+	}
+
+	.tui-input.error .input-wrapper {
+		border-color: #f38ba8;
+	}
+
+	.tui-input.disabled .input-wrapper {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.input-prompt {
+		color: var(--input-color);
+		font-weight: bold;
+		user-select: none;
+	}
+
+	.input-affix {
+		color: var(--terminal-muted);
+		font-size: 0.85rem;
+	}
+
+	.input-affix.prefix {
+		margin-right: 0.25rem;
+	}
+
+	.input-affix.suffix {
+		margin-left: 0.25rem;
+	}
+
+	input {
+		flex: 1;
+		min-width: 0;
+		background: transparent;
+		border: none;
+		color: var(--terminal-text);
+		font-family: inherit;
+		font-size: inherit;
+		outline: none;
+	}
+
+	input::placeholder {
+		color: var(--terminal-muted);
+		opacity: 0.6;
+	}
+
+	input:disabled {
+		cursor: not-allowed;
+	}
+
+	.input-error {
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+		margin-top: 0.35rem;
+		color: #f38ba8;
+		font-size: 0.8rem;
+	}
+</style>