quasar 2.10.0 → 2.10.2

package/src/components/resize-observer/QResizeObserver.json

@@ -24,14 +24,12 @@
             "height": {
               "type": "Number",
               "required": true,
-              "desc": "Layout height",
-              "examples": [ 822 ]
+              "desc": "Layout height"
             },
             "width": {
               "type": "Number",
               "required": true,
-              "desc": "Layout width",
-              "examples": [ 822 ]
+              "desc": "Layout width"
             }
           }
         }

package/src/components/scroll-area/QScrollArea.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, withDirectives, onActivated, onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, withDirectives, onActivated, onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
@@ -142,7 +142,7 @@ export default createComponent({
     scroll.horizontal.percentage = computed(() => {
       const diff = scroll.horizontal.size.value - container.horizontal.value
       if (diff <= 0) { return 0 }
-      const p = between(scroll.horizontal.position.value / diff, 0, 1)
+      const p = between(Math.abs(scroll.horizontal.position.value) / diff, 0, 1)
       return Math.round(p * 10000) / 10000
     })
     scroll.horizontal.thumbHidden = computed(() =>
@@ -168,7 +168,7 @@ export default createComponent({
       return {
         ...props.thumbStyle,
         ...props.horizontalThumbStyle,
-        left: `${ scroll.horizontal.thumbStart.value }px`,
+        [ proxy.$q.lang.rtl === true ? 'right' : 'left' ]: `${ scroll.horizontal.thumbStart.value }px`,
         width: `${ scroll.horizontal.thumbSize.value }px`
       }
     })
@@ -362,6 +362,15 @@ export default createComponent({
 
     let scrollPosition = null
 
+    watch(() => proxy.$q.lang.rtl, rtl => {
+      if (targetRef.value !== null) {
+        setHorizontalScrollPosition(
+          targetRef.value,
+          Math.abs(scroll.horizontal.position.value) * (rtl === true ? -1 : 1)
+        )
+      }
+    })
+
     onDeactivated(() => {
       scrollPosition = {
         top: scroll.vertical.position.value,
@@ -398,7 +407,9 @@ export default createComponent({
       setScrollPercentage (axis, percentage, duration) {
         localSetScrollPosition(
           axis,
-          percentage * (scroll[ axis ].size.value - container[ axis ].value),
+          percentage
+            * (scroll[ axis ].size.value - container[ axis ].value)
+            * (axis === 'horizontal' && proxy.$q.lang.rtl === true ? -1 : 1),
           duration
         )
       }

package/src/components/scroll-area/QScrollArea.json

@@ -82,7 +82,6 @@
       "type": [ "Number", "String" ],
       "desc": "When content changes, the scrollbar appears; this delay defines the amount of time (in milliseconds) before scrollbars disappear again (if component is not hovered)",
       "default": 1000,
-      "examples": [ 500, ":delay=\"550\"" ],
       "category": "behavior"
     },
 
@@ -115,51 +114,43 @@
             "verticalPosition": {
               "type": "Number",
               "required": true,
-              "desc": "Vertical scroll position (in px)",
-              "__exemption": [ "examples" ]
+              "desc": "Vertical scroll position (in px)"
             },
             "verticalPercentage": {
               "type": "Number",
               "required": true,
-              "desc": "Vertical scroll percentage (0.0 <= x <= 1.0)",
-              "__exemption": [ "examples" ]
+              "desc": "Vertical scroll percentage (0.0 <= x <= 1.0)"
             },
             "verticalSize": {
               "type": "Number",
               "required": true,
-              "desc": "Vertical scroll size (in px)",
-              "__exemption": [ "examples" ]
+              "desc": "Vertical scroll size (in px)"
             },
             "verticalContainerSize": {
               "type": "Number",
               "required": true,
-              "desc": "Height of the container (in px)",
-              "__exemption": [ "examples" ]
+              "desc": "Height of the container (in px)"
             },
 
             "horizontalPosition": {
               "type": "Number",
               "required": true,
-              "desc": "Horizontal scroll position (in px)",
-              "__exemption": [ "examples" ]
+              "desc": "Horizontal scroll position (in px)"
             },
             "horizontalPercentage": {
               "type": "Number",
               "required": true,
-              "desc": "Horizontal scroll percentage (0.0 <= x <= 1.0)",
-              "__exemption": [ "examples" ]
+              "desc": "Horizontal scroll percentage (0.0 <= x <= 1.0)"
             },
             "horizontalSize": {
               "type": "Number",
               "required": true,
-              "desc": "Horizontal scroll size (in px)",
-              "__exemption": [ "examples" ]
+              "desc": "Horizontal scroll size (in px)"
             },
             "horizontalContainerSize": {
               "type": "Number",
               "required": true,
-              "desc": "Width of the container (in px)",
-              "__exemption": [ "examples" ]
+              "desc": "Width of the container (in px)"
             }
           }
         }
@@ -181,56 +172,47 @@
       "returns": {
         "type": "Object",
         "desc": "Scroll information",
-        "__exemption": [ "examples" ],
         "definition": {
           "verticalPosition": {
             "type": "Number",
             "required": true,
-            "desc": "Vertical scroll position (in px)",
-            "__exemption": [ "examples" ]
+            "desc": "Vertical scroll position (in px)"
           },
           "verticalPercentage": {
             "type": "Number",
             "required": true,
-            "desc": "Vertical scroll percentage (0.0 <= x <= 1.0)",
-            "__exemption": [ "examples" ]
+            "desc": "Vertical scroll percentage (0.0 <= x <= 1.0)"
           },
           "verticalSize": {
             "type": "Number",
             "required": true,
-            "desc": "Vertical scroll size (in px)",
-            "__exemption": [ "examples" ]
+            "desc": "Vertical scroll size (in px)"
           },
           "verticalContainerSize": {
             "type": "Number",
             "required": true,
-            "desc": "Height of the container (in px)",
-            "__exemption": [ "examples" ]
+            "desc": "Height of the container (in px)"
           },
 
           "horizontalPosition": {
             "type": "Number",
             "required": true,
-            "desc": "Horizontal scroll position (in px)",
-            "__exemption": [ "examples" ]
+            "desc": "Horizontal scroll position (in px)"
           },
           "horizontalPercentage": {
             "type": "Number",
             "required": true,
-            "desc": "Horizontal scroll percentage (0.0 <= x <= 1.0)",
-            "__exemption": [ "examples" ]
+            "desc": "Horizontal scroll percentage (0.0 <= x <= 1.0)"
           },
           "horizontalSize": {
             "type": "Number",
             "required": true,
-            "desc": "Horizontal scroll size (in px)",
-            "__exemption": [ "examples" ]
+            "desc": "Horizontal scroll size (in px)"
           },
           "horizontalContainerSize": {
             "type": "Number",
             "required": true,
-            "desc": "Width of the container (in px)",
-            "__exemption": [ "examples" ]
+            "desc": "Width of the container (in px)"
           }
         }
       }
@@ -245,14 +227,12 @@
           "top": {
             "type": "Number",
             "required": true,
-            "desc": "Scroll offset from top (vertical)",
-            "examples": [ 120 ]
+            "desc": "Scroll offset from top (vertical)"
           },
           "left": {
             "type": "Number",
             "required": true,
-            "desc": "Scroll offset from left (horizontal)",
-            "examples": [ 10 ]
+            "desc": "Scroll offset from left (horizontal)"
           }
         },
         "examples": [ "{ top: 10, left: 0 }" ]
@@ -268,14 +248,12 @@
           "top": {
             "type": "Number",
             "required": true,
-            "desc": "Scroll percentage (0.0 <= x <= 1.0) offset from top (vertical)",
-            "examples": [ 0.12 ]
+            "desc": "Scroll percentage (0.0 <= x <= 1.0) offset from top (vertical)"
           },
           "left": {
             "type": "Number",
             "required": true,
-            "desc": "Scroll percentage (0.0 <= x <= 1.0) offset from left (horizontal)",
-            "examples": [ 0.92 ]
+            "desc": "Scroll percentage (0.0 <= x <= 1.0) offset from left (horizontal)"
           }
         },
         "examples": [ "{ top: 0.212, left: 0 }" ]
@@ -294,13 +272,11 @@
         "offset": {
           "type": "Number",
           "required": true,
-          "desc": "Scroll position offset from top (in pixels)",
-          "examples": [ 220 ]
+          "desc": "Scroll position offset from top (in pixels)"
         },
         "duration": {
           "type": "Number",
-          "desc": "Duration (in milliseconds) enabling animated scroll",
-          "examples": [ 300 ]
+          "desc": "Duration (in milliseconds) enabling animated scroll"
         }
       }
     },
@@ -317,13 +293,11 @@
         "offset": {
           "type": "Number",
           "desc": "Scroll percentage (0.0 <= x <= 1.0) of the total scrolling size",
-          "required": true,
-          "examples": [ 220 ]
+          "required": true
         },
         "duration": {
           "type": "Number",
-          "desc": "Duration (in milliseconds) enabling animated scroll",
-          "examples": [ 300 ]
+          "desc": "Duration (in milliseconds) enabling animated scroll"
         }
       }
     }

package/src/components/scroll-observer/QScrollObserver.js

@@ -119,6 +119,8 @@ export default createComponent({
 
     const { proxy } = getCurrentInstance()
 
+    watch(() => proxy.$q.lang.rtl, emitEvent)
+
     onMounted(() => {
       parentEl = proxy.$el.parentNode
       configureScrollTarget()

package/src/components/scroll-observer/QScrollObserver.json

@@ -40,14 +40,12 @@
                 "top": {
                   "type": "Number",
                   "required": true,
-                  "desc": "Scroll offset from top (vertical)",
-                  "examples": [ 120 ]
+                  "desc": "Scroll offset from top (vertical)"
                 },
                 "left": {
                   "type": "Number",
                   "required": true,
-                  "desc": "Scroll offset from left (horizontal)",
-                  "examples": [ 10 ]
+                  "desc": "Scroll offset from left (horizontal)"
                 }
               }
             },
@@ -71,14 +69,12 @@
                 "top": {
                   "type": "Number",
                   "required": true,
-                  "desc": "Vertical delta distance since event was last emitted",
-                  "examples": [ 120 ]
+                  "desc": "Vertical delta distance since event was last emitted"
                 },
                 "left": {
                   "type": "Number",
                   "required": true,
-                  "desc": "Horizontal delta distance since event was last emitted",
-                  "examples": [ 10 ]
+                  "desc": "Horizontal delta distance since event was last emitted"
                 }
               }
             },
@@ -91,14 +87,12 @@
                 "top": {
                   "type": "Number",
                   "required": true,
-                  "desc": "Scroll offset from top (vertical)",
-                  "examples": [ 120 ]
+                  "desc": "Scroll offset from top (vertical)"
                 },
                 "left": {
                   "type": "Number",
                   "required": true,
-                  "desc": "Scroll offset from left (horizontal)",
-                  "examples": [ 10 ]
+                  "desc": "Scroll offset from left (horizontal)"
                 }
               }
             }

