quasar 2.3.2 → 2.4.1

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

@@ -9,26 +9,23 @@ export default function (attrs, vnode) {
   }
 
   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 ]
       }
-    })
+    }
 
-    Object.keys(vnode.props).forEach(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/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": {

package/src/plugins/LoadingBar.js

@@ -7,9 +7,9 @@ import { createChildApp } from '../install-quasar.js'
 
 import QAjaxBar from '../components/ajax-bar/QAjaxBar.js'
 
-const reqProps = { ref: 'bar' }
+const barRef = ref(null)
 
-export default defineReactivePlugin({
+const Plugin = defineReactivePlugin({
   isActive: false
 }, {
   start: noop,
@@ -31,41 +31,40 @@ export default defineReactivePlugin({
 
     const props = ref(
       $q.config.loadingBar !== void 0
-        ? { ...$q.config.loadingBar, ...reqProps }
-        : { ...reqProps }
+        ? { ...$q.config.loadingBar }
+        : {}
     )
 
     const el = createGlobalNode('q-loading-bar')
 
-    const vm = createChildApp({
+    createChildApp({
       name: 'LoadingBar',
 
       // hide App from Vue devtools
       devtools: { hide: true },
 
-      setup: () => () => h(QAjaxBar, props.value)
+      setup: () => () => h(QAjaxBar, { ...props.value, ref: barRef })
     }, parentApp).mount(el)
 
     Object.assign(this, {
-      start: speed => {
-        const bar = vm.$refs.bar
-        bar.start(speed)
-        this.isActive = bar.calls > 0
+      start (speed) {
+        barRef.value.start(speed)
+        Plugin.isActive = barRef.value.calls > 0
       },
-      stop: () => {
-        const bar = vm.$refs.bar
-        bar.stop()
-        this.isActive = bar.calls > 0
+      stop () {
+        barRef.value.stop()
+        Plugin.isActive = barRef.value.calls > 0
       },
       increment () {
-        const bar = vm.$refs.bar
-        bar.increment.apply(null, arguments)
+        barRef.value.increment.apply(null, arguments)
       },
-      setDefaults: opts => {
+      setDefaults (opts) {
         if (opts === Object(opts)) {
-          props.value = { ...props.value, ...opts, ...reqProps }
+          Object.assign(props.value, opts)
         }
       }
     })
   }
 })
+
+export default Plugin

package/src/plugins/LoadingBar.json

@@ -23,6 +23,7 @@
         "speed": {
           "type": "Number",
           "desc": "Delay (in milliseconds) between bar progress increments",
+          "default": 300,
           "examples": [ 150 ]
         }
       }
@@ -46,11 +47,11 @@
     "setDefaults": {
       "desc": "Set the inner QAjaxBar's props",
       "params": {
-        "...props": {
+        "props": {
           "type": "Object",
-          "desc": "QAjaxBar component props",
           "required": true,
-          "__exemption": [ "examples" ]
+          "desc": "QAjaxBar component props",
+          "examples": [ "{ position: 'bottom', reverse: true }" ]
         }
       }
     }