quasar 2.4.10 → 2.5.0

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

@@ -37,12 +37,16 @@ export default function (focused, innerLoading) {
   let validateIndex = 0, unwatchRules
 
   const hasRules = computed(() =>
-    props.disable !== true
-    && props.rules !== void 0
+    props.rules !== void 0
     && props.rules !== null
     && props.rules.length > 0
   )
 
+  const hasActiveRules = computed(() =>
+    props.disable !== true
+    && hasRules.value === true
+  )
+
   const hasError = computed(() =>
     props.error === true || innerError.value === true
   )
@@ -80,7 +84,7 @@ export default function (focused, innerLoading) {
     else if (isDirtyModel.value === false) {
       isDirtyModel.value = true
 
-      if (hasRules.value === true && props.lazyRules !== 'ondemand') {
+      if (hasActiveRules.value === true && props.lazyRules !== 'ondemand') {
         debouncedValidate()
       }
     }
@@ -102,7 +106,7 @@ export default function (focused, innerLoading) {
    *   - Promise (pending async validation)
    */
   function validate (val = props.modelValue) {
-    if (hasRules.value !== true) {
+    if (hasActiveRules.value !== true) {
       return true
     }
 
@@ -190,7 +194,7 @@ export default function (focused, innerLoading) {
 
   function validateIfNeeded (changedRules) {
     if (
-      hasRules.value === true
+      hasActiveRules.value === true
       && props.lazyRules !== 'ondemand'
       && (isDirtyModel.value === true || (props.lazyRules !== true && changedRules !== true))
     ) {

package/src/plugins/BottomSheet.json

@@ -33,6 +33,7 @@
               "definition": {
                 "classes": {
                   "type": [ "String", "Array", "Object" ],
+                  "tsType": "VueClassProp",
                   "desc": "CSS classes for this action",
                   "examples": [ "my-class" ]
                 },

package/src/plugins/Dialog.json

@@ -14,6 +14,7 @@
         "opts": {
           "desc": "Dialog options",
           "tsType": "QDialogOptions",
+          "autoDefineTsType": true,
           "definition": {
             "title": {
               "type": "String",

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/Meta.js

@@ -140,7 +140,7 @@ function apply ({ add, remove }) {
 function getAttr (seed) {
   return att => {
     const val = seed[ att ]
-    return att + (val !== void 0 ? `="${ val }"` : '')
+    return att + (val !== true && val !== void 0 ? `="${ val }"` : '')
   }
 }
 

package/src/plugins/Notify.json

@@ -254,7 +254,8 @@
               ]
             },
             "badgeStyle": {
-              "type": [ "Array", "String", "Object" ],
+              "type": [ "String", "Array", "Object" ],
+              "tsType": "VueStyleProp",
               "desc": "Style definitions to be attributed to the badge",
               "examples": [
                 "background-color: #ff0000",
@@ -262,7 +263,8 @@
               ]
             },
             "badgeClass": {
-              "type": [ "Array", "String", "Object" ],
+              "type": [ "String", "Array", "Object" ],
+              "tsType": "VueClassProp",
               "desc": "Class definitions to be attributed to the badge",
               "examples": [
                 "my-special-class",
@@ -275,7 +277,8 @@
               "desc": "Show progress bar to detail when notification will disappear automatically (unless timeout is 0)"
             },
             "progressClass": {
-              "type": [ "Array", "String", "Object" ],
+              "type": [ "String", "Array", "Object" ],
+              "tsType": "VueClassProp",
               "desc": "Class definitions to be attributed to the progress bar",
               "examples": [
                 "my-special-class",
@@ -406,7 +409,8 @@
                 "desc": "Show progress bar to detail when notification will disappear automatically (unless timeout is 0)"
               },
               "progressClass": {
-                "type": [ "Array", "String", "Object" ],
+                "type": [ "String", "Array", "Object" ],
+                "tsType": "VueClassProp",
                 "desc": "Class definitions to be attributed to the progress bar",
                 "examples": [
                   "my-special-class",
@@ -566,7 +570,8 @@
               "examples": [ "bottom-right" ]
             },
             "badgeStyle": {
-              "type": [ "Array", "String", "Object" ],
+              "type": [ "String", "Array", "Object" ],
+              "tsType": "VueStyleProp",
               "desc": "Style definitions to be attributed to the badge",
               "examples": [
                 "background-color: #ff0000",
@@ -574,7 +579,8 @@
               ]
             },
             "badgeClass": {
-              "type": [ "Array", "String", "Object" ],
+              "type": [ "String", "Array", "Object" ],
+              "tsType": "VueClassProp",
               "desc": "Class definitions to be attributed to the badge",
               "examples": [
                 "my-special-class",
@@ -587,7 +593,8 @@
               "desc": "Show progress bar to detail when notification will disappear automatically (unless timeout is 0)"
             },
             "progressClass": {
-              "type": [ "Array", "String", "Object" ],
+              "type": [ "String", "Array", "Object" ],
+              "tsType": "VueClassProp",
               "desc": "Class definitions to be attributed to the progress bar",
               "examples": [
                 "my-special-class",
@@ -746,7 +753,8 @@
               "examples": [ "bottom-right" ]
             },
             "badgeStyle": {
-              "type": [ "Array", "String", "Object" ],
+              "type": [ "String", "Array", "Object" ],
+              "tsType": "VueStyleProp",
               "desc": "Style definitions to be attributed to the badge",
               "examples": [
                 "background-color: #ff0000",
@@ -754,7 +762,8 @@
               ]
             },
             "badgeClass": {
-              "type": [ "Array", "String", "Object" ],
+              "type": [ "String", "Array", "Object" ],
+              "tsType": "VueClassProp",
               "desc": "Class definitions to be attributed to the badge",
               "examples": [
                 "my-special-class",
@@ -767,7 +776,8 @@
               "desc": "Show progress bar to detail when notification will disappear automatically (unless timeout is 0)"
             },
             "progressClass": {
-              "type": [ "Array", "String", "Object" ],
+              "type": [ "String", "Array", "Object" ],
+              "tsType": "VueClassProp",
               "desc": "Class definitions to be attributed to the progress bar",
               "examples": [
                 "my-special-class",

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
   }

package/src/plugins/Platform.json

@@ -17,6 +17,172 @@
     "is": {
       "type": "Object",
       "desc": "Client browser details (property names depend on browser)",
+      "definition": {
+        "name": {
+          "type": "String",
+          "desc": "Browser name",
+          "examples": [ "chrome" ]
+        },
+        "platform": {
+          "type": "String",
+          "desc": "Platform name",
+          "examples": [ "mac" ]
+        },
+        "version": {
+          "type": "String",
+          "required": false,
+          "desc": "Detailed browser version",
+          "examples": [ "71.0.3578.98" ]
+        },
+        "versionNumber": {
+          "type": "Number",
+          "required": false,
+          "desc": "Major browser version as a number",
+          "examples": [ 71 ]
+        },
+
+        "desktop": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the platform is desktop"
+        },
+        "mobile": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the platform is mobile"
+        },
+        "electron": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the platform is Electron"
+        },
+        "bex": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the platform is BEX(Browser Extension)"
+        },
+        "capacitor": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the platform is Capacitor"
+        },
+        "cordova": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the platform is Cordova"
+        },
+        "nativeMobile": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the platform is a native mobile wrapper"
+        },
+        "nativeMobileWrapper": {
+          "type": "String",
+          "required": false,
+          "values": ["cordova", "capacitor"],
+          "desc": "Type of the native mobile wrapper"
+        },
+
+        "chrome": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the browser is Google Chrome"
+        },
+        "firefox": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the browser is Firefox"
+        },
+        "safari": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the browser is Safari"
+        },
+        "edgeChromium": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the browser is Microsoft Edge (Chromium)"
+        },
+        "edge": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the browser is Microsoft Edge Legacy"
+        },
+        "opera": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the browser is Opera"
+        },
+        "vivaldi": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the browser is Vivaldi"
+        },
+
+        "win": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the operating system is Windows"
+        },
+        "linux": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the operating system is Linux"
+        },
+        "mac": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the operating system is Mac OS"
+        },
+        "cros": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the operating system is Chrome OS"
+        },
+
+        "android": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the operating system is Android"
+        },
+        "ios": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the operating system is iOS"
+        },
+        "winphone": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the operating system is Windows Phone"
+        },
+
+        "iphone": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the device is an iPhone"
+        },
+        "ipad": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the device is an iPad"
+        },
+        "ipod": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the device is an iPod"
+        },
+
+        "kindle": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the device is a Kindle"
+        },
+        "silk": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the browser is Amazon Silk"
+        }
+      },
       "examples": [
         "{ chrome: true, version: '71.0.3578.98', versionNumber: 71, mac: true, desktop: true, webkit: true, name: 'chrome', platform: 'mac' }"
       ]

