quasar 2.14.7 → 2.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.14.7",
+  "version": "2.15.0",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",

package/src/components/btn-dropdown/QBtnDropdown.js

@@ -6,7 +6,7 @@ import QBtnGroup from '../btn-group/QBtnGroup.js'
 import QMenu from '../menu/QMenu.js'
 
 import { getBtnDesignAttr, useBtnProps } from '../btn/use-btn.js'
-import useId from '../../composables/private/use-id.js'
+import useId from '../../composables/use-id.js'
 import { useTransitionProps } from '../../composables/private/use-transition.js'
 
 import { createComponent } from '../../utils/private/create.js'

package/src/components/color/QColor.js

@@ -11,7 +11,7 @@ import QTabPanels from '../tab-panels/QTabPanels.js'
 import QTabPanel from '../tab-panels/QTabPanel.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useCache from '../../composables/private/use-cache.js'
+import useRenderCache from '../../composables/use-render-cache.js'
 import { useFormInject, useFormProps } from '../../composables/private/use-form.js'
 
 import { createComponent } from '../../utils/private/create.js'
@@ -80,7 +80,7 @@ export default createComponent({
     const { $q } = proxy
 
     const isDark = useDark(props, $q)
-    const { getCache } = useCache()
+    const { getCache } = useRenderCache()
 
     const spectrumRef = ref(null)
     const errorIconRef = ref(null)
@@ -290,7 +290,7 @@ export default createComponent({
       updateModel(rgb, change)
     }
 
-    function onHueChange (val, change) {
+    function onHue (val, change) {
       const h = Math.round(val)
       const rgb = hsvToRgb({
         h,
@@ -303,6 +303,10 @@ export default createComponent({
       updateModel(rgb, change)
     }
 
+    function onHueChange (val) {
+      onHueChange(val, true)
+    }
+
     function onNumericChange (value, formatModel, max, evt, change) {
       evt !== void 0 && stop(evt)
 
@@ -494,6 +498,10 @@ export default createComponent({
       }
     }
 
+    function setTopView (val) {
+      topView.value = val
+    }
+
     function getHeader () {
       const child = []
 
@@ -503,9 +511,7 @@ export default createComponent({
           modelValue: topView.value,
           dense: true,
           align: 'justify',
-          ...getCache('topVTab', {
-            'onUpdate:modelValue': val => { topView.value = val }
-          })
+          'onUpdate:modelValue': setTopView
         }, () => [
           h(QTab, {
             label: 'HEX' + (hasAlpha.value === true ? 'A' : ''),
@@ -586,6 +592,10 @@ export default createComponent({
       ])
     }
 
+    function setView (val) {
+      view.value = val
+    }
+
     function getFooter () {
       return h('div', {
         class: 'q-color-picker__footer relative-position overflow-hidden'
@@ -595,9 +605,7 @@ export default createComponent({
           modelValue: view.value,
           dense: true,
           align: 'justify',
-          ...getCache('ftIn', {
-            'onUpdate:modelValue': val => { view.value = val }
-          })
+          'onUpdate:modelValue': setView
         }, () => [
           h(QTab, {
             icon: $q.iconSet.colorPicker.spectrum,
@@ -660,10 +668,8 @@ export default createComponent({
           selectionColor: 'transparent',
           readonly: editable.value !== true,
           thumbPath,
-          'onUpdate:modelValue': onHueChange,
-          ...getCache('lazyhue', {
-            onChange: val => onHueChange(val, true)
-          })
+          'onUpdate:modelValue': onHue,
+          onChange: onHueChange
         })
       ]
 

package/src/components/date/QDate.js

@@ -3,7 +3,7 @@ import { h, ref, computed, watch, Transition, nextTick, getCurrentInstance } fro
 import QBtn from '../btn/QBtn.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useCache from '../../composables/private/use-cache.js'
+import useRenderCache from '../../composables/use-render-cache.js'
 import { useFormProps, useFormAttrs, useFormInject } from '../../composables/private/use-form.js'
 import useDatetime, { useDatetimeProps, useDatetimeEmits, getDayHash } from './use-datetime.js'
 
@@ -90,7 +90,7 @@ export default createComponent({
     const { $q } = proxy
 
     const isDark = useDark(props, $q)
-    const { getCache } = useCache()
+    const { getCache } = useRenderCache()
     const { tabindex, headerClass, getLocale, getCurrentDate } = useDatetime(props, $q)
 
     let lastEmitValue

package/src/components/dialog/QDialog.js

@@ -1,8 +1,8 @@
 import { h, ref, computed, watch, onBeforeUnmount, Transition, getCurrentInstance } from 'vue'
 
 import useHistory from '../../composables/private/use-history.js'
-import useTimeout from '../../composables/private/use-timeout.js'
-import useTick from '../../composables/private/use-tick.js'
+import useTimeout from '../../composables/use-timeout.js'
+import useTick from '../../composables/use-tick.js'
 import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
 import useTransition, { useTransitionProps } from '../../composables/private/use-transition.js'
 import usePortal from '../../composables/private/use-portal.js'
@@ -64,6 +64,8 @@ export default createComponent({
 
     square: Boolean,
 
+    backdropFilter: String,
+
     position: {
       type: String,
       default: 'standard',
@@ -102,6 +104,16 @@ export default createComponent({
       () => defaultTransitions[ props.position ][ 1 ]
     )
 
+    const backdropStyle = computed(() => (
+      transitionStyle.value
+      + (
+        props.backdropFilter !== void 0
+          // Safari requires the -webkit prefix
+          ? `;backdrop-filter:${ props.backdropFilter };-webkit-backdrop-filter:${ props.backdropFilter }`
+          : ''
+      )
+    ))
+
     const { showPortal, hidePortal, portalIsAccessible, renderPortal } = usePortal(
       vm, innerRef, renderPortalContent, 'dialog'
     )
@@ -384,7 +396,7 @@ export default createComponent({
           useBackdrop.value === true
             ? h('div', {
               class: 'q-dialog__backdrop fixed-full',
-              style: transitionStyle.value,
+              style: backdropStyle.value,
               'aria-hidden': 'true',
               tabindex: -1,
               onClick: onBackdropClick

package/src/components/dialog/QDialog.json

@@ -42,6 +42,25 @@
       "category": "content"
     },
 
+    "backdrop-filter": {
+      "type": "String",
+      "desc": "Apply a backdrop filter; The value needs to be the same as in the CSS specs for backdrop-filter; The examples are not an exhaustive list",
+      "examples": [
+        "blur(4px)",
+        "blur(4px) saturate(150%)",
+        "brightness(60%)",
+        "invert(70%)",
+        "grayscale(100%)",
+        "contrast(40%)",
+        "hue-rotate(120deg)",
+        "sepia(90%)",
+        "saturate(80%)",
+        "none"
+      ],
+      "category": "style",
+      "addedIn": "v2.15"
+    },
+
     "maximized": {
       "type": "Boolean",
       "desc": "Put Dialog into maximized mode",

package/src/components/drawer/QDrawer.js

@@ -3,7 +3,7 @@ import { h, withDirectives, ref, computed, watch, onMounted, onBeforeUnmount, ne
 import useHistory from '../../composables/private/use-history.js'
 import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
 import usePreventScroll from '../../composables/private/use-prevent-scroll.js'
-import useTimeout from '../../composables/private/use-timeout.js'
+import useTimeout from '../../composables/use-timeout.js'
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
 import TouchPan from '../../directives/TouchPan.js'

package/src/components/editor/QEditor.js

@@ -5,7 +5,7 @@ import { getToolbar, getFonts, getLinkEditor } from './editor-utils.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import useFullscreen, { useFullscreenProps, useFullscreenEmits } from '../../composables/private/use-fullscreen.js'
-import useSplitAttrs from '../../composables/private/use-split-attrs.js'
+import useSplitAttrs from '../../composables/use-split-attrs.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { stopAndPrevent } from '../../utils/event.js'
@@ -85,13 +85,13 @@ export default createComponent({
     'linkHide'
   ],
 
-  setup (props, { slots, emit, attrs }) {
-    const { proxy, vnode } = getCurrentInstance()
+  setup (props, { slots, emit }) {
+    const { proxy } = getCurrentInstance()
     const { $q } = proxy
 
     const isDark = useDark(props, $q)
     const { inFullscreen, toggleFullscreen } = useFullscreen()
-    const splitAttrs = useSplitAttrs(attrs, vnode)
+    const splitAttrs = useSplitAttrs()
 
     const rootRef = ref(null)
     const contentRef = ref(null)

package/src/components/expansion-item/QExpansionItem.js

@@ -8,7 +8,7 @@ import QSlideTransition from '../slide-transition/QSlideTransition.js'
 import QSeparator from '../separator/QSeparator.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useId from '../../composables/private/use-id.js'
+import useId from '../../composables/use-id.js'
 import { useRouterLinkProps } from '../../composables/private/use-router-link.js'
 import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
 

package/src/components/fab/QFab.js

@@ -4,7 +4,7 @@ import QBtn from '../btn/QBtn.js'
 import QIcon from '../icon/QIcon.js'
 
 import useFab, { useFabProps } from './use-fab.js'
-import useId from '../../composables/private/use-id.js'
+import useId from '../../composables/use-id.js'
 import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
 
 import { createComponent } from '../../utils/private/create.js'

package/src/components/img/QImg.js

@@ -2,14 +2,15 @@ import { h, ref, computed, watch, onMounted, Transition, getCurrentInstance } fr
 
 import QSpinner from '../spinner/QSpinner.js'
 
+import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
 import useRatio, { useRatioProps } from '../../composables/private/use-ratio.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 import { vmIsDestroyed } from '../../utils/private/vm.js'
-import useTimeout from '../../composables/private/use-timeout.js'
+import useTimeout from '../../composables/use-timeout.js'
 
-const defaultRatio = 16 / 9
+const defaultRatio = 1.7778 /* 16/9 */
 
 export default createComponent({
   name: 'QImg',
@@ -49,6 +50,7 @@ export default createComponent({
     },
 
     placeholderSrc: String,
+    errorSrc: String,
 
     fit: {
       type: String,
@@ -80,9 +82,21 @@ export default createComponent({
     const { registerTimeout: registerLoadTimeout, removeTimeout: removeLoadTimeout } = useTimeout()
     const { registerTimeout: registerLoadShowTimeout, removeTimeout: removeLoadShowTimeout } = useTimeout()
 
+    const placeholderImg = computed(() => (
+      props.placeholderSrc !== void 0
+        ? { src: props.placeholderSrc }
+        : null
+    ))
+
+    const errorImg = computed(() => (
+      props.errorSrc !== void 0
+        ? { src: props.errorSrc, __qerror: true }
+        : null
+    ))
+
     const images = [
       ref(null),
-      ref(getPlaceholderSrc())
+      ref(placeholderImg.value)
     ]
 
     const position = ref(0)
@@ -102,6 +116,7 @@ export default createComponent({
     const imgClass = computed(() =>
       `q-img__image ${ props.imgClass !== void 0 ? props.imgClass + ' ' : '' }`
       + `q-img__image--with${ props.noTransition === true ? 'out' : '' }-transition`
+      + ' q-img__image--'
     )
 
     const imgStyle = computed(() => ({
@@ -110,8 +125,6 @@ export default createComponent({
       objectPosition: props.position
     }))
 
-    watch(() => getCurrentSrc(), addImage)
-
     function setLoading () {
       removeLoadShowTimeout()
 
@@ -130,37 +143,6 @@ export default createComponent({
       isLoading.value = false
     }
 
-    function getCurrentSrc () {
-      return props.src || props.srcset || props.sizes
-        ? {
-            src: props.src,
-            srcset: props.srcset,
-            sizes: props.sizes
-          }
-        : null
-    }
-
-    function getPlaceholderSrc () {
-      return props.placeholderSrc !== void 0
-        ? { src: props.placeholderSrc }
-        : null
-    }
-
-    function addImage (imgProps) {
-      removeLoadTimeout()
-      hasError.value = false
-
-      if (imgProps === null) {
-        clearLoading()
-        images[ position.value ^ 1 ].value = getPlaceholderSrc()
-      }
-      else {
-        setLoading()
-      }
-
-      images[ position.value ].value = imgProps
-    }
-
     function onLoad ({ target }) {
       if (vmIsDestroyed(vm) === false) {
         removeLoadTimeout()
@@ -187,14 +169,19 @@ export default createComponent({
       }
     }
 
-    function onReady (img) {
+    function onReady (target) {
       if (vmIsDestroyed(vm) === true) return
 
       position.value = position.value ^ 1
       images[ position.value ].value = null
+
       clearLoading()
-      hasError.value = false
-      emit('load', img.currentSrc || img.src)
+
+      if (target.getAttribute('__qerror') !== 'true') {
+        hasError.value = false
+      }
+
+      emit('load', target.currentSrc || target.src)
     }
 
     function onError (err) {
@@ -202,8 +189,8 @@ export default createComponent({
       clearLoading()
 
       hasError.value = true
-      images[ position.value ].value = null
-      images[ position.value ^ 1 ].value = getPlaceholderSrc()
+      images[ position.value ].value = errorImg.value
+      images[ position.value ^ 1 ].value = placeholderImg.value
 
       emit('error', err)
     }
@@ -229,11 +216,14 @@ export default createComponent({
       }
 
       if (position.value === index) {
-        data.class += ' q-img__image--waiting'
-        Object.assign(data, { onLoad, onError })
+        Object.assign(data, {
+          class: data.class + 'current',
+          onLoad,
+          onError
+        })
       }
       else {
-        data.class += ' q-img__image--loaded'
+        data.class += 'loaded'
       }
 
       return h(
@@ -271,13 +261,40 @@ export default createComponent({
     }
 
     if (__QUASAR_SSR_SERVER__ !== true) {
-      if (__QUASAR_SSR_CLIENT__) {
-        onMounted(() => {
-          addImage(getCurrentSrc())
-        })
+      function watchSrc () {
+        watch(
+          () => (
+            props.src || props.srcset || props.sizes
+              ? {
+                  src: props.src,
+                  srcset: props.srcset,
+                  sizes: props.sizes
+                }
+              : null
+          ),
+          imgProps => {
+            removeLoadTimeout()
+            hasError.value = false
+
+            if (imgProps === null) {
+              clearLoading()
+              images[ position.value ^ 1 ].value = placeholderImg.value
+            }
+            else {
+              setLoading()
+            }
+
+            images[ position.value ].value = imgProps
+          },
+          { immediate: true }
+        )
+      }
+
+      if (isRuntimeSsrPreHydration.value === true) {
+        onMounted(watchSrc)
       }
       else {
-        addImage(getCurrentSrc())
+        watchSrc()
       }
     }
 
@@ -290,14 +307,16 @@ export default createComponent({
         )
       }
 
-      if (hasError.value !== true) {
-        if (images[ 0 ].value !== null) {
-          content.push(getImage(0))
-        }
+      if (images[ 0 ].value !== null) {
+        content.push(
+          getImage(0)
+        )
+      }
 
-        if (images[ 1 ].value !== null) {
-          content.push(getImage(1))
-        }
+      if (images[ 1 ].value !== null) {
+        content.push(
+          getImage(1)
+        )
       }
 
       content.push(
@@ -305,6 +324,7 @@ export default createComponent({
       )
 
       return h('div', {
+        key: 'main',
         class: classes.value,
         style: style.value,
         role: 'img',

package/src/components/img/QImg.json

@@ -44,14 +44,28 @@
       "desc": "While waiting for your image to load, you can use a placeholder image",
       "transformAssetUrls": true,
       "examples": [
-        "(public folder) src=\"img/some-placeholder.png\"",
-        "(assets folder) src=\"~assets/my-placeholder.gif\"",
-        "(relative path format) :src=\"require('./placeholder.jpg')\"",
-        "(URL) src=\"https://picsum.photos/500/300\""
+        "(public folder) placeholder-src=\"img/some-placeholder.png\"",
+        "(assets folder) placeholder-src=\"~assets/my-placeholder.gif\"",
+        "(relative path format) :placeholder-src=\"require('./placeholder.jpg')\"",
+        "(URL) placeholder-src=\"https://picsum.photos/500/300\""
       ],
       "category": "model"
     },
 
+    "error-src": {
+      "type": "String",
+      "desc": "In case your image fails to load, you can use an error image",
+      "transformAssetUrls": true,
+      "examples": [
+        "(public folder) error-src=\"img/some-placeholder.png\"",
+        "(assets folder) error-src=\"~assets/my-placeholder.gif\"",
+        "(relative path format) :error-src=\"require('./placeholder.jpg')\"",
+        "(URL) error-src=\"https://picsum.photos/500/300\""
+      ],
+      "category": "model",
+      "addedIn": "v2.15"
+    },
+
     "ratio": {
       "desc": "Force the component to maintain an aspect ratio",
       "examples": [
@@ -167,13 +181,13 @@
       "type": "String",
       "desc": "Specifies an alternate text for the image, if the image cannot be displayed",
       "examples": [ "Two cats" ],
-      "category": "content"
+      "category": "miscellaneous"
     },
 
     "draggable": {
       "type": "Boolean",
       "desc": "Adds the native 'draggable' attribute",
-      "category": "behavior"
+      "category": "miscellaneous"
     },
 
     "img-class": {

package/src/components/menu/QMenu.js

@@ -6,8 +6,8 @@ import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import usePortal from '../../composables/private/use-portal.js'
 import useTransition, { useTransitionProps } from '../../composables/private/use-transition.js'
-import useTick from '../../composables/private/use-tick.js'
-import useTimeout from '../../composables/private/use-timeout.js'
+import useTick from '../../composables/use-tick.js'
+import useTimeout from '../../composables/use-timeout.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { closePortalMenus } from '../../utils/private/portal.js'

package/src/components/no-ssr/QNoSsr.js

@@ -1,6 +1,6 @@
 import { h } from 'vue'
 
-import useCanRender from '../../composables/private/use-can-render.js'
+import useHydration from '../../composables/use-hydration.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
@@ -18,10 +18,10 @@ export default createComponent({
   },
 
   setup (props, { slots }) {
-    const canRender = useCanRender()
+    const { isHydrated } = useHydration()
 
     return () => {
-      if (canRender.value === true) {
+      if (isHydrated.value === true) {
         const node = hSlot(slots.default)
         return node === void 0
           ? node

package/src/components/resize-observer/QResizeObserver.js

@@ -1,6 +1,6 @@
 import { h, onMounted, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue'
 
-import useCanRender from '../../composables/private/use-can-render.js'
+import useHydration from '../../composables/use-hydration.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { listenOpts, noop } from '../../utils/event.js'
@@ -95,7 +95,7 @@ export default createComponent({
       return noop
     }
     else { // no observer, so fallback to old iframe method
-      const canRender = useCanRender()
+      const { isHydrated } = useHydration()
 
       let curDocView
 
@@ -134,7 +134,7 @@ export default createComponent({
       onBeforeUnmount(cleanup)
 
       return () => {
-        if (canRender.value === true) {
+        if (isHydrated.value === true) {
           return h('object', {
             class: 'q--avoid-card-border',
             style: resizeProps.style,

package/src/components/select/QSelect.js

@@ -79,6 +79,7 @@ export default createComponent({
 
     popupContentClass: String,
     popupContentStyle: [ String, Array, Object ],
+    popupNoRouteDismiss: Boolean,
 
     useInput: Boolean,
     useChips: Boolean,
@@ -1186,6 +1187,7 @@ export default createComponent({
         noParentEvent: true,
         noRefocus: true,
         noFocus: true,
+        noRouteDismiss: props.popupNoRouteDismiss,
         square: squaredMenu.value,
         transitionShow: props.transitionShow,
         transitionHide: props.transitionHide,
@@ -1263,6 +1265,7 @@ export default createComponent({
         transitionShow: transitionShowComputed,
         transitionHide: props.transitionHide,
         transitionDuration: props.transitionDuration,
+        noRouteDismiss: props.popupNoRouteDismiss,
         onBeforeShow: onControlPopupShow,
         onBeforeHide: onDialogBeforeHide,
         onHide: onDialogHide,

package/src/components/select/QSelect.json

@@ -232,6 +232,13 @@
       "category": "style"
     },
 
+    "popup-no-route-dismiss": {
+      "type": "Boolean",
+      "desc": "Changing route app won't dismiss the popup (menu or dialog)",
+      "category": "behavior",
+      "addedIn": "v2.15"
+    },
+
     "use-input": {
       "type": "Boolean",
       "desc": "Use an input tag where users can type",

package/src/components/slide-item/QSlideItem.js

@@ -3,7 +3,7 @@ import { h, ref, computed, withDirectives, onBeforeUnmount, onBeforeUpdate, getC
 import TouchPan from '../../directives/TouchPan.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useCache from '../../composables/private/use-cache.js'
+import useRenderCache from '../../composables/use-render-cache.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
@@ -36,7 +36,7 @@ export default createComponent({
     const { $q } = proxy
 
     const isDark = useDark(props, $q)
-    const { getCacheWithFn } = useCache()
+    const { getCache } = useRenderCache()
 
     const contentRef = ref(null)
 
@@ -209,7 +209,7 @@ export default createComponent({
       }
       else {
         content.push(
-          withDirectives(node, getCacheWithFn('dir#' + dirs.join(''), () => {
+          withDirectives(node, getCache('dir#' + dirs.join(''), () => {
             const modifiers = {
               prevent: true,
               stop: true,