quasar 1.16.2 → 1.17.2

package/src/components/tabs/QTabs.js

@@ -9,6 +9,7 @@ import ListenersMixin from '../../mixins/listeners.js'
 import { stop, noop } from '../../utils/event.js'
 import { slot } from '../../utils/slot.js'
 import cache from '../../utils/cache.js'
+import { rtlHasScrollBug } from '../../utils/scroll.js'
 
 function getIndicatorClass (color, top, vertical) {
   const pos = vertical === true
@@ -53,7 +54,8 @@ export default Vue.extend({
       tabs: this.tabs,
       __recalculateScroll: this.__recalculateScroll,
       __activateTab: this.__activateTab,
-      __activateRoute: this.__activateRoute
+      __activateRoute: this.__activateRoute,
+      __onKbdNavigate: this.__onKbdNavigate
     }
   },
 
@@ -74,6 +76,7 @@ export default Vue.extend({
     shrink: Boolean,
     stretch: Boolean,
 
+    activeClass: String,
     activeColor: String,
     activeBgColor: String,
     indicatorColor: String,
@@ -98,6 +101,8 @@ export default Vue.extend({
     return {
       tabs: {
         current: this.value,
+        hasFocus: false,
+        activeClass: this.activeClass,
         activeColor: this.activeColor,
         activeBgColor: this.activeBgColor,
         indicatorClass: getIndicatorClass(
@@ -110,8 +115,8 @@ export default Vue.extend({
         noCaps: this.noCaps
       },
       scrollable: false,
-      leftArrow: true,
-      rightArrow: false,
+      startArrow: true,
+      endArrow: false,
       justify: false
     }
   },
@@ -121,6 +126,10 @@ export default Vue.extend({
       this.__activateTab(name, true, true)
     },
 
+    activeClass (v) {
+      this.tabs.activeClass = v
+    },
+
     activeColor (v) {
       this.tabs.activeColor = v
     },
@@ -154,7 +163,7 @@ export default Vue.extend({
     },
 
     outsideArrows () {
-      this.$nextTick(this.__recalculateScroll())
+      this.__recalculateScroll()
     },
 
     arrowsEnabled (v) {
@@ -162,7 +171,11 @@ export default Vue.extend({
         ? this.__updateArrowsFn
         : noop
 
-      this.$nextTick(this.__recalculateScroll())
+      this.__recalculateScroll()
+    },
+
+    isRTL () {
+      this.__updateArrows()
     }
   },
 
@@ -171,6 +184,17 @@ export default Vue.extend({
       return this.$q.platform.is.desktop === true || this.mobileArrows === true
     },
 
+    arrowIcons () {
+      const sides = this.isRTL === true
+        ? [ 'end', 'start' ]
+        : [ 'start', 'end' ]
+
+      return {
+        [sides[0]]: this.leftIcon || (this.vertical === true ? this.$q.iconSet.tabs.up : this.$q.iconSet.tabs.left),
+        [sides[1]]: this.rightIcon || (this.vertical === true ? this.$q.iconSet.tabs.down : this.$q.iconSet.tabs.right)
+      }
+    },
+
     alignClass () {
       const align = this.scrollable === true
         ? 'left'
@@ -200,15 +224,69 @@ export default Vue.extend({
         : { container: 'width', content: 'offsetWidth', scroll: 'scrollWidth' }
     },
 
+    isRTL () {
+      return this.vertical !== true && this.$q.lang.rtl === true
+    },
+
+    __getScrollPosition () {
+      return this.vertical === true
+        ? el => el.scrollTop
+        : (
+          this.$q.lang.rtl !== true
+            ? el => el.scrollLeft
+            : (
+              this.rtlHasScrollBug === true
+                ? el => el.scrollWidth - el.clientWidth - el.scrollLeft
+                : el => 1 - el.scrollLeft
+            )
+        )
+    },
+
+    __setScrollPosition () {
+      return this.vertical === true
+        ? (el, value) => { el.scrollTop = value }
+        : (
+          this.$q.lang.rtl !== true
+            ? (el, value) => { el.scrollLeft = value }
+            : (
+              this.rtlHasScrollBug === true
+                ? (el, value) => { el.scrollLeft = el.scrollWidth - el.clientWidth - value }
+                : (el, value) => { el.scrollLeft = 1 - value }
+            )
+        )
+    },
+
+    __getScrollOffset () {
+      return this.vertical === true
+        ? el => el.offsetTop
+        : (
+          this.$q.lang.rtl !== true || this.rtlHasScrollBug === true
+            ? el => el.offsetLeft
+            : el => el.offsetParent.offsetWidth - el.offsetLeft - el.clientWidth
+        )
+    },
+
     onEvents () {
       return {
         input: stop,
-        ...this.qListeners
+        ...this.qListeners,
+        focusin: this.__onFocusin,
+        focusout: this.__onFocusout
       }
     }
   },
 
   methods: {
+    __onFocusin (e) {
+      this.tabs.hasFocus = true
+      this.qListeners.focusin !== void 0 && this.$emit('focusin', e)
+    },
+
+    __onFocusout (e) {
+      this.tabs.hasFocus = false
+      this.qListeners.focusout !== void 0 && this.$emit('focusout', e)
+    },
+
     __activateTab (name, setCurrent, skipEmit) {
       if (this.tabs.current !== name) {
         skipEmit !== true && this.$emit('input', name)
@@ -270,7 +348,7 @@ export default Vue.extend({
           this.$refs.content[this.domProps.scroll],
           Array.prototype.reduce.call(
             this.$refs.content.children,
-            (acc, el) => acc + el[this.domProps.content],
+            (acc, el) => acc + (el[this.domProps.content] || 0),
             0
           )
         ),
@@ -329,40 +407,32 @@ export default Vue.extend({
       }
 
       if (newTab && this.scrollable === true) {
-        const
-          { left, width, top, height } = this.$refs.content.getBoundingClientRect(),
-          newPos = newTab.$el.getBoundingClientRect()
-
-        let offset = this.vertical === true ? newPos.top - top : newPos.left - left
-
-        if (offset < 0) {
-          this.$refs.content[this.vertical === true ? 'scrollTop' : 'scrollLeft'] += Math.floor(offset)
-          this.__updateArrows()
-          return
-        }
-
-        offset += this.vertical === true ? newPos.height - height : newPos.width - width
-        if (offset > 0) {
-          this.$refs.content[this.vertical === true ? 'scrollTop' : 'scrollLeft'] += Math.ceil(offset)
-          this.__updateArrows()
-        }
+        this.__scrollToTab(newTab.$el, void 0, true)
+      }
+      else {
+        this.__updateArrows()
       }
     },
 
     __updateArrowsFn () {
-      const
-        content = this.$refs.content,
-        rect = content.getBoundingClientRect(),
-        pos = this.vertical === true ? content.scrollTop : content.scrollLeft
+      const { content } = this.$refs
+
+      if (content !== void 0) {
+        const
+          rect = content.getBoundingClientRect(),
+          pos = this.__getScrollPosition(content)
 
-      this.leftArrow = pos > 0
-      this.rightArrow = this.vertical === true
-        ? Math.ceil(pos + rect.height) < content.scrollHeight
-        : Math.ceil(pos + rect.width) < content.scrollWidth
+        this.startArrow = pos > (this.isRTL === true ? 1 : 0)
+        this.endArrow = this.vertical === true
+          ? Math.ceil(pos + rect.height) < content.scrollHeight
+          : Math.ceil(pos + rect.width) < content.scrollWidth
+      }
     },
 
-    __animScrollTo (value) {
+    __animScrollTo (value, onEnd) {
       this.__stopAnimScroll()
+
+      this.__onAnimScrollEnd = onEnd
       this.__scrollTowards(value)
 
       this.scrollTimer = setInterval(() => {
@@ -377,26 +447,32 @@ export default Vue.extend({
     },
 
     __scrollToEnd () {
-      this.__animScrollTo(9999)
+      this.__animScrollTo(Number.MAX_SAFE_INTEGER)
     },
 
     __stopAnimScroll () {
       clearInterval(this.scrollTimer)
+
+      if (this.__onAnimScrollEnd !== void 0) {
+        this.__onAnimScrollEnd()
+        this.__onAnimScrollEnd = void 0
+      }
     },
 
     __scrollTowards (value) {
       const content = this.$refs.content
-      let
-        pos = this.vertical === true ? content.scrollTop : content.scrollLeft,
-        done = false
+      const max = this.vertical === true ? content.scrollHeight - content.offsetHeight : content.scrollWidth - content.offsetWidth
+
+      let pos = this.__getScrollPosition(content)
+      let done = false
+
+      value = Math.max(0, Math.min(max, value))
+
       const direction = value < pos ? -1 : 1
 
       pos += direction * 5
-      if (pos < 0) {
-        done = true
-        pos = 0
-      }
-      else if (
+
+      if (
         (direction === -1 && pos <= value) ||
         (direction === 1 && pos >= value)
       ) {
@@ -404,9 +480,113 @@ export default Vue.extend({
         pos = value
       }
 
-      content[this.vertical === true ? 'scrollTop' : 'scrollLeft'] = pos
+      this.__setScrollPosition(content, pos)
       this.__updateArrows()
+
       return done
+    },
+
+    __scrollToTab (tab, alignEnd, skipFocus) {
+      if (this.$refs.content === void 0) {
+        return
+      }
+
+      const content = this.$refs.content
+      const startContent = this.__getScrollPosition(content)
+      const sizeContent = this.vertical === true ? content.offsetHeight : content.offsetWidth
+      const sizeScroll = this.vertical === true ? content.scrollHeight : content.scrollWidth
+
+      const startTab = this.__getScrollOffset(tab)
+      const endTab = startTab + (this.vertical === true ? tab.offsetHeight : tab.offsetWidth)
+
+      const startsBefore = startTab < startContent
+      const endsAfter = endTab > startContent + sizeContent
+
+      if (startsBefore !== true && endsAfter !== true) {
+        alignEnd = void 0
+      }
+      else if (alignEnd === void 0) {
+        if (endTab >= sizeScroll - 1) {
+          alignEnd = true
+        }
+        else if (startsBefore === true || (endsAfter === true && startTab < endTab - sizeContent)) {
+          alignEnd = false
+        }
+        else if (startsBefore !== endsAfter) {
+          alignEnd = endsAfter
+        }
+      }
+
+      if (alignEnd !== void 0) {
+        this.__animScrollTo(
+          alignEnd === true ? (endTab >= sizeScroll - 1 ? sizeScroll : endTab - sizeContent) : (startTab <= 1 ? 0 : startTab),
+          skipFocus !== true
+            ? () => {
+              setTimeout(() => {
+                tab && tab.focus()
+              })
+            }
+            : void 0
+        )
+      }
+      else if (skipFocus !== true) {
+        tab.focus()
+      }
+    },
+
+    __onKbdNavigate (keyCode, fromEl) {
+      const matchTab = el => el === fromEl || (el.matches && el.matches('.q-tab.q-focusable') === true)
+      const tabs = Array.prototype.filter.call(this.$refs.content.children, matchTab)
+      const tabsLength = tabs.length
+
+      if (tabsLength === 0) {
+        return
+      }
+
+      if (keyCode === 36) { // Home
+        if (tabs[0].contains(document.activeElement) === true) {
+          return false
+        }
+
+        this.__scrollToTab(tabs[0], false)
+        this.__recalculateScroll()
+
+        return true
+      }
+      if (keyCode === 35) { // End
+        if (tabs[tabsLength - 1].contains(document.activeElement) === true) {
+          return false
+        }
+
+        this.__scrollToTab(tabs[tabsLength - 1], true)
+        this.__recalculateScroll()
+
+        return true
+      }
+
+      const dirPrev = (this.vertical === true && keyCode === 38 /* ArrowUp */) ||
+        (this.vertical !== true && keyCode === 37 /* ArrowLeft */)
+      const dirNext = (this.vertical === true && keyCode === 40 /* ArrowDown */) ||
+        (this.vertical !== true && keyCode === 39 /* ArrowRight */)
+      const dir = dirPrev === true ? -1 : (dirNext === true ? 1 : void 0)
+
+      if (dir !== void 0) {
+        const rtlDir = this.isRTL === true ? -1 : 1
+        const index = tabs.indexOf(fromEl) + dir * rtlDir
+
+        if (
+          index < 0 ||
+          index >= tabsLength ||
+          tabs[index].contains(document.activeElement) === true
+        ) {
+          return false
+        }
+
+        this.__scrollToTab(tabs[index], dir === rtlDir)
+        this.__recalculateScroll()
+
+        return true
+      }
     }
   },
 
@@ -416,11 +596,16 @@ export default Vue.extend({
 
   created () {
     this.buffer = []
+
     this.__updateArrows = this.arrowsEnabled === true
       ? this.__updateArrowsFn
       : noop
   },
 
+  mounted () {
+    this.rtlHasScrollBug = rtlHasScrollBug()
+  },
+
   beforeDestroy () {
     clearTimeout(this.bufferTimer)
     clearTimeout(this.animateTimer)
@@ -434,7 +619,7 @@ export default Vue.extend({
 
       h('div', {
         ref: 'content',
-        staticClass: 'q-tabs__content row no-wrap items-center self-stretch hide-scrollbar',
+        staticClass: 'q-tabs__content row no-wrap items-center self-stretch hide-scrollbar relative-position',
         class: this.innerClass,
         on: this.arrowsEnabled === true ? cache(this, 'scroll', { scroll: this.__updateArrowsFn }) : void 0
       }, slot(this, 'default'))
@@ -442,10 +627,10 @@ export default Vue.extend({
 
     this.arrowsEnabled === true && child.push(
       h(QIcon, {
-        staticClass: 'q-tabs__arrow q-tabs__arrow--left absolute q-tab__icon',
-        class: this.leftArrow === true ? '' : 'q-tabs__arrow--faded',
-        props: { name: this.leftIcon || (this.vertical === true ? this.$q.iconSet.tabs.up : this.$q.iconSet.tabs.left) },
-        on: cache(this, 'onL', {
+        staticClass: 'q-tabs__arrow q-tabs__arrow--start absolute q-tab__icon',
+        class: this.startArrow === true ? '' : 'q-tabs__arrow--faded',
+        props: { name: this.arrowIcons.start },
+        on: cache(this, 'onS', {
           mousedown: this.__scrollToStart,
           touchstart: this.__scrollToStart,
           mouseup: this.__stopAnimScroll,
@@ -455,10 +640,10 @@ export default Vue.extend({
       }),
 
       h(QIcon, {
-        staticClass: 'q-tabs__arrow q-tabs__arrow--right absolute q-tab__icon',
-        class: this.rightArrow === true ? '' : 'q-tabs__arrow--faded',
-        props: { name: this.rightIcon || (this.vertical === true ? this.$q.iconSet.tabs.down : this.$q.iconSet.tabs.right) },
-        on: cache(this, 'onR', {
+        staticClass: 'q-tabs__arrow q-tabs__arrow--end absolute q-tab__icon',
+        class: this.endArrow === true ? '' : 'q-tabs__arrow--faded',
+        props: { name: this.arrowIcons.end },
+        on: cache(this, 'onE', {
           mousedown: this.__scrollToEnd,
           touchstart: this.__scrollToEnd,
           mouseup: this.__stopAnimScroll,

package/src/components/tabs/QTabs.json

@@ -52,6 +52,14 @@
       "category": "content|behavior"
     },
 
+    "active-class": {
+      "type": "String",
+      "desc": "The class to be set on the active tab",
+      "examples": [ "my-active-class" ],
+      "category": "style",
+      "addedIn": "v1.17"
+    },
+
     "active-color": {
       "extends": "color",
       "desc": "The color to be attributed to the text of the active tab",

package/src/components/tabs/QTabs.sass

@@ -127,14 +127,14 @@
   &--horizontal .q-tabs__arrow
     height: 100%
 
-    &--left
+    &--start
       top: 0
-      left: 0 #{"/* rtl:ignore */"}
+      left: 0
       bottom: 0
 
-    &--right
+    &--end
       top: 0
-      right: 0 #{"/* rtl:ignore */"}
+      right: 0
       bottom: 0
 
   &--vertical
@@ -150,12 +150,12 @@
       height: 36px
       text-align: center
 
-      &--left
+      &--start
         top: 0
         left: 0
         right: 0
 
-      &--right
+      &--end
         left: 0
         right: 0
         bottom: 0

package/src/components/tabs/QTabs.styl

@@ -127,14 +127,14 @@
   &--horizontal .q-tabs__arrow
     height: 100%
 
-    &--left
+    &--start
       top: 0
-      left: 0 /* rtl:ignore */
+      left: 0
       bottom: 0
 
-    &--right
+    &--end
       top: 0
-      right: 0 /* rtl:ignore */
+      right: 0
       bottom: 0
 
   &--vertical
@@ -150,12 +150,12 @@
       height: 36px
       text-align: center
 
-      &--left
+      &--start
         top: 0
         left: 0
         right: 0
 
-      &--right
+      &--end
         left: 0
         right: 0
         bottom: 0

package/src/components/time/QTime.js

@@ -286,10 +286,14 @@ export default Vue.extend({
 
   methods: {
     setNow () {
-      this.__updateValue({
+      const date = {
         ...this.__getCurrentDate(),
         ...this.__getCurrentTime()
-      })
+      }
+
+      this.__updateValue(date)
+      Object.assign(this.innerModel, date) // reset any pending changes to innerModel
+
       this.view = 'Hour'
     },
 

package/src/components/timeline/QTimeline.sass

@@ -20,7 +20,7 @@
   &__subtitle
     font-size: 12px
     margin-bottom: 8px
-    opacity: .4
+    opacity: .6
     text-transform: uppercase
     letter-spacing: 1px
     font-weight: 700
@@ -240,4 +240,3 @@
 
       &__subtitle, &__content
         width: 50%
-

package/src/components/timeline/QTimeline.styl

@@ -20,7 +20,7 @@
   &__subtitle
     font-size: 12px
     margin-bottom: 8px
-    opacity: .4
+    opacity: .6
     text-transform: uppercase
     letter-spacing: 1px
     font-weight: 700
@@ -240,4 +240,3 @@
 
       &__subtitle, &__content
         width: 50%
-

package/src/components/timeline/QTimelineEntry.json

@@ -39,7 +39,7 @@
       "desc": "URL to the avatar image; Icon takes precedence if used, so it replaces avatar",
       "transformAssetUrls": true,
       "examples": [
-        "(statics folder) src=\"statics/img/my-bg.png\"",
+        "(public folder) src=\"img/my-bg.png\"",
         "(assets folder) src=\"~assets/my-img.png\"",
         "(relative path format) :src=\"require('./my_img.jpg')\"",
         "(URL) src=\"https://placeimg.com/500/300/nature\""

package/src/components/tree/QTree.js

@@ -10,6 +10,8 @@ import { stopAndPrevent } from '../../utils/event.js'
 import { shouldIgnoreKey } from '../../utils/key-composition.js'
 import cache from '../../utils/cache.js'
 
+const tickStrategyOptions = [ 'none', 'strict', 'leaf', 'leaf-filtered' ]
+
 export default Vue.extend({
   name: 'QTree',
 
@@ -33,6 +35,8 @@ export default Vue.extend({
       default: 'children'
     },
 
+    dense: Boolean,
+
     color: String,
     controlColor: String,
     textColor: String,
@@ -43,7 +47,7 @@ export default Vue.extend({
     tickStrategy: {
       type: String,
       default: 'none',
-      validator: v => ['none', 'strict', 'leaf', 'leaf-filtered'].includes(v)
+      validator: v => tickStrategyOptions.includes(v)
     },
     ticked: Array, // sync
     expanded: Array, // sync
@@ -71,8 +75,8 @@ export default Vue.extend({
 
   computed: {
     classes () {
-      return `q-tree` +
-        (this.noConnectors === true ? ` q-tree--no-connectors` : '') +
+      return `q-tree q-tree--${this.dense === true ? 'dense' : 'standard'}` +
+        (this.noConnectors === true ? ' q-tree--no-connectors' : '') +
         (this.isDark === true ? ` q-tree--dark` : '') +
         (this.color !== void 0 ? ` text-${this.color}` : '')
     },
@@ -514,13 +518,13 @@ export default Vue.extend({
 
           meta.lazy === 'loading'
             ? h(QSpinner, {
-              staticClass: 'q-tree__spinner q-mr-xs',
+              staticClass: 'q-tree__spinner',
               props: { color: this.computedControlColor }
             })
             : (
               isParent === true
                 ? h(QIcon, {
-                  staticClass: 'q-tree__arrow q-mr-xs',
+                  staticClass: 'q-tree__arrow',
                   class: { 'q-tree__arrow--rotate': meta.expanded },
                   props: { name: this.computedIcon },
                   on: {
@@ -534,7 +538,7 @@ export default Vue.extend({
 
           meta.hasTicking === true && meta.noTick !== true
             ? h(QCheckbox, {
-              staticClass: 'q-mr-xs',
+              staticClass: 'q-tree__tickbox',
               props: {
                 value: meta.indeterminate === true ? null : meta.ticked,
                 color: this.computedControlColor,

package/src/components/tree/QTree.json

@@ -63,6 +63,11 @@
       "desc": "Color name for selected nodes (from the Quasar Color Palette)"
     },
 
+    "dense": {
+      "extends": "dense",
+      "addedIn": "v1.17"
+    },
+
     "dark": {
       "extends": "dark"
     },