quasar 1.22.4 → 1.22.6

package/dist/types/index.d.ts

@@ -81,6 +81,10 @@ export interface BottomSheet {
                      * CSS classes for this action
                      */
                     classes? : string | any[] | LooseDictionary
+                    /**
+                     * Style definitions to be attributed to this action element
+                     */
+                    style? : string | any[] | LooseDictionary
                     /**
                      * Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
                      */
@@ -3905,6 +3909,10 @@ export interface QImg extends Vue {
      * Enable the native context menu of the image
      */
     nativeContextMenu? : boolean
+    /**
+     * Make the native img not-draggable (to allow swipe in QCarousel) - only has meaning when `native-context-menu` is used
+     */
+    notDraggable? : boolean
 }
 
 export interface QInfiniteScroll extends Vue {
@@ -8792,6 +8800,10 @@ export interface QVueGlobals {
                      * CSS classes for this action
                      */
                     classes? : string | any[] | LooseDictionary
+                    /**
+                     * Style definitions to be attributed to this action element
+                     */
+                    style? : string | any[] | LooseDictionary
                     /**
                      * Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
                      */

package/dist/vetur/quasar-attributes.json

@@ -2367,6 +2367,10 @@
     "type": "boolean",
     "description": "Enable the native context menu of the image"
   },
+  "q-img/not-draggable": {
+    "type": "boolean",
+    "description": "Make the native img not-draggable (to allow swipe in QCarousel) - only has meaning when `native-context-menu` is used"
+  },
   "q-infinite-scroll/offset": {
     "type": "number",
     "description": "Offset (pixels) to bottom of Infinite Scroll container from which the component should start loading more content in advance"

package/dist/vetur/quasar-tags.json

@@ -767,7 +767,8 @@
       "spinner-color",
       "spinner-size",
       "no-default-spinner",
-      "native-context-menu"
+      "native-context-menu",
+      "not-draggable"
     ],
     "description": ""
   },

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

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "1.22.4",
+  "version": "1.22.6",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -2573,7 +2573,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "URL pointing to a slide background image (use public folder)\n\nExamples:\n(public folder) src=\"img/my-bg.png\"\n(assets folder) src=\"~assets/my-img.png\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://placeimg.com/500/300/nature\"",
+              "description": "URL pointing to a slide background image (use public folder)\n\nExamples:\n(public folder) src=\"img/my-bg.png\"\n(assets folder) src=\"~assets/my-img.png\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://picsum.photos/500/300\"",
               "doc-url": "https://v1.quasar.dev/vue-components/carousel"
             }
           ],
@@ -2646,7 +2646,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "URL to the avatar image of the author\n\nExamples:\n(public folder) src=\"boy-avatar.png\"\n(assets folder) src=\"~assets/boy-avatar.png\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://placeimg.com/500/300/nature\"",
+              "description": "URL to the avatar image of the author\n\nExamples:\n(public folder) src=\"boy-avatar.png\"\n(assets folder) src=\"~assets/boy-avatar.png\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://picsum.photos/500/300\"",
               "doc-url": "https://v1.quasar.dev/vue-components/chat"
             },
             {
@@ -7663,7 +7663,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "Path to image\n\nExamples:\n(public folder) src=\"img/something.png\"\n(assets folder) src=\"~assets/my-img.gif\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://placeimg.com/500/300/nature\"",
+              "description": "Path to image\n\nExamples:\n(public folder) src=\"img/something.png\"\n(assets folder) src=\"~assets/my-img.gif\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://picsum.photos/500/300\"",
               "doc-url": "https://v1.quasar.dev/vue-components/img"
             },
             {
@@ -7717,7 +7717,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "While waiting for your image to load, you can use a placeholder image\n\nExamples:\n(public folder) src=\"img/some-placeholder.png\"\n(assets folder) src=\"~assets/my-placeholder.gif\"\n(relative path format) :src=\"require('./placeholder.jpg')\"\n(URL) src=\"https://placeimg.com/500/300/nature\"",
+              "description": "While waiting for your image to load, you can use a placeholder image\n\nExamples:\n(public folder) src=\"img/some-placeholder.png\"\n(assets folder) src=\"~assets/my-placeholder.gif\"\n(relative path format) :src=\"require('./placeholder.jpg')\"\n(URL) src=\"https://picsum.photos/500/300\"",
               "doc-url": "https://v1.quasar.dev/vue-components/img"
             },
             {
@@ -7815,6 +7815,16 @@
               "description": "Enable the native context menu of the image",
               "doc-url": "https://v1.quasar.dev/vue-components/img",
               "type": "boolean"
+            },
+            {
+              "name": "not-draggable",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "description": "Make the native img not-draggable (to allow swipe in QCarousel) - only has meaning when `native-context-menu` is used",
+              "doc-url": "https://v1.quasar.dev/vue-components/img",
+              "type": "boolean"
             }
           ],
           "events": [
@@ -19308,7 +19318,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "URL to the avatar image; Icon takes precedence if used, so it replaces avatar\n\nExamples:\n(public folder) src=\"img/my-bg.png\"\n(assets folder) src=\"~assets/my-img.png\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://placeimg.com/500/300/nature\"",
+              "description": "URL to the avatar image; Icon takes precedence if used, so it replaces avatar\n\nExamples:\n(public folder) src=\"img/my-bg.png\"\n(assets folder) src=\"~assets/my-img.png\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://picsum.photos/500/300\"",
               "doc-url": "https://v1.quasar.dev/vue-components/timeline"
             },
             {

package/lang/sl.js

@@ -3,7 +3,7 @@ export default {
   nativeName: 'Slovenski Jezik',
   label: {
     clear: 'Počisti',
-    ok: 'Vredu',
+    ok: 'V redu',
     cancel: 'Prekliči',
     close: 'Zapri',
     set: 'Postavi',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "1.22.4",
+  "version": "1.22.6",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "module": "src/index.esm.js",
   "typings": "dist/types/index.d.ts",

package/src/components/carousel/QCarouselSlide.json

@@ -26,7 +26,7 @@
         "(public folder) src=\"img/my-bg.png\"",
         "(assets folder) src=\"~assets/my-img.png\"",
         "(relative path format) :src=\"require('./my_img.jpg')\"",
-        "(URL) src=\"https://placeimg.com/500/300/nature\""
+        "(URL) src=\"https://picsum.photos/500/300\""
       ],
       "category": "model"
     }

package/src/components/chat/QChatMessage.json

@@ -48,7 +48,7 @@
         "(public folder) src=\"boy-avatar.png\"",
         "(assets folder) src=\"~assets/boy-avatar.png\"",
         "(relative path format) :src=\"require('./my_img.jpg')\"",
-        "(URL) src=\"https://placeimg.com/500/300/nature\""
+        "(URL) src=\"https://picsum.photos/500/300\""
       ],
       "category": "content"
     },

package/src/components/date/QDate.js

@@ -96,8 +96,8 @@ export default Vue.extend({
         this.lastEmitValue = 0
       }
       else {
-        const { year, month } = this.__getViewModel(this.innerMask, this.innerLocale)
-        this.__updateViewModel(year, month)
+        const model = this.__getViewModel(this.innerMask, this.innerLocale)
+        this.__updateViewModel(model.year, model.month, model)
       }
     },
 
@@ -1265,7 +1265,7 @@ export default Vue.extend({
       }
     },
 
