From 14c132c692fe8d049cbcebb91f0d294b7c540eea Mon Sep 17 00:00:00 2001 From: Tyh2001 <1469442737@qq.com> Date: Mon, 8 May 2023 09:23:42 +0800 Subject: [PATCH] revert: new revert 0.36.0 (2023-05-08) --- CHANGELOG.en-US.md | 13 ++++++++++ CHANGELOG.md | 2 ++ docs/.vitepress/config/sidebar.ts | 2 +- docs/.vitepress/json/search.json | 2 +- docs/docs/changelog.md | 13 ++++++++++ .../_hooks/use-canvas/index.ts | 20 +++++++++------- .../_hooks/use-count-down/index.ts | 6 ++--- .../fighting-design/_hooks/use-input/index.ts | 7 ++++-- .../_hooks/use-load-img/index.ts | 8 ++++--- .../_hooks/use-message/index.ts | 24 ++++++++++--------- .../fighting-design/_hooks/use-model/index.ts | 3 +-- .../_hooks/use-trigger/index.ts | 13 ++++++---- packages/fighting-design/_utils/is/index.ts | 3 ++- .../fighting-design/avatar/src/avatar.vue | 16 +++---------- .../fighting-design/button/src/button.vue | 7 +++++- .../fighting-design/calendar/src/calendar.vue | 3 +-- .../src/collapse-animation.vue | 16 ++++++------- packages/fighting-design/form/src/props.ts | 7 +++++- packages/fighting-design/image/src/image.vue | 18 +++----------- packages/fighting-design/input/src/props.ts | 2 +- packages/fighting-design/package.json | 2 +- .../fighting-design/popup/src/interface.ts | 2 +- .../fighting-design/table/src/interface.ts | 13 ++++++++-- .../fighting-design/textarea/src/props.ts | 2 +- .../time-picker/src/time-picker.vue | 8 +++---- .../fighting-design/trigger/src/interface.ts | 2 +- .../watermark/src/watermark.vue | 20 ++++------------ start/src/global.d.ts | 2 +- 28 files changed, 130 insertions(+), 106 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 914f9c33e7..6203436a69 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -4,6 +4,19 @@ English | [Chinese](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.md) +## 0.36.0 (2023-05-08) + +**Optimization** + +- Optimize style details for `f-trigger` and `f-dropdown` +- Optimize some component types +- Optimize some hooks parameters + +**Fix** + +- Fix the issue of `f-trigger` component hover state being moved out and content being immediately hidden +- Fixed issue with `f-back top` component adding event listening component uninstalling but not removing + ## 0.35.0 (2023-05-07) **Optimization** diff --git a/CHANGELOG.md b/CHANGELOG.md index 027387fe10..2a398a0f7e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,8 @@ **优化** - 优化 `f-trigger` 和 `f-dropdown` 样式细节 +- 优化部分组件类型 +- 优化部分 hooks 参数 **修复** diff --git a/docs/.vitepress/config/sidebar.ts b/docs/.vitepress/config/sidebar.ts index 781a80562a..443edecaaa 100644 --- a/docs/.vitepress/config/sidebar.ts +++ b/docs/.vitepress/config/sidebar.ts @@ -124,7 +124,7 @@ export const sidebar = { text: 'Collapse Animation 折叠动画', link: '/components/collapse-animation' }, - { text: 'Count Down 倒计时', link: '/components/count-down' }, + { text: 'Count Down 倒计时', link: '/components/count-down' } ] } ] diff --git a/docs/.vitepress/json/search.json b/docs/.vitepress/json/search.json index ba96a57c11..8d0d23ce0d 100644 --- a/docs/.vitepress/json/search.json +++ b/docs/.vitepress/json/search.json @@ -356,4 +356,4 @@ "url": "components/count-down" } ] -} \ No newline at end of file +} diff --git a/docs/docs/changelog.md b/docs/docs/changelog.md index b05801961c..2a398a0f7e 100644 --- a/docs/docs/changelog.md +++ b/docs/docs/changelog.md @@ -2,6 +2,19 @@ 中文 | [英文](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.en-US.md) +## 0.36.0 (2023-05-08) + +**优化** + +- 优化 `f-trigger` 和 `f-dropdown` 样式细节 +- 优化部分组件类型 +- 优化部分 hooks 参数 + +**修复** + +- 修复 `f-trigger` 组件 hover 状态移出内容立即隐藏的问题 +- 修复 `f-back-top` 组件添加事件监听组件卸载未移除的问题 + ## 0.35.0 (2023-05-07) **优化** diff --git a/packages/fighting-design/_hooks/use-canvas/index.ts b/packages/fighting-design/_hooks/use-canvas/index.ts index f3f5dccb44..214ab549ec 100644 --- a/packages/fighting-design/_hooks/use-canvas/index.ts +++ b/packages/fighting-design/_hooks/use-canvas/index.ts @@ -9,10 +9,10 @@ import { sizeChange } from '../../_utils' * @param { number } width 图片宽度 * @param { number } height 图片高度 */ -export interface CreateWatermarkProps { +export interface UseCanvasProps { content: string fontColor: string - fontSize: string + fontSize: string | number width: number height: number } @@ -20,10 +20,10 @@ export interface CreateWatermarkProps { /** * useCanvas 返回值类型接口 * - * @param { Function } createWatermark 将 canvas 转换成 base64 图片格式 + * @param { Function } create 将 canvas 转换成 base64 图片格式 */ export interface UseCanvasReturn { - createWatermark: (props: CreateWatermarkProps) => string + create: () => string } /** @@ -32,15 +32,19 @@ export interface UseCanvasReturn { * @author Tyh2001 * @returns { Object } */ -export const useCanvas = (): UseCanvasReturn => { +export const useCanvas = (props: UseCanvasProps): UseCanvasReturn => { /** * 将 canvas 转换成 base64 图片格式 * * @param { Object } props 需要传递到 参数 * @returns { string } base64 格式的图片 */ - const createWatermark = (props: CreateWatermarkProps): string => { - /** 创建一个 canvas */ + const create = (): string => { + /** + * 创建一个 canvas + * + * @see Canvas https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API + */ const canvas: HTMLCanvasElement = document.createElement('canvas') /** @@ -108,5 +112,5 @@ export const useCanvas = (): UseCanvasReturn => { return canvas.toDataURL('image/png') } - return { createWatermark } + return { create } } diff --git a/packages/fighting-design/_hooks/use-count-down/index.ts b/packages/fighting-design/_hooks/use-count-down/index.ts index ca4eee0d2e..810e318355 100644 --- a/packages/fighting-design/_hooks/use-count-down/index.ts +++ b/packages/fighting-design/_hooks/use-count-down/index.ts @@ -4,7 +4,7 @@ import type { ComputedRef } from 'vue' /** * hook的入参类型接口 - * + * * @param { number } time 倒计时长（单位毫秒） * @param { boolean } millisecond 是否开启毫秒级别渲染 * @param { Function } onFinish 倒计时结束的回调函数 @@ -166,7 +166,6 @@ export const useCountDown = (options: UseCountDownOptions): UseCountDownReturn = const microTick = (): void => { rafId = raf((): void => { if (isCounting) { - /** 设置剩余时间为此次调用时的剩余时间 */ setRemain(getCurrentRemain()) @@ -182,11 +181,10 @@ export const useCountDown = (options: UseCountDownOptions): UseCountDownReturn = const macroTick = (): void => { rafId = raf((): void => { if (isCounting) { - /** 获取此次调用的剩余时间 */ const remainRemain = getCurrentRemain() - /** + /** * 同一秒才开始渲染 * TODO: 后续可以将这里改造成 可选的时间间隔参数 来渲染倒计时 */ diff --git a/packages/fighting-design/_hooks/use-input/index.ts b/packages/fighting-design/_hooks/use-input/index.ts index c6444345b3..2f3c5d40de 100644 --- a/packages/fighting-design/_hooks/use-input/index.ts +++ b/packages/fighting-design/_hooks/use-input/index.ts @@ -49,8 +49,11 @@ export type UseInputEmit = (event: 'update:modelValue', val: string | number) => * @param { Function } emit 回调参数 * @returns { Object } */ -export const useInput = (prop: Partial, emit: UseInputEmit, keyword: WritableComputedRef): UseInputReturn => { - +export const useInput = ( + prop: Partial, + emit: UseInputEmit, + keyword: WritableComputedRef +): UseInputReturn => { const { run } = useRun() /** diff --git a/packages/fighting-design/_hooks/use-load-img/index.ts b/packages/fighting-design/_hooks/use-load-img/index.ts index 1338878a1a..344b96163c 100644 --- a/packages/fighting-design/_hooks/use-load-img/index.ts +++ b/packages/fighting-design/_hooks/use-load-img/index.ts @@ -42,7 +42,11 @@ export interface UseLoadImgReturn { * @param { Object } prop prop 参数对象 * @returns { Object } */ -export const useLoadImg = (el: Ref, prop: UseLoadImgProp, isLoad?: () => boolean): UseLoadImgReturn => { +export const useLoadImg = ( + el: Ref, + prop: UseLoadImgProp, + isLoad?: () => boolean +): UseLoadImgReturn => { const { run } = useRun() /** 是否加载成功 */ @@ -223,7 +227,6 @@ export const useLoadImg = (el: Ref, prop: UseLoadI * @param { Object } node 元素节点 */ const loadImg = (): void => { - if (!el.value) { return } @@ -245,7 +248,6 @@ export const useLoadImg = (el: Ref, prop: UseLoadI const startLoad = (): void => { if (isLoad) { - if (isLoad()) { loadImg() } else { diff --git a/packages/fighting-design/_hooks/use-message/index.ts b/packages/fighting-design/_hooks/use-message/index.ts index c7e5f00aa9..b59bbea407 100644 --- a/packages/fighting-design/_hooks/use-message/index.ts +++ b/packages/fighting-design/_hooks/use-message/index.ts @@ -120,9 +120,9 @@ const updatePosition = (closeInstance: ComponentInternalInstance): void => { instances[placement] as ComponentInternalInstance[] )[index] - /** 减少后面的组件实例偏移量 */ - ; (instance.exposed as Record>).offsetVal.value -= - getNextElementInterval(closeInstance) + /** 减少后面的组件实例偏移量 */ + ;(instance.exposed as Record>).offsetVal.value -= + getNextElementInterval(closeInstance) } } @@ -137,13 +137,13 @@ export const removeInstance = (instance: ComponentInternalInstance): void => { /** 当前组件的方位 */ const placement: MessagePlacement | NotificationPlacement = getPlacement(instance) - /** - * @see Array.prototype.splice() https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice - */ - ; (instances[placement] as ComponentInternalInstance[]).splice( - getIndexByInstance(instance), - 1 - ) + /** + * @see Array.prototype.splice() https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice + */ + ;(instances[placement] as ComponentInternalInstance[]).splice( + getIndexByInstance(instance), + 1 + ) } /** @@ -191,7 +191,9 @@ export const useMessage = ( let result: number = options.offset || 20 /** 获取到当前方位的组件实例集合 */ const placementInstance: ComponentInternalInstance[] | undefined = - instances[options.placement ? options.placement : name === 'message' ? 'top' : 'top-right'] + instances[ + options.placement ? options.placement : name === 'message' ? 'top' : 'top-right' + ] if (placementInstance) { placementInstance.forEach((instance: ComponentInternalInstance): void => { diff --git a/packages/fighting-design/_hooks/use-model/index.ts b/packages/fighting-design/_hooks/use-model/index.ts index c79a3e718b..8fbc8f37cb 100644 --- a/packages/fighting-design/_hooks/use-model/index.ts +++ b/packages/fighting-design/_hooks/use-model/index.ts @@ -10,7 +10,7 @@ export interface UseModelReturn { /** * 用于文本框输入类型组件单项数据了丢失问题封装 - * + * * @author Tyh2001 * @param { Object } prop prop 集合 * @param { string } propName prop 指定的返回键名 @@ -24,7 +24,6 @@ export const useModel = ( emit: Emit, emitName: 'update:modelValue' ): UseModelReturn => { - /** * 自定义计算属性 * diff --git a/packages/fighting-design/_hooks/use-trigger/index.ts b/packages/fighting-design/_hooks/use-trigger/index.ts index 0219833a44..7d4426a871 100644 --- a/packages/fighting-design/_hooks/use-trigger/index.ts +++ b/packages/fighting-design/_hooks/use-trigger/index.ts @@ -7,7 +7,7 @@ import type { HandleMouse } from '../../_interface' /** * useTrigger 返回值类型接口 - * + * * @param { Object } visible 是否展示主内容 * @param { Object } openEvent 打开事件 * @param { Object } closeEvent 关闭事件 @@ -30,12 +30,15 @@ export interface UseTriggerReturn { /** * 触发器组件方法封装 - * + * * @param { Object } prop prop 参数 * @param { Object } node 内容节点元素 * @returns { Object } */ -export const useTrigger = (prop: TriggerProps, node: Ref): UseTriggerReturn => { +export const useTrigger = ( + prop: TriggerProps, + node: Ref +): UseTriggerReturn => { const { run } = useRun() /** 是否展示主内容 */ @@ -81,9 +84,9 @@ export const useTrigger = (prop: TriggerProps, node: Ref { diff --git a/packages/fighting-design/_utils/is/index.ts b/packages/fighting-design/_utils/is/index.ts index 0b89d07595..880acfe538 100644 --- a/packages/fighting-design/_utils/is/index.ts +++ b/packages/fighting-design/_utils/is/index.ts @@ -59,7 +59,8 @@ export const isObject = (value: unknown): value is object => is(value, 'Object') * @param { * } value 要检测的值 * @returns { boolean } */ -export const isFunction = (value: unknown): value is Function => typeof value === 'function' +export const isFunction = (value: unknown): value is Function => + typeof value === 'function' /** * 判断一个值是否为 array 类型 diff --git a/packages/fighting-design/avatar/src/avatar.vue b/packages/fighting-design/avatar/src/avatar.vue index ef6d69454f..378d022d93 100644 --- a/packages/fighting-design/avatar/src/avatar.vue +++ b/packages/fighting-design/avatar/src/avatar.vue @@ -2,29 +2,19 @@ import { Props } from './props' import { ref, useSlots } from 'vue' import { FSvgIcon } from '../../svg-icon' - import { useLoadImg, useProps, useList } from '../../_hooks' + import { useLoadImg, useList } from '../../_hooks' import { isNumber, isString } from '../../_utils' - import type { UseLoadImgProp } from '../../_hooks' import type { Slots } from 'vue' const prop = defineProps(Props) const slot: Slots = useSlots() - const { filter } = useProps(prop) - /** 图片 dom 节点 */ - const avatarEl = ref() + const avatarEl = ref() const { isSuccess, isShowNode } = useLoadImg( avatarEl, - filter([ - 'src', - 'errSrc', - 'rootMargin', - 'lazy', - 'onLoad', - 'onError' - ]) as unknown as UseLoadImgProp, + prop, (): boolean => !slot.icon && !prop.icon && !prop.text && avatarEl.value ) diff --git a/packages/fighting-design/button/src/button.vue b/packages/fighting-design/button/src/button.vue index 48dc79fbfb..aa115f6d01 100644 --- a/packages/fighting-design/button/src/button.vue +++ b/packages/fighting-design/button/src/button.vue @@ -14,7 +14,7 @@ const { classList, styleList } = useButton(prop) /** 元素节点 */ - const FButtonEl = ref() + const FButtonEl = ref() /** * 按钮点击 @@ -26,6 +26,11 @@ /** 禁用或 loading 则返回 */ if (disabled.value || loading.value) { + /** + * 阻止默认行为 + * + * @see event.preventDefault https://developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault + */ evt.preventDefault() return } diff --git a/packages/fighting-design/calendar/src/calendar.vue b/packages/fighting-design/calendar/src/calendar.vue index f4471e06f1..c87b6867d7 100644 --- a/packages/fighting-design/calendar/src/calendar.vue +++ b/packages/fighting-design/calendar/src/calendar.vue @@ -24,13 +24,12 @@ }) const { AllMonthDays, changeLastMonth, changeNextMonth } = useCalendar(dateParams) - const { getLang } = useGlobal() const { run } = useRun() const { styles, classes } = useList(prop, 'calendar') /** 星期列表 */ - const weekList = computed(() => getLang('calendar').value.weekList) + const weekList = computed((): string[] => getLang('calendar').value.weekList) /** * 当前日期高亮显示 diff --git a/packages/fighting-design/collapse-animation/src/collapse-animation.vue b/packages/fighting-design/collapse-animation/src/collapse-animation.vue index 27a229b669..ee81c9ba71 100644 --- a/packages/fighting-design/collapse-animation/src/collapse-animation.vue +++ b/packages/fighting-design/collapse-animation/src/collapse-animation.vue @@ -41,7 +41,7 @@ * @param { Object } el 元素节点 */ const onBeforeEnter = (el: Element): void => { - (el as HTMLElement).style.transition = transitionStyle + ;(el as HTMLElement).style.transition = transitionStyle ;(el as HTMLElement).style.height = '0' } @@ -54,11 +54,11 @@ */ const onEnter = (el: Element): void => { if ((el as HTMLElement).scrollHeight !== 0) { - (el as HTMLElement).style.height = `${(el as HTMLElement).scrollHeight}px` + ;(el as HTMLElement).style.height = `${(el as HTMLElement).scrollHeight}px` } else { - (el as HTMLElement).style.height = '' + ;(el as HTMLElement).style.height = '' } - (el as HTMLElement).style.overflow = 'hidden' + ;(el as HTMLElement).style.overflow = 'hidden' } /** @@ -67,7 +67,7 @@ * @param { Object } el 元素节点 */ const onAfterEnter = (el: Element): void => { - (el as HTMLElement).style.transition = '' + ;(el as HTMLElement).style.transition = '' ;(el as HTMLElement).style.height = '' } @@ -79,7 +79,7 @@ * @param { Object } el 元素节点 */ const onBeforeLeave = (el: Element): void => { - (el as HTMLElement).style.height = `${(el as HTMLElement).scrollHeight}px` + ;(el as HTMLElement).style.height = `${(el as HTMLElement).scrollHeight}px` } /** @@ -91,7 +91,7 @@ */ const onLeave = (el: Element): void => { if ((el as HTMLElement).scrollHeight !== 0) { - (el as HTMLElement).style.transition = transitionStyle + ;(el as HTMLElement).style.transition = transitionStyle ;(el as HTMLElement).style.height = '0' } } @@ -104,7 +104,7 @@ * @param { Object } el 元素节点 */ const onAfterLeave = (el: Element): void => { - (el as HTMLElement).style.transition = '' + ;(el as HTMLElement).style.transition = '' ;(el as HTMLElement).style.height = '' } diff --git a/packages/fighting-design/form/src/props.ts b/packages/fighting-design/form/src/props.ts index e59877442f..1d0f833997 100644 --- a/packages/fighting-design/form/src/props.ts +++ b/packages/fighting-design/form/src/props.ts @@ -1,4 +1,9 @@ -import { setStringNumberProp, setFunctionProp, setObjectProp, setStringProp } from '../../_utils' +import { + setStringNumberProp, + setFunctionProp, + setObjectProp, + setStringProp +} from '../../_utils' import type { ExtractPropTypes, InjectionKey } from 'vue' import type { FormSubmit, FormInject, LabelPosition } from './interface' diff --git a/packages/fighting-design/image/src/image.vue b/packages/fighting-design/image/src/image.vue index 95d8f74d7c..9c97d46c10 100644 --- a/packages/fighting-design/image/src/image.vue +++ b/packages/fighting-design/image/src/image.vue @@ -1,27 +1,15 @@