quasar 2.10.0 → 2.10.2

package/src/components/item/QItemLabel.json

@@ -25,7 +25,6 @@
     "lines": {
       "type": [ "Number", "String" ],
       "desc": "Apply ellipsis when there's not enough space to render on the specified number of lines;",
-      "examples": [ "1", "3", ":lines=\"2\"" ],
       "category": "content|behavior"
     }
   },

package/src/components/item/QList.js

@@ -13,7 +13,12 @@ export default createComponent({
     bordered: Boolean,
     dense: Boolean,
     separator: Boolean,
-    padding: Boolean
+    padding: Boolean,
+
+    tag: {
+      type: String,
+      default: 'div'
+    }
   },
 
   setup (props, { slots }) {
@@ -29,6 +34,6 @@ export default createComponent({
       + (props.padding === true ? ' q-list--padding' : '')
     )
 
-    return () => h('div', { class: classes.value, role: 'list' }, hSlot(slots.default))
+    return () => h(props.tag, { class: classes.value }, hSlot(slots.default))
   }
 })

package/src/components/item/QList.json

@@ -26,6 +26,13 @@
       "type": "Boolean",
       "desc": "Applies a material design-like padding on top and bottom",
       "category": "content"
+    },
+
+    "tag": {
+      "extends": "tag",
+      "default": "div",
+      "examples": [ "div", "ul", "ol" ],
+      "addedIn": "v2.10.1"
     }
   },
 

package/src/components/knob/QKnob.js

@@ -45,7 +45,7 @@ export default createComponent({
     readonly: Boolean
   },
 
-  emits: [ 'update:modelValue', 'change', 'drag-value' ],
+  emits: [ 'update:modelValue', 'change', 'dragValue' ],
 
   setup (props, { slots, emit }) {
     const { proxy } = getCurrentInstance()
@@ -92,7 +92,7 @@ export default createComponent({
       )
     )
 
-    const decimals = computed(() => (String(props.step).trim('0').split('.')[ 1 ] || '').length)
+    const decimals = computed(() => (String(props.step).trim().split('.')[ 1 ] || '').length)
     const step = computed(() => (props.step === 0 ? 1 : props.step))
     const instantFeedback = computed(() => props.instantFeedback === true || dragging.value === true)
 
@@ -227,7 +227,7 @@ export default createComponent({
 
       newModel = between(newModel, innerMin.value, innerMax.value)
 
-      emit('drag-value', newModel)
+      emit('dragValue', newModel)
 
       if (model.value !== newModel) {
         model.value = newModel

package/src/components/knob/QKnob.json

@@ -16,21 +16,18 @@
     "min": {
       "type": "Number",
       "desc": "The minimum value that the model (the knob value) should start at",
-      "examples": [ "20", "5" ],
       "category": "model"
     },
 
     "max": {
       "type": "Number",
       "desc": "The maximum value that the model (the knob value) should go to",
-      "examples": [ "100", "50" ],
       "category": "model"
     },
 
     "inner-min": {
       "type": "Number",
       "desc": "Inner minimum value of the model; Use in case you need the model value to be inside of the track's min-max values; Needs to be higher or equal to 'min' prop; Defaults to 'min' prop",
-      "examples": [ ":inner-min=\"0\"" ],
       "category": "model",
       "addedIn": "v2.5.4"
     },
@@ -38,16 +35,14 @@
     "inner-max": {
       "type": "Number",
       "desc": "Inner maximum value of the model; Use in case you need the model value to be inside of the track's min-max values; Needs to be lower or equal to 'max' prop; Defaults to 'max' prop",
-      "examples": [ ":inner-max=\"100\"" ],
       "category": "model",
       "addedIn": "v2.5.4"
     },
 
     "step": {
       "type": "Number",
-      "default": "1",
+      "default": 1,
       "desc": "A number representing steps in the value of the model, while adjusting the knob",
-      "examples": [ "1", "5" ],
       "category": "model"
     },
 
@@ -89,7 +84,6 @@
       "type": "Number",
       "default": 0.2,
       "desc": "Thickness of progress arc as a ratio (0.0 < x < 1.0) of component size",
-      "examples": [ 1, 0.3 ],
       "category": "style"
     },
 
@@ -97,7 +91,6 @@
       "type": "Number",
       "desc": "Angle to rotate progress arc by",
       "default": 0,
-      "examples": [ 0, 40, 90 ],
       "category": "content"
     },
 
@@ -142,8 +135,7 @@
       "params": {
         "value": {
           "type": "Number",
-          "desc": "New model value",
-          "examples": [ 12 ]
+          "desc": "New model value"
         }
       }
     },
@@ -153,8 +145,7 @@
       "params": {
         "value": {
           "type": "Number",
-          "desc": "New model value",
-          "examples": [ 12 ]
+          "desc": "New model value"
         }
       }
     }

package/src/components/layout/QLayout.js

@@ -90,7 +90,7 @@ export default createComponent({
       if (height.value !== newHeight) {
         resized = true
         height.value = newHeight
-        props.onScrollHeight !== void 0 && emit('scroll-height', newHeight)
+        props.onScrollHeight !== void 0 && emit('scrollHeight', newHeight)
         updateScrollbarWidth()
       }
       if (width.value !== newWidth) {

package/src/components/layout/QLayout.json

@@ -38,14 +38,12 @@
             "height": {
               "type": "Number",
               "required": true,
-              "desc": "Layout height",
-              "examples": [ 575 ]
+              "desc": "Layout height"
             },
             "width": {
               "type": "Number",
               "required": true,
-              "desc": "Layout height",
-              "examples": [ 575 ]
+              "desc": "Layout height"
             }
           }
         }
@@ -62,8 +60,7 @@
             "position": {
               "type": "Number",
               "required": true,
-              "desc": "Scroll offset from top (vertical)",
-              "examples": [ 120 ]
+              "desc": "Scroll offset from top (vertical)"
             },
 
             "direction": {
@@ -80,15 +77,13 @@
             "delta": {
               "type": "Number",
               "required": true,
-              "desc": "Vertical delta distance since event was last emitted",
-              "examples": [ 120 ]
+              "desc": "Vertical delta distance since event was last emitted"
             },
 
             "inflectionPoint": {
               "type": "Number",
               "required": true,
-              "desc": "Scroll offset from top (vertical)",
-              "examples": [ 120 ]
+              "desc": "Scroll offset from top (vertical)"
             }
           }
         }
@@ -100,8 +95,7 @@
       "params": {
         "height": {
           "type": "Number",
-          "desc": "New scroll height of layout",
-          "examples": [ 1442 ]
+          "desc": "New scroll height of layout"
         }
       }
     }

