quasar 2.19.3 → 2.20.1

package/src/components/avatar/QAvatar.js

@@ -1,4 +1,4 @@
-import { h, computed } from 'vue'
+import { computed, h } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
@@ -33,9 +33,9 @@ export default createComponent({
         'q-avatar' +
         (props.color ? ` bg-${props.color}` : '') +
         (props.textColor ? ` text-${props.textColor} q-chip--colored` : '') +
-        (props.square === true
+        (props.square
           ? ' q-avatar--square'
-          : props.rounded === true
+          : props.rounded
             ? ' rounded-borders'
             : '')
     )

package/src/components/avatar/QAvatar.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 QAvatar from './QAvatar.js'
 import { useSizeDefaults } from 'quasar/src/composables/private.use-size/use-size.js'

package/src/components/badge/QBadge.js

@@ -1,4 +1,4 @@
-import { h, computed } from 'vue'
+import { computed, h } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hMergeSlot } from '../../utils/private.render/render.js'
@@ -32,23 +32,22 @@ export default createComponent({
     )
 
     const classes = computed(() => {
-      const text =
-        props.outline === true
-          ? props.color || props.textColor
-          : props.textColor
+      const text = props.outline
+        ? props.color || props.textColor
+        : props.textColor
 
       return (
         'q-badge flex inline items-center no-wrap' +
-        ` q-badge--${props.multiLine === true ? 'multi' : 'single'}-line` +
-        (props.outline === true
+        ` q-badge--${props.multiLine ? 'multi' : 'single'}-line` +
+        (props.outline
           ? ' q-badge--outline'
           : props.color !== void 0
             ? ` bg-${props.color}`
             : '') +
         (text !== void 0 ? ` text-${text}` : '') +
-        (props.floating === true ? ' q-badge--floating' : '') +
-        (props.rounded === true ? ' q-badge--rounded' : '') +
-        (props.transparent === true ? ' q-badge--transparent' : '')
+        (props.floating ? ' q-badge--floating' : '') +
+        (props.rounded ? ' q-badge--rounded' : '') +
+        (props.transparent ? ' q-badge--transparent' : '')
       )
     })
 

package/src/components/badge/QBadge.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 QBadge from './QBadge.js'
 

package/src/components/banner/QBanner.js

@@ -1,4 +1,4 @@
-import { h, computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import useDark, {
@@ -27,15 +27,15 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-banner row items-center' +
-        (props.dense === true ? ' q-banner--dense' : '') +
-        (isDark.value === true ? ' q-banner--dark q-dark' : '') +
-        (props.rounded === true ? ' rounded-borders' : '')
+        (props.dense ? ' q-banner--dense' : '') +
+        (isDark.value ? ' q-banner--dark q-dark' : '') +
+        (props.rounded ? ' rounded-borders' : '')
     )
 
     const actionClass = computed(
       () =>
         'q-banner__actions row items-center justify-end' +
-        ` col-${props.inlineActions === true ? 'auto' : 'all'}`
+        ` col-${props.inlineActions ? 'auto' : 'all'}`
     )
 
     return () => {
@@ -67,7 +67,7 @@ export default createComponent({
         {
           class:
             classes.value +
-            (props.inlineActions === false && actions !== void 0
+            (!props.inlineActions && actions !== void 0
               ? ' q-banner--top-padding'
               : ''),
           role: 'alert'

package/src/components/banner/QBanner.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 QBanner from './QBanner.js'
 

package/src/components/bar/QBar.js

@@ -1,4 +1,4 @@
-import { h, computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h } from 'vue'
 
 import useDark, {
   useDarkProps
@@ -24,8 +24,8 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-bar row no-wrap items-center' +
-        ` q-bar--${props.dense === true ? 'dense' : 'standard'} ` +
-        ` q-bar--${isDark.value === true ? 'dark' : 'light'}`
+        ` q-bar--${props.dense ? 'dense' : 'standard'} ` +
+        ` q-bar--${isDark.value ? 'dark' : 'light'}`
     )
 
     return () =>

package/src/components/bar/QBar.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 QBar from './QBar.js'
 

package/src/components/breadcrumbs/QBreadcrumbs.js

@@ -1,4 +1,4 @@
-import { h, computed } from 'vue'
+import { computed, h } from 'vue'
 
 import useAlign, {
   useAlignProps
@@ -66,9 +66,10 @@ export default createComponent({
           const middle = els < len
           const disabled =
             comp.props !== null && disabledValues.includes(comp.props.disable)
+
           const cls =
-            (middle === true ? '' : ' q-breadcrumbs--last') +
-            (disabled !== true && middle === true ? activeClass.value : '')
+            (middle ? '' : ' q-breadcrumbs--last') +
+            (!disabled && middle ? activeClass.value : '')
 
           els++
 
@@ -82,7 +83,7 @@ export default createComponent({
             )
           )
 
-          if (middle === true) {
+          if (middle) {
             child.push(
               h(
                 'div',

package/src/components/breadcrumbs/QBreadcrumbs.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 QBreadcrumbs from './QBreadcrumbs.js'
 
@@ -64,7 +64,7 @@ describe('[QBreadcrumbs API]', () => {
         await flushPromises()
 
         expect(wrapper.get('.q-breadcrumbs > div').classes()).toSatisfy(list =>
-          list.every(cls => cls.startsWith('q-gutter') === false)
+          list.every(cls => !cls.startsWith('q-gutter'))
         )
       })
 

package/src/components/breadcrumbs/QBreadcrumbsEl.js

@@ -1,4 +1,4 @@
-import { h, computed } from 'vue'
+import { computed, h } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
@@ -32,9 +32,9 @@ export default createComponent({
       class:
         'q-breadcrumbs__el q-link ' +
         'flex inline items-center relative-position ' +
-        (props.disable !== true
-          ? 'q-link--focusable' + linkClass.value
-          : 'q-breadcrumbs__el--disable'),
+        (props.disable
+          ? 'q-breadcrumbs__el--disable'
+          : 'q-link--focusable' + linkClass.value),
       ...linkAttrs.value,
       onClick: navigateOnClick
     }))

package/src/components/breadcrumbs/QBreadcrumbsEl.test.js

@@ -1,5 +1,5 @@
-import { mount, flushPromises } from '@vue/test-utils'
-import { describe, test, expect, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { describe, expect, test, vi } from 'vitest'
 
 import QBreadcrumbsEl from './QBreadcrumbsEl.js'
 import { getRouter } from 'testing/runtime/router.js'

package/src/components/btn/QBtn.js

@@ -1,11 +1,11 @@
 import {
-  h,
-  ref,
-  computed,
   Transition,
+  computed,
+  getCurrentInstance,
+  h,
   onBeforeUnmount,
-  withDirectives,
-  getCurrentInstance
+  ref,
+  withDirectives
 } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
@@ -18,10 +18,10 @@ import useBtn, { useBtnProps } from './use-btn.js'
 import { createComponent } from '../../utils/private.create/create.js'
 import { hMergeSlot } from '../../utils/private.render/render.js'
 import {
-  stop,
+  listenOpts,
   prevent,
-  stopAndPrevent,
-  listenOpts
+  stop,
+  stopAndPrevent
 } from '../../utils/event/event.js'
 import { isKeyCode } from '../../utils/private.keyboard/key-composition.js'
 
@@ -31,6 +31,11 @@ let touchTarget = null,
   keyboardTarget = null,
   mouseTarget = null
 
+function onLoadingEvt(evt) {
+  stopAndPrevent(evt)
+  evt.qSkipRipple = true
+}
+
 export default createComponent({
   name: 'QBtn',
 
@@ -71,10 +76,10 @@ export default createComponent({
     )
 
     const ripple = computed(() =>
-      props.disable === true || props.ripple === false
+      props.disable || props.ripple === false
         ? false
         : {
-            keyCodes: hasLink.value === true ? [13, 32] : [13],
+            keyCodes: hasLink.value ? [13, 32] : [13],
             ...(props.ripple === true ? {} : props.ripple)
           }
     )
@@ -92,7 +97,7 @@ export default createComponent({
     })
 
     const onEvents = computed(() => {
-      if (props.loading === true) {
+      if (props.loading) {
         return {
           onMousedown: onLoadingEvt,
           onTouchstart: onLoadingEvt,
@@ -102,14 +107,14 @@ export default createComponent({
         }
       }
 
-      if (isActionable.value === true) {
+      if (isActionable.value) {
         const acc = {
           onClick,
           onKeydown,
           onMousedown
         }
 
-        if (proxy.$q.platform.has.touch === true) {
+        if (proxy.$q.platform.has.touch) {
           const suffix = props.onTouchstart !== void 0 ? '' : 'Passive'
 
           acc[`onTouchstart${suffix}`] = onTouchstart
@@ -137,7 +142,7 @@ export default createComponent({
       if (rootRef.value === null) return
 
       if (e !== void 0) {
-        if (e.defaultPrevented === true) return
+        if (e.defaultPrevented) return
 
         const el = document.activeElement
         // focus button if it came from ENTER on form
@@ -145,11 +150,11 @@ export default createComponent({
         if (
           props.type === 'submit' &&
           el !== document.body &&
-          rootRef.value.contains(el) === false &&
+          !rootRef.value.contains(el) &&
           // required for iOS and desktop Safari
-          el.contains(rootRef.value) === false
+          !el.contains(rootRef.value)
         ) {
-          if (e.qAvoidFocus !== true) rootRef.value.focus()
+          if (!e.qAvoidFocus) rootRef.value.focus()
 
           const onClickCleanup = () => {
             document.removeEventListener('keydown', stopAndPrevent, true)
@@ -180,12 +185,12 @@ export default createComponent({
 
       emit('keydown', e)
 
-      if (isKeyCode(e, [13, 32]) === true && keyboardTarget !== rootRef.value) {
+      if (isKeyCode(e, [13, 32]) && keyboardTarget !== rootRef.value) {
         if (keyboardTarget !== null) cleanup()
 
-        if (e.defaultPrevented !== true) {
+        if (!e.defaultPrevented) {
           // focus external button if the focus helper was focused before
-          if (e.qAvoidFocus !== true) rootRef.value.focus()
+          if (!e.qAvoidFocus) rootRef.value.focus()
 
           keyboardTarget = rootRef.value
           rootRef.value.classList.add('q-btn--active')
@@ -203,7 +208,7 @@ export default createComponent({
 
       emit('touchstart', e)
 
-      if (e.defaultPrevented === true) return
+      if (e.defaultPrevented) return
 
       if (touchTarget !== rootRef.value) {
         if (touchTarget !== null) cleanup()
@@ -239,7 +244,7 @@ export default createComponent({
       e.qSkipRipple = avoidMouseRipple === true
       emit('mousedown', e)
 
-      if (e.defaultPrevented !== true && mouseTarget !== rootRef.value) {
+      if (!e.defaultPrevented && mouseTarget !== rootRef.value) {
         if (mouseTarget !== null) cleanup()
         mouseTarget = rootRef.value
         rootRef.value.classList.add('q-btn--active')
@@ -255,15 +260,12 @@ export default createComponent({
       if (e?.type === 'blur' && document.activeElement === rootRef.value) return
 
       if (e?.type === 'keyup') {
-        if (
-          keyboardTarget === rootRef.value &&
-          isKeyCode(e, [13, 32]) === true
-        ) {
+        if (keyboardTarget === rootRef.value && isKeyCode(e, [13, 32])) {
           // for click trigger
           const evt = new MouseEvent('click', e)
           evt.qKeyEvent = true
-          if (e.defaultPrevented === true) prevent(evt)
-          if (e.cancelBubble === true) stop(evt)
+          if (e.defaultPrevented) prevent(evt)
+          if (e.cancelBubble) stop(evt)
           rootRef.value.dispatchEvent(evt)
 
           stopAndPrevent(e)
@@ -282,7 +284,7 @@ export default createComponent({
       const blurTarget = blurTargetRef.value
 
       if (
-        destroying !== true &&
+        !destroying &&
         (touchTarget === rootRef.value || mouseTarget === rootRef.value) &&
         blurTarget !== null &&
         blurTarget !== document.activeElement
@@ -321,11 +323,6 @@ export default createComponent({
       rootRef.value?.classList.remove('q-btn--active')
     }
 
-    function onLoadingEvt(evt) {
-      stopAndPrevent(evt)
-      evt.qSkipRipple = true
-    }
-
     onBeforeUnmount(() => {
       cleanup(true)
     })
@@ -333,9 +330,7 @@ export default createComponent({
     // expose public methods
     Object.assign(proxy, {
       click: e => {
-        if (isActionable.value === true) {
-          onClick(e)
-        }
+        if (isActionable.value) onClick(e)
       }
     })
 
@@ -346,23 +341,23 @@ export default createComponent({
         inner.push(
           h(QIcon, {
             name: props.icon,
-            left: props.stack !== true && hasLabel.value === true,
+            left: !props.stack && hasLabel.value,
             role: 'img'
           })
         )
       }
 
-      if (hasLabel.value === true) {
+      if (hasLabel.value) {
         inner.push(h('span', { class: 'block' }, [props.label]))
       }
 
       inner = hMergeSlot(slots.default, inner)
 
-      if (props.iconRight !== void 0 && props.round === false) {
+      if (props.iconRight !== void 0 && !props.round) {
         inner.push(
           h(QIcon, {
             name: props.iconRight,
-            right: props.stack !== true && hasLabel.value === true,
+            right: !props.stack && hasLabel.value,
             role: 'img'
           })
         )
@@ -375,14 +370,14 @@ export default createComponent({
         })
       ]
 
-      if (props.loading === true && props.percentage !== void 0) {
+      if (props.loading && props.percentage !== void 0) {
         child.push(
           h(
             'span',
             {
               class:
                 'q-btn__progress absolute-full overflow-hidden' +
-                (props.darkPercentage === true ? ' q-btn__progress--dark' : '')
+                (props.darkPercentage ? ' q-btn__progress--dark' : '')
             },
             [
               h('span', {
@@ -414,7 +409,7 @@ export default createComponent({
               name: 'q-transition--fade'
             },
             () =>
-              props.loading === true
+              props.loading
                 ? [
                     h(
                       'span',

package/src/components/btn/QBtn.test.js

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

package/src/components/btn/use-btn.js

@@ -33,10 +33,10 @@ const mediaTypeRE = /[^\s]\/[^\s]/
 export const btnDesignOptions = ['flat', 'outline', 'push', 'unelevated']
 
 export function getBtnDesign(props, defaultValue) {
-  if (props.flat === true) return 'flat'
-  if (props.outline === true) return 'outline'
-  if (props.push === true) return 'push'
-  if (props.unelevated === true) return 'unelevated'
+  if (props.flat) return 'flat'
+  if (props.outline) return 'outline'
+  if (props.push) return 'push'
+  if (props.unelevated) return 'unelevated'
   return defaultValue
 }
 
@@ -109,31 +109,27 @@ export default function useBtn(props) {
     })
 
   const style = computed(() => {
-    const obj =
-      props.fab === false && props.fabMini === false ? sizeStyle.value : {}
+    const obj = props.fab || props.fabMini ? {} : sizeStyle.value
 
     return props.padding !== void 0
-      ? Object.assign({}, obj, {
+      ? {
+          ...obj,
           padding: props.padding
             .split(/\s+/)
             .map(v => (v in btnPadding ? btnPadding[v] + 'px' : v))
             .join(' '),
           minWidth: '0',
           minHeight: '0'
-        })
+        }
       : obj
   })
 
-  const isRounded = computed(
-    () => props.rounded === true || props.fab === true || props.fabMini === true
-  )
+  const isRounded = computed(() => props.rounded || props.fab || props.fabMini)
 
-  const isActionable = computed(
-    () => props.disable !== true && props.loading !== true
-  )
+  const isActionable = computed(() => !props.disable && !props.loading)
 
   const tabIndex = computed(() =>
-    isActionable.value === true ? props.tabindex || 0 : -1
+    isActionable.value ? props.tabindex || 0 : -1
   )
 
   const design = computed(() => getBtnDesign(props, 'standard'))
@@ -141,31 +137,28 @@ export default function useBtn(props) {
   const attributes = computed(() => {
     const acc = { tabindex: tabIndex.value }
 
-    if (hasLink.value === true) {
+    if (hasLink.value) {
       Object.assign(acc, linkAttrs.value)
-    } else if (formTypes.includes(props.type) === true) {
+    } else if (formTypes.includes(props.type)) {
       acc.type = props.type
     }
 
     if (linkTag.value === 'a') {
-      if (props.disable === true) {
+      if (props.disable) {
         acc['aria-disabled'] = 'true'
       } else if (acc.href === void 0) {
         acc.role = 'button'
       }
 
-      if (
-        hasRouterLink.value !== true &&
-        mediaTypeRE.test(props.type) === true
-      ) {
+      if (!hasRouterLink.value && mediaTypeRE.test(props.type)) {
         acc.type = props.type
       }
-    } else if (props.disable === true) {
+    } else if (props.disable) {
       acc.disabled = ''
       acc['aria-disabled'] = 'true'
     }
 
-    if (props.loading === true && props.percentage !== void 0) {
+    if (props.loading && props.percentage !== void 0) {
       Object.assign(acc, {
         role: 'progressbar',
         'aria-valuemin': 0,
@@ -181,37 +174,31 @@ export default function useBtn(props) {
     let colors
 
     if (props.color !== void 0) {
-      if (props.flat === true || props.outline === true) {
-        colors = `text-${props.textColor || props.color}`
-      } else {
-        colors = `bg-${props.color} text-${props.textColor || 'white'}`
-      }
+      colors =
+        props.flat || props.outline
+          ? `text-${props.textColor || props.color}`
+          : `bg-${props.color} text-${props.textColor || 'white'}`
     } else if (props.textColor) {
       colors = `text-${props.textColor}`
     }
 
-    const shape =
-      props.round === true
-        ? 'round'
-        : `rectangle${isRounded.value === true ? ' q-btn--rounded' : props.square === true ? ' q-btn--square' : ''}`
+    const shape = props.round
+      ? 'round'
+      : `rectangle${isRounded.value ? ' q-btn--rounded' : props.square ? ' q-btn--square' : ''}`
 
     return (
       `q-btn--${design.value} q-btn--${shape}` +
       (colors !== void 0 ? ' ' + colors : '') +
-      (isActionable.value === true
+      (isActionable.value
         ? ' q-btn--actionable q-focusable q-hoverable'
-        : props.disable === true
+        : props.disable
           ? ' disabled'
           : '') +
-      (props.fab === true
-        ? ' q-btn--fab'
-        : props.fabMini === true
-          ? ' q-btn--fab-mini'
-          : '') +
-      (props.noCaps === true ? ' q-btn--no-uppercase' : '') +
-      (props.dense === true ? ' q-btn--dense' : '') +
-      (props.stretch === true ? ' no-border-radius self-stretch' : '') +
-      (props.glossy === true ? ' glossy' : '') +
+      (props.fab ? ' q-btn--fab' : props.fabMini ? ' q-btn--fab-mini' : '') +
+      (props.noCaps ? ' q-btn--no-uppercase' : '') +
+      (props.dense ? ' q-btn--dense' : '') +
+      (props.stretch ? ' no-border-radius self-stretch' : '') +
+      (props.glossy ? ' glossy' : '') +
       (props.square ? ' q-btn--square' : '')
     )
   })
@@ -219,9 +206,9 @@ export default function useBtn(props) {
   const innerClasses = computed(
     () =>
       alignClass.value +
-      (props.stack === true ? ' column' : ' row') +
-      (props.noWrap === true ? ' no-wrap text-no-wrap' : '') +
-      (props.loading === true ? ' q-btn__content--hidden' : '')
+      (props.stack ? ' column' : ' row') +
+      (props.noWrap ? ' no-wrap text-no-wrap' : '') +
+      (props.loading ? ' q-btn__content--hidden' : '')
   )
 
   return {

package/src/components/btn/use-btn.test.js

@@ -1,15 +1,15 @@
 import { mount } from '@vue/test-utils'
-import { describe, test, expect } from 'vitest'
+import { describe, expect, test } from 'vitest'
 import { defineComponent } from 'vue'
 
 import useBtn, {
+  btnDesignOptions,
   btnPadding,
   defaultSizes,
-  btnDesignOptions,
-  useBtnProps,
-  nonRoundBtnProps,
   getBtnDesign,
-  getBtnDesignAttr
+  getBtnDesignAttr,
+  nonRoundBtnProps,
+  useBtnProps
 } from './use-btn.js'
 
 describe('[useBtn API]', () => {