josephrocca / prompt2

A rough sketch of an async version of window.prompt that has a bunch of different input types (date, <select>, color, file, etc)

Kind of an async version of prompt, but with a lot more features.

Usage

let prompt2 = await import("https://cdn.jsdelivr.net/gh/josephrocca/prompt2@v0.0.4/mod.js");

let results = await prompt2({
  foo: {label:"Enter a value for foo", type:"textLine", defaultValue:"123", placeholder:"Some placeholder text"}, // single line of text
  bar: {label: "Write a value for bar in this textarea", type:"text", defaultValue:"123\nabc"}, // multi-line text (textarea)
  baz: {label: "Select a value", type:"select", options:[{content:"abc", value:"123"}, {content:"xyz", value:"987"}]},
  xyz: {show:d=>d.baz==="987", ...}, // only show this input if baz is set to 987
  hello: {hidden:true, ...}, // this is not shown by default - user must click "show hidden inputs" button to show it
  world: {infoTooltip:"You can put some longer explanation text here to supplement the `label`", ...},
  uhh: {type:"text", minHeight:"20vh", height:"fit-content", max-height:"30vh", cssText:"white-space:pre;"},
});
if(!result) {
  // they clicked 'cancel'
}

console.log(result.foo);
console.log(result.bar);
console.log(result.baz);
...

You can pass an options object as the second parameter to prompt2:

{
  showHiddenInputsText: "show advanced settings", // default is "Show hidden inputs"
  submitButtonText: "save", // default is "submit"
  cancelButtonText: "back", // default is "cancel" - set to `null` to remove the cancel button
  backgroundColor: "blue",
  borderRadius: "3px",
  borderColor: "red",
}