quasar 2.16.11 → 2.17.0

package/src/components/spinner/QSpinnerPuff.js

@@ -1,69 +1,9 @@
 import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
-
 import { createComponent } from '../../utils/private.create/create.js'
 
-const createSvg = () => [
-  h('g', {
-    fill: 'none',
-    'fill-rule': 'evenodd',
-    'stroke-width': '2'
-  }, [
-    h('circle', {
-      cx: '22',
-      cy: '22',
-      r: '1'
-    }, [
-      h('animate', {
-        attributeName: 'r',
-        begin: '0s',
-        dur: '1.8s',
-        values: '1; 20',
-        calcMode: 'spline',
-        keyTimes: '0; 1',
-        keySplines: '0.165, 0.84, 0.44, 1',
-        repeatCount: 'indefinite'
-      }),
-      h('animate', {
-        attributeName: 'stroke-opacity',
-        begin: '0s',
-        dur: '1.8s',
-        values: '1; 0',
-        calcMode: 'spline',
-        keyTimes: '0; 1',
-        keySplines: '0.3, 0.61, 0.355, 1',
-        repeatCount: 'indefinite'
-      })
-    ]),
-    h('circle', {
-      cx: '22',
-      cy: '22',
-      r: '1'
-    }, [
-      h('animate', {
-        attributeName: 'r',
-        begin: '-0.9s',
-        dur: '1.8s',
-        values: '1; 20',
-        calcMode: 'spline',
-        keyTimes: '0; 1',
-        keySplines: '0.165, 0.84, 0.44, 1',
-        repeatCount: 'indefinite'
-      }),
-      h('animate', {
-        attributeName: 'stroke-opacity',
-        begin: '-0.9s',
-        dur: '1.8s',
-        values: '1; 0',
-        calcMode: 'spline',
-        keyTimes: '0; 1',
-        keySplines: '0.3, 0.61, 0.355, 1',
-        repeatCount: 'indefinite'
-      })
-    ])
-  ])
-]
+const innerHTML = '<g fill="none" fill-rule="evenodd" stroke-width="2"><circle cx="22" cy="22" r="1"><animate attributeName="r" begin="0s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" begin="0s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite"></animate></circle><circle cx="22" cy="22" r="1"><animate attributeName="r" begin="-0.9s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" begin="-0.9s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite"></animate></circle></g>'
 
 export default createComponent({
   name: 'QSpinnerPuff',
@@ -72,15 +12,14 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
-    const svg = createSvg()
-
     return () => h('svg', {
       class: classes.value,
       stroke: 'currentColor',
       width: cSize.value,
       height: cSize.value,
       viewBox: '0 0 44 44',
-      xmlns: 'http://www.w3.org/2000/svg'
-    }, svg)
+      xmlns: 'http://www.w3.org/2000/svg',
+      innerHTML
+    })
   }
 })

package/src/components/spinner/QSpinnerRadio.js

@@ -1,62 +1,9 @@
 import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
-
 import { createComponent } from '../../utils/private.create/create.js'
 
-const createSvg = () => [
-  h('g', {
-    transform: 'scale(0.55)'
-  }, [
-    h('circle', {
-      cx: '30',
-      cy: '150',
-      r: '30',
-      fill: 'currentColor'
-    }, [
-      h('animate', {
-        attributeName: 'opacity',
-        from: '0',
-        to: '1',
-        dur: '1s',
-        begin: '0',
-        repeatCount: 'indefinite',
-        keyTimes: '0;0.5;1',
-        values: '0;1;1'
-      })
-    ]),
-    h('path', {
-      d: 'M90,150h30c0-49.7-40.3-90-90-90v30C63.1,90,90,116.9,90,150z',
-      fill: 'currentColor'
-    }, [
-      h('animate', {
-        attributeName: 'opacity',
-        from: '0',
-        to: '1',
-        dur: '1s',
-        begin: '0.1',
-        repeatCount: 'indefinite',
-        keyTimes: '0;0.5;1',
-        values: '0;1;1'
-      })
-    ]),
-    h('path', {
-      d: 'M150,150h30C180,67.2,112.8,0,30,0v30C96.3,30,150,83.7,150,150z',
-      fill: 'currentColor'
-    }, [
-      h('animate', {
-        attributeName: 'opacity',
-        from: '0',
-        to: '1',
-        dur: '1s',
-        begin: '0.2',
-        repeatCount: 'indefinite',
-        keyTimes: '0;0.5;1',
-        values: '0;1;1'
-      })
-    ])
-  ])
-]
+const innerHTML = '<g transform="scale(0.55)"><circle cx="30" cy="150" r="30" fill="currentColor"><animate attributeName="opacity" from="0" to="1" dur="1s" begin="0" repeatCount="indefinite" keyTimes="0;0.5;1" values="0;1;1"></animate></circle><path d="M90,150h30c0-49.7-40.3-90-90-90v30C63.1,90,90,116.9,90,150z" fill="currentColor"><animate attributeName="opacity" from="0" to="1" dur="1s" begin="0.1" repeatCount="indefinite" keyTimes="0;0.5;1" values="0;1;1"></animate></path><path d="M150,150h30C180,67.2,112.8,0,30,0v30C96.3,30,150,83.7,150,150z" fill="currentColor"><animate attributeName="opacity" from="0" to="1" dur="1s" begin="0.2" repeatCount="indefinite" keyTimes="0;0.5;1" values="0;1;1"></animate></path></g>'
 
 export default createComponent({
   name: 'QSpinnerRadio',
@@ -65,15 +12,14 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
-    const svg = createSvg()
-
     return () => h('svg', {
       class: classes.value,
       width: cSize.value,
       height: cSize.value,
       viewBox: '0 0 100 100',
       preserveAspectRatio: 'xMidYMid',
-      xmlns: 'http://www.w3.org/2000/svg'
-    }, svg)
+      xmlns: 'http://www.w3.org/2000/svg',
+      innerHTML
+    })
   }
 })

package/src/components/spinner/QSpinnerRings.js

@@ -1,92 +1,9 @@
 import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
-
 import { createComponent } from '../../utils/private.create/create.js'
 
-const createSvg = () => [
-  h('g', {
-    fill: 'none',
-    'fill-rule': 'evenodd',
-    transform: 'translate(1 1)',
-    'stroke-width': '2'
-  }, [
-    h('circle', {
-      cx: '22',
-      cy: '22',
-      r: '6'
-    }, [
-      h('animate', {
-        attributeName: 'r',
-        begin: '1.5s',
-        dur: '3s',
-        values: '6;22',
-        calcMode: 'linear',
-        repeatCount: 'indefinite'
-      }),
-      h('animate', {
-        attributeName: 'stroke-opacity',
-        begin: '1.5s',
-        dur: '3s',
-        values: '1;0',
-        calcMode: 'linear',
-        repeatCount: 'indefinite'
-      }),
-      h('animate', {
-        attributeName: 'stroke-width',
-        begin: '1.5s',
-        dur: '3s',
-        values: '2;0',
-        calcMode: 'linear',
-        repeatCount: 'indefinite'
-      })
-    ]),
-    h('circle', {
-      cx: '22',
-      cy: '22',
-      r: '6'
-    }, [
-      h('animate', {
-        attributeName: 'r',
-        begin: '3s',
-        dur: '3s',
-        values: '6;22',
-        calcMode: 'linear',
-        repeatCount: 'indefinite'
-      }),
-      h('animate', {
-        attributeName: 'stroke-opacity',
-        begin: '3s',
-        dur: '3s',
-        values: '1;0',
-        calcMode: 'linear',
-        repeatCount: 'indefinite'
-      }),
-      h('animate', {
-        attributeName: 'stroke-width',
-        begin: '3s',
-        dur: '3s',
-        values: '2;0',
-        calcMode: 'linear',
-        repeatCount: 'indefinite'
-      })
-    ]),
-    h('circle', {
-      cx: '22',
-      cy: '22',
-      r: '8'
-    }, [
-      h('animate', {
-        attributeName: 'r',
-        begin: '0s',
-        dur: '1.5s',
-        values: '6;1;2;3;4;5;6',
-        calcMode: 'linear',
-        repeatCount: 'indefinite'
-      })
-    ])
-  ])
-]
+const innerHTML = '<g fill="none" fill-rule="evenodd" transform="translate(1 1)" stroke-width="2"><circle cx="22" cy="22" r="6"><animate attributeName="r" begin="1.5s" dur="3s" values="6;22" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" begin="1.5s" dur="3s" values="1;0" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="stroke-width" begin="1.5s" dur="3s" values="2;0" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="22" cy="22" r="6"><animate attributeName="r" begin="3s" dur="3s" values="6;22" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" begin="3s" dur="3s" values="1;0" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="stroke-width" begin="3s" dur="3s" values="2;0" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="22" cy="22" r="8"><animate attributeName="r" begin="0s" dur="1.5s" values="6;1;2;3;4;5;6" calcMode="linear" repeatCount="indefinite"></animate></circle></g>'
 
 export default createComponent({
   name: 'QSpinnerRings',
@@ -95,15 +12,14 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
-    const svg = createSvg()
-
     return () => h('svg', {
       class: classes.value,
       stroke: 'currentColor',
       width: cSize.value,
       height: cSize.value,
       viewBox: '0 0 45 45',
-      xmlns: 'http://www.w3.org/2000/svg'
-    }, svg)
+      xmlns: 'http://www.w3.org/2000/svg',
+      innerHTML
+    })
   }
 })

package/src/components/spinner/QSpinnerTail.js

@@ -1,70 +1,9 @@
 import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
-
 import { createComponent } from '../../utils/private.create/create.js'
 
-const createSvg = () => [
-  h('defs', [
-    h('linearGradient', {
-      x1: '8.042%',
-      y1: '0%',
-      x2: '65.682%',
-      y2: '23.865%',
-      id: 'a'
-    }, [
-      h('stop', {
-        'stop-color': 'currentColor',
-        'stop-opacity': '0',
-        offset: '0%'
-      }),
-      h('stop', {
-        'stop-color': 'currentColor',
-        'stop-opacity': '.631',
-        offset: '63.146%'
-      }),
-      h('stop', {
-        'stop-color': 'currentColor',
-        offset: '100%'
-      })
-    ])
-  ]),
-  h('g', {
-    transform: 'translate(1 1)',
-    fill: 'none',
-    'fill-rule': 'evenodd'
-  }, [
-    h('path', {
-      d: 'M36 18c0-9.94-8.06-18-18-18',
-      stroke: 'url(#a)',
-      'stroke-width': '2'
-    }, [
-      h('animateTransform', {
-        attributeName: 'transform',
-        type: 'rotate',
-        from: '0 18 18',
-        to: '360 18 18',
-        dur: '0.9s',
-        repeatCount: 'indefinite'
-      })
-    ]),
-    h('circle', {
-      fill: 'currentColor',
-      cx: '36',
-      cy: '18',
-      r: '1'
-    }, [
-      h('animateTransform', {
-        attributeName: 'transform',
-        type: 'rotate',
-        from: '0 18 18',
-        to: '360 18 18',
-        dur: '0.9s',
-        repeatCount: 'indefinite'
-      })
-    ])
-  ])
-]
+const innerHTML = '<defs><linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a"><stop stop-color="currentColor" stop-opacity="0" offset="0%"></stop><stop stop-color="currentColor" stop-opacity=".631" offset="63.146%"></stop><stop stop-color="currentColor" offset="100%"></stop></linearGradient></defs><g transform="translate(1 1)" fill="none" fill-rule="evenodd"><path d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" stroke-width="2"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite"></animateTransform></path><circle fill="currentColor" cx="36" cy="18" r="1"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite"></animateTransform></circle></g>'
 
 export default createComponent({
   name: 'QSpinnerTail',
@@ -73,14 +12,13 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
-    const svg = createSvg()
-
     return () => h('svg', {
       class: classes.value,
       width: cSize.value,
       height: cSize.value,
       viewBox: '0 0 38 38',
-      xmlns: 'http://www.w3.org/2000/svg'
-    }, svg)
+      xmlns: 'http://www.w3.org/2000/svg',
+      innerHTML
+    })
   }
 })

package/src/components/tabs/QRouteTab.js

@@ -30,9 +30,10 @@ export default createComponent({
       }
     )
 
-    watch(() => `${ props.name } | ${ props.exact } | ${ (routeData.resolvedLink.value || {}).href }`, () => {
-      $tabs.verifyRouteModel()
-    })
+    watch(
+      () => `${ props.name } | ${ props.exact } | ${ (routeData.resolvedLink.value || {}).href }`,
+      $tabs.verifyRouteModel
+    )
 
     return () => renderTab(routeData.linkTag.value, routeData.linkAttrs.value)
   }

