@textui/widgets 0.1.0 → 0.2.0

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.
Files changed (55) hide show
  1. package/README.md +17 -15
  2. package/dist/control/checkbox.d.ts +2 -0
  3. package/dist/control/checkbox.d.ts.map +1 -1
  4. package/dist/control/checkbox.js +2 -2
  5. package/dist/control/radio-group.d.ts +2 -0
  6. package/dist/control/radio-group.d.ts.map +1 -1
  7. package/dist/control/radio-group.js +2 -2
  8. package/dist/control/text-area.d.ts +15 -2
  9. package/dist/control/text-area.d.ts.map +1 -1
  10. package/dist/control/text-area.js +402 -22
  11. package/dist/control/text-input.d.ts.map +1 -1
  12. package/dist/control/text-input.js +40 -0
  13. package/dist/data/feed.d.ts +14 -0
  14. package/dist/data/feed.d.ts.map +1 -1
  15. package/dist/data/feed.js +28 -2
  16. package/dist/data/list.d.ts +60 -7
  17. package/dist/data/list.d.ts.map +1 -1
  18. package/dist/data/list.js +66 -10
  19. package/dist/data/markdown-view.d.ts.map +1 -1
  20. package/dist/data/markdown-view.js +49 -0
  21. package/dist/display/color-text.d.ts +158 -0
  22. package/dist/display/color-text.d.ts.map +1 -0
  23. package/dist/display/color-text.js +246 -0
  24. package/dist/display/index.d.ts +1 -0
  25. package/dist/display/index.d.ts.map +1 -1
  26. package/dist/display/index.js +3 -0
  27. package/dist/layout/divider.d.ts +6 -1
  28. package/dist/layout/divider.d.ts.map +1 -1
  29. package/dist/layout/divider.js +5 -5
  30. package/dist/layout/scroll-view.d.ts +10 -0
  31. package/dist/layout/scroll-view.d.ts.map +1 -1
  32. package/dist/layout/scroll-view.js +2 -2
  33. package/dist/navigation/menu.d.ts +24 -0
  34. package/dist/navigation/menu.d.ts.map +1 -1
  35. package/dist/navigation/menu.js +58 -15
  36. package/dist/overlay/command-palette.d.ts +32 -1
  37. package/dist/overlay/command-palette.d.ts.map +1 -1
  38. package/dist/overlay/command-palette.js +84 -10
  39. package/dist/shells/workbench-shell.d.ts.map +1 -1
  40. package/dist/shells/workbench-shell.js +16 -2
  41. package/package.json +8 -8
  42. package/src/control/checkbox.ts +4 -2
  43. package/src/control/radio-group.ts +4 -2
  44. package/src/control/text-area.ts +394 -31
  45. package/src/control/text-input.ts +38 -1
  46. package/src/data/feed.ts +44 -1
  47. package/src/data/list.ts +125 -18
  48. package/src/data/markdown-view.ts +56 -0
  49. package/src/display/color-text.ts +386 -0
  50. package/src/display/index.ts +3 -0
  51. package/src/layout/divider.ts +15 -7
  52. package/src/layout/scroll-view.ts +12 -2
  53. package/src/navigation/menu.ts +89 -14
  54. package/src/overlay/command-palette.ts +125 -11
  55. package/src/shells/workbench-shell.ts +16 -3
package/README.md CHANGED
@@ -1,7 +1,8 @@
1
1
  # @textui/widgets
2
2
 
