quasar 2.6.5 → 2.6.6

package/dist/types/api/validation.d.ts

@@ -1,4 +1,4 @@
 // Keep in sync with ui/src/utils/patterns.js
-export type EmbeddedValidationRule = "date" | "time" | "fulltime" | "timeOrFulltime" | "hexColor" | "hexaColor" | "hexOrHexaColor" | "rgbColor" | "rgbaColor" | "rgbOrRgbaColor" | "hexOrRgbColor" | "hexaOrRgbaColor" | "anyColor";
+export type EmbeddedValidationRule = "date" | "time" | "fulltime" | "timeOrFulltime" | "email" | "hexColor" | "hexaColor" | "hexOrHexaColor" | "rgbColor" | "rgbaColor" | "rgbOrRgbaColor" | "hexOrRgbColor" | "hexaOrRgbaColor" | "anyColor";
 
 export type ValidationRule<T = any> = EmbeddedValidationRule | ((value: T) => boolean | string | Promise<boolean | string>);

package/dist/types/index.d.ts

@@ -4896,7 +4896,21 @@ export interface QImgProps {
   /**
    * Same syntax as <img> referrerpolicy attribute
    */
-  referrerpolicy?: string | undefined;
+  referrerpolicy?:
+    | "no-referrer"
+    | "no-referrer-when-downgrade"
+    | "origin"
+    | "origin-when-cross-origin"
+    | "same-origin"
+    | "strict-origin"
+    | "strict-origin-when-cross-origin"
+    | "unsafe-url"
+    | undefined;
+  /**
+   * Provides a hint of the relative priority to use when fetching the image
+   * Default value: auto
+   */
+  fetchpriority?: "high" | "low" | "auto" | undefined;
   /**
    * How the image will fit into the container; Equivalent of the object-fit prop; Can be coordinated with 'position' prop
    * Default value: cover
@@ -12849,6 +12863,30 @@ export interface QVideoProps {
    * (Accessibility) Set the native 'title' attribute value of the inner iframe being used
    */
   title?: string | undefined;
+  /**
+   * Provides a hint of the relative priority to use when fetching the iframe document
+   * Default value: auto
+   */
+  fetchpriority?: "high" | "low" | "auto" | undefined;
+  /**
+   * Indicates how the browser should load the iframe
+   * Default value: eager
+   */
+  loading?: "eager" | "lazy" | undefined;
+  /**
+   * Indicates which referrer to send when fetching the frame's resource
+   * Default value: strict-origin-when-cross-origin
+   */
+  referrerpolicy?:
+    | "no-referrer"
+    | "no-referrer-when-downgrade"
+    | "origin"
+    | "origin-when-cross-origin"
+    | "same-origin"
+    | "strict-origin"
+    | "strict-origin-when-cross-origin"
+    | "unsafe-url"
+    | undefined;
 }
 
 export interface QVideoSlots {}

package/dist/vetur/quasar-attributes.json

@@ -2291,6 +2291,10 @@
     "type": "string",
     "description": "Same syntax as <img> referrerpolicy attribute"
   },
+  "q-img/fetchpriority": {
+    "type": "string",
+    "description": "Provides a hint of the relative priority to use when fetching the image"
+  },
   "q-img/fit": {
     "type": "string",
     "description": "How the image will fit into the container; Equivalent of the object-fit prop; Can be coordinated with 'position' prop"
@@ -5751,6 +5755,18 @@
     "type": "string",
     "description": "(Accessibility) Set the native 'title' attribute value of the inner iframe being used"
   },
