feat(spin):css in js

src/Spin/index.js

@@ -1,8 +0,0 @@
-/* istanbul ignore file */
-import Spin from './src/main.vue'
-
-Spin.install = function (Vue) {
-  Vue.component(Spin.name, Spin)
-}
-
-export default Spin

src/_styles/index.scss

@@ -27,7 +27,6 @@
 @import './Timeline.scss';
 @import './Popconfirm.scss';
 @import './Popselect.scss';
-@import './Spin.scss';
 @import './Slider.scss';
 @import './Tree.scss';
 @import './Grid.scss';

src/index.js

@@ -52,7 +52,7 @@ import Result from './result'
 import Select from './select'
 import Scrollbar from './scrollbar'
 import Slider from './Slider'
-import Spin from './Spin'
+import Spin from './spin'
 import Statistic from './Statistic'
 import Steps from './steps'
 import Switch from './Switch'
@@ -160,6 +160,8 @@ import cascaderLightStyle from './cascader/styles/light'
 import cascaderDarkStyle from './cascader/styles/dark'
 import checkboxLightStyle from './checkbox/styles/light'
 import checkboxDarkStyle from './checkbox/styles/dark'
+import spinDarkStyle from './spin/styles/dark'
+import spinLightStyle from './spin/styles/light'
 
 // Can be remove after refactoring
 import baseSelectionLightStyle from './_base/selection/styles/light'
@@ -349,6 +351,8 @@ export default create({
     cascaderDarkStyle,
     checkboxDarkStyle,
     checkboxLightStyle,
+    spinDarkStyle,
+    spinLightStyle,
     // Can be remove after refactoring
     baseSelectionLightStyle,
     baseSelectionDarkStyle

src/spin/index.js

@@ -0,0 +1,8 @@
+/* istanbul ignore file */
+import Spin from './src/Spin.vue'
+
+Spin.install = function (Vue, naive) {
+  Vue.component(naive.componentPrefix + Spin.name, Spin)
+}
+
+export default Spin

src/spin/src/Spin.vue

@@ -44,6 +44,8 @@
 import NBaseLoading from '../../_base/loading'
 import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
+import usecssr from '../../_mixins/usecssr'
+import styles from './styles'
 
 const STROKE_WIDTH = {
   small: 22,
@@ -55,11 +57,15 @@ const STROKE_WIDTH = {
 }
 
 export default {
-  name: 'NSpin',
+  name: 'Spin',
   components: {
     NBaseLoading
   },
-  mixins: [ withapp, themeable ],
+  mixins: [
+    withapp,
+    themeable,
+    usecssr(styles)
+  ],
   props: {
     stroke: {
       type: String,

src/spin/src/styles/index.js

@@ -0,0 +1,15 @@
+import baseStyle from './themed-base.cssr.js'
+import sizeStyle from './themed-size.cssr.js'
+
+export default [
+  {
+    key: 'syntheticTheme',
+    watch: ['syntheticTheme'],
+    CNode: baseStyle
+  },
+  {
+    key: 'size',
+    watch: ['size'],
+    CNode: sizeStyle
+  }
+]

src/spin/src/styles/themed-base.cssr.js

@@ -0,0 +1,44 @@
+import { c, cM, cTB, cB } from '../../../_utils/cssr'
+import fadeInTransition from '../../../styles/_transitions/fade-in'
+
+export default c([
+  ({ props }) => {
+    const {
+      easeInOutCubicBezier
+    } = props.$base
+    const {
+      spinSpinningOpacity
+    } = props.$local
+    return cTB('spin-container', {
+      raw: `
+        position: relative;
+      `
+    }, [
+      cB('spin', {
+        raw: `
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translateX(-50%) translateY(-50%);
+        `
+      }, [
+        fadeInTransition()
+      ]
+      ),
+      cB('spin-content', {
+        raw: `
+          opacity: 1;
+          transition: opacity .3s ${easeInOutCubicBezier};
+          pointer-events: all;
+        `
+      }, [
+        cM('spinning', {
+          raw: `
+            pointer-events: none;
+          `,
+          opacity: spinSpinningOpacity
+        })
+      ])
+    ])
+  }
+])

src/spin/src/styles/themed-size.cssr.js

@@ -0,0 +1,19 @@
+import { c, cM, cB } from '../../../_utils/cssr'
+
+export default c([
+  ({ props }) => {
+    const { size } = props.$instance
+    const height = props.$local.height[size]
+    const width = props.$local.width[size]
+    return cB('spin', {
+      raw: `
+        display: inline-block;
+      `
+    }, [
+      cM(`${size}-size`, {
+        height,
+        width
+      })
+    ])
+  }
+])

src/spin/styles/_common.js

@@ -0,0 +1,18 @@
+export default {
+  height: {
+    small: '28px',
+    medium: '34px',
+    large: '40px',
+    'in-small': '14px',
+    'in-medium': '16px',
+    'in-large': '18px'
+  },
+  width: {
+    small: '28px',
+    medium: '34px',
+    large: '40px',
+    'in-small': '14px',
+    'in-medium': '16px',
+    'in-large': '18px'
+  }
+}

src/spin/styles/dark.js

@@ -0,0 +1,16 @@
+import create from '../../styles/_utils/create-component-base'
+import sizeVariables from './_common'
+
+export default create({
+  name: 'Spin',
+  theme: 'dark',
+  getDerivedVariables ({ base, derived }) {
+    const {
+      disabledOpacity
+    } = base
+    return {
+      ...sizeVariables,
+      spinSpinningOpacity: disabledOpacity
+    }
+  }
+})

src/spin/styles/light.js

@@ -0,0 +1,16 @@
+import create from '../../styles/_utils/create-component-base'
+import sizeVariables from './_common'
+
+export default create({
+  name: 'Spin',
+  theme: 'light',
+  getDerivedVariables ({ base, derived }) {
+    const {
+      disabledOpacity
+    } = base
+    return {
+      ...sizeVariables,
+      spinSpinningOpacity: disabledOpacity
+    }
+  }
+})