generated from tpl/obsidian-sample-plugin
			Add disabled to other suggesters and enable all fields in reading log entry editor
This commit is contained in:
		
							parent
							
								
									cfcde1dc5c
								
							
						
					
					
						commit
						658713fbec
					
				| 
						 | 
					@ -15,6 +15,7 @@
 | 
				
			||||||
		asString?: boolean;
 | 
							asString?: boolean;
 | 
				
			||||||
		value?: Field | string;
 | 
							value?: Field | string;
 | 
				
			||||||
		accepts?: string[];
 | 
							accepts?: string[];
 | 
				
			||||||
 | 
							disabled?: boolean;
 | 
				
			||||||
		onSelected?: (fieldOrName: Field | string) => void;
 | 
							onSelected?: (fieldOrName: Field | string) => void;
 | 
				
			||||||
	};
 | 
						};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -24,6 +25,7 @@
 | 
				
			||||||
		asString,
 | 
							asString,
 | 
				
			||||||
		value = $bindable(),
 | 
							value = $bindable(),
 | 
				
			||||||
		accepts,
 | 
							accepts,
 | 
				
			||||||
 | 
							disabled,
 | 
				
			||||||
		onSelected,
 | 
							onSelected,
 | 
				
			||||||
	}: Props = $props();
 | 
						}: Props = $props();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -51,10 +53,10 @@
 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<TextInputSuggest
 | 
					<TextInputSuggest
 | 
				
			||||||
	{app}
 | 
					 | 
				
			||||||
	{id}
 | 
						{id}
 | 
				
			||||||
	{items}
 | 
						{items}
 | 
				
			||||||
	bind:value
 | 
						bind:value
 | 
				
			||||||
 | 
						{disabled}
 | 
				
			||||||
	onChange={handleChange}
 | 
						onChange={handleChange}
 | 
				
			||||||
	{onSelected}
 | 
						{onSelected}
 | 
				
			||||||
/>
 | 
					/>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -10,6 +10,7 @@
 | 
				
			||||||
		property?: StringKeys<TFile>;
 | 
							property?: StringKeys<TFile>;
 | 
				
			||||||
		inFolder?: string;
 | 
							inFolder?: string;
 | 
				
			||||||
		value?: TFile | string;
 | 
							value?: TFile | string;
 | 
				
			||||||
 | 
							disabled?: boolean;
 | 
				
			||||||
		onSelected?: (fileOrPath: TFile | string) => void;
 | 
							onSelected?: (fileOrPath: TFile | string) => void;
 | 
				
			||||||
	};
 | 
						};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -20,6 +21,7 @@
 | 
				
			||||||
		property = "path",
 | 
							property = "path",
 | 
				
			||||||
		inFolder,
 | 
							inFolder,
 | 
				
			||||||
		value = $bindable(),
 | 
							value = $bindable(),
 | 
				
			||||||
 | 
							disabled,
 | 
				
			||||||
		onSelected,
 | 
							onSelected,
 | 
				
			||||||
	}: Props = $props();
 | 
						}: Props = $props();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -41,10 +43,10 @@
 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<TextInputSuggest
 | 
					<TextInputSuggest
 | 
				
			||||||
	{app}
 | 
					 | 
				
			||||||
	{id}
 | 
						{id}
 | 
				
			||||||
	{items}
 | 
						{items}
 | 
				
			||||||
	bind:value
 | 
						bind:value
 | 
				
			||||||
 | 
						{disabled}
 | 
				
			||||||
	onChange={handleChange}
 | 
						onChange={handleChange}
 | 
				
			||||||
	{onSelected}
 | 
						{onSelected}
 | 
				
			||||||
