quasar 2.17.6 → 2.18.0

package/src/components/table/QTable.js

@@ -91,10 +91,14 @@ export default createComponent({
     tableClass: [ String, Array, Object ],
     tableHeaderStyle: [ String, Array, Object ],
     tableHeaderClass: [ String, Array, Object ],
+    tableRowStyleFn: Function,
+    tableRowClassFn: Function,
     cardContainerClass: [ String, Array, Object ],
     cardContainerStyle: [ String, Array, Object ],
     cardStyle: [ String, Array, Object ],
     cardClass: [ String, Array, Object ],
+    cardStyleFn: Function,
+    cardClassFn: Function,
 
     hideBottom: Boolean,
     hideSelectedBanner: Boolean,
@@ -148,7 +152,7 @@ export default createComponent({
       + (props.bordered === true ? ' q-table--bordered' : '')
     )
 
-    const __containerClass = computed(() =>
+    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' : '')
@@ -157,13 +161,13 @@ export default createComponent({
       + (inFullscreen.value === true ? ' fullscreen scroll' : '')
     )
 
-    const containerClass = computed(() =>
-      __containerClass.value + (props.loading === true ? ' q-table--loading' : '')
+    const rootContainerClass = computed(() =>
+      containerClass.value + (props.loading === true ? ' q-table--loading' : '')
     )
 
     watch(
-      () => props.tableStyle + props.tableClass + props.tableHeaderStyle + props.tableHeaderClass + __containerClass.value,
-      () => { hasVirtScroll.value === true && virtScrollRef.value !== null && virtScrollRef.value.reset() }
+      () => props.tableStyle + props.tableClass + props.tableHeaderStyle + props.tableHeaderClass + containerClass.value,
+      () => { hasVirtScroll.value === true && virtScrollRef.value?.reset() }
     )
 
     const {
@@ -382,13 +386,26 @@ export default createComponent({
         selected = isRowSelected(key)
 
       if (bodySlot !== void 0) {
+        const cfg = {
+          key,
+          row,
+          pageIndex,
+          __trClass: selected ? 'selected' : ''
+        }
+
+        if (props.tableRowStyleFn !== void 0) {
+          cfg.__trStyle = props.tableRowStyleFn(row)
+        }
+
+        if (props.tableRowClassFn !== void 0) {
+          const cls = props.tableRowClassFn(row)
+          if (cls) {
+            cfg.__trClass = `${ cls } ${ cfg.__trClass }`
+          }
+        }
+
         return bodySlot(
-          getBodyScope({
-            key,
-            row,
-            pageIndex,
-            __trClass: selected ? 'selected' : ''
-          })
+          getBodyScope(cfg)
         )
       }
 
@@ -451,6 +468,17 @@ export default createComponent({
         }
       }
 
+      if (props.tableRowStyleFn !== void 0) {
+        data.style = props.tableRowStyleFn(row)
+      }
+
+      if (props.tableRowClassFn !== void 0) {
+        const cls = props.tableRowClassFn(row)
+        if (cls) {
+          data.class[ cls ] = true
+        }
+      }
+
       return h('tr', data, child)
     }
 
@@ -792,30 +820,28 @@ export default createComponent({
         h('div', { class: 'q-table__separator col' })
       )
 
-      if (hasOpts === true) {
-        child.push(
-          h('div', { class: 'q-table__control' }, [
-            h('span', { class: 'q-table__bottom-item' }, [
-              props.rowsPerPageLabel || $q.lang.table.recordsPerPage
-            ]),
-            h(QSelect, {
-              class: 'q-table__select inline q-table__bottom-item',
-              color: props.color,
-              modelValue: rowsPerPage,
-              options: computedRowsPerPageOptions.value,
-              displayValue: rowsPerPage === 0
-                ? $q.lang.table.allRows
-                : rowsPerPage,
-              dark: isDark.value,
-              borderless: true,
-              dense: true,
-              optionsDense: true,
-              optionsCover: true,
-              'onUpdate:modelValue': onPagSelection
-            })
-          ])
-        )
-      }
+      hasOpts === true && child.push(
+        h('div', { class: 'q-table__control' }, [
+          h('span', { class: 'q-table__bottom-item' }, [
+            props.rowsPerPageLabel || $q.lang.table.recordsPerPage
+          ]),
+          h(QSelect, {
+            class: 'q-table__select inline q-table__bottom-item',
+            color: props.color,
+            modelValue: rowsPerPage,
+            options: computedRowsPerPageOptions.value,
+            displayValue: rowsPerPage === 0
+              ? $q.lang.table.allRows
+              : rowsPerPage,
+            dark: isDark.value,
+            borderless: true,
+            dense: true,
+            optionsDense: true,
+            optionsCover: true,
+            'onUpdate:modelValue': onPagSelection
+          })
+        ])
+      )
 
       if (paginationSlot !== void 0) {
         control = paginationSlot(marginalsScope.value)
@@ -847,6 +873,7 @@ export default createComponent({
               ...btnProps,
               icon: navIcon.value[ 0 ],
               disable: isFirstPage.value,
+              ariaLabel: $q.lang.pagination.first,
               onClick: firstPage
             })
           )
@@ -857,6 +884,7 @@ export default createComponent({
               ...btnProps,
               icon: navIcon.value[ 1 ],
               disable: isFirstPage.value,
+              ariaLabel: $q.lang.pagination.prev,
               onClick: prevPage
             }),
 
@@ -865,6 +893,7 @@ export default createComponent({
               ...btnProps,
               icon: navIcon.value[ 2 ],
               disable: isLastPage.value,
+              ariaLabel: $q.lang.pagination.next,
               onClick: nextPage
             })
           )
@@ -875,6 +904,7 @@ export default createComponent({
               ...btnProps,
               icon: navIcon.value[ 3 ],
               disable: isLastPage.value,
+              ariaLabel: $q.lang.pagination.last,
               onClick: lastPage
             })
           )
@@ -945,9 +975,21 @@ export default createComponent({
             style: props.cardStyle
           }
 
+          if (props.cardStyleFn !== void 0) {
+            data.style = [ data.style, props.cardStyleFn(scope.row) ]
+          }
+
+          if (props.cardClassFn !== void 0) {
+            const cls = props.cardClassFn(scope.row)
+            if (cls) {
+              data.class[ 0 ] += ` ${ cls }`
+            }
+          }
+
           if (
             props.onRowClick !== void 0
             || props.onRowDblclick !== void 0
+            || props.onRowContextmenu !== void 0
           ) {
             data.class[ 0 ] += ' cursor-pointer'
 
@@ -962,6 +1004,12 @@ export default createComponent({
                 emit('RowDblclick', evt, scope.row, scope.pageIndex)
               }
             }
+
+            if (props.onRowContextmenu !== void 0) {
+              data.onContextmenu = evt => {
+                emit('rowContextmenu', evt, scope.row, scope.pageIndex)
+              }
+            }
           }
 
           return h('div', {
@@ -1013,7 +1061,7 @@ export default createComponent({
 
     return () => {
       const child = [ getTopDiv() ]
-      const data = { ref: rootRef, class: containerClass.value }
+      const data = { ref: rootRef, class: rootContainerClass.value }
 
       if (props.grid === true) {
         child.push(getGridHeader())

package/src/components/table/QTable.json

@@ -563,6 +563,50 @@
       "category": "style"
     },
 
+    "table-row-style-fn": {
+      "type": "Function",
+      "desc": "CSS style to apply to the table rows (which are TR elements); For best performance, reference it from your scope and do not define it inline",
+      "params": {
+        "row": {
+          "type": "Object",
+          "desc": "The current row being processed",
+          "examples": [ "{ name: 'Frozen Yogurt', calories: 159 }" ]
+        }
+      },
+      "returns": {
+        "type": "String",
+        "desc": "CSS style to apply to the row",
+        "examples": [
+          "'color: blue'",
+          "'background-color: #ff0000; color: green'"
+        ]
+      },
+      "category": "style",
+      "addedIn": "v2.18"
+    },
+
+    "table-row-class-fn": {
+      "type": "Function",
+      "desc": "CSS class(es) to apply the table rows (which are TR elements); For best performance, reference it from your scope and do not define it inline",
+      "params": {
+        "row": {
+          "type": "Object",
+          "desc": "The current row being processed",
+          "examples": [ "{ name: 'Frozen Yogurt', calories: 159 }" ]
+        }
+      },
+      "returns": {
+        "type": "String",
+        "desc": "CSS class(es) to apply to the row, space separated",
+        "examples": [
+          "'my-special-class'",
+          "'my-class my-second-class'"
+        ]
+      },
+      "category": "style",
+      "addedIn": "v2.18"
+    },
+
     "card-container-style": {
       "type": [ "String", "Array", "Object" ],
       "tsType": "VueStyleProp",
@@ -608,6 +652,50 @@
       "category": "style"
     },
 
+    "card-style-fn": {
+      "type": "Function",
+      "desc": "(Grid mode only) CSS style to apply to the row/record card; Has no effect when the 'item' slot is used; For best performance, reference it from your scope and do not define it inline",
+      "params": {
+        "row": {
+          "type": "Object",
+          "desc": "The current row/record being processed",
+          "examples": [ "{ name: 'Frozen Yogurt', calories: 159 }" ]
+        }
+      },
+      "returns": {
+        "type": "String",
+        "desc": "CSS style to apply to the row/record",
+        "examples": [
+          "'color: blue'",
+          "'background-color: #ff0000; color: green'"
+        ]
+      },
+      "category": "style",
+      "addedIn": "v2.18"
+    },
+
+    "card-class-fn": {
+      "type": "Function",
+      "desc": "(Grid mode only) CSS class(es) to apply the row/record card; Has no effect when the 'item' slot is used; For best performance, reference it from your scope and do not define it inline",
+      "params": {
+        "row": {
+          "type": "Object",
+          "desc": "The current row/record being processed",
+          "examples": [ "{ name: 'Frozen Yogurt', calories: 159 }" ]
+        }
+      },
+      "returns": {
+        "type": "String",
+        "desc": "CSS class(es) to apply to the row, space separated",
+        "examples": [
+          "'my-special-class'",
+          "'my-class my-second-class'"
+        ]
+      },
+      "category": "style",
+      "addedIn": "v2.18"
+    },
+
     "title-class": {
       "type": [ "String", "Array", "Object" ],
       "tsType": "VueClassProp",
@@ -896,6 +984,12 @@
         "__trClass": {
           "type": "String",
           "desc": "Internal prop passed down to QTr (if used)"
+        },
+        "__trStyle": {
+          "type": "String",
+          "required": false,
+          "desc": "Internal prop passed down to QTr (if used)",
+          "addedIn": "v2.18"
         }
       }
     },
@@ -1349,6 +1443,11 @@
               "type": "Number",
               "required": true,
               "desc": "How many rows per page? 0 means Infinite"
+            },
+            "rowsNumber": {
+              "type": "Number",
+              "required": false,
+              "desc": "For server-side fetching only. How many total database rows are there to be added to the table."
             }
           }
         },
@@ -1428,6 +1527,11 @@
               "type": "Number",
               "required": true,
               "desc": "How many rows per page? 0 means Infinite"
+            },
+            "rowsNumber": {
+              "type": "Number",
+              "required": false,
+              "desc": "For server-side fetching only. How many total database rows are there to be added to the table."
             }
           }
         },
@@ -1507,6 +1611,11 @@
               "type": "Number",
               "required": true,
               "desc": "How many rows per page? 0 means Infinite"
+            },
+            "rowsNumber": {
+              "type": "Number",
+              "required": false,
+              "desc": "For server-side fetching only. How many total database rows are there to be added to the table."
             }
           }
         },
@@ -1586,6 +1695,11 @@
               "type": "Number",
               "required": true,
               "desc": "How many rows per page? 0 means Infinite"
+            },
+            "rowsNumber": {
+              "type": "Number",
+              "required": false,
+              "desc": "For server-side fetching only. How many total database rows are there to be added to the table."
             }
           }
         },
