refactor(spin): set base radius to 100

packages/base/Loading/src/main.vue

@@ -5,7 +5,7 @@
   >
     <svg
       class="n-base-loading-circular"
-      viewBox="25 25 50 50"
+      :viewBox="`0 0 ${radius * 2} ${radius * 2}`"
     >
       <circle
         :style="{
@@ -13,10 +13,10 @@
           stroke
         }"
         class="n-base-loading-circular-path"
-        cx="50"
-        cy="50"
+        :cx="radius"
+        :cy="radius"
         fill="none"
-        r="20"
+        :r="radius - (strokeWidth) / 2"
       />
     </svg>
   </div>
@@ -26,21 +26,22 @@
 export default {
   name: 'NBaseLoading',
   props: {
+    radius: {
+      type: Number,
+      default: 100
+    },
     theme: {
       type: String,
       default: ''
     },
     strokeWidth: {
       type: Number,
-      default: null
+      default: 28
     },
     stroke: {
       type: String,
       default: null
     }
-  },
-  mounted () {
-    // console.log(this.strokeWidth)
   }
 }
 </script>

packages/common/Button/src/Button.vue

@@ -37,7 +37,7 @@
               transition: hollowOutColorTransitionDisabled ? 'none' : null
             }"
             :stroke="simulateHollowOut ? ascendantBackgroundColor : null"
-            :stroke-width="4"
+            :stroke-width="24"
           />
           <n-icon
             v-else
@@ -81,7 +81,6 @@
               transition: hollowOutColorTransitionDisabled ? 'none' : null
             }"
             :stroke="simulateHollowOut ? ascendantBackgroundColor : null"
-            :stroke-width="4"
           />
           <n-icon
             v-else

packages/common/Spin/src/main.vue

@@ -3,18 +3,6 @@
     v-if="$slots.default"
     class="n-spin-container"
   >
-    <transition name="n-spin--transition">
-      <n-base-loading
-        v-if="spinning"
-        :class="{
-          [`n-spin--${size}-size`]: true
-        }"
-        :stroke="stroke"
-        :stroke-width="strokeWidth"
-        :theme="synthesizedTheme"
-        class="n-spin"
-      />
-    </transition>
     <div
       :class="{
         'n-spin-content--spinning': spinning
@@ -23,6 +11,18 @@
     >
       <slot />
     </div>
+    <transition name="n-spin--transition">
+      <n-base-loading
+        v-if="spinning"
+        :class="{
+          [`n-spin--${size}-size`]: true
+        }"
+        :stroke="stroke"
+        :stroke-width="synthesizedStrokeWidth"
+        :theme="synthesizedTheme"
+        class="n-spin"
+      />
+    </transition>
   </div>
   <n-base-loading
     v-else
@@ -30,9 +30,8 @@
       [`n-spin--${size}-size`]: size
     }"
     :stroke="stroke"
-    :stroke-width="strokeWidth"
+    :stroke-width="synthesizedStrokeWidth"
     :theme="synthesizedTheme"
-    :style="synthesizedStyle"
     class="n-spin"
   />
 </template>
@@ -43,6 +42,15 @@ import withapp from '../../../mixins/withapp'
 import themeable from '../../../mixins/themeable'
 import asthemecontext from '../../../mixins/asthemecontext'
 
+const STROKE_WIDTH = {
+  small: 22,
+  medium: 20,
+  large: 18,
+  'in-small': 30,
+  'in-medium': 28,
+  'in-large': 26
+}
+
 export default {
   name: 'NSpin',
   components: {
@@ -67,6 +75,13 @@ export default {
       default: null
     }
   },
-  methods: {}
+  computed: {
+    synthesizedStrokeWidth () {
+      const strokeWidth = this.strokeWidth
+      if (strokeWidth !== null) return strokeWidth
+      const size = this.size
+      return STROKE_WIDTH[size]
+    }
+  }
 }
 </script>

styles/BaseLoading.scss

@@ -1,26 +1,31 @@
 @import './mixins/mixins.scss';
 @import './themes/vars.scss';
 
+$--base-loading-stroke-dashoffset: 500;
+
 @keyframes n-base-loading-rotate {
-  to {
-    transform: rotate(1turn)
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(270deg);
   }
 }
 
 @keyframes n-base-loading-dash {
   0% {
-    stroke-dasharray: 1,200;
-    stroke-dashoffset: 0
+    stroke-dashoffset: $--base-loading-stroke-dashoffset;
   }
   50% {
-    stroke-dasharray: 90,150;
-    stroke-dashoffset: -40px
+    stroke-dashoffset: $--base-loading-stroke-dashoffset / 4;
+    transform: rotate(135deg);
   }
-  to {
-    stroke-dasharray: 90,150;
-    stroke-dashoffset: -120px
+  100% {
+    stroke-dashoffset: $--base-loading-stroke-dashoffset;
+    transform: rotate(450deg);
   }
 }
+
 @include themes-mixin {
   @include b(base-loading) {
     @include once {
@@ -30,16 +35,17 @@
       @include once {
         height: 100%;
         width: 100%;
-        animation: n-base-loading-rotate 2s linear infinite;
+        animation: n-base-loading-rotate 1.5s linear infinite;
+        transform-origin: center;
       }
       @include b(base-loading-circular-path) {
         stroke: $--base-loading-stroke;
         @include once {
+          transform-origin: center;
           transition: stroke .3s $--n-ease-in-out-cubic-bezier;
           animation: n-base-loading-dash 1.5s ease-in-out infinite;
-          stroke-dasharray: 90, 150;
+          stroke-dasharray: $--base-loading-stroke-dashoffset;
           stroke-dashoffset: 0;
-          stroke-width: 8;
           stroke-linecap: round;
         }
       }

styles/Spin.scss

@@ -9,49 +9,32 @@
       @include m(in-small-size) {
         width: 14px;
         height: 14px;
-        @include b(base-loading-circular-path) {
-          stroke-width: 8!important;
-        }
       }
       @include m(in-medium-size) {
         width: 16px;
         height: 16px;
-        @include b(base-loading-circular-path) {
-          stroke-width: 7!important;
-        }
       }
       @include m(in-large-size) {
         width: 18px;
         height: 18px;
-        @include b(base-loading-circular-path) {
-          stroke-width: 6!important;
-        }
       }
       @include m(small-size) {
         width: 28px;
         height: 28px;
-        @include b(base-loading-circular-path) {
-          stroke-width: 6!important;
-        }
       }
       @include m(medium-size) {
         width: 34px;
         height: 34px;
-        @include b(base-loading-circular-path) {
-          stroke-width: 5!important;
-        }
       }
       @include m(large-size) {
         width: 40px;
         height: 40px;
-        @include b(base-loading-circular-path) {
-          stroke-width: 4.25!important;
-        }
       }
     }
     @include b(spin-container) {
       position: relative;
       @include b(spin) {
+        pointer-events: none;
         position: absolute;
         top: 50%;
         left: 50%;