-    __updateViewModel (year, month) {
+    __updateViewModel (year, month, time) {
       if (this.minNav !== void 0 && year <= this.minNav.year) {
         year = this.minNav.year
         if (month < this.minNav.month) {
@@ -1280,6 +1280,11 @@ export default Vue.extend({
         }
       }
 
+      if (time !== void 0) {
+        const { hour, minute, second, millisecond, timezoneOffset, timeHash } = time
+        Object.assign(this.viewModel, { hour, minute, second, millisecond, timezoneOffset, timeHash })
+      }
+
       const newHash = year + '/' + pad(month) + '/01'
 
       if (newHash !== this.viewModel.dateHash) {

package/src/components/dialog/QDialog.js

@@ -372,7 +372,7 @@ export default Vue.extend({
             staticClass: 'q-dialog__backdrop fixed-full',
             attrs: backdropAttrs,
             on: cache(this, 'bkdrop', {
-              [ this.$q.platform.is.ios === true ? 'click' : 'focusin' ]: this.__onBackdropClick
+              [ this.backdropEvt ]: this.__onBackdropClick
             })
           })
         ] : null),
@@ -395,6 +395,7 @@ export default Vue.extend({
   created () {
     this.__useTick('__registerTick', '__removeTick')
     this.__useTimeout('__registerTimeout')
+    this.backdropEvt = this.$q.platform.is.ios === true || this.$q.platform.is.safari ? 'click' : 'focusin'
   },
 
   mounted () {

package/src/components/dialog-bottom-sheet/BottomSheet.js

@@ -76,6 +76,7 @@ export default Vue.extend({
           : h('div', {
             staticClass: 'q-bottom-sheet__item q-hoverable q-focusable cursor-pointer relative-position',
             class: action.classes,
+            style: action.style,
             attrs: attrsGridItem,
             on: {
               click: () => {
@@ -113,6 +114,7 @@ export default Vue.extend({
           : h(QItem, {
             staticClass: 'q-bottom-sheet__item',
             class: action.classes,
+            style: action.style,
             props: {
               tabindex: 0,
               clickable: true,

package/src/components/img/QImg.js

@@ -38,6 +38,7 @@ export default Vue.extend({
     imgStyle: Object,
 
     nativeContextMenu: Boolean,
+    notDraggable: Boolean,
 
     noDefaultSpinner: Boolean,
     spinnerColor: String,
@@ -77,6 +78,14 @@ export default Vue.extend({
       return att
     },
 
+    imgAttrs () {
+      const att = { src: this.url, 'aria-hidden': 'true' }
+      if (this.notDraggable === true) {
+        att.draggable = false
+      }
+      return att
+    },
+
     imgContainerStyle () {
       return Object.assign(
         {
@@ -228,7 +237,7 @@ export default Vue.extend({
         ? [
           h('img', {
             staticClass: 'absolute-full fit',
-            attrs: { src: this.url, 'aria-hidden': 'true' }
+            attrs: this.imgAttrs
           })
         ]
         : void 0

package/src/components/img/QImg.json

@@ -18,7 +18,7 @@
         "(public folder) src=\"img/something.png\"",
         "(assets folder) src=\"~assets/my-img.gif\"",
         "(relative path format) :src=\"require('./my_img.jpg')\"",
-        "(URL) src=\"https://placeimg.com/500/300/nature\""
+        "(URL) src=\"https://picsum.photos/500/300\""
       ],
       "category": "model"
     },
@@ -80,7 +80,7 @@
         "(public folder) src=\"img/some-placeholder.png\"",
         "(assets folder) src=\"~assets/my-placeholder.gif\"",
         "(relative path format) :src=\"require('./placeholder.jpg')\"",
-        "(URL) src=\"https://placeimg.com/500/300/nature\""
+        "(URL) src=\"https://picsum.photos/500/300\""
       ],
       "category": "model"
     },
@@ -163,6 +163,13 @@
       "desc": "Enable the native context menu of the image",
       "category": "behavior",
       "addedIn": "v1.8.4"
+    },
+
+    "not-draggable": {
+      "type": "Boolean",
+      "desc": "Make the native img not-draggable (to allow swipe in QCarousel) - only has meaning when `native-context-menu` is used",
+      "category": "behavior",
+      "addedIn": "v1.22.6"
     }
   },
 

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

@@ -44,6 +44,12 @@ export default Vue.extend({
     }
   },
 
+  computed: {
+    renderLoadingSlot () {
+      return this.disable !== true && this.isWorking === true
+    }
+  },
+
   watch: {
     disable (val) {
       if (val === true) { this.stop() }
@@ -62,6 +68,14 @@ export default Vue.extend({
 
     debounce (val) {
       this.__setDebounce(val)
+    },
+
+    isFetching () {
+      this.__updateSvgAnimations()
+    },
+
+    renderLoadingSlot () {
+      this.__updateSvgAnimations()
     }
   },
 
@@ -183,14 +197,34 @@ export default Vue.extend({
 
         this.__scrollTarget.addEventListener('scroll', this.poll, passive)
       }
+    },
+
+    __updateSvgAnimations (isRetry) {
+      if (this.renderLoadingSlot === true) {
+        const el = this.$refs.loading
+
+        if (!el) {
+          isRetry !== true && this.$nextTick(() => {
+            this.__updateSvgAnimations(true)
+          })
+          return
+        }
+
+        // we need to pause svg animations (if any) when hiding
+        // otherwise the browser will keep on recalculating the style
+        const action = `${ this.isFetching === true ? 'un' : '' }pauseAnimations`
+        Array.from(el.getElementsByTagName('svg')).forEach(el => {
+          el[ action ]()
+        })
+      }
     }
   },
 
   mounted () {
     this.immediatePoll = this.poll
     this.__setDebounce(this.debounce)
-
     this.updateScrollTarget()
+    this.isFetching === false && this.__updateSvgAnimations()
   },
 
   activated () {
@@ -212,9 +246,10 @@ export default Vue.extend({
   render (h) {
     const child = uniqueSlot(this, 'default', [])
 
-    if (this.disable !== true && this.isWorking === true) {
+    if (this.renderLoadingSlot === true) {
       child[this.reverse === false ? 'push' : 'unshift'](
         h('div', {
+          ref: 'loading',
           staticClass: 'q-infinite-scroll__loading',
           class: this.isFetching === true ? '' : 'invisible'
         }, slot(this, 'loading'))

package/src/components/layout/QLayout.sass

@@ -1,5 +1,6 @@
 .q-layout
   width: 100%
+  outline: 0
 
 .q-layout-container
   position: relative

package/src/components/layout/QLayout.styl

@@ -1,5 +1,6 @@
 .q-layout
   width: 100%
+  outline: 0
 
 .q-layout-container
   position: relative

package/src/components/slide-transition/QSlideTransition.js

@@ -16,7 +16,7 @@ export default Vue.extend({
 
   methods: {
     __begin (el, height, done) {
-      el.style.overflowY = 'hidden'
+      // here overflowY is 'hidden'
       if (height !== void 0) {
         el.style.height = `${height}px`
       }
@@ -61,12 +61,14 @@ export default Vue.extend({
           let pos = 0
           this.el = el
 
+          // if animationg overflowY is already 'hidden'
           if (this.animating === true) {
             this.__cleanup()
             pos = el.offsetHeight === el.scrollHeight ? 0 : void 0
           }
           else {
             this.lastEvent = 'hide'
+            el.style.overflowY = 'hidden'
           }
 
           this.__begin(el, pos, done)
@@ -92,6 +94,9 @@ export default Vue.extend({
           }
           else {
             this.lastEvent = 'show'
+            // we need to set overflowY 'hidden' before calculating the height
+            // or else we get small differences
+            el.style.overflowY = 'hidden'
             pos = el.scrollHeight
           }
 

package/src/components/timeline/QTimelineEntry.json

@@ -42,7 +42,7 @@
         "(public folder) src=\"img/my-bg.png\"",
         "(assets folder) src=\"~assets/my-img.png\"",
         "(relative path format) :src=\"require('./my_img.jpg')\"",
-        "(URL) src=\"https://placeimg.com/500/300/nature\""
+        "(URL) src=\"https://picsum.photos/500/300\""
       ],
       "category": "content"
     },

package/src/css/core/visibility.sass

@@ -40,8 +40,6 @@
   visibility: hidden !important
   transition: none !important
   animation: none !important
-.invisible svg *
-  display: none
 .transparent
   background: transparent !important
 
@@ -164,4 +162,3 @@ body.desktop
   .q-focusable:focus, .q-manual-focusable--focused
     > .q-focus-helper
       opacity: .22
-

package/src/css/core/visibility.styl

@@ -40,8 +40,6 @@
   visibility: hidden !important
   transition: none !important
   animation: none !important
-.invisible svg *
-  display: none
 .transparent
   background: transparent !important
 
@@ -163,4 +161,3 @@ body.desktop
   .q-focusable:focus, .q-manual-focusable--focused
     > .q-focus-helper
       opacity: .22
-

package/src/mixins/mask.js

@@ -190,7 +190,7 @@ export default {
 
       this.computedMask = mask
       this.computedUnmask = val => {
-        const unmaskMatch = unmaskMatcher.exec(this.reverseFillMask === true ? val : val.slice(0, mask.length))
+        const unmaskMatch = unmaskMatcher.exec(this.reverseFillMask === true ? val : val.slice(0, mask.length + 1))
         if (unmaskMatch !== null) {
           val = unmaskMatch.slice(1).join('')
         }

package/src/mixins/prevent-scroll.js

@@ -10,6 +10,7 @@ let
   vpPendingUpdate = false,
   bodyLeft,
   bodyTop,
+  href,
   closeTimer
 
 function onWheel (e) {
@@ -96,6 +97,8 @@ function apply (action) {
     bodyLeft = body.style.left
     bodyTop = body.style.top
 
+    href = window.location.href
+
     body.style.left = `-${scrollPositionX}px`
     body.style.top = `-${scrollPositionY}px`
     if (overflowY !== 'hidden' && (overflowY === 'scroll' || body.scrollHeight > window.innerHeight)) {
@@ -104,6 +107,7 @@ function apply (action) {
 
     body.classList.add('q-body--prevent-scroll')
     document.qScrollPrevented = true
+
     if (client.is.ios === true) {
       if (hasViewport === true) {
         window.scrollTo(0, 0)
@@ -140,7 +144,11 @@ function apply (action) {
     body.style.left = bodyLeft
     body.style.top = bodyTop
 
-    window.scrollTo(scrollPositionX, scrollPositionY)
+    // scroll back only if route has not changed
+    if (window.location.href === href) {
+      window.scrollTo(scrollPositionX, scrollPositionY)
+    }
+
     maxScrollTop = void 0
   }
 }

package/src/plugins/BottomSheet.json

@@ -37,6 +37,13 @@
                   "examples": [ "my-class" ]
                 },
 
+                "style": {
+                  "type": [ "String", "Array", "Object" ],
+                  "desc": "Style definitions to be attributed to this action element",
+                  "examples": [ "border: 2px solid black" ],
+                  "addedIn": "v1.22.6"
+                },
+
                 "icon": {
                   "extends": "icon"
                 },

package/src/utils/is.js

@@ -36,20 +36,23 @@ export function isDeepEqual (a, b) {
         return false
       }
 
-      i = a.entries().next()
+      let iter = a.entries()
+
+      i = iter.next()
       while (i.done !== true) {
         if (b.has(i.value[0]) !== true) {
           return false
         }
-        i = i.next()
+        i = iter.next()
       }
 
-      i = a.entries().next()
+      iter = a.entries()
+      i = iter.next()
       while (i.done !== true) {
         if (isDeepEqual(i.value[1], b.get(i.value[0])) !== true) {
           return false
         }
-        i = i.next()
+        i = iter.next()
       }
 
       return true
@@ -60,12 +63,14 @@ export function isDeepEqual (a, b) {
         return false
       }
 
-      i = a.entries().next()
+      const iter = a.entries()
+
+      i = iter.next()
       while (i.done !== true) {
         if (b.has(i.value[0]) !== true) {
           return false
         }
-        i = i.next()
+        i = iter.next()
       }
 
       return true