refactor: [vue2] Further fixes for v0.8

Author: rstoenescu

src/app-visibility.js

@@ -29,7 +29,7 @@ function onchange (evt) {
   }
 
   appVisibility = state
-  Events.trigger('app:visibility', state)
+  Events.$emit('app:visibility', state)
 }
 
 Utils.dom.ready(() => {

src/components/action-sheet/ActionSheet.vue

@@ -161,6 +161,7 @@ export default {
   },
   mounted () {
     this.$refs.dialog.open()
+    this.$root.quasarClose = this.close
   },
   destroyed () {
     if (Utils.dom.has(this.$el)) {

src/components/dialog/Dialog.vue

@@ -48,8 +48,8 @@
           </div>
         </label>
 
-        <div v-if="el.type === 'range' || el.type === 'double-range'" style="margin-bottom: 10px">
-          <label v-html="el.label"></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
             :is="'quasar-' + el.type"
             v-model="el.model"
@@ -64,7 +64,7 @@
 
         <div v-if="el.type === 'rating'" style="margin-bottom: 10px">
           <label v-html="el.label"></label>
-          <quasar-rating v-model="el.model" :max="el.max" :icon="el.icon"></quasar-rating>
+          <quasar-rating v-model="el.model" :max="el.max" :icon="el.icon" :style="{fontSize: el.size || '2rem'}"></quasar-rating>
         </div>
       </template>
     </div>
@@ -157,6 +157,7 @@ export default {
   },
   mounted () {
     this.$refs.dialog.open()
+    this.$root.quasarClose = this.close
   },
   destroyed () {
     if (Utils.dom.has(this.$el)) {

src/components/loading/loading.js

@@ -40,7 +40,7 @@ function show ({
   }, delay)
 
   appIsInProgress = true
-  Events.trigger('app:loading', true)
+  Events.$emit('app:loading', true)
 }
 
 function hide () {
@@ -60,7 +60,7 @@ function hide () {
   }
 
   appIsInProgress = false
-  Events.trigger('app:loading', false)
+  Events.$emit('app:loading', false)
 }
 
 export default {

src/components/modal-generator.js

@@ -6,14 +6,19 @@ export default function (VueComponent) {
       const node = document.createElement('div')
       document.body.appendChild(node)
 
-      /* eslint-disable no-new */
-      new Vue({
+      let vm = new Vue({
         el: node,
         data () {
           return {props}
         },
         render: h => h(VueComponent, {props})
       })
+
+      return {
+        close (fn) {
+          vm.quasarClose(fn)
+        }
+      }
     }
   }
 }

src/components/toast/Toast.vue

@@ -98,7 +98,7 @@ export default {
       this.__show()
     },
     __show () {
-      Events.trigger('app:toast', this.stack[0].html)
+      Events.$emit('app:toast', this.stack[0].html)
 
       this.timer = setTimeout(() => {
         if (this.stack.length > 0) {

src/components/toast/toast.js

@@ -1,5 +1,4 @@
 import Utils from '../../utils'
-import Events from '../../events'
 import Toast from './Toast.vue'
 
 let
@@ -23,12 +22,6 @@ let
     }
   ]
 
-Events.on('app:vue-ready', (_Vue) => {
-  let node = document.createElement('div')
-  document.body.appendChild(node)
-  toast = new _Vue(Toast).$mount(node)
-})
-
 function create (opts, defaults) {
   if (!opts) {
     throw new Error('Missing toast options.')
@@ -49,9 +42,16 @@ types.forEach(type => {
   create[type.name] = opts => create(opts, type.defaults)
 })
 
+export function install (_Vue) {
+  let node = document.createElement('div')
+  document.body.appendChild(node)
+  toast = new _Vue(Toast).$mount(node)
+}
+
 export default {
   create,
   setDefaults (opts) {
     toast.setDefaults(opts)
-  }
+  },
+  install
 }

src/css-components/list/list.ios.styl

@@ -1,5 +1,8 @@
+$item-primary-secondary-color ?= rgb(117, 117, 117)
+$item-content-label-color     ?= rgba(0, 0, 0, .87)
+$item-label-color             ?= rgba(0, 0, 0, .54)
+
 .item
-  color rgba(0, 0, 0, .87)
   height 48px
   position relative
   display block
@@ -18,7 +21,7 @@
       background rgba(0, 0, 0, .3)
 
   > .item-primary
-    color rgb(117, 117, 117)
+    color $item-primary-secondary-color
   > div.item-primary
     position absolute
     top 0
@@ -45,7 +48,6 @@
     line-height 24px
     border-radius 50%
   > img.item-primary
-    color rgb(255, 255, 255)
     display inline-flex
     align-items center
     justify-content center
@@ -56,7 +58,6 @@
     top 4px
     left 16px
     user-select none
-    background-color rgb(188, 188, 188)
     &:not(.thumbnail)
       border-radius 50%
 
@@ -69,14 +70,15 @@
       margin-left 72px
     &.has-secondary
       margin-right 72px
-    > span, > div > span
-      color rgba(0, 0, 0, .87)
+    &:not(.no-style)
+      > span, > div > span
+        color $item-content-label-color
 
   > .item-primary ~ .item-content
     margin-left 72px
 
   > .item-secondary
-    color rgb(117, 117, 117)
+    color $item-primary-secondary-color
     position absolute
     top 0
     margin 12px
@@ -124,17 +126,18 @@
       padding-top 20px
       padding-bottom 16px
 
-      > div:not(.stacked-label):not(.floating-label):not([class^='quasar-'])
-        overflow hidden
-        text-overflow ellipsis
-        white-space nowrap
+      &:not(.no-style)
+        > div:not(.stacked-label):not(.floating-label):not([class^='quasar-'])
+          overflow hidden
+          text-overflow ellipsis
+          white-space nowrap
 
-      > div:not(:first-of-type)
-        font-size 14px
-        line-height 16px
-        height 16px
-        margin 4px 0 0
-        color rgba(0, 0, 0, .54)
+        > div:not(:first-of-type):not([class^='quasar-'])
+          font-size 14px
+          line-height 16px
+          height 16px
+          margin 4px 0 0
+          color $item-label-color
 
   &.three-lines
     height 88px
@@ -148,24 +151,25 @@
       padding-top 16px
       padding-bottom 16px
 
-      > div:not(.stacked-label):not(.floating-label):not([class^='quasar-'])
-        overflow hidden
-        text-overflow ellipsis
+      &:not(.no-style)
+        > div:not(.stacked-label):not(.floating-label):not([class^='quasar-'])
+          overflow hidden
+          text-overflow ellipsis
 
-      > div:first-of-type:not([class^='quasar-'])
-        white-space nowrap
+        > div:first-of-type:not([class^='quasar-'])
+          white-space nowrap
 
-      > div:not(:first-of-type)
-        font-size 14px
-        line-height 18px
-        height 36px
-        margin 4px 0 0
-        color rgba(0, 0, 0, .54)
-        overflow hidden
-        text-overflow ellipsis
-        display -webkit-box
-        -webkit-line-clamp 2
-        -webkit-box-orient vertical
+        > div:not(:first-of-type):not([class^='quasar-'])
+          font-size 14px
+          line-height 18px
+          height 36px
+          margin 4px 0 0
+          color $item-label-color
+          overflow hidden
+          text-overflow ellipsis
+          display -webkit-box
+          -webkit-line-clamp 2
+          -webkit-box-orient vertical
 
   &.multiple-lines
     height auto
@@ -174,7 +178,7 @@
       padding-top 16px
 
   .item-label
-    color rgba(0, 0, 0, .5) !important
+    color $item-label-color !important
   .item-smaller
     font-size 14px
 
@@ -218,7 +222,7 @@ body.desktop .item.item-link:hover
       visibility hidden
 
   .list-label
-    color rgba(0, 0, 0, .54)
+    color $item-label-color
     font-size 14px
     font-weight 500
     line-height 48px