diff --git a/README.md b/README.md
index 461a602..a48179f 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
# Custom Electron Prompt
-[](https://www.npmjs.com/package/custom-electron-prompt)
-[](https://github.com/Araxeus/custom-electron-prompt/blob/main/LICENSE)
+[](https://www.npmjs.com/package/custom-electron-prompt)
+[](https://github.com/Araxeus/custom-electron-prompt/blob/main/LICENSE)
[](https://github.com/Araxeus/custom-electron-prompt)
[](https://araxeus.github.io/custom-electron-prompt)
@@ -19,7 +19,7 @@ There is also an option for a button with user-defined `onclick` function.
## Usage
-* 1: Install the npm package to your project directory with
+* 1: Install the npm package to your project directory with
```bash
npm install custom-electron-prompt
```
@@ -29,19 +29,19 @@ There is also an option for a button with user-defined `onclick` function.
```
* 2: Import prompt
-
+
```javascript
const prompt = require('custom-electron-prompt')
```
* 3: Create a prompt
-
+
```javascript
prompt([options, parentBrowserWindow])
```
-
+
calling the prompt function returns a Promise
-
+
Promise resolve returns the input or returns null if prompt was canceled
On error, Prompise reject returns custom error message
@@ -87,15 +87,15 @@ keybindOptions: [
]
```
-Return an array made of objects in format
+Return an array made of objects in format
-`{value: "copyAccelerator", accelerator: "Ctrl+Shift+Insert"}`
+`{value: "copyAccelerator", accelerator: "Ctrl+Shift+Insert"}`
where `accelerator` is the input for the `value` you registered
Code Example
-
+
```javascript
const kb = ($value, $label, $default) => { return { value: $value, label: $label, default: $default } };
prompt({
@@ -119,7 +119,7 @@ prompt({
.catch(console.error)
```
-
+
Screenshots
@@ -150,7 +150,7 @@ counterOptions: {
Code Example
-
+
```javascript
prompt({
title: "Counter",
@@ -165,7 +165,7 @@ prompt({
}, win).then(input => console.log(`input == ${input}`)).catch(console.error)
```
-
+
Screenshots
@@ -193,7 +193,7 @@ Must specify selectOptions with valid entries in **one** of the following format
Code Example
-
+
```javascript
prompt({
title: "Select",
@@ -209,7 +209,7 @@ prompt({
}, win).then(input => console.log(`input == ${input}`)).catch(console.error)
```
-
+
Screenshots
@@ -224,7 +224,7 @@ prompt({
### multiInput
-Create a prompt with multiple inputs.
+Create a prompt with multiple inputs. Select inputs can also be used.
Returns an array with with input in same order that was given to the options, for example:
multiInputOptions: [{usernameOptions}, {passwordOptions}] could return ["Jack", "61523"]
@@ -237,43 +237,54 @@ Must specify multiInputOptions with valid entries in the following format:
Code Example
-
+
```javascript
prompt({
- title: "credentials",
- label: "Please enter username and password",
- type: "multiInput",
- multiInputOptions:
- [{
- inputAttrs:
- {
- type: "email",
- required: true,
- placeholder: "email"
- }
- },
- {
- inputAttrs:
- {
- type: "password",
- placeholder: "password"
- }
- }],
- resizable: true,
- height: 150,
- width: 300,
+ title: "credentials",
+ label: "Login Info:",
+ type: "multiInput",
+ multiInputOptions:
+ [
+ {
+ inputAttrs:
+ {
+ type: "email",
+ required: true,
+ placeholder: "email"
+ }
+ },
+ {
+ inputAttrs:
+ {
+ type: "password",
+ placeholder: "password"
+ }
+ },
+ {
+ selectOptions: { na: "North America", eu: "Europe", other: "Other" },
+ value: "2"
+ }
+ ],
+ resizable: true,
+ width: 300,
+ height: 225,
}, win).then(input => console.log(`input == ${input}`)).catch(console.error)
```
-
+
Screenshots
-
+With `selectOptions`:
+
+
+
+
+Without `selectOptions`:
+*This screenshot also contains a custom button.*
+
-This screenshot also contains a custom button.
-
----
@@ -340,8 +351,8 @@ Adds an extra/custom button with special functionalities other than success or e
Code Example
-
-
+
+
```javascript
await prompt({
title: 'Login credentials',
@@ -373,7 +384,7 @@ await prompt({
button:
{
label: "Autofill",
- click: () =>
+ click: () =>
{
document.querySelectorAll("#data")[0].value = "mama@young.com";
document.querySelectorAll("#data")[1].value = "mysecretrecipe";
@@ -390,8 +401,8 @@ await prompt({
Screenshots
-
-
+
+
diff --git a/lib/page/prompt.js b/lib/page/prompt.js
index 8223c0d..5fbef17 100644
--- a/lib/page/prompt.js
+++ b/lib/page/prompt.js
@@ -68,7 +68,7 @@ function promptRegister() {
dataElement = promptCreateInput(promptOptions);
break;
case "select":
- dataElement = promptCreateSelect();
+ dataElement = promptCreateSelect(promptOptions);
break;
case "keybind":
dataElement = require("./keybind")(promptOptions.keybindOptions, dataContainerElement);
@@ -80,18 +80,20 @@ function promptRegister() {
return promptError(`Unhandled input type '${promptOptions.type}'`);
}
- if (promptOptions.type != "keybind" && promptOptions.type != "multiInput") {
- dataElement.setAttribute("id", "data");
+ if (promptOptions.type !== "multiInput") {
+ if (promptOptions.type !== "keybind") {
+ dataElement.setAttribute("id", "data");
- if (promptOptions.type !== "counter") {
- dataContainerElement.append(dataElement);
- }
- }
+ if (promptOptions.type !== "counter") {
+ dataContainerElement.append(dataElement);
+ }
- dataElement.focus();
+ if (promptOptions.type !== "select") {
+ dataElement.select();
+ }
+ }
- if (promptOptions.type !== "select" && promptOptions.type !== "keybind") {
- dataElement.select();
+ dataElement.focus?.();
}
//load custom script from options
@@ -213,9 +215,14 @@ function promptCreateInput(options) {
function promptCreateMultiInput(parentElement) {
let el;
for (const option of promptOptions.multiInputOptions) {
- el = promptCreateInput(option);
- el.setAttribute("id", "data");
-
+ if (option.inputAttrs) {
+ el = promptCreateInput(option);
+ el.setAttribute("id", "data");
+ }
+ if (option.selectOptions) {
+ el = promptCreateSelect(option);
+ el.setAttribute("id", "data");
+ }
parentElement.append(el);
}
@@ -223,19 +230,19 @@ function promptCreateMultiInput(parentElement) {
}
//create multiple select
-function promptCreateSelect() {
+function promptCreateSelect(options) {
const dataElement = document.createElement("select");
let optionElement;
- for (const k in promptOptions.selectOptions) {
- if (!Object.prototype.hasOwnProperty.call(promptOptions.selectOptions, k)) {
+ for (const k in options.selectOptions) {
+ if (!Object.prototype.hasOwnProperty.call(options.selectOptions, k)) {
continue;
}
optionElement = document.createElement("option");
optionElement.setAttribute("value", k);
- optionElement.textContent = promptOptions.selectOptions[k];
- if (k === promptOptions.value) {
+ optionElement.textContent = options.selectOptions[k];
+ if (k === options.value) {
optionElement.setAttribute("selected", "selected");
}
diff --git a/screenshots/multiInput/multiInputSelect.PNG b/screenshots/multiInput/multiInputSelect.PNG
new file mode 100644
index 0000000..6de1e28
Binary files /dev/null and b/screenshots/multiInput/multiInputSelect.PNG differ