quasar 1.18.8 → 1.19.0

package/src/components/btn/QBtn.js

@@ -320,11 +320,11 @@ export default Vue.extend({
     if (this.loading === true && this.percentage !== void 0) {
       child.push(
         h('span', {
-          staticClass: 'q-btn__progress absolute-full overflow-hidden'
+          staticClass: 'q-btn__progress absolute-full overflow-hidden',
+          class: this.darkPercentage === true ? 'q-btn__progress--dark' : ''
         }, [
           h('span', {
             staticClass: 'q-btn__progress-indicator fit block',
-            class: this.darkPercentage === true ? 'q-btn__progress--dark' : '',
             style: this.percentageStyle
           })
         ])

package/src/components/dialog/QDialog.js

@@ -151,7 +151,7 @@ export default Vue.extend({
   },
 
   methods: {
-    focus () {
+    focus (selector) {
       addFocusFn(() => {
         let node = this.__getInnerNode()
 
@@ -159,7 +159,7 @@ export default Vue.extend({
           return
         }
 
-        node = node.querySelector('[autofocus], [data-autofocus]') || node
+        node = node.querySelector(selector || '[autofocus], [data-autofocus]') || node
         node.focus({ preventScroll: true })
       })
     },
@@ -245,7 +245,7 @@ export default Vue.extend({
         }
 
         this.animating = false
-        this.__showPortal(true)
+        this.__showPortal(true) // done showing
         this.$emit('show', evt)
       }, 300)
     },
@@ -253,6 +253,7 @@ export default Vue.extend({
     __hide (evt) {
       this.__removeHistory()
       this.__cleanup(true)
+      this.__hidePortal()
       this.animating = true
 
       // check null for IE
@@ -264,7 +265,7 @@ export default Vue.extend({
       this.$el.dispatchEvent(create('popup-hide', { bubbles: true }))
 
       this.__setTimeout(() => {
-        this.__hidePortal()
+        this.__hidePortal(true) // done hiding, now destroy
         this.animating = false
         this.$emit('hide', evt)
       }, 300)
@@ -327,11 +328,10 @@ export default Vue.extend({
     __onFocusChange (e) {
       // the focus is not in a vue child component
       if (
-        this.showing === true &&
-        this.__portal !== void 0 &&
+        this.__portalIsAccessible === true &&
         childHasFocus(this.__portal.$el, e.target) !== true
       ) {
-        this.focus()
+        this.focus('[tabindex]:not([tabindex="-1"])')
       }
     },
 

package/src/components/dialog/QDialog.json

@@ -123,7 +123,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": "v1.18.9"
+        }
+      }
     },
 
     "shake": {

package/src/components/dialog-plugin/DialogPlugin.js

@@ -210,18 +210,18 @@ export default Vue.extend({
     getButtons (h) {
       const child = []
 
-      this.ok && child.push(h(QBtn, {
-        props: this.okProps,
-        attrs: { 'data-autofocus': this.focus === 'ok' && this.hasForm !== true },
-        on: cache(this, 'ok', { click: this.onOk })
-      }))
-
       this.cancel && child.push(h(QBtn, {
         props: this.cancelProps,
         attrs: { 'data-autofocus': this.focus === 'cancel' && this.hasForm !== true },
         on: cache(this, 'cancel', { click: this.onCancel })
       }))
 
+      this.ok && child.push(h(QBtn, {
+        props: this.okProps,
+        attrs: { 'data-autofocus': this.focus === 'ok' && this.hasForm !== true },
+        on: cache(this, 'ok', { click: this.onOk })
+      }))
+
       if (child.length > 0) {
         return h(QCardActions, {
           staticClass: this.stackButtons === true ? 'items-end' : null,

package/src/components/editor/QEditor.js

@@ -379,33 +379,14 @@ export default Vue.extend({
       }
     },
 
-    __onMousedown () {
+    // mousedown, touchstart
+    __onPointerStart (e) {
       this.__offsetBottom = void 0
+      this.qListeners[e.type] !== void 0 && this.$emit(e.type, e)
     },
 
-    __onMouseup (e) {
+    __onSelectionchange () {
       this.caret.save()
-      if (this.qListeners.mouseup !== void 0) {
-        this.$emit('mouseup', e)
-      }
-    },
-
-    __onKeyup (e) {
-      this.caret.save()
-      if (this.qListeners.keyup !== void 0) {
-        this.$emit('keyup', e)
-      }
-    },
-
-    __onTouchstart () {
-      this.__offsetBottom = void 0
-    },
-
-    __onTouchend (e) {
-      this.caret.save()
-      if (this.qListeners.touchend !== void 0) {
-        this.$emit('touchend', e)
-      }
     },
 
     runCmd (cmd, param, update = true) {
@@ -468,6 +449,12 @@ export default Vue.extend({
     this.caret = new Caret(this.$refs.content, this)
     this.__setContent(this.value)
     this.refreshToolbar()
+
+    document.addEventListener('selectionchange', this.__onSelectionchange)
+  },
+
+  beforeDestroy () {
+    document.removeEventListener('selectionchange', this.__onSelectionchange)
   },
 
   render (h) {
@@ -505,13 +492,8 @@ export default Vue.extend({
       focus: this.__onFocus,
 
       // clean saved scroll position
-      mousedown: this.__onMousedown,
-      touchstart: this.__onTouchstart,
-
-      // save caret
-      mouseup: this.__onMouseup,
-      keyup: this.__onKeyup,
-      touchend: this.__onTouchend
+      mousedown: this.__onPointerStart,
+      touchstart: this.__onPointerStart
     }
 
     return h('div', {

package/src/components/editor/editor-caret.js

@@ -198,7 +198,7 @@ export class Caret {
       return false
     }
 
-    if (el !== null && list.includes(el.nodeName.toLowerCase()) === true) {
+    if (list.includes(el.nodeName.toLowerCase()) === true) {
       return true
     }
 

package/src/components/field/QField.js

@@ -365,6 +365,7 @@ export default Vue.extend({
             ref: 'target',
             staticClass: 'q-field__native row',
             attrs: {
+              tabindex: -1,
               ...this.qAttrs,
               'data-autofocus': this.autofocus
             }

package/src/components/icon/QIcon.js

@@ -30,8 +30,15 @@ const matMap = {
   s_: '-sharp'
 }
 
+const symMap = {
+  sym_o_: '-outlined',
+  sym_r_: '-rounded',
+  sym_s_: '-sharp'
+}
+
 const libRE = new RegExp('^(' + Object.keys(libMap).join('|') + ')')
 const matRE = new RegExp('^(' + Object.keys(matMap).join('|') + ')')
+const symRE = new RegExp('^(' + Object.keys(symMap).join('|') + ')')
 const mRE = /^[Mm]\s?[-+]?\.?\d/
 const imgRE = /^img:/
 const svgUseRE = /^svguse:/
@@ -136,6 +143,22 @@ export default Vue.extend({
       else if (ionRE.test(icon) === true) {
         cls = `ionicons ion-${this.$q.platform.is.ios === true ? 'ios' : 'md'}${icon.substr(3)}`
       }
+      else if (symRE.test(icon) === true) {
+        // "notranslate" class is for Google Translate
+        // to avoid tampering with Material Symbols ligature font
+        //
+        // Caution: To be able to add suffix to the class name,
+        // keep the 'material-symbols' at the end of the string.
+        cls = 'notranslate material-symbols'
+
+        const matches = icon.match(symRE)
+        if (matches !== null) {
+          icon = icon.substring(6)
+          cls += symMap[ matches[ 1 ] ]
+        }
+
+        content = icon
+      }
       else {
         // "notranslate" class is for Google Translate
         // to avoid tampering with Material Icons ligature font
@@ -187,7 +210,7 @@ export default Vue.extend({
       return h('span', data, mergeSlot([
         h('svg', {
           attrs: {
-            viewBox: this.type.viewBox,
+            viewBox: this.type.viewBox || '0 0 24 24',
             focusable: 'false' /* needed for IE11 */
           }
         }, this.type.nodes)

package/src/components/icon/QIcon.sass

@@ -28,7 +28,10 @@
 .material-icons,
 .material-icons-outlined,
 .material-icons-round,
-.material-icons-sharp
+.material-icons-sharp,
+.material-symbols-outlined,
+.material-symbols-rounded,
+.material-symbols-sharp
   user-select: none
   cursor: inherit
   font-size: inherit

package/src/components/infinite-scroll/QInfiniteScroll.js

@@ -150,6 +150,16 @@ export default Vue.extend({
 
       if (this.isWorking === true) {
         this.__scrollTarget.addEventListener('scroll', this.poll, passive)
+
+        if (this.reverse === true) {
+          const
+            scrollHeight = getScrollHeight(this.__scrollTarget),
+            containerHeight = height(this.__scrollTarget)
+
+          setScrollPosition(this.__scrollTarget, scrollHeight - containerHeight)
+        }
+
+        this.immediatePoll()
       }
     },
 
@@ -181,16 +191,6 @@ export default Vue.extend({
     this.__setDebounce(this.debounce)
 
     this.updateScrollTarget()
-
-    if (this.reverse === true) {
-      const
-        scrollHeight = getScrollHeight(this.__scrollTarget),
-        containerHeight = height(this.__scrollTarget)
-
-      setScrollPosition(this.__scrollTarget, scrollHeight - containerHeight)
-    }
-
-    this.immediatePoll()
   },
 
   activated () {

package/src/components/input/QInput.js

@@ -285,13 +285,16 @@ export default Vue.extend({
       const inp = this.$refs.input
       if (inp !== void 0) {
         const parentStyle = inp.parentNode.style
+        const { overflow } = inp.style
 
         // reset height of textarea to a small size to detect the real height
         // but keep the total control size the same
         parentStyle.marginBottom = (inp.scrollHeight - 1) + 'px'
         inp.style.height = '1px'
+        inp.style.overflow = 'hidden'
 
         inp.style.height = inp.scrollHeight + 'px'
+        inp.style.overflow = overflow
         parentStyle.marginBottom = ''
       }
     },

package/src/components/layout/QLayout.js

@@ -137,6 +137,7 @@ export default Vue.extend({
     const layout = h('div', {
       class: this.classes,
       style: this.style,
+      attrs: { tabindex: -1 },
       on: { ...this.qListeners }
     }, mergeSlot([
       h(QScrollObserver, {

package/src/components/menu/QMenu.js

@@ -199,13 +199,14 @@ export default Vue.extend({
         }
 
         this.updatePosition()
-        this.__showPortal(true)
+        this.__showPortal(true) // done showing
         this.$emit('show', evt)
       }, 300)
     },
 
     __hide (evt) {
       this.__anchorCleanup(true)
+      this.__hidePortal()
 
       // check null for IE
       if (
@@ -225,7 +226,7 @@ export default Vue.extend({
       this.$el.dispatchEvent(create('popup-hide', { bubbles: true }))
 
       this.__setTimeout(() => {
-        this.__hidePortal()
+        this.__hidePortal(true) // done hiding, now destroy
         this.$emit('hide', evt)
       }, 300)
     },

package/src/components/select/QSelect.js

@@ -408,7 +408,7 @@ export default Vue.extend({
 
     virtualScrollItemSizeComputed () {
       return this.virtualScrollItemSize === void 0
-        ? (this.dense === true ? 24 : 48)
+        ? (this.optionsDense === true ? 24 : 48)
         : this.virtualScrollItemSize
     },
 

package/src/components/tooltip/QTooltip.js

@@ -106,9 +106,10 @@ export default Vue.extend({
 
     __hide (evt) {
       this.__anchorCleanup()
+      this.__hidePortal()
 
       this.__setTimeout(() => {
-        this.__hidePortal()
+        this.__hidePortal(true) // done hiding, now destroy
         this.$emit('hide', evt)
       }, 300)
     },

package/src/components/uploader/QUploaderBase.js

@@ -316,28 +316,32 @@ export default Vue.extend({
 
       return [
         h('div', {
-          staticClass: 'q-uploader__header-content flex flex-center no-wrap q-gutter-xs'
+          staticClass: 'q-uploader__header-content column'
         }, [
-          this.__getBtn(h, this.queuedFiles.length > 0, 'removeQueue', this.removeQueuedFiles),
-          this.__getBtn(h, this.uploadedFiles.length > 0, 'removeUploaded', this.removeUploadedFiles),
-
-          this.isUploading === true
-            ? h(QSpinner, { staticClass: 'q-uploader__spinner' })
-            : null,
-
-          h('div', { staticClass: 'col column justify-center' }, [
-            this.label !== void 0
-              ? h('div', { staticClass: 'q-uploader__title' }, [ this.label ])
+          h('div', {
+            staticClass: 'flex flex-center no-wrap q-gutter-xs'
+          }, [
+            this.__getBtn(h, this.queuedFiles.length > 0, 'removeQueue', this.removeQueuedFiles),
+            this.__getBtn(h, this.uploadedFiles.length > 0, 'removeUploaded', this.removeUploadedFiles),
+
+            this.isUploading === true
+              ? h(QSpinner, { staticClass: 'q-uploader__spinner' })
               : null,
 
-            h('div', { staticClass: 'q-uploader__subtitle' }, [
-              this.uploadSizeLabel + ' / ' + this.uploadProgressLabel
-            ])
-          ]),
+            h('div', { staticClass: 'col column justify-center' }, [
+              this.label !== void 0
+                ? h('div', { staticClass: 'q-uploader__title' }, [ this.label ])
+                : null,
+
+              h('div', { staticClass: 'q-uploader__subtitle' }, [
+                this.uploadSizeLabel + ' / ' + this.uploadProgressLabel
+              ])
+            ]),
 
-          this.__getBtn(h, this.canAddFiles, 'add', this.pickFiles),
-          this.__getBtn(h, this.hideUploadBtn === false && this.canUpload === true, 'upload', this.upload),
-          this.__getBtn(h, this.isUploading, 'clear', this.abort)
+            this.__getBtn(h, this.canAddFiles, 'add', this.pickFiles),
+            this.__getBtn(h, this.hideUploadBtn === false && this.canUpload === true, 'upload', this.upload),
+            this.__getBtn(h, this.isUploading, 'clear', this.abort)
+          ])
         ])
       ]
     },

package/src/components/video/QVideo.js

@@ -14,7 +14,20 @@ export default Vue.extend({
       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'
+    }
   },
 
   computed: {
@@ -24,7 +37,10 @@ export default Vue.extend({
           src: this.src,
           frameborder: '0',
           title: this.title,
-          allowfullscreen: true
+          allowfullscreen: true,
+          fetchpriority: this.fetchpriority,
+          loading: this.loading,
+          referrerpolicy: this.referrerpolicy
         }
       }
     },

package/src/components/video/QVideo.json

@@ -33,6 +33,42 @@
       ],
       "category": "accessibility",
       "addedIn": "v1.17.0"
+    },
+
+    "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": "v1.18.10"
+    },
+
+    "loading": {
+      "type": "String",
+      "desc": "Indicates how the browser should load the iframe",
+      "default": "eager",
+      "values": [ "eager", "lazy" ],
+      "category": "behavior",
+      "addedIn": "v1.18.10"
+    },
+
+    "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": "v1.18.10"
     }
   }
 }

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: 100% 50px #{"/* rtl:ignore */"}

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

@@ -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: 100% 50px /* rtl:ignore */

package/src/mixins/portal.js

@@ -79,9 +79,12 @@ const Portal = {
     __showPortal (isReady) {
       if (isReady === true) {
         removeFocusWaitFlag(this.focusObj)
+        this.__portalIsAccessible = true
         return
       }
 
+      this.__portalIsAccessible = false
+
       if (this.__portalIsActive === true) { return }
       this.__portalIsActive = true
 
@@ -118,7 +121,11 @@ const Portal = {
       }
     },
 
-    __hidePortal () {
+    __hidePortal (isReady) {
+      this.__portalIsAccessible = false
+
+      if (isReady !== true) { return }
+
       this.__portalIsActive = false
       removeFocusWaitFlag(this.focusObj)
 
@@ -170,7 +177,7 @@ const Portal = {
   },
 
   beforeDestroy () {
-    this.__hidePortal()
+    this.__hidePortal(true)
   }
 }
 

package/src/mixins/virtual-scroll.js

@@ -185,9 +185,7 @@ const commonVirtScrollProps = {
   tableColspan: [ Number, String ]
 }
 
-let id = 1
-
-function setOverflowAnchor (id, index) {
+function setOverflowAnchor (contentEl, index) {
   if (setOverflowAnchor.isSupported === void 0) {
     setOverflowAnchor.isSupported = window.getComputedStyle(document.body).overflowAnchor !== void 0
   }
@@ -196,21 +194,25 @@ function setOverflowAnchor (id, index) {
     return
   }
 
-  const ssId = id + '_ss'
+  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 = ''
+    }
+  })
 }
 
 export const commonVirtPropsList = Object.keys(commonVirtScrollProps)
@@ -223,8 +225,7 @@ export default {
 
   data () {
     return {
-      virtualScrollSliceRange: { from: 0, to: 0 },
-      id: 'qvs_' + id++
+      virtualScrollSliceRange: { from: 0, to: 0 }
     }
   },
 
@@ -423,7 +424,7 @@ export default {
         })
       }
 
-      setOverflowAnchor(this.id, toIndex - from + 1)
+      setOverflowAnchor(contentEl, toIndex - from)
 
       const sizeBefore = alignEnd !== void 0 ? this.virtualScrollSizes.slice(from, toIndex).reduce(sumFn, 0) : 0
 
@@ -643,7 +644,7 @@ export default {
           staticClass: 'q-virtual-scroll__content',
           key: 'content',
           ref: 'content',
-          attrs: { id: this.id, tabindex: -1 }
+          attrs: { tabindex: -1 }
         }, content),
 
         tag === 'tbody'
@@ -720,7 +721,5 @@ export default {
 
   beforeDestroy () {
     this.__onVirtualScrollEvt.cancel()
-    const styleSheet = document.getElementById(this.id + '_ss')
-    styleSheet !== null && styleSheet.remove()
   }
 }

package/src/utils/patterns.js

@@ -13,6 +13,13 @@ 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.
+  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),