quasar 2.19.2 → 2.20.0

package/src/components/carousel/QCarousel.js

@@ -1,10 +1,10 @@
 import {
-  h,
   computed,
-  watch,
-  onMounted,
+  getCurrentInstance,
+  h,
   onBeforeUnmount,
-  getCurrentInstance
+  onMounted,
+  watch
 } from 'vue'
 
 import QBtn from '../btn/QBtn.js'
@@ -13,17 +13,17 @@ import useDark, {
   useDarkProps
 } from '../../composables/private.use-dark/use-dark.js'
 import usePanel, {
-  usePanelProps,
-  usePanelEmits
+  usePanelEmits,
+  usePanelProps
 } from '../../composables/private.use-panel/use-panel.js'
 import useFullscreen, {
-  useFullscreenProps,
-  useFullscreenEmits
+  useFullscreenEmits,
+  useFullscreenProps
 } from '../../composables/private.use-fullscreen/use-fullscreen.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { isNumber } from '../../utils/is/is.js'
-import { hMergeSlot, hDir } from '../../utils/private.render/render.js'
+import { hDir, hMergeSlot } from '../../utils/private.render/render.js'
 
 const navigationPositionOptions = ['top', 'right', 'bottom', 'left']
 const controlTypeOptions = ['regular', 'flat', 'outline', 'push', 'unelevated']