/>
 | 
					/>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -10,6 +10,7 @@
 | 
				
			||||||
		property?: StringKeys<TFolder>;
 | 
							property?: StringKeys<TFolder>;
 | 
				
			||||||
		inFolder?: string;
 | 
							inFolder?: string;
 | 
				
			||||||
		value?: TFolder | string;
 | 
							value?: TFolder | string;
 | 
				
			||||||
 | 
							disabled?: boolean;
 | 
				
			||||||
		onSelected?: (folderOrPath: TFolder | string) => void;
 | 
							onSelected?: (folderOrPath: TFolder | string) => void;
 | 
				
			||||||
	};
 | 
						};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -20,6 +21,7 @@
 | 
				
			||||||
		property = "path",
 | 
							property = "path",
 | 
				
			||||||
		inFolder,
 | 
							inFolder,
 | 
				
			||||||
		value = $bindable(),
 | 
							value = $bindable(),
 | 
				
			||||||
 | 
							disabled,
 | 
				
			||||||
		onSelected,
 | 
							onSelected,
 | 
				
			||||||
	}: Props = $props();
 | 
						}: Props = $props();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -41,10 +43,10 @@
 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<TextInputSuggest
 | 
					<TextInputSuggest
 | 
				
			||||||
	{app}
 | 
					 | 
				
			||||||
	{id}
 | 
						{id}
 | 
				
			||||||
	{items}
 | 
						{items}
 | 
				
			||||||
	bind:value
 | 
						bind:value
 | 
				
			||||||
 | 
						{disabled}
 | 
				
			||||||
	onChange={handleChange}
 | 
						onChange={handleChange}
 | 
				
			||||||
	{onSelected}
 | 
						{onSelected}
 | 
				
			||||||
/>
 | 
					/>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -8,7 +8,7 @@
 | 
				
			||||||
<script lang="ts">
 | 
					<script lang="ts">
 | 
				
			||||||
	import { clickOutside } from "@ui/directives";
 | 
						import { clickOutside } from "@ui/directives";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	import { onMount, type Snippet } from "svelte";
 | 
						import { type Snippet } from "svelte";
 | 
				
			||||||
	import { createPopperActions } from "svelte-popperjs";
 | 
						import { createPopperActions } from "svelte-popperjs";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	type T = $$Generic;
 | 
						type T = $$Generic;
 | 
				
			||||||
| 
						 | 
					@ -19,6 +19,7 @@
 | 
				
			||||||
		value?: T;
 | 
							value?: T;
 | 
				
			||||||
		loading?: boolean;
 | 
							loading?: boolean;
 | 
				
			||||||
		suggestion?: Snippet<[Item<T>]>;
 | 
							suggestion?: Snippet<[Item<T>]>;
 | 
				
			||||||
 | 
							disabled?: boolean;
 | 
				
			||||||
		onChange?: (text: string) => void | Promise<void>;
 | 
							onChange?: (text: string) => void | Promise<void>;
 | 
				
			||||||
		onSelected?: (value: T) => void | Promise<void>;
 | 
							onSelected?: (value: T) => void | Promise<void>;
 | 
				
			||||||
	};
 | 
						};
 | 
				
			||||||
| 
						 | 
					@ -29,6 +30,7 @@
 | 
				
			||||||
		value = $bindable(),
 | 
							value = $bindable(),
 | 
				
			||||||
		loading = false,
 | 
							loading = false,
 | 
				
			||||||
		suggestion,
 | 
							suggestion,
 | 
				
			||||||
 | 
							disabled,
 | 
				
			||||||
		onChange,
 | 
							onChange,
 | 
				
			||||||
		onSelected,
 | 
							onSelected,
 | 
				
			||||||
	}: Props = $props();
 | 
						}: Props = $props();
 | 
				
			||||||
| 
						 | 
					@ -165,7 +167,8 @@
 | 
				
			||||||
			onfocusin={() => (expanded = true)}
 | 
								onfocusin={() => (expanded = true)}
 | 
				
			||||||
			aria-controls={`${id}-list`}
 | 
								aria-controls={`${id}-list`}
 | 
				
			||||||
			aria-autocomplete="list"
 | 
								aria-autocomplete="list"
 | 
				
			||||||
			aria-expanded={expanded}
 | 
								aria-expanded={expanded && !disabled}
 | 
				
			||||||
 | 
								{disabled}
 | 
				
			||||||
		/>
 | 
							/>
 | 
				
			||||||
		<!-- svelte-ignore a11y_no_static_element_interactions -->
 | 
							<!-- svelte-ignore a11y_no_static_element_interactions -->
 | 
				
			||||||
		<div
 | 
							<div
 | 
				
			||||||
