chore: Final v0.8 build

README.md

@@ -1,14 +1,8 @@
 ![Quasar Framework logo](http://quasar-framework.org/images/logo/xxhdpi.png)
 
-**This branch is used for Vue 2 compatibility. It is a work in progress.**
-
 # Quasar Framework
 
-> Build responsive websites and hybrid mobile Apps (that look native!) using same code, with VueJs.
-
-```
-Vue 2 compatibility work has started. Branch "v0.8" is used for this.
-```
+> Build responsive websites and hybrid mobile Apps (that look native!) using same code, with VueJs 2.
 
 <a href="https://badge.fury.io/js/quasar-framework" target="_blank"><img src="https://badge.fury.io/js/quasar-framework.svg"></a>
 [![Join the chat at https://gitter.im/quasarframework/Lobby](https://badges.gitter.im/quasarframework/Lobby.svg)](https://gitter.im/quasarframework/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

src/components/action-sheet/ActionSheet.vue

@@ -40,7 +40,7 @@
         </div>
       </div>
 
-      <div class="list no-border">
+      <div v-if="dismiss" class="list no-border">
         <div
           class="item item-link"
           @click="close(dismiss.handler)"
@@ -90,7 +90,7 @@
         </div>
       </div>
 
-      <div class="quasar-action-sheet">
+      <div v-if="dismiss" class="quasar-action-sheet">
         <div
           class="item item-link"
           @click="close(dismiss.handler)"
@@ -107,7 +107,6 @@
 
 <script>
 import { current } from '../../theme'
-import Utils from '../../utils'
 
 const modalCSS = {
   mat: {
@@ -126,8 +125,11 @@ export default {
   props: {
     title: String,
     gallery: Boolean,
-    actions: [Array, Boolean],
-    dismiss: [Object, Boolean]
+    actions: {
+      type: Array,
+      required: true
+    },
+    dismiss: Object
   },
   data () {
     return {
@@ -160,8 +162,10 @@ export default {
     }
   },
   mounted () {
-    this.$refs.dialog.open()
-    this.$root.quasarClose = this.close
+    this.$nextTick(() => {
+      this.$refs.dialog.open()
+      this.$root.quasarClose = this.close
+    })
   },
   destroyed () {
     if (document.body.contains(this.$el)) {

src/components/dialog/Dialog.vue

@@ -100,16 +100,13 @@
 </template>
 
 <script>
-import Utils from '../../utils'
-
 export default {
   props: {
     title: String,
     message: String,
     form: Object,
     stackButtons: Boolean,
     buttons: Array,
-    destroy: Boolean,
     nobuttons: Boolean,
     progress: Object
   },

src/themes/core/positioning.styl

@@ -3,11 +3,6 @@
 .pull-right
   float right !important
 
-.no-margin
-  margin 0 !important
-.no-padding
-  padding 0 !important
-
 .relative-position
   position relative !important
 

src/themes/core/visibility.styl

@@ -43,6 +43,11 @@
     opacity 1
     transform scale(1)
 
+.no-margin
+  margin 0 !important
+.no-padding
+  padding 0 !important
+
 .ellipsis
   text-overflow ellipsis
   white-space nowrap

src/vue-components/knob/Knob.vue

@@ -49,7 +49,6 @@ export default {
       type: Number,
       required: true
     },
-    disable: Boolean,
     min: {
       type: Number,
       default: 0
@@ -78,6 +77,7 @@ export default {
       type: Number,
       default: 1
     },
+    disable: Boolean,
     placeholder: String
   },
   computed: {

src/vue-components/parallax/Parallax.vue

@@ -4,7 +4,7 @@
       <img
         ref="img"
         :src="src"
-        @load="processImage()"
+        @load="__processImage()"
         :class="{ready: imageHasBeenLoaded}"
         style="transform: translate3D(-50%, 0, 0)"
       >
@@ -47,23 +47,23 @@ export default {
       this.imageHasBeenLoaded = false
     },
     height () {
-      this.updatePosition()
+      this.__updatePosition()
     }
   },
   methods: {
-    processImage () {
+    __processImage () {
       this.imageHasBeenLoaded = true
-      this.processResize()
+      this.__processResize()
     },
-    processResize () {
+    __processResize () {
       if (!this.imageHasBeenLoaded || !this.scrollTarget) {
         return
       }
 
       this.imageHeight = Utils.dom.height(this.image)
-      this.updatePosition()
+      this.__updatePosition()
     },
-    updatePosition () {
+    __updatePosition () {
       if (!this.imageHasBeenLoaded) {
         return
       }
@@ -98,16 +98,16 @@ export default {
       this.image = this.$refs.img
 
       this.scrollTarget = Utils.dom.getScrollTarget(this.$el)
-      this.resizeHandler = Utils.debounce(this.processResize, 50)
+      this.resizeHandler = Utils.debounce(this.__processResize, 50)
 
       window.addEventListener('resize', this.resizeHandler)
-      this.scrollTarget.addEventListener('scroll', this.updatePosition)
-      this.processResize()
+      this.scrollTarget.addEventListener('scroll', this.__updatePosition)
+      this.__processResize()
     })
   },
   beforeDestroy () {
     window.removeEventListener('resize', this.resizeHandler)
-    this.scrollTarget.removeEventListener('scroll', this.updatePosition)
+    this.scrollTarget.removeEventListener('scroll', this.__updatePosition)
   }
 }
 </script>

src/vue-components/popover/Popover.vue

@@ -260,7 +260,7 @@ export default {
       let target = getTargetPosition(targetEl)
       let targetPosition = {
         top: anchor[anchorOrigin.vertical] - target[targetOrigin.vertical],
-        left: anchor[anchorOrigin.horizontal] - target[targetOrigin.horizontal],
+        left: anchor[anchorOrigin.horizontal] - target[targetOrigin.horizontal]
       }
 
       targetPosition = applyAutoPositionIfNeeded(anchor, target, targetOrigin, anchorOrigin, targetPosition)

src/vue-components/range/DoubleRange.vue

@@ -2,10 +2,10 @@
   <div
     class="quasar-range non-selectable"
     :class="{disabled: disable}"
-    @mousedown.prevent="setActive"
-    @touchstart.prevent="setActive"
-    @touchend.prevent="end"
-    @touchmove.prevent="update"
+    @mousedown.prevent="__setActive"
+    @touchstart.prevent="__setActive"
+    @touchend.prevent="__end"
+    @touchmove.prevent="__update"
   >
     <div ref="handle" class="quasar-range-handle-container">
       <div class="quasar-range-track"></div>
@@ -118,28 +118,28 @@ export default {
     },
     min (value) {
       if (this.value.min < value) {
-        this.__update({min: value})
+        this.____update({min: value})
       }
       if (this.value.max < value) {
-        this.__update({max: value})
+        this.____update({max: value})
       }
-      this.$nextTick(this.validateProps)
+      this.$nextTick(this.__validateProps)
     },
     max (value) {
       if (this.value.min > value) {
-        this.__update({min: value})
+        this.____update({min: value})
       }
       if (this.value.max > value) {
-        this.__update({max: value})
+        this.____update({max: value})
       }
-      this.$nextTick(this.validateProps)
+      this.$nextTick(this.__validateProps)
     },
     step () {
-      this.$nextTick(this.validateProps)
+      this.$nextTick(this.__validateProps)
     }
   },
   methods: {
-    setActive (event) {
+    __setActive (event) {
       if (this.disable) {
         return
       }
@@ -160,9 +160,9 @@ export default {
         percentage = Math.min(1, Math.max(0, offset / this.dragging.width))
 
       this.dragging.onLeft = Math.abs(percentage - this.currentMinPercentage) <= Math.abs(percentage - this.currentMaxPercentage)
-      this.update(event)
+      this.__update(event)
     },
-    update (event) {
+    __update (event) {
       if (!this.dragging) {
         return
       }
@@ -214,12 +214,12 @@ export default {
     __updateInput ({min = this.value.min, max = this.value.max}) {
       this.$emit('input', {min, max})
     },
-    end () {
+    __end () {
       this.dragging = false
       this.currentMinPercentage = (this.value.min - this.min) / (this.max - this.min)
       this.currentMaxPercentage = (this.value.max - this.min) / (this.max - this.min)
     },
-    validateProps () {
+    __validateProps () {
       if (this.min >= this.max) {
         console.error('Range error: min >= max', this.$el, this.min, this.max)
       }
@@ -235,16 +235,16 @@ export default {
     }
   },
   created () {
-    this.validateProps()
+    this.__validateProps()
     if (Platform.is.desktop) {
-      document.body.addEventListener('mousemove', this.update)
-      document.body.addEventListener('mouseup', this.end)
+      document.body.addEventListener('mousemove', this.__update)
+      document.body.addEventListener('mouseup', this.__end)
     }
   },
   beforeDestroy () {
     if (Platform.is.dekstop) {
-      document.body.removeEventListener('mousemove', this.update)
-      document.body.removeEventListener('mouseup', this.end)
+      document.body.removeEventListener('mousemove', this.__update)
+      document.body.removeEventListener('mouseup', this.__end)
     }
   }
 }

src/vue-components/range/Range.vue

@@ -2,10 +2,10 @@
   <div
     class="quasar-range non-selectable"
     :class="{disabled: disable}"
-    @mousedown.prevent="setActive"
-    @touchstart.prevent="setActive"
-    @touchend.prevent="end"
-    @touchmove.prevent="update"
+    @mousedown.prevent="__setActive"
+    @touchstart.prevent="__setActive"
+    @touchend.prevent="__end"
+    @touchmove.prevent="__update"
   >
     <div ref="handle" class="quasar-range-handle-container">
       <div class="quasar-range-track"></div>
@@ -99,21 +99,21 @@ export default {
         this.value = value
         return
       }
-      this.$nextTick(this.validateProps)
+      this.$nextTick(this.__validateProps)
     },
     max (value) {
       if (this.value > value) {
         this.value = value
         return
       }
-      this.$nextTick(this.validateProps)
+      this.$nextTick(this.__validateProps)
     },
     step () {
-      this.$nextTick(this.validateProps)
+      this.$nextTick(this.__validateProps)
     }
   },
   methods: {
-    setActive (event) {
+    __setActive (event) {
       if (this.disable) {
         return
       }
@@ -124,9 +124,9 @@ export default {
         left: container.getBoundingClientRect().left,
         width: container.offsetWidth
       }
-      this.update(event)
+      this.__update(event)
     },
-    update (event) {
+    __update (event) {
       if (!this.dragging) {
         return
       }
@@ -139,11 +139,11 @@ export default {
       this.currentPercentage = percentage
       this.$emit('input', Math.min(this.max, Math.max(this.min, model - modulo + (Math.abs(modulo) >= this.step / 2 ? (modulo < 0 ? -1 : 1) * this.step : 0))))
     },
-    end () {
+    __end () {
       this.dragging = false
       this.currentPercentage = (this.value - this.min) / (this.max - this.min)
     },
-    validateProps () {
+    __validateProps () {
       if (this.min >= this.max) {
         console.error('Range error: min >= max', this.$el, this.min, this.max)
       }
@@ -153,16 +153,16 @@ export default {
     }
   },
   created () {
-    this.validateProps()
+    this.__validateProps()
     if (Platform.is.desktop) {
-      document.body.addEventListener('mousemove', this.update)
-      document.body.addEventListener('mouseup', this.end)
+      document.body.addEventListener('mousemove', this.__update)
+      document.body.addEventListener('mouseup', this.__end)
     }
   },
   beforeDestroy () {
     if (Platform.is.dekstop) {
-      document.body.removeEventListener('mousemove', this.update)
-      document.body.removeEventListener('mouseup', this.end)
+      document.body.removeEventListener('mousemove', this.__update)
+      document.body.removeEventListener('mouseup', this.__end)
     }
   }
 }

src/vue-components/rating/Rating.vue

@@ -51,7 +51,7 @@ export default {
   methods: {
     set (value) {
       if (!this.disable) {
-        this.model = Math.min(this.max, Math.max(1, value))
+        this.model = Math.min(this.max, Math.max(1, parseInt(value, 10)))
       }
     },
     __setHoverValue (value) {