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