quasar 2.3.1 → 2.4.0

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

@@ -2,38 +2,54 @@
   "props": {
     "to": {
       "type": [ "String", "Object" ],
-      "desc": "Equivalent to Vue Router <router-link> 'to' property",
+      "desc": "Equivalent to Vue Router <router-link> 'to' property; Superseeded by 'href' prop if used",
       "examples": [
         "/home/dashboard",
         ":to=\"{ name: 'my-route-name' }\""
       ],
-      "category": "behavior"
+      "category": "navigation"
     },
 
     "exact": {
       "type": "Boolean",
-      "desc": "Equivalent to Vue Router <router-link> 'exact' property",
-      "category": "behavior"
+      "desc": "Equivalent to Vue Router <router-link> 'exact' property; Superseeded by 'href' prop if used",
+      "category": "navigation"
     },
 
     "replace": {
       "type": "Boolean",
-      "desc": "Equivalent to Vue Router <router-link> 'replace' property",
-      "category": "behavior"
+      "desc": "Equivalent to Vue Router <router-link> 'replace' property; Superseeded by 'href' prop if used",
+      "category": "navigation"
     },
 
     "active-class": {
       "type": "String",
-      "desc": "Equivalent to Vue Router <router-link> 'active-class' property",
+      "desc": "Equivalent to Vue Router <router-link> 'active-class' property; Superseeded by 'href' prop if used",
       "examples": [ "my-active-class" ],
-      "category": "behavior"
+      "category": "navigation"
     },
 
     "exact-active-class": {
       "type": "String",
-      "desc": "Equivalent to Vue Router <router-link> 'active-class' property",
+      "desc": "Equivalent to Vue Router <router-link> 'active-class' property; Superseeded by 'href' prop if used",
       "examples": [ "my-exact-active-class" ],
-      "category": "behavior"
+      "category": "navigation"
+    },
+
+    "href": {
+      "type": "String",
+      "desc": "Native <a> link href attribute; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props",
+      "examples": [ "http://quasar.dev" ],
+      "category": "navigation",
+      "addedIn": "v2.4"
+    },
+
+    "target": {
+      "type": "String",
+      "desc": "Native <a> link target attribute; Use it only along with 'href' prop; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props",
+      "examples": [ "_blank", "_self", "_parent", "_top" ],
+      "category": "navigation",
+      "addedIn": "v2.4"
     },
 
     "disable": {

package/src/composables/private/use-split-attrs.js

@@ -2,27 +2,30 @@ import { ref, onBeforeUpdate } from 'vue'
 
 const listenerRE = /^on[A-Z]/
 
-export default function (attrs) {
+export default function (attrs, vnode) {
   const acc = {
     listeners: ref({}),
     attributes: ref({})
   }
 
   function update () {
-    const listeners = {}
     const attributes = {}
+    const listeners = {}
 
-    Object.keys(attrs).forEach(key => {
-      if (listenerRE.test(key) === true) {
-        listeners[ key ] = attrs[ key ]
-      }
-      else if (key !== 'class' && key !== 'style') {
+    for (const key in attrs) {
+      if (key !== 'class' && key !== 'style' && listenerRE.test(key) === false) {
         attributes[ key ] = attrs[ key ]
       }
-    })
+    }
+
+    for (const key in vnode.props) {
+      if (listenerRE.test(key) === true) {
+        listeners[ key ] = vnode.props[ key ]
+      }
+    }
 
-    acc.listeners.value = listeners
     acc.attributes.value = attributes
+    acc.listeners.value = listeners
   }
 
   onBeforeUpdate(update)

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

@@ -2,6 +2,8 @@ import { ref, computed, watch, onBeforeUnmount, getCurrentInstance } from 'vue'
 
 import useFormChild from '../use-form-child.js'
 import { testPattern } from '../../utils/patterns.js'
+import { debounce } from '../../utils.js'
+import { injectProp } from '../../utils/private/inject-obj-prop.js'
 
 const lazyRulesValues = [ true, false, 'ondemand' ]
 
@@ -35,7 +37,8 @@ export default function (focused, innerLoading) {
   let validateIndex = 0, unwatchRules
 
   const hasRules = computed(() =>
-    props.rules !== void 0
+    props.disable !== true
+    && props.rules !== void 0
     && props.rules !== null
     && props.rules.length > 0
   )
@@ -44,7 +47,7 @@ export default function (focused, innerLoading) {
     props.error === true || innerError.value === true
   )
 
-  const computedErrorMessage = computed(() => (
+  const errorMessage = computed(() => (
     typeof props.errorMessage === 'string' && props.errorMessage.length > 0
       ? props.errorMessage
       : innerErrorMessage.value
@@ -69,15 +72,16 @@ export default function (focused, innerLoading) {
   }, { immediate: true })
 
   watch(focused, val => {
-    if (props.lazyRules !== 'ondemand') {
-      if (val === true) {
-        if (isDirtyModel.value === null) {
-          isDirtyModel.value = false
-        }
+    if (val === true) {
+      if (isDirtyModel.value === null) {
+        isDirtyModel.value = false
       }
-      else if (isDirtyModel.value === false && hasRules.value === true) {
-        isDirtyModel.value = true
-        validate()
+    }
+    else if (isDirtyModel.value === false) {
+      isDirtyModel.value = true
+
+      if (hasRules.value === true && props.lazyRules !== 'ondemand') {
+        debouncedValidate()
       }
     }
   })
@@ -88,6 +92,7 @@ export default function (focused, innerLoading) {
     isDirtyModel.value = null
     innerError.value = false
     innerErrorMessage.value = null
+    debouncedValidate.cancel()
   }
 
   /*
@@ -189,25 +194,26 @@ export default function (focused, innerLoading) {
       && props.lazyRules !== 'ondemand'
       && (isDirtyModel.value === true || (props.lazyRules !== true && changedRules !== true))
     ) {
-      validate()
+      debouncedValidate()
     }
   }
 
+  const debouncedValidate = debounce(validate, 0)
+
   onBeforeUnmount(() => {
     unwatchRules !== void 0 && unwatchRules()
+    debouncedValidate.cancel()
   })
 
   // expose public methods & props
   Object.assign(proxy, { resetValidation, validate })
-  Object.defineProperty(proxy, 'hasError', {
-    get: () => hasError.value
-  })
+  injectProp(proxy, 'hasError', () => hasError.value)
 
   return {
     isDirtyModel,
     hasRules,
     hasError,
-    computedErrorMessage,
+    errorMessage,
 
     validate,
     resetValidation

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

@@ -28,6 +28,7 @@
 
     "rules": {
       "type": "Array",
+      "tsType": "ValidationRule",
       "desc": "Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules",
       "examples": [
         ":rules=\"[ val => val.length <= 3 || 'Please use maximum 3 characters' ]\"",

package/src/composables/use-dialog-plugin-component.js

@@ -36,6 +36,7 @@ function useDialogPluginComponent () {
   }
 }
 
+// Don't forget to update the types in "ui/types/composables.d.ts"
 const emits = [ 'ok', 'hide' ]
 
 useDialogPluginComponent.emits = emits

package/src/css/core/helpers.sass

@@ -49,6 +49,9 @@
   outline: 0
   text-decoration: none
 
+  &--focusable:focus-visible
+    text-decoration: underline dashed currentColor 1px
+
 body.electron
   .q-electron-drag
     -webkit-user-select: none

package/src/css/core/positioning.sass

@@ -69,6 +69,11 @@
   max-width: 100vw
   max-height: 100vh
 
+body.q-ios-padding .fullscreen
+  padding-top: $ios-statusbar-height !important
+  padding-top: env(safe-area-inset-top) !important
+  padding-bottom: env(safe-area-inset-bottom) !important
+
 .absolute-full, .fullscreen, .fixed-full
   top: 0
   right: 0

package/src/directives/Mutation.json

@@ -27,9 +27,8 @@
           },
 
           "target": {
-            "type": "Object",
-            "desc": "The DOM element that the mutation affected, depending on the mutation type",
-            "__exemption": [ "examples" ]
+            "type": "Element",
+            "desc": "The DOM element that the mutation affected, depending on the mutation type"
           },
 
           "addedNodes": {

package/src/directives/ScrollFire.js

@@ -61,6 +61,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
       beforeUnmount (el) {
         const ctx = el.__qscrollfire
         ctx.scrollTarget.removeEventListener('scroll', ctx.scroll, passive)
+        ctx.scroll.cancel()
         delete el.__qscrollfire
       }
     }

package/src/directives/ScrollFire.json

@@ -8,9 +8,8 @@
     "desc": "Function to call when scrolling and element comes into the viewport (use a non-function to disable)",
     "params": {
       "el": {
-        "type": "Object",
-        "desc": "DOM element that scroll-fire is applied to",
-        "__exemption": [ "examples" ]
+        "type": "Element",
+        "desc": "DOM element that scroll-fire is applied to"
       }
     },
     "returns": null,

package/src/icon-set.js

@@ -1,5 +1,6 @@
 import defineReactivePlugin from './utils/private/define-reactive-plugin.js'
 import materialIcons from '../icon-set/material-icons.js'
+import { injectProp } from './utils/private/inject-obj-prop.js'
 
 const Plugin = defineReactivePlugin({
   iconMapFn: null,
@@ -42,10 +43,7 @@ const Plugin = defineReactivePlugin({
 
       $q.iconSet = this.__icons
 
-      Object.defineProperty($q, 'iconMapFn', {
-        get: () => this.iconMapFn,
-        set: val => { this.iconMapFn = val }
-      })
+      injectProp($q, 'iconMapFn', () => this.iconMapFn, val => { this.iconMapFn = val })
 
       if (this.__installed === true) {
         iconSet !== void 0 && this.set(iconSet)

package/src/plugins/AppFullscreen.js

@@ -3,15 +3,41 @@ import { changeGlobalNodesTarget } from '../utils/private/global-nodes.js'
 
 const prefixes = {}
 
+function assignFn (fn) {
+  Object.assign(Plugin, {
+    request: fn,
+    exit: fn,
+    toggle: fn
+  })
+}
+
 function getFullscreenElement () {
   return (
     document.fullscreenElement
     || document.mozFullScreenElement
     || document.webkitFullscreenElement
     || document.msFullscreenElement
+    || null
   )
 }
 
+function updateEl () {
+  const newEl = Plugin.activeEl = Plugin.isActive === false
+    ? null
+    : getFullscreenElement()
+
+  changeGlobalNodesTarget(
+    newEl === null || newEl === document.documentElement
+      ? document.body
+      : newEl
+  )
+}
+
+function togglePluginState () {
+  Plugin.isActive = Plugin.isActive === false
+  updateEl()
+}
+
 // needed for consistency across browsers
 function promisify (target, fn) {
   try {
@@ -31,80 +57,71 @@ const Plugin = defineReactivePlugin({
 }, {
   isCapable: false,
 
-  request (target) {
-    if (Plugin.isCapable === true && Plugin.isActive === false) {
-      const el = target || document.documentElement
-      return promisify(el, prefixes.request)
-    }
-
-    return Plugin.__getErr()
-  },
-
-  exit () {
-    return Plugin.isCapable === true && Plugin.isActive === true
-      ? promisify(document, prefixes.exit)
-      : Plugin.__getErr()
-  },
-
-  toggle (target) {
-    return Plugin.isActive === true
-      ? Plugin.exit()
-      : Plugin.request(target)
-  },
-
   install ({ $q }) {
     $q.fullscreen = this
   }
 })
 
-if (__QUASAR_SSR_SERVER__ !== true) {
-  function init () {
-    prefixes.request = [
-      'requestFullscreen',
-      'msRequestFullscreen', 'mozRequestFullScreen', 'webkitRequestFullscreen'
-    ].find(request => document.documentElement[ request ] !== void 0)
+if (__QUASAR_SSR_SERVER__ === true) {
+  assignFn(() => Promise.resolve())
+}
+else {
+  prefixes.request = [
+    'requestFullscreen',
+    'msRequestFullscreen', 'mozRequestFullScreen', 'webkitRequestFullscreen'
+  ].find(request => document.documentElement[ request ] !== void 0)
 
-    Plugin.isCapable = prefixes.request !== void 0
+  Plugin.isCapable = prefixes.request !== void 0
 
-    if (Plugin.isCapable === false) {
-      // it means the browser does NOT support it
-      Plugin.__getErr = () => Promise.reject('Not capable')
-      return
-    }
+  if (Plugin.isCapable === false) {
+    // it means the browser does NOT support it
+    assignFn(() => Promise.reject('Not capable'))
+  }
+  else {
+    Object.assign(Plugin, {
+      request (target) {
+        const el = target || document.documentElement
+        const { activeEl } = Plugin
+
+        if (el === activeEl) {
+          return Promise.resolve()
+        }
+
+        const queue = activeEl !== null && el.contains(activeEl) === true
+          ? Plugin.exit()
+          : Promise.resolve()
 
-    Plugin.__getErr = () => Promise.resolve()
+        return queue.finally(() => promisify(el, prefixes.request))
+      },
+
+      exit () {
+        return Plugin.isActive === true
+          ? promisify(document, prefixes.exit)
+          : Promise.resolve()
+      },
+
+      toggle (target) {
+        return Plugin.isActive === true
+          ? Plugin.exit()
+          : Plugin.request(target)
+      }
+    })
 
     prefixes.exit = [
       'exitFullscreen',
       'msExitFullscreen', 'mozCancelFullScreen', 'webkitExitFullscreen'
     ].find(exit => document[ exit ])
 
-    Plugin.isActive = !!getFullscreenElement()
+    Plugin.isActive = Boolean(getFullscreenElement())
+    Plugin.isActive === true && updateEl()
 
     ;[
       'onfullscreenchange',
       'onmsfullscreenchange', 'onwebkitfullscreenchange'
     ].forEach(evt => {
-      document[ evt ] = () => {
-        Plugin.isActive = Plugin.isActive === false
-
-        if (Plugin.isActive === false) {
-          Plugin.activeEl = null
-          changeGlobalNodesTarget(document.body)
-        }
-        else {
-          Plugin.activeEl = getFullscreenElement()
-          changeGlobalNodesTarget(
-            Plugin.activeEl === document.documentElement
-              ? document.body
-              : Plugin.activeEl
-          )
-        }
-      }
+      document[ evt ] = togglePluginState
     })
   }
-
-  init()
 }
 
 export default Plugin

package/src/plugins/AppFullscreen.json

@@ -17,9 +17,9 @@
     },
 
     "activeEl": {
-      "type": "Object",
+      "type": [ "Element", "null" ],
       "desc": "The DOM element used as root for fullscreen, otherwise 'null'",
-      "__exemption": [ "examples" ]
+      "examples": [ "document.fullscreenElement", "null" ]
     }
   },
 
@@ -34,8 +34,8 @@
         }
       },
       "returns": {
-        "type": "Promise<any>",
-        "desc": "A Promise with the outcome (true -> validation was a success, false -> invalid models detected)",
+        "type": "Promise<void>",
+        "desc": "A Promise which is resolved when transitioned to fullscreen mode. It gets rejected with 'Not capable' if the browser is not capable, and with an Error object if something else went wrong.",
         "examples": [
           "request().then(response => { ... }).catch(err => { ... })"
         ]
@@ -45,8 +45,8 @@
     "exit": {
       "desc": "Request exiting out of Fullscreen mode",
       "returns": {
-        "type": "Promise<any>",
-        "desc": "A Promise with the outcome (true -> validation was a success, false -> invalid models detected)",
+        "type": "Promise<void>",
+        "desc": "A Promise which is resolved when exited out of fullscreen mode. It gets rejected with 'Not capable' if the browser is not capable, and with an Error object if something else went wrong.",
         "examples": [
           "exit().then(response => { ... }).catch(err => { ... })"
         ]
@@ -63,8 +63,8 @@
         }
       },
       "returns": {
-        "type": "Promise<any>",
-        "desc": "A Promise with the outcome (true -> validation was a success, false -> invalid models detected)",
+        "type": "Promise<void>",
+        "desc": "A Promise which is resolved when transitioned to / exited out of fullscreen mode. It gets rejected with 'Not capable' if the browser is not capable, and with an Error object if something else went wrong.",
         "examples": [
           "toggle().then(response => { ... }).catch(err => { ... })"
         ]

package/src/plugins/AppVisibility.js

@@ -1,4 +1,5 @@
 import defineReactivePlugin from '../utils/private/define-reactive-plugin.js'
+import { injectProp } from '../utils/private/inject-obj-prop.js'
 
 const Plugin = defineReactivePlugin({
   appVisible: true
@@ -9,9 +10,7 @@ const Plugin = defineReactivePlugin({
       return
     }
 
-    Object.defineProperty($q, 'appVisible', {
-      get: () => this.appVisible
-    })
+    injectProp($q, 'appVisible', () => this.appVisible)
   }
 })
 

package/src/plugins/BottomSheet.js

@@ -3,11 +3,9 @@ import globalDialog from '../utils/private/global-dialog.js'
 
 export default {
   install ({ $q, parentApp }) {
-    if (this.__installed === true) {
-      $q.bottomSheet = globalDialog(BottomSheet, false, parentApp)
-    }
-    else {
-      this.create = $q.bottomSheet = globalDialog(BottomSheet, false, parentApp)
+    $q.bottomSheet = globalDialog(BottomSheet, false, parentApp)
+    if (this.__installed !== true) {
+      this.create = $q.bottomSheet
     }
   }
 }

package/src/plugins/Cookies.json

@@ -73,8 +73,8 @@
             },
             "sameSite": {
               "type": "String",
-              "desc": "SameSite cookie option (not supported by IE11)",
-              "examples": [ "Strict", "Lax" ]
+              "desc": "SameSite cookie option",
+              "values": [ "Lax", "Strict", "None" ]
             },
             "httpOnly": {
               "type": "Boolean",

package/src/plugins/Dialog.js

@@ -3,11 +3,9 @@ import globalDialog from '../utils/private/global-dialog.js'
 
 export default {
   install ({ $q, parentApp }) {
-    if (this.__installed === true) {
-      $q.dialog = globalDialog(DialogPlugin, true, parentApp)
-    }
-    else {
-      this.create = $q.dialog = globalDialog(DialogPlugin, true, parentApp)
+    $q.dialog = globalDialog(DialogPlugin, true, parentApp)
+    if (this.__installed !== true) {
+      this.create = $q.dialog
     }
   }
 }

package/src/plugins/Dialog.json

@@ -46,8 +46,8 @@
               "definition": {
                 "model": {
                   "type": "String",
-                  "desc": "The initial value of the input",
                   "required": true,
+                  "desc": "The initial value of the input",
                   "__exemption": [ "examples" ]
                 },
 
@@ -64,6 +64,7 @@
                   "params": {
                     "val": {
                       "type": "String",
+                      "required": true,
                       "desc": "The value of the input",
                       "__exemption": [ "examples" ]
                     }
@@ -151,8 +152,8 @@
               "definition": {
                 "model": {
                   "type": [ "String", "Array" ],
-                  "desc": "The value of the selection (String if it's of type radio or Array otherwise)",
                   "required": true,
+                  "desc": "The value of the selection (String if it's of type radio or Array otherwise)",
                   "examples": [ "[]" ]
                 },
 
@@ -177,6 +178,7 @@
                   "params": {
                     "model": {
                       "type": [ "String", "Array" ],
+                      "required": true,
                       "desc": "The current model (String if it's of type radio or Array otherwise)",
                       "examples": [
                         "opt2",
@@ -304,9 +306,8 @@
             },
 
             "component": {
-              "type": "Any",
-              "desc": "Use custom dialog component; use along with 'componentProps' prop where possible",
-              "__exemption": [ "examples" ]
+              "type": "Component",
+              "desc": "Use custom dialog component; use along with 'componentProps' prop where possible"
             },
 
             "componentProps": {