quasar 2.10.0 → 2.10.2

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.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": {

package/src/directives/Intersection.json

@@ -27,55 +27,45 @@
               "boundingClientRect": {
                 "type": "Object",
                 "desc": "Object containing the client rect information",
-                "__exemption": [ "examples" ],
                 "definition": {
                   "bottom": {
                     "type": "Number",
-                    "desc": "The bottom of the client rect",
-                    "examples": [ "1770" ]
+                    "desc": "The bottom of the client rect"
                   },
                   "height": {
                     "type": "Number",
-                    "desc": "The height of the client rect",
-                    "examples": [ "50" ]
+                    "desc": "The height of the client rect"
                   },
                   "left": {
                     "type": "Number",
-                    "desc": "The left of the client rect",
-                    "examples": [ "49" ]
+                    "desc": "The left of the client rect"
                   },
                   "right": {
                     "type": "Number",
-                    "desc": "The right of the client rect",
-                    "examples": [ "384" ]
+                    "desc": "The right of the client rect"
                   },
                   "top": {
                     "type": "Number",
-                    "desc": "The top of the client rect",
-                    "examples": [ "1720" ]
+                    "desc": "The top of the client rect"
                   },
                   "width": {
                     "type": "Number",
-                    "desc": "The width of the client rect",
-                    "examples": [ "335" ]
+                    "desc": "The width of the client rect"
                   },
                   "x": {
                     "type": "Number",
-                    "desc": "The x position of the client rect",
-                    "examples": [ "49" ]
+                    "desc": "The x position of the client rect"
                   },
                   "y": {
                     "type": "Number",
-                    "desc": "The y position of the client rect",
-                    "examples": [ "1720" ]
+                    "desc": "The y position of the client rect"
                   }
                 }
               },
 
               "intersectionRatio": {
                 "type": "Number",
-                "desc": "The ratio of the observed objects visibility",
-                "examples": [ "0.5" ]
+                "desc": "The ratio of the observed objects visibility"
               },
 
               "intersectionRect": {
@@ -84,43 +74,35 @@
                 "definition": {
                   "bottom": {
                     "type": "Number",
-                    "desc": "The bottom of the client rect",
-                    "examples": [ "0" ]
+                    "desc": "The bottom of the client rect"
                   },
                   "height": {
                     "type": "Number",
-                    "desc": "The height of the client rect",
-                    "examples": [ "0" ]
+                    "desc": "The height of the client rect"
                   },
                   "left": {
                     "type": "Number",
-                    "desc": "The left of the client rect",
-                    "examples": [ "0" ]
+                    "desc": "The left of the client rect"
                   },
                   "right": {
                     "type": "Number",
-                    "desc": "The right of the client rect",
-                    "examples": [ "0" ]
+                    "desc": "The right of the client rect"
                   },
                   "top": {
                     "type": "Number",
-                    "desc": "The top of the client rect",
-                    "examples": [ "0" ]
+                    "desc": "The top of the client rect"
                   },
                   "width": {
                     "type": "Number",
-                    "desc": "The width of the client rect",
-                    "examples": [ "0" ]
+                    "desc": "The width of the client rect"
                   },
                   "x": {
                     "type": "Number",
-                    "desc": "The x position of the client rect",
-                    "examples": [ "0" ]
+                    "desc": "The x position of the client rect"
                   },
                   "y": {
                     "type": "Number",
-                    "desc": "The y position of the client rect",
-                    "examples": [ "0" ]
+                    "desc": "The y position of the client rect"
                   }
                 }
               },
