aboutsummaryrefslogtreecommitdiff
path: root/node_modules/vuepress/lib/default-theme/AlgoliaSearchBox.vue
diff options
context:
space:
mode:
Diffstat (limited to 'node_modules/vuepress/lib/default-theme/AlgoliaSearchBox.vue')
-rw-r--r--node_modules/vuepress/lib/default-theme/AlgoliaSearchBox.vue156
1 files changed, 156 insertions, 0 deletions
diff --git a/node_modules/vuepress/lib/default-theme/AlgoliaSearchBox.vue b/node_modules/vuepress/lib/default-theme/AlgoliaSearchBox.vue
new file mode 100644
index 00000000..0334ae0b
--- /dev/null
+++ b/node_modules/vuepress/lib/default-theme/AlgoliaSearchBox.vue
@@ -0,0 +1,156 @@
+<template>
+ <form
+ id="search-form"
+ class="algolia-search-wrapper search-box"
+ >
+ <input
+ id="algolia-search-input"
+ class="search-query"
+ >
+ </form>
+</template>
+
+<script>
+export default {
+ props: ['options'],
+
+ mounted () {
+ this.initialize(this.options, this.$lang)
+ },
+
+ methods: {
+ initialize (userOptions, lang) {
+ Promise.all([
+ import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.js'),
+ import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.css')
+ ]).then(([docsearch]) => {
+ docsearch = docsearch.default
+ const { algoliaOptions = {}} = userOptions
+ docsearch(Object.assign(
+ {},
+ userOptions,
+ {
+ inputSelector: '#algolia-search-input',
+ // #697 Make docsearch work well at i18n mode.
+ algoliaOptions: Object.assign({
+ 'facetFilters': [`lang:${lang}`].concat(algoliaOptions.facetFilters || [])
+ }, algoliaOptions)
+ }
+ ))
+ })
+ },
+
+ update (options, lang) {
+ this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">'
+ this.initialize(options, lang)
+ }
+ },
+
+ watch: {
+ $lang (newValue) {
+ this.update(this.options, newValue)
+ },
+
+ options (newValue) {
+ this.update(newValue, this.$lang)
+ }
+ }
+}
+</script>
+
+<style lang="stylus">
+@import './styles/config.styl'
+
+.algolia-search-wrapper
+ & > span
+ vertical-align middle
+ .algolia-autocomplete
+ line-height normal
+ .ds-dropdown-menu
+ background-color #fff
+ border 1px solid #999
+ border-radius 4px
+ font-size 16px
+ margin 6px 0 0
+ padding 4px
+ text-align left
+ &:before
+ border-color #999
+ [class*=ds-dataset-]
+ border none
+ padding 0
+ .ds-suggestions
+ margin-top 0
+ .ds-suggestion
+ border-bottom 1px solid $borderColor
+ .algolia-docsearch-suggestion--highlight
+ color #2c815b
+ .algolia-docsearch-suggestion
+ border-color $borderColor
+ padding 0
+ .algolia-docsearch-suggestion--category-header
+ padding 5px 10px
+ margin-top 0
+ background $accentColor
+ color #fff
+ font-weight 600
+ .algolia-docsearch-suggestion--highlight
+ background rgba(255, 255, 255, 0.6)
+ .algolia-docsearch-suggestion--wrapper
+ padding 0
+ .algolia-docsearch-suggestion--title
+ font-weight 600
+ margin-bottom 0
+ color $textColor
+ .algolia-docsearch-suggestion--subcategory-column
+ vertical-align top
+ padding 5px 7px 5px 5px
+ border-color $borderColor
+ background #f1f3f5
+ &:after
+ display none
+ .algolia-docsearch-suggestion--subcategory-column-text
+ color #555
+ .algolia-docsearch-footer
+ border-color $borderColor
+ .ds-cursor .algolia-docsearch-suggestion--content
+ background-color #e7edf3 !important
+ color $textColor
+
+@media (min-width: $MQMobile)
+ .algolia-search-wrapper
+ .algolia-autocomplete
+ .algolia-docsearch-suggestion
+ .algolia-docsearch-suggestion--subcategory-column
+ float none
+ width 150px
+ min-width 150px
+ display table-cell
+ .algolia-docsearch-suggestion--content
+ float none
+ display table-cell
+ width 100%
+ vertical-align top
+ .ds-dropdown-menu
+ min-width 515px !important
+
+@media (max-width: $MQMobile)
+ .algolia-search-wrapper
+ .ds-dropdown-menu
+ min-width calc(100vw - 4rem) !important
+ max-width calc(100vw - 4rem) !important
+ .algolia-docsearch-suggestion--wrapper
+ padding 5px 7px 5px 5px !important
+ .algolia-docsearch-suggestion--subcategory-column
+ padding 0 !important
+ background white !important
+ .algolia-docsearch-suggestion--subcategory-column-text:after
+ content " > "
+ font-size 10px
+ line-height 14.4px
+ display inline-block
+ width 5px
+ margin -3px 3px 0
+ vertical-align middle
+
+</style>