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;
value?: Field | string;
accepts?: string[];
disabled?: boolean;
onSelected?: (fieldOrName: Field | string) => void;
};
@ -24,6 +25,7 @@
asString,
value = $bindable(),
accepts,
disabled,
onSelected,
}: Props = $props();
@ -51,10 +53,10 @@
</script>
<TextInputSuggest
{app}
{id}
{items}
bind:value
{disabled}
onChange={handleChange}
{onSelected}
/>

View File

@ -10,6 +10,7 @@
property?: StringKeys<TFile>;
inFolder?: string;
value?: TFile | string;
disabled?: boolean;
onSelected?: (fileOrPath: TFile | string) => void;
};
@ -20,6 +21,7 @@
property = "path",
inFolder,
value = $bindable(),
disabled,
onSelected,
}: Props = $props();
@ -41,10 +43,10 @@
</script>
<TextInputSuggest
{app}
{id}
{items}
bind:value
{disabled}
onChange={handleChange}
{onSelected}
/>

View File

@ -10,6 +10,7 @@
property?: StringKeys<TFolder>;
inFolder?: string;
value?: TFolder | string;
disabled?: boolean;
onSelected?: (folderOrPath: TFolder | string) => void;
};
@ -20,6 +21,7 @@
property = "path",
inFolder,
value = $bindable(),
disabled,
onSelected,
}: Props = $props();
@ -41,10 +43,10 @@
</script>
<TextInputSuggest
{app}
{id}
{items}
bind:value
{disabled}
onChange={handleChange}
{onSelected}
/>

View File

@ -8,7 +8,7 @@
<script lang="ts">
import { clickOutside } from "@ui/directives";
import { onMount, type Snippet } from "svelte";
import { type Snippet } from "svelte";
import { createPopperActions } from "svelte-popperjs";
type T = $$Generic;
@ -19,6 +19,7 @@
value?: T;
loading?: boolean;
suggestion?: Snippet<[Item<T>]>;
disabled?: boolean;
onChange?: (text: string) => void | Promise<void>;
onSelected?: (value: T) => void | Promise<void>;
};
@ -29,6 +30,7 @@
value = $bindable(),
loading = false,
suggestion,
disabled,
onChange,
onSelected,
}: Props = $props();
@ -165,7 +167,8 @@
onfocusin={() => (expanded = true)}
aria-controls={`${id}-list`}
aria-autocomplete="list"
aria-expanded={expanded}
aria-expanded={expanded && !disabled}
{disabled}
/>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
@ -175,7 +178,7 @@
onkeydown={(e) => e.key === "Enter" && clearSearch()}
></div>
</div>
{#if expanded}
{#if expanded && !disabled}
<div id={`${id}-list`} class="suggestion-container" use:popperContent>
<ul bind:this={listEl} role="listbox" class="suggestion">
{#each items as item, index}
@ -200,3 +203,10 @@
</div>
{/if}
</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 { v4 as uuidv4 } from "uuid";
const INPUT_DATETIME_FORMAT = "YYYY-MM-DDTHH:mm";
interface Props {
plugin: BookTrackerPlugin;
entry?: ReadingLogEntry;
@ -17,7 +19,11 @@
let pagesRead = $state(entry?.pagesRead ?? 0);
let pagesReadTotal = $state(entry?.pagesReadTotal ?? 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
function watch<T>(
@ -100,7 +106,6 @@
name="createdAt"
id="createdAt"
bind:value={createdAt}
disabled={editMode}
/>
</div>
<button type="submit">Submit</button>