quasar 2.19.3 → 2.20.0

package/src/components/toggle/QToggle.js

@@ -1,10 +1,10 @@
-import { h, computed } from 'vue'
+import { computed, h } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
 import useCheckbox, {
-  useCheckboxProps,
-  useCheckboxEmits
+  useCheckboxEmits,
+  useCheckboxProps
 } from '../checkbox/use-checkbox.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
@@ -25,16 +25,14 @@ export default createComponent({
     function getInner(isTrue, isIndeterminate) {
       const icon = computed(
         () =>
-          (isTrue.value === true
+          (isTrue.value
             ? props.checkedIcon
-            : isIndeterminate.value === true
+            : isIndeterminate.value
               ? props.indeterminateIcon
               : props.uncheckedIcon) || props.icon
       )
 
-      const color = computed(() =>
-        isTrue.value === true ? props.iconColor : null
-      )
+      const color = computed(() => (isTrue.value ? props.iconColor : null))
 
       return () => [
         h('div', { class: 'q-toggle__track' }),

package/src/components/toolbar/QToolbar.js

@@ -1,4 +1,4 @@
-import { h, computed } from 'vue'
+import { computed, h } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot } from '../../utils/private.render/render.js'
@@ -14,7 +14,7 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-toolbar row no-wrap items-center' +
-        (props.inset === true ? ' q-toolbar--inset' : '')
+        (props.inset ? ' q-toolbar--inset' : '')
     )
 
     return () =>

package/src/components/toolbar/QToolbar.test.js

@@ -1,5 +1,5 @@
-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 QToolbar from './QToolbar.js'
 

package/src/components/toolbar/QToolbarTitle.js

@@ -1,4 +1,4 @@
-import { h, computed } from 'vue'
+import { computed, h } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot } from '../../utils/private.render/render.js'
@@ -12,9 +12,7 @@ export default createComponent({
 
   setup(props, { slots }) {
     const classes = computed(
-      () =>
-        'q-toolbar__title ellipsis' +
-        (props.shrink === true ? ' col-shrink' : '')
+      () => 'q-toolbar__title ellipsis' + (props.shrink ? ' col-shrink' : '')
     )
 
     return () => h('div', { class: classes.value }, hSlot(slots.default))

package/src/components/toolbar/QToolbarTitle.test.js

@@ -1,5 +1,5 @@
-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 QToolbarTitle from './QToolbarTitle.js'
 

package/src/components/tooltip/QTooltip.js

@@ -1,11 +1,11 @@
 import {
-  h,
-  ref,
+  Transition,
   computed,
-  watch,
+  getCurrentInstance,
+  h,
   onBeforeUnmount,
-  Transition,
-  getCurrentInstance
+  ref,
+  watch
 } from 'vue'
 
 import useAnchor, {
@@ -13,8 +13,8 @@ import useAnchor, {
 } from '../../composables/private.use-anchor/use-anchor.js'
 import useScrollTarget from '../../composables/private.use-scroll-target/use-scroll-target.js'
 import useModelToggle, {
-  useModelToggleProps,
-  useModelToggleEmits
+  useModelToggleEmits,
+  useModelToggleProps
 } from '../../composables/private.use-model-toggle/use-model-toggle.js'
 import usePortal from '../../composables/private.use-portal/use-portal.js'
 import useTransition, {
@@ -25,7 +25,7 @@ import useTimeout from '../../composables/use-timeout/use-timeout.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { getScrollTarget, scrollTargetProp } from '../../utils/scroll/scroll.js'
-import { stopAndPrevent, addEvt, cleanEvt } from '../../utils/event/event.js'
+import { addEvt, cleanEvt, stopAndPrevent } from '../../utils/event/event.js'
 import { clearSelection } from '../../utils/private.selection/selection.js'
 import { hSlot } from '../../utils/private.render/render.js'
 import {
@@ -33,10 +33,10 @@ import {
   removeClickOutside
 } from '../../utils/private.click-outside/click-outside.js'
 import {
-  validatePosition,
-  validateOffset,
+  parsePosition,
   setPosition,
-  parsePosition
+  validateOffset,
+  validatePosition
 } from '../../utils/private.position-engine/position-engine.js'
 
 export default createComponent({
@@ -115,7 +115,7 @@ export default createComponent({
       parsePosition(props.anchor, $q.lang.rtl)
     )
     const selfOrigin = computed(() => parsePosition(props.self, $q.lang.rtl))
-    const hideOnRouteChange = computed(() => props.persistent !== true)
+    const hideOnRouteChange = computed(() => !props.persistent)
 
     const { registerTick, removeTick } = useTick()
     const { registerTimeout } = useTimeout()
@@ -148,7 +148,7 @@ export default createComponent({
 
     // if we're on mobile, let's improve the experience
     // by closing it when user taps outside of it
-    if ($q.platform.is.mobile === true) {
+    if ($q.platform.is.mobile) {
       const clickOutsideProps = {
         anchorEl,
         innerRef,
@@ -170,12 +170,12 @@ export default createComponent({
           // (null is the default value)
           props.modelValue === null &&
           // and it's not persistent
-          props.persistent !== true &&
-          showing.value === true
+          !props.persistent &&
+          showing.value
       )
 
       watch(hasClickOutside, val => {
-        const fn = val === true ? addClickOutside : removeClickOutside
+        const fn = val ? addClickOutside : removeClickOutside
         fn(clickOutsideProps)
       })
 
@@ -264,7 +264,7 @@ export default createComponent({
     }
 
     function delayShow(evt) {
-      if ($q.platform.is.mobile === true) {
+      if ($q.platform.is.mobile) {
         clearSelection()
         document.body.classList.add('non-selectable')
 
@@ -282,7 +282,7 @@ export default createComponent({
     }
 
     function delayHide(evt) {
-      if ($q.platform.is.mobile === true) {
+      if ($q.platform.is.mobile) {
         cleanEvt(anchorEvents, 'tooltipTemp')
         clearSelection()
         // delay needed otherwise selection still occurs
@@ -298,15 +298,14 @@ export default createComponent({
     }
 
     function configureAnchorEl() {
-      if (props.noParentEvent === true || anchorEl.value === null) return
+      if (props.noParentEvent || anchorEl.value === null) return
 
-      const evts =
-        $q.platform.is.mobile === true
-          ? [[anchorEl.value, 'touchstart', 'delayShow', 'passive']]
-          : [
-              [anchorEl.value, 'mouseenter', 'delayShow', 'passive'],
-              [anchorEl.value, 'mouseleave', 'delayHide', 'passive']
-            ]
+      const evts = $q.platform.is.mobile
+        ? [[anchorEl.value, 'touchstart', 'delayShow', 'passive']]
+        : [
+            [anchorEl.value, 'mouseenter', 'delayShow', 'passive'],
+            [anchorEl.value, 'mouseleave', 'delayHide', 'passive']
+          ]
 
       addEvt(anchorEvents, 'anchor', evts)
     }
@@ -317,14 +316,14 @@ export default createComponent({
           anchorEl.value,
           props.scrollTarget
         )
-        const fn = props.noParentEvent === true ? updatePosition : hide
+        const fn = props.noParentEvent ? updatePosition : hide
 
         changeScrollEvent(localScrollTarget.value, fn)
       }
     }
 
     function getTooltipContent() {
-      return showing.value === true
+      return showing.value
         ? h(
             'div',
             {

package/src/components/tree/QTree.js

@@ -1,13 +1,13 @@
 import {
+  computed,
+  getCurrentInstance,
   h,
+  nextTick,
+  onBeforeUpdate,
   ref,
-  computed,
-  watch,
-  withDirectives,
   vShow,
-  nextTick,
-  getCurrentInstance,
-  onBeforeUpdate
+  watch,
+  withDirectives
 } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
@@ -26,6 +26,23 @@ import { injectProp } from '../../utils/private.inject-obj-prop/inject-obj-prop.
 
 const tickStrategyOptions = ['none', 'strict', 'leaf', 'leaf-filtered']
 
+function getNodeMedia(node) {
+  if (node.icon !== void 0) {
+    return h(QIcon, {
+      class: 'q-tree__icon q-mr-sm',
+      name: node.icon,
+      color: node.iconColor
+    })
+  }
+  const src = node.img || node.avatar
+  if (src) {
+    return h('img', {
+      class: `q-tree__${node.img ? 'img' : 'avatar'} q-mr-sm`,
+      src
+    })
+  }
+}
+
 export default createComponent({
   name: 'QTree',
 
@@ -110,16 +127,15 @@ export default createComponent({
 
     const classes = computed(
       () =>
-        `q-tree q-tree--${props.dense === true ? 'dense' : 'standard'}` +
-        (props.noConnectors === true ? ' q-tree--no-connectors' : '') +
-        (isDark.value === true ? ' q-tree--dark' : '') +
+        `q-tree q-tree--${props.dense ? 'dense' : 'standard'}` +
+        (props.noConnectors ? ' q-tree--no-connectors' : '') +
+        (isDark.value ? ' q-tree--dark' : '') +
         (props.color !== void 0 ? ` text-${props.color}` : '')
     )
 
     const hasSelection = computed(() => props.selected !== void 0)
 
     const computedIcon = computed(() => props.icon || $q.iconSet.tree.icon)
-
     const computedControlColor = computed(
       () => props.controlColor || props.color
     )
@@ -140,7 +156,7 @@ export default createComponent({
             const filt = filter.toLowerCase()
             return (
               node[props.labelKey] &&
-              node[props.labelKey].toLowerCase().indexOf(filt) !== -1
+              node[props.labelKey].toLowerCase().includes(filt)
             )
           }
     )
@@ -158,19 +174,17 @@ export default createComponent({
             Array.isArray(node[props.childrenKey]) &&
             node[props.childrenKey].length !== 0,
           selectable =
-            node.disabled !== true &&
-            hasSelection.value === true &&
-            node.selectable !== false,
-          expandable = node.disabled !== true && node.expandable !== false,
+            !node.disabled && hasSelection.value && node.selectable !== false,
+          expandable = !node.disabled && node.expandable !== false,
           hasTicking = tickStrategy !== 'none',
           strictTicking = tickStrategy === 'strict',
           leafFilteredTicking = tickStrategy === 'leaf-filtered',
           leafTicking =
             tickStrategy === 'leaf' || tickStrategy === 'leaf-filtered'
 
-        let tickable = node.disabled !== true && node.tickable !== false
+        let tickable = !node.disabled && node.tickable !== false
         if (
-          leafTicking === true &&
+          leafTicking &&
           tickable === true &&
           parent &&
           parent.tickable !== true
@@ -182,7 +196,7 @@ export default createComponent({
         if (
           localLazy === true &&
           lazy.value[key] !== void 0 &&
-          Array.isArray(node[props.childrenKey]) === true
+          Array.isArray(node[props.childrenKey])
         ) {
           localLazy = lazy.value[key]
         }
@@ -194,40 +208,36 @@ export default createComponent({
           lazy: localLazy,
           disabled: node.disabled,
           link:
-            node.disabled !== true &&
-            (selectable === true ||
-              (expandable === true &&
-                (isParent === true || localLazy === true))),
+            !node.disabled &&
+            (selectable || (expandable && (isParent || localLazy === true))),
           children: [],
           matchesFilter: props.filter
             ? computedFilterMethod.value(node, props.filter)
             : true,
 
-          selected: key === props.selected && selectable === true,
+          selected: key === props.selected && selectable,
           selectable,
-          expanded:
-            isParent === true ? innerExpanded.value.includes(key) : false,
+          expanded: isParent ? innerExpanded.value.includes(key) : false,
           expandable,
           noTick:
             node.noTick === true ||
-            (strictTicking !== true && localLazy && localLazy !== 'loaded'),
+            (!strictTicking && localLazy && localLazy !== 'loaded'),
           tickable,
           tickStrategy,
           hasTicking,
           strictTicking,
           leafFilteredTicking,
           leafTicking,
-          ticked:
-            strictTicking === true
-              ? innerTicked.value.includes(key)
-              : isParent === true
-                ? false
-                : innerTicked.value.includes(key)
+          ticked: strictTicking
+            ? innerTicked.value.includes(key)
+            : isParent
+              ? false
+              : innerTicked.value.includes(key)
         }
 
         acc[key] = m
 
-        if (isParent === true) {
+        if (isParent) {
           m.children = node[props.childrenKey].map(n => travel(n, m))
 
           if (props.filter) {
@@ -237,13 +247,13 @@ export default createComponent({
               m.noTick !== true &&
               m.disabled !== true &&
               m.tickable === true &&
-              leafFilteredTicking === true &&
+              leafFilteredTicking &&
               m.children.every(
                 n =>
                   n.matchesFilter !== true ||
                   n.noTick === true ||
                   n.tickable !== true
-              ) === true
+              )
             ) {
               m.tickable = false
             }
@@ -253,7 +263,7 @@ export default createComponent({
             if (
               m.noTick !== true &&
               strictTicking !== true &&
-              m.children.every(n => n.noTick) === true
+              m.children.every(n => n.noTick)
             ) {
               m.noTick = true
             }
@@ -311,14 +321,12 @@ export default createComponent({
     )
 
     function getNodeByKey(key) {
-      const reduce = [].reduce
-
       const find = (result, node) => {
         if (result || !node) {
           return result
         }
-        if (Array.isArray(node) === true) {
-          return reduce.call(Object(node), find, result)
+        if (Array.isArray(node)) {
+          return node.reduce(find, result)
         }
         if (node[props.nodeKey] === key) {
           return node
@@ -354,11 +362,14 @@ export default createComponent({
     function expandAll() {
       const expanded = []
       const travel = node => {
-        if (node[props.childrenKey] && node[props.childrenKey].length !== 0) {
-          if (node.expandable !== false && node.disabled !== true) {
-            expanded.push(node[props.nodeKey])
-            node[props.childrenKey].forEach(travel)
-          }
+        if (
+          node[props.childrenKey] &&
+          node[props.childrenKey].length !== 0 &&
+          node.expandable !== false &&
+          node.disabled !== true
+        ) {
+          expanded.push(node[props.nodeKey])
+          node[props.childrenKey].forEach(travel)
         }
       }
 
@@ -381,7 +392,7 @@ export default createComponent({
         if (m.lazy === 'loading') return
 
         lazy.value[key] = 'loading'
-        if (Array.isArray(node[props.childrenKey]) !== true) {
+        if (!Array.isArray(node[props.childrenKey])) {
           node[props.childrenKey] = []
         }
         emit('lazyLoad', {
@@ -389,8 +400,7 @@ export default createComponent({
           key,
           done: children => {
             lazy.value[key] = 'loaded'
-            node[props.childrenKey] =
-              Array.isArray(children) === true ? children : []
+            node[props.childrenKey] = Array.isArray(children) ? children : []
             nextTick(() => {
               const localMeta = meta.value[key]
               if (localMeta?.isParent === true) {
@@ -414,42 +424,39 @@ export default createComponent({
       let target = innerExpanded.value
       const shouldEmit = props.expanded !== void 0
 
-      if (shouldEmit === true) {
-        target = target.slice()
-      }
+      if (shouldEmit) target = [...target]
 
       if (state) {
-        if (props.accordion) {
-          if (meta.value[key]) {
-            const collapse = []
-            if (meta.value[key].parent) {
-              meta.value[key].parent.children.forEach(m => {
-                if (m.key !== key && m.expandable === true) {
-                  collapse.push(m.key)
-                }
-              })
-            } else {
-              props.nodes.forEach(node => {
-                const k = node[props.nodeKey]
-                if (k !== key) {
-                  collapse.push(k)
-                }
-              })
-            }
-            if (collapse.length !== 0) {
-              target = target.filter(k => collapse.includes(k) === false)
-            }
+        if (props.accordion && meta.value[key]) {
+          const collapse = []
+          if (meta.value[key].parent) {
+            meta.value[key].parent.children.forEach(m => {
+              if (m.key !== key && m.expandable === true) {
+                collapse.push(m.key)
+              }
+            })
+          } else {
+            props.nodes.forEach(node => {
+              const k = node[props.nodeKey]
+              if (k !== key) {
+                collapse.push(k)
+              }
+            })
+          }
+
+          if (collapse.length !== 0) {
+            target = target.filter(k => !collapse.includes(k))
           }
         }
 
-        target = target
-          .concat([key])
-          .filter((entryKey, index, self) => self.indexOf(entryKey) === index)
+        target = [...target, key].filter(
+          (entryKey, index, self) => self.indexOf(entryKey) === index
+        )
       } else {
         target = target.filter(k => k !== key)
       }
 
-      if (shouldEmit === true) {
+      if (shouldEmit) {
         emit('update:expanded', target)
       } else {
         innerExpanded.value = target
@@ -464,21 +471,15 @@ export default createComponent({
       let target = innerTicked.value
       const shouldEmit = props.ticked !== void 0
 
-      if (shouldEmit === true) {
-        target = target.slice()
-      }
+      if (shouldEmit) target = [...target]
 
-      if (state) {
-        target = target
-          .concat(keys)
-          .filter((key, index, self) => self.indexOf(key) === index)
-      } else {
-        target = target.filter(k => keys.includes(k) === false)
-      }
+      target = state
+        ? [...target, ...keys].filter(
+            (key, index, self) => self.indexOf(key) === index
+          )
+        : target.filter(k => !keys.includes(k))
 
-      if (shouldEmit === true) {
-        emit('update:ticked', target)
-      }
+      if (shouldEmit) emit('update:ticked', target)
     }
 
     function getSlotScope(node, localMeta, key) {
@@ -523,23 +524,6 @@ export default createComponent({
       ).map(child => getNode(child))
     }
 
-    function getNodeMedia(node) {
-      if (node.icon !== void 0) {
-        return h(QIcon, {
-          class: 'q-tree__icon q-mr-sm',
-          name: node.icon,
-          color: node.iconColor
-        })
-      }
-      const src = node.img || node.avatar
-      if (src) {
-        return h('img', {
-          class: `q-tree__${node.img ? 'img' : 'avatar'} q-mr-sm`,
-          src
-        })
-      }
-    }
-
     function onShow() {
       emit('afterShow')
     }
@@ -579,7 +563,7 @@ export default createComponent({
           key,
           class:
             'q-tree__node relative-position' +
-            ` q-tree__node--${isParent === true ? 'parent' : 'child'}`
+            ` q-tree__node--${isParent ? 'parent' : 'child'}`
         },
         [
           h(
@@ -593,7 +577,7 @@ export default createComponent({
                 (m.selected === true ? ' q-tree__node--selected' : '') +
                 (m.disabled === true ? ' q-tree__node--disabled' : ''),
               tabindex: m.link === true ? 0 : -1,
-              ariaExpanded: children.length > 0 ? m.expanded : null,
+              ariaExpanded: children.length !== 0 ? m.expanded : null,
               role: 'treeitem',
               onClick: e => {
                 onClick(node, m, e)
@@ -622,7 +606,7 @@ export default createComponent({
                     class: 'q-tree__spinner',
                     color: computedControlColor.value
                   })
-                : isParent === true
+                : isParent
                   ? h(QIcon, {
                       class:
                         'q-tree__arrow' +
@@ -668,8 +652,8 @@ export default createComponent({
             ]
           ),
 
-          isParent === true
-            ? props.noTransition === true
+          isParent
+            ? props.noTransition
               ? m.expanded === true
                 ? h(
                     'div',
@@ -744,7 +728,7 @@ export default createComponent({
       }
 
       if (hasSelection.value && localMeta.selectable) {
-        if (props.noSelectionUnset === false) {
+        if (!props.noSelectionUnset) {
           emit(
             'update:selected',
             localMeta.key !== props.selected ? localMeta.key : null
@@ -808,9 +792,7 @@ export default createComponent({
       }
     }
 
-    if (props.defaultExpandAll === true) {
-      expandAll()
-    }
+    if (props.defaultExpandAll) expandAll()
 
     // expose public methods
     Object.assign(proxy, {

package/src/components/tree/QTree.json

@@ -158,7 +158,7 @@
         "desc": "Matches or not"
       },
       "examples": [
-        "(node, filter) => node.label.toLowerCase().indexOf(filter.toLowerCase()) !== -1"
+        "(node, filter) => node.label.toLowerCase().includes(filter.toLowerCase())"
       ],
       "category": "filter"
     },

package/src/components/uploader/QUploaderAddTrigger.js

@@ -2,8 +2,8 @@ import { inject } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import {
-  uploaderKey,
-  emptyRenderFn
+  emptyRenderFn,
+  uploaderKey
 } from '../../utils/private.symbols/symbols.js'
 
 export default createComponent({