quasar 2.3.4 → 2.4.3

package/src/plugins/Notify.js

@@ -10,8 +10,14 @@ import { noop } from '../utils/event.js'
 import { createGlobalNode } from '../utils/private/global-nodes.js'
 import { createChildApp } from '../install-quasar.js'
 
-let uid = 0, addNotification
+let uid = 0
+
 const defaults = {}
+const groups = {}
+const notificationsList = {}
+const positionClass = {}
+const emptyRE = /^\s*$/
+const notifRefs = []
 
 const positionList = [
   'top-left', 'top-right',
@@ -54,342 +60,329 @@ const notifTypes = {
   }
 }
 
-const groups = {}
-const positionClass = {}
-
-function logError (error, config) {
-  console.error(`Notify: ${ error }`, config)
-  return false
-}
-
-function getComponent ($q) {
-  return createComponent({
-    name: 'QNotifications',
-
-    // hide App from Vue devtools
-    devtools: { hide: true },
-
-    setup () {
-      const notificationsList = {}
-      const notifRefs = []
-
-      positionList.forEach(pos => {
-        notificationsList[ pos ] = ref([])
-
-        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 }`)
+function addNotification (config, $q, originalApi) {
+  if (!config) {
+    return logError('parameter required')
+  }
 
-        positionClass[ pos ] = `q-notifications__list q-notifications__list--${ vert } fixed column no-wrap ${ classes }`
-      })
+  let Api
+  const notif = { textColor: 'white' }
 
-      addNotification = (config, originalApi) => {
-        if (!config) {
-          return logError('parameter required')
-        }
+  if (config.ignoreDefaults !== true) {
+    Object.assign(notif, defaults)
+  }
 
-        let Api
-        const notif = { textColor: 'white' }
+  if (Object(config) !== config) {
+    if (notif.type) {
+      Object.assign(notif, notifTypes[ notif.type ])
+    }
 
-        if (config.ignoreDefaults !== true) {
-          Object.assign(notif, defaults)
-        }
+    config = { message: config }
+  }
 
-        if (Object(config) !== config) {
-          if (notif.type) {
-            Object.assign(notif, notifTypes[ notif.type ])
-          }
+  Object.assign(notif, notifTypes[ config.type || notif.type ], config)
 
-          config = { message: config }
-        }
+  if (typeof notif.icon === 'function') {
+    notif.icon = notif.icon($q)
+  }
 
-        Object.assign(notif, notifTypes[ config.type || notif.type ], config)
+  if (!notif.spinner) {
+    notif.spinner = false
+  }
+  else {
+    if (notif.spinner === true) {
+      notif.spinner = QSpinner
+    }
 
-        if (typeof notif.icon === 'function') {
-          notif.icon = notif.icon($q)
-        }
+    notif.spinner = markRaw(notif.spinner)
+  }
 
-        if (!notif.spinner) {
-          notif.spinner = false
-        }
-        else {
-          if (notif.spinner === true) {
-            notif.spinner = QSpinner
-          }
+  notif.meta = {
+    hasMedia: Boolean(notif.spinner !== false || notif.icon || notif.avatar),
+    hasText: hasContent(notif.message) || hasContent(notif.caption)
+  }
 
-          notif.spinner = markRaw(notif.spinner)
-        }
+  if (notif.position) {
+    if (positionList.includes(notif.position) === false) {
+      return logError('wrong position', config)
+    }
+  }
+  else {
+    notif.position = 'bottom'
+  }
 
-        notif.meta = {
-          hasMedia: Boolean(notif.spinner !== false || notif.icon || notif.avatar),
-          hasText: Boolean(
-            (notif.message !== void 0 && notif.message !== null)
-            || (notif.caption !== void 0 && notif.caption !== null)
-          )
-        }
+  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 (notif.position) {
-          if (positionList.includes(notif.position) === false) {
-            return logError('wrong position', config)
-          }
-        }
-        else {
-          notif.position = 'bottom'
-        }
+  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.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
-        }
+  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
+      : $q.lang.label.close
+  })
 
-        if (notif.timeout === 0) {
-          notif.progress = false
+  notif.actions = actions.map(({ handler, noDismiss, ...item }) => ({
+    flat: true,
+    ...item,
+    onClick: typeof handler === 'function'
+      ? () => {
+          handler()
+          noDismiss !== true && dismiss()
         }
-        else if (notif.progress === true) {
-          notif.meta.progressClass = 'q-notification__progress' + (
-            notif.progressClass
-              ? ` ${ notif.progressClass }`
-              : ''
-          )
+      : () => { dismiss() }
+  }))
 
-          notif.meta.progressStyle = {
-            animationDuration: `${ notif.timeout + 1000 }ms`
-          }
-        }
+  if (notif.multiLine === void 0) {
+    notif.multiLine = notif.actions.length > 1
+  }
 
-        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
-            : []
-        )
+  Object.assign(notif.meta, {
+    class: '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.closeBtn && actions.push({
-          label: typeof notif.closeBtn === 'string'
-            ? notif.closeBtn
-            : $q.lang.label.close
-        })
+    wrapperClass: 'q-notification__wrapper col relative-position border-radius-inherit '
+      + (notif.multiLine === true ? 'column no-wrap justify-center' : 'row items-center'),
 
-        notif.actions = actions.map(({ handler, noDismiss, ...item }) => ({
-          flat: true,
-          ...item,
-          onClick: typeof handler === 'function'
-            ? () => {
-                handler()
-                noDismiss !== true && dismiss()
-              }
-            : () => { dismiss() }
-        }))
+    contentClass: 'q-notification__content row items-center'
+      + (notif.multiLine === true ? '' : ' col'),
 
-        if (notif.multiLine === void 0) {
-          notif.multiLine = notif.actions.length > 1
-        }
+    leftClass: notif.meta.hasText === true ? 'additional' : 'single',
 
-        Object.assign(notif.meta, {
-          class: '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 }` : ''),
+    attrs: {
+      role: 'alert',
+      ...notif.attrs
+    }
+  })
 
-          wrapperClass: 'q-notification__wrapper col relative-position border-radius-inherit '
-            + (notif.multiLine === true ? 'column no-wrap justify-center' : 'row items-center'),
+  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('|')
+    }
 
-          contentClass: 'q-notification__content row items-center'
-            + (notif.multiLine === true ? '' : ' col'),
+    notif.meta.group = notif.group + '|' + notif.position
+  }
 
