quasar 2.18.7 → 2.19.0

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

@@ -3,7 +3,7 @@
     "model-value": {
       "type": "Any",
       "desc": "Model of the component defining the current panel's name; If a Number is used, it does not define the panel's index, but rather the panel's name which can also be an Integer; Either use this property (along with a listener for 'update:model-value' event) OR use the v-model directive.",
-      "examples": [ "# v-model=\"panelName\"" ],
+      "examples": ["# v-model=\"panelName\""],
       "required": true,
       "category": "model"
     },
@@ -15,16 +15,16 @@
     },
 
     "keep-alive-include": {
-      "type": [ "String", "Array", "RegExp" ],
+      "type": ["String", "Array", "RegExp"],
       "desc": "Equivalent to using Vue's native include prop for <keep-alive>; Values must be valid Vue component names",
-      "examples": [ "'a,b'", "/a|b/", "[ 'a', 'b' ]" ],
+      "examples": ["'a,b'", "/a|b/", "['a', 'b']"],
       "category": "behavior"
     },
 
     "keep-alive-exclude": {
-      "type": [ "String", "Array", "RegExp"  ],
+      "type": ["String", "Array", "RegExp"],
       "desc": "Equivalent to using Vue's native exclude prop for <keep-alive>; Values must be valid Vue component names",
-      "examples": [ "'a,b'", "/a|b/", "[ 'a', 'b' ]" ],
+      "examples": ["'a,b'", "/a|b/", "['a', 'b']"],
       "category": "behavior"
     },
 
@@ -75,7 +75,7 @@
     },
 
     "transition-duration": {
-      "type": [ "String", "Number" ],
+      "type": ["String", "Number"],
       "desc": "Transition duration (in milliseconds, without unit)",
       "default": "300",
       "category": "transition",
@@ -88,9 +88,9 @@
       "desc": "Emitted when the component changes the model; This event _isn't_ fired if the model is changed externally; Is also used by v-model",
       "params": {
         "value": {
-          "type": [ "String", "Number" ],
+          "type": ["String", "Number"],
           "desc": "New current panel name",
-          "examples": [ "'dashboard'" ]
+          "examples": ["'dashboard'"]
         }
       }
     },
@@ -99,14 +99,14 @@
       "desc": "Emitted before transitioning to a new panel",
       "params": {
         "newVal": {
-          "type": [ "String", "Number" ],
+          "type": ["String", "Number"],
           "desc": "Panel name towards transition is going",
-          "examples": [ "'dashboard'" ]
+          "examples": ["'dashboard'"]
         },
         "oldVal": {
-          "type": [ "String", "Number" ],
+          "type": ["String", "Number"],
           "desc": "Panel name from which transition is happening",
-          "examples": [ "'dashboard'" ]
+          "examples": ["'dashboard'"]
         }
       }
     },
@@ -115,14 +115,14 @@
       "desc": "Emitted after component transitioned to a new panel",
       "params": {
         "newVal": {
-          "type": [ "String", "Number" ],
+          "type": ["String", "Number"],
           "desc": "Panel name towards transition has occurred",
-          "examples": [ "'dashboard'" ]
+          "examples": ["'dashboard'"]
         },
         "oldVal": {
-          "type": [ "String", "Number" ],
+          "type": ["String", "Number"],
           "desc": "Panel name from which transition has happened",
-          "examples": [ "'dashboard'" ]
+          "examples": ["'dashboard'"]
         }
       }
     }
@@ -145,10 +145,10 @@
       "desc": "Go to specific panel",
       "params": {
         "panelName": {
-          "type": [ "String", "Number" ],
+          "type": ["String", "Number"],
           "desc": "Panel's name, which may be a String or Number; Number does not refers to panel index, but to its name, which may be an Integer",
           "required": true,
-          "examples": [ "'dashboard'" ]
+          "examples": ["'dashboard'"]
         }
       },
       "returns": null

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

@@ -2,8 +2,14 @@ import { h, ref, onUnmounted, Teleport } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { noop } from '../../utils/event/event.js'
-import { addFocusWaitFlag, removeFocusWaitFlag } from '../../utils/private.focus/focus-manager.js'
-import { createGlobalNode, removeGlobalNode } from '../../utils/private.config/nodes.js'
+import {
+  addFocusWaitFlag,
+  removeFocusWaitFlag
+} from '../../utils/private.focus/focus-manager.js'
+import {
+  createGlobalNode,
+  removeGlobalNode
+} from '../../utils/private.config/nodes.js'
 import { portalProxyList } from '../../utils/private.portal/portal.js'
 import { injectProp } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
 
