quasar 2.19.3 → 2.20.0

package/src/components/table/QTable.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, ref, watch } from 'vue'
 
 import QTh from './QTh.js'
 
@@ -17,26 +17,26 @@ import useDark, {
 } from '../../composables/private.use-dark/use-dark.js'
 import { commonVirtScrollPropsList } from '../virtual-scroll/use-virtual-scroll.js'
 import useFullscreen, {
-  useFullscreenProps,
-  useFullscreenEmits
+  useFullscreenEmits,
+  useFullscreenProps
 } from '../../composables/private.use-fullscreen/use-fullscreen.js'
 
 import { useTableSort, useTableSortProps } from './table-sort.js'
 import { useTableFilter, useTableFilterProps } from './table-filter.js'
 import {
-  useTablePaginationState,
   useTablePagination,
-  useTablePaginationProps
+  useTablePaginationProps,
+  useTablePaginationState
 } from './table-pagination.js'
 import {
   useTableRowSelection,
-  useTableRowSelectionProps,
-  useTableRowSelectionEmits
+  useTableRowSelectionEmits,
+  useTableRowSelectionProps
 } from './table-row-selection.js'
 import {
   useTableRowExpand,
-  useTableRowExpandProps,
-  useTableRowExpandEmits
+  useTableRowExpandEmits,
+  useTableRowExpandProps
 } from './table-row-expand.js'
 import {
   useTableColumnSelection,
@@ -44,8 +44,8 @@ import {
 } from './table-column-selection.js'
 
 import {
-  injectProp,
-  injectMultipleProps
+  injectMultipleProps,
+  injectProp
 } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
 import { createComponent } from '../../utils/private.create/create.js'
 
@@ -56,6 +56,11 @@ commonVirtScrollPropsList.forEach(p => {
   virtScrollPassthroughProps[p] = {}
 })
 
+function getCellValue(col, row) {
+  const val = typeof col.field === 'function' ? col.field(row) : row[col.field]
+  return col.format !== void 0 ? col.format(val, row) : val
+}
+
 export default createComponent({
   name: 'QTable',
 
@@ -170,33 +175,29 @@ export default createComponent({
 
     const rootRef = ref(null)
     const virtScrollRef = ref(null)
-    const hasVirtScroll = computed(
-      () => props.grid !== true && props.virtualScroll === true
-    )
+    const hasVirtScroll = computed(() => !props.grid && props.virtualScroll)
 
     const cardDefaultClass = computed(
       () =>
         ' q-table__card' +
-        (isDark.value === true ? ' q-table__card--dark q-dark' : '') +
-        (props.square === true ? ' q-table--square' : '') +
-        (props.flat === true ? ' q-table--flat' : '') +
-        (props.bordered === true ? ' q-table--bordered' : '')
+        (isDark.value ? ' q-table__card--dark q-dark' : '') +
+        (props.square ? ' q-table--square' : '') +
+        (props.flat ? ' q-table--flat' : '') +
+        (props.bordered ? ' q-table--bordered' : '')
     )
 
     const containerClass = computed(
       () =>
         `q-table__container q-table--${props.separator}-separator column no-wrap` +
-        (props.grid === true ? ' q-table--grid' : cardDefaultClass.value) +
-        (isDark.value === true ? ' q-table--dark' : '') +
-        (props.dense === true ? ' q-table--dense' : '') +
-        (props.wrapCells === false ? ' q-table--no-wrap' : '') +
-        (inFullscreen.value === true ? ' fullscreen scroll' : '')
+        (props.grid ? ' q-table--grid' : cardDefaultClass.value) +
+        (isDark.value ? ' q-table--dark' : '') +
+        (props.dense ? ' q-table--dense' : '') +
+        (props.wrapCells ? '' : ' q-table--no-wrap') +
+        (inFullscreen.value ? ' fullscreen scroll' : '')
     )
 
     const rootContainerClass = computed(
-      () =>
-        containerClass.value +
-        (props.loading === true ? ' q-table--loading' : '')
+      () => containerClass.value + (props.loading ? ' q-table--loading' : '')
     )
 
     watch(
@@ -207,7 +208,7 @@ export default createComponent({
         props.tableHeaderClass +
         containerClass.value,
       () => {
-        if (hasVirtScroll.value === true) virtScrollRef.value?.reset()
+        if (hasVirtScroll.value) virtScrollRef.value?.reset()
       }
     )
 
@@ -229,7 +230,7 @@ export default createComponent({
     const filteredSortedRows = computed(() => {
       let rows = props.rows
 
-      if (isServerSide.value === true || rows.length === 0) {
+      if (isServerSide.value || rows.length === 0) {
         return rows
       }
 
@@ -246,7 +247,7 @@ export default createComponent({
 
       if (columnToSort.value !== null) {
         rows = computedSortMethod.value(
-          props.rows === rows ? rows.slice() : rows,
+          props.rows === rows ? [...rows] : rows,
           sortBy,
           descending
         )
@@ -262,9 +263,7 @@ export default createComponent({
     const computedRows = computed(() => {
       let rows = filteredSortedRows.value
 
-      if (isServerSide.value === true) {
-        return rows
-      }
+      if (isServerSide.value) return rows
 
       const { rowsPerPage } = computedPagination.value
 
@@ -336,24 +335,22 @@ export default createComponent({
       })
 
       if (acc.virtualScrollItemSize === void 0) {
-        acc.virtualScrollItemSize = props.dense === true ? 28 : 48
+        acc.virtualScrollItemSize = props.dense ? 28 : 48
       }
 
       return acc
     })
 
     function resetVirtualScroll() {
-      if (hasVirtScroll.value === true) virtScrollRef.value.reset()
+      if (hasVirtScroll.value) virtScrollRef.value.reset()
     }
 
     function getBody() {
-      if (props.grid === true) {
-        return getGridBody()
-      }
+      if (props.grid) return getGridBody()
 
-      const header = props.hideHeader !== true ? getTHead : null
+      const header = props.hideHeader ? null : getTHead
 
-      if (hasVirtScroll.value === true) {
+      if (hasVirtScroll.value) {
         const topRow = slots['top-row']
         const bottomRow = slots['bottom-row']
 
@@ -364,11 +361,8 @@ export default createComponent({
 
         if (topRow !== void 0) {
           const topContent = h('tbody', topRow({ cols: computedCols.value }))
-
           virtSlots.before =
-            header === null
-              ? () => topContent
-              : () => [header()].concat(topContent)
+            header === null ? () => topContent : () => [header(), topContent]
         } else if (header !== null) {
           virtSlots.before = header
         }
@@ -416,7 +410,7 @@ export default createComponent({
         return
       }
 
-      toIndex = parseInt(toIndex, 10)
+      toIndex = Number.parseInt(toIndex, 10)
       const rowEl = rootRef.value.querySelector(
         `tbody tr:nth-of-type(${toIndex + 1})`
       )
@@ -499,7 +493,7 @@ export default createComponent({
               )
         })
 
-      if (hasSelectionMode.value === true) {
+      if (hasSelectionMode.value) {
         const slot = slots['body-selection']
         const content =
           slot !== void 0
@@ -561,18 +555,18 @@ export default createComponent({
         topRow = slots['top-row'],
         bottomRow = slots['bottom-row']
 
-      let child = computedRows.value.map((row, pageIndex) =>
+      const child = computedRows.value.map((row, pageIndex) =>
         getTBodyTR(row, body, pageIndex)
       )
 
-      if (topRow !== void 0) {
-        child = topRow({ cols: computedCols.value }).concat(child)
-      }
-      if (bottomRow !== void 0) {
-        child = child.concat(bottomRow({ cols: computedCols.value }))
-      }
-
-      return h('tbody', child)
+      return h(
+        'tbody',
+        [
+          topRow?.({ cols: computedCols.value }),
+          ...child,
+          bottomRow?.({ cols: computedCols.value })
+        ].flat()
+      )
     }
 
     function getBodyScope(data) {
@@ -607,7 +601,7 @@ export default createComponent({
         dense: props.dense
       })
 
-      if (hasSelectionMode.value === true) {
+      if (hasSelectionMode.value) {
         injectProp(
           data,
           'selected',
@@ -628,12 +622,6 @@ export default createComponent({
       )
     }
 
-    function getCellValue(col, row) {
-      const val =
-        typeof col.field === 'function' ? col.field(row) : row[col.field]
-      return col.format !== void 0 ? col.format(val, row) : val
-    }
-
     const marginalsScope = computed(() => ({
       pagination: computedPagination.value,
       pagesNumber: pagesNumber.value,
@@ -654,7 +642,7 @@ export default createComponent({
         topRight = slots['top-right'],
         topSelection = slots['top-selection'],
         hasSelection =
-          hasSelectionMode.value === true &&
+          hasSelectionMode.value &&
           topSelection !== void 0 &&
           rowsSelectedNumber.value > 0,
         topClass = 'q-table__top relative-position row items-center'
@@ -665,8 +653,8 @@ export default createComponent({
 
       let child
 
-      if (hasSelection === true) {
-        child = topSelection(marginalsScope.value).slice()
+      if (hasSelection) {
+        child = [topSelection(marginalsScope.value)].flat()
       } else {
         child = []
 
@@ -705,13 +693,13 @@ export default createComponent({
     }
 
     const headerSelectedValue = computed(() =>
-      someRowsSelected.value === true ? null : allRowsSelected.value
+      someRowsSelected.value ? null : allRowsSelected.value
     )
 
     function getTHead() {
       const child = getTHeadTR()
 
-      if (props.loading === true && slots.loading === void 0) {
+      if (props.loading && slots.loading === void 0) {
         child.push(
           h('tr', { class: 'q-table__progress' }, [
             h(
@@ -734,7 +722,7 @@ export default createComponent({
         headerCell = slots['header-cell']
 
       if (header !== void 0) {
-        return header(getHeaderScope({ header: true })).slice()
+        return [header(getHeaderScope({ header: true }))].flat()
       }
 
       const child = computedCols.value.map(col => {
@@ -754,9 +742,9 @@ export default createComponent({
             )
       })
 
-      if (singleSelection.value === true && props.grid !== true) {
+      if (singleSelection.value && !props.grid) {
         child.unshift(h('th', { class: 'q-table--col-auto-width' }, ' '))
-      } else if (multipleSelection.value === true) {
+      } else if (multipleSelection.value) {
         const slot = slots['header-selection']
         const content =
           slot !== void 0
@@ -796,7 +784,7 @@ export default createComponent({
         dense: props.dense
       })
 
-      if (multipleSelection.value === true) {
+      if (multipleSelection.value) {
         injectProp(
           data,
           'selected',
@@ -809,9 +797,7 @@ export default createComponent({
     }
 
     function onMultipleSelectionSet(val) {
-      if (someRowsSelected.value === true) {
-        val = false
-      }
+      if (someRowsSelected.value) val = false
 
       updateSelection(
         computedRows.value.map(getRowKey.value),
@@ -827,21 +813,20 @@ export default createComponent({
         props.iconNextPage || $q.iconSet.table.nextPage,
         props.iconLastPage || $q.iconSet.table.lastPage
       ]
-      return $q.lang.rtl === true ? ico.reverse() : ico
+      return $q.lang.rtl ? ico.reverse() : ico
     })
 
     function getBottomDiv() {
-      if (props.hideBottom === true) return
+      if (props.hideBottom) return
 
-      if (nothingToDisplay.value === true) {
-        if (props.hideNoData === true) return
+      if (nothingToDisplay.value) {
+        if (props.hideNoData) return
 
-        const message =
-          props.loading === true
-            ? props.loadingLabel || $q.lang.table.loading
-            : props.filter
-              ? props.noResultsLabel || $q.lang.table.noResults
-              : props.noDataLabel || $q.lang.table.noData
+        const message = props.loading
+          ? props.loadingLabel || $q.lang.table.loading
+          : props.filter
+            ? props.noResultsLabel || $q.lang.table.noResults
+            : props.noDataLabel || $q.lang.table.noData
 
         const noData = slots['no-data']
         const children =
@@ -875,8 +860,8 @@ export default createComponent({
       }
 
       const child =
-        props.hideSelectedBanner !== true &&
-        hasSelectionMode.value === true &&
+        !props.hideSelectedBanner &&
+        hasSelectionMode.value &&
         rowsSelectedNumber.value > 0
           ? [
               h('div', { class: 'q-table__control' }, [
@@ -889,7 +874,7 @@ export default createComponent({
             ]
           : []
 
-      if (props.hidePagination !== true) {
+      if (!props.hidePagination) {
         return h(
           'div',
           {
@@ -920,7 +905,7 @@ export default createComponent({
 
       child.push(h('div', { class: 'q-table__separator col' }))
 
-      if (hasOpts === true) {
+      if (hasOpts) {
         child.push(
           h('div', { class: 'q-table__control' }, [
             h('span', { class: 'q-table__bottom-item' }, [
@@ -975,7 +960,7 @@ export default createComponent({
             flat: true
           }
 
-          if (props.dense === true) {
+          if (props.dense) {
             btnProps.size = 'sm'
           }
 
@@ -1033,12 +1018,11 @@ export default createComponent({
     }
 
     function getGridHeader() {
-      const child =
-        props.gridHeader === true
-          ? [h('table', { class: 'q-table' }, [getTHead(h)])]
-          : props.loading === true && slots.loading === void 0
-            ? getProgress(h)
-            : void 0
+      const child = props.gridHeader
+        ? [h('table', { class: 'q-table' }, [getTHead(h)])]
+        : props.loading && slots.loading === void 0
+          ? getProgress(h)
+          : void 0
 
       return h('div', { class: 'q-table__middle' }, child)
     }
@@ -1055,7 +1039,7 @@ export default createComponent({
                 ])
               )
 
-              if (hasSelectionMode.value === true) {
+              if (hasSelectionMode.value) {
                 const slot = slots['body-selection']
                 const content =
                   slot !== void 0
@@ -1133,9 +1117,7 @@ export default createComponent({
                 {
                   class:
                     'q-table__grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3' +
-                    (scope.selected === true
-                      ? ' q-table__grid-item--selected'
-                      : '')
+                    (scope.selected ? ' q-table__grid-item--selected' : '')
                 },
                 [h('div', data, child)]
               )
@@ -1187,7 +1169,7 @@ export default createComponent({
       const child = [getTopDiv()]
       const data = { ref: rootRef, class: rootContainerClass.value }
 
-      if (props.grid === true) {
+      if (props.grid) {
         child.push(getGridHeader())
       } else {
         Object.assign(data, {
@@ -1198,7 +1180,7 @@ export default createComponent({
 
       child.push(getBody(), getBottomDiv())
 
-      if (props.loading === true && slots.loading !== void 0) {
+      if (props.loading && slots.loading !== void 0) {
         child.push(slots.loading())
       }
 

package/src/components/table/QTd.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 { hSlot } from '../../utils/private.render/render.js'
@@ -17,8 +17,8 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-td' +
-        (props.autoWidth === true ? ' q-table--col-auto-width' : '') +
-        (props.noHover === true ? ' q-td--no-hover' : '') +
+        (props.autoWidth ? ' q-table--col-auto-width' : '') +
+        (props.noHover ? ' q-td--no-hover' : '') +
         ' '
     )
 

package/src/components/table/QTh.js

@@ -1,4 +1,4 @@
-import { h, getCurrentInstance } from 'vue'
+import { getCurrentInstance, h } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
@@ -30,7 +30,7 @@ export default createComponent({
         return h(
           'th',
           {
-            class: props.autoWidth === true ? 'q-table--col-auto-width' : '',
+            class: props.autoWidth ? 'q-table--col-auto-width' : '',
             onClick
           },
           hSlot(slots.default)
@@ -47,7 +47,7 @@ export default createComponent({
         col = props.props.col
       }
 
-      if (col.sortable === true) {
+      if (col.sortable) {
         const action = col.align === 'right' ? 'unshift' : 'push'
 
         child = hUniqueSlot(slots.default, [])
@@ -63,11 +63,10 @@ export default createComponent({
 
       const data = {
         class:
-          col.__thClass +
-          (props.autoWidth === true ? ' q-table--col-auto-width' : ''),
+          col.__thClass + (props.autoWidth ? ' q-table--col-auto-width' : ''),
         style: col.headerStyle,
         onClick: evt => {
-          if (col.sortable === true) props.props.sort(col)
+          if (col.sortable) props.props.sort(col)
           onClick(evt)
         }
       }

package/src/components/table/QTr.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'
@@ -15,10 +15,10 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-tr' +
-        (props.props === void 0 || props.props.header === true
+        (props.props === void 0 || props.props.header
           ? ''
           : ' ' + props.props.__trClass) +
-        (props.noHover === true ? ' q-tr--no-hover' : '')
+        (props.noHover ? ' q-tr--no-hover' : '')
     )
 
     return () =>

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

@@ -36,9 +36,7 @@ export function useTableColumnSelection(
     const cols =
       props.visibleColumns !== void 0
         ? colList.value.filter(
-            col =>
-              col.required === true ||
-              props.visibleColumns.includes(col.name) === true
+            col => col.required || props.visibleColumns.includes(col.name)
           )
         : colList.value
 
@@ -53,9 +51,9 @@ export function useTableColumnSelection(
         __thClass:
           alignClass +
           (col.headerClasses !== void 0 ? ' ' + col.headerClasses : '') +
-          (col.sortable === true ? ' sortable' : '') +
+          (col.sortable ? ' sortable' : '') +
           (col.name === sortBy
-            ? ` sorted ${descending === true ? 'sort-desc' : ''}`
+            ? ` sorted ${descending ? 'sort-desc' : ''}`
             : ''),
 
         __tdStyle:
@@ -86,7 +84,7 @@ export function useTableColumnSelection(
   const computedColspan = computed(() =>
     props.tableColspan !== void 0
       ? props.tableColspan
-      : computedCols.value.length + (hasSelectionMode.value === true ? 1 : 0)
+      : computedCols.value.length + (hasSelectionMode.value ? 1 : 0)
   )
 
   return {

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

@@ -1,4 +1,4 @@
-import { computed, watch, nextTick } from 'vue'
+import { computed, nextTick, watch } from 'vue'
 
 export const useTableFilterProps = {
   filter: [String, Object],
@@ -16,7 +16,7 @@ export function useTableFilter(props, setPagination) {
               const val = String(cellValue(col, row))
               const haystack =
                 val === 'undefined' || val === 'null' ? '' : val.toLowerCase()
-              return haystack.indexOf(lowerTerms) !== -1
+              return haystack.includes(lowerTerms)
             })
           )
         }

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

@@ -1,4 +1,4 @@
-import { ref, computed, watch, nextTick } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 
 function samePagination(oldPag, newPag) {
   for (const prop in newPag) {
@@ -32,20 +32,14 @@ export const useTablePaginationProps = {
 export function useTablePaginationState(vm, getCellValue) {
   const { props, emit } = vm
 
-  const innerPagination = ref(
-    Object.assign(
-      {
-        sortBy: null,
-        descending: false,
-        page: 1,
-        rowsPerPage:
-          props.rowsPerPageOptions.length !== 0
-            ? props.rowsPerPageOptions[0]
-            : 5
-      },
-      props.pagination
-    )
-  )
+  const innerPagination = ref({
+    sortBy: null,
+    descending: false,
+    page: 1,
+    rowsPerPage:
+      props.rowsPerPageOptions.length !== 0 ? props.rowsPerPageOptions[0] : 5,
+    ...props.pagination
+  })
 
   const computedPagination = computed(() => {
     const pag =
@@ -83,14 +77,14 @@ export function useTablePaginationState(vm, getCellValue) {
       ...val
     })
 
-    if (samePagination(computedPagination.value, newPagination) === true) {
-      if (isServerSide.value === true && forceServerRequest === true) {
+    if (samePagination(computedPagination.value, newPagination)) {
+      if (isServerSide.value && forceServerRequest) {
         sendServerRequest(newPagination)
       }
       return
     }
 
-    if (isServerSide.value === true) {
+    if (isServerSide.value) {
       sendServerRequest(newPagination)
       return
     }
@@ -130,7 +124,7 @@ export function useTablePagination(
   } = vm
 
   const computedRowsNumber = computed(() =>
-    isServerSide.value === true
+    isServerSide.value
       ? computedPagination.value.rowsNumber || 0
       : filteredSortedRowsNumber.value
   )
@@ -169,7 +163,7 @@ export function useTablePagination(
       innerPagination.value.rowsPerPage
     )
       ? props.rowsPerPageOptions
-      : [innerPagination.value.rowsPerPage].concat(props.rowsPerPageOptions)
+      : [innerPagination.value.rowsPerPage, ...props.rowsPerPageOptions]
 
     return opts.map(count => ({
       label: count === 0 ? $q.lang.table.allRows : String(count),

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

@@ -1,7 +1,7 @@
 import { ref, watch } from 'vue'
 
 function getVal(val) {
-  return Array.isArray(val) ? val.slice() : []
+  return Array.isArray(val) ? [...val] : []
 }
 
 export const useTableRowExpandProps = {
@@ -33,10 +33,10 @@ export function useTableRowExpand(props, emit) {
   }
 
   function updateExpanded(key, add) {
-    const target = innerExpanded.value.slice()
+    const target = [...innerExpanded.value]
     const index = target.indexOf(key)
 
-    if (add === true) {
+    if (add) {
       if (index === -1) {
         target.push(key)
         setExpanded(target)