-          leftClass: notif.meta.hasText === true ? 'additional' : 'single',
+  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' : '')
+  }
 
-          attrs: {
-            role: 'alert',
-            ...notif.attrs
-          }
-        })
+  if (originalApi !== void 0) {
+    // reset timeout if any
+    clearTimeout(originalApi.notif.meta.timer)
 
-        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('|')
-          }
+    // retain uid
+    notif.meta.uid = originalApi.notif.meta.uid
 
-          notif.meta.group = notif.group + '|' + notif.position
-        }
+    // replace notif
+    const index = notificationsList[ notif.position ].value.indexOf(originalApi.notif)
+    notificationsList[ notif.position ].value[ 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 ].value.splice(
+          Math.floor(notificationsList[ notif.position ].value.length / 2),
+          0,
+          notif
+        )
+      }
+      else {
+        const action = notif.position.indexOf('top') > -1 ? 'unshift' : 'push'
+        notificationsList[ notif.position ].value[ action ](notif)
+      }
 
-        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' : '')
+      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' }`
+      }
 
-        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 ].value.indexOf(original)
+      notificationsList[ notif.position ].value[ index ] = groups[ notif.meta.group ] = notif
+    }
+  }
 
-          // replace notif
-          const index = notificationsList[ notif.position ].value.indexOf(originalApi.notif)
-          notificationsList[ notif.position ].value[ 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 ].value.splice(
-                Math.floor(notificationsList[ notif.position ].value.length / 2),
-                0,
-                notif
-              )
-            }
-            else {
-              const action = notif.position.indexOf('top') > -1 ? 'unshift' : 'push'
-              notificationsList[ notif.position ].value[ action ](notif)
-            }
+  const dismiss = () => {
+    removeNotification(notif)
+    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' }`
-            }
+  if (notif.timeout > 0) {
+    notif.meta.timer = setTimeout(() => {
+      dismiss()
+    }, notif.timeout + /* show duration */ 1000)
+  }
 
-            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 }` : '')
+  // 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()
+      }
+    }
+  }
 
-            const index = notificationsList[ notif.position ].value.indexOf(original)
-            notificationsList[ notif.position ].value[ index ] = groups[ notif.meta.group ] = notif
-          }
-        }
+  Api = {
+    dismiss,
+    config,
+    notif
+  }
 
-        const dismiss = () => {
-          remove(notif)
-          Api = void 0
-        }
+  if (originalApi !== void 0) {
+    Object.assign(originalApi, Api)
+    return
+  }
 
-        if (notif.timeout > 0) {
-          notif.meta.timer = setTimeout(() => {
-            dismiss()
-          }, notif.timeout + /* show duration */ 1000)
-        }
+  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
+        })
 
-        // 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()
-            }
-          }
-        }
+        addNotification(newNotif, $q, Api)
+      }
+    }
+  }
+}
 
-        Api = {
-          dismiss,
-          config,
-          notif
-        }
+function removeNotification (notif) {
+  clearTimeout(notif.meta.timer)
 
-        if (originalApi !== void 0) {
-          Object.assign(originalApi, Api)
-          return
-        }
+  const index = notificationsList[ notif.position ].value.indexOf(notif)
+  if (index !== -1) {
+    if (notif.group !== void 0) {
+      delete groups[ notif.meta.group ]
+    }
 
-        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 el = notifRefs[ '' + notif.meta.uid ]
 
-              addNotification(newNotif, Api)
-            }
-          }
-        }
-      }
+    if (el) {
+      const { width, height } = getComputedStyle(el)
 
-      function remove (notif) {
-        clearTimeout(notif.meta.timer)
+      el.style.left = `${ el.offsetLeft }px`
+      el.style.width = width
+      el.style.height = height
+    }
 
-        const index = notificationsList[ notif.position ].value.indexOf(notif)
-        if (index !== -1) {
-          if (notif.group !== void 0) {
-            delete groups[ notif.meta.group ]
-          }
+    notificationsList[ notif.position ].value.splice(index, 1)
 
-          const el = notifRefs[ '' + notif.meta.uid ]
+    if (typeof notif.onDismiss === 'function') {
+      notif.onDismiss()
+    }
+  }
+}
 
-          if (el) {
-            const { width, height } = getComputedStyle(el)
+function hasContent (str) {
+  return str !== void 0
+    && str !== null
+    && emptyRE.test(str) !== true
+}
 
-            el.style.left = `${ el.offsetLeft }px`
-            el.style.width = width
-            el.style.height = height
-          }
+function logError (error, config) {
+  console.error(`Notify: ${ error }`, config)
+  return false
+}
 
-          notificationsList[ notif.position ].value.splice(index, 1)
+function getComponent () {
+  return createComponent({
+    name: 'QNotifications',
 
-          if (typeof notif.onDismiss === 'function') {
-            notif.onDismiss()
-          }
-        }
-      }
+    // hide App from Vue devtools
+    devtools: { hide: true },
 
+    setup () {
       return () => h('div', { class: 'q-notifications' }, positionList.map(pos => {
         return h(TransitionGroup, {
           key: pos,
@@ -489,12 +482,6 @@ function getComponent ($q) {
 }
 
 export default {
-  create (opts) {
-    return __QUASAR_SSR_SERVER__
-      ? noop
-      : addNotification(opts)
-  },
-
   setDefaults (opts) {
     if (__QUASAR_SSR_SERVER__ !== true) {
       opts === Object(opts) && Object.assign(defaults, opts)
@@ -508,7 +495,10 @@ export default {
   },
 
   install ({ $q, parentApp }) {
-    $q.notify = this.create
+    $q.notify = this.create = __QUASAR_SSR_SERVER__
+      ? noop
+      : opts => addNotification(opts, $q)
+
     $q.notify.setDefaults = this.setDefaults
     $q.notify.registerType = this.registerType
 
@@ -517,8 +507,19 @@ export default {
     }
 
     if (__QUASAR_SSR_SERVER__ !== true && this.__installed !== true) {
+      positionList.forEach(pos => {
+        notificationsList[ pos ] = ref([])
+
+        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 }`)
+
+        positionClass[ pos ] = `q-notifications__list q-notifications__list--${ vert } fixed column no-wrap ${ classes }`
+      })
+
       const el = createGlobalNode('q-notify')
-      createChildApp(getComponent($q), parentApp).mount(el)
+      createChildApp(getComponent(), parentApp).mount(el)
     }
   }
 }