fix: separate input builder for select

fixes #75

src/views/FormBuilder.svelte

@@ -9,6 +9,7 @@
     import { setIcon, Setting, App } from "obsidian";
     import FormRow from "./components/FormRow.svelte";
     import InputBuilderDataview from "./components/inputBuilderDataview.svelte";
+    import InputBuilderSelect from "./components/InputBuilderSelect.svelte";
 
     export let definition: EditableFormDefinition = {
         title: "",
@@ -203,7 +204,15 @@
                         </div>
                     </div>
                     <div class="flex gap1">
-                        {#if field.input.type === "select" || field.input.type === "multiselect"}
+                        {#if field.input.type === "select"}
+                            <InputBuilderSelect
+                                {index}
+                                bind:source={field.input.source}
+                                bind:options={field.input.options}
+                                bind:folder={field.input.folder}
+                                notifyChange={onChange}
+                            />
+                        {:else if field.input.type === "multiselect"}
                             {@const source_id = `source_${index}`}
                             <div class="flex column gap1">
                                 <label for={source_id}>Source</label>

src/views/components/InputBuilderSelect.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+    /**
+     * This component is specific for the input builder,
+     * specifically to build the select input type
+     */
+
+    import { setIcon } from "obsidian";
+    import FormRow from "./FormRow.svelte";
+    import InputFolder from "./InputFolder.svelte";
+    import type { EditableInput } from "src/core/formDefinition";
+
+    export let index: number;
+    export let source: string = "fixed";
+    export let folder: string | undefined;
+    export let options: EditableInput["options"] = [];
+    export let notifyChange: () => void;
+    $: id = `builder_select_${index}`;
+    $: options_id = `builder_select_options_btn_${index}`;
+</script>
+
+<FormRow label="Source" {id}>
+    <select bind:value={source} {id}>
+        <option value="fixed">Static</option>
+        <option value="notes">Notes</option>
+    </select>
+</FormRow>
+{#if source === "fixed"}
+    <FormRow label="Options" id={options_id}>
+        <button
+            type="button"
+            on:click={() => {
+                options?.push({ value: "", label: "" });
+                options = options;
+                notifyChange();
+            }}>Add more options</button
+        >
+        {#each options || [] as option, idx}
+            {@const value_id = `${options_id}_option_${idx}`}
+            {@const label_id = `${options_id}_option_label_${idx}`}
+            <div class="modal-form flex row gap1">
+                <FormRow label="Label" id={label_id}>
+                    <input
+                        type="text"
+                        placeholder="Label"
+                        bind:value={option.label}
+                        id={label_id}
+                    /></FormRow
+                ><FormRow label="Value" id={value_id}>
+                    <input
+                        type="text"
+                        placeholder="Value"
+                        bind:value={option.value}
+                        id={value_id}
+                    /></FormRow
+                >
+
+                <FormRow
+                    label="Delete"
+                    id={"button" + value_id}
+                    hideLabel={true}
+                >
+                    <button
+                        id={"button" + value_id}
+                        use:setIcon={"trash"}
+                        type="button"
+                        on:click={() => {
+                            options = options?.filter((_, i) => i !== idx);
+                            notifyChange();
+                        }}
+                    /></FormRow
+                >
+            </div>
+        {/each}
+    </FormRow>
+{:else if source === "notes"}
+    <InputFolder {index} bind:folder {notifyChange} />
+{/if}
+
+<style>
+</style>

src/views/components/InputFolder.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { Setting } from "obsidian";
+    import { FolderSuggest } from "src/suggesters/suggestFolder";
+    /**
+     * This component is just to select a folder, not notes inside the folder
+     */
+    export let index: number;
+    export let folder: string = "";
+    // This is just used to notify the parent component that the value has changed
+    // it is useful for example to persis the intermediary state of the form
+    export let notifyChange: () => void;
+    function searchFolder(element: HTMLElement) {
+        new Setting(element).addSearch((search) => {
+            search.setPlaceholder("Select a folder");
+            search.setValue(folder);
+            new FolderSuggest(search.inputEl, app);
+            search.onChange((value) => {
+                folder = value;
+                notifyChange();
+            });
+        });
+    }
+    $: id = `dataview_${index}`;
+</script>
+
+<!-- The autocomplete input will be inside the first div, so we remove some styles with the utility classes -->
+<div
+    class="modal-form flex column gap1 remove-padding remove-border fix-suggest"
+    use:searchFolder
+>
+    <label for={id}>Source Folder</label>
+</div>
+
+<style>
+</style>

styles.css

@@ -61,3 +61,15 @@ If your plugin does not need CSS, delete this file.
 .modal-form-textarea .setting-item-control textarea {
     width: 100%;
 }
+.modal-form.flex {
+    display: flex;
+}
+.modal-form.column {
+    flex-direction: column;
+}
+.modal-form.gap1 {
+    gap: 0.5rem;
+}
+.modal-form.gap2 {
+    gap: 1rem;
+}