update prompt api

Author: mProjectsCode

exampleVault/promptTest.js

@@ -22,16 +22,22 @@
 // });
 
 
-const files = engine.query.files((file) => {
-    return {
-        label: file.name,
-        value: file.pat,
-    };
-});
+// const files = engine.query.files((file) => {
+//     return {
+//         label: file.name,
+//         value: file.pat,
+//     };
+// });
 
-const ret = await engine.prompt.suggester({
-    placeholder: 'Select a file',
-    options: files,
+// const ret = await engine.prompt.suggester({
+//     placeholder: 'Select a file',
+//     options: files,
+// });
+
+const ret = await engine.prompt.text({
+    title: 'Input Something',
+    content: 'What ever you want to type...',
 });
 
+
 console.log(ret);

jsEngine/api/PromptAPI.ts

@@ -2,6 +2,7 @@ import type { API } from 'jsEngine/api/API';
 import { ButtonStyleType } from 'jsEngine/utils/Util';
 import { SvelteModal } from 'jsEngine/api/prompts/SvelteModal';
 import ButtonModalComponent from 'jsEngine/api/prompts/ButtonModalComponent.svelte';
+import InputModalComponent from 'jsEngine/api/prompts/InputModalComponent.svelte';
 import { Suggester } from 'jsEngine/api/prompts/Suggester';
 import { mount } from 'svelte';
 import type { AnySvelteComponent } from 'jsEngine/utils/SvelteUtils';
@@ -56,6 +57,17 @@ export interface SuggesterOption<T> {
 	label: string;
 }
 
+export interface InputPromptOptions extends ModalPromptOptions {
+	/**
+	 * Text content to display in the modal.
+	 */
+	content?: string;
+	/**
+	 * The placeholder text for the input field.
+	 */
+	placeholder?: string;
+}
+
 export class PromptAPI {
 	readonly apiInstance: API;
 
@@ -149,4 +161,88 @@ export class PromptAPI {
 			}
 		});
 	}
+
+	/**
+	 * Prompts the user with a text input dialog.
+	 * Returns the value of the input field, or undefined if the user closes the modal.
+	 */
+	public text(options: InputPromptOptions): Promise<string | undefined> {
+		return new Promise<string | undefined>((resolve, reject) => {
+			try {
+				new SvelteModal<AnySvelteComponent, unknown>(
+					this.apiInstance.app,
+					options,
+					(modal, targetEl) => {
+						return mount(InputModalComponent, {
+							target: targetEl,
+							props: {
+								options,
+								modal,
+								inputType: 'text',
+							},
+						});
+					},
+					resolve as (value: unknown) => void,
+				).open();
+			} catch (error) {
+				reject(error);
+			}
+		});
+	}
+
+	/**
+	 * Prompts the user with a textarea input dialog.
+	 * Returns the value of the input field, or undefined if the user closes the modal.
+	 */
+	public textarea(options: InputPromptOptions): Promise<string | undefined> {
+		return new Promise<string | undefined>((resolve, reject) => {
+			try {
+				new SvelteModal<AnySvelteComponent, unknown>(
+					this.apiInstance.app,
+					options,
+					(modal, targetEl) => {
+						return mount(InputModalComponent, {
+							target: targetEl,
+							props: {
+								options,
+								modal,
+								inputType: 'textarea',
+							},
+						});
+					},
+					resolve as (value: unknown) => void,
+				).open();
+			} catch (error) {
+				reject(error);
+			}
+		});
+	}
+
+	/**
+	 * Prompts the user with a number input dialog.
+	 * Returns the value of the input field, or undefined if the user closes the modal.
+	 */
+	public number(options: InputPromptOptions): Promise<number | undefined> {
+		return new Promise<number | undefined>((resolve, reject) => {
+			try {
+				new SvelteModal<AnySvelteComponent, unknown>(
+					this.apiInstance.app,
+					options,
+					(modal, targetEl) => {
+						return mount(InputModalComponent, {
+							target: targetEl,
+							props: {
+								options,
+								modal,
+								inputType: 'number',
+							},
+						});
+					},
+					resolve as (value: unknown) => void,
+				).open();
+			} catch (error) {
+				reject(error);
+			}
+		});
+	}
 }

jsEngine/api/prompts/InputModalComponent.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import Button from 'jsEngine/utils/Button.svelte';
+	import type { InputPromptOptions } from '../PromptAPI';
+	import type { SvelteModal } from './SvelteModal';
+	import { ButtonStyleType } from 'jsEngine/utils/Util';
+
+	const {
+		options,
+		modal,
+		inputType,
+	}: {
+		options: InputPromptOptions;
+		modal: SvelteModal<any, unknown>;
+		inputType: 'text' | 'number' | 'textarea';
+	} = $props();
+
+	let value = $state();
+</script>
+
+<p>{options.content}</p>
+
+{#if inputType === 'textarea'}
+	<textarea style="width: 100%; resize: vertical; height: 200px" bind:value={value} placeholder={options.placeholder ?? 'Text here...'}></textarea>
+{:else if inputType === 'text'}
+	<input style="width: 100%;" type="text" bind:value={value} placeholder={options.placeholder ?? 'Text here...'} />
+{:else}
+	<input style="width: 100%;" type="number" bind:value={value} placeholder={options.placeholder ?? 'Number here...'} />
+{/if}
+
+<div class="modal-button-container">
+	<Button variant={ButtonStyleType.PRIMARY} onclick={() => modal.submit(value)}>Submit</Button>
+	<Button variant={ButtonStyleType.DEFAULT} onclick={() => modal.submit(undefined)}>Cancel</Button>
+</div>