refactor: tidy injections of dropdown

components/common/dropdown/Dropdown.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { dropdownContextKey } from './ctx'
+import { InjectionKeyDropdownContext } from '~/constants/symbols'
+
 defineProps<{
   placement?: string
 }>()
@@ -8,7 +9,7 @@ const dropdown = $ref<any>()
 const colorMode = useColorMode()
 
 const hide = () => dropdown.hide()
-provide(dropdownContextKey, {
+provide(InjectionKeyDropdownContext, {
   hide,
 })
 

components/common/dropdown/DropdownItem.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { dropdownContextKey } from './ctx'
-
 const props = defineProps<{
   text?: string
   description?: string
@@ -10,7 +8,7 @@ const props = defineProps<{
 }>()
 const emit = defineEmits(['click'])
 
-const { hide } = inject(dropdownContextKey, undefined) || {}
+const { hide } = useDropdownContext() || {}
 
 const el = ref<HTMLDivElement>()
 

components/common/dropdown/ctx.ts

@@ -1,5 +0,0 @@
-import type { InjectionKey } from 'vue'
-
-export const dropdownContextKey: InjectionKey<{
-  hide: () => void
-}> = Symbol('dropdownContextKey')

composables/injections.ts

@@ -1,5 +1,9 @@
-import { InjectionKeyFontSize } from '~/constants/symbols'
+import { InjectionKeyDropdownContext, InjectionKeyFontSize } from '~/constants/symbols'
 
 export function useFontSizeRef() {
   return inject(InjectionKeyFontSize)!
 }
+
+export function useDropdownContext() {
+  return inject(InjectionKeyDropdownContext, undefined)
+}

constants/symbols.ts

@@ -1,4 +1,8 @@
 import type { InjectionKey, Ref } from 'vue'
 import type { FontSize } from '~/types'
 
-export const InjectionKeyFontSize = Symbol('font-size') as InjectionKey<Ref<FontSize>>
+export const InjectionKeyFontSize: InjectionKey<Ref<FontSize>> = Symbol('font-size')
+
+export const InjectionKeyDropdownContext: InjectionKey<{
+  hide: () => void
+}> = Symbol('dropdown-context')