quasar 2.6.3 → 2.6.6

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

@@ -7,4 +7,3 @@ export type QNotifyUpdateOptions = Omit<QNotifyCreateOptions, 'group' | 'positio
 export type QNotifyOptions = Omit<QNotifyCreateOptions, 'ignoreDefaults'>;
 
 export type QNotifyAction = Omit<QBtnProps, 'onClick'> & ButtonHTMLAttributes & { noDismiss?: boolean; handler?: () => void };
-export type QNotifyActions = QNotifyAction[];

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

@@ -3119,8 +3119,9 @@ export interface QDialog extends ComponentPublicInstance<QDialogProps> {
   toggle: (evt?: Event) => void;
   /**
    * Focus dialog; if you have content with autofocus attribute, it will directly focus it
+   * @param selector Optional CSS selector to override default focusable element
    */
-  focus: () => void;
+  focus: (selector?: string) => void;
   /**
    * Shakes dialog
    */
@@ -4895,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
@@ -12848,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 {}
@@ -13265,7 +13304,7 @@ import { WebStorageGetItemMethodType } from "./api";
 import { WebStorageGetIndexMethodType } from "./api";
 import { WebStorageGetKeyMethodType } from "./api";
 import { WebStorageGetAllKeysMethodType } from "./api";
-import { QNotifyActions } from "./api";
+import { QNotifyAction } from "./api";
 export interface QNotifyCreateOptions {
   /**
    * Optional type (that has been previously registered) or one of the out of the box ones ('positive', 'negative', 'warning', 'info', 'ongoing')
@@ -13383,7 +13422,7 @@ export interface QNotifyCreateOptions {
   /**
    * Notification actions (buttons); Unless 'noDismiss' is true, clicking/tapping on the button will close the notification; Also check 'closeBtn' convenience prop
    */
-  actions?: QNotifyActions[];
+  actions?: QNotifyAction[];
   /**
    * Function to call when notification gets dismissed
    */

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.3",
+  "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.3",
+  "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,13 +243,13 @@ export default createComponent({
       }
 
       registerTimeout(() => {
-        hidePortal()
+        hidePortal(true) // done hiding, now destroy
         animating.value = false
         emit('hide', evt)
       }, props.transitionDuration)
     }
 
-    function focus () {
+    function focus (selector) {
       addFocusFn(() => {
         let node = innerRef.value
 
@@ -256,7 +257,7 @@ export default createComponent({
           return
         }
 
-        node = node.querySelector('[autofocus], [data-autofocus]') || node
+        node = node.querySelector(selector || '[autofocus], [data-autofocus]') || node
         node.focus({ preventScroll: true })
       })
     }
@@ -350,11 +351,10 @@ 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()
+        focus('[tabindex]:not([tabindex="-1"])')
       }
     }
 

package/src/components/dialog/QDialog.json

@@ -107,7 +107,16 @@
 
   "methods": {
     "focus": {
-      "desc": "Focus dialog; if you have content with autofocus attribute, it will directly focus it"
+      "desc": "Focus dialog; if you have content with autofocus attribute, it will directly focus it",
+      "params": {
+        "selector": {
+          "type": "String",
+          "required": false,
+          "desc": "Optional CSS selector to override default focusable element",
+          "examples": [ "[tabindex]:not([tabindex=\"-1\"])" ],
+          "addedIn": "v2.6.5"
+        }
+      }
     },
 
     "shake": {

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/dialog-plugin/DialogPlugin.js

@@ -239,14 +239,14 @@ export default createComponent({
     function getButtons () {
       const child = []
 
-      props.ok && child.push(
-        h(QBtn, okProps.value)
-      )
-
       props.cancel && child.push(
         h(QBtn, cancelProps.value)
       )
 
+      props.ok && child.push(
+        h(QBtn, okProps.value)
+      )
+
       return h(QCardActions, {
         class: props.stackButtons === true ? 'items-end' : '',
         vertical: props.stackButtons,

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 */"}