| 
						 | 
					@ -175,7 +178,7 @@
 | 
				
			||||||
			onkeydown={(e) => e.key === "Enter" && clearSearch()}
 | 
								onkeydown={(e) => e.key === "Enter" && clearSearch()}
 | 
				
			||||||
		></div>
 | 
							></div>
 | 
				
			||||||
	</div>
 | 
						</div>
 | 
				
			||||||
	{#if expanded}
 | 
						{#if expanded && !disabled}
 | 
				
			||||||
		<div id={`${id}-list`} class="suggestion-container" use:popperContent>
 | 
							<div id={`${id}-list`} class="suggestion-container" use:popperContent>
 | 
				
			||||||
			<ul bind:this={listEl} role="listbox" class="suggestion">
 | 
								<ul bind:this={listEl} role="listbox" class="suggestion">
 | 
				
			||||||
				{#each items as item, index}
 | 
									{#each items as item, index}
 | 
				
			||||||
| 
						 | 
					@ -200,3 +203,10 @@
 | 
				
			||||||
		</div>
 | 
							</div>
 | 
				
			||||||
	{/if}
 | 
						{/if}
 | 
				
			||||||
</div>
 | 
					</div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<style>
 | 
				
			||||||
 | 
						input:disabled {
 | 
				
			||||||
 | 
							color: var(--text-muted);
 | 
				
			||||||
 | 
							cursor: not-allowed;
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
 | 
					</style>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -4,6 +4,8 @@
 | 
				
			||||||
	import FileSuggest from "@ui/components/suggesters/FileSuggest.svelte";
 | 
						import FileSuggest from "@ui/components/suggesters/FileSuggest.svelte";
 | 
				
			||||||
	import { v4 as uuidv4 } from "uuid";
 | 
						import { v4 as uuidv4 } from "uuid";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						const INPUT_DATETIME_FORMAT = "YYYY-MM-DDTHH:mm";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	interface Props {
 | 
						interface Props {
 | 
				
			||||||
		plugin: BookTrackerPlugin;
 | 
							plugin: BookTrackerPlugin;
 | 
				
			||||||
		entry?: ReadingLogEntry;
 | 
							entry?: ReadingLogEntry;
 | 
				
			||||||
| 
						 | 
					@ -17,7 +19,11 @@
 | 
				
			||||||
	let pagesRead = $state(entry?.pagesRead ?? 0);
 | 
						let pagesRead = $state(entry?.pagesRead ?? 0);
 | 
				
			||||||
	let pagesReadTotal = $state(entry?.pagesReadTotal ?? 0);
 | 
						let pagesReadTotal = $state(entry?.pagesReadTotal ?? 0);
 | 
				
			||||||
	let pagesRemaining = $state(entry?.pagesRemaining ?? 0);
 | 
						let pagesRemaining = $state(entry?.pagesRemaining ?? 0);
 | 
				
			||||||
	let createdAt = $state(entry?.createdAt?.toDate() ?? new Date());
 | 
						let createdAt = $state(
 | 
				
			||||||
 | 
							entry?.createdAt?.format(INPUT_DATETIME_FORMAT) ??
 | 
				
			||||||
 | 
								// @ts-expect-error Moment is provided by Obsidian
 | 
				
			||||||
 | 
								moment().format(INPUT_DATETIME_FORMAT),
 | 
				
			||||||
 | 
						);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	// Source: https://github.com/sveltejs/svelte/discussions/14220#discussioncomment-11188219
 | 
						// Source: https://github.com/sveltejs/svelte/discussions/14220#discussioncomment-11188219
 | 
				
			||||||
	function watch<T>(
 | 
						function watch<T>(
 | 
				
			||||||
| 
						 | 
					@ -100,7 +106,6 @@
 | 
				
			||||||
				name="createdAt"
 | 
									name="createdAt"
 | 
				
			||||||
				id="createdAt"
 | 
									id="createdAt"
 | 
				
			||||||
				bind:value={createdAt}
 | 
									bind:value={createdAt}
 | 
				
			||||||
				disabled={editMode}
 | 
					 | 
				
			||||||
			/>
 | 
								/>
 | 
				
			||||||
		</div>
 | 
							</div>
 | 
				
			||||||
		<button type="submit">Submit</button>
 | 
							<button type="submit">Submit</button>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue