chore: 优化 emit，更新依赖项版本

package.json

@@ -45,7 +45,7 @@
     "@fighting-design/fighting-theme": "workspace:*",
     "@types/node": "^17.0.42",
     "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/test-utils": "^2.0.0-rc.18",
+    "@vue/test-utils": "^2.3.2",
     "autoprefixer": "^10.4.13",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "^3.3.0",
@@ -62,7 +62,7 @@
     "typescript": "^4.7.4",
     "vite": "^4.3.9",
     "vite-plugin-dts": "^2.3.0",
-    "vitest": "^0.24.3",
+    "vitest": "^0.32.2",
     "vue-tsc": "^1.8.0"
   },
   "license": "MIT",

packages/fighting-design/_hooks/index.ts

@@ -23,7 +23,6 @@ export * from './use-page'
 export * from './use-turn-page'
 export * from './use-message'
 export * from './use-message-work'
-export * from './use-model'
 export * from './use-count-down'
 export * from './use-trigger'
 export * from './use-form-check'

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

@@ -1,15 +1,8 @@
 import { useRun } from '..'
 import { computed, watchEffect, ref } from 'vue'
-import { EMIT_CURRENT } from '../../_tokens'
 import type { PaginationProps } from '../../pagination'
 import type { ComputedRef, Ref } from 'vue'
 
-/** emit 类型接口 */
-export interface UsePageEmit {
-  (event: 'update:current', current: number): void
-  (event: 'update:pageSize', pagesize: number): void
-}
-
 /**
  * usePage 返回值类型接口
  *
@@ -32,10 +25,13 @@ export interface UsePageReturn {
  *
  * @author Tyh2001 <https://github.com/Tyh2001>
  * @param { Object } prop props 参数
- * @param { Object } emit 回调参数
+ * @param { Object } modelValue 绑定值对象
  * @returns { Object }
  */
