quasar 2.15.1 → 2.15.3

package/src/plugins/{Notify.json → notify/Notify.json}

@@ -12,7 +12,7 @@
       "type": {
         "type": "String",
         "desc": "Optional type (that has been previously registered) or one of the out of the box ones ('positive', 'negative', 'warning', 'info', 'ongoing')",
-        "examples": [ "negative", "custom-type" ]
+        "examples": [ "'negative'", "'custom-type'" ]
       },
 
       "color": {
@@ -26,13 +26,13 @@
       "message": {
         "type": "String",
         "desc": "The content of your message",
-        "examples": [ "John Doe pinged you" ]
+        "examples": [ "'John Doe pinged you'" ]
       },
 
       "caption": {
         "type": "String",
         "desc": "The content of your optional caption",
-        "examples": [ "5 minutes ago" ]
+        "examples": [ "'5 minutes ago'" ]
       },
 
       "html": {
@@ -58,9 +58,9 @@
         "type": "String",
         "desc": "URL to an avatar/image; Suggestion: use public folder",
         "examples": [
-          "(public folder) img/something.png",
-          "(relative path format) require('./my_img.jpg')",
-          "(URL) https://some-site.net/some-img.gif"
+          "# (public folder) 'img/something.png'",
+          "# (relative path format) require('./my_img.jpg')",
+          "# (URL) https://some-site.net/some-img.gif"
         ]
       },
 
@@ -68,7 +68,7 @@
         "type": [ "Boolean", "Component" ],
         "configFileType": [ "Boolean", "String" ],
         "desc": "Useful for notifications that are updated; Displays a Quasar spinner instead of an avatar or icon; If value is Boolean 'true' then the default QSpinner is shown",
-        "examples": [ true, "QSpinnerBars" ]
+        "examples": [ "true", "QSpinnerBars" ]
       },
 
       "spinnerColor": {
@@ -84,19 +84,19 @@
       "position": {
         "type": "String",
         "desc": "Window side/corner to stick to",
-        "default": "bottom",
+        "default": "'bottom'",
         "values": [
-          "top-left", "top-right",
-          "bottom-left", "bottom-right",
-          "top", "bottom", "left", "right", "center"
+          "'top-left'", "'top-right'",
+          "'bottom-left'", "'bottom-right'",
+          "'top'", "'bottom'", "'left'", "'right'", "'center'"
         ]
       },
 
       "group": {
         "type": [ "Boolean", "String", "Number" ],
         "desc": "Override the auto generated group with custom one; Grouped notifications cannot be updated; String or number value inform this is part of a specific group, regardless of its options; When a new notification is triggered with same group name, it replaces the old one and shows a badge with how many times the notification was triggered",
-        "default": "(message + caption + multiline + actions labels + position)",
-        "examples": [ "my-group" ]
+        "default": "# message + caption + multiline + actions labels + position",
+        "examples": [ "'my-group'" ]
       },
 
       "badgeColor": {
@@ -110,10 +110,10 @@
       "badgePosition": {
         "type": "String",
         "desc": "Notification corner to stick badge to; If notification is on the left side then default is top-right otherwise it is top-left",
-        "default": "(top-left/top-right)",
+        "default": "# top-left/top-right",
         "values": [
-          "top-left", "top-right",
-          "bottom-left", "bottom-right"
+          "'top-left'", "'top-right'",
+          "'bottom-left'", "'bottom-right'"
         ]
       },
       "badgeStyle": {
@@ -121,7 +121,7 @@
         "tsType": "VueStyleProp",
         "desc": "Style definitions to be attributed to the badge",
         "examples": [
-          "background-color: #ff0000",
+          "'background-color: #ff0000'",
           "{ backgroundColor: '#ff0000' }"
         ]
       },
@@ -130,8 +130,8 @@
         "tsType": "VueClassProp",
         "desc": "Class definitions to be attributed to the badge",
         "examples": [
-          "my-special-class",
-          "{ 'my-special-class': <condition> }"
+          "'my-special-class'",
+          "{ 'my-special-class': true }"
         ]
       },
 
@@ -144,17 +144,15 @@
         "tsType": "VueClassProp",
         "desc": "Class definitions to be attributed to the progress bar",
         "examples": [
-          "my-special-class",
-          "{ 'my-special-class': <condition> }"
+          "'my-special-class'",
+          "{ 'my-special-class': true }"
         ]
       },
 
       "classes": {
         "type": "String",
         "desc": "Add CSS class(es) to the notification for easier customization",
-        "examples": [
-          "my-notif-class"
-        ]
+        "examples": [ "'my-notif-class'" ]
       },
 
       "attrs": {
@@ -167,7 +165,7 @@
       "timeout": {
         "type": "Number",
         "desc": "Amount of time to display (in milliseconds). Set to 0 to never dismiss automatically.",
-        "default": 5000
+        "default": "5000"
       },
 
       "actions": {
@@ -181,9 +179,7 @@
             "desc": "Function to be executed when the button is clicked/tapped",
             "params": null,
             "returns": null,
-            "examples": [
-              "() => { console.log('button clicked') }"
-            ]
+            "examples": [ "() => { console.log('button clicked') }" ]
           },
           "noDismiss": {
             "type": "Boolean",
@@ -195,9 +191,7 @@
             "examples": [ "label: 'Learn more'", "color: 'primary'" ]
           }
         },
