refactor: use script setup

src/client/theme-default/components/AlgoliaSearchBox.vue

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