quasar 2.7.1 → 2.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.7.1",
+  "version": "2.7.4",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",
@@ -30,7 +30,7 @@
     "lint": "eslint --ext .js,.vue src dev",
     "lint-fix": "eslint --ext .js,.vue src dev --fix",
     "test:component": "cd ./dev && cypress open-ct && cd ..",
-    "test:component:ci": "cd ./dev && cypress run-ct && cd ..",
+    "test:component:ci": "cd ./dev && cypress run-ct --record --parallel && cd ..",
     "test:create": "node ./test/cypress/helpers/create-spec.js -c"
   },
   "repository": {
@@ -65,25 +65,25 @@
   },
   "homepage": "https://quasar.dev",
   "devDependencies": {
-    "@quasar/app-vite": "^1.0.0-beta.5",
+    "@quasar/app-vite": "^1.0.1",
     "@quasar/extras": "^1.12.0",
     "@quasar/quasar-app-extension-testing-e2e-cypress": "^4.1.2",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.3.3",
-    "autoprefixer": "^10.4.4",
+    "autoprefixer": "^10.4.7",
     "babel-preset-es2015-rollup": "^3.0.0",
     "cli-highlight": "^2.1.11",
-    "cssnano": "^5.1.4",
-    "diff": "^5.0.0",
+    "cssnano": "^5.1.12",
+    "diff": "^5.1.0",
     "eslint": "^7.4.0",
     "eslint-config-standard": "^17.0.0",
-    "eslint-plugin-import": "^2.19.1",
-    "eslint-plugin-n": "^15.0.0",
-    "eslint-plugin-promise": "^6.0.0",
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-import": "^2.19.1",
+    "eslint-plugin-n": "^15.0.0",
     "eslint-plugin-no-only-tests": "^2.6.0",
     "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-vue": "^8.0.0",
     "fast-glob": "^3.2.7",
     "module-alias": "^2.2.2",
@@ -95,8 +95,8 @@
     "rollup": "^2.34.0",
     "table": "^6.0.4",
     "uglify-es": "^3.3.9",
-    "vue": "^3.0.0",
-    "vue-router": "^4.0.0",
+    "vue": "^3.2.37",
+    "vue-router": "^4.0.16",
     "yargs": "^17.3.0"
   },
   "vetur": {

package/src/components/dialog/QDialog.js

@@ -47,6 +47,7 @@ export default createComponent({
 
     persistent: Boolean,
     autoClose: Boolean,
+    allowFocusOutside: Boolean,
 
     noEscDismiss: Boolean,
     noBackdropDismiss: Boolean,
@@ -351,7 +352,8 @@ export default createComponent({
     function onFocusChange (evt) {
       // the focus is not in a vue child component
       if (
-        portalIsAccessible.value === true
+        props.allowFocusOutside !== true
+        && portalIsAccessible.value === true
         && childHasFocus(innerRef.value, evt.target) !== true
       ) {
         focus('[tabindex]:not([tabindex="-1"])')

package/src/components/dialog/QDialog.json

@@ -92,6 +92,13 @@
       "desc": "Do not shake up the Dialog to catch user's attention",
       "category": "behavior",
       "addedIn": "v2.1.1"
+    },
+
+    "allow-focus-outside": {
+      "type": "Boolean",
+      "desc": "Allow elements outside of the Dialog to be focusable; By default, for accessibility reasons, QDialog does not allow outer focus",
+      "category": "behavior",
+      "addedIn": "v2.7.2"
     }
   },
 

package/src/components/file/QFile.js

@@ -103,6 +103,11 @@ export default createComponent({
       disabled: state.editable.value !== true
     }))
 
+    const fieldClass = computed(() =>
+      'q-file q-field--auto-height'
+      + (dnd.value === true ? ' q-file--dnd' : '')
+    )
+
     const isAppending = computed(() =>
       props.multiple === true && props.append === true
     )
@@ -235,7 +240,7 @@ export default createComponent({
     }
 
     Object.assign(state, {
-      fieldClass: { value: 'q-file q-field--auto-height' },
+      fieldClass,
       emitValue,
       hasValue,
       inputRef,

package/src/components/icon/QIcon.sass

@@ -2,6 +2,7 @@
   line-height: 1
   width: 1em
   height: 1em
+  flex-shrink: 0
   letter-spacing: normal
   text-transform: none
   white-space: nowrap
@@ -21,8 +22,8 @@
 
   > svg,
   > img
-    width: 1em
-    height: 1em
+    width: 100%
+    height: 100%
 
 .q-icon,
 .material-icons,

package/src/components/img/QImg.sass

@@ -10,6 +10,7 @@
 
   &__container
     border-radius: inherit
+    font-size: 0
 
   &__image
     border-radius: inherit

package/src/components/input/QInput.js

@@ -208,7 +208,7 @@ export default createComponent({
     }
 
     function onInput (e) {
-      if (!e || !e.target || e.target.qComposing === true) {
+      if (!e || !e.target) {
         return
       }
 
@@ -219,6 +219,12 @@ export default createComponent({
 
       const val = e.target.value
 
+      if (e.target.qComposing === true) {
+        temp.value = val
+
+        return
+      }
+
       if (hasMask.value === true) {
         updateMaskValue(val, false, e.inputType)
       }

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/scroll-area/QScrollArea.js

@@ -24,6 +24,8 @@ const panOpts = {
   mouseAllDir: true
 }
 
+const getMinThumbSize = size => (size >= 250 ? 50 : Math.ceil(size / 5))
+
 export default createComponent({
   name: 'QScrollArea',
 
@@ -115,7 +117,7 @@ export default createComponent({
       Math.round(
         between(
           container.vertical.value * container.vertical.value / scroll.vertical.size.value,
-          50,
+          getMinThumbSize(container.vertical.value),
           container.vertical.value
         )
       )
@@ -157,7 +159,7 @@ export default createComponent({
       Math.round(
         between(
           container.horizontal.value * container.horizontal.value / scroll.horizontal.size.value,
-          50,
+          getMinThumbSize(container.horizontal.value),
           container.horizontal.value
         )
       )

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'
   ],
@@ -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 = {
@@ -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)
+            }
           }
         })
       }
@@ -1426,10 +1438,8 @@ export default createComponent({
       showPopup,
 
       floatingLabel: computed(() =>
-        (props.hideSelected === true
-          ? inputValue.value.length > 0
-          : hasValue.value === true
-        )
+        (props.hideSelected !== true && hasValue.value === true)
+        || inputValue.value.length > 0
         || fieldValueIsFilled(props.displayValue)
       ),