package/src/components/linear-progress/QLinearProgress.json

@@ -10,14 +10,12 @@
       "type": "Number",
       "desc": "Progress value (0.0 < x < 1.0)",
       "default": 0,
-      "examples": [ ":value=\"0.28\"" ],
       "category": "model"
     },
 
     "buffer": {
       "type": "Number",
       "desc": "Optional buffer value (0.0 < x < 1.0)",
-      "examples": [ ":buffer=\"0.78\"" ],
       "category": "behavior"
     },
 

package/src/components/menu/QMenu.js

@@ -79,7 +79,7 @@ export default createComponent({
 
   emits: [
     ...useModelToggleEmits,
-    'click', 'escape-key'
+    'click', 'escapeKey'
   ],
 
   setup (props, { slots, emit, attrs }) {
@@ -100,7 +100,7 @@ export default createComponent({
     const isDark = useDark(props, $q)
     const { registerTick, removeTick } = useTick()
     const { registerTimeout } = useTimeout()
-    const { transition, transitionStyle } = useTransition(props, showing)
+    const { transitionProps, transitionStyle } = useTransition(props)
     const { localScrollTarget, changeScrollEvent, unconfigureScrollTarget } = useScrollTarget(props, configureScrollTarget)
 
     const { anchorEl, canShow } = useAnchor({ showing })
@@ -180,7 +180,10 @@ export default createComponent({
         let node = innerRef.value
 
         if (node && node.contains(document.activeElement) !== true) {
-          node = node.querySelector('[autofocus], [data-autofocus]') || node
+          node = node.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]')
+            || node.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]')
+            || node.querySelector('[autofocus], [data-autofocus]')
+            || node
           node.focus({ preventScroll: true })
         }
       })
@@ -255,7 +258,10 @@ export default createComponent({
           || evt.qClickOutside !== true
         )
       ) {
-        refocusTarget.focus()
+        ((evt && evt.type.indexOf('key') === 0
+          ? refocusTarget.closest('[tabindex]:not([tabindex^="-"])')
+          : void 0
+        ) || refocusTarget).focus()
         refocusTarget = null
       }
 
@@ -317,7 +323,7 @@ export default createComponent({
     }
 
     function onEscapeKey (evt) {
-      emit('escape-key')
+      emit('escapeKey')
       hide(evt)
     }
 
@@ -345,7 +351,7 @@ export default createComponent({
     function renderPortalContent () {
       return h(
         Transition,
-        { name: transition.value, appear: true },
+        transitionProps.value,
         () => (
           showing.value === true
             ? h('div', {

package/src/components/menu/QMenu.json

@@ -30,7 +30,6 @@
         "center left", "center middle", "center right", "center start", "center end",
         "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end"
       ],
-      "examples": [ "top left", "bottom right" ],
       "category": "position"
     },
 
@@ -42,7 +41,6 @@
         "center left", "center middle", "center right", "center start", "center end",
         "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end"
       ],
-      "examples": [ "top left", "bottom right" ],
       "category": "position"
     },
 

package/src/components/option-group/QOptionGroup.json

@@ -56,7 +56,6 @@
       "desc": "The type of input component to be used",
       "values": [ "radio", "checkbox", "toggle" ],
       "default": "radio",
-      "examples": [ "checkbox" ],
       "category": "content"
     },
 
@@ -124,8 +123,7 @@
               "desc": "Any other props from QToggle, QCheckbox, or QRadio",
               "examples": [ "val=\"car\"", ":true-value=\"trueValue\"", "checked-icon=\"visibility\"" ]
             }
-          },
-          "__exemption": [ "examples" ]
+          }
         }
       },
       "addedIn": "v2.2"
@@ -159,8 +157,7 @@
               "desc": "Any other props from QToggle, QCheckbox, or QRadio",
               "examples": [ "val=\"car\"", ":true-value=\"trueValue\"", "checked-icon=\"visibility\"" ]
             }
