52 lines
1.5 KiB
Svelte
52 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import Icon from '@iconify/svelte';
|
|
import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
|
|
import type { TerminalLine } from './types';
|
|
import '$lib/assets/css/tui-button.css';
|
|
|
|
export let line: TerminalLine;
|
|
export let index: number;
|
|
export let selected: boolean;
|
|
export let onClick: (idx: number) => void;
|
|
export let onHover: (idx: number) => void;
|
|
export let inline: boolean = false;
|
|
|
|
// Determine if this is an external link
|
|
$: isExternal = line.external || (line.href && (line.href.startsWith('http://') || line.href.startsWith('https://')));
|
|
|
|
// Parse color formatting in content
|
|
$: segments = parseColorText(line.content);
|
|
</script>
|
|
|
|
<button
|
|
class="tui-button"
|
|
class:selected={selected}
|
|
class:inline={inline}
|
|
style="--btn-color: {getButtonStyle(line.style)}"
|
|
on:click={() => onClick(index)}
|
|
on:mouseenter={() => onHover(index)}
|
|
>
|
|
<span class="btn-indicator">{selected ? '▶' : ' '}</span>
|
|
{#if line.icon}
|
|
<Icon icon={line.icon} width="16" />
|
|
{/if}
|
|
<span class="btn-text">
|
|
{#each segments 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 line.href}
|
|
{#if isExternal}
|
|
<Icon icon="mdi:open-in-new" width="14" class="btn-arrow" />
|
|
{:else}
|
|
<Icon icon="mdi:chevron-right" width="16" class="btn-arrow" />
|
|
{/if}
|
|
{/if}
|
|
</button>
|