refactor(plugin-slimsearch): avoid inject/provide

Author: Mister-Hope

Diff for: plugins/search/plugin-slimsearch/src/client/components/SearchBox.ts

@@ -6,9 +6,9 @@ import {
   useLocaleConfig,
 } from '@vuepress/helper/client'
 import type { VNode } from 'vue'
-import { computed, defineComponent, h, inject, onMounted, ref } from 'vue'
+import { computed, defineComponent, h, onMounted, ref } from 'vue'
 
-import { searchModalSymbol } from '../composables/index.js'
+import { useActiveState } from '../composables/index.js'
 import { locales, options } from '../define.js'
 import { SearchIcon } from './icons.js'
 
@@ -21,11 +21,11 @@ export default defineComponent({
 
   setup() {
     const locale = useLocaleConfig(locales)
-    const isActive = inject(searchModalSymbol)!
+    const [isActive, toggleActive] = useActiveState()
     const isMacOS = ref(false)
 
     useKeys(options.hotKeys, () => {
-      if (!isActive.value) isActive.value = true
+      if (!isActive.value) toggleActive()
     })
 
     const controlKeys = computed(() =>

Diff for: plugins/search/plugin-slimsearch/src/client/components/SearchModal.ts

@@ -22,7 +22,7 @@ import {
 import { useSiteLocaleData } from 'vuepress/client'
 
 import {
-  searchModalSymbol,
+  useActiveState,
   useArrayCycle,
   useSuggestions,
 } from '../composables/index.js'
@@ -54,7 +54,7 @@ export default defineComponent({
   name: 'SearchModal',
 
   setup() {
-    const isActive = inject(searchModalSymbol)!
+    const [isActive, toggleActive] = useActiveState()
     const siteLocale = useSiteLocaleData()
     const locale = useLocaleConfig(locales)
     const searchOptions = useSearchOptions()
@@ -96,7 +96,7 @@ export default defineComponent({
       }
       // hide the modal when pressing the escape key
       else if (event.key === 'Escape') {
-        isActive.value = false
+        toggleActive(false)
       }
     })
 
@@ -140,7 +140,7 @@ export default defineComponent({
             h('div', {
               class: 'slimsearch-mask',
               onClick: () => {
-                isActive.value = false
+                toggleActive(false)
                 input.value = ''
               },
             }),
@@ -233,7 +233,7 @@ export default defineComponent({
                     type: 'button',
                     class: 'slimsearch-close-button',
                     onClick: () => {
-                      isActive.value = false
+                      toggleActive(false)
                       input.value = ''
                     },
                   },
@@ -245,7 +245,7 @@ export default defineComponent({
                 queries: queries.value,
                 isFocusing: !hasSuggestions.value,
                 onClose: () => {
-                  isActive.value = false
+                  toggleActive(false)
                 },
                 onUpdateQuery: (query: string) => {
                   input.value = query

Diff for: plugins/search/plugin-slimsearch/src/client/composables/index.ts

@@ -1,4 +1,4 @@
-export * from './setup.js'
+export * from './useActiveState.js'
 export * from './useArrayCycle.js'
 export * from './useMobile.js'
 export * from './useQueryHistory.js'

Diff for: plugins/search/plugin-slimsearch/src/client/composables/setup.ts

@@ -0,0 +1,9 @@
+import { useToggle } from '@vueuse/core'
+import type { Ref } from 'vue'
+
+export type ActiveState = [
+  isActive: Ref<boolean>,
+  toggleActive: (value?: boolean) => void,
+]
+
+export const useActiveState = (): ActiveState => useToggle()

Diff for: plugins/search/plugin-slimsearch/src/client/composables/useActiveState.ts

@@ -2,16 +2,12 @@ import { defineClientConfig } from 'vuepress/client'
 
 import SearchBox from './components/SearchBox.js'
 import SearchModal from './components/SearchModal.js'
-import { setupSearchModal } from './composables/index.js'
 import { injectSearchConfig } from './helpers/index.js'
 
 export default defineClientConfig({
   enhance({ app }) {
     injectSearchConfig(app)
     app.component('SearchBox', SearchBox)
   },
-  setup() {
-    setupSearchModal()
-  },
   rootComponents: [SearchModal],
 })