quasar 2.19.2 → 2.20.0

package/src/components/markup-table/QMarkupTable.js

@@ -1,4 +1,4 @@
-import { h, computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h } from 'vue'
 
 import useDark, {
   useDarkProps
@@ -36,14 +36,12 @@ export default createComponent({
       () =>
         'q-markup-table q-table__container q-table__card' +
         ` q-table--${props.separator}-separator` +
-        (isDark.value === true
-          ? ' q-table--dark q-table__card--dark q-dark'
-          : '') +
-        (props.dense === true ? ' q-table--dense' : '') +
-        (props.flat === true ? ' q-table--flat' : '') +
-        (props.bordered === true ? ' q-table--bordered' : '') +
-        (props.square === true ? ' q-table--square' : '') +
-        (props.wrapCells === false ? ' q-table--no-wrap' : '')
+        (isDark.value ? ' q-table--dark q-table__card--dark q-dark' : '') +
+        (props.dense ? ' q-table--dense' : '') +
+        (props.flat ? ' q-table--flat' : '') +
+        (props.bordered ? ' q-table--bordered' : '') +
+        (props.square ? ' q-table--square' : '') +
+        (props.wrapCells ? '' : ' q-table--no-wrap')
     )
 
     return () =>

package/src/components/menu/QMenu.js

@@ -1,11 +1,11 @@
 import {
-  h,
-  ref,
-  computed,
-  watch,
   Transition,
+  computed,
+  getCurrentInstance,
+  h,
   onBeforeUnmount,
-  getCurrentInstance
+  ref,
+  watch
 } from 'vue'
 
 import useAnchor, {
@@ -13,8 +13,8 @@ import useAnchor, {
 } from '../../composables/private.use-anchor/use-anchor.js'
 import useScrollTarget from '../../composables/private.use-scroll-target/use-scroll-target.js'
 import useModelToggle, {
-  useModelToggleProps,
-  useModelToggleEmits
+  useModelToggleEmits,
+  useModelToggleProps
 } from '../../composables/private.use-model-toggle/use-model-toggle.js'
 import useDark, {
   useDarkProps
@@ -47,10 +47,10 @@ import {
 import { addFocusFn } from '../../utils/private.focus/focus-manager.js'
 
 import {
-  validatePosition,
-  validateOffset,
+  parsePosition,
   setPosition,
-  parsePosition
+  validateOffset,
+  validatePosition
 } from '../../utils/private.position-engine/position-engine.js'
 
 export default createComponent({
@@ -120,7 +120,7 @@ export default createComponent({
     const showing = ref(false)
 
     const hideOnRouteChange = computed(
-      () => props.persistent !== true && props.noRouteDismiss !== true
+      () => !props.persistent && !props.noRouteDismiss
     )
 
     const isDark = useDark(props, $q)
@@ -152,7 +152,7 @@ export default createComponent({
       anchorEl,
       innerRef,
       onClickOutside(e) {
-        if (props.persistent !== true && showing.value === true) {
+        if (!props.persistent && showing.value) {
           hide(e)
 
           if (
@@ -171,34 +171,31 @@ export default createComponent({
 
     const anchorOrigin = computed(() =>
       parsePosition(
-        props.anchor ||
-          (props.cover === true ? 'center middle' : 'bottom start'),
+        props.anchor || (props.cover ? 'center middle' : 'bottom start'),
         $q.lang.rtl
       )
     )
 
     const selfOrigin = computed(() =>
-      props.cover === true
+      props.cover
         ? 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' : '')
+        (props.square ? ' q-menu--square' : '') +
+        (isDark.value ? ' q-menu--dark q-dark' : '')
     )
 
     const onEvents = computed(() =>
-      props.autoClose === true ? { onClick: onAutoClose } : {}
+      props.autoClose ? { onClick: onAutoClose } : {}
     )
 
-    const handlesFocus = computed(
-      () => showing.value === true && props.persistent !== true
-    )
+    const handlesFocus = computed(() => showing.value && !props.persistent)
 
     watch(handlesFocus, val => {
-      if (val === true) {
+      if (val) {
         addEscapeKey(onEscapeKey)
         addClickOutside(clickOutsideProps)
       } else {
@@ -211,7 +208,7 @@ export default createComponent({
       addFocusFn(() => {
         let node = innerRef.value
 
-        if (node && node.contains(document.activeElement) !== true) {
+        if (node && !node.contains(document.activeElement)) {
           node =
             node.querySelector(
               '[autofocus][tabindex], [data-autofocus][tabindex]'
@@ -227,7 +224,7 @@ export default createComponent({
     }
 
     function handleShow(evt) {
-      refocusTarget = props.noRefocus === false ? document.activeElement : null
+      refocusTarget = props.noRefocus ? null : document.activeElement
 
       addFocusout(onFocusout)
 
@@ -261,20 +258,20 @@ export default createComponent({
         )
       }
 
-      if (props.noFocus !== true) {
+      if (!props.noFocus) {
         document.activeElement.blur()
       }
 
       // should removeTick() if this gets removed
       registerTick(() => {
         updatePosition()
-        if (props.noFocus !== true) focus()
+        if (!props.noFocus) focus()
       })
 
       // should removeTimeout() if this gets removed
       registerTimeout(() => {
         // required in order to avoid the "double-tap needed" issue
-        if ($q.platform.is.ios === true) {
+        if ($q.platform.is.ios) {
           // if auto-close, then this click should
           // not close the menu
           avoidAutoClose = props.autoClose
@@ -298,7 +295,7 @@ export default createComponent({
         // 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)
       ) {
         ;(
           (evt?.type.indexOf('key') === 0
@@ -324,14 +321,14 @@ export default createComponent({
         unwatchPosition = void 0
       }
 
-      if (hiding === true || showing.value === true) {
+      if (hiding || showing.value) {
         removeFocusout(onFocusout)
         unconfigureScrollTarget()
         removeClickOutside(clickOutsideProps)
         removeEscapeKey(onEscapeKey)
       }
 
-      if (hiding !== true) {
+      if (!hiding) {
         refocusTarget = null
       }
     }
@@ -349,7 +346,7 @@ export default createComponent({
     function onAutoClose(e) {
       // if auto-close, then the ios double-tap fix which
       // issues a click should not close the menu
-      if (avoidAutoClose !== true) {
+      if (!avoidAutoClose) {
         closePortalMenus(proxy, e)
         emit('click', e)
       } else {
@@ -360,16 +357,16 @@ export default createComponent({
     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 &&
+        !props.noFocus &&
+        !childHasFocus(innerRef.value, evt.target)
       ) {
         focus()
       }
     }
 
     function onEscapeKey(evt) {
-      if (props.noEscDismiss !== true) {
+      if (!props.noEscDismiss) {
         emit('escapeKey')
         hide(evt)
       }
@@ -392,7 +389,7 @@ export default createComponent({
 
     function renderPortalContent() {
       return h(Transition, transitionProps.value, () =>
-        showing.value === true
+        showing.value
           ? h(
               'div',
               {
@@ -413,7 +410,9 @@ export default createComponent({
       )
     }
 
-    onBeforeUnmount(anchorCleanup)
+    onBeforeUnmount(() => {
+      anchorCleanup()
+    })
 
     // expose public methods
     Object.assign(proxy, { focus, updatePosition })

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

@@ -21,7 +21,7 @@ export default createComponent({
     const { isHydrated } = useHydration()
 
     return () => {
-      if (isHydrated.value === true) {
+      if (isHydrated.value) {
         const node = hSlot(slots.default)
         return node === void 0
           ? node

package/src/components/option-group/QOptionGroup.js

@@ -1,4 +1,4 @@
-import { h, computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h } from 'vue'
 
 import QRadio from '../radio/QRadio.js'
 import QCheckbox from '../checkbox/QCheckbox.js'
@@ -75,10 +75,10 @@ export default createComponent({
     const arrayModel = Array.isArray(props.modelValue)
 
     if (props.type === 'radio') {
-      if (arrayModel === true) {
+      if (arrayModel) {
         console.error('q-option-group: model should not be array')
       }
-    } else if (arrayModel === false) {
+    } else if (!arrayModel) {
       console.error('q-option-group: model should be array in your case')
     }
 
@@ -114,7 +114,7 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-option-group q-gutter-x-sm' +
-        (props.inline === true ? ' q-option-group--inline' : '')
+        (props.inline ? ' q-option-group--inline' : '')
     )
 
     const attrs = computed(() => {
@@ -123,7 +123,7 @@ export default createComponent({
       if (props.type === 'radio') {
         acc.role = 'radiogroup'
 
-        if (props.disable === true) {
+        if (props.disable) {
           acc['aria-disabled'] = 'true'
         }
       }

package/src/components/page/QPage.js

@@ -1,11 +1,11 @@
-import { h, computed, inject, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, inject } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot } from '../../utils/private.render/render.js'
 import {
-  pageContainerKey,
+  emptyRenderFn,
   layoutKey,
-  emptyRenderFn
+  pageContainerKey
 } from '../../utils/private.symbols/symbols.js'
 
 export default createComponent({
@@ -35,32 +35,30 @@ export default createComponent({
 
     const style = computed(() => {
       const offset =
-        ($layout.header.space === true ? $layout.header.size : 0) +
-        ($layout.footer.space === true ? $layout.footer.size : 0)
+        ($layout.header.space ? $layout.header.size : 0) +
+        ($layout.footer.space ? $layout.footer.size : 0)
 
       if (typeof props.styleFn === 'function') {
-        const height =
-          $layout.isContainer.value === true
-            ? $layout.containerHeight.value
-            : $q.screen.height
+        const height = $layout.isContainer.value
+          ? $layout.containerHeight.value
+          : $q.screen.height
 
         return props.styleFn(offset, height)
       }
 
       return {
-        minHeight:
-          $layout.isContainer.value === true
-            ? $layout.containerHeight.value - offset + 'px'
-            : $q.screen.height === 0
-              ? offset !== 0
-                ? `calc(100vh - ${offset}px)`
-                : '100vh'
-              : $q.screen.height - offset + 'px'
+        minHeight: $layout.isContainer.value
+          ? $layout.containerHeight.value - offset + 'px'
+          : $q.screen.height === 0
+            ? offset !== 0
+              ? `calc(100vh - ${offset}px)`
+              : '100vh'
+            : $q.screen.height - offset + 'px'
       }
     })
 
     const classes = computed(
-      () => `q-page${props.padding === true ? ' q-layout-padding' : ''}`
+      () => `q-page${props.padding ? ' q-layout-padding' : ''}`
     )
 
     return () =>

package/src/components/page/QPageContainer.js

@@ -1,11 +1,11 @@
-import { h, computed, provide, inject, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, inject, provide } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot } from '../../utils/private.render/render.js'
 import {
-  pageContainerKey,
+  emptyRenderFn,
   layoutKey,
-  emptyRenderFn
+  pageContainerKey
 } from '../../utils/private.symbols/symbols.js'
 
 export default createComponent({
@@ -27,18 +27,18 @@ export default createComponent({
     const style = computed(() => {
       const css = {}
 
-      if ($layout.header.space === true) {
+      if ($layout.header.space) {
         css.paddingTop = `${$layout.header.size}px`
       }
-      if ($layout.right.space === true) {
-        css[`padding${$q.lang.rtl === true ? 'Left' : 'Right'}`] =
+      if ($layout.right.space) {
+        css[`padding${$q.lang.rtl ? 'Left' : 'Right'}`] =
           `${$layout.right.size}px`
       }
-      if ($layout.footer.space === true) {
+      if ($layout.footer.space) {
         css.paddingBottom = `${$layout.footer.size}px`
       }
-      if ($layout.left.space === true) {
-        css[`padding${$q.lang.rtl === true ? 'Right' : 'Left'}`] =
+      if ($layout.left.space) {
+        css[`padding${$q.lang.rtl ? 'Right' : 'Left'}`] =
           `${$layout.left.size}px`
       }
 

package/src/components/page-scroller/QPageScroller.js

@@ -1,11 +1,11 @@
 import {
-  h,
-  ref,
+  Transition,
   computed,
-  watch,
-  onBeforeUnmount,
   getCurrentInstance,
-  Transition
+  h,
+  onBeforeUnmount,
+  ref,
+  watch
 } from 'vue'
 
 import usePageSticky, {
@@ -56,13 +56,13 @@ export default createComponent({
     const scrollHeight = computed(
       () =>
         $layout.height.value -
-        ($layout.isContainer.value === true
+        ($layout.isContainer.value
           ? $layout.containerHeight.value
           : $q.screen.height)
     )
 
     function isVisible() {
-      return props.reverse === true
+      return props.reverse
         ? scrollHeight.value - $layout.scroll.value.position >
             props.scrollOffset
         : $layout.scroll.value.position > props.scrollOffset
@@ -78,7 +78,7 @@ export default createComponent({
     }
 
     function updateReverse() {
-      if (props.reverse === true) {
+      if (props.reverse) {
         if (heightWatcher === void 0) {
           heightWatcher = watch(scrollHeight, updateVisibility)
         }
@@ -99,14 +99,12 @@ export default createComponent({
 
     function onClick(e) {
       const target = getScrollTarget(
-        $layout.isContainer.value === true
-          ? rootRef.value
-          : $layout.rootRef.value
+        $layout.isContainer.value ? rootRef.value : $layout.rootRef.value
       )
 
       setVerticalScrollPosition(
         target,
-        props.reverse === true ? $layout.height.value : 0,
+        props.reverse ? $layout.height.value : 0,
         props.duration
       )
 
@@ -114,7 +112,7 @@ export default createComponent({
     }
 
     function getContent() {
-      return showing.value === true
+      return showing.value
         ? h(
             'div',
             {

package/src/components/page-sticky/use-page-sticky.js

@@ -1,9 +1,9 @@
-import { h, computed, inject, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, inject } from 'vue'
 
 import { hSlot } from '../../utils/private.render/render.js'
 import {
-  layoutKey,
-  emptyRenderFn
+  emptyRenderFn,
+  layoutKey
 } from '../../utils/private.symbols/symbols.js'
 
 export const usePageStickyProps = {
@@ -45,10 +45,10 @@ export default function usePageSticky() {
     const pos = props.position
 
     return {
-      top: pos.indexOf('top') !== -1,
-      right: pos.indexOf('right') !== -1,
-      bottom: pos.indexOf('bottom') !== -1,
-      left: pos.indexOf('left') !== -1,
+      top: pos.includes('top'),
+      right: pos.includes('right'),
+      bottom: pos.includes('bottom'),
+      left: pos.includes('left'),
       vertical: pos === 'top' || pos === 'bottom',
       horizontal: pos === 'left' || pos === 'right'
     }
@@ -64,17 +64,17 @@ export default function usePageSticky() {
       posY = 0
 
     const side = attach.value
-    const dir = $q.lang.rtl === true ? -1 : 1
+    const dir = $q.lang.rtl ? -1 : 1
 
-    if (side.top === true && top.value !== 0) {
+    if (side.top && top.value !== 0) {
       posY = `${top.value}px`
-    } else if (side.bottom === true && bottom.value !== 0) {
+    } else if (side.bottom && bottom.value !== 0) {
       posY = `${-bottom.value}px`
     }
 
-    if (side.left === true && left.value !== 0) {
+    if (side.left && left.value !== 0) {
       posX = `${dir * left.value}px`
-    } else if (side.right === true && right.value !== 0) {
+    } else if (side.right && right.value !== 0) {
       posX = `${-dir * right.value}px`
     }
 
@@ -84,14 +84,14 @@ export default function usePageSticky() {
       css.margin = `${props.offset[1]}px ${props.offset[0]}px`
     }
 
-    if (side.vertical === true) {
+    if (side.vertical) {
       if (left.value !== 0) {
-        css[$q.lang.rtl === true ? 'right' : 'left'] = `${left.value}px`
+        css[$q.lang.rtl ? 'right' : 'left'] = `${left.value}px`
       }
       if (right.value !== 0) {
-        css[$q.lang.rtl === true ? 'left' : 'right'] = `${right.value}px`
+        css[$q.lang.rtl ? 'left' : 'right'] = `${right.value}px`
       }
-    } else if (side.horizontal === true) {
+    } else if (side.horizontal) {
       if (top.value !== 0) {
         css.top = `${top.value}px`
       }
@@ -106,7 +106,7 @@ export default function usePageSticky() {
   const classes = computed(
     () =>
       `q-page-sticky row flex-center fixed-${props.position}` +
-      ` q-page-sticky--${props.expand === true ? 'expand' : 'shrink'}`
+      ` q-page-sticky--${props.expand ? 'expand' : 'shrink'}`
   )
 
   function getStickyContent(slots) {
@@ -118,7 +118,7 @@ export default function usePageSticky() {
         class: classes.value,
         style: style.value
       },
-      props.expand === true ? content : [h('div', content)]
+      props.expand ? content : [h('div', content)]
     )
   }