From 3e8a724079d004a3202e7d3a3b40327d3ceb2a98 Mon Sep 17 00:00:00 2001 From: Tyh2001 <1469442737@qq.com> Date: Tue, 20 Jun 2023 16:34:19 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=20emit=EF=BC=8C?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BE=9D=E8=B5=96=E9=A1=B9=E7=89=88=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 +- packages/fighting-design/_hooks/index.ts | 1 - .../fighting-design/_hooks/use-model/index.ts | 25 - .../fighting-design/_hooks/use-page/index.ts | 21 +- .../_hooks/use-turn-page/index.ts | 19 +- .../fighting-design/_tokens/emits/index.ts | 48 - packages/fighting-design/_tokens/index.ts | 1 - .../checkbox-group/src/checkbox-group.vue | 5 +- .../checkbox/__test__/checkbox.spec.ts | 7 +- .../fighting-design/checkbox/src/checkbox.vue | 19 +- .../dialog/__test__/dialog.spec.ts | 3 +- .../fighting-design/option/src/option.vue | 2 +- .../pagination/src/pagination.vue | 17 +- .../radio-group/src/radio-group.vue | 5 +- packages/fighting-design/radio/src/radio.vue | 17 +- .../fighting-design/select/src/select.vue | 18 +- .../fighting-design/textarea/src/props.ts | 5 +- .../fighting-design/textarea/src/textarea.vue | 2 +- pnpm-lock.yaml | 5751 ----------------- start/src/App.vue | 21 +- vite.config.ts | 1 + vitest.config.ts | 8 +- 22 files changed, 84 insertions(+), 5916 deletions(-) delete mode 100644 packages/fighting-design/_hooks/use-model/index.ts delete mode 100644 packages/fighting-design/_tokens/emits/index.ts delete mode 100644 pnpm-lock.yaml diff --git a/package.json b/package.json index 4afb25c1b2..5a8b0d6e6b 100644 --- a/package.json +++ b/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", diff --git a/packages/fighting-design/_hooks/index.ts b/packages/fighting-design/_hooks/index.ts index d070f21bd8..aed277dc44 100644 --- a/packages/fighting-design/_hooks/index.ts +++ b/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' diff --git a/packages/fighting-design/_hooks/use-model/index.ts b/packages/fighting-design/_hooks/use-model/index.ts deleted file mode 100644 index b6077f9dec..0000000000 --- a/packages/fighting-design/_hooks/use-model/index.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { computed } from 'vue' -import type { WritableComputedRef } from 'vue' - -/** - * useModel 返回值类型接口 - * - * @param { Function } keyword 自定义计算属性 - */ -export interface UseModelReturn { - keyword: WritableComputedRef -} - -/** - * 用于文本框输入类型组件单项数据了丢失问题封装 - * - * @author Tyh2001 - * @param { Function } get getter 方法 - * @param { Function } set setter 方法 - * @returns { Object } 自定义计算属性 - */ -export const useModel = (get: () => T, set: (val: T) => void): UseModelReturn => { - const keyword: WritableComputedRef = computed({ get, set }) - - return { keyword } -} diff --git a/packages/fighting-design/_hooks/use-page/index.ts b/packages/fighting-design/_hooks/use-page/index.ts index 0f8190d200..c1af08f772 100644 --- a/packages/fighting-design/_hooks/use-page/index.ts +++ b/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 * @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, + totalModelValue: Ref +}): 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 diff --git a/packages/fighting-design/_hooks/use-turn-page/index.ts b/packages/fighting-design/_hooks/use-turn-page/index.ts index 728784c68a..0317db5aee 100644 --- a/packages/fighting-design/_hooks/use-turn-page/index.ts +++ b/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, + totalModelValue: Ref + }, 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) } } diff --git a/packages/fighting-design/_tokens/emits/index.ts b/packages/fighting-design/_tokens/emits/index.ts deleted file mode 100644 index 0ae69f29d1..0000000000 --- a/packages/fighting-design/_tokens/emits/index.ts +++ /dev/null @@ -1,48 +0,0 @@ -/** - * emit 回调方法名称 - * - * 主要用于基础的数据同步 - */ -export const EMIT_UPDATE = 'update:modelValue' as const - -/** - * emit 回调方法名称 - * - * 主要用于控制显示隐藏 - */ -export const EMIT_VISIBLE = 'update:visible' as const - -/** - * emit 回调方法名称 - * - * 用于更新日期 - */ -export const EMIT_DATE = 'update:date' as const - -/** - * emit 回调方法名称 - * - * 用于更新文件列表 - */ -export const EMIT_FILES = 'update:files' as const - -/** - * emit 回调方法名称 - * - * 用于更新时间 - */ -export const EMIT_TIME = 'update:time' as const - -/** - * emit 回调方法名称 - * - * 用于更新页码 - */ -export const EMIT_CURRENT = 'update:current' as const - -/** - * emit 回调方法名称 - * - * 用于更新每页大小 - */ -export const EMIT_PAGESIZE = 'update:pageSize' as const diff --git a/packages/fighting-design/_tokens/index.ts b/packages/fighting-design/_tokens/index.ts index 4a839b5b6c..f4693371a5 100644 --- a/packages/fighting-design/_tokens/index.ts +++ b/packages/fighting-design/_tokens/index.ts @@ -1,3 +1,2 @@ export * from './attrs' -export * from './emits' export * from './key' diff --git a/packages/fighting-design/checkbox-group/src/checkbox-group.vue b/packages/fighting-design/checkbox-group/src/checkbox-group.vue index c70991905c..593d6f462b 100644 --- a/packages/fighting-design/checkbox-group/src/checkbox-group.vue +++ b/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({ 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) } diff --git a/packages/fighting-design/checkbox/__test__/checkbox.spec.ts b/packages/fighting-design/checkbox/__test__/checkbox.spec.ts index 4607d82909..743c2c04ea 100644 --- a/packages/fighting-design/checkbox/__test__/checkbox.spec.ts +++ b/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) }) }) diff --git a/packages/fighting-design/checkbox/src/checkbox.vue b/packages/fighting-design/checkbox/src/checkbox.vue index ac87f1bc28..dcda1c6080 100644 --- a/packages/fighting-design/checkbox/src/checkbox.vue +++ b/packages/fighting-design/checkbox/src/checkbox.vue @@ -1,32 +1,35 @@ - const value1 = ref('') - - - + diff --git a/vite.config.ts b/vite.config.ts index c66b14b1b2..aedec7c256 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -27,6 +27,7 @@ export default (): UserConfigExport => { * vue 插件 * * @see vite-plugin-vue https://github.com/vitejs/vite-plugin-vue + * @see defineModel https://github.com/vuejs/rfcs/discussions/503 */ vue({ script: { diff --git a/vitest.config.ts b/vitest.config.ts index 4e61cb094b..46142f1eb8 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -15,7 +15,13 @@ export default (): UserConfigExport => { __DEV__: process.env.NODE_ENV !== 'production' }, /** 配置插件 vue，如果不配置则识别不了 vue 文件 */ - plugins: [vue()], + plugins: [ + vue({ + script: { + defineModel: true + } + }) + ], test: { // globals: true, /**