quasar 2.21.4 → 2.23.0

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/use-interval/use-interval.js

@@ -1,6 +1,7 @@
 import { getCurrentInstance, onBeforeUnmount, onDeactivated } from 'vue'
 
 import { vmIsDestroyed } from '../../utils/private.vm/vm.js'
+import { noop } from '../../utils/event/event.js'
 
 /*
  * Usage:
@@ -9,6 +10,13 @@ import { vmIsDestroyed } from '../../utils/private.vm/vm.js'
  */
 
 export default function useInterval() {
+  if (__QUASAR_SSR_SERVER__) {
+    return {
+      removeInterval: noop,
+      registerInterval: noop
+    }
+  }
+
   let timer = null
   const vm = getCurrentInstance()
 

package/src/composables/use-render-cache/use-render-cache.js

@@ -1,17 +1,22 @@
 export default function useRenderCache() {
+  if (__QUASAR_SSR_SERVER__) {
+    return {
+      getCache: (_, defaultValue) =>
+        typeof defaultValue === 'function' ? defaultValue() : defaultValue,
+      setCache() {},
+      hasCache: () => false,
+      clearCache() {}
+    }
+  }
+
   let cache = Object.create(null)
 
   return {
-    getCache: __QUASAR_SSR_SERVER__
-      ? (_, defaultValue) =>
-          typeof defaultValue === 'function' ? defaultValue() : defaultValue
-      : (key, defaultValue) =>
-          cache[key] === void 0
-            ? (cache[key] =
-                typeof defaultValue === 'function'
-                  ? defaultValue()
-                  : defaultValue)
-            : cache[key],
+    getCache: (key, defaultValue) =>
+      Object.hasOwn(cache, key)
+        ? cache[key]
+        : (cache[key] =
+            typeof defaultValue === 'function' ? defaultValue() : defaultValue),
 
     setCache(key, obj) {
       cache[key] = obj

package/src/composables/use-timeout/use-timeout.js

@@ -1,6 +1,7 @@
 import { getCurrentInstance, onBeforeUnmount, onDeactivated } from 'vue'
 
 import { vmIsDestroyed } from '../../utils/private.vm/vm.js'
+import { noop } from '../../utils/event/event.js'
 
 /*
  * Usage:
@@ -9,6 +10,13 @@ import { vmIsDestroyed } from '../../utils/private.vm/vm.js'
  */
 
 export default function useTimeout() {
+  if (__QUASAR_SSR_SERVER__) {
+    return {
+      removeTimeout: noop,
+      registerTimeout: noop
+    }
+  }
+
   let timer = null
   const vm = getCurrentInstance()
 

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/intersection/Intersection.js

@@ -27,7 +27,7 @@ function update(el, ctx, value) {
 
   if (changed) {
     ctx.cfg = cfg
-    ctx.observer?.unobserve(el)
+    ctx.observer?.disconnect()
 
     ctx.observer = new IntersectionObserver(([entry]) => {
       if (typeof ctx.handler === 'function') {
@@ -55,7 +55,7 @@ function destroy(el) {
   const ctx = el.__qvisible
 
   if (ctx !== void 0) {
-    ctx.observer?.unobserve(el)
+    ctx.observer?.disconnect()
     delete el.__qvisible
   }
 }

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/directives/touch-repeat/TouchRepeat.js

@@ -49,7 +49,9 @@ export default createDirective(
                 ? keyCodes[key.toLowerCase()]
                 : parsedKey
 
-              if (keyCode >= 0) acc.push(keyCode)
+              if (keyCode !== void 0) {
+                acc.push(...[keyCode].flat())
+              }
             }
             return acc
           }, [])

package/src/plugins/cookies/Cookies.js

@@ -20,7 +20,11 @@ function read(string) {
   // Replace server-side written pluses with spaces.
   // If we can't decode the cookie, ignore it, it's unusable.
   // If we can't parse the cookie, ignore it, it's unusable.
-  string = decodeURIComponent(string.replaceAll('+', ' '))
+  try {
+    string = decodeURIComponent(string.replaceAll('+', ' '))
+  } catch {
+    return
+  }
 
   try {
     const parsed = JSON.parse(string)
@@ -56,7 +60,12 @@ function parseExpireToSeconds(str) {
     totalSeconds += value * numberUnitMultiplierMap[unit]
   }
 
-  return hasMatch ? totalSeconds : void 0
+  if (hasMatch) return totalSeconds
+
+  const timestamp = Date.parse(str)
+  return Number.isNaN(timestamp)
+    ? void 0
+    : Math.round((timestamp - Date.now()) / 1000)
 }
 
 // oxlint-disable-next-line default-param-last
@@ -69,9 +78,12 @@ function set(key, val, opts = {}, ssr) {
     if (Number.isFinite(opts.expires)) {
       maxAge = Math.round(opts.expires * 86_400) // 86400 seconds in a day
     } else if (opts.expires instanceof Date) {
-      maxAge = Math.round((opts.expires.getTime() - Date.now()) / 1000)
+      const timestamp = opts.expires.getTime()
+      if (Number.isFinite(timestamp)) {
+        maxAge = Math.round((timestamp - Date.now()) / 1000)
+      }
     }
-    // String check (eg. "15m", "1h" -> must return seconds)
+    // String check (eg. "15m", "1h", or a date string)
     else if (typeof opts.expires === 'string') {
       maxAge = parseExpireToSeconds(opts.expires)
     }
@@ -104,13 +116,11 @@ function set(key, val, opts = {}, ssr) {
     let all = ssr.req.headers.cookie || ''
 
     if (maxAge !== void 0 && isDeletion) {
-      const localVal = get(key, ssr)
-      if (localVal !== void 0) {
-        all = all
-          .replace(`${key}=${localVal}; `, '')
-          .replace(`; ${key}=${localVal}`, '')
-          .replace(`${key}=${localVal}`, '')
-      }
+      const encodedKey = encodeURIComponent(key)
+      all = all
+        .split('; ')
+        .filter(entry => entry.split('=', 1)[0] !== encodedKey)
+        .join('; ')
     } else {
       all = all ? `${keyValue}; ${all}` : keyValue
     }
@@ -135,13 +145,19 @@ function get(key, ssr) {
 
   for (; i < l; i++) {
     parts = cookies[i].split('=')
-    name = decodeURIComponent(parts.shift())
+
+    try {
+      name = decodeURIComponent(parts.shift())
+    } catch {
+      continue
+    }
+
     cookie = parts.join('=')
 
     if (!key) {
       result[name] = cookie
     } else if (key === name) {
-      result = read(cookie)
+      result = read(cookie) ?? null
       break
     }
   }

package/src/plugins/meta/Meta.js

@@ -4,6 +4,48 @@ import extend from '../../utils/extend/extend.js'
 let updateId = null,
   currentClientMeta
 
+const encodeHtmlChars = {
+  '&': '&',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;'
+}
+
+const encodeJsonChars = {
+  '<': String.raw`\u003C`,
+  '>': String.raw`\u003E`,
+  '&': String.raw`\u0026`,
+  '\u2028': String.raw`\u2028`,
+  '\u2029': String.raw`\u2029`
+}
+
+const validAttrName = /^[^\s"'>/=]+$/
+
+function isValidAttrName(name) {
+  return (
+    validAttrName.test(name) && name.includes(String.fromCodePoint(0)) === false
+  )
+}
+
+function encodeHtml(value) {
+  return String(value).replaceAll(/[&<>"']/g, char => encodeHtmlChars[char])
+}
+
+function encodeJson(value) {
+  return JSON.stringify(value).replaceAll(
+    /[<>&\u2028\u2029]/g,
+    char => encodeJsonChars[char]
+  )
+}
+
+function protectRawText(value, tagName) {
+  return String(value).replaceAll(
+    new RegExp(`</${tagName}`, 'gi'),
+    `<\\/${tagName}`
+  )
+}
+
 export const clientList = []
 
 function normalize(meta) {
@@ -148,15 +190,17 @@ function apply({ add, remove }) {
 
 function getAttr(seed) {
   return att => {
+    if (isValidAttrName(att) === false) return
+
     const val = seed[att]
-    return att + (val !== true && val !== void 0 ? `="${val}"` : '')
+    return att + (val !== true && val !== void 0 ? `="${encodeHtml(val)}"` : '')
   }
 }
 
 function getHead(meta) {
   let output = ''
   if (meta.title) {
-    output += `<title>${meta.title}</title>`
+    output += `<title>${encodeHtml(meta.title)}</title>`
   }
   ;['meta', 'link', 'script'].forEach(type => {
     const metaType = meta[type]
@@ -165,10 +209,12 @@ function getHead(meta) {
       const attrs = Object.keys(metaType[att])
         .filter(item => item !== 'innerHTML')
         .map(getAttr(metaType[att]))
+        .filter(Boolean)
 
-      output += `<${type} ${attrs.join(' ')} data-qmeta="${att}">`
+      output += `<${type} ${attrs.join(' ')} data-qmeta="${encodeHtml(att)}">`
       if (type === 'script') {
-        output += (metaType[att].innerHTML || '') + '</script>'
+        output +=
+          protectRawText(metaType[att].innerHTML || '', 'script') + '</script>'
       }
     }
   })
@@ -195,7 +241,9 @@ function injectServerMeta(ssrContext) {
   normalize(data)
 
   const nonce =
-    ssrContext.nonce !== void 0 ? ` nonce="${ssrContext.nonce}"` : ''
+    ssrContext.nonce !== void 0
+      ? ` nonce="${encodeHtml(ssrContext.nonce)}"`
+      : ''
 
   const ctx = ssrContext._meta
 
@@ -204,7 +252,7 @@ function injectServerMeta(ssrContext) {
   if (htmlAttr.length !== 0) {
     ctx.htmlAttrs +=
       (ctx.htmlAttrs.length !== 0 ? ' ' : '') +
-      htmlAttr.map(getAttr(data.htmlAttr)).join(' ')
+      htmlAttr.map(getAttr(data.htmlAttr)).filter(Boolean).join(' ')
   }
 
   ctx.headTags += getHead(data)
@@ -214,17 +262,17 @@ function injectServerMeta(ssrContext) {
   if (bodyAttr.length !== 0) {
     ctx.bodyAttrs +=
       (ctx.bodyAttrs.length !== 0 ? ' ' : '') +
-      bodyAttr.map(getAttr(data.bodyAttr)).join(' ')
+      bodyAttr.map(getAttr(data.bodyAttr)).filter(Boolean).join(' ')
   }
 
   ctx.bodyTags +=
     Object.keys(data.noscript)
       .map(
         name =>
-          `<noscript data-qmeta="${name}">${data.noscript[name]}</noscript>`
+          `<noscript data-qmeta="${encodeHtml(name)}">${protectRawText(data.noscript[name], 'noscript')}</noscript>`
       )
       .join('') +
-    `<script${nonce} id="qmeta-init">window.__Q_META__=${delete data.noscript && JSON.stringify(data)}</script>`
+    `<script${nonce} id="qmeta-init">window.__Q_META__=${delete data.noscript && encodeJson(data)}</script>`
 }
 
 function updateClientMeta() {

package/src/utils/extend/extend.js

@@ -58,6 +58,10 @@ export default function extend(...args) {
   for (; i < length; i++) {
     if ((options = args[i]) !== null) {
       for (name in options) {
+        if (name === '__proto__') {
+          continue
+        }
+
         src = target[name]
         copy = options[name]
 

package/src/utils/extend/extend.test.js

@@ -82,6 +82,35 @@ describe('[extend API]', () => {
 
         expect(result.a()).toBe(6)
       })
+
+      test.each([true, false])('does not merge __proto__ (deep: %s)', deep => {
+        const target = {}
+        const source = JSON.parse(
+          '{"__proto__":{"polluted":"prototype pollution"}}'
+        )
+
+        extend(deep, target, source)
+
+        expect(Object.getPrototypeOf(target)).toBe(Object.prototype)
+        expect(Object.hasOwn(target, '__proto__')).toBe(false)
+        expect(Object.prototype.polluted).toBeUndefined()
+      })
+
+      test('preserves constructor and prototype data properties', () => {
+        const result = extend(
+          true,
+          {},
+          {
+            constructor: { name: 'custom' },
+            prototype: { type: 'custom' }
+          }
+        )
+
+        expect(Object.hasOwn(result, 'constructor')).toBe(true)
+        expect(Object.hasOwn(result, 'prototype')).toBe(true)
+        expect(result.constructor).toStrictEqual({ name: 'custom' })
+        expect(result.prototype).toStrictEqual({ type: 'custom' })
+      })
     })
   })
 })

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)) &&