quasar 2.19.2 → 2.20.0

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]', () => {

package/src/components/btn-dropdown/QBtnDropdown.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, onMounted, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, onMounted, ref, watch } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 import QBtn from '../btn/QBtn.js'
@@ -83,20 +83,20 @@ export default createComponent({
 
     const ariaAttrs = computed(() => {
       const acc = {
-        'aria-expanded': showing.value === true ? 'true' : 'false',
+        'aria-expanded': showing.value ? 'true' : 'false',
         'aria-haspopup': 'true',
         'aria-controls': targetUid.value,
         'aria-label':
           props.toggleAriaLabel ||
-          proxy.$q.lang.label[showing.value === true ? 'collapse' : 'expand'](
+          proxy.$q.lang.label[showing.value ? 'collapse' : 'expand'](
             props.label
           )
       }
 
       if (
-        props.disable === true ||
-        (props.split === false && props.disableMainBtn === true) ||
-        props.disableDropdown === true
+        props.disable ||
+        (!props.split && props.disableMainBtn) ||
+        props.disableDropdown
       ) {
         acc['aria-disabled'] = 'true'
       }
@@ -107,10 +107,8 @@ export default createComponent({
     const iconClass = computed(
       () =>
         'q-btn-dropdown__arrow' +
-        (showing.value === true && props.noIconAnimation === false
-          ? ' rotate-180'
-          : '') +
-        (props.split === false ? ' q-btn-dropdown__arrow-container' : '')
+        (showing.value && !props.noIconAnimation ? ' rotate-180' : '') +
+        (props.split ? '' : ' q-btn-dropdown__arrow-container')
     )
 
     const btnDesignAttr = computed(() => getBtnDesignAttr(props))
@@ -175,7 +173,7 @@ export default createComponent({
     })
 
     onMounted(() => {
-      if (props.modelValue === true) show()
+      if (props.modelValue) show()
     })
 
     return () => {
@@ -186,7 +184,7 @@ export default createComponent({
         })
       ]
 
-      if (props.disableDropdown !== true) {
+      if (!props.disableDropdown) {
         Arrow.push(
           h(
             QMenu,
@@ -220,19 +218,20 @@ export default createComponent({
         )
       }
 
-      if (props.split === false) {
+      if (!props.split) {
         return h(
           QBtn,
           {
             class: 'q-btn-dropdown q-btn-dropdown--simple',
             ...btnProps.value,
             ...ariaAttrs.value,
-            disable: props.disable === true || props.disableMainBtn === true,
+            disable: props.disable || props.disableMainBtn,
             noWrap: true,
             round: false,
             onClick
           },
           {
+            // oxlint-disable-next-line unicorn/prefer-spread
             default: () => hSlot(slots.label, []).concat(Arrow),
             loading: slots.loading
           }
@@ -255,7 +254,7 @@ export default createComponent({
             {
               class: 'q-btn-dropdown--current',
               ...btnProps.value,
-              disable: props.disable === true || props.disableMainBtn === true,
+              disable: props.disable || props.disableMainBtn,
               noWrap: true,
               round: false,
               onClick: onClickHide
@@ -272,7 +271,7 @@ export default createComponent({
               class: 'q-btn-dropdown__arrow-container q-anchor--skip',
               ...ariaAttrs.value,
               ...btnDesignAttr.value,
-              disable: props.disable === true || props.disableDropdown === true,
+              disable: props.disable || props.disableDropdown,
               rounded: props.rounded,
               color: props.color,
               textColor: props.textColor,

package/src/components/btn-group/QBtnGroup.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'
@@ -30,13 +30,13 @@ export default createComponent({
         'stretch',
         'glossy'
       ]
-        .filter(t => props[t] === true)
+        .filter(t => props[t])
         .map(t => `q-btn-group--${t}`)
         .join(' ')
 
       return (
         `q-btn-group row no-wrap${cls.length !== 0 ? ' ' + cls : ''}` +
-        (props.spread === true ? ' q-btn-group--spread' : ' inline')
+        (props.spread ? ' q-btn-group--spread' : ' inline')
       )
     })
 

package/src/components/btn-toggle/QBtnToggle.js

@@ -1,4 +1,4 @@
-import { h, computed } from 'vue'
+import { computed, h } from 'vue'
 
 import QBtn from '../btn/QBtn.js'
 import QBtnGroup from '../btn-group/QBtnGroup.js'
@@ -108,7 +108,7 @@ export default createComponent({
             ...opt,
             ...btnOptionDesign.value,
 
-            disable: props.disable === true || opt.disable === true,
+            disable: props.disable || opt.disable === true,
 
             // Options that come from the button specific options first, then from general props
             color:
@@ -137,9 +137,9 @@ export default createComponent({
     )
 
     function set(value, opt, e) {
-      if (props.readonly !== true) {
+      if (!props.readonly) {
         if (props.modelValue === value) {
-          if (props.clearable === true) {
+          if (props.clearable) {
             emit('update:modelValue', null, null)
             emit('clear')
           }
@@ -160,11 +160,7 @@ export default createComponent({
         h(QBtn, opt.props, opt.slot !== void 0 ? slots[opt.slot] : void 0)
       )
 
-      if (
-        props.name !== void 0 &&
-        props.disable !== true &&
-        hasActiveValue.value === true
-      ) {
+      if (props.name !== void 0 && !props.disable && hasActiveValue.value) {
         injectFormInput(child, 'push')
       }
 

package/src/components/card/QCard.js

@@ -1,4 +1,4 @@
-import { h, computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h } from 'vue'
 
 import useDark, {
   useDarkProps
@@ -32,10 +32,10 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-card' +
-        (isDark.value === true ? ' q-card--dark q-dark' : '') +
-        (props.bordered === true ? ' q-card--bordered' : '') +
-        (props.square === true ? ' q-card--square no-border-radius' : '') +
-        (props.flat === true ? ' q-card--flat no-shadow' : '')
+        (isDark.value ? ' q-card--dark q-dark' : '') +
+        (props.bordered ? ' q-card--bordered' : '') +
+        (props.square ? ' q-card--square no-border-radius' : '') +
+        (props.flat ? ' q-card--flat no-shadow' : '')
     )
 
     return () => h(props.tag, { class: classes.value }, hSlot(slots.default))

package/src/components/card/QCardActions.js

@@ -1,4 +1,4 @@
-import { h, computed } from 'vue'
+import { computed, h } from 'vue'
 
 import useAlign, {
   useAlignProps
@@ -21,7 +21,7 @@ export default createComponent({
     const classes = computed(
       () =>
         `q-card__actions ${alignClass.value}` +
-        ` q-card__actions--${props.vertical === true ? 'vert column' : 'horiz row'}`
+        ` q-card__actions--${props.vertical ? 'vert column' : 'horiz row'}`
     )
 
     return () => h('div', { class: classes.value }, hSlot(slots.default))

package/src/components/card/QCardSection.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'
@@ -19,7 +19,7 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-card__section' +
-        ` q-card__section--${props.horizontal === true ? 'horiz row no-wrap' : 'vert'}`
+        ` q-card__section--${props.horizontal ? 'horiz row no-wrap' : 'vert'}`
     )
 
     return () => h(props.tag, { class: classes.value }, hSlot(slots.default))