@@ -16,12 +22,12 @@ import { injectProp } from '../../utils/private.inject-obj-prop/inject-obj-prop.
  */
 const QPortal = createComponent({
   name: 'QPortal',
-  setup (_, { slots }) {
+  setup(_, { slots }) {
     return () => slots.default()
   }
 })
 
-function isOnGlobalDialog (vm) {
+function isOnGlobalDialog(vm) {
   vm = vm.parent
 
   while (vm !== void 0 && vm !== null) {
@@ -41,7 +47,7 @@ function isOnGlobalDialog (vm) {
 // Warning!
 // You MUST specify "inheritAttrs: false" in your component
 
-export default function (vm, innerRef, renderPortalContent, type) {
+export default function usePortal(vm, innerRef, renderPortalContent, type) {
   // showing, including while in show/hide transition
   const portalIsActive = ref(false)
 
@@ -63,7 +69,7 @@ export default function (vm, innerRef, renderPortalContent, type) {
   const focusObj = {}
   const onGlobalDialog = type === 'dialog' && isOnGlobalDialog(vm)
 
-  function showPortal (isReady) {
+  function showPortal(isReady) {
     if (isReady === true) {
       removeFocusWaitFlag(focusObj)
       portalIsAccessible.value = true
@@ -86,7 +92,7 @@ export default function (vm, innerRef, renderPortalContent, type) {
     }
   }
 
-  function hidePortal (isReady) {
+  function hidePortal(isReady) {
     portalIsAccessible.value = false
 
     if (isReady !== true) return
@@ -106,7 +112,9 @@ export default function (vm, innerRef, renderPortalContent, type) {
     }
   }
 
-  onUnmounted(() => { hidePortal(true) })
+  onUnmounted(() => {
+    hidePortal(true)
+  })
 
   // needed for portal vm detection
   vm.proxy.__qPortal = true
@@ -121,14 +129,11 @@ export default function (vm, innerRef, renderPortalContent, type) {
     portalIsActive,
     portalIsAccessible,
 
-    renderPortal: () => (
+    renderPortal: () =>
       onGlobalDialog === true
         ? renderPortalContent()
-        : (
-            portalIsActive.value === true
-              ? [ h(Teleport, { to: portalEl }, h(QPortal, renderPortalContent)) ]
-              : void 0
-          )
-    )
+        : portalIsActive.value === true
+          ? [h(Teleport, { to: portalEl }, h(QPortal, renderPortalContent))]
+          : void 0
   }
 }

package/src/composables/private.use-prevent-scroll/use-prevent-scroll.js

@@ -1,13 +1,13 @@
 import preventScroll from '../../utils/scroll/prevent-scroll.js'
 
-export default function () {
+export default function usePreventScroll() {
   let currentState
 
   return {
-    preventBodyScroll (state) {
+    preventBodyScroll(state) {
       if (
-        state !== currentState
-        && (currentState !== void 0 || state === true)
+        state !== currentState &&
+        (currentState !== void 0 || state === true)
       ) {
         currentState = state
         preventScroll(state)

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

@@ -1,10 +1,10 @@
 import { computed } from 'vue'
 
 export const useRatioProps = {
-  ratio: [ String, Number ]
+  ratio: [String, Number]
 }
 
-export default function (props, naturalRatio) {
+export default function useRatio(props, naturalRatio) {
   // return ratioStyle
   return computed(() => {
     const ratio = Number(
@@ -12,7 +12,7 @@ export default function (props, naturalRatio) {
     )
 
     return isNaN(ratio) !== true && ratio > 0
-      ? { paddingBottom: `${ 100 / ratio }%` }
+      ? { paddingBottom: `${100 / ratio}%` }
       : null
   })
 }

package/src/composables/private.use-ratio/use-ratio.json

@@ -1,14 +1,9 @@
 {
   "props": {
     "ratio": {
-      "type": [ "String", "Number" ],
+      "type": ["String", "Number"],
       "desc": "Aspect ratio for the content; If value is a String, then avoid using a computational statement (like '16/9') and instead specify the String value of the result directly (eg. '1.7777')",
-      "examples": [
-        "1",
-        "'1.7778'",
-        "# :ratio=\"4/3\"",
-        "# :ratio=\"16/9\""
-      ],
+      "examples": ["1", "'1.7778'", "# :ratio=\"4/3\"", "# :ratio=\"16/9\""],
       "category": "style"
     }
   }

package/src/composables/private.use-refocus-target/use-refocus-target.js

@@ -1,6 +1,6 @@
 import { h, computed, ref } from 'vue'
 
-export default function (props, rootRef) {
+export default function useRefocusTarget(props, rootRef) {
   const refocusRef = ref(null)
 
   const refocusTargetEl = computed(() => {
@@ -15,22 +15,21 @@ export default function (props, rootRef) {
     })
   })
 
-  function refocusTarget (e) {
+  function refocusTarget(e) {
     const root = rootRef.value
 
     if (e?.qAvoidFocus === true) return
 
     if (e?.type.indexOf('key') === 0) {
       if (
-        document.activeElement !== root
-        && root?.contains(document.activeElement) === true
+        document.activeElement !== root &&
+        root?.contains(document.activeElement) === true
       ) {
         root.focus()
       }
-    }
-    else if (
-      refocusRef.value !== null
-      && ((e === void 0) || (root?.contains(e.target) === true))
+    } else if (
+      refocusRef.value !== null &&
+      (e === void 0 || root?.contains(e.target) === true)
     ) {
       refocusRef.value.focus()
     }

package/src/composables/private.use-router-link/use-router-link.js

@@ -8,37 +8,30 @@ import { computed, getCurrentInstance } from 'vue'
 import { vmHasRouter } from '../../utils/private.vm/vm.js'
 
 // Get the original path value of a record by following its aliasOf
-function getOriginalPath (record) {
-  return record
-    ? (
-        record.aliasOf
-          ? record.aliasOf.path
-          : record.path
-      ) : ''
+function getOriginalPath(record) {
+  return record ? (record.aliasOf ? record.aliasOf.path : record.path) : ''
 }
 
-function isSameRouteRecord (a, b) {
+function isSameRouteRecord(a, b) {
   // since the original record has an undefined value for aliasOf
   // but all aliases point to the original record, this will always compare
   // the original record
   return (a.aliasOf || a) === (b.aliasOf || b)
 }
 
-function includesParams (outer, inner) {
+function includesParams(outer, inner) {
   for (const key in inner) {
-    const
-      innerValue = inner[ key ],
-      outerValue = outer[ key ]
+    const innerValue = inner[key],
+      outerValue = outer[key]
 
     if (typeof innerValue === 'string') {
       if (innerValue !== outerValue) {
         return false
       }
-    }
-    else if (
-      Array.isArray(outerValue) === false
-      || outerValue.length !== innerValue.length
-      || innerValue.some((value, i) => value !== outerValue[ i ])
+    } else if (
+      Array.isArray(outerValue) === false ||
+      outerValue.length !== innerValue.length ||
+      innerValue.some((value, i) => value !== outerValue[i])
     ) {
       return false
     }
@@ -47,29 +40,27 @@ function includesParams (outer, inner) {
   return true
 }
 
-function isEquivalentArray (a, b) {
+function isEquivalentArray(a, b) {
   return Array.isArray(b) === true
-    ? a.length === b.length && a.every((value, i) => value === b[ i ])
-    : a.length === 1 && a[ 0 ] === b
+    ? a.length === b.length && a.every((value, i) => value === b[i])
+    : a.length === 1 && a[0] === b
 }
 
-function isSameRouteLocationParamsValue (a, b) {
+function isSameRouteLocationParamsValue(a, b) {
   return Array.isArray(a) === true
     ? isEquivalentArray(a, b)
-    : (
-        Array.isArray(b) === true
-          ? isEquivalentArray(b, a)
-          : a === b
-      )
+    : Array.isArray(b) === true
+      ? isEquivalentArray(b, a)
+      : a === b
 }
 
-function isSameRouteLocationParams (a, b) {
+function isSameRouteLocationParams(a, b) {
   if (Object.keys(a).length !== Object.keys(b).length) {
     return false
   }
 
   for (const key in a) {
-    if (isSameRouteLocationParamsValue(a[ key ], b[ key ]) === false) {
+    if (isSameRouteLocationParamsValue(a[key], b[key]) === false) {
       return false
     }
   }
@@ -79,7 +70,7 @@ function isSameRouteLocationParams (a, b) {
 
 export const useRouterLinkNonMatchingProps = {
   // router-link
-  to: [ String, Object ],
+  to: [String, Object],
   replace: Boolean,
 
   // regular <a> link
@@ -107,67 +98,76 @@ export const useRouterLinkProps = {
 
 // external props: type, tag
 
-export default function ({ fallbackTag, useDisableForRouterLinkProps = true } = {}) {
+export default function useRouterLink({
+  fallbackTag,
+  useDisableForRouterLinkProps = true
+} = {}) {
   const vm = getCurrentInstance()
   const { props, proxy, emit } = vm
 
   const hasRouter = vmHasRouter(vm)
-  const hasHrefLink = computed(() => props.disable !== true && props.href !== void 0)
+  const hasHrefLink = computed(
+    () => props.disable !== true && props.href !== void 0
+  )
 
   // for perf reasons, we use minimum amount of runtime work
-  const hasRouterLinkProps = useDisableForRouterLinkProps === true
-    ? computed(() =>
-      hasRouter === true
-      && props.disable !== true
-      && hasHrefLink.value !== true
-      && props.to !== void 0 && props.to !== null && props.to !== ''
-    )
-    : computed(() =>
-      hasRouter === true
-      && hasHrefLink.value !== true
-      && props.to !== void 0 && props.to !== null && props.to !== ''
-    )
+  const hasRouterLinkProps =
+    useDisableForRouterLinkProps === true
+      ? computed(
+          () =>
+            hasRouter === true &&
+            props.disable !== true &&
+            hasHrefLink.value !== true &&
+            props.to !== void 0 &&
+            props.to !== null &&
+            props.to !== ''
+        )
+      : computed(
+          () =>
+            hasRouter === true &&
+            hasHrefLink.value !== true &&
+            props.to !== void 0 &&
+            props.to !== null &&
+            props.to !== ''
+        )
 
-  const resolvedLink = computed(() => (
-    hasRouterLinkProps.value === true
-      ? getLink(props.to)
-      : null
-  ))
+  const resolvedLink = computed(() =>
+    hasRouterLinkProps.value === true ? getLink(props.to) : null
+  )
 
   const hasRouterLink = computed(() => resolvedLink.value !== null)
-  const hasLink = computed(() => hasHrefLink.value === true || hasRouterLink.value === true)
+  const hasLink = computed(
+    () => hasHrefLink.value === true || hasRouterLink.value === true
+  )
 
-  const linkTag = computed(() => (
+  const linkTag = computed(() =>
     props.type === 'a' || hasLink.value === true
       ? 'a'
-      : (props.tag || fallbackTag || 'div')
-  ))
+      : props.tag || fallbackTag || 'div'
+  )
 
-  const linkAttrs = computed(() => (
+  const linkAttrs = computed(() =>
     hasHrefLink.value === true
       ? {
           href: props.href,
           target: props.target
         }
-      : (
-          hasRouterLink.value === true
-            ? {
-                href: resolvedLink.value.href,
-                target: props.target
-              }
-            : {}
-        )
-  ))
+      : hasRouterLink.value === true
+        ? {
+            href: resolvedLink.value.href,
+            target: props.target
+          }
+        : {}
+  )
 
   const linkActiveIndex = computed(() => {
     if (hasRouterLink.value === false) {
       return -1
     }
 
-    const
-      { matched } = resolvedLink.value,
+    const { matched } = resolvedLink.value,
       { length } = matched,
-      routeMatched = matched[ length - 1 ]
+      routeMatched = matched[length - 1]
 
     if (routeMatched === void 0) {
       return -1
@@ -188,53 +188,54 @@ export default function ({ fallbackTag, useDisableForRouterLinkProps = true } =
     }
 
     // possible parent record
-    const parentRecordPath = getOriginalPath(matched[ length - 2 ])
+    const parentRecordPath = getOriginalPath(matched[length - 2])
 
     return (
       // we are dealing with nested routes
-      length > 1
-      // if the parent and matched route have the same path, this link is
-      // referring to the empty child. Or we currently are on a different
-      // child of the same parent
-      && getOriginalPath(routeMatched) === parentRecordPath
-      // avoid comparing the child with its parent
-      && currentMatched[ currentMatched.length - 1 ].path !== parentRecordPath
+      length > 1 &&
+        // if the parent and matched route have the same path, this link is
+        // referring to the empty child. Or we currently are on a different
+        // child of the same parent
+        getOriginalPath(routeMatched) === parentRecordPath &&
+        // avoid comparing the child with its parent
+        currentMatched[currentMatched.length - 1].path !== parentRecordPath
         ? currentMatched.findIndex(
-          isSameRouteRecord.bind(null, matched[ length - 2 ])
-        )
+            isSameRouteRecord.bind(null, matched[length - 2])
+          )
         : index
     )
   })
 
-  const linkIsActive = computed(() =>
-    hasRouterLink.value === true
-    && linkActiveIndex.value !== -1
-    && includesParams(proxy.$route.params, resolvedLink.value.params)
+  const linkIsActive = computed(
+    () =>
+      hasRouterLink.value === true &&
+      linkActiveIndex.value !== -1 &&
+      includesParams(proxy.$route.params, resolvedLink.value.params)
   )
 
-  const linkIsExactActive = computed(() =>
-    linkIsActive.value === true
-      && linkActiveIndex.value === proxy.$route.matched.length - 1
-      && isSameRouteLocationParams(proxy.$route.params, resolvedLink.value.params)
+  const linkIsExactActive = computed(
+    () =>
+      linkIsActive.value === true &&
+      linkActiveIndex.value === proxy.$route.matched.length - 1 &&
+      isSameRouteLocationParams(proxy.$route.params, resolvedLink.value.params)
   )
 
-  const linkClass = computed(() => (
+  const linkClass = computed(() =>
     hasRouterLink.value === true
-      ? (
-          linkIsExactActive.value === true
-            ? ` ${ props.exactActiveClass } ${ props.activeClass }`
-            : (
-                props.exact === true
-                  ? ''
-                  : (linkIsActive.value === true ? ` ${ props.activeClass }` : '')
-              )
-        )
+      ? linkIsExactActive.value === true
+        ? ` ${props.exactActiveClass} ${props.activeClass}`
+        : props.exact === true
+          ? ''
+          : linkIsActive.value === true
+            ? ` ${props.activeClass}`
+            : ''
       : ''
-  ))
+  )
 
-  function getLink (to) {
-    try { return proxy.$router.resolve(to) }
-    catch (_) {}
+  function getLink(to) {
+    try {
+      return proxy.$router.resolve(to)
+    } catch {}
 
     return null
   }
@@ -242,7 +243,7 @@ export default function ({ fallbackTag, useDisableForRouterLinkProps = true } =
   /**
    * @returns Promise<RouterError | false | undefined>
    */
-  function navigateToRouterLink (
+  function navigateToRouterLink(
     e,
     { returnRouterError, to = props.to, replace = props.replace } = {}
   ) {
@@ -256,13 +257,14 @@ export default function ({ fallbackTag, useDisableForRouterLinkProps = true } =
     if (
       // don't redirect with control keys;
       // should match RouterLink from Vue Router
-      e.metaKey || e.altKey || e.ctrlKey || e.shiftKey
-
+      e.metaKey ||
+      e.altKey ||
+      e.ctrlKey ||
+      e.shiftKey ||
       // don't redirect on right click
-      || (e.button !== void 0 && e.button !== 0)
-
+      (e.button !== void 0 && e.button !== 0) ||
       // don't redirect if it should open in a new window
-      || props.target === '_blank'
+      props.target === '_blank'
     ) {
       return Promise.resolve(false)
     }
@@ -271,23 +273,22 @@ export default function ({ fallbackTag, useDisableForRouterLinkProps = true } =
     e.preventDefault()
 
     // then() can also return a "soft" router error (Vue Router behavior)
-    const promise = proxy.$router[ replace === true ? 'replace' : 'push' ](to)
+    const promise = proxy.$router[replace === true ? 'replace' : 'push'](to)
 
     return returnRouterError === true
       ? promise
-      // else catching hard errors and also "soft" ones - then(err => ...)
-      : promise.then(() => {}).catch(() => {})
+      : // else catching hard errors and also "soft" ones - then(err => ...)
+        promise.then(() => {}).catch(() => {})
   }
 
   // warning! ensure that the component using it has 'click' included in its 'emits' definition prop
-  function navigateOnClick (e) {
+  function navigateOnClick(e) {
     if (hasRouterLink.value === true) {
       const go = opts => navigateToRouterLink(e, opts)
 
       emit('click', e, go)
-      e.defaultPrevented !== true && go()
-    }
-    else {
+      if (e.defaultPrevented !== true) go()
+    } else {
       emit('click', e)
     }
   }