{"id":43406378,"url":"https://github.com/aditosoftware/vscode-input","last_synced_at":"2026-02-02T15:59:47.813Z","repository":{"id":257376357,"uuid":"856723359","full_name":"aditosoftware/vscode-input","owner":"aditosoftware","description":"Simple way to use inputs in VS Code extensions","archived":false,"fork":false,"pushed_at":"2026-01-27T06:05:24.000Z","size":3592,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-27T19:17:10.249Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@aditosoftware/vscode-input","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aditosoftware.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-09-13T04:50:43.000Z","updated_at":"2026-01-27T06:05:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"a79581bc-8885-4f60-b33c-ee288ab073da","html_url":"https://github.com/aditosoftware/vscode-input","commit_stats":null,"previous_names":["aditosoftware/vscode-input"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/aditosoftware/vscode-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aditosoftware%2Fvscode-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aditosoftware%2Fvscode-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aditosoftware%2Fvscode-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aditosoftware%2Fvscode-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aditosoftware","download_url":"https://codeload.github.com/aditosoftware/vscode-input/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aditosoftware%2Fvscode-input/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29015063,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-02T14:58:54.169Z","status":"ssl_error","status_checked_at":"2026-02-02T14:58:51.285Z","response_time":58,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-02T15:59:46.988Z","updated_at":"2026-02-02T15:59:47.806Z","avatar_url":"https://github.com/aditosoftware.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vscode-input\n\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=aditosoftware_vscode-input\u0026metric=alert_status)](https://sonarcloud.io/summary/new_code?id=aditosoftware_vscode-input)\n[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=aditosoftware_vscode-input\u0026metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=aditosoftware_vscode-input)\n[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=aditosoftware_vscode-input\u0026metric=coverage)](https://sonarcloud.io/summary/new_code?id=aditosoftware_vscode-input)\n[![Lines of Code](https://sonarcloud.io/api/project_badges/measure?project=aditosoftware_vscode-input\u0026metric=ncloc)](https://sonarcloud.io/summary/new_code?id=aditosoftware_vscode-input)\n\nThis is used to add a simple and easy to use input elements to any VS Code extension.\n\nThese input elements should be used for any multi step inputs.\n\n## Installation\n\nYou can install this dependency normally.\n\n```shell\nnpm install @aditosoftware/vscode-input\n```\n\n## Usage\n\n### Basic Usage\n\nYour project is expected to have any dependency to [@aditosoftware/vscode-logging](https://github.com/aditosoftware/vscode-logging) and configure it accordingly.\n\nBefore you can start using any multi step inputs, you need to initialize the logging via `initializeLogger`. This can be done in your `activate` function of the extension.\n\n```typescript\nimport * as vscode from \"vscode\";\nimport { Logger } from \"@aditosoftware/vscode-logging\";\nimport { initializeLogger } from \"@aditosoftware/vscode-input\";\n\nexport async function activate(context: vscode.ExtensionContext) {\n  // initialize the logger\n  Logger.initializeLogger(context, \"NameOfYourExtension\");\n  // and pass the logger to the input\n  initializeLogger(Logger.getLogger());\n}\n```\n\nThe basic usage is to define the [components](#components) that should be used for the multi step input, then call the `handleMultiStepInput`, which goes through the array of components and show them step by step and then [handle the result](#handle-the-result) given by the dialog.\n\nThis can be an example call order of the multi step input.\nYou can use this example. The only things you need to do is to fill the [components](#components), set the `title` and [handle the result](#handle-the-result).\n\n```typescript\nasync function callMyDialog() {\n  // The components that should be shown\n  const components = [];\n\n  // The title that should be shown above every input. It will automatically include any step counter\n  const title = \"Demonstration for inputs\";\n\n  // call the multi step input\n  const result = await handleMultiStepInput(title, components);\n\n  if (result) {\n    // handle the result\n  }\n}\n```\n\n### Handle the result\n\nThe result can be either `undefined` (when any input was cancelled or a confirmation dialog was not confirmed) or an object of the class `DialogValues` (when every input has an value).\n\nThe attribute `uri` of the `DialogValues` will be never filled from this dependency. Instead, you can fill it before calling the dialog as an additional information, if the dialog was called on a file / folder.\n\nThe attribute `confirmation` of the `DialogValues` will be only filled, when the input type `ConfirmationDialog` was there. You do not need to read this value, because no confirmation will result in a `undefined` result.\n\nThe attribute `inputValues` holds all inputs that were made during the dialog. For reading the `inputValues`, you need the `name` of any [component](#components). All the values will be given as `string[]`, even if the input was just a string.\n\n### Custom actions before and after a component\n\nYou can make custom action before and after every input.\n\nIf you want your step only be shown at specific circumstances, e.g. when a specific previous dialog value was selected, then you can use `onBeforeInput` in your options. If the function returns `false`, then this component will be skipped.\nThe step count will be adjusted accordingly. If you have a multi step input with 3 steps, and the second step will be skipped, then the count will be `Step 1 of 3` (for the first element) and `Step 2 of 2` (for the third element).\n\nIf you want to manipulate your input data after an input was made, you can use `onAfterInput`. This can be for example used, if you get a value from any dialog values normal input that should be used as an uri instead.\n\n## Components\n\nAll components have one constructor, which takes `\u003cComponentName\u003eOptions`. These options are explained in the documentation of the corresponding component.\n\n**Note:** The `name` attribute needs to be always there. This is used to assign the inputted values in the `DialogValues`. Therefore, the name need to be unique for every component in a multi step input. However, you can reuse the name among different multi step inputs.\n\nA complete example can be seen in [sample.ts](/test/sample/sample.ts).\n\n### Confirmation Dialog\n\nShow a confirm dialog. This should be used as a last step of the multi-step-input to confirm any destructive options (e.g. deletion).\n\nThe dialog itself will be shown in the foreground and looks OS specific.\n\n```typescript\nnew ConfirmationDialog({\n    name: \"Confirmation\",\n    message: \"My message\",\n    detail: (dialogValues: DialogValues) =\u003e `Detail: ${dialogValues.inputValues.size}`,\n    confirmButtonName: \"Confirm Delete\",\n  }),\n```\n\nThis code will lead the following input:\n\n| Windows                                                   | macOs                                               |\n| --------------------------------------------------------- | --------------------------------------------------- |\n| ![dialog on windows](media/confirmationDialogWindows.png) | ![dialog on macOs](media/confirmationDialogMac.png) |\n\nYou can see that in both cases, it is an os specific dialog. The position of the buttons can not be changed and may be different depending on the OS.\n\n### Input Box\n\nLet the user enter a text value. The result will be always a `string`. In the example below you can see how to extract the value from the result.\n\nThis input box is highly customable. That means, you have every option from `vscode.InputBoxOptions` available in the attribute `inputBoxOptions`, except `title`.\n\nExample for a multi step input with one input boxes:\n\n```typescript\nconst components = [\n  // This box has only the placeholder given. This is a required element for any inputs.\n  new InputBox({\n    name: \"userName\",\n    inputBoxOptions: {\n      placeHolder: \"Give any user name\",\n    },\n  }),\n\n  // place any other inputs here\n];\n\nconst result = await handleMultiStepInput(\"Demonstration for inputs\", components);\n\nif (result) {\n  // getting the results of the input values\n  const userName = result.inputValues.get(\"userName\")?.[0];\n\n  // handle result\n}\n```\n\nThis code will lead the following input:\n\n![userName input](media/inputBox.png)\n\nHere you can see, that a given title was used.\n\n### Loading Quick Pick\n\nThis component is similar to [Quick Pick](#quick-pick), but adds a better loading handling. You should use this component, if you want a quick pick with loading and reloading abilities. This should be also used, if your load method takes a while.\n\nSince `LoadingQuickPick` extends [Quick Pick](#quick-pick), some options are the same and not described here.\n\nAdditionally, you can give an additional `reloadItems` function to reload your items. If you do not give a separate function, then `generateItems` will be used to reload the items.\n\nDuring the loading, a placeholder for the loading will be visible. For your reload button, you can customize the tooltip with the `reloadTooltip`.\n\n```typescript\nnew LoadingQuickPick({\n  name: \"foodPreferenceLoading\",\n  placeHolder: \"Select your food preference\",\n\n  generateItems: () =\u003e [\n    { label: \"Meat\", description: \"Eat any kind of meat\" },\n    { label: \"Fish\", description: \"Eat any kind of fish\" },\n    { label: \"Vegetarian\", description: \"Eat no meat and fish, but animal products like milk\" },\n    { label: \"Vegan\", description: \"Eat no animal products\" },\n  ],\n  // long running function to reload the items\n  reloadItems: async () =\u003e {\n    const foodPreferences: string[] = await queryWebsiteForFoodPreferences();\n\n    return foodPreferences.map((pPreference) =\u003e {\n      const item: vscode.QuickPickItem = {\n        label: pPreference,\n      };\n      return item;\n    });\n  },\n  reloadTooltip: \"Reload food preferences\",\n});\n```\n\nThis will produce the following input:\n\n![loading quick pick](media/loadingQuickPick.gif)\n\nYou can see here the custom reload tooltip. During the loading, you can see the loading spinner (above the first option and below the input) as well as the loading placeholder. After the loading, it will change back to your given placeholder.\n\n### Open Dialog\n\nShows an OS specific file chooser to select any number of files and folders.\n\nYou can give any options to the open dialog of vscode by using the `openDialogOptions` except `title`. The title that will be shown is the title given in `handleMultiStepInputs`.\n\n**NOTE**: The `title` will not be visible on macOS. Therefore, `openLabel` should contain information what the user should input in this dialog.\n\n```typescript\nconst inputs = [\n  new OpenDialog({\n    name: \"chooseAnyFile\",\n    openDialogOptions: { openLabel: \"Select any file\" },\n  }),\n\n  new OpenDialog({\n    name: \"chooseTextFile\",\n    openDialogOptions: {\n      openLabel: \"Select any text file\",\n      filters: {\n        Text: [\"txt\"],\n      },\n    },\n  }),\n];\n```\n\n#### Open dialog for `chooseAnyFile`\n\nYou can see here that you can choose any file you want. On Windows, you can see the title `Demonstration for inputs (Step 3 of 6)` which can not be seen on macOs.\n\n##### Windows\n\n![open dialog with all file types on windows](media/openDialogAllFilesWindows.png)\n\n##### macOS\n\n![open dialog with all file types on macOS](media/openDialogAllFilesMac.png)\n\n#### Open dialog for `chooseTextFile`\n\nYou can see here that the dialog is restricted to `txt` files. On Windows, you can see the title `Demonstration for inputs (Step 4 of 6)` which can not be seen on macOs.\n\n##### Windows\n\n![open dialog with txt file types on windows](media/openDialogFileFilterWindows.png)\n\n##### macOS\n\n![open dialog with txt file types on macOS](media/openDialogFileFilterMac.png)\n\n### Quick Pick\n\nAny drop down for selecting one or multiple values.\n\nTo set the items, you need to use the `generateItems` attribute. Here you can give either a sync or async function to load any data. These function can either return `\u003cvscode.QuickPickItem[]` or `QuickPickItems`, which can be used to set a custom additional placeholder after the loading.\n\nIf you want a quick pick with loading, you should use [Loading Quick Pick](#loading-quick-pick).\n\nA basic quick pick can look as following:\n\n```typescript\nnew QuickPick({\n  name: \"foodPreference\",\n  placeHolder: \"Select your food preference\",\n  generateItems: () =\u003e [\n    { label: \"Meat\", description: \"Eat any kind of meat\" },\n    { label: \"Fish\", description: \"Eat any kind of fish\" },\n    { label: \"Vegetarian\", description: \"Eat no meat and fish, but animal products like milk\" },\n    { label: \"Vegan\", description: \"Eat no animal products\" },\n  ],\n});\n```\n\nThis code will lead the following input:\n\n![quick pick](media/quickPick.png)\n\n### Own Components\n\nYou can write your own components by either extending `InputBase` or any of the existing classes.\n\nHere is a checklist of what needs to be considered when making a new input:\n\n- Extend the corresponding options in order to pass only one argument in the constructor.\n- Make your overwritten `showDialog` function `async`\n- Reduce the return arguments from `showDialog` from the given `Promise\u003cstring | boolean | string[] | undefined\u003e` to a smaller range, e.g. `Promise\u003cstring | undefined\u003e`\n- Do not set any custom title. Instead, use the passed title in `showDialog`. This already contains a step counter.\n- If your component supports a back button (when depending on `vscode.InputBox` or `vscode.QuickPick`), show it when the flag `showBackButton` is set:\n  ```typescript\n  if (showBackButton) {\n    quickPick.buttons = [vscode.QuickInputButtons.Back];\n  }\n  ```\n  Don't forget to handle the back button by resolving `InputAction.BACK`:\n  ```typescript\n  quickPick.onDidTriggerButton((button) =\u003e {\n    if (button === vscode.QuickInputButtons.Back) {\n      resolve(InputAction.BACK);\n    }\n  });\n  ```\n\n## Contribution Notes\n\n- Never use `Logger.getLogger()`. Use `logger` from the file `handleMultiStepInput.ts` instead. Otherwise the logging will not work.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faditosoftware%2Fvscode-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faditosoftware%2Fvscode-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faditosoftware%2Fvscode-input/lists"}