quasar 2.18.6 → 2.19.0

package/src/composables/private.use-field/use-field.json

@@ -1,11 +1,11 @@
 {
-  "mixins": [ "composables/private.use-validate/use-validate" ],
+  "mixins": ["composables/private.use-validate/use-validate"],
 
   "props": {
     "label": {
       "type": "String",
       "desc": "A text label that will “float” up above the input field, once the field gets focus",
-      "examples": [ "'Username'" ],
+      "examples": ["'Username'"],
       "category": "content"
     },
 
@@ -18,7 +18,7 @@
     "hint": {
       "type": "String",
       "desc": "Helper (hint) text which gets placed below your wrapped form component",
-      "examples": [ "'Fill in between 3 and 12 characters'" ],
+      "examples": ["'Fill in between 3 and 12 characters'"],
       "category": "content"
     },
 
@@ -31,18 +31,18 @@
     "prefix": {
       "type": "String",
       "desc": "Prefix",
-      "examples": [ "'$'" ],
+      "examples": ["'$'"],
       "category": "content"
     },
 
     "suffix": {
       "type": "String",
       "desc": "Suffix",
-      "examples": [ "'@gmail.com'" ],
+      "examples": ["'@gmail.com'"],
       "category": "content"
     },
 
-    "label-color" : {
+    "label-color": {
       "extends": "color",
       "desc": "Color name for the label from the Quasar Color Palette; Overrides the 'color' prop; The difference from 'color' prop is that the label will always have this color, even when field is not focused"
     },
@@ -74,7 +74,7 @@
     "clear-icon": {
       "type": "String",
       "desc": "Custom icon to use for the clear button when using along with 'clearable' prop",
-      "examples": [ "'close'" ],
+      "examples": ["'close'"],
       "category": "content"
     },
 
@@ -97,9 +97,9 @@
     },
 
     "standout": {
-      "type": [ "Boolean", "String" ],
+      "type": ["Boolean", "String"],
       "desc": "Use 'standout' design for the field; Specifies classes to be applied when focused (overriding default ones)",
-      "examples": [ "true", "'bg-primary text-white'" ],
+      "examples": ["true", "'bg-primary text-white'"],
       "category": "style"
     },
 
@@ -164,7 +164,7 @@
     "for": {
       "type": "String",
       "desc": "Used to specify the 'id' of the control and also the 'for' attribute of the label that wraps it; If no 'name' prop is specified, then it is used for this attribute as well",
-      "examples": [ "'myFieldsId'" ],
+      "examples": ["'myFieldsId'"],
       "category": "behavior"
     }
   },

package/src/composables/private.use-file/use-file-dom-props.js

@@ -1,22 +1,19 @@
 import { computed } from 'vue'
 
-export default function (props, typeGuard) {
-  function getFormDomProps () {
+export default function useFileDomProps(props, typeGuard) {
+  function getFormDomProps() {
     const model = props.modelValue
 
     try {
-      const dt = 'DataTransfer' in window
-        ? new DataTransfer()
-        : ('ClipboardEvent' in window
+      const dt =
+        'DataTransfer' in window
+          ? new DataTransfer()
+          : 'ClipboardEvent' in window
             ? new ClipboardEvent('').clipboardData
             : void 0
-          )
 
       if (Object(model) === model) {
-        ('length' in model
-          ? Array.from(model)
-          : [ model ]
-        ).forEach(file => {
+        ;('length' in model ? Array.from(model) : [model]).forEach(file => {
           dt.items.add(file)
         })
       }
@@ -24,8 +21,7 @@ export default function (props, typeGuard) {
       return {
         files: dt.files
       }
-    }
-    catch (e) {
+    } catch {
       return {
         files: void 0
       }
@@ -34,8 +30,8 @@ export default function (props, typeGuard) {
 
   return typeGuard === true
     ? computed(() => {
-      if (props.type !== 'file') return
-      return getFormDomProps()
-    })
+        if (props.type !== 'file') return
+        return getFormDomProps()
+      })
     : computed(getFormDomProps)
 }

package/src/composables/private.use-file/use-file.js

@@ -3,14 +3,13 @@ import { h, ref, computed, getCurrentInstance } from 'vue'
 import { client } from '../../plugins/platform/Platform.js'
 import { stop, stopAndPrevent } from '../../utils/event/event.js'
 
-function filterFiles (files, rejectedFiles, failedPropValidation, filterFn) {
+function filterFiles(files, rejectedFiles, failedPropValidation, filterFn) {
   const acceptedFiles = []
 
   files.forEach(file => {
     if (filterFn(file) === true) {
       acceptedFiles.push(file)
-    }
-    else {
+    } else {
       rejectedFiles.push({ failedPropValidation, file })
     }
   })
@@ -18,7 +17,7 @@ function filterFiles (files, rejectedFiles, failedPropValidation, filterFn) {
   return acceptedFiles
 }
 
-function stopAndPreventDrag (e) {
+function stopAndPreventDrag(e) {
   if (e?.dataTransfer) {
     e.dataTransfer.dropEffect = 'copy'
   }
@@ -30,15 +29,15 @@ export const useFileProps = {
   multiple: Boolean,
   accept: String,
   capture: String,
-  maxFileSize: [ Number, String ],
-  maxTotalSize: [ Number, String ],
-  maxFiles: [ Number, String ],
+  maxFileSize: [Number, String],
+  maxTotalSize: [Number, String],
+  maxFiles: [Number, String],
   filter: Function
 }
 
-export const useFileEmits = [ 'rejected' ]
+export const useFileEmits = ['rejected']
 
-export default function ({
+export default function useFile({
   editable,
   dnd,
   getFileInput,
@@ -48,25 +47,26 @@ export default function ({
 
   const dndRef = ref(null)
 
-  const extensions = computed(() => (
+  const extensions = computed(() =>
     props.accept !== void 0
       ? props.accept.split(',').map(ext => {
-        ext = ext.trim()
-        if (ext === '*') { // support "*"
-          return '*/'
-        }
-        else if (ext.endsWith('/*')) { // support "image/*" or "*/*"
-          ext = ext.slice(0, ext.length - 1)
-        }
-        return ext.toUpperCase()
-      })
+          ext = ext.trim()
+          if (ext === '*') {
+            // support "*"
+            return '*/'
+          } else if (ext.endsWith('/*')) {
+            // support "image/*" or "*/*"
+            ext = ext.slice(0, ext.length - 1)
+          }
+          return ext.toUpperCase()
+        })
       : null
-  ))
+  )
 
   const maxFilesNumber = computed(() => parseInt(props.maxFiles, 10))
   const maxTotalSizeNumber = computed(() => parseInt(props.maxTotalSize, 10))
 
-  function pickFiles (e) {
+  function pickFiles(e) {
     if (editable.value) {
       if (e !== Object(e)) {
         e = { target: null }
@@ -74,22 +74,21 @@ export default function ({
 
       if (e.target?.matches('input[type="file"]') === true) {
         // stop propagation if it's not a real pointer event
-        e.clientX === 0 && e.clientY === 0 && stop(e)
-      }
-      else {
+        if (e.clientX === 0 && e.clientY === 0) stop(e)
+      } else {
         const input = getFileInput()
         if (input !== e.target) input?.click(e)
       }
     }
   }
 
-  function addFiles (files) {
+  function addFiles(files) {
     if (editable.value && files) {
       addFilesToQueue(null, files)
     }
   }
 
-  function processFiles (e, filesToProcess, currentFileList, append) {
+  function processFiles(e, filesToProcess, currentFileList, append) {
     let files = Array.from(filesToProcess || e.target.files)
     const rejectedFiles = []
 
@@ -101,80 +100,97 @@ export default function ({
 
     // filter file types
     if (props.accept !== void 0 && extensions.value.indexOf('*/') === -1) {
-      files = filterFiles(files, rejectedFiles, 'accept', file => {
-        return extensions.value.some(ext => (
-          file.type.toUpperCase().startsWith(ext)
-          || file.name.toUpperCase().endsWith(ext)
-        ))
-      })
-
-      if (files.length === 0) { return done() }
+      files = filterFiles(files, rejectedFiles, 'accept', file =>
+        extensions.value.some(
+          ext =>
+            file.type.toUpperCase().startsWith(ext) ||
+            file.name.toUpperCase().endsWith(ext)
+        )
+      )
+
+      if (files.length === 0) {
+        return done()
+      }
     }
 
     // filter max file size
     if (props.maxFileSize !== void 0) {
       const maxFileSize = parseInt(props.maxFileSize, 10)
-      files = filterFiles(files, rejectedFiles, 'max-file-size', file => {
-        return file.size <= maxFileSize
-      })
-
-      if (files.length === 0) { return done() }
+      files = filterFiles(
+        files,
+        rejectedFiles,
+        'max-file-size',
+        file => file.size <= maxFileSize
+      )
+
+      if (files.length === 0) {
+        return done()
+      }
     }
 
     // Cordova/iOS allows selecting multiple files even when the
     // multiple attribute is not specified. We also normalize drag'n'dropped
     // files here:
     if (props.multiple !== true && files.length !== 0) {
-      files = [ files[ 0 ] ]
+      files = [files[0]]
     }
 
     // Compute key to use for each file
     files.forEach(file => {
-      file.__key = file.webkitRelativePath + file.lastModified + file.name + file.size
+      file.__key =
+        file.webkitRelativePath + file.lastModified + file.name + file.size
     })
 
     if (append === true) {
       // Avoid duplicate files
       const filenameMap = currentFileList.map(entry => entry.__key)
-      files = filterFiles(files, rejectedFiles, 'duplicate', file => {
-        return filenameMap.includes(file.__key) === false
-      })
+      files = filterFiles(
+        files,
+        rejectedFiles,
+        'duplicate',
+        file => filenameMap.includes(file.__key) === false
+      )
     }
 
-    if (files.length === 0) { return done() }
+    if (files.length === 0) {
+      return done()
+    }
 
     if (props.maxTotalSize !== void 0) {
-      let size = append === true
-        ? currentFileList.reduce((total, file) => total + file.size, 0)
-        : 0
+      let size =
+        append === true
+          ? currentFileList.reduce((total, file) => total + file.size, 0)
+          : 0
 
       files = filterFiles(files, rejectedFiles, 'max-total-size', file => {
         size += file.size
         return size <= maxTotalSizeNumber.value
       })
 
-      if (files.length === 0) { return done() }
+      if (files.length === 0) {
+        return done()
+      }
     }
 
     // do we have custom filter function?
     if (typeof props.filter === 'function') {
       const filteredFiles = props.filter(files)
-      files = filterFiles(files, rejectedFiles, 'filter', file => {
-        return filteredFiles.includes(file)
-      })
+      files = filterFiles(files, rejectedFiles, 'filter', file =>
+        filteredFiles.includes(file)
+      )
     }
 
     if (props.maxFiles !== void 0) {
-      let filesNumber = append === true
-        ? currentFileList.length
-        : 0
+      let filesNumber = append === true ? currentFileList.length : 0
 
       files = filterFiles(files, rejectedFiles, 'max-files', () => {
         filesNumber++
         return filesNumber <= maxFilesNumber.value
       })
 
-      if (files.length === 0) { return done() }
+      if (files.length === 0) {
+        return done()
+      }
     }
 
     done()
@@ -184,24 +200,27 @@ export default function ({
     }
   }
 
-  function onDragover (e) {
+  function onDragover(e) {
     stopAndPreventDrag(e)
-    dnd.value !== true && (dnd.value = true)
+    if (dnd.value !== true) dnd.value = true
   }
 
-  function onDragleave (e) {
+  function onDragleave(e) {
     stopAndPrevent(e)
 
     // Safari bug: relatedTarget is null for over 10 years
     // https://bugs.webkit.org/show_bug.cgi?id=66547
-    const gone = e.relatedTarget !== null || client.is.safari !== true
-      ? e.relatedTarget !== dndRef.value
-      : document.elementsFromPoint(e.clientX, e.clientY).includes(dndRef.value) === false
-
-    gone === true && (dnd.value = false)
+    const gone =
+      e.relatedTarget !== null || client.is.safari !== true
+        ? e.relatedTarget !== dndRef.value
+        : document
+            .elementsFromPoint(e.clientX, e.clientY)
+            .includes(dndRef.value) === false
+
+    if (gone === true) dnd.value = false
   }
 
-  function onDrop (e) {
+  function onDrop(e) {
     stopAndPreventDrag(e)
     const files = e.dataTransfer.files
 
@@ -212,11 +231,11 @@ export default function ({
     dnd.value = false
   }
 
-  function getDndNode (type) {
+  function getDndNode(type) {
     if (dnd.value === true) {
       return h('div', {
         ref: dndRef,
-        class: `q-${ type }__dnd absolute-full`,
+        class: `q-${type}__dnd absolute-full`,
         onDragenter: stopAndPreventDrag,
         onDragover: stopAndPreventDrag,
         onDragleave,

package/src/composables/private.use-file/use-file.json

@@ -9,32 +9,32 @@
     "accept": {
       "type": "String",
       "desc": "Comma separated list of unique file type specifiers. Maps to 'accept' attribute of native input type=file element",
-      "examples": [ "'.jpg, .pdf, image/*'", "'image/jpeg, .pdf'" ],
+      "examples": ["'.jpg, .pdf, image/*'", "'image/jpeg, .pdf'"],
       "category": "behavior"
     },
 
     "capture": {
       "type": "String",
       "desc": "Optionally, specify that a new file should be captured, and which device should be used to capture that new media of a type defined by the 'accept' prop. Maps to 'capture' attribute of native input type=file element",
-      "values": [ "'user'", "'environment'" ],
+      "values": ["'user'", "'environment'"],
       "category": "behavior"
     },
 
     "max-file-size": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "Maximum size of individual file in bytes",
-      "examples": [ "1024", "'1048576'" ],
+      "examples": ["1024", "'1048576'"],
       "category": "behavior"
     },
 
     "max-total-size": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "Maximum size of all files combined in bytes",
       "category": "behavior"
     },
 
     "max-files": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "Maximum number of files to contain",
       "category": "behavior"
     },
@@ -54,7 +54,7 @@
         "tsType": "File",
         "desc": "Filtered files to be added to queue"
       },
-      "examples": [ "files => files.filter(file => file.size === 1024)" ],
+      "examples": ["files => files.filter(file => file.size === 1024)"],
       "category": "behavior"
     }
   },
@@ -87,7 +87,7 @@
       "desc": "Add files programmatically",
       "params": {
         "files": {
-          "type": [ "Array", "FileList" ],
+          "type": ["Array", "FileList"],
           "tsType": "QUseFileAddInput",
           "desc": "Array of files (instances of File) or FileList",
           "required": true

package/src/composables/private.use-fullscreen/use-fullscreen.js

@@ -1,4 +1,11 @@
-import { ref, watch, onBeforeMount, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
+import {
+  ref,
+  watch,
+  onBeforeMount,
+  onMounted,
+  onBeforeUnmount,
+  getCurrentInstance
+} from 'vue'
 
 import History from '../../plugins/private.history/History.js'
 import { vmHasRouter } from '../../utils/private.vm/vm.js'
@@ -10,40 +17,49 @@ export const useFullscreenProps = {
   noRouteFullscreenExit: Boolean
 }
 
-export const useFullscreenEmits = [ 'update:fullscreen', 'fullscreen' ]
+export const useFullscreenEmits = ['update:fullscreen', 'fullscreen']
 
-export default function () {
+export default function useFullscreen() {
   const vm = getCurrentInstance()
   const { props, emit, proxy } = vm
 
   let historyEntry, fullscreenFillerNode, container
   const inFullscreen = ref(false)
 
-  vmHasRouter(vm) === true && watch(() => proxy.$route.fullPath, () => {
-    props.noRouteFullscreenExit !== true && exitFullscreen()
-  })
+  if (vmHasRouter(vm) === true) {
+    watch(
+      () => proxy.$route.fullPath,
+      () => {
+        if (props.noRouteFullscreenExit !== true) {
+          exitFullscreen()
+        }
+      }
+    )
+  }
 
-  watch(() => props.fullscreen, v => {
-    if (inFullscreen.value !== v) {
-      toggleFullscreen()
+  watch(
+    () => props.fullscreen,
+    v => {
+      if (inFullscreen.value !== v) {
+        toggleFullscreen()
+      }
     }
-  })
+  )
 
   watch(inFullscreen, v => {
     emit('update:fullscreen', v)
     emit('fullscreen', v)
   })
 
-  function toggleFullscreen () {
+  function toggleFullscreen() {
     if (inFullscreen.value === true) {
       exitFullscreen()
-    }
-    else {
+    } else {
       setFullscreen()
     }
   }
 
-  function setFullscreen () {
+  function setFullscreen() {
     if (inFullscreen.value === true) return
 
     inFullscreen.value = true
@@ -62,7 +78,7 @@ export default function () {
     History.add(historyEntry)
   }
 
-  function exitFullscreen () {
+  function exitFullscreen() {
     if (inFullscreen.value !== true) return
 
     if (historyEntry !== void 0) {
@@ -79,7 +95,9 @@ export default function () {
       document.body.classList.remove('q-body--fullscreen-mixin')
 
       if (proxy.$el.scrollIntoView !== void 0) {
-        setTimeout(() => { proxy.$el.scrollIntoView() })
+        setTimeout(() => {
+          proxy.$el.scrollIntoView()
+        })
       }
     }
   }
@@ -89,7 +107,7 @@ export default function () {
   })
 
   onMounted(() => {
-    props.fullscreen === true && setFullscreen()
+    if (props.fullscreen === true) setFullscreen()
   })
 
   onBeforeUnmount(exitFullscreen)

package/src/composables/private.use-fullscreen/use-fullscreen.json

@@ -4,7 +4,7 @@
       "type": "Boolean",
       "sync": true,
       "desc": "Fullscreen mode",
-      "examples": [ "# v-model:fullscreen=\"isFullscreen\"" ],
+      "examples": ["# v-model:fullscreen=\"isFullscreen\""],
       "category": "behavior"
     },
 

package/src/composables/private.use-history/use-history.js

@@ -2,10 +2,10 @@ import { onBeforeUnmount } from 'vue'
 
 import History from '../../plugins/private.history/History.js'
 
-export default function (showing, hide, hideOnRouteChange) {
+export default function useHistory(showing, hide, hideOnRouteChange) {
   let historyEntry
 
-  function removeFromHistory () {
+  function removeFromHistory() {
     if (historyEntry !== void 0) {
       History.remove(historyEntry)
       historyEntry = void 0
@@ -13,13 +13,13 @@ export default function (showing, hide, hideOnRouteChange) {
   }
 
   onBeforeUnmount(() => {
-    showing.value === true && removeFromHistory()
+    if (showing.value === true) removeFromHistory()
   })
 
   return {
     removeFromHistory,
 
-    addToHistory () {
+    addToHistory() {
       historyEntry = {
         condition: () => hideOnRouteChange.value === true,
         handler: hide