docs(prompt): update readme and add new example gifs

examples/prompt/prompt_demo.ts

@@ -1,6 +1,7 @@
 #!/usr/bin/env -S deno run --unstable
 
 import { rgb24 } from "https://deno.land/std@0.74.0/fmt/colors.ts";
+import { AnsiEscape } from "../../ansi_escape/ansi_escape.ts";
 import { prompt } from "../../prompt/prompt.ts";
 import { Checkbox } from "../../prompt/checkbox.ts";
 import { Input } from "../../prompt/input.ts";
@@ -9,49 +10,26 @@ import { Number } from "../../prompt/number.ts";
 import { Secret } from "../../prompt/secret.ts";
 import { Select } from "../../prompt/select.ts";
 import { Toggle } from "../../prompt/toggle.ts";
-
-const colors: Record<string, number> = {
-  alloyOrange: 0xC46210,
-  darkMagenta: 0x8B008B,
-  darkSkyBlue: 0x8CBED6,
-  deepSaffron: 0xFF9933,
-  amaranthRed: 0xD3212D,
-  amber: 0xFFBF00,
-  arcticLime: 0xD0FF14,
-};
+import { colors } from "./data/colors.ts";
+import { firstNames } from "./data/first_names.ts";
 
 const result = await prompt([{
   name: "text",
   message: "Enter some cool stuff",
   type: Input,
+}, {
+  message: "Whats your name?",
+  name: "text",
+  type: Input,
+  suggestions: firstNames,
 }, {
   name: "color",
-  type: Select,
   message: "Choose a color",
-  options: [{
-    name: "Alloy Orange",
-    value: "alloyOrange",
-  }, {
-    name: "Dark Magenta",
-    value: "darkMagenta",
-  }, {
-    name: "Dark Sky Blue",
-    value: "darkSkyBlue",
-  }, {
-    name: "Deep Saffron",
-    value: "deepSaffron",
-  }, {
-    name: "Amaranth Red",
-    value: "amaranthRed",
-  }, {
-    name: "Amber",
-    value: "amber",
-  }, {
-    name: "Arctic Lime",
-    value: "arcticLime",
-  }].map((color) => ({
-    name: rgb24(color.name, colors[color.value]),
-    value: color.value,
+  type: Select,
+  search: true,
+  options: Object.entries<number>(colors).map(([name, value]) => ({
+    name: rgb24(name, value),
+    value: name,
   })),
 }, {
   name: "animals",
@@ -103,6 +81,11 @@ const result = await prompt([{
   name: "tags",
   message: "Enter some comma separated words",
   type: List,
+  suggestions: ["deno", "typescript", "cliffy"],
 }]);
 
 console.log("result:", result);
+
+AnsiEscape.from(Deno.stdout).cursorHide();
+await new Promise((resolve) => setTimeout(resolve, 1000));
+AnsiEscape.from(Deno.stdout).cursorTo(0, 0);

examples/prompt/suggestions.ts

@@ -0,0 +1,13 @@
+#!/usr/bin/env -S deno run --unstable
+
+import { Input } from "../../prompt/input.ts";
+import { colors } from "./data/colors.ts";
+
+const colorNames: Array<string> = Object.values(colors);
+
+const color: string = await Input.prompt({
+  message: "Choose a color",
+  suggestions: colorNames,
+});
+
+console.log({ color });

examples/prompt/suggestions_list.ts

@@ -0,0 +1,15 @@
+#!/usr/bin/env -S deno run --unstable
+
+import { Input } from "../../prompt/input.ts";
+import { colors } from "./data/colors.ts";
+
+const colorNames: Array<string> = Object.keys(colors);
+
+const color = await Input.prompt({
+  message: "Choose a color",
+  suggestions: colorNames,
+  list: true,
+  info: true,
+});
+
+console.log({ color });

prompt/README.md

@@ -29,7 +29,7 @@
 </p>
 
 <p align="center">
-  <img alt="prompt" src="assets/img/prompt_list.gif"/>
+  <img alt="prompt" src="assets/img/prompt_demo.gif"/>
 </p>
 
 ## ❯ Content
@@ -259,7 +259,7 @@ Execute a list of prompts.
 An prompt object has following options and all type specific options. See the list of [prompt types](#-types) for all available options.
 
 | Param | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | name | `string` | Yes | The response will be saved under this key/property in the returned response object. |
 | type | `string` | Yes | Defines the type of prompt to display. See the list of [prompt types](#-types) for valid values. |
 | before | `(result, next) => Promise<void>` | No | `next()`execute's the next prompt in the list (for the before callback it's the current prompt). To change the index to a specific prompt you can pass the name or index of the prompt to the `next()` method. To skip this prompt you can pass `true` to the `next()` method. If `next()` isn't called all other prompts will be skipped. |
@@ -268,7 +268,7 @@ An prompt object has following options and all type specific options. See the li
 The prompt method has also following global options.
 
 | Param | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | before | `(result, next) => Promise<void>` | No | Same as above but will be executed before every prompt. |
 | after | `(result, next) => Promise<void>` | No | Same as above but will be executed after every prompt. |
 
@@ -292,13 +292,14 @@ For all available options see [prompt types](#-types).
 All prompts have the following base options:
 
 | Param | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | message | `string` | Yes | Prompt message to display. |
 | default | `T` | No | Default value. Type depends on prompt type. |
 | transform | `(value: V) => T \| undefined` | No | Receive user input. The returned value will be returned by the `.prompt()` method. |
 | validate | `(value: T \| undefined) => ValidateResult` | No | Receive sanitized user input. Should return `true` if the value is valid, and an error message `String` otherwise. If `false` is returned, a default error message is shown |
 | hint | `string` | No | Hint to display to the user. (not implemented) |
 | pointer | `string` | No | Change the pointer icon. |
+| indent | `string` | No | Prompt indentation. Defaults to `' '` |
 
 ***
 
@@ -318,14 +319,86 @@ const name: string = await Input.prompt("What's your github user name?");
 $ deno run --unstable https://deno.land/x/cliffy/examples/prompt/input.ts
 ```
 
+#### Auto suggestions
+
+You can add suggestions to the `Input`, `Number` and `List` prompt to enable tab-completions.
+
+![](assets/img/suggestions.gif)
+
+```typescript
+import { Input } from "https://deno.land/x/cliffy/prompt/input.ts";
+
+const color: string = await Input.prompt({
+  message: "Choose a color",
+  suggestions: [
+    "Abbey",
+    "Absolute Zero",
+    "Acadia",
+    "Acapulco",
+    "Acid Green",
+    "Aero",
+    "Aero Blue",
+    "Affair",
+    "African Violet",
+    "Air Force Blue",
+  ],
+});
+
+console.log({ color });
+```
+
+```
+$ deno run --unstable https://deno.land/x/cliffy/examples/prompt/suggestions.ts
+```
+
+Suggestions can be also shown as a list. Matched suggestions will be highlighted in the list and can be completed
+with the `tab` key.
+
+You can also enable the info bar to show the number of available suggestions and usage information. 
+
+![](assets/img/suggestions_list.gif)
+
+```typescript
+import { Input } from "https://deno.land/x/cliffy/prompt/input.ts";
+
+const color: string = await Input.prompt({
+  message: "Choose a color",
+  list: true,
+  info: true,
+  suggestions: [
+    "Abbey",
+    "Absolute Zero",
+    "Acadia",
+    "Acapulco",
+    "Acid Green",
+    "Aero",
+    "Aero Blue",
+    "Affair",
+    "African Violet",
+    "Air Force Blue",
+  ],
+});
+
+console.log({ color });
+```
+
+```
+$ deno run --unstable https://deno.land/x/cliffy/examples/prompt/suggestions_list.ts
+```
+
 **Options**
 
 The `Input` prompt has all [base](#base-options) and the following prompt specific options.
 
 | Param | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | minLength | `number` | No | Min length of value. Defaults to `0`. |
 | maxLength | `number` | No | Max length of value. Defaults to `infinity`. |
+| suggestions | `Array<string \| number>` | No | A list of auto suggestions. |
+| list | `number` | No | Show auto suggestions list. |
+| maxRows | `number` | No | Number of options suggestions per page. Defaults to `10`. |
+| listPointer | `string` | No | Change the list pointer icon. |
+| info | `number` | No | Show some usage information. |
 
 **↑ back to:** [Prompt types](#-types)
 
@@ -352,11 +425,16 @@ $ deno run --unstable https://deno.land/x/cliffy/examples/prompt/number.ts
 The `Number` prompt has all [base options](#base-options) and the following prompt specific options.
 
 | Param | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | min | `number` | No | Min value. Defaults to `-infinity`. |
 | max | `number` | No | Max value. Defaults to `Infinity`. |
 | float | `boolean` | No | Allow floating point inputs. Defaults to `false`. |
 | round | `number` | No | Round float values to `x` decimals. Defaults to `2`. |
+| suggestions | `Array<string \| number>` | No | A list of auto suggestions. |
+| list | `number` | No | Show auto suggestions list. |
+| maxRows | `number` | No | Number of options suggestions per page. Defaults to `10`. |
+| listPointer | `string` | No | Change the list pointer icon. |
+| info | `number` | No | Show some usage information. |
 
 **↑ back to:** [Prompt types](#-types)
 
@@ -383,7 +461,7 @@ $ deno run --unstable https://deno.land/x/cliffy/examples/prompt/secret.ts
 The `Secret` prompt has all [base options](#base-options) and the following prompt specific options.
 
 | Param | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | label | `string` | No | Name of secret. Defaults to `Password`. |
 | hidden | `number` | No | Hide input during typing and show a fix number of asterisk's on success. |
 | minLength | `number` | No | Min length of secret value. Defaults to `0`. |
@@ -414,7 +492,7 @@ $ deno run --unstable https://deno.land/x/cliffy/examples/prompt/confirm.ts
 The `Config` prompt has all [base options](#base-options) and the following prompt specific options.
 
 | Param | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | active | `string` | No | Text for `active` state. Defaults to `'Yes'`. |
 | inactive | `string` | No | Text for `inactive` state. Defaults to `'No'`. |
 
@@ -443,7 +521,7 @@ $ deno run --unstable https://deno.land/x/cliffy/examples/prompt/toggle.ts
 The `Toggle` prompt has all [base options](#base-options) and the following prompt specific options.
 
 | Param | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | active | `string` | No | Text for `active` state. Defaults to `'Yes'`. |
 | inactive | `string` | No | Text for `inactive` state. Defaults to `'No'`. |
 
@@ -472,12 +550,17 @@ The `List` prompt has all [base options](#base-options) and the following prompt
 **Options**
 
 | Param | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | separator | `string` | No | String separator. Will trim all white-spaces from start and end of string. Defaults to `','`. |
 | minLength | `number` | No | Min length of a single tag. Defaults to `0`. |
 | maxLength | `number` | No | Max length of a single tag. Defaults to `infinity`. |
 | minTags | `number` | No | Min number of tags. Defaults to `0`. |
 | maxTags | `number` | No | Max number of tags. Defaults to `infinity`. |
+| suggestions | `Array<string \| number>` | No | A list of auto suggestions. |
+| list | `number` | No | Show auto suggestions list. |
+| maxRows | `number` | No | Number of options suggestions per page. Defaults to `10`. |
+| listPointer | `string` | No | Change the list pointer icon. |
+| info | `number` | No | Show some usage information. |
 
 **↑ back to:** [Prompt types](#-types)
 
@@ -514,16 +597,17 @@ $ deno run --unstable https://deno.land/x/cliffy/examples/prompt/select.ts
 The `Select` prompt has all [base options](#base-options) and the following prompt specific options.
 
 | Param | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | options | `(string \| Option)[]` | Yes | Array of string's or Option's. |
 | maxRows | `number` | No | Number of options displayed per page. Defaults to `10`. |
-| indent | `string` | No | List indentation. Defaults to `' '` |
 | listPointer | `string` | No | Change the list pointer icon. |
+| search | `boolean` | No | Enable search/filter input. |
+| searchLabel | `string` | No | Change the search input label. |
 
-**`Option` Options**
+**Option**
 
 | Param | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | value | `string` | Yes | Value which will be returned as result. |
 | name | `string` | No | Name is displayed in the list. Defaults to `value` |
 | disabled | `boolean` | No | Disabled item. Can't be selected. |
@@ -563,20 +647,21 @@ $ deno run --unstable https://deno.land/x/cliffy/examples/prompt/checkbox.ts
 The `Checkbox` prompt has all [base options](#base-options) and the following prompt specific options.
 
 | Param | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | options | `(string \| Option)[]` | Yes | Array of string's or Option's. |
 | maxRows | `number` | No | Number of options displayed per page. Defaults to `10`. |
 | minOptions | `number` | No | Min number of selectable options. Defaults to `0`. |
 | maxOptions | `number` | No | Max number of selectable options. Defaults to `infinity`. |
-| indent | `string` | No | List indentation. Defaults to `' '` |
 | listPointer | `string` | No | Change the list pointer icon. |
+| search | `boolean` | No | Enable search/filter input. |
+| searchLabel | `string` | No | Change the search input label. |
 | check | `string` | No | Change the check icon. |
 | uncheck | `string` | No | Change the uncheck icon. |
 
-**`Option` Options**
+**Option**
 
 | Param | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | value | `string` | Yes | Value which will be added to the returned result array. |
 | name | `string` | No | Name is displayed in the list. Defaults to `value`. |
 | disabled | `boolean` | No | Disabled item. Can't be selected. |

prompt/_generic_list.ts

@@ -6,7 +6,6 @@ import {
   GenericInputPromptSettings,
 } from "./_generic_input.ts";
 import { bold, dim, stripColor, yellow } from "./deps.ts";
-import { SelectOption } from "./select.ts";
 
 /** Select key options. */
 export interface GenericListKeys extends GenericInputKeys {
@@ -100,10 +99,11 @@ export abstract class GenericList<T, V, S extends GenericListSettings<T, V>>
 
   protected match(): void {
     this.options = this.settings.options.filter(
-      (option: SelectOption) =>
-        (option.name ?? option.value).toString().toLowerCase().startsWith(
-          this.getCurrentInputValue().toLowerCase(),
-        ),
+      (option: GenericListOption) =>
+        stripColor(option.name ?? option.value).toString().toLowerCase()
+          .startsWith(
+            this.getCurrentInputValue().toLowerCase(),
+          ),
     );
     this.listIndex = Math.max(
       0,

prompt/_generic_suggestions.ts

@@ -5,7 +5,7 @@ import {
   GenericInputPromptOptions,
   GenericInputPromptSettings,
 } from "./_generic_input.ts";
-import { blue, bold, dim, underline } from "./deps.ts";
+import { blue, bold, dim, stripColor, underline } from "./deps.ts";
 import { Figures } from "./figures.ts";
 
 /** Input keys options. */
@@ -77,7 +77,7 @@ export abstract class GenericSuggestions<
     }
     this.suggestions = this.settings.suggestions.filter(
       (value: string | number) =>
-        value.toString().toLowerCase().startsWith(
+        stripColor(value.toString()).toLowerCase().startsWith(
           this.getCurrentInputValue().toLowerCase(),
         ),
     );