Plugin idea for providing API for showing several types of dialog

Plugins ideas
1

A bit of context

Templater, QuickAdd plugins and maybe some other have either an API that allows showing some dialogs and asking the user some information.

For example, Templater have

  • tp.system.prompt
  • tp.system.suggester

See the templater API doc

As an another example, QuickAdd have

  • inputPrompt
  • wideInputPrompt
  • yesNoPrompt
  • suggester
  • checkboxPrompt

See the QuickAdd API doc

Sadly, one must install those plugins and more to have these methods and sometimes it’s not easy to mix and match.

The proposal - DialogServices

One plugin to rule them all :grin:
… only the dialog parts I must say :wink:

A plugin that would have the following functionalities:

1. Prompt for text, single line or multiple lines

Name: inputPrompt
Parameters:

  • header text
  • placeholder text, optional
  • default value to already fill the input area, optional
  • allow multiple lines
  • throwing an error or null if canceled

Signature:

dialogServices.inputPrompt(header: string, placeholder?: string, defaultValue?: string, allowMultiLines?: boolean = false, throwOnCancel?: boolean = false) : Promise<string>

Note:

  • ENTER/RETURN key to accept the input in single line mode, CTRL-ENTER/RETURN key to accept input in multi lines mode.
  • ESC key to cancel the prompt

2. Prompt for a yes/no response

Name: yesNoPrompt
Parameters:

  • header text
  • text to display, optional
  • text to use for “yes”, optional
  • text to use for “no”, optional
  • background color for “yes”, optional, overrides CSS
  • foreground color for “yes”, optional, overrides CSS
  • background color for “no”, optional, overrides CSS
  • foreground color for “no”, optional, overrides CSS
  • throwing an error or null if canceled, optional

Signature:

dialogServices.yesNoPrompt(header: string, text?: string, yesText?: string, noText?: string, yesBackColor?: string, yesForeColor?: string, noBackColor?: string, noForeColor?: string, throwOnCancel?: boolean = false) : Promise<boolean>

Note:

  • ESC key to cancel the prompt

3. Prompt for multiple choices, using checkboxes

Name: choicesPrompt
Parameters:

  • header text
  • text to display, optional
  • items, each item is for a checkbox
  • selectedItems, each item is already checked
  • text to use for the “OK” button, optional
  • background color for the “OK” button, optional, overrides CSS
  • foreground color for the “OK” button, optional, overrides CSS
  • throwing an error or null if canceled, optional

Signature:

dialogServices.choicesPrompt(header: string, text?: string, items: string[], selectedItems: string[], okText?: string, okBackColor?: string, okForeColor?: string, throwOnCancel?: boolean = false) : Promise<string[]>

Note:

  • ESC key to cancel the prompt

4. Prompt to select one choice amongst those suggested

Name: suggester
Parameters:

  • header text
  • display text for the items, another array or a function
  • items, a string or any object, passed to the display text function (if any)
  • throwing an error or null if canceled, optional
  • placeholder text, optional
  • limit number, optional

Signature:

dialogServices.suggester(header: string, displayItems: string[] | ((item: T, index?: number, arr?: string[]) => string[]), items: T[], throwOnCancel?: boolean = false, placeholder?: string, limit?: undefined) : Promise<string>

Note:

  • ESC key to cancel the prompt

Conclusion

I thought of having a rather more generic method to “build up” the UI from some kind of markup for texts, inputs, checkboxes, radio buttons, lists, etc… Not sure if this would be handy or doable nicely.

I could try to create this plugin but it will take a long time to get there.
… unless someone else would like to have a go at it :wink:

Any ideas are welcome to get this ball rolling.