quasar 2.4.10 → 2.4.11

package/dist/ssr-directives/Morph.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.4.10
+ * Quasar Framework v2.4.11
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */

package/dist/types/api/validation.d.ts

@@ -1,4 +1,4 @@
 // Keep in sync with ui/src/utils/patterns.js
 export type EmbeddedValidationRule = "date" | "time" | "fulltime" | "timeOrFulltime" | "hexColor" | "hexaColor" | "hexOrHexaColor" | "rgbColor" | "rgbaColor" | "rgbOrRgbaColor" | "hexOrRgbColor" | "hexaOrRgbaColor" | "anyColor";
 
-export type ValidationRule<T = any> = EmbeddedValidationRule | ((value: T) => boolean | string);
+export type ValidationRule<T = any> = EmbeddedValidationRule | ((value: T) => boolean | string | Promise<boolean | string>);

package/dist/types/index.d.ts

@@ -334,6 +334,10 @@ export interface Loading {
 }
 
 export interface LoadingBar {
+  /**
+   * Is LoadingBar active?
+   */
+  isActive: boolean;
   /**
    * Notify bar you've started a background activity
    * @param speed Delay (in milliseconds) between bar progress increments
@@ -884,7 +888,132 @@ export interface Platform {
   /**
    * Client browser details (property names depend on browser)
    */
-  is: any;
+  is: {
+    /**
+     * Browser name
+     */
+    name: string;
+    /**
+     * Platform name
+     */
+    platform: string;
+    /**
+     * Detailed browser version
+     */
+    version?: string;
+    /**
+     * Major browser version as a number
+     */
+    versionNumber?: number;
+    /**
+     * Whether the platform is desktop
+     */
+    desktop?: boolean;
+    /**
+     * Whether the platform is mobile
+     */
+    mobile?: boolean;
+    /**
+     * Whether the platform is Electron
+     */
+    electron?: boolean;
+    /**
+     * Whether the platform is BEX(Browser Extension)
+     */
+    bex?: boolean;
+    /**
+     * Whether the platform is Capacitor
+     */
+    capacitor?: boolean;
+    /**
+     * Whether the platform is Cordova
+     */
+    cordova?: boolean;
+    /**
+     * Whether the platform is a native mobile wrapper
+     */
+    nativeMobile?: boolean;
+    /**
+     * Type of the native mobile wrapper
+     */
+    nativeMobileWrapper?: "cordova" | "capacitor";
+    /**
+     * Whether the browser is Google Chrome
+     */
+    chrome?: boolean;
+    /**
+     * Whether the browser is Firefox
+     */
+    firefox?: boolean;
+    /**
+     * Whether the browser is Safari
+     */
+    safari?: boolean;
+    /**
+     * Whether the browser is Microsoft Edge (Chromium)
+     */
+    edgeChromium?: boolean;
+    /**
+     * Whether the browser is Microsoft Edge Legacy
+     */
+    edge?: boolean;
+    /**
+     * Whether the browser is Opera
+     */
+    opera?: boolean;
+    /**
+     * Whether the browser is Vivaldi
+     */
+    vivaldi?: boolean;
+    /**
+     * Whether the operating system is Windows
+     */
+    win?: boolean;
+    /**
+     * Whether the operating system is Linux
+     */
+    linux?: boolean;
+    /**
+     * Whether the operating system is Mac OS
+     */
+    mac?: boolean;
+    /**
+     * Whether the operating system is Chrome OS
+     */
+    cros?: boolean;
+    /**
+     * Whether the operating system is Android
+     */
+    android?: boolean;
+    /**
+     * Whether the operating system is iOS
+     */
+    ios?: boolean;
+    /**
+     * Whether the operating system is Windows Phone
+     */
+    winphone?: boolean;
+    /**
+     * Whether the device is an iPhone
+     */
+    iphone?: boolean;
+    /**
+     * Whether the device is an iPad
+     */
+    ipad?: boolean;
+    /**
+     * Whether the device is an iPod
+     */
+    ipod?: boolean;
+    /**
+     * Whether the device is a Kindle
+     */
+    kindle?: boolean;
+    /**
+     * Whether the browser is Amazon Silk
+     */
+    silk?: boolean;
+  };
   /**
    * Client browser detectable properties
    */
@@ -1181,17 +1310,20 @@ export interface QAjaxBar extends ComponentPublicInstance<QAjaxBarProps> {
   /**
    * Notify bar you are waiting for a new process to finish
    * @param speed Delay (in milliseconds) between progress auto-increments; If delay is 0 then it disables auto-incrementing
+   * @returns Number of active simultaneous sessions
    */
-  start: (speed?: number) => void;
+  start: (speed?: number) => number;
   /**
    * Manually trigger a bar progress increment
    * @param amount Amount (0 < x <= 100) to increment with
+   * @returns Number of active simultaneous sessions
    */
-  increment: (amount?: number) => void;
+  increment: (amount?: number) => number;
   /**
    * Notify bar that one process you were waiting has finished
+   * @returns Number of active simultaneous sessions
    */
-  stop: () => void;
+  stop: () => number;
 }
 
 export interface QAvatarProps {

package/dist/web-types/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.4.10",
+  "version": "2.4.11",
   "contributions": {
     "html": {
       "types-syntax": "typescript",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.4.10",
+  "version": "2.4.11",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",

package/src/components/ajax-bar/QAjaxBar.js

@@ -119,7 +119,7 @@ export default createComponent({
     const onScreen = ref(false)
     const animate = ref(true)
 
-    let calls = 0, timer, speed
+    let sessions = 0, timer, speed
 
     const classes = computed(() =>
       `q-loading-bar q-loading-bar--${ props.position }`
@@ -165,16 +165,17 @@ export default createComponent({
       const oldSpeed = speed
       speed = Math.max(0, newSpeed) || 0
 
-      calls++
+      sessions++
 
-      if (calls > 1) {
+      if (sessions > 1) {
         if (oldSpeed === 0 && newSpeed > 0) {
           planNextStep()
         }
         else if (oldSpeed > 0 && newSpeed <= 0) {
           clearTimeout(timer)
         }
-        return
+
+        return sessions
       }
 
       clearTimeout(timer)
@@ -182,25 +183,32 @@ export default createComponent({
 
       progress.value = 0
 
-      if (onScreen.value === true) { return }
-
-      onScreen.value = true
-      animate.value = false
       timer = setTimeout(() => {
         animate.value = true
         newSpeed > 0 && planNextStep()
-      }, 100)
+      }, onScreen.value === true ? 500 : 1)
+
+      if (onScreen.value !== true) {
+        onScreen.value = true
+        animate.value = false
+      }
+
+      return sessions
     }
 
     function increment (amount) {
-      if (calls > 0) {
+      if (sessions > 0) {
         progress.value = inc(progress.value, amount)
       }
+
+      return sessions
     }
 
     function stop () {
-      calls = Math.max(0, calls - 1)
-      if (calls > 0) { return }
+      sessions = Math.max(0, sessions - 1)
+      if (sessions > 0) {
+        return sessions
+      }
 
       clearTimeout(timer)
       emit('stop')
@@ -219,6 +227,8 @@ export default createComponent({
       else {
         end()
       }
+
+      return sessions
     }
 
     function planNextStep () {

package/src/components/ajax-bar/QAjaxBar.json

@@ -73,6 +73,11 @@
           "desc": "Delay (in milliseconds) between progress auto-increments; If delay is 0 then it disables auto-incrementing",
           "examples": [ 400, 0 ]
         }
+      },
+      "returns": {
+        "type": "Number",
+        "desc": "Number of active simultaneous sessions",
+        "__exemption": [ "examples" ]
       }
     },
 
@@ -84,11 +89,21 @@
           "desc": "Amount (0 < x <= 100) to increment with",
           "examples": [ 1 ]
         }
+      },
+      "returns": {
+        "type": "Number",
+        "desc": "Number of active simultaneous sessions",
+        "__exemption": [ "examples" ]
       }
     },
 
     "stop": {
-      "desc": "Notify bar that one process you were waiting has finished"
+      "desc": "Notify bar that one process you were waiting has finished",
+      "returns": {
+        "type": "Number",
+        "desc": "Number of active simultaneous sessions",
+        "__exemption": [ "examples" ]
+      }
     }
   }
 }

package/src/components/form/QForm.js

@@ -1,4 +1,4 @@
-import { h, ref, onMounted, getCurrentInstance, nextTick, provide } from 'vue'
+import { h, ref, onActivated, onDeactivated, onMounted, getCurrentInstance, nextTick, provide } from 'vue'
 
 import { createComponent } from '../../utils/private/create.js'
 import { stopAndPrevent } from '../../utils/event.js'
@@ -161,6 +161,16 @@ export default createComponent({
       }
     })
 
+    let shouldActivate = false
+
+    onDeactivated(() => {
+      shouldActivate = true
+    })
+
+    onActivated(() => {
+      shouldActivate === true && props.autofocus === true && focus()
+    })
+
     onMounted(() => {
       props.autofocus === true && focus()
     })

package/src/components/infinite-scroll/QInfiniteScroll.js

@@ -41,7 +41,6 @@ export default createComponent({
     const rootRef = ref(null)
 
     let index = props.initialIndex || 0
-    let scrollPos = false
     let localScrollTarget, poll
 
     const classes = computed(() =>
@@ -180,8 +179,10 @@ export default createComponent({
     watch(() => props.scrollTarget, updateScrollTarget)
     watch(() => props.debounce, setDebounce)
 
+    let scrollPos = false
+
     onActivated(() => {
-      if (localScrollTarget && scrollPos !== false) {
+      if (scrollPos !== false && localScrollTarget) {
         setVerticalScrollPosition(localScrollTarget, scrollPos)
       }
     })

package/src/components/scroll-area/QScrollArea.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, withDirectives, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { h, ref, computed, withDirectives, onActivated, onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
@@ -380,6 +380,26 @@ export default createComponent({
       }
     })
 
+    let scrollPosition = null
+
+    onDeactivated(() => {
+      scrollPosition = {
+        top: scroll.vertical.position.value,
+        left: scroll.horizontal.position.value
+      }
+    })
+
+    onActivated(() => {
+      if (scrollPosition === null) { return }
+
+      const scrollTarget = targetRef.value
+
+      if (scrollTarget !== null) {
+        setHorizontalScrollPosition(scrollTarget, scrollPosition.left)
+        setVerticalScrollPosition(scrollTarget, scrollPosition.top)
+      }
+    })
+
     onBeforeUnmount(emitScroll.cancel)
 
     return () => {

package/src/components/tabs/QTabs.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, nextTick, onBeforeUnmount, onActivated, getCurrentInstance, provide } from 'vue'
+import { h, ref, computed, watch, nextTick, onBeforeUnmount, onActivated, onDeactivated, getCurrentInstance, provide } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 import QResizeObserver from '../resize-observer/QResizeObserver.js'
@@ -568,7 +568,15 @@ export default createComponent({
       unwatchRoute !== void 0 && unwatchRoute()
     })
 
-    onActivated(recalculateScroll)
+    let shouldActivate = false
+
+    onDeactivated(() => {
+      shouldActivate = true
+    })
+
+    onActivated(() => {
+      shouldActivate === true && recalculateScroll()
+    })
 
     return () => {
       const child = [

package/src/components/tree/QTree.js

@@ -617,9 +617,11 @@ export default createComponent({
 
       if (hasSelection.value) {
         if (meta.selectable) {
-          const val = meta.key !== props.selected ? meta.key : null
-          if (props.noSelectionUnset !== true || val !== null) {
-            emit('update:selected', val)
+          if (props.noSelectionUnset === false) {
+            emit('update:selected', meta.key !== props.selected ? meta.key : null)
+          }
+          else if (meta.key !== props.selected) {
+            emit('update:selected', meta.key || null)
           }
         }
       }

package/src/components/virtual-scroll/use-virtual-scroll.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, onActivated, onBeforeMount, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onActivated, onDeactivated, onBeforeMount, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
 
 import debounce from '../../utils/debounce.js'
 import { noop } from '../../utils/event.js'
@@ -596,9 +596,9 @@ export function useVirtualScroll ({
       : Math.ceil(scrollViewSize / virtualScrollItemSizeComputed.value)
 
     const baseSize = Math.max(
-      10,
+      1,
       view,
-      Math.ceil(props.virtualScrollSliceSize / multiplier)
+      Math.ceil((props.virtualScrollSliceSize > 0 ? props.virtualScrollSliceSize : 10) / multiplier)
     )
 
     virtualScrollSliceSizeComputed.value = {
@@ -691,7 +691,15 @@ export function useVirtualScroll ({
     setVirtualScrollSize()
   })
 
+  let shouldActivate = false
+
+  onDeactivated(() => {
+    shouldActivate = true
+  })
+
   onActivated(() => {
+    if (shouldActivate !== true) { return }
+
     const scrollEl = getVirtualScrollTarget()
 
     if (prevScrollStart !== void 0 && scrollEl !== void 0 && scrollEl !== null && scrollEl.nodeType !== 8) {

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

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, Transition, nextTick, onBeforeUnmount, onMounted, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, Transition, nextTick, onActivated, onDeactivated, onBeforeUnmount, onMounted, getCurrentInstance } from 'vue'
 
 import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
 
@@ -532,6 +532,16 @@ export default function (state) {
   // expose public methods
   Object.assign(proxy, { focus, blur })
 
+  let shouldActivate = false
+
+  onDeactivated(() => {
+    shouldActivate = true
+  })
+
+  onActivated(() => {
+    shouldActivate === true && props.autofocus === true && proxy.focus()
+  })
+
   onMounted(() => {
     if (isRuntimeSsrPreHydration.value === true && props.for === void 0) {
       state.targetUid.value = getTargetUid()

package/src/plugins/LoadingBar.js

@@ -49,11 +49,11 @@ const Plugin = defineReactivePlugin({
     Object.assign(this, {
       start (speed) {
         barRef.value.start(speed)
-        Plugin.isActive = barRef.value.calls > 0
+        Plugin.isActive = true
       },
       stop () {
-        barRef.value.stop()
-        Plugin.isActive = barRef.value.calls > 0
+        const sessions = barRef.value.stop()
+        Plugin.isActive = sessions > 0
       },
       increment () {
         barRef.value.increment.apply(null, arguments)

package/src/plugins/LoadingBar.json

@@ -16,6 +16,14 @@
     }
   },
 
+  "props": {
+    "isActive": {
+      "type": "Boolean",
+      "desc": "Is LoadingBar active?",
+      "reactive": true
+    }
+  },
+
   "methods": {
     "start": {
       "desc": "Notify bar you've started a background activity",

package/src/plugins/Platform.js

@@ -1,6 +1,4 @@
 /* eslint-disable no-useless-escape */
-/* eslint-disable no-unused-expressions */
-/* eslint-disable no-mixed-operators */
 
 import { ref, reactive } from 'vue'
 import { injectProp } from '../utils/private/inject-obj-prop'
@@ -25,19 +23,15 @@ export let iosEmulated = false
 export let iosCorrection
 
 function getMatch (userAgent, platformMatch) {
-  const match = /(edge|edga|edgios)\/([\w.]+)/.exec(userAgent)
+  const match = /(edg|edge|edga|edgios)\/([\w.]+)/.exec(userAgent)
     || /(opr)[\/]([\w.]+)/.exec(userAgent)
     || /(vivaldi)[\/]([\w.]+)/.exec(userAgent)
     || /(chrome|crios)[\/]([\w.]+)/.exec(userAgent)
-    || /(iemobile)[\/]([\w.]+)/.exec(userAgent)
     || /(version)(applewebkit)[\/]([\w.]+).*(safari)[\/]([\w.]+)/.exec(userAgent)
     || /(webkit)[\/]([\w.]+).*(version)[\/]([\w.]+).*(safari)[\/]([\w.]+)/.exec(userAgent)
     || /(firefox|fxios)[\/]([\w.]+)/.exec(userAgent)
     || /(webkit)[\/]([\w.]+)/.exec(userAgent)
     || /(opera)(?:.*version|)[\/]([\w.]+)/.exec(userAgent)
-    || /(msie) ([\w.]+)/.exec(userAgent)
-    || (userAgent.indexOf('trident') >= 0 && /(rv)(?::| )([\w.]+)/.exec(userAgent))
-    || (userAgent.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(userAgent))
     || []
 
   return {
@@ -60,6 +54,8 @@ function getPlatformMatch (userAgent) {
     || /(mac)/.exec(userAgent)
     || /(linux)/.exec(userAgent)
     || /(cros)/.exec(userAgent)
+    // TODO: Remove BlackBerry detection. BlackBerry OS, BlackBerry 10, and BlackBerry PlayBook OS
+    // is officially dead as of January 4, 2022 (https://www.blackberry.com/us/en/support/devices/end-of-life)
     || /(playbook)/.exec(userAgent)
     || /(bb)/.exec(userAgent)
     || /(blackberry)/.exec(userAgent)
@@ -151,6 +147,10 @@ function getPlatform (UA) {
     delete browser[ 'windows phone' ]
   }
 
+  // TODO: The assumption about WebKit based browsers below is not completely accurate.
+  // Google released Blink(a fork of WebKit) engine on April 3, 2013, which is really different than WebKit today.
+  // Today, one might want to check for WebKit to deal with its bugs, which is used on all browsers on iOS, and Safari browser on all platforms.
+
   // Chrome, Opera 15+, Vivaldi and Safari are webkit based browsers
   if (
     browser.chrome
@@ -167,8 +167,15 @@ function getPlatform (UA) {
     browser.webkit = true
   }
 
+  // TODO: (Qv3) rename the terms 'edge' to 'edge legacy'(or remove it) then 'edge chromium' to 'edge' to match with the known up-to-date terms
+  // Microsoft Edge is the new Chromium-based browser. Microsoft Edge Legacy is the old EdgeHTML-based browser (EOL: March 9, 2021).
+  if (browser.edg) {
+    matched.browser = 'edgechromium'
+    browser.edgeChromium = true
+  }
+
   // Blackberry browsers are marked as Safari on BlackBerry
-  if (browser.safari && browser.blackberry || browser.bb) {
+  if ((browser.safari && browser.blackberry) || browser.bb) {
     matched.browser = 'blackberry'
     browser.blackberry = true
   }