diff --git a/README.md b/README.md index 838cbdd..c410746 100644 --- a/README.md +++ b/README.md @@ -574,7 +574,8 @@ new InputPopup({ id: "popupTypeMax", title: "Type max value", value: max, - numeric: true + numeric: true + placeholder: "Type a number" // since v3.1.0 }).show().on("confirm", (_max) => { max = _max GUI.warn(`NEW MAX VALUE: ${max}`) @@ -582,16 +583,17 @@ new InputPopup({ }) ``` -### Class InputPopup: +### Class InputPopup (updated in v3.1.0): constructor(id, title, value, isNumeric) - id: string - title: string - value: string | number - isNumeric: boolean + - placeholder: string (since v3.1.0) You can use it for example to set a numeric threshold: -![Animation](https://user-images.githubusercontent.com/14907987/162480554-3e29513b-13d1-4d3f-bd16-09cba30db358.gif) +![Animation](https://github.com/Elius94/console-gui-tools/assets/14907987/eecac72f-9ccc-444b-a0e3-2b7e277fdeea) If you set isNumeric to true, only numbers are allowed. All class of components will be destroyed when the popup is closed. The event listeners are removed from the store. Then the garbage collector will clean the memory. diff --git a/docs/InputPopup.md b/docs/InputPopup.md index caee59a..686bf67 100644 --- a/docs/InputPopup.md +++ b/docs/InputPopup.md @@ -8,6 +8,10 @@ ## Members
+
cursorPos : number
+

Since v3.1.0 a blinking cursor has been added to InputPopup (thanks @Compositr)

+
flashLoop : setInterval
+

Since v3.1.0 a blinking cursor has been added to InputPopup (thanks @Compositr)

x : number

The x offset of the popup to be drown. If 0 it will be placed on the center

y : number
@@ -43,6 +47,7 @@ | value | string \| number |

The value of the popup.

| | numeric | boolean |

If the input is numeric.

| | [visible] | boolean |

If the popup is visible.

| +| [placeholder] | string |

Optional placeholder to show if empty

| @@ -67,7 +72,7 @@ ### new InputPopup(config)

This class is used to create a popup with a text or numeric input.

-

InputPopup

+

InputPopup

Emits the following events:

## Typedefs @@ -170,6 +172,18 @@ const simplifiedStyledElement = styledToSimplifiedStyled({ text: "Hello world", ```js const styledElement = simplifiedStyledToStyled({ text: "Hello world", color: "red", bold: true }) // returns { text: "Hello world", style: { color: "red", bold: true } } ``` + + +## visibleLength(input) ⇒ number +

Count true visible length of a string

+ +**Kind**: global function +**Author**: Vitalik Gordon (xpl) + +| Param | Type | +| --- | --- | +| input | string | + ## RGB : string diff --git a/package.json b/package.json index e6c697c..98d40d0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "console-gui-tools", - "version": "3.0.4", + "version": "3.1.0", "description": "A simple library to draw option menu, text popup or other widgets and layout on a Node.js console.", "main": "dist/esm/ConsoleGui.mjs", "types": "dist/types/ConsoleGui.d.ts", diff --git a/src/components/widgets/InputPopup.ts b/src/components/widgets/InputPopup.ts index 255a59c..01b469a 100644 --- a/src/components/widgets/InputPopup.ts +++ b/src/components/widgets/InputPopup.ts @@ -33,7 +33,7 @@ export interface InputPopupConfig { * @extends EventEmitter * @description This class is used to create a popup with a text or numeric input. * - * ![InputPopup](https://user-images.githubusercontent.com/14907987/165752281-e836b862-a54a-48d5-b4e7-954374d6509f.gif) + * ![InputPopup](https://github.com/Elius94/console-gui-tools/assets/14907987/eecac72f-9ccc-444b-a0e3-2b7e277fdeea) * * Emits the following events: * - "confirm" when the user confirm the input @@ -56,7 +56,9 @@ export class InputPopup extends EventEmitter { title: string value: string | number // Position of the cursor. 0-indexed (0 = before all the text) + /** @var {number} cursorPos - Since v3.1.0 a blinking cursor has been added to InputPopup (thanks @Compositr) */ cursorPos: number + /** @var {setInterval} flashLoop - Since v3.1.0 a blinking cursor has been added to InputPopup (thanks @Compositr) */ flashLoop = setInterval(() => { this.draw(); this.CM.refresh() }, 500)