1 | <template>
|
2 | <form
|
3 | id="search-form"
|
4 | class="algolia-search-wrapper search-box"
|
5 | role="search"
|
6 | >
|
7 | <input
|
8 | id="algolia-search-input"
|
9 | class="search-query"
|
10 | :placeholder="placeholder"
|
11 | >
|
12 | </form>
|
13 | </template>
|
14 |
|
15 | <script>
|
16 | export default {
|
17 | name: 'AlgoliaSearchBox',
|
18 |
|
19 | props: ['options'],
|
20 |
|
21 | data () {
|
22 | return {
|
23 | placeholder: undefined
|
24 | }
|
25 | },
|
26 |
|
27 | watch: {
|
28 | $lang (newValue) {
|
29 | this.update(this.options, newValue)
|
30 | },
|
31 |
|
32 | options (newValue) {
|
33 | this.update(newValue, this.$lang)
|
34 | }
|
35 | },
|
36 |
|
37 | mounted () {
|
38 | this.initialize(this.options, this.$lang)
|
39 | this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
|
40 | },
|
41 |
|
42 | methods: {
|
43 | initialize (userOptions, lang) {
|
44 | Promise.all([
|
45 | import( 'docsearch.js/dist/cdn/docsearch.min.js'),
|
46 | import( 'docsearch.js/dist/cdn/docsearch.min.css')
|
47 | ]).then(([docsearch]) => {
|
48 | docsearch = docsearch.default
|
49 | const { algoliaOptions = {}} = userOptions
|
50 | docsearch(Object.assign(
|
51 | {},
|
52 | userOptions,
|
53 | {
|
54 | inputSelector: '#algolia-search-input',
|
55 |
|
56 | algoliaOptions: {
|
57 | ...algoliaOptions,
|
58 | facetFilters: [`lang:${lang}`].concat(algoliaOptions.facetFilters || [])
|
59 | },
|
60 | handleSelected: (input, event, suggestion) => {
|
61 | const { pathname, hash } = new URL(suggestion.url)
|
62 | const routepath = pathname.replace(this.$site.base, '/')
|
63 | const _hash = decodeURIComponent(hash)
|
64 | this.$router.push(`${routepath}${_hash}`)
|
65 | }
|
66 | }
|
67 | ))
|
68 | })
|
69 | },
|
70 |
|
71 | update (options, lang) {
|
72 | this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">'
|
73 | this.initialize(options, lang)
|
74 | }
|
75 | }
|
76 | }
|
77 | </script>
|
78 |
|
79 | <style lang="stylus">
|
80 | .algolia-search-wrapper
|
81 | & > span
|
82 | vertical-align middle
|
83 | .algolia-autocomplete
|
84 | line-height normal
|
85 | .ds-dropdown-menu
|
86 | background-color #fff
|
87 | border 1px solid #999
|
88 | border-radius 4px
|
89 | font-size 16px
|
90 | margin 6px 0 0
|
91 | padding 4px
|
92 | text-align left
|
93 | &:before
|
94 | border-color #999
|
95 | [class*=ds-dataset-]
|
96 | border none
|
97 | padding 0
|
98 | .ds-suggestions
|
99 | margin-top 0
|
100 | .ds-suggestion
|
101 | border-bottom 1px solid $borderColor
|
102 | .algolia-docsearch-suggestion--highlight
|
103 | color #2c815b
|
104 | .algolia-docsearch-suggestion
|
105 | border-color $borderColor
|
106 | padding 0
|
107 | .algolia-docsearch-suggestion--category-header
|
108 | padding 5px 10px
|
109 | margin-top 0
|
110 | background $accentColor
|
111 | color #fff
|
112 | font-weight 600
|
113 | .algolia-docsearch-suggestion--highlight
|
114 | background rgba(255, 255, 255, 0.6)
|
115 | .algolia-docsearch-suggestion--wrapper
|
116 | padding 0
|
117 | .algolia-docsearch-suggestion--title
|
118 | font-weight 600
|
119 | margin-bottom 0
|
120 | color $textColor
|
121 | .algolia-docsearch-suggestion--subcategory-column
|
122 | vertical-align top
|
123 | padding 5px 7px 5px 5px
|
124 | border-color $borderColor
|
125 | background #f1f3f5
|
126 | &:after
|
127 | display none
|
128 | .algolia-docsearch-suggestion--subcategory-column-text
|
129 | color #555
|
130 | .algolia-docsearch-footer
|
131 | border-color $borderColor
|
132 | .ds-cursor .algolia-docsearch-suggestion--content
|
133 | background-color #e7edf3 !important
|
134 | color $textColor
|
135 |
|
136 | @media (min-width: $MQMobile)
|
137 | .algolia-search-wrapper
|
138 | .algolia-autocomplete
|
139 | .algolia-docsearch-suggestion
|
140 | .algolia-docsearch-suggestion--subcategory-column
|
141 | float none
|
142 | width 150px
|
143 | min-width 150px
|
144 | display table-cell
|
145 | .algolia-docsearch-suggestion--content
|
146 | float none
|
147 | display table-cell
|
148 | width 100%
|
149 | vertical-align top
|
150 | .ds-dropdown-menu
|
151 | min-width 515px !important
|
152 |
|
153 | @media (max-width: $MQMobile)
|
154 | .algolia-search-wrapper
|
155 | .ds-dropdown-menu
|
156 | min-width calc(100vw - 4rem) !important
|
157 | max-width calc(100vw - 4rem) !important
|
158 | .algolia-docsearch-suggestion--wrapper
|
159 | padding 5px 7px 5px 5px !important
|
160 | .algolia-docsearch-suggestion--subcategory-column
|
161 | padding 0 !important
|
162 | background white !important
|
163 | .algolia-docsearch-suggestion--subcategory-column-text:after
|
164 | content " > "
|
165 | font-size 10px
|
166 | line-height 14.4px
|
167 | display inline-block
|
168 | width 5px
|
169 | margin -3px 3px 0
|
170 | vertical-align middle
|
171 |
|
172 | </style>
|