quasar 2.19.3 → 2.20.0

package/src/components/date/use-datetime.js

@@ -39,11 +39,8 @@ export function getDayHash(date) {
 }
 
 export default function useDatetime(props, $q) {
-  const editable = computed(
-    () => props.disable !== true && props.readonly !== true
-  )
-
-  const tabindex = computed(() => (editable.value === true ? 0 : -1))
+  const editable = computed(() => !props.disable && !props.readonly)
+  const tabindex = computed(() => (editable.value ? 0 : -1))
 
   const headerClass = computed(() => {
     const cls = []
@@ -60,7 +57,7 @@ export default function useDatetime(props, $q) {
 
   function getCurrentDate(dateOnly) {
     const d = new Date()
-    const timeFill = dateOnly === true ? null : 0
+    const timeFill = dateOnly ? null : 0
 
     if (props.calendar === 'persian') {
       const jDate = toJalaali(d)

package/src/components/dialog/QDialog.js

@@ -1,19 +1,19 @@
 import {
-  h,
-  ref,
+  Transition,
   computed,
-  watch,
+  getCurrentInstance,
+  h,
   onBeforeUnmount,
-  Transition,
-  getCurrentInstance
+  ref,
+  watch
 } from 'vue'
 
 import useHistory from '../../composables/private.use-history/use-history.js'
 import useTimeout from '../../composables/use-timeout/use-timeout.js'
 import useTick from '../../composables/use-tick/use-tick.js'
 import useModelToggle, {
-  useModelToggleProps,
-  useModelToggleEmits
+  useModelToggleEmits,
+  useModelToggleProps
 } from '../../composables/private.use-model-toggle/use-model-toggle.js'
 import useTransition, {
   useTransitionProps
@@ -104,14 +104,11 @@ export default createComponent({
 
     let shakeTimeout = null,
       refocusTarget = null,
-      isMaximized,
-      avoidAutoClose
+      isMaximized = false,
+      avoidAutoClose = false
 
     const hideOnRouteChange = computed(
-      () =>
-        props.persistent !== true &&
-        props.noRouteDismiss !== true &&
-        props.seamless !== true
+      () => !props.persistent && !props.noRouteDismiss && !props.seamless
     )
 
     const { preventBodyScroll } = usePreventScroll()
@@ -153,39 +150,37 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-dialog__inner flex no-pointer-events' +
-        ` q-dialog__inner--${props.maximized === true ? 'maximized' : 'minimized'}` +
+        ` q-dialog__inner--${props.maximized ? 'maximized' : 'minimized'}` +
         ` q-dialog__inner--${props.position} ${positionClass[props.position]}` +
-        (animating.value === true ? ' q-dialog__inner--animating' : '') +
-        (props.fullWidth === true ? ' q-dialog__inner--fullwidth' : '') +
-        (props.fullHeight === true ? ' q-dialog__inner--fullheight' : '') +
-        (props.square === true ? ' q-dialog__inner--square' : '')
+        (animating.value ? ' q-dialog__inner--animating' : '') +
+        (props.fullWidth ? ' q-dialog__inner--fullwidth' : '') +
+        (props.fullHeight ? ' q-dialog__inner--fullheight' : '') +
+        (props.square ? ' q-dialog__inner--square' : '')
     )
 
-    const useBackdrop = computed(
-      () => showing.value === true && props.seamless !== true
-    )
+    const useBackdrop = computed(() => showing.value && !props.seamless)
 
     const onEvents = computed(() =>
-      props.autoClose === true ? { onClick: onAutoClose } : {}
+      props.autoClose ? { onClick: onAutoClose } : {}
     )
 
     const rootClasses = computed(() => [
       'q-dialog fullscreen no-pointer-events ' +
-        `q-dialog--${useBackdrop.value === true ? 'modal' : 'seamless'}`,
+        `q-dialog--${useBackdrop.value ? 'modal' : 'seamless'}`,
       attrs.class
     ])
 
     watch(
       () => props.maximized,
       state => {
-        if (showing.value === true) updateMaximized(state)
+        if (showing.value) updateMaximized(state)
       }
     )
 
     watch(useBackdrop, val => {
       preventBodyScroll(val)
 
-      if (val === true) {
+      if (val) {
         addFocusout(onFocusChange)
         addEscapeKey(onEscapeKey)
       } else {
@@ -198,7 +193,7 @@ export default createComponent({
       addToHistory()
 
       refocusTarget =
-        props.noRefocus === false && document.activeElement !== null
+        !props.noRefocus && document.activeElement !== null
           ? document.activeElement
           : null
 
@@ -206,17 +201,16 @@ export default createComponent({
       showPortal()
       animating.value = true
 
-      if (props.noFocus !== true) {
+      if (props.noFocus) removeTick()
+      else {
         document.activeElement?.blur()
         registerTick(focus)
-      } else {
-        removeTick()
       }
 
       // should removeTimeout() if this gets removed
       registerTimeout(() => {
-        if (vm.proxy.$q.platform.is.ios === true) {
-          if (props.seamless !== true && document.activeElement) {
+        if (vm.proxy.$q.platform.is.ios) {
+          if (!props.seamless && document.activeElement) {
             const { top, bottom } =
                 document.activeElement.getBoundingClientRect(),
               { innerHeight } = window,
@@ -290,7 +284,7 @@ export default createComponent({
           }
         }
 
-        if (node.contains(document.activeElement) !== true) {
+        if (!node.contains(document.activeElement)) {
           node =
             node.querySelector(
               '[autofocus][tabindex], [data-autofocus][tabindex]'
@@ -334,9 +328,9 @@ export default createComponent({
     }
 
     function onEscapeKey() {
-      if (props.seamless !== true) {
-        if (props.persistent === true || props.noEscDismiss === true) {
-          if (props.maximized !== true && props.noShake !== true) shake()
+      if (!props.seamless) {
+        if (props.persistent || props.noEscDismiss) {
+          if (!props.maximized && !props.noShake) shake()
         } else {
           emit('escapeKey')
           hide()
@@ -350,24 +344,24 @@ export default createComponent({
         shakeTimeout = null
       }
 
-      if (hiding === true || showing.value === true) {
+      if (hiding || showing.value) {
         updateMaximized(false)
 
-        if (props.seamless !== true) {
+        if (!props.seamless) {
           preventBodyScroll(false)
           removeFocusout(onFocusChange)
           removeEscapeKey(onEscapeKey)
         }
       }
 
-      if (hiding !== true) {
+      if (!hiding) {
         refocusTarget = null
       }
     }
 
     function updateMaximized(active) {
-      if (active === true) {
-        if (isMaximized !== true) {
+      if (active) {
+        if (!isMaximized) {
           if (maximizedModals < 1) {
             document.body.classList.add('q-body--dialog')
           }
@@ -375,7 +369,7 @@ export default createComponent({
 
           isMaximized = true
         }
-      } else if (isMaximized === true) {
+      } else if (isMaximized) {
         if (maximizedModals < 2) {
           document.body.classList.remove('q-body--dialog')
         }
@@ -386,16 +380,16 @@ export default createComponent({
     }
 
     function onAutoClose(e) {
-      if (avoidAutoClose !== true) {
+      if (!avoidAutoClose) {
         hide(e)
         emit('click', e)
       }
     }
 
     function onBackdropClick(e) {
-      if (props.persistent !== true && props.noBackdropDismiss !== true) {
+      if (!props.persistent && !props.noBackdropDismiss) {
         hide(e)
-      } else if (props.noShake !== true) {
+      } else if (!props.noShake) {
         shake()
       }
     }
@@ -403,9 +397,9 @@ export default createComponent({
     function onFocusChange(evt) {
       // the focus is not in a vue child component
       if (
-        props.allowFocusOutside !== true &&
-        portalIsAccessible.value === true &&
-        childHasFocus(innerRef.value, evt.target) !== true
+        !props.allowFocusOutside &&
+        portalIsAccessible.value &&
+        !childHasFocus(innerRef.value, evt.target)
       ) {
         focus('[tabindex]:not([tabindex="-1"])')
       }
@@ -429,7 +423,7 @@ export default createComponent({
         'div',
         {
           role: 'dialog',
-          'aria-modal': useBackdrop.value === true ? 'true' : 'false',
+          'aria-modal': useBackdrop.value ? 'true' : 'false',
           ...attrs,
           class: rootClasses.value
         },
@@ -441,7 +435,7 @@ export default createComponent({
               appear: true
             },
             () =>
-              useBackdrop.value === true
+              useBackdrop.value
                 ? h('div', {
                     class: 'q-dialog__backdrop fixed-full',
                     style: backdropStyle.value,
@@ -453,7 +447,7 @@ export default createComponent({
           ),
 
           h(Transition, transitionProps.value, () =>
-            showing.value === true
+            showing.value
               ? h(
                   'div',
                   {

package/src/components/dialog/QDialog.test.js

@@ -3,15 +3,15 @@
  * [(prop)backdrop-filter]
  */
 
-import { mount, flushPromises } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
 import {
+  afterEach,
+  beforeEach,
   describe,
-  test,
   expect,
-  vi,
-  beforeEach,
-  afterEach,
-  onTestFinished
+  onTestFinished,
+  test,
+  vi
 } from 'vitest'
 
 import QDialog from './QDialog.js'
@@ -50,7 +50,7 @@ async function triggerEscKey(localWrapper) {
 function createFocusEl() {
   const el = document.createElement('div')
   el.setAttribute('tabindex', '0')
-  document.body.appendChild(el)
+  document.body.append(el)
 
   onTestFinished(() => {
     el.remove()