quasar 1.16.2 → 1.17.2

package/src/components/table/QTable.styl

@@ -51,6 +51,9 @@
   &__container
     position: relative
 
+    &.fullscreen
+      max-height: 100%
+
     > div:first-child
       border-top-left-radius: inherit
       border-top-right-radius: inherit

package/src/components/tabs/QRouteTab.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 
 import QTab from './QTab.js'
-import { RouterLinkMixin } from '../../mixins/router-link.js'
+import RouterLinkMixin from '../../mixins/router-link.js'
 import { isSameRoute, isIncludedRoute } from '../../utils/router.js'
 import { stopAndPrevent, noop } from '../../utils/event.js'
 
@@ -10,10 +10,6 @@ export default Vue.extend({
 
   mixins: [ QTab, RouterLinkMixin ],
 
-  props: {
-    to: { required: true }
-  },
-
   inject: {
     __activateRoute: {},
     __recalculateScroll: {}
@@ -28,8 +24,8 @@ export default Vue.extend({
   computed: {
     routerTabLinkProps () {
       return {
-        ...this.routerLinkProps,
-        event: []
+        ...this.linkProps.props,
+        custom: true
       }
     }
   },
@@ -49,14 +45,14 @@ export default Vue.extend({
           // handle this by its own
           this.__checkActivation(true)
         }
-        else {
+        else if (this.hasRouterLink === true) {
           // we use programatic navigation instead of letting vue-router handle it
           // so we can check for activation when the navigation is complete
           e !== void 0 && stopAndPrevent(e)
 
           const go = (to = this.to, append = this.append, replace = this.replace) => {
             const { route } = this.$router.resolve(to, this.$route, append)
-            const checkFn = to === this.to && append === this.append && replace === this.replace
+            const checkFn = to === this.to && append === this.append
               ? this.__checkActivation
               : noop
 
@@ -82,14 +78,18 @@ export default Vue.extend({
       }
 
       if (keyboard === true) {
-        this.$el.focus(e)
+        this.$el.focus({ preventScroll: true })
       }
-      else {
-        this.$refs.blurTarget !== void 0 && this.$refs.blurTarget.focus(e)
+      else if (this.$refs.blurTarget !== void 0) {
+        this.$refs.blurTarget.focus({ preventScroll: true })
       }
     },
 
     __checkActivation (selected = false) {
+      if (this.hasRouterLink !== true) {
+        return
+      }
+
       const
         current = this.$route,
         { href, location, route } = this.$router.resolve(this.to, current, this.append),
@@ -139,6 +139,6 @@ export default Vue.extend({
   },
 
   render (h) {
-    return this.__renderTab(h, 'router-link', this.routerTabLinkProps)
+    return this.__renderTab(h, this.linkTag)
   }
 })

package/src/components/tabs/QRouteTab.json

@@ -5,13 +5,6 @@
 
   "mixins": [ "components/tabs/QTab", "mixins/router-link" ],
 
-  "props": {
-    "to": {
-      "required": true,
-      "category": "general"
-    }
-  },
-
   "events": {
     "click": {
       "desc": "Emitted when component is clicked (activated)",

package/src/components/tabs/QTab.js

@@ -5,9 +5,9 @@ import QIcon from '../icon/QIcon.js'
 import RippleMixin from '../../mixins/ripple.js'
 import ListenersMixin from '../../mixins/listeners.js'
 
-import { stop } from '../../utils/event.js'
+import { stop, prevent, stopAndPrevent } from '../../utils/event.js'
 import { mergeSlot } from '../../utils/slot.js'
-import { isKeyCode } from '../../utils/key-composition.js'
+import { shouldIgnoreKey } from '../../utils/key-composition.js'
 
 let uid = 0
 
@@ -23,7 +23,8 @@ export default Vue.extend({
       }
     },
     __activateTab: {},
-    __recalculateScroll: {}
+    __recalculateScroll: {},
+    __onKbdNavigate: {}
   },
 
   props: {
@@ -53,9 +54,16 @@ export default Vue.extend({
 
     classes () {
       return {
-        [`q-tab--${this.isActive ? '' : 'in'}active`]: true,
-        [`text-${this.tabs.activeColor}`]: this.isActive && this.tabs.activeColor,
-        [`bg-${this.tabs.activeBgColor}`]: this.isActive && this.tabs.activeBgColor,
+        ...(
+          this.isActive === true
+            ? {
+              'q-tab--active': true,
+              [this.tabs.activeClass]: this.tabs.activeClass,
+              [`text-${this.tabs.activeColor}`]: this.tabs.activeColor,
+              [`bg-${this.tabs.activeBgColor}`]: this.tabs.activeBgColor
+            }
+            : { 'q-tab--inactive': true }
+        ),
         'q-tab--full': this.icon && this.label && !this.tabs.inlineLabel,
         'q-tab--no-caps': this.noCaps === true || this.tabs.noCaps === true,
         'q-focusable q-hoverable cursor-pointer': !this.disable,
@@ -69,7 +77,18 @@ export default Vue.extend({
     },
 
     computedTabIndex () {
-      return this.disable === true || this.isActive === true ? -1 : this.tabindex || 0
+      return this.disable === true || this.tabs.hasFocus === true
+        ? -1
+        : this.tabindex || 0
+    },
+
+    computedRipple () {
+      return this.ripple === false
+        ? false
+        : Object.assign(
+          { keyCodes: [13, 32], early: true },
+          this.ripple === true ? {} : this.ripple
+        )
     },
 
     onEvents () {
@@ -77,7 +96,7 @@ export default Vue.extend({
         input: stop,
         ...this.qListeners,
         click: this.__activate,
-        keyup: this.__onKeyup
+        keydown: this.__onKeydown
       }
     },
 
@@ -85,7 +104,7 @@ export default Vue.extend({
       const attrs = {
         tabindex: this.computedTabIndex,
         role: 'tab',
-        'aria-selected': this.isActive
+        'aria-selected': this.isActive === true ? 'true' : 'false'
       }
 
       if (this.disable === true) {
@@ -98,7 +117,9 @@ export default Vue.extend({
 
   methods: {
     __activate (e, keyboard) {
-      keyboard !== true && this.$refs.blurTarget !== void 0 && this.$refs.blurTarget.focus()
+      if (keyboard !== true && this.$refs.blurTarget !== void 0) {
+        this.$refs.blurTarget.focus({ preventScroll: true })
+      }
 
       if (this.disable !== true) {
         this.qListeners.click !== void 0 && this.$emit('click', e)
@@ -106,8 +127,18 @@ export default Vue.extend({
       }
     },
 
-    __onKeyup (e) {
-      isKeyCode(e, 13) === true && this.__activate(e, true)
+    __onKeydown (e) {
+      if (shouldIgnoreKey(e)) {
+        return
+      }
+
+      if ([ 13, 32 ].indexOf(e.keyCode) !== -1) {
+        this.__activate(e, true)
+        prevent(e)
+      }
+      else if (e.keyCode >= 35 && e.keyCode <= 40) {
+        this.__onKbdNavigate(e.keyCode, this.$el) === true && stopAndPrevent(e)
+      }
     },
 
     __getContent (h) {
@@ -167,21 +198,41 @@ export default Vue.extend({
       return node
     },
 
-    __renderTab (h, tag, props) {
+    __renderTab (h, tag) {
       const data = {
-        staticClass: 'q-tab relative-position self-stretch flex flex-center text-center',
+        staticClass: 'q-tab relative-position self-stretch flex flex-center text-center no-outline',
         class: this.classes,
         attrs: this.attrs,
-        directives: this.ripple !== false && this.disable === true ? null : [
-          { name: 'ripple', value: this.ripple }
-        ],
-        [ tag === 'div' ? 'on' : 'nativeOn' ]: this.onEvents
+        directives: this.ripple === false || this.disable === true ? null : [
+          { name: 'ripple', value: this.computedRipple }
+        ]
       }
 
-      if (props !== void 0) {
-        data.props = props
+      if (this.hasRouterLink === true) {
+        return h(tag, {
+          ...data,
+          nativeOn: this.onEvents,
+          props: this.routerTabLinkProps,
+          scopedSlots: {
+            default: ({ href, isActive, isExactActive }) => h('a', {
+              class: {
+                [this.activeClass]: isActive,
+                [this.exactActiveClass]: isExactActive
+              },
+              attrs: {
+                ...this.linkProps.attrs,
+                href
+              }
+            }, this.__getContent(h))
+          }
+        })
       }
 
+      if (this.hasLink === true) {
+        Object.assign(data.attrs, this.linkProps.attrs)
+        data.props = this.linkProps.props
+      }
+      data.on = this.onEvents
       return h(tag, data, this.__getContent(h))
     }
   },