quasar 2.18.6 → 2.19.0

package/src/plugins/notify/Notify.js

@@ -20,18 +20,21 @@ const notificationsList = {}
 const positionClass = {}
 const emptyRE = /^\s*$/
 const notifRefs = []
-const invalidTimeoutValues = [ void 0, null, true, false, '' ]
+const invalidTimeoutValues = [void 0, null, true, false, '']
 
 const positionList = [
-  'top-left', 'top-right',
-  'bottom-left', 'bottom-right',
-  'top', 'bottom', 'left', 'right', 'center'
+  'top-left',
+  'top-right',
+  'bottom-left',
+  'bottom-right',
+  'top',
+  'bottom',
+  'left',
+  'right',
+  'center'
 ]
 
-const badgePositions = [
-  'top-left', 'top-right',
-  'bottom-left', 'bottom-right'
-]
+const badgePositions = ['top-left', 'top-right', 'bottom-left', 'bottom-right']
 
 const notifTypes = {
   positive: {
@@ -63,7 +66,7 @@ const notifTypes = {
   }
 }
 
-function addNotification (config, $q, originalApi) {
+function addNotification(config, $q, originalApi) {
   if (!config) {
     return logError('parameter required')
   }
@@ -77,13 +80,13 @@ function addNotification (config, $q, originalApi) {
 
   if (isObject(config) === false) {
     if (notif.type) {
-      Object.assign(notif, notifTypes[ notif.type ])
+      Object.assign(notif, notifTypes[notif.type])
     }
 
     config = { message: config }
   }
 
-  Object.assign(notif, notifTypes[ config.type || notif.type ], config)
+  Object.assign(notif, notifTypes[config.type || notif.type], config)
 
   if (typeof notif.icon === 'function') {
     notif.icon = notif.icon($q)
@@ -91,8 +94,7 @@ function addNotification (config, $q, originalApi) {
 
   if (!notif.spinner) {
     notif.spinner = false
-  }
-  else {
+  } else {
     if (notif.spinner === true) {
       notif.spinner = QSpinner
     }
@@ -109,15 +111,13 @@ function addNotification (config, $q, originalApi) {
     if (positionList.includes(notif.position) === false) {
       return logError('wrong position', config)
     }
-  }
-  else {
+  } else {
     notif.position = 'bottom'
   }
 
   if (invalidTimeoutValues.includes(notif.timeout) === true) {
     notif.timeout = 5000
-  }
-  else {
+  } else {
     const t = Number(notif.timeout) // we catch exponential notation too with Number() casting
     if (isNaN(t) || t < 0) {
       return logError('wrong timeout', config)
@@ -127,49 +127,47 @@ function addNotification (config, $q, originalApi) {
 
   if (notif.timeout === 0) {
     notif.progress = false
-  }
-  else if (notif.progress === true) {
-    notif.meta.progressClass = 'q-notification__progress' + (
-      notif.progressClass
-        ? ` ${ notif.progressClass }`
-        : ''
-    )
+  } else if (notif.progress === true) {
+    notif.meta.progressClass =
+      'q-notification__progress' +
+      (notif.progressClass ? ` ${notif.progressClass}` : '')
 
     notif.meta.progressStyle = {
-      animationDuration: `${ notif.timeout + 1000 }ms`
+      animationDuration: `${notif.timeout + 1000}ms`
     }
   }
 
-  const actions = (
-    Array.isArray(config.actions) === true
-      ? config.actions
-      : []
-  ).concat(
-    config.ignoreDefaults !== true && Array.isArray(defaults.actions) === true
-      ? defaults.actions
-      : []
-  ).concat(
-    Array.isArray(notifTypes[ config.type ]?.actions) === true
-      ? notifTypes[ config.type ].actions
-      : []
-  )
+  const actions = (Array.isArray(config.actions) === true ? config.actions : [])
+    .concat(
+      config.ignoreDefaults !== true && Array.isArray(defaults.actions) === true
+        ? defaults.actions
+        : []
+    )
+    .concat(
+      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 (closeBtn) {
+    actions.push({
+      label: typeof closeBtn === 'string' ? closeBtn : $q.lang.label.close
+    })
+  }
 
   notif.actions = actions.map(({ handler, noDismiss, ...item }) => ({
     flat: true,
     ...item,
-    onClick: typeof handler === 'function'
-      ? () => {
-          handler()
-          noDismiss !== true && dismiss()
-        }
-      : () => { dismiss() }
+    onClick:
+      typeof handler === 'function'
+        ? () => {
+            handler()
+            if (noDismiss !== true) dismiss()
+          }
+        : () => {
+            dismiss()
+          }
   }))
 
   if (notif.multiLine === void 0) {
@@ -177,17 +175,22 @@ function addNotification (config, $q, originalApi) {
   }
 
   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 }` : ''),
-
-    wrapperClass: 'q-notification__wrapper col relative-position border-radius-inherit '
-      + (notif.multiLine === true ? 'column no-wrap justify-center' : 'row items-center'),
-
-    contentClass: 'q-notification__content row items-center'
-      + (notif.multiLine === true ? '' : ' col'),
+    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}` : ''),
+
+    wrapperClass:
+      'q-notification__wrapper col relative-position border-radius-inherit ' +
+      (notif.multiLine === true
+        ? 'column no-wrap justify-center'
+        : 'row items-center'),
+
+    contentClass:
+      'q-notification__content row items-center' +
+      (notif.multiLine === true ? '' : ' col'),
 
     leftClass: notif.meta.hasText === true ? 'additional' : 'single',
 
@@ -200,17 +203,12 @@ function addNotification (config, $q, originalApi) {
   if (notif.group === false) {
     notif.group = void 0
     notif.meta.group = void 0
-  }
-  else {
+  } 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('|')
+      notif.group = [notif.message, notif.caption, notif.multiline]
+        .concat(notif.actions.map(props => `${props.label}*${props.icon}`))
+        .join('|')
     }
 
     notif.meta.group = notif.group + '|' + notif.position
@@ -218,11 +216,13 @@ function addNotification (config, $q, originalApi) {
 
   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' : '')
+  } 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 (originalApi !== void 0) {
@@ -236,31 +236,31 @@ function addNotification (config, $q, originalApi) {
     notif.meta.uid = originalApi.notif.meta.uid
 
     // replace notif
-    const index = notificationsList[ notif.position ].value.indexOf(originalApi.notif)
-    notificationsList[ notif.position ].value[ index ] = notif
-  }
-  else {
-    const original = groups[ notif.meta.group ]
+    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),
+      if (['left', 'right', 'center'].indexOf(notif.position) !== -1) {
+        notificationsList[notif.position].value.splice(
+          Math.floor(notificationsList[notif.position].value.length / 2),
           0,
           notif
         )
-      }
-      else {
+      } else {
         const action = notif.position.indexOf('top') !== -1 ? 'unshift' : 'push'
-        notificationsList[ notif.position ].value[ action ](notif)
+        notificationsList[notif.position].value[action](notif)
       }
 
       if (notif.group !== void 0) {
-        groups[ notif.meta.group ] = notif
+        groups[notif.meta.group] = notif
       }
     }
     // ok, so it's NOT a new one
@@ -275,20 +275,24 @@ function addNotification (config, $q, originalApi) {
         if (badgePositions.includes(notif.badgePosition) === false) {
           return logError('wrong badgePosition', config)
         }
-      }
-      else {
-        notif.badgePosition = `top-${ notif.position.indexOf('left') !== -1 ? 'right' : 'left' }`
+      } else {
+        notif.badgePosition = `top-${notif.position.indexOf('left') !== -1 ? 'right' : 'left'}`
       }
 
       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 }` : '')
-
-      const index = notificationsList[ notif.position ].value.indexOf(original)
-      notificationsList[ notif.position ].value[ index ] = groups[ notif.meta.group ] = notif
+      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}` : '')
+
+      const index = notificationsList[notif.position].value.indexOf(original)
+      notificationsList[notif.position].value[index] = groups[
+        notif.meta.group
+      ] = notif
     }
   }
 
@@ -309,8 +313,7 @@ function addNotification (config, $q, originalApi) {
     return props => {
       if (props !== void 0) {
         logError('trying to update a grouped one which is forbidden', config)
-      }
-      else {
+      } else {
         dismiss()
       }
     }
@@ -347,29 +350,29 @@ function addNotification (config, $q, originalApi) {
   }
 }
 
-function removeNotification (notif) {
+function removeNotification(notif) {
   if (notif.meta.timer) {
     clearTimeout(notif.meta.timer)
     notif.meta.timer = void 0
   }
 
-  const index = notificationsList[ notif.position ].value.indexOf(notif)
+  const index = notificationsList[notif.position].value.indexOf(notif)
   if (index !== -1) {
     if (notif.group !== void 0) {
-      delete groups[ notif.meta.group ]
+      delete groups[notif.meta.group]
     }
 
-    const el = notifRefs[ '' + notif.meta.uid ]
+    const el = notifRefs[String(notif.meta.uid)]
 
     if (el) {
       const { width, height } = getComputedStyle(el)
 
-      el.style.left = `${ el.offsetLeft }px`
+      el.style.left = `${el.offsetLeft}px`
       el.style.width = width
       el.style.height = height
     }
 
-    notificationsList[ notif.position ].value.splice(index, 1)
+    notificationsList[notif.position].value.splice(index, 1)
 
     if (typeof notif.onDismiss === 'function') {
       notif.onDismiss()
@@ -377,143 +380,180 @@ function removeNotification (notif) {
   }
 }
 
-function hasContent (str) {
-  return str !== void 0
-    && str !== null
-    && emptyRE.test(str) !== true
+function hasContent(str) {
+  return str !== void 0 && str !== null && emptyRE.test(str) !== true
 }
 
-function logError (error, config) {
-  console.error(`Notify: ${ error }`, config)
+function logError(error, config) {
+  console.error(`Notify: ${error}`, config)
   return false
 }
 
-function getComponent () {
+function getComponent() {
   return createComponent({
     name: 'QNotifications',
 
     // hide App from Vue devtools
     devtools: { hide: true },
 
-    setup () {
-      return () => h('div', { class: 'q-notifications' }, positionList.map(pos => {
-        return h(TransitionGroup, {
-          key: pos,
-          class: positionClass[ pos ],
-          tag: 'div',
-          name: `q-notification--${ pos }`
-        }, () => notificationsList[ pos ].value.map(notif => {
-          const meta = notif.meta
-          const mainChild = []
-
-          if (meta.hasMedia === true) {
-            if (notif.spinner !== false) {
-              mainChild.push(
-                h(notif.spinner, {
-                  class: 'q-notification__spinner q-notification__spinner--' + meta.leftClass,
-                  color: notif.spinnerColor,
-                  size: notif.spinnerSize
-                })
-              )
-            }
-            else if (notif.icon) {
-              mainChild.push(
-                h(QIcon, {
-                  class: 'q-notification__icon q-notification__icon--' + meta.leftClass,
-                  name: notif.icon,
-                  color: notif.iconColor,
-                  size: notif.iconSize,
-                  role: 'img'
-                })
-              )
-            }
-            else if (notif.avatar) {
-              mainChild.push(
-                h(QAvatar, {
-                  class: 'q-notification__avatar q-notification__avatar--' + meta.leftClass
-                }, () => h('img', { src: notif.avatar, 'aria-hidden': 'true' }))
-              )
-            }
-          }
-
-          if (meta.hasText === true) {
-            let msgChild
-            const msgData = { class: 'q-notification__message col' }
-
-            if (notif.html === true) {
-              msgData.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', { class: 'q-notification__caption' }, [ notif.caption ])
+    setup() {
+      return () =>
+        h(
+          'div',
+          { class: 'q-notifications' },
+          positionList.map(pos =>
+            h(
+              TransitionGroup,
+              {
+                key: pos,
+                class: positionClass[pos],
+                tag: 'div',
+                name: `q-notification--${pos}`
+              },
+              () =>
+                notificationsList[pos].value.map(notif => {
+                  const meta = notif.meta
+                  const mainChild = []
+
+                  if (meta.hasMedia === true) {
+                    if (notif.spinner !== false) {
+                      mainChild.push(
+                        h(notif.spinner, {
+                          class:
+                            'q-notification__spinner q-notification__spinner--' +
+                            meta.leftClass,
+                          color: notif.spinnerColor,
+                          size: notif.spinnerSize
+                        })
+                      )
+                    } else if (notif.icon) {
+                      mainChild.push(
+                        h(QIcon, {
+                          class:
+                            'q-notification__icon q-notification__icon--' +
+                            meta.leftClass,
+                          name: notif.icon,
+                          color: notif.iconColor,
+                          size: notif.iconSize,
+                          role: 'img'
+                        })
+                      )
+                    } else if (notif.avatar) {
+                      mainChild.push(
+                        h(
+                          QAvatar,
+                          {
+                            class:
+                              'q-notification__avatar q-notification__avatar--' +
+                              meta.leftClass
+                          },
+                          () =>
+                            h('img', {
+                              src: notif.avatar,
+                              'aria-hidden': 'true'
+                            })
+                        )
+                      )
+                    }
+                  }
+
+                  if (meta.hasText === true) {
+                    let msgChild
+                    const msgData = { class: 'q-notification__message col' }
+
+                    if (notif.html === true) {
+                      msgData.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', { class: 'q-notification__caption' }, [
+                              notif.caption
+                            ])
+                          ]
+                        : msgNode
+                    }
+
+                    mainChild.push(h('div', msgData, msgChild))
+                  }
+
+                  const child = [
+                    h('div', { class: meta.contentClass }, mainChild)
                   ]
-                : msgNode
-            }
 
-            mainChild.push(
-              h('div', msgData, msgChild)
+                  if (notif.progress === true) {
+                    child.push(
+                      h('div', {
+                        key: `${meta.uid}|p|${meta.badge}`,
+                        class: meta.progressClass,
+                        style: meta.progressStyle
+                      })
+                    )
+                  }
+
+                  if (notif.actions !== void 0) {
+                    child.push(
+                      h(
+                        'div',
+                        {
+                          class: meta.actionsClass
+                        },
+                        notif.actions.map(props => h(QBtn, props))
+                      )
+                    )
+                  }
+
+                  if (meta.badge > 1) {
+                    child.push(
+                      h(
+                        'div',
+                        {
+                          key: `${meta.uid}|${meta.badge}`,
+                          class: notif.meta.badgeClass,
+                          style: notif.badgeStyle
+                        },
+                        [meta.badge]
+                      )
+                    )
+                  }
+
+                  return h(
+                    'div',
+                    {
+                      ref: el => {
+                        notifRefs[String(meta.uid)] = el
+                      },
+                      key: meta.uid,
+                      class: meta.class,
+                      ...meta.attrs
+                    },
+                    [h('div', { class: meta.wrapperClass }, child)]
+                  )
+                })
             )
-          }
-
-          const child = [
-            h('div', { class: meta.contentClass }, mainChild)
-          ]
-
-          notif.progress === true && child.push(
-            h('div', {
-              key: `${ meta.uid }|p|${ meta.badge }`,
-              class: meta.progressClass,
-              style: meta.progressStyle
-            })
-          )
-
-          notif.actions !== void 0 && child.push(
-            h('div', {
-              class: meta.actionsClass
-            }, notif.actions.map(props => h(QBtn, props)))
-          )
-
-          meta.badge > 1 && child.push(
-            h('div', {
-              key: `${ meta.uid }|${ meta.badge }`,
-              class: notif.meta.badgeClass,
-              style: notif.badgeStyle
-            }, [ meta.badge ])
           )
-
-          return h('div', {
-            ref: el => { notifRefs[ '' + meta.uid ] = el },
-            key: meta.uid,
-            class: meta.class,
-            ...meta.attrs
-          }, [
-            h('div', { class: meta.wrapperClass }, child)
-          ])
-        }))
-      }))
+        )
     }
   })
 }
 
 export default {
-  setDefaults (opts) {
+  setDefaults(opts) {
     if (__QUASAR_SSR_SERVER__ !== true) {
-      isObject(opts) === true && Object.assign(defaults, opts)
+      if (isObject(opts) === true) Object.assign(defaults, opts)
     }
   },
 
-  registerType (typeName, typeOpts) {
+  registerType(typeName, typeOpts) {
     if (__QUASAR_SSR_SERVER__ !== true && isObject(typeOpts) === true) {
-      notifTypes[ typeName ] = typeOpts
+      notifTypes[typeName] = typeOpts
     }
   },
 
-  install ({ $q, parentApp }) {
+  install({ $q, parentApp }) {
     $q.notify = this.create = __QUASAR_SSR_SERVER__
       ? noop
       : opts => addNotification(opts, $q)
@@ -527,14 +567,28 @@ 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 }`
+        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')