-        "examples": [
-          "[ { label: 'Show', handler: () => {}, 'aria-label': 'Button label' }, { icon: 'map', handler: () => {}, color: 'yellow' }, { label: 'Learn more', noDismiss: true, handler: () => {} } ]"
-        ]
+        "examples": [ "[ { label: 'Show', handler: () => {}, 'aria-label': 'Button label' }, { icon: 'map', handler: () => {}, color: 'yellow' }, { label: 'Learn more', noDismiss: true, handler: () => {} } ]" ]
       },
 
       "onDismiss": {
@@ -206,15 +200,13 @@
         "desc": "Function to call when notification gets dismissed",
         "params": null,
         "returns": null,
-        "examples": [
-          "() => { console.log('Dismissed') }"
-        ]
+        "examples": [ "() => { console.log('Dismissed') }" ]
       },
 
       "closeBtn": {
         "type": [ "Boolean", "String" ],
         "desc": "Convenient way to add a dismiss button with a specific label, without using the 'actions' prop; If set to true, it uses a label according to the current Quasar language",
-        "examples": [ "Close me" ]
+        "examples": [ "'Close me'" ]
       },
 
       "multiLine": {
@@ -239,7 +231,7 @@
             "type": {
               "type": "String",
               "desc": "Optional type (that has been previously registered) or one of the out of the box ones ('positive', 'negative', 'warning', 'info', 'ongoing')",
-              "examples": [ "negative", "custom-type" ]
+              "examples": [ "'negative'", "'custom-type'" ]
             },
 
             "color": {
@@ -253,13 +245,13 @@
             "message": {
               "type": "String",
               "desc": "The content of your message",
-              "examples": [ "John Doe pinged you" ]
+              "examples": [ "'John Doe pinged you'" ]
             },
 
             "caption": {
               "type": "String",
               "desc": "The content of your optional caption",
-              "examples": [ "5 minutes ago" ]
+              "examples": [ "'5 minutes ago'" ]
             },
 
             "html": {
@@ -285,16 +277,16 @@
               "type": "String",
               "desc": "URL to an avatar/image; Suggestion: use public folder",
               "examples": [
-                "(public folder) img/something.png",
-                "(relative path format) require('./my_img.jpg')",
-                "(URL) https://some-site.net/some-img.gif"
+                "# (public folder) 'img/something.png'",
+                "# (relative path format) require('./my_img.jpg')",
+                "# (URL) https://some-site.net/some-img.gif"
               ]
             },
 
             "spinner": {
               "type": [ "Boolean", "Component" ],
               "desc": "Useful for notifications that are updated; Displays a Quasar spinner instead of an avatar or icon; If value is Boolean 'true' then the default QSpinner is shown",
-              "examples": [ true, "QSpinnerBars" ]
+              "examples": [ "true", "QSpinnerBars" ]
             },
 
             "spinnerColor": {
@@ -310,19 +302,19 @@
             "position": {
               "type": "String",
               "desc": "Window side/corner to stick to",
-              "default": "bottom",
+              "default": "'bottom'",
               "values": [
-                "top-left", "top-right",
-                "bottom-left", "bottom-right",
-                "top", "bottom", "left", "right", "center"
+                "'top-left'", "'top-right'",
+                "'bottom-left'", "'bottom-right'",
+                "'top'", "'bottom'", "'left'", "'right'", "'center'"
               ]
             },
 
             "group": {
               "type": [ "Boolean", "String", "Number" ],
               "desc": "Override the auto generated group with custom one; Grouped notifications cannot be updated; String or number value inform this is part of a specific group, regardless of its options; When a new notification is triggered with same group name, it replaces the old one and shows a badge with how many times the notification was triggered",
-              "default": "(message + caption + multiline + actions labels + position)",
-              "examples": [ "my-group" ]
+              "default": "# message + caption + multiline + actions labels + position",
+              "examples": [ "'my-group'" ]
             },
 
             "badgeColor": {
@@ -336,10 +328,10 @@
             "badgePosition": {
               "type": "String",
               "desc": "Notification corner to stick badge to; If notification is on the left side then default is top-right otherwise it is top-left",
-              "default": "(top-left/top-right)",
+              "default": "# top-left/top-right",
               "values": [
-                "top-left", "top-right",
-                "bottom-left", "bottom-right"
+                "'top-left'", "'top-right'",
+                "'bottom-left'", "'bottom-right'"
               ]
             },
             "badgeStyle": {
@@ -347,7 +339,7 @@
               "tsType": "VueStyleProp",
               "desc": "Style definitions to be attributed to the badge",
               "examples": [
-                "background-color: #ff0000",
+                "'background-color: #ff0000'",
                 "{ backgroundColor: '#ff0000' }"
               ]
             },
@@ -356,8 +348,8 @@
               "tsType": "VueClassProp",
               "desc": "Class definitions to be attributed to the badge",
               "examples": [
-                "my-special-class",
-                "{ 'my-special-class': <condition> }"
+                "'my-special-class'",
+                "{ 'my-special-class': true }"
               ]
             },
 
@@ -370,17 +362,15 @@
               "tsType": "VueClassProp",
               "desc": "Class definitions to be attributed to the progress bar",
               "examples": [
-                "my-special-class",
-                "{ 'my-special-class': <condition> }"
+                "'my-special-class'",
+                "{ 'my-special-class': true }"
               ]
             },
 
             "classes": {
               "type": "String",
               "desc": "Add CSS class(es) to the notification for easier customization",
-              "examples": [
-                "my-notif-class"
-              ]
+              "examples": [ "'my-notif-class'" ]
             },
 
             "attrs": {
@@ -393,8 +383,8 @@
             "timeout": {
               "type": "Number",
               "desc": "Amount of time to display (in milliseconds). Set to 0 to never dismiss automatically.",
-              "default": 5000,
-              "examples": [ 2500 ]
+              "default": "5000",
+              "examples": [ "2500" ]
             },
 
             "actions": {
@@ -407,9 +397,7 @@
                   "desc": "Function to be executed when the button is clicked/tapped",
                   "params": null,
                   "returns": null,
-                  "examples": [
-                    "() => { console.log('button clicked') }"
-                  ]
+                  "examples": [ "() => { console.log('button clicked') }" ]
                 },
                 "noDismiss": {
                   "type": "Boolean",
@@ -421,9 +409,7 @@
                   "examples": [ "label: 'Learn more'", "color: 'primary'" ]
                 }
               },
-              "examples": [
-                "[ { label: 'Show', handler: () => {}, 'aria-label': 'Button label' }, { icon: 'map', handler: () => {}, color: 'yellow' }, { label: 'Learn more', noDismiss: true, handler: () => {} } ]"
-              ]
+              "examples": [ "[ { label: 'Show', handler: () => {}, 'aria-label': 'Button label' }, { icon: 'map', handler: () => {}, color: 'yellow' }, { label: 'Learn more', noDismiss: true, handler: () => {} } ]" ]
             },
 
             "onDismiss": {
@@ -431,15 +417,13 @@
               "desc": "Function to call when notification gets dismissed",
               "params": null,
               "returns": null,
-              "examples": [
-                "() => { console.log('Dismissed') }"
-              ]
+              "examples": [ "() => { console.log('Dismissed') }" ]
             },
 
             "closeBtn": {
               "type": [ "Boolean", "String" ],
               "desc": "Convenient way to add a dismiss button with a specific label, without using the 'actions' prop; If set to true, it uses a label according to the current Quasar language",
-              "examples": [ "Close me" ]
+              "examples": [ "'Close me'" ]
             },
 
             "multiLine": {
@@ -480,7 +464,8 @@
           "desc": "Notification options except 'ignoreDefaults' (See 'opts' param of 'create()' for object properties)",
           "__exemption": [ "definition" ]
         }
-      }
+      },
+      "returns": null
     },
 
     "registerType": {
@@ -490,7 +475,7 @@
           "type": "String",
           "required": true,
           "desc": "Name of the type (to be used as 'type' prop later on)",
-          "examples": [ "my-type" ]
+          "examples": [ "'my-type'" ]
         },
 
         "typeOpts": {
@@ -500,7 +485,8 @@
           "desc": "Notification options except 'ignoreDefaults' (See 'opts' param of 'create()' for object properties)",
           "__exemption": [ "definition" ]
         }
