quasar 2.18.6 → 2.19.0

package/src/components/menu/QMenu.js

@@ -1,11 +1,28 @@
-import { h, ref, computed, watch, Transition, onBeforeUnmount, getCurrentInstance } from 'vue'
-
-import useAnchor, { useAnchorProps } from '../../composables/private.use-anchor/use-anchor.js'
+import {
+  h,
+  ref,
+  computed,
+  watch,
+  Transition,
+  onBeforeUnmount,
+  getCurrentInstance
+} from 'vue'
+
+import useAnchor, {
+  useAnchorProps
+} from '../../composables/private.use-anchor/use-anchor.js'
 import useScrollTarget from '../../composables/private.use-scroll-target/use-scroll-target.js'
-import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private.use-model-toggle/use-model-toggle.js'
-import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import useModelToggle, {
+  useModelToggleProps,
+  useModelToggleEmits
+} from '../../composables/private.use-model-toggle/use-model-toggle.js'
+import useDark, {
+  useDarkProps
+} from '../../composables/private.use-dark/use-dark.js'
 import usePortal from '../../composables/private.use-portal/use-portal.js'
-import useTransition, { useTransitionProps } from '../../composables/private.use-transition/use-transition.js'
+import useTransition, {
+  useTransitionProps
+} from '../../composables/private.use-transition/use-transition.js'
 import useTick from '../../composables/use-tick/use-tick.js'
 import useTimeout from '../../composables/use-timeout/use-timeout.js'
 
@@ -14,14 +31,26 @@ import { closePortalMenus } from '../../utils/private.portal/portal.js'
 import { getScrollTarget, scrollTargetProp } from '../../utils/scroll/scroll.js'
 import { position, stopAndPrevent } from '../../utils/event/event.js'
 import { hSlot } from '../../utils/private.render/render.js'
-import { addEscapeKey, removeEscapeKey } from '../../utils/private.keyboard/escape-key.js'
-import { addFocusout, removeFocusout } from '../../utils/private.focus/focusout.js'
+import {
+  addEscapeKey,
+  removeEscapeKey
+} from '../../utils/private.keyboard/escape-key.js'
+import {
+  addFocusout,
+  removeFocusout
+} from '../../utils/private.focus/focusout.js'
 import { childHasFocus } from '../../utils/dom/dom.js'
