quasar 2.19.2 → 2.20.0

package/src/components/inner-loading/QInnerLoading.js

@@ -1,4 +1,4 @@
-import { h, computed, Transition, getCurrentInstance } from 'vue'
+import { Transition, computed, getCurrentInstance, h } from 'vue'
 
 import QSpinner from '../spinner/QSpinner.js'
 
@@ -39,7 +39,7 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-inner-loading q--avoid-card-border absolute-full column flex-center' +
-        (isDark.value === true ? ' q-inner-loading--dark' : '')
+        (isDark.value ? ' q-inner-loading--dark' : '')
     )
 
     const labelClass = computed(
@@ -73,7 +73,7 @@ export default createComponent({
     }
 
     function getContent() {
-      return props.showing === true
+      return props.showing
         ? h(
             'div',
             { class: classes.value, style: transitionStyle.value },

package/src/components/input/QInput.js

@@ -1,24 +1,24 @@
 import {
-  h,
-  ref,
   computed,
-  watch,
+  getCurrentInstance,
+  h,
+  nextTick,
   onBeforeUnmount,
   onMounted,
-  nextTick,
-  getCurrentInstance
+  ref,
+  watch
 } from 'vue'
 
 import useField, {
-  useFieldState,
-  useFieldProps,
+  fieldValueIsFilled,
   useFieldEmits,
-  fieldValueIsFilled
+  useFieldProps,
+  useFieldState
 } from '../../composables/private.use-field/use-field.js'
 import useMask, { useMaskProps } from './use-mask.js'
 import {
-  useFormProps,
-  useFormInputNameAttr
+  useFormInputNameAttr,
+  useFormProps
 } from '../../composables/use-form/private.use-form.js'
 import useFileFormDomProps from '../../composables/private.use-file/use-file-dom-props.js'
 import useKeyComposition from '../../composables/private.use-key-composition/use-key-composition.js'
@@ -72,9 +72,9 @@ export default createComponent({
     const { $q } = proxy
 
     const temp = {}
-    let emitCachedValue = NaN,
-      typedNumber,
-      stopValueWatcher,
+    let emitCachedValue = Number.NaN,
+      typedNumber = false,
+      stopValueWatcher = false,
       emitTimer = null,
       emitValueFn
 
@@ -98,12 +98,12 @@ export default createComponent({
     const state = useFieldState({ changeEvent: true })
 
     const isTextarea = computed(
-      () => props.type === 'textarea' || props.autogrow === true
+      () => props.type === 'textarea' || props.autogrow
     )
 
     const isTypeText = computed(
       () =>
-        isTextarea.value === true ||
+        isTextarea.value ||
         ['text', 'search', 'url', 'tel', 'password'].includes(props.type)
     )
 
@@ -126,13 +126,13 @@ export default createComponent({
         evt.onCompositionend =
           onComposition
 
-      if (hasMask.value === true) {
+      if (hasMask.value) {
         evt.onKeydown = onMaskedKeydown
         // reset selection anchor on pointer selection
         evt.onClick = onMaskedClick
       }
 
-      if (props.autogrow === true) {
+      if (props.autogrow) {
         evt.onAnimationend = onAnimationend
       }
 
@@ -142,22 +142,22 @@ export default createComponent({
     const inputAttrs = computed(() => {
       const acc = {
         tabindex: 0,
-        'data-autofocus': props.autofocus === true || void 0,
+        'data-autofocus': props.autofocus || void 0,
         rows: props.type === 'textarea' ? 6 : void 0,
         'aria-label': props.label,
         name: nameProp.value,
         ...state.splitAttrs.attributes.value,
         id: state.targetUid.value,
         maxlength: props.maxlength,
-        disabled: props.disable === true,
-        readonly: props.readonly === true
+        disabled: props.disable,
+        readonly: props.readonly
       }
 
-      if (isTextarea.value === false) {
+      if (!isTextarea.value) {
         acc.type = props.type
       }
 
-      if (props.autogrow === true) {
+      if (props.autogrow) {
         acc.rows = 1
       }
 
@@ -179,8 +179,8 @@ export default createComponent({
     watch(
       () => props.modelValue,
       v => {
-        if (hasMask.value === true) {
-          if (stopValueWatcher === true) {
+        if (hasMask.value) {
+          if (stopValueWatcher) {
             stopValueWatcher = false
             if (String(v) === emitCachedValue) return
           }
@@ -189,11 +189,8 @@ export default createComponent({
         } else if (innerValue.value !== v) {
           innerValue.value = v
 
-          if (
-            props.type === 'number' &&
-            temp.hasOwnProperty('value') === true
-          ) {
-            if (typedNumber === true) {
+          if (props.type === 'number' && Object.hasOwn(temp, 'value')) {
+            if (typedNumber) {
               typedNumber = false
             } else {
               delete temp.value
@@ -202,7 +199,7 @@ export default createComponent({
         }
 
         // textarea only
-        if (props.autogrow === true) nextTick(adjustHeight)
+        if (props.autogrow) nextTick(adjustHeight)
       }
     )
 
@@ -210,7 +207,7 @@ export default createComponent({
       () => props.autogrow,
       val => {
         // textarea only
-        if (val === true) {
+        if (val) {
           nextTick(adjustHeight)
         }
         // if it has a number of rows set respect it
@@ -223,7 +220,7 @@ export default createComponent({
     watch(
       () => props.dense,
       () => {
-        if (props.autogrow === true) nextTick(adjustHeight)
+        if (props.autogrow) nextTick(adjustHeight)
       }
     )
 
@@ -245,7 +242,7 @@ export default createComponent({
     }
 
     function onPaste(e) {
-      if (hasMask.value === true && props.reverseFillMask !== true) {
+      if (hasMask.value && props.reverseFillMask !== true) {
         const inp = e.target
         moveCursorForPaste(inp, inp.selectionStart, inp.selectionEnd)
       }
@@ -263,17 +260,17 @@ export default createComponent({
 
       const val = e.target.value
 
-      if (e.target.qComposing === true) {
+      if (e.target.qComposing) {
         temp.value = val
         return
       }
 
-      if (hasMask.value === true) {
+      if (hasMask.value) {
         updateMaskValue(val, false, e.inputType)
       } else {
         emitValue(val)
 
-        if (isTypeText.value === true && e.target === document.activeElement) {
+        if (isTypeText.value && e.target === document.activeElement) {
           const { selectionStart, selectionEnd } = e.target
 
           if (selectionStart !== void 0 && selectionEnd !== void 0) {
@@ -291,7 +288,7 @@ export default createComponent({
 
       // we need to trigger it immediately too,
       // to avoid "flickering"
-      if (props.autogrow === true) adjustHeight()
+      if (props.autogrow) adjustHeight()
     }
 
     function onAnimationend(e) {
@@ -303,7 +300,7 @@ export default createComponent({
       emitValueFn = () => {
         emitTimer = null
 
-        if (props.type !== 'number' && temp.hasOwnProperty('value') === true) {
+        if (props.type !== 'number' && Object.hasOwn(temp, 'value')) {
           delete temp.value
         }
 
@@ -314,7 +311,7 @@ export default createComponent({
           emit('update:modelValue', val)
 
           nextTick(() => {
-            if (emitCachedValue === val) emitCachedValue = NaN
+            if (emitCachedValue === val) emitCachedValue = Number.NaN
           })
         }
 
@@ -344,8 +341,9 @@ export default createComponent({
           // chrome does not keep scroll #15498
           const { scrollTop } = inp
           // chrome calculates a smaller scrollHeight when in a .column container
-          const { overflowY, maxHeight } =
-            $q.platform.is.firefox === true ? {} : window.getComputedStyle(inp)
+          const { overflowY, maxHeight } = $q.platform.is.firefox
+            ? {}
+            : window.getComputedStyle(inp)
           // on firefox or if overflowY is specified as scroll #14263, #14344
           // we don't touch overflow
           // firefox is not so bad in the end
@@ -353,16 +351,18 @@ export default createComponent({
 
           // reset height of textarea to a small size to detect the real height
           // but keep the total control size the same
-          if (changeOverflow === true) inp.style.overflowY = 'hidden'
+          if (changeOverflow) inp.style.overflowY = 'hidden'
           parentStyle.marginBottom = inp.scrollHeight - 1 + 'px'
           inp.style.height = '1px'
 
           inp.style.height = inp.scrollHeight + 'px'
           // we should allow scrollbars only
           // if there is maxHeight and content is taller than maxHeight
-          if (changeOverflow === true) {
+          if (changeOverflow) {
             inp.style.overflowY =
-              parseInt(maxHeight, 10) < inp.scrollHeight ? 'auto' : 'hidden'
+              Number.parseInt(maxHeight, 10) < inp.scrollHeight
+                ? 'auto'
+                : 'hidden'
           }
           parentStyle.marginBottom = ''
           inp.scrollTop = scrollTop
@@ -410,7 +410,7 @@ export default createComponent({
     }
 
     function getCurValue() {
-      return temp.hasOwnProperty('value') === true
+      return Object.hasOwn(temp, 'value')
         ? temp.value
         : innerValue.value !== void 0
           ? innerValue.value
@@ -423,7 +423,7 @@ export default createComponent({
 
     onMounted(() => {
       // textarea only
-      if (props.autogrow === true) adjustHeight()
+      if (props.autogrow) adjustHeight()
     })
 
     Object.assign(state, {
@@ -431,8 +431,8 @@ export default createComponent({
 
       fieldClass: computed(
         () =>
-          `q-${isTextarea.value === true ? 'textarea' : 'input'}` +
-          (props.autogrow === true ? ' q-textarea--autogrow' : '')
+          `q-${isTextarea.value ? 'textarea' : 'input'}` +
+          (props.autogrow ? ' q-textarea--autogrow' : '')
       ),
 
       hasShadow: computed(
@@ -450,13 +450,13 @@ export default createComponent({
 
       floatingLabel: computed(
         () =>
-          (hasValue.value === true &&
-            (props.type !== 'number' || isNaN(innerValue.value) === false)) ||
+          (hasValue.value &&
+            (props.type !== 'number' || Number.isFinite(innerValue.value))) ||
           fieldValueIsFilled(props.displayValue)
       ),
 
       getControl: () =>
-        h(isTextarea.value === true ? 'textarea' : 'input', {
+        h(isTextarea.value ? 'textarea' : 'input', {
           ref: inputRef,
           class: ['q-field__native q-placeholder', props.inputClass],
           style: props.inputStyle,
@@ -473,7 +473,7 @@ export default createComponent({
           {
             class:
               'q-field__native q-field__shadow absolute-bottom no-pointer-events' +
-              (isTextarea.value === true ? '' : ' text-no-wrap')
+              (isTextarea.value ? '' : ' text-no-wrap')
           },
           [
             h('span', { class: 'invisible' }, getCurValue()),

package/src/components/input/use-mask.js

@@ -1,4 +1,4 @@
-import { ref, computed, watch, nextTick } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 
 import { shouldIgnoreKey } from '../../utils/private.keyboard/key-composition.js'
 
@@ -59,6 +59,7 @@ function getTokenMap(tokens) {
 
 function getTokenRegexMask(keys) {
   return new RegExp(
+    // oxlint-disable-next-line no-template-curly-in-string
     '\\\\([^.*+?^${}()|([\\]])|([.*+?^${}()|[\\]])|([' +
       keys.join('') +
       '])|(.)',
@@ -68,7 +69,7 @@ function getTokenRegexMask(keys) {
 
 const escRegex = /[.*+?^${}()|[\]\\]/g
 const DEFAULT_TOKEN_REGEX_MASK = getTokenRegexMask(DEFAULT_TOKEN_MAP_KEYS)
-const MARKER = String.fromCharCode(1)
+const MARKER = String.fromCodePoint(1)
 
 export const useMaskProps = {
   mask: String,
@@ -111,7 +112,7 @@ export default function useMask(props, emit, emitValue, inputRef) {
 
   function getIsTypeText() {
     return (
-      props.autogrow === true ||
+      props.autogrow ||
       ['textarea', 'text', 'search', 'url', 'tel', 'password'].includes(
         props.type
       )
@@ -136,21 +137,21 @@ export default function useMask(props, emit, emitValue, inputRef) {
   watch(
     () => props.fillMask + props.reverseFillMask,
     () => {
-      if (hasMask.value === true) updateMaskValue(innerValue.value, true)
+      if (hasMask.value) updateMaskValue(innerValue.value, true)
     }
   )
 
   watch(
     () => props.unmaskedValue,
     () => {
-      if (hasMask.value === true) updateMaskValue(innerValue.value)
+      if (hasMask.value) updateMaskValue(innerValue.value)
     }
   )
 
   function getInitialMaskedValue() {
     updateMaskInternals()
 
-    if (hasMask.value === true) {
+    if (hasMask.value) {
       const masked = maskValue(unmaskValue(props.modelValue))
 
       return props.fillMask !== false ? fillWithMask(masked) : masked
@@ -184,7 +185,7 @@ export default function useMask(props, emit, emitValue, inputRef) {
     hasMask.value =
       props.mask !== void 0 && props.mask.length !== 0 && getIsTypeText()
 
-    if (hasMask.value === false) {
+    if (!hasMask.value) {
       computedUnmask = void 0
       maskMarked = ''
       maskReplaced = ''
@@ -199,12 +200,12 @@ export default function useMask(props, emit, emitValue, inputRef) {
         typeof props.fillMask === 'string' && props.fillMask.length !== 0
           ? props.fillMask.slice(0, 1)
           : '_',
-      fillCharEscaped = fillChar.replace(escRegex, '\\$&'),
+      fillCharEscaped = fillChar.replace(escRegex, String.raw`\$&`),
       unmask = [],
       extract = [],
       mask = []
 
-    let firstMatch = props.reverseFillMask === true,
+    let firstMatch = props.reverseFillMask,
       unmaskChar = '',
       negateChar = ''
 
@@ -215,7 +216,7 @@ export default function useMask(props, emit, emitValue, inputRef) {
           const c = tokens.value.tokenMap[token]
           mask.push(c)
           negateChar = c.negate
-          if (firstMatch === true) {
+          if (firstMatch) {
             extract.push(
               '(?:' +
                 negateChar +
@@ -230,16 +231,22 @@ export default function useMask(props, emit, emitValue, inputRef) {
             firstMatch = false
           }
           extract.push('(?:' + negateChar + '+)?(' + c.pattern + ')?')
-        } else if (esc !== void 0) {
+          return
+        }
+
+        if (esc !== void 0) {
           unmaskChar = '\\' + (esc === '\\' ? '' : esc)
           mask.push(esc)
-          unmask.push('([^' + unmaskChar + ']+)?' + unmaskChar + '?')
         } else {
           const c = char1 !== void 0 ? char1 : char2
-          unmaskChar = c === '\\' ? '\\\\\\\\' : c.replace(escRegex, '\\\\$&')
+          unmaskChar =
+            c === '\\'
+              ? String.raw`\\\\`
+              : c.replace(escRegex, String.raw`\\$&`)
           mask.push(c)
-          unmask.push('([^' + unmaskChar + ']+)?' + unmaskChar + '?')
         }
+
+        unmask.push('([^' + unmaskChar + ']+)?' + unmaskChar + '?')
       }
     )
 
@@ -254,7 +261,7 @@ export default function useMask(props, emit, emitValue, inputRef) {
       ),
       extractLast = extract.length - 1,
       extractMatcher = extract.map((re, index) => {
-        if (index === 0 && props.reverseFillMask === true) {
+        if (index === 0 && props.reverseFillMask) {
           return new RegExp('^' + fillCharEscaped + '*' + re)
         } else if (index === extractLast) {
           return new RegExp(
@@ -263,7 +270,7 @@ export default function useMask(props, emit, emitValue, inputRef) {
               '(' +
               (negateChar === '' ? '.' : negateChar) +
               '+)?' +
-              (props.reverseFillMask === true ? '$' : fillCharEscaped + '*')
+              (props.reverseFillMask ? '$' : fillCharEscaped + '*')
           )
         }
 
@@ -273,7 +280,7 @@ export default function useMask(props, emit, emitValue, inputRef) {
     computedMask = mask
     computedUnmask = val => {
       const unmaskMatch = unmaskMatcher.exec(
-        props.reverseFillMask === true ? val : val.slice(0, mask.length + 1)
+        props.reverseFillMask ? val : val.slice(0, mask.length + 1)
       )
       if (unmaskMatch !== null) {
         val = unmaskMatch.slice(1).join('')
@@ -318,18 +325,17 @@ export default function useMask(props, emit, emitValue, inputRef) {
     // We want to avoid "flickering" so we set value immediately
     if (inp.value !== masked) inp.value = masked
 
-    if (changed === true) innerValue.value = masked
+    if (changed) innerValue.value = masked
 
     if (document.activeElement === inp) {
       nextTick(() => {
         if (masked === maskReplaced) {
-          const cursor =
-            props.reverseFillMask === true ? maskReplaced.length : 0
+          const cursor = props.reverseFillMask ? maskReplaced.length : 0
           inp.setSelectionRange(cursor, cursor, 'forward')
           return
         }
 
-        if (inputType === 'insertFromPaste' && props.reverseFillMask !== true) {
+        if (inputType === 'insertFromPaste' && !props.reverseFillMask) {
           const maxEnd = inp.selectionEnd
           let cursor = end - 1
           // each non-marker char means we move once to right
@@ -344,31 +350,28 @@ export default function useMask(props, emit, emitValue, inputRef) {
         }
 
         if (
-          ['deleteContentBackward', 'deleteContentForward'].indexOf(
-            inputType
-          ) !== -1
+          ['deleteContentBackward', 'deleteContentForward'].includes(inputType)
         ) {
-          const cursor =
-            props.reverseFillMask === true
-              ? end === 0
-                ? masked.length > preMasked.length
-                  ? 1
-                  : 0
-                : Math.max(
-                    0,
-                    masked.length -
-                      (masked === maskReplaced
-                        ? 0
-                        : Math.min(preMasked.length, endReverse) + 1)
-                  ) + 1
-              : end
+          const cursor = props.reverseFillMask
+            ? end === 0
+              ? masked.length > preMasked.length
+                ? 1
+                : 0
+              : Math.max(
+                  0,
+                  masked.length -
+                    (masked === maskReplaced
+                      ? 0
+                      : Math.min(preMasked.length, endReverse) + 1)
+                ) + 1
+            : end
 
           inp.setSelectionRange(cursor, cursor, 'forward')
           return
         }
 
-        if (props.reverseFillMask === true) {
-          if (changed === true) {
+        if (props.reverseFillMask) {
+          if (changed) {
             const cursor = Math.max(
               0,
               masked.length -
@@ -386,7 +389,7 @@ export default function useMask(props, emit, emitValue, inputRef) {
             const cursor = masked.length - endReverse
             inp.setSelectionRange(cursor, cursor, 'backward')
           }
-        } else if (changed === true) {
+        } else if (changed) {
           const cursor = Math.max(
             0,
             maskMarked.indexOf(MARKER),
@@ -400,7 +403,7 @@ export default function useMask(props, emit, emitValue, inputRef) {
       })
     }
 
-    const val = props.unmaskedValue === true ? unmaskValue(masked) : masked
+    const val = props.unmaskedValue ? unmaskValue(masked) : masked
 
     if (
       String(props.modelValue) !== val &&
@@ -425,13 +428,13 @@ export default function useMask(props, emit, emitValue, inputRef) {
 
   const moveCursor = {
     left(inp, cursor) {
-      const noMarkBefore = maskMarked.slice(cursor - 1).indexOf(MARKER) === -1
+      const noMarkBefore = !maskMarked.slice(cursor - 1).includes(MARKER)
       let i = Math.max(0, cursor - 1)
 
       for (; i >= 0; i--) {
         if (maskMarked[i] === MARKER) {
           cursor = i
-          if (noMarkBefore === true) cursor++
+          if (noMarkBefore) cursor++
           break
         }
       }
@@ -501,14 +504,13 @@ export default function useMask(props, emit, emitValue, inputRef) {
     rightReverse(inp, cursor) {
       const limit = inp.value.length,
         localMaskMarked = getPaddedMaskMarked(limit),
-        noMarkBefore =
-          localMaskMarked.slice(0, cursor + 1).indexOf(MARKER) === -1
+        noMarkBefore = !localMaskMarked.slice(0, cursor + 1).includes(MARKER)
       let i = Math.min(limit, cursor + 1)
 
       for (; i <= limit; i++) {
         if (localMaskMarked[i - 1] === MARKER) {
           cursor = i
-          if (cursor > 0 && noMarkBefore === true) cursor--
+          if (cursor > 0 && noMarkBefore) cursor--
           break
         }
       }
@@ -535,8 +537,8 @@ export default function useMask(props, emit, emitValue, inputRef) {
     emit('keydown', e)
 
     if (
-      shouldIgnoreKey(e) === true ||
-      e.altKey === true // let browser handle these
+      shouldIgnoreKey(e) ||
+      e.altKey // let browser handle these
     ) {
       return
     }
@@ -558,7 +560,7 @@ export default function useMask(props, emit, emitValue, inputRef) {
       const fn =
         moveCursor[
           (e.keyCode === 39 ? 'right' : 'left') +
-            (props.reverseFillMask === true ? 'Reverse' : '')
+            (props.reverseFillMask ? 'Reverse' : '')
         ]
 
       e.preventDefault()
@@ -574,14 +576,14 @@ export default function useMask(props, emit, emitValue, inputRef) {
       }
     } else if (
       e.keyCode === 8 && // Backspace
-      props.reverseFillMask !== true &&
+      !props.reverseFillMask &&
       start === end
     ) {
       moveCursor.left(inp, start)
       inp.setSelectionRange(inp.selectionStart, end, 'backward')
     } else if (
       e.keyCode === 46 && // Delete
-      props.reverseFillMask === true &&
+      props.reverseFillMask &&
       start === end
     ) {
       moveCursor.rightReverse(inp, end)
@@ -594,7 +596,7 @@ export default function useMask(props, emit, emitValue, inputRef) {
       return ''
     }
 
-    if (props.reverseFillMask === true) {
+    if (props.reverseFillMask) {
       return maskValueReverse(val, updateMaskInternalsFlag)
     }
 
@@ -682,7 +684,7 @@ export default function useMask(props, emit, emitValue, inputRef) {
       return val
     }
 
-    return props.reverseFillMask === true && val.length !== 0
+    return props.reverseFillMask && val.length !== 0
       ? maskReplaced.slice(0, -val.length) + val
       : val + maskReplaced.slice(val.length)
   }

package/src/components/intersection/QIntersection.js

@@ -1,11 +1,11 @@
-import { h, ref, computed, Transition } from 'vue'
+import { Transition, computed, h, ref } from 'vue'
 
 import { isRuntimeSsrPreHydration } from '../../plugins/platform/Platform.js'
 
 import Intersection from '../../directives/intersection/Intersection.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
-import { hSlot, hDir } from '../../utils/private.render/render.js'
+import { hDir, hSlot } from '../../utils/private.render/render.js'
 
 export default createComponent({
   name: 'QIntersection',
@@ -38,7 +38,7 @@ export default createComponent({
 
   setup(props, { slots, emit }) {
     const showing = ref(
-      isRuntimeSsrPreHydration.value === true ? props.ssrPrerender : false
+      isRuntimeSsrPreHydration.value ? props.ssrPrerender : false
     )
 
     const intersectionProps = computed(() =>
@@ -58,10 +58,8 @@ export default createComponent({
 
     const hasDirective = computed(
       () =>
-        props.disable !== true &&
-        (isRuntimeSsrPreHydration.value !== true ||
-          props.once !== true ||
-          props.ssrPrerender !== true)
+        !props.disable &&
+        (!isRuntimeSsrPreHydration.value || !props.once || !props.ssrPrerender)
     )
 
     const directives = computed(() => [
@@ -80,7 +78,7 @@ export default createComponent({
     }
 
     function getContent() {
-      if (showing.value === true) {
+      if (showing.value) {
         return [
           h(
             'div',