-          },
-          "__exemption": [ "examples" ]
+          }
         }
       },
       "addedIn": "v2.2"

package/src/components/page/QPage.json

@@ -16,19 +16,16 @@
       "params": {
         "offset": {
           "type": "Number",
-          "desc": "Header + Footer height (in pixels)",
-          "examples": [ 152 ]
+          "desc": "Header + Footer height (in pixels)"
         },
         "height": {
           "type": "Number",
-          "desc": "Value in pixels of container height (if containerized) or window height otherwise",
-          "examples": [ 1200 ]
+          "desc": "Value in pixels of container height (if containerized) or window height otherwise"
         }
       },
       "returns": {
         "type": "Object",
-        "desc": "Object with CSS properties to apply to Page DOM element",
-        "__exemption": [ "examples" ]
+        "desc": "Object with CSS properties to apply to Page DOM element"
       },
       "default": "(see source code)",
       "examples": [ "(see source code)" ],

package/src/components/page-scroller/QPageScroller.json

@@ -10,7 +10,6 @@
       "type": "Number",
       "desc": "Scroll offset (in pixels) from which point the component is shown on page; Measured from the top of the page (or from the bottom if in 'reverse' mode)",
       "default": 1000,
-      "examples": [ 550 ],
       "category": "behavior"
     },
 
@@ -24,7 +23,6 @@
       "type": "Number",
       "desc": "Duration (in milliseconds) of the scrolling until it reaches its target",
       "default": 300,
-      "examples": [ 500 ],
       "category": "behavior"
     },
 

package/src/components/page-sticky/QPageSticky.json

@@ -13,7 +13,6 @@
         "bottom-right", "bottom-left",
         "top", "right", "bottom", "left"
       ],