-import { addClickOutside, removeClickOutside } from '../../utils/private.click-outside/click-outside.js'
+import {
+  addClickOutside,
+  removeClickOutside
+} from '../../utils/private.click-outside/click-outside.js'
 import { addFocusFn } from '../../utils/private.focus/focus-manager.js'
 
 import {
-  validatePosition, validateOffset, setPosition, parsePosition
+  validatePosition,
+  validateOffset,
+  setPosition,
+  parsePosition
 } from '../../utils/private.position-engine/position-engine.js'
 
 export default createComponent({
@@ -75,13 +104,13 @@ export default createComponent({
     }
   },
 
-  emits: [
-    ...useModelToggleEmits,
-    'click', 'escapeKey'
-  ],
+  emits: [...useModelToggleEmits, 'click', 'escapeKey'],
 
-  setup (props, { slots, emit, attrs }) {
-    let refocusTarget = null, absoluteOffset, unwatchPosition, avoidAutoClose
+  setup(props, { slots, emit, attrs }) {
+    let refocusTarget = null,
+      absoluteOffset,
+      unwatchPosition,
+      avoidAutoClose
 
     const vm = getCurrentInstance()
     const { proxy } = vm
@@ -90,39 +119,47 @@ export default createComponent({
     const innerRef = ref(null)
     const showing = ref(false)
 
-    const hideOnRouteChange = computed(() =>
-      props.persistent !== true
-      && props.noRouteDismiss !== true
+    const hideOnRouteChange = computed(
+      () => props.persistent !== true && props.noRouteDismiss !== true
     )
 
     const isDark = useDark(props, $q)
     const { registerTick, removeTick } = useTick()
     const { registerTimeout } = useTimeout()
     const { transitionProps, transitionStyle } = useTransition(props)
-    const { localScrollTarget, changeScrollEvent, unconfigureScrollTarget } = useScrollTarget(props, configureScrollTarget)
+    const { localScrollTarget, changeScrollEvent, unconfigureScrollTarget } =
+      useScrollTarget(props, configureScrollTarget)
 
     const { anchorEl, canShow } = useAnchor({ showing })
 
     const { hide } = useModelToggle({
-      showing, canShow, handleShow, handleHide,
+      showing,
+      canShow,
+      handleShow,
+      handleHide,
       hideOnRouteChange,
       processOnMount: true
     })
 
-    const { showPortal, hidePortal, renderPortal } = usePortal(vm, innerRef, renderPortalContent, 'menu')
+    const { showPortal, hidePortal, renderPortal } = usePortal(
+      vm,
+      innerRef,
+      renderPortalContent,
+      'menu'
+    )
 
     const clickOutsideProps = {
       anchorEl,
       innerRef,
-      onClickOutside (e) {
+      onClickOutside(e) {
         if (props.persistent !== true && showing.value === true) {
           hide(e)
 
           if (
             // always prevent touch event
-            e.type === 'touchstart'
+            e.type === 'touchstart' ||
             // prevent click if it's on a dialog backdrop
-            || e.target.classList.contains('q-dialog__backdrop')
+            e.target.classList.contains('q-dialog__backdrop')
           ) {
             stopAndPrevent(e)
           }
@@ -134,63 +171,63 @@ export default createComponent({
 
     const anchorOrigin = computed(() =>
       parsePosition(
-        props.anchor || (
-          props.cover === true ? 'center middle' : 'bottom start'
-        ),
+        props.anchor ||
+          (props.cover === true ? 'center middle' : 'bottom start'),
         $q.lang.rtl
       )
     )
 
-    const selfOrigin = computed(() => (
+    const selfOrigin = computed(() =>
       props.cover === true
         ? anchorOrigin.value
         : parsePosition(props.self || 'top start', $q.lang.rtl)
-    ))
+    )
 
-    const menuClass = computed(() =>
-      (props.square === true ? ' q-menu--square' : '')
-      + (isDark.value === true ? ' q-menu--dark q-dark' : '')
+    const menuClass = computed(
+      () =>
+        (props.square === true ? ' q-menu--square' : '') +
+        (isDark.value === true ? ' q-menu--dark q-dark' : '')
     )
 
-    const onEvents = computed(() => (
-      props.autoClose === true
-        ? { onClick: onAutoClose }
-        : {}
-    ))
+    const onEvents = computed(() =>
+      props.autoClose === true ? { onClick: onAutoClose } : {}
+    )
 
-    const handlesFocus = computed(() =>
-      showing.value === true && props.persistent !== true
+    const handlesFocus = computed(
+      () => showing.value === true && props.persistent !== true
     )
 
     watch(handlesFocus, val => {
       if (val === true) {
         addEscapeKey(onEscapeKey)
         addClickOutside(clickOutsideProps)
-      }
-      else {
+      } else {
         removeEscapeKey(onEscapeKey)
         removeClickOutside(clickOutsideProps)
       }
     })
 
-    function focus () {
+    function focus() {
       addFocusFn(() => {
         let node = innerRef.value
 
-        if (node && (node.contains(document.activeElement) !== true)) {
-          node = node.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]')
-            || node.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]')
-            || node.querySelector('[autofocus], [data-autofocus]')
-            || node
+        if (node && node.contains(document.activeElement) !== true) {
+          node =
+            node.querySelector(
+              '[autofocus][tabindex], [data-autofocus][tabindex]'
+            ) ||
+            node.querySelector(
+              '[autofocus] [tabindex], [data-autofocus] [tabindex]'
+            ) ||
+            node.querySelector('[autofocus], [data-autofocus]') ||
+            node
           node.focus({ preventScroll: true })
         }
       })
     }
 
-    function handleShow (evt) {
-      refocusTarget = props.noRefocus === false
-        ? document.activeElement
-        : null
+    function handleShow(evt) {
+      refocusTarget = props.noRefocus === false ? document.activeElement : null
 
       addFocusout(onFocusout)
 
@@ -210,7 +247,16 @@ export default createComponent({
 
       if (unwatchPosition === void 0) {
         unwatchPosition = watch(
-          () => $q.screen.width + '|' + $q.screen.height + '|' + props.self + '|' + props.anchor + '|' + $q.lang.rtl,
+          () =>
+            $q.screen.width +
+            '|' +
+            $q.screen.height +
+            '|' +
+            props.self +
+            '|' +
+            props.anchor +
+            '|' +
+            $q.lang.rtl,
           updatePosition
         )
       }
@@ -222,7 +268,7 @@ export default createComponent({
       // should removeTick() if this gets removed
       registerTick(() => {
         updatePosition()
-        props.noFocus !== true && focus()
+        if (props.noFocus !== true) focus()
       })
 
       // should removeTimeout() if this gets removed
@@ -241,25 +287,24 @@ export default createComponent({
       }, props.transitionDuration)
     }
 
-    function handleHide (evt) {
+    function handleHide(evt) {
       removeTick()
       hidePortal()
 
       anchorCleanup(true)
 
       if (
-        refocusTarget !== null
-        && (
-          // menu was hidden from code or ESC plugin
-          evt === void 0
+        refocusTarget !== null &&
+        // menu was hidden from code or ESC plugin
+        (evt === void 0 ||
           // menu was not closed from a mouse or touch clickOutside
-          || evt.qClickOutside !== true
-        )
+          evt.qClickOutside !== true)
       ) {
-        ((evt?.type.indexOf('key') === 0
-          ? refocusTarget.closest('[tabindex]:not([tabindex^="-"])')
-          : void 0
-        ) || refocusTarget).focus()
+        ;(
+          (evt?.type.indexOf('key') === 0
+            ? refocusTarget.closest('[tabindex]:not([tabindex^="-"])')
+            : void 0) || refocusTarget
+        ).focus()
 
         refocusTarget = null
       }
@@ -271,7 +316,7 @@ export default createComponent({
       }, props.transitionDuration)
     }
 
-    function anchorCleanup (hiding) {
+    function anchorCleanup(hiding) {
       absoluteOffset = void 0
 
       if (unwatchPosition !== void 0) {
@@ -291,44 +336,46 @@ export default createComponent({
       }
     }
 
-    function configureScrollTarget () {
+    function configureScrollTarget() {
       if (anchorEl.value !== null || props.scrollTarget !== void 0) {
-        localScrollTarget.value = getScrollTarget(anchorEl.value, props.scrollTarget)
+        localScrollTarget.value = getScrollTarget(
+          anchorEl.value,
+          props.scrollTarget
+        )
         changeScrollEvent(localScrollTarget.value, updatePosition)
       }
     }
 
-    function onAutoClose (e) {
+    function onAutoClose(e) {
       // if auto-close, then the ios double-tap fix which
       // issues a click should not close the menu
       if (avoidAutoClose !== true) {
         closePortalMenus(proxy, e)
         emit('click', e)
-      }
-      else {
+      } else {
         avoidAutoClose = false
       }
     }
 
-    function onFocusout (evt) {
+    function onFocusout(evt) {
       // the focus is not in a vue child component
       if (
-        handlesFocus.value === true
-        && props.noFocus !== true
-        && childHasFocus(innerRef.value, evt.target) !== true
+        handlesFocus.value === true &&
+        props.noFocus !== true &&
+        childHasFocus(innerRef.value, evt.target) !== true
       ) {
         focus()
       }
     }
 
-    function onEscapeKey (evt) {
+    function onEscapeKey(evt) {
       if (props.noEscDismiss !== true) {
         emit('escapeKey')
         hide(evt)
       }
     }
 
-    function updatePosition () {
+    function updatePosition() {
       setPosition({
         targetEl: innerRef.value,
         offset: props.offset,
@@ -343,29 +390,26 @@ export default createComponent({
       })
     }
 
-    function renderPortalContent () {
-      return h(
-        Transition,
-        transitionProps.value,
-        () => (
-          showing.value === true
-            ? h('div', {
-              role: 'menu',
-              ...attrs,
-              ref: innerRef,
-              tabindex: -1,
-              class: [
-                'q-menu q-position-engine scroll' + menuClass.value,
-                attrs.class
-              ],
-              style: [
-                attrs.style,
-                transitionStyle.value
-              ],
-              ...onEvents.value
-            }, hSlot(slots.default))
-            : null
-        )
+    function renderPortalContent() {
+      return h(Transition, transitionProps.value, () =>
+        showing.value === true
+          ? h(
+              'div',
+              {
+                role: 'menu',
+                ...attrs,
+                ref: innerRef,
+                tabindex: -1,
+                class: [
+                  'q-menu q-position-engine scroll' + menuClass.value,
+                  attrs.class
+                ],
+                style: [attrs.style, transitionStyle.value],
+                ...onEvents.value
+              },
+              hSlot(slots.default)
+            )
+          : null
       )
     }
 

package/src/components/menu/QMenu.json

@@ -1,5 +1,10 @@
 {
-  "mixins": [ "composables/private.use-model-toggle/use-model-toggle", "composables/private.use-portal/use-portal", "composables/private.use-anchor/use-anchor", "composables/private.use-transition/use-transition" ],
+  "mixins": [
+    "composables/private.use-model-toggle/use-model-toggle",
+    "composables/private.use-portal/use-portal",
+    "composables/private.use-anchor/use-anchor",
+    "composables/private.use-transition/use-transition"
+  ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/menu"
@@ -26,9 +31,21 @@
       "type": "String",
       "desc": "Two values setting the starting position or anchor point of the menu relative to its target",
       "values": [
-        "'top left'", "'top middle'", "'top right'", "'top start'", "'top end'",
-        "'center left'", "'center middle'", "'center right'", "'center start'", "'center end'",
-        "'bottom left'", "'bottom middle'", "'bottom right'", "'bottom start'", "'bottom end'"
+        "'top left'",
+        "'top middle'",
+        "'top right'",
+        "'top start'",
+        "'top end'",
+        "'center left'",
+        "'center middle'",
+        "'center right'",
+        "'center start'",
+        "'center end'",
+        "'bottom left'",
+        "'bottom middle'",
+        "'bottom right'",
+        "'bottom start'",
+        "'bottom end'"
       ],
       "category": "position"
     },
@@ -37,9 +54,21 @@
       "type": "String",
       "desc": "Two values setting the menu's own position relative to its target",
       "values": [
-        "'top left'", "'top middle'", "'top right'", "'top start'", "'top end'",
-        "'center left'", "'center middle'", "'center right'", "'center start'", "'center end'",
-        "'bottom left'", "'bottom middle'", "'bottom right'", "'bottom start'", "'bottom end'"
+        "'top left'",
+        "'top middle'",
+        "'top right'",
+        "'top start'",
+        "'top end'",
+        "'center left'",
+        "'center middle'",
+        "'center right'",
+        "'center start'",
+        "'center end'",
+        "'bottom left'",
+        "'bottom middle'",
+        "'bottom right'",
+        "'bottom start'",
+        "'bottom end'"
       ],
       "category": "position"
     },
@@ -47,7 +76,7 @@
     "offset": {
       "type": "Array",
       "desc": "An array of two numbers to offset the menu horizontally and vertically in pixels",
-      "examples": [ "[ 8, 8 ]", "[ 5, 10 ]" ],
+      "examples": ["[8, 8]", "[5, 10]"],
       "category": "position"
     },
 
@@ -112,7 +141,7 @@
 
     "max-height": {
       "extends": "size",
-      "type": [ "String", "null" ],
+      "type": ["String", "null"],
       "default": "null",
       "desc": "The maximum height of the menu; Size in CSS units, including unit name",
       "category": "style"
@@ -120,7 +149,7 @@
 
     "max-width": {
       "extends": "size",
-      "type": [ "String", "null" ],
+      "type": ["String", "null"],
       "default": "null",
       "desc": "The maximum width of the menu; Size in CSS units, including unit name",
       "category": "style"

package/src/components/menu/index.js

@@ -1,5 +1,3 @@
 import QMenu from './QMenu.js'
 
-export {
-  QMenu
-}
+export { QMenu }

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

@@ -17,7 +17,7 @@ export default createComponent({
     placeholder: String
   },
 
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     const { isHydrated } = useHydration()
 
     return () => {
@@ -25,7 +25,9 @@ export default createComponent({
         const node = hSlot(slots.default)
         return node === void 0
           ? node
-          : (node.length > 1 ? h(props.tag, {}, node) : node[ 0 ])
+          : node.length > 1
+            ? h(props.tag, {}, node)
+            : node[0]
       }
 
       const data = {
@@ -34,9 +36,7 @@ export default createComponent({
 
       const node = hSlot(slots.placeholder)
       if (node !== void 0) {
-        return node.length > 1
-          ? h(props.tag, data, node)
-          : node[ 0 ]
+        return node.length > 1 ? h(props.tag, data, node) : node[0]
       }
 
       if (props.placeholder !== void 0) {

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

@@ -7,13 +7,13 @@
     "tag": {
       "extends": "tag",
       "default": "'div'",
-      "examples": [ "'div'", "'span'", "'blockquote'" ]
+      "examples": ["'div'", "'span'", "'blockquote'"]
     },
 
     "placeholder": {
       "type": "String",
       "desc": "Text to display on server-side render (unless using 'placeholder' slot)",
-      "examples": [ "'This is server-side only'" ],
+      "examples": ["'This is server-side only'"],
       "category": "content"
     }
   },

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

@@ -1,5 +1,3 @@
 import QNoSsr from './QNoSsr.js'
 
-export {
-  QNoSsr
-}
+export { QNoSsr }