package/src/components/select/QSelect.js

@@ -127,9 +127,9 @@ export default createComponent({
 
   emits: [
     ...useFieldEmits,
-    'add', 'remove', 'input-value', 'new-value',
+    'add', 'remove', 'inputValue', 'newValue',
     'keyup', 'keypress', 'keydown',
-    'filter-abort'
+    'filterAbort'
   ],
 
   setup (props, { slots, emit }) {
@@ -251,6 +251,11 @@ export default createComponent({
         .join(', ')
     )
 
+    const ariaCurrentValue = computed(() => (props.displayValue !== void 0
+      ? props.displayValue
+      : selectedString.value
+    ))
+
     const needsHtmlFn = computed(() => (
       props.optionsHtml === true
         ? () => true
@@ -276,20 +281,9 @@ export default createComponent({
         'aria-readonly': props.readonly === true ? 'true' : 'false',
         'aria-autocomplete': props.useInput === true ? 'list' : 'none',
         'aria-expanded': menu.value === true ? 'true' : 'false',
-        'aria-owns': `${ state.targetUid.value }_lb`,
         'aria-controls': `${ state.targetUid.value }_lb`
       }
 
-      return attrs
-    })
-
-    const listboxAttrs = computed(() => {
-      const attrs = {
-        id: `${ state.targetUid.value }_lb`,
-        role: 'listbox',
-        'aria-multiselectable': props.multiple === true ? 'true' : 'false'
-      }
-
       if (optionIndex.value >= 0) {
         attrs[ 'aria-activedescendant' ] = `${ state.targetUid.value }_${ optionIndex.value }`
       }
@@ -297,6 +291,12 @@ export default createComponent({
       return attrs
     })
 
+    const listboxAttrs = computed(() => ({
+      id: `${ state.targetUid.value }_lb`,
+      role: 'listbox',
+      'aria-multiselectable': props.multiple === true ? 'true' : 'false'
+    }))
+
     const selectedScope = computed(() => {
       return innerValue.value.map((opt, i) => ({
         index: i,
@@ -792,7 +792,9 @@ export default createComponent({
         && props.useInput !== true
         && e.key !== void 0
         && e.key.length === 1 // printable char
-        && e.altKey === e.ctrlKey // not kbd shortcut
+        && e.altKey === false // not kbd shortcut
+        && e.ctrlKey === false // not kbd shortcut
+        && e.metaKey === false // not kbd shortcut, especially on macOS with Command key
         && (e.keyCode !== 32 || searchBuffer.length > 0) // space in middle of search
       ) {
         menu.value !== true && showPopup(e)
@@ -877,7 +879,7 @@ export default createComponent({
         }
 
         if (props.onNewValue !== void 0) {
-          emit('new-value', inputValue.value, done)
+          emit('newValue', inputValue.value, done)
         }
         else {
           done(inputValue.value)
@@ -900,8 +902,8 @@ export default createComponent({
       return hasDialog === true
         ? menuContentRef.value
         : (
-            menuRef.value !== null && menuRef.value.__qPortalInnerRef.value !== null
-              ? menuRef.value.__qPortalInnerRef.value
+            menuRef.value !== null && menuRef.value.contentEl !== null
+              ? menuRef.value.contentEl
               : void 0
           )
     }
@@ -939,9 +941,7 @@ export default createComponent({
 
       return [
         h('span', {
-          [ valueAsHtml.value === true ? 'innerHTML' : 'textContent' ]: props.displayValue !== void 0
-            ? props.displayValue
-            : selectedString.value
+          [ valueAsHtml.value === true ? 'innerHTML' : 'textContent' ]: ariaCurrentValue.value
         })
       ]
     }
@@ -996,7 +996,7 @@ export default createComponent({
         id: isTarget === true ? state.targetUid.value : void 0,
         maxlength: props.maxlength,
         autocomplete: props.autocomplete,
-        'data-autofocus': (fromDialog !== true && props.autofocus === true) || void 0,
+        'data-autofocus': fromDialog === true || props.autofocus === true || void 0,
         disabled: props.disable === true,
         readonly: props.readonly === true,
         ...inputControlEvents.value
@@ -1044,7 +1044,7 @@ export default createComponent({
     function setInputValue (val) {
       if (inputValue.value !== val) {
         inputValue.value = val
-        emit('input-value', val)
+        emit('inputValue', val)
       }
     }
 
@@ -1068,7 +1068,7 @@ export default createComponent({
       }
 
       if (state.innerLoading.value === true) {
-        emit('filter-abort')
+        emit('filterAbort')
       }
       else {
         state.innerLoading.value = true
@@ -1285,7 +1285,7 @@ export default createComponent({
         filterId = void 0
 
         if (state.innerLoading.value === true) {
-          emit('filter-abort')
+          emit('filterAbort')
           state.innerLoading.value = false
           innerLoadingIndicator.value = false
         }
@@ -1371,14 +1371,14 @@ export default createComponent({
 
     function onControlPopupShow (e) {
       e !== void 0 && stop(e)
-      emit('popup-show', e)
+      emit('popupShow', e)
       state.hasPopupOpen = true
       state.onControlFocusin(e)
     }
 
     function onControlPopupHide (e) {
       e !== void 0 && stop(e)
-      emit('popup-hide', e)
+      emit('popupHide', e)
       state.hasPopupOpen = false
       state.onControlFocusout(e)
     }
@@ -1496,8 +1496,9 @@ export default createComponent({
               key: 'd_t',
               class: 'q-select__focus-target',
               id: isTarget === true ? state.targetUid.value : void 0,
+              value: ariaCurrentValue.value,
               readonly: true,
-              'data-autofocus': (fromDialog !== true && props.autofocus === true) || void 0,
+              'data-autofocus': fromDialog === true || props.autofocus === true || void 0,
               ...attrs,
               onKeydown: onTargetKeydown,
               onKeyup: onTargetKeyup,