quasar 2.21.3 → 2.22.0

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

@@ -105,7 +105,9 @@ export default function useFile({
       files = filterFiles(files, rejectedFiles, 'accept', file =>
         extensions.value.some(
           ext =>
-            file.type.toUpperCase().startsWith(ext) ||
+            (ext.endsWith('/')
+              ? file.type.toUpperCase().startsWith(ext)
+              : file.type.toUpperCase() === ext) ||
             file.name.toUpperCase().endsWith(ext)
         )
       )
@@ -137,19 +139,23 @@ export default function useFile({
 
     // Compute key to use for each file
     files.forEach(file => {
-      file.__key =
-        file.webkitRelativePath + file.lastModified + file.name + file.size
+      file.__key = JSON.stringify([
+        file.webkitRelativePath,
+        file.lastModified,
+        file.name,
+        file.size
+      ])
     })
 
     if (append) {
       // Avoid duplicate files
-      const filenameMap = currentFileList.map(entry => entry.__key)
-      files = filterFiles(
-        files,
-        rejectedFiles,
-        'duplicate',
-        file => !filenameMap.includes(file.__key)
-      )
+      const filenameSet = new Set(currentFileList.map(entry => entry.__key))
+      files = filterFiles(files, rejectedFiles, 'duplicate', file => {
+        if (filenameSet.has(file.__key)) return false
+
+        filenameSet.add(file.__key)
+        return true
+      })
     }
 
     if (files.length === 0) {
@@ -162,8 +168,11 @@ export default function useFile({
         : 0
 
       files = filterFiles(files, rejectedFiles, 'max-total-size', file => {
-        size += file.size
-        return size <= maxTotalSizeNumber.value
+        const newSize = size + file.size
+        if (newSize > maxTotalSizeNumber.value) return false
+
+        size = newSize
+        return true
       })
 
       if (files.length === 0) {

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

@@ -23,7 +23,9 @@ export default function useFullscreen() {
   const vm = getCurrentInstance()
   const { props, emit, proxy } = vm
 
-  let historyEntry, fullscreenFillerNode
+  let historyEntry,
+    fullscreenFillerNode,
+    isUnmounting = false
   const inFullscreen = ref(false)
 
   if (vmHasRouter(vm)) {
@@ -89,7 +91,7 @@ export default function useFullscreen() {
     if (counter === 0) {
       document.body.classList.remove('q-body--fullscreen-mixin')
 
-      if (proxy.$el.scrollIntoView !== void 0) {
+      if (!isUnmounting && proxy.$el.scrollIntoView !== void 0) {
         setTimeout(() => {
           proxy.$el.scrollIntoView()
         }, 0)
@@ -105,7 +107,10 @@ export default function useFullscreen() {
     if (props.fullscreen) setFullscreen()
   })
 
-  onBeforeUnmount(exitFullscreen)
+  onBeforeUnmount(() => {
+    isUnmounting = true
+    exitFullscreen()
+  })
 
   // expose public methods
   Object.assign(proxy, {

package/src/composables/private.use-model-toggle/use-model-toggle.js

@@ -21,6 +21,7 @@ export default function useModelToggle({
   hideOnRouteChange, // optional
   handleShow, // optional
   handleHide, // optional
+  handleRouteChange, // optional
   processOnMount // optional
 }) {
   const vm = getCurrentInstance()
@@ -127,6 +128,7 @@ export default function useModelToggle({
       () => proxy.$route.fullPath,
       () => {
         if (hideOnRouteChange.value && showing.value) {
+          handleRouteChange?.()
           hide()
         }
       }

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

@@ -108,11 +108,15 @@ export default function usePanel() {
   ])
 
   const transitionPrev = computed(
-    () => props.transitionPrev || `slide-${props.vertical ? 'down' : 'right'}`
+    () =>
+      props.transitionPrev ||
+      `slide-${props.vertical ? 'down' : proxy.$q.lang.rtl ? 'left' : 'right'}`
   )
 
   const transitionNext = computed(
-    () => props.transitionNext || `slide-${props.vertical ? 'up' : 'left'}`
+    () =>
+      props.transitionNext ||
+      `slide-${props.vertical ? 'up' : proxy.$q.lang.rtl ? 'right' : 'left'}`
   )
 
   const transitionStyle = computed(

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/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/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/lang/Lang.json

@@ -263,10 +263,10 @@
               "returns": {
                 "type": "String",
                 "desc": "Label",
-                "examples": ["'5-10 of 50'"]
+                "examples": ["'5–10 of 50'"]
               },
               "examples": [
-                "(start, end, total) => start + ' - ' + end + ' of ' + total"
+                "(start, end, total) => start + '–' + end + ' of ' + total"
               ]
             },
             "columns": {
@@ -804,10 +804,10 @@
                   "returns": {
                     "type": "String",
                     "desc": "Label",
-                    "examples": ["'5-10 of 50'"]
+                    "examples": ["'5–10 of 50'"]
                   },
                   "examples": [
-                    "(start, end, total) => start + ' - ' + end + ' of ' + total"
+                    "(start, end, total) => start + '–' + end + ' of ' + total"
                   ]
                 },
                 "columns": {

package/src/plugins/lang/Lang.test.js

@@ -227,7 +227,7 @@ describe('[Lang API]', () => {
               recordsPerPage: 'Records per page:',
               allRows: 'All',
               pagination: (start, end, total) =>
-                start + ' - ' + end + ' of ' + total,
+                start + '–' + end + ' of ' + total,
               columns: 'Columns'
             },
             pagination: {

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/scroll/prevent-scroll.js

@@ -12,7 +12,7 @@ let registered = 0,
   vpPendingUpdate = false,
   bodyLeft,
   bodyTop,
-  href,
+  routePath,
   closeTimer = null
 
 function onAppleScroll(e) {
@@ -59,7 +59,7 @@ function apply(action) {
     bodyLeft = body.style.left
     bodyTop = body.style.top
 
-    href = window.location.href
+    routePath = window.location.pathname
 
     body.style.left = `-${scrollPositionX}px`
     body.style.top = `-${scrollPositionY}px`
@@ -137,8 +137,8 @@ function apply(action) {
     body.style.left = bodyLeft
     body.style.top = bodyTop
 
-    // scroll back only if route has not changed
-    if (window.location.href === href) {
+    // scroll back only if route path has not changed
+    if (window.location.pathname === routePath) {
       window.scrollTo(scrollPositionX, scrollPositionY)
     }