mirror of
https://github.com/ankitects/anki.git
synced 2025-09-19 06:22:22 -04:00
Create BrowserSearch component, because we cannot read from stores within slotted content
This commit is contained in:
parent
6d546b0bca
commit
7dc74004ae
3 changed files with 22 additions and 9 deletions
10
ts/graphs/BrowserSearch.svelte
Normal file
10
ts/graphs/BrowserSearch.svelte
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
<script lang="typescript">
|
||||||
|
import { bridgeCommand } from "anki/bridgecommand";
|
||||||
|
|
||||||
|
export let search: Readable<string>;
|
||||||
|
export let query: string;
|
||||||
|
|
||||||
|
$: {
|
||||||
|
bridgeCommand(`browserSearch: ${$search} ${query}`);
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -3,9 +3,9 @@
|
||||||
|
|
||||||
import type { SvelteComponent } from "svelte/internal";
|
import type { SvelteComponent } from "svelte/internal";
|
||||||
import type { I18n } from "anki/i18n";
|
import type { I18n } from "anki/i18n";
|
||||||
import { bridgeCommand } from "anki/bridgecommand";
|
|
||||||
|
|
||||||
import WithGraphData from "./WithGraphData.svelte";
|
import WithGraphData from "./WithGraphData.svelte";
|
||||||
|
import BrowserSearch from "./BrowserSearch.svelte";
|
||||||
|
|
||||||
export let i18n: I18n;
|
export let i18n: I18n;
|
||||||
export let nightMode: boolean;
|
export let nightMode: boolean;
|
||||||
|
@ -15,20 +15,22 @@
|
||||||
export let initialDays: number;
|
export let initialDays: number;
|
||||||
export let controller: SvelteComponent | null;
|
export let controller: SvelteComponent | null;
|
||||||
|
|
||||||
const browserSearch = (search: string, query: string): void => {
|
let query: string;
|
||||||
bridgeCommand(`browserSearch:${search} ${query}`);
|
|
||||||
|
const activateBrowserSearch = (event: CustomEvent): void => {
|
||||||
|
query = event.detail.query;
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
div {
|
||||||
@media only screen and (max-width: 600px) {
|
@media only screen and (max-width: 600px) {
|
||||||
.base {
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="base">
|
<div>
|
||||||
<WithGraphData
|
<WithGraphData
|
||||||
{initialSearch}
|
{initialSearch}
|
||||||
{initialDays}
|
{initialDays}
|
||||||
|
@ -51,8 +53,10 @@
|
||||||
{revlogRange}
|
{revlogRange}
|
||||||
{i18n}
|
{i18n}
|
||||||
{nightMode}
|
{nightMode}
|
||||||
on:search={(event) => browserSearch(search, event.detail.query)} />
|
on:search={activateBrowserSearch} />
|
||||||
{/each}
|
{/each}
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
<BrowserSearch {search} {query} />
|
||||||
</WithGraphData>
|
</WithGraphData>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -11,8 +11,7 @@ function useAsyncReactive<T, E>(
|
||||||
asyncFunction: () => Promise<T>,
|
asyncFunction: () => Promise<T>,
|
||||||
dependencies: [Readable<unknown>, ...Readable<unknown>[]]
|
dependencies: [Readable<unknown>, ...Readable<unknown>[]]
|
||||||
): AsyncReativeData<T, E> {
|
): AsyncReativeData<T, E> {
|
||||||
const initial = asyncFunction();
|
const promise = derived(dependencies, (_, set) => set(asyncFunction()), asyncFunction());
|
||||||
const promise = derived(dependencies, (_, set) => set(asyncFunction()), initial);
|
|
||||||
|
|
||||||
const value = derived(
|
const value = derived(
|
||||||
promise,
|
promise,
|
||||||
|
|
Loading…
Reference in a new issue