TUI Renderer Update
This commit is contained in:
@@ -1,22 +1,7 @@
|
||||
<script lang="ts">
|
||||
import Icon from '@iconify/svelte';
|
||||
import { getSegmentStyle, getLinePrefix, getSegmentsUpToChar } from './utils';
|
||||
import { getSegmentsUpToChar } from './utils';
|
||||
import { user } from '$lib/config';
|
||||
import TuiButton from './TuiButton.svelte';
|
||||
import TuiLink from './TuiLink.svelte';
|
||||
import TuiCard from './TuiCard.svelte';
|
||||
import TuiProgress from './TuiProgress.svelte';
|
||||
import TuiAccordion from './TuiAccordion.svelte';
|
||||
import TuiTable from './TuiTable.svelte';
|
||||
import TuiTooltip from './TuiTooltip.svelte';
|
||||
import TuiCardGrid from './TuiCardGrid.svelte';
|
||||
import TuiInput from './TuiInput.svelte';
|
||||
import TuiTextarea from './TuiTextarea.svelte';
|
||||
import TuiCheckbox from './TuiCheckbox.svelte';
|
||||
import TuiRadio from './TuiRadio.svelte';
|
||||
import TuiSelect from './TuiSelect.svelte';
|
||||
import TuiToggle from './TuiToggle.svelte';
|
||||
import TuiGroup from './TuiGroup.svelte';
|
||||
import TuiLine from './TuiLine.svelte';
|
||||
import type { DisplayedLine } from './types';
|
||||
import '$lib/assets/css/tui-body.css';
|
||||
|
||||
@@ -28,169 +13,68 @@
|
||||
export let onButtonClick: (idx: number) => void;
|
||||
export let onHoverButton: (idx: number) => void;
|
||||
export let onLinkClick: (idx: number) => void;
|
||||
export let terminalSettings: any;
|
||||
export let terminalSettings: { showCursor: boolean };
|
||||
|
||||
// Group displayed lines into regular items and inline groups
|
||||
type GroupedItem =
|
||||
| { type: 'single'; index: number; displayed: DisplayedLine }
|
||||
| { type: 'inline-group'; indices: number[]; items: DisplayedLine[] };
|
||||
// Group consecutive inline items together
|
||||
type ProcessedGroup =
|
||||
| { kind: 'single'; index: number; displayed: DisplayedLine }
|
||||
| { kind: 'inline'; items: Array<{ index: number; displayed: DisplayedLine }> };
|
||||
|
||||
$: groupedLines = (() => {
|
||||
const result: GroupedItem[] = [];
|
||||
$: processedGroups = (() => {
|
||||
const groups: ProcessedGroup[] = [];
|
||||
let i = 0;
|
||||
|
||||
while (i < displayedLines.length) {
|
||||
const displayed = displayedLines[i];
|
||||
const line = displayed.parsed.line;
|
||||
|
||||
if (line.inline) {
|
||||
// Start an inline group
|
||||
const group: GroupedItem = { type: 'inline-group', indices: [], items: [] };
|
||||
if (displayed.parsed.line.inline) {
|
||||
const inlineItems: Array<{ index: number; displayed: DisplayedLine }> = [];
|
||||
while (i < displayedLines.length && displayedLines[i].parsed.line.inline) {
|
||||
group.indices.push(i);
|
||||
group.items.push(displayedLines[i]);
|
||||
inlineItems.push({ index: i, displayed: displayedLines[i] });
|
||||
i++;
|
||||
}
|
||||
result.push(group);
|
||||
groups.push({ kind: 'inline', items: inlineItems });
|
||||
} else {
|
||||
result.push({ type: 'single', index: i, displayed });
|
||||
groups.push({ kind: 'single', index: i, displayed });
|
||||
i++;
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
return groups;
|
||||
})();
|
||||
</script>
|
||||
|
||||
<div class="tui-body" bind:this={ref}>
|
||||
{#each groupedLines as group}
|
||||
{#if group.type === 'inline-group'}
|
||||
<!-- Inline group container -->
|
||||
{#each processedGroups as group, gi (gi)}
|
||||
{#if group.kind === 'inline'}
|
||||
<div class="tui-inline-group">
|
||||
{#each group.items as displayed, j}
|
||||
{@const line = displayed.parsed.line}
|
||||
{@const idx = group.indices[j]}
|
||||
{@const visibleSegments = getSegmentsUpToChar(displayed.parsed.segments, displayed.charIndex)}
|
||||
{@const showImage = displayed.showImage}
|
||||
{#if line.type === 'button'}
|
||||
<TuiButton {line} index={idx} selected={selectedIndex === idx} onClick={onButtonClick} onHover={onHoverButton} inline={true} />
|
||||
{:else if line.type === 'link'}
|
||||
<TuiLink {line} onClick={() => onLinkClick(idx)} />
|
||||
{:else if line.type === 'tooltip'}
|
||||
<TuiTooltip {line} />
|
||||
{:else if line.type === 'progress'}
|
||||
<TuiProgress {line} inline={true} />
|
||||
{:else if line.type === 'input'}
|
||||
<TuiInput {line} inline={true} />
|
||||
{:else if line.type === 'checkbox'}
|
||||
<TuiCheckbox {line} inline={true} />
|
||||
{:else if line.type === 'toggle'}
|
||||
<TuiToggle {line} inline={true} />
|
||||
{:else if line.type === 'group'}
|
||||
<TuiGroup {line} inline={true} {onButtonClick} {onHoverButton} {onLinkClick} />
|
||||
{:else if line.type === 'image' && showImage}
|
||||
<div class="tui-image inline-image">
|
||||
<img src={line.image} alt={line.imageAlt || 'Image'} style="max-width: {line.imageWidth || 300}px" />
|
||||
{#if line.content}
|
||||
<span class="image-caption">{line.content}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if line.type !== 'image'}
|
||||
<span class="inline-content {line.type}">
|
||||
{getLinePrefix(line.type)}{#each visibleSegments 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}
|
||||
{#each group.items as item (item.index)}
|
||||
<TuiLine
|
||||
line={item.displayed.parsed.line}
|
||||
index={item.index}
|
||||
segments={getSegmentsUpToChar(item.displayed.parsed.segments, item.displayed.charIndex)}
|
||||
complete={item.displayed.complete}
|
||||
showImage={item.displayed.showImage}
|
||||
{selectedIndex}
|
||||
inline={true}
|
||||
{onButtonClick}
|
||||
{onHoverButton}
|
||||
{onLinkClick}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if group.type === 'single'}
|
||||
{@const i = group.index}
|
||||
{@const displayed = group.displayed}
|
||||
{@const line = displayed.parsed.line}
|
||||
{@const visibleSegments = getSegmentsUpToChar(displayed.parsed.segments, displayed.charIndex)}
|
||||
{@const complete = displayed.complete}
|
||||
{@const showImage = displayed.showImage}
|
||||
{#if line.type === 'divider'}
|
||||
<div class="tui-divider" id={line.id}>
|
||||
<span class="divider-line"></span>
|
||||
{#if line.content}
|
||||
<span class="divider-text">{line.content}</span>
|
||||
{/if}
|
||||
<span class="divider-line"></span>
|
||||
</div>
|
||||
{:else if line.type === 'button'}
|
||||
<TuiButton {line} index={i} selected={selectedIndex === i} onClick={onButtonClick} onHover={onHoverButton} />
|
||||
{:else if line.type === 'link'}
|
||||
<div class="tui-line link">
|
||||
<TuiLink {line} onClick={() => onLinkClick(i)} />
|
||||
</div>
|
||||
{:else if line.type === 'card'}
|
||||
<TuiCard {line} />
|
||||
{:else if line.type === 'cardgrid'}
|
||||
<TuiCardGrid {line} />
|
||||
{:else if line.type === 'progress'}
|
||||
<TuiProgress {line} />
|
||||
{:else if line.type === 'accordion'}
|
||||
<TuiAccordion {line} />
|
||||
{:else if line.type === 'table'}
|
||||
<TuiTable {line} />
|
||||
{:else if line.type === 'tooltip'}
|
||||
<div class="tui-line">
|
||||
<TuiTooltip {line} />
|
||||
</div>
|
||||
{:else if line.type === 'input'}
|
||||
<TuiInput {line} />
|
||||
{:else if line.type === 'textarea'}
|
||||
<TuiTextarea {line} />
|
||||
{:else if line.type === 'checkbox'}
|
||||
<TuiCheckbox {line} />
|
||||
{:else if line.type === 'radio'}
|
||||
<TuiRadio {line} />
|
||||
{:else if line.type === 'select'}
|
||||
<TuiSelect {line} />
|
||||
{:else if line.type === 'toggle'}
|
||||
<TuiToggle {line} />
|
||||
{:else if line.type === 'group'}
|
||||
<TuiGroup {line} {onButtonClick} {onHoverButton} {onLinkClick} />
|
||||
{:else}
|
||||
<div class="tui-line {line.type}" class:complete id={line.id}>
|
||||
{#if line.type === 'command' || line.type === 'prompt'}
|
||||
<span class="prompt">
|
||||
<span class="user">{user.username}</span><span class="at">@</span><span class="host">{user.hostname}</span>
|
||||
<span class="separator">:</span><span class="path">~</span><span class="symbol">$</span>
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
{#if line.type === 'image' && showImage}
|
||||
<div class="tui-image">
|
||||
<img src={line.image} alt={line.imageAlt || 'Image'} style="max-width: {line.imageWidth || 300}px" />
|
||||
{#if line.content}
|
||||
<span class="image-caption">{line.content}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if line.type === 'header'}
|
||||
<span class="content header-text">
|
||||
<Icon icon="mdi:pound" width="14" class="header-icon" />
|
||||
{#each visibleSegments as segment}
|
||||
{#if segment.icon}
|
||||
<Icon icon={segment.icon} width="16" class="inline-icon" />
|
||||
{:else if getSegmentStyle(segment)}
|
||||
<span style={getSegmentStyle(segment)}>{segment.text}</span>
|
||||
{:else}
|
||||
{segment.text}
|
||||
{/if}
|
||||
{/each}
|
||||
</span>
|
||||
{:else if line.type !== 'blank'}
|
||||
<span class="content">
|
||||
{getLinePrefix(line.type)}{#each visibleSegments 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}
|
||||
|
||||
{#if terminalSettings.showCursor && i === currentLineIndex && !complete && isTyping && line.type !== 'image' && line.type !== 'blank'}
|
||||
<span class="cursor"></span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<TuiLine
|
||||
line={group.displayed.parsed.line}
|
||||
index={group.index}
|
||||
segments={getSegmentsUpToChar(group.displayed.parsed.segments, group.displayed.charIndex)}
|
||||
complete={group.displayed.complete}
|
||||
showImage={group.displayed.showImage}
|
||||
{selectedIndex}
|
||||
inline={false}
|
||||
showCursor={terminalSettings.showCursor && group.index === currentLineIndex && !group.displayed.complete && isTyping && group.displayed.parsed.line.type !== 'image'}
|
||||
{onButtonClick}
|
||||
{onHoverButton}
|
||||
{onLinkClick}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
|
||||
@@ -1,17 +1,7 @@
|
||||
<script lang="ts">
|
||||
import Icon from '@iconify/svelte';
|
||||
import { getSegmentStyle, getLinePrefix, getSegmentsUpToChar, parseColorText, getPlainText } from './utils';
|
||||
import { handleNavigation } from './terminal-keyboard';
|
||||
import { user } from '$lib/config';
|
||||
import { parseColorText, getPlainText } from './utils';
|
||||
import { themeColors } from '$lib/stores/theme';
|
||||
import TuiButton from './TuiButton.svelte';
|
||||
import TuiLink from './TuiLink.svelte';
|
||||
import TuiProgress from './TuiProgress.svelte';
|
||||
import TuiTooltip from './TuiTooltip.svelte';
|
||||
import TuiInput from './TuiInput.svelte';
|
||||
import TuiCheckbox from './TuiCheckbox.svelte';
|
||||
import TuiToggle from './TuiToggle.svelte';
|
||||
import TuiGroup from './TuiGroup.svelte';
|
||||
import TuiLine from './TuiLine.svelte';
|
||||
import type { TerminalLine } from './types';
|
||||
|
||||
interface Props {
|
||||
@@ -37,107 +27,37 @@
|
||||
const parsedChildren = $derived(
|
||||
(line.children || []).map(child => {
|
||||
const segments = parseColorText(child.content, colorMap);
|
||||
return {
|
||||
line: child,
|
||||
segments,
|
||||
plainText: getPlainText(segments)
|
||||
};
|
||||
return { line: child, segments, plainText: getPlainText(segments) };
|
||||
})
|
||||
);
|
||||
|
||||
// Style for the group container
|
||||
const groupStyle = $derived(() => {
|
||||
const styles: string[] = [];
|
||||
if (line.groupDirection === 'column') {
|
||||
styles.push('flex-direction: column');
|
||||
}
|
||||
if (line.groupDirection === 'column') styles.push('flex-direction: column');
|
||||
if (line.groupAlign) {
|
||||
const alignMap = { start: 'flex-start', center: 'center', end: 'flex-end' };
|
||||
const alignMap: Record<string, string> = { start: 'flex-start', center: 'center', end: 'flex-end' };
|
||||
styles.push(`align-items: ${alignMap[line.groupAlign] || 'flex-start'}`);
|
||||
}
|
||||
if (line.groupGap) {
|
||||
styles.push(`gap: ${line.groupGap}`);
|
||||
}
|
||||
if (line.groupGap) styles.push(`gap: ${line.groupGap}`);
|
||||
return styles.join('; ');
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="tui-group"
|
||||
class:inline
|
||||
style={groupStyle()}
|
||||
id={line.id}
|
||||
>
|
||||
{#each parsedChildren as parsed, idx}
|
||||
{@const child = parsed.line}
|
||||
{@const visibleSegments = parsed.segments}
|
||||
{@const childInline = child.inline !== false}
|
||||
|
||||
{#if child.type === 'image'}
|
||||
<div class="tui-image" class:inline-image={childInline}>
|
||||
<img
|
||||
src={child.image}
|
||||
alt={child.imageAlt || 'Image'}
|
||||
style="max-width: {child.imageWidth || 300}px"
|
||||
/>
|
||||
{#if child.content}
|
||||
<span class="image-caption">{child.content}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if child.type === 'button'}
|
||||
<TuiButton line={child} index={idx} selected={false} onClick={() => handleNavigation(child)} onHover={() => {}} inline={childInline} />
|
||||
{:else if child.type === 'link'}
|
||||
<TuiLink line={child} onClick={() => onLinkClick(idx)} />
|
||||
{:else if child.type === 'tooltip'}
|
||||
<TuiTooltip line={child} />
|
||||
{:else if child.type === 'progress'}
|
||||
<TuiProgress line={child} inline={childInline} />
|
||||
{:else if child.type === 'input'}
|
||||
<TuiInput line={child} inline={childInline} />
|
||||
{:else if child.type === 'checkbox'}
|
||||
<TuiCheckbox line={child} inline={childInline} />
|
||||
{:else if child.type === 'toggle'}
|
||||
<TuiToggle line={child} inline={childInline} />
|
||||
{:else if child.type === 'group'}
|
||||
<TuiGroup line={child} inline={childInline} {onButtonClick} {onHoverButton} {onLinkClick} />
|
||||
{:else if child.type === 'header'}
|
||||
<span class="content header-text">
|
||||
<Icon icon="mdi:pound" width="14" class="header-icon" />
|
||||
{#each visibleSegments as segment}
|
||||
{#if segment.icon}
|
||||
<Icon icon={segment.icon} width="16" class="inline-icon" />
|
||||
{:else if getSegmentStyle(segment)}
|
||||
<span style={getSegmentStyle(segment)}>{segment.text}</span>
|
||||
{:else}
|
||||
{segment.text}
|
||||
{/if}
|
||||
{/each}
|
||||
</span>
|
||||
{:else if child.type === 'blank'}
|
||||
<!-- Empty for blank -->
|
||||
{:else if child.type === 'command' || child.type === 'prompt'}
|
||||
<span class="group-line {child.type}">
|
||||
<span class="prompt">
|
||||
<span class="user">{user.username}</span><span class="at">@</span><span class="host">{user.hostname}</span>
|
||||
<span class="separator">:</span><span class="path">~</span><span class="symbol">$</span>
|
||||
</span>
|
||||
<span class="content">
|
||||
{#each visibleSegments 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>
|
||||
</span>
|
||||
{:else}
|
||||
<span class="group-line {child.type}">
|
||||
{getLinePrefix(child.type)}{#each visibleSegments 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 class="tui-group" class:inline style={groupStyle()} id={line.id}>
|
||||
{#each parsedChildren as parsed, idx (idx)}
|
||||
<TuiLine
|
||||
line={parsed.line}
|
||||
index={idx}
|
||||
segments={parsed.segments}
|
||||
complete={true}
|
||||
showImage={parsed.line.type === 'image'}
|
||||
selectedIndex={-1}
|
||||
inline={parsed.line.inline !== false}
|
||||
{onButtonClick}
|
||||
{onHoverButton}
|
||||
{onLinkClick}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@@ -154,117 +74,15 @@
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.group-line {
|
||||
display: block;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.group-line.output {
|
||||
color: var(--terminal-muted);
|
||||
}
|
||||
|
||||
.group-line.info {
|
||||
color: var(--terminal-primary);
|
||||
}
|
||||
|
||||
.group-line.success {
|
||||
color: #a6e3a1;
|
||||
}
|
||||
|
||||
.group-line.error {
|
||||
color: #f38ba8;
|
||||
}
|
||||
|
||||
.group-line.warning {
|
||||
color: #f9e2af;
|
||||
}
|
||||
|
||||
.group-line.command,
|
||||
.group-line.prompt {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.prompt {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.prompt .user {
|
||||
color: var(--terminal-user);
|
||||
}
|
||||
|
||||
.prompt .at {
|
||||
color: var(--terminal-muted);
|
||||
}
|
||||
|
||||
.prompt .host {
|
||||
color: var(--terminal-accent);
|
||||
}
|
||||
|
||||
.prompt .separator {
|
||||
color: var(--terminal-muted);
|
||||
}
|
||||
|
||||
.prompt .path {
|
||||
color: var(--terminal-path);
|
||||
}
|
||||
|
||||
.prompt .symbol {
|
||||
color: var(--terminal-muted);
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
color: var(--terminal-accent);
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tui-image {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tui-image img {
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--terminal-border);
|
||||
background: var(--terminal-bg-light);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.image-caption {
|
||||
color: var(--terminal-muted);
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@keyframes lineSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
from { opacity: 0; transform: translateX(-5px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
/* Mobile: inline groups become vertical stacked */
|
||||
@media (max-width: 768px) {
|
||||
.tui-group.inline {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.tui-group.inline .tui-image img {
|
||||
max-width: 100% !important;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
138
src/lib/components/tui/TuiLine.svelte
Normal file
138
src/lib/components/tui/TuiLine.svelte
Normal file
@@ -0,0 +1,138 @@
|
||||
<script lang="ts">
|
||||
import Icon from '@iconify/svelte';
|
||||
import { getSegmentStyle, getLinePrefix } from './utils';
|
||||
import { handleNavigation } from './terminal-keyboard';
|
||||
import { user } from '$lib/config';
|
||||
import TuiButton from './TuiButton.svelte';
|
||||
import TuiLink from './TuiLink.svelte';
|
||||
import TuiCard from './TuiCard.svelte';
|
||||
import TuiProgress from './TuiProgress.svelte';
|
||||
import TuiAccordion from './TuiAccordion.svelte';
|
||||
import TuiTable from './TuiTable.svelte';
|
||||
import TuiTooltip from './TuiTooltip.svelte';
|
||||
import TuiCardGrid from './TuiCardGrid.svelte';
|
||||
import TuiInput from './TuiInput.svelte';
|
||||
import TuiTextarea from './TuiTextarea.svelte';
|
||||
import TuiCheckbox from './TuiCheckbox.svelte';
|
||||
import TuiRadio from './TuiRadio.svelte';
|
||||
import TuiSelect from './TuiSelect.svelte';
|
||||
import TuiToggle from './TuiToggle.svelte';
|
||||
import TuiGroup from './TuiGroup.svelte';
|
||||
import type { TerminalLine, TextSegment } from './types';
|
||||
|
||||
interface Props {
|
||||
line: TerminalLine;
|
||||
index: number;
|
||||
segments: TextSegment[];
|
||||
complete?: boolean;
|
||||
showImage?: boolean;
|
||||
selectedIndex?: number;
|
||||
inline?: boolean;
|
||||
showCursor?: boolean;
|
||||
onButtonClick?: (idx: number) => void;
|
||||
onHoverButton?: (idx: number) => void;
|
||||
onLinkClick?: (idx: number) => void;
|
||||
}
|
||||
|
||||
let {
|
||||
line,
|
||||
index,
|
||||
segments,
|
||||
complete = true,
|
||||
showImage = false,
|
||||
selectedIndex = -1,
|
||||
inline = false,
|
||||
showCursor = false,
|
||||
onButtonClick = () => {},
|
||||
onHoverButton = () => {},
|
||||
onLinkClick = () => {}
|
||||
}: Props = $props();
|
||||
|
||||
// Component types that have their own wrapper
|
||||
const componentTypes = new Set(['button', 'card', 'cardgrid', 'progress', 'accordion', 'table', 'input', 'textarea', 'checkbox', 'radio', 'select', 'toggle', 'group']);
|
||||
|
||||
// Types that need special handling
|
||||
const isComponent = $derived(componentTypes.has(line.type));
|
||||
const isBlank = $derived(line.type === 'blank');
|
||||
const isDivider = $derived(line.type === 'divider');
|
||||
const isImage = $derived(line.type === 'image');
|
||||
const isPrompt = $derived(line.type === 'command' || line.type === 'prompt');
|
||||
const isHeader = $derived(line.type === 'header');
|
||||
const isLink = $derived(line.type === 'link');
|
||||
const isTooltip = $derived(line.type === 'tooltip');
|
||||
</script>
|
||||
|
||||
{#if isBlank}
|
||||
{#if inline}<span class="inline-blank"></span>{:else}<div class="tui-line blank"></div>{/if}
|
||||
{:else if isDivider}
|
||||
<div class="tui-divider" id={line.id}>
|
||||
<span class="divider-line"></span>
|
||||
{#if line.content}<span class="divider-text">{line.content}</span>{/if}
|
||||
<span class="divider-line"></span>
|
||||
</div>
|
||||
{:else if line.type === 'button'}
|
||||
<TuiButton {line} {index} selected={selectedIndex === index} onClick={onButtonClick} onHover={onHoverButton} {inline} />
|
||||
{:else if isLink}
|
||||
{#if inline}
|
||||
<TuiLink {line} onClick={() => handleNavigation(line)} />
|
||||
{:else}
|
||||
<div class="tui-line link"><TuiLink {line} onClick={() => onLinkClick(index)} /></div>
|
||||
{/if}
|
||||
{:else if isTooltip}
|
||||
{#if inline}<TuiTooltip {line} />{:else}<div class="tui-line"><TuiTooltip {line} /></div>{/if}
|
||||
{:else if line.type === 'card'}
|
||||
<TuiCard {line} />
|
||||
{:else if line.type === 'cardgrid'}
|
||||
<TuiCardGrid {line} />
|
||||
{:else if line.type === 'progress'}
|
||||
<TuiProgress {line} {inline} />
|
||||
{:else if line.type === 'accordion'}
|
||||
<TuiAccordion {line} />
|
||||
{:else if line.type === 'table'}
|
||||
<TuiTable {line} />
|
||||
{:else if line.type === 'input'}
|
||||
<TuiInput {line} {inline} />
|
||||
{:else if line.type === 'textarea'}
|
||||
<TuiTextarea {line} />
|
||||
{:else if line.type === 'checkbox'}
|
||||
<TuiCheckbox {line} {inline} />
|
||||
{:else if line.type === 'radio'}
|
||||
<TuiRadio {line} />
|
||||
{:else if line.type === 'select'}
|
||||
<TuiSelect {line} />
|
||||
{:else if line.type === 'toggle'}
|
||||
<TuiToggle {line} {inline} />
|
||||
{:else if line.type === 'group'}
|
||||
<TuiGroup {line} {inline} {onButtonClick} {onHoverButton} {onLinkClick} />
|
||||
{:else if isImage && showImage}
|
||||
<div class="tui-image" class:inline-image={inline}>
|
||||
<img src={line.image} alt={line.imageAlt || 'Image'} style="max-width: {line.imageWidth || 300}px" />
|
||||
{#if line.content}<span class="image-caption">{line.content}</span>{/if}
|
||||
</div>
|
||||
{:else if !isImage}
|
||||
{#if inline}
|
||||
<span class="inline-content {line.type}">
|
||||
{getLinePrefix(line.type)}{#each segments as seg}{#if seg.icon}<Icon icon={seg.icon} width="14" class="inline-icon" />{:else if getSegmentStyle(seg)}<span style={getSegmentStyle(seg)}>{seg.text}</span>{:else}{seg.text}{/if}{/each}
|
||||
</span>
|
||||
{:else}
|
||||
<div class="tui-line {line.type}" class:complete id={line.id}>
|
||||
{#if isPrompt}
|
||||
<span class="prompt">
|
||||
<span class="user">{user.username}</span><span class="at">@</span><span class="host">{user.hostname}</span>
|
||||
<span class="separator">:</span><span class="path">~</span><span class="symbol">$</span>
|
||||
</span>
|
||||
{/if}
|
||||
{#if isHeader}
|
||||
<span class="content header-text">
|
||||
<Icon icon="mdi:pound" width="14" class="header-icon" />
|
||||
{#each segments as seg}{#if seg.icon}<Icon icon={seg.icon} width="16" class="inline-icon" />{:else if getSegmentStyle(seg)}<span style={getSegmentStyle(seg)}>{seg.text}</span>{:else}{seg.text}{/if}{/each}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="content">
|
||||
{getLinePrefix(line.type)}{#each segments as seg}{#if seg.icon}<Icon icon={seg.icon} width="14" class="inline-icon" />{:else if getSegmentStyle(seg)}<span style={getSegmentStyle(seg)}>{seg.text}</span>{:else}{seg.text}{/if}{/each}
|
||||
</span>
|
||||
{/if}
|
||||
{#if showCursor}<span class="cursor"></span>{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
@@ -1,6 +1,9 @@
|
||||
import type { TextSegment } from './utils';
|
||||
import type { Card } from '$lib/config';
|
||||
|
||||
// Re-export TextSegment for convenience
|
||||
export type { TextSegment };
|
||||
|
||||
export type LineType =
|
||||
| 'command' | 'output' | 'prompt' | 'error' | 'success' | 'info' | 'warning'
|
||||
| 'image' | 'blank' | 'header' | 'button' | 'divider' | 'link'
|
||||
|
||||
@@ -26,7 +26,7 @@ export const lines: TerminalLine[] = [
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// TEXT FORMATTING
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
{ type: 'divider', content: 'TEXT FORMATTING' },
|
||||
{ type: 'divider', content: 'TEXT FORMATTING', id: 'text-formatting' },
|
||||
{ type: 'blank', content: '' },
|
||||
|
||||
{ type: 'info', content: '(&blue,bold)Colors(&)' },
|
||||
@@ -70,7 +70,7 @@ export const lines: TerminalLine[] = [
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// BUTTONS
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
{ type: 'divider', content: 'BUTTONS' },
|
||||
{ type: 'divider', content: 'BUTTONS', id: 'buttons' },
|
||||
{ type: 'blank', content: '' },
|
||||
|
||||
{ type: 'info', content: '(&blue,bold)Button Styles(&)' },
|
||||
@@ -182,6 +182,93 @@ export const lines: TerminalLine[] = [
|
||||
},
|
||||
{ type: 'blank', content: '' },
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// GROUPS
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
{ type: 'divider', content: 'GROUPS' },
|
||||
{ type: 'blank', content: '' },
|
||||
|
||||
{ type: 'info', content: '(&blue,bold)Horizontal Group (Row)(&)' },
|
||||
{
|
||||
type: 'group',
|
||||
content: '',
|
||||
groupDirection: 'row',
|
||||
groupAlign: 'center',
|
||||
groupGap: '1rem',
|
||||
children: [
|
||||
{ type: 'output', content: '(&primary,bold)Status:(&)', inline: true },
|
||||
{ type: 'success', content: '(&success)Online(&)', inline: true },
|
||||
{ type: 'button', content: 'Refresh', icon: 'mdi:refresh', style: 'accent', inline: true, action: () => console.log('Refresh clicked') }
|
||||
]
|
||||
},
|
||||
{ type: 'blank', content: '' },
|
||||
|
||||
{ type: 'info', content: '(&blue,bold)Vertical Group (Column)(&)' },
|
||||
{
|
||||
type: 'group',
|
||||
content: '',
|
||||
groupDirection: 'column',
|
||||
groupAlign: 'start',
|
||||
groupGap: '0.25rem',
|
||||
children: [
|
||||
{ type: 'header', content: '(&accent,bold)User Profile(&)' },
|
||||
{ type: 'output', content: '(&muted)Name:(&) John Doe' },
|
||||
{ type: 'output', content: '(&muted)Role:(&) Developer' },
|
||||
{ type: 'output', content: '(&muted)Status:(&) (&success)Active(&)' }
|
||||
]
|
||||
},
|
||||
{ type: 'blank', content: '' },
|
||||
|
||||
{ type: 'info', content: '(&blue,bold)Group with Links(&)' },
|
||||
{
|
||||
type: 'group',
|
||||
content: '',
|
||||
groupAlign: 'start',
|
||||
groupGap: '1rem',
|
||||
children: [
|
||||
{ type: 'output', content: '(&primary,bold)Quick Links:(&)', inline: true },
|
||||
{ type: 'link', href: '#text-formatting', content: '(&bg-blue,black)Formatting(&)', inline: true },
|
||||
{ type: 'link', href: '#buttons', content: '(&bg-green,black)Buttons(&)', inline: true },
|
||||
{ type: 'link', href: '#terminal-api', content: '(&bg-orange,black)API(&)', inline: true }
|
||||
]
|
||||
},
|
||||
{ type: 'blank', content: '' },
|
||||
|
||||
{ type: 'info', content: '(&blue,bold)Nested Groups(&)' },
|
||||
{
|
||||
type: 'group',
|
||||
content: '',
|
||||
groupDirection: 'column',
|
||||
groupGap: '0.5rem',
|
||||
children: [
|
||||
{ type: 'header', content: '(&cyan,bold)Settings Panel(&)' },
|
||||
{
|
||||
type: 'group',
|
||||
content: '',
|
||||
groupDirection: 'row',
|
||||
groupGap: '1rem',
|
||||
children: [
|
||||
{ type: 'output', content: '(&muted)Theme:(&)', inline: true },
|
||||
{ type: 'button', content: 'Dark', icon: 'mdi:weather-night', style: 'primary', inline: true, action: () => {} },
|
||||
{ type: 'button', content: 'Light', icon: 'mdi:weather-sunny', style: 'accent', inline: true, action: () => {} }
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'group',
|
||||
content: '',
|
||||
groupDirection: 'row',
|
||||
groupGap: '1rem',
|
||||
children: [
|
||||
{ type: 'output', content: '(&muted)Speed:(&)', inline: true },
|
||||
{ type: 'button', content: 'Slow', style: 'secondary', inline: true, action: () => {} },
|
||||
{ type: 'button', content: 'Normal', style: 'primary', inline: true, action: () => {} },
|
||||
{ type: 'button', content: 'Fast', style: 'accent', inline: true, action: () => {} }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{ type: 'blank', content: '' },
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// IMAGES
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
@@ -510,6 +597,9 @@ export const lines: TerminalLine[] = [
|
||||
{ type: 'output', content: "(&muted)// Checkbox(&)" },
|
||||
{ type: 'output', content: "{ type: 'checkbox', content: 'Enable option', style: 'accent' }" },
|
||||
{ type: 'blank', content: '' },
|
||||
{ type: 'output', content: "(&muted)// Group with children(&)" },
|
||||
{ type: 'output', content: "{ type: 'group', groupDirection: 'row', groupGap: '1rem', children: [...] }" },
|
||||
{ type: 'blank', content: '' },
|
||||
{ type: 'output', content: "(&muted)// Select dropdown(&)" },
|
||||
{ type: 'output', content: "{ type: 'select', content: 'Choose:', selectOptions: [{ value: 'a', label: 'Option A' }] }" },
|
||||
{ type: 'blank', content: '' },
|
||||
|
||||
Reference in New Issue
Block a user