quasar 2.17.6 → 2.18.0

package/src/components/date/QDate.js

@@ -703,7 +703,7 @@ export default createComponent({
     ))
 
     watch(() => props.modelValue, v => {
-      if (lastEmitValue === v) {
+      if (lastEmitValue === JSON.stringify(v)) {
         lastEmitValue = 0
       }
       else {
@@ -732,6 +732,10 @@ export default createComponent({
       innerLocale.value = val
     })
 
+    function setLastValue (v) {
+      lastEmitValue = JSON.stringify(v)
+    }
+
     function setToday () {
       const { year, month, day } = today.value
 
@@ -902,7 +906,7 @@ export default createComponent({
 
     function toggleDate (date, monthHash) {
       const month = daysMap.value[ monthHash ]
-      const fn = month !== void 0 && month.includes(date.day) === true
+      const fn = month?.includes(date.day) === true
         ? removeFromModel
         : addToModel
 
@@ -958,9 +962,9 @@ export default createComponent({
         ? val[ 0 ]
         : val
 
-      lastEmitValue = value
-
       const { reason, details } = getEmitParams(action, date)
+
+      setLastValue(value)
       emit('update:modelValue', value, reason, details)
     }
 
@@ -981,9 +985,9 @@ export default createComponent({
         date.day = Math.min(Math.max(1, date.day), maxDay)
 
         const value = encodeEntry(date)
-        lastEmitValue = value
-
         const { details } = getEmitParams('', date)
+
+        setLastValue(value)
         emit('update:modelValue', value, reason, details)
       })
     }
@@ -1080,7 +1084,10 @@ export default createComponent({
             : entry.dateHash !== null
         })
 
-      emit('update:modelValue', (props.multiple === true ? model : model[ 0 ]) || null, reason)
+      const value = (props.multiple === true ? model : model[ 0 ]) || null
+
+      setLastValue(value)
+      emit('update:modelValue', value, reason)
     }
 
     function getHeader () {

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/option-group/QOptionGroup.json

@@ -14,25 +14,9 @@
 
     "options": {
       "type": "Array",
-      "desc": "Array of objects with value, label, and disable (optional) props. The binary components will be created according to this array; Props from QToggle, QCheckbox or QRadio can also be added as key/value pairs to control the components singularly",
+      "desc": "Array of objects that the binary components will be created from. For best performance reference a variable in your scope. Canonical form of each object is with 'label' (String), 'value' (Any) and optional 'disable' (Boolean) props (can be customized with options-value/option-label/option-disable props) along with any other props from QToggle, QCheckbox, or QRadio.",
       "default": "[]",
       "definition": {
-        "label": {
-          "type": "String",
-          "desc": "Label to display along the component",
-          "required": true,
-          "examples": [ "'Option 1'", "'Option 2'", "'Option 3'" ]
-        },
-        "value": {
-          "type": "Any",
-          "desc": "Value of the option that will be used by the component model",
-          "required": true,
-          "examples": [ "'op1'", "'op2'", "'op3'" ]
-        },
-        "disable": {
-          "type": "Boolean",
-          "desc": "If true, the option will be disabled"
-        },
         "...props": {
           "type": "Any",
           "desc": "Any other props from QToggle, QCheckbox, or QRadio",

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

@@ -34,7 +34,7 @@
 
     "options": {
       "type": "Array",
-      "desc": "Available options that the user can select from. For best performance freeze the list of options.",
+      "desc": "Array of objects with available options that the user can select from. For best performance freeze the list of options. Canonical form of each object is with 'label' (String), 'value' (Any) and optional 'disable' (Boolean) props (can be customized with options-value/option-label/option-disable props).",
       "default": "[]",
       "examples": [
         "[ 'Tesla', 'iPhone' ]",
@@ -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)
     }