quasar 2.4.10 → 2.5.0

package/src/components/editor/__tests__/QEditor.spec.js

@@ -0,0 +1,195 @@
+describe('Editor API', () => {
+  describe('Props', () => {
+    describe('Category: behavior', () => {
+      describe('(prop): paragraph-tag', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: content', () => {
+      describe('(prop): placeholder', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: model', () => {
+      describe('(prop): model-value', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: state', () => {
+      describe('(prop): readonly', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): disable', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: style', () => {
+      describe('(prop): square', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): flat', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): dense', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): dark', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): min-height', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): max-height', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): height', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): content-style', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): content-class', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: toolbar', () => {
+      describe('(prop): definitions', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): fonts', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): toolbar', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): toolbar-color', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): toolbar-text-color', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): toolbar-toggle-color', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): toolbar-bg', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: toolbar|style', () => {
+      describe('(prop): toolbar-outline', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): toolbar-push', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): toolbar-rounded', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+  })
+
+  describe('Events', () => {
+    describe('(event): update:model-value', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+
+  describe('Methods', () => {
+    describe('(method): runCmd', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(method): refreshToolbar', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(method): focus', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(method): getContentEl', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+})

package/src/components/expansion-item/QExpansionItem.json

@@ -26,7 +26,8 @@
     },
 
     "expand-icon-class": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "Apply custom class(es) to the expand icon item section",
       "examples": [ "text-purple" ],
       "category": "style"
@@ -134,7 +135,8 @@
     },
 
     "header-style": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Apply custom style to the header",
       "examples": [
         "background: '#ff0000'",
@@ -144,7 +146,8 @@
     },
 
     "header-class": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "Apply custom class(es) to the header",
       "examples": [
         "my-custom-class",

package/src/components/fab/use-fab.json

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

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

@@ -1,4 +1,4 @@
-import { h, ref, onMounted, getCurrentInstance, nextTick, provide } from 'vue'
+import { h, ref, onActivated, onDeactivated, onMounted, getCurrentInstance, nextTick, provide } from 'vue'
 
 import { createComponent } from '../../utils/private/create.js'
 import { stopAndPrevent } from '../../utils/event.js'
@@ -144,7 +144,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 })
       })
     }
 
@@ -161,6 +161,16 @@ export default createComponent({
       }
     })
 
+    let shouldActivate = false
+
+    onDeactivated(() => {
+      shouldActivate = true
+    })
+
+    onActivated(() => {
+      shouldActivate === true && props.autofocus === true && focus()
+    })
+
     onMounted(() => {
       props.autofocus === true && focus()
     })

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/infinite-scroll/QInfiniteScroll.js

@@ -41,7 +41,6 @@ export default createComponent({
     const rootRef = ref(null)
 
     let index = props.initialIndex || 0
-    let scrollPos = false
     let localScrollTarget, poll
 
     const classes = computed(() =>
@@ -180,8 +179,10 @@ export default createComponent({
     watch(() => props.scrollTarget, updateScrollTarget)
     watch(() => props.debounce, setDebounce)
 
+    let scrollPos = false
+
     onActivated(() => {
-      if (localScrollTarget && scrollPos !== false) {
+      if (scrollPos !== false && localScrollTarget) {
         setVerticalScrollPosition(localScrollTarget, scrollPos)
       }
     })

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()