updated docs and README

README.md

@@ -574,24 +574,26 @@ 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}`)
     drawGui()
 })
 ```
 
-### 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.

docs/InputPopup.md

@@ -8,6 +8,10 @@
 ## Members
 
 <dl>
+<dt><a href="#cursorPos">cursorPos</a> : <code>number</code></dt>
+<dd><p>Since v3.1.0 a blinking cursor has been added to InputPopup (thanks @Compositr)</p></dd>
+<dt><a href="#flashLoop">flashLoop</a> : <code>setInterval</code></dt>
+<dd><p>Since v3.1.0 a blinking cursor has been added to InputPopup (thanks @Compositr)</p></dd>
 <dt><a href="#x">x</a> : <code>number</code></dt>
 <dd><p>The x offset of the popup to be drown. If 0 it will be placed on the center</p></dd>
 <dt><a href="#y">y</a> : <code>number</code></dt>
@@ -43,6 +47,7 @@
 | value | <code>string</code> \| <code>number</code> | <p>The value of the popup.</p> |
 | numeric | <code>boolean</code> | <p>If the input is numeric.</p> |
 | [visible] | <code>boolean</code> | <p>If the popup is visible.</p> |
+| [placeholder] | <code>string</code> | <p>Optional placeholder to show if empty</p> |
 
 <a name="InputPopup"></a>
 
@@ -67,7 +72,7 @@
 
 ### new InputPopup(config)
 <p>This class is used to create a popup with a text or numeric input.</p>
-<p><img src="https://user-images.githubusercontent.com/14907987/165752281-e836b862-a54a-48d5-b4e7-954374d6509f.gif" alt="InputPopup"></p>
+<p><img src="https://github.com/Elius94/console-gui-tools/assets/14907987/eecac72f-9ccc-444b-a0e3-2b7e277fdeea" alt="InputPopup"></p>
 <p>Emits the following events:</p>
 <ul>
 <li>&quot;confirm&quot; when the user confirm the input</li>
@@ -81,7 +86,7 @@
 | config | [<code>InputPopupConfig</code>](#InputPopupConfig) | <p>The config of the popup.</p> |
 
 **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```
+```tsconst 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```
 <a name="InputPopup+keyListenerNumeric"></a>
 
 ### 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 [<code>InputPopup</code>](#InputPopup)  
 **Returns**: [<code>InputPopup</code>](#InputPopup) - <p>The instance of the InputPopup.</p>  
+<a name="cursorPos"></a>
+
+## cursorPos : <code>number</code>
+<p>Since v3.1.0 a blinking cursor has been added to InputPopup (thanks @Compositr)</p>
+
+**Kind**: global variable  
+<a name="flashLoop"></a>
+
+## flashLoop : <code>setInterval</code>
+<p>Since v3.1.0 a blinking cursor has been added to InputPopup (thanks @Compositr)</p>
+
+**Kind**: global variable  
 <a name="x"></a>
 
 ## x : <code>number</code>

docs/Utils.md

@@ -19,6 +19,8 @@
 <dd><p>This function is used to convert a styled element to a simplified styled element.</p></dd>
 <dt><a href="#simplifiedStyledToStyled">simplifiedStyledToStyled(simplifiedStyled)</a> ⇒ <code>*</code></dt>
 <dd><p>This function is used to convert a simplified styled element to a styled element.</p></dd>
+<dt><a href="#visibleLength">visibleLength(input)</a> ⇒ <code>number</code></dt>
+<dd><p>Count true visible length of a string</p></dd>
 </dl>
 
 ## 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 } }
 ```
+<a name="visibleLength"></a>
+
+## visibleLength(input) ⇒ <code>number</code>
+<p>Count true visible length of a string</p>
+
+**Kind**: global function  
+**Author**: Vitalik Gordon (xpl)  
+
+| Param | Type |
+| --- | --- |
+| input | <code>string</code> | 
+
 <a name="RGB"></a>
 
 ## RGB : <code>string</code>

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",

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)