quasar 2.4.11 → 2.5.1

package/src/components/file/QFile.json

@@ -77,7 +77,8 @@
     },
 
     "input-class": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the underlying selection container",
       "examples": [
         "my-special-class",
@@ -87,7 +88,8 @@
     },
 
     "input-style": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the underlying selection container",
       "examples": [
         "background-color: #ff0000",

package/src/components/form/QForm.js

@@ -33,7 +33,7 @@ export default createComponent({
         ? shouldFocus
         : props.noErrorFocus !== true
 
-      validateIndex++
+      const index = ++validateIndex
 
       const emitEvent = (res, ref) => {
         emit('validation-' + (res === true ? 'success' : 'error'), ref)
@@ -47,7 +47,7 @@ export default createComponent({
           promises.push(
             valid.then(
               valid => ({ valid, comp }),
-              error => ({ valid: false, comp, error })
+              err => ({ valid: false, comp, err })
             )
           )
         }
@@ -71,34 +71,33 @@ export default createComponent({
         return Promise.resolve(true)
       }
 
-      const index = validateIndex
-
-      return Promise.all(promises).then(
-        res => {
-          if (index === validateIndex) {
-            const errors = res.filter(r => r.valid !== true)
+      return Promise.all(promises).then(res => {
+        const errors = res.filter(r => r.valid !== true)
 
-            if (errors.length === 0) {
-              emitEvent(true)
-              return true
-            }
+        if (errors.length === 0) {
+          index === validateIndex && emitEvent(true)
+          return true
+        }
 
-            const { valid, comp } = errors[ 0 ]
+        const { valid, comp, err } = errors[ 0 ]
 
-            emitEvent(false, comp)
+        // if not outdated already
+        if (index === validateIndex) {
+          err !== void 0 && console.error(err)
 
-            if (
-              focus === true
-              && valid !== true
-              && typeof comp.focus === 'function'
-            ) {
-              comp.focus()
-            }
+          emitEvent(false, comp)
 
-            return false
+          if (
+            focus === true
+            && valid !== true
+            && typeof comp.focus === 'function'
+          ) {
+            comp.focus()
           }
         }
-      )
+
+        return false
+      })
     }
 
     function resetValidation () {
@@ -112,8 +111,11 @@ export default createComponent({
     function submit (evt) {
       evt !== void 0 && stopAndPrevent(evt)
 
+      const index = validateIndex + 1
+
       validate().then(val => {
-        if (val === true) {
+        // if not outdated && validation succeeded
+        if (index === validateIndex && val === true) {
           if (props.onSubmit !== void 0) {
             emit('submit', evt)
           }
@@ -144,7 +146,7 @@ export default createComponent({
         const target = rootRef.value.querySelector('[autofocus], [data-autofocus]')
           || Array.prototype.find.call(rootRef.value.querySelectorAll('[tabindex]'), el => el.tabIndex > -1)
 
-        target !== null && target !== void 0 && target.focus()
+        target !== null && target !== void 0 && target.focus({ preventScroll: true })
       })
     }
 

package/src/components/img/QImg.json

@@ -53,13 +53,11 @@
     },
 
     "ratio": {
-      "type": [ "String", "Number" ],
       "desc": "Force the component to maintain an aspect ratio",
       "examples": [
         "(Number format) :ratio=\"16/9\"",
         "(String format) ratio=\"1\""
-      ],
-      "category": "style"
+      ]
     },
 
     "initial-ratio": {
@@ -162,6 +160,7 @@
 
     "img-style": {
       "type": "Object",
+      "tsType": "VueStyleObjectProp",
       "desc": "Apply CSS to the native img element",
       "examples": [ ":img-style=\"{ transform: 'rotate(45deg)' }\" "],
       "category": "style"

package/src/components/inner-loading/QInnerLoading.json

@@ -41,7 +41,8 @@
     },
 
     "label-style": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Apply custom style to the label; Works along the 'label' prop only",
       "examples": [
         "font-size: 28px",

package/src/components/input/QInput.js

@@ -125,6 +125,15 @@ export default createComponent({
       return attrs
     })
 
+    // some browsers lose the native input value
+    // so we need to reattach it dynamically
+    // (like type="password" <-> type="text"; see #12078)
+    watch(() => props.type, () => {
+      if (inputRef.value) {
+        inputRef.value.value = props.modelValue
+      }
+    })
+
     watch(() => props.modelValue, v => {
       if (hasMask.value === true) {
         if (stopValueWatcher === true) {
@@ -177,7 +186,7 @@ export default createComponent({
           && inputRef.value !== el
           && (el === null || el.id !== state.targetUid.value)
         ) {
-          inputRef.value.focus()
+          inputRef.value.focus({ preventScroll: true })
         }
       })
     }

package/src/components/input/QInput.json

@@ -53,7 +53,8 @@
     },
 
     "input-class": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the underlying input tag",
       "examples": [
         "my-special-class",
@@ -63,7 +64,8 @@
     },
 
     "input-style": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the underlying input tag",
       "examples": [
         "background-color: #ff0000",

package/src/components/input/__tests__/QInput.spec.js

@@ -0,0 +1,105 @@
+describe('Input API', () => {
+  describe('Props', () => {
+    describe('Category: content', () => {
+      describe('(prop): shadow-text', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): autogrow', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: general', () => {
+      describe('(prop): type', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: model', () => {
+      describe('(prop): model-value', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): debounce', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): maxlength', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: style', () => {
+      describe('(prop): input-class', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): input-style', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+  })
+
+  describe('Events', () => {
+    describe('(event): update:model-value', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(event): focus', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(event): blur', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+
+  describe('Methods', () => {
+    describe('(method): focus', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(method): blur', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(method): select', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(method): getNativeElement', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+})

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

@@ -0,0 +1,29 @@
+describe('use-mask API', () => {
+  describe('Props', () => {
+    describe('Category: behavior', () => {
+      describe('(prop): mask', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): fill-mask', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): reverse-fill-mask', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): unmasked-value', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+  })
+})

package/src/components/menu/QMenu.js

@@ -181,7 +181,7 @@ export default createComponent({
 
         if (node && node.contains(document.activeElement) !== true) {
           node = node.querySelector('[autofocus], [data-autofocus]') || node
-          node.focus()
+          node.focus({ preventScroll: true })
         }
       })
     }
@@ -309,6 +309,7 @@ export default createComponent({
       // the focus is not in a vue child component
       if (
         handlesFocus.value === true
+        && props.noFocus !== true
         && childHasFocus(innerRef.value, evt.target) !== true
       ) {
         focus()