fix(Progress): #501 Fix ts compile problem.

hug-sun · Jan 27, 2021 · da3235b · da3235b
1 parent 481b39b
commit da3235b
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 32 deletions.
diff --git a/packages/element3/src/components/Progress/src/Progress.d.ts b/packages/element3/src/components/Progress/src/Progress.d.ts
@@ -5,12 +5,19 @@ export interface LevelColor {
 
 export type FnColor = (percentage: number) => string
 
-export type AnyColor = string | string[] | LevelColor[] | FnColor
+// export type AnyColor = string | string[] | LevelColor[] | FnColor
+/* eslint-disable*/
+export type AnyColor = string | Function | unknown[]
+/* eslint-enable*/
 
 export interface ProgressProps {
   percentage?: number
   color?: AnyColor
   status?: string
   strokeWidth?: number
   type?: string
+  format?: Function
+  showText?: boolean
+  textInside?: boolean
+  width?: number
 }
diff --git a/packages/element3/src/components/Progress/src/Progress.vue b/packages/element3/src/components/Progress/src/Progress.vue
@@ -41,8 +41,8 @@
   </div>
 </template>
 
-<script>
-import { computed, defineComponent, toRefs, unref } from 'vue'
+<script lang="ts">
+import { computed, ComputedRef, defineComponent, Ref, toRefs, unref } from 'vue'
 import {
   props,
   statusValid,
@@ -57,12 +57,13 @@ import {
   genArcPathStyle,
   getSvgStrokeColor,
   getColorBy
-} from './props'
+} from '../src/props'
+import { ProgressProps } from './Progress'
 
 export default defineComponent({
   name: 'ElProgress',
   props,
-  setup(props) {
+  setup(props: ProgressProps) {
     const {
       percentage,
       format,
@@ -105,7 +106,12 @@ export default defineComponent({
   }
 })
 
-const useRootClass = (type, status, showText, textInside) => {
+const useRootClass = (
+  type: Ref<string>,
+  status: Ref<string>,
+  showText: Ref<boolean>,
+  textInside: Ref<boolean>
+) => {
   return computed(() => {
     const valType = unref(type)
     const valStatus = unref(status)
@@ -125,7 +131,10 @@ const useRootClass = (type, status, showText, textInside) => {
   })
 }
 
-const useBarStyle = (percentage, color) => {
+const useBarStyle = (
+  percentage: Ref<number>,
+  color: Ref<string | Function | unknown[]>
+) => {
   return computed(() => {
     const pv = autoFixPercentage(unref(percentage))
     const cv = unref(color)
@@ -134,14 +143,14 @@ const useBarStyle = (percentage, color) => {
   })
 }
 
-const useBarOuterStyle = (strokeWidth) => {
+const useBarOuterStyle = (strokeWidth: Ref<number>) => {
   return computed(() => {
     const sw = unref(strokeWidth)
     return { height: sw + 'px' }
   })
 }
 
-const useContent = (format, percentage) => {
+const useContent = (format: Ref<Function>, percentage: Ref<number>) => {
   return computed(() => {
     const fv = unref(format)
     const pv = autoFixPercentage(unref(percentage))
@@ -153,7 +162,7 @@ const useContent = (format, percentage) => {
   })
 }
 
-const useIconClass = (status, type) => {
+const useIconClass = (status: Ref<string>, type: Ref<string>) => {
   return computed(() => {
     const st = unref(status)
     const t = unref(type) === 'line' ? 'lineIconClass' : 'arcIconClass'
@@ -162,30 +171,36 @@ const useIconClass = (status, type) => {
   })
 }
 
-const useCircleStyle = (width) => {
+const useCircleStyle = (width: Ref<number>) => {
   return computed(() => {
     const val = unref(width) + 'px'
     return { width: val, height: val }
   })
 }
 
-const useSvgStrokeWidth = (strokeWidth, width) => {
+const useSvgStrokeWidth = (strokeWidth: Ref<number>, width: Ref<number>) => {
   return computed(() => {
     const sw = unref(strokeWidth)
     const w = unref(width)
     return calcRelativeSvgSize(sw, w)
   })
 }
 
-const useSvgPathD = (svgStrokeWidth, type) => {
+const useSvgPathD = (
+  svgStrokeWidth: ComputedRef<number>,
+  type: Ref<string>
+) => {
   return computed(() => {
     const ssw = unref(svgStrokeWidth)
     const tv = unref(type)
     return generateSvgPathD(ssw, tv)
   })
 }
 
-const useTrailPathStyle = (svgStrokeWidth, type) => {
+const useTrailPathStyle = (
+  svgStrokeWidth: ComputedRef<any>,
+  type: Ref<string>
+) => {
   return computed(() => {
     const ssw = unref(svgStrokeWidth)
     const radius = calcSvgRadius(ssw)
@@ -195,7 +210,11 @@ const useTrailPathStyle = (svgStrokeWidth, type) => {
   })
 }
 
-const useArcPathStyle = (svgStrokeWidth, percentage, type) => {
+const useArcPathStyle = (
+  svgStrokeWidth: ComputedRef<any>,
+  percentage: Ref<number>,
+  type: Ref<string>
+) => {
   return computed(() => {
     const ssw = unref(svgStrokeWidth)
     const radius = calcSvgRadius(ssw)
@@ -206,7 +225,11 @@ const useArcPathStyle = (svgStrokeWidth, percentage, type) => {
   })
 }
 
-const useSvgStrokeColor = (status, color, percentage) => {
+const useSvgStrokeColor = (
+  status: Ref<string>,
+  color: Ref<string | Function | unknown[]>,
+  percentage: Ref<number>
+) => {
   return computed(() => {
     const s = unref(status)
     const c = unref(color)
@@ -218,7 +241,7 @@ const useSvgStrokeColor = (status, color, percentage) => {
 /**
  * Only change when type is not 'line'
  */
-const useTextStyle = (type, width) => {
+const useTextStyle = (type: Ref<string>, width: Ref<number>) => {
   return computed(() => {
     const t = unref(type)
     const w = unref(width)

diff --git a/packages/element3/src/components/Progress/src/props.ts b/packages/element3/src/components/Progress/src/props.ts
@@ -24,9 +24,9 @@ export const STATUSES = Object.keys(STATUS_SETTING)
 export const TYPES = ['line', 'circle', 'dashboard']
 export const LINECAPS = ['butt', 'round', 'square']
 
-export const statusValid = (val: string) =>
+export const statusValid = (val: string): boolean =>
   isEmpty(val) || (!isEmpty(val) && STATUSES.includes(val))
-export const percentageValid = (val: number) =>
+export const percentageValid = (val: number): boolean =>
   isNumber(val) && val >= 0 && val <= 100
 export const typeValid = (val: string) => TYPES.includes(val)
 export const linecapValid = (val: string) => LINECAPS.includes(val)
@@ -60,7 +60,9 @@ export const props = {
     required: false,
     validator: statusValid
   },
+  /* eslint-disable*/
   color: { type: [String, Function, Array], default: '' },
+  /* eslint-enable*/
   showText: {
     type: Boolean,
     default: true
@@ -139,7 +141,7 @@ export function toFixedStr(f: number) {
 }
 
 export function calcRelativeSvgSize(size: number, width: number) {
-  return toFixedStr(genFnToRelativeSvgSize(width)(size))
+  return Number.parseFloat(toFixedStr(genFnToRelativeSvgSize(width)(size)))
 }
 
 export function calcSvgRadius(strokeWidth: number) {
@@ -150,7 +152,7 @@ export function calcPerimeter(radius: number) {
   return 2 * Math.PI * radius
 }
 
-export function genTrailPathStyle(perimeter, type = 'circle') {
+export function genTrailPathStyle(perimeter: number, type = 'circle') {
   const rate = getRate(type)
   const offset = toFixedStr(getOffset(perimeter, rate))
   const range = toFixedStr(perimeter * rate)
@@ -164,7 +166,7 @@ export function getRate(type) {
   return type === 'dashboard' ? DASHBOARD_RATE : 1
 }
 
-export function genArcPathStyle(perimeter, percentage = 0, type = 'circle') {
+export function genArcPathStyle(perimeter: number, percentage = 0, type = 'circle') {
   const rate = getRate(type)
   const offset = toFixedStr(getOffset(perimeter, rate))
   const p = toFixedStr(perimeter * (percentage / FULL_PERCENT) * rate)

diff --git a/packages/element3/src/components/Progress/tests/test-helper.ts b/packages/element3/src/components/Progress/tests/test-helper.ts
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { mount, VueWrapper } from '@vue/test-utils'
 import Progress from '../src/Progress.vue'
 import Color from '../../../../packages/color-picker/src/color'
 import { merge } from 'lodash-es'
@@ -13,7 +13,7 @@ export function initProgress(initProps?: ProgressProps) {
   return mount(Progress, { props })
 }
 
-export function assertSetBgColor(wrapper, color: string) {
+export function assertSetBgColor(wrapper: VueWrapper<any>, color: string) {
   const rgb = fromHexToRgb(color)
   assertContainStyle(
     wrapper,
@@ -29,7 +29,7 @@ export function fromHexToRgb(hex) {
   return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`
 }
 
-export function assertSetPercentage(wrapper, percentage: number) {
+export function assertSetPercentage(wrapper: VueWrapper<any>, percentage: number) {
   expect(wrapper.get('.el-progress__text')).toHaveTextContent(`${percentage}%`)
   assertContainStyle(
     wrapper,
@@ -38,18 +38,18 @@ export function assertSetPercentage(wrapper, percentage: number) {
   )
 }
 
-export function assertContainStyle(wrapper, selector, strStyle) {
+export function assertContainStyle(wrapper: VueWrapper<any>, selector: string, strStyle: string) {
   const elem = wrapper.find(selector)
   expect(elem.attributes().style).toBeDefined()
   expect(elem.attributes().style).toContain(strStyle)
 }
 
-export function assertNotContainStyle(wrapper, selector, strStyle) {
+export function assertNotContainStyle(wrapper: VueWrapper<any>, selector: string, strStyle: string) {
   const elem = wrapper.find(selector)
   expect(elem.attributes().style).not.toContain(strStyle)
 }
 
-export async function assertArcStyleOk(wrapper, percentage?: number) {
+export async function assertArcStyleOk(wrapper: VueWrapper<any>, percentage?: number) {
   const percent = percentage || wrapper.props('percentage')
   await wrapper.setProps({ percentage: percent })
   const testArcs = { 50: '149.5', 0: '299.1', 85: '254.2', 25: '74.8' }
@@ -60,21 +60,21 @@ export async function assertArcStyleOk(wrapper, percentage?: number) {
   )
 }
 
-export function findSvgTrailPath(wrapper) {
+export function findSvgTrailPath(wrapper: VueWrapper<any>) {
   return wrapper.find('.el-progress-circle > svg > path:first-child')
 }
 
-export function findSvgArcPath(wrapper) {
+export function findSvgArcPath(wrapper: VueWrapper<any>) {
   return wrapper.find('.el-progress-circle > svg > path:last-child')
 }
 
-export function assertSvgStrokeOk(wrapper, status: string) {
+export function assertSvgStrokeOk(wrapper: VueWrapper<any>, status: string) {
   expect(wrapper.props('status')).toBe(status)
   const svgArcPath = findSvgArcPath(wrapper)
   expect(svgArcPath.attributes()['stroke']).toBe(STATUS_SETTING[status].color)
 }
 
-export function assertIconClassOk(wrapper, status: string) {
+export function assertIconClassOk(wrapper: VueWrapper<any>, status: string) {
   const icon = wrapper.find('.el-progress__text > i')
   expect(icon).toHaveClass(STATUS_SETTING[status]['arcIconClass'])
 }