quasar 2.6.6 → 2.7.2

package/src/components/infinite-scroll/QInfiniteScroll.js

@@ -135,6 +135,16 @@ export default createComponent({
 
       if (isWorking.value === true) {
         localScrollTarget.addEventListener('scroll', poll, passive)
+
+        if (props.reverse === true) {
+          const
+            scrollHeight = getScrollHeight(localScrollTarget),
+            containerHeight = height(localScrollTarget)
+
+          setVerticalScrollPosition(localScrollTarget, scrollHeight - containerHeight)
+        }
+
+        immediatePoll()
       }
     }
 
@@ -205,16 +215,6 @@ export default createComponent({
       setDebounce(props.debounce)
 
       updateScrollTarget()
-
-      if (props.reverse === true) {
-        const
-          scrollHeight = getScrollHeight(localScrollTarget),
-          containerHeight = height(localScrollTarget)
-
-        setVerticalScrollPosition(localScrollTarget, scrollHeight - containerHeight)
-      }
-
-      immediatePoll()
     })
 
     return () => {

package/src/components/input/QInput.js

@@ -208,7 +208,7 @@ export default createComponent({
     }
 
     function onInput (e) {
-      if (!e || !e.target || e.target.composing === true) {
+      if (!e || !e.target || e.target.qComposing === true) {
         return
       }
 
@@ -253,6 +253,8 @@ export default createComponent({
         }
 
         if (props.modelValue !== val && emitCachedValue !== val) {
+          emitCachedValue = val
+
           stopWatcher === true && (stopValueWatcher = true)
           emit('update:modelValue', val)
 
@@ -284,13 +286,16 @@ export default createComponent({
       const inp = inputRef.value
       if (inp !== null) {
         const parentStyle = inp.parentNode.style
+        const { overflow } = inp.style
 
         // reset height of textarea to a small size to detect the real height
         // but keep the total control size the same
         parentStyle.marginBottom = (inp.scrollHeight - 1) + 'px'
         inp.style.height = '1px'
+        inp.style.overflow = 'hidden'
 
         inp.style.height = inp.scrollHeight + 'px'
+        inp.style.overflow = overflow
         parentStyle.marginBottom = ''
       }
     }

package/src/components/item/QItem.js

@@ -20,7 +20,10 @@ export default createComponent({
       default: 'div'
     },
 
-    active: Boolean,
+    active: {
+      type: Boolean,
+      default: null
+    },
 
     clickable: Boolean,
     dense: Boolean,
@@ -58,7 +61,7 @@ export default createComponent({
       + (props.dense === true ? ' q-item--dense' : '')
       + (isDark.value === true ? ' q-item--dark' : '')
       + (
-        hasLink.value === true
+        hasLink.value === true && props.active === null
           ? linkClass.value
           : (
               props.active === true

package/src/components/item/QItem.json

@@ -9,7 +9,8 @@
     "active": {
       "type": "Boolean",
       "desc": "Put item into 'active' state",
-      "category": "state"
+      "category": "state",
+      "default": null
     },
 
     "dark": {

package/src/components/layout/QLayout.js

@@ -231,7 +231,8 @@ export default createComponent({
       const layout = h('div', {
         class: classes.value,
         style: style.value,
-        ref: props.container === true ? void 0 : rootRef
+        ref: props.container === true ? void 0 : rootRef,
+        tabindex: -1
       }, content)
 
       if (props.container === true) {

package/src/components/menu/__tests__/QMenu.spec.js

@@ -15,7 +15,7 @@ describe('Menu API', () => {
       describe('(prop): touch-position', () => {
         it('should show menu at the position of the click', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               'touch-position': true
             }
           })
@@ -71,7 +71,7 @@ describe('Menu API', () => {
 
         it('should not close the menu when clicking outside the menu when persistent', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               persistent: true
             }
           })
@@ -89,7 +89,7 @@ describe('Menu API', () => {
 
         it('should not close the menu when hitting the escape key when persistent', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               persistent: true
             }
           })
@@ -129,7 +129,7 @@ describe('Menu API', () => {
 
         it('should close the menu when clicking a menu child without v-close-popup when auto-close is true', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               'auto-close': true
             }
           })
@@ -174,7 +174,7 @@ describe('Menu API', () => {
 
         it('should not switch focus back to parent element when closing if no-refocus is true', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               'no-refocus': true
             }
           })
@@ -208,7 +208,7 @@ describe('Menu API', () => {
 
         it('should no switch focus to the menu when opening with no-focus is true', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               'no-focus': true
             }
           })
@@ -226,7 +226,7 @@ describe('Menu API', () => {
       describe('(prop): fit', () => {
         it('should show a menu that matches the full with of the target when fit is supplied', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               target: '.other-target',
               fit: true
             }
@@ -245,7 +245,7 @@ describe('Menu API', () => {
 
         it('should show a menu that not matches the full with of the target when fit is false', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               target: '.other-target',
               fit: false
             }
@@ -266,7 +266,7 @@ describe('Menu API', () => {
       describe('(prop): cover', () => {
         it('should show a menu that overlays the target when using cover', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               cover: true
             }
           })
@@ -279,7 +279,7 @@ describe('Menu API', () => {
 
         it('should show a menu that overlays the target when using cover', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               cover: true,
               target: '.other-target'
             }
@@ -293,7 +293,7 @@ describe('Menu API', () => {
 
         it('should ignore self property when using cover', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               cover: true,
               self: 'center right',
               target: '.other-target'
@@ -328,7 +328,7 @@ describe('Menu API', () => {
               horizontalSelf.forEach((hS) => {
                 it(`should position Anchor(${ vA } ${ hA }) & Self(${ vS } ${ hS })  correctly`, () => {
                   mount(WrapperOne, {
-                    attrs: {
+                    props: {
                       anchor: `${ vA } ${ hA }`,
                       self: `${ vS } ${ hS }`
                     }
@@ -357,7 +357,7 @@ describe('Menu API', () => {
           verticalSelf.forEach((vS) => {
             it(`should offset vertical position Anchor(${ vA } left) & Self(${ vS } left) correctly`, () => {
               mount(WrapperOne, {
-                attrs: {
+                props: {
                   anchor: `${ vA } left`,
                   self: `${ vS } left`,
                   offset: [ 0, 20 ]
@@ -378,7 +378,7 @@ describe('Menu API', () => {
           horizontalSelf.forEach((hS) => {
             it(`should offset horizontal position Anchor(top ${ hA }) & Self(top ${ hS }) correctly`, () => {
               mount(WrapperOne, {
-                attrs: {
+                props: {
                   anchor: `top ${ hA }`,
                   self: `top ${ hS }`,
                   offset: [ 20, 0 ]
@@ -399,7 +399,7 @@ describe('Menu API', () => {
       describe('(prop): dark', () => {
         it('should set the --q-dark color as background and white text color', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               dark: true
             }
           })
@@ -414,7 +414,7 @@ describe('Menu API', () => {
       describe('(prop): square', () => {
         it('should not have border-radius when using this prop', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               square: true
             }
           })
@@ -429,7 +429,7 @@ describe('Menu API', () => {
         it('should specify a max-height when setting this prop', () => {
           const maxHeight = '30px'
           mount(WrapperOne, {
-            attrs: {
+            props: {
               maxHeight
             }
           })
@@ -444,7 +444,7 @@ describe('Menu API', () => {
         it('should specify a max-width when setting this prop', () => {
           const maxWidth = '30px'
           mount(WrapperOne, {
-            attrs: {
+            props: {
               maxWidth
             }
           })
@@ -470,7 +470,7 @@ describe('Menu API', () => {
       it('should emit @escape-key event when escape key is pressed', () => {
         const fn = cy.stub()
         mount(WrapperOne, {
-          attrs: {
+          props: {
             onEscapeKey: fn
           }
         })
@@ -493,7 +493,7 @@ describe('Menu API', () => {
       it('should not emit @escape-key event when menu is persistent', () => {
         const fn = cy.stub()
         mount(WrapperOne, {
-          attrs: {
+          props: {
             onEscapeKey: fn,
             persistent: true
           }
@@ -520,7 +520,7 @@ describe('Menu API', () => {
     describe('(method): updatePosition', () => {
       it('should reposition the menu when it is no longer in correct position', () => {
         mount(WrapperTwo, {
-          attrs: {
+          props: {
             anchor: 'bottom left',
             self: 'bottom left'
           }
@@ -564,7 +564,7 @@ describe('Menu API', () => {
     describe('(method): focus', () => {
       it('should focus the menu', () => {
         mount(WrapperOne, {
-          attrs: {
+          props: {
             'no-focus': true
           }
         })
@@ -586,7 +586,7 @@ describe('Menu API', () => {
 
       it('should focus the autofocus element inside the menu', () => {
         mount(WrapperTwo, {
-          attrs: {
+          props: {
             'no-focus': true
           }
         })

package/src/components/pagination/QPagination.json

@@ -223,7 +223,7 @@
       "extends": "update:model-value",
       "params": {
         "value": {
-          "type": "String"
+          "type": "Number"
         }
       }
     }

package/src/components/radio/QRadio.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, getCurrentInstance } from 'vue'
+import { h, ref, computed, getCurrentInstance, toRaw } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
@@ -64,7 +64,7 @@ export default createComponent({
     const rootRef = ref(null)
     const { refocusTargetEl, refocusTarget } = useRefocusTarget(props, rootRef)
 
-    const isTrue = computed(() => props.modelValue === props.val)
+    const isTrue = computed(() => toRaw(props.modelValue) === toRaw(props.val))
 
     const classes = computed(() =>
       'q-radio cursor-pointer no-outline row inline no-wrap items-center'

package/src/components/select/QSelect.js

@@ -127,7 +127,7 @@ export default createComponent({
 
   emits: [
     ...useFieldEmits,
-    'add', 'remove', 'input-value',
+    'add', 'remove', 'input-value', 'new-value',
     'keyup', 'keypress', 'keydown',
     'filter-abort'
   ],
@@ -165,7 +165,7 @@ export default createComponent({
 
     const virtualScrollItemSizeComputed = computed(() => (
       props.virtualScrollItemSize === void 0
-        ? (props.dense === true ? 24 : 48)
+        ? (props.optionsDense === true ? 24 : 48)
         : props.virtualScrollItemSize
     ))
 
@@ -175,7 +175,6 @@ export default createComponent({
       localResetVirtualScroll,
       padVirtualScroll,
       onVirtualScrollEvt,
-      reset,
       scrollTo,
       setVirtualScrollSize
     } = useVirtualScroll({
@@ -269,15 +268,23 @@ export default createComponent({
 
     const tabindex = computed(() => (state.focused.value === true ? props.tabindex : -1))
 
-    const comboboxAttrs = computed(() => ({
-      tabindex: props.tabindex,
-      role: 'combobox',
-      'aria-label': props.label,
-      '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`
-    }))
+    const comboboxAttrs = computed(() => {
+      const attrs = {
+        tabindex: props.tabindex,
+        role: 'combobox',
+        'aria-label': props.label,
+        '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`
+      }
+
+      if (optionIndex.value >= 0) {
+        attrs[ 'aria-activedescendant' ] = `${ state.targetUid.value }_${ optionIndex.value }`
+      }
+
+      return attrs
+    })
 
     const listboxAttrs = computed(() => {
       const attrs = {
@@ -1013,7 +1020,7 @@ export default createComponent({
     function onInput (e) {
       clearTimeout(inputTimer)
 
-      if (e && e.target && e.target.composing === true) {
+      if (e && e.target && e.target.qComposing === true) {
         return
       }
 
@@ -1342,13 +1349,18 @@ export default createComponent({
       setOptionIndex(optionIndex)
     }
 
-    function rerenderMenu () {
+    function rerenderMenu (newLength, oldLength) {
       if (menu.value === true && state.innerLoading.value === false) {
-        reset()
+        localResetVirtualScroll(-1, true)
 
         nextTick(() => {
           if (menu.value === true && state.innerLoading.value === false) {
-            updateMenu(true)
+            if (newLength > oldLength) {
+              localResetVirtualScroll()
+            }
+            else {
+              updateMenu(true)
+            }
           }
         })
       }