quasar 2.5.3 → 2.6.0

package/src/composables/private/use-field.js

@@ -366,14 +366,6 @@ export default function (state) {
       }, getControlContainer())
     )
 
-    slots.append !== void 0 && node.push(
-      h('div', {
-        class: 'q-field__append q-field__marginal row no-wrap items-center',
-        key: 'append',
-        onClick: prevent
-      }, slots.append())
-    )
-
     hasError.value === true && props.noErrorIcon === false && node.push(
       getInnerAppendNode('error', [
         h(QIcon, { name: $q.iconSet.field.error, color: 'negative' })
@@ -407,6 +399,14 @@ export default function (state) {
       )
     }
 
+    slots.append !== void 0 && node.push(
+      h('div', {
+        class: 'q-field__append q-field__marginal row no-wrap items-center',
+        key: 'append',
+        onClick: prevent
+      }, slots.append())
+    )
+
     state.getInnerAppend !== void 0 && node.push(
       getInnerAppendNode('inner-append', state.getInnerAppend())
     )
@@ -511,8 +511,8 @@ export default function (state) {
 
       hasCounter === true
         ? h('div', {
-            class: 'q-field__counter'
-          }, slots.counter !== void 0 ? slots.counter() : state.computedCounter.value)
+          class: 'q-field__counter'
+        }, slots.counter !== void 0 ? slots.counter() : state.computedCounter.value)
         : null
     ])
   }
@@ -552,6 +552,14 @@ export default function (state) {
   })
 
   return function renderField () {
+    const labelAttrs = state.getControl === void 0 && slots.control === void 0
+      ? {
+          ...state.splitAttrs.attributes.value,
+          'data-autofocus': props.autofocus,
+          ...attributes.value
+        }
+      : attributes.value
+
     return h('label', {
       ref: state.rootRef,
       class: [
@@ -559,13 +567,13 @@ export default function (state) {
         attrs.class
       ],
       style: attrs.style,
-      ...attributes.value
+      ...labelAttrs
     }, [
       slots.before !== void 0
         ? h('div', {
-            class: 'q-field__before q-field__marginal row no-wrap items-center',
-            onClick: prevent
-          }, slots.before())
+          class: 'q-field__before q-field__marginal row no-wrap items-center',
+          onClick: prevent
+        }, slots.before())
         : null,
 
       h('div', {
@@ -585,9 +593,9 @@ export default function (state) {
 
       slots.after !== void 0
         ? h('div', {
-            class: 'q-field__after q-field__marginal row no-wrap items-center',
-            onClick: prevent
-          }, slots.after())
+          class: 'q-field__after q-field__marginal row no-wrap items-center',
+          onClick: prevent
+        }, slots.after())
         : null
     ])
   }

package/src/composables/private/use-file-dom-props.js

@@ -34,11 +34,11 @@ export default function (props, typeGuard) {
 
   return typeGuard === true
     ? computed(() => {
-        if (props.type !== 'file') {
-          return
-        }
+      if (props.type !== 'file') {
+        return
+      }
 
-        return getFormDomProps()
-      })
+      return getFormDomProps()
+    })
     : computed(getFormDomProps)
 }

package/src/composables/private/use-file.js

@@ -1,4 +1,4 @@
-import { h, computed, getCurrentInstance } from 'vue'
+import { h, ref, computed, getCurrentInstance } from 'vue'
 
 import { stop, stopAndPrevent } from '../../utils/event.js'
 
@@ -42,18 +42,20 @@ export default function ({
 }) {
   const { props, emit, proxy } = getCurrentInstance()
 
+  const dndRef = ref(null)
+
   const extensions = computed(() => (
     props.accept !== void 0
       ? props.accept.split(',').map(ext => {
-          ext = ext.trim()
-          if (ext === '*') { // support "*"
-            return '*/'
-          }
-          else if (ext.endsWith('/*')) { // support "image/*" or "*/*"
-            ext = ext.slice(0, ext.length - 1)
-          }
-          return ext.toUpperCase()
-        })
+        ext = ext.trim()
+        if (ext === '*') { // support "*"
+          return '*/'
+        }
+        else if (ext.endsWith('/*')) { // support "image/*" or "*/*"
+          ext = ext.slice(0, ext.length - 1)
+        }
+        return ext.toUpperCase()
+      })
       : null
   ))
 
