docs(spin): vue3

demo/documentation/components/spin/enUS/index.demo-entry.md

@@ -8,11 +8,11 @@ wrap
 ## Props
 |Name|Type|Default|Description|
 |-|-|-|-|
-|theme|`'light' \| 'dark' \| null \| string`|`null`||
-|spinning|`boolean`|`false`|It spin is active|
 |size|`'small' \| 'in-small' \| 'medium' \| 'in-medium' \| 'large' \| 'in-large'`|`medium`||
-|stroke|`string`|`null`|Color of spin|
-|stroke-width|`number`|`null`|Relative width of spin's stroke, you can assume the outer radius of spin is 100|
+|spinning|`boolean`|`false`|It 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|
+|theme|`'light' \| 'dark' \| null \| string`|`null`||
 
 ## Slots
 |Name|Parameters|Description|

demo/documentation/components/spin/enUS/wrap.demo.md

@@ -1,8 +1,7 @@
 # Wrap
 You can wrap a component inside spin. To match regular components's size, spin alse provides `in-small`, `in-medium` and `in-large` sizes.
 ```html
-<div
->
+<div>
   <n-spin
     style="display: inline-block; margin: 0 8px 12px 0;"
     size="in-small"

demo/documentation/components/spin/zhCN/index.demo-entry.md

@@ -8,11 +8,11 @@ wrap
 ## Props
 |名称|类型|默认值|说明|
 |-|-|-|-|
-|theme|`'light' \| 'dark' \| null \| string`|`null`||
-|spinning|`boolean`|`false`|Spin 在填入内容的状态是否激活|
 |size|`'small' \| 'in-small' \| 'medium' \| 'in-medium' \| 'large' \| 'in-large'`|`medium`||
-|stroke|`string`|`null`|Spin 的颜色|
-|stroke-width|`number`|`null`|Spin 边缘的相对宽度，假定 Spin 的外侧半径是 100|
+|spinning|`boolean`|`false`|Spin 在填入内容的状态是否激活|
+|stroke-width|`number`|`undefined`|Spin 边缘的相对宽度，假定 Spin 的外侧半径是 100|
+|stroke|`string`|`undefined`|Spin 的颜色|
+|theme|`'light' \| 'dark' \| null \| string`|`null`||
 
 ## Slots
 |名称|参数|说明|

demo/documentation/components/spin/zhCN/wrap.demo.md

@@ -1,8 +1,7 @@
 # 填充内容
 你可以把其他内容包裹在 Spin 中。为了匹配一些常用组件的尺寸，Spin 还提供 `in-small`、`in-medium` 和 `in-large` 的尺寸。
 ```html
-<div
->
+<div>
   <n-spin
     style="display: inline-block; margin: 0 8px 12px 0;"
     size="in-small"

src/spin/src/Spin.vue

@@ -42,9 +42,11 @@
 
 <script>
 import NBaseLoading from '../../_base/loading'
-import withapp from '../../_mixins/withapp'
-import themeable from '../../_mixins/themeable'
-import usecssr from '../../_mixins/usecssr'
+import {
+  configurable,
+  themeable,
+  usecssr
+} from '../../_mixins'
 import styles from './styles'
 
 const STROKE_WIDTH = {
@@ -62,14 +64,14 @@ export default {
     NBaseLoading
   },
   mixins: [
-    withapp,
+    configurable,
     themeable,
     usecssr(styles)
   ],
   props: {
     stroke: {
       type: String,
-      default: null
+      default: undefined
     },
     size: {
       type: [String, Number],
@@ -81,13 +83,13 @@ export default {
     },
     strokeWidth: {
       type: Number,
-      default: null
+      default: undefined
     }
   },
   computed: {
     syntheticStrokeWidth () {
       const { strokeWidth } = this
-      if (strokeWidth !== null) return strokeWidth
+      if (strokeWidth !== undefined) return strokeWidth
       const size = this.size
       return STROKE_WIDTH[size]
     }