feat(spin): size prop support number type (#67)

CHANGELOG.en-US.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `n-spin`'s `size` prop support number.
+
 ## 2.11.5 (2021-06-10)
 
 ### Feats

CHANGELOG.zh-CN.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `n-spin` 的 `size` 属性支持 number 类型
+
 ## 2.11.5 (2021-06-10)
 
 ### Feats

src/spin/demos/enUS/index.demo-entry.md

@@ -13,10 +13,10 @@ wrap
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| size | `'small' \| 'medium' \| 'large'` | `'medium'` |  |
-| show | `boolean` | `true` | If spin is active |
-| stroke-width | `number` | `undefined` | Relative width of spin's stroke, you can assume the outer radius of spin is 100 |
-| stroke | `string` | `undefined` | Color of spin |
+| size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` |  |
+| show | `boolean` | `true` | If spin is active. |
+| stroke-width | `number` | `undefined` | Relative width of spin's stroke, you can assume the outer radius of spin is 100. |
+| stroke | `string` | `undefined` | Color of the spin. |
 
 ## Slots
 

src/spin/demos/zhCN/index.demo-entry.md

@@ -13,7 +13,7 @@ wrap
 
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| size | `'small' \| 'medium' \| 'large'` | `'medium'` |  |
+| size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` |  |
 | show | `boolean` | `true` | Spin 在填入内容的状态是否激活 |
 | stroke-width | `number` | `undefined` | Spin 边缘的相对宽度，假定 Spin 的外侧半径是 100 |
 | stroke | `string` | `undefined` | Spin 的颜色 |

src/spin/src/Spin.tsx

@@ -7,6 +7,7 @@ import {
   CSSProperties
 } from 'vue'
 import { useCompitable } from 'vooks'
+import { pxfy } from 'seemly'
 import { NBaseLoading } from '../../_internal'
 import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
@@ -16,9 +17,9 @@ import type { SpinTheme } from '../styles'
 import style from './styles/index.cssr'
 
 const STROKE_WIDTH = {
-  small: 22,
-  medium: 20,
-  large: 18
+  small: 20,
+  medium: 18,
+  large: 16
 }
 
 const spinProps = {
@@ -28,7 +29,7 @@ const spinProps = {
     default: undefined
   },
   size: {
-    type: [String, Number] as PropType<'small' | 'medium' | 'large'>,
+    type: [String, Number] as PropType<'small' | 'medium' | 'large' | number>,
     default: 'medium'
   },
   show: {
@@ -71,14 +72,19 @@ export default defineComponent({
         const { strokeWidth } = props
         if (strokeWidth !== undefined) return strokeWidth
         const { size } = props
-        return STROKE_WIDTH[size]
+        return STROKE_WIDTH[typeof size === 'number' ? 'medium' : size]
       }),
       cssVars: computed(() => {
         const { size: spinSize } = props
         const {
           common: { cubicBezierEaseInOut },
-          self: { opacitySpinning, color, [createKey('size', spinSize)]: size }
+          self
         } = themeRef.value
+        const { opacitySpinning, color } = self
+        const size =
+          typeof spinSize === 'number'
+            ? pxfy(spinSize)
+            : self[createKey('size', spinSize)]
         return {
           '--bezier': cubicBezierEaseInOut,
           '--opacity-spinning': opacitySpinning,