64 lines
1.8 KiB
Svelte
64 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import SearchIcon from "@components/SearchIcon.svelte";
|
|
import CloseIcon from "@components/CloseIcon.svelte";
|
|
|
|
let inputBox: HTMLInputElement | null = null;
|
|
export let close = () => {};
|
|
|
|
export function changeFocusState(target: boolean) {
|
|
if (!inputBox) return;
|
|
if (target) {
|
|
inputBox.focus();
|
|
} else {
|
|
inputBox.blur();
|
|
}
|
|
}
|
|
|
|
function search(query: string) {
|
|
window.location.href = `/song/${query}/info`;
|
|
}
|
|
|
|
function handleKeydown(event: KeyboardEvent) {
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
const input = event.target as HTMLInputElement;
|
|
const value = input.value.trim();
|
|
if (!value) return;
|
|
search(value);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
[type="search"]::-webkit-search-cancel-button,
|
|
[type="search"]::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
</style>
|
|
|
|
<!-- svelte-ignore a11y_autofocus -->
|
|
<div class="absolute md:relative left-0 h-full mr-0 inline-flex items-center w-full px-4 md:px-0
|
|
md:w-full xl:max-w-[50rem] md:mx-4">
|
|
<div class="w-full h-10 lg:h-12 px-4 rounded-full bg-surface-container-high dark:bg-zinc-800/70
|
|
backdrop-blur-lg flex justify-between md:px-5">
|
|
<button class="w-6" on:click={() => search(inputBox?.value ?? "")}>
|
|
<SearchIcon className="h-full inline-flex items-center text-[1.5rem] text-on-surface-variant" />
|
|
</button>
|
|
<!--suppress HtmlUnknownAttribute -->
|
|
<input
|
|
bind:this={inputBox}
|
|
type="search"
|
|
placeholder="搜索"
|
|
autocomplete="off"
|
|
autocapitalize="off"
|
|
autocorrect="off"
|
|
class="top-0 h-full bg-transparent flex-grow px-4 focus:outline-none"
|
|
on:keydown={handleKeydown}
|
|
/>
|
|
<button class="w-6" on:click={close}>
|
|
<CloseIcon className="h-full w-6 inline-flex items-center text-[1.5rem] text-on-surface-variant"/>
|
|
</button>
|
|
</div>
|
|
</div>
|