quasar 2.14.6 → 2.15.0

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,

package/src/components/stepper/QStep.js

@@ -4,7 +4,7 @@ import QSlideTransition from '../slide-transition/QSlideTransition.js'
 import StepHeader from './StepHeader.js'
 
 import { usePanelChildProps } from '../../composables/private/use-panel.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 { stepperKey, emptyRenderFn } from '../../utils/private/symbols.js'
@@ -67,7 +67,7 @@ export default createComponent({
       return emptyRenderFn
     }
 
-    const { getCacheWithFn } = useCache()
+    const { getCache } = useRenderCache()
 
     const rootRef = ref(null)
 
@@ -106,7 +106,7 @@ export default createComponent({
             ? [
                 h(
                   $stepper.value.needsUniqueKeepAliveWrapper.value === true
-                    ? getCacheWithFn(contentKey.value, () => ({ ...PanelWrapper, name: contentKey.value }))
+                    ? getCache(contentKey.value, () => ({ ...PanelWrapper, name: contentKey.value }))
                     : PanelWrapper,
                   { key: contentKey.value },
                   slots.default

package/src/components/table/QTable.sass

@@ -241,10 +241,10 @@
 /*
  * On light background
  */
-.q-table__bottom // @stylint ignore
+.q-table__bottom
   border-top: 1px solid $table-border-color
 
-.q-table // @stylint ignore
+.q-table
   thead, tr, th, td
     border-color: $table-border-color
 

package/src/components/tabs/QTabs.js

@@ -3,8 +3,8 @@ import { h, ref, computed, watch, onBeforeUnmount, onActivated, onDeactivated, g
 import QIcon from '../icon/QIcon.js'
 import QResizeObserver from '../resize-observer/QResizeObserver.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 { hSlot } from '../../utils/private/render.js'

package/src/components/tooltip/QTooltip.js

@@ -5,8 +5,8 @@ import useScrollTarget from '../../composables/private/use-scroll-target.js'
 import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.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 { getScrollTarget } from '../../utils/scroll.js'

package/src/composables/private/use-field.js

@@ -1,12 +1,12 @@
-import { h, ref, computed, watch, Transition, nextTick, onActivated, onDeactivated, onBeforeUnmount, onMounted, getCurrentInstance } from 'vue'
+import { h, ref, computed, Transition, nextTick, onActivated, onDeactivated, onBeforeUnmount, onMounted, getCurrentInstance } from 'vue'
 
 import QIcon from '../../components/icon/QIcon.js'
 import QSpinner from '../../components/spinner/QSpinner.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useId, { getId } from './use-id.js'
+import useId from '../use-id.js'
 import useValidate, { useValidateProps } from './use-validate.js'
-import useSplitAttrs from './use-split-attrs.js'
+import useSplitAttrs from '../use-split-attrs.js'
 
 import { hSlot } from '../../utils/private/render.js'
 import { prevent, stopAndPrevent } from '../../utils/event.js'
@@ -69,10 +69,13 @@ export const useFieldProps = {
 export const useFieldEmits = [ 'update:modelValue', 'clear', 'focus', 'blur', 'popupShow', 'popupHide' ]
 
 export function useFieldState ({ requiredForAttr = true, tagProp } = {}) {
-  const { props, attrs, proxy, vnode } = getCurrentInstance()
+  const { props, proxy } = getCurrentInstance()
 
   const isDark = useDark(props, proxy.$q)
-  const targetUid = useId(props.for, requiredForAttr)
+  const targetUid = useId({
+    required: requiredForAttr,
+    getValue: () => props.for
+  })
 
   return {
     requiredForAttr,
@@ -90,7 +93,7 @@ export function useFieldState ({ requiredForAttr = true, tagProp } = {}) {
     focused: ref(false),
     hasPopupOpen: false,
 
-    splitAttrs: useSplitAttrs(attrs, vnode),
+    splitAttrs: useSplitAttrs(),
     targetUid,
 
     rootRef: ref(null),
@@ -256,12 +259,6 @@ export default function (state) {
     return acc
   })
 
-  watch(() => props.for, val => {
-    // don't transform targetUid into a computed
-    // prop as it will break SSR
-    state.targetUid.value = getId(val, state.requiredForAttr)
-  })
-
   function focusHandler () {
     const el = document.activeElement
     let target = state.targetRef !== void 0 && state.targetRef.value

package/src/composables/private/use-panel.js

@@ -2,7 +2,7 @@ import { h, ref, computed, watch, nextTick, getCurrentInstance, Transition, Keep
 
 import TouchSwipe from '../../directives/TouchSwipe.js'
 
-import useCache from '../../composables/private/use-cache.js'
+import useRenderCache from '../../composables/use-render-cache.js'
 
 import { hSlot } from '../../utils/private/render.js'
 import { getNormalizedVNodes } from '../../utils/private/vm.js'
@@ -48,7 +48,7 @@ export const usePanelEmits = [ 'update:modelValue', 'beforeTransition', 'transit
 
 export default function () {
   const { props, emit, proxy } = getCurrentInstance()
-  const { getCacheWithFn } = useCache()
+  const { getCache } = useRenderCache()
 
   let panels, forcedPanelTransition
 
@@ -207,7 +207,7 @@ export default function () {
           h(KeepAlive, keepAliveProps.value, [
             h(
               needsUniqueKeepAliveWrapper.value === true
-                ? getCacheWithFn(contentKey.value, () => ({ ...PanelWrapper, name: contentKey.value }))
+                ? getCache(contentKey.value, () => ({ ...PanelWrapper, name: contentKey.value }))
                 : PanelWrapper,
               { key: contentKey.value, style: transitionStyle.value },
               () => panel

package/src/composables/use-hydration.js

@@ -0,0 +1,16 @@
+import { ref, onMounted } from 'vue'
+
+// using it to manage SSR rendering with best performance
+import { isRuntimeSsrPreHydration } from '../plugins/Platform.js'
+
+export default function () {
+  const isHydrated = ref(!isRuntimeSsrPreHydration.value)
+
+  if (isHydrated.value === false) {
+    onMounted(() => {
+      isHydrated.value = true
+    })
+  }
+
+  return { isHydrated }
+}

package/src/composables/use-id.js

@@ -0,0 +1,50 @@
+import { ref, computed, watch, onMounted } from 'vue'
+
+import uid from '../utils/uid.js'
+
+import { isRuntimeSsrPreHydration } from '../plugins/Platform.js'
+
+function parseValue (val) {
+  return val === void 0 || val === null
+    ? null
+    : val
+}
+
+function getId (val, required) {
+  return val === void 0 || val === null
+    ? (required === true ? `f_${ uid() }` : null)
+    : val
+}
+
+/**
+ * Returns an "id" which is a ref() that can be used as
+ * a unique identifier to apply to a DOM node attribute.
+ *
+ * On SSR, it takes care of generating the id on the client side (only) to
+ * avoid hydration errors.
+ */
+export default function ({ getValue, required = true } = {}) {
+  if (isRuntimeSsrPreHydration.value === true) {
+    const id = getValue !== void 0
+      ? ref(parseValue(getValue()))
+      : ref(null)
+
+    if (required === true && id.value === null) {
+      onMounted(() => {
+        id.value = `f_${ uid() }` // getId(null, true)
+      })
+    }
+
+    if (getValue !== void 0) {
+      watch(getValue, newId => {
+        id.value = getId(newId, required)
+      })
+    }
+
+    return id
+  }
+
+  return getValue !== void 0
+    ? computed(() => getId(getValue(), required))
+    : ref(`f_${ uid() }`) // getId(null, true)
+}

package/src/composables/use-render-cache.js

@@ -0,0 +1,40 @@
+export default function () {
+  let cache = Object.create(null)
+
+  return {
+    getCache: __QUASAR_SSR_SERVER__
+      ? (_, defaultValue) => (
+          typeof defaultValue === 'function'
+            ? defaultValue()
+            : defaultValue
+        )
+      : (key, defaultValue) => (
+          cache[ key ] === void 0
+            ? (
+                cache[ key ] = (
+                  typeof defaultValue === 'function'
+                    ? defaultValue()
+                    : defaultValue
+                )
+              )
+            : cache[ key ]
+        ),
+
+    setCache (key, obj) {
+      cache[ key ] = obj
+    },
+
+    hasCache (key) {
+      return cache.hasOwnProperty(key)
+    },
+
+    clearCache (key) {
+      if (key !== void 0) {
+        delete cache[ key ]
+      }
+      else {
+        cache = {}
+      }
+    }
+  }
+}

package/src/composables/{private/use-split-attrs.js → use-split-attrs.js}

@@ -1,8 +1,10 @@
-import { ref, onBeforeUpdate } from 'vue'
+import { ref, onBeforeUpdate, getCurrentInstance } from 'vue'
 
 const listenerRE = /^on[A-Z]/
 
-export default function (attrs, vnode) {
+export default function () {
+  const { attrs, vnode } = getCurrentInstance()
+
   const acc = {
     listeners: ref({}),
     attributes: ref({})