@@ -136,51 +118,42 @@
                 "definition": {
                   "bottom": {
                     "type": "Number",
-                    "desc": "The bottom of the client rect",
-                    "examples": [ "0" ]
+                    "desc": "The bottom of the client rect"
                   },
                   "height": {
                     "type": "Number",
-                    "desc": "The height of the client rect",
-                    "examples": [ "0" ]
+                    "desc": "The height of the client rect"
                   },
                   "left": {
                     "type": "Number",
-                    "desc": "The left of the client rect",
-                    "examples": [ "0" ]
+                    "desc": "The left of the client rect"
                   },
                   "right": {
                     "type": "Number",
-                    "desc": "The right of the client rect",
-                    "examples": [ "0" ]
+                    "desc": "The right of the client rect"
                   },
                   "top": {
                     "type": "Number",
-                    "desc": "The top of the client rect",
-                    "examples": [ "0" ]
+                    "desc": "The top of the client rect"
                   },
                   "width": {
                     "type": "Number",
-                    "desc": "The width of the client rect",
-                    "examples": [ "0" ]
+                    "desc": "The width of the client rect"
                   },
                   "x": {
                     "type": "Number",
-                    "desc": "The x position of the client rect",
-                    "examples": [ "0" ]
+                    "desc": "The x position of the client rect"
                   },
                   "y": {
                     "type": "Number",
-                    "desc": "The y position of the client rect",
-                    "examples": [ "0" ]
+                    "desc": "The y position of the client rect"
                   }
                 }
               },
 
               "target": {
                 "type": "Element",
-                "desc": "The target element",
-                "__exemption": [ "examples" ]
+                "desc": "The target element"
               },
 
               "time": {

package/src/directives/Morph.json

@@ -28,15 +28,13 @@
       "duration": {
         "type": "Number",
         "desc": "Duration of the animation (in milliseconds)",
-        "default": "300",
-        "examples": [ "500" ]
+        "default": "300"
       },
 
       "delay": {
         "type": "Number",
         "desc": "Delay for the animation (in milliseconds)",
-        "default": "0",
-        "examples": [ "500" ]
+        "default": "0"
       },
 
       "easing": {
@@ -93,15 +91,13 @@
       "tweenFromOpacity": {
         "type": "Number",
         "desc": "If using tween it is the initial opacity of the initial element (will be animated to 0) - the initial element is placed on top of the final element",
-        "default": "0.6",
-        "examples": [ "1" ]
+        "default": 0.6
       },
 
       "tweenToOpacity": {
         "type": "Number",
         "desc": "If using tween it is the initial opacity of the final element (will be animated to 1)",
-        "default": "0.5",
-        "examples": [ "0.3" ]
+        "default": 0.5
       },
 
       "waitFor": {

package/src/directives/Mutation.json

@@ -33,26 +33,22 @@
 
           "addedNodes": {
             "type": "Array",
-            "desc": "The NodeList of the nodes that have been added",
-            "__exemption": [ "examples" ]
+            "desc": "The NodeList of the nodes that have been added"
           },
 
           "removedNodes": {
             "type": "Array",
-            "desc": "The NodeList of the nodes that have been removed",
-            "__exemption": [ "examples" ]
+            "desc": "The NodeList of the nodes that have been removed"
           },
 
           "previousSibling": {
             "type": "Object",
-            "desc": "The previous sibling of the added or removed nodes, or null",
-            "__exemption": [ "examples" ]
+            "desc": "The previous sibling of the added or removed nodes, or null"
           },
 
           "nextSibling": {
             "type": "Object",
-            "desc": "The next sibling of the added or removed nodes, or null",
-            "__exemption": [ "examples" ]
+            "desc": "The next sibling of the added or removed nodes, or null"
           },
 
           "attributeName": {
@@ -63,14 +59,12 @@
 
           "attributeNamespace": {
             "type": "String",
-            "desc": "The namespace of the changed attribute, or null",
-            "__exemption": [ "examples" ]
+            "desc": "The namespace of the changed attribute, or null"
           },
 
           "oldValue": {
             "type": "String",
-            "desc": "Value depends on the mutation type; For attributes, it is the value of the changed attribute before the change; For characterData it is data of the changed node before the change; For childList it is null; Note that for this to work as expected, attributeOldValue or characterDataOldValue must be set",
-            "__exemption": [ "examples" ]
+            "desc": "Value depends on the mutation type; For attributes, it is the value of the changed attribute before the change; For characterData it is data of the changed node before the change; For childList it is null; Note that for this to work as expected, attributeOldValue or characterDataOldValue must be set"
           }
         }
       }

package/src/directives/Scroll.json

@@ -9,13 +9,11 @@
     "params": {
       "verticalScrollPosition": {
         "type": "Number",
-        "desc": "Scroll offset from top",
-        "examples": [ 350 ]
+        "desc": "Scroll offset from top"
       },
       "horizontalScrollPosition": {
         "type": "Number",
-        "desc": "Scroll offset from left",
-        "examples": [ 350 ]
+        "desc": "Scroll offset from left"
       }
     },
     "returns": null,

package/src/directives/TouchHold.json

@@ -29,20 +29,17 @@
             "definition": {
               "top": {
                 "type": "Number",
-                "desc": "Vertical offset from top of window",
-                "examples": [ 235 ]
+                "desc": "Vertical offset from top of window"
               },
               "left": {
                 "type": "Number",
-                "desc": "Horizontal offset from left of window",
-                "examples": [ 235 ]
+                "desc": "Horizontal offset from left of window"
               }
             }
           },
           "duration": {
             "type": "Number",
-            "desc": "How long it took to trigger the event (in milliseconds)",
-            "examples": [ 612 ]
+            "desc": "How long it took to trigger the event (in milliseconds)"
           }
         }
       }