quasar 2.14.2 → 2.14.3

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.14.2",
+  "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/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/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,8 +243,10 @@ 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) {
@@ -266,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 () {
@@ -342,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
@@ -353,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
     })
   }
 
@@ -550,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)
+  )
+}

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

@@ -31,7 +31,7 @@ export default function (focused, innerLoading) {
 
   const innerError = ref(false)
   const innerErrorMessage = ref(null)
-  const isDirtyModel = ref(null)
+  const isDirtyModel = ref(false)
 
   useFormChild({ validate, resetValidation })
 
@@ -74,18 +74,20 @@ export default function (focused, innerLoading) {
     }
   })
 
+  function onRulesChange () {
+    if (
+      props.lazyRules !== 'ondemand'
+      && canDebounceValidate.value === true
+      && isDirtyModel.value === true
+    ) {
+      debouncedValidate()
+    }
+  }
+
   watch(() => props.reactiveRules, val => {
     if (val === true) {
       if (unwatchRules === void 0) {
-        unwatchRules = watch(() => props.rules, () => {
-          if (
-            canDebounceValidate.value === true
-            && isDirtyModel.value === true
-            && props.lazyRules !== 'ondemand'
-          ) {
-            debouncedValidate()
-          }
-        }, { immediate: true })
+        unwatchRules = watch(() => props.rules, onRulesChange, { immediate: true, deep: true })
       }
     }
     else if (unwatchRules !== void 0) {
@@ -94,30 +96,15 @@ export default function (focused, innerLoading) {
     }
   }, { immediate: true })
 
-  watch(() => props.lazyRules, val => {
-    if (
-      val === false
-      && canDebounceValidate.value === true
-      && isDirtyModel.value === true
-    ) {
-      debouncedValidate()
-    }
-  })
+  watch(() => props.lazyRules, onRulesChange)
 
   watch(focused, val => {
     if (val === true) {
-      if (isDirtyModel.value === null) {
-        isDirtyModel.value = props.lazyRules === true
-      }
+      isDirtyModel.value = true
     }
     else if (
       canDebounceValidate.value === true
-      && (
-        // props.lazyRules can also be 'ondemand',
-        // hence the following form:
-        props.lazyRules === false
-        || (props.lazyRules === true && isDirtyModel.value === true)
-      )
+      && props.lazyRules !== 'ondemand'
     ) {
       debouncedValidate()
     }
@@ -126,7 +113,7 @@ export default function (focused, innerLoading) {
   function resetValidation () {
     validateIndex++
     innerLoading.value = false
-    isDirtyModel.value = null
+    isDirtyModel.value = false
     innerError.value = false
     innerErrorMessage.value = null
     debouncedValidate.cancel()

package/src/plugins/Dark.js

@@ -1,5 +1,4 @@
 import defineReactivePlugin from '../utils/private/define-reactive-plugin.js'
-import { isRuntimeSsrPreHydration } from './Platform.js'
 
 const Plugin = defineReactivePlugin({
   isActive: false,
@@ -38,7 +37,7 @@ const Plugin = defineReactivePlugin({
     }
   },
 
-  install ({ $q, onSSRHydrated, ssrContext }) {
+  install ({ $q, ssrContext }) {
     const { dark } = $q.config
 
     if (__QUASAR_SSR_SERVER__) {
@@ -66,31 +65,8 @@ const Plugin = defineReactivePlugin({
 
     $q.dark = this
 
-    if (this.__installed === true && dark === void 0) {
-      return
-    }
-
-    this.isActive = dark === true
-
-    const initialVal = dark !== void 0 ? dark : false
-
-    if (isRuntimeSsrPreHydration.value === true) {
-      const ssrSet = val => {
-        this.__fromSSR = val
-      }
-
-      const originalSet = this.set
-
-      this.set = ssrSet
-      ssrSet(initialVal)
-
-      onSSRHydrated.push(() => {
-        this.set = originalSet
-        this.set(this.__fromSSR)
-      })
-    }
-    else {
-      this.set(initialVal)
+    if (this.__installed !== true) {
+      this.set(dark !== void 0 ? dark : false)
     }
   }
 })

package/src/utils/copy-to-clipboard.js

@@ -1,4 +1,3 @@
-
 import { addFocusout, removeFocusout } from './private/focusout.js'
 
 function fallback (text) {

package/src/utils/get-css-var.js

@@ -1,4 +1,3 @@
-
 export default function getCssVar (propName, element = document.body) {
   if (typeof propName !== 'string') {
     throw new TypeError('Expected a string as propName')

package/src/utils/is.js

@@ -1,4 +1,3 @@
-
 export function isDeepEqual (a, b) {
   if (a === b) {
     return true

package/src/utils/private/define-reactive-plugin.js

@@ -1,4 +1,3 @@
-
 import { reactive } from 'vue'
 import { injectProp } from './inject-obj-prop.js'
 

package/src/utils/private/global-config.js

@@ -1,4 +1,3 @@
-
 export const globalConfig = {}
 export let globalConfigIsFrozen = false
 

package/src/utils/private/touch.js

@@ -1,4 +1,3 @@
-
 const modifiersAll = {
   left: true,
   right: true,

package/src/utils/private/vm.js

@@ -1,4 +1,3 @@
-
 // copied to docs too
 export function getParentProxy (proxy) {
   if (Object(proxy.$parent) === proxy.$parent) {

package/src/utils/run-sequential-promises.js

@@ -1,4 +1,3 @@
-
 function parsePromises (sequentialPromises) {
   const isList = Array.isArray(sequentialPromises)