-      "examples": [ "top-right" ],
       "category": "position"
     },
 

package/src/components/pagination/QPagination.json

@@ -7,15 +7,13 @@
     "model-value": {
       "extends": "model-value",
       "type": "Number",
-      "desc": "Current page (must be between min/max)",
-      "examples": [ 3 ]
+      "desc": "Current page (must be between min/max)"
     },
 
     "min": {
       "type": [ "Number", "String" ],
       "desc": "Minimum page (must be lower than 'max')",
       "default": 1,
-      "examples": [ 3 ],
       "category": "model"
     },
 
@@ -23,7 +21,6 @@
       "type": [ "Number", "String" ],
       "desc": "Number of last page (must be higher than 'min')",
       "required": true,
-      "examples": [ 10 ],
       "category": "model"
     },
 
@@ -71,14 +68,12 @@
       "params": {
         "page": {
           "type": "Number",
-          "desc": "Page number to navigate to",
-          "examples": [ 2 ]
+          "desc": "Page number to navigate to"
         }
       },
       "returns": {
         "type": [ "Object", "String" ],
-        "desc": "Object or String that can be passed to a <router-link> as `to` parameter",
-        "__exemption": [ "examples" ]
+        "desc": "Object or String that can be passed to a <router-link> as `to` parameter"
       },
       "examples": [ ":to-fn=\"page => ({ query: { page } })\"" ],
       "category": "content"
@@ -112,7 +107,6 @@
       "type": [ "Number", "String" ],
       "default": 0,
       "desc": "Maximum number of page links to display at a time; 0 means Infinite",
-      "examples": [ 5 ],
       "category": "content"
     },
 
@@ -252,8 +246,7 @@
       "params": {
         "pageNumber": {
           "type": "Number",
-          "desc": "Page number to go to",
-          "examples": [ 3 ]
+          "desc": "Page number to go to"
         }
       }
     },
@@ -263,8 +256,7 @@
       "params": {
         "offset": {
           "type": "Number",
-          "desc": "Offset page, can be negative or positive",
-          "examples": [ 3 ]
+          "desc": "Offset page, can be negative or positive"
         }
       }
     }

package/src/components/parallax/QParallax.json

@@ -21,14 +21,12 @@
       "type": "Number",
       "desc": "Height of component (in pixels)",
       "default": 500,
-      "examples": [ ":height=\"1000\"" ],
       "category": "style"
     },
 
     "speed": {
       "type": "Number",
       "desc": "Speed of parallax effect (0.0 < x < 1.0)",
-      "examples": [ ":speed=\"0.24\"" ],
       "category": "behavior"
     },
 
@@ -51,8 +49,7 @@
       "scope": {
         "percentScrolled": {
           "type": "Number",
-          "desc": "Percentage (0.0 < x < 1.0) of scroll in regards to QParallax",
-          "examples": [ 0.241 ]
+          "desc": "Percentage (0.0 < x < 1.0) of scroll in regards to QParallax"
         }
       }
     }
@@ -64,8 +61,7 @@
       "params": {
         "percentage": {
           "type": "Number",
-          "desc": "Number between 0.0 and 1.0 defining the scrolled percentage of the component",
-          "examples": [ 0.234 ]
+          "desc": "Number between 0.0 and 1.0 defining the scrolled percentage of the component"
         }
       }
     }

package/src/components/popup-edit/QPopupEdit.js

