quasar 2.18.7 → 2.19.0

package/src/components/uploader/xhr-uploader-plugin.js

@@ -1,35 +1,33 @@
 import { ref, computed } from 'vue'
 
-function getFn (prop) {
-  return typeof prop === 'function'
-    ? prop
-    : () => prop
+function getFn(prop) {
+  return typeof prop === 'function' ? prop : () => prop
 }
 
 const name = 'QUploader'
 
-const props = {
-  url: [ Function, String ],
+const componentProps = {
+  url: [Function, String],
   method: {
-    type: [ Function, String ],
+    type: [Function, String],
     default: 'POST'
   },
   fieldName: {
-    type: [ Function, String ],
+    type: [Function, String],
     default: () => file => file.name
   },
-  headers: [ Function, Array ],
-  formFields: [ Function, Array ],
-  withCredentials: [ Function, Boolean ],
-  sendRaw: [ Function, Boolean ],
+  headers: [Function, Array],
+  formFields: [Function, Array],
+  withCredentials: [Function, Boolean],
+  sendRaw: [Function, Boolean],
 
-  batch: [ Function, Boolean ],
+  batch: [Function, Boolean],
   factory: Function
 }
 
-const emits = [ 'factoryFailed', 'uploaded', 'failed', 'uploading' ]
+const emits = ['factoryFailed', 'uploaded', 'failed', 'uploading']
 
-function injectPlugin ({ props, emit, helpers }) {
+function injectPlugin({ props, emit, helpers }) {
   const xhrs = ref([])
   const promises = ref([])
   const workingThreads = ref(0)
@@ -50,29 +48,30 @@ function injectPlugin ({ props, emit, helpers }) {
 
   let abortPromises
 
-  function abort () {
-    xhrs.value.forEach(x => { x.abort() })
+  function abort() {
+    xhrs.value.forEach(x => {
+      x.abort()
+    })
 
     if (promises.value.length !== 0) {
       abortPromises = true
     }
   }
 
-  function upload () {
+  function upload() {
     const queue = helpers.queuedFiles.value.slice(0)
     helpers.queuedFiles.value = []
 
     if (xhrProps.value.batch(queue)) {
       runFactory(queue)
-    }
-    else {
+    } else {
       queue.forEach(file => {
-        runFactory([ file ])
+        runFactory([file])
       })
     }
   }
 
-  function runFactory (files) {
+  function runFactory(files) {
     workingThreads.value++
 
     if (typeof props.factory !== 'function') {
@@ -89,8 +88,10 @@ function injectPlugin ({ props, emit, helpers }) {
         files
       )
       workingThreads.value--
-    }
-    else if (typeof res.catch === 'function' && typeof res.then === 'function') {
+    } else if (
+      typeof res.catch === 'function' &&
+      typeof res.then === 'function'
+    ) {
       promises.value.push(res)
 
       const failed = err => {
@@ -102,38 +103,38 @@ function injectPlugin ({ props, emit, helpers }) {
           }
 
           helpers.queuedFiles.value = helpers.queuedFiles.value.concat(files)
-          files.forEach(f => { helpers.updateFileStatus(f, 'failed') })
+          files.forEach(f => {
+            helpers.updateFileStatus(f, 'failed')
+          })
 
           emit('factoryFailed', err, files)
           workingThreads.value--
         }
       }
 
-      res.then(factory => {
-        if (abortPromises === true) {
-          failed(new Error('Aborted'))
-        }
-        else if (helpers.isAlive() === true) {
-          promises.value = promises.value.filter(p => p !== res)
-          performUpload(files, factory)
-        }
-      }).catch(failed)
-    }
-    else {
+      res
+        .then(factory => {
+          if (abortPromises === true) {
+            failed(new Error('Aborted'))
+          } else if (helpers.isAlive() === true) {
+            promises.value = promises.value.filter(p => p !== res)
+            performUpload(files, factory)
+          }
+        })
+        .catch(failed)
+    } else {
       performUpload(files, res || {})
     }
   }
 
-  function performUpload (files, factory) {
-    const
-      form = new FormData(),
+  function performUpload(files, factory) {
+    const form = new FormData(),
       xhr = new XMLHttpRequest()
 
-    const getProp = (name, arg) => {
-      return factory[ name ] !== void 0
-        ? getFn(factory[ name ])(arg)
-        : xhrProps.value[ name ](arg)
-    }
+    const getProp = (propName, arg) =>
+      factory[propName] !== void 0
+        ? getFn(factory[propName])(arg)
+        : xhrProps.value[propName](arg)
 
     const url = getProp('url', files)
 
@@ -144,57 +145,63 @@ function injectPlugin ({ props, emit, helpers }) {
     }
 
     const fields = getProp('formFields', files)
-    fields !== void 0 && fields.forEach(field => {
-      form.append(field.name, field.value)
-    })
+    if (fields !== void 0) {
+      fields.forEach(field => {
+        form.append(field.name, field.value)
+      })
+    }
 
-    let
-      uploadIndex = 0,
+    let uploadIndex = 0,
       uploadIndexSize = 0,
       localUploadedSize = 0,
       maxUploadSize = 0,
       aborted
 
-    xhr.upload.addEventListener('progress', e => {
-      if (aborted === true) return
-
-      const loaded = Math.min(maxUploadSize, e.loaded)
-
-      helpers.uploadedSize.value += loaded - localUploadedSize
-      localUploadedSize = loaded
-
-      let size = localUploadedSize - uploadIndexSize
-      for (let i = uploadIndex; size > 0 && i < files.length; i++) {
-        const
-          file = files[ i ],
-          uploaded = size > file.size
-
-        if (uploaded) {
-          size -= file.size
-          uploadIndex++
-          uploadIndexSize += file.size
-          helpers.updateFileStatus(file, 'uploading', file.size)
-        }
-        else {
-          helpers.updateFileStatus(file, 'uploading', size)
-          return
+    xhr.upload.addEventListener(
+      'progress',
+      e => {
+        if (aborted === true) return
+
+        const loaded = Math.min(maxUploadSize, e.loaded)
+
+        helpers.uploadedSize.value += loaded - localUploadedSize
+        localUploadedSize = loaded
+
+        let size = localUploadedSize - uploadIndexSize
+        for (let i = uploadIndex; size > 0 && i < files.length; i++) {
+          const file = files[i],
+            uploaded = size > file.size
+
+          if (uploaded) {
+            size -= file.size
+            uploadIndex++
+            uploadIndexSize += file.size
+            helpers.updateFileStatus(file, 'uploading', file.size)
+          } else {
+            helpers.updateFileStatus(file, 'uploading', size)
+            return
+          }
         }
-      }
-    }, false)
+      },
+      false
+    )
 
     xhr.onreadystatechange = () => {
       if (xhr.readyState < 4) return
 
       if (xhr.status && xhr.status < 400) {
         helpers.uploadedFiles.value = helpers.uploadedFiles.value.concat(files)
-        files.forEach(f => { helpers.updateFileStatus(f, 'uploaded') })
+        files.forEach(f => {
+          helpers.updateFileStatus(f, 'uploaded')
+        })
         emit('uploaded', { files, xhr })
-      }
-      else {
+      } else {
         aborted = true
         helpers.uploadedSize.value -= localUploadedSize
         helpers.queuedFiles.value = helpers.queuedFiles.value.concat(files)
-        files.forEach(f => { helpers.updateFileStatus(f, 'failed') })
+        files.forEach(f => {
+          helpers.updateFileStatus(f, 'failed')
+        })
         emit('failed', { files, xhr })
       }
 
@@ -202,19 +209,18 @@ function injectPlugin ({ props, emit, helpers }) {
       xhrs.value = xhrs.value.filter(x => x !== xhr)
     }
 
-    xhr.open(
-      getProp('method', files),
-      url
-    )
+    xhr.open(getProp('method', files), url)
 
     if (getProp('withCredentials', files) === true) {
       xhr.withCredentials = true
     }
 
     const headers = getProp('headers', files)
-    headers !== void 0 && headers.forEach(head => {
-      xhr.setRequestHeader(head.name, head.value)
-    })
+    if (headers !== void 0) {
+      headers.forEach(head => {
+        xhr.setRequestHeader(head.name, head.value)
+      })
+    }
 
     const sendRaw = getProp('sendRaw', files)
 
@@ -224,7 +230,9 @@ function injectPlugin ({ props, emit, helpers }) {
         form.append(getProp('fieldName', file), file, file.name)
       }
       file.xhr = xhr
-      file.__abort = () => { xhr.abort() }
+      file.__abort = () => {
+        xhr.abort()
+      }
       maxUploadSize += file.size
     })
 
@@ -233,8 +241,7 @@ function injectPlugin ({ props, emit, helpers }) {
 
     if (sendRaw === true) {
       xhr.send(new Blob(files))
-    }
-    else {
+    } else {
       xhr.send(form)
     }
   }
@@ -250,7 +257,7 @@ function injectPlugin ({ props, emit, helpers }) {
 
 export default {
   name,
-  props,
+  props: componentProps,
   emits,
   injectPlugin
 }

package/src/components/uploader/xhr-uploader-plugin.json

@@ -11,16 +11,19 @@
         }
       },
       "returns": {
-        "type": [ "Object", "Promise<any>" ],
+        "type": ["Object", "Promise<any>"],
         "desc": "Optional configuration for the upload process; You can override QUploader props in this Object (url, method, headers, formFields, fieldName, withCredentials, sendRaw); Props of these Object can also be Functions with the form of (file[s]) => value"
       },
       "category": "upload"
     },
 
     "url": {
-      "type": [ "String", "Function" ],
+      "type": ["String", "Function"],
       "desc": "URL or path to the server which handles the upload. Takes String or factory function, which returns String. Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
-      "examples": [ "'https://example.com/path'", "files => `https://example.com?count=${ files.length }`" ],
+      "examples": [
+        "'https://example.com/path'",
+        "files => `https://example.com?count=${ files.length }`"
+      ],
       "params": {
         "files": {
           "type": "Array",
@@ -35,11 +38,11 @@
     },
 
     "method": {
-      "type": [ "String", "Function" ],
+      "type": ["String", "Function"],
       "default": "'POST'",
       "desc": "HTTP method to use for upload; Takes String or factory function which returns a String; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
-      "values": [ "'POST'", "'PUT'" ],
-      "examples": [ "'POST'", "files => (files.length > 10 ? 'POST' : 'PUT')" ],
+      "values": ["'POST'", "'PUT'"],
+      "examples": ["'POST'", "files => (files.length > 10 ? 'POST' : 'PUT')"],
       "params": {
         "files": {
           "type": "Array",
@@ -54,13 +57,10 @@
     },
 
     "field-name": {
-      "type": [ "String", "Function" ],
+      "type": ["String", "Function"],
       "desc": "Field name for each file upload; This goes into the following header: 'Content-Disposition: form-data; name=\"__HERE__\"; filename=\"somefile.png\"; If using a function then for best performance, reference it from your scope and do not define it inline",
       "default": "file => file.name",
-      "examples": [
-        "'backgroundFile'",
-        "file => ('background' + file.name)"
-      ],
+      "examples": ["'backgroundFile'", "file => ('background' + file.name)"],
       "params": {
         "files": {
           "type": "File",
@@ -75,26 +75,26 @@
     },
 
     "headers": {
-      "type": [ "Array", "Function" ],
+      "type": ["Array", "Function"],
       "desc": "Array or a factory function which returns an array; Array consists of objects with header definitions; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
       "definition": {
         "name": {
           "type": "String",
           "required": true,
           "desc": "Header name",
-          "examples": [ "'Content-Type'", "'Accept'", "'Cache-Control'" ]
+          "examples": ["'Content-Type'", "'Accept'", "'Cache-Control'"]
         },
         "value": {
           "type": "String",
           "required": true,
           "desc": "Header value",
-          "examples": [ "'application/json'", "'no-cache'" ]
+          "examples": ["'application/json'", "'no-cache'"]
         }
       },
       "examples": [
-        "[ { name: 'Content-Type', value: 'application/json' }, { name: 'Accept', value: 'application/json' } ]",
-        "() => [ { name: 'X-Custom-Timestamp', value: Date.now() } ]",
-        "files => [ { name: 'X-Custom-Count', value: files.length } ]"
+        "[{ name: 'Content-Type', value: 'application/json' }, { name: 'Accept', value: 'application/json' }]",
+        "() => [ { name: 'X-Custom-Timestamp', value: Date.now() }]",
+        "files => [ { name: 'X-Custom-Count', value: files.length }]"
       ],
       "params": {
         "files": {
@@ -110,26 +110,26 @@
     },
 
     "form-fields": {
-      "type": [ "Array", "Function" ],
+      "type": ["Array", "Function"],
       "desc": "Array or a factory function which returns an array; Array consists of objects with additional fields definitions (used by Form to be uploaded); Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
       "definition": {
         "name": {
           "type": "String",
           "required": true,
           "desc": "Field name",
-          "examples": [ "'Some field'" ]
+          "examples": ["'Some field'"]
         },
         "value": {
           "type": "String",
           "required": true,
           "desc": "Field value",
-          "examples": [ "'some-value'" ]
+          "examples": ["'some-value'"]
         }
       },
       "examples": [
-        "[ { name: 'my-field', value: 'my-value' } ]",
-        "() => [ { name: 'my-field', value: 'my-value' } ]",
-        "files => [ { name: 'my-field', value: 'my-value' + files.length } ]"
+        "[{ name: 'my-field', value: 'my-value' }]",
+        "() => [ { name: 'my-field', value: 'my-value' }]",
+        "files => [ { name: 'my-field', value: 'my-value' + files.length }]"
       ],
       "params": {
         "files": {
@@ -145,9 +145,9 @@
     },
 
     "with-credentials": {
-      "type": [ "Boolean", "Function" ],
+      "type": ["Boolean", "Function"],
       "desc": "Sets withCredentials to true on the XHR that manages the upload; Takes boolean or factory function for Boolean; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
-      "examples": [ "true", "files => (files.length === 2)" ],
+      "examples": ["true", "files => (files.length === 2)"],
       "params": {
         "files": {
           "type": "Array",
@@ -162,9 +162,9 @@
     },
 
     "send-raw": {
-      "type": [ "Boolean", "Function" ],
+      "type": ["Boolean", "Function"],
       "desc": "Send raw files without wrapping into a Form(); Takes boolean or factory function for Boolean; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
-      "examples": [ "true", "files => (files.length > 2)" ],
+      "examples": ["true", "files => (files.length > 2)"],
       "params": {
         "files": {
           "type": "Array",
@@ -179,9 +179,9 @@
     },
 
     "batch": {
-      "type": [ "Boolean", "Function" ],
+      "type": ["Boolean", "Function"],
       "desc": "Upload files in batch (in one XHR request); Takes boolean or factory function for Boolean; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
-      "examples": [ "files => files.length > 10" ],
+      "examples": ["files => files.length > 10"],
       "params": {
         "files": {
           "type": "Array",

package/src/components/video/QVideo.js

@@ -1,6 +1,8 @@
 import { h, computed } from 'vue'
 
-import useRatio, { useRatioProps } from '../../composables/private.use-ratio/use-ratio.js'
+import useRatio, {
+  useRatioProps
+} from '../../composables/private.use-ratio/use-ratio.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
@@ -31,27 +33,31 @@ export default createComponent({
     }
   },
 
-  setup (props) {
+  setup(props) {
     const ratioStyle = useRatio(props)
 
-    const classes = computed(() =>
-      'q-video'
-      + (props.ratio !== void 0 ? ' q-video--responsive' : '')
+    const classes = computed(
+      () => 'q-video' + (props.ratio !== void 0 ? ' q-video--responsive' : '')
     )
 
-    return () => h('div', {
-      class: classes.value,
-      style: ratioStyle.value
-    }, [
-      h('iframe', {
-        src: props.src,
-        title: props.title,
-        fetchpriority: props.fetchpriority,
-        loading: props.loading,
-        referrerpolicy: props.referrerpolicy,
-        frameborder: '0',
-        allowfullscreen: true
-      })
-    ])
+    return () =>
+      h(
+        'div',
+        {
+          class: classes.value,
+          style: ratioStyle.value
+        },
+        [
+          h('iframe', {
+            src: props.src,
+            title: props.title,
+            fetchpriority: props.fetchpriority,
+            loading: props.loading,
+            referrerpolicy: props.referrerpolicy,
+            frameborder: '0',
+            allowfullscreen: true
+          })
+        ]
+      )
   }
 })

package/src/components/video/QVideo.json

@@ -3,14 +3,14 @@
     "docsUrl": "https://v2.quasar.dev/vue-components/video"
   },
 
-  "mixins": [ "composables/private.use-ratio/use-ratio" ],
+  "mixins": ["composables/private.use-ratio/use-ratio"],
 
   "props": {
     "src": {
       "type": "String",
       "desc": "The source url to display in an iframe",
       "required": true,
-      "examples": [ "'https://www.youtube.com/embed/k3_tw44QsZQ'" ],
+      "examples": ["'https://www.youtube.com/embed/k3_tw44QsZQ'"],
       "category": "model"
     },
 
@@ -18,7 +18,7 @@
       "type": "String",
       "desc": "(Accessibility) Set the native 'title' attribute value of the inner iframe being used",
       "required": false,
-      "examples": [ "'My Daily Marathon'" ],
+      "examples": ["'My Daily Marathon'"],
       "category": "accessibility",
       "addedIn": "v2.4.3"
     },
@@ -27,7 +27,7 @@
       "type": "String",
       "desc": "Provides a hint of the relative priority to use when fetching the iframe document",
       "default": "'auto'",
-      "values": [ "'high'", "'low'", "'auto'" ],
+      "values": ["'high'", "'low'", "'auto'"],
       "category": "behavior",
       "addedIn": "v2.6.6"
     },
@@ -36,7 +36,7 @@
       "type": "String",
       "desc": "Indicates how the browser should load the iframe",
       "default": "'eager'",
-      "values": [ "'eager'", "'lazy'" ],
+      "values": ["'eager'", "'lazy'"],
       "category": "behavior",
       "addedIn": "v2.6.6"
     },