minor

Author: asvae

package.json

@@ -36,7 +36,7 @@
     "v-tooltip": "^2.0.0-rc.30",
     "vee-validate": "2.0.9",
     "vue": "^2.5.17",
-    "vue-book": "0.1.0-alpha.6",
+    "vue-book": "0.1.0-alpha.9",
     "vue-bulma-expanding": "0.0.1",
     "vue-chartjs": "^3.4.0",
     "vue-color": "^2.7.0",

src/components/statistics/progress-bars/Widgets/StandardBars.vue

@@ -59,12 +59,9 @@ export default {
   name: 'standard-bars',
   data () {
     return {
-      value: 0,
+      value: 100,
     }
   },
-  mounted () {
-    this.value = 100
-  }
 }
 </script>
 

src/router/index.js

@@ -8,18 +8,20 @@ Vue.use(Router)
 
 const demoRoutes = []
 if (process.env.NODE_ENV === 'development') {
-  const createRoute = require('vue-book').createRoute
+  const VueBook = require('vue-book')
 
   demoRoutes.push(
-    createRoute({
+    VueBook.createRoute({
       requireContext: require.context('./..', true, /.demo.vue$/),
       path: '/demo',
     }),
-    createRoute({
+    VueBook.createRoute({
       requireContext: require.context('./../components', true, /.vue$/),
       path: '/presentation',
     }),
   )
+
+  Vue.use(VueBook.VueBookComponents)
 }
 
 const EmptyParentComponent = {

src/vuestic-theme/vuestic-components/vuestic-progress-bar/progress-types/CircleProgressBar.demo.vue

@@ -1,53 +1,49 @@
 <template>
-  <div class="demo-container">
-    <div class="demo-container__item">
+  <VbDemo>
+    <VbContainer title="Default">
+      <circle-bar :value="value"/>
+    </VbContainer>
+
+    <VbContainer title="No value">
       <circle-bar/>
-      <circle-bar
-        :value="value"
-      />
-    </div>
+    </VbContainer>
 
-    <div class="demo-container__item">
-      Disabled
+    <VbContainer title="Disabled">
       <circle-bar
         :value="value"
         disabled
       />
-    </div>
+    </VbContainer>
 
-    <div class="demo-container__item">
-      Start animated
+    <VbContainer title="Start animated" refresh>
       <circle-bar
         :value="value"
         start-animated
       />
-    </div>
+    </VbContainer>
 
-    <div class="demo-container__item">
-      No animation
+    <VbContainer title="No animation">
       <circle-bar
         :value="value"
         no-animation
       />
-    </div>
+    </VbContainer>
 
-    <div class="demo-container__item">
+    <VbContainer title="With text">
       <circle-bar
         :value="value"
-        text="some long text"
-        background-theme="White"
-        start-animated
+        text="some long text text text text"
       />
-    </div>
+    </VbContainer>
 
-    <div class="demo-container__item">
-      {{ value }}
+    <VbContainer>
+      <button @click="value -= 100">-100</button>
       <button @click="value -= 10">-10</button>
+      {{ value }}
       <button @click="value += 10">+10</button>
-      <button @click="value -= 100">-100</button>
       <button @click="value += 100">+100</button>
-    </div>
-  </div>
+    </VbContainer>
+  </VbDemo>
 </template>
 
 <script>

src/vuestic-theme/vuestic-components/vuestic-progress-bar/progress-types/CircleProgressBar.vue

@@ -1,12 +1,10 @@
 <template>
   <div
     class="circle-bar circle-bar__progress-bar"
-    :class="computedClass"
     :style="'background-image: ' + backgroundImage"
   >
     <div class="circle-bar__overlay" :style="circleBarStyle">
-      <span v-if="!text">{{value + '%'}}</span>
-      <span v-else>{{text}}</span>
+      {{ text ? text : value + '%'}}
     </div>
   </div>
 </template>
@@ -21,7 +19,7 @@ export default {
   data () {
     return {
       animatedValue: 0,
-      animateValueInterval: null
+      animateValueInterval: null,
     }
   },
   props: {
@@ -37,18 +35,11 @@ export default {
       type: String,
       default: 'Primary',
     },
+    // TODO Questionable. Ideally we should have transparent background.
     backgroundTheme: {
       type: String,
       default: 'White',
     },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    noAnimation: {
-      type: Boolean,
-      default: false,
-    },
     startAnimated: {
       type: Boolean,
       default: false,
@@ -57,7 +48,7 @@ export default {
     animationInterval: {
       type: Number,
       default: 2000,
-    }
+    },
   },
   created () {
     if (!this.startAnimated) {
@@ -72,9 +63,8 @@ export default {
         if (this.animateValueInterval) {
           return
         }
-        // 100 ms is not exactly no animation, but close enough.
-        // TODO Split value tracker into separate class. Add some tests.
-        const animationInterval = this.noAnimation ? 100 : this.animationInterval
+        // We're updating `animatedValue` to follow `value` change.
+        // `animatedValue` is used to display actual bar.
         this.animateValueInterval = setInterval(() => {
           if (this.value === this.animatedValue) {
             clearInterval(this.animateValueInterval)
@@ -83,8 +73,14 @@ export default {
           }
           const deltaValue = this.value < this.animatedValue ? -1 : 1
           this.setAnimatedValue(this.animatedValue + deltaValue)
-        }, animationInterval / 100)
-      }
+        }, this.animationInterval / 100)
+      },
+    },
+  },
+  beforeDestroy () {
+    if (this.animateValueInterval) {
+      clearInterval(this.animateValueInterval)
+      this.animateValueInterval = null
     }
   },
   methods: {
@@ -98,7 +94,7 @@ export default {
         return
       }
       this.animatedValue = value
-    }
+    },
   },
   computed: {
     backgroundImage () {
@@ -109,11 +105,11 @@ export default {
       if (value < 50) {
         const nextDeg = 90 + (3.6 * value) + 'deg'
         return `linear-gradient(90deg, ${backgroundTheme} 50%, transparent 50%, transparent), ` +
-        `linear-gradient(${nextDeg}, ${theme} 50%, ${backgroundTheme} 50%, ${backgroundTheme})`
+          `linear-gradient(${nextDeg}, ${theme} 50%, ${backgroundTheme} 50%, ${backgroundTheme})`
       } else {
         const nextDeg = -90 + (3.6 * (value - 50)) + 'deg'
         return `linear-gradient(${nextDeg}, ${theme} 50%, transparent 50%, transparent), ` +
-        `linear-gradient(270deg, ${theme} 50%, ${backgroundTheme} 50%, ${backgroundTheme})`
+          `linear-gradient(270deg, ${theme} 50%, ${backgroundTheme} 50%, ${backgroundTheme})`
       }
     },
     circleBarStyle () {
@@ -122,11 +118,6 @@ export default {
         color: colorConfig[VuesticTheme[this.theme]],
       }
     },
-    computedClass () {
-      return {
-        'circle-bar--disabled': this.disabled,
-      }
-    },
   },
 }
 </script>
@@ -146,8 +137,6 @@ export default {
   }
 
   &.circle-bar__progress-bar {
-    float: left;
-    position: relative;
     transition: background-color ease .5s, width 3s linear !important;
     width: $progress-bar-circle-diameter;
     height: $progress-bar-circle-diameter;

yarn.lock

@@ -7832,10 +7832,10 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
-vue-book@0.1.0-alpha.6:
-  version "0.1.0-alpha.6"
-  resolved "https://registry.yarnpkg.com/vue-book/-/vue-book-0.1.0-alpha.6.tgz#02c21e4af8713a6cde0113c1cadcae4f1714f9b6"
-  integrity sha512-U4bPAL+eIVAaX5zbwNau5CbGm6IADouvhDHiJAs0QiAazQYw+ECdiOxne/06fbWojSRaNmavIwzywqzx5/S45A==
+vue-book@0.1.0-alpha.9:
+  version "0.1.0-alpha.9"
+  resolved "https://registry.yarnpkg.com/vue-book/-/vue-book-0.1.0-alpha.9.tgz#ba8ba32a2a16096a5bf6f84a27567c4707a9a988"
+  integrity sha512-qPlKYgSY3Pn/2j7sjogy2b+rm9AYquEMNibAg/IF/mVYW86hjgJAlhU2TB0UKvQC+sU83ALNEOeXJQgd8CWd7Q==
 
 vue-bulma-expanding@0.0.1:
   version "0.0.1"