revert: new revert 0.36.0 (2023-05-08)

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**

CHANGELOG.md

@@ -7,6 +7,8 @@
 **优化**
 
 - 优化 `f-trigger` 和 `f-dropdown` 样式细节
+- 优化部分组件类型
+- 优化部分 hooks 参数
 
 **修复**
 

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' }
       ]
     }
   ]

docs/.vitepress/json/search.json

@@ -356,4 +356,4 @@
       "url": "components/count-down"
     }
   ]
-}
+}

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)
 
 **优化**

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

@@ -9,21 +9,21 @@ 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
 }
 
 /**
  * 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 <https://github.com/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 }
 }

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: 后续可以将这里改造成 可选的时间间隔参数 来渲染倒计时
          */

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<UseInputProps>, emit: UseInputEmit, keyword: WritableComputedRef<string | number>): UseInputReturn => {
-
+export const useInput = (
+  prop: Partial<UseInputProps>,
+  emit: UseInputEmit,
+  keyword: WritableComputedRef<string | number>
+): UseInputReturn => {
   const { run } = useRun()
 
   /**

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<HTMLImageElement | undefined>, prop: UseLoadImgProp, isLoad?: () => boolean): UseLoadImgReturn => {
+export const useLoadImg = (
+  el: Ref<HTMLImageElement | undefined>,
+  prop: UseLoadImgProp,
+  isLoad?: () => boolean
+): UseLoadImgReturn => {
   const { run } = useRun()
 
   /** 是否加载成功 */
@@ -223,7 +227,6 @@ export const useLoadImg = (el: Ref<HTMLImageElement | undefined>, prop: UseLoadI
    * @param { Object } node 元素节点
    */
   const loadImg = (): void => {
-
     if (!el.value) {
       return
     }
@@ -245,7 +248,6 @@ export const useLoadImg = (el: Ref<HTMLImageElement | undefined>, prop: UseLoadI
 
   const startLoad = (): void => {
     if (isLoad) {
-
       if (isLoad()) {
         loadImg()
       } else {

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<string, Ref<number>>).offsetVal.value -=
-        getNextElementInterval(closeInstance)
+    /** 减少后面的组件实例偏移量 */
+    ;(instance.exposed as Record<string, Ref<number>>).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 => {

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

@@ -10,7 +10,7 @@ export interface UseModelReturn<T, K extends keyof T> {
 
 /**
  * 用于文本框输入类型组件单项数据了丢失问题封装
- * 
+ *
  * @author Tyh2001 <https://github.com/Tyh2001>
  * @param { Object } prop prop 集合
  * @param { string } propName prop 指定的返回键名
@@ -24,7 +24,6 @@ export const useModel = <T, K extends keyof T>(
   emit: Emit,
   emitName: 'update:modelValue'
 ): UseModelReturn<T, K> => {
-
   /**
    * 自定义计算属性
    *

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<HTMLDivElement | undefined>): UseTriggerReturn => {
+export const useTrigger = (
+  prop: TriggerProps,
+  node: Ref<HTMLDivElement | undefined>
+): UseTriggerReturn => {
   const { run } = useRun()
 
   /** 是否展示主内容 */
@@ -81,9 +84,9 @@ export const useTrigger = (prop: TriggerProps, node: Ref<HTMLDivElement | undefi
     position.y = y + 'px'
   }
 
-  /** 
+  /**
    * 打开触发器
-   * 
+   *
    * @param { Object } evt 事件对象
    */
   const handelOpen = (evt: MouseEvent): void => {

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 类型

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<HTMLImageElement>()
+  const avatarEl = ref<HTMLImageElement | undefined>()
 
   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
   )
 

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

@@ -14,7 +14,7 @@
   const { classList, styleList } = useButton(prop)
 
   /** 元素节点 */
-  const FButtonEl = ref<HTMLButtonElement>()
+  const FButtonEl = ref<HTMLButtonElement | undefined>()
 
   /**
    * 按钮点击
@@ -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
     }

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)
 
   /**
    * 当前日期高亮显示