fix: 修复部分组件依赖注入的类型错误问题 🔖🔖🔖

packages/fighting-design/_hooks/use-button/index.ts

@@ -23,7 +23,7 @@ export const useButton = (prop: ButtonProps): UseButtonReturn => {
   const { getType, getSize } = useGlobal(prop)
 
   /** 获取父组件注入的依赖项 */
-  const parentInject = inject<FightingSize | null>(BUTTON_GROUP_PROPS_KEY, null)
+  const parentInject: FightingSize | null = inject(BUTTON_GROUP_PROPS_KEY, null)
 
   /**
    * 检测是否带有默认插槽

packages/fighting-design/_hooks/use-global/index.ts

@@ -19,7 +19,7 @@ export * from './interface.d'
  */
 export const useGlobal = <T extends UseGlobalProp>(prop?: T): UseGlobalReturn => {
   /** 获取全局配置组件注入的依赖项 */
-  const global = inject<FightingGlobalProps | null>(FIGHTING_GLOBAL_PROPS_KEY, null)
+  const global: FightingGlobalProps | null = inject(FIGHTING_GLOBAL_PROPS_KEY, null)
 
   /**
    * 获取组件的类型

packages/fighting-design/breadcrumb-item/src/breadcrumb-item.vue

@@ -12,7 +12,7 @@
   const prop = defineProps(Props)
 
   /** 获取注入依赖项 */
-  const parentInject = inject<BreadcrumbProps | null>(BREADCRUMB_PROPS_KEY, null)
+  const parentInject: BreadcrumbProps | null = inject(BREADCRUMB_PROPS_KEY, null)
 
   const { styles } = useList(
     reactive({

packages/fighting-design/button-group/index.ts

@@ -4,6 +4,7 @@ import { install } from '../_utils'
 
 export const FButtonGroup = install(ButtonGroup)
 
+/** button-group 组件实例类型 */
 export type ButtonGroupInstance = InstanceType<typeof ButtonGroup>
 
 export * from './src/interface.d'

packages/fighting-design/button-group/src/button-group.vue

@@ -12,7 +12,7 @@
   const { classes } = useList(prop, 'button-group')
 
   /** 获取全局配置组件注入的依赖项 */
-  const fightingGlobalInject = inject<FightingGlobalProps | null>(FIGHTING_GLOBAL_PROPS_KEY, null)
+  const fightingGlobalInject: FightingGlobalProps | null = inject(FIGHTING_GLOBAL_PROPS_KEY, null)
 
   /** 计算按钮组件的 size */
   const buttonGroupSize = computed((): FightingSize => {

packages/fighting-design/button-group/src/props.ts

@@ -25,7 +25,8 @@ export const Props = {
   })
 } as const
 
+/** button-group 组件 props 类型 */
 export type ButtonGroupProps = ExtractPropTypes<typeof Props>
 
 /** button-group 组件注入的依赖项 */
-export const BUTTON_GROUP_PROPS_KEY: InjectionKey<ButtonGroupProps> = Symbol('button-group-props-key')
+export const BUTTON_GROUP_PROPS_KEY: InjectionKey<FightingSize> = Symbol('button-group-props-key')

packages/fighting-design/checkbox-group/src/checkbox-group.vue

@@ -4,6 +4,7 @@
   import { sizeChange, isArray } from '../../_utils'
   import { useRun } from '../../_hooks'
   import { EMIT_UPDATE } from '../../_tokens'
+  import type { CheckboxGroupProvide } from './interface'
   import type { CSSProperties } from 'vue'
   import type { ClassList } from '../../_interface'
 
@@ -23,7 +24,7 @@
   }
 
   /** 获取需要注入的依赖项 */
-  provide(
+  provide<CheckboxGroupProvide>(
     CHECKBOX_GROUP_PROPS_KEY,
     reactive({
       ...toRefs(prop),

packages/fighting-design/checkbox-group/src/interface.d.ts

@@ -1,5 +1,3 @@
-import type { FightingSize } from '../../_interface'
-
 export type { CheckboxGroupProps } from './props'
 
 /**
@@ -9,29 +7,7 @@ export type { CheckboxGroupProps } from './props'
  */
 export type CheckboxGroupChange = (val: string[]) => void
 
-/**
- * 注入的依赖项类型接口
- *
- * @param { string[] } modelValue 绑定值
- * @param { boolean } disabled 是否禁用
- * @param { boolean } vertical 是否纵向排列
- * @param { string } label label
- * @param { boolean } border 是否显示边框
- * @param { string } size 尺寸
- * @param { string | number } columnGap 横向排列的间距
- * @param { string | number } rowGap 纵向排列的间距
- * @param { Function } onChange 绑定值变化时触发
- * @param { Function } setChange 绑定值发生改变时候触
- */
-export interface CheckboxGroupInject {
-  modelValue: string[]
-  disabled: boolean
-  vertical: boolean
-  label: string
-  border: boolean
-  size: FightingSize
-  columnGap: string | number
-  rowGap: string | number
-  onChange: CheckboxGroupChange
+/** 注入的依赖项类型 */
+export type CheckboxGroupProvide = CheckboxGroupProps & {
   setChange: (val: CheckboxGroupLabel) => void
 }

packages/fighting-design/checkbox-group/src/props.ts

@@ -1,7 +1,7 @@
 import { setBooleanProp, setStringNumberProp, setStringProp, setFunctionProp, setArrayProp } from '../../_utils'
 import { FIGHTING_SIZE } from '../../_tokens'
 import type { ExtractPropTypes, InjectionKey } from 'vue'
-import type { CheckboxGroupChange } from './interface'
+import type { CheckboxGroupChange, CheckboxGroupProvide } from './interface'
 import type { FightingSize } from '../../_interface'
 
 export const Props = {
@@ -32,6 +32,7 @@ export const Props = {
   onChange: setFunctionProp<CheckboxGroupChange>()
 } as const
 
+/** checkbox-group 组件 props 类型 */
 export type CheckboxGroupProps = ExtractPropTypes<typeof Props>
 
-export const CHECKBOX_GROUP_PROPS_KEY: InjectionKey<CheckboxGroupProps> = Symbol('f-checkbox-group-props-key')
+export const CHECKBOX_GROUP_PROPS_KEY: InjectionKey<CheckboxGroupProvide> = Symbol('f-checkbox-group-props-key')

packages/fighting-design/checkbox/src/checkbox.vue

@@ -5,7 +5,7 @@
   import { CHECKBOX_GROUP_PROPS_KEY } from '../../checkbox-group/src/props'
   import { isArray, isBoolean } from '../../_utils'
   import { EMIT_UPDATE } from '../../_tokens'
-  import type { CheckboxGroupInject } from '../../checkbox-group'
+  import type { CheckboxGroupProvide } from '../../checkbox-group'
   import type { ClassList } from '../../_interface'
   import type { CheckboxModelValue } from './interface'
 
@@ -15,7 +15,7 @@
   })
 
   /** 获取父组件注入的依赖项 */
-  const parentInject = inject<CheckboxGroupInject | null>(CHECKBOX_GROUP_PROPS_KEY, null)
+  const parentInject: CheckboxGroupProvide | null = inject(CHECKBOX_GROUP_PROPS_KEY, null)
 
   /** 绑定值 */
   const model = computed({

packages/fighting-design/dropdown-item/src/dropdown-item.vue

@@ -8,7 +8,7 @@
   const prop = defineProps(Props)
 
   /** 获取到 trigger 注入的依赖项 */
-  const parentInject = inject<TriggerProvide | null>(TRIGGER_CLOSE_KEY, null) as TriggerProvide
+  const parentInject: TriggerProvide | null = inject(TRIGGER_CLOSE_KEY, null)
 
   /**
    * 点击时触发
@@ -17,7 +17,7 @@
    */
   const handleClick = (evt: MouseEvent): void => {
     if (prop.disabled) return
-    useRun(parentInject.handelClose)
+    useRun(parentInject && parentInject.handelClose)
     useRun(prop.onClick, evt)
   }
 </script>

packages/fighting-design/form-item/src/form-item.vue

@@ -9,7 +9,7 @@
   const prop = defineProps(Props)
 
   /** 获取父组件注入的依赖项 */
-  const parentInject = inject<FormInject | null>(FORM_PROVIDE_KEY, null) as FormInject
+  const parentInject: FormInject | null = inject(FORM_PROVIDE_KEY, null)
 
   /**
    * 错误提示消息
@@ -20,7 +20,7 @@
    */
   const errMessage = computed((): string | boolean => {
     /** 获取都指定项的结构键值 */
-    const resMsg: string | boolean = parentInject && parentInject.childrenCheckResult[prop.name]
+    const resMsg: string | boolean | null = parentInject && parentInject.childrenCheckResult[prop.name]
 
     return isString(resMsg) ? resMsg : false
   })

packages/fighting-design/form/src/props.ts

@@ -1,6 +1,6 @@
 import { setStringNumberProp, setFunctionProp, setObjectProp } from '../../_utils'
 import type { ExtractPropTypes, InjectionKey } from 'vue'
-import type { FormSubmit } from './interface'
+import type { FormSubmit, FormInject } from './interface'
 
 export const Props = {
   /** 每个 label 的宽度 */
@@ -13,4 +13,4 @@ export const Props = {
 
 export type FormProps = ExtractPropTypes<typeof Props>
 
-export const FORM_PROVIDE_KEY: InjectionKey<FormProps> = Symbol('form-provide-key')
+export const FORM_PROVIDE_KEY: InjectionKey<FormInject> = Symbol('form-provide-key')

packages/fighting-design/list-item/src/list-item.vue

@@ -8,7 +8,7 @@
   const prop = defineProps(Props)
 
   /** 获取父组件注入的依赖项 */
-  const parentInject = inject<ListProps | null>(LIST_PROPS_KEY, null)
+  const parentInject: ListProps | null = inject(LIST_PROPS_KEY, null)
 
   const { styles } = useList(
     reactive({

packages/fighting-design/menu-item/src/menu-item.vue

@@ -12,7 +12,7 @@
   const { styles } = useList(prop, 'menu-item')
 
   /** 注入父组件的模式依赖项 */
-  const parentInject = inject<MenuProvide | null>(MENU_PROVIDE_KEY, null) as MenuProvide
+  const parentInject: MenuProvide | null = inject(MENU_PROVIDE_KEY, null)
 
   /**
    * 获取当前组件实例
@@ -34,7 +34,7 @@
     /** 获取到路由实例 */
     const router = instance.appContext.config.globalProperties.$router
 
-    parentInject.setActiveName(prop.name)
+    parentInject && parentInject.setActiveName(prop.name)
 
     if (router && prop.to) {
       try {
@@ -48,7 +48,7 @@
   /** 当前是否呗选中 */
   const isActive = computed((): boolean => {
     if (!parentInject || !parentInject.defaultActive) return false
-    return prop.name === parentInject.defaultActive
+    return prop.name === (parentInject && parentInject.defaultActive.value)
   })
 </script>
 

packages/fighting-design/menu/index.ts

@@ -4,6 +4,7 @@ import { install } from '../_utils'
 
 export const FMenu = install(Menu)
 
+/** menu 组件实例类型 */
 export type MenuInstance = InstanceType<typeof Menu>
 
 export * from './src/interface.d'

packages/fighting-design/menu/src/interface.d.ts

@@ -1,3 +1,5 @@
+import type { ComputedRef, Ref } from 'vue'
+
 export type { MenuProps } from './menu'
 
 /** 不同导航栏模式 */
@@ -11,7 +13,7 @@ export type MenuMode = 'horizontal' | 'vertical' | 'inline'
  * @param { Function } setActiveName 修改选中 name
  */
 export interface MenuProvide {
-  mode: MenuMode
-  defaultActive: string | number
+  mode: Ref<MenuMode>
+  defaultActive: ComputedRef<string | number>
   setActiveName: (name: string | number) => void
 }

packages/fighting-design/menu/src/menu.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup name="FMenu">
   import { Props, MENU_PROVIDE_KEY } from './props'
-  import { provide, reactive, toRef, computed, ref } from 'vue'
+  import { provide, toRef, computed, ref } from 'vue'
   import { useList } from '../../_hooks'
   import type { MenuProvide } from './interface'
 
@@ -24,14 +24,11 @@
   }
 
   /** 提供出去依赖项 */
-  provide<MenuProvide>(
-    MENU_PROVIDE_KEY,
-    reactive({
-      mode: toRef(prop, 'mode'),
-      defaultActive,
-      setActiveName
-    } as unknown as MenuProvide)
-  )
+  provide<MenuProvide>(MENU_PROVIDE_KEY, {
+    mode: toRef(prop, 'mode'),
+    defaultActive,
+    setActiveName
+  })
 
   /** 类名列表 */
   const classList = classes(['mode'], 'f-menu')

packages/fighting-design/menu/src/props.ts

@@ -1,6 +1,6 @@
 import { setStringNumberProp, setStringProp } from '../../_utils'
 import type { ExtractPropTypes, InjectionKey } from 'vue'
-import type { MenuMode } from './interface'
+import type { MenuMode, MenuProvide } from './interface'
 
 export const Props = {
   /**
@@ -18,6 +18,7 @@ export const Props = {
   activeName: setStringNumberProp()
 } as const
 
+/** menu 组件 props 类型 */
 export type MenuProps = ExtractPropTypes<typeof Props>
 
-export const MENU_PROVIDE_KEY: InjectionKey<MenuMode> = Symbol('menu-provide-key')
+export const MENU_PROVIDE_KEY: InjectionKey<MenuProvide> = Symbol('menu-provide-key')

packages/fighting-design/option/src/option.vue

@@ -11,9 +11,9 @@
   const slot: Slots = useSlots()
 
   /** 获取父组件注入的依赖项 */
-  const parentInject = inject<SelectProvide | null>(SELECT_PROPS_TOKEN, null)
+  const parentInject: SelectProvide | null = inject(SELECT_PROPS_TOKEN, null)
   /** 获取到 trigger 注入的依赖项 */
-  const triggerInject = inject<TriggerProvide | null>(TRIGGER_CLOSE_KEY, null) as TriggerProvide
+  const triggerInject: TriggerProvide | null = inject(TRIGGER_CLOSE_KEY, null)
 
   /**
    * 点击传入指定的 value
@@ -38,7 +38,7 @@
     )
 
     /** 点击之后关闭 */
-    triggerInject.handelClose()
+    triggerInject && triggerInject.handelClose()
   }
 </script>
 

packages/fighting-design/radio-group/index.ts

@@ -4,6 +4,7 @@ import { install } from '../_utils'
 
 export const FRadioGroup = install(RadioGroup)
 
+/** radio-group 组件实例类型 */
 export type RadioGroupInstance = InstanceType<typeof RadioGroup>
 
 export * from './src/interface.d'

packages/fighting-design/radio-group/src/interface.d.ts

@@ -1,5 +1,3 @@
-import type { FightingSize } from '../../_interface'
-
 export type { RadioGroundProps } from './props'
 
 /** 绑定值类型接口 */
@@ -15,16 +13,6 @@ export type RadioChange = (value: RadioModelValue) => void
 /**
  * 注入的依赖项类型接口
  */
-export interface RadioGroundInject {
-  disabled: boolean
-  modelValue: RadioModelValue
-  label: string
-  vertical: boolean
-  size: FightingSize
-  columnGap: string | number
-  rowGap: string | number
-  border: boolean
-  circle: boolean
-  change: RadioChange
+export type RadioGroundInject = RadioGroundProps & {
   changeEvent: (value: RadioModelValue) => void
 }

packages/fighting-design/radio-group/src/props.ts

@@ -1,7 +1,7 @@
 import { setBooleanProp, setStringNumberProp, setStringProp, setFunctionProp } from '../../_utils'
 import { FIGHTING_SIZE } from '../../_tokens'
 import type { ExtractPropTypes, PropType, InjectionKey } from 'vue'
-import type { RadioModelValue, RadioChange } from './interface'
+import type { RadioModelValue, RadioChange, RadioGroundInject } from './interface'
 import type { FightingSize } from '../../_interface'
 
 export const Props = {
@@ -29,12 +29,11 @@ export const Props = {
   size: setStringProp<FightingSize>('middle', (val: FightingSize): boolean => {
     return FIGHTING_SIZE.includes(val)
   }),
-  /**
-   * 绑定值变化时触发
-   */
+  /** 绑定值变化时触发 */
   onChange: setFunctionProp<RadioChange>()
 } as const
 
+/** radio-group 组件 props 类型 */
 export type RadioGroundProps = ExtractPropTypes<typeof Props>
 
-export const RADIO_GROUP_PROPS_kEY: InjectionKey<RadioGroundProps> = Symbol('radio-group-props-key')
+export const RADIO_GROUP_PROPS_kEY: InjectionKey<RadioGroundInject> = Symbol('radio-group-props-key')

packages/fighting-design/radio-group/src/radio-group.vue

@@ -23,14 +23,14 @@
     useRun(prop.onChange, value)
   }
 
-  /** 需要注入的依赖项 */
-  const RadioGround = reactive({
-    ...toRefs(prop),
-    changeEvent
-  } as unknown as RadioGroundInject)
-
   /** 注入依赖项 */
-  provide<RadioGroundInject>(RADIO_GROUP_PROPS_kEY, RadioGround)
+  provide<RadioGroundInject>(
+    RADIO_GROUP_PROPS_kEY,
+    reactive({
+      ...toRefs(prop),
+      changeEvent
+    })
+  )
 
   /** 类名列表 */
   const classList = classes(['vertical', 'border', 'size'], 'f-radio-group')