AlgoliaSearchBox.vue 4.0 KB
Newer Older
D
DCloud_LXH 已提交
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 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169
<template>
	<div id="docsearch"></div>
</template>

<script>
	import '@docsearch/css';

	const resolveRoutePathFromUrl = (url, base = '/') =>
		url
			// remove url origin
			.replace(/^(https?:)?\/\/[^/]*/, '')
			// remove site base
			.replace(new RegExp(`^${base}`), '/');

	const loadDocsearch = async () => {
		const docsearch = await import('@docsearch/js');
		return docsearch.default;
	};

	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: {
			initialize(userOptions, lang) {
				loadDocsearch().then(docsearch => {
					const { algoliaOptions = {} } = userOptions;
					docsearch(
						Object.assign({}, userOptions, {
							container: '#docsearch',
							// #697 Make docsearch work well at i18n mode.
							searchParameters: {
								...algoliaOptions,
								facetFilters: [`lang:${lang}`].concat(algoliaOptions.facetFilters || []),
							},
							navigator: {
								// when pressing Enter without metaKey
								navigate: ({ itemUrl }) => {
									this.$router.push(itemUrl);
								},
							},
							// transform full url to route path
							transformItems: items =>
								items.map(item => {
									// the `item.url` is full url with protocol and hostname
									// so we have to transform it to vue-router path
									return {
										...item,
										url: resolveRoutePathFromUrl(item.url, this.$site.base),
									};
								}),
							// handle `onClick` by `this.$routerpush`
							/* hitComponent: ({ hit, children }) => {
								const vnode = createElement(
									'a',
									{
										href: hit.url,
										onClick: event => {
											if (isSpecialClick(event)) {
												return;
											}
											event.preventDefault();
											this.$router.push(hit.url);
										},
									},
									children
								);
								console.log('vnode :>> ', vnode);
								console.log('children :>> ', children);
								return vnode;
							}, */
						})
					);
				});
			},

			update(options, lang) {
				this.$el.innerHTML = '<div id="docsearch"></div>';
				this.initialize(options, lang);
			},
		},
	};
</script>

<style lang="stylus">
	.DocSearch
	   --docsearch-primary-color $accentColor
	   --docsearch-highlight-color var(--docsearch-primary-color)
	   --docsearch-searchbox-shadow inset 0 0 0 2px var(--docsearch-primary-color)

	 #docsearch
	   display flex
	   flex-direction column
	   justify-content center
	 #docsearch span
	   @media (min-width: $MQMobile)
	    &
	     display flex

	 @media (max-width: $MQMobile)
	   :root
	     --docsearch-spacing 10px
	     --docsearch-footer-height 40px
	   .DocSearch-Button-Keys,.DocSearch-Button-Key,.DocSearch-Button-KeySeparator,.DocSearch-Button-Placeholder
	     display none !important
	   .DocSearch-Search-Icon
	     vertical-align middle
	   .DocSearch-Dropdown
	     height 100%
	   .DocSearch-Container
	     height 100vh
	     height -webkit-fill-available
	     position absolute
	   .DocSearch-Footer
	     border-radius 0
	     bottom 0
	     position absolute
	   .DocSearch-Hit-content-wrapper
	     display flex
	     position relative
	     width 80%
	   .DocSearch-Modal
	     border-radius 0
	     box-shadow none
	     height 100vh
	     height -webkit-fill-available
	     margin 0
	     max-width 100%
	     width 100%
	   .DocSearch-Cancel
	     -webkit-appearance none
	     -moz-appearance none
	     appearance none
	     background none
	     border 0
	     color var(--docsearch-highlight-color)
	     cursor pointer
	     display inline-block
	     flex none
	     font inherit
	     font-size 1em
	     font-weight 500
	     margin-left var(--docsearch-spacing)
	     outline none
	     overflow hidden
	     padding 0
	     -webkit-user-select none
	     -moz-user-select none
	     -ms-user-select none
	     user-select none
	     white-space nowrap
	   .DocSearch-Commands,.DocSearch-Hit-Tree
	     display none
</style>