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

TUI Renderer Update

Browse Source
This commit is contained in:
Sir Blob
2025-11-29 21:42:41 +00:00
parent 9c7d9c5406
commit 0bb3de2b35
7 changed files with 334 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/lib/pages/components.ts
View File

@@ -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: '' },