package/src/plugins/Screen.js

@@ -58,12 +58,19 @@ export default defineReactivePlugin({
       return
     }
 
+    const { visualViewport } = window
+    const target = visualViewport || window
+    const getSize = visualViewport === void 0
+      ? () => [ window.innerWidth, window.innerHeight ]
+      : () => [
+          visualViewport.width * visualViewport.scale + window.innerWidth - document.scrollingElement.clientWidth,
+          visualViewport.height * visualViewport.scale + window.innerHeight - document.scrollingElement.clientHeight
+        ]
+
     const classes = $q.config.screen !== void 0 && $q.config.screen.bodyClasses === true
 
     this.__update = force => {
-      const
-        w = window.innerWidth,
-        h = window.innerHeight
+      const [ w, h ] = getSize()
 
       if (h !== this.height) {
         this.height = h
@@ -121,11 +128,7 @@ export default defineReactivePlugin({
     }
 
     const start = () => {
-      const
-        style = getComputedStyle(document.body),
-        target = window.visualViewport !== void 0
-          ? window.visualViewport
-          : window
+      const style = getComputedStyle(document.body)
 
       // if css props available
       if (style.getPropertyValue('--q-size-sm')) {

package/src/utils/date.js

@@ -185,16 +185,16 @@ function applyYearMonthDayChange (date, mod, sign) {
     month += sign * mod.months
   }
 
-  if (mod.days !== void 0) {
-    day += sign * mod.days
-  }
-
   date.setDate(1)
   date.setMonth(2)
 
   date.setFullYear(year)
   date.setMonth(month)
-  date.setDate(day)
+  date.setDate(Math.min(day, daysInMonth(date)))
+
+  if (mod.days !== void 0) {
+    date.setDate(date.getDate() + sign * mod.days)
+  }
 
   return date
 }

package/src/utils/private/global-dialog.json

@@ -9,12 +9,14 @@
           "definition": {
             "class": {
               "type": [ "String", "Array", "Object" ],
+              "tsType": "VueClassProp",
               "desc": "CSS Class name to apply to the Dialog's QCard",
               "examples": [ "my-class" ]
             },
 
             "style": {
               "type": [ "String", "Array", "Object" ],
+              "tsType": "VueStyleProp",
               "desc": "CSS style to apply to the Dialog's QCard",
               "examples": [ "border: 2px solid black" ]
             }
@@ -26,6 +28,7 @@
         "type": "Object",
         "desc": "Chainable Object",
         "tsType": "DialogChainObject",
+        "autoDefineTsType": true,
         "definition": {
           "onOk": {
             "type": "Function",

package/src/utils/private/vm.js

@@ -15,19 +15,25 @@ export function getParentVm (vm) {
   }
 }
 
+function fillNormalizedVNodes (children, vnode) {
+  if (typeof vnode.type === 'symbol') {
+    if (Array.isArray(vnode.children) === true) {
+      vnode.children.forEach(child => {
+        fillNormalizedVNodes(children, child)
+      })
+    }
+  }
+  else {
+    children.add(vnode)
+  }
+}
+
 // vnodes from rendered in advanced slots
 export function getNormalizedVNodes (vnodes) {
   const children = new Set()
 
   vnodes.forEach(vnode => {
-    if (typeof vnode.type === 'symbol' && Array.isArray(vnode.children) === true) {
-      vnode.children.forEach(child => {
-        children.add(child)
-      })
-    }
-    else {
-      children.add(vnode)
-    }
+    fillNormalizedVNodes(children, vnode)
   })
 
   return Array.from(children)