diff --git a/bookmarks/frontend/behaviors/search-autocomplete.js b/bookmarks/frontend/behaviors/search-autocomplete.js index d7a686f..96d2c53 100644 --- a/bookmarks/frontend/behaviors/search-autocomplete.js +++ b/bookmarks/frontend/behaviors/search-autocomplete.js @@ -1,3 +1,4 @@ +import { mount } from "svelte"; import { Behavior, registerBehavior } from "./index"; import SearchAutoCompleteComponent from "../components/SearchAutoComplete.svelte"; @@ -12,7 +13,7 @@ class SearchAutocomplete extends Behavior { const container = document.createElement("div"); - new SearchAutoCompleteComponent({ + mount(SearchAutoCompleteComponent, { target: container, props: { name: "q", diff --git a/bookmarks/frontend/behaviors/tag-autocomplete.js b/bookmarks/frontend/behaviors/tag-autocomplete.js index 1e0c245..6f2afed 100644 --- a/bookmarks/frontend/behaviors/tag-autocomplete.js +++ b/bookmarks/frontend/behaviors/tag-autocomplete.js @@ -1,5 +1,6 @@ import { Behavior, registerBehavior } from "./index"; import TagAutoCompleteComponent from "../components/TagAutocomplete.svelte"; +import { mount } from "svelte"; class TagAutocomplete extends Behavior { constructor(element) { @@ -12,7 +13,7 @@ class TagAutocomplete extends Behavior { const container = document.createElement("div"); - new TagAutoCompleteComponent({ + mount(TagAutoCompleteComponent, { target: container, props: { id: input.id, diff --git a/bookmarks/frontend/components/SearchAutoComplete.svelte b/bookmarks/frontend/components/SearchAutoComplete.svelte index 64d8418..a59a13f 100644 --- a/bookmarks/frontend/components/SearchAutoComplete.svelte +++ b/bookmarks/frontend/components/SearchAutoComplete.svelte @@ -2,22 +2,24 @@ import {SearchHistory} from "./SearchHistory"; import {api} from "../api"; import {cache} from "../cache"; - import {clampText, debounce, getCurrentWord, getCurrentWordBounds} from "../util"; + import {clampText, debounce, getCurrentWord, getCurrentWordBounds, preventDefault} from "../util"; const searchHistory = new SearchHistory() - export let name; - export let placeholder; - export let value; - export let mode = ''; - export let search; - export let linkTarget = '_blank'; + let { + name, + placeholder, + value = $bindable(), + mode = '', + search, + linkTarget = '_blank' + } = $props(); - let isFocus = false; - let isOpen = false; - let suggestions = [] - let selectedIndex = undefined; - let input = null; + let isFocus = $state(false); + let isOpen = $state(false); + let suggestions = $state([]) + let selectedIndex = $state(undefined); + let input = $state(null); // Track current search query after loading the page searchHistory.pushCurrent() @@ -201,7 +203,7 @@