mirror of
https://github.com/getcompanion-ai/co-mono.git
synced 2026-04-21 01:01:42 +00:00
Update tui.md docs: replace isXxx() with matchesKey() and Key helper
This commit is contained in:
parent
f49d2aac12
commit
22abf50d85
1 changed files with 18 additions and 15 deletions
|
|
@ -130,27 +130,30 @@ const image = new Image(
|
||||||
|
|
||||||
## Keyboard Input
|
## Keyboard Input
|
||||||
|
|
||||||
Use key detection helpers:
|
Use `matchesKey()` for key detection:
|
||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
import {
|
import { matchesKey, Key } from "@mariozechner/pi-tui";
|
||||||
isEnter, isEscape, isTab,
|
|
||||||
isArrowUp, isArrowDown, isArrowLeft, isArrowRight,
|
|
||||||
isCtrlC, isCtrlO, isBackspace, isDelete,
|
|
||||||
// ... and more
|
|
||||||
} from "@mariozechner/pi-tui";
|
|
||||||
|
|
||||||
handleInput(data: string) {
|
handleInput(data: string) {
|
||||||
if (isArrowUp(data)) {
|
if (matchesKey(data, Key.up)) {
|
||||||
this.selectedIndex--;
|
this.selectedIndex--;
|
||||||
} else if (isEnter(data)) {
|
} else if (matchesKey(data, Key.enter)) {
|
||||||
this.onSelect?.(this.selectedIndex);
|
this.onSelect?.(this.selectedIndex);
|
||||||
} else if (isEscape(data)) {
|
} else if (matchesKey(data, Key.escape)) {
|
||||||
this.onCancel?.();
|
this.onCancel?.();
|
||||||
|
} else if (matchesKey(data, Key.ctrl("c"))) {
|
||||||
|
// Ctrl+C
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
**Key identifiers** (use `Key.*` for autocomplete, or string literals):
|
||||||
|
- Basic keys: `Key.enter`, `Key.escape`, `Key.tab`, `Key.space`, `Key.backspace`, `Key.delete`, `Key.home`, `Key.end`
|
||||||
|
- Arrow keys: `Key.up`, `Key.down`, `Key.left`, `Key.right`
|
||||||
|
- With modifiers: `Key.ctrl("c")`, `Key.shift("tab")`, `Key.alt("left")`, `Key.ctrlShift("p")`
|
||||||
|
- String format also works: `"enter"`, `"ctrl+c"`, `"shift+tab"`, `"ctrl+shift+p"`
|
||||||
|
|
||||||
## Line Width
|
## Line Width
|
||||||
|
|
||||||
**Critical:** Each line from `render()` must not exceed the `width` parameter.
|
**Critical:** Each line from `render()` must not exceed the `width` parameter.
|
||||||
|
|
@ -175,7 +178,7 @@ Example: Interactive selector
|
||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
import {
|
import {
|
||||||
isEnter, isEscape, isArrowUp, isArrowDown,
|
matchesKey, Key,
|
||||||
truncateToWidth, visibleWidth
|
truncateToWidth, visibleWidth
|
||||||
} from "@mariozechner/pi-tui";
|
} from "@mariozechner/pi-tui";
|
||||||
|
|
||||||
|
|
@ -193,15 +196,15 @@ class MySelector {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleInput(data: string): void {
|
handleInput(data: string): void {
|
||||||
if (isArrowUp(data) && this.selected > 0) {
|
if (matchesKey(data, Key.up) && this.selected > 0) {
|
||||||
this.selected--;
|
this.selected--;
|
||||||
this.invalidate();
|
this.invalidate();
|
||||||
} else if (isArrowDown(data) && this.selected < this.items.length - 1) {
|
} else if (matchesKey(data, Key.down) && this.selected < this.items.length - 1) {
|
||||||
this.selected++;
|
this.selected++;
|
||||||
this.invalidate();
|
this.invalidate();
|
||||||
} else if (isEnter(data)) {
|
} else if (matchesKey(data, Key.enter)) {
|
||||||
this.onSelect?.(this.items[this.selected]);
|
this.onSelect?.(this.items[this.selected]);
|
||||||
} else if (isEscape(data)) {
|
} else if (matchesKey(data, Key.escape)) {
|
||||||
this.onCancel?.();
|
this.onCancel?.();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue