quasar 2.14.7 → 2.15.0

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-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:

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