@termuijs/widgets 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +64 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
# @termuijs/widgets
|
|
2
|
+
|
|
3
|
+
20+ base widgets for building terminal UIs. Boxes, text, tables, gauges, spinners, inputs.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @termuijs/widgets
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Requires `@termuijs/core` as a peer dependency.
|
|
12
|
+
|
|
13
|
+
## Widgets
|
|
14
|
+
|
|
15
|
+
| Widget | What it does |
|
|
16
|
+
|--------|-------------|
|
|
17
|
+
| `Box` | Container with flexbox layout. Supports borders, padding, margin |
|
|
18
|
+
| `Text` | Renders styled text. Supports color, bold, italic, underline, strikethrough |
|
|
19
|
+
| `Table` | Data table with headers, column alignment, and row selection |
|
|
20
|
+
| `ProgressBar` | Horizontal bar with percentage fill |
|
|
21
|
+
| `Spinner` | Animated loading indicator with multiple styles |
|
|
22
|
+
| `Gauge` | Circular or arc gauge for numeric values |
|
|
23
|
+
| `TextInput` | Single-line text input with cursor |
|
|
24
|
+
| `List` | Scrollable list with selection |
|
|
25
|
+
| `LogView` | Tailing log viewer |
|
|
26
|
+
| `Sparkline` | Inline line chart from an array of numbers |
|
|
27
|
+
| `StatusIndicator` | Colored dot with label |
|
|
28
|
+
|
|
29
|
+
## Usage
|
|
30
|
+
|
|
31
|
+
```typescript
|
|
32
|
+
import { Box, Text, Table, ProgressBar } from '@termuijs/widgets';
|
|
33
|
+
|
|
34
|
+
const container = new Box({
|
|
35
|
+
flexDirection: 'column',
|
|
36
|
+
border: 'rounded',
|
|
37
|
+
padding: 1,
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
container.addChild(new Text({ content: 'Downloads', bold: true }));
|
|
41
|
+
container.addChild(new ProgressBar({ value: 0.73, width: 30 }));
|
|
42
|
+
|
|
43
|
+
const table = new Table({
|
|
44
|
+
columns: ['Name', 'Size', 'Status'],
|
|
45
|
+
data: [
|
|
46
|
+
{ Name: 'app.js', Size: '14kb', Status: 'done' },
|
|
47
|
+
{ Name: 'style.css', Size: '3kb', Status: 'pending' },
|
|
48
|
+
],
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
container.addChild(table);
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Every widget supports
|
|
55
|
+
|
|
56
|
+
- `visible` - Show or hide
|
|
57
|
+
- `focusable` - Whether Tab stops on this widget
|
|
58
|
+
- `style` - Colors, borders, padding, margin
|
|
59
|
+
- `markDirty()` - Flags the widget for re-render
|
|
60
|
+
- Focus ring rendering when focused
|
|
61
|
+
|
|
62
|
+
## License
|
|
63
|
+
|
|
64
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@termuijs/widgets",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Widget library for TermUI — 20+ interactive terminal UI components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"access": "public"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@termuijs/core": "0.1.
|
|
23
|
+
"@termuijs/core": "0.1.1"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"typescript": "^5.7.0",
|