refactor: [vue2] Further fixes for v0.8

Author: rstoenescu

src/components/loading/Loading.vue

@@ -1,15 +1,30 @@
 <template>
   <div class="quasar-loading fullscreen column items-center justify-center z-absolute">
-    <spinner :name="spinner" color="#fff" :size="80"></spinner>
-    <div v-if="message" style="margin: 40px 20px 0 20px; max-width: 450px; text-align: center; color: white; text-shadow: 0 0 7px black">{{ message }}</div>
+    <spinner :name="spinner" :color="spinnerColor" :size="spinnerSize"></spinner>
+    <div
+      v-if="message"
+      :style="{color: messageColor}"
+    >{{ message }}</div>
   </div>
 </template>
 
 <script>
 export default {
   props: {
     message: [String, Boolean],
-    spinner: String
+    spinner: String,
+    spinnerSize: {
+      type: Number,
+      default: 80
+    },
+    spinnerColor: {
+      type: String,
+      default: '#fff'
+    },
+    messageColor: {
+      type: String,
+      default: 'white'
+    }
   }
 }
 </script>

src/components/loading/loading.ios.styl

@@ -1,2 +1,12 @@
+$loading-background ?= $dimmed-background
+
 body.with-loading
   overflow hidden
+
+.quasar-loading
+  background $loading-background
+  > div
+    margin 40px 20px 0
+    max-width 450px
+    text-align center
+    text-shadow 0 0 7px black

src/components/loading/loading.js

@@ -2,6 +2,7 @@ import { current as theme } from '../../theme'
 import { Vue } from '../../install'
 import Events from '../../events'
 import Loading from './Loading.vue'
+import Utils from '../../utils'
 
 let
   vm,
@@ -16,10 +17,16 @@ function isActive () {
 function show ({
   delay = 500,
   spinner = theme === 'ios' ? 'ios' : 'tail',
-  message = false
+  message = false,
+  spinnerSize,
+  spinnerColor,
+  messageColor
 } = {}) {
   props.spinner = spinner
   props.message = message
+  props.spinnerSize = spinnerSize
+  props.spinnerColor = spinnerColor
+  props.messageColor = messageColor
 
   if (appIsInProgress) {
     vm && vm.$forceUpdate()
@@ -31,7 +38,7 @@ function show ({
 
     const node = document.createElement('div')
     document.body.appendChild(node)
-    document.body.classList.add('with-loading', 'dimmed')
+    document.body.classList.add('with-loading')
 
     vm = new Vue({
       el: node,
@@ -54,7 +61,7 @@ function hide () {
   }
   else {
     vm.$destroy()
-    document.body.classList.remove('with-loading', 'dimmed')
+    document.body.classList.remove('with-loading')
     document.body.removeChild(vm.$el)
     vm = null
   }

src/components/loading/loading.mat.styl

@@ -1,2 +1,12 @@
+$loading-background ?= $dimmed-background
+
 body.with-loading
   overflow hidden
+
+.quasar-loading
+  background $loading-background
+  > div
+    margin 40px 20px 0
+    max-width 450px
+    text-align center
+    text-shadow 0 0 7px black

src/vue-components/drawer/DrawerLink.vue

@@ -1,14 +1,21 @@
 <template>
-  <div class="item item-link drawer-closer">
+  <router-link
+    :to="to"
+    :replace="replace"
+    :append="append"
+    :exact="exact"
+    tag="div"
+    class="item item-link drawer-closer"
+  >
     <i v-if="icon" class="item-primary">{{icon}}</i>
     <div class="item-content">
       <slot></slot>
     </div>
-  </div>
+  </router-link>
 </template>
 
 <script>
 export default {
-  props: ['icon']
+  props: ['icon', 'to', 'replace', 'append', 'exact']
 }
 </script>

src/vue-components/tab/Tab.vue

@@ -50,7 +50,9 @@ export default {
   created () {
     if (this.route) {
       this.$watch('$route', () => {
-        this.__selectTabIfRouteMatches()
+        this.$nextTick(() => {
+          this.__selectTabIfRouteMatches()
+        })
       })
     }
   },

src/vue-components/tab/Tabs.vue

@@ -124,6 +124,9 @@ export default {
         this.setActiveTab(this.defaultTab)
         this.__findTabAndScroll(this.defaultTab)
       }
+      else {
+        this.__findTabAndScroll(this.activeTab)
+      }
     })
   },
   beforeDestroy () {