quasar 2.19.2 → 2.20.0

package/src/components/drawer/QDrawer.js

@@ -1,20 +1,20 @@
 import {
+  computed,
+  getCurrentInstance,
   h,
-  withDirectives,
+  inject,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
   ref,
-  computed,
   watch,
-  onMounted,
-  onBeforeUnmount,
-  nextTick,
-  inject,
-  getCurrentInstance
+  withDirectives
 } from 'vue'
 
 import useHistory from '../../composables/private.use-history/use-history.js'
 import useModelToggle, {
-  useModelToggleProps,
-  useModelToggleEmits
+  useModelToggleEmits,
+  useModelToggleProps
 } from '../../composables/private.use-model-toggle/use-model-toggle.js'
 import usePreventScroll from '../../composables/private.use-prevent-scroll/use-prevent-scroll.js'
 import useTimeout from '../../composables/use-timeout/use-timeout.js'
@@ -26,14 +26,20 @@ import TouchPan from '../../directives/touch-pan/TouchPan.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { between } from '../../utils/format/format.js'
-import { hSlot, hDir } from '../../utils/private.render/render.js'
+import { hDir, hSlot } from '../../utils/private.render/render.js'
 import {
-  layoutKey,
-  emptyRenderFn
+  emptyRenderFn,
+  layoutKey
 } from '../../utils/private.symbols/symbols.js'
 
 const duration = 150
 
