CSS Files Styling

2025-11-28 17:43:48 +00:00
parent 8cdb39afbe
commit 4d17b599b3
54 changed files with 4817 additions and 1764 deletions
@@ -0,0 +1,131 @@
+<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-checkbox.css';
+
+	export let line: TerminalLine;
+	export let inline: boolean = false;
+	export let checked: boolean = false;
+
+	const dispatch = createEventDispatcher<{
+		change: boolean;
+	}>();
+
+	$: labelSegments = line.content ? parseColorText(line.content) : [];
+	$: isDisabled = line.inputDisabled || false;
+	$: indeterminate = line.checkboxIndeterminate || false;
+
+	function handleChange() {
+		if (isDisabled) return;
+		checked = !checked;
+		dispatch('change', checked);
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === ' ' || e.key === 'Enter') {
+			e.preventDefault();
+			handleChange();
+		}
+	}
+
+	function getCheckboxSymbol(checked: boolean, indeterminate: boolean): string {
+		if (indeterminate) return '[-]';
+		return checked ? '[✓]' : '[ ]';
+	}
+</script>
+
+<div 
+	class="tui-checkbox" 
+	class:inline={inline}
+	class:checked={checked}
+	class:disabled={isDisabled}
+	style="--checkbox-color: {getButtonStyle(line.style)}"
+	role="checkbox"
+	aria-checked={indeterminate ? 'mixed' : checked}
+	aria-disabled={isDisabled}
+	tabindex={isDisabled ? -1 : 0}
+	on:click={handleChange}
+	on:keydown={handleKeydown}
+>
+	<span class="checkbox-box" class:indeterminate={indeterminate}>
+		{getCheckboxSymbol(checked, indeterminate)}
+	</span>
+	
+	{#if line.icon}
+		<Icon icon={line.icon} width="14" class="checkbox-icon" />
+	{/if}
+	
+	{#if line.content}
+		<span class="checkbox-label">
+			{#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}
+		</span>
+	{/if}
+</div>
+
+<style>
+	.tui-checkbox {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin: 0.35rem 0;
+		padding: 0.35rem 0.5rem;
+		font-size: 0.9rem;
+		cursor: pointer;
+		border-radius: 4px;
+		transition: all 0.15s ease;
+		user-select: none;
+	}
+
+	.tui-checkbox.inline {
+		display: inline-flex;
+		margin: 0 0.75rem 0 0;
+	}
+
+	.tui-checkbox:hover:not(.disabled) {
+		background: color-mix(in srgb, var(--checkbox-color) 10%, transparent);
+	}
+
+	.tui-checkbox:focus-visible {
+		outline: 1px solid var(--checkbox-color);
+		outline-offset: 2px;
+	}
+
+	.tui-checkbox.disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.checkbox-box {
+		font-family: inherit;
+		font-weight: bold;
+		color: var(--terminal-muted);
+		transition: color 0.15s ease;
+	}
+
+	.tui-checkbox.checked .checkbox-box,
+	.checkbox-box.indeterminate {
+		color: var(--checkbox-color);
+	}
+
+	:global(.checkbox-icon) {
+		color: var(--checkbox-color);
+	}
+
+	.checkbox-label {
+		color: var(--terminal-text);
+	}
+
+	.tui-checkbox.disabled .checkbox-label {
+		color: var(--terminal-muted);
+	}
+</style>