quasar 2.12.7 → 2.13.1

package/src/components/field/__tests__/QField.cy.js

@@ -0,0 +1,156 @@
+import QField from '../QField'
+import { vModelAdapter } from '@quasar/quasar-app-extension-testing-e2e-cypress'
+import { ref } from 'vue'
+import Icons from '../../../../icon-set/material-icons.mjs'
+
+function getHostElement () {
+  return cy.get('.q-field')
+}
+
+function mountQField (options) {
+  return cy.mount(QField, options)
+}
+
+describe('Field API', () => {
+  describe('Props', () => {
+    describe('Category: model', () => {
+      describe('(prop): maxlength', () => {
+        it.skip(' ', () => {
+          // It is tricky to test this since it will require that we setup a control slot with v-model.
+          // This is already tested in QInput and others using use-field composable, so are not not testing it.
+        })
+      })
+    })
+  })
+
+  describe('Slots', () => {
+    describe('(slot): control', () => {
+      it('should use control slot as content of the field', () => {
+        const controlSlot = 'Hello there'
+        mountQField({
+          slots: {
+            control: () => controlSlot
+          }
+        })
+
+        getHostElement().get('.q-field__control-container').should('contain', controlSlot)
+      })
+    })
+  })
+
+  describe('Events', () => {
+    describe('(event): update:model-value', () => {
+      it('should emit onUpdate:modelValue event', () => {
+        const model = ref('text')
+        const fn = cy.stub()
+        mountQField({
+          props: {
+            ...vModelAdapter(model),
+            'onUpdate:modelValue': fn,
+            clearable: true
+          }
+        })
+
+        getHostElement().get('button[type="button"]')
+          .contains(Icons.field.clear).click()
+          .then(() => {
+            expect(fn).to.be.calledWith()
+          })
+      })
+    })
+
+    describe('(event): focus', () => {
+      it('should emit the focus event', () => {
+        const fn = cy.stub()
+
+        mountQField({
+          props: {
+            onfocus: fn
+          },
+          slots: {
+            control: 'text'
+          }
+        })
+
+        getHostElement().click()
+
+        getHostElement().then(() => {
+          expect(fn).to.be.calledWith()
+        })
+      })
+    })
+
+    describe('(event): blur', () => {
+      it('should emit blur event', () => {
+        const fn = cy.stub()
+        mountQField({
+          props: {
+            onblur: fn
+          },
+          slots: {
+            control: 'text'
+          }
+        })
+
+        getHostElement()
+          .click()
+
+        getHostElement().then(() => {
+          Cypress.vueWrapper.vm.blur()
+        })
+
+        getHostElement()
+          .then(() => {
+            expect(fn).to.be.calledWith()
+          })
+      })
+    })
+  })
+
+  describe('Methods', () => {
+    describe('(method): focus', () => {
+      it('should focus the component', () => {
+        mountQField({
+          slots: {
+            control: 'text'
+          }
+        })
+
+        getHostElement()
+          .get('.q-field--focused')
+          .should('not.exist')
+
+        getHostElement()
+          .then(() => {
+            Cypress.vueWrapper.vm.focus()
+          })
+        getHostElement()
+          .get('.q-field--focused')
+          .should('exist')
+      })
+    })
+
+    describe('(method): blur', () => {
+      it('should blur the component', () => {
+        mountQField({
+          slots: {
+            control: 'text'
+          }
+        })
+
+        getHostElement().click()
+
+        getHostElement()
+          .get('.q-field--focused')
+          .should('exist')
+
+        getHostElement()
+          .then(() => {
+            Cypress.vueWrapper.vm.blur()
+          })
+
+        cy.get('.q-field--focused').should('not.exist')
+      })
+    })
+  })
+})

package/src/components/img/QImg.json

