quasar 2.18.7 → 2.19.0

package/src/components/footer/QFooter.json

@@ -10,7 +10,7 @@
       "desc": "Model of the component defining if it is shown or hidden to the user; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
       "default": "true",
       "required": false,
-      "examples": [ "# v-model=\"footerState\"" ]
+      "examples": ["# v-model=\"footerState\""]
     },
 
     "reveal": {
@@ -30,7 +30,7 @@
     },
 
     "height-hint": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "When using SSR, you can optionally hint of the height (in pixels) of the QFooter",
       "default": "50",
       "category": "behavior"

package/src/components/footer/index.js

@@ -1,5 +1,3 @@
 import QFooter from './QFooter.js'
 
-export {
-  QFooter
-}
+export { QFooter }

package/src/components/form/QForm.js

@@ -1,4 +1,13 @@
-import { h, ref, onActivated, onDeactivated, onMounted, getCurrentInstance, nextTick, provide } from 'vue'
+import {
+  h,
+  ref,
+  onActivated,
+  onDeactivated,
+  onMounted,
+  getCurrentInstance,
+  nextTick,
+  provide
+} from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { stopAndPrevent } from '../../utils/event/event.js'
@@ -19,24 +28,25 @@ export default createComponent({
     onSubmit: Function
   },
 
-  emits: [ 'reset', 'validationSuccess', 'validationError' ],
+  emits: ['reset', 'validationSuccess', 'validationError'],
 
-  setup (props, { slots, emit }) {
+  setup(props, { slots, emit }) {
     const vm = getCurrentInstance()
     const rootRef = ref(null)
 
     let validateIndex = 0
     const registeredComponents = []
 
-    function validate (shouldFocus) {
-      const focus = typeof shouldFocus === 'boolean'
-        ? shouldFocus
-        : props.noErrorFocus !== true
+    function validate(shouldFocus) {
+      const localFocus =
+        typeof shouldFocus === 'boolean'
+          ? shouldFocus
+          : props.noErrorFocus !== true
 
       const index = ++validateIndex
 
-      const emitEvent = (res, ref) => {
-        emit(`validation${ res === true ? 'Success' : 'Error' }`, ref)
+      const emitEvent = (res, compRef) => {
+        emit(`validation${res === true ? 'Success' : 'Error'}`, compRef)
       }
 
       const validateComponent = comp => {
@@ -44,46 +54,51 @@ export default createComponent({
 
         return typeof valid.then === 'function'
           ? valid.then(
-            valid => ({ valid, comp }),
-            err => ({ valid: false, comp, err })
-          )
+              isValid => ({ valid: isValid, comp }),
+              err => ({ valid: false, comp, err })
+            )
           : Promise.resolve({ valid, comp })
       }
 
-      const errorsPromise = props.greedy === true
-        ? Promise
-          .all(registeredComponents.map(validateComponent))
-          .then(res => res.filter(r => r.valid !== true))
-        : registeredComponents
-          .reduce(
-            (acc, comp) => acc.then(() => {
-              return validateComponent(comp).then(r => {
-                if (r.valid === false) { return Promise.reject(r) }
-              })
-            }),
-            Promise.resolve()
-          )
-          .catch(error => [ error ])
+      const errorsPromise =
+        props.greedy === true
+          ? Promise.all(registeredComponents.map(validateComponent)).then(res =>
+              res.filter(r => r.valid !== true)
+            )
+          : registeredComponents
+              .reduce(
+                (acc, comp) =>
+                  acc.then(() =>
+                    validateComponent(comp).then(r => {
+                      if (r.valid === false) {
+                        return Promise.reject(r)
+                      }
+                    })
+                  ),
+                Promise.resolve()
+              )
+              .catch(error => [error])
 
       return errorsPromise.then(errors => {
         if (errors === void 0 || errors.length === 0) {
-          index === validateIndex && emitEvent(true)
+          if (index === validateIndex) emitEvent(true)
           return true
         }
 
         // if not outdated already
         if (index === validateIndex) {
-          const { comp, err } = errors[ 0 ]
+          const { comp, err } = errors[0]
 
-          err !== void 0 && console.error(err)
+          if (err !== void 0) console.error(err)
           emitEvent(false, comp)
 
-          if (focus === true) {
+          if (localFocus === true) {
             // Try to focus first mounted and active component
-            const activeError = errors.find(({ comp }) => (
-              typeof comp.focus === 'function'
-              && vmIsDestroyed(comp.$) === false
-            ))
+            const activeError = errors.find(
+              ({ comp: compRef }) =>
+                typeof compRef.focus === 'function' &&
+                vmIsDestroyed(compRef.$) === false
+            )
 
             if (activeError !== void 0) {
               activeError.comp.focus()
@@ -95,16 +110,18 @@ export default createComponent({
       })
     }
 
-    function resetValidation () {
+    function resetValidation() {
       validateIndex++
 
       registeredComponents.forEach(comp => {
-        typeof comp.resetValidation === 'function' && comp.resetValidation()
+        if (typeof comp.resetValidation === 'function') {
+          comp.resetValidation()
+        }
       })
     }
 
-    function submit (evt) {
-      evt !== void 0 && stopAndPrevent(evt)
+    function submit(evt) {
+      if (evt !== void 0) stopAndPrevent(evt)
 
       const index = validateIndex + 1
 
@@ -113,20 +130,23 @@ export default createComponent({
         if (index === validateIndex && val === true) {
           if (props.onSubmit !== void 0) {
             emit('submit', evt)
-          }
-          else if (evt?.target !== void 0 && typeof evt.target.submit === 'function') {
+          } else if (
+            evt?.target !== void 0 &&
+            typeof evt.target.submit === 'function'
+          ) {
             evt.target.submit()
           }
         }
       })
     }
 
-    function reset (evt) {
-      evt !== void 0 && stopAndPrevent(evt)
+    function reset(evt) {
+      if (evt !== void 0) stopAndPrevent(evt)
 
       emit('reset')
 
-      nextTick(() => { // allow userland to reset values before
+      nextTick(() => {
+        // allow userland to reset values before
         resetValidation()
         if (props.autofocus === true && props.noResetFocus !== true) {
           focus()
@@ -134,25 +154,33 @@ export default createComponent({
       })
     }
 
-    function focus () {
+    function focus() {
       addFocusFn(() => {
         if (rootRef.value === null) return
 
-        const target = rootRef.value.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]')
-          || rootRef.value.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]')
-          || rootRef.value.querySelector('[autofocus], [data-autofocus]')
-          || Array.prototype.find.call(rootRef.value.querySelectorAll('[tabindex]'), el => el.tabIndex !== -1)
+        const target =
+          rootRef.value.querySelector(
+            '[autofocus][tabindex], [data-autofocus][tabindex]'
+          ) ||
+          rootRef.value.querySelector(
+            '[autofocus] [tabindex], [data-autofocus] [tabindex]'
+          ) ||
+          rootRef.value.querySelector('[autofocus], [data-autofocus]') ||
+          Array.prototype.find.call(
+            rootRef.value.querySelectorAll('[tabindex]'),
+            el => el.tabIndex !== -1
+          )
 
         target?.focus({ preventScroll: true })
       })
     }
 
     provide(formKey, {
-      bindComponent (vmProxy) {
+      bindComponent(vmProxy) {
         registeredComponents.push(vmProxy)
       },
 
-      unbindComponent (vmProxy) {
+      unbindComponent(vmProxy) {
         const index = registeredComponents.indexOf(vmProxy)
         if (index !== -1) {
           registeredComponents.splice(index, 1)
@@ -167,11 +195,13 @@ export default createComponent({
     })
 
     onActivated(() => {
-      shouldActivate === true && props.autofocus === true && focus()
+      if (shouldActivate === true && props.autofocus === true) {
+        focus()
+      }
     })
 
     onMounted(() => {
-      props.autofocus === true && focus()
+      if (props.autofocus === true) focus()
     })
 
     // expose public methods
@@ -184,11 +214,16 @@ export default createComponent({
       getValidationComponents: () => registeredComponents
     })
 
-    return () => h('form', {
-      class: 'q-form',
-      ref: rootRef,
-      onSubmit: submit,
-      onReset: reset
-    }, hSlot(slots.default))
+    return () =>
+      h(
+        'form',
+        {
+          class: 'q-form',
+          ref: rootRef,
+          onSubmit: submit,
+          onReset: reset
+        },
+        hSlot(slots.default)
+      )
   }
 })

package/src/components/form/QForm.json

@@ -40,7 +40,7 @@
       "desc": "Emitted when all validations have passed when tethered to a submit button",
       "params": {
         "evt": {
-          "type": [ "Event", "SubmitEvent" ],
+          "type": ["Event", "SubmitEvent"],
           "desc": "Form submission event object"
         }
       }
@@ -83,7 +83,7 @@
       "returns": {
         "type": "Promise<boolean>",
         "desc": "Promise is always fulfilled and receives the outcome (true -> validation was a success, false -> invalid models detected)",
-        "examples": [ "validate().then(outcome => { ... })" ]
+        "examples": ["validate().then(outcome => { ... })"]
       }
     },
 

package/src/components/form/QFormChildMixin.js

@@ -3,20 +3,19 @@ import { formKey } from '../../utils/private.symbols/symbols.js'
 
 export default {
   inject: {
-    [ formKey ]: {
+    [formKey]: {
       default: noop
     }
   },
 
   watch: {
-    disable (val) {
-      const $form = this.$.provides[ formKey ]
+    disable(val) {
+      const $form = this.$.provides[formKey]
       if ($form !== void 0) {
         if (val === true) {
           this.resetValidation()
           $form.unbindComponent(this)
-        }
-        else {
+        } else {
           $form.bindComponent(this)
         }
       }
@@ -24,21 +23,21 @@ export default {
   },
 
   methods: {
-    validate () {},
-    resetValidation () {}
+    validate() {},
+    resetValidation() {}
   },
 
-  mounted () {
+  mounted() {
     // register to parent QForm
     if (this.disable !== true) {
-      this.$.provides[ formKey ]?.bindComponent(this)
+      this.$.provides[formKey]?.bindComponent(this)
     }
   },
 
-  beforeUnmount () {
+  beforeUnmount() {
     // un-register from parent QForm
     if (this.disable !== true) {
-      this.$.provides[ formKey ]?.unbindComponent(this)
+      this.$.provides[formKey]?.unbindComponent(this)
     }
   }
 }

package/src/components/form/QFormChildMixin.json

@@ -8,9 +8,9 @@
       "desc": "Needs to be overwritten when getting extended/mixed in",
       "params": null,
       "returns": {
-        "type": [ "Boolean", "Promise<boolean>" ],
+        "type": ["Boolean", "Promise<boolean>"],
         "desc": "Promise is always fulfilled and receives the outcome (true -> validation was a success, false -> invalid models detected)",
-        "examples": [ "validate().then(outcome => { ... })" ]
+        "examples": ["validate().then(outcome => { ... })"]
       }
     },
 

package/src/components/form/index.js

@@ -1,7 +1,4 @@
 import QForm from './QForm.js'
 import QFormChildMixin from './QFormChildMixin.js'
 
-export {
-  QForm,
-  QFormChildMixin
-}
+export { QForm, QFormChildMixin }

package/src/components/header/QHeader.js

@@ -1,10 +1,21 @@
-import { h, ref, computed, watch, onBeforeUnmount, inject, getCurrentInstance } from 'vue'
+import {
+  h,
+  ref,
+  computed,
+  watch,
+  onBeforeUnmount,
+  inject,
+  getCurrentInstance
+} from 'vue'
 
 import QResizeObserver from '../resize-observer/QResizeObserver.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hUniqueSlot } from '../../utils/private.render/render.js'
-import { layoutKey, emptyRenderFn } from '../../utils/private.symbols/symbols.js'
+import {
+  layoutKey,
+  emptyRenderFn
+} from '../../utils/private.symbols/symbols.js'
 
 export default createComponent({
   name: 'QHeader',
@@ -23,15 +34,17 @@ export default createComponent({
     elevated: Boolean,
 
     heightHint: {
-      type: [ String, Number ],
+      type: [String, Number],
       default: 50
     }
   },
 
-  emits: [ 'reveal', 'focusin' ],
+  emits: ['reveal', 'focusin'],
 
-  setup (props, { slots, emit }) {
-    const { proxy: { $q } } = getCurrentInstance()
+  setup(props, { slots, emit }) {
+    const {
+      proxy: { $q }
+    } = getCurrentInstance()
 
     const $layout = inject(layoutKey, emptyRenderFn)
     if ($layout === emptyRenderFn) {
@@ -42,10 +55,11 @@ export default createComponent({
     const size = ref(parseInt(props.heightHint, 10))
     const revealed = ref(true)
 
-    const fixed = computed(() =>
-      props.reveal === true
-      || $layout.view.value.indexOf('H') !== -1
-      || ($q.platform.is.ios && $layout.isContainer.value === true)
+    const fixed = computed(
+      () =>
+        props.reveal === true ||
+        $layout.view.value.indexOf('H') !== -1 ||
+        ($q.platform.is.ios && $layout.isContainer.value === true)
     )
 
     const offset = computed(() => {
@@ -55,57 +69,64 @@ export default createComponent({
       if (fixed.value === true) {
         return revealed.value === true ? size.value : 0
       }
-      const offset = size.value - $layout.scroll.value.position
-      return offset > 0 ? offset : 0
+
+      const localOffset = size.value - $layout.scroll.value.position
+      return localOffset > 0 ? localOffset : 0
     })
 
-    const hidden = computed(() => props.modelValue !== true
-      || (fixed.value === true && revealed.value !== true)
+    const hidden = computed(
+      () =>
+        props.modelValue !== true ||
+        (fixed.value === true && revealed.value !== true)
     )
 
-    const revealOnFocus = computed(() =>
-      props.modelValue === true && hidden.value === true && props.reveal === true
+    const revealOnFocus = computed(
+      () =>
+        props.modelValue === true &&
+        hidden.value === true &&
+        props.reveal === true
     )
 
-    const classes = computed(() =>
-      'q-header q-layout__section--marginal '
-      + (fixed.value === true ? 'fixed' : 'absolute') + '-top'
-      + (props.bordered === true ? ' q-header--bordered' : '')
-      + (hidden.value === true ? ' q-header--hidden' : '')
-      + (props.modelValue !== true ? ' q-layout--prevent-focus' : '')
+    const classes = computed(
+      () =>
+        'q-header q-layout__section--marginal ' +
+        (fixed.value === true ? 'fixed' : 'absolute') +
+        '-top' +
+        (props.bordered === true ? ' q-header--bordered' : '') +
+        (hidden.value === true ? ' q-header--hidden' : '') +
+        (props.modelValue !== true ? ' q-layout--prevent-focus' : '')
     )
 
     const style = computed(() => {
-      const
-        view = $layout.rows.value.top,
+      const view = $layout.rows.value.top,
         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 === true) {
+        css[$q.lang.rtl === true ? '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 === true) {
+        css[$q.lang.rtl === true ? 'left' : 'right'] = `${$layout.right.size}px`
       }
 
       return css
     })
 
-    function updateLayout (prop, val) {
+    function updateLayout(prop, val) {
       $layout.update('header', prop, val)
     }
 
-    function updateLocal (prop, val) {
+    function updateLocal(prop, val) {
       if (prop.value !== val) {
         prop.value = val
       }
     }
 
-    function onResize ({ height }) {
+    function onResize({ height }) {
       updateLocal(size, height)
       updateLayout('size', height)
     }
 
-    function onFocusin (evt) {
+    function onFocusin(evt) {
       if (revealOnFocus.value === true) {
         updateLocal(revealed, true)
       }
@@ -113,19 +134,25 @@ export default createComponent({
       emit('focusin', evt)
     }
 
-    watch(() => props.modelValue, val => {
-      updateLayout('space', val)
-      updateLocal(revealed, true)
-      $layout.animate()
-    })
+    watch(
+      () => props.modelValue,
+      val => {
+        updateLayout('space', val)
+        updateLocal(revealed, true)
+        $layout.animate()
+      }
+    )
 
     watch(offset, val => {
       updateLayout('offset', val)
     })
 
-    watch(() => props.reveal, val => {
-      val === false && updateLocal(revealed, props.modelValue)
-    })
+    watch(
+      () => props.reveal,
+      val => {
+        if (val === false) updateLocal(revealed, props.modelValue)
+      }
+    )
 
     watch(revealed, val => {
       $layout.animate()
@@ -133,17 +160,20 @@ export default createComponent({
     })
 
     watch($layout.scroll, scroll => {
-      props.reveal === true && updateLocal(revealed,
-        scroll.direction === 'up'
-        || scroll.position <= props.revealOffset
-        || scroll.position - scroll.inflectionPoint < 100
-      )
+      if (props.reveal === true) {
+        updateLocal(
+          revealed,
+          scroll.direction === 'up' ||
+            scroll.position <= props.revealOffset ||
+            scroll.position - scroll.inflectionPoint < 100
+        )
+      }
     })
 
     const instance = {}
 
     $layout.instances.header = instance
-    props.modelValue === true && updateLayout('size', size.value)
+    if (props.modelValue === true) updateLayout('size', size.value)
     updateLayout('space', props.modelValue)
     updateLayout('offset', offset.value)
 
@@ -159,11 +189,14 @@ export default createComponent({
     return () => {
       const child = hUniqueSlot(slots.default, [])
 
-      props.elevated === true && child.push(
-        h('div', {
-          class: 'q-layout__shadow absolute-full overflow-hidden no-pointer-events'
-        })
-      )
+      if (props.elevated === true) {
+        child.push(
+          h('div', {
+            class:
+              'q-layout__shadow absolute-full overflow-hidden no-pointer-events'
+          })
+        )
+      }
 
       child.push(
         h(QResizeObserver, {
@@ -172,11 +205,15 @@ export default createComponent({
         })
       )
 
-      return h('header', {
-        class: classes.value,
-        style: style.value,
-        onFocusin
-      }, child)
+      return h(
+        'header',
+        {
+          class: classes.value,
+          style: style.value,
+          onFocusin
+        },
+        child
+      )
     }
   }
 })

package/src/components/header/QHeader.json

@@ -10,7 +10,7 @@
       "desc": "Model of the component defining if it is shown or hidden to the user; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
       "default": "true",
       "required": false,
-      "examples": [ "# v-model=\"headerState\"" ]
+      "examples": ["# v-model=\"headerState\""]
     },
 
     "reveal": {
@@ -37,7 +37,7 @@
     },
 
     "height-hint": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "When using SSR, you can optionally hint of the height (in pixels) of the QHeader",
       "default": "50",
       "category": "behavior"

package/src/components/header/index.js

@@ -1,5 +1,3 @@
 import QHeader from './QHeader.js'
 
-export {
-  QHeader
-}
+export { QHeader }