quasar 2.19.3 → 2.20.0

package/src/components/fab/QFab.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, provide, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, provide, ref } from 'vue'
 
 import QBtn from '../btn/QBtn.js'
 import QIcon from '../icon/QIcon.js'
@@ -6,12 +6,12 @@ import QIcon from '../icon/QIcon.js'
 import useFab, { useFabProps } from './use-fab.js'
 import useId from '../../composables/use-id/use-id.js'
 import useModelToggle, {
-  useModelToggleProps,
-  useModelToggleEmits
+  useModelToggleEmits,
+  useModelToggleProps
 } from '../../composables/private.use-model-toggle/use-model-toggle.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
-import { hSlot, hMergeSlot } from '../../utils/private.render/render.js'
+import { hMergeSlot, hSlot } from '../../utils/private.render/render.js'
 import { fabKey } from '../../utils/private.symbols/symbols.js'
 
 const directions = ['up', 'right', 'down', 'left']
@@ -60,7 +60,7 @@ export default createComponent({
     } = getCurrentInstance()
     const { formClass, labelProps } = useFab(props, showing)
 
-    const hideOnRouteChange = computed(() => props.persistent !== true)
+    const hideOnRouteChange = computed(() => !props.persistent)
 
     const { hide, toggle } = useModelToggle({
       showing,
@@ -73,14 +73,14 @@ export default createComponent({
       () =>
         'q-fab z-fab row inline justify-center' +
         ` q-fab--align-${props.verticalActionsAlign} ${formClass.value}` +
-        (showing.value === true ? ' q-fab--opened' : ' q-fab--closed')
+        (showing.value ? ' q-fab--opened' : ' q-fab--closed')
     )
 
     const actionClass = computed(
       () =>
         'q-fab__actions flex no-wrap inline' +
         ` q-fab__actions--${props.direction}` +
-        ` q-fab__actions--${showing.value === true ? 'opened' : 'closed'}`
+        ` q-fab__actions--${showing.value ? 'opened' : 'closed'}`
     )
 
     const actionAttrs = computed(() => {
@@ -89,7 +89,7 @@ export default createComponent({
         role: 'menu'
       }
 
-      if (showing.value !== true) {
+      if (!showing.value) {
         attrs['aria-hidden'] = 'true'
       }
 
@@ -99,7 +99,7 @@ export default createComponent({
     const iconHolderClass = computed(
       () =>
         'q-fab__icon-holder ' +
-        ` q-fab__icon-holder--${showing.value === true ? 'opened' : 'closed'}`
+        ` q-fab__icon-holder--${showing.value ? 'opened' : 'closed'}`
     )
 
     function getIcon(kebab, camel) {
@@ -117,7 +117,7 @@ export default createComponent({
     function getTriggerContent() {
       const child = []
 
-      if (props.hideIcon !== true) {
+      if (!props.hideIcon) {
         child.push(
           h('div', { class: iconHolderClass.value }, [
             getIcon('icon', 'icon'),
@@ -173,7 +173,7 @@ export default createComponent({
               label: void 0,
               noCaps: true,
               fab: true,
-              'aria-expanded': showing.value === true ? 'true' : 'false',
+              'aria-expanded': showing.value ? 'true' : 'false',
               'aria-haspopup': 'true',
               'aria-controls': targetUid.value,
               onClick: toggle

package/src/components/fab/QFabAction.js

@@ -1,4 +1,4 @@
-import { h, computed, inject, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, inject } from 'vue'
 
 import QBtn from '../btn/QBtn.js'
 import QIcon from '../icon/QIcon.js'
@@ -53,9 +53,7 @@ export default createComponent({
       return formClass.value + (align !== void 0 ? ` ${align}` : '')
     })
 
-    const isDisabled = computed(
-      () => props.disable === true || $fab.showing.value !== true
-    )
+    const isDisabled = computed(() => props.disable || !$fab.showing.value)
 
     function click(e) {
       $fab.onChildClick(e)

package/src/components/fab/use-fab.js

@@ -44,19 +44,18 @@ export const useFabProps = {
 export default function useFab(props, showing) {
   return {
     formClass: computed(
-      () => `q-fab--form-${props.square === true ? 'square' : 'rounded'}`
+      () => `q-fab--form-${props.square ? 'square' : 'rounded'}`
     ),
 
     stacked: computed(
       () =>
-        props.externalLabel === false &&
-        ['top', 'bottom'].includes(props.labelPosition)
+        !props.externalLabel && ['top', 'bottom'].includes(props.labelPosition)
     ),
 
     labelProps: computed(() => {
-      if (props.externalLabel === true) {
+      if (props.externalLabel) {
         const hideLabel =
-          props.hideLabel === null ? showing.value === false : props.hideLabel
+          props.hideLabel === null ? !showing.value : props.hideLabel
 
         return {
           action: 'push',
@@ -65,7 +64,7 @@ export default function useFab(props, showing) {
               props.labelClass,
               'q-fab__label q-tooltip--style q-fab__label--external' +
                 ` q-fab__label--external-${props.labelPosition}` +
-                (hideLabel === true ? ' q-fab__label--external-hidden' : '')
+                (hideLabel ? ' q-fab__label--external-hidden' : '')
             ],
             style: props.labelStyle
           }
@@ -80,7 +79,7 @@ export default function useFab(props, showing) {
           class: [
             props.labelClass,
             `q-fab__label q-fab__label--internal q-fab__label--internal-${props.labelPosition}` +
-              (props.hideLabel === true ? ' q-fab__label--internal-hidden' : '')
+              (props.hideLabel ? ' q-fab__label--internal-hidden' : '')
           ],
           style: props.labelStyle
         }

package/src/components/field/QField.js

@@ -1,7 +1,7 @@
 import useField, {
-  useFieldState,
+  useFieldEmits,
   useFieldProps,
-  useFieldEmits
+  useFieldState
 } from '../../composables/private.use-field/use-field.js'
 
 import { createComponent } from '../../utils/private.create/create.js'

package/src/components/file/QFile.js

@@ -1,20 +1,20 @@
-import { h, ref, computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, ref } from 'vue'
 
 import QChip from '../chip/QChip.js'
 
 import useField, {
-  useFieldState,
-  useNonInputFieldProps,
+  fieldValueIsFilled,
   useFieldEmits,
-  fieldValueIsFilled
+  useFieldState,
+  useNonInputFieldProps
 } from '../../composables/private.use-field/use-field.js'
 import {
-  useFormProps,
-  useFormInputNameAttr
+  useFormInputNameAttr,
+  useFormProps
 } from '../../composables/use-form/private.use-form.js'
 import useFile, {
-  useFileProps,
-  useFileEmits
+  useFileEmits,
+  useFileProps
 } from '../../composables/private.use-file/use-file.js'
 import useFileFormDomProps from '../../composables/private.use-file/use-file-dom-props.js'
 
@@ -23,6 +23,11 @@ import { humanStorageSize } from '../../utils/format/format.js'
 import { prevent } from '../../utils/event/event.js'
 import { injectProp } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
 
+function onKeydown(e) {
+  // prevent form submit if ENTER is pressed
+  if (e.keyCode === 13) prevent(e)
+}
+
 export default createComponent({
   name: 'QFile',
 
@@ -75,7 +80,7 @@ export default createComponent({
     const innerValue = computed(() =>
       Object(props.modelValue) === props.modelValue
         ? 'length' in props.modelValue
-          ? Array.from(props.modelValue)
+          ? [...props.modelValue]
           : [props.modelValue]
         : []
     )
@@ -107,21 +112,17 @@ export default createComponent({
       name: nameProp.value,
       ...attrs,
       id: state.targetUid.value,
-      disabled: state.editable.value !== true
+      disabled: !state.editable.value
     }))
 
     const fieldClass = computed(
-      () =>
-        'q-file q-field--auto-height' +
-        (dnd.value === true ? ' q-file--dnd' : '')
+      () => 'q-file q-field--auto-height' + (dnd.value ? ' q-file--dnd' : '')
     )
 
-    const isAppending = computed(
-      () => props.multiple === true && props.append === true
-    )
+    const isAppending = computed(() => props.multiple && props.append)
 
     function removeAtIndex(index) {
-      const files = innerValue.value.slice()
+      const files = [...innerValue.value]
       files.splice(index, 1)
       emitValue(files)
     }
@@ -134,12 +135,7 @@ export default createComponent({
     }
 
     function emitValue(files) {
-      emit('update:modelValue', props.multiple === true ? files : files[0])
-    }
-
-    function onKeydown(e) {
-      // prevent form submit if ENTER is pressed
-      if (e.keyCode === 13) prevent(e)
+      emit('update:modelValue', props.multiple ? files : files[0])
     }
 
     function onKeyup(e) {
@@ -172,16 +168,14 @@ export default createComponent({
       // protect against input @change being called in a loop
       // like it happens on Safari, so don't emit same thing:
       if (
-        props.multiple === true
+        props.multiple
           ? props.modelValue && files.every(f => innerValue.value.includes(f))
           : props.modelValue === files[0]
       ) {
         return
       }
 
-      emitValue(
-        isAppending.value === true ? innerValue.value.concat(files) : files
-      )
+      emitValue(isAppending.value ? [...innerValue.value, ...files] : files)
     }
 
     function getFiller() {
@@ -208,7 +202,7 @@ export default createComponent({
           : slots.selected({ files: innerValue.value, ref: this })
       }
 
-      if (props.useChips === true) {
+      if (props.useChips) {
         return innerValue.value.length === 0
           ? getFiller()
           : innerValue.value.map((file, i) =>
@@ -258,9 +252,7 @@ export default createComponent({
         onChange: addFilesToQueue
       }
 
-      if (props.multiple === true) {
-        data.multiple = true
-      }
+      if (props.multiple) data.multiple = true
 
       return h('input', data)
     }
@@ -273,7 +265,7 @@ export default createComponent({
       innerValue,
 
       floatingLabel: computed(
-        () => hasValue.value === true || fieldValueIsFilled(props.displayValue)
+        () => hasValue.value || fieldValueIsFilled(props.displayValue)
       ),
 
       computedCounter: computed(() => {
@@ -293,10 +285,11 @@ export default createComponent({
           tabindex: props.tabindex
         }
 
-        if (state.editable.value === true) {
+        if (state.editable.value) {
           Object.assign(data, { onDragover, onDragleave, onKeydown, onKeyup })
         }
 
+        // oxlint-disable-next-line unicorn/prefer-spread
         return h('div', data, [getInput()].concat(getSelection()))
       }
     })

package/src/components/footer/QFooter.js

@@ -1,11 +1,11 @@
 import {
-  h,
-  ref,
   computed,
-  watch,
-  onBeforeUnmount,
+  getCurrentInstance,
+  h,
   inject,
-  getCurrentInstance
+  onBeforeUnmount,
+  ref,
+  watch
 } from 'vue'
 
 import { isRuntimeSsrPreHydration } from '../../plugins/platform/Platform.js'
@@ -15,10 +15,16 @@ import QResizeObserver from '../resize-observer/QResizeObserver.js'
 import { createComponent } from '../../utils/private.create/create.js'
 import { hMergeSlot } from '../../utils/private.render/render.js'
 import {
-  layoutKey,
-  emptyRenderFn
+  emptyRenderFn,
+  layoutKey
 } from '../../utils/private.symbols/symbols.js'
 
+function updateLocal(prop, val) {
+  if (prop.value !== val) {
+    prop.value = val
+  }
+}
+
 export default createComponent({
   name: 'QFooter',
 
@@ -50,35 +56,30 @@ export default createComponent({
       return emptyRenderFn
     }
 
-    const size = ref(parseInt(props.heightHint, 10))
+    const size = ref(Number.parseInt(props.heightHint, 10))
     const revealed = ref(true)
     const windowHeight = ref(
-      isRuntimeSsrPreHydration.value === true ||
-        $layout.isContainer.value === true
+      isRuntimeSsrPreHydration.value || $layout.isContainer.value
         ? 0
         : window.innerHeight
     )
 
     const fixed = computed(
       () =>
-        props.reveal === true ||
-        $layout.view.value.indexOf('F') !== -1 ||
-        ($q.platform.is.ios && $layout.isContainer.value === true)
+        props.reveal ||
+        $layout.view.value.includes('F') ||
+        ($q.platform.is.ios && $layout.isContainer.value)
     )
 
     const containerHeight = computed(() =>
-      $layout.isContainer.value === true
+      $layout.isContainer.value
         ? $layout.containerHeight.value
         : windowHeight.value
     )
 
     const offset = computed(() => {
-      if (props.modelValue !== true) {
-        return 0
-      }
-      if (fixed.value === true) {
-        return revealed.value === true ? size.value : 0
-      }
+      if (!props.modelValue) return 0
+      if (fixed.value) return revealed.value ? size.value : 0
 
       const localOffset =
         $layout.scroll.value.position +
@@ -86,43 +87,38 @@ export default createComponent({
         size.value -
         $layout.height.value
 
-      return localOffset > 0 ? localOffset : 0
+      return Math.max(localOffset, 0)
     })
 
     const hidden = computed(
-      () =>
-        props.modelValue !== true ||
-        (fixed.value === true && revealed.value !== true)
+      () => !props.modelValue || (fixed.value && !revealed.value)
     )
 
     const revealOnFocus = computed(
-      () =>
-        props.modelValue === true &&
-        hidden.value === true &&
-        props.reveal === true
+      () => props.modelValue && hidden.value && props.reveal
     )
 
     const classes = computed(
       () =>
         'q-footer q-layout__section--marginal ' +
-        (fixed.value === true ? 'fixed' : 'absolute') +
+        (fixed.value ? 'fixed' : 'absolute') +
         '-bottom' +
-        (props.bordered === true ? ' q-footer--bordered' : '') +
-        (hidden.value === true ? ' q-footer--hidden' : '') +
-        (props.modelValue !== true
-          ? ' q-layout--prevent-focus' + (fixed.value !== true ? ' hidden' : '')
-          : '')
+        (props.bordered ? ' q-footer--bordered' : '') +
+        (hidden.value ? ' q-footer--hidden' : '') +
+        (props.modelValue
+          ? ''
+          : ' q-layout--prevent-focus' + (fixed.value ? '' : ' hidden'))
     )
 
     const style = computed(() => {
       const view = $layout.rows.value.bottom,
         css = {}
 
-      if (view[0] === 'l' && $layout.left.space === true) {
-        css[$q.lang.rtl === true ? 'right' : 'left'] = `${$layout.left.size}px`
+      if (view[0] === 'l' && $layout.left.space) {
+        css[$q.lang.rtl ? 'right' : 'left'] = `${$layout.left.size}px`
       }
-      if (view[2] === 'r' && $layout.right.space === true) {
-        css[$q.lang.rtl === true ? 'left' : 'right'] = `${$layout.right.size}px`
+      if (view[2] === 'r' && $layout.right.space) {
+        css[$q.lang.rtl ? 'left' : 'right'] = `${$layout.right.size}px`
       }
 
       return css
@@ -132,19 +128,13 @@ export default createComponent({
       $layout.update('footer', prop, val)
     }
 
-    function updateLocal(prop, val) {
-      if (prop.value !== val) {
-        prop.value = val
-      }
-    }
-
     function onResize({ height }) {
       updateLocal(size, height)
       updateLayout('size', height)
     }
 
     function updateRevealed() {
-      if (props.reveal !== true) return
+      if (!props.reveal) return
 
       const { direction, position, inflectionPoint } = $layout.scroll.value
 
@@ -158,10 +148,7 @@ export default createComponent({
     }
 
     function onFocusin(evt) {
-      if (revealOnFocus.value === true) {
-        updateLocal(revealed, true)
-      }
-
+      if (revealOnFocus.value) updateLocal(revealed, true)
       emit('focusin', evt)
     }
 
@@ -181,7 +168,7 @@ export default createComponent({
     watch(
       () => props.reveal,
       val => {
-        if (val === false) updateLocal(revealed, props.modelValue)
+        if (!val) updateLocal(revealed, props.modelValue)
       }
     )
 
@@ -195,14 +182,14 @@ export default createComponent({
     watch(
       () => $q.screen.height,
       val => {
-        if ($layout.isContainer.value !== true) updateLocal(windowHeight, val)
+        if (!$layout.isContainer.value) updateLocal(windowHeight, val)
       }
     )
 
     const instance = {}
 
     $layout.instances.footer = instance
-    if (props.modelValue === true) updateLayout('size', size.value)
+    if (props.modelValue) updateLayout('size', size.value)
     updateLayout('space', props.modelValue)
     updateLayout('offset', offset.value)
 
@@ -223,7 +210,7 @@ export default createComponent({
         })
       ])
 
-      if (props.elevated === true) {
+      if (props.elevated) {
         child.push(
           h('div', {
             class:

package/src/components/form/QForm.js

@@ -1,12 +1,12 @@
 import {
+  getCurrentInstance,
   h,
-  ref,
+  nextTick,
   onActivated,
   onDeactivated,
   onMounted,
-  getCurrentInstance,
-  nextTick,
-  provide
+  provide,
+  ref
 } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
@@ -16,6 +16,17 @@ import { hSlot } from '../../utils/private.render/render.js'
 import { formKey } from '../../utils/private.symbols/symbols.js'
 import { vmIsDestroyed } from '../../utils/private.vm/vm.js'
 
+function validateComponent(comp) {
+  const valid = comp.validate()
+
+  return typeof valid.then === 'function'
+    ? valid.then(
+        isValid => ({ valid: isValid, comp }),
+        err => ({ valid: false, comp, err })
+      )
+    : Promise.resolve({ valid, comp })
+}
+
 export default createComponent({
   name: 'QForm',
 
@@ -39,45 +50,29 @@ export default createComponent({
 
     function validate(shouldFocus) {
       const localFocus =
-        typeof shouldFocus === 'boolean'
-          ? shouldFocus
-          : props.noErrorFocus !== true
+        typeof shouldFocus === 'boolean' ? shouldFocus : !props.noErrorFocus
 
       const index = ++validateIndex
 
       const emitEvent = (res, compRef) => {
-        emit(`validation${res === true ? 'Success' : 'Error'}`, compRef)
-      }
-
-      const validateComponent = comp => {
-        const valid = comp.validate()
-
-        return typeof valid.then === 'function'
-          ? valid.then(
-              isValid => ({ valid: isValid, comp }),
-              err => ({ valid: false, comp, err })
-            )
-          : Promise.resolve({ valid, comp })
+        emit(`validation${res ? 'Success' : 'Error'}`, compRef)
       }
 
-      const errorsPromise =
-        props.greedy === true
-          ? Promise.all(registeredComponents.map(validateComponent)).then(res =>
-              res.filter(r => r.valid !== true)
+      const errorsPromise = props.greedy
+        ? Promise.all(registeredComponents.map(validateComponent)).then(res =>
+            res.filter(r => !r.valid)
+          )
+        : registeredComponents
+            .reduce(
+              (acc, comp) =>
+                acc
+                  .then(() => validateComponent(comp))
+                  .then(r => {
+                    if (!r.valid) throw r
+                  }),
+              Promise.resolve()
             )
-          : registeredComponents
-              .reduce(
-                (acc, comp) =>
-                  acc.then(() =>
-                    validateComponent(comp).then(r => {
-                      if (r.valid === false) {
-                        return Promise.reject(r)
-                      }
-                    })
-                  ),
-                Promise.resolve()
-              )
-              .catch(error => [error])
+            .catch(err => [err])
 
       return errorsPromise.then(errors => {
         if (errors === void 0 || errors.length === 0) {
@@ -92,12 +87,11 @@ export default createComponent({
           if (err !== void 0) console.error(err)
           emitEvent(false, comp)
 
-          if (localFocus === true) {
+          if (localFocus) {
             // Try to focus first mounted and active component
             const activeError = errors.find(
               ({ comp: compRef }) =>
-                typeof compRef.focus === 'function' &&
-                vmIsDestroyed(compRef.$) === false
+                typeof compRef.focus === 'function' && !vmIsDestroyed(compRef.$)
             )
 
             if (activeError !== void 0) {
@@ -127,7 +121,7 @@ export default createComponent({
 
       validate().then(val => {
         // if not outdated && validation succeeded
-        if (index === validateIndex && val === true) {
+        if (index === validateIndex && val) {
           if (props.onSubmit !== void 0) {
             emit('submit', evt)
           } else if (
@@ -148,7 +142,7 @@ export default createComponent({
       nextTick(() => {
         // allow userland to reset values before
         resetValidation()
-        if (props.autofocus === true && props.noResetFocus !== true) {
+        if (props.autofocus && !props.noResetFocus) {
           focus()
         }
       })
@@ -195,13 +189,13 @@ export default createComponent({
     })
 
     onActivated(() => {
-      if (shouldActivate === true && props.autofocus === true) {
+      if (shouldActivate && props.autofocus) {
         focus()
       }
     })
 
     onMounted(() => {
-      if (props.autofocus === true) focus()
+      if (props.autofocus) focus()
     })
 
     // expose public methods

package/src/components/form/QFormChildMixin.js

@@ -12,7 +12,7 @@ export default {
     disable(val) {
       const $form = this.$.provides[formKey]
       if ($form !== void 0) {
-        if (val === true) {
+        if (val) {
           this.resetValidation()
           $form.unbindComponent(this)
         } else {
@@ -29,14 +29,14 @@ export default {
 
   mounted() {
     // register to parent QForm
-    if (this.disable !== true) {
+    if (!this.disable) {
       this.$.provides[formKey]?.bindComponent(this)
     }
   },
 
   beforeUnmount() {
     // un-register from parent QForm
-    if (this.disable !== true) {
+    if (!this.disable) {
       this.$.provides[formKey]?.unbindComponent(this)
     }
   }