@@ -101,45 +101,37 @@ export default createComponent({
     const { inFullscreen } = useFullscreen()
 
     const style = computed(() =>
-      inFullscreen.value !== true && props.height !== void 0
+      !inFullscreen.value && props.height !== void 0
         ? { height: props.height }
         : {}
     )
 
     const direction = computed(() =>
-      props.vertical === true ? 'vertical' : 'horizontal'
+      props.vertical ? 'vertical' : 'horizontal'
     )
 
     const navigationPosition = computed(
-      () =>
-        props.navigationPosition ||
-        (props.vertical === true ? 'right' : 'bottom')
+      () => props.navigationPosition || (props.vertical ? 'right' : 'bottom')
     )
 
     const classes = computed(
       () =>
-        `q-carousel q-panel-parent q-carousel--with${props.padding === true ? '' : 'out'}-padding` +
-        (inFullscreen.value === true ? ' fullscreen' : '') +
-        (isDark.value === true ? ' q-carousel--dark q-dark' : '') +
-        (props.arrows === true
-          ? ` q-carousel--arrows-${direction.value}`
-          : '') +
-        (props.navigation === true
+        `q-carousel q-panel-parent q-carousel--with${props.padding ? '' : 'out'}-padding` +
+        (inFullscreen.value ? ' fullscreen' : '') +
+        (isDark.value ? ' q-carousel--dark q-dark' : '') +
+        (props.arrows ? ` q-carousel--arrows-${direction.value}` : '') +
+        (props.navigation
           ? ` q-carousel--navigation-${navigationPosition.value}`
           : '')
     )
 
     const arrowIcons = computed(() => {
       const ico = [
-        props.prevIcon ||
-          $q.iconSet.carousel[props.vertical === true ? 'up' : 'left'],
-        props.nextIcon ||
-          $q.iconSet.carousel[props.vertical === true ? 'down' : 'right']
+        props.prevIcon || $q.iconSet.carousel[props.vertical ? 'up' : 'left'],
+        props.nextIcon || $q.iconSet.carousel[props.vertical ? 'down' : 'right']
       ]
 
-      return props.vertical === false && $q.lang.rtl === true
-        ? ico.reverse()
-        : ico
+      return !props.vertical && $q.lang.rtl ? ico.reverse() : ico
     })
 
     const navIcon = computed(
@@ -179,8 +171,9 @@ export default createComponent({
     )
 
     function startTimer() {
-      const duration =
-        isNumber(props.autoplay) === true ? Math.abs(props.autoplay) : 5000
+      const duration = isNumber(props.autoplay)
+        ? Math.abs(props.autoplay)
+        : 5000
 
       if (timer !== null) clearTimeout(timer)
       timer = setTimeout(() => {
@@ -226,7 +219,7 @@ export default createComponent({
     function getContent() {
       const node = []
 
-      if (props.navigation === true) {
+      if (props.navigation) {
         const fn =
           slots['navigation-icon'] !== void 0
             ? slots['navigation-icon']
@@ -250,7 +243,7 @@ export default createComponent({
               name,
               active,
               btnProps: {
-                icon: active === true ? navActiveIcon.value : navIcon.value,
+                icon: active ? navActiveIcon.value : navIcon.value,
                 size: 'sm',
                 ...controlProps.value
               },
@@ -260,7 +253,7 @@ export default createComponent({
             })
           })
         )
-      } else if (props.thumbnails === true) {
+      } else if (props.thumbnails) {
         const color =
           props.controlColor !== void 0 ? ` text-${props.controlColor}` : ''
 
@@ -282,8 +275,8 @@ export default createComponent({
         )
       }
 
-      if (props.arrows === true && panelIndex.value >= 0) {
-        if (props.infinite === true || panelIndex.value > 0) {
+      if (props.arrows && panelIndex.value >= 0) {
+        if (props.infinite || panelIndex.value > 0) {
           node.push(
             h(
               'div',
@@ -302,7 +295,7 @@ export default createComponent({
           )
         }
 
-        if (props.infinite === true || panelIndex.value < panelsLen - 1) {
+        if (props.infinite || panelIndex.value < panelsLen - 1) {
           node.push(
             h(
               'div',
@@ -344,8 +337,9 @@ export default createComponent({
             'sl-cont',
             props.swipeable,
             () => panelDirectives.value
-          )
-        ].concat(getContent())
+          ),
+          ...getContent()
+        ]
       )
     }
   }

package/src/components/carousel/QCarouselControl.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'

package/src/components/carousel/QCarouselSlide.js

@@ -1,4 +1,4 @@
-import { h, computed } from 'vue'
+import { computed, h } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { usePanelChildProps } from '../../composables/private.use-panel/use-panel.js'

package/src/components/carousel/QCarouselSlide.json

@@ -17,7 +17,7 @@
       "transformAssetUrls": true,
       "examples": [
         "# (public folder) src=\"img/my-bg.png\"",
-        "# (assets folder) src=\"~assets/my-img.png\"",
+        "# (assets folder) src=\"~@/assets/my-img.png\"",
         "# (relative path format) :src=\"require('./my_img.jpg')\"",
         "# (URL) src=\"https://picsum.photos/500/300\""
       ],

package/src/components/chat/QChatMessage.js

@@ -1,4 +1,4 @@
-import { h, computed } from 'vue'
+import { computed, h } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { getNormalizedVNodes } from '../../utils/private.vm/vm.js'
@@ -23,7 +23,7 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
-    const op = computed(() => (props.sent === true ? 'sent' : 'received'))
+    const op = computed(() => (props.sent ? 'sent' : 'received'))
 
     const textClass = computed(
       () =>
@@ -40,7 +40,7 @@ export default createComponent({
     const containerClass = computed(
       () =>
         'q-message-container row items-end no-wrap' +
-        (props.sent === true ? ' reverse' : '')
+        (props.sent ? ' reverse' : '')
     )
 
     const sizeClass = computed(() =>
@@ -48,10 +48,10 @@ export default createComponent({
     )
 
     const domProps = computed(() => ({
-      msg: props.textHtml === true ? 'innerHTML' : 'textContent',
-      stamp: props.stampHtml === true ? 'innerHTML' : 'textContent',
-      name: props.nameHtml === true ? 'innerHTML' : 'textContent',
-      label: props.labelHtml === true ? 'innerHTML' : 'textContent'
+      msg: props.textHtml ? 'innerHTML' : 'textContent',
+      stamp: props.stampHtml ? 'innerHTML' : 'textContent',
+      name: props.nameHtml ? 'innerHTML' : 'textContent',
+      label: props.labelHtml ? 'innerHTML' : 'textContent'
     }))
 
     function wrapStamp(node) {
@@ -73,12 +73,11 @@ export default createComponent({
     }
 
     function getText(contentList, withSlots) {
-      const content =
-        withSlots === true
-          ? contentList.length > 1
-            ? text => text
-            : text => h('div', [text])
-          : text => h('div', { [domProps.value.msg]: text })
+      const content = withSlots
+        ? contentList.length > 1
+          ? text => text
+          : text => h('div', [text])
+        : text => h('div', { [domProps.value.msg]: text })
 
       return contentList.map((msg, index) =>
         h(
@@ -129,7 +128,7 @@ export default createComponent({
       if (slots.default !== void 0) {
         msg.push(getText(getNormalizedVNodes(slots.default()), true))
       } else if (props.text !== void 0) {
-        msg.push(getText(props.text))
+        msg.push(getText(props.text, false))
       }
 
       container.push(h('div', { class: sizeClass.value }, msg))

package/src/components/chat/QChatMessage.json

@@ -42,7 +42,7 @@
       "transformAssetUrls": true,
       "examples": [
         "# (public folder) src=\"boy-avatar.png\"",
-        "# (assets folder) src=\"~assets/boy-avatar.png\"",
+        "# (assets folder) src=\"~@/assets/boy-avatar.png\"",
         "# (relative path format) :src=\"require('./my_img.jpg')\"",
         "# (URL) src=\"https://picsum.photos/500/300\""
       ],

package/src/components/checkbox/QCheckbox.js

@@ -1,11 +1,11 @@
-import { h, computed } from 'vue'
+import { computed, h } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import useCheckbox, {
-  useCheckboxProps,
-  useCheckboxEmits
+  useCheckboxEmits,
+  useCheckboxProps
 } from './use-checkbox.js'
 
 const createBgNode = () =>
@@ -50,9 +50,9 @@ 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) || null
       )

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

@@ -1,4 +1,4 @@
-import { h, ref, computed, getCurrentInstance, toRaw } from 'vue'
+import { computed, getCurrentInstance, h, ref, toRaw } from 'vue'
 
 import useDark, {
   useDarkProps
@@ -14,7 +14,7 @@ import {
 
 import optionSizes from '../../utils/private.option-sizes/option-sizes.js'
 import { stopAndPrevent } from '../../utils/event/event.js'
-import { hSlot, hMergeSlot } from '../../utils/private.render/render.js'
+import { hMergeSlot, hSlot } from '../../utils/private.render/render.js'
 
 export const useCheckboxProps = {
   ...useDarkProps,
@@ -54,6 +54,12 @@ export const useCheckboxProps = {
 
 export const useCheckboxEmits = ['update:modelValue']
 
+function onKeydown(e) {
+  if (e.keyCode === 13 || e.keyCode === 32) {
+    stopAndPrevent(e)
+  }
+}
+
 export default function useCheckbox(type, getInner) {
   const { props, slots, emit, proxy } = getCurrentInstance()
   const { $q } = proxy
@@ -70,51 +76,40 @@ export default function useCheckbox(type, getInner) {
 
   const index = computed(() => {
     const val = toRaw(props.val)
-    return modelIsArray.value === true
+    return modelIsArray.value
       ? props.modelValue.findIndex(opt => toRaw(opt) === val)
       : -1
   })
 
   const isTrue = computed(() =>
-    modelIsArray.value === true
+    modelIsArray.value
       ? index.value !== -1
       : toRaw(props.modelValue) === toRaw(props.trueValue)
   )
 
   const isFalse = computed(() =>
-    modelIsArray.value === true
+    modelIsArray.value
       ? index.value === -1
       : toRaw(props.modelValue) === toRaw(props.falseValue)
   )
 
-  const isIndeterminate = computed(
-    () => isTrue.value === false && isFalse.value === false
-  )
-
-  const tabindex = computed(() =>
-    props.disable === true ? -1 : props.tabindex || 0
-  )
-
+  const isIndeterminate = computed(() => !isTrue.value && !isFalse.value)
+  const tabindex = computed(() => (props.disable ? -1 : props.tabindex || 0))
   const classes = computed(
     () =>
       `q-${type} cursor-pointer no-outline row inline no-wrap items-center` +
-      (props.disable === true ? ' disabled' : '') +
-      (isDark.value === true ? ` q-${type}--dark` : '') +
-      (props.dense === true ? ` q-${type}--dense` : '') +
-      (props.leftLabel === true ? ' reverse' : '')
+      (props.disable ? ' disabled' : '') +
+      (isDark.value ? ` q-${type}--dark` : '') +
+      (props.dense ? ` q-${type}--dense` : '') +
+      (props.leftLabel ? ' reverse' : '')
   )
 
   const innerClass = computed(() => {
-    const state =
-      isTrue.value === true
-        ? 'truthy'
-        : isFalse.value === true
-          ? 'falsy'
-          : 'indet'
+    const state = isTrue.value ? 'truthy' : isFalse.value ? 'falsy' : 'indet'
+
     const color =
       props.color !== void 0 &&
-      (props.keepColor === true ||
-        (type === 'toggle' ? isTrue.value === true : isFalse.value !== true))
+      (props.keepColor || (type === 'toggle' ? isTrue.value : !isFalse.value))
         ? ` text-${props.color}`
         : ''
 
@@ -128,9 +123,9 @@ export default function useCheckbox(type, getInner) {
       Object.assign(prop, {
         // see https://vuejs.org/guide/extras/render-function.html#creating-vnodes (.prop)
         '.checked': isTrue.value,
-        '^checked': isTrue.value === true ? 'checked' : void 0,
+        '^checked': isTrue.value ? 'checked' : void 0,
         name: props.name,
-        value: modelIsArray.value === true ? props.val : props.trueValue
+        value: modelIsArray.value ? props.val : props.trueValue
       })
     }
 
@@ -144,15 +139,14 @@ export default function useCheckbox(type, getInner) {
       tabindex: tabindex.value,
       role: type === 'toggle' ? 'switch' : 'checkbox',
       'aria-label': props.label,
-      'aria-checked':
-        isIndeterminate.value === true
-          ? 'mixed'
-          : isTrue.value === true
-            ? 'true'
-            : 'false'
+      'aria-checked': isIndeterminate.value
+        ? 'mixed'
+        : isTrue.value
+          ? 'true'
+          : 'false'
     }
 
-    if (props.disable === true) {
+    if (props.disable) {
       attrs['aria-disabled'] = 'true'
     }
 
@@ -165,28 +159,28 @@ export default function useCheckbox(type, getInner) {
       refocusTarget(e)
     }
 
-    if (props.disable !== true) {
+    if (!props.disable) {
       emit('update:modelValue', getNextValue(), e)
     }
   }
 
   function getNextValue() {
-    if (modelIsArray.value === true) {
-      if (isTrue.value === true) {
-        const val = props.modelValue.slice()
+    if (modelIsArray.value) {
+      if (isTrue.value) {
+        const val = [...props.modelValue]
         val.splice(index.value, 1)
         return val
       }
 
-      return props.modelValue.concat([props.val])
+      return [...props.modelValue, props.val]
     }
 
-    if (isTrue.value === true) {
-      if (props.toggleOrder !== 'ft' || props.toggleIndeterminate === false) {
+    if (isTrue.value) {
+      if (props.toggleOrder !== 'ft' || !props.toggleIndeterminate) {
         return props.falseValue
       }
-    } else if (isFalse.value === true) {
-      if (props.toggleOrder === 'ft' || props.toggleIndeterminate === false) {
+    } else if (isFalse.value) {
+      if (props.toggleOrder === 'ft' || !props.toggleIndeterminate) {
         return props.trueValue
       }
     } else {
@@ -196,12 +190,6 @@ export default function useCheckbox(type, getInner) {
     return props.indeterminateValue
   }
 
-  function onKeydown(e) {
-    if (e.keyCode === 13 || e.keyCode === 32) {
-      stopAndPrevent(e)
-    }
-  }
-
   function onKeyup(e) {
     if (e.keyCode === 13 || e.keyCode === 32) {
       onClick(e)
@@ -216,7 +204,7 @@ export default function useCheckbox(type, getInner) {
   return () => {
     const inner = getInnerContent()
 
-    if (props.disable !== true) {
+    if (!props.disable) {
       injectFormInput(
         inner,
         'unshift',

package/src/components/chip/QChip.js

@@ -1,4 +1,4 @@
-import { h, computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
@@ -13,7 +13,7 @@ import useSize, {
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { stopAndPrevent } from '../../utils/event/event.js'
-import { hMergeSlotSafely, hDir } from '../../utils/private.render/render.js'
+import { hDir, hMergeSlotSafely } from '../../utils/private.render/render.js'
 
 export const defaultSizes = {
   xs: 8,
@@ -76,12 +76,10 @@ export default createComponent({
     const isDark = useDark(props, $q)
     const sizeStyle = useSize(props, defaultSizes)
 
-    const hasLeftIcon = computed(
-      () => props.selected === true || props.icon !== void 0
-    )
+    const hasLeftIcon = computed(() => props.selected || props.icon !== void 0)
 
     const leftIcon = computed(() =>
-      props.selected === true
+      props.selected
         ? props.iconSelected || $q.iconSet.chip.selected
         : props.icon
     )
@@ -91,40 +89,34 @@ export default createComponent({
     )
 
     const isClickable = computed(
-      () =>
-        props.disable === false &&
-        (props.clickable === true || props.selected !== null)
+      () => !props.disable && (props.clickable || props.selected !== null)
     )
 
     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-chip row inline no-wrap items-center' +
-        (props.outline === false && props.color !== void 0
-          ? ` bg-${props.color}`
-          : '') +
+        (!props.outline && props.color !== void 0 ? ` bg-${props.color}` : '') +
         (text ? ` text-${text} q-chip--colored` : '') +
-        (props.disable === true ? ' disabled' : '') +
-        (props.dense === true ? ' q-chip--dense' : '') +
-        (props.outline === true ? ' q-chip--outline' : '') +
-        (props.selected === true ? ' q-chip--selected' : '') +
-        (isClickable.value === true
+        (props.disable ? ' disabled' : '') +
+        (props.dense ? ' q-chip--dense' : '') +
+        (props.outline ? ' q-chip--outline' : '') +
+        (props.selected ? ' q-chip--selected' : '') +
+        (isClickable.value
           ? ' q-chip--clickable cursor-pointer non-selectable q-hoverable'
           : '') +
-        (props.square === true ? ' q-chip--square' : '') +
-        (isDark.value === true ? ' q-chip--dark q-dark' : '')
+        (props.square ? ' q-chip--square' : '') +
+        (isDark.value ? ' q-chip--dark q-dark' : '')
       )
     })
 
     const attributes = computed(() => {
-      const chip =
-        props.disable === true
-          ? { tabindex: -1, 'aria-disabled': 'true' }
-          : { tabindex: props.tabindex || 0 }
+      const chip = props.disable
+        ? { tabindex: -1, 'aria-disabled': 'true' }
+        : { tabindex: props.tabindex || 0 }
 
       const remove = {
         ...chip,
@@ -150,7 +142,7 @@ export default createComponent({
     function onRemove(e) {
       if (e.keyCode === void 0 || e.keyCode === 13) {
         stopAndPrevent(e)
-        if (props.disable === false) {
+        if (!props.disable) {
           emit('update:modelValue', false)
           emit('remove')
         }
@@ -160,11 +152,11 @@ export default createComponent({
     function getContent() {
       const child = []
 
-      if (isClickable.value === true) {
+      if (isClickable.value) {
         child.push(h('div', { class: 'q-focus-helper' }))
       }
 
-      if (hasLeftIcon.value === true) {
+      if (hasLeftIcon.value) {
         child.push(
           h(QIcon, {
             class: 'q-chip__icon q-chip__icon--left',
@@ -197,7 +189,7 @@ export default createComponent({
         )
       }
 
-      if (props.removable === true) {
+      if (props.removable) {
         child.push(
           h(QIcon, {
             class: 'q-chip__icon q-chip__icon--remove cursor-pointer',
@@ -213,14 +205,14 @@ export default createComponent({
     }
 
     return () => {
-      if (props.modelValue === false) return
+      if (!props.modelValue) return
 
       const data = {
         class: classes.value,
         style: sizeStyle.value
       }
 
-      if (isClickable.value === true) {
+      if (isClickable.value) {
         Object.assign(data, attributes.value.chip, { onClick, onKeyup })
       }
 
@@ -229,7 +221,7 @@ export default createComponent({
         data,
         getContent(),
         'ripple',
-        props.ripple !== false && props.disable !== true,
+        props.ripple !== false && !props.disable,
         () => [[Ripple, props.ripple]]
       )
     }

package/src/components/chip/QChip.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 QChip, { defaultSizes } from './QChip.js'