fix: [vue2] Final fixes for v0.8

Author: rstoenescu

build/script.build.javascript.js

@@ -31,15 +31,13 @@ var
     'fastclick',
     'hammerjs',
     'moment',
-    'velocity-animate',
-    'velocity-animate/velocity.ui'
+    'velocity-animate'
   ],
   globals = {
     fastclick: 'FastClick',
     hammerjs: 'Hammer',
     moment: 'moment',
-    'velocity-animate': 'Velocity',
-    'velocity-animate/velocity.ui': 'velui'
+    'velocity-animate': 'Velocity'
   },
   rollupConfig = {
     entry: 'src/index.js',

src/components/dialog/Dialog.vue

@@ -48,6 +48,7 @@
           </div>
         </label>
 
+        <!--
         <div v-if="el.type === 'range' || el.type === 'double-range'" style="margin-top: 15px; margin-bottom: 10px">
           <label v-html="el.label + ' (' + (el.type === 'double-range' ? el.model.min + ' to ' + el.model.max : el.model) + ')'"></label>
           <component
@@ -61,6 +62,7 @@
             :snap="el.snap"
           ></component>
         </div>
+        -->
 
         <div v-if="el.type === 'rating'" style="margin-bottom: 10px">
           <label v-html="el.label"></label>

src/index.es6.js

@@ -1,6 +1,5 @@
 import Velocity from 'velocity-animate'
 window.Velocity = Velocity
-import 'velocity-animate/velocity.ui'
 
 import install from './install'
 import start from './start'

src/index.js

@@ -1,6 +1,5 @@
 import Velocity from 'velocity-animate'
 window.Velocity = Velocity
-import 'velocity-animate/velocity.ui'
 
 import install from './install'
 import start from './start'

src/themes/core/normalize.styl

@@ -152,3 +152,10 @@ input[type='search']
 input[type='search']::-webkit-search-cancel-button,
 input[type='search']::-webkit-search-decoration
   -webkit-appearance none
+
+/*
+ * Remove browser controller for input type="number"
+ */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button
+  -webkit-appearance none

src/vue-components/drawer/Drawer.vue

@@ -33,12 +33,11 @@ const
   backdropOpacity = {
     mat: 0.7,
     ios: 0.2
-  },
-  appContainer = document.getElementById('quasar-app')
+  }
 
 function getCurrentPosition (node) {
   let transform = Utils.dom.style(node, 'transform')
-  return transform !== 'none' ? parseInt(transform.split(/[()]/)[1].split(', ')[4], 10) : 0
+  return transform && transform !== 'none' ? parseInt(transform.split(/[()]/)[1].split(', ')[4], 10) : 0
 }
 
 function getBetween (value, min, max) {
@@ -69,14 +68,22 @@ export default {
         node = this.$refs.content,
         backdrop = this.$refs.backdrop,
         currentPosition = getCurrentPosition(node),
-        closePosition = (this.rightSide ? 1 : -1) * this.width
+        closePosition = (this.rightSide ? 1 : -1) * this.width,
+        animationNeeded = this.opened || (!this.opened && percentage !== 0),
+        complete = () => {
+          if (!this.opened) {
+            backdrop.classList.remove('active')
+          }
+          else {
+            window.addEventListener('resize', this.close)
+          }
+          if (typeof done === 'function') {
+            done()
+          }
+        }
 
       Velocity(node, 'stop')
-      Velocity(
-        node,
-        {translateX: this.opened ? [0, currentPosition] : [closePosition, currentPosition]},
-        {duration: !this.opened || currentPosition !== 0 ? drawerAnimationSpeed : 0}
-      )
+      Velocity(backdrop, 'stop')
 
       if (this.opened) {
         backdrop.classList.add('active')
@@ -101,7 +108,16 @@ export default {
         }
       }
 
-      Velocity(backdrop, 'stop')
+      if (!animationNeeded) {
+        complete()
+        return
+      }
+
+      Velocity(
+        node,
+        {translateX: this.opened ? [0, currentPosition] : [closePosition, currentPosition]},
+        {duration: !this.opened || currentPosition !== 0 ? drawerAnimationSpeed : 0}
+      )
       Velocity(
         backdrop,
         {
@@ -110,17 +126,7 @@ export default {
         },
         {
           duration: drawerAnimationSpeed,
-          complete: () => {
-            if (!this.opened) {
-              backdrop.classList.remove('active')
-            }
-            else {
-              window.addEventListener('resize', this.close)
-            }
-            if (typeof done === 'function') {
-              done()
-            }
-          }
+          complete
         }
       )
     },
@@ -152,16 +158,34 @@ export default {
       }
 
       let
-        currentPosition = getCurrentPosition(appContainer),
-        openPosition = (this.rightSide ? -1 : 1) * this.width
+        currentPosition = getCurrentPosition(this.layoutContainer),
+        openPosition = (this.rightSide ? -1 : 1) * this.width,
+        animationNeeded = this.opened || (!this.opened && percentage !== 0),
+        complete = () => {
+          if (!this.opened) {
+            backdrop.classList.remove('active')
+            document.body.classList.remove('drawer-opened')
+          }
+          else {
+            window.addEventListener('resize', this.close)
+          }
+          if (typeof done === 'function') {
+            done()
+          }
+        }
+
+      Velocity(this.layoutContainer, 'stop')
+      Velocity(backdrop, 'stop')
 
-      Velocity(appContainer, 'stop')
-      Velocity(appContainer,
+      if (!animationNeeded) {
+        complete()
+        return
+      }
+
+      Velocity(this.layoutContainer,
         {translateX: this.opened ? [openPosition, currentPosition] : [0, currentPosition]},
         {duration: !this.opened || currentPosition !== openPosition ? drawerAnimationSpeed : 0}
       )
-
-      Velocity(backdrop, 'stop')
       Velocity(
         backdrop,
         {
@@ -170,18 +194,7 @@ export default {
         },
         {
           duration: drawerAnimationSpeed,
-          complete: () => {
-            if (!this.opened) {
-              backdrop.classList.remove('active')
-              document.body.classList.remove('drawer-opened')
-            }
-            else {
-              window.addEventListener('resize', this.close)
-            }
-            if (typeof done === 'function') {
-              done()
-            }
-          }
+          complete
         }
       )
     },
@@ -208,7 +221,7 @@ export default {
         position = Math.min(position, this.width)
         percentage = 1.0 - (this.width - Math.abs(position)) / this.width
         fn = this.__iosToggleAnimate
-        target = appContainer
+        target = this.layoutContainer
         position = (this.rightSide ? -1 : 1) * position
       }
       else { // mat
@@ -251,7 +264,7 @@ export default {
         position = initialPosition + position
         percentage = (this.rightSide ? -1 : 1) * position / this.width
         fn = this.__iosToggleAnimate
-        target = appContainer
+        target = this.layoutContainer
       }
       else { // mat
         percentage = 1 + (this.rightSide ? -1 : 1) * position / this.width
@@ -304,6 +317,10 @@ export default {
     this.$nextTick(() => {
       const content = this.$refs.content
 
+      if (theme.current === 'ios') {
+        this.layoutContainer = this.$el.closest('.layout') || document.getElementById('quasar-app')
+      }
+
       this.width = Utils.dom.width(content)
 
       ;[].slice.call(content.getElementsByClassName('drawer-closer')).forEach(el => {

src/vue-components/modal/modal.ios.styl

@@ -81,6 +81,9 @@ maximized-modal()
     &.quasar-modal-leave-active .modal-content
       transform scale(.8)
 
+.modal, .modal-content
+  transition all .2s ease-in-out
+
 .modal-header
   text-align $modal-header-text-align
   padding $modal-header-padding

src/vue-components/numeric/Numeric.vue

@@ -3,7 +3,7 @@
     <i @click="__setByOffset(-1)">remove</i>
     <input
       class="no-style auto quasar-input-field"
-      type="text"
+      type="number"
       v-model.number="model"
       @blur="__updateValue()"
       @keydown.enter="__updateValue()"

src/vue-components/pagination/Pagination.vue

@@ -9,7 +9,7 @@
 
     <input
       ref="input"
-      type="text"
+      type="number"
       v-model.number.lazy="newPage"
       :style="{width: inputPlaceholder.length * 10 + 'px'}"
       :placeholder="inputPlaceholder"

src/vue-directives/go-back.js

@@ -2,12 +2,12 @@ import Platform from '../platform'
 import Utils from '../utils'
 
 export default {
-  bind (el, { value }, vnode) {
-    let ctx = { value, position: window.history.length - 1 }
+  bind (el, { value, modifiers }, vnode) {
+    let ctx = { value, position: window.history.length - 1, single: modifiers.single }
 
     if (Platform.is.cordova) {
       ctx.goBack = () => {
-        vnode.context.$router.go(ctx.position - window.history.length)
+        vnode.context.$router.go(ctx.single ? -1 : ctx.position - window.history.length)
       }
     }
     else {

src/web-storage.js

@@ -18,9 +18,6 @@ function encode (value) {
   if (typeof value === 'function') {
     return '__q_strn|' + value.toString()
   }
-  if (Array.isArray(value)) {
-    return '__q_arra|' + JSON.stringify(value)
-  }
   if (value === Object(value)) {
     return '__q_objt|' + JSON.stringify(value)
   }
@@ -58,9 +55,6 @@ function decode (value) {
     case '__q_strn':
       return '' + source
 
-    case '__q_arra':
-      return JSON.parse(source)
-
     case '__q_objt':
       return JSON.parse(source)