diff --git a/.prettierrc.js b/.prettierrc.js index 043abc9..29c2482 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -7,7 +7,6 @@ module.exports = { singleQuote: true, arrowParens: 'avoid', bracketSameLine: true, - svelteStrictMode: true, svelteBracketNewLine: false, svelteAllowShorthand: true, svelteIndentScriptAndStyle: true, diff --git a/src/components/ModalVault.svelte b/src/components/ModalVault.svelte index e4e8f64..44b14e0 100644 --- a/src/components/ModalVault.svelte +++ b/src/components/ModalVault.svelte @@ -30,44 +30,55 @@ import type OmnisearchPlugin from '../main' import LazyLoader from './lazy-loader/LazyLoader.svelte' - export let modal: OmnisearchVaultModal - export let previousQuery: string | undefined - export let plugin: OmnisearchPlugin + let { + modal, + previousQuery, + plugin, + }: { + modal: OmnisearchVaultModal + previousQuery?: string | undefined + plugin: OmnisearchPlugin + } = $props() - let selectedIndex = 0 + let selectedIndex = $state(0) let historySearchIndex = 0 - let searchQuery: string | undefined - let resultNotes: ResultNote[] = [] + let searchQuery = $state(previousQuery ?? '') + let resultNotes: ResultNote[] = $state([]) let query: Query - let indexingStepDesc = '' - let searching = true + let indexingStepDesc = $state('') + let searching = $state(true) let refInput: InputSearch | undefined - let openInNewPaneKey: string - let openInCurrentPaneKey: string - let createInNewPaneKey: string - let createInCurrentPaneKey: string + let openInNewPaneKey: string = $state('') + let openInCurrentPaneKey: string = $state('') + let createInNewPaneKey: string = $state('') + let createInCurrentPaneKey: string = $state('') let openInNewLeafKey: string = getCtrlKeyLabel() + getAltKeyLabel() + ' ↵' - $: selectedNote = resultNotes[selectedIndex] - $: searchQuery = searchQuery ?? previousQuery - $: if (plugin.settings.openInNewPane) { - openInNewPaneKey = '↵' - openInCurrentPaneKey = getCtrlKeyLabel() + ' ↵' - createInNewPaneKey = 'Shift ↵' - createInCurrentPaneKey = getCtrlKeyLabel() + ' Shift ↵' - } else { - openInNewPaneKey = getCtrlKeyLabel() + ' ↵' - openInCurrentPaneKey = '↵' - createInNewPaneKey = getCtrlKeyLabel() + ' Shift ↵' - createInCurrentPaneKey = 'Shift ↵' - } - $: if (searchQuery) { - updateResultsDebounced() - } else { - searching = false - resultNotes = [] - } - $: { + const selectedNote = $derived(resultNotes[selectedIndex]) + + $effect(() => { + if (plugin.settings.openInNewPane) { + openInNewPaneKey = '↵' + openInCurrentPaneKey = getCtrlKeyLabel() + ' ↵' + createInNewPaneKey = 'Shift ↵' + createInCurrentPaneKey = getCtrlKeyLabel() + ' Shift ↵' + } else { + openInNewPaneKey = getCtrlKeyLabel() + ' ↵' + openInCurrentPaneKey = '↵' + createInNewPaneKey = getCtrlKeyLabel() + ' Shift ↵' + createInCurrentPaneKey = 'Shift ↵' + } + }) + + $effect(() => { + if (searchQuery) { + updateResultsDebounced() + } else { + searching = false + resultNotes = [] + } + }) + $effect(() => { switch ($indexingStep) { case IndexingStepType.LoadingCache: indexingStepDesc = 'Loading cache...' @@ -87,7 +98,7 @@ indexingStepDesc = '' break } - } + }) onMount(async () => { eventBus.enable('vault') @@ -305,17 +316,17 @@ (searchQuery = e.detail)} placeholder="Omnisearch - Vault">
{#if plugin.settings.showCreateButton} - + {/if} {#if Platform.isMobile} - + {/if}
@@ -329,19 +340,19 @@ {#each resultNotes as result, i} + height={100} + offset={500} + keep={true} + fadeOption={{ delay: 0, duration: 0 }}> + }} /> {/each}
diff --git a/src/components/modals.ts b/src/components/modals.ts index 3ffd6f2..dc6b1f0 100644 --- a/src/components/modals.ts +++ b/src/components/modals.ts @@ -4,6 +4,7 @@ import ModalVault from './ModalVault.svelte' import ModalInFile from './ModalInFile.svelte' import { Action, eventBus, EventNames, isInputComposition } from '../globals' import type OmnisearchPlugin from '../main' +import { mount, unmount } from 'svelte' abstract class OmnisearchModal extends Modal { protected constructor(plugin: OmnisearchPlugin) { @@ -170,7 +171,7 @@ export class OmnisearchVaultModal extends OmnisearchModal { : null // Instantiate and display the Svelte component - const cmp = new ModalVault({ + const cmp = mount(ModalVault, { target: this.modalEl, props: { plugin, @@ -178,10 +179,11 @@ export class OmnisearchVaultModal extends OmnisearchModal { previousQuery: query || selectedText || previous || '', }, }) + this.onClose = () => { // Since the component is manually created, // we also need to manually destroy it - cmp.$destroy() + unmount(cmp) } }) }