quasar 2.17.7 → 2.18.0

package/src/components/dialog/QDialog.js

@@ -180,7 +180,7 @@ export default createComponent({
       animating.value = true
 
       if (props.noFocus !== true) {
-        document.activeElement !== null && document.activeElement.blur()
+        document.activeElement?.blur()
         registerTick(focus)
       }
       else {
@@ -230,7 +230,7 @@ export default createComponent({
       hidePortal()
 
       if (refocusTarget !== null) {
-        ((evt && evt.type.indexOf('key') === 0
+        ((evt?.type.indexOf('key') === 0
           ? refocusTarget.closest('[tabindex]:not([tabindex^="-"])')
           : void 0
         ) || refocusTarget).focus()

package/src/components/dialog/QDialog.json

@@ -134,7 +134,7 @@
     },
 
     "escape-key": {
-      "desc": "Emitted when ESC key is pressed; Does not get emitted if Dialog is 'persistent' or it has 'no-esc-key' set"
+      "desc": "Emitted when ESC key is pressed; Does not get emitted if Dialog is 'persistent' or it has 'no-esc-dismiss' set"
     },
 
     "click": { "internal": true }

package/src/components/drawer/QDrawer.js

@@ -120,7 +120,7 @@ export default createComponent({
 
       if (belowBreakpoint.value === true) {
         const otherInstance = $layout.instances[ otherSide.value ]
-        if (otherInstance !== void 0 && otherInstance.belowBreakpoint === true) {
+        if (otherInstance?.belowBreakpoint === true) {
           otherInstance.hide(false)
         }
 
@@ -472,9 +472,7 @@ export default createComponent({
       timerMini = setTimeout(() => {
         timerMini = null
         flagMiniAnimate.value = false
-        if (vm && vm.proxy && vm.proxy.$el) {
-          vm.proxy.$el.classList.remove('q-drawer--mini-animate')
-        }
+        vm?.proxy?.$el?.classList.remove('q-drawer--mini-animate')
       }, 150)
     }
 
@@ -622,7 +620,7 @@ export default createComponent({
     })
 
     onBeforeUnmount(() => {
-      layoutTotalWidthWatcher !== void 0 && layoutTotalWidthWatcher()
+      layoutTotalWidthWatcher?.()
 
       if (timerMini !== null) {
         clearTimeout(timerMini)

package/src/components/editor/QEditor.js

@@ -451,7 +451,7 @@ export default createComponent({
 
     function focus () {
       addFocusFn(() => {
-        contentRef.value !== null && contentRef.value.focus({ preventScroll: true })
+        contentRef.value?.focus({ preventScroll: true })
       })
     }
 

package/src/components/editor/editor-caret.js

@@ -91,7 +91,7 @@ export default class Caret {
   get range () {
     const sel = this.selection
 
-    if (sel !== null && sel.rangeCount) {
+    if (sel?.rangeCount) {
       return sel.getRangeAt(0)
     }
 

package/src/components/editor/editor-utils.js

@@ -54,7 +54,7 @@ function getBtn (eVm, btn, clickHandler, active = false) {
     disable: btn.disable ? (typeof btn.disable === 'function' ? btn.disable(eVm) : true) : false,
     size: 'sm',
     onClick (e) {
-      clickHandler && clickHandler()
+      clickHandler?.()
       run(e, btn, eVm)
     }
   }, () => child)
@@ -120,7 +120,7 @@ function getDropdown (eVm, btn) {
         dense: true,
         onClick (e) {
           closeDropdown()
-          eVm.contentRef.value !== null && eVm.contentRef.value.focus()
+          e?.qAvoidFocus !== true && eVm.contentRef.value?.focus()
           eVm.caret.restore()
           run(e, btn, eVm)
         }

package/src/components/expansion-item/QExpansionItem.js

@@ -150,7 +150,7 @@ export default createComponent({
     })
 
     watch(() => props.group, name => {
-      exitGroup !== void 0 && exitGroup()
+      exitGroup?.()
       name !== void 0 && enterGroup()
     })
 
@@ -164,7 +164,10 @@ export default createComponent({
     }
 
     function toggleIcon (e, keyboard) {
-      keyboard !== true && blurTargetRef.value !== null && blurTargetRef.value.focus()
+      if (keyboard !== true && e.qAvoidFocus !== true) {
+        blurTargetRef.value?.focus()
+      }
+
       toggle(e)
       stopAndPrevent(e)
     }
@@ -360,7 +363,7 @@ export default createComponent({
     props.group !== void 0 && enterGroup()
 
     onBeforeUnmount(() => {
-      exitGroup !== void 0 && exitGroup()
+      exitGroup?.()
     })
 
     return () => h('div', { class: classes.value }, [

package/src/components/fab/QFab.js

@@ -128,8 +128,8 @@ export default createComponent({
       onChildClick (evt) {
         hide(evt)
 
-        if (triggerRef.value !== null) {
-          triggerRef.value.$el.focus()
+        if (evt?.qAvoidFocus !== true) {
+          triggerRef.value?.$el.focus()
         }
       }
     })

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()
           }
         }
@@ -1214,7 +1216,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 +1513,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)
     }