refactor: use new createInjectionKey function (#2203)

Co-authored-by: Julian Hundeloh <julian@hundeloh-consulting.ch>
Co-authored-by: 07akioni <07akioni2@gmail.com>

src/_internal/select-menu/src/interface.ts

@@ -1,10 +1,11 @@
-import { VNodeChild, InjectionKey, Ref, UnwrapRef, VNode } from 'vue'
+import { VNodeChild, Ref, UnwrapRef, VNode } from 'vue'
 import { TreeNode } from 'treemate'
 import type {
   SelectBaseOption,
   SelectGroupOption,
   SelectIgnoredOption
 } from '../../../select/src/interface'
+import { createInjectionKey } from '../../../_utils'
 
 export type Size = 'small' | 'medium' | 'large' | 'huge'
 
@@ -51,11 +52,11 @@ export interface InternalExposedProps {
   next: () => void
 }
 
-export const internalSelectionMenuInjectionKey: InjectionKey<InternalSelectMenuInjection> =
-  Symbol('internal-select-menu')
+export const internalSelectionMenuInjectionKey =
+  createInjectionKey<InternalSelectMenuInjection>('internal-select-menu')
 
-export const internalSelectionMenuBodyInjectionKey: InjectionKey<
+export const internalSelectionMenuBodyInjectionKey = createInjectionKey<
 Ref<HTMLElement | null>
-> = Symbol('internal-select-menu-body')
+>('internal-select-menu-body')
 
 export type InternalSelectMenuRef = UnwrapRef<InternalExposedProps>

src/_mixins/use-form-item.ts

@@ -4,9 +4,9 @@ import {
   provide,
   onBeforeUnmount,
   ComputedRef,
-  InjectionKey,
   Ref
 } from 'vue'
+import { createInjectionKey } from '../_utils'
 
 type FormItemSize = 'small' | 'medium' | 'large'
 type AllowedSize = 'tiny' | 'small' | 'medium' | 'large' | 'huge' | number
@@ -22,8 +22,8 @@ export interface FormItemInjection {
   handleContentChange: () => void
 }
 
-export const formItemInjectionKey: InjectionKey<FormItemInjection> =
-  Symbol('formItem')
+export const formItemInjectionKey =
+  createInjectionKey<FormItemInjection>('formItem')
 
 interface UseFormItemOptions<T> {
   defaultSize?: FormItemSize

src/_utils/index.ts

@@ -9,7 +9,8 @@ export {
   render,
   getFirstSlotVNode,
   createDataKey,
-  createRefSetter
+  createRefSetter,
+  createInjectionKey
 } from './vue'
 export type { MaybeArray } from './vue'
 export {
@@ -20,7 +21,11 @@ export {
   largerSize,
   getTitleAttribute
 } from './naive'
-export type { ExtractPublicPropTypes, ExtractInternalPropTypes, Mutable } from './naive'
+export type {
+  ExtractPublicPropTypes,
+  ExtractInternalPropTypes,
+  Mutable
+} from './naive'
 export { formatLength } from './css'
 export { createKey } from './cssr'
 export * from './composable'

src/_utils/vue/create-injection-key.ts

@@ -0,0 +1,5 @@
+import { InjectionKey } from 'vue'
+
+export function createInjectionKey<T> (key: string): InjectionKey<T> {
+  return key as any
+}

src/_utils/vue/index.ts

@@ -9,4 +9,5 @@ export { render } from './render'
 export { getFirstSlotVNode } from './get-first-slot-vnode'
 export { createDataKey } from './create-data-key'
 export { createRefSetter } from './create-ref-setter'
+export { createInjectionKey } from './create-injection-key'
 export type { MaybeArray } from './call'

src/anchor/src/Link.tsx

@@ -5,15 +5,18 @@ import {
   inject,
   defineComponent,
   watch,
-  Ref,
-  InjectionKey
+  Ref
 } from 'vue'
 import { useMemo } from 'vooks'
 import {
   useInjectionCollection,
   useInjectionElementCollection
 } from '../../_utils/composable'
-import { ExtractPublicPropTypes, getTitleAttribute } from '../../_utils'
+import {
+  createInjectionKey,
+  ExtractPublicPropTypes,
+  getTitleAttribute
+} from '../../_utils'
 
 export interface AnchorInjection {
   activeHref: Ref<string | null>
@@ -24,8 +27,7 @@ export interface AnchorInjection {
   titleEls: HTMLElement[]
 }
 
-export const anchorInjectionKey: InjectionKey<AnchorInjection> =
-  Symbol('anchor')
+export const anchorInjectionKey = createInjectionKey<AnchorInjection>('anchor')
 
 const anchorLinkProps = {
   title: String,

src/avatar/src/AvatarGroup.tsx

@@ -3,14 +3,13 @@ import {
   defineComponent,
   PropType,
   CSSProperties,
-  InjectionKey,
   provide,
   computed
 } from 'vue'
 import type { Size } from './interface'
 import NAvatar from './Avatar'
 import { useConfig, useStyle } from '../../_mixins'
-import type { ExtractPublicPropTypes } from '../../_utils'
+import { createInjectionKey, ExtractPublicPropTypes } from '../../_utils'
 import style from './styles/avatar-group.cssr'
 
 export interface AvatarGroupInjection {
@@ -21,8 +20,8 @@ interface AvatarOption {
   src: string
 }
 
-export const avatarGroupInjectionKey: InjectionKey<AvatarGroupInjection> =
-  Symbol('avatar-group')
+export const avatarGroupInjectionKey =
+  createInjectionKey<AvatarGroupInjection>('avatar-group')
 
 const avatarGroupProps = {
   max: Number,

src/breadcrumb/src/Breadcrumb.tsx

@@ -4,7 +4,6 @@ import {
   defineComponent,
   CSSProperties,
   provide,
-  InjectionKey,
   Ref,
   toRef
 } from 'vue'
@@ -13,15 +12,15 @@ import type { ThemeProps } from '../../_mixins'
 import { breadcrumbLight } from '../styles'
 import type { BreadcrumbTheme } from '../styles'
 import style from './styles/index.cssr'
-import type { ExtractPublicPropTypes } from '../../_utils'
+import { createInjectionKey, ExtractPublicPropTypes } from '../../_utils'
 
 export interface BreadcrumbInjection {
   separatorRef: Ref<string>
   mergedClsPrefixRef: Ref<string>
 }
 
-export const breadcrumbInjectionKey: InjectionKey<BreadcrumbInjection> =
-  Symbol('breadcrumb')
+export const breadcrumbInjectionKey =
+  createInjectionKey<BreadcrumbInjection>('breadcrumb')
 
 const breadcrumbProps = {
   ...(useTheme.props as ThemeProps<BreadcrumbTheme>),

src/button/src/ButtonGroup.tsx

@@ -1,6 +1,6 @@
-import { h, PropType, defineComponent, provide, InjectionKey } from 'vue'
+import { h, PropType, defineComponent, provide } from 'vue'
 import { useConfig, useStyle } from '../../_mixins'
-import type { ExtractPublicPropTypes } from '../../_utils'
+import { createInjectionKey, ExtractPublicPropTypes } from '../../_utils'
 import type { Size } from './interface'
 import style from './styles/button-group.cssr'
 
@@ -8,9 +8,8 @@ export interface ButtonGroupInjection {
   size?: Size | undefined
 }
 
-export const buttonGroupInjectionKey: InjectionKey<ButtonGroupInjection> = Symbol(
-  'button-group'
-)
+export const buttonGroupInjectionKey =
+  createInjectionKey<ButtonGroupInjection>('button-group')
 
 const buttonGroupProps = {
   size: {

src/carousel/src/interface.ts

@@ -1,4 +1,4 @@
-import type { InjectionKey } from 'vue'
+import { createInjectionKey } from '../../_utils'
 
 export const tuple = <T extends string[]>(...args: T): T => args
 
@@ -26,8 +26,8 @@ export interface CarouselMethodsInjection {
   removeSlide: (slide?: HTMLElement) => void
   onCarouselItemClick: (index: number, event: MouseEvent) => void
 }
-export const carouselMethodsInjectionKey: InjectionKey<CarouselMethodsInjection> =
-  Symbol('carouselMethods')
+export const carouselMethodsInjectionKey =
+  createInjectionKey<CarouselMethodsInjection>('carouselMethods')
 
 export interface CarouselInst {
   getCurrentIndex: () => number

src/cascader/src/interface.ts

@@ -2,7 +2,8 @@ import { CheckStrategy, TreeNode } from 'treemate'
 import type { MergedTheme } from '../../_mixins'
 import type { NLocale } from '../../locales'
 import type { CascaderTheme } from '../styles'
-import { InjectionKey, Ref, VNodeChild } from 'vue'
+import { Ref, VNodeChild } from 'vue'
+import { createInjectionKey } from '../../_utils'
 
 export type ValueAtom = string | number
 export type Value = ValueAtom | ValueAtom[]
@@ -111,8 +112,8 @@ export interface SelectMenuInstance {
   enter: () => boolean
 }
 
-export const cascaderInjectionKey: InjectionKey<CascaderInjection> =
-  Symbol('cascader')
+export const cascaderInjectionKey =
+  createInjectionKey<CascaderInjection>('cascader')
 
 export interface CascaderInst {
   focus: () => void

src/checkbox/src/CheckboxGroup.tsx

@@ -6,13 +6,12 @@ import {
   computed,
   toRef,
   ref,
-  InjectionKey,
   Ref,
   ComputedRef
 } from 'vue'
 import { useMergedState } from 'vooks'
 import { useConfig, useFormItem } from '../../_mixins'
-import { warn, call, MaybeArray } from '../../_utils'
+import { warn, call, MaybeArray, createInjectionKey } from '../../_utils'
 import type { ExtractPublicPropTypes } from '../../_utils'
 
 export interface CheckboxGroupInjection {
@@ -25,8 +24,8 @@ export interface CheckboxGroupInjection {
   toggleCheckbox: (checked: boolean, checkboxValue: string | number) => void
 }
 
-export const checkboxGroupInjectionKey: InjectionKey<CheckboxGroupInjection> =
-  Symbol('checkboxGroup')
+export const checkboxGroupInjectionKey =
+  createInjectionKey<CheckboxGroupInjection>('checkboxGroup')
 
 const checkboxGroupProps = {
   min: Number,

src/collapse/src/Collapse.tsx

@@ -5,7 +5,6 @@ import {
   PropType,
   provide,
   ref,
-  InjectionKey,
   Ref,
   ExtractPropTypes,
   CSSProperties,
@@ -14,7 +13,12 @@ import {
 import { useMergedState } from 'vooks'
 import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
-import { call, ExtractPublicPropTypes, warn } from '../../_utils'
+import {
+  call,
+  createInjectionKey,
+  ExtractPublicPropTypes,
+  warn
+} from '../../_utils'
 import type { MaybeArray } from '../../_utils'
 import { collapseLight, CollapseTheme } from '../styles'
 import style from './styles/index.cssr'
@@ -90,8 +94,8 @@ export interface NCollapseInjection {
   ) => void
 }
 
-export const collapseInjectionKey: InjectionKey<NCollapseInjection> =
-  Symbol('collapse')
+export const collapseInjectionKey =
+  createInjectionKey<NCollapseInjection>('collapse')
 
 export default defineComponent({
   name: 'Collapse',

src/color-picker/src/ColorPicker.tsx

@@ -11,7 +11,6 @@ import {
   Transition,
   CSSProperties,
   provide,
-  InjectionKey,
   ComputedRef,
   Ref,
   watch,
@@ -53,7 +52,12 @@ import {
   useTheme,
   useLocale
 } from '../../_mixins'
-import { call, createKey, useAdjustedTo } from '../../_utils'
+import {
+  call,
+  createInjectionKey,
+  createKey,
+  useAdjustedTo
+} from '../../_utils'
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils'
 import { NButton } from '../../button'
 import HueSlider from './HueSlider'
@@ -114,11 +118,11 @@ export type ColorPickerProps = ExtractPublicPropTypes<
   typeof colorPickerPanelProps
 >
 
-export const colorPickerInjectionKey: InjectionKey<{
+export const colorPickerInjectionKey = createInjectionKey<{
   themeRef: ComputedRef<MergedTheme<ColorPickerTheme>>
   colorPickerSlots: Slots
   renderLabelRef: Ref<RenderLabel | undefined>
-}> = Symbol('colorPickerThemeInjection')
+}>('colorPickerThemeInjection')
 
 export default defineComponent({
   name: 'ColorPicker',

src/config-provider/src/ConfigProvider.ts

@@ -5,13 +5,12 @@ import {
   defineComponent,
   PropType,
   provide,
-  InjectionKey,
   ComputedRef,
   markRaw
 } from 'vue'
 import { useMemo } from 'vooks'
 import { merge } from 'lodash-es'
-import { ExtractPublicPropTypes, warn } from '../../_utils'
+import { createInjectionKey, ExtractPublicPropTypes, warn } from '../../_utils'
 import { defaultClsPrefix, Hljs } from '../../_mixins'
 import type {
   GlobalTheme,
@@ -27,8 +26,8 @@ import type {
 } from './internal-interface'
 import { NDateLocale, NLocale } from '../../locales'
 
-export const configProviderInjectionKey: InjectionKey<ConfigProviderInjection> =
-  Symbol('configProviderInjection')
+export const configProviderInjectionKey =
+  createInjectionKey<ConfigProviderInjection>('configProviderInjection')
 
 export const configProviderProps = {
   abstract: Boolean,

src/data-table/src/interface.ts

@@ -1,18 +1,12 @@
 import { TreeNode } from 'treemate'
-import {
-  CSSProperties,
-  InjectionKey,
-  Ref,
-  VNodeChild,
-  HTMLAttributes,
-  Slots
-} from 'vue'
+import { CSSProperties, Ref, VNodeChild, HTMLAttributes, Slots } from 'vue'
 import { EllipsisProps } from '../../ellipsis/src/Ellipsis'
 import { NLocale } from '../../locales'
 import { MergedTheme } from '../../_mixins'
 import { DataTableTheme } from '../styles'
 import { RowItem, ColItem } from './use-group-header'
 import { DataTableSelectionOption } from './TableParts/SelectionMenu'
+import { createInjectionKey } from '../../_utils'
 
 export type FilterOptionValue = string | number
 export type ColumnKey = string | number
@@ -229,8 +223,8 @@ export interface DataTableInjection {
   setHeaderScrollLeft: (scrollLeft: number) => void
 }
 
-export const dataTableInjectionKey: InjectionKey<DataTableInjection> =
-  Symbol('dataTable')
+export const dataTableInjectionKey =
+  createInjectionKey<DataTableInjection>('dataTable')
 
 export interface MainTableInjection {
   leftActiveFixedColKey: ColumnKey | null

src/date-picker/src/interface.ts

@@ -1,4 +1,4 @@
-import { InjectionKey, Ref, Slots } from 'vue'
+import { Ref, Slots } from 'vue'
 import { VirtualListInst } from 'vueuc'
 import { NLocale, NDateLocale } from '../../locales'
 import type { ScrollbarInst } from '../../_internal'
@@ -13,6 +13,7 @@ import {
   uniCalendarValidation,
   dualCalendarValidation
 } from './validation-utils'
+import { createInjectionKey } from '../../_utils'
 
 export type Value = number | [number, number]
 
@@ -26,24 +27,24 @@ export type Shortcuts =
 
 export type OnUpdateValue = (
   value: number &
-    (number | null) &
+  (number | null) &
   [number, number] &
-    ([number, number] | null),
+  ([number, number] | null),
   formattedValue: string &
-    (string | null) &
+  (string | null) &
   [string, string] &
-    ([string, string] | null)
+  ([string, string] | null)
 ) => void
 
 export type OnUpdateFormattedValue = (
   value: string &
-    (string | null) &
+  (string | null) &
   [string, string] &
-    ([string, string] | null),
+  ([string, string] | null),
   timestampValue: number &
-    (number | null) &
+  (number | null) &
   [number, number] &
-    ([number, number] | null)
+  ([number, number] | null)
 ) => void
 
 export type OnUpdateFormattedValueImpl = (
@@ -58,9 +59,9 @@ export type OnUpdateValueImpl = (
 
 export type OnPanelUpdateValue = (
   value: number &
-    (number | null) &
+  (number | null) &
   [number, number] &
-    ([number, number] | null),
+  ([number, number] | null),
   doUpdate: boolean
 ) => void
 
@@ -97,8 +98,8 @@ export type DatePickerInjection = {
 } & ReturnType<typeof uniCalendarValidation> &
 ReturnType<typeof dualCalendarValidation>
 
-export const datePickerInjectionKey: InjectionKey<DatePickerInjection> =
-  Symbol('datePicker')
+export const datePickerInjectionKey =
+  createInjectionKey<DatePickerInjection>('datePicker')
 
 export type IsDateDisabled = IsSingleDateDisabled | IsRangeDateDisabled
 export type IsSingleDateDisabled = (date: number) => boolean

src/dialog/src/DialogProvider.ts

@@ -7,12 +7,11 @@ import {
   provide,
   PropType,
   reactive,
-  InjectionKey,
   Ref,
   CSSProperties
 } from 'vue'
 import { createId } from 'seemly'
-import { omit } from '../../_utils'
+import { createInjectionKey, omit } from '../../_utils'
 import type { ExtractPublicPropTypes, Mutable } from '../../_utils'
 import DialogEnvironment, { exposedDialogEnvProps } from './DialogEnvironment'
 import { useClicked, useClickPosition } from 'vooks'
@@ -47,16 +46,16 @@ export interface DialogApiInjection {
   info: (options: DialogOptions) => DialogReactive
 }
 
-export const dialogApiInjectionKey: InjectionKey<DialogApiInjection> =
-  Symbol('dialogApi')
+export const dialogApiInjectionKey =
+  createInjectionKey<DialogApiInjection>('dialogApi')
 
 export interface DialogProviderInjection {
   clickedRef: Ref<boolean>
   clickPositionRef: Ref<{ x: number, y: number } | null>
 }
 
-export const dialogProviderInjectionKey: InjectionKey<DialogProviderInjection> =
-  Symbol('dialogProvider')
+export const dialogProviderInjectionKey =
+  createInjectionKey<DialogProviderInjection>('dialogProvider')
 
 interface DialogInst {
   hide: () => void

src/drawer/src/interface.ts

@@ -1,10 +1,11 @@
-import { Ref, InjectionKey } from 'vue'
+import { Ref } from 'vue'
 import type { MergedTheme } from '../../_mixins'
+import { createInjectionKey } from '../../_utils'
 import type { DrawerTheme } from '../styles'
 
 export type DrawerBodyInjection = Ref<HTMLElement | null> | null
-export const drawerBodyInjectionKey: InjectionKey<DrawerBodyInjection> =
-  Symbol('drawerBody')
+export const drawerBodyInjectionKey =
+  createInjectionKey<DrawerBodyInjection>('drawerBody')
 
 export interface DrawerInjection {
   isMountedRef: Ref<boolean>
@@ -12,5 +13,4 @@ export interface DrawerInjection {
   mergedClsPrefixRef: Ref<string>
   doUpdateShow: (show: boolean) => void
 }
-export const drawerInjectionKey: InjectionKey<DrawerInjection> =
-  Symbol('drawer')
+export const drawerInjectionKey = createInjectionKey<DrawerInjection>('drawer')

src/dropdown/src/Dropdown.tsx

@@ -8,7 +8,6 @@ import {
   watch,
   provide,
   CSSProperties,
-  InjectionKey,
   Ref,
   mergeProps
 } from 'vue'
@@ -27,7 +26,8 @@ import {
   createKey,
   MaybeArray,
   ExtractPublicPropTypes,
-  createRefSetter
+  createRefSetter,
+  createInjectionKey
 } from '../../_utils'
 import { dropdownLight } from '../styles'
 import type { DropdownTheme } from '../styles'
@@ -63,8 +63,8 @@ export interface DropdownInjection {
   doUpdateShow: (value: boolean) => void
 }
 
-export const dropdownInjectionKey: InjectionKey<DropdownInjection> =
-  Symbol('dropdown')
+export const dropdownInjectionKey =
+  createInjectionKey<DropdownInjection>('dropdown')
 
 const dropdownBaseProps = {
   animated: {

src/dropdown/src/DropdownMenu.tsx

@@ -3,7 +3,6 @@ import {
   defineComponent,
   h,
   inject,
-  InjectionKey,
   PropType,
   provide,
   Ref,
@@ -28,14 +27,15 @@ import {
   DropdownOption,
   DropdownRenderOption
 } from './interface'
+import { createInjectionKey } from '../../_utils'
 
 export interface NDropdownMenuInjection {
   showIconRef: Ref<boolean>
   hasSubmenuRef: Ref<boolean>
 }
 
-export const dropdownMenuInjectionKey: InjectionKey<NDropdownMenuInjection> =
-  Symbol('dropdownMenu')
+export const dropdownMenuInjectionKey =
+  createInjectionKey<NDropdownMenuInjection>('dropdownMenu')
 
 export default defineComponent({
   name: 'DropdownMenu',

src/dropdown/src/DropdownOption.tsx

@@ -7,7 +7,6 @@ import {
   defineComponent,
   provide,
   PropType,
-  InjectionKey,
   Ref,
   mergeProps,
   HTMLAttributes
@@ -15,7 +14,7 @@ import {
 import { VBinder, VTarget, VFollower, FollowerPlacement } from 'vueuc'
 import { useMemo } from 'vooks'
 import { ChevronRightIcon } from '../../_internal/icons'
-import { render, useDeferredTrue } from '../../_utils'
+import { createInjectionKey, render, useDeferredTrue } from '../../_utils'
 import { NIcon } from '../../icon'
 import NDropdownMenu, { dropdownMenuInjectionKey } from './DropdownMenu'
 import { dropdownInjectionKey } from './Dropdown'
@@ -32,8 +31,8 @@ interface NDropdownOptionInjection {
   enteringSubmenuRef: Ref<boolean>
 }
 
-const dropdownOptionInjectionKey: InjectionKey<NDropdownOptionInjection> =
-  Symbol('dropdown-option')
+const dropdownOptionInjectionKey =
+  createInjectionKey<NDropdownOptionInjection>('dropdown-option')
 
 export default defineComponent({
   name: 'DropdownOption',

src/dynamic-input/src/interface.ts

@@ -1,5 +1,6 @@
-import { InjectionKey, Ref } from 'vue'
+import { Ref } from 'vue'
 import type { MergedTheme } from '../../_mixins'
+import { createInjectionKey } from '../../_utils'
 import type { DynamicInputTheme } from '../styles'
 
 export interface DynamicInputInjection {
@@ -9,8 +10,7 @@ export interface DynamicInputInjection {
   placeholderRef: Ref<string | undefined>
 }
 
-export const dynamicInputInjectionKey: InjectionKey<DynamicInputInjection> = Symbol(
-  'dynamic-input'
-)
+export const dynamicInputInjectionKey =
+  createInjectionKey<DynamicInputInjection>('dynamic-input')
 
 export type OnUpdateValue = <T>(value: T[]) => void

src/form/src/interface.ts

@@ -1,6 +1,7 @@
-import { InjectionKey, Ref } from 'vue'
+import { Ref } from 'vue'
 import { ValidateError, RuleItem, ValidateOption } from 'async-validator'
 import { FormSetupProps } from './Form'
+import { createInjectionKey } from '../../_utils'
 
 export interface FormRules {
   [path: string]: FormRules | FormItemRule | FormItemRule[]
@@ -45,7 +46,7 @@ export type FormItemInternalValidate = (
 export type FormItemValidate = ((
   options: FormItemValidateOptions
 ) => Promise<void>) &
-  ((trigger?: string, callback?: ValidateCallback) => Promise<void>)
+((trigger?: string, callback?: ValidateCallback) => Promise<void>)
 
 export interface FormItemInst {
   validate: FormItemValidate
@@ -63,9 +64,9 @@ export interface FormInjection {
   deriveMaxChildLabelWidth: (currentWidth: number) => void
 }
 
-export const formInjectionKey: InjectionKey<FormInjection> = Symbol('form')
-export const formItemInstsInjectionKey: InjectionKey<unknown> =
-  Symbol('formItemInsts')
+export const formInjectionKey = createInjectionKey<FormInjection>('form')
+export const formItemInstsInjectionKey =
+  createInjectionKey<unknown>('formItemInsts')
 
 export type LabelAlign = 'left' | 'center' | 'right'
 export type LabelPlacement = 'left' | 'top'

src/grid/src/Grid.tsx

@@ -3,7 +3,6 @@ import {
   defineComponent,
   computed,
   CSSProperties,
-  InjectionKey,
   PropType,
   provide,
   toRef,
@@ -18,7 +17,12 @@ import { VResizeObserver, VResizeObserverOnResize } from 'vueuc'
 import { pxfy, parseResponsivePropValue, beforeNextFrameOnce } from 'seemly'
 import { defaultBreakpoints } from '../../config-provider/src/config'
 import { useConfig } from '../../_mixins'
-import { getSlot, flatten, ExtractPublicPropTypes } from '../../_utils'
+import {
+  getSlot,
+  flatten,
+  ExtractPublicPropTypes,
+  createInjectionKey
+} from '../../_utils'
 import { defaultSpan } from './GridItem'
 
 const defaultCols = 24
@@ -56,7 +60,7 @@ export interface NGridInjection {
   overflowRef: Ref<boolean>
 }
 
-export const gridInjectionKey: InjectionKey<NGridInjection> = Symbol('grid')
+export const gridInjectionKey = createInjectionKey<NGridInjection>('grid')
 
 export type GridProps = ExtractPublicPropTypes<typeof gridProps>
 

src/image/src/ImageGroup.tsx

@@ -1,22 +1,14 @@
-import {
-  defineComponent,
-  h,
-  ref,
-  provide,
-  InjectionKey,
-  getCurrentInstance,
-  Ref
-} from 'vue'
+import { defineComponent, h, ref, provide, getCurrentInstance, Ref } from 'vue'
 import { createId } from 'seemly'
-import { ExtractPublicPropTypes } from '../../_utils'
+import { createInjectionKey, ExtractPublicPropTypes } from '../../_utils'
 import { useConfig } from '../../_mixins'
 import NImagePreview from './ImagePreview'
 import type { ImagePreviewInst } from './ImagePreview'
 import { imagePreviewSharedProps } from './interface'
 
-export const imageGroupInjectionKey: InjectionKey<
+export const imageGroupInjectionKey = createInjectionKey<
 ImagePreviewInst & { groupId: string, mergedClsPrefixRef: Ref<string> }
-> = Symbol('image-group')
+>('image-group')
 
 const imageGroupProps = imagePreviewSharedProps
 

src/input/src/interface.ts

@@ -1,4 +1,5 @@
-import { Ref, UnwrapRef, InjectionKey } from 'vue'
+import { Ref, UnwrapRef } from 'vue'
+import { createInjectionKey } from '../../_utils'
 
 export type Size = 'tiny' | 'small' | 'medium' | 'large'
 
@@ -22,8 +23,8 @@ export interface InputWrappedRef {
 
 export type InputInst = UnwrapRef<InputWrappedRef>
 
-export const inputInjectionKey: InjectionKey<{
+export const inputInjectionKey = createInjectionKey<{
   mergedValueRef: Ref<string | [string, string] | null>
   maxlengthRef: Ref<number | undefined>
   mergedClsPrefixRef: Ref<string>
-}> = Symbol('input')
+}>('input')

src/layout/src/Layout.tsx

@@ -5,7 +5,6 @@ import {
   PropType,
   CSSProperties,
   ref,
-  InjectionKey,
   provide,
   ExtractPropTypes
 } from 'vue'
@@ -17,7 +16,7 @@ import { layoutLight } from '../styles'
 import type { LayoutTheme } from '../styles'
 import style from './styles/layout.cssr'
 import { LayoutInst, positionProp } from './interface'
-import type { ExtractPublicPropTypes } from '../../_utils'
+import { createInjectionKey, ExtractPublicPropTypes } from '../../_utils'
 
 const layoutProps = {
   embedded: Boolean,
@@ -41,9 +40,8 @@ const layoutProps = {
 
 export type LayoutProps = ExtractPublicPropTypes<typeof layoutProps>
 
-export const layoutInjectionKey: InjectionKey<
-ExtractPropTypes<typeof layoutProps>
-> = Symbol('layout')
+export const layoutInjectionKey =
+  createInjectionKey<ExtractPropTypes<typeof layoutProps>>('layout')
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createLayoutComponent (isContent: boolean) {

src/layout/src/interface.ts

@@ -1,9 +1,10 @@
-import { InjectionKey, PropType, Ref } from 'vue'
+import { PropType, Ref } from 'vue'
+import { createInjectionKey } from '../../_utils'
 
-export const layoutSiderInjectionKey: InjectionKey<{
+export const layoutSiderInjectionKey = createInjectionKey<{
   collapsedRef: Ref<boolean>
   collapseModeRef: Ref<'transform' | 'width'>
-}> = Symbol('layoutSiderInjection')
+}>('layoutSiderInjection')
 
 export const positionProp = {
   type: String as PropType<'static' | 'absolute'>,

src/legacy-grid/src/Row.tsx

@@ -1,15 +1,6 @@
-import {
-  defineComponent,
-  h,
-  InjectionKey,
-  PropType,
-  provide,
-  Ref,
-  toRef
-} from 'vue'
+import { defineComponent, h, PropType, provide, Ref, toRef } from 'vue'
 import { useMemo } from 'vooks'
-import type { ExtractPublicPropTypes } from '../../_utils'
-import { formatLength, keysOf } from '../../_utils'
+import { createInjectionKey, ExtractPublicPropTypes, formatLength, keysOf } from '../../_utils'
 import { useConfig, useStyle } from '../../_mixins'
 import style from './styles/index.cssr'
 
@@ -20,7 +11,7 @@ export interface RowInjection {
   mergedClsPrefixRef: Ref<string>
 }
 
-export const rowInjectionKey: InjectionKey<RowInjection> = Symbol('row')
+export const rowInjectionKey = createInjectionKey<RowInjection>('row')
 
 export const rowProps = {
   gutter: {

src/list/src/List.tsx

@@ -5,12 +5,11 @@ import {
   PropType,
   CSSProperties,
   Ref,
-  provide,
-  InjectionKey
+  provide
 } from 'vue'
 import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
-import type { ExtractPublicPropTypes } from '../../_utils'
+import { createInjectionKey, ExtractPublicPropTypes } from '../../_utils'
 import { listLight } from '../styles'
 import type { ListTheme } from '../styles'
 import style from './styles/index.cssr'
@@ -33,7 +32,7 @@ interface ListInjection {
   mergedClsPrefixRef: Ref<string>
 }
 
-export const listInjectionKey: InjectionKey<ListInjection> = Symbol('list')
+export const listInjectionKey = createInjectionKey<ListInjection>('list')
 
 export default defineComponent({
   name: 'List',

src/loading-bar/src/LoadingBarProvider.tsx

@@ -8,7 +8,6 @@ import {
   nextTick,
   PropType,
   ExtractPropTypes,
-  InjectionKey,
   Ref,
   CSSProperties
 } from 'vue'
@@ -17,7 +16,7 @@ import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import NLoadingBar from './LoadingBar'
 import type { LoadingBarTheme } from '../styles'
-import type { ExtractPublicPropTypes } from '../../_utils'
+import { createInjectionKey, ExtractPublicPropTypes } from '../../_utils'
 
 interface LoadingBarInst {
   start: () => void
@@ -50,13 +49,13 @@ export type LoadingBarProviderSetupProps = ExtractPropTypes<
   typeof loadingBarProps
 >
 
-export const loadingBarProviderInjectionKey: InjectionKey<{
+export const loadingBarProviderInjectionKey = createInjectionKey<{
   props: LoadingBarProviderSetupProps
   mergedClsPrefixRef: Ref<string>
-}> = Symbol('loadingBar')
+}>('loadingBar')
 
-export const loadingBarApiInjectionKey: InjectionKey<LoadingBarApiInjection> =
-  Symbol('loadingBarApi')
+export const loadingBarApiInjectionKey =
+  createInjectionKey<LoadingBarApiInjection>('loadingBarApi')
 
 export default defineComponent({
   name: 'LoadingBarProvider',

src/log/src/Log.tsx

@@ -8,14 +8,12 @@ import {
   nextTick,
   ref,
   toRef,
-  InjectionKey,
   Ref
 } from 'vue'
 import { throttle } from 'lodash-es'
 import { useTheme, useHljs, ThemeProps, useConfig } from '../../_mixins'
 import type { Hljs } from '../../_mixins'
-import type { ExtractPublicPropTypes } from '../../_utils'
-import { warn } from '../../_utils'
+import { createInjectionKey, ExtractPublicPropTypes, warn } from '../../_utils'
 import { NScrollbar } from '../../_internal'
 import type { ScrollbarInst } from '../../_internal'
 import { NCode } from '../../code'
@@ -31,7 +29,7 @@ export interface LogInjection {
   mergedHljsRef: Ref<Hljs | undefined>
 }
 
-export const logInjectionKey: InjectionKey<LogInjection> = Symbol('log')
+export const logInjectionKey = createInjectionKey<LogInjection>('log')
 
 const logProps = {
   ...(useTheme.props as ThemeProps<LogTheme>),

src/menu/src/Menu.tsx

@@ -7,7 +7,6 @@ import {
   provide,
   PropType,
   ExtractPropTypes,
-  InjectionKey,
   CSSProperties,
   inject,
   VNodeChild,
@@ -17,7 +16,7 @@ import { createTreeMate, Key } from 'treemate'
 import { useCompitable, useMergedState } from 'vooks'
 import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
-import { call } from '../../_utils'
+import { call, createInjectionKey } from '../../_utils'
 import type { MaybeArray } from '../../_utils'
 import { itemRenderer } from './utils'
 import { menuLight } from '../styles'
@@ -132,7 +131,7 @@ export type MenuSetupProps = ExtractPropTypes<typeof menuProps>
 
 export type MenuProps = Partial<MenuSetupProps>
 
-export const menuInjectionKey: InjectionKey<MenuInjection> = Symbol('menu')
+export const menuInjectionKey = createInjectionKey<MenuInjection>('menu')
 
 export default defineComponent({
   name: 'Menu',

src/menu/src/MenuOptionGroup.tsx

@@ -1,13 +1,5 @@
-import {
-  h,
-  defineComponent,
-  provide,
-  PropType,
-  Fragment,
-  InjectionKey,
-  inject
-} from 'vue'
-import { render } from '../../_utils'
+import { h, defineComponent, provide, PropType, Fragment, inject } from 'vue'
+import { createInjectionKey, render } from '../../_utils'
 import { useMenuChild, useMenuChildProps } from './use-menu-child'
 import type { MenuOptionGroupInjection } from './use-menu-child'
 import { itemRenderer } from './utils'
@@ -23,8 +15,8 @@ export const menuItemGroupProps = {
   }
 } as const
 
-export const menuItemGroupInjectionKey: InjectionKey<MenuOptionGroupInjection> =
-  Symbol('menu-item-group')
+export const menuItemGroupInjectionKey =
+  createInjectionKey<MenuOptionGroupInjection>('menu-item-group')
 
 export default defineComponent({
   name: 'MenuOptionGroup',

src/menu/src/Submenu.tsx

@@ -6,8 +6,7 @@ import {
   provide,
   computed,
   VNode,
-  VNodeChild,
-  InjectionKey
+  VNodeChild
 } from 'vue'
 import { useMemo } from 'vooks'
 import { NFadeInExpandTransition } from '../../_internal'
@@ -18,6 +17,7 @@ import { useMenuChild, useMenuChildProps } from './use-menu-child'
 import type { SubmenuInjection } from './use-menu-child'
 import { MenuMixedOption, TmNode } from './interface'
 import { menuItemGroupInjectionKey } from './MenuOptionGroup'
+import { createInjectionKey } from '../../_utils'
 
 export const submenuProps = {
   ...useMenuChildProps,
@@ -41,8 +41,8 @@ export const submenuProps = {
   onClick: Function as PropType<() => void>
 } as const
 
-export const submenuInjectionKey: InjectionKey<SubmenuInjection> =
-  Symbol('submenu')
+export const submenuInjectionKey =
+  createInjectionKey<SubmenuInjection>('submenu')
 
 export default defineComponent({
   name: 'Submenu',

src/message/src/MessageProvider.tsx

@@ -7,14 +7,13 @@ import {
   defineComponent,
   provide,
   VNodeChild,
-  InjectionKey,
   ExtractPropTypes,
   Ref,
   PropType,
   CSSProperties
 } from 'vue'
 import { createId } from 'seemly'
-import { omit } from '../../_utils'
+import { createInjectionKey, omit } from '../../_utils'
 import type { ExtractPublicPropTypes } from '../../_utils'
 import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
@@ -33,8 +32,8 @@ export interface MessageApiInjection {
   destroyAll: () => void
 }
 
-export const messageApiInjectionKey: InjectionKey<MessageApiInjection> =
-  Symbol('messageApi')
+export const messageApiInjectionKey =
+  createInjectionKey<MessageApiInjection>('messageApi')
 
 export interface MessageReactive {
   content?: ContentType
@@ -88,10 +87,10 @@ export type MessageProviderProps = ExtractPublicPropTypes<
 
 type MessageProviderSetupProps = ExtractPropTypes<typeof messageProviderProps>
 
-export const messageProviderInjectionKey: InjectionKey<{
+export const messageProviderInjectionKey = createInjectionKey<{
   props: MessageProviderSetupProps
   mergedClsPrefixRef: Ref<string>
-}> = Symbol('messageProvider')
+}>('messageProvider')
 
 export default defineComponent({
   name: 'MessageProvider',

src/modal/src/interface.ts

@@ -1,13 +1,14 @@
-import { Ref, ComponentPublicInstance, InjectionKey } from 'vue'
+import { Ref, ComponentPublicInstance } from 'vue'
 import type { MergedTheme } from '../../_mixins'
+import { createInjectionKey } from '../../_utils'
 import type { ModalTheme } from '../styles'
 
 export type ModalBodyInjection = Ref<
 HTMLElement | ComponentPublicInstance | null
 > | null
 
-export const modalBodyInjectionKey: InjectionKey<ModalBodyInjection> =
-  Symbol('modalBody')
+export const modalBodyInjectionKey =
+  createInjectionKey<ModalBodyInjection>('modalBody')
 
 export interface ModalInjection {
   getMousePosition: () => {
@@ -21,4 +22,4 @@ export interface ModalInjection {
   transformOriginRef: Ref<'mouse' | 'center'>
 }
 
-export const modalInjectionKey: InjectionKey<ModalInjection> = Symbol('modal')
+export const modalInjectionKey = createInjectionKey<ModalInjection>('modal')

src/notification/src/NotificationProvider.tsx

@@ -9,13 +9,17 @@ import {
   PropType,
   ExtractPropTypes,
   provide,
-  InjectionKey,
   Ref
 } from 'vue'
 import { createId } from 'seemly'
 import { useConfig, useTheme } from '../../_mixins'
 import type { MergedTheme, ThemeProps } from '../../_mixins'
-import { ExtractPublicPropTypes, omit, Mutable } from '../../_utils'
+import {
+  ExtractPublicPropTypes,
+  omit,
+  Mutable,
+  createInjectionKey
+} from '../../_utils'
 import { notificationLight, NotificationTheme } from '../styles'
 import NotificationContainer from './NotificationContainer'
 import NotificationEnvironment, {
@@ -32,8 +36,8 @@ export interface NotificationProviderInjection {
   mergedThemeRef: Ref<MergedTheme<NotificationTheme>>
 }
 
-export const notificationProviderInjectionKey: InjectionKey<NotificationProviderInjection> =
-  Symbol('notificationProvider')
+export const notificationProviderInjectionKey =
+  createInjectionKey<NotificationProviderInjection>('notificationProvider')
 
 type Create = (options: NotificationOptions) => NotificationReactive
 type TypedCreate = (
@@ -53,8 +57,8 @@ export interface NotificationApiInjection {
 
 export type NotificationProviderInst = NotificationApiInjection
 
-export const notificationApiInjectionKey: InjectionKey<NotificationApiInjection> =
-  Symbol('notificationApi')
+export const notificationApiInjectionKey =
+  createInjectionKey<NotificationApiInjection>('notificationApi')
 
 export type NotificationReactive = {
   readonly key: string

src/popconfirm/src/interface.ts

@@ -1,5 +1,6 @@
-import { InjectionKey, Ref } from 'vue'
+import { Ref } from 'vue'
 import type { MergedTheme } from '../../_mixins'
+import { createInjectionKey } from '../../_utils'
 import type { PopconfirmTheme } from '../styles'
 
 export interface PopconfirmInjection {
@@ -7,6 +8,5 @@ export interface PopconfirmInjection {
   mergedClsPrefixRef: Ref<string>
 }
 
-export const popconfirmInjectionKey: InjectionKey<PopconfirmInjection> = Symbol(
-  'popconfirm'
-)
+export const popconfirmInjectionKey =
+  createInjectionKey<PopconfirmInjection>('popconfirm')

src/popover/src/interface.ts

@@ -1,4 +1,5 @@
-import { Ref, InjectionKey, CSSProperties, VNode } from 'vue'
+import { Ref, CSSProperties, VNode } from 'vue'
+import { createInjectionKey } from '../../_utils'
 
 export type PopoverTrigger = 'click' | 'hover' | 'focus' | 'manual'
 
@@ -9,8 +10,9 @@ export interface PopoverInst {
 
 export type PopoverBodyInjection = Ref<HTMLElement | null> | null
 
-export const popoverBodyInjectionKey: InjectionKey<PopoverBodyInjection> =
-  Symbol('popoverBodyInjection')
+export const popoverBodyInjectionKey = createInjectionKey<PopoverBodyInjection>(
+  'popoverBodyInjection'
+)
 
 export type InternalRenderBody = (
   className: any,

src/popselect/src/interface.ts

@@ -1,5 +1,6 @@
-import { Ref, InjectionKey } from 'vue'
+import { Ref } from 'vue'
 import type { MergedTheme } from '../../_mixins'
+import { createInjectionKey } from '../../_utils'
 import type { PopselectTheme } from '../styles'
 
 export type PopselectSize = 'small' | 'medium' | 'large' | 'huge'
@@ -10,5 +11,5 @@ export interface PopselectInjection {
   syncPosition: () => void
 }
 
-export const popselectInjectionKey: InjectionKey<PopselectInjection> =
-  Symbol('popselect')
+export const popselectInjectionKey =
+  createInjectionKey<PopselectInjection>('popselect')

src/radio/src/use-radio.ts

@@ -5,12 +5,11 @@ import {
   ExtractPropTypes,
   PropType,
   Ref,
-  ComputedRef,
-  InjectionKey
+  ComputedRef
 } from 'vue'
 import { useMemo, useMergedState } from 'vooks'
 import { useConfig, useFormItem } from '../../_mixins'
-import { warn, call } from '../../_utils'
+import { warn, call, createInjectionKey } from '../../_utils'
 import type { MaybeArray } from '../../_utils'
 import { OnUpdateValue, OnUpdateValueImpl } from './interface'
 
@@ -59,8 +58,8 @@ export interface RadioGroupInjection {
   doUpdateValue: OnUpdateValue
 }
 
-export const radioGroupInjectionKey: InjectionKey<RadioGroupInjection> =
-  Symbol('radioGroup')
+export const radioGroupInjectionKey =
+  createInjectionKey<RadioGroupInjection>('radioGroup')
 
 export interface UseRadio {
   mergedClsPrefix: Ref<string>

src/steps/src/Steps.tsx

@@ -5,7 +5,6 @@ import {
   provide,
   PropType,
   VNodeChild,
-  InjectionKey,
   ExtractPropTypes,
   Ref,
   Slots
@@ -14,7 +13,12 @@ import type { MergedTheme, ThemeProps } from '../../_mixins'
 import { useConfig, useTheme } from '../../_mixins'
 import { stepsLight } from '../styles'
 import style from './styles/index.cssr'
-import { ExtractPublicPropTypes, flatten, getSlot } from '../../_utils'
+import {
+  createInjectionKey,
+  ExtractPublicPropTypes,
+  flatten,
+  getSlot
+} from '../../_utils'
 import type { StepsTheme } from '../styles'
 
 function stepWithIndex (step: VNodeChild, i: number): VNode | null {
@@ -53,7 +57,7 @@ export interface StepsInjection {
 
 export type StepsProps = ExtractPublicPropTypes<typeof stepsProps>
 
-export const stepsInjectionKey: InjectionKey<StepsInjection> = Symbol('steps')
+export const stepsInjectionKey = createInjectionKey<StepsInjection>('steps')
 
 export default defineComponent({
   name: 'Steps',

src/tabs/src/interface.ts

@@ -1,4 +1,5 @@
-import { Ref, InjectionKey, CSSProperties } from 'vue'
+import { Ref, CSSProperties } from 'vue'
+import { createInjectionKey } from '../../_utils'
 
 export type TabsType = 'line' | 'card' | 'bar' | 'segment'
 
@@ -38,7 +39,7 @@ export type Addable =
     disabled?: boolean
   }
 
-export const tabsInjectionKey: InjectionKey<TabsInjection> = Symbol('tabs')
+export const tabsInjectionKey = createInjectionKey<TabsInjection>('tabs')
 
 export interface TabsInst {
   syncBarPosition: () => void

src/tag/src/Tag.tsx

@@ -5,7 +5,6 @@ import {
   PropType,
   CSSProperties,
   ref,
-  InjectionKey,
   Ref,
   provide,
   toRef
@@ -13,7 +12,7 @@ import {
 import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { NBaseClose } from '../../_internal'
-import { warn, createKey, call } from '../../_utils'
+import { warn, createKey, call, createInjectionKey } from '../../_utils'
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils'
 import { tagLight } from '../styles'
 import type { TagTheme } from '../styles'
@@ -64,7 +63,7 @@ interface TagInjection {
   roundRef: Ref<boolean>
 }
 
-export const tagInjectionKey: InjectionKey<TagInjection> = Symbol('tag')
+export const tagInjectionKey = createInjectionKey<TagInjection>('tag')
 
 export type TagProps = ExtractPublicPropTypes<typeof tagProps>
 

src/time-picker/src/interface.ts

@@ -1,6 +1,7 @@
-import { InjectionKey, Ref } from 'vue'
+import { Ref } from 'vue'
 import { ScrollbarInst } from '../../_internal'
 import type { MergedTheme } from '../../_mixins'
+import { createInjectionKey } from '../../_utils'
 import type { TimePickerTheme } from '../styles'
 
 export type ItemValue = number | 'am' | 'pm'
@@ -16,8 +17,8 @@ export interface TimePickerInjection {
   mergedClsPrefixRef: Ref<string>
 }
 
-export const timePickerInjectionKey: InjectionKey<TimePickerInjection> =
-  Symbol('timePicker')
+export const timePickerInjectionKey =
+  createInjectionKey<TimePickerInjection>('timePicker')
 
 export interface PanelRef {
   $el: HTMLElement
@@ -28,7 +29,7 @@ export interface PanelRef {
 }
 
 export type OnUpdateValue = ((value: number, formattedValue: string) => void) &
-  ((value: number | null, formattedValue: string | null) => void)
+((value: number | null, formattedValue: string | null) => void)
 export type OnUpdateValueImpl = (
   value: number | null,
   formattedValue: string | null
@@ -38,7 +39,7 @@ export type OnUpdateFormattedValue = ((
   value: string,
   timestampValue: number
 ) => void) &
-  ((value: string | null, timestampValue: number | null) => void)
+((value: string | null, timestampValue: number | null) => void)
 export type OnUpdateFormattedValueImpl = (
   value: string | null,
   timestampValue: number | null

src/timeline/src/Timeline.tsx

@@ -4,13 +4,12 @@ import {
   PropType,
   ExtractPropTypes,
   provide,
-  InjectionKey,
   Ref
 } from 'vue'
 import { MergedTheme, useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import type { TimelineTheme } from '../styles'
-import type { ExtractPublicPropTypes } from '../../_utils'
+import { createInjectionKey, ExtractPublicPropTypes } from '../../_utils'
 import { timelineLight } from '../styles'
 import style from './styles/index.cssr'
 
@@ -33,8 +32,9 @@ export interface TimelineInjection {
   mergedThemeRef: Ref<MergedTheme<TimelineTheme>>
   mergedClsPrefixRef: Ref<string>
 }
-export const timelineInjectionKey: InjectionKey<TimelineInjection> =
-  Symbol('timeline')
+export const timelineInjectionKey =
+  createInjectionKey<TimelineInjection>('timeline')
+
 export type TimelineProps = ExtractPublicPropTypes<typeof timelineProps>
 
 export default defineComponent({

src/transfer/src/interface.ts

@@ -1,5 +1,6 @@
-import { InjectionKey, Ref } from 'vue'
+import { Ref } from 'vue'
 import type { MergedTheme } from '../../_mixins'
+import { createInjectionKey } from '../../_utils'
 import type { TransferTheme } from '../styles'
 
 export type OptionValue = string | number
@@ -36,7 +37,7 @@ export interface TransferInjection {
   handleTgtCheckboxClick: (checked: boolean, value: OptionValue) => void
 }
 
-export const transferInjectionKey: InjectionKey<TransferInjection> =
-  Symbol('transfer')
+export const transferInjectionKey =
+  createInjectionKey<TransferInjection>('transfer')
 
 export type OnUpdateValue = (value: OptionValue[]) => void

src/tree-select/src/interface.ts

@@ -1,6 +1,7 @@
 import { TreeNode } from 'treemate'
-import { InjectionKey, Ref } from 'vue'
+import { Ref } from 'vue'
 import { TreeOptionBase } from '../../tree/src/interface'
+import { createInjectionKey } from '../../_utils'
 
 export type TreeSelectOption = Omit<
 TreeOptionBase,
@@ -44,5 +45,5 @@ export interface TreeSelectInjection {
   pendingNodeKeyRef: Ref<string | number | null>
 }
 
-export const treeSelectInjectionKey: InjectionKey<TreeSelectInjection> =
-  Symbol('tree-select')
+export const treeSelectInjectionKey =
+  createInjectionKey<TreeSelectInjection>('tree-select')

src/tree/src/interface.ts

@@ -1,6 +1,7 @@
 import { CheckStrategy, TreeNode } from 'treemate'
-import { InjectionKey, Ref, VNodeChild } from 'vue'
+import { Ref, VNodeChild } from 'vue'
 import type { MergedTheme } from '../../_mixins'
+import { createInjectionKey } from '../../_utils'
 import type { TreeTheme } from '../styles'
 
 export type Key = string | number
@@ -114,7 +115,7 @@ export interface TreeInjection {
   handleDrop: (info: InternalDropInfo) => void
 }
 
-export const treeInjectionKey: InjectionKey<TreeInjection> = Symbol('tree')
+export const treeInjectionKey = createInjectionKey<TreeInjection>('tree')
 
 export type TmNode = TreeNode<TreeOption>
 

src/upload/src/interface.ts

@@ -1,6 +1,7 @@
-import { Ref, InjectionKey, CSSProperties } from 'vue'
+import { Ref, CSSProperties } from 'vue'
 import { ImageGroupProps } from '../../image'
 import type { MergedTheme } from '../../_mixins'
+import { createInjectionKey } from '../../_utils'
 import type { UploadTheme } from '../styles'
 
 export interface FileInfo {
@@ -85,8 +86,7 @@ export interface UploadInjection {
   openOpenFileDialog: () => void
 }
 
-export const uploadInjectionKey: InjectionKey<UploadInjection> =
-  Symbol('upload')
+export const uploadInjectionKey = createInjectionKey<UploadInjection>('upload')
 
 export interface XhrHandlers {
   handleXHRLoad: (e: ProgressEvent) => void