package/src/components/tabs/QTabs.js

@@ -160,18 +160,18 @@ export default createComponent({
     watch(() => props.outsideArrows, recalculateScroll)
 
     function updateModel ({ name, setCurrent, skipEmit }) {
-      if (currentModel.value !== name) {
-        if (skipEmit !== true && props[ 'onUpdate:modelValue' ] !== void 0) {
-          emit('update:modelValue', name)
-        }
+      if (currentModel.value === name) return
 
-        if (
-          setCurrent === true
-          || props[ 'onUpdate:modelValue' ] === void 0
-        ) {
-          animate(currentModel.value, name)
-          currentModel.value = name
-        }
+      if (skipEmit !== true && props[ 'onUpdate:modelValue' ] !== void 0) {
+        emit('update:modelValue', name)
+      }
+
+      if (
+        setCurrent === true
+        || props[ 'onUpdate:modelValue' ] === void 0
+      ) {
+        animate(currentModel.value, name)
+        currentModel.value = name
       }
     }
 
@@ -219,7 +219,13 @@ export default createComponent({
           ? tabDataList.find(tab => tab.name.value === newName)
           : null
 
-      if (oldTab && newTab) {
+      if (hadActivated === true) {
+        // After the component has been re-activated
+        // we should not animate the transition.
+        // Consider it as if the component has just been mounted.
+        hadActivated = false
+      }
+      else if (oldTab && newTab) {
         const
           oldEl = oldTab.tabIndicatorRef.value,
           newEl = newTab.tabIndicatorRef.value
@@ -413,7 +419,8 @@ export default createComponent({
       return true
     }
 
-    // do not use directly; use verifyRouteModel() instead
+    // 1. Do not use directly; use verifyRouteModel() instead
+    // 2. Should set hadActivated to false upon exit
     function updateActiveRoute () {
       let name = null, bestScore = { matchedLen: 0, queryDiff: 9999, hrefLen: 0 }
 
@@ -506,6 +513,7 @@ export default createComponent({
         && tabDataList.some(tab => tab.routeData === void 0 && tab.name.value === currentModel.value) === true
       ) {
         // we shouldn't interfere if non-route tab is active
+        hadActivated = false
         return
       }
 
@@ -627,7 +635,7 @@ export default createComponent({
       unwatchRoute !== void 0 && unwatchRoute()
     }
 
-    let hadRouteWatcher
+    let hadRouteWatcher, hadActivated
 
     onBeforeUnmount(cleanup)
 
@@ -637,7 +645,12 @@ export default createComponent({
     })
 
     onActivated(() => {
-      hadRouteWatcher === true && watchRoute()
+      if (hadRouteWatcher === true) {
+        watchRoute()
+        hadActivated = true
+        verifyRouteModel()
+      }
+
       recalculateScroll()
     })
 

package/src/components/tooltip/QTooltip.sass

@@ -12,6 +12,8 @@
   overflow-y: auto
   overflow-x: hidden
   padding: $tooltip-padding
+  max-width: $tooltip-max-width // required by the position-engine
+  max-height: $tooltip-max-height // required by the position-engine
 
   @media (max-width: $breakpoint-xs-max)
     font-size: $tooltip-mobile-fontsize

package/src/components/uploader/QUploader.json

@@ -55,6 +55,15 @@
       "category": "behavior"
     },
 
+    "thumbnail-fit": {
+      "type": "String",
+      "desc": "How the thumbnail image will fit into the container; Equivalent of the background-size prop",
+      "default": "'cover'",
+      "examples": [ "'cover'", "'contain'", "'auto'", "'50%'" ],
+      "category": "style",
+      "addedIn": "v2.17"
+    },
+
     "disable": {
       "extends": "disable"
     },

package/src/components/uploader/QUploader.sass

@@ -81,7 +81,6 @@
       height: 200px
       min-width: 200px
       background-position: 50% 50%
-      background-size: cover
       background-repeat: no-repeat
 
       &:before

package/src/components/uploader/uploader-core.js

@@ -32,9 +32,13 @@ export const coreProps = {
   bordered: Boolean,
 
   noThumbnails: Boolean,
+  thumbnailFit: {
+    type: String,
+    default: 'cover'
+  },
+
   autoUpload: Boolean,
   hideUploadBtn: Boolean,
-
   disable: Boolean,
   readonly: Boolean
 }
@@ -389,7 +393,7 @@ export function getRenderer (getPlugin, expose) {
             : (file.__status === 'uploaded' ? ' q-uploader__file--uploaded' : '')
         ),
       style: props.noThumbnails !== true && file.__img !== void 0
-        ? { backgroundImage: 'url("' + file.__img.src + '")' }
+        ? { backgroundImage: 'url("' + file.__img.src + '")', backgroundSize: props.thumbnailFit }
         : null
     }, [
       h('div', {

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

@@ -1,8 +1,9 @@
-import { h, ref, computed, watch, nextTick, getCurrentInstance, Transition, KeepAlive } from 'vue'
+import { h, ref, computed, watch, getCurrentInstance, Transition, KeepAlive } from 'vue'
 
 import TouchSwipe from '../../directives/touch-swipe/TouchSwipe.js'
 
 import useRenderCache from '../../composables/use-render-cache/use-render-cache.js'
+import useTimeout from '../../composables/use-timeout/use-timeout.js'
 
 import { hSlot } from '../../utils/private.render/render.js'
 import { getNormalizedVNodes } from '../../utils/private.vm/vm.js'
@@ -49,6 +50,7 @@ export const usePanelEmits = [ 'update:modelValue', 'beforeTransition', 'transit
 export default function () {
   const { props, emit, proxy } = getCurrentInstance()
   const { getCache } = useRenderCache()
+  const { registerTimeout } = useTimeout()
 
   let panels, forcedPanelTransition
 
@@ -117,9 +119,9 @@ export default function () {
     if (panelIndex.value !== index) {
       panelIndex.value = index
       emit('beforeTransition', newVal, oldVal)
-      nextTick(() => {
+      registerTimeout(() => {
         emit('transition', newVal, oldVal)
-      })
+      }, props.transitionDuration)
     }
   })
 

package/src/css/variables.sass

@@ -704,6 +704,7 @@ $menu-background                          : #fff !default
 $menu-box-shadow                          : $shadow-2 !default
 $menu-box-shadow-dark                     : $dark-shadow-2 !default
 $menu-max-width                           : 95vw !default
+$menu-max-height                          : 65vh !default
 
 $rating-grade-color                       : $yellow !default
 $rating-shadow                            : 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !default
@@ -715,6 +716,8 @@ $tooltip-border-radius                    : $generic-border-radius !default
 $tooltip-fontsize                         : 10px !default
 $tooltip-mobile-padding                   : 8px 16px !default
 $tooltip-mobile-fontsize                  : 14px !default
+$tooltip-max-width                        : 95vw !default
+$tooltip-max-height                       : 65vh !default
 
 $uploader-title-font-size                 : 14px !default
 $uploader-title-line-height               : 1.285714 !default

package/src/plugins/platform/Platform.js

@@ -65,11 +65,46 @@ const hasTouch = __QUASAR_SSR_SERVER__
   : 'ontouchstart' in window || window.navigator.maxTouchPoints > 0
 
 function getPlatform (UA) {
-  const
-    userAgent = UA.toLowerCase(),
-    platformMatch = getPlatformMatch(userAgent),
-    matched = getMatch(userAgent, platformMatch),
-    browser = {}
+  const userAgent = UA.toLowerCase()
+  const platformMatch = getPlatformMatch(userAgent)
+  const matched = getMatch(userAgent, platformMatch)
+  const browser = {
+    mobile: false,
+    desktop: false,
+
+    cordova: false,
+    capacitor: false,
+    nativeMobile: false,
+    // nativeMobileWrapper: void 0,
+    electron: false,
+    bex: false,
+
+    linux: false,
+    mac: false,
+    win: false,
+    cros: false,
+
+    chrome: false,
+    firefox: false,
+    opera: false,
+    safari: false,
+    vivaldi: false,
+    edge: false,
+    edgeChromium: false,
+    ie: false,
+    webkit: false,
+
+    android: false,
+    ios: false,
+    ipad: false,
+    iphone: false,
+    ipod: false,
+    kindle: false,
+    winphone: false,
+    blackberry: false,
+    playbook: false,
+    silk: false
+  }
 
   if (matched.browser) {
     browser[ matched.browser ] = true