quasar 2.6.5 → 2.7.1

package/src/components/video/QVideo.js

@@ -15,7 +15,20 @@ export default createComponent({
       required: true
     },
 
-    title: String
+    title: String,
+
+    fetchpriority: {
+      type: String,
+      default: 'auto'
+    },
+    loading: {
+      type: String,
+      default: 'eager'
+    },
+    referrerpolicy: {
+      type: String,
+      default: 'strict-origin-when-cross-origin'
+    }
   },
 
   setup (props) {
@@ -33,6 +46,9 @@ export default createComponent({
       h('iframe', {
         src: props.src,
         title: props.title,
+        fetchpriority: props.fetchpriority,
+        loading: props.loading,
+        referrerpolicy: props.referrerpolicy,
         frameborder: '0',
         allowfullscreen: true
       })

package/src/components/video/QVideo.json

@@ -25,6 +25,42 @@
       ],
       "category": "accessibility",
       "addedIn": "v2.4.3"
+    },
+
+    "fetchpriority": {
+      "type": "String",
+      "desc": "Provides a hint of the relative priority to use when fetching the iframe document",
+      "default": "auto",
+      "values": [ "high", "low", "auto" ],
+      "category": "behavior",
+      "addedIn": "v2.6.6"
+    },
+
+    "loading": {
+      "type": "String",
+      "desc": "Indicates how the browser should load the iframe",
+      "default": "eager",
+      "values": [ "eager", "lazy" ],
+      "category": "behavior",
+      "addedIn": "v2.6.6"
+    },
+
+    "referrerpolicy": {
+      "type": "String",
+      "desc": "Indicates which referrer to send when fetching the frame's resource",
+      "default": "strict-origin-when-cross-origin",
+      "values": [
+        "no-referrer",
+        "no-referrer-when-downgrade",
+        "origin",
+        "origin-when-cross-origin",
+        "same-origin",
+        "strict-origin",
+        "strict-origin-when-cross-origin",
+        "unsafe-url"
+      ],
+      "category": "behavior",
+      "addedIn": "v2.6.6"
     }
   }
 }

package/src/components/virtual-scroll/QVirtualScroll.sass

@@ -6,9 +6,12 @@
     outline: none
     contain: content
 
-    *
+    > *
       overflow-anchor: none
 
+    > [data-q-vs-anchor]
+      overflow-anchor: auto
+
   &__padding
     background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0) 20%, rgba(128, 128, 128, .03) 20%, rgba(128, 128, 128, .08) 50%, rgba(128, 128, 128, .03) 80%, rgba(255,255,255,0) 80%, rgba(255,255,255,0)) #{"/* rtl:ignore */"}
     background-size: var(--q-virtual-scroll-item-width, 100%) var(--q-virtual-scroll-item-height, 50px) #{"/* rtl:ignore */"}

package/src/components/virtual-scroll/use-virtual-scroll.js

@@ -15,27 +15,30 @@ const scrollToEdges = [
   'end-force'
 ]
 
-let id = 1
 const filterProto = Array.prototype.filter
 
 const setOverflowAnchor = __QUASAR_SSR__ || window.getComputedStyle(document.body).overflowAnchor === void 0
   ? noop