@@ -246,7 +246,7 @@
     "error": {
       "desc": "Emitted when browser could not load the image",
       "params": {
-        "src": {
+        "err": {
           "type": "Error",
           "desc": "JS Error object"
         }

package/src/components/input/QInput.json

@@ -26,7 +26,8 @@
       "default": "text",
       "values": [
         "text", "password", "textarea", "email", "search",
-        "tel", "file", "number", "url", "time", "date"
+        "tel", "file", "number", "url", "time", "date",
+        "datetime-local"
       ],
       "category": "general"
     },

package/src/components/input/use-mask.js

@@ -304,7 +304,12 @@ export default function (props, emit, emitValue, inputRef) {
       ? unmaskValue(masked)
       : masked
 
-    String(props.modelValue) !== val && emitValue(val, true)
+    if (
+      String(props.modelValue) !== val
+      && (props.modelValue !== null || val !== '')
+    ) {
+      emitValue(val, true)
+    }
   }
 
   function moveCursorForPaste (inp, start, end) {

package/src/components/intersection/QIntersection.json

@@ -23,7 +23,8 @@
     },
 
     "root": {
-      "type": "Element",
+      "type": [ "Element", "null" ],
+      "default": null,
       "desc": "[Intersection API root prop] Lets you define an alternative to the viewport as your root (through its DOM element); It is important to keep in mind that root needs to be an ancestor of the observed element",
       "examples": [ "$refs.myTable.$el", "getElementById(\"myTable\")" ],
       "category": "behavior"

package/src/components/item/QItem.js

@@ -106,7 +106,7 @@ export default createComponent({
     }
 
     function onKeyup (e) {
-      if (isClickable.value === true && isKeyCode(e, 13) === true) {
+      if (isClickable.value === true && isKeyCode(e, [ 13, 32 ]) === true) {
         stopAndPrevent(e)
 
         // for ripple

package/src/components/item/QItem.json

@@ -7,10 +7,10 @@
 
   "props": {
     "active": {
-      "type": "Boolean",
+      "type": [ "Boolean", "null" ],
+      "default": null,
       "desc": "Put item into 'active' state",
-      "category": "state",
-      "default": null
+      "category": "state"
     },
 
     "dark": {

package/src/components/menu/QMenu.json

@@ -105,12 +105,16 @@
 
     "max-height": {
       "extends": "size",
+      "type": [ "String", "null" ],
+      "default": null,
       "desc": "The maximum height of the menu; Size in CSS units, including unit name",
       "category": "style"
     },
 
     "max-width": {
       "extends": "size",
+      "type": [ "String", "null" ],
+      "default": null,
       "desc": "The maximum width of the menu; Size in CSS units, including unit name",
       "category": "style"
     }

package/src/components/pagination/QPagination.json

@@ -80,25 +80,29 @@
     },
 
     "boundary-links": {
-      "type": "Boolean",
+      "type": [ "Boolean", "null" ],
+      "default": null,
       "desc": "Show boundary button links",
       "category": "content"
     },
 
     "boundary-numbers": {
-      "type": "Boolean",
+      "type": [ "Boolean", "null" ],
+      "default": null,
       "desc": "Always show first and last page buttons (if not using 'input')",
       "category": "content"
     },
 
     "direction-links": {
-      "type": "Boolean",
+      "type": [ "Boolean", "null" ],
+      "default": null,
       "desc": "Show direction buttons",
       "category": "content"
     },
 
     "ellipses": {
-      "type": "Boolean",
+      "type": [ "Boolean", "null" ],
+      "default": null,
       "desc": "Show ellipses (...) when pages are available",
       "category": "content"
     },
@@ -221,7 +225,7 @@
     },
 
     "ripple": {
-      "type": [ "Boolean", "Object" ],
+      "type": [ "Boolean", "Object", "null" ],
       "desc": "Configure buttons material ripple (disable it by setting it to 'false' or supply a config object); Does not applies to boundary and ellipsis buttons",
       "default": true,
       "examples": [ false, "{ early: true, center: true, color: 'teal', keyCodes: [] }" ],

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

@@ -352,11 +352,26 @@ export default createComponent({
       targetRef.value[ dirProps[ axis ].scroll ] = offset
     }
 
+    let mouseEventTimer = null
+
     function onMouseenter () {
-      hover.value = true
+      if (mouseEventTimer !== null) {
+        clearTimeout(mouseEventTimer)
+      }
+
+      // setTimeout needed for iOS; see ticket #16210
+      mouseEventTimer = setTimeout(() => {
+        mouseEventTimer = null
+        hover.value = true
+      }, proxy.$q.platform.is.ios ? 50 : 0)
     }
 
     function onMouseleave () {
+      if (mouseEventTimer !== null) {
+        clearTimeout(mouseEventTimer)
+        mouseEventTimer = null
+      }
+
       hover.value = false
     }
 

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

@@ -73,7 +73,8 @@
     },
 
     "visible": {
-      "type": "Boolean",
+      "type": [ "Boolean", "null" ],
+      "default": null,
       "desc": "Manually control the visibility of the scrollbar; Overrides default mouse over/leave behavior",
       "category": "behavior"
     },

package/src/components/select/QSelect.js

@@ -143,7 +143,8 @@ export default createComponent({
     const dialogFieldFocused = ref(false)
     const innerLoadingIndicator = ref(false)
 
-    let inputTimer = null, innerValueCache,
+    let filterTimer = null, inputValueTimer = null,
+      innerValueCache,
       hasDialog, userInputValue, filterId = null, defaultInputValue,
       transitionShowComputed, searchBuffer, searchBufferExp
 
@@ -588,9 +589,11 @@ export default createComponent({
           scrollTo(index)
 
           if (skipInputValue !== true && props.useInput === true && props.fillInput === true) {
-            setInputValue(index >= 0
-              ? getOptionLabel.value(props.options[ index ])
-              : defaultInputValue
+            setInputValue(
+              index >= 0
+                ? getOptionLabel.value(props.options[ index ])
+                : defaultInputValue,
+              true
             )
           }
         }
@@ -651,9 +654,13 @@ export default createComponent({
 
       e.target.value = ''
 
-      if (inputTimer !== null) {
-        clearTimeout(inputTimer)
-        inputTimer = null
+      if (filterTimer !== null) {
+        clearTimeout(filterTimer)
+        filterTimer = null
+      }
+      if (inputValueTimer !== null) {
+        clearTimeout(inputValueTimer)
+        inputValueTimer = null
       }
 
       resetInputValue()
@@ -744,6 +751,10 @@ export default createComponent({
       // backspace
       if (
         e.keyCode === 8
+        && (
+          props.useChips === true
+          || props.clearable === true
+        )
         && props.hideSelected !== true
         && inputValue.value.length === 0
       ) {
@@ -838,7 +849,7 @@ export default createComponent({
             scrollTo(index)
 
             if (index >= 0 && props.useInput === true && props.fillInput === true) {
-              setInputValue(getOptionLabel.value(props.options[ index ]))
+              setInputValue(getOptionLabel.value(props.options[ index ]), true)
             }
           })
         }
@@ -1024,9 +1035,13 @@ export default createComponent({
     }
 
     function onInput (e) {
-      if (inputTimer !== null) {
-        clearTimeout(inputTimer)
-        inputTimer = null
+      if (filterTimer !== null) {
+        clearTimeout(filterTimer)
+        filterTimer = null
+      }
+      if (inputValueTimer !== null) {
+        clearTimeout(inputValueTimer)
+        inputValueTimer = null
       }
 
       if (e && e.target && e.target.qComposing === true) {
@@ -1047,17 +1062,26 @@ export default createComponent({
       }
 
       if (props.onFilter !== void 0) {
-        inputTimer = setTimeout(() => {
-          inputTimer = null
+        filterTimer = setTimeout(() => {
+          filterTimer = null
           filter(inputValue.value)
         }, props.inputDebounce)
       }
     }
 
-    function setInputValue (val) {
+    function setInputValue (val, emitImmediately) {
       if (inputValue.value !== val) {
         inputValue.value = val
-        emit('inputValue', val)
+
+        if (emitImmediately === true || props.inputDebounce === 0 || props.inputDebounce === '0') {
+          emit('inputValue', val)
+        }
+        else {
+          inputValueTimer = setTimeout(() => {
+            inputValueTimer = null
+            emit('inputValue', val)
+          }, props.inputDebounce)
+        }
       }
     }
 
@@ -1065,7 +1089,7 @@ export default createComponent({
       userInputValue = internal !== true
 
       if (props.useInput === true) {
-        setInputValue(val)
+        setInputValue(val, true)
 
         if (noFiltering === true || internal !== true) {
           defaultInputValue = val
@@ -1418,7 +1442,8 @@ export default createComponent({
     updatePreState()
 
     onBeforeUnmount(() => {
-      inputTimer !== null && clearTimeout(inputTimer)
+      filterTimer !== null && clearTimeout(filterTimer)
+      inputValueTimer !== null && clearTimeout(inputValueTimer)
     })
 
     // expose public methods

package/src/components/select/QSelect.json

@@ -152,7 +152,8 @@
     },
 
     "options-dark": {
-      "type": "Boolean",
+      "type": [ "Boolean", "null" ],
+      "default": null,
       "desc": "Options menu will be colored with a dark color",
       "category": "options"
     },
@@ -270,7 +271,7 @@
 
     "input-debounce": {
       "type": [ "Number", "String" ],
-      "desc": "Debounce the input model update with an amount of milliseconds",
+      "desc": "Debounce the input model update with an amount of milliseconds (also affects the 'filter' event, if used)",
       "default": 500,
       "category": "content"
     },

package/src/components/select/__tests__/QSelect.cy.js

@@ -1258,7 +1258,8 @@ describe('QSelect API', () => {
           props: {
             modelValue: null,
             onInputValue: fn,
-            useInput: true
+            useInput: true,
+            inputDebounce: 0
           }
         })
 

package/src/components/table/QTable.json

@@ -187,7 +187,7 @@
         },
         "sort": {
           "type": "Function",
-          "desc": "Compare function if you have some custom data or want a specific way to compare two rows",
+          "desc": "Compare function if you have some custom data or want a specific way to compare two rows; rows with null/undefined values will get sorted without triggering this method (use 'rawSort' instead if you want to handle those values too)",
           "examples": ["(a, b, rowA, rowB) => parseInt(a, 10) - parseInt(b, 10)"],
           "params": {
             "a": {
@@ -221,6 +221,43 @@
             "examples": [ "-1", "0", "1" ]
           }
         },
+        "rawSort": {
+          "type": "Function",
+          "desc": "Compare function if you have some custom data or want a specific way to compare two rows; includes rows with null/undefined values (use 'sort' instead if you don't want that)",
+          "examples": ["(a, b, rowA, rowB) => parseInt(a, 10) - parseInt(b, 10)"],
+          "params": {
+            "a": {
+              "type": "Any",
+              "required": true,
+              "desc": "Value of the first comparison term",
+              "examples": [ 123, "abc" ]
+            },
+            "b": {
+              "type": "Any",
+              "required": true,
+              "desc": "Value of the second comparison term",
+              "examples": [ 123, "abc" ]
+            },
+            "rowA": {
+              "type": "Object",
+              "required": true,
+              "desc": "Full Row object in which is contained the first term",
+              "examples": [ "{ name: 'Potassium', value: 'K' }" ]
+            },
+            "rowB": {
+              "type": "Object",
+              "required": true,
+              "desc": "Full Row object in which is contained the second term",
+              "examples": [ "{ name: 'Fluorine', value: 'F' }" ]
+            }
+          },
+          "returns": {
+            "type": "Number",
+            "desc": "Comparison result of term 'a' with term 'b'. Less than 0 when 'a' should come first; greater than 0 if 'b' should come first; equal to 0 if their position must not be changed with respect to each other",
+            "examples": [ "-1", "0", "1" ]
+          },
+          "addedIn": "v2.13.0"
+        },
         "sortOrder": {
           "type": "String",
           "desc": "Set column sort order: 'ad' (ascending-descending) or 'da' (descending-ascending); Overrides the 'column-sort-order' prop",

package/src/components/table/table-sort.js

@@ -42,6 +42,9 @@ export function useTableSort (props, computedPagination, colList, setPagination)
               A = val(a),
               B = val(b)
 
+            if (col.rawSort !== void 0) {
+              return col.rawSort(A, B, a, b) * dir
+            }
             if (A === null || A === void 0) {
               return -1 * dir
             }
@@ -49,6 +52,8 @@ export function useTableSort (props, computedPagination, colList, setPagination)
               return 1 * dir
             }
             if (col.sort !== void 0) {
+              // gets called without rows that have null/undefined as value
+              // due to the above two statements
               return col.sort(A, B, a, b) * dir
             }
             if (isNumber(A) === true && isNumber(B) === true) {

package/src/components/time/QTime.js

@@ -706,23 +706,36 @@ export default createComponent({
       }
     }
 
+    function goToViewWhenHasModel (newView) {
+      const model = props.modelValue
+      if (
+        view.value !== newView
+        && model !== void 0
+        && model !== null
+        && model !== ''
+        && typeof model !== 'string'
+      ) {
+        view.value = newView
+      }
+    }
+
     function verifyAndUpdate () {
       if (hourInSelection.value !== null && hourInSelection.value(innerModel.value.hour) !== true) {
         innerModel.value = __splitDate()
-        view.value = 'hour'
+        goToViewWhenHasModel('hour')
         return
       }
 
       if (minuteInSelection.value !== null && minuteInSelection.value(innerModel.value.minute) !== true) {
         innerModel.value.minute = null
         innerModel.value.second = null
-        view.value = 'minute'
+        goToViewWhenHasModel('minute')
         return
       }
 
       if (props.withSeconds === true && secondInSelection.value !== null && secondInSelection.value(innerModel.value.second) !== true) {
         innerModel.value.second = null
-        view.value = 'second'
+        goToViewWhenHasModel('second')
         return
       }
 

package/src/components/time/QTime.json

@@ -16,9 +16,9 @@
     },
 
     "format24h": {
-      "type": "Boolean",
-      "desc": "Forces 24 hour time display instead of AM/PM system",
-      "default": "(based on Quasar lang language being used)",
+      "type": [ "Boolean", "null" ],
+      "default": null,
+      "desc": "Forces 24 hour time display instead of AM/PM system; If prop is not set, then the default is based on Quasar lang language being used",
       "category": "behavior"
     },
 
@@ -33,6 +33,7 @@
     },
 
     "mask": {
+      "type": [ "String", "null" ],
       "default": "HH:mm",
       "examples": [ "HH:mm:ss", "YYYY-MM-DD HH:mm:ss", "HH:mm MMMM Do, YYYY" ]
     },

package/src/components/tooltip/QTooltip.json

@@ -8,12 +8,16 @@
   "props": {
     "max-height": {
       "extends": "size",
+      "type": [ "String", "null" ],
+      "default": null,
       "desc": "The maximum height of the Tooltip; Size in CSS units, including unit name",
       "category": "content"
     },
 
     "max-width": {
       "extends": "size",
+      "type": [ "String", "null" ],
+      "default": null,
       "desc": "The maximum width of the Tooltip; Size in CSS units, including unit name",
       "category": "content"
     },

package/src/components/tree/QTree.js

@@ -523,6 +523,8 @@ export default createComponent({
             + (m.selected === true ? ' q-tree__node--selected' : '')
             + (m.disabled === true ? ' q-tree__node--disabled' : ''),
           tabindex: m.link === true ? 0 : -1,
+          ariaExpanded: children.length > 0 ? m.expanded : null,
+          role: 'treeitem',
           onClick: (e) => {
             onClick(node, m, e)
           },
@@ -596,7 +598,8 @@ export default createComponent({
                         body,
                         h('div', {
                           class: 'q-tree__children'
-                            + (m.disabled === true ? ' q-tree__node--disabled' : '')
+                            + (m.disabled === true ? ' q-tree__node--disabled' : ''),
+                          role: 'group'
                         }, children)
                       ])
                       : null
@@ -614,7 +617,8 @@ export default createComponent({
                     body,
                     h('div', {
                       class: 'q-tree__children'
-                        + (m.disabled === true ? ' q-tree__node--disabled' : '')
+                        + (m.disabled === true ? ' q-tree__node--disabled' : ''),
+                      role: 'group'
                     }, children)
                   ]),
                   [ [ vShow, m.expanded ] ]
@@ -708,7 +712,8 @@ export default createComponent({
 
       return h(
         'div', {
-          class: classes.value
+          class: classes.value,
+          role: 'tree'
         },
         children.length === 0
           ? (