-
-
Notifications
You must be signed in to change notification settings - Fork 6
/
AlgoliaSearchBox.vue
118 lines (110 loc) · 3.26 KB
/
AlgoliaSearchBox.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<template>
<div id="docsearch"></div>
</template>
<script>
import docsearch from '@docsearch/js'
import '@docsearch/css/dist/style.css'
function isSpecialClick (event) {
return (
event.button === 1 ||
event.altKey ||
event.ctrlKey ||
event.metaKey ||
event.shiftKey
)
}
export default {
name: 'AlgoliaSearchBox',
props: ['options'],
watch: {
$lang (newValue) {
this.update(this.options, newValue)
},
options (newValue) {
this.update(newValue, this.$lang)
}
},
mounted () {
this.initialize(this.options, this.$lang)
},
methods: {
getRelativePath (absoluteUrl) {
const {pathname, hash} = new URL(absoluteUrl)
return pathname.replace(this.$site.base, '/') + hash
},
initialize (userOptions, lang) {
const router = this.$router
docsearch(
{
placeholder: this.$site.themeConfig.searchPlaceholder,
...userOptions,
container: '#docsearch',
// #697 Make DocSearch work well in i18n mode.
searchParameters: Object.assign(
{},
lang && {
facetFilters: [`lang:${lang}`].concat(
userOptions.facetFilters || []
)
},
userOptions.searchParameters
),
navigator: {
navigate: ({suggestionUrl}) => {
const {pathname: hitPathname} = new URL(
window.location.origin + suggestionUrl
)
// Vue Router doesn't handle same-page navigation so we use
// the native browser location API for anchor navigation.
if (router.history.current.path === hitPathname) {
window.location.assign(
window.location.origin + suggestionUrl
)
} else {
router.push(suggestionUrl)
}
}
},
transformItems: items => {
return items.map(item => {
return Object.assign({}, item, {
url: this.getRelativePath(item.url)
})
})
},
hitComponent: ({ hit, children }) =>
({
type: 'a',
ref: undefined,
constructor: undefined,
key: undefined,
props: {
href: hit.url,
// handle `onClick` by `router.push`
onClick: (event) => {
if (isSpecialClick(event)) {
return
}
event.preventDefault()
router.push(hit.url)
},
children,
},
__v: null,
})
})
},
update (options, lang) {
this.$el.innerHTML = '<div id="docsearch"></div>'
this.initialize(options, lang)
}
}
}
</script>
<style>
.DocSearch {
--docsearch-primary-color: theme('colors.blue.600');
--docsearch-highlight-color: var(--docsearch-primary-color);
--docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
}
</style>