quasar 2.14.7 → 2.15.1

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/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-interval.js

@@ -0,0 +1,36 @@
+import { onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue'
+
+import { vmIsDestroyed } from '../utils/private/vm.js'
+
+/*
+ * Usage:
+ *    registerInterval(fn[, delay])
+ *    removeInterval()
+ */
+
+export default function () {
+  let timer = null
+  const vm = getCurrentInstance()
+
+  function removeInterval () {
+    if (timer !== null) {
+      clearInterval(timer)
+      timer = null
+    }
+  }
+
+  onDeactivated(removeInterval)
+  onBeforeUnmount(removeInterval)
+
+  return {
+    removeInterval,
+
+    registerInterval (fn, delay) {
+      removeInterval(timer)
+
+      if (vmIsDestroyed(vm) === false) {
+        timer = setInterval(fn, delay)
+      }
+    }
+  }
+}

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({})

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

@@ -1,6 +1,6 @@
 import { nextTick, onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue'
 
-import { vmIsDestroyed } from '../../utils/private/vm'
+import { vmIsDestroyed } from '../utils/private/vm'
 
 /*
  * Usage:

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

@@ -1,6 +1,6 @@
 import { onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue'
 
-import { vmIsDestroyed } from '../../utils/private/vm.js'
+import { vmIsDestroyed } from '../utils/private/vm.js'
 
 /*
  * Usage:
@@ -29,7 +29,10 @@ export default function () {
       removeTimeout(timer)
 
       if (vmIsDestroyed(vm) === false) {
-        timer = setTimeout(fn, delay)
+        timer = setTimeout(() => {
+          timer = null
+          fn()
+        }, delay)
       }
     }
   }

package/src/composables.js

@@ -3,9 +3,23 @@ import useFormChild from './composables/use-form-child.js'
 import useMeta from './composables/use-meta.js'
 import useQuasar from './composables/use-quasar.js'
 
+import useHydration from './composables/use-hydration.js'
+import useId from './composables/use-id.js'
+import useRenderCache from './composables/use-render-cache.js'
+import useSplitAttrs from './composables/use-split-attrs.js'
+import useTick from './composables/use-tick.js'
+import useTimeout from './composables/use-timeout.js'
+
 export {
   useDialogPluginComponent,
   useFormChild,
   useMeta,
-  useQuasar
+  useQuasar,
+
+  useHydration,
+  useId,
+  useRenderCache,
+  useSplitAttrs,
+  useTick,
+  useTimeout
 }

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

@@ -1,21 +0,0 @@
-export default function () {
-  const cache = new Map()
-
-  return {
-    getCache: __QUASAR_SSR_SERVER__
-      ? function (_, obj) { return obj }
-      : function (key, obj) {
-        return cache[ key ] === void 0
-          ? (cache[ key ] = obj)
-          : cache[ key ]
-      },
-
-    getCacheWithFn: __QUASAR_SSR_SERVER__
-      ? function (_, fn) { return fn() }
-      : function (key, fn) {
-        return cache[ key ] === void 0
-          ? (cache[ key ] = fn())
-          : cache[ key ]
-      }
-  }
-}

package/src/composables/private/use-can-render.js

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

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

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