组件 Props / Events(自动生成)
此文件由
scripts/generate-component-api-docs.ts自动生成,请勿手改。
目录
- TAgentTerminalGraphic
- TAgentTranscript
- TAnchor
- TAutocompleteInput
- TBadge
- TBox
- TBreadcrumb
- TCandlestickChart
- TCheckbox
- TCode
- TCommandPalette
- TContextMenu
- TContributionGraph
- TDataTable
- TDebugOverlay
- TDialog
- TDivider
- TerminalProvider
- TFlex
- TFlexItem
- TFlow
- TForm
- TFormField
- TInput
- TInputBox
- TJsonEditor
- TKeyHint
- TLineChart
- TLink
- TLinkifyText
- TList
- TLogLinksPanel
- TLogMinimap
- TLogScrollbar
- TLogSearchBar
- TLogSearchPager
- TLogSearchResults
- TLogView
- TLogVirtualLinksPanel
- TLogVirtualSearchResults
- TMarkdownText
- TMermaid
- TMermaidText
- TMultilineModal
- TPasswordInput
- TPathPicker
- TPieChart
- TPopover
- TProgress
- TRadioGroup
- TRenderLayer
- TRenderPlane
- TRouterView
- TSelect
- TSlider
- TSpinner
- TSplitPane
- TStatusBar
- TSwitch
- TTable
- TTabs
- TTag
- TText
- TThinkingView
- TToastViewport
- TToolCallView
- TToolLogView
- TTooltip
- TTranscriptView
- TTransition
- TTree
- TUserMessageView
- TView
- TVirtualList
- TVirtualMarkdown
TAgentTerminalGraphic
源码:src/vue/components/TAgentTerminalGraphic.ts
API maturity: Experimental
Import: @simon_he/vue-tui/agent
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | undefined | 否 | — |
zIndex | number | 0 | 否 | — |
content | string | — | 是 | — |
kind | TAgentTerminalGraphicKind | "image" | 否 | — |
fallback | string | undefined | 否 | — |
style | Style | undefined | 否 | — |
loadingStyle | Style | undefined | 否 | — |
errorStyle | Style | undefined | 否 | — |
clear | boolean | true | 否 | — |
final | boolean | true | 否 | — |
streaming | boolean | false | 否 | — |
renderer | TAgentTerminalGraphicRenderer | undefined | 否 | — |
loadingText | string | "Rendering terminal graphic..." | 否 | — |
deferRenderUntilVisible | boolean | true | 否 | — |
suspendRawWhileScrolling | boolean | true | 否 | — |
suspendRenderWhileScrolling | boolean | true | 否 | — |
scrolling | boolean | false | 否 | — |
suspended | boolean | false | 否 | — |
cacheKey | string | undefined | 否 | — |
trace | (event: TAgentTerminalGraphicTraceEvent) => void | undefined | 否 | — |
Events
—
TAgentTranscript
源码:src/vue/components/TTranscriptView.ts
API maturity: Experimental
Import: @simon_he/vue-tui/agent
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | — | 是 | — |
zIndex | number | 0 | 否 | — |
source | TTranscriptDataSource | — | 是 | — |
version | number | — | 是 | — |
scrollTop | number | undefined | 否 | — |
defaultScrollTop | number | 0 | 否 | — |
autoStickToBottom | boolean | false | 否 | — |
selectable | boolean | true | 否 | — |
wrap | boolean | false | 否 | — |
style | Style | undefined | 否 | — |
hoverStyle | Style | undefined | 否 | — |
focusStyle | Style | undefined | 否 | — |
autoFocus | boolean | false | 否 | — |
focusable | boolean | true | 否 | — |
wheelScroll | boolean | true | 否 | — |
keyboardRegions | boolean | true | 否 | — |
rowScrollMode | RowScrollMode | "unsafe-full-row" | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
scroll | — | — |
update:scrollTop | — | — |
rowClick | — | — |
actionClick | — | — |
linkClick | — | — |
foldToggle | — | — |
toolClick | — | — |
hoverRegion | — | — |
TAnchor
源码:src/vue/components/TAnchor.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
left | number | undefined | 否 | — |
top | number | undefined | 否 | — |
right | number | undefined | 否 | — |
bottom | number | undefined | 否 | — |
w | number | undefined | 否 | — |
h | number | undefined | 否 | — |
zIndex | number | 0 | 否 | — |
focusable | boolean | false | 否 | — |
selectable | boolean | undefined | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
clickCapture | — | — |
click | — | — |
dblclickCapture | — | — |
dblclick | — | — |
pointerdownCapture | — | — |
pointerdown | — | — |
pointerupCapture | — | — |
pointerup | — | — |
pointermoveCapture | — | — |
pointermove | — | — |
wheelCapture | — | — |
wheel | — | — |
keydownCapture | — | — |
keydown | — | — |
keyupCapture | — | — |
keyup | — | — |
focusCapture | — | — |
focus | — | — |
blurCapture | — | — |
blur | — | — |
TAutocompleteInput
源码:src/vue/components/TForm.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | — | 是 | Width in terminal cells. |
h | number | 5 | 否 | Height in terminal cells. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
modelValue | string | — | 是 | Controlled component value. |
suggestions | readonly TAutocompleteOption[] | () => [] | 否 | Autocomplete suggestions. |
suggestionProvider | TAutocompleteSuggestionProvider | undefined | 否 | Async suggestion provider called with the current input value. |
open | boolean | undefined | 否 | Controlled suggestion popup visibility. |
highlightedIndex | number | 0 | 否 | Controlled highlighted suggestion index. |
placeholder | string | "" | 否 | Placeholder text shown when the input is empty. |
debounce | number | 0 | 否 | Delay before calling an async provider, in milliseconds. |
minChars | number | 0 | 否 | Minimum input length before suggestions are shown or loaded. |
filterLocal | boolean | false | 否 | Filters provided suggestions against the input value. |
closeOnSelect | boolean | true | 否 | Closes suggestions after a suggestion is selected. |
loadingText | string | "Loading..." | 否 | Text rendered while async loading is pending. |
emptyText | string | "" | 否 | Text rendered when there are no rows or items. |
errorText | string | "Unable to load suggestions" | 否 | Text rendered when async loading fails. |
style | Style | undefined | 否 | Base terminal cell style override. |
suggestionStyle | Style | undefined | 否 | Style override for suggestion rows. |
activeSuggestionStyle | Style | () => ({ inverse: true }) | 否 | Style override for the active suggestion row. |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:modelValue | string | Emitted when the controlled model value changes. |
update:open | boolean | Emitted when popup visibility changes. |
update:highlightedIndex | number | Emitted when the active autocomplete suggestion changes. |
input | string | Emitted for input edits. |
change | string | Emitted when the component commits a value change. |
select | TAutocompleteSelectPayload | Emitted when the active item is selected. |
loadError | TAutocompleteLoadErrorPayload | Emitted when the async suggestion provider rejects; aborted stale requests do not emit. |
TBadge
源码:src/vue/components/TFeedback.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | undefined | 否 | Width in terminal cells. |
value | string | number | — | 是 | Text or scalar value rendered by the badge. |
tone | TFeedbackTone | "default" | 否 | Semantic color tone. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
style | Style | undefined | 否 | Base terminal cell style override. |
Events
—
TBox
源码:src/vue/components/TBox.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | — | 是 | Width in terminal cells. |
h | number | — | 是 | Height in terminal cells. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
border | boolean | true | 否 | Draws a border around the component. |
title | string | "" | 否 | Optional title text. |
padding | number | 0 | 否 | Inner padding in terminal cells. |
scrollX | number | 0 | 否 | Horizontal content offset in terminal cells. |
scrollY | number | 0 | 否 | Vertical content offset in terminal cells. |
style | Style | undefined | 否 | Base terminal cell style override. |
titleStyle | Style | undefined | 否 | Style override for title text. |
clear | boolean | true | 否 | Clears the component rectangle before drawing content. |
Events
| 名称 | Payload | 说明 |
|---|---|---|
pointerenterCapture | TerminalPointerEvent | Emitted when the pointer enters the component. Runs during capture. |
pointerenter | TerminalPointerEvent | Emitted when the pointer enters the component. |
pointerleaveCapture | TerminalPointerEvent | Emitted when the pointer leaves the component. Runs during capture. |
pointerleave | TerminalPointerEvent | Emitted when the pointer leaves the component. |
Slots
| 名称 | Props | 说明 |
|---|---|---|
default | — | Content rendered inside the box content area with origin, clipping, and scroll offsets applied. |
TBreadcrumb
源码:src/vue/components/TNavigation.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
zIndex | number | 0 | 否 | — |
items | readonly TBreadcrumbItem[] | — | 是 | — |
separator | string | "/" | 否 | — |
style | Style | undefined | 否 | — |
activeStyle | Style | () => ({ bold: true }) | 否 | — |
disabledStyle | Style | () => ({ dim: true }) | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
select | TBreadcrumbSelectPayload | — |
TCandlestickChart
源码:src/vue/components/TCharts.ts
API maturity: Experimental
Import: @simon_he/vue-tui/experimental
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | — | 是 | Width in terminal cells. |
h | number | — | 是 | Height in terminal cells. |
zIndex | number | 0 | 否 | — |
candles | readonly TCandlestickDatum[] | — | 是 | Candles rendered from left to right; the most recent candles are kept when width is smaller. |
labels | readonly string[] | undefined | 否 | Labels aligned with candles and shown in hover tooltips. |
min | number | undefined | 否 | Lower price bound. Defaults to the smallest candle low. |
max | number | undefined | 否 | Upper price bound. Defaults to the largest candle high. |
style | Style | undefined | 否 | — |
upStyle | Style | () => ({ fg: "greenBright" }) | 否 | Style used when close is greater than or equal to open. |
downStyle | Style | () => ({ fg: "redBright" }) | 否 | Style used when close is less than open. |
wickStyle | Style | undefined | 否 | Optional style override for wick cells. |
showAxes | boolean | true | 否 | Whether to render axes and price labels when there is enough space. |
axisStyle | Style | () => ({ fg: "white", dim: true }) | 否 | Style used for axis lines. |
labelStyle | Style | () => ({ fg: "whiteBright" }) | 否 | Style used for axis labels. |
xLabel | string | "" | 否 | Label centered under the x axis. |
yLabel | string | "" | 否 | Label rendered at the top of the plot area. |
startLabel | string | "" | 否 | Left endpoint label for the x axis when xLabel is empty. |
endLabel | string | "" | 否 | Right endpoint label for the x axis when xLabel is empty. |
showTooltip | boolean | true | 否 | Whether pointer hover shows candle values. |
hoverStyle | Style | () => ({}) | 否 | Style merged onto the currently hovered candle. |
tooltipStyle | Style | () => ({ fg: "whiteBright" }) | 否 | Style used for hover tooltip text. |
Events
—
TCheckbox
源码:src/vue/components/TForm.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | — | 是 | Width in terminal cells. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
modelValue | boolean | false | 否 | Controlled component value. |
label | string | "" | 否 | Visible label text. |
disabled | boolean | false | 否 | Disables pointer and keyboard activation. |
style | Style | undefined | 否 | Base terminal cell style override. |
checkedStyle | Style | undefined | 否 | Style used when the checkbox is checked. |
disabledStyle | Style | () => ({ dim: true }) | 否 | Style used for disabled content. |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:modelValue | boolean | Emitted when the controlled model value changes. |
change | boolean | Emitted when the component commits a value change. |
TCode
源码:src/vue/components/TFeedback.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | undefined | 否 | Width in terminal cells. |
value | string | — | 是 | Code text rendered inside the code block. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
style | Style | () => ({ fg: "yellowBright" }) | 否 | Base terminal cell style override. |
Events
—
TCommandPalette
源码:src/vue/components/TCommandPalette.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
modelValue | boolean | — | 是 | Controlled component value. |
title | string | "" | 否 | Optional title text. |
query | string | undefined | 否 | Search query used by filtering or async providers. |
initialQuery | string | "" | 否 | Query used when the command palette opens. |
items | readonly TCommandPaletteItem[] | () => [] | 否 | Command items rendered and filtered by the palette. |
itemsProvider | TCommandPaletteItemsProvider | undefined | 否 | Async command provider called with the current query. |
matcher | TCommandPaletteMatcher | undefined | 否 | Custom command matcher. |
filterStrategy | "substring" | "fuzzy" | "substring" | 否 | Built-in command matching strategy. |
selectedIndex | number | undefined | 否 | Controlled active item index. |
showRowDetails | boolean | false | 否 | Shows command detail text next to labels. |
placeholder | string | "" | 否 | Placeholder text shown when the input is empty. |
noMatchesText | string | "No matches" | 否 | Text rendered when filtering returns no commands. |
loadingText | string | "Loading..." | 否 | Text rendered while async loading is pending. |
errorText | string | "Unable to load commands" | 否 | Text rendered when async loading fails. |
hint | string | "" | 否 | Footer hint text. |
debounce | number | 0 | 否 | Delay before calling an async provider, in milliseconds. |
minQueryLength | number | 0 | 否 | Minimum query length before async loading runs. |
maxVisibleItems | number | undefined | 否 | Maximum number of command rows rendered at once. |
closeOnSelect | boolean | false | 否 | Closes the command palette after a command is selected. |
resetQueryOnClose | boolean | false | 否 | Resets the query when the palette closes. |
w | number | 72 | 否 | Width in terminal cells. |
h | number | 18 | 否 | Height in terminal cells. |
chromeStyle | Style | undefined | 否 | Style override for command palette chrome. |
inputStyle | Style | undefined | 否 | Style override for the embedded input. |
listStyle | Style | undefined | 否 | Style override for list rows. |
bodyStyle | Style | undefined | 否 | Style override for dialog body cells. |
highlightStyle | Style | undefined | 否 | Style used for the highlighted row or match. |
matchStyle | Style | undefined | 否 | Style used for matched text. |
highlightMatchStyle | Style | undefined | 否 | Style used for highlighted text while the row is active. |
dividerStyle | Style | undefined | 否 | Style override for dividers. |
hintStyle | Style | undefined | 否 | Style override for hint text. |
detailStyle | Style | undefined | 否 | Style override for detail text. |
emptyStyle | Style | undefined | 否 | Style used when rendering an empty state. |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:modelValue | boolean | Emitted when the controlled model value changes. |
update:query | string | Emitted when the controlled query changes. |
update:selectedIndex | number | Emitted when the controlled active index changes. |
select | TCommandPaletteSelectPayload | Emitted when the active item is selected. |
loadError | TCommandPaletteLoadErrorPayload | Emitted when the async command provider rejects; aborted stale requests do not emit. |
close | void | Emitted when the component requests to close. |
TContextMenu
源码:src/vue/components/TOverlay.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
modelValue | boolean | — | 是 | — |
x | number | — | 是 | Caller-owned x position; no viewport clamp or flip placement is applied. |
y | number | — | 是 | Caller-owned y position; no viewport clamp or flip placement is applied. |
w | number | 24 | 否 | — |
zIndex | number | 20 | 否 | — |
items | readonly TContextMenuItem[] | — | 是 | — |
selectedIndex | number | undefined | 否 | — |
closeOnOutside | boolean | true | 否 | — |
style | Style | undefined | 否 | — |
activeStyle | Style | () => ({ inverse: true }) | 否 | — |
disabledStyle | Style | () => ({ dim: true }) | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:modelValue | boolean | — |
update:selectedIndex | number | — |
select | TContextMenuSelectPayload | — |
close | — | — |
TContributionGraph
源码:src/vue/components/TCharts.ts
API maturity: Experimental
Import: @simon_he/vue-tui/experimental
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | undefined | 否 | Width in terminal cells. Defaults to the rendered graph width. |
h | number | undefined | 否 | Height in terminal cells. Defaults to the row count plus a tooltip row when tooltips are enabled. |
zIndex | number | 0 | 否 | — |
values | readonly number[] | — | 是 | Numeric samples rendered column-major from top to bottom. |
rows | number | 7 | 否 | Number of rows in each heatmap column. |
columns | number | undefined | 否 | Number of columns to render. Defaults to enough columns for the values. |
max | number | undefined | 否 | Maximum sample value used for level mapping. Defaults to the largest positive value. |
labels | readonly string[] | undefined | 否 | Labels aligned with values and shown in hover tooltips. |
unit | string | "" | 否 | Unit appended to hover tooltip values. |
showTooltip | boolean | true | 否 | Whether pointer hover shows a value tooltip. |
emptyStyle | Style | () => ({ fg: "blackBright", dim: true }) | 否 | Empty cells and surrounding clear area style. |
levelStyles | readonly Style[] | () => DEFAULT_HEATMAP_LEVEL_STYLES | 否 | Positive value styles ordered from low to high intensity. |
cell | string | "■" | 否 | Glyph used for each heatmap cell. |
gap | number | 1 | 否 | Horizontal gap between columns in terminal cells. |
hoverStyle | Style | () => ({}) | 否 | Style merged onto the currently hovered heatmap cell. |
tooltipStyle | Style | () => ({ fg: "whiteBright" }) | 否 | Style used for hover tooltip text. |
style | Style | undefined | 否 | — |
Events
—
TDataTable
源码:src/vue/components/TDataTable.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | — | 是 | Width in terminal cells. |
h | number | — | 是 | Height in terminal cells. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
columns | readonly TTableColumn[] | — | 是 | Table column definitions. |
rows | readonly TTableRow[] | — | 是 | TDataTable can accept a controlled viewport offset through scrollTop. It is still non-virtual: rows are sorted/filtered in memory and only the visible slice is passed to TTable. |
rowKey | string | ((row: TTableRow, index: number) => unknown) | undefined | 否 | Row key field or resolver. |
selectedRowKey | unknown | undefined | 否 | Controlled selected row key. |
selectedRowKeys | readonly unknown[] | undefined | 否 | Controlled selected row keys for multi-select tables. |
scrollTop | number | undefined | 否 | Controlled top row offset. |
sortBy | string | "" | 否 | Sorts by the raw row value at this key; column format only affects display and filtering. |
sortDirection | TDataTableSortDirection | "asc" | 否 | Controlled sort direction. |
sortable | boolean | false | 否 | Enables sortable column header interactions. |
manualSort | boolean | false | 否 | Disables built-in sorting while keeping sort events controlled by the host. |
sorter | TDataTableSorter | undefined | 否 | Custom row comparison function. |
filter | string | "" | 否 | Controlled filter query. |
filterable | boolean | false | 否 | Enables built-in row filtering. |
manualFilter | boolean | false | 否 | Disables built-in filtering while keeping filter state host-owned. |
filterPredicate | TDataTableFilterPredicate | undefined | 否 | Custom row filter predicate. |
selectable | boolean | false | 否 | Enables row selection. |
selectionMode | TDataTableSelectionMode | "single" | 否 | Row selection mode. |
border | boolean | false | 否 | Draws a border around the component. |
style | Style | undefined | 否 | Base terminal cell style override. |
headerStyle | Style | undefined | 否 | Style override for table header cells. |
borderStyle | Style | undefined | 否 | Style override for border cells. |
selectedStyle | Style | undefined | 否 | Style used for selected rows or nodes. |
activeStyle | Style | undefined | 否 | Style used for the active item or row. |
emptyText | string | "No rows" | 否 | Text rendered when there are no rows or items. |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:selectedRowKey | unknown | Emitted when the selected row key changes. |
update:selectedRowKeys | unknown[] | Emitted when selected row keys change. |
update:scrollTop | number | Emitted when the top visible row offset should change. |
update:sortBy | string | Emitted when the sorted column key changes. |
update:sortDirection | TDataTableSortDirection | Emitted when the sort direction changes. |
sortChange | TDataTableSortChangePayload | Emitted when table sort state changes. |
rowSelect | TDataTableRowSelectPayload | Emitted when a data table row is selected; index is viewport-local, dataIndex is filtered/sorted, and originalIndex is the input row index. |
TDebugOverlay
源码:src/vue/components/TDebugOverlay.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
mode | "focus" | "all" | "focus" | 否 | — |
panel | boolean | true | 否 | — |
maxRects | number | 40 | 否 | — |
zIndex | number | 90 | 否 | — |
Events
—
TDialog
源码:src/vue/components/TDialog.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
modelValue | boolean | — | 是 | Controlled component value. |
w | number | — | 是 | Width in terminal cells. |
h | number | — | 是 | Height in terminal cells. |
title | string | "" | 否 | Optional title text. |
padding | number | 1 | 否 | Inner padding in terminal cells. |
zIndex | number | 1000 | 否 | Render and event ordering within the current plane. |
style | Style | undefined | 否 | Base terminal cell style override. |
titleStyle | Style | undefined | 否 | Style override for title text. |
contentStyle | Style | undefined | 否 | Style override for dialog or popover content cells. |
backdropStyle | Style | undefined | 否 | Style override for backdrop cells. |
placement | Placement | "center" | 否 | Dialog placement within the current layout. |
offsetX | number | 0 | 否 | Horizontal placement offset in cells. |
offsetY | number | 0 | 否 | Vertical placement offset in cells. |
backdrop | boolean | true | 否 | Renders a backdrop behind the dialog. |
closeOnBackdrop | boolean | true | 否 | Closes the dialog when the backdrop is clicked. |
closeOnEsc | boolean | true | 否 | Closes the dialog on Escape. |
closeOnBlur | boolean | false | 否 | Emits close when focus leaves the component. |
teleport | boolean | false | 否 | Mounts the dialog into the overlay runtime plane. |
tabMode | "cycle" | "wrapFromButtons" | "cycle" | 否 | Keyboard Tab behavior inside the dialog. |
buttons | DialogButton[] | () => [] | 否 | Dialog footer buttons. |
closeOnConfirm | boolean | true | 否 | Closes the dialog after a footer button confirms. |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:modelValue | boolean | Emitted when the controlled model value changes. |
close | void | Emitted when the component requests to close. |
focus | void | Emitted when the component receives focus. |
blur | void | Emitted when the component loses focus. |
keydown | TerminalKeyboardEvent | Emitted for keydown events. |
confirm | DialogButton & { index: number } | Emitted when a focused action is confirmed. |
Slots
| 名称 | Props | 说明 |
|---|---|---|
default | — | Dialog body content rendered inside the content rect before optional footer buttons. |
TDivider
源码:src/vue/components/TFeedback.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | — | 是 | Width in terminal cells. |
title | string | "" | 否 | Optional title text. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
style | Style | undefined | 否 | Base terminal cell style override. |
Events
—
TerminalProvider
源码:src/vue/components/TerminalProvider.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
cols | number | — | 是 | Terminal column count. |
rows | number | — | 是 | Terminal row count. |
widthProvider | WidthProvider | "default" | 否 | Cell width provider used by the terminal buffer. |
defaultStyle | Style | () => ({}) | 否 | Default terminal cell style for descendants. |
theme | TuiThemeOverrides | undefined | 否 | Theme token overrides for component defaults. |
autoResize | boolean | false | 否 | Resizes the terminal from the host element when enabled. |
minCols | number | 1 | 否 | Minimum column count used by auto resize. |
minRows | number | 1 | 否 | Minimum row count used by auto resize. |
recordEvents | ((e: TerminalEventRecord) => void) | undefined | undefined | 否 | Optional event recorder callback. |
inputPlugins | readonly TInputPlugin[] | () => [defaultTInputHostPlugin] | 否 | Input plugins provided to descendant text inputs. |
pathPickerProvider | PathPickerProvider | undefined | 否 | Path provider injected into descendant path pickers. |
linkOpener | TerminalLinkOpenerLike | undefined | 否 | Host link opener used by components with host-owned activation. |
debugIme | boolean | false | 否 | Enables IME debugging output. |
debugTrace | boolean | false | 否 | Enables runtime trace logging. |
domRendererOptions | DomRendererOptions | undefined | 否 | DOM renderer options used by TerminalProvider. |
clipboard | ClipboardApi | undefined | 否 | Clipboard implementation used for terminal selection copy. |
selection | TerminalProviderSelectionConfig | false | 否 | Terminal cell selection configuration. |
Events
| 名称 | Payload | 说明 |
|---|---|---|
selectionCopy | TerminalSelectionCopyPayload | Emitted after terminal selection copy. |
Slots
| 名称 | Props | 说明 |
|---|---|---|
default | — | Terminal component tree rendered inside the provider runtime context. |
TFlex
源码:src/vue/components/TFlex.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | — | 是 | — |
direction | TFlexDirection | "row" | 否 | — |
gap | number | 0 | 否 | — |
rowGap | number | undefined | 否 | — |
columnGap | number | undefined | 否 | — |
padding | number | 0 | 否 | — |
paddingX | number | undefined | 否 | — |
paddingY | number | undefined | 否 | — |
paddingTop | number | undefined | 否 | — |
paddingRight | number | undefined | 否 | — |
paddingBottom | number | undefined | 否 | — |
paddingLeft | number | undefined | 否 | — |
wrap | boolean | false | 否 | — |
alignItems | TFlexAlign | "stretch" | 否 | — |
justifyContent | TFlexJustify | "start" | 否 | — |
alignContent | TFlexAlignContent | "start" | 否 | — |
zIndex | number | 0 | 否 | — |
Events
—
Slots
| 名称 | Props | 说明 |
|---|---|---|
default | — | Flex item subtree measured and positioned inside the flex container. |
TFlexItem
源码:src/vue/components/TFlex.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
grow | number | 0 | 否 | — |
shrink | number | 1 | 否 | — |
basis | TFlexSize | undefined | 否 | — |
w | TFlexSize | undefined | 否 | — |
width | TFlexSize | undefined | 否 | — |
h | TFlexSize | undefined | 否 | — |
height | TFlexSize | undefined | 否 | — |
minWidth | TFlexSize | undefined | 否 | — |
minHeight | TFlexSize | undefined | 否 | — |
maxWidth | TFlexSize | undefined | 否 | — |
maxHeight | TFlexSize | undefined | 否 | — |
measure | TFlexMeasure | undefined | 否 | — |
order | number | 0 | 否 | — |
zIndex | number | 0 | 否 | — |
margin | number | 0 | 否 | — |
marginX | number | undefined | 否 | — |
marginY | number | undefined | 否 | — |
marginTop | number | undefined | 否 | — |
marginRight | number | undefined | 否 | — |
marginBottom | number | undefined | 否 | — |
marginLeft | number | undefined | 否 | — |
alignSelf | TFlexAlign | undefined | 否 | — |
Events
—
Slots
| 名称 | Props | 说明 |
|---|---|---|
default | { rect: Rect } | Item content rendered inside the computed child rect. |
TFlow
源码:src/vue/components/TFlow.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | — | 是 | — |
items | unknown[] | — | 是 | — |
direction | Direction | "vertical" | 否 | — |
gap | number | 0 | 否 | — |
itemSize | number | 1 | 否 | — |
zIndex | number | 0 | 否 | — |
Events
—
TForm
源码:src/vue/components/TForm.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | — | 是 | — |
zIndex | number | 0 | 否 | — |
model | TFormModel | — | 是 | — |
rules | Record<string, TFormRule> | () => ({}) | 否 | — |
disabled | boolean | false | 否 | — |
readOnly | boolean | false | 否 | Provides a read-only hint to custom form field consumers; built-in controls do not automatically consume it. |
submitOnEnter | boolean | false | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
submit | TFormSubmitPayload | — |
validation | Record<string, string> | — |
Slots
| 名称 | Props | 说明 |
|---|---|---|
default | — | Form field subtree rendered with TForm context provided to descendants. |
TFormField
源码:src/vue/components/TForm.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | — | 是 | Width in terminal cells. |
h | number | — | 是 | Height in terminal cells. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
name | string | "" | 否 | Field name used by form context. |
label | string | "" | 否 | Visible label text. |
help | string | "" | 否 | Help text rendered below the field. |
error | string | "" | 否 | Error text rendered below the field. |
required | boolean | false | 否 | Marks the field label as required. |
disabled | boolean | false | 否 | Disables pointer and keyboard activation. |
style | Style | undefined | 否 | Base terminal cell style override. |
labelStyle | Style | undefined | 否 | Style override for label text. |
helpStyle | Style | undefined | 否 | Style override for help text. |
errorStyle | Style | undefined | 否 | Style override for error text. |
Events
—
Slots
| 名称 | Props | 说明 |
|---|---|---|
default | — | Field control content rendered between the label and help/error row. |
TInput
源码:src/vue/components/TInput.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | — | 是 | Width in terminal cells. |
h | number | 1 | 否 | Height in terminal cells. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
modelValue | string | — | 是 | Controlled component value. |
cursorToEndOnExternalUpdate | boolean | false | 否 | Moves the cursor to the end after external model updates. |
cursorToEndOnFirstFocus | boolean | false | 否 | Moves the cursor to the end on first focus. |
placeholder | string | "" | 否 | Placeholder text shown when the input is empty. |
placeholderWhenFocused | boolean | false | 否 | Placeholder text used while the input has focus. |
style | Style | undefined | 否 | Base terminal cell style override. |
autoFocus | boolean | false | 否 | Requests focus when the component becomes visible. |
cursorBlink | boolean | true | 否 | Enables cursor blink rendering. |
cursorShape | "block" | "underline" | "bar" | "block" | 否 | Cursor glyph shape. |
blinkInterval | number | 500 | 否 | Cursor blink interval in milliseconds. |
promptSuggestions | readonly PromptSuggestion[] | () => [] | 否 | Prompt popup suggestions. |
promptTrigger | string | "/" | 否 | Prompt popup trigger character. |
promptTriggers | readonly string[] | undefined | 否 | Prompt popup trigger characters. |
promptMaxItems | number | 6 | 否 | Maximum prompt popup rows. |
promptAlign | "input" | "center" | "input" | 否 | Prompt popup alignment. |
promptSelectedStyle | Style | undefined | 否 | Style override for the active prompt suggestion. |
promptPopupStyle | Style | undefined | 否 | Style override for the prompt popup body. |
promptPopupBorderStyle | Style | undefined | 否 | Style override for the prompt popup border. |
promptPopupMatchStyle | Style | undefined | 否 | Style override for prompt match highlights. |
skillTrigger | string | "" | 否 | Trigger used for skill suggestions. |
skillSuggestions | readonly PromptSuggestion[] | undefined | 否 | Skill suggestions shown in the prompt popup. |
skillHighlightStyle | Style | undefined | 否 | Style override for highlighted skill chips. |
mentionTrigger | string | "@" | 否 | Trigger used for path or mention suggestions. |
mentionWorkspace | string | "" | 否 | Workspace root used by mention providers. |
mentionMode | PathPickMode | "file" | 否 | Mention provider mode. |
mentionShowHidden | boolean | false | 否 | Includes hidden paths in mention suggestions. |
mentionSuggestions | readonly PromptSuggestion[] | () => [] | 否 | Mention suggestions supplied by the host. |
mentionMaxItems | number | 8 | 否 | Maximum mention rows. |
mentionChipStyle | Style | undefined | 否 | Style override for mention chips. |
multilineChipStyle | Style | undefined | 否 | Style override for multiline chips. |
dedupeMentions | boolean | true | 否 | Removes duplicate mention entries. |
collectMentions | boolean | false | 否 | Collects mention values from committed input. |
mentions | readonly string[] | () => [] | 否 | Controlled collected mention values. |
collapseMultiline | boolean | false | 否 | Collapses multiline pasted text into chips. |
multilineTexts | readonly string[] | () => [] | 否 | Controlled multiline chip text values. |
secret | boolean | false | 否 | Masks input text when enabled. |
maskChar | string | "•" | 否 | Character used to mask secret input. |
submitOnEnter | boolean | true | 否 | Emits change on Enter. |
plugins | readonly TInputPlugin[] | () => [] | 否 | Input plugins attached to this input. |
pasteImageHandler | () => Promise<string | null> | string | null | undefined | 否 | Host handler for pasted images. |
filePasteHandler | (absPath: string) => Promise<string | null> | string | null | undefined | 否 | Host handler for pasted files. |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:modelValue | string | Emitted when the controlled model value changes. |
input | string | Emitted for input edits. |
change | string | Emitted when the component commits a value change. |
keydown | TerminalKeyboardEvent | Emitted for keydown events. |
focus | void | Emitted when the component receives focus. |
blur | void | Emitted when the component loses focus. |
pointerenter | TerminalPointerEvent | Emitted when the pointer enters the component. |
pointerleave | TerminalPointerEvent | Emitted when the pointer leaves the component. |
update:mentions | readonly string[] | Emitted when collected mentions change. |
mentionClick | (absPath: string, event: TerminalPointerEvent) | Emitted when a rendered mention chip is clicked. |
update:multilineTexts | readonly string[] | Emitted when multiline chip text values change. |
multilineClick | number | Emitted when a multiline chip is clicked. |
validationError | { reason: string } | Emitted when input validation rejects a host action. |
TInputBox
源码:src/vue/components/TInputBox.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | — | 是 | — |
zIndex | number | 0 | 否 | — |
title | string | "" | 否 | — |
padding | number | 0 | 否 | — |
modelValue | string | — | 是 | — |
placeholder | string | "" | 否 | — |
style | Style | undefined | 否 | — |
autoFocus | boolean | false | 否 | — |
plugins | readonly TInputPlugin[] | () => [] | 否 | — |
cursorBlink | boolean | true | 否 | — |
cursorShape | "block" | "underline" | "bar" | "block" | 否 | — |
blinkInterval | number | 500 | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:modelValue | — | — |
input | — | — |
change | — | — |
keydown | — | — |
focus | — | — |
blur | — | — |
TJsonEditor
源码:src/vue/components/TJsonEditor.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | 8 | 否 | — |
zIndex | number | 0 | 否 | — |
modelValue | string | — | 是 | — |
placeholder | string | "" | 否 | — |
style | Style | undefined | 否 | — |
showIndentGuides | boolean | true | 否 | — |
indentSize | number | 2 | 否 | — |
guideColors | readonly AnsiColorName[] | () => [...DEFAULT_GUIDE_COLORS] | 否 | — |
autoFocus | boolean | false | 否 | — |
cursorToEndOnFirstFocus | boolean | true | 否 | — |
cursorToEndOnExternalUpdate | boolean | true | 否 | — |
submitOnEnter | boolean | false | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:modelValue | — | — |
keydown | — | — |
focus | — | — |
blur | — | — |
undo | — | — |
redo | — | — |
lintChange | — | — |
validationError | — | — |
TKeyHint
源码:src/vue/components/TNavigation.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | undefined | 否 | — |
zIndex | number | 0 | 否 | — |
combo | string | — | 是 | — |
label | string | — | 是 | — |
style | Style | undefined | 否 | — |
comboStyle | Style | () => ({ inverse: true }) | 否 | — |
Events
—
TLineChart
源码:src/vue/components/TCharts.ts
API maturity: Experimental
Import: @simon_he/vue-tui/experimental
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | — | 是 | Width in terminal cells. |
h | number | — | 是 | Height in terminal cells. |
zIndex | number | 0 | 否 | — |
values | readonly number[] | — | 是 | Numeric samples rendered across the chart width. |
labels | readonly string[] | undefined | 否 | Labels aligned with values and shown in hover tooltips. |
unit | string | "" | 否 | Unit appended to hover y values. |
min | number | undefined | 否 | Lower domain bound. Defaults to the smallest sample. |
max | number | undefined | 否 | Upper domain bound. Defaults to the largest sample. |
style | Style | undefined | 否 | — |
lineStyle | Style | () => ({ fg: "cyanBright" }) | 否 | Style used for line glyphs. |
showAxes | boolean | true | 否 | Whether to render axes and domain labels when there is enough space. |
axisStyle | Style | () => ({ fg: "white", dim: true }) | 否 | Style used for axis lines. |
labelStyle | Style | () => ({ fg: "whiteBright" }) | 否 | Style used for axis labels. |
xLabel | string | "" | 否 | Label centered under the x axis. |
yLabel | string | "" | 否 | Label rendered at the top of the plot area. |
startLabel | string | "" | 否 | Left endpoint label for the x axis when xLabel is empty. |
endLabel | string | "" | 否 | Right endpoint label for the x axis when xLabel is empty. |
showTooltip | boolean | true | 否 | Whether pointer hover shows point values. |
hoverStyle | Style | () => ({ fg: "whiteBright", bold: true }) | 否 | Style merged onto the currently hovered point. |
tooltipStyle | Style | () => ({ fg: "whiteBright" }) | 否 | Style used for hover tooltip text. |
Events
—
TLink
源码:src/vue/components/TLink.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | undefined | 否 | Width in terminal cells. |
h | number | 1 | 否 | Height in terminal cells. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
href | string | — | 是 | Link target to render and activate. |
label | string | undefined | 否 | Visible label text. |
style | Style | undefined | 否 | Base terminal cell style override. |
hoverStyle | Style | undefined | 否 | Style applied while the pointer hovers the link. |
focusStyle | Style | undefined | 否 | Style applied while the link has keyboard focus. |
activeStyle | Style | undefined | 否 | Style used for the active item or row. |
disabled | boolean | false | 否 | Disables pointer and keyboard activation. |
visited | boolean | false | 否 | Marks the link as already visited for styling. |
openMode | TLinkOpenMode | "host" | 否 | Link activation mode. |
activationKeys | readonly string[] | () => DEFAULT_ACTIVATION_KEYS | 否 | Keyboard keys that activate the link. |
modifierClick | TLinkModifierClick | "none" | 否 | Pointer modifier required for click activation. |
autoFocus | boolean | false | 否 | Requests focus when the component becomes visible. |
Events
| 名称 | Payload | 说明 |
|---|---|---|
activate | TLinkActivatePayload | Emitted when the link is activated. |
open | TLinkOpenPayload | Emitted when the host opener accepts a link open request. |
invalidHref | TLinkInvalidHrefPayload | Emitted when a link href is rejected by the sanitizer. |
click | TerminalPointerEvent | Emitted for click events. |
keydown | TerminalKeyboardEvent | Emitted for keydown events. |
focus | TerminalBaseEvent | Emitted when the component receives focus. |
blur | TerminalBaseEvent | Emitted when the component loses focus. |
TLinkifyText
源码:src/vue/components/TLinkifyText.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
value | string | — | 是 | Text scanned for links and rendered into terminal cells. |
w | number | undefined | 否 | Width in terminal cells. |
h | number | undefined | 否 | Height in terminal cells. |
style | Style | undefined | 否 | Base terminal cell style override. |
linkStyle | Style | undefined | 否 | Style applied to detected link segments. |
clear | boolean | true | 否 | Clears the component rectangle before drawing content. |
wrap | boolean | false | 否 | Wraps text to the available cell width. |
protocols | readonly TLinkifyProtocol[] | undefined | 否 | URL protocols accepted by linkification. |
allowRelative | boolean | false | 否 | Allows relative hrefs in detected link segments. |
maxUrlLength | number | undefined | 否 | Maximum detected URL length. |
Events
—
TList
源码:src/vue/components/TList.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | — | 是 | Width in terminal cells. |
h | number | — | 是 | Height in terminal cells. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
items | string[] | — | 是 | List rows rendered by the component. |
itemVersion | number | 0 | 否 | External version key for item changes that keep array identity stable. |
modelValue | number | 0 | 否 | Controlled component value. |
style | Style | undefined | 否 | Base terminal cell style override. |
autoFocus | boolean | false | 否 | Requests focus when the component becomes visible. |
closeOnBlur | boolean | false | 否 | Emits close when focus leaves the component. |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:modelValue | number | Emitted when the controlled model value changes. |
change | { index: number; value: string } | Emitted when the component commits a value change. |
scroll | number | Emitted when the visible scroll offset changes. |
close | void | Emitted when the component requests to close. |
focus | void | Emitted when the component receives focus. |
blur | void | Emitted when the component loses focus. |
keydown | TerminalKeyboardEvent | Emitted for keydown events. |
TLogLinksPanel
源码:src/vue/components/TLogLinksPanel.ts
API maturity: Experimental
Import: @simon_he/vue-tui/experimental
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | — | 是 | — |
zIndex | number | 0 | 否 | — |
links | readonly TLogLinkPanelItem[] | () => [] | 否 | — |
activeIndex | number | -1 | 否 | — |
style | Style | undefined | 否 | — |
activeStyle | Style | () => ({ inverse: true }) | 否 | — |
currentStyle | Style | () => ({ bold: true }) | 否 | — |
hrefStyle | Style | () => ({ underline: true }) | 否 | — |
disabledStyle | Style | () => ({ dim: true }) | 否 | — |
showLineNumbers | boolean | true | 否 | — |
showHref | boolean | true | 否 | — |
focusable | boolean | true | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
select | — | — |
activate | — | — |
activeChange | — | — |
focus | — | — |
blur | — | — |
keydown | — | — |
TLogMinimap
源码:src/vue/components/TLogMinimap.ts
API maturity: Experimental
Import: @simon_he/vue-tui/experimental
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | — | 是 | — |
zIndex | number | 0 | 否 | — |
metrics | TLogMinimapMetrics | null | null | 否 | — |
markers | readonly TLogMinimapMarker[] | () => [] | 否 | — |
density | readonly TLogMinimapDensityBucket[] | () => [] | 否 | — |
style | Style | undefined | 否 | — |
densityStyle | Style | undefined | 否 | — |
markerStyle | Style | undefined | 否 | — |
currentMarkerStyle | Style | undefined | 否 | — |
viewportStyle | Style | undefined | 否 | — |
estimatedStyle | Style | undefined | 否 | — |
showMarkers | boolean | true | 否 | — |
showDensity | boolean | true | 否 | — |
showViewport | boolean | true | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
scrollTo | — | — |
markerClick | — | — |
TLogScrollbar
源码:src/vue/components/TLogScrollbar.ts
API maturity: Experimental
Import: @simon_he/vue-tui/experimental
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
h | number | — | 是 | — |
zIndex | number | 0 | 否 | — |
metrics | TLogScrollbarMetrics | null | null | 否 | — |
style | Style | undefined | 否 | — |
thumbStyle | Style | undefined | 否 | — |
trackStyle | Style | undefined | 否 | — |
measuringStyle | Style | undefined | 否 | — |
markers | readonly TLogScrollbarMarker[] | () => [] | 否 | — |
markerStyle | Style | () => ({ fg: "yellowBright" }) | 否 | — |
currentMarkerStyle | Style | () => ({ fg: "redBright", bold: true }) | 否 | — |
showMarkers | boolean | true | 否 | — |
showArrows | boolean | false | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
scrollTo | — | — |
scrollBy | — | — |
markerClick | — | — |
TLogSearchBar
源码:src/vue/components/TLogSearchBar.ts
API maturity: Experimental
Import: @simon_he/vue-tui/experimental
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
zIndex | number | 0 | 否 | — |
state | TLogSearchBarState | — | 是 | — |
placeholder | string | "Search…" | 否 | — |
style | Style | undefined | 否 | — |
inputStyle | Style | undefined | 否 | — |
activeStyle | Style | () => ({ inverse: true }) | 否 | — |
errorStyle | Style | () => ({ fg: "redBright", bold: true }) | 否 | — |
disabledStyle | Style | () => ({ dim: true }) | 否 | — |
toggleStyle | Style | undefined | 否 | — |
focusable | boolean | true | 否 | — |
showModeToggle | boolean | true | 否 | — |
showCaseToggle | boolean | true | 否 | — |
showWholeWordToggle | boolean | true | 否 | — |
showCount | boolean | true | 否 | — |
showNavigation | boolean | true | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update | — | — |
update:query | — | — |
update:mode | — | — |
update:caseSensitive | — | — |
update:wholeWord | — | — |
previous | — | — |
next | — | — |
clear | — | — |
focus | — | — |
blur | — | — |
keydown | — | — |
TLogSearchPager
源码:src/vue/components/TLogSearchPager.ts
API maturity: Experimental
Import: @simon_he/vue-tui/experimental
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
zIndex | number | 0 | 否 | — |
state | TLogSearchPagerState | null | null | 否 | — |
style | Style | undefined | 否 | — |
activeStyle | Style | undefined | 否 | — |
disabledStyle | Style | () => ({ dim: true }) | 否 | — |
errorStyle | Style | () => ({ fg: "redBright", bold: true }) | 否 | — |
showCount | boolean | true | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
previousPage | — | — |
nextPage | — | — |
pageChange | — | — |
TLogSearchResults
源码:src/vue/components/TLogSearchResults.ts
API maturity: Experimental
Import: @simon_he/vue-tui/experimental
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | — | 是 | — |
zIndex | number | 0 | 否 | — |
results | readonly TLogSearchResultItem[] | () => [] | 否 | — |
activeIndex | number | -1 | 否 | — |
style | Style | undefined | 否 | — |
activeStyle | Style | () => ({ inverse: true }) | 否 | — |
matchStyle | Style | () => ({ underline: true }) | 否 | — |
currentStyle | Style | () => ({ bold: true }) | 否 | — |
showLineNumbers | boolean | true | 否 | — |
focusable | boolean | true | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
select | — | — |
activeChange | — | — |
keydown | — | — |
focus | — | — |
blur | — | — |
TLogView
源码:src/vue/components/TLogView.ts
API maturity: Experimental
Import: @simon_he/vue-tui/experimental
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | — | 是 | — |
zIndex | number | 0 | 否 | — |
source | TLogDataSource | — | 是 | — |
version | number | — | 是 | — |
scrollTop | number | undefined | 否 | — |
defaultScrollTop | number | undefined | 否 | — |
style | Style | undefined | 否 | — |
autoFocus | boolean | false | 否 | — |
selectable | boolean | true | 否 | — |
autoStickToBottom | boolean | true | 否 | — |
overscan | number | 2 | 否 | — |
wrap | boolean | false | 否 | — |
visualIndexMode | "estimated" | "exact" | "estimated" | 否 | — |
visualIndexOptions | TLogViewVisualIndexOptions | undefined | 否 | — |
ansi | boolean | false | 否 | — |
links | boolean | false | 否 | Parses OSC8 links only with ansi=true; OSC8 links preserve parsed ANSI style and do not inherit TLink theme defaults. |
linkify | boolean | TLinkifyOptions | false | 否 | Plain-text URL linkification for ansi=false rows; generated links inherit TLink theme defaults before linkStyle. |
linkStyle | Style | undefined | 否 | Link style override. OSC8 defaults to underline-only over parsed ANSI style; linkify also inherits TLink theme defaults. |
keyboardLinks | boolean | false | 否 | — |
linkFocusStyle | Style | () => ({ inverse: true }) | 否 | — |
searchQuery | string | "" | 否 | — |
searchOptions | TLogViewSearchOptions | undefined | 否 | — |
highlightMatches | boolean | true | 否 | — |
matchStyle | Style | () => ({ inverse: true }) | 否 | — |
currentMatchStyle | Style | () => ({ inverse: true, bold: true }) | 否 | — |
rowScrollMode | RowScrollMode | "off" | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
scroll | — | — |
update:scrollTop | — | — |
update:searchQuery | — | — |
search | — | — |
searchMatch | — | — |
searchMarkers | — | — |
linkClick | — | — |
linkFocus | — | — |
linkActivate | — | — |
visualIndex | — | — |
focus | — | — |
blur | — | — |
keydown | — | — |
TLogVirtualLinksPanel
源码:src/vue/components/TLogVirtualLinksPanel.ts
API maturity: Experimental
Import: @simon_he/vue-tui/experimental
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | — | 是 | — |
zIndex | number | 0 | 否 | — |
links | readonly TLogLinkPanelItem[] | () => [] | 否 | — |
modelValue | number | -1 | 否 | — |
style | Style | undefined | 否 | — |
activeStyle | Style | undefined | 否 | — |
showLineNumbers | boolean | true | 否 | — |
rowScrollMode | RowScrollMode | "off" | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:modelValue | — | — |
activeChange | — | — |
select | — | — |
activate | — | — |
focus | — | — |
blur | — | — |
keydown | — | — |
scroll | — | — |
TLogVirtualSearchResults
源码:src/vue/components/TLogVirtualSearchResults.ts
API maturity: Experimental
Import: @simon_he/vue-tui/experimental
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | — | 是 | — |
zIndex | number | 0 | 否 | — |
itemCount | number | — | 是 | — |
itemVersion | number | — | 是 | — |
getItem | (index: number) => TLogSearchResultItem | null | — | 是 | — |
modelValue | number | -1 | 否 | — |
style | Style | undefined | 否 | — |
activeStyle | Style | undefined | 否 | — |
showLineNumbers | boolean | true | 否 | — |
rowScrollMode | RowScrollMode | "off" | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:modelValue | — | — |
activeChange | — | — |
select | — | — |
focus | — | — |
blur | — | — |
keydown | — | — |
scroll | — | — |
TMarkdownText
源码:src/vue/components/TMarkdownText.ts
API maturity: Public
Import: @simon_he/vue-tui/markdown
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
content | string | — | 是 | Markdown source rendered into terminal visual rows. |
w | number | — | 是 | Width in terminal cells. |
h | number | undefined | 否 | Height in terminal cells. |
style | Style | undefined | 否 | Base terminal cell style override. |
final | boolean | true | 否 | Parses the markdown as a complete document when enabled. |
streaming | boolean | false | 否 | Coalesces rapid content updates into frame-scheduled markdown rebuilds. |
clear | boolean | true | 否 | Clears the component rectangle before drawing content. |
customHtmlTags | readonly string[] | undefined | 否 | Additional HTML tag names accepted by the markdown parser. |
theme | TuiMarkdownThemeOverrides | undefined | 否 | Markdown theme token overrides for parsed blocks and inline segments. |
imageRenderer | TuiMarkdownImageResolver | undefined | 否 | Optional resolver for markdown image payloads before terminal graphics rendering. |
imageMinWidth | number | undefined | 否 | Minimum markdown image render width in terminal cells. |
imageMaxWidth | number | undefined | 否 | Maximum markdown image render width in terminal cells. |
imageMinHeight | number | undefined | 否 | Minimum markdown image render height in terminal cells. |
imageMaxHeight | number | undefined | 否 | Maximum markdown image render height in terminal cells. |
imagePreserveAspectRatio | boolean | true | 否 | Preserves markdown image aspect ratio while fitting width and height bounds. |
imageActions | boolean | false | 否 | Enables pointer actions for rendered markdown images. |
mathActions | boolean | false | 否 | Enables pointer actions for rendered markdown math blocks. |
linkActions | boolean | false | 否 | Enables pointer actions for rendered markdown links. |
imageOcclusionRects | readonly Rect[] | undefined | 否 | Terminal rectangles that markdown image layout treats as unavailable for graphics placement. |
Events
| 名称 | Payload | 说明 |
|---|---|---|
imageAction | TuiMarkdownImageActionPayload | Emitted when imageActions is enabled and a markdown image action is selected. |
mathAction | TuiMarkdownMathActionPayload | Emitted when mathActions is enabled and a markdown math action is selected. |
linkAction | TuiMarkdownLinkActionPayload | Emitted when linkActions is enabled and a markdown link action is selected. |
TMermaid
源码:src/vue/components/TMermaidText.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | undefined | 否 | — |
zIndex | number | 0 | 否 | — |
content | string | "" | 否 | — |
code | string | undefined | 否 | — |
style | Style | undefined | 否 | — |
loadingStyle | Style | undefined | 否 | — |
errorStyle | Style | undefined | 否 | — |
clear | boolean | true | 否 | — |
final | boolean | true | 否 | — |
streaming | boolean | false | 否 | — |
ascii | boolean | false | 否 | — |
paddingX | number | undefined | 否 | — |
paddingY | number | undefined | 否 | — |
boxBorderPadding | number | undefined | 否 | — |
options | TMermaidAsciiOptions | undefined | 否 | — |
renderer | TMermaidRenderer | undefined | 否 | — |
isTransientError | TMermaidTransientErrorClassifier | undefined | 否 | — |
shouldRenderSource | TMermaidRenderEligibility | undefined | 否 | — |
loadingText | string | "Rendering Mermaid diagram..." | 否 | — |
incompleteText | string | "Waiting for complete Mermaid diagram..." | 否 | — |
missingDependencyText | string | "Install the Mermaid renderer package and use TMermaidText from @simon_he/vue... | 否 | — |
errorText | string | "Mermaid render failed" | 否 | — |
showErrorDetails | boolean | true | 否 | — |
box | boolean | true | 否 | — |
title | string | "mermaid" | 否 | — |
copyButton | boolean | true | 否 | — |
copyText | string | "copy" | 否 | — |
copiedText | string | "copied" | 否 | — |
renderTimeoutMs | number | DEFAULT_MERMAID_RENDER_TIMEOUT_MS | 否 | — |
maxRenderSourceChars | number | DEFAULT_MERMAID_MAX_RENDER_SOURCE_CHARS | 否 | — |
maxRenderSourceLines | number | DEFAULT_MERMAID_MAX_RENDER_SOURCE_LINES | 否 | — |
copiedDurationMs | number | DEFAULT_MERMAID_COPIED_DURATION_MS | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
copy | TMermaidCopyPayload | — |
TMermaidText
源码:src/vue/components/TMermaidText.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | undefined | 否 | — |
zIndex | number | 0 | 否 | — |
content | string | "" | 否 | — |
code | string | undefined | 否 | — |
style | Style | undefined | 否 | — |
loadingStyle | Style | undefined | 否 | — |
errorStyle | Style | undefined | 否 | — |
clear | boolean | true | 否 | — |
final | boolean | true | 否 | — |
streaming | boolean | false | 否 | — |
ascii | boolean | false | 否 | — |
paddingX | number | undefined | 否 | — |
paddingY | number | undefined | 否 | — |
boxBorderPadding | number | undefined | 否 | — |
options | TMermaidAsciiOptions | undefined | 否 | — |
renderer | TMermaidRenderer | undefined | 否 | — |
isTransientError | TMermaidTransientErrorClassifier | undefined | 否 | — |
shouldRenderSource | TMermaidRenderEligibility | undefined | 否 | — |
loadingText | string | "Rendering Mermaid diagram..." | 否 | — |
incompleteText | string | "Waiting for complete Mermaid diagram..." | 否 | — |
missingDependencyText | string | "Install the Mermaid renderer package and use TMermaidText from @simon_he/vue... | 否 | — |
errorText | string | "Mermaid render failed" | 否 | — |
showErrorDetails | boolean | true | 否 | — |
box | boolean | true | 否 | — |
title | string | "mermaid" | 否 | — |
copyButton | boolean | true | 否 | — |
copyText | string | "copy" | 否 | — |
copiedText | string | "copied" | 否 | — |
renderTimeoutMs | number | DEFAULT_MERMAID_RENDER_TIMEOUT_MS | 否 | — |
maxRenderSourceChars | number | DEFAULT_MERMAID_MAX_RENDER_SOURCE_CHARS | 否 | — |
maxRenderSourceLines | number | DEFAULT_MERMAID_MAX_RENDER_SOURCE_LINES | 否 | — |
copiedDurationMs | number | DEFAULT_MERMAID_COPIED_DURATION_MS | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
copy | TMermaidCopyPayload | — |
TMultilineModal
源码:src/vue/components/TMultilineModal.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
visible | boolean | — | 是 | — |
content | string | — | 是 | — |
title | string | "Multiline Text" | 否 | — |
style | Style | undefined | 否 | — |
zIndex | number | 1000 | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
close | — | — |
TPasswordInput
源码:src/vue/components/TForm.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | — | 是 | Width in terminal cells. |
h | number | 1 | 否 | Height in terminal cells. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
modelValue | string | — | 是 | Controlled component value. |
placeholder | string | "" | 否 | Placeholder text shown when the input is empty. |
style | Style | undefined | 否 | Base terminal cell style override. |
autoFocus | boolean | false | 否 | Requests focus when the component becomes visible. |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:modelValue | string | Emitted when the controlled model value changes. |
input | string | Emitted for input edits. |
change | string | Emitted when the component commits a value change. |
TPathPicker
源码:src/vue/components/TPathPicker.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | — | 是 | — |
zIndex | number | 0 | 否 | — |
workspace | string | — | 是 | — |
mode | PathPickMode | "any" | 否 | — |
modelValue | string | — | 是 | — |
placeholder | string | "" | 否 | — |
style | Style | undefined | 否 | — |
inputStyle | Style | undefined | 否 | — |
activeStyle | Style | undefined | 否 | — |
matchStyle | Style | undefined | 否 | — |
autoFocus | boolean | false | 否 | — |
showHidden | boolean | false | 否 | — |
maxSuggestions | number | 50 | 否 | — |
provider | PathPickerProvider | undefined | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:modelValue | — | — |
select | — | — |
invalid | — | — |
keydown | — | — |
focus | — | — |
blur | — | — |
TPieChart
源码:src/vue/components/TCharts.ts
API maturity: Experimental
Import: @simon_he/vue-tui/experimental
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | — | 是 | Width in terminal cells. |
h | number | — | 是 | Height in terminal cells. |
zIndex | number | 0 | 否 | — |
values | readonly number[] | — | 是 | Segment values rendered clockwise from the top. |
labels | readonly string[] | undefined | 否 | Labels aligned with segment values and shown in the legend. |
style | Style | undefined | 否 | — |
segmentStyles | readonly Style[] | () => DEFAULT_PIE_SEGMENT_STYLES | 否 | Segment styles cycled when there are more segments than styles. |
cell | string | "█" | 否 | Glyph used for filled pie cells. |
showLegend | boolean | true | 否 | Whether to render a label/value/percent legend when there is enough space. |
legendStyle | Style | () => ({ fg: "whiteBright" }) | 否 | Style used for legend text. |
Events
—
TPopover
源码:src/vue/components/TOverlay.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
modelValue | boolean | — | 是 | — |
x | number | — | 是 | Caller-owned x position; no viewport clamp or flip placement is applied. |
y | number | — | 是 | Caller-owned y position; no viewport clamp or flip placement is applied. |
w | number | — | 是 | — |
h | number | — | 是 | — |
zIndex | number | 15 | 否 | — |
title | string | "" | 否 | — |
content | string | "" | 否 | — |
style | Style | undefined | 否 | — |
contentStyle | Style | undefined | 否 | — |
Events
—
TProgress
源码:src/vue/components/TFeedback.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
zIndex | number | 0 | 否 | — |
value | number | — | 是 | — |
max | number | 100 | 否 | — |
label | string | "" | 否 | — |
showPercent | boolean | true | 否 | — |
style | Style | undefined | 否 | — |
barStyle | Style | undefined | 否 | — |
Events
—
TRadioGroup
源码:src/vue/components/TForm.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | — | 是 | Width in terminal cells. |
h | number | — | 是 | Height in terminal cells. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
modelValue | string | "" | 否 | Controlled component value. |
options | readonly TRadioOption[] | — | 是 | Options rendered by the control. |
style | Style | undefined | 否 | Base terminal cell style override. |
activeStyle | Style | () => ({ inverse: true }) | 否 | Style used for the active item or row. |
disabledStyle | Style | () => ({ dim: true }) | 否 | Style used for disabled content. |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:modelValue | string | Emitted when the controlled model value changes. |
change | string | Emitted when the component commits a value change. |
TRenderLayer
源码:src/vue/components/TRenderLayer.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
zIndex | number | 0 | 否 | — |
Events
—
TRenderPlane
源码:src/vue/components/TRenderPlane.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
plane | TerminalRenderPlane | "default" | 否 | — |
Events
—
TRouterView
源码:src/vue/router/RouterView.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
routes | TerminalRouteRecord[] | — | 是 | — |
forceRemount | boolean | true | 否 | — |
Events
—
TSelect
源码:src/vue/components/TSelect.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | — | 是 | Width in terminal cells. |
h | number | — | 是 | Height in terminal cells. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
options | readonly SelectOption[] | () => [] | 否 | Options rendered by the control. |
optionProvider | TSelectOptionProvider | undefined | 否 | Async option provider called with the current query and an AbortSignal for stale requests. |
query | string | undefined | 否 | Search query used by filtering or async providers. |
modelValue | TSelectModelValue | 0 | 否 | Controlled component value. |
valueMode | TSelectValueMode | "index" | 否 | Model value shape emitted by the select v-model. |
activeIndex | number | undefined | 否 | Controlled active option index. |
multiple | boolean | false | 否 | Enables multi-select mode. |
multipleEmit | TSelectMultipleEmitMode | "label" | 否 | Payload shape used by multi-select change and confirm events: "label" emits labels, "value" emits option values, "index" emits indices, and "both" emits an object payload. |
style | Style | undefined | 否 | Base terminal cell style override. |
highlightStyle | Style | undefined | 否 | Style used for the highlighted row or match. |
matchStyle | Style | undefined | 否 | Style used for matched text. |
highlightMatchStyle | Style | undefined | 否 | Style used for highlighted text while the row is active. |
autoFocus | boolean | false | 否 | Requests focus when the component becomes visible. |
closeOnBlur | boolean | false | 否 | Emits close when focus leaves the component. |
searchable | boolean | false | 否 | Emits query updates from typed characters; local options are not filtered automatically. |
typeahead | boolean | true | 否 | Enables keyboard typeahead navigation. |
debounce | number | 0 | 否 | Delay before calling an async provider, in milliseconds. |
emptyText | string | "No options" | 否 | Text rendered when there are no rows or items. |
loading | boolean | false | 否 | Shows the loading row; true also covers pending async option providers. |
loadingText | string | "Loading..." | 否 | Text rendered while async loading is pending. |
errorText | string | "Unable to load options" | 否 | Text rendered when async loading fails. |
maxVisible | number | undefined | 否 | Maximum number of option rows rendered at once. |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:modelValue | number | number[] | string | string[] | unknown | unknown[] | SelectOption | SelectOption[] | Emitted when the controlled model value changes. |
update:activeIndex | number | Emitted when the active option index changes. |
update:query | string | Emitted when the controlled query changes. |
change | string | string[] | unknown[] | number[] | TSelectMultipleChangePayload | null | For single select, emits the selected option label or null; valueMode only affects update:modelValue. For multiple select, the payload follows multipleEmit. |
confirm | string[] | unknown[] | number[] | TSelectMultipleChangePayload | Emitted when multi-select commits the current selection. |
close | void | Emitted when the component requests to close. |
focus | void | Emitted when the component receives focus. |
blur | void | Emitted when the component loses focus. |
keydown | TerminalKeyboardEvent | Emitted for keydown events. |
loadError | { query: string; error: unknown } | Emitted when the async option provider rejects; aborted stale requests do not emit. |
TSlider
源码:src/vue/components/TForm.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | — | 是 | Width in terminal cells. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
modelValue | number | 0 | 否 | Controlled component value. |
min | number | 0 | 否 | Minimum numeric value. |
max | number | 100 | 否 | Maximum numeric value. |
step | number | 1 | 否 | Keyboard increment step. |
disabled | boolean | false | 否 | Disables pointer and keyboard activation. |
style | Style | undefined | 否 | Base terminal cell style override. |
activeStyle | Style | () => ({ fg: "cyanBright" }) | 否 | Style used for the active item or row. |
disabledStyle | Style | () => ({ dim: true }) | 否 | Style used for disabled content. |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:modelValue | number | Emitted when the controlled model value changes. |
change | number | Emitted when the component commits a value change. |
TSpinner
源码:src/vue/components/TFeedback.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | undefined | 否 | — |
zIndex | number | 0 | 否 | — |
frames | readonly string[] | () => ["|", "/", "-", "\"] | 否 | — |
frameIndex | number | 0 | 否 | — |
label | string | "" | 否 | — |
running | boolean | true | 否 | — |
style | Style | undefined | 否 | — |
Events
—
TSplitPane
源码:src/vue/components/TPanels.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | — | 是 | — |
zIndex | number | 0 | 否 | — |
direction | TSplitPaneDirection | "horizontal" | 否 | — |
sizes | readonly number[] | — | 是 | — |
minSizes | readonly number[] | () => [] | 否 | — |
separatorStyle | Style | () => ({ dim: true }) | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:sizes | number[] | — |
resize | number[] | — |
Slots
| 名称 | Props | 说明 |
|---|---|---|
default | { panes: readonly TSplitPaneRect[] } | Pane content renderer. The host renders pane children from the resolved pane rectangles. |
TStatusBar
源码:src/vue/components/TNavigation.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
zIndex | number | 0 | 否 | — |
left | string | "" | 否 | — |
center | string | "" | 否 | — |
right | string | "" | 否 | — |
style | Style | () => ({ inverse: true }) | 否 | — |
Events
—
TSwitch
源码:src/vue/components/TForm.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | — | 是 | Width in terminal cells. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
modelValue | boolean | false | 否 | Controlled component value. |
label | string | "" | 否 | Visible label text. |
disabled | boolean | false | 否 | Disables pointer and keyboard activation. |
style | Style | undefined | 否 | Base terminal cell style override. |
activeStyle | Style | () => ({ fg: "greenBright" }) | 否 | Style used for the active item or row. |
disabledStyle | Style | () => ({ dim: true }) | 否 | Style used for disabled content. |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:modelValue | boolean | Emitted when the controlled model value changes. |
change | boolean | Emitted when the component commits a value change. |
TTable
源码:src/vue/components/TTable.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | — | 是 | Width in terminal cells. |
h | number | — | 是 | Height in terminal cells. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
columns | readonly TTableColumn[] | — | 是 | Table column definitions. |
rows | readonly TTableRow[] | — | 是 | Rows are rendered from the top of the current viewport; TTable does not own scrollTop or virtualization. |
rowKey | string | ((row: TTableRow, index: number) => unknown) | undefined | 否 | Row key field or resolver. |
selectedRowKey | unknown | undefined | 否 | Controlled selected row key. |
selectedRowKeys | readonly unknown[] | undefined | 否 | Controlled selected row keys for multi-select tables. |
activeRowKey | unknown | undefined | 否 | Controlled active row key. |
border | boolean | false | 否 | Draws a border around the component. |
header | boolean | true | 否 | Shows the table header when enabled. |
style | Style | undefined | 否 | Base terminal cell style override. |
headerStyle | Style | undefined | 否 | Style override for table header cells. |
borderStyle | Style | undefined | 否 | Style override for border cells. |
selectedStyle | Style | undefined | 否 | Style used for selected rows or nodes. |
activeStyle | Style | undefined | 否 | Style used for the active item or row. |
emptyText | string | "No rows" | 否 | Text rendered when there are no rows or items. |
headerFocusable | boolean | false | 否 | Makes header cells keyboard focusable. |
rowFocusable | boolean | false | 否 | Makes body rows keyboard focusable. |
Events
| 名称 | Payload | 说明 |
|---|---|---|
rowClick | TTableRowClickPayload | Emitted when a table row is clicked or confirmed. |
headerClick | TTableHeaderClickPayload | Emitted when a table header is clicked or confirmed. |
rowKeydown | TTableRowKeydownPayload | Emitted when a focused table row receives a keydown event. |
TTabs
源码:src/vue/components/TPanels.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
zIndex | number | 0 | 否 | — |
items | readonly TTabsItem[] | — | 是 | — |
activeKey | string | — | 是 | — |
style | Style | undefined | 否 | — |
activeStyle | Style | () => ({ inverse: true }) | 否 | — |
disabledStyle | Style | () => ({ dim: true }) | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:activeKey | string | — |
change | TTabsItem | — |
TTag
源码:src/vue/components/TFeedback.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | undefined | 否 | Width in terminal cells. |
label | string | — | 是 | Visible label text. |
tone | TFeedbackTone | "default" | 否 | Semantic color tone. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
style | Style | undefined | 否 | Base terminal cell style override. |
Events
—
TText
源码:src/vue/components/TText.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
value | string | — | 是 | Text content rendered into terminal cells. |
w | number | undefined | 否 | Width in terminal cells. |
h | number | undefined | 否 | Height in terminal cells. |
style | Style | undefined | 否 | Base terminal cell style override. |
clear | boolean | true | 否 | Clears the component rectangle before drawing content. |
wrap | boolean | false | 否 | Wraps text to the available cell width. |
depsKey | unknown | undefined | 否 | Optional key that participates in render-node dependency tracking. Useful for forcing a repaint when the rendered output might change even if value, style, and geometry are unchanged (e.g. externalterminal writes or higher-level virtualized row reuse). |
Events
—
TThinkingView
源码:src/vue/components/TThinkingView.ts
API maturity: Experimental
Import: @simon_he/vue-tui/agent
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | undefined | 否 | — |
zIndex | number | 0 | 否 | — |
title | string | "Thinking" | 否 | — |
content | string | "" | 否 | — |
collapsed | boolean | false | 否 | — |
pulseFrame | number | null | null | 否 | — |
style | Style | undefined | 否 | — |
headerStyle | Style | () => DEFAULT_HEADER_STYLE | 否 | — |
markerStyle | Style | undefined | 否 | — |
titleStyle | Style | undefined | 否 | — |
bodyStyle | Style | () => DEFAULT_BODY_STYLE | 否 | — |
focusable | boolean | false | 否 | — |
selectable | boolean | undefined | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
click | — | — |
toggle | — | — |
TToastViewport
源码:src/vue/components/TFeedback.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | 0 | 否 | Fallback placement viewport x when no parent clip rect is available. |
y | number | 0 | 否 | Fallback placement viewport y when no parent clip rect is available. |
offsetX | number | 0 | 否 | — |
offsetY | number | 0 | 否 | — |
w | number | — | 是 | Toast item width in terminal cells. |
viewportW | number | undefined | 否 | Placement viewport width when no parent clip rect is available. |
viewportH | number | undefined | 否 | Placement viewport height when no parent clip rect is available. |
zIndex | number | 40 | 否 | — |
max | number | 3 | 否 | — |
placement | "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-right" | 否 | — |
items | readonly TToastItem[] | — | 是 | — |
style | Style | undefined | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
dismiss | string | — |
TToolCallView
源码:src/vue/components/TToolCallView.ts
API maturity: Experimental
Import: @simon_he/vue-tui/agent
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | undefined | 否 | — |
zIndex | number | 0 | 否 | — |
title | string | — | 是 | — |
collapsed | boolean | false | 否 | — |
status | TToolCallStatus | "pending" | 否 | — |
suffix | string | "" | 否 | — |
preview | string | "" | 否 | — |
nested | boolean | false | 否 | — |
selected | boolean | false | 否 | — |
markerCollapsed | string | "▸" | 否 | — |
markerExpanded | string | "▾" | 否 | — |
statusDot | string | "●" | 否 | — |
previewPrefix | string | " ⎿ " | 否 | — |
style | Style | undefined | 否 | — |
mutedStyle | Style | undefined | 否 | — |
headerStyle | Style | undefined | 否 | — |
collapsedStyle | Style | undefined | 否 | — |
expandedStyle | Style | undefined | 否 | — |
markerStyle | Style | undefined | 否 | — |
statusStyle | Style | undefined | 否 | — |
titleStyle | Style | undefined | 否 | — |
suffixStyle | Style | undefined | 否 | — |
previewStyle | Style | undefined | 否 | — |
focusable | boolean | false | 否 | — |
selectable | boolean | undefined | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
click | — | — |
toggle | — | — |
TToolLogView
源码:src/vue/components/TLogView.ts
API maturity: Experimental
Import: @simon_he/vue-tui/agent
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | — | 是 | — |
zIndex | number | 0 | 否 | — |
source | TLogDataSource | — | 是 | — |
version | number | — | 是 | — |
scrollTop | number | undefined | 否 | — |
defaultScrollTop | number | undefined | 否 | — |
style | Style | undefined | 否 | — |
autoFocus | boolean | false | 否 | — |
selectable | boolean | true | 否 | — |
autoStickToBottom | boolean | true | 否 | — |
overscan | number | 2 | 否 | — |
wrap | boolean | false | 否 | — |
visualIndexMode | "estimated" | "exact" | "estimated" | 否 | — |
visualIndexOptions | TLogViewVisualIndexOptions | undefined | 否 | — |
ansi | boolean | false | 否 | — |
links | boolean | false | 否 | Parses OSC8 links only with ansi=true; OSC8 links preserve parsed ANSI style and do not inherit TLink theme defaults. |
linkify | boolean | TLinkifyOptions | false | 否 | Plain-text URL linkification for ansi=false rows; generated links inherit TLink theme defaults before linkStyle. |
linkStyle | Style | undefined | 否 | Link style override. OSC8 defaults to underline-only over parsed ANSI style; linkify also inherits TLink theme defaults. |
keyboardLinks | boolean | false | 否 | — |
linkFocusStyle | Style | () => ({ inverse: true }) | 否 | — |
searchQuery | string | "" | 否 | — |
searchOptions | TLogViewSearchOptions | undefined | 否 | — |
highlightMatches | boolean | true | 否 | — |
matchStyle | Style | () => ({ inverse: true }) | 否 | — |
currentMatchStyle | Style | () => ({ inverse: true, bold: true }) | 否 | — |
rowScrollMode | RowScrollMode | "off" | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
scroll | — | — |
update:scrollTop | — | — |
update:searchQuery | — | — |
search | — | — |
searchMatch | — | — |
searchMarkers | — | — |
linkClick | — | — |
linkFocus | — | — |
linkActivate | — | — |
visualIndex | — | — |
focus | — | — |
blur | — | — |
keydown | — | — |
TTooltip
源码:src/vue/components/TOverlay.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
modelValue | boolean | true | 否 | — |
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | undefined | 否 | — |
zIndex | number | 30 | 否 | — |
content | string | — | 是 | — |
style | Style | () => ({ inverse: true }) | 否 | — |
Events
—
TTranscriptView
源码:src/vue/components/TTranscriptView.ts
API maturity: Experimental
Import: @simon_he/vue-tui/experimental
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | — | 是 | — |
zIndex | number | 0 | 否 | — |
source | TTranscriptDataSource | — | 是 | — |
version | number | — | 是 | — |
scrollTop | number | undefined | 否 | — |
defaultScrollTop | number | 0 | 否 | — |
autoStickToBottom | boolean | false | 否 | — |
selectable | boolean | true | 否 | — |
wrap | boolean | false | 否 | — |
style | Style | undefined | 否 | — |
hoverStyle | Style | undefined | 否 | — |
focusStyle | Style | undefined | 否 | — |
autoFocus | boolean | false | 否 | — |
focusable | boolean | true | 否 | — |
wheelScroll | boolean | true | 否 | — |
keyboardRegions | boolean | true | 否 | — |
rowScrollMode | RowScrollMode | "unsafe-full-row" | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
scroll | — | — |
update:scrollTop | — | — |
rowClick | — | — |
actionClick | — | — |
linkClick | — | — |
foldToggle | — | — |
toolClick | — | — |
hoverRegion | — | — |
TTransition
源码:src/vue/components/TTransition.ts
API maturity: Advanced
Import: @simon_he/vue-tui/vue
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
show | boolean | — | 是 | — |
duration | number | 200 | 否 | — |
beforeEnter | TransitionHook | undefined | 否 | — |
enter | TransitionHook | undefined | 否 | — |
afterEnter | TransitionHook | undefined | 否 | — |
beforeLeave | TransitionHook | undefined | 否 | — |
leave | TransitionHook | undefined | 否 | — |
afterLeave | TransitionHook | undefined | 否 | — |
Events
—
TTree
源码:src/vue/components/TTree.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | — | 是 | Width in terminal cells. |
h | number | — | 是 | Height in terminal cells. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
nodes | readonly TTreeNode[] | — | 是 | Tree nodes. |
expandedIds | readonly string[] | () => [] | 否 | Controlled expanded tree node ids. |
selectedId | string | "" | 否 | Controlled selected tree node id. |
style | Style | undefined | 否 | Base terminal cell style override. |
selectedStyle | Style | () => ({ inverse: true }) | 否 | Style used for selected rows or nodes. |
disabledStyle | Style | () => ({ dim: true }) | 否 | Style used for disabled content. |
indent | number | 2 | 否 | Indent width per tree depth. |
selectableParents | boolean | false | 否 | Allows expandable parent tree nodes to be selected from their label. |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:expandedIds | string[] | Emitted when expanded tree node ids change. |
update:selectedId | string | Emitted when the selected tree node id changes. |
select | TTreeSelectPayload | Emitted when the active item is selected. |
toggle | TTreeTogglePayload | Emitted when a tree node expands or collapses. |
TUserMessageView
源码:src/vue/components/TUserMessageView.ts
API maturity: Experimental
Import: @simon_he/vue-tui/agent
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | undefined | 否 | — |
zIndex | number | 0 | 否 | — |
label | string | "user" | 否 | — |
prefix | string | "> " | 否 | — |
meta | string | "" | 否 | — |
content | string | — | 是 | — |
indent | number | 2 | 否 | — |
topBlank | boolean | true | 否 | — |
bottomBlank | boolean | true | 否 | — |
segments | readonly TUserMessageSegment[] | () => [] | 否 | — |
style | Style | () => DEFAULT_BLOCK_STYLE | 否 | — |
headerStyle | Style | () => DEFAULT_HEADER_STYLE | 否 | — |
prefixStyle | Style | () => DEFAULT_LABEL_STYLE | 否 | — |
labelStyle | Style | () => DEFAULT_LABEL_STYLE | 否 | — |
contentStyle | Style | undefined | 否 | — |
segmentStyle | Style | () => DEFAULT_SEGMENT_STYLE | 否 | — |
focusable | boolean | false | 否 | — |
selectable | boolean | undefined | 否 | — |
Events
—
TView
源码:src/vue/components/TView.ts
API maturity: Public
Import: @simon_he/vue-tui
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | — | 是 | Width in terminal cells. |
h | number | — | 是 | Height in terminal cells. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
scrollX | number | 0 | 否 | Horizontal content offset in terminal cells. |
scrollY | number | 0 | 否 | Vertical content offset in terminal cells. |
focusable | boolean | false | 否 | Adds the component to keyboard focus navigation. |
selectable | boolean | undefined | 否 | Controls whether terminal text selection may start inside the view. |
selectionScrollBy | (deltaRows: number) => boolean | void | undefined | 否 | Scroll callback used while a pointer selection reaches the viewport edge. |
autoFocus | boolean | false | 否 | Requests focus when the component becomes visible. |
Events
| 名称 | Payload | 说明 |
|---|---|---|
clickCapture | TerminalPointerEvent | Emitted for click events. Runs during capture. |
click | TerminalPointerEvent | Emitted for click events. |
dblclickCapture | TerminalPointerEvent | Emitted for double-click events. Runs during capture. |
dblclick | TerminalPointerEvent | Emitted for double-click events. |
pointerdownCapture | TerminalPointerEvent | Emitted for pointer down events. Runs during capture. |
pointerdown | TerminalPointerEvent | Emitted for pointer down events. |
pointerupCapture | TerminalPointerEvent | Emitted for pointer up events. Runs during capture. |
pointerup | TerminalPointerEvent | Emitted for pointer up events. |
pointermoveCapture | TerminalPointerEvent | Emitted for pointer move events. Runs during capture. |
pointermove | TerminalPointerEvent | Emitted for pointer move events. |
pointerenterCapture | TerminalPointerEvent | Emitted when the pointer enters the component. Runs during capture. |
pointerenter | TerminalPointerEvent | Emitted when the pointer enters the component. |
pointerleaveCapture | TerminalPointerEvent | Emitted when the pointer leaves the component. Runs during capture. |
pointerleave | TerminalPointerEvent | Emitted when the pointer leaves the component. |
wheelCapture | TerminalPointerEvent | Emitted for wheel events. Runs during capture. |
wheel | TerminalPointerEvent | Emitted for wheel events. |
keydownCapture | TerminalKeyboardEvent | Emitted for keydown events. Runs during capture. |
keydown | TerminalKeyboardEvent | Emitted for keydown events. |
keyupCapture | TerminalKeyboardEvent | Emitted for keyup events. Runs during capture. |
keyup | TerminalKeyboardEvent | Emitted for keyup events. |
focusCapture | void | Emitted when the component receives focus. Runs during capture. |
focus | void | Emitted when the component receives focus. |
blurCapture | void | Emitted when the component loses focus. Runs during capture. |
blur | void | Emitted when the component loses focus. |
Slots
| 名称 | Props | 说明 |
|---|---|---|
default | — | Children rendered with this view's layout origin, clip rect, render stack, and event z-index context. |
TVirtualList
源码:src/vue/components/TVirtualList.ts
API maturity: Experimental
Import: @simon_he/vue-tui/experimental
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | — |
y | number | — | 是 | — |
w | number | — | 是 | — |
h | number | — | 是 | — |
zIndex | number | 0 | 否 | — |
itemCount | number | — | 是 | — |
itemVersion | number | — | 是 | — |
getItem | (index: number) => unknown | — | 是 | — |
renderItem | (item: unknown, index: number) => unknown | undefined | 否 | — |
modelValue | number | 0 | 否 | — |
scrollTop | number | undefined | 否 | — |
style | Style | undefined | 否 | — |
activeStyle | Style | undefined | 否 | — |
autoFocus | boolean | false | 否 | — |
selectionText | (item: unknown, index: number) => string | undefined | 否 | — |
selectable | boolean | false | 否 | — |
rowScrollMode | RowScrollMode | "off" | 否 | — |
terminalGraphicScrollIdleMs | number | 96 | 否 | — |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:modelValue | — | — |
update:scrollTop | — | — |
change | — | — |
itemClick | — | — |
scroll | — | — |
focus | — | — |
blur | — | — |
keydown | — | — |
TVirtualMarkdown
源码:src/vue/components/TVirtualMarkdown.ts
API maturity: Public
Import: @simon_he/vue-tui/markdown
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
x | number | — | 是 | Left position in terminal cells. |
y | number | — | 是 | Top position in terminal cells. |
w | number | — | 是 | Width in terminal cells. |
h | number | — | 是 | Height in terminal cells. |
zIndex | number | 0 | 否 | Render and event ordering within the current plane. |
content | string | "" | 否 | Markdown source rendered when external blocks are not provided. |
blocks | readonly TuiMarkdownBlock[] | undefined | 否 | Prebuilt markdown blocks used instead of parsing content. |
scrollTop | number | 0 | 否 | Controlled top visual-row offset within the markdown viewport. |
style | Style | undefined | 否 | Base terminal cell style override. |
final | boolean | true | 否 | Parses the markdown as a complete document when enabled. |
streaming | boolean | false | 否 | Coalesces rapid content updates into frame-scheduled markdown rebuilds. |
autoFocus | boolean | false | 否 | Requests focus when the component becomes visible. |
selectable | boolean | true | 否 | Controls whether native terminal text selection may start inside the markdown viewport. |
customHtmlTags | readonly string[] | undefined | 否 | Additional HTML tag names accepted by the markdown parser. |
theme | TuiMarkdownThemeOverrides | undefined | 否 | Markdown theme token overrides for parsed blocks and inline segments. |
imageRenderer | TuiMarkdownImageResolver | undefined | 否 | Optional resolver for markdown image payloads before terminal graphics rendering. |
imageMinWidth | number | undefined | 否 | Minimum markdown image render width in terminal cells. |
imageMaxWidth | number | undefined | 否 | Maximum markdown image render width in terminal cells. |
imageMinHeight | number | undefined | 否 | Minimum markdown image render height in terminal cells. |
imageMaxHeight | number | undefined | 否 | Maximum markdown image render height in terminal cells. |
imagePreserveAspectRatio | boolean | true | 否 | Preserves markdown image aspect ratio while fitting width and height bounds. |
imageActions | boolean | false | 否 | Enables pointer actions for rendered markdown images. |
mathActions | boolean | false | 否 | Enables pointer actions for rendered markdown math blocks. |
linkActions | boolean | false | 否 | Enables pointer actions for rendered markdown links. |
imageOcclusionRects | readonly Rect[] | undefined | 否 | Terminal rectangles that markdown image layout treats as unavailable for graphics placement. |
Events
| 名称 | Payload | 说明 |
|---|---|---|
update:scrollTop | number | Emitted when the top visible row offset should change. |
scroll | number | Emitted when the visible scroll offset changes. |
focus | void | Emitted when the component receives focus. |
blur | void | Emitted when the component loses focus. |
keydown | TerminalKeyboardEvent | Emitted for keydown events. |
imageAction | TuiMarkdownImageActionPayload | Emitted when imageActions is enabled and a markdown image action is selected. |
mathAction | TuiMarkdownMathActionPayload | Emitted when mathActions is enabled and a markdown math action is selected. |
linkAction | TuiMarkdownLinkActionPayload | Emitted when linkActions is enabled and a markdown link action is selected. |