@@ -1665,6 +1779,11 @@
               "type": "Number",
               "required": true,
               "desc": "How many rows per page? 0 means Infinite"
+            },
+            "rowsNumber": {
+              "type": "Number",
+              "required": false,
+              "desc": "For server-side fetching only. How many total database rows are there to be added to the table."
             }
           }
         },
@@ -1744,6 +1863,11 @@
               "type": "Number",
               "required": true,
               "desc": "How many rows per page? 0 means Infinite"
+            },
+            "rowsNumber": {
+              "type": "Number",
+              "required": false,
+              "desc": "For server-side fetching only. How many total database rows are there to be added to the table."
             }
           }
         },
@@ -1808,6 +1932,10 @@
           "type": "String",
           "desc": "The suggested icon name (following Quasar convention)",
           "examples": [ "'warning'" ]
+        },
+        "filter": {
+          "type": [ "String", "Object" ],
+          "desc": "String/Object to filter table with (the 'filter' prop)"
         }
       }
     }
@@ -1903,6 +2031,11 @@
                   "type": "Number",
                   "required": true,
                   "desc": "How many rows per page? 0 means Infinite"
+                },
+                "rowsNumber": {
+                  "type": "Number",
+                  "required": false,
+                  "desc": "For server-side fetching only. How many total database rows are there to be added to the table."
                 }
               }
             },
