quasar 2.4.3 → 2.4.7

package/src/components/icon/QIcon.js

@@ -5,6 +5,8 @@ import useSize, { useSizeProps } from '../../composables/private/use-size.js'
 import { createComponent } from '../../utils/private/create.js'
 import { hSlot, hMergeSlot } from '../../utils/private/render.js'
 
+const defaultViewBox = '0 0 24 24'
+
 const sameFn = i => i
 const ionFn = i => `ionicons ${ i }`
 
@@ -58,7 +60,7 @@ export default createComponent({
 
     const classes = computed(() =>
       'q-icon'
-      + (props.left === true ? ' on-left' : '')
+      + (props.left === true ? ' on-left' : '') // TODO Qv3: drop this
       + (props.right === true ? ' on-right' : '')
       + (props.color !== void 0 ? ` text-${ props.color }` : '')
     )
@@ -68,10 +70,7 @@ export default createComponent({
       let icon = props.name
 
       if (!icon) {
-        return {
-          none: true,
-          cls: classes.value
-        }
+        return { none: true }
       }
 
       if ($q.iconMapFn !== null) {
@@ -82,7 +81,7 @@ export default createComponent({
           }
           else {
             return {
-              cls: res.cls + ' ' + classes.value,
+              cls: res.cls,
               content: res.content !== void 0
                 ? res.content
                 : ' '
@@ -92,39 +91,32 @@ export default createComponent({
       }
 
       if (mRE.test(icon) === true) {
-        const [ def, viewBox ] = icon.split('|')
+        const [ def, viewBox = defaultViewBox ] = icon.split('|')
 
         return {
           svg: true,
-          cls: classes.value,
+          viewBox,
           nodes: def.split('&&').map(path => {
             const [ d, style, transform ] = path.split('@@')
-            return h('path', {
-              style,
-              d,
-              transform
-            })
-          }),
-          viewBox: viewBox !== void 0 ? viewBox : '0 0 24 24'
+            return h('path', { style, d, transform })
+          })
         }
       }
 
       if (imgRE.test(icon) === true) {
         return {
           img: true,
-          cls: classes.value,
           src: icon.substring(4)
         }
       }
 
       if (svgUseRE.test(icon) === true) {
-        const [ def, viewBox ] = icon.split('|')
+        const [ def, viewBox = defaultViewBox ] = icon.split('|')
 
         return {
           svguse: true,
-          cls: classes.value,
           src: def.substring(7),
-          viewBox: viewBox !== void 0 ? viewBox : '0 0 24 24'
+          viewBox
         }
       }
 
@@ -158,14 +150,14 @@ export default createComponent({
       }
 
       return {
-        cls: cls + ' ' + classes.value,
+        cls,
         content
       }
     })
 
     return () => {
       const data = {
-        class: type.value.cls,
+        class: classes.value,
         style: sizeStyle.value,
         'aria-hidden': 'true',
         role: 'presentation'
@@ -176,24 +168,36 @@ export default createComponent({
       }
 
       if (type.value.img === true) {
-        data.src = type.value.src
-        return h('img', data)
+        return h('div', data, hMergeSlot(slots.default, [
+          h('img', {
+            class: type.value.cls,
+            src: type.value.src
+          })
+        ]))
       }
 
       if (type.value.svg === true) {
-        data.viewBox = type.value.viewBox
-
-        return h('svg', data, hMergeSlot(slots.default, type.value.nodes))
+        return h('div', data, hMergeSlot(slots.default, [
+          h('svg', {
+            class: type.value.cls,
+            viewBox: type.value.viewBox
+          }, type.value.nodes)
+        ]))
       }
 
       if (type.value.svguse === true) {
-        data.viewBox = type.value.viewBox
+        return h('div', data, hMergeSlot(slots.default, [
+          h('svg', {
+            class: type.value.cls,
+            viewBox: type.value.viewBox
+          }, [
+            h('use', { 'xlink:href': type.value.src })
+          ])
+        ]))
+      }
 
-        return h(
-          'svg',
-          data,
-          hMergeSlot(slots.default, [ h('use', { 'xlink:href': type.value.src }) ])
-        )
+      if (type.value.cls !== void 0) {
+        data.class += ' ' + type.value.cls
       }
 
       return h(props.tag, data, hMergeSlot(slots.default, [

package/src/components/icon/QIcon.sass

@@ -10,7 +10,6 @@
   text-align: center
   position: relative
   box-sizing: content-box
-
   fill: currentColor // for svg paths
 
   &:before, &:after

package/src/components/img/QImg.json

@@ -11,7 +11,7 @@
       "desc": "Path to image",
       "transformAssetUrls": true,
       "examples": [
-        "(statics folder) src=\"statics/img/something.png\"",
+        "(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\""
@@ -44,7 +44,7 @@
       "desc": "While waiting for your image to load, you can use a placeholder image",
       "transformAssetUrls": true,
       "examples": [
-        "(statics folder) src=\"statics/img/some-placeholder.png\"",
+        "(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\""

package/src/components/layout/QLayout.js

@@ -1,4 +1,4 @@
-import { h, ref, reactive, computed, provide, getCurrentInstance } from 'vue'
+import { h, ref, reactive, computed, watch, provide, onUnmounted, getCurrentInstance } from 'vue'
 
 import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
 
@@ -173,6 +173,55 @@ export default createComponent({
 
     provide(layoutKey, $layout)
 
+    // prevent scrollbar flicker while resizing window height
+    // if no page scrollbar is already present
+    if (__QUASAR_SSR_SERVER__ !== true && getScrollbarWidth() > 0) {
+      let timer = null
+      const el = document.body
+
+      function restoreScrollbar () {
+        timer = null
+        el.classList.remove('hide-scrollbar')
+      }
+
+      function hideScrollbar () {
+        if (timer === null) {
+          // if it has no scrollbar then there's nothing to do
+
+          if (el.scrollHeight > $q.screen.height) {
+            return
+          }
+
+          el.classList.add('hide-scrollbar')
+        }
+        else {
+          clearTimeout(timer)
+        }
+
+        timer = setTimeout(restoreScrollbar, 300)
+      }
+
+      function updateScrollEvent (action) {
+        if (timer !== null && action === 'remove') {
+          clearTimeout(timer)
+          restoreScrollbar()
+        }
+
+        window[ `${ action }EventListener` ]('resize', hideScrollbar)
+      }
+
+      watch(
+        () => (props.container !== true ? 'add' : 'remove'),
+        updateScrollEvent
+      )
+
+      props.container !== true && updateScrollEvent('add')
+
+      onUnmounted(() => {
+        updateScrollEvent('remove')
+      })
+    }
+
     return () => {
       const content = hMergeSlot(slots.default, [
         h(QScrollObserver, { onScroll: onPageScroll }),

package/src/components/pagination/QPagination.js

@@ -309,8 +309,8 @@ export default createComponent({
             style,
             disable: props.disable,
             flat: !active,
-            textColor: active ? props.textColor : void 0,
-            label: props.min
+            label: props.min,
+            ...(active ? activeBtnProps.value : {})
           }, props.min))
         }
         if (boundaryEnd) {
@@ -320,8 +320,8 @@ export default createComponent({
             style,
             disable: props.disable,
             flat: !active,
-            textColor: active ? props.textColor : void 0,
-            label: props.max
+            label: props.max,
+            ...(active ? activeBtnProps.value : {})
           }, props.max))
         }
         if (ellipsesStart) {

package/src/components/parallax/QParallax.json

@@ -9,7 +9,7 @@
       "desc": "Path to image (unless a 'media' slot is used)",
       "transformAssetUrls": true,
       "examples": [
-        "(statics folder) src=\"statics/img/something.png\"",
+        "(public folder) src=\"img/something.png\"",
         "(assets folder) src=\"~assets/my-img.png\"",
         "(relative path format) :src=\"require('./my_img.jpg')\"",
         "(URL) src=\"https://some-site.net/some-img.jpg\""

package/src/components/radio/QRadio.js

@@ -33,12 +33,8 @@ export default createComponent({
     ...useSizeProps,
     ...useFormProps,
 
-    modelValue: {
-      required: true
-    },
-    val: {
-      required: true
-    },
+    modelValue: { required: true },
+    val: { required: true },
 
     label: String,
     leftLabel: Boolean,

package/src/components/radio/QRadio.json

@@ -13,7 +13,7 @@
     },
 
     "val": {
-      "type": [ "Number", "String" ],
+      "type": [ "Number", "String", "null", "undefined" ],
       "required": true,
       "desc": "The actual value of the option with which model value is changed",
       "examples": [ "opt1", 50 ],

package/src/components/scroll-area/QScrollArea.sass

@@ -1,5 +1,6 @@
 .q-scrollarea
   position: relative
+  contain: strict
 
   &__bar,
   &__thumb

package/src/components/select/QSelect.json

@@ -228,7 +228,7 @@
       "desc": "Style definitions to be attributed to the popup content",
       "examples": [
         "background-color: #ff0000",
-        ":content-style=\"{ backgroundColor: '#ff0000' }\""
+        ":popup-content-style=\"{ backgroundColor: '#ff0000' }\""
       ],
       "category": "style"
     },

package/src/components/timeline/QTimeline.sass

@@ -20,7 +20,7 @@
   &__subtitle
     font-size: 12px
     margin-bottom: 8px
-    opacity: .4
+    opacity: .6
     text-transform: uppercase
     letter-spacing: 1px
     font-weight: 700
@@ -240,4 +240,3 @@
 
       &__subtitle, &__content
         width: 50%
-

package/src/components/timeline/QTimelineEntry.json

@@ -34,7 +34,7 @@
       "desc": "URL to the avatar image; Icon takes precedence if used, so it replaces avatar",
       "transformAssetUrls": true,
       "examples": [
-        "(statics folder) src=\"statics/img/my-bg.png\"",
+        "(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\""

package/src/css/core/visibility.sass

@@ -160,4 +160,3 @@ body.desktop
   .q-focusable:focus, .q-manual-focusable--focused
     > .q-focus-helper
       opacity: .22
-

package/src/plugins/BottomSheet.json

@@ -45,7 +45,7 @@
                   "type": "String",
                   "desc": "Path to an image for this action",
                   "examples": [
-                    "(statics folder) statics/img/something.png",
+                    "(public folder) img/something.png",
                     "(relative path format) :src=\"require('./my_img.jpg')\"",
                     "(URL) https://some-site.net/some-img.gif"
                   ]
@@ -60,6 +60,12 @@
                   "type": [ "String", "Number" ],
                   "desc": "Action label",
                   "examples": [ "Facebook" ]
+                },
+
+                "...": {
+                  "type": "Any",
+                  "desc": "Any other custom props",
+                  "__exemption": [ "examples" ]
                 }
               }
             },

package/src/plugins/LoadingBar.json

@@ -10,7 +10,7 @@
     "definition": {
       "...props": {
         "type": "Object",
-        "desc": "QAjaxBar component props",
+        "desc": "QAjaxBar component props, EXCEPT for 'hijack-filter'",
         "__exemption": [ "examples" ]
       }
     }

package/src/plugins/Notify.json

@@ -45,9 +45,9 @@
 
       "avatar": {
         "type": "String",
-        "desc": "URL to an avatar/image; Suggestion: use statics folder",
+        "desc": "URL to an avatar/image; Suggestion: use public folder",
         "examples": [
-          "(statics folder) statics/img/something.png",
+          "(public folder) img/something.png",
           "(relative path format) require('./my_img.jpg')",
           "(URL) https://some-site.net/some-img.gif"
         ]
@@ -204,9 +204,9 @@
 
             "avatar": {
               "type": "String",
-              "desc": "URL to an avatar/image; Suggestion: use statics folder",
+              "desc": "URL to an avatar/image; Suggestion: public folder",
               "examples": [
-                "(statics folder) statics/img/something.png",
+                "(public folder) img/something.png",
                 "(relative path format) require('./my_img.jpg')",
                 "(URL) https://some-site.net/some-img.gif"
               ]
@@ -258,7 +258,7 @@
               "desc": "Style definitions to be attributed to the badge",
               "examples": [
                 "background-color: #ff0000",
-                ":content-style=\"{ backgroundColor: '#ff0000' }\""
+                "{ backgroundColor: '#ff0000' }"
               ]
             },
             "badgeClass": {
@@ -266,7 +266,7 @@
               "desc": "Class definitions to be attributed to the badge",
               "examples": [
                 "my-special-class",
-                ":content-class=\"{ 'my-special-class': <condition> }\""
+                "{ 'my-special-class': <condition> }"
               ]
             },
 
@@ -279,7 +279,7 @@
               "desc": "Class definitions to be attributed to the progress bar",
               "examples": [
                 "my-special-class",
-                ":content-class=\"{ 'my-special-class': <condition> }\""
+                "{ 'my-special-class': <condition> }"
               ]
             },
 
@@ -387,9 +387,9 @@
 
               "avatar": {
                 "type": "String",
-                "desc": "URL to an avatar/image; Suggestion: use statics folder",
+                "desc": "URL to an avatar/image; Suggestion: use public folder",
                 "examples": [
-                  "(statics folder) statics/img/something.png",
+                  "(public folder) img/something.png",
                   "(relative path format) require('./my_img.jpg')",
                   "(URL) https://some-site.net/some-img.gif"
                 ]
@@ -410,7 +410,7 @@
                 "desc": "Class definitions to be attributed to the progress bar",
                 "examples": [
                   "my-special-class",
-                  ":content-class=\"{ 'my-special-class': <condition> }\""
+                  "{ 'my-special-class': <condition> }"
                 ]
               },
 
@@ -521,13 +521,13 @@
 
             "avatar": {
               "type": "String",
-              "desc": "URL to an avatar/image; Suggestion: use statics folder",
+              "desc": "URL to an avatar/image; Suggestion: use public folder",
               "examples": [
-                "(statics folder) statics/img/something.png",
+                "(public folder) img/something.png",
                 "(relative path format) require('./my_img.jpg')",
                 "(URL) https://some-site.net/some-img.gif"
               ]
-            },
+          },
 
             "spinner": {
               "type": [ "Boolean", "Component" ],
@@ -570,7 +570,7 @@
               "desc": "Style definitions to be attributed to the badge",
               "examples": [
                 "background-color: #ff0000",
-                ":content-style=\"{ backgroundColor: '#ff0000' }\""
+                "{ backgroundColor: '#ff0000' }"
               ]
             },
             "badgeClass": {
@@ -578,7 +578,7 @@
               "desc": "Class definitions to be attributed to the badge",
               "examples": [
                 "my-special-class",
-                ":content-class=\"{ 'my-special-class': <condition> }\""
+                "{ 'my-special-class': <condition> }"
               ]
             },
 
@@ -591,7 +591,7 @@
               "desc": "Class definitions to be attributed to the progress bar",
               "examples": [
                 "my-special-class",
-                ":content-class=\"{ 'my-special-class': <condition> }\""
+                "{ 'my-special-class': <condition> }"
               ]
             },
 
@@ -701,13 +701,13 @@
 
             "avatar": {
               "type": "String",
-              "desc": "URL to an avatar/image; Suggestion: use statics folder",
+              "desc": "URL to an avatar/image; Suggestion: use public folder",
               "examples": [
-                "(statics folder) statics/img/something.png",
+                "(public folder) img/something.png",
                 "(relative path format) require('./my_img.jpg')",
                 "(URL) https://some-site.net/some-img.gif"
               ]
-            },
+          },
 
             "spinner": {
               "type": [ "Boolean", "Component" ],
@@ -750,7 +750,7 @@
               "desc": "Style definitions to be attributed to the badge",
               "examples": [
                 "background-color: #ff0000",
-                ":content-style=\"{ backgroundColor: '#ff0000' }\""
+                "{ backgroundColor: '#ff0000' }"
               ]
             },
             "badgeClass": {
@@ -758,7 +758,7 @@
               "desc": "Class definitions to be attributed to the badge",
               "examples": [
                 "my-special-class",
-                ":content-class=\"{ 'my-special-class': <condition> }\""
+                "{ 'my-special-class': <condition> }"
               ]
             },
 
@@ -771,7 +771,7 @@
               "desc": "Class definitions to be attributed to the progress bar",
               "examples": [
                 "my-special-class",
-                ":content-class=\"{ 'my-special-class': <condition> }\""
+                "{ 'my-special-class': <condition> }"
               ]
             },
 

package/src/utils/private/global-dialog.js

@@ -147,14 +147,14 @@ export default function (DefaultComponent, supportsCustomComponent, parentApp) {
       applyState('show')
     }
 
-    if (dialogRef.value !== null) {
-      show()
-    }
-    else if (typeof DialogComponent.__asyncLoader === 'function') {
+    if (typeof DialogComponent.__asyncLoader === 'function') {
       DialogComponent.__asyncLoader().then(() => {
         nextTick(show)
       })
     }
+    else {
+      nextTick(show)
+    }
 
     return API
   }