quasar 2.14.1 → 2.14.3

package/dist/types/index.d.ts

@@ -14516,7 +14516,7 @@ export interface QNotifyCreateOptions {
    */
   attrs?: any;
   /**
-   * Amount of time to display (in milliseconds)
+   * Amount of time to display (in milliseconds). Set to 0 to never dismiss automatically.
    * Default value: 5000
    */
   timeout?: number;
@@ -15530,7 +15530,7 @@ declare module "./config.d.ts" {
        */
       attrs?: any;
       /**
-       * Amount of time to display (in milliseconds)
+       * Amount of time to display (in milliseconds). Set to 0 to never dismiss automatically.
        * Default value: 5000
        */
       timeout?: number;

package/dist/web-types/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.14.1",
+  "version": "2.14.3",
   "contributions": {
     "html": {
       "types-syntax": "typescript",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.14.1",
+  "version": "2.14.3",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",
@@ -105,7 +105,7 @@
     "table": "^6.8.1",
     "typescript": "^4.9.5",
     "uglify-es": "^3.3.9",
-    "vue": "^3.3.4",
+    "vue": "^3.4.15",
     "vue-router": "^4.2.1",
     "yargs": "^17.7.2"
   },

package/src/components/ajax-bar/QAjaxBar.js

@@ -184,13 +184,23 @@ export default createComponent({
 
       progress.value = 0
 
+      /**
+       * We're trying to avoid side effects if start() is called inside a watchEffect()
+       * so we're accessing the _value property directly (under the covers implementation detail of ref())
+       *
+       * Otherwise, any refs() accessed here would be marked as deps for the watchEffect()
+       * -- and we are changing them below, which would cause an infinite loop
+       */
+
       timer = setTimeout(() => {
         timer = null
         animate.value = true
         newSpeed > 0 && planNextStep()
-      }, onScreen.value === true ? 500 : 1)
+        // eslint-disable-next-line vue/no-ref-as-operand
+      }, onScreen._value === true ? 500 : 1)
 
-      if (onScreen.value !== true) {
+      // eslint-disable-next-line vue/no-ref-as-operand
+      if (onScreen._value !== true) {
         onScreen.value = true
         animate.value = false
       }

package/src/components/btn-dropdown/QBtnDropdown.js

@@ -6,11 +6,11 @@ import QBtnGroup from '../btn-group/QBtnGroup.js'
 import QMenu from '../menu/QMenu.js'
 
 import { getBtnDesignAttr, useBtnProps } from '../btn/use-btn.js'
+import useId from '../../composables/private/use-id.js'
 import { useTransitionProps } from '../../composables/private/use-transition.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { stop } from '../../utils/event.js'
-import uid from '../../utils/uid.js'
 import { hSlot } from '../../utils/private/render.js'
 
 const btnPropsList = Object.keys(useBtnProps)
@@ -70,13 +70,13 @@ export default createComponent({
 
     const showing = ref(props.modelValue)
     const menuRef = ref(null)
-    const targetUid = uid()
+    const targetUid = useId()
 
     const ariaAttrs = computed(() => {
       const acc = {
         'aria-expanded': showing.value === true ? 'true' : 'false',
         'aria-haspopup': 'true',
-        'aria-controls': targetUid,
+        'aria-controls': targetUid.value,
         'aria-label': props.toggleAriaLabel || proxy.$q.lang.label[ showing.value === true ? 'collapse' : 'expand' ](props.label)
       }
 
@@ -170,7 +170,7 @@ export default createComponent({
       props.disableDropdown !== true && Arrow.push(
         h(QMenu, {
           ref: menuRef,
-          id: targetUid,
+          id: targetUid.value,
           class: props.contentClass,
           style: props.contentStyle,
           cover: props.cover,

package/src/components/color/QColor.js

@@ -176,15 +176,11 @@ export default createComponent({
       + (isDark.value === true ? ' q-color-picker--dark q-dark' : '')
     )
 
-    const attributes = computed(() => {
-      if (props.disable === true) {
-        return { 'aria-disabled': 'true' }
-      }
-      if (props.readonly === true) {
-        return { 'aria-readonly': 'true' }
-      }
-      return {}
-    })
+    const attributes = computed(() => (
+      props.disable === true
+        ? { 'aria-disabled': 'true' }
+        : {}
+    ))
 
     const spectrumDirective = computed(() => {
       // if editable.value === true

package/src/components/date/QDate.js

@@ -694,7 +694,7 @@ export default createComponent({
     const attributes = computed(() => (
       props.disable === true
         ? { 'aria-disabled': 'true' }
-        : (props.readonly === true ? { 'aria-readonly': 'true' } : {})
+        : {}
     ))
 
     watch(() => props.modelValue, v => {

package/src/components/editor/QEditor.js

@@ -323,7 +323,7 @@ export default createComponent({
     const attributes = computed(() => (
       props.disable === true
         ? { 'aria-disabled': 'true' }
-        : (props.readonly === true ? { 'aria-readonly': 'true' } : {})
+        : {}
     ))
 
     function onInput () {

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

@@ -8,6 +8,7 @@ import QSlideTransition from '../slide-transition/QSlideTransition.js'
 import QSeparator from '../separator/QSeparator.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+import useId from '../../composables/private/use-id.js'
 import { useRouterLinkProps } from '../../composables/private/use-router-link.js'
 import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
 
@@ -75,7 +76,7 @@ export default createComponent({
     )
 
     const blurTargetRef = ref(null)
-    const targetUid = uid()
+    const targetUid = useId()
 
     const { show, hide, toggle } = useModelToggle({ showing })
 
@@ -143,7 +144,7 @@ export default createComponent({
       return {
         role: 'button',
         'aria-expanded': showing.value === true ? 'true' : 'false',
-        'aria-controls': targetUid,
+        'aria-controls': targetUid.value,
         'aria-label': toggleAriaLabel
       }
     })
@@ -320,7 +321,7 @@ export default createComponent({
           key: 'e-content',
           class: 'q-expansion-item__content relative-position',
           style: contentStyle.value,
-          id: targetUid
+          id: targetUid.value
         }, hSlot(slots.default)),
         [ [
           vShow,

package/src/components/fab/QFab.js

@@ -4,12 +4,12 @@ import QBtn from '../btn/QBtn.js'
 import QIcon from '../icon/QIcon.js'
 
 import useFab, { useFabProps } from './use-fab.js'
+import useId from '../../composables/private/use-id.js'
 import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { hSlot, hMergeSlot } from '../../utils/private/render.js'
 import { fabKey } from '../../utils/private/symbols.js'
-import uid from '../../utils/uid.js'
 
 const directions = [ 'up', 'right', 'down', 'left' ]
 const alignValues = [ 'left', 'center', 'right' ]
@@ -49,7 +49,7 @@ export default createComponent({
   setup (props, { slots }) {
     const triggerRef = ref(null)
     const showing = ref(props.modelValue === true)
-    const targetUid = uid()
+    const targetUid = useId()
 
     const { proxy: { $q } } = getCurrentInstance()
     const { formClass, labelProps } = useFab(props, showing)
@@ -77,7 +77,7 @@ export default createComponent({
 
     const actionAttrs = computed(() => {
       const attrs = {
-        id: targetUid,
+        id: targetUid.value,
         role: 'menu'
       }
 
@@ -149,7 +149,7 @@ export default createComponent({
         fab: true,
         'aria-expanded': showing.value === true ? 'true' : 'false',
         'aria-haspopup': 'true',
-        'aria-controls': targetUid,
+        'aria-controls': targetUid.value,
         onClick: toggle
       }, getTriggerContent),
 

package/src/components/icon/QIcon.js

@@ -194,13 +194,13 @@ export default createComponent({
       }
 
       if (type.value.img === true) {
-        return h('span', data, hMergeSlot(slots.default, [
+        return h(props.tag, data, hMergeSlot(slots.default, [
           h('img', { src: type.value.src })
         ]))
       }
 
       if (type.value.svg === true) {
-        return h('span', data, hMergeSlot(slots.default, [
+        return h(props.tag, data, hMergeSlot(slots.default, [
           h('svg', {
             viewBox: type.value.viewBox || '0 0 24 24'
           }, type.value.nodes)
@@ -208,7 +208,7 @@ export default createComponent({
       }
 
       if (type.value.svguse === true) {
-        return h('span', data, hMergeSlot(slots.default, [
+        return h(props.tag, data, hMergeSlot(slots.default, [
           h('svg', {
             viewBox: type.value.viewBox
           }, [

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

@@ -236,7 +236,7 @@ export default createComponent({
     const vm = getCurrentInstance()
     Object.assign(vm.proxy, {
       poll: () => { poll !== void 0 && poll() },
-      trigger, stop, reset, resume, setIndex
+      trigger, stop, reset, resume, setIndex, updateScrollTarget
     })
 
     return () => {

package/src/components/menu/__tests__/QMenu.cy.js

@@ -271,8 +271,11 @@ describe('Menu API', () => {
           })
           cy.dataCy('wrapper')
             .click()
+
           cy.dataCy('menu')
             .checkVerticalPosition('wrapper', 'center', 'center')
+
+          cy.dataCy('menu')
             .checkHorizontalPosition('wrapper', 'middle', 'middle')
         })
 
@@ -285,8 +288,11 @@ describe('Menu API', () => {
           })
           cy.dataCy('other-target')
             .click()
+
           cy.dataCy('menu')
             .checkVerticalPosition('other-target', 'center', 'center')
+
+          cy.dataCy('menu')
             .checkHorizontalPosition('other-target', 'middle', 'middle')
         })
 
@@ -300,8 +306,11 @@ describe('Menu API', () => {
           })
           cy.dataCy('other-target')
             .click()
+
           cy.dataCy('menu')
             .checkVerticalPosition('other-target', 'center', 'center')
+
+          cy.dataCy('menu')
             .checkHorizontalPosition('other-target', 'middle', 'middle')
         })
       })
@@ -312,8 +321,11 @@ describe('Menu API', () => {
 
           cy.dataCy('wrapper')
             .click()
+
           cy.dataCy('menu')
             .checkVerticalPosition('wrapper', 'bottom', 'top')
+
+          cy.dataCy('menu')
             .checkHorizontalPosition('wrapper', 'left', 'left')
         })
 
@@ -335,8 +347,11 @@ describe('Menu API', () => {
 
                   cy.dataCy('wrapper')
                     .click()
+
                   cy.dataCy('menu')
                     .checkVerticalPosition('wrapper', vA, vS)
+
+                  cy.dataCy('menu')
                     .checkHorizontalPosition('wrapper', hA, hS)
                 })
               })
@@ -535,12 +550,17 @@ describe('Menu API', () => {
         cy.dataCy('menu')
           .should('exist')
           .checkVerticalPosition('wrapper', 'bottom', 'bottom')
+
+        cy.dataCy('menu')
           .checkHorizontalPosition('wrapper', 'left', 'left')
+
+        cy.dataCy('menu')
           .then(($el) => {
             const rect = $el[ 0 ].getBoundingClientRect()
             bottom = rect.bottom
             left = rect.left
           })
+
         cy.dataCy('div')
           .then(($el) => {
             $el[ 0 ].style.height = '100px'
@@ -550,12 +570,16 @@ describe('Menu API', () => {
                 expect(rect.bottom).to.equal(bottom - 100)
                 expect(rect.left).to.equal(left)
               })
+
             cy.dataCy('wrapper')
               .then(() => {
                 Cypress.vueWrapper.vm.updatePosition()
               })
+
             cy.dataCy('menu')
               .checkVerticalPosition('wrapper', 'bottom', 'bottom')
+
+            cy.dataCy('menu')
               .checkHorizontalPosition('wrapper', 'left', 'left')
           })
       })

package/src/components/range/QRange.js

@@ -288,15 +288,15 @@ export default createComponent({
         case dragType.RANGE:
           const
             ratioDelta = ratio - dragging.offsetRatio,
-            minR = between(dragging.ratioMin + ratioDelta, 0, 1 - dragging.rangeRatio),
+            minR = between(dragging.ratioMin + ratioDelta, state.innerMinRatio.value, state.innerMaxRatio.value - dragging.rangeRatio),
             modelDelta = localModel - dragging.offsetModel,
-            min = between(dragging.valueMin + modelDelta, props.min, props.max - dragging.rangeValue)
+            min = between(dragging.valueMin + modelDelta, state.innerMin.value, state.innerMax.value - dragging.rangeValue)
 
           pos = {
             minR,
             maxR: minR + dragging.rangeRatio,
-            min: parseFloat(min.toFixed(state.decimals.value)),
-            max: parseFloat((min + dragging.rangeValue).toFixed(state.decimals.value))
+            min: state.roundValueFn.value(min),
+            max: state.roundValueFn.value(min + dragging.rangeValue)
           }
 
           state.focus.value = 'both'
@@ -326,7 +326,7 @@ export default createComponent({
       stopAndPrevent(evt)
 
       const
-        stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * state.step.value,
+        stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * state.keyStep.value,
         offset = (
           ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1)
           * (state.isReversed.value === true ? -1 : 1)
@@ -336,14 +336,14 @@ export default createComponent({
       if (state.focus.value === 'both') {
         const interval = model.value.max - model.value.min
         const min = between(
-          parseFloat((model.value.min + offset).toFixed(state.decimals.value)),
+          state.roundValueFn.value(model.value.min + offset),
           state.innerMin.value,
           state.innerMax.value - interval
         )
 
         model.value = {
           min,
-          max: parseFloat((min + interval).toFixed(state.decimals.value))
+          max: state.roundValueFn.value(min + interval)
         }
       }
       else if (state.focus.value === false) {
@@ -355,7 +355,7 @@ export default createComponent({
         model.value = {
           ...model.value,
           [ which ]: between(
-            parseFloat((model.value[ which ] + offset).toFixed(state.decimals.value)),
+            state.roundValueFn.value(model.value[ which ] + offset),
             which === 'min' ? state.innerMin.value : model.value.min,
             which === 'max' ? state.innerMax.value : model.value.max
           )

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

@@ -57,6 +57,9 @@ export default createComponent({
 
     const { proxy } = getCurrentInstance()
 
+    // expose public method
+    proxy.trigger = trigger
+
     if (hasObserver === true) {
       let observer
 
@@ -130,9 +133,6 @@ export default createComponent({
 
       onBeforeUnmount(cleanup)
 
-      // expose public method
-      proxy.trigger = trigger
-
       return () => {
         if (canRender.value === true) {
           return h('object', {

package/src/components/slider/QSlider.js

@@ -133,7 +133,7 @@ export default createComponent({
       stopAndPrevent(evt)
 
       const
-        stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * state.step.value,
+        stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * state.keyStep.value,
         offset = (
           ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1)
           * (state.isReversed.value === true ? -1 : 1)
@@ -141,7 +141,7 @@ export default createComponent({
         )
 
       model.value = between(
-        parseFloat((model.value + offset).toFixed(state.decimals.value)),
+        state.roundValueFn.value(model.value + offset),
         state.innerMin.value,
         state.innerMax.value
       )

package/src/components/slider/use-slider.js

@@ -129,8 +129,16 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
     && innerMin.value < innerMax.value
   ))
 
-  const decimals = computed(() => (String(props.step).trim().split('.')[ 1 ] || '').length)
-  const step = computed(() => (props.step === 0 ? 1 : props.step))
+  const roundValueFn = computed(() => {
+    if (props.step === 0) {
+      return v => v
+    }
+
+    const decimals = (String(props.step).trim().split('.')[ 1 ] || '').length
+    return v => parseFloat(v.toFixed(decimals))
+  })
+
+  const keyStep = computed(() => (props.step === 0 ? 1 : props.step))
   const tabindex = computed(() => (editable.value === true ? props.tabindex || 0 : -1))
 
   const trackLen = computed(() => props.max - props.min)
@@ -242,9 +250,7 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
       model += (Math.abs(modulo) >= step / 2 ? (modulo < 0 ? -1 : 1) * step : 0) - modulo
     }
 
-    if (decimals.value > 0) {
-      model = parseFloat(model.toFixed(decimals.value))
-    }
+    model = roundValueFn.value(model)
 
     return between(model, innerMin.value, innerMax.value)
   }
@@ -270,7 +276,7 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
   }
 
   const markerStep = computed(() => (
-    isNumber(props.markers) === true ? props.markers : step.value)
+    isNumber(props.markers) === true ? props.markers : keyStep.value)
   )
 
   const markerTicks = computed(() => {
@@ -630,8 +636,8 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
       tabindex,
       attributes,
 
-      step,
-      decimals,
+      roundValueFn,
+      keyStep,
       trackLen,
       innerMin,
       innerMinRatio,

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

@@ -140,7 +140,7 @@ export default function (props, slots, emit, routeData) {
               if (
                 hardError === void 0 && (
                   softError === void 0
-                  || softError.message.startsWith('Avoided redundant navigation') === true
+                  || (softError.message !== void 0 && softError.message.startsWith('Avoided redundant navigation') === true)
                 )
               ) {
                 $tabs.updateModel({ name: props.name })

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

@@ -1,25 +1,17 @@
 import { h, ref, computed, watch, Transition, nextTick, onActivated, onDeactivated, onBeforeUnmount, onMounted, getCurrentInstance } from 'vue'
 
-import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
-
 import QIcon from '../../components/icon/QIcon.js'
 import QSpinner from '../../components/spinner/QSpinner.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+import useId, { getId } from './use-id.js'
 import useValidate, { useValidateProps } from './use-validate.js'
 import useSplitAttrs from './use-split-attrs.js'
 
 import { hSlot } from '../../utils/private/render.js'
-import uid from '../../utils/uid.js'
 import { prevent, stopAndPrevent } from '../../utils/event.js'
 import { addFocusFn, removeFocusFn } from '../../utils/private/focus-manager.js'
 
-function getTargetUid (val, requiredForAttr) {
-  return val === void 0
-    ? (requiredForAttr === true ? `f_${ uid() }` : void 0)
-    : val
-}
-
 export function fieldValueIsFilled (val) {
   return val !== void 0
     && val !== null
@@ -80,6 +72,7 @@ export function useFieldState ({ requiredForAttr = true, tagProp } = {}) {
   const { props, attrs, proxy, vnode } = getCurrentInstance()
 
   const isDark = useDark(props, proxy.$q)
+  const targetUid = useId(props.for, requiredForAttr)
 
   return {
     requiredForAttr,
@@ -98,9 +91,7 @@ export function useFieldState ({ requiredForAttr = true, tagProp } = {}) {
     hasPopupOpen: false,
 
     splitAttrs: useSplitAttrs(attrs, vnode),
-    targetUid: ref(
-      getTargetUid(props.for, requiredForAttr)
-    ),
+    targetUid,
 
     rootRef: ref(null),
     targetRef: ref(null),
@@ -252,16 +243,15 @@ export default function (state) {
   }))
 
   const attributes = computed(() => {
-    const acc = {
-      for: state.targetUid.value
+    const acc = {}
+
+    if (state.targetUid.value) {
+      acc.for = state.targetUid.value
     }
 
     if (props.disable === true) {
       acc[ 'aria-disabled' ] = 'true'
     }
-    else if (props.readonly === true) {
-      acc[ 'aria-readonly' ] = 'true'
-    }
 
     return acc
   })
@@ -269,7 +259,7 @@ export default function (state) {
   watch(() => props.for, val => {
     // don't transform targetUid into a computed
     // prop as it will break SSR
-    state.targetUid.value = getTargetUid(val, state.requiredForAttr)
+    state.targetUid.value = getId(val, state.requiredForAttr)
   })
 
   function focusHandler () {
@@ -345,7 +335,7 @@ export default function (state) {
       document.activeElement.blur()
     }
 
-    if (props.type === 'file') { // TODO vue3
+    if (props.type === 'file') {
       // do not let focus be triggered
       // as it will make the native file dialog
       // appear for another selection
@@ -356,11 +346,9 @@ export default function (state) {
     emit('clear', props.modelValue)
 
     nextTick(() => {
+      const isDirty = isDirtyModel.value
       resetValidation()
-
-      if ($q.platform.is.mobile !== true) {
-        isDirtyModel.value = false
-      }
+      isDirtyModel.value = isDirty
     })
   }
 
@@ -553,16 +541,8 @@ export default function (state) {
     shouldActivate === true && props.autofocus === true && proxy.focus()
   })
 
-  onMounted(() => {
-    if (
-      isRuntimeSsrPreHydration.value === true
-      && state.requiredForAttr === true
-      && props.for === void 0
-    ) {
-      state.targetUid.value = `f_${ uid() }` // getTargetUid(void 0, true)
-    }
-
-    props.autofocus === true && proxy.focus()
+  props.autofocus === true && onMounted(() => {
+    proxy.focus()
   })
 
   onBeforeUnmount(() => {

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

@@ -0,0 +1,34 @@
+import { ref, onMounted } from 'vue'
+
+import uid from '../../utils/uid.js'
+
+import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
+
+export function getId (val, requiredId) {
+  return val === void 0
+    ? (requiredId === true ? `f_${ uid() }` : void 0)
+    : val
+}
+
+/**
+ * Returns an "id" which is a ref() that can be used as a unique identifier.
+ * On SSR, it takes care of generating the id on the client side (only) to
+ * avoid hydration errors.
+ */
+export default function (initialId, requiredId = true) {
+  if (isRuntimeSsrPreHydration.value === true) {
+    const id = ref(initialId)
+
+    if (requiredId === true && initialId === void 0) {
+      onMounted(() => {
+        id.value = `f_${ uid() }` // getId(void 0, true)
+      })
+    }
+
+    return id
+  }
+
+  return ref(
+    getId(initialId, requiredId)
+  )
+}