quasar 1.16.3 → 1.17.3

package/src/plugins/Notify.js

@@ -7,10 +7,16 @@ import QSpinner from '../components/spinner/QSpinner.js'
 
 import { noop } from '../utils/event.js'
 import { getBodyFullscreenElement } from '../utils/dom.js'
+import debounce from '../utils/debounce.js'
 import { isSSR } from './Platform.js'
 
-let uid = 0
+let uid = 0, vm
+
 const defaults = {}
+const groups = {}
+const notificationsList = {}
+const positionClass = {}
+const emptyRE = /^\s*$/
 
 const positionList = [
   'top-left', 'top-right',
@@ -25,23 +31,23 @@ const badgePositions = [
 
 const notifTypes = {
   positive: {
-    icon () { return this.$q.iconSet.type.positive },
+    icon: $q => $q.iconSet.type.positive,
     color: 'positive'
   },
 
   negative: {
-    icon () { return this.$q.iconSet.type.negative },
+    icon: $q => $q.iconSet.type.negative,
     color: 'negative'
   },
 
   warning: {
-    icon () { return this.$q.iconSet.type.warning },
+    icon: $q => $q.iconSet.type.warning,
     color: 'warning',
     textColor: 'dark'
   },
 
   info: {
-    icon () { return this.$q.iconSet.type.info },
+    icon: $q => $q.iconSet.type.info,
     color: 'info'
   },
 
@@ -53,329 +59,334 @@ const notifTypes = {
   }
 }
 
-const groups = {}
-const positionClass = {}
-
-function logError (error, config) {
-  console.error(`Notify: ${error}`, config)
-  return false
-}
-
-const Notifications = {
-  name: 'QNotifications',
+function addNotification (config, vm, originalApi) {
+  if (!config) {
+    return logError('parameter required')
+  }
 
-  created () {
-    this.notifs = {}
+  let Api
+  const notif = { textColor: 'white' }
 
-    positionList.forEach(pos => {
-      this.notifs[pos] = []
+  if (config.ignoreDefaults !== true) {
+    Object.assign(notif, defaults)
+  }
 
-      const
-        vert = ['left', 'center', 'right'].includes(pos) === true ? 'center' : (pos.indexOf('top') > -1 ? 'top' : 'bottom'),
-        align = pos.indexOf('left') > -1 ? 'start' : (pos.indexOf('right') > -1 ? 'end' : 'center'),
-        classes = ['left', 'right'].includes(pos) ? `items-${pos === 'left' ? 'start' : 'end'} justify-center` : (pos === 'center' ? 'flex-center' : `items-${align}`)
+  if (Object(config) !== config) {
+    if (notif.type) {
+      Object.assign(notif, notifTypes[notif.type])
+    }
 
-      positionClass[pos] = `q-notifications__list q-notifications__list--${vert} fixed column no-wrap ${classes}`
-    })
-  },
+    config = { message: config }
+  }
 
-  methods: {
-    add (config, originalApi) {
-      if (!config) {
-        return logError('parameter required')
-      }
+  Object.assign(notif, notifTypes[config.type || notif.type], config)
 
-      let Api
-      const notif = { textColor: 'white' }
+  if (typeof notif.icon === 'function') {
+    notif.icon = notif.icon(vm.$q)
+  }
 
-      if (config.ignoreDefaults !== true) {
-        Object.assign(notif, defaults)
-      }
+  if (!notif.spinner) {
+    notif.spinner = false
+  }
+  else if (notif.spinner === true) {
+    notif.spinner = QSpinner
+  }
 
-      if (Object(config) !== config) {
-        if (notif.type) {
-          Object.assign(notif, notifTypes[notif.type])
-        }
+  notif.meta = {
+    hasMedia: Boolean(notif.spinner !== false || notif.icon || notif.avatar),
+    hasText: hasContent(notif.message) || hasContent(notif.caption)
+  }
 
-        config = { message: config }
-      }
+  if (notif.position) {
+    if (positionList.includes(notif.position) === false) {
+      return logError('wrong position', config)
+    }
+  }
+  else {
+    notif.position = 'bottom'
+  }
 
-      Object.assign(notif, notifTypes[config.type || notif.type], config)
+  if (notif.timeout === void 0) {
+    notif.timeout = 5000
+  }
+  else {
+    const t = parseInt(notif.timeout, 10)
+    if (isNaN(t) || t < 0) {
+      return logError('wrong timeout', config)
+    }
+    notif.timeout = t
+  }
 
-      if (typeof notif.icon === 'function') {
-        notif.icon = notif.icon.call(this)
-      }
+  if (notif.timeout === 0) {
+    notif.progress = false
+  }
+  else if (notif.progress === true) {
+    notif.meta.progressClass = 'q-notification__progress' + (
+      notif.progressClass
+        ? ` ${notif.progressClass}`
+        : ''
+    )
+
+    notif.meta.progressStyle = {
+      animationDuration: `${notif.timeout + 1000}ms`
+    }
+  }
 
-      if (notif.spinner === void 0) {
-        notif.spinner = false
-      }
-      else if (notif.spinner === true) {
-        notif.spinner = QSpinner
-      }
+  const actions = (
+    Array.isArray(config.actions) === true
+      ? config.actions
+      : []
+  ).concat(
+    config.ignoreDefaults !== true && Array.isArray(defaults.actions) === true
+      ? defaults.actions
+      : []
+  ).concat(
+    notifTypes[config.type] !== void 0 && Array.isArray(notifTypes[config.type].actions) === true
+      ? notifTypes[config.type].actions
+      : []
+  )
+
+  const { closeBtn } = notif
+  closeBtn && actions.push({
+    label: typeof closeBtn === 'string'
+      ? closeBtn
+      : this.$q.lang.label.close
+  })
+
+  notif.actions = actions.map(({ handler, noDismiss, style, class: klass, attrs, ...props }) => ({
+    staticClass: klass,
+    style,
+    props: { flat: true, ...props },
+    attrs,
+    on: {
+      click: typeof handler === 'function'
+        ? () => {
+          handler()
+          noDismiss !== true && dismiss()
+        }
+        : () => { dismiss() }
+    }
+  }))
 
-      notif.meta = {
-        hasMedia: Boolean(notif.spinner !== false || notif.icon || notif.avatar)
-      }
+  if (notif.multiLine === void 0) {
+    notif.multiLine = notif.actions.length > 1
+  }
 
-      if (notif.position) {
-        if (positionList.includes(notif.position) === false) {
-          return logError('wrong position', config)
-        }
-      }
-      else {
-        notif.position = 'bottom'
-      }
+  Object.assign(notif.meta, {
+    staticClass: 'q-notification row items-stretch' +
+      ` q-notification--${notif.multiLine === true ? 'multi-line' : 'standard'}` +
+      (notif.color !== void 0 ? ` bg-${notif.color}` : '') +
+      (notif.textColor !== void 0 ? ` text-${notif.textColor}` : '') +
+      (notif.classes !== void 0 ? ` ${notif.classes}` : ''),
 
-      if (notif.timeout === void 0) {
-        notif.timeout = 5000
-      }
-      else {
-        const t = parseInt(notif.timeout, 10)
-        if (isNaN(t) || t < 0) {
-          return logError('wrong timeout', config)
-        }
-        notif.timeout = t
-      }
+    wrapperClass: 'q-notification__wrapper col relative-position border-radius-inherit ' +
+      (notif.multiLine === true ? 'column no-wrap justify-center' : 'row items-center'),
 
-      if (notif.timeout === 0) {
-        notif.progress = false
-      }
-      else if (notif.progress === true) {
-        notif.meta.progressStyle = {
-          animationDuration: `${notif.timeout + 1000}ms`
-        }
-      }
+    contentClass: 'q-notification__content row items-center' +
+      (notif.multiLine === true ? '' : ' col'),
 
-      const actions = (
-        Array.isArray(config.actions) === true
-          ? config.actions
-          : []
-      ).concat(
-        config.ignoreDefaults !== true && Array.isArray(defaults.actions) === true
-          ? defaults.actions
-          : []
-      ).concat(
-        notifTypes[config.type] !== void 0 && Array.isArray(notifTypes[config.type].actions) === true
-          ? notifTypes[config.type].actions
-          : []
-      )
-
-      notif.closeBtn && actions.push({
-        label: typeof notif.closeBtn === 'string'
-          ? notif.closeBtn
-          : this.$q.lang.label.close
-      })
+    leftClass: notif.meta.hasText === true ? 'additional' : 'single',
 
-      notif.actions = actions.map(({ handler, noDismiss, style, class: klass, attrs, ...props }) => ({
-        staticClass: klass,
-        style,
-        props: { flat: true, ...props },
-        attrs,
-        on: {
-          click: typeof handler === 'function'
-            ? () => {
-              handler()
-              noDismiss !== true && dismiss()
-            }
-            : () => { dismiss() }
-        }
-      }))
+    attrs: {
+      role: 'alert',
+      ...notif.attrs
+    }
+  })
 
-      if (notif.multiLine === void 0) {
-        notif.multiLine = notif.actions.length > 1
-      }
+  if (notif.group === false) {
+    notif.group = void 0
+    notif.meta.group = void 0
+  }
+  else {
+    if (notif.group === void 0 || notif.group === true) {
+      // do not replace notifications with different buttons
+      notif.group = [
+        notif.message,
+        notif.caption,
+        notif.multiline
+      ].concat(
+        notif.actions.map(({ props }) => `${props.label}*${props.icon}`)
+      ).join('|')
+    }
 
-      Object.assign(notif.meta, {
-        staticClass: `q-notification row items-stretch` +
-          ` q-notification--${notif.multiLine === true ? 'multi-line' : 'standard'}` +
-          (notif.color !== void 0 ? ` bg-${notif.color}` : '') +
-          (notif.textColor !== void 0 ? ` text-${notif.textColor}` : '') +
-          (notif.classes !== void 0 ? ` ${notif.classes}` : ''),
+    notif.meta.group = notif.group + '|' + notif.position
+  }
 
-        wrapperClass: 'q-notification__wrapper col relative-position border-radius-inherit ' +
-          (notif.multiLine === true ? 'column no-wrap justify-center' : 'row items-center'),
+  if (notif.actions.length === 0) {
+    notif.actions = void 0
+  }
+  else {
+    notif.meta.actionsClass = 'q-notification__actions row items-center ' +
+      (notif.multiLine === true ? 'justify-end' : 'col-auto') +
+      (notif.meta.hasMedia === true ? ' q-notification__actions--with-media' : '')
+  }
 
-        contentClass: 'q-notification__content row items-center' +
-          (notif.multiLine === true ? '' : ' col'),
+  if (originalApi !== void 0) {
+    // reset timeout if any
+    clearTimeout(originalApi.notif.meta.timer)
 
-        attrs: {
-          role: 'alert',
-          ...notif.attrs
-        }
-      })
+    // retain uid
+    notif.meta.uid = originalApi.notif.meta.uid
 
-      if (notif.group === false) {
-        notif.group = void 0
-        notif.meta.group = void 0
+    // replace notif
+    const index = notificationsList[notif.position].indexOf(originalApi.notif)
+    notificationsList[notif.position][index] = notif
+  }
+  else {
+    const original = groups[notif.meta.group]
+
+    // woohoo, it's a new notification
+    if (original === void 0) {
+      notif.meta.uid = uid++
+      notif.meta.badge = 1
+
+      if (['left', 'right', 'center'].indexOf(notif.position) !== -1) {
+        notificationsList[notif.position].splice(
+          Math.floor(notificationsList[notif.position].length / 2),
+          0,
+          notif
+        )
       }
       else {
-        if (notif.group === void 0 || notif.group === true) {
-          // do not replace notifications with different buttons
-          notif.group = [
-            notif.message,
-            notif.caption,
-            notif.multiline
-          ].concat(
-            notif.actions.map(a => `${a.props.label}*${a.props.icon}`)
-          ).join('|')
-        }
-
-        notif.meta.group = notif.group + '|' + notif.position
+        const action = notif.position.indexOf('top') > -1 ? 'unshift' : 'push'
+        notificationsList[notif.position][action](notif)
       }
 
-      if (notif.actions.length === 0) {
-        notif.actions = void 0
+      if (notif.group !== void 0) {
+        groups[notif.meta.group] = notif
+      }
+    }
+    // ok, so it's NOT a new one
+    else {
+      // reset timeout if any
+      clearTimeout(original.meta.timer)
+
+      if (notif.badgePosition !== void 0) {
+        if (badgePositions.includes(notif.badgePosition) === false) {
+          return logError('wrong badgePosition', config)
+        }
       }
       else {
-        notif.meta.actionsClass = 'q-notification__actions row items-center ' +
-          (notif.multiLine === true ? 'justify-end' : 'col-auto') +
-          (notif.meta.hasMedia === true ? ' q-notification__actions--with-media' : '')
+        notif.badgePosition = `top-${notif.position.indexOf('left') > -1 ? 'right' : 'left'}`
       }
 
-      if (originalApi !== void 0) {
-        // reset timeout if any
-        clearTimeout(originalApi.notif.meta.timer)
+      notif.meta.uid = original.meta.uid
+      notif.meta.badge = original.meta.badge + 1
+      notif.meta.badgeClass = `q-notification__badge q-notification__badge--${notif.badgePosition}` +
+        (notif.badgeColor !== void 0 ? ` bg-${notif.badgeColor}` : '') +
+        (notif.badgeTextColor !== void 0 ? ` text-${notif.badgeTextColor}` : '') +
+        (notif.badgeClass ? ` ${notif.badgeClass}` : '')
 
-        // retain uid
-        notif.meta.uid = originalApi.notif.meta.uid
+      const index = notificationsList[notif.position].indexOf(original)
+      notificationsList[notif.position][index] = groups[notif.meta.group] = notif
+    }
+  }
 
-        // replace notif
-        const index = this.notifs[notif.position].indexOf(originalApi.notif)
-        this.notifs[notif.position][index] = notif
-      }
-      else {
-        const original = groups[notif.meta.group]
-
-        // woohoo, it's a new notification
-        if (original === void 0) {
-          notif.meta.uid = uid++
-          notif.meta.badge = 1
-
-          if (['left', 'right', 'center'].indexOf(notif.position) !== -1) {
-            this.notifs[notif.position].splice(
-              Math.floor(this.notifs[notif.position].length / 2),
-              0,
-              notif
-            )
-          }
-          else {
-            const action = notif.position.indexOf('top') > -1 ? 'unshift' : 'push'
-            this.notifs[notif.position][action](notif)
-          }
+  const dismiss = () => {
+    removeNotification(notif, vm)
+    Api = void 0
+  }
 
-          if (notif.group !== void 0) {
-            groups[notif.meta.group] = notif
-          }
-        }
-        // ok, so it's NOT a new one
-        else {
-          // reset timeout if any
-          clearTimeout(original.meta.timer)
-
-          if (notif.badgePosition !== void 0) {
-            if (badgePositions.includes(notif.badgePosition) === false) {
-              return logError('wrong badgePosition', config)
-            }
-          }
-          else {
-            notif.badgePosition = `top-${notif.position.indexOf('left') > -1 ? 'right' : 'left'}`
-          }
+  vm.$forceUpdate()
 
-          notif.meta.uid = original.meta.uid
-          notif.meta.badge = original.meta.badge + 1
-          notif.meta.badgeStaticClass = `q-notification__badge q-notification__badge--${notif.badgePosition}` +
-            (notif.badgeColor !== void 0 ? ` bg-${notif.badgeColor}` : '') +
-            (notif.badgeTextColor !== void 0 ? ` text-${notif.badgeTextColor}` : '')
+  if (notif.timeout > 0) {
+    notif.meta.timer = setTimeout(() => {
+      dismiss()
+    }, notif.timeout + /* show duration */ 1000)
+  }
 
-          const index = this.notifs[notif.position].indexOf(original)
-          this.notifs[notif.position][index] = groups[notif.meta.group] = notif
-        }
+  // only non-groupable can be updated
+  if (notif.group !== void 0) {
+    return props => {
+      if (props !== void 0) {
+        logError('trying to update a grouped one which is forbidden', config)
       }
-
-      const dismiss = () => {
-        this.remove(notif)
-        Api = void 0
+      else {
+        dismiss()
       }
+    }
+  }
 
-      this.$forceUpdate()
+  Api = {
+    dismiss,
+    config,
+    notif
+  }
 
-      if (notif.timeout > 0) {
-        notif.meta.timer = setTimeout(() => {
-          dismiss()
-        }, notif.timeout + /* show duration */ 1000)
-      }
+  if (originalApi !== void 0) {
+    Object.assign(originalApi, Api)
+    return
+  }
 
-      // only non-groupable can be updated
-      if (notif.group !== void 0) {
-        return props => {
-          if (props !== void 0) {
-            logError('trying to update a grouped one which is forbidden', config)
-          }
-          else {
-            dismiss()
-          }
-        }
+  return props => {
+    // if notification wasn't previously dismissed
+    if (Api !== void 0) {
+      // if no params, then we must dismiss the notification
+      if (props === void 0) {
+        Api.dismiss()
       }
+      // otherwise we're updating it
+      else {
+        const newNotif = Object.assign({}, Api.config, props, {
+          group: false,
+          position: notif.position
+        })
 
-      Api = {
-        dismiss,
-        config,
-        notif
+        addNotification(newNotif, vm, Api)
       }
+    }
+  }
+}
 
-      if (originalApi !== void 0) {
-        Object.assign(originalApi, Api)
-        return
-      }
+function removeNotification (notif, vm) {
+  clearTimeout(notif.meta.timer)
 
-      return props => {
-        // if notification wasn't previously dismissed
-        if (Api !== void 0) {
-          // if no params, then we must dismiss the notification
-          if (props === void 0) {
-            Api.dismiss()
-          }
-          // otherwise we're updating it
-          else {
-            const newNotif = Object.assign({}, Api.config, props, {
-              group: false,
-              position: notif.position
-            })
+  const index = notificationsList[notif.position].indexOf(notif)
+  if (index !== -1) {
+    if (notif.group !== void 0) {
+      delete groups[notif.meta.group]
+    }
 
-            this.add(newNotif, Api)
-          }
-        }
-      }
-    },
+    const el = vm.$refs['' + notif.meta.uid]
 
-    remove (notif) {
-      clearTimeout(notif.meta.timer)
+    if (el) {
+      const { width, height } = getComputedStyle(el)
 
-      const index = this.notifs[notif.position].indexOf(notif)
-      if (index !== -1) {
-        if (notif.group !== void 0) {
-          delete groups[notif.meta.group]
-        }
+      el.style.left = `${el.offsetLeft}px`
+      el.style.width = width
+      el.style.height = height
+    }
 
-        const el = this.$refs[`notif_${notif.meta.uid}`]
+    notificationsList[notif.position].splice(index, 1)
 
-        if (el) {
-          const { width, height } = getComputedStyle(el)
+    vm.$forceUpdate()
 
-          el.style.left = `${el.offsetLeft}px`
-          el.style.width = width
-          el.style.height = height
-        }
+    if (typeof notif.onDismiss === 'function') {
+      notif.onDismiss()
+    }
+  }
+}
 
-        this.notifs[notif.position].splice(index, 1)
+function hasContent (str) {
+  return str !== void 0 &&
+    str !== null &&
+    emptyRE.test(str) !== true
+}
 
-        this.$forceUpdate()
+function logError (error, config) {
+  console.error(`Notify: ${error}`, config)
+  return false
+}
 
-        if (typeof notif.onDismiss === 'function') {
-          notif.onDismiss()
-        }
-      }
-    }
+const Notifications = {
+  name: 'QNotifications',
+
+  // hide App from Vue devtools
+  devtools: { hide: true },
+
+  beforeCreate () {
+    // prevent error in Vue devtools
+    this._routerRoot === void 0 && (this._routerRoot = {})
   },
 
   render (h) {
@@ -388,43 +399,22 @@ const Notifications = {
           name: `q-notification--${pos}`,
           mode: 'out-in'
         }
-      }, this.notifs[pos].map(notif => {
-        let msgChild
-
-        const meta = notif.meta
-        const msgData = { staticClass: 'q-notification__message col' }
-
-        if (notif.html === true) {
-          msgData.domProps = {
-            innerHTML: notif.caption
-              ? `<div>${notif.message}</div><div class="q-notification__caption">${notif.caption}</div>`
-              : notif.message
-          }
-        }
-        else {
-          const msgNode = [ notif.message ]
-          msgChild = notif.caption
-            ? [
-              h('div', msgNode),
-              h('div', { staticClass: 'q-notification__caption' }, [ notif.caption ])
-            ]
-            : msgNode
-        }
-
+      }, notificationsList[pos].map(notif => {
+        const { meta } = notif
         const mainChild = []
 
         if (meta.hasMedia === true) {
           if (notif.spinner !== false) {
             mainChild.push(
               h(notif.spinner, {
-                staticClass: 'q-notification__spinner'
+                staticClass: 'q-notification__spinner q-notification__spinner--' + meta.leftClass
               })
             )
           }
           else if (notif.icon) {
             mainChild.push(
               h(QIcon, {
-                staticClass: 'q-notification__icon',
+                staticClass: 'q-notification__icon q-notification__icon--' + meta.leftClass,
                 attrs: { role: 'img' },
                 props: { name: notif.icon }
               })
@@ -432,16 +422,38 @@ const Notifications = {
           }
           else if (notif.avatar) {
             mainChild.push(
-              h(QAvatar, { staticClass: 'q-notification__avatar' }, [
+              h(QAvatar, { staticClass: 'q-notification__avatar q-notification__avatar--' + meta.leftClass }, [
                 h('img', { attrs: { src: notif.avatar, 'aria-hidden': 'true' } })
               ])
             )
           }
         }
 
-        mainChild.push(
-          h('div', msgData, msgChild)
-        )
+        if (meta.hasText === true) {
+          let msgChild
+          const msgData = { staticClass: 'q-notification__message col' }
+
+          if (notif.html === true) {
+            msgData.domProps = {
+              innerHTML: notif.caption
+                ? `<div>${notif.message}</div><div class="q-notification__caption">${notif.caption}</div>`
+                : notif.message
+            }
+          }
+          else {
+            const msgNode = [ notif.message ]
+            msgChild = notif.caption
+              ? [
+                h('div', msgNode),
+                h('div', { staticClass: 'q-notification__caption' }, [notif.caption])
+              ]
+              : msgNode
+          }
+
+          mainChild.push(
+            h('div', msgData, msgChild)
+          )
+        }
 
         const child = [
           h('div', { staticClass: meta.contentClass }, mainChild)
@@ -450,9 +462,8 @@ const Notifications = {
         notif.progress === true && child.push(
           h('div', {
             key: `${meta.uid}|p|${meta.badge}`,
-            staticClass: 'q-notification__progress',
-            style: meta.progressStyle,
-            class: notif.progressClass
+            staticClass: meta.progressClass,
+            style: meta.progressStyle
           })
         )
 
@@ -465,14 +476,13 @@ const Notifications = {
         meta.badge > 1 && child.push(
           h('div', {
             key: `${meta.uid}|${meta.badge}`,
-            staticClass: meta.badgeStaticClass,
-            style: notif.badgeStyle,
-            class: notif.badgeClass
+            staticClass: meta.badgeClass,
+            style: notif.badgeStyle
           }, [ meta.badge ])
         )
 
         return h('div', {
-          ref: `notif_${meta.uid}`,
+          ref: '' + meta.uid,
           key: meta.uid,
           staticClass: meta.staticClass,
           attrs: meta.attrs
@@ -485,21 +495,18 @@ const Notifications = {
 
   mounted () {
     if (this.$q.fullscreen !== void 0 && this.$q.fullscreen.isCapable === true) {
-      const append = isFullscreen => {
-        const newParent = getBodyFullscreenElement(
-          isFullscreen,
-          this.$q.fullscreen.activeEl
-        )
+      const append = () => {
+        const newParent = getBodyFullscreenElement(this.$q.fullscreen.activeEl)
 
         if (this.$el.parentElement !== newParent) {
           newParent.appendChild(this.$el)
         }
       }
 
-      this.unwatchFullscreen = this.$watch('$q.fullscreen.isActive', append)
+      this.unwatchFullscreen = this.$watch('$q.fullscreen.activeEl', debounce(append, 50))
 
       if (this.$q.fullscreen.isActive === true) {
-        append(true)
+        append()
       }
     }
   },
@@ -510,36 +517,47 @@ const Notifications = {
 }
 
 export default {
-  create (opts) {
-    if (isSSR === true) { return noop }
-    return this.__vm.add(opts)
-  },
   setDefaults (opts) {
-    opts === Object(opts) && Object.assign(defaults, opts)
+    if (isSSR !== true && opts === Object(opts)) {
+      Object.assign(defaults, opts)
+    }
   },
+
   registerType (typeName, typeOpts) {
     if (isSSR !== true && typeOpts === Object(typeOpts)) {
       notifTypes[typeName] = typeOpts
     }
   },
 
-  install ({ cfg, $q }) {
-    if (isSSR === true) {
-      $q.notify = noop
-      $q.notify.setDefaults = noop
-      return
-    }
-
-    this.setDefaults(cfg.notify)
+  install ({ $q }) {
+    $q.notify = this.create = isSSR === true
+      ? noop
+      : opts => addNotification(opts, vm)
 
-    $q.notify = this.create.bind(this)
     $q.notify.setDefaults = this.setDefaults
     $q.notify.registerType = this.registerType
 
-    const node = document.createElement('div')
-    document.body.appendChild(node)
+    if ($q.config.notify !== void 0) {
+      this.setDefaults($q.config.notify)
+    }
+
+    if (isSSR !== true) {
+      positionList.forEach(pos => {
+        notificationsList[pos] = []
+
+        const
+          vert = ['left', 'center', 'right'].includes(pos) === true ? 'center' : (pos.indexOf('top') > -1 ? 'top' : 'bottom'),
+          align = pos.indexOf('left') > -1 ? 'start' : (pos.indexOf('right') > -1 ? 'end' : 'center'),
+          classes = ['left', 'right'].includes(pos) ? `items-${pos === 'left' ? 'start' : 'end'} justify-center` : (pos === 'center' ? 'flex-center' : `items-${align}`)
 
-    this.__vm = new Vue(Notifications)
-    this.__vm.$mount(node)
+        positionClass[pos] = `q-notifications__list q-notifications__list--${vert} fixed column no-wrap ${classes}`
+      })
+
+      const node = document.createElement('div')
+      document.body.appendChild(node)
+
+      vm = new Vue(Notifications)
+      vm.$mount(node)
+    }
   }
 }