+function updateLocal(prop, val) {
+  if (prop.value !== val) {
+    prop.value = val
+  }
+}
+
 export default createComponent({
   name: 'QDrawer',
 
@@ -112,24 +118,31 @@ export default createComponent({
           $layout.totalWidth.value <= props.breakpoint)
     )
 
-    const isMini = computed(
-      () => props.mini === true && belowBreakpoint.value !== true
+    const isMini = computed(() => props.mini && !belowBreakpoint.value)
+    const size = computed(() => (isMini.value ? props.miniWidth : props.width))
+    const fixed = computed(
+      () =>
+        props.overlay ||
+        props.miniToOverlay ||
+        $layout.view.value.includes(rightSide.value ? 'R' : 'L') ||
+        ($q.platform.is.ios && $layout.isContainer.value)
     )
 
-    const size = computed(() =>
-      isMini.value === true ? props.miniWidth : props.width
+    const showing = ref(
+      (props.showIfAbove && !belowBreakpoint.value) || props.modelValue === true
     )
 
-    const showing = ref(
-      props.showIfAbove === true && belowBreakpoint.value === false
-        ? true
-        : props.modelValue === true
+    const onLayout = computed(
+      () => !props.overlay && showing.value && !belowBreakpoint.value
+    )
+
+    const onScreenOverlay = computed(
+      () => props.overlay && showing.value && !belowBreakpoint.value
     )
 
     const hideOnRouteChange = computed(
       () =>
-        props.persistent !== true &&
-        (belowBreakpoint.value === true || onScreenOverlay.value === true)
+        !props.persistent && (belowBreakpoint.value || onScreenOverlay.value)
     )
 
     function handleShow(evt, noEvent) {
@@ -138,14 +151,14 @@ export default createComponent({
       if (evt !== false) $layout.animate()
       applyPosition(0)
 
-      if (belowBreakpoint.value === true) {
+      if (belowBreakpoint.value) {
         const otherInstance = $layout.instances[otherSide.value]
         if (otherInstance?.belowBreakpoint === true) {
           otherInstance.hide(false)
         }
 
         applyBackdrop(1)
-        if ($layout.isContainer.value !== true) preventBodyScroll(true)
+        if (!$layout.isContainer.value) preventBodyScroll(true)
       } else {
         applyBackdrop(0)
         if (evt !== false) setScrollable(false)
@@ -153,7 +166,7 @@ export default createComponent({
 
       registerTimeout(() => {
         if (evt !== false) setScrollable(true)
-        if (noEvent !== true) emit('show', evt)
+        if (!noEvent) emit('show', evt)
       }, duration)
     }
 
@@ -167,7 +180,7 @@ export default createComponent({
 
       cleanup()
 
-      if (noEvent !== true) {
+      if (!noEvent) {
         registerTimeout(() => {
           emit('hide', evt)
         }, duration)
@@ -197,8 +210,7 @@ export default createComponent({
     const rightSide = computed(() => props.side === 'right')
 
     const stateDirection = computed(
-      () =>
-        ($q.lang.rtl === true ? -1 : 1) * (rightSide.value === true ? 1 : -1)
+      () => ($q.lang.rtl ? -1 : 1) * (rightSide.value ? 1 : -1)
     )
 
     const flagBackdropBg = ref(0)
@@ -209,47 +221,19 @@ export default createComponent({
       size.value * stateDirection.value
     )
 
-    const otherSide = computed(() =>
-      rightSide.value === true ? 'left' : 'right'
-    )
+    const otherSide = computed(() => (rightSide.value ? 'left' : 'right'))
     const offset = computed(() =>
-      showing.value === true &&
-      belowBreakpoint.value === false &&
-      props.overlay === false
-        ? props.miniToOverlay === true
+      showing.value && !belowBreakpoint.value && !props.overlay
+        ? props.miniToOverlay
           ? props.miniWidth
           : size.value
         : 0
     )
 
-    const fixed = computed(
-      () =>
-        props.overlay === true ||
-        props.miniToOverlay === true ||
-        $layout.view.value.indexOf(rightSide.value ? 'R' : 'L') !== -1 ||
-        ($q.platform.is.ios === true && $layout.isContainer.value === true)
-    )
-
-    const onLayout = computed(
-      () =>
-        props.overlay === false &&
-        showing.value === true &&
-        belowBreakpoint.value === false
-    )
-
-    const onScreenOverlay = computed(
-      () =>
-        props.overlay === true &&
-        showing.value === true &&
-        belowBreakpoint.value === false
-    )
-
     const backdropClass = computed(
       () =>
         'fullscreen q-drawer__backdrop' +
-        (showing.value === false && flagPanning.value === false
-          ? ' hidden'
-          : '')
+        (!showing.value && !flagPanning.value ? ' hidden' : '')
     )
 
     const backdropStyle = computed(() => ({
@@ -257,13 +241,13 @@ export default createComponent({
     }))
 
     const headerSlot = computed(() =>
-      rightSide.value === true
+      rightSide.value
         ? $layout.rows.value.top[2] === 'r'
         : $layout.rows.value.top[0] === 'l'
     )
 
     const footerSlot = computed(() =>
-      rightSide.value === true
+      rightSide.value
         ? $layout.rows.value.bottom[2] === 'r'
         : $layout.rows.value.bottom[0] === 'l'
     )
@@ -271,18 +255,18 @@ export default createComponent({
     const aboveStyle = computed(() => {
       const css = {}
 
-      if ($layout.header.space === true && headerSlot.value === false) {
-        if (fixed.value === true) {
+      if ($layout.header.space && !headerSlot.value) {
+        if (fixed.value) {
           css.top = `${$layout.header.offset}px`
-        } else if ($layout.header.space === true) {
+        } else if ($layout.header.space) {
           css.top = `${$layout.header.size}px`
         }
       }
 
-      if ($layout.footer.space === true && footerSlot.value === false) {
-        if (fixed.value === true) {
+      if ($layout.footer.space && !footerSlot.value) {
+        if (fixed.value) {
           css.bottom = `${$layout.footer.offset}px`
-        } else if ($layout.footer.space === true) {
+        } else if ($layout.footer.space) {
           css.bottom = `${$layout.footer.size}px`
         }
       }
@@ -296,41 +280,37 @@ export default createComponent({
         transform: `translateX(${flagContentPosition.value}px)`
       }
 
-      return belowBreakpoint.value === true
-        ? acc
-        : Object.assign(acc, aboveStyle.value)
+      return belowBreakpoint.value ? acc : Object.assign(acc, aboveStyle.value)
     })
 
     const contentClass = computed(
       () =>
         'q-drawer__content fit ' +
-        ($layout.isContainer.value !== true ? 'scroll' : 'overflow-auto')
+        ($layout.isContainer.value ? 'overflow-auto' : 'scroll')
     )
 
     const classes = computed(
       () =>
         `q-drawer q-drawer--${props.side}` +
-        (flagMiniAnimate.value === true ? ' q-drawer--mini-animate' : '') +
-        (props.bordered === true ? ' q-drawer--bordered' : '') +
-        (isDark.value === true ? ' q-drawer--dark q-dark' : '') +
-        (flagPanning.value === true
+        (flagMiniAnimate.value ? ' q-drawer--mini-animate' : '') +
+        (props.bordered ? ' q-drawer--bordered' : '') +
+        (isDark.value ? ' q-drawer--dark q-dark' : '') +
+        (flagPanning.value
           ? ' no-transition'
-          : showing.value === true
+          : showing.value
             ? ''
             : ' q-layout--prevent-focus') +
-        (belowBreakpoint.value === true
+        (belowBreakpoint.value
           ? ' fixed q-drawer--on-top q-drawer--mobile q-drawer--top-padding'
-          : ` q-drawer--${isMini.value === true ? 'mini' : 'standard'}` +
-            (fixed.value === true || onLayout.value !== true ? ' fixed' : '') +
-            (props.overlay === true || props.miniToOverlay === true
-              ? ' q-drawer--on-top'
-              : '') +
-            (headerSlot.value === true ? ' q-drawer--top-padding' : ''))
+          : ` q-drawer--${isMini.value ? 'mini' : 'standard'}` +
+            (fixed.value || !onLayout.value ? ' fixed' : '') +
+            (props.overlay || props.miniToOverlay ? ' q-drawer--on-top' : '') +
+            (headerSlot.value ? ' q-drawer--top-padding' : ''))
     )
 
     const openDirective = computed(() => {
       // if props.noSwipeOpen !== true
-      const dir = $q.lang.rtl === true ? props.side : otherSide.value
+      const dir = $q.lang.rtl ? props.side : otherSide.value
 
       return [
         [
@@ -347,7 +327,7 @@ export default createComponent({
 
     const contentCloseDirective = computed(() => {
       // if belowBreakpoint.value === true && props.noSwipeClose !== true
-      const dir = $q.lang.rtl === true ? otherSide.value : props.side
+      const dir = $q.lang.rtl ? otherSide.value : props.side
 
       return [
         [
@@ -364,7 +344,7 @@ export default createComponent({
 
     const backdropCloseDirective = computed(() => {
       // if showing.value === true && props.noSwipeBackdrop !== true
-      const dir = $q.lang.rtl === true ? otherSide.value : props.side
+      const dir = $q.lang.rtl ? otherSide.value : props.side
 
       return [
         [
@@ -390,17 +370,17 @@ export default createComponent({
     }
 
     watch(belowBreakpoint, val => {
-      if (val === true) {
+      if (val) {
         // from lg to xs
         lastDesktopState = showing.value
-        if (showing.value === true) hide(false)
+        if (showing.value) hide(false)
       } else if (
-        props.overlay === false &&
+        !props.overlay &&
         props.behavior !== 'mobile' &&
         lastDesktopState !== false
       ) {
         // from xs to lg
-        if (showing.value === true) {
+        if (showing.value) {
           applyPosition(0)
           applyBackdrop(0)
           cleanup()
@@ -427,10 +407,7 @@ export default createComponent({
     )
 
     watch($layout.totalWidth, () => {
-      if (
-        $layout.isContainer.value === true ||
-        document.qScrollPrevented !== true
-      ) {
+      if ($layout.isContainer.value || !document.qScrollPrevented) {
         updateBelowBreakpoint()
       }
     })
@@ -438,12 +415,12 @@ export default createComponent({
     watch(() => props.behavior + props.breakpoint, updateBelowBreakpoint)
 
     watch($layout.isContainer, val => {
-      if (showing.value === true) preventBodyScroll(val !== true)
-      if (val === true) updateBelowBreakpoint()
+      if (showing.value) preventBodyScroll(!val)
+      if (val) updateBelowBreakpoint()
     })
 
     watch($layout.scrollbarWidth, () => {
-      applyPosition(showing.value === true ? 0 : void 0)
+      applyPosition(showing.value ? 0 : void 0)
     })
 
     watch(offset, val => {
@@ -482,7 +459,7 @@ export default createComponent({
       () => props.mini,
       () => {
         if (props.noMiniAnimation) return
-        if (props.modelValue === true) {
+        if (props.modelValue) {
           animateMini()
           $layout.animate()
         }
@@ -496,14 +473,14 @@ export default createComponent({
     function applyPosition(position) {
       if (position === void 0) {
         nextTick(() => {
-          position = showing.value === true ? 0 : size.value
+          position = showing.value ? 0 : size.value
           applyPosition(stateDirection.value * position)
         })
       } else {
         if (
-          $layout.isContainer.value === true &&
-          rightSide.value === true &&
-          (belowBreakpoint.value === true || Math.abs(position) === size.value)
+          $layout.isContainer.value &&
+          rightSide.value &&
+          (belowBreakpoint.value || Math.abs(position) === size.value)
         ) {
           position += stateDirection.value * $layout.scrollbarWidth.value
         }
@@ -517,8 +494,7 @@ export default createComponent({
     }
 
     function setScrollable(v) {
-      const action =
-        v === true ? 'remove' : $layout.isContainer.value !== true ? 'add' : ''
+      const action = v ? 'remove' : $layout.isContainer.value ? '' : 'add'
 
       if (action !== '') {
         document.body.classList[action]('q-body--drawer-toggle')
@@ -543,19 +519,17 @@ export default createComponent({
     }
 
     function onOpenPan(evt) {
-      if (showing.value !== false) {
-        // some browsers might capture and trigger this
-        // even if Drawer has just been opened (but animation is still pending)
-        return
-      }
+      // some browsers might capture and trigger this
+      // even if Drawer has just been opened (but animation is still pending)
+      if (!showing.value) return
 
       const width = size.value,
         position = between(evt.distance.x, 0, width)
 
-      if (evt.isFinal === true) {
+      if (evt.isFinal) {
         const opened = position >= Math.min(75, width)
 
-        if (opened === true) {
+        if (opened) {
           show()
         } else {
           $layout.animate()
@@ -568,34 +542,30 @@ export default createComponent({
       }
 
       applyPosition(
-        ($q.lang.rtl === true ? rightSide.value !== true : rightSide.value)
+        ($q.lang.rtl ? !rightSide.value : rightSide.value)
           ? Math.max(width - position, 0)
           : Math.min(0, position - width)
       )
       applyBackdrop(between(position / width, 0, 1))
 
-      if (evt.isFirst === true) {
-        flagPanning.value = true
-      }
+      if (evt.isFirst) flagPanning.value = true
     }
 
     function onClosePan(evt) {
-      if (showing.value !== true) {
-        // some browsers might capture and trigger this
-        // even if Drawer has just been closed (but animation is still pending)
-        return
-      }
+      // some browsers might capture and trigger this
+      // even if Drawer has just been closed (but animation is still pending)
+      if (!showing.value) return
 
       const width = size.value,
         dir = evt.direction === props.side,
-        position = ($q.lang.rtl === true ? dir !== true : dir)
+        position = ($q.lang.rtl ? !dir : dir)
           ? between(evt.distance.x, 0, width)
           : 0
 
-      if (evt.isFinal === true) {
+      if (evt.isFinal) {
         const opened = Math.abs(position) < Math.min(75, width)
 
-        if (opened === true) {
+        if (opened) {
           $layout.animate()
           applyBackdrop(1)
           applyPosition(0)
@@ -610,9 +580,7 @@ export default createComponent({
       applyPosition(stateDirection.value * position)
       applyBackdrop(between(1 - position / width, 0, 1))
 
-      if (evt.isFirst === true) {
-        flagPanning.value = true
-      }
+      if (evt.isFirst) flagPanning.value = true
     }
 
     function cleanup() {
@@ -624,14 +592,8 @@ export default createComponent({
       $layout.update(props.side, prop, val)
     }
 
-    function updateLocal(prop, val) {
-      if (prop.value !== val) {
-        prop.value = val
-      }
-    }
-
     function updateSizeOnLayout(miniToOverlay, newSize) {
-      updateLayout('size', miniToOverlay === true ? props.miniWidth : newSize)
+      updateLayout('size', miniToOverlay ? props.miniWidth : newSize)
     }
 
     $layout.instances[props.side] = instance
@@ -640,9 +602,9 @@ export default createComponent({
     updateLayout('offset', offset.value)
 
     if (
-      props.showIfAbove === true &&
-      props.modelValue !== true &&
-      showing.value === true &&
+      props.showIfAbove &&
+      !props.modelValue &&
+      showing.value &&
       props['onUpdate:modelValue'] !== void 0
     ) {
       emit('update:modelValue', true)
@@ -652,10 +614,10 @@ export default createComponent({
       emit('onLayout', onLayout.value)
       emit('miniState', isMini.value)
 
-      lastDesktopState = props.showIfAbove === true
+      lastDesktopState = props.showIfAbove
 
       const fn = () => {
-        const action = showing.value === true ? handleShow : handleHide
+        const action = showing.value ? handleShow : handleHide
         action(false, true)
       }
 
@@ -670,11 +632,7 @@ export default createComponent({
         layoutTotalWidthWatcher()
         layoutTotalWidthWatcher = void 0
 
-        if (
-          showing.value === false &&
-          props.showIfAbove === true &&
-          belowBreakpoint.value === false
-        ) {
+        if (!showing.value && props.showIfAbove && !belowBreakpoint.value) {
           show(false)
         } else {
           fn()
@@ -690,7 +648,7 @@ export default createComponent({
         timerMini = null
       }
 
-      if (showing.value === true) cleanup()
+      if (showing.value) cleanup()
 
       if ($layout.instances[props.side] === instance) {
         $layout.instances[props.side] = void 0
@@ -703,8 +661,8 @@ export default createComponent({
     return () => {
       const child = []
 
-      if (belowBreakpoint.value === true) {
-        if (props.noSwipeOpen === false) {
+      if (belowBreakpoint.value) {
+        if (!props.noSwipeOpen) {
           child.push(
             withDirectives(
               h('div', {
@@ -729,13 +687,13 @@ export default createComponent({
             },
             void 0,
             'backdrop',
-            props.noSwipeBackdrop !== true && showing.value === true,
+            !props.noSwipeBackdrop && showing.value,
             () => backdropCloseDirective.value
           )
         )
       }
 
-      const mini = isMini.value === true && slots.mini !== void 0
+      const mini = isMini.value && slots.mini !== void 0
       const content = [
         h(
           'div',
@@ -744,11 +702,11 @@ export default createComponent({
             key: String(mini), // required otherwise Vue will not diff correctly
             class: [contentClass.value, attrs.class]
           },
-          mini === true ? slots.mini() : hSlot(slots.default)
+          mini ? slots.mini() : hSlot(slots.default)
         )
       ]
 
-      if (props.elevated === true && showing.value === true) {
+      if (props.elevated && showing.value) {
         content.push(
           h('div', {
             class:
@@ -763,7 +721,7 @@ export default createComponent({
           { ref: 'content', class: classes.value, style: style.value },
           content,
           'contentclose',
-          props.noSwipeClose !== true && belowBreakpoint.value === true,
+          !props.noSwipeClose && belowBreakpoint.value,
           () => contentCloseDirective.value
         )
       )