+  "q-video/fetchpriority": {
+    "type": "string",
+    "description": "Provides a hint of the relative priority to use when fetching the iframe document"
+  },
+  "q-video/loading": {
+    "type": "string",
+    "description": "Indicates how the browser should load the iframe"
+  },
+  "q-video/referrerpolicy": {
+    "type": "string",
+    "description": "Indicates which referrer to send when fetching the frame's resource"
+  },
   "q-virtual-scroll/virtual-scroll-horizontal": {
     "type": "boolean",
     "description": "Make virtual list work in horizontal mode"

package/dist/vetur/quasar-tags.json

@@ -753,6 +753,7 @@
       "crossorigin",
       "decoding",
       "referrerpolicy",
+      "fetchpriority",
       "fit",
       "position",
       "alt",
@@ -2038,7 +2039,10 @@
     "attributes": [
       "ratio",
       "src",
-      "title"
+      "title",
+      "fetchpriority",
+      "loading",
+      "referrerpolicy"
     ],
     "description": ""
   },

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

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.6.5",
+  "version": "2.6.6",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -514,7 +514,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "Native <a> link href attribute; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props\n\nExamples:\nhttp://quasar.dev",
+              "description": "Native <a> link href attribute; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props\n\nExamples:\nhttps://quasar.dev",
               "doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs"
             },
             {
@@ -646,7 +646,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "Native <a> link href attribute; Has priority over the 'to' and 'replace' props\n\nExamples:\nhttp://quasar.dev\nhref=\"https://quasar.dev\" target=\"_blank\"",
+              "description": "Native <a> link href attribute; Has priority over the 'to' and 'replace' props\n\nExamples:\nhttps://quasar.dev\nhref=\"https://quasar.dev\" target=\"_blank\"",
               "doc-url": "https://v2.quasar.dev/vue-components/button-dropdown"
             },
             {
@@ -1559,7 +1559,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "Native <a> link href attribute; Has priority over the 'to' and 'replace' props\n\nExamples:\nhttp://quasar.dev\nhref=\"https://quasar.dev\" target=\"_blank\"",
+              "description": "Native <a> link href attribute; Has priority over the 'to' and 'replace' props\n\nExamples:\nhttps://quasar.dev\nhref=\"https://quasar.dev\" target=\"_blank\"",
               "doc-url": "https://v2.quasar.dev/vue-components/button"
             },
             {
@@ -4758,7 +4758,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "Native <a> link href attribute; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props\n\nExamples:\nhttp://quasar.dev",
+              "description": "Native <a> link href attribute; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props\n\nExamples:\nhttps://quasar.dev",
               "doc-url": "https://v2.quasar.dev/vue-components/expansion-item"
             },
             {
@@ -7248,11 +7248,21 @@
               "name": "referrerpolicy",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "'no-referrer'|'no-referrer-when-downgrade'|'origin'|'origin-when-cross-origin'|'same-origin'|'strict-origin'|'strict-origin-when-cross-origin'|'unsafe-url'"
               },
               "description": "Same syntax as <img> referrerpolicy attribute",
               "doc-url": "https://v2.quasar.dev/vue-components/img"
             },
