diff options
| author | ruki <waruqi@gmail.com> | 2018-11-08 00:38:48 +0800 |
|---|---|---|
| committer | ruki <waruqi@gmail.com> | 2018-11-07 21:53:09 +0800 |
| commit | 26105034da4fcce7ac883c899d781f016559310d (patch) | |
| tree | c459a5dc4e3aa0972d9919033ece511ce76dd129 /node_modules/vuepress/lib/default-theme/AlgoliaSearchBox.vue | |
| parent | 2c77f00f1a7ecb6c8192f9c16d3b2001b254a107 (diff) | |
| download | xmake-docs-26105034da4fcce7ac883c899d781f016559310d.tar.gz xmake-docs-26105034da4fcce7ac883c899d781f016559310d.zip | |
switch to vuepress
Diffstat (limited to 'node_modules/vuepress/lib/default-theme/AlgoliaSearchBox.vue')
| -rw-r--r-- | node_modules/vuepress/lib/default-theme/AlgoliaSearchBox.vue | 156 |
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> |
