|
| 1 | +<template> |
| 2 | + <DocSearch /> |
| 3 | +</template> |
| 4 | + |
| 5 | +<script setup lang="ts"> |
| 6 | +import { DocSearch } from '@vuepress/plugin-docsearch/client'; |
| 7 | +import { |
| 8 | + useDebounceFn, |
| 9 | + useElementVisibility, |
| 10 | + useEventListener, |
| 11 | +} from '@vueuse/core'; |
| 12 | +import { onMounted, ref, watch } from 'vue'; |
| 13 | +import { useRouter, useRoute } from 'vue-router'; |
| 14 | +
|
| 15 | +const SEARCH_KEY = 'search'; |
| 16 | +const SEARCH_INPUT_ID = 'docsearch-input'; |
| 17 | +
|
| 18 | +const router = useRouter(); |
| 19 | +const route = useRoute(); |
| 20 | +
|
| 21 | +const inputElement = ref<HTMLInputElement>(); |
| 22 | +const isNavigating = ref(false); |
| 23 | +
|
| 24 | +// Handle initial search query, if one is set |
| 25 | +onMounted(() => { |
| 26 | + const query = new URL(window.location.href).searchParams.get(SEARCH_KEY); |
| 27 | + if (query) { |
| 28 | + const button = |
| 29 | + document.querySelector<HTMLButtonElement>('.DocSearch-Button'); |
| 30 | + if (!button) return; |
| 31 | + button.click(); |
| 32 | + // Set value in the input element once it appears |
| 33 | + performInitialQuery(query); |
| 34 | + } |
| 35 | +}); |
| 36 | +
|
| 37 | +function performInitialQuery(query: string) { |
| 38 | + const found = document.getElementById(SEARCH_INPUT_ID); |
| 39 | + if (found) { |
| 40 | + inputElement.value = found as HTMLInputElement; |
| 41 | + inputElement.value.value = query; |
| 42 | + inputElement.value.dispatchEvent(new Event('input')); |
| 43 | + } else { |
| 44 | + setTimeout(() => performInitialQuery(query), 50); |
| 45 | + } |
| 46 | +} |
| 47 | +
|
| 48 | +// There's some debounce builtin to docsearch, this mimics that and should |
| 49 | +// help prevent browser history from getting filled with partial queries. |
| 50 | +const setURLQueryDebounced = useDebounceFn(setURLQuery, 500); |
| 51 | +
|
| 52 | +// When the user types a search query, update URL query param accordingly |
| 53 | +useEventListener('input', (event) => { |
| 54 | + const target = event.target as HTMLInputElement | undefined; |
| 55 | + const searchQuery = target?.value; |
| 56 | + if (target?.id !== SEARCH_INPUT_ID) { |
| 57 | + return; |
| 58 | + } |
| 59 | + inputElement.value = target; |
| 60 | + setURLQueryDebounced(searchQuery); |
| 61 | +}); |
| 62 | +
|
| 63 | +// Clear the URL query param when search input is reset (i.e. "Clear" button). |
| 64 | +useEventListener('reset', (event) => { |
| 65 | + const target = event.target as HTMLFormElement | undefined; |
| 66 | + if (target?.classList.contains('DocSearch-Form')) { |
| 67 | + setURLQuery(); |
| 68 | + } |
| 69 | +}); |
| 70 | +
|
| 71 | +// Clear the URL query param when the search modal is dismissed. |
| 72 | +// NOTE: newer versions of @docsearch/js also provide a callback option for this. |
| 73 | +const inputIsVisible = useElementVisibility(inputElement); |
| 74 | +watch(inputIsVisible, (isVisible, wasVisible) => { |
| 75 | + if (wasVisible && !isVisible && !isNavigating.value) { |
| 76 | + setURLQuery(); |
| 77 | + } |
| 78 | +}); |
| 79 | +
|
| 80 | +// When a search result is selected, the modal is dismissed and its route is pushed, without `?search=`. |
| 81 | +// Track this to avoid running visibility watch logic to clear the URL in this case. |
| 82 | +router.beforeEach((route) => { |
| 83 | + if (!route.query[SEARCH_KEY]) { |
| 84 | + isNavigating.value = true; |
| 85 | + } |
| 86 | +}); |
| 87 | +router.afterEach(() => { |
| 88 | + isNavigating.value = false; |
| 89 | +}); |
| 90 | +
|
| 91 | +// Set `?search=` query param; if passed empty string or undefined, clear the param instead. |
| 92 | +function setURLQuery(newSearch?: string) { |
| 93 | + const { path, query: oldQuery, hash } = route; |
| 94 | + const { [SEARCH_KEY]: oldSearch, ...query } = oldQuery; |
| 95 | +
|
| 96 | + // Replace the history entry if the only the search query changed, to avoid |
| 97 | + // polluting the user's browser history with partial/incomplete search queries. |
| 98 | + const replace = oldSearch !== undefined || newSearch === undefined; |
| 99 | +
|
| 100 | + if (newSearch) { |
| 101 | + query[SEARCH_KEY] = newSearch; |
| 102 | + } |
| 103 | +
|
| 104 | + router.push({ path, query, hash, replace }); |
| 105 | +} |
| 106 | +</script> |
0 commit comments