+            {
+              "name": "fetchpriority",
+              "value": {
+                "kind": "expression",
+                "type": "'high'|'low'|'auto'"
+              },
+              "description": "Provides a hint of the relative priority to use when fetching the image",
+              "doc-url": "https://v2.quasar.dev/vue-components/img",
+              "default": "\"auto\""
+            },
             {
               "name": "fit",
               "value": {
@@ -8378,7 +8388,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "Native <a> link href attribute; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props\n\nExamples:\nhttp://quasar.dev",
+              "description": "Native <a> link href attribute; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props\n\nExamples:\nhttps://quasar.dev",
               "doc-url": "https://v2.quasar.dev/vue-components/list-and-list-items"
             },
             {
@@ -16477,7 +16487,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "Native <a> link href attribute; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props\n\nExamples:\nhttp://quasar.dev",
+              "description": "Native <a> link href attribute; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props\n\nExamples:\nhttps://quasar.dev",
               "doc-url": "https://v2.quasar.dev/vue-components/tabs"
             },
             {
@@ -18662,6 +18672,36 @@
               },
               "description": "(Accessibility) Set the native 'title' attribute value of the inner iframe being used\n\nExamples:\nMy Daily Marathon",
               "doc-url": "https://v2.quasar.dev/vue-components/video"
+            },
+            {
+              "name": "fetchpriority",
+              "value": {
+                "kind": "expression",
+                "type": "'high'|'low'|'auto'"
+              },
+              "description": "Provides a hint of the relative priority to use when fetching the iframe document",
+              "doc-url": "https://v2.quasar.dev/vue-components/video",
+              "default": "\"auto\""
+            },
+            {
+              "name": "loading",
+              "value": {
+                "kind": "expression",
+                "type": "'eager'|'lazy'"
+              },
+              "description": "Indicates how the browser should load the iframe",
+              "doc-url": "https://v2.quasar.dev/vue-components/video",
+              "default": "\"eager\""
+            },
+            {
+              "name": "referrerpolicy",
+              "value": {
+                "kind": "expression",
+                "type": "'no-referrer'|'no-referrer-when-downgrade'|'origin'|'origin-when-cross-origin'|'same-origin'|'strict-origin'|'strict-origin-when-cross-origin'|'unsafe-url'"
+              },
+              "description": "Indicates which referrer to send when fetching the frame's resource",
+              "doc-url": "https://v2.quasar.dev/vue-components/video",
+              "default": "\"strict-origin-when-cross-origin\""
             }
           ],
           "slots": [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.6.5",
+  "version": "2.6.6",
   "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",
@@ -86,7 +86,6 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-vue": "^7.0.0",
     "fast-glob": "^3.2.7",
-    "json-beautify": "^1.1.1",
     "module-alias": "^2.2.2",
     "postcss-rtlcss": "^3.5.3",
     "prettier": "^2.4.1",
@@ -95,7 +94,6 @@
     "rimraf": "^3.0.1",
     "rollup": "^2.34.0",
     "table": "^6.0.4",
-    "tslib": "^2.0.3",
     "uglify-es": "^3.3.9",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0",

package/src/components/btn/use-btn.json

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

package/src/components/dialog/QDialog.js

@@ -96,7 +96,7 @@ export default createComponent({
     const { registerTimeout, removeTimeout } = useTimeout()
     const { registerTick, removeTick } = useTick()
 
-    const { showPortal, hidePortal, portalIsActive, renderPortal } = usePortal(
+    const { showPortal, hidePortal, portalIsAccessible, renderPortal } = usePortal(
       vm, innerRef, renderPortalContent, /* pls do check if on a global dialog */ true
     )
 
@@ -235,6 +235,7 @@ export default createComponent({
       removeFromHistory()
       cleanup(true)
       animating.value = true
+      hidePortal()
 
       if (refocusTarget !== null) {
         refocusTarget.focus()
@@ -242,7 +243,7 @@ export default createComponent({
       }
 
       registerTimeout(() => {
-        hidePortal()
+        hidePortal(true) // done hiding, now destroy
         animating.value = false
         emit('hide', evt)
       }, props.transitionDuration)
@@ -350,8 +351,7 @@ export default createComponent({
     function onFocusChange (evt) {
       // the focus is not in a vue child component
       if (
-        showing.value === true
-        && portalIsActive.value === true
+        portalIsAccessible.value === true
         && childHasFocus(innerRef.value, evt.target) !== true
       ) {
         focus('[tabindex]:not([tabindex="-1"])')

package/src/components/dialog/QDialog.sass

@@ -39,8 +39,8 @@
         max-height: 100vh
         max-width: 100vw
         border-radius: 0 !important
-        top: 0px !important
-        left: 0px !important
+        top: 0 !important
+        left: 0 !important
 
     &--top, &--bottom
       padding-top: 0 !important

package/src/components/editor/QEditor.js

@@ -368,11 +368,14 @@ export default createComponent({
     }
 
     function onFocusin (e) {
+      const root = rootRef.value
+
       if (
-        rootRef.value.contains(e.target) === true
+        root !== null
+        && root.contains(e.target) === true
         && (
           e.relatedTarget === null
-          || rootRef.value.contains(e.relatedTarget) !== true
+          || root.contains(e.relatedTarget) !== true
         )
       ) {
         const prop = `inner${ isViewingSource.value === true ? 'Text' : 'HTML' }`
@@ -382,11 +385,14 @@ export default createComponent({
     }
 
     function onFocusout (e) {
+      const root = rootRef.value
+
       if (
-        rootRef.value.contains(e.target) === true
+        root !== null
+        && root.contains(e.target) === true
         && (
           e.relatedTarget === null
-          || rootRef.value.contains(e.relatedTarget) !== true
+          || root.contains(e.relatedTarget) !== true
         )
       ) {
         eVm.caret.savePosition()

package/src/components/icon/QIcon.js

@@ -133,7 +133,7 @@ export default createComponent({
         cls = icon
       }
       else if (ionRE.test(icon) === true) {
-        cls = `ionicons ion-${ $q.platform.is.ios === true ? 'ios' : 'md' }${ icon.substr(3) }`
+        cls = `ionicons ion-${ $q.platform.is.ios === true ? 'ios' : 'md' }${ icon.substring(3) }`
       }
       else {
         // "notranslate" class is for Google Translate

package/src/components/img/QImg.js

@@ -31,6 +31,10 @@ export default createComponent({
       type: String,
       default: 'lazy'
     },
+    fetchpriority: {
+      type: String,
+      default: 'auto'
+    },
     width: String,
     height: String,
     initialRatio: {
@@ -193,6 +197,7 @@ export default createComponent({
         height: props.height,
         width: props.width,
         loading: props.loading,
+        fetchpriority: props.fetchpriority,
         'aria-hidden': 'true',
         draggable: props.draggable,
         ...img

package/src/components/img/QImg.json

@@ -116,8 +116,26 @@
     "referrerpolicy": {
       "type": "String",
       "desc": "Same syntax as <img> referrerpolicy attribute",
+      "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"
+    },
+
+    "fetchpriority": {
+      "type": "String",
+      "desc": "Provides a hint of the relative priority to use when fetching the image",
+      "default": "auto",
+      "values": [ "high", "low", "auto" ],
       "category": "behavior",
-      "__exemption": [ "examples" ]
+      "addedIn": "v2.6.6"
     },
 
     "fit": {

package/src/components/menu/QMenu.js

@@ -244,6 +244,7 @@ export default createComponent({
     function handleHide (evt) {
       removeTick()
       removeTimeout()
+      hidePortal()
 
       anchorCleanup(true)
 
@@ -261,7 +262,7 @@ export default createComponent({
       }
 
       registerTimeout(() => {
-        hidePortal()
+        hidePortal(true) // done hiding, now destroy
         emit('hide', evt)
       }, props.transitionDuration)
     }

package/src/components/table/QTable.js

@@ -978,7 +978,7 @@ export default createComponent({
 
           return h('div', {
             class: 'q-table__grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3'
-              + (scope.selected === true ? 'q-table__grid-item--selected' : '')
+              + (scope.selected === true ? ' q-table__grid-item--selected' : '')
           }, [
             h('div', data, child)
           ])

package/src/components/tooltip/QTooltip.js

@@ -175,11 +175,12 @@ export default createComponent({
     function handleHide (evt) {
       removeTick()
       removeTimeout()
+      hidePortal()
 
       anchorCleanup()
 
       registerTimeout(() => {
-        hidePortal()
+        hidePortal(true) // done hiding, now destroy
         emit('hide', evt)
       }, props.transitionDuration)
     }

package/src/components/tree/QTree.sass

@@ -101,10 +101,10 @@
   &__arrow,
   &__spinner
     font-size: 16px
+    margin-right: 4px
 
   &__arrow
     transition: transform .3s
-    margin-right: 4px
 
     &--rotate
       transform: rotate3d(0, 0, 1, 90deg)

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 === void 0) {
+        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({})
@@ -418,7 +419,7 @@ export function useVirtualScroll ({
       })
     }
 
-    setOverflowAnchor(vsId, toIndex - from + 1)
+    setOverflowAnchor(contentEl, toIndex - from)
 
     const sizeBefore = alignEnd !== void 0 ? virtualScrollSizes.slice(from, toIndex).reduce(sumFn, 0) : 0
 
@@ -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()
   })