Add a new SettingsTemplate.yml input type: inputWithFolderBtn

json-rpc-settings.md

@@ -40,8 +40,8 @@ attributes:
 | `description`  | The description for the input. If set, it's displayed to the left of the input, right below the label.                                                 |
 | `defaultValue` | The default value for the input. It's the value your plugin will receive in the settings for that input until the user changes that value in settings. |
 
-#### `inputWithFileBtn`
-This is a text input with a "Browse" button for selecting a file.
+#### `inputWithFileBtn` and `inputWithFolderBtn`
+This is a text input with a "Browse" button for selecting a file or a folder respectively. They look the same, the only difference is that one only allows selecting a file and the other only allows selecting a folder.
 ```yaml
 type: inputWithFileBtn
 attributes:

webcomponents/src/components/PasteHandler.svelte

@@ -7,7 +7,7 @@ const emit = createEventDispatcher<{
   setData: ComponentData[];
 }>();
 
-const types: ComponentType[] = ['textBlock', 'input', 'inputWithFileBtn', 'passwordBox', 'textarea', 'dropdown', 'checkbox'];
+const types: ComponentType[] = ['textBlock', 'input', 'inputWithFileBtn', 'inputWithFolderBtn', 'passwordBox', 'textarea', 'dropdown', 'checkbox'];
 function verifyData(parsed: { body?: ComponentData[] }): boolean {
   return parsed?.body && Array.isArray(parsed.body) && parsed.body.every(v => types.includes(v.type) && v.attributes);
 }

webcomponents/src/components/SettingsEditDialog.svelte

@@ -47,7 +47,8 @@ $: {
 const inputTypes: Record<ComponentType, string> = {
   textBlock: "Block of text",
   input: "Text input",
-  inputWithFileBtn: "Text input with 'Browse' button",
+  inputWithFileBtn: "Text input with 'Browse' button for selecting a file",
+  inputWithFolderBtn: "Text input with 'Browse' button for selecting a folder",
   textarea: "Textarea",
   passwordBox: "Password input",
   dropdown: "Dropdown",
@@ -145,7 +146,7 @@ $: {
             <SettingsCheckbox {theme} bind:value={checkbox}/>
           {/if}
         </div>
-        {#if data.type === 'input' || data.type === 'inputWithFileBtn' || data.type === 'passwordBox'}
+        {#if data.type === 'input' || data.type === 'inputWithFileBtn' || data.type === 'inputWithFolderBtn' || data.type === 'passwordBox'}
           <SettingsInput {theme} bind:value={data.attributes.defaultValue}/>
         {:else if data.type === 'textarea'}
           <SettingsInput {theme} multiline bind:value={data.attributes.defaultValue}/>

webcomponents/src/types.ts

@@ -2,6 +2,7 @@ export type ComponentType =
   | 'textBlock'
   | 'input'
   | 'inputWithFileBtn'
+  | 'inputWithFolderBtn'
   | 'textarea'
   | 'passwordBox'
   | 'dropdown'

webcomponents/src/webcomponents/SettingsComponentDemo.svelte

@@ -48,12 +48,12 @@ $: full = type === 'textBlock';
   {#if type !== 'textBlock'}
     <div
       class="right"
-      class:with-button={type === 'inputWithFileBtn'}
+      class:with-button={type === 'inputWithFileBtn' || type === 'inputWithFolderBtn'}
       class:checkbox={type === 'checkbox'}
     >
       {#if type === 'input'}
         <SettingsInput {theme} {readonly} bind:value={value}/>
-      {:else if type === 'inputWithFileBtn'}
+      {:else if type === 'inputWithFileBtn' || type === 'inputWithFolderBtn'}
         <SettingsInput {theme} {readonly} bind:value={value}/>
         <SettingsButton {theme}>Browse</SettingsButton>
       {:else if type === 'passwordBox'}