quasar 2.16.11 → 2.17.1

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/time/QTime.sass

@@ -1,4 +1,4 @@
-@import '../../css/helpers/math.sass'
+@use 'sass:math'
 
 .q-time
   box-shadow: $shadow-2
@@ -129,8 +129,8 @@
     $left: (1 + cos($angle))
 
     &__clock-pos-#{$pos}
-      top: toFixed(percentage($top * 0.5), 100)
-      left: toFixed(percentage($left * 0.5), 100) #{"/* rtl:ignore */"}
+      top: toFixed(math.percentage($top * 0.5), 100)
+      left: toFixed(math.percentage($left * 0.5), 100) #{"/* rtl:ignore */"}
 
   @for $pos from 12 through 23
     $angle: (270 + 30 * $pos)
@@ -138,8 +138,8 @@
     $left: (1 + cos($angle))
 
     &__clock-pos-#{$pos}
-      top: toFixed(percentage(.15 + $top * .35), 100)
-      left: toFixed(percentage(.15 + $left * .35), 100) #{"/* rtl:ignore */"}
+      top: toFixed(math.percentage(.15 + $top * .35), 100)
+      left: toFixed(math.percentage(.15 + $left * .35), 100) #{"/* rtl:ignore */"}
 
   &__now-button
     background-color: var(--q-primary)

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-key-composition/use-key-composition.js

@@ -1,3 +1,10 @@
+import { client } from '../../plugins/platform/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') {
@@ -5,8 +12,18 @@ export default function (onInput) {
       e.target.qComposing = false
       onInput(e)
     }
-    else if (e.type === 'compositionstart') {
-      e.target.qComposing = true
+    else if (
+      e.type === 'compositionupdate'
+      && e.target.qComposing !== true
+      && typeof e.data === 'string'
+    ) {
+      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
+      }
     }
   }
 }

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/core/elevation.sass

@@ -1,11 +1,13 @@
+@use 'sass:list'
+
 .shadow-transition
   transition: $shadow-transition !important
 
 @for $z from 1 through 24
   .shadow-#{$z}
-    box-shadow: nth($shadows, $z)
+    box-shadow: list.nth($shadows, $z)
   .shadow-up-#{$z}
-    box-shadow: nth($shadows-up, $z)
+    box-shadow: list.nth($shadows-up, $z)
 
 .inset-shadow
   box-shadow: $inset-shadow
@@ -15,9 +17,9 @@
 body.body--dark
   @for $z from 1 through 24
     .shadow-#{$z}
-      box-shadow: nth($dark-shadows, $z)
+      box-shadow: list.nth($dark-shadows, $z)
     .shadow-up-#{$z}
-      box-shadow: nth($dark-shadows-up, $z)
+      box-shadow: list.nth($dark-shadows-up, $z)
 
   .inset-shadow
     box-shadow: $inset-dark-shadow