quasar 1.22.5 → 1.22.7

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.5",
+  "version": "1.22.7",
   "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/ja.js

@@ -28,7 +28,7 @@ export default {
         weekday: 'short', month: 'short', day: 'numeric'
       }).format(date)
     },
-    firstDayOfWeek: 1, // 0-6, 0 - Sunday, 1 Monday, ...
+    firstDayOfWeek: 0, // 0-6, 0 - Sunday, 1 Monday, ...
     format24h: true, // true
     pluralDay: '日間'
   },

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.5",
+  "version": "1.22.7",
   "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-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/field/QField.js

@@ -122,7 +122,11 @@ export default Vue.extend({
         this.focused === true ||
         typeof this.inputValue === 'number' ||
         (typeof this.inputValue === 'string' && this.inputValue.length > 0) ||
-        (this.hideSelected !== true && this.hasValue === true) ||
+        (
+          this.hideSelected !== true &&
+          this.hasValue === true &&
+          (this.type !== 'number' || isNaN(this.value) === false)
+        ) ||
         (
           this.displayValue !== void 0 &&
           this.displayValue !== null &&

package/src/components/field/QField.sass

@@ -134,8 +134,15 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
 
     &:-webkit-autofill + .q-field__label
       transform: translateY(-40%) scale(.75)
-    &[type="number"]:invalid + .q-field__label
-      transform: translateY(-40%) scale(.75)
+
+    &[type="color"],
+    &[type="date"],
+    &[type="datetime-local"],
+    &[type="month"],
+    &[type="time"],
+    &[type="week"]
+      + .q-field__label
+        transform: translateY(-40%) scale(.75)
 
     &:invalid
       box-shadow: none
@@ -439,8 +446,15 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
     .q-field__native, .q-field__input
       &:-webkit-autofill + .q-field__label
         transform: translateY(-30%) scale(.75)
-      &[type="number"]:invalid + .q-field__label
-        transform: translateY(-30%) scale(.75)
+
+      &[type="color"],
+      &[type="date"],
+      &[type="datetime-local"],
+      &[type="month"],
+      &[type="time"],
+      &[type="week"]
+        + .q-field__label
+          transform: translateY(-30%) scale(.75)
 
   &--borderless, &--standard
 

package/src/components/field/QField.styl

@@ -134,8 +134,15 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
 
     &:-webkit-autofill + .q-field__label
       transform: translateY(-40%) scale(.75)
-    &[type="number"]:invalid + .q-field__label
-      transform: translateY(-40%) scale(.75)
+
+    &[type="color"],
+    &[type="date"],
+    &[type="datetime-local"],
+    &[type="month"],
+    &[type="time"],
+    &[type="week"]
+      + .q-field__label
+        transform: translateY(-40%) scale(.75)
 
     &:invalid
       box-shadow: none
@@ -439,8 +446,15 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
     .q-field__native, .q-field__input
       &:-webkit-autofill + .q-field__label
         transform: translateY(-30%) scale(.75)
-      &[type="number"]:invalid + .q-field__label
-        transform: translateY(-30%) scale(.75)
+
+      &[type="color"],
+      &[type="date"],
+      &[type="datetime-local"],
+      &[type="month"],
+      &[type="time"],
+      &[type="week"]
+        + .q-field__label
+          transform: translateY(-30%) scale(.75)
 
   &--borderless, &--standard
 

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/input/QInput.js

@@ -142,6 +142,8 @@ export default Vue.extend({
 
       if (this.hasMask === true) {
         on.keydown = this.__onMaskedKeydown
+        // reset selection anchor on pointer selection
+        on.click = this.__onMaskedClick
       }
 
       if (this.autogrow === true) {
@@ -291,18 +293,29 @@ export default Vue.extend({
         const inp = this.$refs.input
         if (inp !== void 0) {
           const parentStyle = inp.parentNode.style
-          const { overflow } = inp.style
+          // chrome does not keep scroll #15498
+          const { scrollTop } = inp
+          // chrome calculates a smaller scrollHeight when in a .column container
+          const { overflowY, maxHeight } = this.$q.platform.is.firefox === true
+            ? {}
+            : window.getComputedStyle(inp)
+          // on firefox or if overflowY is specified as scroll #14263, #14344
+          // we don't touch overflow
+          // firefox is not so bad in the end
+          const changeOverflow = overflowY !== void 0 && overflowY !== 'scroll'
 
           // reset height of textarea to a small size to detect the real height
           // but keep the total control size the same
-          // Firefox rulez #14263, #14344
-          this.$q.platform.is.firefox !== true && (inp.style.overflow = 'hidden')
+          changeOverflow === true && (inp.style.overflowY = 'hidden')
           parentStyle.marginBottom = (inp.scrollHeight - 1) + 'px'
           inp.style.height = '1px'
 
           inp.style.height = inp.scrollHeight + 'px'
-          inp.style.overflow = overflow
+          // we should allow scrollbars only
+          // if there is maxHeight and content is taller than maxHeight
+          changeOverflow === true && (inp.style.overflowY = parseInt(maxHeight, 10) < inp.scrollHeight ? 'auto' : 'hidden')
           parentStyle.marginBottom = ''
+          inp.scrollTop = scrollTop
         }
       })
     },

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/table/table-top.js

@@ -43,7 +43,7 @@ export default {
 
         if (topLeft !== void 0) {
           child.push(
-            h('div', { staticClass: 'q-table-control' }, [
+            h('div', { staticClass: 'q-table__control' }, [
               topLeft(this.marginalsScope)
             ])
           )

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"
     },