quasar 2.9.2 → 2.10.1

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

@@ -7,14 +7,12 @@
       "params": {
         "files": {
           "type": "Array",
-          "desc": "Uploaded files",
-          "__exemption": [ "examples" ]
+          "desc": "Uploaded files"
         }
       },
       "returns": {
         "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",
-        "__exemption": [ "examples" ]
+        "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"
     },
@@ -26,14 +24,12 @@
       "params": {
         "files": {
           "type": "Array",
-          "desc": "Uploaded files",
-          "__exemption": [ "examples" ]
+          "desc": "Uploaded files"
         }
       },
       "returns": {
         "type": "String",
-        "desc": "URL or path to the server which handles the upload",
-        "__exemption": [ "examples" ]
+        "desc": "URL or path to the server which handles the upload"
       },
       "category": "upload"
     },
@@ -47,14 +43,12 @@
       "params": {
         "files": {
           "type": "Array",
-          "desc": "Uploaded files",
-          "__exemption": [ "examples" ]
+          "desc": "Uploaded files"
         }
       },
       "returns": {
         "type": "String",
-        "desc": "HTTP method to use for upload",
-        "__exemption": [ "examples" ]
+        "desc": "HTTP method to use for upload"
       },
       "category": "upload"
     },
@@ -70,14 +64,12 @@
       "params": {
         "files": {
           "type": "File",
-          "desc": "The current file being processed",
-          "__exemption": [ "examples" ]
+          "desc": "The current file being processed"
         }
       },
       "returns": {
         "type": "String",
-        "desc": "Field name for the current file upload",
-        "__exemption": [ "examples" ]
+        "desc": "Field name for the current file upload"
       },
       "category": "upload"
     },
@@ -107,14 +99,12 @@
       "params": {
         "files": {
           "type": "Array",
-          "desc": "Uploaded files",
-          "__exemption": [ "examples" ]
+          "desc": "Uploaded files"
         }
       },
       "returns": {
         "type": "String",
-        "desc": "An array consisting of objects with header definitions",
-        "__exemption": [ "examples" ]
+        "desc": "An array consisting of objects with header definitions"
       },
       "category": "upload"
     },
@@ -144,14 +134,12 @@
       "params": {
         "files": {
           "type": "Array",
-          "desc": "Uploaded files",
-          "__exemption": [ "examples" ]
+          "desc": "Uploaded files"
         }
       },
       "returns": {
         "type": "String",
-        "desc": "An array consists of objects with additional fields definitions (used by Form to be uploaded)",
-        "__exemption": [ "examples" ]
+        "desc": "An array consists of objects with additional fields definitions (used by Form to be uploaded)"
       },
       "category": "upload"
     },
@@ -163,14 +151,12 @@
       "params": {
         "files": {
           "type": "Array",
-          "desc": "Uploaded files",
-          "__exemption": [ "examples" ]
+          "desc": "Uploaded files"
         }
       },
       "returns": {
         "type": "Boolean",
-        "desc": "If true, withCredentials will be set to true on the XHR that manages the upload",
-        "__exemption": [ "examples" ]
+        "desc": "If true, withCredentials will be set to true on the XHR that manages the upload"
       },
       "category": "upload"
     },
@@ -182,14 +168,12 @@
       "params": {
         "files": {
           "type": "Array",
-          "desc": "Uploaded files",
-          "__exemption": [ "examples" ]
+          "desc": "Uploaded files"
         }
       },
       "returns": {
         "type": "Boolean",
-        "desc": "If true, raw files will get sent without wrapping into a Form()",
-        "__exemption": [ "examples" ]
+        "desc": "If true, raw files will get sent without wrapping into a Form()"
       },
       "category": "upload"
     },
@@ -201,14 +185,12 @@
       "params": {
         "files": {
           "type": "Array",
-          "desc": "Uploaded files",
-          "__exemption": [ "examples" ]
+          "desc": "Uploaded files"
         }
       },
       "returns": {
         "type": "Boolean",
-        "desc": "If true, files will be uploaded in a batch (in one XHR request)",
-        "__exemption": [ "examples" ]
+        "desc": "If true, files will be uploaded in a batch (in one XHR request)"
       },
       "category": "upload"
     }