@@ -43,7 +43,7 @@ export default createComponent({
 
   emits: [
     'update:modelValue', 'save', 'cancel',
-    'before-show', 'show', 'before-hide', 'hide'
+    'beforeShow', 'show', 'beforeHide', 'hide'
   ],
 
   setup (props, { slots, emit }) {
@@ -107,7 +107,7 @@ export default createComponent({
       validated = false
       initialValue.value = clone(props.modelValue)
       currentModel.value = clone(props.modelValue)
-      emit('before-show')
+      emit('beforeShow')
     }
 
     function onShow () {
@@ -125,7 +125,7 @@ export default createComponent({
         }
       }
 
-      emit('before-hide')
+      emit('beforeHide')
     }
 
     function onHide () {

package/src/components/popup-edit/QPopupEdit.json

@@ -93,7 +93,6 @@
         "center left", "center middle", "center right", "center start", "center end",
         "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end"
       ],
-      "examples": [ "top left", "bottom right" ],
       "category": "position"
     },
 
@@ -105,7 +104,6 @@
         "center left", "center middle", "center right", "center start", "center end",
         "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end"
       ],
-      "examples": [ "top left", "bottom right" ],
       "category": "position"
     },
 
@@ -232,13 +230,11 @@
       "params": {
         "value": {
           "type": "Any",
-          "desc": "Validated value to be saved",
-          "__exemption": [ "examples" ]
+          "desc": "Validated value to be saved"
         },
         "initialValue": {
           "type": "Any",
-          "desc": "Initial value, before changes",
-          "__exemption": [ "examples" ]
+          "desc": "Initial value, before changes"
         }
       }
     },
@@ -248,13 +244,11 @@
       "params": {
         "value": {
           "type": "Any",
-          "desc": "Edited value",
-          "__exemption": [ "examples" ]
+          "desc": "Edited value"
         },
         "initialValue": {
           "type": "Any",
-          "desc": "Initial value, before changes",
-          "__exemption": [ "examples" ]
+          "desc": "Initial value, before changes"
         }
       }
     }

package/src/components/popup-proxy/QPopupProxy.js

@@ -6,6 +6,7 @@ import QMenu from '../menu/QMenu.js'
 import useAnchor, { useAnchorProps } from '../../composables/private/use-anchor.js'
 
 import { createComponent } from '../../utils/private/create.js'
+import { injectProp } from '../../utils/private/inject-obj-prop.js'
 
 export default createComponent({
   name: 'QPopupProxy',
@@ -67,6 +68,11 @@ export default createComponent({
       toggle (evt) { popupRef.value.toggle(evt) }
     })
 
+    injectProp(proxy, 'currentComponent', () => ({
+      type: type.value,
+      ref: popupRef.value
+    }))
+
     return () => {
       const data = {
         ref: popupRef,

package/src/components/popup-proxy/QPopupProxy.json

@@ -17,7 +17,6 @@
       "type": [ "Number", "String" ],
       "desc": "Breakpoint (in pixels) of window width/height (whichever is smaller) from where a Menu will get to be used instead of a Dialog",
       "default": 450,
-      "examples": [ 992, ":breakpoint=\"1024\"" ],
       "category": "behavior"
     }
   },
@@ -62,5 +61,24 @@
     "toggle": {
       "extends": "toggle"
     }
+  },
+
+  "computedProps": {
+    "currentComponent": {
+      "type": "Object",
+      "desc": "Access current underlying component (QMenu or QDialog)",
+      "definition": {
+        "type": {
+          "type": "String",
+          "desc": "Component type",
+          "values": [ "dialog", "menu" ]
+        },
+        "ref": {
+          "type": "Component",
+          "tsType": "QPopupProxyInnerComponent",
+          "desc": "The actual component (QMenu or QDialog); Access it directly, without '.value'"
+        }
+      }
+    }
   }
 }

package/src/components/radio/QRadio.json

@@ -89,8 +89,7 @@
         "value": {
           "type": "Any",
           "desc": "New model value",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "required": true
         },
         "evt": {
           "extends": "evt",

package/src/components/range/QRange.json

@@ -13,13 +13,11 @@
       "definition": {
         "min": {
           "type": [ "Number", "null" ],
-          "desc": "Model value for left thumb",
-          "examples": [ 2 ]
+          "desc": "Model value for left thumb"
         },
         "max": {
           "type": [ "Number", "null" ],
-          "desc": "Model value for right thumb",
-          "examples": [ 12 ]
+          "desc": "Model value for right thumb"
         }
       },
       "examples": [ "v-model=\"positionModel\"" ]

package/src/components/rating/QRating.json

@@ -16,7 +16,6 @@
       "type": [ "Number", "String" ],
       "desc": "Number of icons to display",
       "default": 5,
-      "examples": [ "3", ":max=\"5\"" ],
       "category": "general"
     },