SirBlob/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TUI Renderer, Element Types, and Page Updates

Browse Source
This commit is contained in:
SirBlob
2025-11-30 18:26:56 -05:00
parent f09c198f17
commit 1167c686e2
31 changed files with 1642 additions and 809 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/tui/TuiProgress.svelte
+45 -18
View File
@@ -1,20 +1,32 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
import { themeColors } from '$lib/stores/theme';
import type { TerminalLine } from './types';
import '$lib/assets/css/tui-progress.css';
import Icon from "@iconify/svelte";
import { getButtonStyle, parseColorText, getSegmentStyle } from "./utils";
import { themeColors } from "$lib/stores/theme";
import type { ProgressLine } from "./types";
import "$lib/assets/css/tui-progress.css";
export let line: TerminalLine;
export let inline: boolean = false;
interface Props {
line: ProgressLine;
inline?: boolean;
}
$: progress = Math.min(100, Math.max(0, line.progress ?? 0));
$: label = line.progressLabel || `${progress}%`;
$: contentSegments = parseColorText(line.content, $themeColors.colorMap);
$: labelSegments = parseColorText(label, $themeColors.colorMap);
let { line, inline = false }: Props = $props();
const progress = $derived(Math.min(100, Math.max(0, line.progress ?? 0)));
const label = $derived(line.progressLabel || `${progress}%`);
const contentSegments = $derived(
parseColorText(line.content, $themeColors.colorMap),
);
const labelSegments = $derived(
parseColorText(label, $themeColors.colorMap),
);
</script>
<div class="tui-progress" class:inline={inline} style="--progress-color: {getButtonStyle(line.style)}">
<div
class="tui-progress"
class:inline
style="--progress-color: {getButtonStyle(line.style)}"
>
{#if line.content}
<div class="progress-label">
{#each contentSegments as segment}
@@ -34,7 +46,8 @@
</div>
<div class="progress-blocks">
{#each Array(20) as _, i}
<span class="block" class:filled={i < Math.floor(progress / 5)}></span>
<span class="block" class:filled={i < Math.floor(progress / 5)}
></span>
{/each}
</div>
</div>
@@ -100,7 +113,11 @@
top: 0;
left: 0;
height: 100%;
background: linear-gradient(90deg, var(--progress-color), color-mix(in srgb, var(--progress-color) 80%, white 20%));
background: linear-gradient(
90deg,
var(--progress-color),
color-mix(in srgb, var(--progress-color) 80%, white 20%)
);
border-radius: 3px;
transition: width 0.3s ease;
}
@@ -111,14 +128,24 @@
top: 0;
height: 100%;
width: 20px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3)
);
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.progress-blocks {