@@ -225,14 +207,12 @@
             "files": {
               "type": "Array",
               "required": true,
-              "desc": "Uploaded files",
-              "__exemption": [ "examples" ]
+              "desc": "Uploaded files"
             },
             "xhr": {
               "type": "Object",
               "required": true,
-              "desc": "XMLHttpRequest that has been used to upload this batch of files",
-              "__exemption": [ "examples" ]
+              "desc": "XMLHttpRequest that has been used to upload this batch of files"
             }
           }
         }
@@ -249,14 +229,12 @@
             "files": {
               "type": "Array",
               "required": true,
-              "desc": "Files which encountered error",
-              "__exemption": [ "examples" ]
+              "desc": "Files which encountered error"
             },
             "xhr": {
               "type": "Object",
               "required": true,
-              "desc": "XMLHttpRequest that has been used to upload this batch of files",
-              "__exemption": [ "examples" ]
+              "desc": "XMLHttpRequest that has been used to upload this batch of files"
             }
           }
         }
@@ -273,14 +251,12 @@
             "files": {
               "type": "Array",
               "required": true,
-              "desc": "Files which are now uploading",
-              "__exemption": [ "examples" ]
+              "desc": "Files which are now uploading"
             },
             "xhr": {
               "type": "Object",
               "required": true,
-              "desc": "XMLHttpRequest used for uploading",
-              "__exemption": [ "examples" ]
+              "desc": "XMLHttpRequest used for uploading"
             }
           }
         }
@@ -296,8 +272,7 @@
         },
         "files": {
           "type": "Array",
-          "desc": "Files which were to get uploaded",
-          "__exemption": [ "examples" ]
+          "desc": "Files which were to get uploaded"
         }
       }
     }

package/src/components/virtual-scroll/QVirtualScroll.json

@@ -42,19 +42,16 @@
       "params": {
         "from": {
           "type": "Number",
-          "desc": "Index of the first item (0 based)",
-          "examples": [ 15 ]
+          "desc": "Index of the first item (0 based)"
         },
         "size": {
           "type": "Number",
-          "desc": "Number of items to return",
-          "examples": [ 38 ]
+          "desc": "Number of items to return"
         }
       },
       "returns": {
         "type": "Array",
-        "desc": "List of scope for items to be displayed",
-        "__exemption": [ "examples" ]
+        "desc": "List of scope for items to be displayed"
       },
       "examples": [
         ":items-fn=\"(from, size) => { const items = []; for (let i = 0; i < size; i++) { items.push('Item ' + i) }; return items }\""
@@ -96,13 +93,11 @@
       "scope": {
         "index": {
           "type": "Number",
-          "desc": "Item index in the options list",
-          "examples": [ 0 ]
+          "desc": "Item index in the options list"
         },
         "item": {
           "type": "Any",
-          "desc": "Item data -- its value is taken from 'options' prop",
-          "__exemption": [ "examples" ]
+          "desc": "Item data -- its value is taken from 'options' prop"
         }
       }
     }

package/src/components/virtual-scroll/use-virtual-scroll.js

