quasar 2.19.2 → 2.20.0

package/src/components/table/table-row-selection.js

@@ -24,25 +24,18 @@ export function useTableRowSelection(props, emit, computedRows, getRowKey) {
   })
 
   const hasSelectionMode = computed(() => props.selection !== 'none')
-
   const singleSelection = computed(() => props.selection === 'single')
-
   const multipleSelection = computed(() => props.selection === 'multiple')
-
   const allRowsSelected = computed(
     () =>
       computedRows.value.length !== 0 &&
-      computedRows.value.every(
-        row => selectedKeys.value[getRowKey.value(row)] === true
-      )
+      computedRows.value.every(row => selectedKeys.value[getRowKey.value(row)])
   )
 
   const someRowsSelected = computed(
     () =>
-      allRowsSelected.value !== true &&
-      computedRows.value.some(
-        row => selectedKeys.value[getRowKey.value(row)] === true
-      )
+      !allRowsSelected.value &&
+      computedRows.value.some(row => selectedKeys.value[getRowKey.value(row)])
   )
 
   const rowsSelectedNumber = computed(() => props.selected.length)
@@ -58,16 +51,13 @@ export function useTableRowSelection(props, emit, computedRows, getRowKey) {
   function updateSelection(keys, rows, added, evt) {
     emit('selection', { rows, added, keys, evt })
 
-    const payload =
-      singleSelection.value === true
-        ? added === true
-          ? rows
-          : []
-        : added === true
-          ? props.selected.concat(rows)
-          : props.selected.filter(
-              row => keys.includes(getRowKey.value(row)) === false
-            )
+    const payload = singleSelection.value
+      ? added
+        ? rows
+        : []
+      : added
+        ? [...props.selected, ...rows]
+        : props.selected.filter(row => !keys.includes(getRowKey.value(row)))
 
     emit('update:selected', payload)
   }

package/src/components/table/table-sort.js

@@ -1,7 +1,7 @@
 import { computed } from 'vue'
 
 import { sortDate } from '../../utils/private.sort/sort.js'
-import { isNumber, isDate, isObject } from '../../utils/is/is.js'
+import { isDate, isNumber, isObject } from '../../utils/is/is.js'
 
 export const useTableSortProps = {
   sortMethod: Function,
@@ -36,7 +36,7 @@ export function useTableSort(
             return data
           }
 
-          const dir = descending === true ? -1 : 1,
+          const dir = descending ? -1 : 1,
             val =
               typeof col.field === 'function'
                 ? v => col.field(v)
@@ -60,10 +60,10 @@ export function useTableSort(
               // due to the above two statements
               return col.sort(A, B, a, b) * dir
             }
-            if (isNumber(A) === true && isNumber(B) === true) {
+            if (isNumber(A) && isNumber(B)) {
               return (A - B) * dir
             }
-            if (isDate(A) === true && isDate(B) === true) {
+            if (isDate(A) && isDate(B)) {
               return sortDate(A, B) * dir
             }
             if (typeof A === 'boolean' && typeof B === 'boolean') {
@@ -80,7 +80,7 @@ export function useTableSort(
   function sort(col /* String(col name) or Object(col definition) */) {
     let sortOrder = props.columnSortOrder
 
-    if (isObject(col) === true) {
+    if (isObject(col)) {
       if (col.sortOrder) {
         sortOrder = col.sortOrder
       }
@@ -98,9 +98,9 @@ export function useTableSort(
     if (sortBy !== col) {
       sortBy = col
       descending = sortOrder === 'da'
-    } else if (props.binaryStateSort === true) {
+    } else if (props.binaryStateSort) {
       descending = !descending
-    } else if (descending === true) {
+    } else if (descending) {
       if (sortOrder === 'ad') {
         sortBy = null
       } else {

package/src/components/tabs/QRouteTab.js

@@ -3,7 +3,7 @@ import { computed, watch } from 'vue'
 import useRouterLink, {
   useRouterLinkProps
 } from '../../composables/private.use-router-link/use-router-link.js'
-import useTab, { useTabProps, useTabEmits } from './use-tab.js'
+import useTab, { useTabEmits, useTabProps } from './use-tab.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 

package/src/components/tabs/QTab.js

@@ -1,4 +1,4 @@
-import useTab, { useTabProps, useTabEmits } from './use-tab.js'
+import useTab, { useTabEmits, useTabProps } from './use-tab.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 

package/src/components/tabs/QTabs.js

@@ -1,13 +1,13 @@
 import {
-  h,
-  ref,
   computed,
-  watch,
-  onBeforeUnmount,
+  getCurrentInstance,
+  h,
   onActivated,
+  onBeforeUnmount,
   onDeactivated,
-  getCurrentInstance,
-  provide
+  provide,
+  ref,
+  watch
 } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
@@ -22,9 +22,19 @@ import { tabsKey } from '../../utils/private.symbols/symbols.js'
 import { rtlHasScrollBug } from '../../utils/private.rtl/rtl.js'
 
 function getIndicatorClass(color, top, vertical) {
-  const pos = vertical === true ? ['left', 'right'] : ['top', 'bottom']
+  const pos = vertical ? ['left', 'right'] : ['top', 'bottom']
 
-  return `absolute-${top === true ? pos[0] : pos[1]}${color ? ` text-${color}` : ''}`
+  return `absolute-${top ? pos[0] : pos[1]}${color ? ` text-${color}` : ''}`
+}
+
+function hasQueryIncluded(targetQuery, matchingQuery) {
+  for (const key in targetQuery) {
+    if (targetQuery[key] !== matchingQuery[key]) {
+      return false
+    }
+  }
+
+  return true
 }
 
 const alignValues = ['left', 'center', 'right', 'justify']
@@ -125,21 +135,18 @@ export default createComponent({
       const val = currentModel.value
 
       for (let i = 0; i < len; i++) {
-        if (tabDataList[i].name.value === val) {
-          return true
-        }
+        if (tabDataList[i].name.value === val) return true
       }
 
       return false
     })
 
     const alignClass = computed(() => {
-      const align =
-        scrollable.value === true
-          ? 'left'
-          : justify.value === true
-            ? 'justify'
-            : props.align
+      const align = scrollable.value
+        ? 'left'
+        : justify.value
+          ? 'justify'
+          : props.align
 
       return `q-tabs__content--align-${align}`
     })
@@ -147,13 +154,13 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-tabs row no-wrap items-center' +
-        ` q-tabs--${scrollable.value === true ? '' : 'not-'}scrollable` +
-        ` q-tabs--${props.vertical === true ? 'vertical' : 'horizontal'}` +
-        ` q-tabs__arrows--${props.outsideArrows === true ? 'outside' : 'inside'}` +
-        ` q-tabs--mobile-with${props.mobileArrows === true ? '' : 'out'}-arrows` +
-        (props.dense === true ? ' q-tabs--dense' : '') +
-        (props.shrink === true ? ' col-shrink' : '') +
-        (props.stretch === true ? ' self-stretch' : '')
+        ` q-tabs--${scrollable.value ? '' : 'not-'}scrollable` +
+        ` q-tabs--${props.vertical ? 'vertical' : 'horizontal'}` +
+        ` q-tabs__arrows--${props.outsideArrows ? 'outside' : 'inside'}` +
+        ` q-tabs--mobile-with${props.mobileArrows ? '' : 'out'}-arrows` +
+        (props.dense ? ' q-tabs--dense' : '') +
+        (props.shrink ? ' col-shrink' : '') +
+        (props.stretch ? ' self-stretch' : '')
     )
 
     const innerClass = computed(
@@ -164,7 +171,7 @@ export default createComponent({
     )
 
     const domProps = computed(() =>
-      props.vertical === true
+      props.vertical
         ? {
             container: 'height',
             content: 'offsetHeight',
@@ -173,12 +180,8 @@ export default createComponent({
         : { container: 'width', content: 'offsetWidth', scroll: 'scrollWidth' }
     )
 
-    const isRTL = computed(
-      () => props.vertical !== true && $q.lang.rtl === true
-    )
-    const rtlPosCorrection = computed(
-      () => rtlHasScrollBug === false && isRTL.value === true
-    )
+    const isRTL = computed(() => !props.vertical && $q.lang.rtl === true)
+    const rtlPosCorrection = computed(() => !rtlHasScrollBug && isRTL.value)
 
     watch(isRTL, updateArrows)
 
@@ -194,11 +197,11 @@ export default createComponent({
     function updateModel({ name, setCurrent, skipEmit }) {
       if (currentModel.value === name) return
 
-      if (skipEmit !== true && props['onUpdate:modelValue'] !== void 0) {
+      if (!skipEmit && props['onUpdate:modelValue'] !== void 0) {
         emit('update:modelValue', name)
       }
 
-      if (setCurrent === true || props['onUpdate:modelValue'] === void 0) {
+      if (setCurrent || props['onUpdate:modelValue'] === void 0) {
         animate(currentModel.value, name)
         currentModel.value = name
       }
@@ -235,9 +238,9 @@ export default createComponent({
       scrollable.value = scroll
 
       // Arrows need to be updated even if the scroll status was already true
-      if (scroll === true) registerUpdateArrowsTick(updateArrows)
+      if (scroll) registerUpdateArrowsTick(updateArrows)
 
-      justify.value = size < parseInt(props.breakpoint, 10)
+      justify.value = size < Number.parseInt(props.breakpoint, 10)
     }
 
     function animate(oldName, newName) {
@@ -250,7 +253,7 @@ export default createComponent({
             ? tabDataList.find(tab => tab.name.value === newName)
             : null
 
-      if (hadActivated === true) {
+      if (hadActivated) {
         // After the component has been re-activated
         // we should not animate the transition.
         // Consider it as if the component has just been mounted.
@@ -272,10 +275,9 @@ export default createComponent({
         const oldPos = oldEl.getBoundingClientRect(),
           newPos = newEl.getBoundingClientRect()
 
-        newEl.style.transform =
-          props.vertical === true
-            ? `translate3d(0,${oldPos.top - newPos.top}px,0) scale3d(1,${newPos.height ? oldPos.height / newPos.height : 1},1)`
-            : `translate3d(${oldPos.left - newPos.left}px,0,0) scale3d(${newPos.width ? oldPos.width / newPos.width : 1},1,1)`
+        newEl.style.transform = props.vertical
+          ? `translate3d(0,${oldPos.top - newPos.top}px,0) scale3d(1,${newPos.height ? oldPos.height / newPos.height : 1},1)`
+          : `translate3d(${oldPos.left - newPos.left}px,0,0) scale3d(${newPos.width ? oldPos.width / newPos.width : 1},1,1)`
 
         // allow scope updates to kick in (QRouteTab needs more time)
         registerAnimateTick(() => {
@@ -287,7 +289,7 @@ export default createComponent({
         })
       }
 
-      if (newTab && scrollable.value === true) {
+      if (newTab && scrollable.value) {
         scrollToTabEl(newTab.rootRef.value)
       }
     }
@@ -297,23 +299,19 @@ export default createComponent({
           contentRef.value.getBoundingClientRect(),
         newPos = el.getBoundingClientRect()
 
-      let offset =
-        props.vertical === true ? newPos.top - top : newPos.left - left
+      let offset = props.vertical ? newPos.top - top : newPos.left - left
 
       if (offset < 0) {
-        contentRef.value[
-          props.vertical === true ? 'scrollTop' : 'scrollLeft'
-        ] += Math.floor(offset)
+        contentRef.value[props.vertical ? 'scrollTop' : 'scrollLeft'] +=
+          Math.floor(offset)
         updateArrows()
         return
       }
 
-      offset +=
-        props.vertical === true ? newPos.height - height : newPos.width - width
+      offset += props.vertical ? newPos.height - height : newPos.width - width
       if (offset > 0) {
-        contentRef.value[
-          props.vertical === true ? 'scrollTop' : 'scrollLeft'
-        ] += Math.ceil(offset)
+        contentRef.value[props.vertical ? 'scrollTop' : 'scrollLeft'] +=
+          Math.ceil(offset)
         updateArrows()
       }
     }
@@ -323,42 +321,32 @@ export default createComponent({
       if (content === null) return
 
       const rect = content.getBoundingClientRect(),
-        pos =
-          props.vertical === true
-            ? content.scrollTop
-            : Math.abs(content.scrollLeft)
+        pos = props.vertical ? content.scrollTop : Math.abs(content.scrollLeft)
 
-      if (isRTL.value === true) {
+      if (isRTL.value) {
         leftArrow.value = Math.ceil(pos + rect.width) < content.scrollWidth - 1
         rightArrow.value = pos > 0
       } else {
         leftArrow.value = pos > 0
-        rightArrow.value =
-          props.vertical === true
-            ? Math.ceil(pos + rect.height) < content.scrollHeight
-            : Math.ceil(pos + rect.width) < content.scrollWidth
+        rightArrow.value = props.vertical
+          ? Math.ceil(pos + rect.height) < content.scrollHeight
+          : Math.ceil(pos + rect.width) < content.scrollWidth
       }
     }
 
     function animScrollTo(value) {
       if (scrollTimer !== null) clearInterval(scrollTimer)
       scrollTimer = setInterval(() => {
-        if (scrollTowards(value) === true) {
-          stopAnimScroll()
-        }
+        if (scrollTowards(value)) stopAnimScroll()
       }, 5)
     }
 
     function scrollToStart() {
-      animScrollTo(
-        rtlPosCorrection.value === true ? Number.MAX_SAFE_INTEGER : 0
-      )
+      animScrollTo(rtlPosCorrection.value ? Number.MAX_SAFE_INTEGER : 0)
     }
 
     function scrollToEnd() {
-      animScrollTo(
-        rtlPosCorrection.value === true ? 0 : Number.MAX_SAFE_INTEGER
-      )
+      animScrollTo(rtlPosCorrection.value ? 0 : Number.MAX_SAFE_INTEGER)
     }
 
     function stopAnimScroll() {
@@ -371,9 +359,7 @@ export default createComponent({
     function onKbdNavigate(keyCode, fromEl) {
       const tabs = Array.prototype.filter.call(
         contentRef.value.children,
-        el =>
-          el === fromEl ||
-          (el.matches && el.matches('.q-tab.q-focusable') === true)
+        el => el === fromEl || el.matches?.('.q-tab.q-focusable')
       )
 
       const len = tabs.length
@@ -393,16 +379,14 @@ export default createComponent({
       }
 
       const dirPrev =
-        keyCode ===
-        (props.vertical === true ? 38 /* ArrowUp */ : 37) /* ArrowLeft */
+        keyCode === (props.vertical ? 38 /* ArrowUp */ : 37) /* ArrowLeft */
       const dirNext =
-        keyCode ===
-        (props.vertical === true ? 40 /* ArrowDown */ : 39) /* ArrowRight */
+        keyCode === (props.vertical ? 40 /* ArrowDown */ : 39) /* ArrowRight */
 
-      const dir = dirPrev === true ? -1 : dirNext === true ? 1 : void 0
+      const dir = dirPrev ? -1 : dirNext ? 1 : void 0
 
       if (dir !== void 0) {
-        const rtlDir = isRTL.value === true ? -1 : 1
+        const rtlDir = isRTL.value ? -1 : 1
         const index = tabs.indexOf(fromEl) + dir * rtlDir
 
         if (index >= 0 && index < len) {
@@ -418,14 +402,14 @@ export default createComponent({
     // with a computed variable by directly applying the minimal
     // number of instructions on get/set functions
     const posFn = computed(() =>
-      rtlPosCorrection.value === true
+      rtlPosCorrection.value
         ? {
             get: content => Math.abs(content.scrollLeft),
             set: (content, pos) => {
               content.scrollLeft = -pos
             }
           }
-        : props.vertical === true
+        : props.vertical
           ? {
               get: content => content.scrollTop,
               set: (content, pos) => {
@@ -468,16 +452,6 @@ export default createComponent({
       return done
     }
 
-    function hasQueryIncluded(targetQuery, matchingQuery) {
-      for (const key in targetQuery) {
-        if (targetQuery[key] !== matchingQuery[key]) {
-          return false
-        }
-      }
-
-      return true
-    }
-
     // 1. Do not use directly; use verifyRouteModel() instead
     // 2. Should set hadActivated to false upon exit
     function updateActiveRoute() {
@@ -497,8 +471,7 @@ export default createComponent({
         const exact = tab.routeData.exact.value === true
 
         if (
-          tab.routeData[exact === true ? 'linkIsExactActive' : 'linkIsActive']
-            .value !== true
+          !tab.routeData[exact ? 'linkIsExactActive' : 'linkIsActive'].value
         ) {
           // it cannot match anything as it's not active nor exact-active
           continue
@@ -507,7 +480,7 @@ export default createComponent({
         const { hash, query, matched, href } = tab.routeData.resolvedLink.value
         const queryLen = Object.keys(query).length
 
-        if (exact === true) {
+        if (exact) {
           if (hash !== currentHash) {
             // it's set to exact but it doesn't matches the hash
             continue
@@ -515,7 +488,7 @@ export default createComponent({
 
           if (
             queryLen !== currentQueryLen ||
-            hasQueryIncluded(currentQuery, query) === false
+            !hasQueryIncluded(currentQuery, query)
           ) {
             // it's set to exact but it doesn't matches the query
             continue
@@ -531,7 +504,7 @@ export default createComponent({
           continue
         }
 
-        if (queryLen !== 0 && hasQueryIncluded(query, currentQuery) === false) {
+        if (queryLen !== 0 && !hasQueryIncluded(query, currentQuery)) {
           // it has query and it doesn't includes the current one
           continue
         }
@@ -573,7 +546,7 @@ export default createComponent({
         tabDataList.some(
           tab =>
             tab.routeData === void 0 && tab.name.value === currentModel.value
-        ) === true
+        )
       ) {
         // we shouldn't interfere if non-route tab is active
         hadActivated = false
@@ -587,7 +560,7 @@ export default createComponent({
       removeFocusTimeout()
 
       if (
-        hasFocus.value !== true &&
+        !hasFocus.value &&
         rootRef.value !== null &&
         e.target &&
         typeof e.target.closest === 'function'
@@ -596,9 +569,9 @@ export default createComponent({
 
         // if the target is contained by a QTab/QRouteTab
         // (it might be other elements focused, like additional QBtn)
-        if (tab && rootRef.value.contains(tab) === true) {
+        if (tab && rootRef.value.contains(tab)) {
           hasFocus.value = true
-          if (scrollable.value === true) scrollToTabEl(tab)
+          if (scrollable.value) scrollToTabEl(tab)
         }
       }
     }
@@ -637,7 +610,7 @@ export default createComponent({
       if (tabData.routeData === void 0 || proxy.$route === void 0) {
         // we should position to the currently active tab (if any)
         registerScrollToTabTimeout(() => {
-          if (scrollable.value === true) {
+          if (scrollable.value) {
             const value = currentModel.value
             const newTab =
               value !== void 0 && value !== null && value !== ''
@@ -653,7 +626,7 @@ export default createComponent({
         // start watching route
         watchRoute()
 
-        if (tabData.routeData.hasRouterLink.value === true) {
+        if (tabData.routeData.hasRouterLink.value) {
           verifyRouteModel()
         }
       }
@@ -667,7 +640,7 @@ export default createComponent({
 
       if (unwatchRoute !== void 0 && tabData.routeData !== void 0) {
         // unwatch route if we don't have any QRouteTabs left
-        if (tabDataList.every(tab => tab.routeData === void 0) === true) {
+        if (tabDataList.every(tab => tab.routeData === void 0)) {
           unwatchRoute()
         }
 
@@ -700,7 +673,8 @@ export default createComponent({
       unwatchRoute?.()
     }
 
-    let hadRouteWatcher, hadActivated
+    let hadRouteWatcher = false,
+      hadActivated = false
 
     onBeforeUnmount(cleanup)
 
@@ -710,7 +684,7 @@ export default createComponent({
     })
 
     onActivated(() => {
-      if (hadRouteWatcher === true) {
+      if (hadRouteWatcher) {
         watchRoute()
         hadActivated = true
         verifyRouteModel()
@@ -745,10 +719,9 @@ export default createComponent({
           h(QIcon, {
             class:
               'q-tabs__arrow q-tabs__arrow--left absolute q-tab__icon' +
-              (leftArrow.value === true ? '' : ' q-tabs__arrow--faded'),
+              (leftArrow.value ? '' : ' q-tabs__arrow--faded'),
             name:
-              props.leftIcon ||
-              $q.iconSet.tabs[props.vertical === true ? 'up' : 'left'],
+              props.leftIcon || $q.iconSet.tabs[props.vertical ? 'up' : 'left'],
             onMousedownPassive: scrollToStart,
             onTouchstartPassive: scrollToStart,
             onMouseupPassive: stopAnimScroll,
@@ -759,10 +732,10 @@ export default createComponent({
           h(QIcon, {
             class:
               'q-tabs__arrow q-tabs__arrow--right absolute q-tab__icon' +
-              (rightArrow.value === true ? '' : ' q-tabs__arrow--faded'),
+              (rightArrow.value ? '' : ' q-tabs__arrow--faded'),
             name:
               props.rightIcon ||
-              $q.iconSet.tabs[props.vertical === true ? 'down' : 'right'],
+              $q.iconSet.tabs[props.vertical ? 'down' : 'right'],
             onMousedownPassive: scrollToEnd,
             onTouchstartPassive: scrollToEnd,
             onMouseupPassive: stopAnimScroll,