@@ -2177,6 +2310,11 @@
             "rowsPerPage": {
               "type": "Number",
               "desc": "How many rows per page? 0 means Infinite"
+            },
+            "rowsNumber": {
+              "type": "Number",
+              "required": false,
+              "desc": "For server-side fetching only. How many total database rows are there to be added to the table."
             }
           }
         },

package/src/components/table/QTr.js

@@ -18,6 +18,9 @@ export default createComponent({
       + (props.noHover === true ? ' q-tr--no-hover' : '')
     )
 
-    return () => h('tr', { class: classes.value }, hSlot(slots.default))
+    return () => h('tr', {
+      style: props.props?.__trStyle,
+      class: classes.value
+    }, hSlot(slots.default))
   }
 })

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

@@ -87,7 +87,7 @@ export function useTableSort (props, computedPagination, colList, setPagination)
     }
     else {
       const def = colList.value.find(def => def.name === col)
-      if (def !== void 0 && def.sortOrder) {
+      if (def?.sortOrder) {
         sortOrder = def.sortOrder
       }
     }

package/src/components/tabs/QTabs.js

@@ -424,7 +424,7 @@ export default createComponent({
     function updateActiveRoute () {
       let name = null, bestScore = { matchedLen: 0, queryDiff: 9999, hrefLen: 0 }
 
-      const list = tabDataList.filter(tab => tab.routeData !== void 0 && tab.routeData.hasRouterLink.value === true)
+      const list = tabDataList.filter(tab => tab.routeData?.hasRouterLink.value === true)
       const { hash: currentHash, query: currentQuery } = proxy.$route
       const currentQueryLen = Object.keys(currentQuery).length
 
@@ -632,7 +632,7 @@ export default createComponent({
     function cleanup () {
       animateTimer !== null && clearTimeout(animateTimer)
       stopAnimScroll()
-      unwatchRoute !== void 0 && unwatchRoute()
+      unwatchRoute?.()
     }
 
     let hadRouteWatcher, hadActivated

package/src/components/tabs/use-tab.js

@@ -99,13 +99,13 @@ export default function (props, slots, emit, routeData) {
   ))
 
   function onClick (e, keyboard) {
-    if (keyboard !== true && blurTargetRef.value !== null) {
-      blurTargetRef.value.focus()
+    if (keyboard !== true && e?.qAvoidFocus !== true) {
+      blurTargetRef.value?.focus()
     }
 
     if (props.disable === true) {
       // we should hinder native navigation though
-      if (routeData !== void 0 && routeData.hasRouterLink.value === true) {
+      if (routeData?.hasRouterLink.value === true) {
         stopAndPrevent(e)
       }
       return
@@ -140,7 +140,7 @@ export default function (props, slots, emit, routeData) {
               if (
                 hardError === void 0 && (
                   softError === void 0
-                  || (softError.message !== void 0 && softError.message.startsWith('Avoided redundant navigation') === true)
+                  || (softError.message?.startsWith('Avoided redundant navigation') === true)
                 )
               ) {
                 $tabs.updateModel({ name: props.name })

package/src/components/time/QTime.js

@@ -264,7 +264,7 @@ export default createComponent({
       for (let val = start, index = start; val <= end; val += step, index++) {
         const
           actualVal = val + offset,
-          disable = values !== void 0 && values.includes(actualVal) === false,
+          disable = values?.includes(actualVal) === false,
           label = view.value === 'hour' && val === 0
             ? (computedFormat24h.value === true ? '00' : '12')
             : val

package/src/components/tree/QTree.js

@@ -334,7 +334,7 @@ export default createComponent({
             node[ props.childrenKey ] = Array.isArray(children) === true ? children : []
             nextTick(() => {
               const localMeta = meta.value[ key ]
-              if (localMeta && localMeta.isParent === true) {
+              if (localMeta?.isParent === true) {
                 localSetExpanded(key, true)
               }
             })
@@ -627,8 +627,7 @@ export default createComponent({
     }
 
     function blur (key) {
-      const blurTarget = blurTargets[ key ]
-      blurTarget && blurTarget.focus()
+      blurTargets[ key ]?.focus()
     }
 
     function onClick (node, meta, e, keyboard) {

package/src/components/virtual-scroll/use-virtual-scroll.js

@@ -40,7 +40,7 @@ const setOverflowAnchor = __QUASAR_SSR__ || window.getComputedStyle(document.bod
 
       const el = children[ index ]
 
-      if (el && el.dataset) {
+      if (el?.dataset) {
         el.dataset.qVsAnchor = ''
       }
     })
@@ -422,7 +422,7 @@ export function useVirtualScroll ({
       contentEl.addEventListener('focusout', onBlurRefocusFn)
 
       setTimeout(() => {
-        contentEl !== null && contentEl.removeEventListener('focusout', onBlurRefocusFn)
+        contentEl?.removeEventListener('focusout', onBlurRefocusFn)
       })
     }
 
@@ -533,7 +533,7 @@ export function useVirtualScroll ({
   }
 
   function onBlurRefocusFn () {
-    contentRef.value !== null && contentRef.value !== void 0 && contentRef.value.focus()
+    contentRef.value?.focus()
   }
 
   function localResetVirtualScroll (toIndex, fullReset) {

package/src/composables/private.use-field/use-field.js

@@ -265,12 +265,12 @@ export default function (state) {
 
   function focusHandler () {
     const el = document.activeElement
-    let target = state.targetRef !== void 0 && state.targetRef.value
+    let target = state.targetRef?.value
 
     if (target && (el === null || el.id !== state.targetUid.value)) {
       target.hasAttribute('tabindex') === true || (target = target.querySelector('[tabindex]'))
-      if (target && target !== el) {
-        target.focus({ preventScroll: true })
+      if (target !== el) {
+        target?.focus({ preventScroll: true })
       }
     }
   }
@@ -318,7 +318,7 @@ export default function (state) {
         emit('blur', e)
       }
 
-      then !== void 0 && then()
+      then?.()
     })
   }
 
@@ -327,7 +327,7 @@ export default function (state) {
     stopAndPrevent(e)
 
     if ($q.platform.is.mobile !== true) {
-      const el = (state.targetRef !== void 0 && state.targetRef.value) || state.rootRef.value
+      const el = state.targetRef?.value || state.rootRef.value
       el.focus()
     }
     else if (state.rootRef.value.contains(document.activeElement) === true) {

package/src/composables/private.use-file/use-file.js

@@ -19,7 +19,10 @@ function filterFiles (files, rejectedFiles, failedPropValidation, filterFn) {
 }
 
 function stopAndPreventDrag (e) {
-  e && e.dataTransfer && (e.dataTransfer.dropEffect = 'copy')
+  if (e?.dataTransfer) {
+    e.dataTransfer.dropEffect = 'copy'
+  }
+
   stopAndPrevent(e)
 }
 
@@ -69,13 +72,13 @@ export default function ({
         e = { target: null }
       }
 
-      if (e.target !== null && e.target.matches('input[type="file"]') === true) {
+      if (e.target?.matches('input[type="file"]') === true) {
         // stop propagation if it's not a real pointer event
         e.clientX === 0 && e.clientY === 0 && stop(e)
       }
       else {
         const input = getFileInput()
-        input && input !== e.target && input.click(e)
+        if (input !== e.target) input?.click(e)
       }
     }
   }

package/src/composables/private.use-model-toggle/use-model-toggle.js

@@ -41,8 +41,8 @@ export default function ({
 
   function show (evt) {
     if (
-      props.disable === true
-      || (evt !== void 0 && evt.qAnchorHandled === true)
+      (props.disable === true)
+      || (evt?.qAnchorHandled === true)
       || (canShow !== void 0 && canShow(evt) !== true)
     ) return
 

package/src/composables/private.use-refocus-target/use-refocus-target.js

@@ -18,18 +18,19 @@ export default function (props, rootRef) {
   function refocusTarget (e) {
     const root = rootRef.value
 
-    if (e !== void 0 && e.type.indexOf('key') === 0) {
+    if (e?.qAvoidFocus === true) return
+
+    if (e?.type.indexOf('key') === 0) {
       if (
-        root !== null
-        && document.activeElement !== root
-        && root.contains(document.activeElement) === true
+        document.activeElement !== root
+        && root?.contains(document.activeElement) === true
       ) {
         root.focus()
       }
     }
     else if (
       refocusRef.value !== null
-      && (e === void 0 || (root !== null && root.contains(e.target) === true))
+      && ((e === void 0) || (root?.contains(e.target) === true))
     ) {
       refocusRef.value.focus()
     }

package/src/composables/private.use-validate/use-validate.js

@@ -201,7 +201,7 @@ export default function (focused, innerLoading) {
   const debouncedValidate = debounce(validate, 0)
 
   onBeforeUnmount(() => {
-    unwatchRules !== void 0 && unwatchRules()
+    unwatchRules?.()
     debouncedValidate.cancel()
   })