@@ -677,7 +677,7 @@ export function useVirtualScroll ({
 
   function emitScroll (index) {
     if (prevToIndex !== index) {
-      props.onVirtualScroll !== void 0 && emit('virtual-scroll', {
+      props.onVirtualScroll !== void 0 && emit('virtualScroll', {
         index,
         from: virtualScrollSliceRange.value.from,
         to: virtualScrollSliceRange.value.to - 1,

package/src/components/virtual-scroll/use-virtual-scroll.json

@@ -17,24 +17,21 @@
     "virtual-scroll-slice-ratio-before": {
       "type": [ "Number", "String" ],
       "desc": "Ratio of number of items in visible zone to render before it",
-      "default": "1",
-      "examples": [ "virtual-scroll-slice-ratio-before=\"0.3\"" ],
+      "default": 1,
       "category": "virtual-scroll"
     },
 
     "virtual-scroll-slice-ratio-after": {
       "type": [ "Number", "String" ],
       "desc": "Ratio of number of items in visible zone to render after it",
-      "default": "1",
-      "examples": [ "virtual-scroll-slice-ratio-after=\"2\"" ],
+      "default": 1,
       "category": "virtual-scroll"
     },
 
     "virtual-scroll-item-size": {
       "type": [ "Number", "String" ],
       "desc": "Default size in pixels (height if vertical, width if horizontal) of an item; This value is used for rendering the initial list; Try to use a value close to the minimum size of an item",
-      "default": "24",
-      "examples": [ "virtual-scroll-item-size=\"48\"" ],
+      "default": 24,
       "category": "virtual-scroll"
     },
 
@@ -42,7 +39,6 @@
       "type": [ "Number", "String" ],
       "desc": "Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the start of the list; A correct value will improve scroll precision",
       "default": "0",
-      "examples": [ "virtual-scroll-sticky-size-start=\"48\"" ],
       "category": "virtual-scroll"
     },
 
@@ -50,14 +46,12 @@
       "type": [ "Number", "String" ],
       "desc": "Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the end of the list; A correct value will improve scroll precision",
       "default": "0",
-      "examples": [ "virtual-scroll-sticky-size-end=\"48\"" ],
       "category": "virtual-scroll"
     },
 
     "table-colspan": {
       "type": [ "Number", "String" ],
       "desc": "The number of columns in the table (you need this if you use table-layout: fixed)",
-      "examples": [ "table-colspan=\"12\"" ],
       "category": "virtual-scroll|content"
     }
   },
@@ -73,20 +67,17 @@
             "index": {
               "type": "Number",
               "required": true,
-              "desc": "Index of the list item that was scrolled into view (0 based)",
-              "examples": [ 30 ]
+              "desc": "Index of the list item that was scrolled into view (0 based)"
             },
             "from": {
               "type": "Number",
               "required": true,
-              "desc": "The index of the first list item that is rendered (0 based)",
-              "examples": [ 10 ]
+              "desc": "The index of the first list item that is rendered (0 based)"
             },
             "to": {
               "type": "Number",
               "required": true,
-              "desc": "The index of the last list item that is rendered (0 based)",
-              "examples": [ 50 ]
+              "desc": "The index of the last list item that is rendered (0 based)"
             },
             "direction": {
               "type": "String",
@@ -112,8 +103,7 @@
         "index": {
           "type": [ "String", "Number" ],
           "desc": "The index of the list item (0 based)",
-          "required": true,
-          "examples": [ "1", 23 ]
+          "required": true
         },
         "edge": {
           "type": "String",
@@ -132,8 +122,7 @@
       "params": {
         "index": {
           "type": [ "String", "Number" ],
-          "desc": "The index of the list item to scroll to after refresh (0 based); If it's not specified the scroll position is not changed; Use a negative value to keep scroll position",
-          "examples": [ "1", 23, -1 ]
+          "desc": "The index of the list item to scroll to after refresh (0 based); If it's not specified the scroll position is not changed; Use a negative value to keep scroll position"
         }
       }
     }

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

@@ -72,7 +72,7 @@ export const useFieldProps = {
   maxlength: [ Number, String ]
 }
 
-export const useFieldEmits = [ 'update:modelValue', 'clear', 'focus', 'blur', 'popup-show', 'popup-hide' ]
+export const useFieldEmits = [ 'update:modelValue', 'clear', 'focus', 'blur', 'popupShow', 'popupHide' ]
 
 export function useFieldState () {
   const { props, attrs, proxy, vnode } = getCurrentInstance()

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

@@ -226,9 +226,8 @@
       "desc": "When using the 'clearable' property, this event is emitted when the clear icon is clicked",
       "params": {
         "value": {
-          "type": [ "Any" ],
-          "desc": "The previous value before clearing it",
-          "__exemption": [ "examples" ]
+          "type": "Any",
+          "desc": "The previous value before clearing it"
         }
       }
     }

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

@@ -1,5 +1,6 @@
 import { h, ref, computed, getCurrentInstance } from 'vue'
 
+import { client } from '../../plugins/Platform.js'
 import { stop, stopAndPrevent } from '../../utils/event.js'
 
 function filterFiles (files, rejectedFiles, failedPropValidation, filterFn) {
@@ -187,7 +188,14 @@ export default function ({
 
   function onDragleave (e) {
     stopAndPrevent(e)
-    e.relatedTarget !== dndRef.value && (dnd.value = false)
+
+    // 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)
   }
 
   function onDrop (e) {
@@ -221,6 +229,7 @@ export default function ({
     pickFiles,
     addFiles,
     onDragover,
+    onDragleave,
     processFiles,
     getDndNode,
 

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

@@ -32,17 +32,12 @@
     "max-total-size": {
       "type": [ "Number", "String" ],
       "desc": "Maximum size of all files combined in bytes",
-      "examples": [ 1024, 1048576 ],
       "category": "behavior"
     },
 
     "max-files": {
       "type": [ "Number", "String" ],
       "desc": "Maximum number of files to contain",
-      "examples": [
-        ":max-files=\"5\"",
-        "10"
-      ],
       "category": "behavior"
     },
 
@@ -52,14 +47,12 @@
       "params": {
         "files": {
           "type": [ "FileList", "Array" ],
-          "desc": "Candidate files to be added to queue",
-          "__exemption": [ "examples" ]
+          "desc": "Candidate files to be added to queue"
         }
       },
       "returns": {
         "type": "Array",
-        "desc": "Filtered files to be added to queue",
-        "__exemption": [ "examples" ]
+        "desc": "Filtered files to be added to queue"
       },
       "examples": [ ":filter=\"files => files.filter(file => file.size === 1024)\"" ],
       "category": "behavior"
@@ -73,8 +66,7 @@
         "rejectedEntries": {
           "type": "Array",
           "tsType": "QRejectedEntry",
-          "desc": "Array of { failedPropValidation: string, file: File } Objects for files that do not pass the validation",
-          "__exemption": ["examples"]
+          "desc": "Array of { failedPropValidation: string, file: File } Objects for files that do not pass the validation"
         }
       }
     }
@@ -96,8 +88,7 @@
         "files": {
           "type": [ "FileList", "Array" ],
           "desc": "Array of files (instances of File)",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "required": true
         }
       }
     }

package/src/composables/private/use-model-toggle.js

@@ -12,7 +12,7 @@ export const useModelToggleProps = {
 }
 
 export const useModelToggleEmits = [
-  'before-show', 'show', 'before-hide', 'hide'
+  'beforeShow', 'show', 'beforeHide', 'hide'
 ]
 
 // handleShow/handleHide -> removeTick(), self (& emit show)
@@ -72,7 +72,7 @@ export default function ({
 
     showing.value = true
 
-    emit('before-show', evt)
+    emit('beforeShow', evt)
 
     if (handleShow !== void 0) {
       handleShow(evt)
@@ -111,7 +111,7 @@ export default function ({
 
     showing.value = false
 
-    emit('before-hide', evt)
+    emit('beforeHide', evt)
 
     if (handleHide !== void 0) {
       handleHide(evt)

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

@@ -44,7 +44,7 @@ export const usePanelProps = {
   keepAliveMax: Number
 }
 
-export const usePanelEmits = [ 'update:modelValue', 'before-transition', 'transition' ]
+export const usePanelEmits = [ 'update:modelValue', 'beforeTransition', 'transition' ]
 
 export default function () {
   const { props, emit, proxy } = getCurrentInstance()
@@ -116,7 +116,7 @@ export default function () {
 
     if (panelIndex.value !== index) {
       panelIndex.value = index
-      emit('before-transition', newVal, oldVal)
+      emit('beforeTransition', newVal, oldVal)
       nextTick(() => {
         emit('transition', newVal, oldVal)
       })

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

@@ -30,7 +30,6 @@
     "keep-alive-max": {
       "type": "Number",
       "desc": "Equivalent to using Vue's native max prop for <keep-alive>",
-      "examples": [ "2" ],
       "category": "behavior"
     },
 
@@ -76,7 +75,6 @@
       "type": [ "String", "Number" ],
       "desc": "Transition duration (in milliseconds, without unit)",
       "default": 300,
-      "examples": [ 500, "1200" ],
       "category": "transition",
       "addedIn": "v2.2"
     }

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

@@ -4,6 +4,7 @@ import { noop } from '../../utils/event.js'
 import { addFocusWaitFlag, removeFocusWaitFlag } from '../../utils/private/focus-manager.js'
 import { createGlobalNode, removeGlobalNode } from '../../utils/private/global-nodes.js'
 import { portalProxyList } from '../../utils/private/portal.js'
+import { injectProp } from '../../utils/private/inject-obj-prop.js'
 
 function isOnGlobalDialog (vm) {
   vm = vm.parent
@@ -93,7 +94,10 @@ export default function (vm, innerRef, renderPortalContent, checkGlobalDialog) {
   onUnmounted(() => { hidePortal(true) })
 
   // needed for portal vm detection
-  vm.proxy.__qPortalInnerRef = innerRef
+  vm.proxy.__qPortal = true
+
+  // public way of accessing the rendered content
+  injectProp(vm.proxy, 'contentEl', () => innerRef.value)
 
   return {
     showPortal,

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

@@ -1,3 +1,9 @@
 {
-  "props": {}
+  "computedProps": {
+    "contentEl": {
+      "type": "Element",
+      "desc": "The DOM Element of the rendered content",
+      "addedIn": "v2.10.1"
+    }
+  }
 }

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

@@ -1,4 +1,4 @@
-import { ref, computed, watch, nextTick } from 'vue'
+import { computed } from 'vue'
 
 export const useTransitionProps = {
   transitionShow: {
@@ -17,18 +17,24 @@ export const useTransitionProps = {
   }
 }
 
-export default function (props, showing) {
-  const transitionState = ref(showing.value)
+export default function (props, defaultShowFn = () => {}, defaultHideFn = () => {}) {
+  return {
+    transitionProps: computed(() => {
+      const show = `q-transition--${ props.transitionShow || defaultShowFn() }`
+      const hide = `q-transition--${ props.transitionHide || defaultHideFn() }`
 
-  watch(showing, val => {
-    nextTick(() => { transitionState.value = val })
-  })
+      return {
+        appear: true,
 
-  // return transition
-  return {
-    transition: computed(() => 'q-transition--' + (
-      transitionState.value === true ? props.transitionHide : props.transitionShow
-    )),
+        enterFromClass: `${ show }-enter-from`,
+        enterActiveClass: `${ show }-enter-active`,
+        enterToClass: `${ show }-enter-to`,
+
+        leaveFromClass: `${ hide }-leave-from`,
+        leaveActiveClass: `${ hide }-leave-active`,
+        leaveToClass: `${ hide }-leave-to`
+      }
+    }),
 
     transitionStyle: computed(() => `--q-transition-duration: ${ props.transitionDuration }ms`)
   }

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

@@ -14,7 +14,6 @@
       "type": [ "String", "Number" ],
       "desc": "Transition duration (in milliseconds, without unit)",
       "default": 300,
-      "examples": [ 500, "1200" ],
       "category": "transition"
     }
   }

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

@@ -3,7 +3,6 @@
     "model-value": {
       "type": "Any",
       "desc": "Model of the component; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive",
-      "__exemption": [ "examples" ],
       "category": "model"
     },
 
@@ -62,8 +61,7 @@
       "params": {
         "value": {
           "type": "Any",
-          "desc": "Optional value to validate against",
-          "__exemption": [ "examples" ]
+          "desc": "Optional value to validate against"
         }
       },
       "returns": {