quasar 2.17.7 → 2.18.1

package/src/components/form/QForm.js

@@ -114,7 +114,7 @@ export default createComponent({
           if (props.onSubmit !== void 0) {
             emit('submit', evt)
           }
-          else if (evt !== void 0 && evt.target !== void 0 && typeof evt.target.submit === 'function') {
+          else if (evt?.target !== void 0 && typeof evt.target.submit === 'function') {
             evt.target.submit()
           }
         }
@@ -143,7 +143,7 @@ export default createComponent({
           || rootRef.value.querySelector('[autofocus], [data-autofocus]')
           || Array.prototype.find.call(rootRef.value.querySelectorAll('[tabindex]'), el => el.tabIndex !== -1)
 
-        target !== null && target !== void 0 && target.focus({ preventScroll: true })
+        target?.focus({ preventScroll: true })
       })
     }
 

package/src/components/form/QFormChildMixin.js

@@ -30,13 +30,15 @@ export default {
 
   mounted () {
     // register to parent QForm
-    const $form = this.$.provides[ formKey ]
-    $form !== void 0 && this.disable !== true && $form.bindComponent(this)
+    if (this.disable !== true) {
+      this.$.provides[ formKey ]?.bindComponent(this)
+    }
   },
 
   beforeUnmount () {
     // un-register from parent QForm
-    const $form = this.$.provides[ formKey ]
-    $form !== void 0 && this.disable !== true && $form.unbindComponent(this)
+    if (this.disable !== true) {
+      this.$.provides[ formKey ]?.unbindComponent(this)
+    }
   }
 }

package/src/components/icon/QIcon.js

@@ -20,7 +20,8 @@ const libMap = {
   'ion-logo': ionFn,
   'iconfont ': sameFn,
   'ti-': i => `themify-icon ${ i }`,
-  'bi-': i => `bootstrap-icons ${ i }`
+  'bi-': i => `bootstrap-icons ${ i }`,
+  'i-': sameFn // UnoCSS pure icons
 }
 
 const matMap = {
@@ -186,7 +187,6 @@ export default createComponent({
         class: classes.value,
         style: sizeStyle.value,
         'aria-hidden': 'true',
-        role: 'presentation'
       }
 
       if (type.value.none === true) {

package/src/components/infinite-scroll/QInfiniteScroll.js

@@ -126,9 +126,7 @@ export default createComponent({
         isWorking.value = false
         isFetching.value = false
         localScrollTarget.removeEventListener('scroll', poll, passive)
-        if (poll !== void 0 && poll.cancel !== void 0) {
-          poll.cancel()
-        }
+        poll?.cancel?.()
       }
     }
 
@@ -240,7 +238,7 @@ export default createComponent({
     // expose public methods
     const vm = getCurrentInstance()
     Object.assign(vm.proxy, {
-      poll: () => { poll !== void 0 && poll() },
+      poll: () => { poll?.() },
       trigger, stop, reset, resume, setIndex, updateScrollTarget
     })
 

package/src/components/input/QInput.js

@@ -203,7 +203,7 @@ export default createComponent({
     }
 
     function select () {
-      inputRef.value !== null && inputRef.value.select()
+      inputRef.value?.select()
     }
 
     function onPaste (e) {
@@ -340,7 +340,7 @@ export default createComponent({
         emitTimer = null
       }
 
-      emitValueFn !== void 0 && emitValueFn()
+      emitValueFn?.()
 
       emit('change', e.target.value)
     }
@@ -353,7 +353,7 @@ export default createComponent({
         emitTimer = null
       }
 
-      emitValueFn !== void 0 && emitValueFn()
+      emitValueFn?.()
 
       typedNumber = false
       stopValueWatcher = false

package/src/components/item/QItem.js

@@ -92,7 +92,7 @@ export default createComponent({
 
     function onClick (e) {
       if (isClickable.value === true) {
-        if (blurTargetRef.value !== null) {
+        if (blurTargetRef.value !== null && e.qAvoidFocus !== true) {
           if (e.qKeyEvent !== true && document.activeElement === rootRef.value) {
             blurTargetRef.value.focus()
           }

package/src/components/menu/QMenu.js

@@ -38,7 +38,7 @@ export default createComponent({
     persistent: Boolean,
     autoClose: Boolean,
     separateClosePopup: Boolean,
-
+    noEscDismiss: Boolean,
     noRouteDismiss: Boolean,
     noRefocus: Boolean,
     noFocus: Boolean,
@@ -177,7 +177,7 @@ export default createComponent({
       addFocusFn(() => {
         let node = innerRef.value
 
-        if (node && node.contains(document.activeElement) !== true) {
+        if (node && (node.contains(document.activeElement) !== true)) {
           node = node.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]')
             || node.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]')
             || node.querySelector('[autofocus], [data-autofocus]')
@@ -256,10 +256,11 @@ export default createComponent({
           || evt.qClickOutside !== true
         )
       ) {
-        ((evt && evt.type.indexOf('key') === 0
+        ((evt?.type.indexOf('key') === 0
           ? refocusTarget.closest('[tabindex]:not([tabindex^="-"])')
           : void 0
         ) || refocusTarget).focus()
+
         refocusTarget = null
       }
 
@@ -321,8 +322,10 @@ export default createComponent({
     }
 
     function onEscapeKey (evt) {
-      emit('escapeKey')
-      hide(evt)
+      if (props.noEscDismiss !== true) {
+        emit('escapeKey')
+        hide(evt)
+      }
     }
 
     function updatePosition () {

package/src/components/menu/QMenu.json

@@ -67,6 +67,13 @@
       "category": "behavior"
     },
 
+    "no-esc-dismiss": {
+      "type": "Boolean",
+      "desc": "User cannot dismiss the popup by hitting ESC key; No need to set it if 'persistent' prop is also set",
+      "category": "behavior",
+      "addedIn": "v2.18"
+    },
+
     "no-route-dismiss": {
       "type": "Boolean",
       "desc": "Changing route app won't dismiss the popup; No need to set it if 'persistent' prop is also set",
@@ -128,7 +135,7 @@
 
   "events": {
     "escape-key": {
-      "desc": "Emitted when ESC key is pressed; Does not get emitted if Menu is 'persistent'"
+      "desc": "Emitted when ESC key is pressed; Does not get emitted if Menu is 'persistent' or it has 'no-esc-dismiss' set"
     },
 
     "click": { "internal": true }

package/src/components/pagination/QPagination.js

@@ -317,7 +317,8 @@ export default createComponent({
           getBtn({
             key: 'bls',
             disable: props.disable || props.modelValue <= minProp.value,
-            icon: icons.value[ 0 ]
+            icon: icons.value[ 0 ],
+            'aria-label': $q.lang.pagination.first
           }, minProp.value)
         )
 
@@ -325,7 +326,8 @@ export default createComponent({
           getBtn({
             key: 'ble',
             disable: props.disable || props.modelValue >= maxProp.value,
-            icon: icons.value[ 3 ]
+            icon: icons.value[ 3 ],
+            'aria-label': $q.lang.pagination.last
           }, maxProp.value)
         )
       }
@@ -335,7 +337,8 @@ export default createComponent({
           getBtn({
             key: 'bdp',
             disable: props.disable || props.modelValue <= minProp.value,
-            icon: icons.value[ 1 ]
+            icon: icons.value[ 1 ],
+            'aria-label': $q.lang.pagination.prev
           }, props.modelValue - 1)
         )
 
@@ -343,7 +346,8 @@ export default createComponent({
           getBtn({
             key: 'bdn',
             disable: props.disable || props.modelValue >= maxProp.value,
-            icon: icons.value[ 2 ]
+            icon: icons.value[ 2 ],
+            'aria-label': $q.lang.pagination.next
           }, props.modelValue + 1)
         )
       }

package/src/components/parallax/QParallax.js

@@ -134,7 +134,7 @@ export default createComponent({
 
     onBeforeUnmount(() => {
       stop()
-      observer !== void 0 && observer.disconnect()
+      observer?.disconnect()
       mediaEl.onload = mediaEl.onloadstart = mediaEl.loadedmetadata = null
     })
 

package/src/components/popup-edit/QPopupEdit.js

@@ -163,8 +163,8 @@ export default createComponent({
     Object.assign(proxy, {
       set,
       cancel,
-      show (e) { menuRef.value !== null && menuRef.value.show(e) },
-      hide (e) { menuRef.value !== null && menuRef.value.hide(e) },
+      show (e) { menuRef.value?.show(e) },
+      hide (e) { menuRef.value?.hide(e) },
       updatePosition
     })
 

package/src/components/pull-to-refresh/QPullToRefresh.js

@@ -149,7 +149,7 @@ export default createComponent({
       timer = setTimeout(() => {
         timer = null
         animating.value = false
-        done && done()
+        done?.()
       }, 300)
     }
 

package/src/components/rating/QRating.sass

@@ -14,7 +14,7 @@
     text-shadow: $rating-shadow
     position: relative
     opacity: .4
-    transition: transform .2s ease-in, opacity .2s ease-in
+    transition: transform .2s ease-in, opacity .2s ease-in, color .2s ease-in
 
     &--hovered
       transform: scale(1.3)

package/src/components/resize-observer/QResizeObserver.js

@@ -117,7 +117,7 @@ export default createComponent({
       function onObjLoad () {
         cleanup()
 
-        if (targetEl && targetEl.contentDocument) {
+        if (targetEl?.contentDocument) {
           curDocView = targetEl.contentDocument.defaultView
           curDocView.addEventListener('resize', trigger, listenOpts.passive)
           emitEvent()

package/src/components/scroll-observer/QScrollObserver.js

@@ -53,7 +53,7 @@ export default createComponent({
     })
 
     function emitEvent () {
-      clearTimer !== null && clearTimer()
+      clearTimer?.()
 
       const top = Math.max(0, getVerticalScrollPosition(localScrollTarget))
       const left = getHorizontalScrollPosition(localScrollTarget)
@@ -123,7 +123,7 @@ export default createComponent({
     })
 
     onBeforeUnmount(() => {
-      clearTimer !== null && clearTimer()
+      clearTimer?.()
       unconfigureScrollTarget()
     })
 

package/src/components/select/QSelect.js

@@ -273,7 +273,7 @@ export default createComponent({
     const needsHtmlFn = computed(() => (
       props.optionsHtml === true
         ? () => true
-        : opt => opt !== void 0 && opt !== null && opt.html === true
+        : opt => opt?.html === true
     ))
 
     const valueAsHtml = computed(() => (
@@ -533,7 +533,7 @@ export default createComponent({
           hidePopup()
         }
 
-        targetRef.value !== null && targetRef.value.focus()
+        targetRef.value?.focus()
 
         if (
           innerValue.value.length === 0
@@ -545,7 +545,9 @@ export default createComponent({
         return
       }
 
-      (hasDialog !== true || dialogFieldFocused.value === true) && state.focus()
+      if (hasDialog !== true || dialogFieldFocused.value === true) {
+        state.focus()
+      }
 
       selectInputText()
 
@@ -894,7 +896,7 @@ export default createComponent({
           fn(val, mode === 'add-unique')
 
           if (props.multiple !== true) {
-            targetRef.value !== null && targetRef.value.focus()
+            targetRef.value?.focus()
             hidePopup()
           }
         }
@@ -960,6 +962,7 @@ export default createComponent({
 
       return [
         h('span', {
+          class: 'ellipsis',
           [ valueAsHtml.value === true ? 'innerHTML' : 'textContent' ]: ariaCurrentValue.value
         })
       ]
@@ -1214,7 +1217,7 @@ export default createComponent({
 
     function onDialogFieldFocus (e) {
       stop(e)
-      targetRef.value !== null && targetRef.value.focus()
+      targetRef.value?.focus()
       dialogFieldFocused.value = true
       window.scrollTo(window.pageXOffset || window.scrollX || document.body.scrollLeft || 0, 0)
     }
@@ -1511,7 +1514,7 @@ export default createComponent({
 
           if (hasDialog !== true && menu.value === true) {
             closeMenu()
-            targetRef.value !== null && targetRef.value.focus()
+            targetRef.value?.focus()
             return
           }
 

package/src/components/select/QSelect.json

@@ -260,7 +260,7 @@
 
     "fill-input": {
       "type": "Boolean",
-      "desc": "Fills the input with current value; Useful along with 'hide-selected'; Does NOT works along with 'multiple' selection",
+      "desc": "Fills the input with current value; Useful along with 'hide-selected'; Does NOT work along with 'multiple' selection",
       "category": "behavior"
     },
 

package/src/components/slide-transition/QSlideTransition.js

@@ -20,7 +20,7 @@ export default createComponent({
     let timer = null, timerFallback = null, animListener, lastEvent
 
     function cleanup () {
-      doneFn && doneFn()
+      doneFn?.()
       doneFn = null
       animating = false
 
@@ -34,7 +34,7 @@ export default createComponent({
         timerFallback = null
       }
 
-      element !== void 0 && element.removeEventListener('transitionend', animListener)
+      element?.removeEventListener('transitionend', animListener)
       animListener = null
     }
 

package/src/components/stepper/StepHeader.js

@@ -119,7 +119,7 @@ export default createComponent({
     ))
 
     function onActivate () {
-      blurRef.value !== null && blurRef.value.focus()
+      blurRef.value?.focus()
       isActive.value === false && props.goToPanel(props.step.name)
     }
 

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,6 +975,17 @@ 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
@@ -1020,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())