quasar 2.19.2 → 2.20.0

package/src/plugins/screen/Screen.js

@@ -1,4 +1,4 @@
-import { isRuntimeSsrPreHydration, client } from '../platform/Platform.js'
+import { client, isRuntimeSsrPreHydration } from '../platform/Platform.js'
 
 import { createReactivePlugin } from '../../utils/private.create/create.js'
 import { listenOpts, noop } from '../../utils/event/event.js'
@@ -48,9 +48,9 @@ export default createReactivePlugin(
 
       if (__QUASAR_SSR_SERVER__) return
 
-      if (this.__installed === true) {
+      if (this.__installed) {
         if ($q.config.screen !== void 0) {
-          if ($q.config.screen.bodyClasses === false) {
+          if (!$q.config.screen.bodyClasses) {
             document.body.classList.remove(`screen--${this.name}`)
           } else {
             this.__update(true)
@@ -64,7 +64,7 @@ export default createReactivePlugin(
       const scrollingElement =
         document.scrollingElement || document.documentElement
       const getSize =
-        visualViewport === void 0 || client.is.mobile === true
+        visualViewport === void 0 || client.is.mobile
           ? () => [
               Math.max(window.innerWidth, scrollingElement.clientWidth),
               Math.max(window.innerHeight, scrollingElement.clientHeight)
@@ -78,7 +78,7 @@ export default createReactivePlugin(
                 scrollingElement.clientHeight
             ]
 
-      const classes = $q.config.screen?.bodyClasses === true
+      const useBodyClasses = $q.config.screen?.bodyClasses === true
 
       this.__update = force => {
         const [w, h] = getSize()
@@ -104,20 +104,20 @@ export default createReactivePlugin(
         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.sm = this.gt.xs && this.lt.md
+        this.md = this.gt.sm && this.lt.lg
+        this.lg = this.gt.md && this.lt.xl
         this.xl = this.gt.lg
 
         s =
-          (this.xs === true && 'xs') ||
-          (this.sm === true && 'sm') ||
-          (this.md === true && 'md') ||
-          (this.lg === true && 'lg') ||
+          (this.xs && 'xs') ||
+          (this.sm && 'sm') ||
+          (this.md && 'md') ||
+          (this.lg && 'lg') ||
           'xl'
 
         if (s !== this.name) {
-          if (classes === true) {
+          if (useBodyClasses) {
             document.body.classList.remove(`screen--${this.name}`)
             document.body.classList.add(`screen--${s}`)
           }
@@ -146,7 +146,7 @@ export default createReactivePlugin(
         // if css props available
         if (style.getPropertyValue('--q-size-sm')) {
           SIZE_LIST.forEach(name => {
-            this.sizes[name] = parseInt(
+            this.sizes[name] = Number.parseInt(
               style.getPropertyValue(`--q-size-${name}`),
               10
             )
@@ -181,12 +181,12 @@ export default createReactivePlugin(
         }
 
         // due to optimizations, this would be left out otherwise
-        if (classes === true && this.name === 'xs') {
+        if (useBodyClasses && this.name === 'xs') {
           document.body.classList.add('screen--xs')
         }
       }
 
-      if (isRuntimeSsrPreHydration.value === true) {
+      if (isRuntimeSsrPreHydration.value) {
         onSSRHydrated.push(start)
       } else {
         start()

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

@@ -1,4 +1,4 @@
-import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
 
 import Screen from './Screen.js'

package/src/plugins/storage/LocalStorage.js

@@ -2,16 +2,15 @@ import { client } from '../platform/Platform.js'
 import { getEmptyStorage, getStorage } from './engine/web-storage.js'
 
 const storage =
-  __QUASAR_SSR_SERVER__ || client.has.webStorage === false
+  __QUASAR_SSR_SERVER__ || !client.has.webStorage
     ? getEmptyStorage()
     : getStorage('local')
 
 const Plugin = {
   install({ $q }) {
     $q.localStorage = storage
-  }
+  },
+  ...storage
 }
 
-Object.assign(Plugin, storage)
-
 export default Plugin

package/src/plugins/storage/LocalStorage.test.js

@@ -1,5 +1,5 @@
-import { describe, test, expect } from 'vitest'
-import { mount, config } from '@vue/test-utils'
+import { describe, expect, test } from 'vitest'
+import { config, mount } from '@vue/test-utils'
 
 import LocalStorage from './LocalStorage.js'
 

package/src/plugins/storage/SessionStorage.js

@@ -2,16 +2,15 @@ import { client } from '../platform/Platform.js'
 import { getEmptyStorage, getStorage } from './engine/web-storage.js'
 
 const storage =
-  __QUASAR_SSR_SERVER__ || client.has.webStorage === false
+  __QUASAR_SSR_SERVER__ || !client.has.webStorage
     ? getEmptyStorage()
     : getStorage('session')
 
 const Plugin = {
   install({ $q }) {
     $q.sessionStorage = storage
-  }
+  },
+  ...storage
 }
 
-Object.assign(Plugin, storage)
-
 export default Plugin

package/src/plugins/storage/SessionStorage.test.js

@@ -1,5 +1,5 @@
-import { describe, test, expect } from 'vitest'
-import { mount, config } from '@vue/test-utils'
+import { describe, expect, test } from 'vitest'
+import { config, mount } from '@vue/test-utils'
 
 import SessionStorage from './SessionStorage.js'
 

package/src/plugins/storage/engine/web-storage.js

@@ -2,10 +2,10 @@ import { noop } from '../../../utils/event/event.js'
 import { isDate, isRegexp } from '../../../utils/is/is.js'
 
 function encode(value) {
-  if (isDate(value) === true) {
+  if (isDate(value)) {
     return '__q_date|' + value.getTime()
   }
-  if (isRegexp(value) === true) {
+  if (isRegexp(value)) {
     return '__q_expr|' + value.source
   }
   if (typeof value === 'number') {
@@ -29,55 +29,62 @@ function encode(value) {
   return value
 }
 
+const numberRE = /^-?\d+$/
+
 function decode(value) {
   const length = value.length
-  if (length < 9) {
-    // then it wasn't encoded by us
-    return value
-  }
 
-  const type = value.substring(0, 8)
-  const source = value.substring(9)
+  // if it wasn't encoded by us
+  if (length < 9) return value
+
+  const type = value.slice(0, 8)
+  const source = value.slice(9)
 
   switch (type) {
-    case '__q_date':
-      const number = Number(source)
-      return new Date(Number.isNaN(number) === true ? source : number)
+    case '__q_date': {
+      return new Date(
+        numberRE.test(source) ? Number.parseInt(source, 10) : source
+      )
+    }
 
-    case '__q_expr':
+    case '__q_expr': {
       return new RegExp(source)
+    }
 
-    case '__q_numb':
+    case '__q_numb': {
       return Number(source)
+    }
 
-    case '__q_bool':
+    case '__q_bool': {
       return Boolean(source === '1')
+    }
 
-    case '__q_strn':
+    case '__q_strn': {
       return String(source)
+    }
 
-    case '__q_objt':
+    case '__q_objt': {
       return JSON.parse(source)
+    }
 
-    default:
+    default: {
       // hmm, we reached here, we don't know the type,
       // then it means it wasn't encoded by us, so just
       // return whatever value it is
       return value
+    }
   }
 }
 
 export function getEmptyStorage() {
-  const getVal = () => null
-
   return {
     has: () => false, // alias for hasItem; TODO: remove in Qv3
     hasItem: () => false,
     getLength: () => 0,
-    getItem: getVal,
-    getIndex: getVal,
-    getKey: getVal,
-    getAll: () => {},
+    getItem: () => null,
+    getIndex: () => null,
+    getKey: () => null,
+    getAll: () => ({}),
     getAllKeys: () => [],
     set: noop, // alias for setItem; TODO: remove in Qv3
     setItem: noop,

package/src/plugins/storage/engine/web-storage.test.js

@@ -1,4 +1,4 @@
-import { describe, test, expect } from 'vitest'
+import { describe, expect, test } from 'vitest'
 
 import { getEmptyStorage, getStorage } from './web-storage.js'
 

package/src/utils/EventBus/EventBus.js

@@ -9,7 +9,7 @@ export default class EventBus {
   }
 
   on(name, callback, ctx) {
-    ;(this.__stack[name] || (this.__stack[name] = [])).push({
+    ;(this.__stack[name] ||= []).push({
       fn: callback,
       ctx
     })
@@ -27,13 +27,12 @@ export default class EventBus {
     return this.on(name, listener, ctx) // chainable
   }
 
-  emit(name) {
+  emit(name, ...args) {
     const list = this.__stack[name]
 
     if (list !== void 0) {
-      const params = [].slice.call(arguments, 1)
       list.forEach(entry => {
-        entry.fn.apply(entry.ctx, params)
+        entry.fn.apply(entry.ctx, args)
       })
     }
 

package/src/utils/EventBus/EventBus.test.js

@@ -1,4 +1,4 @@
-import { describe, test, expect, vi } from 'vitest'
+import { describe, expect, test, vi } from 'vitest'
 
 import EventBus from './EventBus.js'
 

package/src/utils/clone/clone.test.js

@@ -1,4 +1,4 @@
-import { describe, test, expect } from 'vitest'
+import { describe, expect, test } from 'vitest'
 
 import clone from './clone.js'
 
@@ -11,7 +11,7 @@ describe('[clone API]', () => {
         ['Boolean', true],
         ['Null', null],
         ['Undefined', void 0],
-        ['NaN', NaN],
+        ['NaN', Number.NaN],
         ['Infinity', Infinity]
       ])('clone(%s)', (_, value) => {
         const result = clone(value)
@@ -61,9 +61,7 @@ describe('[clone API]', () => {
         const set = new Set([1, 2, 3])
         const result = clone(set)
 
-        expect(Array.from(result.values())).toStrictEqual(
-          Array.from(set.values())
-        )
+        expect([...result.values()]).toStrictEqual([...set.values()])
 
         expect(result).not.toBe(set)
       })
@@ -75,9 +73,7 @@ describe('[clone API]', () => {
         ])
         const result = clone(map)
 
-        expect(Array.from(result.entries())).toStrictEqual(
-          Array.from(map.entries())
-        )
+        expect([...result.entries()]).toStrictEqual([...map.entries()])
 
         expect(result).not.toBe(map)
       })

package/src/utils/colors/colors.js

@@ -37,7 +37,7 @@ export function hexToRgb(hex) {
     hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3]
   }
 
-  const num = parseInt(hex, 16)
+  const num = Number.parseInt(hex, 16)
 
   return hex.length > 6
     ? {
@@ -62,36 +62,42 @@ export function hsvToRgb({ h, s, v, a }) {
     t = v * (1 - (1 - f) * s)
 
   switch (i % 6) {
-    case 0:
+    case 0: {
       r = v
       g = t
       b = p
       break
-    case 1:
+    }
+    case 1: {
       r = q
       g = v
       b = p
       break
-    case 2:
+    }
+    case 2: {
       r = p
       g = v
       b = t
       break
-    case 3:
+    }
+    case 3: {
       r = p
       g = q
       b = v
       break
-    case 4:
+    }
+    case 4: {
       r = t
       g = p
       b = v
       break
-    case 5:
+    }
+    case 5: {
       r = v
       g = p
       b = q
       break
+    }
   }
 
   return {
@@ -111,21 +117,25 @@ export function rgbToHsv({ r, g, b, a }) {
   let h
 
   switch (max) {
-    case min:
+    case min: {
       h = 0
       break
-    case r:
+    }
+    case r: {
       h = g - b + d * (g < b ? 6 : 0)
       h /= 6 * d
       break
-    case g:
+    }
+    case g: {
       h = b - r + d * 2
       h /= 6 * d
       break
-    case b:
+    }
+    case b: {
       h = r - g + d * 4
       h /= 6 * d
       break
+    }
   }
 
   return {
@@ -141,23 +151,22 @@ export function textToRgb(str) {
     throw new TypeError('Expected a string')
   }
 
-  const color = str.replace(/ /g, '')
-
+  const color = str.replaceAll(' ', '')
   const m = reRGBA.exec(color)
-
-  if (m === null) {
-    return hexToRgb(color)
-  }
+  if (m === null) return hexToRgb(color)
 
   const rgb = {
-    r: Math.min(255, parseInt(m[2], 10)),
-    g: Math.min(255, parseInt(m[3], 10)),
-    b: Math.min(255, parseInt(m[4], 10))
+    r: Math.min(255, Math.max(0, Number.parseInt(m[2], 10))),
+    g: Math.min(255, Math.max(0, Number.parseInt(m[3], 10))),
+    b: Math.min(255, Math.max(0, Number.parseInt(m[4], 10)))
   }
 
   if (m[1]) {
-    const alpha = parseFloat(m[5])
-    rgb.a = Math.min(1, isNaN(alpha) === true ? 1 : alpha) * 100
+    const alpha = Number.parseFloat(m[5])
+    const safeAlpha = Number.isFinite(alpha)
+      ? Math.max(0, Math.min(1, alpha))
+      : 1
+    rgb.a = Math.round(safeAlpha * 100)
   }
 
   return rgb
@@ -182,9 +191,9 @@ export function lighten(color, percent) {
   return (
     '#' +
     (
-      0x1000000 +
-      (Math.round((t - R) * p) + R) * 0x10000 +
-      (Math.round((t - G) * p) + G) * 0x100 +
+      0x1_00_00_00 +
+      (Math.round((t - R) * p) + R) * 0x1_00_00 +
+      (Math.round((t - G) * p) + G) * 0x1_00 +
       (Math.round((t - B) * p) + B)
     )
       .toString(16)
@@ -201,9 +210,9 @@ export function luminosity(color) {
     r = rgb.r / 255,
     g = rgb.g / 255,
     b = rgb.b / 255,
-    R = r <= 0.03928 ? r / 12.92 : ((r + 0.055) / 1.055) ** 2.4,
-    G = g <= 0.03928 ? g / 12.92 : ((g + 0.055) / 1.055) ** 2.4,
-    B = b <= 0.03928 ? b / 12.92 : ((b + 0.055) / 1.055) ** 2.4
+    R = r <= 0.039_28 ? r / 12.92 : ((r + 0.055) / 1.055) ** 2.4,
+    G = g <= 0.039_28 ? g / 12.92 : ((g + 0.055) / 1.055) ** 2.4,
+    B = b <= 0.039_28 ? b / 12.92 : ((b + 0.055) / 1.055) ** 2.4
   return 0.2126 * R + 0.7152 * G + 0.0722 * B
 }
 
@@ -277,7 +286,7 @@ export function getPaletteColor(colorName) {
   const el = document.createElement('div')
 
   el.className = `text-${colorName} invisible fixed no-pointer-events`
-  document.body.appendChild(el)
+  document.body.append(el)
 
   const result = getComputedStyle(el).getPropertyValue('color')
 

package/src/utils/colors/colors.test.js

@@ -1,6 +1,6 @@
 // oxlint-disable import/no-named-as-default-member
 
-import { describe, test, expect } from 'vitest'
+import { describe, expect, test } from 'vitest'
 
 import colors, { rgbToString } from './colors.js'
 
@@ -249,7 +249,7 @@ describe('[colors API]', () => {
         ['yellow', { r: 255, g: 255, b: 0 }, 0.9278],
         ['cyan', { r: 0, g: 255, b: 255 }, 0.7874],
         ['magenta', { r: 255, g: 0, b: 255 }, 0.2848],
-        ['gray', { r: 128, g: 128, b: 128 }, 0.215859375]
+        ['gray', { r: 128, g: 128, b: 128 }, 0.215_859_375]
       ])('luminosity(%s)', (_, value, expected) => {
         expect(colors.luminosity(value)).toBeCloseTo(expected)
       })

package/src/utils/copy-to-clipboard/copy-to-clipboard.js

@@ -6,10 +6,11 @@ function fallback(text) {
   area.contentEditable = 'true'
   area.style.position = 'fixed' // avoid scrolling to bottom
 
+  // oxlint-disable-next-line unicorn/consistent-function-scoping
   const fn = () => {}
   addFocusout(fn)
 
-  document.body.appendChild(area)
+  document.body.append(area)
   area.focus()
   area.select()
 
@@ -22,14 +23,8 @@ function fallback(text) {
 }
 
 export default function copyToClipboard(text) {
-  return navigator.clipboard !== void 0
-    ? navigator.clipboard.writeText(text)
-    : new Promise((resolve, reject) => {
-        const res = fallback(text)
-        if (res) {
-          resolve(true)
-        } else {
-          reject(res)
-        }
-      })
+  if (navigator.clipboard) return navigator.clipboard.writeText(text)
+
+  const res = fallback(text)
+  return res ? Promise.resolve(true) : Promise.reject(res)
 }

package/src/utils/create-meta-mixin/create-meta-mixin.js

@@ -1,6 +1,6 @@
 import { clientList, planClientUpdate } from '../../plugins/meta/Meta.js'
 
-export default metaOptions => {
+export default function createMetaMixin(metaOptions) {
   if (__QUASAR_SSR_SERVER__) {
     return {
       created:
@@ -43,7 +43,7 @@ export default metaOptions => {
       watch: {
         __qMetaOptions(val) {
           this.__qMeta.val = val
-          if (this.__qMeta.active === true) planClientUpdate()
+          if (this.__qMeta.active) planClientUpdate()
         }
       },
 

package/src/utils/create-uploader-component/create-uploader-component.js

@@ -1,6 +1,6 @@
 import {
-  coreProps,
   coreEmits,
+  coreProps,
   getRenderer
 } from '../../components/uploader/uploader-core.js'
 
@@ -10,8 +10,13 @@ import { isObject } from '../is/is.js'
 
 const coreEmitsObject = getEmitsObject(coreEmits)
 
-export default ({ name, props, emits, injectPlugin }) =>
-  createComponent({
+export default function createUploaderComponent({
+  name,
+  props,
+  emits,
+  injectPlugin
+}) {
+  return createComponent({
     name,
 
     props: {
@@ -19,12 +24,12 @@ export default ({ name, props, emits, injectPlugin }) =>
       ...props
     },
 
-    emits:
-      isObject(emits) === true
-        ? { ...coreEmitsObject, ...emits }
-        : [...coreEmits, ...emits],
+    emits: isObject(emits)
+      ? { ...coreEmitsObject, ...emits }
+      : [...coreEmits, ...emits],
 
     setup(_, { expose }) {
       return getRenderer(injectPlugin, expose)
     }
   })
+}

package/src/utils/css-var/get-css-var.test.js

@@ -1,4 +1,4 @@
-import { describe, test, expect } from 'vitest'
+import { describe, expect, test } from 'vitest'
 
 import getCssVar from './get-css-var.js'
 
@@ -13,7 +13,7 @@ describe('[getCssVar API]', () => {
 
       test('getCssVar(prop, el)', () => {
         const el = document.createElement('div')
-        document.body.appendChild(el)
+        document.body.append(el)
         el.style.setProperty('--q-my-prop', 'some-value')
 
         expect.soft(getCssVar('my-prop', el)).toBe('some-value')

package/src/utils/css-var/set-css-var.test.js

@@ -1,4 +1,4 @@
-import { describe, test, expect } from 'vitest'
+import { describe, expect, test } from 'vitest'
 
 import setCssVar from './set-css-var.js'
 
@@ -15,7 +15,7 @@ describe('[setCssVar API]', () => {
 
       test('setCss(prop, el)', () => {
         const el = document.createElement('div')
-        document.body.appendChild(el)
+        document.body.append(el)
 
         expect.soft(setCssVar('my-prop', 'cool', el)).toBeUndefined()