chore: complete the dataview feature

README.md

@@ -25,7 +25,7 @@ https://github.com/danielo515/obsidian-modal-form/assets/2270425/542974aa-c58b-4
   - toggle (true/false)
   - free text
   - text with autocompletion for note names (from a folder or root)
-  - text with autocompletion from a dataview query
+  - text with autocompletion from a dataview query (requires dataview plugin)
   - select from a list 
     - list of fixed values 
     - list of notes from a folder

src/core/formDefinition.ts

@@ -30,6 +30,18 @@ type inputType =
 	| inputDataviewSource
 	| inputSelectFixed;
 
+export const FieldTypeReadable: Record<AllFieldTypes, string> = {
+	"text": "Text",
+	"number": "Number",
+	"date": "Date",
+	"time": "Time",
+	"datetime": "DateTime",
+	"toggle": "Toggle",
+	"note": "Note",
+	"slider": "Slider",
+	"select": "Select",
+	"dataview": "Dataview",
+} as const;
 
 function isObject(input: unknown): input is Record<string, unknown> {
 	return typeof input === "object" && input !== null;
@@ -69,7 +81,7 @@ export function isInputSelectFixed(input: unknown): input is inputSelectFixed {
 	})
 }
 
-export type AllFieldTypes = FieldType | "note" | "slider" | "select";
+export type AllFieldTypes = inputType['type']
 export type FieldDefinition = {
 	name: string;
 	label?: string;
@@ -96,7 +108,7 @@ export type FormDefinition = {
 // It has all the possible values, and then you need to narrow it down
 // to the actual type.
 export type EditableInput = {
-	type: FieldType | "select" | "slider" | "note";
+	type: AllFieldTypes;
 	source?: "notes" | "fixed";
 	folder?: string;
 	min?: number;

src/views/EditFormView.ts

@@ -4,17 +4,6 @@ import type { FormDefinition, AllFieldTypes } from "../core/formDefinition";
 import FormEditor from './FormBuilder.svelte'
 
 export const EDIT_FORM_VIEW = "modal-form-edit-form-view";
-export const FieldTypeReadable: Record<AllFieldTypes, string> = {
-	"text": "Text",
-	"number": "Number",
-	"date": "Date",
-	"time": "Time",
-	"datetime": "DateTime",
-	"toggle": "Toggle",
-	"note": "Note",
-	"slider": "Slider",
-	"select": "Select"
-} as const;
 
 function parseState(maybeState: unknown): maybeState is FormDefinition {
 	if (maybeState === null) {

src/views/FormBuilder.svelte

@@ -6,11 +6,12 @@
 		type FormDefinition,
 		isValidFormDefinition,
 		isInputNoteFromFolder,
+		FieldTypeReadable,
 	} from "src/core/formDefinition";
 	import { FolderSuggest } from "src/suggesters/suggestFolder";
-	import { FieldTypeReadable } from "src/views/EditFormView";
 	import { setIcon, Setting, App } from "obsidian";
 	import FormRow from "./components/FormRow.svelte";
+	import InputBuilderDataview from "./components/inputBuilderDataview.svelte";
 
 	export let definition: EditableFormDefinition = {
 		title: "",
@@ -307,6 +308,11 @@
 							>
 								<label>Source Folder</label>
 							</div>
+						{:else if field.input.type === "dataview"}
+							<InputBuilderDataview
+								{index}
+								bind:value={field.input.query}
+							/>
 						{/if}
 					</div>
 					<div class="flex gap1">

src/views/components/inputBuilderDataview.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import FormRow from "./FormRow.svelte";
+
+	export let index: number;
+	export let value: string;
+	$: id = `dataview_${index}`;
+</script>
+
+<FormRow label="Dataview Query" {id}>
+	<span class="modal-form-hint">
+		This is a <a
+			href="https://blacksmithgu.github.io/obsidian-dataview/api/intro/"
+			>Dataview</a
+		>
+		query that will be used to populate the input suggestions. You should provide
+		a query that returns a list of strings, for example:
+		<pre class="language-js"><code
+				>dv.pages('#tag').map(p => p.file.name)</code
+			></pre>
+	</span>
+	<textarea
+		{id}
+		bind:value
+		name="dataview_query"
+		class="form-control"
+		rows="3"
+		placeholder="dv.pages('#tag').map(p => p.file.name)"
+	/>
+</FormRow>
+
+<style>
+</style>

styles.css

@@ -30,3 +30,11 @@ If your plugin does not need CSS, delete this file.
 .modal-form-primary {
 	color: var(--text-accent);
 }
+
+.modal-form-hint {
+	color: var(--text-muted);
+}
+/* .modal-form-hint code {
+	color: var(--text-normal);
+	background-color: var(--background-secondary);
+} */