quasar 2.19.3 → 2.20.1

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))

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
       )