quasar 2.19.3 → 2.20.0

package/src/composables/use-tick/use-tick.test.js

@@ -1,5 +1,5 @@
-import { describe, test, expect, vi, afterEach } from 'vitest'
-import { mount, flushPromises } from '@vue/test-utils'
+import { afterEach, describe, expect, test, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
 import { defineComponent } from 'vue'
 
 import useTick from './use-tick.js'

package/src/composables/use-timeout/use-timeout.js

@@ -1,4 +1,4 @@
-import { onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { getCurrentInstance, onBeforeUnmount, onDeactivated } from 'vue'
 
 import { vmIsDestroyed } from '../../utils/private.vm/vm.js'
 
@@ -28,7 +28,7 @@ export default function useTimeout() {
     registerTimeout(fn, delay) {
       removeTimeout()
 
-      if (vmIsDestroyed(vm) === false) {
+      if (!vmIsDestroyed(vm)) {
         timer = setTimeout(() => {
           timer = null
           fn()

package/src/composables/use-timeout/use-timeout.test.js

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

package/src/directives/close-popup/ClosePopup.js

@@ -14,15 +14,10 @@ import getSSRProps from '../../utils/private.noop-ssr-directive-transform/noop-s
  */
 
 function getDepth(value) {
-  if (value === false) {
-    return 0
-  }
-  if (value === true || value === void 0) {
-    return 1
-  }
+  if (value === false) return 0
+  if (value === true || value === void 0) return 1
 
-  const depth = parseInt(value, 10)
-  return isNaN(depth) ? 0 : depth
+  return Number.parseInt(value, 10) || 0
 }
 
 export default createDirective(
@@ -48,7 +43,7 @@ export default createDirective(
             },
 
             handlerKey(evt) {
-              if (isKeyCode(evt, 13) === true) ctx.handler(evt)
+              if (isKeyCode(evt, 13)) ctx.handler(evt)
             }
           }
 

package/src/directives/intersection/Intersection.js

@@ -17,15 +17,15 @@ function update(el, ctx, value) {
     changed = ctx.cfg === void 0
   } else {
     handler = value.handler
-    cfg = Object.assign({}, defaultCfg, value.cfg)
-    changed = ctx.cfg === void 0 || isDeepEqual(ctx.cfg, cfg) === false
+    cfg = { ...defaultCfg, ...value.cfg }
+    changed = ctx.cfg === void 0 || !isDeepEqual(ctx.cfg, cfg)
   }
 
   if (ctx.handler !== handler) {
     ctx.handler = handler
   }
 
-  if (changed === true) {
+  if (changed) {
     ctx.cfg = cfg
     ctx.observer?.unobserve(el)
 
@@ -33,7 +33,7 @@ function update(el, ctx, value) {
       if (typeof ctx.handler === 'function') {
         // if observed element is part of a vue transition
         // then we need to be careful...
-        if (entry.rootBounds === null && document.body.contains(el) === true) {
+        if (entry.rootBounds === null && document.body.contains(el)) {
           ctx.observer.unobserve(el)
           ctx.observer.observe(el)
           return
@@ -41,10 +41,7 @@ function update(el, ctx, value) {
 
         const res = ctx.handler(entry, ctx.observer)
 
-        if (
-          res === false ||
-          (ctx.once === true && entry.isIntersecting === true)
-        ) {
+        if (res === false || (ctx.once && entry.isIntersecting)) {
           destroy(el)
         }
       }

package/src/directives/morph/Morph.js

@@ -30,7 +30,7 @@ function changeClass(ctx, action) {
 }
 
 function trigger(group) {
-  if (group.animating === true || group.queue.length < 2) return
+  if (group.animating || group.queue.length < 2) return
 
   const [from, to] = group.queue
 
@@ -51,8 +51,7 @@ function trigger(group) {
     ...to.opts,
     onEnd(dir, aborted) {
       to.opts.onEnd?.(dir, aborted)
-
-      if (aborted === true) return
+      if (aborted) return
 
       from.animating = false
       to.animating = false
@@ -85,8 +84,9 @@ function insertArgs(arg, ctx) {
   ctx.name = opts[0]
   ctx.group = opts[1]
 
+  const parsedOpt = Number.parseFloat(opts[2])
   Object.assign(ctx.opts, {
-    duration: isNaN(opts[2]) === true ? 300 : parseFloat(opts[2]),
+    duration: Number.isFinite(parsedOpt) ? parsedOpt : 300,
     waitFor: opts[3]
   })
 }
@@ -128,7 +128,7 @@ function updateModel(name, ctx) {
       group.model = name
       group.queue.push(ctx)
 
-      if (group.animating === false && group.queue.length === 2) {
+      if (!group.animating && group.queue.length === 2) {
         trigger(group)
       }
     }
@@ -136,9 +136,7 @@ function updateModel(name, ctx) {
     return
   }
 
-  if (ctx.animating === false) {
-    changeClass(ctx, 'add')
-  }
+  if (!ctx.animating) changeClass(ctx, 'add')
 }
 
 function updateValue(ctx, value) {
@@ -155,7 +153,7 @@ function updateValue(ctx, value) {
   if (model !== ctx.model) {
     ctx.model = model
     updateModel(model, ctx)
-  } else if (ctx.animating === false && ctx.clsAction !== void 0) {
+  } else if (!ctx.animating && ctx.clsAction !== void 0) {
     // ensure HMR
     ctx.el.classList[ctx.clsAction]('q-morph--invisible')
   }
@@ -199,16 +197,12 @@ export default createDirective(
 
           const group = morphGroups[ctx.group]
 
-          if (group !== void 0) {
-            const index = group.queue.indexOf(ctx)
-
-            if (index !== -1) {
-              group.queue = group.queue.filter(item => item !== ctx)
+          if (group?.queue.includes(ctx)) {
+            group.queue = group.queue.filter(item => item !== ctx)
 
-              if (group.queue.length === 0) {
-                group.cancel?.()
-                delete morphGroups[ctx.group]
-              }
+            if (group.queue.length === 0) {
+              group.cancel?.()
+              delete morphGroups[ctx.group]
             }
           }
 

package/src/directives/ripple/Ripple.js

@@ -1,22 +1,20 @@
 import { createDirective } from '../../utils/private.create/create.js'
 import { css } from '../../utils/dom/dom.js'
-import { position, stop, addEvt, cleanEvt } from '../../utils/event/event.js'
+import { addEvt, cleanEvt, position, stop } from '../../utils/event/event.js'
 import { isKeyCode } from '../../utils/private.keyboard/key-composition.js'
 import throttle from '../../utils/throttle/throttle.js'
 import getSSRProps from '../../utils/private.noop-ssr-directive-transform/noop-ssr-directive-transform.js'
 
 function showRipple(evt, el, ctx, forceCenter) {
-  if (ctx.modifiers.stop === true) stop(evt)
+  if (ctx.modifiers.stop) stop(evt)
 
-  const color = ctx.modifiers.color
-  let center = ctx.modifiers.center
-  center = center === true || forceCenter === true
-
-  const node = document.createElement('span'),
+  const color = ctx.modifiers.color,
+    center = ctx.modifiers.center || forceCenter === true,
+    node = document.createElement('span'),
     innerNode = document.createElement('span'),
     pos = position(evt),
     { left, top, width, height } = el.getBoundingClientRect(),
-    diameter = Math.sqrt(width * width + height * height),
+    diameter = Math.hypot(width, height),
     radius = diameter / 2,
     centerX = `${(width - diameter) / 2}px`,
     x = center ? centerX : `${pos.left - left - radius}px`,
@@ -33,8 +31,8 @@ function showRipple(evt, el, ctx, forceCenter) {
 
   node.className = `q-ripple${color ? ' text-' + color : ''}`
   node.setAttribute('dir', 'ltr')
-  node.appendChild(innerNode)
-  el.appendChild(node)
+  node.append(innerNode)
+  el.append(node)
 
   const abort = () => {
     node.remove()
@@ -61,13 +59,13 @@ function showRipple(evt, el, ctx, forceCenter) {
 }
 
 function updateModifiers(ctx, { modifiers, value, arg }) {
-  const cfg = Object.assign({}, ctx.cfg.ripple, modifiers, value)
+  const cfg = { ...ctx.cfg.ripple, ...modifiers, ...value }
   ctx.modifiers = {
     early: cfg.early === true,
     stop: cfg.stop === true,
     center: cfg.center === true,
     color: cfg.color || arg,
-    keyCodes: [].concat(cfg.keyCodes || 13)
+    keyCodes: [cfg.keyCodes || 13].flat()
   }
 }
 
@@ -92,10 +90,9 @@ export default createDirective(
 
             start(evt) {
               if (
-                ctx.enabled === true &&
-                evt.qSkipRipple !== true &&
-                evt.type ===
-                  (ctx.modifiers.early === true ? 'pointerdown' : 'click')
+                ctx.enabled &&
+                !evt.qSkipRipple &&
+                evt.type === (ctx.modifiers.early ? 'pointerdown' : 'click')
               ) {
                 showRipple(evt, el, ctx, evt.qKeyEvent === true)
               }
@@ -103,11 +100,10 @@ export default createDirective(
 
             keystart: throttle(evt => {
               if (
-                ctx.enabled === true &&
-                evt.qSkipRipple !== true &&
-                isKeyCode(evt, ctx.modifiers.keyCodes) === true &&
-                evt.type ===
-                  `key${ctx.modifiers.early === true ? 'down' : 'up'}`
+                ctx.enabled &&
+                !evt.qSkipRipple &&
+                isKeyCode(evt, ctx.modifiers.keyCodes) &&
+                evt.type === `key${ctx.modifiers.early ? 'down' : 'up'}`
               ) {
                 showRipple(evt, el, ctx, true)
               }
@@ -132,10 +128,7 @@ export default createDirective(
             if (ctx !== void 0) {
               ctx.enabled = binding.value !== false
 
-              if (
-                ctx.enabled === true &&
-                Object(binding.value) === binding.value
-              ) {
+              if (ctx.enabled && Object(binding.value) === binding.value) {
                 updateModifiers(ctx, binding)
               }
             }
@@ -149,7 +142,7 @@ export default createDirective(
               fn()
             })
             cleanEvt(ctx, 'main')
-            delete el._qripple
+            delete el.__qripple
           }
         }
       }

package/src/directives/ripple/Ripple.test.js

@@ -3,8 +3,8 @@
  * [(modifier)center]
  */
 
-import { mount, flushPromises } from '@vue/test-utils'
-import { describe, test, expect } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { describe, expect, test } from 'vitest'
 import { defineComponent, ref } from 'vue'
 
 import Ripple from './Ripple.js'

package/src/directives/scroll/Scroll.js

@@ -1,8 +1,8 @@
 import { createDirective } from '../../utils/private.create/create.js'
 import {
+  getHorizontalScrollPosition,
   getScrollTarget,
-  getVerticalScrollPosition,
-  getHorizontalScrollPosition
+  getVerticalScrollPosition
 } from '../../utils/scroll/scroll.js'
 import { listenOpts } from '../../utils/event/event.js'
 import getSSRProps from '../../utils/private.noop-ssr-directive-transform/noop-ssr-directive-transform.js'

package/src/directives/touch-hold/TouchHold.js

@@ -4,14 +4,18 @@ import { createDirective } from '../../utils/private.create/create.js'
 import {
   addEvt,
   cleanEvt,
-  position,
   leftClick,
-  stopAndPrevent,
-  noop
+  noop,
+  position,
+  stopAndPrevent
 } from '../../utils/event/event.js'
 import { clearSelection } from '../../utils/private.selection/selection.js'
 import getSSRProps from '../../utils/private.noop-ssr-directive-transform/noop-ssr-directive-transform.js'
 
+function removeBodyNonSelectable() {
+  document.body.classList.remove('non-selectable')
+}
+
 export default createDirective(
   __QUASAR_SSR_SERVER__
     ? { name: 'touch-hold', getSSRProps }
@@ -22,17 +26,14 @@ export default createDirective(
           const { modifiers } = binding
 
           // early return, we don't need to do anything
-          if (modifiers.mouse !== true && client.has.touch !== true) return
+          if (!modifiers.mouse && !client.has.touch) return
 
           const ctx = {
             handler: binding.value,
             noop,
 
             mouseStart(evt) {
-              if (
-                typeof ctx.handler === 'function' &&
-                leftClick(evt) === true
-              ) {
+              if (typeof ctx.handler === 'function' && leftClick(evt)) {
                 addEvt(ctx, 'temp', [
                   [document, 'mousemove', 'move', 'passiveCapture'],
                   [document, 'click', 'end', 'notPassiveCapture']
@@ -58,31 +59,26 @@ export default createDirective(
 
               const startTime = Date.now()
 
-              if (client.is.mobile === true) {
+              if (client.is.mobile) {
                 document.body.classList.add('non-selectable')
                 clearSelection()
 
                 ctx.styleCleanup = withDelay => {
                   ctx.styleCleanup = void 0
 
-                  const remove = () => {
-                    document.body.classList.remove('non-selectable')
-                  }
-
                   if (withDelay === true) {
                     clearSelection()
-                    setTimeout(remove, 10)
+                    setTimeout(removeBodyNonSelectable, 10)
                   } else {
-                    remove()
+                    removeBodyNonSelectable()
                   }
                 }
               }
 
               ctx.triggered = false
-              ctx.sensitivity =
-                mouseEvent === true
-                  ? ctx.mouseSensitivity
-                  : ctx.touchSensitivity
+              ctx.sensitivity = mouseEvent
+                ? ctx.mouseSensitivity
+                : ctx.touchSensitivity
 
               ctx.timer = setTimeout(() => {
                 ctx.timer = void 0
@@ -91,7 +87,7 @@ export default createDirective(
 
                 ctx.handler({
                   evt,
-                  touch: mouseEvent !== true,
+                  touch: !mouseEvent,
                   mouse: mouseEvent === true,
                   position: ctx.origin,
                   duration: Date.now() - startTime
@@ -117,7 +113,7 @@ export default createDirective(
               // delay needed otherwise selection still occurs
               ctx.styleCleanup?.(ctx.triggered)
 
-              if (ctx.triggered === true) {
+              if (ctx.triggered) {
                 if (evt !== void 0) stopAndPrevent(evt)
               } else if (ctx.timer !== void 0) {
                 clearTimeout(ctx.timer)
@@ -131,7 +127,7 @@ export default createDirective(
 
           if (typeof binding.arg === 'string' && binding.arg.length !== 0) {
             binding.arg.split(':').forEach((val, index) => {
-              const v = parseInt(val, 10)
+              const v = Number.parseInt(val, 10)
               if (v) data[index] = v
             })
           }
@@ -140,25 +136,23 @@ export default createDirective(
 
           el.__qtouchhold = ctx
 
-          if (modifiers.mouse === true) {
+          if (modifiers.mouse) {
             // account for UMD too where modifiers will be lowercased to work
             const capture =
-              modifiers.mouseCapture === true || modifiers.mousecapture === true
-                ? 'Capture'
-                : ''
+              modifiers.mouseCapture || modifiers.mousecapture ? 'Capture' : ''
 
             addEvt(ctx, 'main', [
               [el, 'mousedown', 'mouseStart', `passive${capture}`]
             ])
           }
 
-          if (client.has.touch === true) {
+          if (client.has.touch) {
             addEvt(ctx, 'main', [
               [
                 el,
                 'touchstart',
                 'touchStart',
-                `passive${modifiers.capture === true ? 'Capture' : ''}`
+                `passive${modifiers.capture ? 'Capture' : ''}`
               ],
               [el, 'touchend', 'noop', 'notPassiveCapture']
             ])