quasar 2.7.7 → 2.8.1

package/src/plugins/Loading.js

@@ -5,16 +5,18 @@ import QSpinner from '../components/spinner/QSpinner.js'
 import defineReactivePlugin from '../utils/private/define-reactive-plugin.js'
 import { createGlobalNode, removeGlobalNode } from '../utils/private/global-nodes.js'
 import preventScroll from '../utils/prevent-scroll.js'
-import { isObject } from '../utils/private/is.js'
+import { isObject } from '../utils/is.js'
 
 let
   app,
   vm,
   uid = 0,
   timeout,
-  props = {}
+  props = {},
+  activeGroups = {}
 
 const originalDefaults = {
+  group: '__default_quasar_group__',
   delay: 0,
   message: false,
   html: false,
@@ -29,102 +31,149 @@ const originalDefaults = {
 
 const defaults = { ...originalDefaults }
 
+function registerProps (opts) {
+  if (opts && opts.group !== void 0 && activeGroups[ opts.group ] !== void 0) {
+    return Object.assign(activeGroups[ opts.group ], opts)
+  }
+
+  const newProps = isObject(opts) === true && opts.ignoreDefaults === true
+    ? { ...originalDefaults, ...opts }
+    : { ...defaults, ...opts }
+
+  activeGroups[ newProps.group ] = newProps
+  return newProps
+}
+
 const Plugin = defineReactivePlugin({
   isActive: false
 }, {
   show (opts) {
     if (__QUASAR_SSR_SERVER__) { return }
 
-    props = isObject(opts) === true && opts.ignoreDefaults === true
-      ? { ...originalDefaults, ...opts }
-      : { ...defaults, ...opts }
+    props = registerProps(opts)
+    const { group } = props
 
     Plugin.isActive = true
 
     if (app !== void 0) {
       props.uid = uid
       vm.$forceUpdate()
-      return
     }
+    else {
+      props.uid = ++uid
+      clearTimeout(timeout)
 
-    props.uid = ++uid
-    clearTimeout(timeout)
-
-    timeout = setTimeout(() => {
-      timeout = void 0
-
-      const el = createGlobalNode('q-loading')
-
-      app = createApp({
-        name: 'QLoading',
-
-        setup () {
-          onMounted(() => {
-            preventScroll(true)
-          })
+      timeout = setTimeout(() => {
+        timeout = void 0
 
-          function onAfterLeave () {
-            // might be called to finalize
-            // previous leave, even if it was cancelled
-            if (Plugin.isActive !== true && app !== void 0) {
-              preventScroll(false)
-              app.unmount(el)
-              removeGlobalNode(el)
-              app = void 0
-              vm = void 0
+        const el = createGlobalNode('q-loading')
+
+        app = createApp({
+          name: 'QLoading',
+
+          setup () {
+            onMounted(() => {
+              preventScroll(true)
+            })
+
+            function onAfterLeave () {
+              // might be called to finalize
+              // previous leave, even if it was cancelled
+              if (Plugin.isActive !== true && app !== void 0) {
+                preventScroll(false)
+                app.unmount(el)
+                removeGlobalNode(el)
+                app = void 0
+                vm = void 0
+              }
             }
-          }
 
-          function getContent () {
-            if (Plugin.isActive !== true) {
-              return null
+            function getContent () {
+              if (Plugin.isActive !== true) {
+                return null
+              }
+
+              const content = [
+                h(props.spinner, {
+                  class: 'q-loading__spinner',
+                  color: props.spinnerColor,
+                  size: props.spinnerSize
+                })
+              ]
+
+              props.message && content.push(
+                h('div', {
+                  class: 'q-loading__message'
+                    + (props.messageColor ? ` text-${ props.messageColor }` : ''),
+                  [ props.html === true ? 'innerHTML' : 'textContent' ]: props.message
+                })
+              )
+
+              return h('div', {
+                class: 'q-loading fullscreen flex flex-center z-max ' + props.customClass.trim(),
+                key: props.uid
+              }, [
+                h('div', {
+                  class: 'q-loading__backdrop'
+                    + (props.backgroundColor ? ` bg-${ props.backgroundColor }` : '')
+                }),
+
+                h('div', {
+                  class: 'q-loading__box column items-center ' + props.boxClass
+                }, content)
+              ])
             }
 
-            const content = [
-              h(props.spinner, {
-                class: 'q-loading__spinner',
-                color: props.spinnerColor,
-                size: props.spinnerSize
-              })
-            ]
-
-            props.message && content.push(
-              h('div', {
-                class: 'q-loading__message'
-                  + (props.messageColor ? ` text-${ props.messageColor }` : ''),
-                [ props.html === true ? 'innerHTML' : 'textContent' ]: props.message
-              })
-            )
-
-            return h('div', {
-              class: 'q-loading fullscreen flex flex-center z-max ' + props.customClass.trim(),
-              key: props.uid
-            }, [
-              h('div', {
-                class: 'q-loading__backdrop'
-                  + (props.backgroundColor ? ` bg-${ props.backgroundColor }` : '')
-              }),
-
-              h('div', {
-                class: 'q-loading__box column items-center ' + props.boxClass
-              }, content)
-            ])
+            return () => h(Transition, {
+              name: 'q-transition--fade',
+              appear: true,
+              onAfterLeave
+            }, getContent)
           }
+        })
 
-          return () => h(Transition, {
-            name: 'q-transition--fade',
-            appear: true,
-            onAfterLeave
-          }, getContent)
-        }
-      })
+        vm = app.mount(el)
+      }, props.delay)
+    }
 
-      vm = app.mount(el)
-    }, props.delay)
+    return paramProps => {
+      // if we don't have params (or not an Object param) then we need to hide this group
+      if (paramProps === void 0 || Object(paramProps) !== paramProps) {
+        Plugin.hide(group)
+        return
+      }
+
+      // else we have params so we need to update this group
+      Plugin.show({ ...paramProps, group })
+    }
   },
 
-  hide () {
+  hide (group) {
     if (__QUASAR_SSR_SERVER__ !== true && Plugin.isActive === true) {
+      if (group === void 0) {
+        // clear out any active groups
+        activeGroups = {}
+      }
+      else if (activeGroups[ group ] === void 0) {
+        // we've already hidden it so nothing to do
+        return
+      }
+      else {
+        // remove active group
+        delete activeGroups[ group ]
+
+        const keys = Object.keys(activeGroups)
+
+        // if there are other groups registered then
+        // show last registered one since that one is still active
+        if (keys.length !== 0) {
+          // get last registered group
+          const lastGroup = keys[ keys.length - 1 ]
+          Plugin.show({ group: lastGroup })
+          return
+        }
+      }
+
       if (timeout !== void 0) {
         clearTimeout(timeout)
         timeout = void 0

package/src/plugins/Loading.json

@@ -18,6 +18,13 @@
         "desc": "Message to display",
         "examples": [ "Processing your request" ]
       },
+      "group": {
+        "type": "String",
+        "desc": "Default Loading group name",
+        "default": "__default_quasar_group__",
+        "examples": [ "default-group-name" ],
+        "addedIn": "v2.8"
+      },
       "html": {
         "extends": "html",
         "desc": "Force render the message as HTML; This can lead to XSS attacks so make sure that you sanitize the content"
@@ -67,10 +74,13 @@
 
   "methods": {
     "show": {
+      "tsInjectionPoint": true,
       "desc": "Activate and show",
       "params": {
         "opts": {
           "type": "Object",
+          "tsType": "QLoadingShowOptions",
+          "autoDefineTsType": true,
           "desc": "All props are optional",
           "definition": {
             "delay": {
@@ -83,6 +93,12 @@
               "desc": "Message to display",
               "examples": [ "Processing your request" ]
             },
+            "group": {
+              "type": "String",
+              "desc": "Loading group name",
+              "examples": [ "some-api-call" ],
+              "addedIn": "v2.8"
+            },
             "html": {
               "extends": "html",
               "desc": "Render the message as HTML; This can lead to XSS attacks so make sure that you sanitize the message first"
@@ -124,11 +140,35 @@
             }
           }
         }
+      },
+      "returns": {
+        "type": "Function",
+        "desc": "Calling this function with no parameters hides the group; When called with one Object parameter then it updates the Loading group (specified properties are shallow merged with the group ones; note that group cannot be changed while updating and it is ignored)",
+        "params": {
+          "props": {
+            "type": "Object",
+            "tsType": "QLoadingUpdateOptions",
+            "required": false,
+            "desc": "Loading properties that will be shallow merged to the group ones; (See 'opts' param of 'show()' for object properties, except 'group')",
+            "__exemption": [ "definition", "examples" ]
+          }
+        },
+        "returns": null,
+        "addedIn": "v2.8"
       }
     },
 
     "hide": {
-      "desc": "Hide it"
+      "desc": "Hide it",
+      "params": {
+        "group": {
+          "type": "String",
+          "desc": "Optional Loading group name to hide instead of hiding all groups",
+          "required": false,
+          "examples": [ "some-api-call" ],
+          "addedIn": "v2.8"
+        }
+      }
     },
 
     "setDefaults": {
@@ -149,6 +189,13 @@
               "desc": "Message to display",
               "examples": [ "Processing your request" ]
             },
+            "group": {
+              "type": "String",
+              "desc": "Default Loading group name",
+              "default": "__default_quasar_group__",
+              "examples": [ "default-group-name" ],
+              "addedIn": "v2.8"
+            },
             "spinnerSize": {
               "type": "Number",
               "desc": "Spinner size (in pixels)",

package/src/plugins/LoadingBar.js

@@ -6,7 +6,7 @@ import { createGlobalNode } from '../utils/private/global-nodes.js'
 import { createChildApp } from '../install-quasar.js'
 
 import QAjaxBar from '../components/ajax-bar/QAjaxBar.js'
-import { isObject } from '../utils/private/is.js'
+import { isObject } from '../utils/is.js'
 
 const barRef = ref(null)
 

package/src/plugins/Notify.js

@@ -9,7 +9,7 @@ import { createComponent } from '../utils/private/create.js'
 import { noop } from '../utils/event.js'
 import { createGlobalNode } from '../utils/private/global-nodes.js'
 import { createChildApp } from '../install-quasar.js'
-import { isObject } from '../utils/private/is.js'
+import { isObject } from '../utils/is.js'
 
 let uid = 0
 

package/src/utils/create-uploader-component.js

@@ -2,7 +2,7 @@ import { coreProps, coreEmits, getRenderer } from '../components/uploader/upload
 
 import { createComponent } from './private/create.js'
 import getEmitsObject from './private/get-emits-object.js'
-import { isObject } from './private/is.js'
+import { isObject } from './is.js'
 
 const coreEmitsObject = getEmitsObject(coreEmits)
 

package/src/utils/date.js

@@ -1,6 +1,6 @@
 /* eslint no-fallthrough: 0 */
 
-import { isDate } from './private/is.js'
+import { isDate } from './is.js'
 import { pad, capitalize } from './format.js'
 import { jalaaliMonthLength } from './private/date-persian.js'
 import lang, { defaultLang } from '../lang.js'

package/src/utils/dom.js

@@ -1,4 +1,4 @@
-import { isRef } from 'vue'
+import { unref } from 'vue'
 
 export function offset (el) {
   if (el === window) {
@@ -63,10 +63,7 @@ export function getElement (el) {
     }
   }
 
-  const target = isRef(el) === true
-    ? el.value
-    : el
-
+  const target = unref(el)
   if (target) {
     return target.$el || target
   }

package/src/utils/{private/is.js → is.js}

@@ -1,7 +1,3 @@
-const
-  hasMap = typeof Map === 'function',
-  hasSet = typeof Set === 'function',
-  hasArrayBuffer = typeof ArrayBuffer === 'function'
 
 export function isDeepEqual (a, b) {
   if (a === b) {
@@ -31,7 +27,7 @@ export function isDeepEqual (a, b) {
       return true
     }
 
-    if (hasMap === true && a.constructor === Map) {
+    if (a.constructor === Map) {
       if (a.size !== b.size) {
         return false
       }
@@ -55,7 +51,7 @@ export function isDeepEqual (a, b) {
       return true
     }
 
-    if (hasSet === true && a.constructor === Set) {
+    if (a.constructor === Set) {
       if (a.size !== b.size) {
         return false
       }
@@ -71,7 +67,7 @@ export function isDeepEqual (a, b) {
       return true
     }
 
-    if (hasArrayBuffer === true && a.buffer != null && a.buffer.constructor === ArrayBuffer) {
+    if (a.buffer != null && a.buffer.constructor === ArrayBuffer) {
       length = a.length
 
       if (length !== b.length) {
@@ -137,3 +133,11 @@ export function isRegexp (v) {
 export function isNumber (v) {
   return typeof v === 'number' && isFinite(v)
 }
+
+export default {
+  deepEqual: isDeepEqual,
+  object: isObject,
+  date: isDate,
+  regexp: isRegexp,
+  number: isNumber
+}

package/src/utils/morph.js

@@ -1,4 +1,4 @@
-import { isObject } from './private/is'
+import { isObject } from './is'
 
 let id = 0
 let offsetBase = void 0

package/src/utils/open-url.js

@@ -1,14 +1,19 @@
 import Platform from '../plugins/Platform.js'
 
-import { noop } from '../utils/event.js'
+import { noop } from './event.js'
+import { isNumber } from './is.js'
 
 function parseFeatures (winFeatures) {
   const cfg = Object.assign({ noopener: true }, winFeatures)
   const feat = []
   for (const key in cfg) {
-    if (cfg[ key ] === true) {
+    const value = cfg[ key ]
+    if (value === true) {
       feat.push(key)
     }
+    else if (isNumber(value) || (typeof value === 'string' && value !== '')) {
+      feat.push(key + '=' + value)
+    }
   }
   return feat.join(',')
 }

package/src/utils/private/click-outside.js

@@ -1,5 +1,5 @@
 import { listenOpts } from '../event.js'
-import { portalList } from '../private/portal.js'
+import { portalProxyList } from '../private/portal.js'
 
 let timer
 
@@ -22,10 +22,10 @@ function globalHandler (evt) {
 
   // check last portal vm if it's
   // a QDialog and not in seamless mode
-  let portalIndex = portalList.length - 1
+  let portalIndex = portalProxyList.length - 1
 
   while (portalIndex >= 0) {
-    const proxy = portalList[ portalIndex ].$
+    const proxy = portalProxyList[ portalIndex ].$
 
     if (proxy.type.name !== 'QDialog') {
       break

package/src/utils/private/date-persian.js

@@ -141,9 +141,9 @@ function jalCal (jy, withoutLeap) {
   }
 
   return {
-    leap: leap,
-    gy: gy,
-    march: march
+    leap,
+    gy,
+    march
   }
 }
 
@@ -188,9 +188,9 @@ function d2j (jdn) {
       jm = 1 + div(k, 31)
       jd = mod(k, 31) + 1
       return {
-        jy: jy,
-        jm: jm,
-        jd: jd
+        jy,
+        jm,
+        jd
       }
     }
     else {
@@ -207,9 +207,9 @@ function d2j (jdn) {
   jm = 7 + div(k, 30)
   jd = mod(k, 30) + 1
   return {
-    jy: jy,
-    jm: jm,
-    jd: jd
+    jy,
+    jm,
+    jd
   }
 }
 
@@ -253,9 +253,9 @@ function d2g (jdn) {
     gm = mod(div(i, 153), 12) + 1,
     gy = div(j, 1461) - 100100 + div(8 - gm, 6)
   return {
-    gy: gy,
-    gm: gm,
-    gd: gd
+    gy,
+    gm,
+    gd
   }
 }
 

package/src/utils/private/portal.js

@@ -1,56 +1,56 @@
-import { getParentVm } from './vm.js'
+import { getParentProxy } from './vm.js'
 
-export const portalList = []
+export const portalProxyList = []
 
-export function getPortalVm (el) {
-  return portalList.find(vm =>
-    vm.__qPortalInnerRef.value !== null
-    && vm.__qPortalInnerRef.value.contains(el)
+export function getPortalProxy (el) {
+  return portalProxyList.find(proxy =>
+    proxy.__qPortalInnerRef.value !== null
+    && proxy.__qPortalInnerRef.value.contains(el)
   )
 }
 
-export function closePortalMenus (vm, evt) {
+export function closePortalMenus (proxy, evt) {
   do {
-    if (vm.$options.name === 'QMenu') {
-      vm.hide(evt)
+    if (proxy.$options.name === 'QMenu') {
+      proxy.hide(evt)
 
       // is this a point of separation?
-      if (vm.$props.separateClosePopup === true) {
-        return getParentVm(vm)
+      if (proxy.$props.separateClosePopup === true) {
+        return getParentProxy(proxy)
       }
     }
-    else if (vm.__qPortalInnerRef !== void 0) {
+    else if (proxy.__qPortalInnerRef !== void 0) {
       // treat it as point of separation if parent is QPopupProxy
       // (so mobile matches desktop behavior)
       // and hide it too
-      const parent = getParentVm(vm)
+      const parent = getParentProxy(proxy)
 
       if (parent !== void 0 && parent.$options.name === 'QPopupProxy') {
-        vm.hide(evt)
+        proxy.hide(evt)
         return parent
       }
       else {
-        return vm
+        return proxy
       }
     }
 
-    vm = getParentVm(vm)
-  } while (vm !== void 0 && vm !== null)
+    proxy = getParentProxy(proxy)
+  } while (proxy !== void 0 && proxy !== null)
 }
 
-export function closePortals (vm, evt, depth) {
-  while (depth !== 0 && vm !== void 0 && vm !== null) {
-    if (vm.__qPortalInnerRef !== void 0) {
+export function closePortals (proxy, evt, depth) {
+  while (depth !== 0 && proxy !== void 0 && proxy !== null) {
+    if (proxy.__qPortalInnerRef !== void 0) {
       depth--
 
-      if (vm.$options.name === 'QMenu') {
-        vm = closePortalMenus(vm, evt)
+      if (proxy.$options.name === 'QMenu') {
+        proxy = closePortalMenus(proxy, evt)
         continue
       }
 
-      vm.hide(evt)
+      proxy.hide(evt)
     }
 
-    vm = getParentVm(vm)
+    proxy = getParentProxy(proxy)
   }
 }

package/src/utils/private/vm.js

@@ -1,17 +1,18 @@
-// used directly by docs too
-export function getParentVm (vm) {
-  if (Object(vm.$parent) === vm.$parent) {
-    return vm.$parent
+
+// copied to docs too
+export function getParentProxy (proxy) {
+  if (Object(proxy.$parent) === proxy.$parent) {
+    return proxy.$parent
   }
 
-  vm = vm.$.parent
+  let { parent } = proxy.$
 
-  while (Object(vm) === vm) {
-    if (Object(vm.proxy) === vm.proxy) {
-      return vm.proxy
+  while (Object(parent) === parent) {
+    if (Object(parent.proxy) === parent.proxy) {
+      return parent.proxy
     }
 
-    vm = vm.parent
+    parent = parent.parent
   }
 }
 

package/src/utils/private/web-storage.js

@@ -1,5 +1,5 @@
 import { noop } from '../event.js'
-import { isDate, isRegexp } from './is.js'
+import { isDate, isRegexp } from '../is.js'
 
 function encode (value) {
   if (isDate(value) === true) {

package/src/utils.js

@@ -12,6 +12,7 @@ import extend from './utils/extend.js'
 import format from './utils/format.js'
 import frameDebounce from './utils/frame-debounce.js'
 import getCssVar from './utils/get-css-var.js'
+import is from './utils/is.js'
 import morph from './utils/morph.js'
 import openURL from './utils/open-url.js'
 import patterns from './utils/patterns.js'
@@ -36,6 +37,7 @@ export {
   frameDebounce,
   getCssVar,
   noop,
+  is,
   morph,
   openURL,
   patterns,