quasar 1.16.0 → 1.17.0

package/src/mixins/anchor.js

@@ -1,5 +1,6 @@
 import { clearSelection } from '../utils/selection.js'
 import { addEvt, cleanEvt, prevent, listenOpts } from '../utils/event.js'
+import { getElement } from '../utils/dom.js'
 import { isKeyCode } from '../utils/key-composition.js'
 
 export default {
@@ -145,23 +146,12 @@ export default {
         this.__setAnchorEl(this.parentEl)
       }
       else {
-        let el = this.target
-
-        if (typeof this.target === 'string') {
-          try {
-            el = document.querySelector(this.target)
-          }
-          catch (err) {
-            el = void 0
-          }
-        }
+        this.anchorEl = getElement(this.target) || void 0
 
-        if (el !== void 0 && el !== null) {
-          this.anchorEl = el._isVue === true && el.$el !== void 0 ? el.$el : el
+        if (this.anchorEl !== void 0) {
           this.__configureAnchorEl()
         }
         else {
-          this.anchorEl = void 0
           console.error(`Anchor: target "${this.target}" not found`, this)
         }
       }

package/src/mixins/btn.js

@@ -1,6 +1,7 @@
 import AlignMixin from './align.js'
 import RippleMixin from './ripple.js'
 import ListenersMixin from './listeners.js'
+import RouterLinkMixin from './router-link.js'
 import { getSizeMixin } from './size.js'
 
 const padding = {
@@ -12,10 +13,14 @@ const padding = {
   xl: 32
 }
 
+const formTypes = [ 'button', 'submit', 'reset' ]
+const mediaTypeRe = /[^\s]\/[^\s]/
+
 export default {
   mixins: [
     ListenersMixin,
     RippleMixin,
+    RouterLinkMixin,
     AlignMixin,
     getSizeMixin({
       xs: 8,
@@ -27,7 +32,10 @@ export default {
   ],
 
   props: {
-    type: String,
+    type: {
+      type: String,
+      default: 'button'
+    },
 
     to: [ Object, String ],
     replace: Boolean,
@@ -87,14 +95,6 @@ export default {
       return this.isActionable === true ? this.tabindex || 0 : -1
     },
 
-    hasRouterLink () {
-      return this.disable !== true && this.to !== void 0 && this.to !== null && this.to !== ''
-    },
-
-    isLink () {
-      return this.type === 'a' || this.hasRouterLink === true
-    },
-
     design () {
       if (this.flat === true) return 'flat'
       if (this.outline === true) return 'outline'
@@ -103,45 +103,37 @@ export default {
       return 'standard'
     },
 
-    currentLocation () {
-      if (this.hasRouterLink === true) {
-        // we protect from accessing this.$route without
-        // actually needing it so that we won't trigger
-        // unnecessary updates
-        return this.append === true
-          ? this.$router.resolve(this.to, this.$route, true)
-          : this.$router.resolve(this.to)
-      }
-    },
-
     attrs () {
-      const attrs = { tabindex: this.computedTabIndex }
+      const acc = { tabindex: this.computedTabIndex }
 
-      if (this.type !== 'a') {
-        attrs.type = this.type || 'button'
+      if (this.hasLink === true) {
+        Object.assign(acc, this.linkProps.attrs)
+      }
+      else if (formTypes.includes(this.type) === true) {
+        acc.type = this.type
       }
 
-      if (this.hasRouterLink === true) {
-        attrs.href = this.currentLocation.href
-        attrs.role = 'link'
+      if (this.hasLink === true || this.type === 'a') {
+        if (acc.href === void 0) {
+          acc.role = 'button'
+        }
+        if (mediaTypeRe.test(this.type) === true) {
+          acc.type = this.type
+        }
       }
-      else {
-        attrs.role = this.type === 'a' ? 'link' : 'button'
+      else if (this.disable === true) {
+        acc.disabled = ''
+        acc['aria-disabled'] = 'true'
       }
 
       if (this.loading === true && this.percentage !== void 0) {
-        attrs.role = 'progressbar'
-        attrs['aria-valuemin'] = 0
-        attrs['aria-valuemax'] = 100
-        attrs['aria-valuenow'] = this.percentage
-      }
-
-      if (this.disable === true) {
-        attrs.disabled = ''
-        attrs['aria-disabled'] = 'true'
+        acc.role = 'progressbar'
+        acc['aria-valuemin'] = 0
+        acc['aria-valuemax'] = 100
+        acc['aria-valuenow'] = this.percentage
       }
 
-      return attrs
+      return acc
     },
 
     classes () {

package/src/mixins/btn.json

@@ -4,40 +4,55 @@
   "props": {
     "type":{
       "type": "String",
-      "desc": "Define the button HTML DOM type",
+      "desc": "1) Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use 'href' prop and specify 'type' as a media tag",
       "default": "button",
-      "values": [
-        "a", "submit", "button", "reset"
-      ],
       "examples": [
-        "type=\"a\" href=\"http://some-site.net\" target=\"__blank\""
+        "a", "submit", "button", "reset",
+        "image/png",
+        "href=\"https://some-site.net\" target=\"_blank\""
       ],
       "category": "general"
     },
 
     "to": {
       "type": [ "String", "Object" ],
-      "desc": "Equivalent to Vue Router <router-link> 'to' property",
+      "desc": "Equivalent to Vue Router <router-link> 'to' property; Superseeded by 'href' prop if used",
       "examples": [
         "/home/dashboard",
         ":to=\"{ name: 'my-route-name' }\""
       ],
-      "category": "router"
+      "category": "navigation"
     },
 
     "replace": {
       "type": "Boolean",
-      "desc": "Equivalent to Vue Router <router-link> 'replace' property",
-      "category": "router"
+      "desc": "Equivalent to Vue Router <router-link> 'replace' property; Superseeded by 'href' prop if used",
+      "category": "navigation"
     },
 
     "append": {
       "type": "Boolean",
-      "desc": "Equivalent to Vue Router <router-link> 'append' property",
-      "category": "router",
+      "desc": "Equivalent to Vue Router <router-link> 'append' property; Superseeded by 'href' prop if used",
+      "category": "navigation",
       "addedIn": "v1.13.0"
     },
 
+    "href": {
+      "type": "String",
+      "desc": "Native <a> link href attribute; Has priority over the 'to' and 'replace' props",
+      "examples": [ "https://quasar.dev", "href=\"https://quasar.dev\" target=\"_blank\"" ],
+      "category": "navigation",
+      "addedIn": "v1.17"
+    },
+
+    "target": {
+      "type": "String",
+      "desc": "Native <a> link target attribute; Use it only with 'to' or 'href' props",
+      "examples": [ "_blank", "_self", "_parent", "_top" ],
+      "category": "navigation",
+      "addedIn": "v1.17"
+    },
+
     "label":{
       "type": [ "String", "Number" ],
       "desc": "The text that will be shown on the button",

package/src/mixins/file.js

@@ -1,4 +1,4 @@
-import { stopAndPrevent } from '../utils/event.js'
+import { stop, stopAndPrevent } from '../utils/event.js'
 import cache from '../utils/cache.js'
 
 function filterFiles (files, rejectedFiles, failedPropValidation, filterFn) {
@@ -58,10 +58,20 @@ export default {
   },
 
   methods: {
-    pickFiles (e) {
-      if (this.editable) {
-        const input = this.__getFileInput()
-        input && input.click(e)
+    pickFiles (ev) {
+      if (this.editable === true) {
+        if (ev !== Object(ev)) {
+          ev = { target: null }
+        }
+
+        if (ev.target !== null && ev.target.matches('input[type="file"]') === true) {
+          // stop propagation if it's not a real pointer event
+          ev.clientX === 0 && ev.clientY === 0 && stop(ev)
+        }
+        else {
+          const input = this.__getFileInput()
+          input && input !== ev.target && input.click(ev)
+        }
       }
     },
 
@@ -110,6 +120,18 @@ export default {
         files = [ files[0] ]
       }
 
+      files.forEach(file => {
+        file.__key = file.webkitRelativePath + file.lastModified + file.name + file.size
+      })
+
+      // Avoid duplicate files
+      const filenameMap = currentFileList.map(entry => entry.__key)
+      files = filterFiles(files, rejectedFiles, 'duplicate', file => {
+        return filenameMap.includes(file.__key) === false
+      })
+
+      if (files.length === 0) { return done() }
+
       if (this.maxTotalSize !== void 0) {
         let size = append === true
           ? currentFileList.reduce((total, file) => total + file.size, 0)

package/src/mixins/fullscreen.js

@@ -1,5 +1,7 @@
 import History from '../history.js'
 
+let fullscreenCounter = 0
+
 export default {
   props: {
     fullscreen: Boolean,
@@ -48,7 +50,12 @@ export default {
       this.container = this.$el.parentNode
       this.container.replaceChild(this.fullscreenFillerNode, this.$el)
       document.body.appendChild(this.$el)
-      document.body.classList.add('q-body--fullscreen-mixin')
+
+      fullscreenCounter++
+
+      if (fullscreenCounter === 1) {
+        document.body.classList.add('q-body--fullscreen-mixin')
+      }
 
       this.__historyFullscreen = {
         handler: this.exitFullscreen
@@ -66,11 +73,16 @@ export default {
         this.__historyFullscreen = void 0
       }
       this.container.replaceChild(this.$el, this.fullscreenFillerNode)
-      document.body.classList.remove('q-body--fullscreen-mixin')
       this.inFullscreen = false
 
-      if (this.$el.scrollIntoView !== void 0) {
-        setTimeout(() => { this.$el.scrollIntoView() })
+      fullscreenCounter = Math.max(0, fullscreenCounter - 1)
+
+      if (fullscreenCounter === 0) {
+        document.body.classList.remove('q-body--fullscreen-mixin')
+
+        if (this.$el.scrollIntoView !== void 0) {
+          setTimeout(() => { this.$el.scrollIntoView() })
+        }
       }
     }
   },

package/src/mixins/portal.js

@@ -3,6 +3,7 @@ import Vue from 'vue'
 import { isSSR } from '../plugins/Platform.js'
 import { getBodyFullscreenElement } from '../utils/dom.js'
 import { addFocusWaitFlag, removeFocusWaitFlag } from '../utils/focus-manager.js'
+import debounce from '../utils/debounce.js'
 
 export function closePortalMenus (vm, evt) {
   do {
@@ -81,6 +82,9 @@ const Portal = {
         return
       }
 
+      if (this.__portalIsActive === true) { return }
+      this.__portalIsActive = true
+
       if (this.focusObj === void 0) {
         this.focusObj = {}
       }
@@ -88,15 +92,12 @@ const Portal = {
       addFocusWaitFlag(this.focusObj)
 
       if (this.$q.fullscreen !== void 0 && this.$q.fullscreen.isCapable === true) {
-        const append = isFullscreen => {
+        const append = () => {
           if (this.__portal === void 0) {
             return
           }
 
-          const newParent = getBodyFullscreenElement(
-            isFullscreen,
-            this.$q.fullscreen.activeEl
-          )
+          const newParent = getBodyFullscreenElement(this.$q.fullscreen.activeEl)
 
           if (
             this.__portal.$el.parentElement !== newParent &&
@@ -106,12 +107,10 @@ const Portal = {
           }
         }
 
-        this.unwatchFullscreen = this.$watch('$q.fullscreen.isActive', append)
-
-        const isActive = this.$q.fullscreen.isActive
+        this.unwatchFullscreen = this.$watch('$q.fullscreen.activeEl', debounce(append, 50))
 
-        if (this.__onGlobalDialog === false || isActive === true) {
-          append(isActive)
+        if (this.__onGlobalDialog === false || this.$q.fullscreen.isActive === true) {
+          append()
         }
       }
       else if (this.__portal !== void 0 && this.__onGlobalDialog === false) {
@@ -120,6 +119,7 @@ const Portal = {
     },
 
     __hidePortal () {
+      this.__portalIsActive = false
       removeFocusWaitFlag(this.focusObj)
 
       if (this.__portal !== void 0) {

package/src/mixins/router-link.js

@@ -1,31 +1,105 @@
-export const routerLinkProps = {
+const routerLinkProps = {
+  // router-link
   to: [String, Object],
   exact: Boolean,
   append: Boolean,
   replace: Boolean,
-  activeClass: String,
-  exactActiveClass: String,
+  activeClass: {
+    type: String,
+    default: 'q-router-link--active'
+  },
+  exactActiveClass: {
+    type: String,
+    default: 'q-router-link--exact-active'
+  },
+
+  // regular <a> link
+  href: String,
+  target: String,
+
+  // state
   disable: Boolean
 }
 
-export const RouterLinkMixin = {
+// external props: type, tag
+// external: fallbackTag
+
+export default {
   props: routerLinkProps,
 
   computed: {
+    hasHrefLink () {
+      return this.disable !== true && this.href !== void 0
+    },
+
+    hasRouterLinkProps () {
+      return this.$router !== void 0 &&
+        this.disable !== true &&
+        this.hasHrefLink !== true &&
+        this.to !== void 0 && this.to !== null && this.to !== ''
+    },
+
+    linkRoute () {
+      if (this.hasRouterLinkProps === true) {
+        // we protect from accessing this.$route without
+        // actually needing it so that we won't trigger
+        // unnecessary updates
+
+        try {
+          return this.append === true
+            ? this.$router.resolve(this.to, this.$route, true)
+            : this.$router.resolve(this.to)
+        }
+        catch (err) {}
+      }
+
+      return null
+    },
+
     hasRouterLink () {
-      return this.disable !== true && this.to !== void 0 && this.to !== null && this.to !== ''
+      return this.linkRoute !== null
+    },
+
+    hasLink () {
+      return this.hasHrefLink === true || this.hasRouterLink === true
     },
 
-    routerLinkProps () {
-      return {
-        to: this.to,
-        exact: this.exact,
-        append: this.append,
-        replace: this.replace,
-        activeClass: this.activeClass || 'q-router-link--active',
-        exactActiveClass: this.exactActiveClass || 'q-router-link--exact-active',
-        event: this.disable === true ? [] : void 0
+    linkTag () {
+      if (this.hasRouterLink === true) {
+        return 'router-link'
       }
+
+      return this.type === 'a' || this.hasLink === true
+        ? 'a'
+        : (this.tag || this.fallbackTag || 'div')
+    },
+
+    linkProps () {
+      return this.hasHrefLink === true
+        ? {
+          attrs: {
+            href: this.href,
+            target: this.target
+          }
+        }
+        : (
+          this.hasRouterLink === true
+            ? {
+              props: {
+                to: this.to,
+                exact: this.exact,
+                append: this.append,
+                replace: this.replace,
+                activeClass: this.activeClass,
+                exactActiveClass: this.exactActiveClass
+              },
+              attrs: {
+                href: this.linkRoute.href,
+                target: this.target
+              }
+            }
+            : {}
+        )
     }
   }
 }

package/src/mixins/router-link.json

@@ -2,44 +2,60 @@
   "props": {
     "to": {
       "type": [ "String", "Object" ],
-      "desc": "Equivalent to Vue Router <router-link> 'to' property",
+      "desc": "Equivalent to Vue Router <router-link> 'to' property; Superseeded by 'href' prop if used",
       "examples": [
         "/home/dashboard",
         ":to=\"{ name: 'my-route-name' }\""
       ],
-      "category": "behavior"
+      "category": "navigation"
     },
 
     "exact": {
       "type": "Boolean",
-      "desc": "Equivalent to Vue Router <router-link> 'exact' property",
-      "category": "behavior"
+      "desc": "Equivalent to Vue Router <router-link> 'exact' property; Superseeded by 'href' prop if used",
+      "category": "navigation"
     },
 
     "append": {
       "type": "Boolean",
-      "desc": "Equivalent to Vue Router <router-link> 'append' property",
-      "category": "behavior"
+      "desc": "Equivalent to Vue Router <router-link> 'append' property; Superseeded by 'href' prop if used",
+      "category": "navigation"
     },
 
     "replace": {
       "type": "Boolean",
-      "desc": "Equivalent to Vue Router <router-link> 'replace' property",
-      "category": "behavior"
+      "desc": "Equivalent to Vue Router <router-link> 'replace' property; Superseeded by 'href' prop if used",
+      "category": "navigation"
     },
 
     "active-class": {
       "type": "String",
       "desc": "Equivalent to Vue Router <router-link> 'active-class' property",
       "examples": [ "my-active-class" ],
-      "category": "behavior"
+      "category": "navigation"
     },
 
     "exact-active-class": {
       "type": "String",
       "desc": "Equivalent to Vue Router <router-link> 'active-class' property",
       "examples": [ "my-exact-active-class" ],
-      "category": "behavior"
+      "category": "navigation"
+    },
+
+    "href": {
+      "type": "String",
+      "desc": "Native <a> link href attribute; Has priority over the 'to'/'exact'/'replace' props",
+      "examples": [ "http://quasar.dev" ],
+      "category": "navigation",
+      "addedIn": "v1.17"
+    },
+
+    "target": {
+      "type": "String",
+      "desc": "Native <a> link target attribute; Use it only along with 'href' prop; Has priority over the 'to'/'exact'/'replace' props",
+      "examples": [ "_blank", "_self", "_parent", "_top" ],
+      "category": "navigation",
+      "addedIn": "v1.17"
     },
 
     "disable": {

package/src/mixins/validate.js

@@ -1,4 +1,5 @@
 import { testPattern } from '../utils/patterns.js'
+import debounce from '../utils/debounce.js'
 
 const lazyRulesValues = [ true, false, 'ondemand' ]
 
@@ -35,7 +36,12 @@ export default {
     },
 
     disable (val) {
-      val === true && this.resetValidation()
+      if (val === true) {
+        this.__resetValidation()
+      }
+      else {
+        this.__validateIfNeeded(true)
+      }
     },
 
     reactiveRules: {
@@ -56,15 +62,16 @@ export default {
     },
 
     focused (focused) {
-      if (this.lazyRules !== 'ondemand') {
-        if (focused === true) {
-          if (this.isDirty === null) {
-            this.isDirty = false
-          }
+      if (focused === true) {
+        if (this.isDirty === null) {
+          this.isDirty = false
         }
-        else if (this.isDirty === false && this.hasRules === true) {
-          this.isDirty = true
-          this.validate()
+      }
+      else if (this.isDirty === false) {
+        this.isDirty = true
+
+        if (this.hasRules === true && this.lazyRules !== 'ondemand') {
+          this.debouncedValidate()
         }
       }
     },
@@ -77,7 +84,8 @@ export default {
 
   computed: {
     hasRules () {
-      return this.rules !== void 0 &&
+      return this.disable !== true &&
+        this.rules !== void 0 &&
         this.rules !== null &&
         this.rules.length > 0
     },
@@ -93,21 +101,23 @@ export default {
     }
   },
 
+  created () {
+    this.debouncedValidate = debounce(this.validate, 0)
+  },
+
   mounted () {
     this.validateIndex = 0
   },
 
   beforeDestroy () {
     this.unwatchRules !== void 0 && this.unwatchRules()
+    this.debouncedValidate.cancel()
   },
 
   methods: {
     resetValidation () {
-      this.validateIndex++
-      this.innerLoading = false
       this.isDirty = null
-      this.innerError = false
-      this.innerErrorMessage = void 0
+      this.__resetValidation()
     },
 
     /*
@@ -203,13 +213,21 @@ export default {
       )
     },
 
+    __resetValidation () {
+      this.debouncedValidate.cancel()
+      this.validateIndex++
+      this.innerLoading = false
+      this.innerError = false
+      this.innerErrorMessage = void 0
+    },
+
     __validateIfNeeded (changedRules) {
       if (
         this.hasRules === true &&
         this.lazyRules !== 'ondemand' &&
         (this.isDirty === true || (this.lazyRules !== true && changedRules !== true))
       ) {
-        this.validate()
+        this.debouncedValidate()
       }
     }
   }