quasar 2.18.7 → 2.19.0

package/src/plugins/private.history/History.js

@@ -3,21 +3,20 @@ import { noop } from '../../utils/event/event.js'
 
 const getTrue = () => true
 
-function filterInvalidPath (path) {
-  return typeof path === 'string'
-    && path !== ''
-    && path !== '/'
-    && path !== '#/'
+function filterInvalidPath(path) {
+  return (
+    typeof path === 'string' && path !== '' && path !== '/' && path !== '#/'
+  )
 }
 
-function normalizeExitPath (path) {
-  path.startsWith('#') === true && (path = path.substring(1))
-  path.startsWith('/') === false && (path = '/' + path)
-  path.endsWith('/') === true && (path = path.substring(0, path.length - 1))
+function normalizeExitPath(path) {
+  if (path.startsWith('#') === true) path = path.substring(1)
+  if (path.startsWith('/') === false) path = '/' + path
+  if (path.endsWith('/') === true) path = path.substring(0, path.length - 1)
   return '#' + path
 }
 
-function getShouldExitFn (cfg) {
+function getShouldExitFn(cfg) {
   if (cfg.backButtonExit === false) {
     return () => false
   }
@@ -27,12 +26,14 @@ function getShouldExitFn (cfg) {
   }
 
   // Add default root path
-  const exitPaths = [ '#/' ]
+  const exitPaths = ['#/']
 
   // Add custom exit paths
-  Array.isArray(cfg.backButtonExit) === true && exitPaths.push(
-    ...cfg.backButtonExit.filter(filterInvalidPath).map(normalizeExitPath)
-  )
+  if (Array.isArray(cfg.backButtonExit) === true) {
+    exitPaths.push(
+      ...cfg.backButtonExit.filter(filterInvalidPath).map(normalizeExitPath)
+    )
+  }
 
   return () => exitPaths.includes(window.location.hash)
 }
@@ -42,14 +43,14 @@ export default {
   add: noop,
   remove: noop,
 
-  install ({ $q }) {
+  install({ $q }) {
     if (__QUASAR_SSR_SERVER__ || this.__installed === true) return
 
     const { cordova, capacitor } = client.is
 
     if (cordova !== true && capacitor !== true) return
 
-    const qConf = $q.config[ cordova === true ? 'cordova' : 'capacitor' ]
+    const qConf = $q.config[cordova === true ? 'cordova' : 'capacitor']
 
     if (qConf?.backButton === false) return
 
@@ -57,10 +58,12 @@ export default {
     // then we got nothing to do
     if (
       // if we're on Capacitor mode
-      capacitor === true
+      capacitor === true &&
       // and it's also not in Capacitor's main instance
-      && (window.Capacitor === void 0 || window.Capacitor.Plugins.App === void 0)
-    ) return
+      (window.Capacitor === void 0 || window.Capacitor.Plugins.App === void 0)
+    ) {
+      return
+    }
 
     this.add = entry => {
       if (entry.condition === void 0) {
@@ -77,25 +80,20 @@ export default {
     }
 
     const shouldExit = getShouldExitFn(
-      Object.assign(
-        { backButtonExit: true },
-        qConf
-      )
+      Object.assign({ backButtonExit: true }, qConf)
     )
 
     const backHandler = () => {
       if (this.__history.length) {
-        const entry = this.__history[ this.__history.length - 1 ]
+        const entry = this.__history[this.__history.length - 1]
 
         if (entry.condition() === true) {
           this.__history.pop()
           entry.handler()
         }
-      }
-      else if (shouldExit() === true) {
+      } else if (shouldExit() === true) {
         navigator.app.exitApp()
-      }
-      else {
+      } else {
         window.history.back()
       }
     }
@@ -104,8 +102,7 @@ export default {
       document.addEventListener('deviceready', () => {
         document.addEventListener('backbutton', backHandler, false)
       })
-    }
-    else {
+    } else {
       window.Capacitor.Plugins.App.addListener('backButton', backHandler)
     }
   }

package/src/plugins/screen/Screen.js

@@ -4,180 +4,193 @@ 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 SIZE_LIST = ['sm', 'md', 'lg', 'xl']
 const { passive } = listenOpts
 
-export default createReactivePlugin({
-  width: 0,
-  height: 0,
-  name: 'xs',
-
-  sizes: {
-    sm: 600,
-    md: 1024,
-    lg: 1440,
-    xl: 1920
-  },
-
-  lt: {
-    sm: true,
-    md: true,
-    lg: true,
-    xl: true
-  },
-  gt: {
-    xs: false,
+export default createReactivePlugin(
+  {
+    width: 0,
+    height: 0,
+    name: 'xs',
+
+    sizes: {
+      sm: 600,
+      md: 1024,
+      lg: 1440,
+      xl: 1920
+    },
+
+    lt: {
+      sm: true,
+      md: true,
+      lg: true,
+      xl: true
+    },
+    gt: {
+      xs: false,
+      sm: false,
+      md: false,
+      lg: false
+    },
+
+    xs: true,
     sm: false,
     md: false,
-    lg: false
+    lg: false,
+    xl: false
   },
+  {
+    setSizes: noop,
+    setDebounce: noop,
 
-  xs: true,
-  sm: false,
-  md: false,
-  lg: false,
-  xl: false
-}, {
-  setSizes: noop,
-  setDebounce: noop,
-
-  install ({ $q, onSSRHydrated }) {
-    $q.screen = this
+    install({ $q, onSSRHydrated }) {
+      $q.screen = this
 
-    if (__QUASAR_SSR_SERVER__) return
+      if (__QUASAR_SSR_SERVER__) return
 
-    if (this.__installed === true) {
-      if ($q.config.screen !== void 0) {
-        if ($q.config.screen.bodyClasses === false) {
-          document.body.classList.remove(`screen--${ this.name }`)
-        }
-        else {
-          this.__update(true)
+      if (this.__installed === true) {
+        if ($q.config.screen !== void 0) {
+          if ($q.config.screen.bodyClasses === false) {
+            document.body.classList.remove(`screen--${this.name}`)
+          } else {
+            this.__update(true)
+          }
         }
-      }
-      return
-    }
-
-    const { visualViewport } = window
-    const target = visualViewport || window
-    const scrollingElement = document.scrollingElement || document.documentElement
-    const getSize = visualViewport === void 0 || client.is.mobile === true
-      ? () => [
-          Math.max(window.innerWidth, scrollingElement.clientWidth),
-          Math.max(window.innerHeight, scrollingElement.clientHeight)
-        ]
-      : () => [
-          visualViewport.width * visualViewport.scale + window.innerWidth - scrollingElement.clientWidth,
-          visualViewport.height * visualViewport.scale + window.innerHeight - scrollingElement.clientHeight
-        ]
-
-    const classes = $q.config.screen?.bodyClasses === true
-
-    this.__update = force => {
-      const [ w, h ] = getSize()
-
-      if (h !== this.height) {
-        this.height = h
-      }
-
-      if (w !== this.width) {
-        this.width = w
-      }
-      else if (force !== true) {
         return
       }
 
-      let s = this.sizes
-
-      this.gt.xs = w >= s.sm
-      this.gt.sm = w >= s.md
-      this.gt.md = w >= s.lg
-      this.gt.lg = w >= s.xl
-      this.lt.sm = w < s.sm
-      this.lt.md = w < s.md
-      this.lt.lg = w < s.lg
-      this.lt.xl = w < s.xl
-      this.xs = this.lt.sm
-      this.sm = this.gt.xs === true && this.lt.md === true
-      this.md = this.gt.sm === true && this.lt.lg === true
-      this.lg = this.gt.md === true && this.lt.xl === true
-      this.xl = this.gt.lg
-
-      s = (this.xs === true && 'xs')
-        || (this.sm === true && 'sm')
-        || (this.md === true && 'md')
-        || (this.lg === true && 'lg')
-        || 'xl'
-
-      if (s !== this.name) {
-        if (classes === true) {
-          document.body.classList.remove(`screen--${ this.name }`)
-          document.body.classList.add(`screen--${ s }`)
+      const { visualViewport } = window
+      const target = visualViewport || window
+      const scrollingElement =
+        document.scrollingElement || document.documentElement
+      const getSize =
+        visualViewport === void 0 || client.is.mobile === true
+          ? () => [
+              Math.max(window.innerWidth, scrollingElement.clientWidth),
+              Math.max(window.innerHeight, scrollingElement.clientHeight)
+            ]
+          : () => [
+              visualViewport.width * visualViewport.scale +
+                window.innerWidth -
+                scrollingElement.clientWidth,
+              visualViewport.height * visualViewport.scale +
+                window.innerHeight -
+                scrollingElement.clientHeight
+            ]
+
+      const classes = $q.config.screen?.bodyClasses === true
+
+      this.__update = force => {
+        const [w, h] = getSize()
+
+        if (h !== this.height) {
+          this.height = h
         }
-        this.name = s
-      }
-    }
-
-    let updateEvt, updateSizes = {}, updateDebounce = 16
 
-    this.setSizes = sizes => {
-      SIZE_LIST.forEach(name => {
-        if (sizes[ name ] !== void 0) {
-          updateSizes[ name ] = sizes[ name ]
+        if (w !== this.width) {
+          this.width = w
+        } else if (force !== true) {
+          return
         }
-      })
-    }
-    this.setDebounce = deb => {
-      updateDebounce = deb
-    }
-
-    const start = () => {
-      const style = getComputedStyle(document.body)
 
-      // if css props available
-      if (style.getPropertyValue('--q-size-sm')) {
-        SIZE_LIST.forEach(name => {
-          this.sizes[ name ] = parseInt(style.getPropertyValue(`--q-size-${ name }`), 10)
-        })
+        let s = this.sizes
+
+        this.gt.xs = w >= s.sm
+        this.gt.sm = w >= s.md
+        this.gt.md = w >= s.lg
+        this.gt.lg = w >= s.xl
+        this.lt.sm = w < s.sm
+        this.lt.md = w < s.md
+        this.lt.lg = w < s.lg
+        this.lt.xl = w < s.xl
+        this.xs = this.lt.sm
+        this.sm = this.gt.xs === true && this.lt.md === true
+        this.md = this.gt.sm === true && this.lt.lg === true
+        this.lg = this.gt.md === true && this.lt.xl === true
+        this.xl = this.gt.lg
+
+        s =
+          (this.xs === true && 'xs') ||
+          (this.sm === true && 'sm') ||
+          (this.md === true && 'md') ||
+          (this.lg === true && 'lg') ||
+          'xl'
+
+        if (s !== this.name) {
+          if (classes === true) {
+            document.body.classList.remove(`screen--${this.name}`)
+            document.body.classList.add(`screen--${s}`)
+          }
+          this.name = s
+        }
       }
 
+      let updateEvt,
+        updateSizes = {},
+        updateDebounce = 16
+
       this.setSizes = sizes => {
         SIZE_LIST.forEach(name => {
-          if (sizes[ name ]) {
-            this.sizes[ name ] = sizes[ name ]
+          if (sizes[name] !== void 0) {
+            updateSizes[name] = sizes[name]
           }
         })
-        this.__update(true)
       }
-
-      this.setDebounce = delay => {
-        updateEvt !== void 0 && target.removeEventListener('resize', updateEvt, passive)
-        updateEvt = delay > 0
-          ? debounce(this.__update, delay)
-          : this.__update
-        target.addEventListener('resize', updateEvt, passive)
+      this.setDebounce = deb => {
+        updateDebounce = deb
       }
 
-      this.setDebounce(updateDebounce)
+      const start = () => {
+        const style = getComputedStyle(document.body)
+
+        // if css props available
+        if (style.getPropertyValue('--q-size-sm')) {
+          SIZE_LIST.forEach(name => {
+            this.sizes[name] = parseInt(
+              style.getPropertyValue(`--q-size-${name}`),
+              10
+            )
+          })
+        }
 
-      if (Object.keys(updateSizes).length !== 0) {
-        this.setSizes(updateSizes)
-        updateSizes = void 0 // free up memory
-      }
-      else {
-        this.__update()
-      }
+        this.setSizes = sizes => {
+          SIZE_LIST.forEach(name => {
+            if (sizes[name]) {
+              this.sizes[name] = sizes[name]
+            }
+          })
+          this.__update(true)
+        }
 
-      // due to optimizations, this would be left out otherwise
-      classes === true && this.name === 'xs'
-        && document.body.classList.add('screen--xs')
-    }
+        this.setDebounce = delay => {
+          if (updateEvt !== void 0) {
+            target.removeEventListener('resize', updateEvt, passive)
+          }
 
-    if (isRuntimeSsrPreHydration.value === true) {
-      onSSRHydrated.push(start)
-    }
-    else {
-      start()
+          updateEvt = delay > 0 ? debounce(this.__update, delay) : this.__update
+          target.addEventListener('resize', updateEvt, passive)
+        }
+
+        this.setDebounce(updateDebounce)
+
+        if (Object.keys(updateSizes).length !== 0) {
+          this.setSizes(updateSizes)
+          updateSizes = void 0 // free up memory
+        } else {
+          this.__update()
+        }
+
+        // due to optimizations, this would be left out otherwise
+        if (classes === true && this.name === 'xs') {
+          document.body.classList.add('screen--xs')
+        }
+      }
+
+      if (isRuntimeSsrPreHydration.value === true) {
+        onSSRHydrated.push(start)
+      } else {
+        start()
+      }
     }
   }
-})
+)

package/src/plugins/screen/Screen.json

@@ -21,20 +21,20 @@
       "type": "Number",
       "desc": "Screen width (in pixels)",
       "reactive": true,
-      "examples": [ "452" ]
+      "examples": ["452"]
     },
 
     "height": {
       "type": "Number",
       "desc": "Screen height (in pixels)",
       "reactive": true,
-      "examples": [ "721" ]
+      "examples": ["721"]
     },
 
     "name": {
       "type": "String",
       "desc": "Tells current window breakpoint",
-      "values": [ "'xs'", "'sm'", "'md'", "'lg'", "'xl'" ],
+      "values": ["'xs'", "'sm'", "'md'", "'lg'", "'xl'"],
       "reactive": true
     },
 
@@ -60,7 +60,7 @@
         }
       },
       "reactive": true,
-      "examples": [ "{ sm: 600, md: 1024, lg: 1440, xl: 1920 }" ]
+      "examples": ["{ sm: 600, md: 1024, lg: 1440, xl: 1920 }"]
     },
 
     "lt": {
@@ -85,7 +85,7 @@
           "desc": "Is current screen width lower than this breakpoint's lowest limit?"
         }
       },
-      "examples": [ "{ sm: false, md: true, lg: true, xl: true }" ]
+      "examples": ["{ sm: false, md: true, lg: true, xl: true }"]
     },
 
     "gt": {
@@ -110,7 +110,7 @@
           "desc": "Is current screen width greater than this breakpoint's max limit?"
         }
       },
-      "examples": [ "{ xs: true, sm: true, md: false, lg: false, xl: false }" ]
+      "examples": ["{ xs: true, sm: true, md: false, lg: false, xl: false }"]
     },
 
     "xs": {

package/src/plugins/screen/Screen.test.js

@@ -14,13 +14,13 @@ afterEach(() => {
   vi.restoreAllMocks()
 })
 
-function setWidth (width) {
+function setWidth(width) {
   window.innerWidth = width
   window.dispatchEvent(new Event('resize'))
   vi.runAllTimers()
 }
 
-function setHeight (height) {
+function setHeight(height) {
   window.innerHeight = height
   window.dispatchEvent(new Event('resize'))
   vi.runAllTimers()
@@ -67,7 +67,7 @@ describe('[Screen API]', () => {
     describe('[(prop)name]', () => {
       test('is correct type', () => {
         mountPlugin()
-        expect([ 'xs', 'sm', 'md', 'lg', 'xl' ]).toContain(Screen.name)
+        expect(['xs', 'sm', 'md', 'lg', 'xl']).toContain(Screen.name)
       })
 
       test('is reactive', () => {
@@ -312,13 +312,9 @@ describe('[Screen API]', () => {
           xl: 25
         }
 
-        expect(
-          Screen.setSizes(newSizes)
-        ).toBeUndefined()
+        expect(Screen.setSizes(newSizes)).toBeUndefined()
 
-        expect(
-          Screen.sizes
-        ).toStrictEqual(newSizes)
+        expect(Screen.sizes).toStrictEqual(newSizes)
 
         setWidth(5)
         expect(Screen).toMatchObject({
@@ -435,9 +431,7 @@ describe('[Screen API]', () => {
     describe('[(method)setDebounce]', () => {
       test('should be callable', () => {
         mountPlugin()
-        expect(
-          Screen.setDebounce(1000)
-        ).toBeUndefined()
+        expect(Screen.setDebounce(1000)).toBeUndefined()
 
         window.innerWidth = 100
         window.dispatchEvent(new Event('resize'))

package/src/plugins/storage/LocalStorage.js

@@ -1,12 +1,13 @@
 import { client } from '../platform/Platform.js'
 import { getEmptyStorage, getStorage } from './engine/web-storage.js'
 
-const storage = __QUASAR_SSR_SERVER__ || client.has.webStorage === false
-  ? getEmptyStorage()
-  : getStorage('local')
+const storage =
+  __QUASAR_SSR_SERVER__ || client.has.webStorage === false
+    ? getEmptyStorage()
+    : getStorage('local')
 
 const Plugin = {
-  install ({ $q }) {
+  install({ $q }) {
     $q.localStorage = storage
   }
 }

package/src/plugins/storage/LocalStorage.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "plugins/storage/engine/web-storage" ],
+  "mixins": ["plugins/storage/engine/web-storage"],
 
   "injection": "$q.localStorage"
 }