quasar 2.22.0 → 2.23.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.22.0",
+  "version": "2.23.1",
   "description": "Build high-performance Vue.js user interfaces (SPA, PWA, SSR, SSG, Mobile and Desktop) in record time",
   "keywords": [
     "desktop",

package/src/components/btn/QBtn.js

@@ -290,7 +290,7 @@ export default createComponent({
         blurTarget !== document.activeElement
       ) {
         blurTarget.setAttribute('tabindex', -1)
-        blurTarget.focus()
+        blurTarget.focus({ preventScroll: true })
       }
 
       if (touchTarget === rootRef.value) {

package/src/components/fab/QFab.sass

@@ -100,20 +100,22 @@
     .q-btn
       margin: 5px
 
+    // physical direction, not text-based: don't let rtlcss mirror it
     &--right
-      transform-origin: 0 50%
-      transform: scale(.4) translateX(-62px)
+      transform-origin: 0 50% #{"/* rtl:ignore */"}
+      transform: scale(.4) translateX(-62px) #{"/* rtl:ignore */"}
       height: 56px
-      left: 100%
-      margin-left: 9px
+      left: 100% #{"/* rtl:ignore */"}
+      margin-left: 9px #{"/* rtl:ignore */"}
+      flex-direction: row #{"/* rtl:row-reverse */"}
 
     &--left
-      transform-origin: 100% 50%
-      transform: scale(.4) translateX(62px)
+      transform-origin: 100% 50% #{"/* rtl:ignore */"}
+      transform: scale(.4) translateX(62px) #{"/* rtl:ignore */"}
       height: 56px
-      right: 100%
-      margin-right: 9px
-      flex-direction: row-reverse
+      right: 100% #{"/* rtl:ignore */"}
+      margin-right: 9px #{"/* rtl:ignore */"}
+      flex-direction: row-reverse #{"/* rtl:row */"}
 
     &--up
       transform-origin: 50% 100%

package/src/components/linear-progress/QLinearProgress.js

@@ -18,11 +18,9 @@ const defaultSizes = {
   xl: 14
 }
 
-function width(val, reverse, $q) {
+function width(val) {
   return {
-    transform: reverse
-      ? `translateX(${$q.lang.rtl ? '-' : ''}100%) scale3d(${-val},1,1)`
-      : `scale3d(${val},1,1)`
+    transform: `scale3d(${val},1,1)`
   }
 }
 
@@ -62,7 +60,6 @@ export default createComponent({
     const sizeStyle = useSize(props, defaultSizes)
 
     const motion = computed(() => props.indeterminate || props.query)
-    const widthReverse = computed(() => props.reverse !== props.query)
     const style = computed(() => ({
       ...(sizeStyle.value !== null ? sizeStyle.value : {}),
       '--q-linear-progress-speed': `${props.animationSpeed}ms`
@@ -77,11 +74,7 @@ export default createComponent({
     )
 
     const trackStyle = computed(() =>
-      width(
-        props.buffer !== void 0 ? props.buffer : 1,
-        widthReverse.value,
-        proxy.$q
-      )
+      width(props.buffer !== void 0 ? props.buffer : 1)
     )
     const transitionSuffix = computed(
       () => `with${props.instantFeedback ? 'out' : ''}-transition`
@@ -96,7 +89,7 @@ export default createComponent({
     )
 
     const modelStyle = computed(() =>
-      width(motion.value ? 1 : props.value, widthReverse.value, proxy.$q)
+      width(motion.value ? 1 : props.value)
     )
     const modelClass = computed(
       () =>

package/src/components/linear-progress/QLinearProgress.json

@@ -34,7 +34,7 @@
 
     "reverse": {
       "type": "Boolean",
-      "desc": "Reverse direction of progress",
+      "desc": "Reverse direction of progress (has no effect for query behaviour)",
       "category": "behavior"
     },
 

package/src/components/linear-progress/QLinearProgress.sass

@@ -16,8 +16,13 @@
 
   &--reverse
     .q-linear-progress
-      &__model, &__track
-        transform-origin: 0 100%
+      &__model--determinate, &__track
+        transform-origin: 100% 0
+
+      // motion modes span the full width, so anchoring cannot reverse them: mirror them in place
+      &__model--indeterminate, &__model--query
+        transform-origin: 50% 0
+        scale: -1 1
 
   &__model
 

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

@@ -1,16 +1,25 @@
 import {
   getCurrentInstance,
+  onActivated,
   onBeforeMount,
   onBeforeUnmount,
+  onDeactivated,
   onMounted,
   ref,
   watch
 } from 'vue'
 
 import History from '../../plugins/private.history/History.js'
-import { vmHasRouter } from '../../utils/private.vm/vm.js'
+import { vmHasRouter, vmIsDestroyed } from '../../utils/private.vm/vm.js'
+import useTick from '../use-tick/use-tick.js'
+import useAnimationFrame from '../use-animation-frame/use-animation-frame.js'
+import {
+  getHorizontalScrollPosition,
+  getVerticalScrollPosition
+} from '../../utils/scroll/scroll.js'
 
 let counter = 0
+let restoreState = null
 
 export const useFullscreenProps = {
   fullscreen: Boolean,
@@ -23,10 +32,11 @@ export default function useFullscreen() {
   const vm = getCurrentInstance()
   const { props, emit, proxy } = vm
 
-  let historyEntry,
-    fullscreenFillerNode,
-    isUnmounting = false
+  let historyEntry, fullscreenFillerNode
+
   const inFullscreen = ref(false)
+  const { registerTick, removeTick } = useTick()
+  const { registerAnimationFrame, removeAnimationFrame } = useAnimationFrame()
 
   if (vmHasRouter(vm)) {
     watch(
@@ -58,7 +68,19 @@ export default function useFullscreen() {
   }
 
   function setFullscreen() {
-    if (inFullscreen.value) return
+    if (vmIsDestroyed(vm) || inFullscreen.value) return
+
+    removeAnimationFrame()
+    removeTick()
+
+    if (counter === 0) {
+      restoreState = {
+        left: getHorizontalScrollPosition(window),
+        top: getVerticalScrollPosition(window),
+        width: window.innerWidth,
+        height: window.innerHeight
+      }
+    }
 
     inFullscreen.value = true
     proxy.$el.replaceWith(fullscreenFillerNode)
@@ -75,7 +97,7 @@ export default function useFullscreen() {
     History.add(historyEntry)
   }
 
-  function exitFullscreen() {
+  function exitFullscreenImpl(shouldRestoreElement) {
     if (!inFullscreen.value) return
 
     if (historyEntry !== void 0) {
@@ -83,20 +105,48 @@ export default function useFullscreen() {
       historyEntry = void 0
     }
 
-    fullscreenFillerNode.replaceWith(proxy.$el)
+    if (shouldRestoreElement === true) {
+      fullscreenFillerNode.replaceWith(proxy.$el)
+    } else {
+      fullscreenFillerNode.remove()
+    }
+
     inFullscreen.value = false
 
     counter = Math.max(0, counter - 1)
+    if (counter !== 0) return
 
-    if (counter === 0) {
-      document.body.classList.remove('q-body--fullscreen-mixin')
+    document.body.classList.remove('q-body--fullscreen-mixin')
 
-      if (!isUnmounting && proxy.$el.scrollIntoView !== void 0) {
-        setTimeout(() => {
+    if (restoreState === null) return
+
+    const { left, top, width, height } = restoreState
+    restoreState = null
+
+    if (vmIsDestroyed(vm)) return
+
+    registerTick(() => {
+      if (counter !== 0) return
+      registerAnimationFrame(() => {
+        if (counter !== 0) return
+
+        if (window.innerWidth !== width || window.innerHeight !== height) {
+          /**
+           * If user has resized the window while in fullscreen mode,
+           * we cannot restore the scroll position because it will be wrong.
+           * So we just scroll the element into view instead,
+           * which is the best we can do.
+           */
           proxy.$el.scrollIntoView()
-        }, 0)
-      }
-    }
+        } else {
+          window.scrollTo(left, top)
+        }
+      })
+    })
+  }
+
+  function exitFullscreen() {
+    exitFullscreenImpl(true)
   }
 
   onBeforeMount(() => {
@@ -107,10 +157,15 @@ export default function useFullscreen() {
     if (props.fullscreen) setFullscreen()
   })
 
-  onBeforeUnmount(() => {
-    isUnmounting = true
-    exitFullscreen()
+  onDeactivated(() => {
+    // A direct child of KeepAlive has already been moved to its storage
+    // container at this point. Its filler must not move it back into the DOM.
+    exitFullscreenImpl(proxy.$el.isConnected)
+  })
+  onActivated(() => {
+    if (props.fullscreen) setFullscreen()
   })
+  onBeforeUnmount(exitFullscreen)
 
   // expose public methods
   Object.assign(proxy, {

package/src/composables/private.use-fullscreen/use-fullscreen.test.js

@@ -0,0 +1,158 @@
+import { afterEach, describe, expect, test } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { KeepAlive, defineComponent, h, ref } from 'vue'
+
+import useFullscreen, {
+  useFullscreenEmits,
+  useFullscreenProps
+} from './use-fullscreen.js'
+
+let wrapper, mountTarget
+
+afterEach(() => {
+  wrapper?.unmount()
+  mountTarget?.remove()
+  wrapper = mountTarget = void 0
+})
+
+const FullscreenComponent = defineComponent({
+  name: 'FullscreenComponent',
+  props: useFullscreenProps,
+  emits: useFullscreenEmits,
+
+  setup() {
+    const { inFullscreen } = useFullscreen()
+
+    return () =>
+      h(
+        'section',
+        {
+          'data-test': 'fullscreen-component',
+          'data-fullscreen': inFullscreen.value
+        },
+        'Fullscreen component'
+      )
+  }
+})
+
+const OtherComponent = defineComponent({
+  name: 'OtherComponent',
+  setup: () => () => h('section', { 'data-test': 'other-component' })
+})
+
+describe('[useFullscreen API]', () => {
+  describe('[Variables]', () => {
+    describe('[(variable)useFullscreenProps]', () => {
+      test('is defined correctly', () => {
+        expect(useFullscreenProps).toBeTypeOf('object')
+        expect(Object.keys(useFullscreenProps)).not.toHaveLength(0)
+      })
+    })
+
+    describe('[(variable)useFullscreenEmits]', () => {
+      test('is defined correctly', () => {
+        expect(Array.isArray(useFullscreenEmits)).toBe(true)
+        expect(useFullscreenEmits).not.toHaveLength(0)
+      })
+    })
+  })
+
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('does not move a deactivated root back into the live DOM', async () => {
+        const showFullscreen = ref(true)
+
+        mountTarget = document.createElement('div')
+        document.body.append(mountTarget)
+
+        wrapper = mount(
+          defineComponent({
+            setup: () => () =>
+              h(KeepAlive, null, () =>
+                showFullscreen.value === true
+                  ? h(FullscreenComponent, { fullscreen: true })
+                  : h(OtherComponent)
+              )
+          }),
+          { attachTo: mountTarget }
+        )
+
+        await flushPromises()
+
+        const getFullscreenElement = () =>
+          document.body.querySelector('[data-test="fullscreen-component"]')
+
+        expect(getFullscreenElement()).not.toBeNull()
+        expect(getFullscreenElement().dataset.fullscreen).toBe('true')
+        expect(
+          document.body.classList.contains('q-body--fullscreen-mixin')
+        ).toBe(true)
+
+        showFullscreen.value = false
+        await flushPromises()
+
+        expect(getFullscreenElement()).toBeNull()
+        expect(wrapper.find('[data-test="other-component"]').exists()).toBe(
+          true
+        )
+        expect(
+          document.body.classList.contains('q-body--fullscreen-mixin')
+        ).toBe(false)
+
+        showFullscreen.value = true
+        await flushPromises()
+
+        expect(getFullscreenElement()).not.toBeNull()
+        expect(getFullscreenElement().dataset.fullscreen).toBe('true')
+        expect(
+          document.body.classList.contains('q-body--fullscreen-mixin')
+        ).toBe(true)
+      })
+
+      test('restores a nested fullscreen component to cached content', async () => {
+        const showFullscreen = ref(true)
+        const CachedComponent = defineComponent({
+          name: 'CachedComponent',
+          setup: () => () =>
+            h('main', null, [h(FullscreenComponent, { fullscreen: true })])
+        })
+
+        mountTarget = document.createElement('div')
+        document.body.append(mountTarget)
+
+        wrapper = mount(
+          defineComponent({
+            setup: () => () =>
+              h(KeepAlive, null, () =>
+                showFullscreen.value === true
+                  ? h(CachedComponent)
+                  : h(OtherComponent)
+              )
+          }),
+          { attachTo: mountTarget }
+        )
+
+        await flushPromises()
+
+        const getFullscreenElement = () =>
+          document.body.querySelector('[data-test="fullscreen-component"]')
+
+        expect(getFullscreenElement()).not.toBeNull()
+
+        showFullscreen.value = false
+        await flushPromises()
+
+        expect(getFullscreenElement()).toBeNull()
+        expect(wrapper.find('[data-test="other-component"]').exists()).toBe(
+          true
+        )
+
+        showFullscreen.value = true
+        await flushPromises()
+
+        expect(getFullscreenElement()).not.toBeNull()
+        expect(getFullscreenElement().dataset.fullscreen).toBe('true')
+      })
+    })
+  })
+})

package/src/composables/use-animation-frame/use-animation-frame.js

@@ -0,0 +1,47 @@
+import { getCurrentInstance, onBeforeUnmount, onDeactivated } from 'vue'
+
+import { vmIsDestroyed } from '../../utils/private.vm/vm.js'
+import { noop } from '../../utils/event/event.js'
+
+/*
+ * Usage:
+ *    registerAnimationFrame(fn)
+ *    removeAnimationFrame()
+ */
+
+export default function useAnimationFrame() {
+  if (__QUASAR_SSR_SERVER__) {
+    return {
+      removeAnimationFrame: noop,
+      registerAnimationFrame: noop
+    }
+  }
+
+  let frameId = null
+  const vm = getCurrentInstance()
+
+  function removeAnimationFrame() {
+    if (frameId !== null) {
+      cancelAnimationFrame(frameId)
+      frameId = null
+    }
+  }
+
+  onDeactivated(removeAnimationFrame)
+  onBeforeUnmount(removeAnimationFrame)
+
+  return {
+    removeAnimationFrame,
+
+    registerAnimationFrame(fn) {
+      removeAnimationFrame()
+
+      if (!vmIsDestroyed(vm)) {
+        frameId = requestAnimationFrame(() => {
+          frameId = null
+          fn()
+        })
+      }
+    }
+  }
+}

package/src/composables/use-animation-frame/use-animation-frame.test.js

@@ -0,0 +1,122 @@
+import { afterEach, describe, expect, test, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+
+import useAnimationFrame from './use-animation-frame.js'
+
+let wrapper
+
+afterEach(() => {
+  if (wrapper !== null) {
+    wrapper.unmount()
+    wrapper = null
+  }
+})
+
+function nextAnimationFrame() {
+  const { promise, resolve } = Promise.withResolvers()
+  requestAnimationFrame(resolve)
+  return promise
+}
+
+describe('[useAnimationFrame API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('correctly registers an animation frame', async () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup() {
+              const { registerAnimationFrame } = useAnimationFrame()
+
+              registerAnimationFrame(fn)
+              return {}
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+        await nextAnimationFrame()
+        expect(fn).toHaveBeenCalledTimes(1)
+      })
+
+      test('removeAnimationFrame works correctly', async () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup() {
+              const { registerAnimationFrame, removeAnimationFrame } =
+                useAnimationFrame()
+
+              registerAnimationFrame(fn)
+              return { registerAnimationFrame, removeAnimationFrame }
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+        wrapper.vm.removeAnimationFrame()
+
+        await nextAnimationFrame()
+        expect(fn).not.toHaveBeenCalled()
+      })
+
+      test('unmount stops animation frame', async () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup() {
+              const { registerAnimationFrame } = useAnimationFrame()
+
+              registerAnimationFrame(fn)
+              return {}
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+
+        wrapper.unmount()
+        wrapper = null
+
+        await nextAnimationFrame()
+
+        expect(fn).not.toHaveBeenCalled()
+      })
+
+      test('can override animation frame', async () => {
+        const fn1 = vi.fn()
+        const fn2 = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup() {
+              const { registerAnimationFrame } = useAnimationFrame()
+              return { registerAnimationFrame }
+            }
+          })
+        )
+
+        expect(fn1).not.toHaveBeenCalled()
+        wrapper.vm.registerAnimationFrame(fn1)
+        expect(fn1).not.toHaveBeenCalled()
+
+        wrapper.vm.registerAnimationFrame(fn2)
+        expect(fn1).not.toHaveBeenCalled()
+        expect(fn2).not.toHaveBeenCalled()
+
+        await nextAnimationFrame()
+
+        expect(fn1).not.toHaveBeenCalled()
+        expect(fn2).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
+})

package/src/composables.js

@@ -1,8 +1,8 @@
+export { default as useAnimationFrame } from './composables/use-animation-frame/use-animation-frame.js'
 export { default as useDialogPluginComponent } from './composables/use-dialog-plugin-component/use-dialog-plugin-component.js'
 export { default as useFormChild } from './composables/use-form/use-form-child.js'
 export { default as useMeta } from './composables/use-meta/use-meta.js'
 export { default as useQuasar } from './composables/use-quasar/use-quasar.js'
-
 export { default as useHydration } from './composables/use-hydration/use-hydration.js'
 export { default as useId } from './composables/use-id/use-id.js'
 export { default as useInterval } from './composables/use-interval/use-interval.js'

package/src/directives/mutation/Mutation.json

@@ -6,7 +6,7 @@
   "value": {
     "type": ["Function"],
     "desc": "Function to call when mutation occurs; It is HIGHLY recommended to reference it from your vue component scope, otherwise the directive update cycle will continuously recreate the observer which hits performance hard",
-    "examples": ["# v-intersection=\"myHandler\""],
+    "examples": ["# v-mutation=\"myHandler\""],
 
     "returns": {
       "type": "Boolean",

package/src/utils/private.click-outside/click-outside.js

@@ -22,31 +22,46 @@ function globalHandler(evt) {
     return
   }
 
-  // check last portal vm if it's
-  // a QDialog and not in seamless mode
-  let portalIndex = portalProxyList.length - 1
+  // a modal (non-seamless) QDialog shields popups opened before it,
+  // so only popups opened after it can be closed by this click (#18091)
+  let closableContentEls = null
+  let sawClosablePortal = false
 
-  while (portalIndex >= 0) {
-    const proxy = portalProxyList[portalIndex].$
+  for (let i = portalProxyList.length - 1; i >= 0; i--) {
+    const proxy = portalProxyList[i].$
+    const name = proxy.type.name
 
     // skip QTooltip portals
-    if (proxy.type.name === 'QTooltip') {
-      portalIndex--
+    if (name === 'QTooltip') {
       continue
     }
 
-    if (proxy.type.name !== 'QDialog') {
-      break
-    }
+    if (name === 'QDialog') {
+      if (proxy.props.seamless !== true) {
+        if (sawClosablePortal === false) return
+
+        closableContentEls = new Set(
+          portalProxyList.slice(i + 1).map(vm => vm.contentEl)
+        )
+        break
+      }
 
-    if (!proxy.props.seamless) return
+      continue
+    }
 
-    portalIndex--
+    sawClosablePortal = true
   }
 
   for (let i = registeredList.length - 1; i >= 0; i--) {
     const state = registeredList[i]
 
+    if (
+      closableContentEls !== null &&
+      !closableContentEls.has(state.innerRef.value)
+    ) {
+      return
+    }
+
     if (
       (state.anchorEl.value === null ||
         !state.anchorEl.value.contains(target)) &&