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
number
Since v3.1.0 a blinking cursor has been added to InputPopup (thanks @Compositr)
setInterval
Since v3.1.0 a blinking cursor has been added to InputPopup (thanks @Compositr)
number
The x offset of the popup to be drown. If 0 it will be placed on the center
number
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.
- +Emits the following events:
InputPopupConfig
](#InputPopupConfig) | The config of the popup.
| **Example** -```ts const popup = new InputPopup({ id: "popup1", title: "Choose the number", value: selectedNumber, numeric: true }).show().on("confirm", (value) => { console.log(value) }) // show the popup and wait for the user to confirm ``` +```ts const popup = new InputPopup({ id: "popup1", title: "Choose the number", value: selectedNumber, numeric: true }).show().on("confirm", (value) => { console.log(value) }) // show the popup and wait for the user to confirm ``` ### inputPopup.keyListenerNumeric(_str, key) @@ -169,6 +174,18 @@ Inside this function are defined all the keys that can be pressed and the action **Kind**: instance method of [InputPopup
](#InputPopup)
**Returns**: [InputPopup
](#InputPopup) - The instance of the InputPopup.
+ + +## cursorPos :number
+Since v3.1.0 a blinking cursor has been added to InputPopup (thanks @Compositr)
+ +**Kind**: global variable + + +## flashLoop :setInterval
+Since v3.1.0 a blinking cursor has been added to InputPopup (thanks @Compositr)
+ +**Kind**: global variable ## x :number
diff --git a/docs/Utils.md b/docs/Utils.md
index 3a70e07..4beec22 100644
--- a/docs/Utils.md
+++ b/docs/Utils.md
@@ -19,6 +19,8 @@
This function is used to convert a styled element to a simplified styled element.
*
This function is used to convert a simplified styled element to a styled element.
number
Count true visible length of a string
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)