-export const usePage = (prop: PaginationProps, emit: UsePageEmit): UsePageReturn => {
+export const usePage = (prop: PaginationProps, modelValue: {
+  currentModelValue: Ref<number>,
+  totalModelValue: Ref<number>
+}): UsePageReturn => {
   const { run } = useRun()
 
   /**
@@ -126,15 +122,16 @@ export const usePage = (prop: PaginationProps, emit: UsePageEmit): UsePageReturn
     const changeMap = {
       /** 下一页切换 */
       next: (): void => {
-        const newCurrent =
+        const newCurrent: number =
           prop.current === maxCount.value ? maxCount.value : prop.current + 1
-        emit(EMIT_CURRENT, newCurrent)
+
+        modelValue.currentModelValue.value = newCurrent
         run(prop.onNext, newCurrent, prop.pageSize)
       },
       /**上一页切换 */
       prev: (): void => {
         newCurrent = prop.current === 1 ? 1 : prop.current - 1
-        emit(EMIT_CURRENT, newCurrent)
+        modelValue.currentModelValue.value = newCurrent
         run(prop.onPrev, newCurrent, prop.pageSize)
       }
     } as const

packages/fighting-design/_hooks/use-turn-page/index.ts

@@ -1,14 +1,12 @@
 import { ref } from 'vue'
 import { useRun } from '..'
 import {
-  EMIT_CURRENT,
-  EMIT_PAGESIZE,
   PAGINATION_NEXT,
   PAGINATION_ITEM,
   PAGINATION_PREV
 } from '../../_tokens'
 import type { SelectModelValue } from '../../select'
-import type { UsePageEmit, UsePageReturn } from '..'
+import type { UsePageReturn } from '..'
 import type { PaginationProps } from '../../pagination'
 import type { Ref } from 'vue'
 
@@ -41,7 +39,10 @@ export interface UseTurnPageReturn {
  */
 export const useTurnPage = (
   prop: PaginationProps,
-  emit: UsePageEmit,
+  modelValue: {
+    currentModelValue: Ref<number>,
+    totalModelValue: Ref<number>
+  },
   pages: UsePageReturn['pages'],
   maxCount: UsePageReturn['maxCount']
 ): UseTurnPageReturn => {
@@ -57,9 +58,9 @@ export const useTurnPage = (
 
     if (prop.current > maxValue) {
       // 如果当前用户选择的值是大于总页数的,那么直接将总页数的最大值赋值给current
-      emit(EMIT_CURRENT, maxValue)
+      modelValue.currentModelValue.value = maxValue
     }
-    emit(EMIT_PAGESIZE, Number(newValue))
+    modelValue.totalModelValue.value = maxValue
   }
 
   /**
@@ -70,7 +71,7 @@ export const useTurnPage = (
    */
   const handelChange = (newCurrent: number, evt: MouseEvent): void => {
     if (prop.disabled) return
-    emit(EMIT_CURRENT, newCurrent)
+    modelValue.currentModelValue.value = newCurrent
     run(prop.onChange, newCurrent, prop.pageSize, evt)
   }
 
@@ -86,7 +87,7 @@ export const useTurnPage = (
       jumpCurrent.value = String(pages.value.length)
     }
 
-    emit(EMIT_CURRENT, Number(jumpCurrent.value))
+    modelValue.currentModelValue.value = Number(jumpCurrent.value)
   }
 
   /**
@@ -142,7 +143,7 @@ export const useTurnPage = (
       }
 
       if (newPage !== current) {
-        emit(EMIT_CURRENT, newPage)
+        modelValue.currentModelValue.value = newPage
         run(prop.onChange, newPage, prop.pageSize, evt)
       }
     }

packages/fighting-design/_tokens/index.ts

@@ -1,3 +1,2 @@
 export * from './attrs'
-export * from './emits'
 export * from './key'

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

@@ -2,14 +2,13 @@
   import { Props, CHECKBOX_GROUP_PROPS_KEY } from './props'
   import { provide, reactive, toRefs } from 'vue'
   import { useRun, useList } from '../../_hooks'
-  import { EMIT_UPDATE } from '../../_tokens'
   import type { CheckboxGroupProvide } from './interface'
   import type { CheckboxLabel } from '../../checkbox'
 
   defineOptions({ name: 'FCheckboxGroup' })
 
   const prop = defineProps(Props)
-  const emit = defineEmits([EMIT_UPDATE])
+  const modelValue = defineModel<string[] | CheckboxLabel>({ default: [] })
 
   const { run } = useRun()
   const { classes, styles } = useList(prop, 'checkbox-group')
@@ -20,7 +19,7 @@
    * @param { string[] } val 最新值
    */
   const setChange = (val: string[] | CheckboxLabel): void => {
-    emit(EMIT_UPDATE, val)
+    modelValue.value = val
     run(prop.onChange, val)
   }
 

packages/fighting-design/checkbox/__test__/checkbox.spec.ts

@@ -1,7 +1,6 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
 import { FCheckbox } from '../index'
-import { EMIT_UPDATE } from '../../_tokens'
 
 describe('FCheckbox', () => {
   test('class', () => {
@@ -41,8 +40,8 @@ describe('FCheckbox', () => {
     const wrapper = mount(FCheckbox)
     await wrapper.get('input[type=checkbox]').setValue(true)
     await wrapper.get('input[type=checkbox]').setValue(false)
-    expect(wrapper.emitted()).toHaveProperty(EMIT_UPDATE)
-    expect(wrapper.emitted(EMIT_UPDATE)?.[0][0]).toBe(true)
-    expect(wrapper.emitted(EMIT_UPDATE)?.[1][0]).toBe(false)
+    expect(wrapper.emitted()).toHaveProperty('update:modelValue')
+    expect(wrapper.emitted('update:modelValue')?.[0][0]).toBe(true)
+    expect(wrapper.emitted('update:modelValue')?.[1][0]).toBe(false)
   })
 })

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

@@ -1,32 +1,35 @@
 <script lang="ts" setup>
   import { Props } from './props'
   import { computed, inject, reactive } from 'vue'
-  import { useRun, useList, useModel } from '../../_hooks'
+  import { useRun, useList } from '../../_hooks'
   import { CHECKBOX_GROUP_PROPS_KEY } from '../../checkbox-group/src/props'
   import { isArray, isBoolean } from '../../_utils'
-  import { EMIT_UPDATE } from '../../_tokens'
   import type { CheckboxGroupProvide } from '../../checkbox-group'
   import type { CheckboxModelValue } from './interface'
 
   defineOptions({ name: 'FCheckbox' })
 
   const prop = defineProps(Props)
-  const emit = defineEmits([EMIT_UPDATE])
+  const modelValue = defineModel<CheckboxModelValue | string[]>({
+    default: false
+  })
 
   const { run } = useRun()
-  const { keyword } = useModel<CheckboxModelValue | string[]>(
-    (): CheckboxModelValue | string[] => {
+
+  /** 当前绑定的值 */
+  const keyword = computed({
+    get: (): CheckboxModelValue | string[] => {
       return (parentInject && parentInject.modelValue) || prop.modelValue
     },
-    (val: CheckboxModelValue | string[]): void => {
+    set: (val: CheckboxModelValue | string[]): void => {
       if (!parentInject) {
-        emit(EMIT_UPDATE, val as CheckboxModelValue)
+        modelValue.value = val
         run(prop.onChange, val)
         return
       }
       parentInject.setChange(val)
     }
-  )
+  })
 
   /** 获取父组件注入的依赖项 */
   const parentInject: CheckboxGroupProvide | null = inject(CHECKBOX_GROUP_PROPS_KEY, null)

packages/fighting-design/dialog/__test__/dialog.spec.ts

@@ -1,7 +1,6 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
 import { FDialog } from '../index'
-import { EMIT_VISIBLE } from '../../_tokens'
 
 describe('FDialog', () => {
   test('class', () => {
@@ -75,7 +74,7 @@ describe('FDialog', () => {
       }
     })
     await wrapper.get('.f-dialog__wrapper').trigger('click.self')
-    expect((wrapper.emitted(EMIT_VISIBLE)?.[0] as boolean[])[0]).toBe(false)
+    expect((wrapper.emitted('update:visible')?.[0] as boolean[])[0]).toBe(false)
     await wrapper.setProps({ visible: false })
     expect(wrapper.find('.f-dialog').isVisible()).toBe(false)
   })

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

@@ -71,7 +71,7 @@
     const newValue: SelectModelValue = value.value || label.value || slotLabel.value
 
     /** 执行父组件的设置方法 */
-    parentInject && run(parentInject.setValue, newLabel, newValue, evt)
+    parentInject && run(parentInject.setValue, newValue, newLabel, evt)
     /** 点击之后关闭 */
     triggerInject && run(triggerInject.close)
   }

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

@@ -6,8 +6,6 @@
   import { FInput } from '../../input'
   import { FSelect } from '../../select'
   import {
-    EMIT_CURRENT,
-    EMIT_PAGESIZE,
     PAGINATION_NEXT,
     PAGINATION_ITEM,
     PAGINATION_PREV,
@@ -19,14 +17,17 @@
   defineOptions({ name: 'FPagination' })
 
   const prop = defineProps(Props)
-  const emit = defineEmits([EMIT_CURRENT, EMIT_PAGESIZE])
+  /** 当前选中页码 */
+  const currentModelValue = defineModel<number>('current', { required: true, default: 1 })
+  /** 总页数 */
+  const totalModelValue = defineModel<number>('total', { required: true, default: 0 })
 
-  const { pages, showNextMore, showPrevMore, maxCount, handelTurnPages } = usePage(
-    prop,
-    emit
-  )
+  const { pages, showNextMore, showPrevMore, maxCount, handelTurnPages } = usePage(prop, {
+    currentModelValue,
+    totalModelValue
+  })
   const { jumpCurrent, selectChange, handelChange, handleInput, handelClick } =
-    useTurnPage(prop, emit, pages, maxCount)
+    useTurnPage(prop, { currentModelValue, totalModelValue }, pages, maxCount)
   const { classes } = useList(prop, 'pagination')
 
   /** 下拉菜单绑定的默认值，每页条数 */

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

@@ -2,13 +2,12 @@
   import { Props, RADIO_GROUP_PROPS_kEY } from './props'
   import { provide, reactive, toRefs } from 'vue'
   import { useRun, useList } from '../../_hooks'
-  import { EMIT_UPDATE } from '../../_tokens'
   import type { RadioModelValue, RadioGroundInject } from './interface'
 
   defineOptions({ name: 'FRadioGroup' })
 
   const prop = defineProps(Props)
-  const emit = defineEmits([EMIT_UPDATE])
+  const modelValue = defineModel<RadioModelValue>({ default: null })
 
   const { run } = useRun()
   const { styles, classes } = useList(prop, 'radio-group')
@@ -19,7 +18,7 @@
    * @param { string | number | boolean } value 最新值
    */
   const changeEvent = (value: RadioModelValue): void => {
-    emit(EMIT_UPDATE, value)
+    modelValue.value = value
     run(prop.onChange, value)
   }