refactor: use script setup

pull/153/head
Eduardo San Martin Morote 5 years ago
parent 2c47fad2cd
commit 2ea51e7ee8

@ -2,12 +2,10 @@
<div id="docsearch"></div> <div id="docsearch"></div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { AlgoliaSearchOptions } from 'algoliasearch' import { AlgoliaSearchOptions } from 'algoliasearch'
// import docsearch from '@docsearch/js'
// import '@docsearch/css'
import { useRoute, useRouter } from 'vitepress' import { useRoute, useRouter } from 'vitepress'
import { getCurrentInstance, onMounted, PropType, watch } from 'vue' import { defineProps, getCurrentInstance, onMounted, watch } from 'vue'
function isSpecialClick(event: MouseEvent) { function isSpecialClick(event: MouseEvent) {
return ( return (
@ -27,24 +25,15 @@ function getRelativePath(absoluteUrl: string) {
return url return url
} }
export default { const { options } = defineProps<{ options: AlgoliaSearchOptions }>()
name: 'AlgoliaSearchBox',
props: {
options: {
type: Object as PropType<AlgoliaSearchOptions>,
required: true,
},
},
setup(props) {
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
const vm = getCurrentInstance() const vm = getCurrentInstance()
watch( watch(
() => props.options, () => options,
newValue => { (newValue) => {
update(newValue) update(newValue)
} }
) )
@ -59,7 +48,7 @@ export default {
function initialize(userOptions: any) { function initialize(userOptions: any) {
Promise.all([ Promise.all([
import('@docsearch/js'), import('@docsearch/js'),
import('@docsearch/css'), import('@docsearch/css')
// import(/* webpackChunkName: "docsearch" */ '@docsearch/js'), // import(/* webpackChunkName: "docsearch" */ '@docsearch/js'),
// Promise.resolve(docsearch), // Promise.resolve(docsearch),
// import(/* webpackChunkName: "docsearch" */ '@docsearch/css'), // import(/* webpackChunkName: "docsearch" */ '@docsearch/css'),
@ -92,12 +81,12 @@ export default {
} else { } else {
router.go(suggestionUrl) router.go(suggestionUrl)
} }
}
}, },
}, transformItems: (items) => {
transformItems: items => { return items.map((item) => {
return items.map(item => {
return Object.assign({}, item, { return Object.assign({}, item, {
url: getRelativePath(item.url), url: getRelativePath(item.url)
}) })
}) })
}, },
@ -133,20 +122,18 @@ export default {
router.go(relativeHit) router.go(relativeHit)
}, },
children, children
}, }
}
} }
},
}) })
) )
}) })
} }
onMounted(() => { onMounted(() => {
initialize(props.options) initialize(options)
}) })
},
}
</script> </script>
<style> <style>

Loading…
Cancel
Save