quasar 2.17.7 → 2.18.1

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"
         }
       }
     },
@@ -1838,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)"
         }
       }
     }

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

package/src/directives/intersection/Intersection.js

@@ -28,7 +28,7 @@ function update (el, ctx, value) {
 
   if (changed === true) {
     ctx.cfg = cfg
-    ctx.observer !== void 0 && ctx.observer.unobserve(el)
+    ctx.observer?.unobserve(el)
 
     ctx.observer = new IntersectionObserver(([ entry ]) => {
       if (typeof ctx.handler === 'function') {
@@ -62,7 +62,7 @@ function destroy (el) {
   const ctx = el.__qvisible
 
   if (ctx !== void 0) {
-    ctx.observer !== void 0 && ctx.observer.unobserve(el)
+    ctx.observer?.unobserve(el)
     delete el.__qvisible
   }
 }

package/src/directives/morph/Morph.js

@@ -44,7 +44,7 @@ function trigger (group) {
     },
     ...to.opts,
     onEnd (dir, aborted) {
-      to.opts.onEnd !== void 0 && to.opts.onEnd(dir, aborted)
+      to.opts.onEnd?.(dir, aborted)
 
       if (aborted === true) return
 
@@ -206,7 +206,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
             group.queue = group.queue.filter(item => item !== ctx)
 
             if (group.queue.length === 0) {
-              group.cancel !== void 0 && group.cancel()
+              group.cancel?.()
               delete morphGroups[ ctx.group ]
             }
           }

package/src/directives/mutation/Mutation.js

@@ -12,7 +12,7 @@ const defaultCfg = {
 
 function update (el, ctx, value) {
   ctx.handler = value
-  ctx.observer !== void 0 && ctx.observer.disconnect()
+  ctx.observer?.disconnect()
 
   ctx.observer = new MutationObserver(list => {
     if (typeof ctx.handler === 'function') {
@@ -30,7 +30,7 @@ function destroy (el) {
   const ctx = el.__qmutation
 
   if (ctx !== void 0) {
-    ctx.observer !== void 0 && ctx.observer.disconnect()
+    ctx.observer?.disconnect()
     delete el.__qmutation
   }
 }

package/src/directives/touch-hold/TouchHold.js

@@ -106,7 +106,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
             cleanEvt(ctx, 'temp')
 
             // delay needed otherwise selection still occurs
-            ctx.styleCleanup !== void 0 && ctx.styleCleanup(ctx.triggered)
+            ctx.styleCleanup?.(ctx.triggered)
 
             if (ctx.triggered === true) {
               evt !== void 0 && stopAndPrevent(evt)
@@ -166,7 +166,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
           cleanEvt(ctx, 'temp')
 
           ctx.timer !== void 0 && clearTimeout(ctx.timer)
-          ctx.styleCleanup !== void 0 && ctx.styleCleanup()
+          ctx.styleCleanup?.()
 
           delete el.__qtouchhold
         }

package/src/directives/touch-pan/TouchPan.js

@@ -355,7 +355,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
             client.is.firefox === true && preventDraggable(el, false)
 
             if (abort === true) {
-              ctx.styleCleanup !== void 0 && ctx.styleCleanup()
+              ctx.styleCleanup?.()
 
               if (ctx.event.detected !== true && ctx.initialEvent !== void 0) {
                 ctx.initialEvent.target.dispatchEvent(ctx.initialEvent.event)
@@ -426,7 +426,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
           cleanEvt(ctx, 'temp')
 
           client.is.firefox === true && preventDraggable(el, false)
-          ctx.styleCleanup !== void 0 && ctx.styleCleanup()
+          ctx.styleCleanup?.()
 
           delete el.__qtouchpan
         }

package/src/directives/touch-repeat/TouchRepeat.js

@@ -186,8 +186,8 @@ export default createDirective(__QUASAR_SSR_SERVER__
           end (evt) {
             if (ctx.event === void 0) return
 
-            ctx.styleCleanup !== void 0 && ctx.styleCleanup(true)
-            evt !== void 0 && ctx.event.repeatCount > 0 && stopAndPrevent(evt)
+            ctx.styleCleanup?.(true)
+            if ((evt !== void 0) && (ctx.event.repeatCount > 0)) stopAndPrevent(evt)
 
             cleanEvt(ctx, 'temp')
 
@@ -248,7 +248,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
           cleanEvt(ctx, 'main')
           cleanEvt(ctx, 'temp')
 
-          ctx.styleCleanup !== void 0 && ctx.styleCleanup()
+          ctx.styleCleanup?.()
 
           delete el.__qtouchrepeat
         }

package/src/directives/touch-swipe/TouchSwipe.js

@@ -221,8 +221,8 @@ export default createDirective(__QUASAR_SSR_SERVER__
 
             cleanEvt(ctx, 'temp')
             client.is.firefox === true && preventDraggable(el, false)
-            ctx.styleCleanup !== void 0 && ctx.styleCleanup(true)
-            evt !== void 0 && ctx.event.dir !== false && stopAndPrevent(evt)
+            ctx.styleCleanup?.(true)
+            if ((evt !== void 0) && (ctx.event.dir !== false)) stopAndPrevent(evt)
 
             ctx.event = void 0
           }
@@ -268,7 +268,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
           cleanEvt(ctx, 'temp')
 
           client.is.firefox === true && preventDraggable(el, false)
-          ctx.styleCleanup !== void 0 && ctx.styleCleanup()
+          ctx.styleCleanup?.()
 
           delete el.__qtouchswipe
         }

package/src/plugins/lang/Lang.test.js

@@ -49,7 +49,14 @@ describe('[Lang API]', () => {
             monthsShort: expect.any(Array),
             firstDayOfWeek: expect.any(Number),
             format24h: expect.any(Boolean),
-            pluralDay: expect.any(String)
+            pluralDay: expect.any(String),
+            prevMonth: expect.any(String),
+            nextMonth: expect.any(String),
+            prevYear: expect.any(String),
+            nextYear: expect.any(String),
+            today: expect.any(String),
+            prevRangeYears: expect.any(Function),
+            nextRangeYears: expect.any(Function)
           },
           table: {
             noData: expect.any(String),
@@ -61,6 +68,12 @@ describe('[Lang API]', () => {
             pagination: expect.any(Function),
             columns: expect.any(String)
           },
+          pagination: {
+            first: expect.any(String),
+            last: expect.any(String),
+            next: expect.any(String),
+            prev: expect.any(String)
+          },
           editor: {
             url: expect.any(String),
             bold: expect.any(String),
@@ -161,7 +174,14 @@ describe('[Lang API]', () => {
               monthsShort: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
               firstDayOfWeek: 0,
               format24h: true,
-              pluralDay: 'days'
+              pluralDay: 'days',
+              prevMonth: expect.any(String),
+              nextMonth: expect.any(String),
+              prevYear: expect.any(String),
+              nextYear: expect.any(String),
+              today: expect.any(String),
+              prevRangeYears: expect.any(Function),
+              nextRangeYears: expect.any(Function)
             },
             table: {
               noData: 'No data available',
@@ -173,6 +193,12 @@ describe('[Lang API]', () => {
               pagination: (start, end, total) => start + '-' + end + ' of ' + total,
               columns: 'Columns'
             },
+            pagination: {
+              first: expect.any(String),
+              last: expect.any(String),
+              next: expect.any(String),
+              prev: expect.any(String)
+            },
             editor: {
               url: 'URL',
               bold: 'Bold',

package/src/plugins/loading/Loading.js

@@ -34,7 +34,7 @@ const originalDefaults = {
 const defaults = { ...originalDefaults }
 
 function registerProps (opts) {
-  if (opts && opts.group !== void 0 && activeGroups[ opts.group ] !== void 0) {
+  if (opts?.group !== void 0 && activeGroups[ opts.group ] !== void 0) {
     return Object.assign(activeGroups[ opts.group ], opts)
   }
 

package/src/plugins/notify/Notify.js

@@ -149,7 +149,7 @@ function addNotification (config, $q, originalApi) {
       ? defaults.actions
       : []
   ).concat(
-    notifTypes[ config.type ] !== void 0 && Array.isArray(notifTypes[ config.type ].actions) === true
+    Array.isArray(notifTypes[ config.type ]?.actions) === true
       ? notifTypes[ config.type ].actions
       : []
   )

package/src/plugins/private.body/Body.js

@@ -100,7 +100,7 @@ export default {
       const { $q, ssrContext } = opts
       const cls = getBodyClasses($q.platform, $q.config)
 
-      if ($q.config.screen !== void 0 && $q.config.screen.bodyClass === true) {
+      if ($q.config.screen?.bodyClass === true) {
         cls.push('screen--xs')
       }
 

package/src/plugins/private.history/History.js

@@ -51,7 +51,7 @@ export default {
 
     const qConf = $q.config[ cordova === true ? 'cordova' : 'capacitor' ]
 
-    if (qConf !== void 0 && qConf.backButton === false) return
+    if (qConf?.backButton === false) return
 
     // if the '@capacitor/app' plugin is not installed
     // then we got nothing to do

package/src/plugins/screen/Screen.js

@@ -71,7 +71,7 @@ export default createReactivePlugin({
           visualViewport.height * visualViewport.scale + window.innerHeight - scrollingElement.clientHeight
         ]
 
-    const classes = $q.config.screen !== void 0 && $q.config.screen.bodyClasses === true
+    const classes = $q.config.screen?.bodyClasses === true
 
     this.__update = force => {
       const [ w, h ] = getSize()