-      }
+      },
+      "returns": null
     }
   }
 }

package/src/plugins/{Platform.js → platform/Platform.js}

@@ -1,7 +1,7 @@
 /* eslint-disable no-useless-escape */
 
 import { ref, reactive } from 'vue'
-import { injectProp } from '../utils/private/inject-obj-prop.js'
+import { injectProp } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
 
 /**
  * __ QUASAR_SSR __            -> runs on SSR on client or server
@@ -35,8 +35,7 @@ function getMatch (userAgent, platformMatch) {
 
   return {
     browser: match[ 5 ] || match[ 3 ] || match[ 1 ] || '',
-    version: match[ 2 ] || match[ 4 ] || '0',
-    versionNumber: match[ 4 ] || match[ 2 ] || '0',
+    version: match[ 4 ] || match[ 2 ] || '0',
     platform: platformMatch[ 0 ] || ''
   }
 }
@@ -75,7 +74,7 @@ function getPlatform (UA) {
   if (matched.browser) {
     browser[ matched.browser ] = true
     browser.version = matched.version
-    browser.versionNumber = parseInt(matched.versionNumber, 10)
+    browser.versionNumber = parseInt(matched.version, 10)
   }
 
   if (matched.platform) {
@@ -113,7 +112,7 @@ function getPlatform (UA) {
     delete browser[ 'windows phone' ]
   }
 
-  if (browser.edga || browser.edgios) {
+  if (browser.edga || browser.edgios || browser.edg) {
     browser.edge = true
     matched.browser = 'edge'
   }
@@ -154,14 +153,8 @@ 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
-  }
   // Opera 15+ are identified as opr
-  else if (browser.opr) {
+  if (browser.opr) {
     matched.browser = 'opera'
     browser.opera = true
   }

package/src/plugins/{Platform.json → platform/Platform.json}

@@ -9,9 +9,7 @@
     "userAgent": {
       "type": "String",
       "desc": "Client browser User Agent",
-      "examples": [
-        "mozilla/5.0 (macintosh; intel mac os x 10_14_5) applewebkit/537.36 (khtml, like gecko) chrome/75.0.3770.100 safari/537.36"
-      ]
+      "examples": [ "'mozilla/5.0 (macintosh; intel mac os x 10_14_5) applewebkit/537.36 (khtml, like gecko) chrome/75.0.3770.100 safari/537.36'" ]
     },
 
     "is": {
@@ -21,18 +19,18 @@
         "name": {
           "type": "String",
           "desc": "Browser name",
-          "examples": [ "chrome" ]
+          "examples": [ "'chrome'" ]
         },
         "platform": {
           "type": "String",
           "desc": "Platform name",
-          "examples": [ "mac" ]
+          "examples": [ "'mac'" ]
         },
         "version": {
           "type": "String",
           "required": false,
           "desc": "Detailed browser version",
-          "examples": [ "71.0.3578.98" ]
+          "examples": [ "'71.0.3578.98'" ]
         },
         "versionNumber": {
           "type": "Number",
@@ -78,10 +76,16 @@
         "nativeMobileWrapper": {
           "type": "String",
           "required": false,
-          "values": ["cordova", "capacitor"],
+          "values": [ "'cordova'", "'capacitor'" ],
           "desc": "Type of the native mobile wrapper"
         },
 
+        "webkit": {
+          "type": "Boolean",
+          "required": false,
+          "desc": "Whether the browser is a Webkit one"
+        },
+
         "chrome": {
           "type": "Boolean",
           "required": false,
@@ -182,9 +186,7 @@
           "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' }"
-      ]
+      "examples": [ "{ chrome: true, version: '71.0.3578.98', versionNumber: 71, mac: true, desktop: true, webkit: true, name: 'chrome', platform: 'mac' }" ]
     },
 
     "has": {

package/src/plugins/platform/Platform.test.js

@@ -0,0 +1,104 @@
+/**
+ * Ignored specs:
+ * [(method)parseSSR]
+ */
+
+import { describe, test, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import Platform from './Platform.js'
+
+const mountPlugin = () => mount({ template: '<div />' })
+
+describe('[Platform API]', () => {
+  describe('[Injection]', () => {
+    test('is injected into $q', () => {
+      const wrapper = mountPlugin()
+      expect(Platform).toBe(wrapper.vm.$q.platform)
+    })
+  })
+
+  describe('[Props]', () => {
+    describe('[(prop)userAgent]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(Platform.userAgent).toBeTypeOf('string')
+      })
+    })
+
+    describe('[(prop)is]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+
+        const expected = {
+          name: expect.any(String),
+          platform: expect.any(String),
+          version: expect.any(String),
+          versionNumber: expect.any(Number),
+          desktop: expect.any(Boolean),
+          mobile: expect.any(Boolean),
+          electron: expect.any(Boolean),
+          bex: expect.any(Boolean),
+          capacitor: expect.any(Boolean),
+          cordova: expect.any(Boolean),
+          nativeMobile: expect.any(Boolean),
+          nativeMobileWrapper: expect.$any([
+            'cordova',
+            'capacitor'
+          ]),
+          webkit: expect.any(Boolean),
+          chrome: expect.any(Boolean),
+          firefox: expect.any(Boolean),
+          safari: expect.any(Boolean),
+          edgeChromium: expect.any(Boolean),
+          edge: expect.any(Boolean),
+          opera: expect.any(Boolean),
+          vivaldi: expect.any(Boolean),
+          win: expect.any(Boolean),
+          linux: expect.any(Boolean),
+          mac: expect.any(Boolean),
+          cros: expect.any(Boolean),
+          android: expect.any(Boolean),
+          ios: expect.any(Boolean),
+          winphone: expect.any(Boolean),
+          iphone: expect.any(Boolean),
+          ipad: expect.any(Boolean),
+          ipod: expect.any(Boolean),
+          kindle: expect.any(Boolean),
+          silk: expect.any(Boolean)
+        }
+
+        const actualKeys = Object.keys(Platform.is)
+
+        expect(actualKeys).not.toHaveLength(0)
+
+        expect(actualKeys).toSatisfy(
+          keys => keys.every(key => expected[ key ] !== void 0)
+        )
+
+        actualKeys.forEach(key => {
+          expect(Platform.is[ key ]).toStrictEqual(expected[ key ])
+        })
+      })
+    })
+
+    describe('[(prop)has]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(Platform.has).toStrictEqual({
+          touch: expect.any(Boolean),
+          webStorage: expect.any(Boolean)
+        })
+      })
+    })
+
+    describe('[(prop)within]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(Platform.within).toStrictEqual({
+          iframe: expect.any(Boolean)
+        })
+      })
+    })
+  })
+})

