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