3
- The component catalog: eighty-seven components built out of the four primitives
4
- in [`@textui/core`](https://github.com/softov/textui/tree/main/packages/core).
3
+ [![npm](https://img.shields.io/npm/v/@textui/widgets?label=%40textui%2Fwidgets)](https://www.npmjs.com/package/@textui/widgets) [![license](https://img.shields.io/npm/l/@textui/widgets)](https://github.com/softov/textui/blob/main/LICENSE)
4
+
5
+ The component catalog: eighty-seven components built out of the four primitives in [`@textui/core`](https://www.npmjs.com/package/@textui/core).
5
6
 
6
7
  ```bash
7
8
  npm install @textui/widgets
@@ -20,12 +21,9 @@ import { Card, Row, Badge } from '@textui/widgets';
20
21
 
21
22
  ## Importing is registering
22
23
 
23
- There is nothing to call first. `<Card/>` compiles to a node that carries the
24
- imported function, and the runtime uses that in preference to any registry - so
25
- a screen written in JSX renders with the registry empty.
24
+ There is nothing to call first. `<Card/>` compiles to a node that carries the imported function, and the runtime uses that in preference to any registry - so a screen written in JSX renders with the registry empty.
26
25
 
27
- `registerBuiltins(app)` exists for the other case: a screen named in data, where
28
- a string has to resolve to something.
26
+ `registerBuiltins(app)` exists for the other case: a screen named in data, where a string has to resolve to something.
29
27
 
30
28
  ```ts
31
29
  import { createApp } from '@textui/core';
@@ -34,9 +32,7 @@ import { registerBuiltins } from '@textui/widgets';
34
32
  const app = createApp({ terminal, root, onBoot: registerBuiltins });
35
33
  ```
36
34
 
37
- It registers the catalog, the surface layouts and the built-in shells in one
38
- call, and returns one `Disposable` that takes all of it back out. For a static
39
- render, `renderOnce(node, { components: CATALOG })` is the same idea.
35
+ It registers the catalog, the surface layouts and the built-in shells in one call, and returns one `Disposable` that takes all of it back out. For a static render, `renderOnce(node, { components: CATALOG })` is the same idea.
40
36
 
41
37
  ## What is here
42
38
 
@@ -54,16 +50,22 @@ render, `renderOnce(node, { components: CATALOG })` is the same idea.
54
50
  | `shells` | 4 | The frame around an application |
55
51
  | `panel` | 1 | A pane that opens a resource with whatever viewer is registered |
56
52
 
57
- One file per component, in a folder per group - `src/display/badge.ts`. `ls
58
- src/display/` is the inventory.
53
+ One file per component, in a folder per group - `src/display/badge.ts`. `ls src/display/` is the inventory.
59
54
 
60
55
  ## Runtime
61
56
 
62
- No dependencies beyond `@textui/core`, and no `node:` imports. Node 22+ and Bun.
57
+ No dependencies beyond [`@textui/core`](https://www.npmjs.com/package/@textui/core), and no `node:` imports. Node 22+ and Bun.
63
58
 
64
59
  ## Documentation
65
60
 
66
61
  <https://softov.github.io/textui/>
67
62
 
68
- Every component has its own page, with the prop table generated from the source
69
- and a working example - see [`docs/components/`](https://softov.github.io/textui/components/).
63
+ Every component has its own page, with the prop table generated from the source and a working example - see [`docs/components/`](https://softov.github.io/textui/components/).
64
+
65
+ <!-- family -->
66
+
67
+ ---
68
+
69
+ Part of **[TextUI](https://github.com/softov/textui)** - [documentation](https://softov.github.io/textui/) - [getting started](https://softov.github.io/textui/getting-started.html)
70
+
71
+ [`@textui/kit`](https://www.npmjs.com/package/@textui/kit) one install · [`@textui/core`](https://www.npmjs.com/package/@textui/core) the runtime · **`@textui/widgets`** the catalog · [`@textui/terminal`](https://www.npmjs.com/package/@textui/terminal) adapters and input · [`@textui/testing`](https://www.npmjs.com/package/@textui/testing) the harness · [`@textui/cli`](https://www.npmjs.com/package/@textui/cli) the CLI
@@ -5,6 +5,8 @@ export interface CheckboxProps extends BoxProps {
5
5
  /** Neither checked nor unchecked - a parent of mixed children. */
6
6
  indeterminate?: boolean;
7
7
  onChange?(checked: boolean): void;
8
+ /** Take the keyboard on arrival. */
9
+ autoFocus?: boolean;
8
10
  }
9
11
  export declare const Checkbox: (props: CheckboxProps) => import("@textui/core").RenderOutput;
10
12
  //# sourceMappingURL=checkbox.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/control/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,aAAc,SAAQ,QAAQ;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kEAAkE;IAClE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,QAAQ,+DAoCnB,CAAC"}
1
+ {"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/control/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,aAAc,SAAQ,QAAQ;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kEAAkE;IAClE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC,oCAAoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,+DAoCnB,CAAC"}
@@ -1,8 +1,8 @@
1
1
  import { defineComponent, h, useFocus, useInput, useTheme } from '@textui/core';
2
2
  export const Checkbox = defineComponent('Checkbox', (props) => {
3
3
  const theme = useTheme();
4
- const { label, checked = false, indeterminate, onChange, disabled, ...rest } = props;
5
- const focus = useFocus({ disabled });
4
+ const { label, checked = false, indeterminate, onChange, disabled, autoFocus, ...rest } = props;
5
+ const focus = useFocus({ disabled, autoFocus });
6
6
  useInput((event) => {
7
7
  if (disabled)
8
8
  return false;
@@ -12,6 +12,8 @@ export interface RadioGroupProps extends BoxProps {
12
12
  label?: string;
13
13
  /** Lay the options out in a row instead of a column. */
14
14
  inline?: boolean;
15
+ /** Take the keyboard on arrival. */
16
+ autoFocus?: boolean;
15
17
  }
16
18
  export declare const RadioGroup: (props: RadioGroupProps) => import("@textui/core").RenderOutput;
17
19
  //# sourceMappingURL=radio-group.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/control/radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,UAAU,iEAwCrB,CAAC"}
1
+ {"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/control/radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,iEAwCrB,CAAC"}
@@ -1,8 +1,8 @@
1
1
  import { defineComponent, h, useFocus, useInput, useTheme } from '@textui/core';
2
2
  export const RadioGroup = defineComponent('RadioGroup', (props) => {
3
3
  const theme = useTheme();
4
- const { options, value, onChange, label, inline, disabled, ...rest } = props;
5
- const focus = useFocus({ disabled });
4
+ const { options, value, onChange, label, inline, disabled, autoFocus, ...rest } = props;
5
+ const focus = useFocus({ disabled, autoFocus });
6
6
  const index = Math.max(0, options.findIndex((o) => o.value === value));
7
7
  useInput((event) => {
8
8
  if (disabled)
@@ -47,16 +47,29 @@ export interface TextAreaProps extends BoxProps {
47
47
  */
48
48
  caretTone?: SemanticVariant;
49
49
  /**
50
- * What the caret looks like. An underline under the character it is on by
51
- * default; `block` fills the cell instead.
50
+ * What the caret looks like. **The theme's `cursor` by default**, so the
51
+ * drawn caret and the terminal's own are the same shape, and an underline
52
+ * when the theme leaves it to the terminal.
52
53
  *
53
54
  * Both **mark a cell rather than occupying one**. The caret used to be a
54
55
  * glyph pushed in between the text before it and the text after, so every
55
56
  * character to its right sat one column off from where it would be once the
56
57
  * caret moved on, and the row was a cell wider than its own text. On a
57
58
  * wrapped row that extra cell is the one that does not fit.
59
+ *
60
+ * That is also why the theme's `bar` arrives here as an underline: a bar
61
+ * *between* two characters is exactly the caret this one is not.
58
62
  */
59
63
  caretStyle?: 'underline' | 'block';
64
+ /**
65
+ * Put a selection on the system clipboard as it is made. On by default.
66
+ *
67
+ * Selecting with the mouse is how text leaves a terminal, and an application
68
+ * that reports mouse events has taken the terminal's own select-and-copy
69
+ * away - so it owes one back. The copy goes out over OSC 52 and into the
70
+ * store, which is the half a paste inside the application can read.
71
+ */
72
+ copyOnSelect?: boolean;
60
73
  /**
61
74
  * Blink the caret while the field has the keyboard. On by default.
62
75
  *
@@ -1 +1 @@
1
- {"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../src/control/text-area.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAY,eAAe,EAAE,MAAM,cAAc,CAAC;AAcxE,MAAM,WAAW,aAAc,SAAQ,QAAQ;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B;;;;;;;;;;;;;;;OAeG;IACH,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,gEAAgE;IAChE,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,gEAAgE;IAChE,UAAU,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACrC;;;;;;;OAOG;IACH,MAAM,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IACnC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,QAAQ,+DA6OnB,CAAC"}
1
+ {"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../src/control/text-area.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAwB,eAAe,EAAS,MAAM,cAAc,CAAC;AAiB3F,MAAM,WAAW,aAAc,SAAQ,QAAQ;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B;;;;;;;;;;;;;;;OAeG;IACH,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,gEAAgE;IAChE,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,gEAAgE;IAChE,UAAU,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACrC;;;;;;;OAOG;IACH,MAAM,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IACnC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,QAAQ,+DA4jBnB,CAAC"}