-  : function (id, index) {
-    const ssId = id + '_ss'
+  : function (contentEl, index) {
+    requestAnimationFrame(() => {
+      if (contentEl === null) {
+        return
+      }
 
-    let styleSheet = document.getElementById(ssId)
+      const children = contentEl.children || []
 
-    if (styleSheet === null) {
-      styleSheet = document.createElement('style')
-      styleSheet.type = 'text/css'
-      styleSheet.id = ssId
-      document.head.appendChild(styleSheet)
-    }
+      filterProto
+        .call(children, el => el.dataset && el.dataset.qVsAnchor !== void 0)
+        .forEach(el => {
+          delete el.dataset.qVsAnchor
+        })
 
-    if (styleSheet.qChildIndex !== index) {
-      styleSheet.qChildIndex = index
-      styleSheet.innerHTML = `#${ id } > *:nth-child(${ index }) { overflow-anchor: auto }`
-    }
+      const el = children[ index ]
+
+      if (el && el.dataset) {
+        el.dataset.qVsAnchor = ''
+      }
+    })
   }
 
 function sumFn (acc, h) {
@@ -231,8 +234,6 @@ export function useVirtualScroll ({
 
   let prevScrollStart, prevToIndex, localScrollViewSize, virtualScrollSizesAgg = [], virtualScrollSizes
 
-  const vsId = 'qvs_' + id++
-
   const virtualScrollPaddingBefore = ref(0)
   const virtualScrollPaddingAfter = ref(0)
   const virtualScrollSliceSizeComputed = ref({})
@@ -414,11 +415,11 @@ export function useVirtualScroll ({
       contentEl.addEventListener('focusout', onBlurRefocusFn)
 
       setTimeout(() => {
-        contentEl !== void 0 && contentEl.removeEventListener('focusout', onBlurRefocusFn)
+        contentEl !== null && contentEl.removeEventListener('focusout', onBlurRefocusFn)
       })
     }
 
-    setOverflowAnchor(vsId, toIndex - from + 1)
+    setOverflowAnchor(contentEl, toIndex - from)
 
     const sizeBefore = alignEnd !== void 0 ? virtualScrollSizes.slice(from, toIndex).reduce(sumFn, 0) : 0
 
@@ -527,7 +528,7 @@ export function useVirtualScroll ({
   }
 
   function onBlurRefocusFn () {
-    contentRef.value !== void 0 && contentRef.value.focus()
+    contentRef.value !== null && contentRef.value !== void 0 && contentRef.value.focus()
   }
 
   function localResetVirtualScroll (toIndex, fullReset) {
@@ -644,7 +645,6 @@ export function useVirtualScroll ({
         class: 'q-virtual-scroll__content',
         key: 'content',
         ref: contentRef,
-        id: vsId,
         tabindex: -1
       }, content.flat()),
 
@@ -718,9 +718,7 @@ export function useVirtualScroll ({
     }
   })
 
-  setOverflowAnchor !== noop && onBeforeUnmount(() => {
-    const styleSheet = document.getElementById(vsId + '_ss')
-    styleSheet !== null && styleSheet.remove()
+  __QUASAR_SSR__ || onBeforeUnmount(() => {
     onVirtualScrollEvt.cancel()
   })
 

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

@@ -255,7 +255,7 @@ describe('use-model-toggle API', () => {
 
   describe('Methods', () => {
     describe('(method): show', () => {
-      it('should tigger the menu to show', () => {
+      it('should trigger the menu to show', () => {
         mount(WrapperOne)
 
         cy.dataCy('wrapper')
@@ -267,7 +267,7 @@ describe('use-model-toggle API', () => {
     })
 
     describe('(method): hide', () => {
-      it('should tigger the menu to hide', () => {
+      it('should trigger the menu to hide', () => {
         mount(WrapperOne)
 
         cy.dataCy('wrapper')

package/src/composables/private/__tests__/use-size.spec.js

@@ -1,6 +1,6 @@
-import QAvatar from './../../../components/avatar/QAvatar'
+import QAvatar from './../../../components/avatar/QAvatar.js'
 import { mount } from '@cypress/vue'
-import { useSizeDefaults } from './../use-size'
+import { useSizeDefaults } from './../use-size.js'
 
 describe('use-size API', () => {
   describe('Props', () => {

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

@@ -1,6 +1,6 @@
 import { mount } from '@cypress/vue'
 import FieldWrapper from './FieldWrapper.vue'
-import Icons from './../../../../icon-set/material-icons'
+import Icons from './../../../../icon-set/material-icons.mjs'
 
 // const snapshotOptions = { customSnapshotsDir: '../__tests__' }
 

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

@@ -445,6 +445,7 @@ export default function (state) {
         h('div', {
           ref: state.targetRef,
           class: 'q-field__native row',
+          tabindex: -1,
           ...state.splitAttrs.attributes.value,
           'data-autofocus': props.autofocus === true || void 0
         }, slots.control(controlSlotScope.value))

package/src/composables/private/use-key-composition.js

@@ -1,26 +1,33 @@
+import { client } from '../../plugins/Platform.js'
+
 const isJapanese = /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-\u9faf\u3400-\u4dbf]/
 const isChinese = /[\u4e00-\u9fff\u3400-\u4dbf\u{20000}-\u{2a6df}\u{2a700}-\u{2b73f}\u{2b740}-\u{2b81f}\u{2b820}-\u{2ceaf}\uf900-\ufaff\u3300-\u33ff\ufe30-\ufe4f\uf900-\ufaff\u{2f800}-\u{2fa1f}]/u
 const isKorean = /[\u3131-\u314e\u314f-\u3163\uac00-\ud7a3]/
+const isPlainText = /[a-z0-9_ -]$/i
 
 export default function (onInput) {
   return function onComposition (e) {
     if (e.type === 'compositionend' || e.type === 'change') {
-      if (e.target.composing !== true) { return }
-      e.target.composing = false
+      if (e.target.qComposing !== true) { return }
+      e.target.qComposing = false
       onInput(e)
     }
     else if (e.type === 'compositionupdate') {
       if (
-        typeof e.data === 'string'
-        && isJapanese.test(e.data) === false
-        && isChinese.test(e.data) === false
-        && isKorean.test(e.data) === false
+        e.target.qComposing !== true
+        && typeof e.data === 'string'
       ) {
-        e.target.composing = false
+        const isComposing = client.is.firefox === true
+          ? isPlainText.test(e.data) === false
+          : isJapanese.test(e.data) === true && isChinese.test(e.data) === true && isKorean.test(e.data) === true
+
+        if (isComposing === true) {
+          e.target.qComposing = true
+        }
       }
     }
     else {
-      e.target.composing = true
+      e.target.qComposing = true
     }
   }
 }

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

@@ -26,11 +26,16 @@ function isOnGlobalDialog (vm) {
 // You MUST specify "inheritAttrs: false" in your component
 
 export default function (vm, innerRef, renderPortalContent, checkGlobalDialog) {
+  // showing, including while in show/hide transition
   const portalIsActive = ref(false)
 
+  // showing & not in any show/hide transition
+  const portalIsAccessible = ref(false)
+
   if (__QUASAR_SSR_SERVER__) {
     return {
       portalIsActive,
+      portalIsAccessible,
 
       showPortal: noop,
       hidePortal: noop,
@@ -45,9 +50,12 @@ export default function (vm, innerRef, renderPortalContent, checkGlobalDialog) {
   function showPortal (isReady) {
     if (isReady === true) {
       removeFocusWaitFlag(focusObj)
+      portalIsAccessible.value = true
       return
     }
 
+    portalIsAccessible.value = false
+
     if (portalIsActive.value === false) {
       if (onGlobalDialog === false && portalEl === null) {
         portalEl = createGlobalNode()
@@ -62,7 +70,11 @@ export default function (vm, innerRef, renderPortalContent, checkGlobalDialog) {
     }
   }
 
-  function hidePortal () {
+  function hidePortal (isReady) {
+    portalIsAccessible.value = false
+
+    if (isReady !== true) { return }
+
     removeFocusWaitFlag(focusObj)
     portalIsActive.value = false
 
@@ -78,7 +90,7 @@ export default function (vm, innerRef, renderPortalContent, checkGlobalDialog) {
     }
   }
 
-  onUnmounted(hidePortal)
+  onUnmounted(() => { hidePortal(true) })
 
   // expose publicly needed stuff for portal utils
   Object.assign(vm.proxy, { __qPortalInnerRef: innerRef })
@@ -88,6 +100,7 @@ export default function (vm, innerRef, renderPortalContent, checkGlobalDialog) {
     hidePortal,
 
     portalIsActive,
+    portalIsAccessible,
 
     renderPortal: () => (
       onGlobalDialog === true

package/src/composables/private/use-router-link.json

@@ -39,7 +39,7 @@
     "href": {
       "type": "String",
       "desc": "Native <a> link href attribute; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props",
-      "examples": [ "http://quasar.dev" ],
+      "examples": [ "https://quasar.dev" ],
       "category": "navigation",
       "addedIn": "v2.4"
     },

package/src/history.js

@@ -11,9 +11,9 @@ function filterInvalidPath (path) {
 }
 
 function normalizeExitPath (path) {
-  path.startsWith('#') === true && (path = path.substr(1))
+  path.startsWith('#') === true && (path = path.substring(1))
   path.startsWith('/') === false && (path = '/' + path)
-  path.endsWith('/') === true && (path = path.substr(0, path.length - 1))
+  path.endsWith('/') === true && (path = path.substring(0, path.length - 1))
   return '#' + path
 }
 

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

@@ -1,7 +1,7 @@
 function fallback (text) {
   const area = document.createElement('textarea')
   area.value = text
-  area.contentEditable = true
+  area.contentEditable = 'true'
   area.style.position = 'fixed' // avoid scrolling to bottom
 
   document.body.appendChild(area)

package/src/utils/patterns.js

@@ -14,6 +14,14 @@ export const testPattern = {
   fulltime: v => /^([0-1]?\d|2[0-3]):[0-5]\d:[0-5]\d$/.test(v),
   timeOrFulltime: v => /^([0-1]?\d|2[0-3]):[0-5]\d(:[0-5]\d)?$/.test(v),
 
+  // -- RFC 5322 --
+  // -- Added in v2.6.6 --
+  // This is a basic helper validation.
+  // For something more complex (like RFC 822) you should write and use your own rule.
+  // We won't be accepting PRs to enhance the one below because of the reason above.
+  // eslint-disable-next-line
+  email: v => /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(v),
+
   hexColor: v => hex.test(v),
   hexaColor: v => hexa.test(v),
   hexOrHexaColor: v => hexOrHexa.test(v),

package/src/utils/private/date-persian.js

@@ -27,15 +27,6 @@ export function toGregorian (jy, jm, jd) {
   return d2g(j2d(jy, jm, jd))
 }
 
-/*
-  Checks whether a Jalaali date is valid or not.
-*/
-export function isValidJalaaliDate (jy, jm, jd) {
-  return jy >= -61 && jy <= 3177
-          && jm >= 1 && jm <= 12
-          && jd >= 1 && jd <= jalaaliMonthLength(jy, jm)
-}
-
 /*
   Is this a leap year or not?
 */

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

@@ -59,19 +59,31 @@ export default function (DefaultComponent, supportsCustomComponent, parentApp) {
     const applyState = cmd => {
       if (dialogRef.value !== null && dialogRef.value[ cmd ] !== void 0) {
         dialogRef.value[ cmd ]()
+        return
       }
-      else if (
+
+      const target = vm.$.subTree
+
+      if (target && target.component) {
         // account for "script setup" way of declaring component
-        vm.$.subTree
-        && vm.$.subTree.component
-        && vm.$.subTree.component.proxy
-        && vm.$.subTree.component.proxy[ cmd ]
-      ) {
-        vm.$.subTree.component.proxy[ cmd ]()
-      }
-      else {
-        console.error('[Quasar] Incorrectly defined Dialog component')
+        if (target.component.proxy && target.component.proxy[ cmd ]) {
+          target.component.proxy[ cmd ]()
+          return
+        }
+
+        // account for "script setup" + async component way of declaring component
+        if (
+          target.component.subTree &&
+          target.component.subTree.component &&
+          target.component.subTree.component.proxy &&
+          target.component.subTree.component.proxy[ cmd ]
+        ) {
+          target.component.subTree.component.proxy[ cmd ]()
+          return
+        }
       }
+
+      console.error('[Quasar] Incorrectly defined Dialog component')
     }
 
     const

package/src/utils/private/position-engine.js

@@ -48,11 +48,6 @@ export function parsePosition (pos, rtl) {
   }
 }
 
-export function validateCover (val) {
-  if (val === true || val === false) { return true }
-  return validatePosition(val)
-}
-
 export function getAnchorProps (el, offset) {
   let { top, left, right, bottom, width, height } = el.getBoundingClientRect()
 

package/src/utils/private/sort.js

@@ -1,14 +1,3 @@
-export function sortString (a, b) {
-  if (typeof a !== 'string') {
-    throw new TypeError('The value for sorting must be a String')
-  }
-  return a.localeCompare(b)
-}
-
-export function sortNumber (a, b) {
-  return a - b
-}
-
 export function sortDate (a, b) {
   return (new Date(a)) - (new Date(b))
 }

package/src/utils/private/web-storage.js

@@ -36,7 +36,7 @@ function decode (value) {
     return value
   }
 
-  const type = value.substr(0, 8)
+  const type = value.substring(0, 8)
   const source = value.substring(9)
 
   switch (type) {

package/src/utils/uid.js

@@ -9,7 +9,7 @@ const hexBytes = new Array(256)
 
 // Pre-calculate toString(16) for speed
 for (let i = 0; i < 256; i++) {
-  hexBytes[ i ] = (i + 0x100).toString(16).substr(1)
+  hexBytes[ i ] = (i + 0x100).toString(16).substring(1)
 }
 
 // Use best available PRNG