@@ -118,7 +120,7 @@ export default function ({
     // Cordova/iOS allows selecting multiple files even when the
     // multiple attribute is not specified. We also normalize drag'n'dropped
     // files here:
-    if (props.multiple !== true) {
+    if (props.multiple !== true && files.length > 0) {
       files = [ files[ 0 ] ]
     }
 
@@ -183,7 +185,7 @@ export default function ({
 
   function onDragleave (e) {
     stopAndPrevent(e)
-    dnd.value = false
+    e.relatedTarget !== dndRef.value && (dnd.value = false)
   }
 
   function onDrop (e) {
@@ -200,6 +202,7 @@ export default function ({
   function getDndNode (type) {
     if (dnd.value === true) {
       return h('div', {
+        ref: dndRef,
         class: `q-${ type }__dnd absolute-full`,
         onDragenter: stopAndPreventDrag,
         onDragover: stopAndPreventDrag,

package/src/composables/private/use-file.json

@@ -85,9 +85,7 @@
       "desc": "Trigger file pick; Must be called as a direct consequence of user interaction (eg. in a click handler), due to browsers security policy",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     },

package/src/composables/private/use-router-link.js

@@ -191,8 +191,8 @@ export default function (fallbackTag) {
       // avoid comparing the child with its parent
       && currentMatched[ currentMatched.length - 1 ].path !== parentRecordPath
         ? currentMatched.findIndex(
-            isSameRouteRecord.bind(null, matched[ length - 2 ])
-          )
+          isSameRouteRecord.bind(null, matched[ length - 2 ])
+        )
         : index
     )
   })
@@ -248,7 +248,7 @@ export default function (fallbackTag) {
     prevent(e)
 
     return proxy.$router[ props.replace === true ? 'replace' : 'push' ](props.to)
-      .catch(() => {})
+      .catch(err => err)
   }
 
   return {

package/src/directives/Morph.js

@@ -1,8 +1,6 @@
 import { createDirective } from '../utils/private/create.js'
 import morph from '../utils/morph.js'
 
-import getSSRProps from './Morph.ssr.js'
-
 const morphGroups = {}
 const props = [
   'duration', 'delay', 'easing', 'fill',
@@ -164,7 +162,18 @@ function updateValue (ctx, value) {
 }
 
 export default createDirective(__QUASAR_SSR_SERVER__
-  ? { name: 'morph', getSSRProps }
+  ? {
+      name: 'morph',
+      getSSRProps: binding => {
+        const name = binding.arg
+          ? binding.arg.split(':')[ 0 ]
+          : false
+
+        return {
+          class: name === binding.value ? '' : 'q-morph--invisible'
+        }
+      }
+    }
   : {
       name: 'morph',
 

package/src/directives/TouchHold.json

@@ -12,9 +12,8 @@
         "desc": "Event details",
         "definition": {
           "evt": {
-            "type": "Object",
-            "desc": "Original JS event Object",
-            "__exemption": [ "examples" ]
+            "extends": "evt",
+            "desc": "Original JS event Object"
           },
           "touch": {
             "type": "Boolean",

package/src/directives/TouchPan.json

@@ -12,9 +12,8 @@
         "desc": "Event details",
         "definition": {
           "evt": {
-            "type": "Object",
-            "desc": "Original JS event Object",
-            "__exemption": [ "examples" ]
+            "extends": "evt",
+            "desc": "Original JS event Object"
           },
           "touch": {
             "type": "Boolean",

package/src/directives/TouchRepeat.json

@@ -12,9 +12,8 @@
         "desc": "Event details",
         "definition": {
           "evt": {
-            "type": "Object",
-            "desc": "Original JS event Object",
-            "__exemption": [ "examples" ]
+            "extends": "evt",
+            "desc": "Original JS event Object"
           },
           "touch": {
             "type": "Boolean",

package/src/directives/TouchSwipe.json

@@ -12,9 +12,8 @@
         "desc": "Event details",
         "definition": {
           "evt": {
-            "type": "Object",
-            "desc": "Original JS event Object",
-            "__exemption": [ "examples" ]
+            "extends": "evt",
+            "desc": "Original JS event Object"
           },
           "touch": {
             "type": "Boolean",

package/src/install-quasar.js

@@ -10,6 +10,7 @@ import IconSet from './icon-set.js'
 
 import { quasarKey } from './utils/private/symbols.js'
 import { globalConfig, globalConfigIsFrozen, freezeGlobalConfig } from './utils/private/global-config.js'
+import { isObject } from './utils/private/is.js'
 
 const autoInstalledPlugins = [
   Platform,
@@ -46,13 +47,13 @@ function prepareApp (app, uiOpts, pluginOpts) {
   installPlugins(pluginOpts, autoInstalledPlugins)
 
   uiOpts.components !== void 0 && Object.values(uiOpts.components).forEach(c => {
-    if (Object(c) === c && c.name !== void 0) {
+    if (isObject(c) === true && c.name !== void 0) {
       app.component(c.name, c)
     }
   })
 
   uiOpts.directives !== void 0 && Object.values(uiOpts.directives).forEach(d => {
-    if (Object(d) === d && d.name !== void 0) {
+    if (isObject(d) === true && d.name !== void 0) {
       app.directive(d.name, d)
     }
   })
@@ -74,45 +75,45 @@ function prepareApp (app, uiOpts, pluginOpts) {
 
 export default __QUASAR_SSR_SERVER__
   ? function (parentApp, opts = {}, ssrContext) {
-      const $q = {
-        version: __QUASAR_VERSION__,
-        config: opts.config || {}
-      }
-
-      Object.assign(ssrContext, {
-        $q,
-        _meta: {
-          htmlAttrs: '',
-          headTags: '',
-          endingHeadTags: '',
-          bodyClasses: '',
-          bodyAttrs: 'data-server-rendered',
-          bodyTags: ''
-        }
-      })
-
-      if (ssrContext._modules === void 0) {
-        // not OK. means the SSR build is not using @quasar/ssr-helpers,
-        // but we shouldn't crash the app
-        ssrContext._modules = []
-      }
+    const $q = {
+      version: __QUASAR_VERSION__,
+      config: opts.config || {}
+    }
 
-      if (ssrContext.onRendered === void 0) {
-        // not OK. means the SSR build is not using @quasar/ssr-helpers,
-        // but we shouldn't crash the app
-        ssrContext.onRendered = () => {}
+    Object.assign(ssrContext, {
+      $q,
+      _meta: {
+        htmlAttrs: '',
+        headTags: '',
+        endingHeadTags: '',
+        bodyClasses: '',
+        bodyAttrs: 'data-server-rendered',
+        bodyTags: ''
       }
+    })
 
-      parentApp.config.globalProperties.ssrContext = ssrContext
+    if (ssrContext._modules === void 0) {
+      // not OK. means the SSR build is not using @quasar/ssr-helpers,
+      // but we shouldn't crash the app
+      ssrContext._modules = []
+    }
 
-      prepareApp(parentApp, opts, {
-        parentApp,
-        $q,
-        lang: opts.lang,
-        iconSet: opts.iconSet,
-        ssrContext
-      })
+    if (ssrContext.onRendered === void 0) {
+      // not OK. means the SSR build is not using @quasar/ssr-helpers,
+      // but we shouldn't crash the app
+      ssrContext.onRendered = () => {}
     }
+
+    parentApp.config.globalProperties.ssrContext = ssrContext
+
+    prepareApp(parentApp, opts, {
+      parentApp,
+      $q,
+      lang: opts.lang,
+      iconSet: opts.iconSet,
+      ssrContext
+    })
+  }
   : function (parentApp, opts = {}) {
     const $q = { version: __QUASAR_VERSION__ }
 

package/src/plugins/AddressbarColor.js

@@ -51,15 +51,15 @@ export default {
     || client.is.webkit === true || client.is.vivaldi === true
   )
     ? hexColor => {
-        const val = hexColor || getCssVar('primary')
+      const val = hexColor || getCssVar('primary')
 
-        if (client.is.nativeMobile === true && window.StatusBar) {
-          window.StatusBar.backgroundColorByHexString(val)
-        }
-        else {
-          setColor(val)
-        }
+      if (client.is.nativeMobile === true && window.StatusBar) {
+        window.StatusBar.backgroundColorByHexString(val)
       }
+      else {
+        setColor(val)
+      }
+    }
     : noop,
 
   install ({ $q }) {

package/src/plugins/Cookies.js

@@ -26,7 +26,11 @@ function read (string) {
   string = decode(string.replace(/\+/g, ' '))
 
   try {
-    string = JSON.parse(string)
+    const parsed = JSON.parse(string)
+
+    if (parsed === Object(parsed) || Array.isArray(parsed) === true) {
+      string = parsed
+    }
   }
   catch (e) {}
 

package/src/plugins/Dialog.json

@@ -307,8 +307,9 @@
             },
 
             "component": {
-              "type": "Component",
-              "desc": "Use custom dialog component; use along with 'componentProps' prop where possible"
+              "type": [ "Component", "String" ],
+              "desc": "Use custom dialog component; use along with 'componentProps' prop where possible",
+              "examples": [ "CustomComponent", "'custom-component'" ]
             },
 
             "componentProps": {

package/src/plugins/Loading.js

@@ -5,6 +5,7 @@ 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'
 
 let
   app,
@@ -34,7 +35,7 @@ const Plugin = defineReactivePlugin({
   show (opts) {
     if (__QUASAR_SSR_SERVER__) { return }
 
-    props = opts === Object(opts) && opts.ignoreDefaults === true
+    props = isObject(opts) === true && opts.ignoreDefaults === true
       ? { ...originalDefaults, ...opts }
       : { ...defaults, ...opts }
 
@@ -135,7 +136,7 @@ const Plugin = defineReactivePlugin({
 
   setDefaults (opts) {
     if (__QUASAR_SSR_SERVER__ !== true) {
-      opts === Object(opts) && Object.assign(defaults, opts)
+      isObject(opts) === true && Object.assign(defaults, opts)
     }
   },
 

package/src/plugins/LoadingBar.js

@@ -6,6 +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'
 
 const barRef = ref(null)
 
@@ -35,6 +36,14 @@ const Plugin = defineReactivePlugin({
         : {}
     )
 
+    function onStart () {
+      Plugin.isActive = true
+    }
+
+    function onStop () {
+      Plugin.isActive = false
+    }
+
     const el = createGlobalNode('q-loading-bar')
 
     createChildApp({
@@ -43,23 +52,21 @@ const Plugin = defineReactivePlugin({
       // hide App from Vue devtools
       devtools: { hide: true },
 
-      setup: () => () => h(QAjaxBar, { ...props.value, ref: barRef })
+      setup: () => () => h(QAjaxBar, { ...props.value, onStart, onStop, ref: barRef })
     }, parentApp).mount(el)
 
     Object.assign(this, {
       start (speed) {
         barRef.value.start(speed)
-        Plugin.isActive = true
       },
       stop () {
-        const sessions = barRef.value.stop()
-        Plugin.isActive = sessions > 0
+        barRef.value.stop()
       },
       increment () {
         barRef.value.increment.apply(null, arguments)
       },
       setDefaults (opts) {
-        if (opts === Object(opts)) {
+        if (isObject(opts) === true) {
           Object.assign(props.value, opts)
         }
       }

package/src/plugins/Notify.js

@@ -9,6 +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'
 
 let uid = 0
 
@@ -72,7 +73,7 @@ function addNotification (config, $q, originalApi) {
     Object.assign(notif, defaults)
   }
 
-  if (Object(config) !== config) {
+  if (isObject(config) === false) {
     if (notif.type) {
       Object.assign(notif, notifTypes[ notif.type ])
     }
@@ -396,7 +397,11 @@ function getComponent () {
           if (meta.hasMedia === true) {
             if (notif.spinner !== false) {
               mainChild.push(
-                h(notif.spinner, { class: 'q-notification__spinner q-notification__spinner--' + meta.leftClass })
+                h(notif.spinner, {
+                  class: 'q-notification__spinner q-notification__spinner--' + meta.leftClass,
+                  color: notif.spinnerColor,
+                  size: notif.spinnerSize
+                })
               )
             }
             else if (notif.icon) {
@@ -404,6 +409,8 @@ function getComponent () {
                 h(QIcon, {
                   class: 'q-notification__icon q-notification__icon--' + meta.leftClass,
                   name: notif.icon,
+                  color: notif.iconColor,
+                  size: notif.iconSize,
                   role: 'img'
                 })
               )
@@ -484,12 +491,12 @@ function getComponent () {
 export default {
   setDefaults (opts) {
     if (__QUASAR_SSR_SERVER__ !== true) {
-      opts === Object(opts) && Object.assign(defaults, opts)
+      isObject(opts) === true && Object.assign(defaults, opts)
     }
   },
 
   registerType (typeName, typeOpts) {
-    if (__QUASAR_SSR_SERVER__ !== true && typeOpts === Object(typeOpts)) {
+    if (__QUASAR_SSR_SERVER__ !== true && isObject(typeOpts) === true) {
       notifTypes[ typeName ] = typeOpts
     }
   },