package/src/{body.js → plugins/private.body/Body.js}

@@ -1,7 +1,8 @@
-import setCssVar from './utils/set-css-var.js'
-import { noop } from './utils/event.js'
-import { onKeyDownComposition } from './utils/private/key-composition.js'
-import { isRuntimeSsrPreHydration, client } from './plugins/Platform.js'
+import setCssVar from '../../utils/css-var/set-css-var.js'
+import { noop } from '../../utils/event/event.js'
+import { onKeyDownComposition } from '../../utils/private.keyboard/key-composition.js'
+
+import { isRuntimeSsrPreHydration, client } from '../platform/Platform.js'
 
 function getMobilePlatform (is) {
   if (is.ios === true) return 'ios'

package/src/{history.js → plugins/private.history/History.js}

@@ -1,5 +1,5 @@
-import { client } from './plugins/Platform.js'
-import { noop } from './utils/event.js'
+import { client } from '../platform/Platform.js'
+import { noop } from '../../utils/event/event.js'
 
 const getTrue = () => true
 

package/src/plugins/{Screen.js → screen/Screen.js}

@@ -1,13 +1,13 @@
-import { isRuntimeSsrPreHydration, client } from './Platform.js'
+import { isRuntimeSsrPreHydration, client } from '../platform/Platform.js'
 
-import defineReactivePlugin from '../utils/private/define-reactive-plugin.js'
-import { listenOpts, noop } from '../utils/event.js'
-import debounce from '../utils/debounce.js'
+import { createReactivePlugin } from '../../utils/private.create/create.js'
+import { listenOpts, noop } from '../../utils/event/event.js'
+import debounce from '../../utils/debounce/debounce.js'
 
 const SIZE_LIST = [ 'sm', 'md', 'lg', 'xl' ]
 const { passive } = listenOpts
 
-export default defineReactivePlugin({
+export default createReactivePlugin({
   width: 0,
   height: 0,
   name: 'xs',