quasar 2.18.7 → 2.19.0

package/src/components/file/QFile.js

@@ -2,9 +2,20 @@ import { h, ref, computed, getCurrentInstance } from 'vue'
 
 import QChip from '../chip/QChip.js'
 
-import useField, { useFieldState, useNonInputFieldProps, useFieldEmits, fieldValueIsFilled } from '../../composables/private.use-field/use-field.js'
-import { useFormProps, useFormInputNameAttr } from '../../composables/use-form/private.use-form.js'
-import useFile, { useFileProps, useFileEmits } from '../../composables/private.use-file/use-file.js'
+import useField, {
+  useFieldState,
+  useNonInputFieldProps,
+  useFieldEmits,
+  fieldValueIsFilled
+} from '../../composables/private.use-field/use-field.js'
+import {
+  useFormProps,
+  useFormInputNameAttr
+} from '../../composables/use-form/private.use-form.js'
+import useFile, {
+  useFileProps,
+  useFileEmits
+} from '../../composables/private.use-file/use-file.js'
 import useFileFormDomProps from '../../composables/private.use-file/use-file-dom-props.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
@@ -23,31 +34,26 @@ export default createComponent({
     ...useFileProps,
 
     /* SSR does not know about File & FileList */
-    modelValue: __QUASAR_SSR_SERVER__
-      ? {}
-      : [ File, FileList, Array ],
+    modelValue: __QUASAR_SSR_SERVER__ ? {} : [File, FileList, Array],
 
     append: Boolean,
     useChips: Boolean,
-    displayValue: [ String, Number ],
+    displayValue: [String, Number],
 
     tabindex: {
-      type: [ String, Number ],
+      type: [String, Number],
       default: 0
     },
 
     counterLabel: Function,
 
-    inputClass: [ Array, String, Object ],
-    inputStyle: [ Array, String, Object ]
+    inputClass: [Array, String, Object],
+    inputStyle: [Array, String, Object]
   },
 
-  emits: [
-    ...useFieldEmits,
-    ...useFileEmits
-  ],
+  emits: [...useFieldEmits, ...useFileEmits],
 
-  setup (props, { slots, emit, attrs }) {
+  setup(props, { slots, emit, attrs }) {
     const { proxy } = getCurrentInstance()
 
     const state = useFieldState()
@@ -56,28 +62,28 @@ export default createComponent({
     const dnd = ref(false)
     const nameProp = useFormInputNameAttr(props)
 
-    const {
-      pickFiles,
-      onDragover,
-      onDragleave,
-      processFiles,
-      getDndNode
-    } = useFile({ editable: state.editable, dnd, getFileInput, addFilesToQueue })
+    const { pickFiles, onDragover, onDragleave, processFiles, getDndNode } =
+      useFile({
+        editable: state.editable,
+        dnd,
+        getFileInput,
+        addFilesToQueue
+      })
 
     const formDomProps = useFileFormDomProps(props)
 
-    const innerValue = computed(() => (
+    const innerValue = computed(() =>
       Object(props.modelValue) === props.modelValue
-        ? ('length' in props.modelValue ? Array.from(props.modelValue) : [ props.modelValue ])
+        ? 'length' in props.modelValue
+          ? Array.from(props.modelValue)
+          : [props.modelValue]
         : []
-    ))
+    )
 
     const hasValue = computed(() => fieldValueIsFilled(innerValue.value))
 
     const selectedString = computed(() =>
-      innerValue.value
-        .map(file => file.name)
-        .join(', ')
+      innerValue.value.map(file => file.name).join(', ')
     )
 
     const totalSize = computed(() =>
@@ -104,50 +110,56 @@ export default createComponent({
       disabled: state.editable.value !== true
     }))
 
-    const fieldClass = computed(() =>
-      'q-file q-field--auto-height'
-      + (dnd.value === true ? ' q-file--dnd' : '')
+    const fieldClass = computed(
+      () =>
+        'q-file q-field--auto-height' +
+        (dnd.value === true ? ' q-file--dnd' : '')
     )
 
-    const isAppending = computed(() =>
-      props.multiple === true && props.append === true
+    const isAppending = computed(
+      () => props.multiple === true && props.append === true
     )
 
-    function removeAtIndex (index) {
+    function removeAtIndex(index) {
       const files = innerValue.value.slice()
       files.splice(index, 1)
       emitValue(files)
     }
 
-    function removeFile (file) {
+    function removeFile(file) {
       const index = innerValue.value.indexOf(file)
       if (index !== -1) {
         removeAtIndex(index)
       }
     }
 
-    function emitValue (files) {
-      emit('update:modelValue', props.multiple === true ? files : files[ 0 ])
+    function emitValue(files) {
+      emit('update:modelValue', props.multiple === true ? files : files[0])
     }
 
-    function onKeydown (e) {
+    function onKeydown(e) {
       // prevent form submit if ENTER is pressed
-      e.keyCode === 13 && prevent(e)
+      if (e.keyCode === 13) prevent(e)
     }
 
-    function onKeyup (e) {
+    function onKeyup(e) {
       // only on ENTER and SPACE to match native input field
       if (e.keyCode === 13 || e.keyCode === 32) {
         pickFiles(e)
       }
     }
 
-    function getFileInput () {
+    function getFileInput() {
       return inputRef.value
     }
 
-    function addFilesToQueue (e, fileList) {
-      const files = processFiles(e, fileList, innerValue.value, isAppending.value)
+    function addFilesToQueue(e, fileList) {
+      const files = processFiles(
+        e,
+        fileList,
+        innerValue.value,
+        isAppending.value
+      )
       const fileInput = getFileInput()
 
       if (fileInput !== void 0 && fileInput !== null) {
@@ -162,32 +174,32 @@ export default createComponent({
       if (
         props.multiple === true
           ? props.modelValue && files.every(f => innerValue.value.includes(f))
-          : props.modelValue === files[ 0 ]
-      ) return
+          : props.modelValue === files[0]
+      ) {
+        return
+      }
 
       emitValue(
-        isAppending.value === true
-          ? innerValue.value.concat(files)
-          : files
+        isAppending.value === true ? innerValue.value.concat(files) : files
       )
     }
 
-    function getFiller () {
+    function getFiller() {
       return [
         h('input', {
-          class: [ props.inputClass, 'q-file__filler' ],
+          class: [props.inputClass, 'q-file__filler'],
           style: props.inputStyle
         })
       ]
     }
 
-    function getSelection () {
+    function getSelection() {
       if (slots.file !== void 0) {
         return innerValue.value.length === 0
           ? getFiller()
-          : innerValue.value.map(
-            (file, index) => slots.file({ index, file, ref: this })
-          )
+          : innerValue.value.map((file, index) =>
+              slots.file({ index, file, ref: this })
+            )
       }
 
       if (slots.selected !== void 0) {
@@ -199,22 +211,32 @@ export default createComponent({
       if (props.useChips === true) {
         return innerValue.value.length === 0
           ? getFiller()
-          : innerValue.value.map((file, i) => h(QChip, {
-            key: 'file-' + i,
-            removable: state.editable.value,
-            dense: true,
-            textColor: props.color,
-            tabindex: props.tabindex,
-            onRemove: () => { removeAtIndex(i) }
-          }, () => h('span', {
-            class: 'ellipsis',
-            textContent: file.name
-          })))
+          : innerValue.value.map((file, i) =>
+              h(
+                QChip,
+                {
+                  key: 'file-' + i,
+                  removable: state.editable.value,
+                  dense: true,
+                  textColor: props.color,
+                  tabindex: props.tabindex,
+                  onRemove: () => {
+                    removeAtIndex(i)
+                  }
+                },
+                () =>
+                  h('span', {
+                    class: 'ellipsis',
+                    textContent: file.name
+                  })
+              )
+            )
       }
 
-      const textContent = props.displayValue !== void 0
-        ? props.displayValue
-        : selectedString.value
+      const textContent =
+        props.displayValue !== void 0
+          ? props.displayValue
+          : selectedString.value
 
       return textContent.length !== 0
         ? [
@@ -227,7 +249,7 @@ export default createComponent({
         : getFiller()
     }
 
-    function getInput () {
+    function getInput() {
       const data = {
         ref: inputRef,
         ...inputAttrs.value,
@@ -250,9 +272,8 @@ export default createComponent({
       inputRef,
       innerValue,
 
-      floatingLabel: computed(() =>
-        hasValue.value === true
-        || fieldValueIsFilled(props.displayValue)
+      floatingLabel: computed(
+        () => hasValue.value === true || fieldValueIsFilled(props.displayValue)
       ),
 
       computedCounter: computed(() => {
@@ -261,7 +282,7 @@ export default createComponent({
         }
 
         const max = props.maxFiles
-        return `${ innerValue.value.length }${ max !== void 0 ? ' / ' + max : '' } (${ totalSize.value })`
+        return `${innerValue.value.length}${max !== void 0 ? ' / ' + max : ''} (${totalSize.value})`
       }),
 
       getControlChild: () => getDndNode('file'),
@@ -276,7 +297,7 @@ export default createComponent({
           Object.assign(data, { onDragover, onDragleave, onKeydown, onKeyup })
         }
 
-        return h('div', data, [ getInput() ].concat(getSelection()))
+        return h('div', data, [getInput()].concat(getSelection()))
       }
     })
 

package/src/components/file/QFile.json

@@ -1,5 +1,9 @@
 {
-  "mixins": [ "composables/private.use-field/use-field", "composables/private.use-file/use-file", "composables/use-form/private.use-form" ],
+  "mixins": [
+    "composables/private.use-field/use-field",
+    "composables/private.use-file/use-file",
+    "composables/use-form/private.use-form"
+  ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/file"
@@ -8,9 +12,9 @@
   "props": {
     "model-value": {
       "extends": "model-value",
-      "type": [ "File", "FileList", "Array", "null", "undefined" ],
+      "type": ["File", "FileList", "Array", "null", "undefined"],
       "desc": "Model of the component; Must be FileList or Array if using 'multiple' prop; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
-      "examples": [ "# v-model=\"myModel\"" ]
+      "examples": ["# v-model=\"myModel\""]
     },
 
     "append": {
@@ -20,9 +24,9 @@
     },
 
     "display-value": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "Override default selection string, if not using 'file' or 'selected' scoped slots and if not using 'use-chips' prop",
-      "examples": [ "'Options: x, y, z'" ],
+      "examples": ["'Options: x, y, z'"],
       "category": "selection"
     },
 
@@ -44,7 +48,7 @@
               "type": "String",
               "required": true,
               "desc": "The total size of files in human readable format",
-              "examples": [ "'1.42MB'" ]
+              "examples": ["'1.42MB'"]
             },
             "filesNumber": {
               "type": "Number",
@@ -52,7 +56,7 @@
               "desc": "Number of picked files"
             },
             "maxFiles": {
-              "type": [ "Number", "String" ],
+              "type": ["Number", "String"],
               "required": true,
               "desc": "Maximum number of files (same as 'max-files' prop, if specified); When 'max-files' is not specified, this has 'void 0' as value"
             }
@@ -63,7 +67,9 @@
         "type": "String",
         "desc": "String to display for the counter label"
       },
-      "examples": [ "(totalSize, filesNumber, maxFiles) => `${ filesNumber }${ maxFiles !== void 0 ? ' / ' + maxFiles : '' } (${ totalSize })`" ],
+      "examples": [
+        "(totalSize, filesNumber, maxFiles) => `${ filesNumber }${ maxFiles !== void 0 ? ' / ' + maxFiles : '' } (${ totalSize })`"
+      ],
       "category": "behavior"
     },
 
@@ -73,18 +79,15 @@
     },
 
     "input-class": {
-      "type": [ "String", "Array", "Object" ],
+      "type": ["String", "Array", "Object"],
       "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the underlying selection container",
-      "examples": [
-        "'my-special-class'",
-        "{ 'my-special-class': true }"
-      ],
+      "examples": ["'my-special-class'", "{ 'my-special-class': true }"],
       "category": "style"
     },
 
     "input-style": {
-      "type": [ "String", "Array", "Object" ],
+      "type": ["String", "Array", "Object"],
       "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the underlying selection container",
       "examples": [

package/src/components/file/index.js

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

package/src/components/footer/QFooter.js

@@ -1,4 +1,12 @@
-import { h, ref, computed, watch, onBeforeUnmount, inject, getCurrentInstance } from 'vue'
+import {
+  h,
+  ref,
+  computed,
+  watch,
+  onBeforeUnmount,
+  inject,
+  getCurrentInstance
+} from 'vue'
 
 import { isRuntimeSsrPreHydration } from '../../plugins/platform/Platform.js'
 
@@ -6,7 +14,10 @@ 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 } from '../../utils/private.symbols/symbols.js'
+import {
+  layoutKey,
+  emptyRenderFn
+} from '../../utils/private.symbols/symbols.js'
 
 export default createComponent({
   name: 'QFooter',
@@ -21,15 +32,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) {
@@ -40,22 +53,24 @@ export default createComponent({
     const size = ref(parseInt(props.heightHint, 10))
     const revealed = ref(true)
     const windowHeight = ref(
-      isRuntimeSsrPreHydration.value === true || $layout.isContainer.value === true
+      isRuntimeSsrPreHydration.value === true ||
+        $layout.isContainer.value === true
         ? 0
         : window.innerHeight
     )
 
-    const fixed = computed(() =>
-      props.reveal === true
-      || $layout.view.value.indexOf('F') !== -1
-      || ($q.platform.is.ios && $layout.isContainer.value === true)
+    const fixed = computed(
+      () =>
+        props.reveal === true ||
+        $layout.view.value.indexOf('F') !== -1 ||
+        ($q.platform.is.ios && $layout.isContainer.value === true)
     )
 
-    const containerHeight = computed(() => (
+    const containerHeight = computed(() =>
       $layout.isContainer.value === true
         ? $layout.containerHeight.value
         : windowHeight.value
-    ))
+    )
 
     const offset = computed(() => {
       if (props.modelValue !== true) {
@@ -64,73 +79,85 @@ export default createComponent({
       if (fixed.value === true) {
         return revealed.value === true ? size.value : 0
       }
-      const offset = $layout.scroll.value.position + containerHeight.value + size.value - $layout.height.value
-      return offset > 0 ? offset : 0
+
+      const localOffset =
+        $layout.scroll.value.position +
+        containerHeight.value +
+        size.value -
+        $layout.height.value
+
+      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-footer q-layout__section--marginal '
-      + (fixed.value === true ? 'fixed' : 'absolute') + '-bottom'
-      + (props.bordered === true ? ' q-footer--bordered' : '')
-      + (hidden.value === true ? ' q-footer--hidden' : '')
-      + (
-        props.modelValue !== true
+    const classes = computed(
+      () =>
+        'q-footer q-layout__section--marginal ' +
+        (fixed.value === true ? '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' : '')
-          : ''
-      )
+          : '')
     )
 
     const style = computed(() => {
-      const
-        view = $layout.rows.value.bottom,
+      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 === 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('footer', 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 updateRevealed () {
+    function updateRevealed() {
       if (props.reveal !== true) return
 
       const { direction, position, inflectionPoint } = $layout.scroll.value
 
-      updateLocal(revealed, (
-        direction === 'up'
-        || position - inflectionPoint < 100
-        || $layout.height.value - containerHeight.value - position - size.value < 300
-      ))
+      updateLocal(
+        revealed,
+        direction === 'up' ||
+          position - inflectionPoint < 100 ||
+          $layout.height.value - containerHeight.value - position - size.value <
+            300
+      )
     }
 
-    function onFocusin (evt) {
+    function onFocusin(evt) {
       if (revealOnFocus.value === true) {
         updateLocal(revealed, true)
       }
@@ -138,35 +165,44 @@ 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()
       emit('reveal', val)
     })
 
-    watch([ size, $layout.scroll, $layout.height ], updateRevealed)
+    watch([size, $layout.scroll, $layout.height], updateRevealed)
 
-    watch(() => $q.screen.height, val => {
-      $layout.isContainer.value !== true && updateLocal(windowHeight, val)
-    })
+    watch(
+      () => $q.screen.height,
+      val => {
+        if ($layout.isContainer.value !== true) updateLocal(windowHeight, val)
+      }
+    )
 
     const instance = {}
 
     $layout.instances.footer = instance
-    props.modelValue === true && updateLayout('size', size.value)
+    if (props.modelValue === true) updateLayout('size', size.value)
     updateLayout('space', props.modelValue)
     updateLayout('offset', offset.value)
 
@@ -187,17 +223,24 @@ export default createComponent({
         })
       ])
 
-      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'
+          })
+        )
+      }
 
-      return h('footer', {
-        class: classes.value,
-        style: style.value,
-        onFocusin
-      }, child)
+      return h(
+        'footer',
+        {
+          class: classes.value,
+          style: style.value,
+          onFocusin
+        },
+        child
+      )
     }
   }
 })