Add disabled to other suggesters and enable all fields in reading log entry editor

This commit is contained in:
Evan Fiordeliso 2025-07-05 00:21:08 -04:00
parent cfcde1dc5c
commit 658713fbec
5 changed files with 29 additions and 8 deletions

View File

@ -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}
/> />

View File

@ -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}
/> />

View File

@ -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}
/> />

View File

@ -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>

View File

@ -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>