quasar 1.20.2 → 1.21.0

package/src/components/tabs/QTabs.sass

@@ -129,12 +129,12 @@
 
     &--start
       top: 0
-      left: 0
+      left: 0 #{"/* rtl:ignore */"}
       bottom: 0
 
     &--end
       top: 0
-      right: 0
+      right: 0 #{"/* rtl:ignore */"}
       bottom: 0
 
   &--vertical
@@ -181,8 +181,3 @@
       min-height: 36px
       &--full
         min-height: 52px
-
-@media (min-width: $breakpoint-lg-min)
-  .q-header, .q-footer
-    .q-tab__content
-      min-width: 128px

package/src/components/tabs/QTabs.styl

@@ -129,12 +129,12 @@
 
     &--start
       top: 0
-      left: 0
+      left: 0 /* rtl:ignore */
       bottom: 0
 
     &--end
       top: 0
-      right: 0
+      right: 0 /* rtl:ignore */
       bottom: 0
 
   &--vertical
@@ -181,8 +181,3 @@
       min-height: 36px
       &--full
         min-height: 52px
-
-@media (min-width: $breakpoint-lg-min)
-  .q-header, .q-footer
-    .q-tab__content
-      min-width: 128px

package/src/components/time/QTime.js

@@ -3,11 +3,11 @@ import Vue from 'vue'
 import QBtn from '../btn/QBtn.js'
 import TouchPan from '../../directives/TouchPan.js'
 
-import { slot } from '../../utils/slot.js'
+import { slot } from '../../utils/private/slot.js'
 import { formatDate, __splitDate } from '../../utils/date.js'
 import { position } from '../../utils/event.js'
 import { pad } from '../../utils/format.js'
-import cache from '../../utils/cache.js'
+import cache from '../../utils/private/cache.js'
 import DateTimeMixin from '../../mixins/datetime.js'
 
 export default Vue.extend({

package/src/components/timeline/QTimeline.js

@@ -3,7 +3,7 @@ import Vue from 'vue'
 import DarkMixin from '../../mixins/dark.js'
 import ListenersMixin from '../../mixins/listeners.js'
 
-import { slot } from '../../utils/slot.js'
+import { slot } from '../../utils/private/slot.js'
 
 export default Vue.extend({
   name: 'QTimeline',

package/src/components/timeline/QTimelineEntry.js

@@ -4,7 +4,7 @@ import QIcon from '../icon/QIcon.js'
 
 import ListenersMixin from '../../mixins/listeners.js'
 
-import { slot, uniqueSlot } from '../../utils/slot.js'
+import { slot, uniqueSlot } from '../../utils/private/slot.js'
 
 export default Vue.extend({
   name: 'QTimelineEntry',

package/src/components/toolbar/QToolbar.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 
 import ListenersMixin from '../../mixins/listeners.js'
 
-import { slot } from '../../utils/slot.js'
+import { slot } from '../../utils/private/slot.js'
 
 export default Vue.extend({
   name: 'QToolbar',

package/src/components/toolbar/QToolbarTitle.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 
 import ListenersMixin from '../../mixins/listeners.js'
 
-import { slot } from '../../utils/slot.js'
+import { slot } from '../../utils/private/slot.js'
 
 export default Vue.extend({
   name: 'QToolbarTitle',

package/src/components/tooltip/QTooltip.js

@@ -1,22 +1,23 @@
 import Vue from 'vue'
 
 import AnchorMixin from '../../mixins/anchor.js'
+import TimeoutMixin from '../../mixins/timeout.js'
 import ModelToggleMixin from '../../mixins/model-toggle.js'
 import PortalMixin from '../../mixins/portal.js'
 import TransitionMixin from '../../mixins/transition.js'
 
 import { getScrollTarget } from '../../utils/scroll.js'
 import { addEvt, cleanEvt } from '../../utils/event.js'
-import { clearSelection } from '../../utils/selection.js'
-import { slot } from '../../utils/slot.js'
+import { clearSelection } from '../../utils/private/selection.js'
+import { slot } from '../../utils/private/slot.js'
 import {
   validatePosition, validateOffset, setPosition, parsePosition
-} from '../../utils/position-engine.js'
+} from '../../utils/private/position-engine.js'
 
 export default Vue.extend({
   name: 'QTooltip',
 
-  mixins: [ AnchorMixin, ModelToggleMixin, PortalMixin, TransitionMixin ],
+  mixins: [ AnchorMixin, TimeoutMixin, ModelToggleMixin, PortalMixin, TransitionMixin ],
 
   props: {
     maxHeight: {
@@ -84,7 +85,7 @@ export default Vue.extend({
     __show (evt) {
       this.__showPortal()
 
-      this.__nextTick(() => {
+      this.__registerTick(() => {
         this.observer = new MutationObserver(() => this.updatePosition())
         this.observer.observe(this.__portal.$el, { attributes: false, childList: true, characterData: true, subtree: true })
         this.updatePosition()
@@ -98,17 +99,20 @@ export default Vue.extend({
         )
       }
 
-      this.__setTimeout(() => {
+      // should __removeTimeout() if this gets removed
+      this.__registerTimeout(() => {
         this.__showPortal(true)
         this.$emit('show', evt)
       }, 300)
     },
 
     __hide (evt) {
+      this.__removeTick()
       this.__anchorCleanup()
       this.__hidePortal()
 
-      this.__setTimeout(() => {
+      // should __removeTimeout() if this gets removed
+      this.__registerTimeout(() => {
         this.__hidePortal(true) // done hiding, now destroy
         this.$emit('hide', evt)
       }, 300)
@@ -164,14 +168,10 @@ export default Vue.extend({
         addEvt(this, 'tooltipTemp', evts)
       }
 
-      this.__setTimeout(() => {
-        this.show(evt)
-      }, this.delay)
+      this.__registerTimeout(() => { this.show(evt) }, this.delay)
     },
 
     __delayHide (evt) {
-      this.__clearTimeout()
-
       if (this.$q.platform.is.mobile === true) {
         cleanEvt(this, 'tooltipTemp')
         clearSelection()
@@ -181,9 +181,8 @@ export default Vue.extend({
         }, 10)
       }
 
-      this.__setTimeout(() => {
-        this.hide(evt)
-      }, this.hideDelay)
+      // should __removeTimeout() if this gets removed
+      this.__registerTimeout(() => { this.hide(evt) }, this.hideDelay)
     },
 
     __configureAnchorEl () {
@@ -235,6 +234,11 @@ export default Vue.extend({
     }
   },
 
+  created () {
+    this.__useTick('__registerTick', '__removeTick')
+    this.__useTimeout('__registerTimeout')
+  },
+
   mounted () {
     this.__processModelChange(this.value)
   }

package/src/components/tree/QTree.js

@@ -7,8 +7,9 @@ import QSpinner from '../spinner/QSpinner.js'
 import DarkMixin from '../../mixins/dark.js'
 
 import { stopAndPrevent } from '../../utils/event.js'
-import { shouldIgnoreKey } from '../../utils/key-composition.js'
-import cache from '../../utils/cache.js'
+import { shouldIgnoreKey } from '../../utils/private/key-composition.js'
+import cache from '../../utils/private/cache.js'
+import { injectProp } from '../../utils/private/inject-obj-prop.js'
 
 const tickStrategyOptions = [ 'none', 'strict', 'leaf', 'leaf-filtered' ]
 
@@ -422,18 +423,19 @@ export default Vue.extend({
     __getSlotScope (node, meta, key) {
       const scope = { tree: this, node, key, color: this.color, dark: this.isDark }
 
-      Object.defineProperty(scope, 'expanded', {
-        get: () => { return meta.expanded },
-        set: val => { val !== meta.expanded && this.setExpanded(key, val) },
-        configurable: true,
-        enumerable: true
-      })
-      Object.defineProperty(scope, 'ticked', {
-        get: () => { return meta.ticked },
-        set: val => { val !== meta.ticked && this.setTicked([ key ], val) },
-        configurable: true,
-        enumerable: true
-      })
+      injectProp(
+        scope,
+        'expanded',
+        () => { return meta.expanded },
+        val => { val !== meta.expanded && this.setExpanded(key, val) }
+      )
+
+      injectProp(
+        scope,
+        'ticked',
+        () => { return meta.ticked },
+        val => { val !== meta.ticked && this.setTicked([ key ], val) }
+      )
 
       return scope
     },
@@ -609,7 +611,7 @@ export default Vue.extend({
           this.$emit('update:selected', meta.key !== this.selected ? meta.key : null)
         }
         else if (meta.key !== this.selected) {
-          this.$emit('update:selected', meta.key || null)
+          this.$emit('update:selected', meta.key === void 0 ? null : meta.key)
         }
       }
       else {

package/src/components/uploader/QUploaderBase.js

@@ -10,7 +10,7 @@ import DarkMixin from '../../mixins/dark.js'
 
 import { stop } from '../../utils/event.js'
 import { humanStorageSize } from '../../utils/format.js'
-import cache from '../../utils/cache.js'
+import cache from '../../utils/private/cache.js'
 
 export default Vue.extend({
   name: 'QUploaderBase',

package/src/components/virtual-scroll/QVirtualScroll.js

@@ -10,7 +10,7 @@ import ListenersMixin from '../../mixins/listeners.js'
 
 import { getScrollTarget } from '../../utils/scroll.js'
 import { listenOpts } from '../../utils/event.js'
-import { mergeSlot } from '../../utils/slot.js'
+import { mergeSlot } from '../../utils/private/slot.js'
 
 const comps = {
   list: QList,

package/src/directives/ClosePopup.js

@@ -1,5 +1,5 @@
 import { closePortals } from '../mixins/portal.js'
-import { isKeyCode } from '../utils/key-composition.js'
+import { isKeyCode } from '../utils/private/key-composition.js'
 
 /*
  * depth

package/src/directives/GoBack.js

@@ -1,5 +1,5 @@
 import { client } from '../plugins/Platform.js'
-import { isKeyCode } from '../utils/key-composition.js'
+import { isKeyCode } from '../utils/private/key-composition.js'
 
 function destroy (el) {
   const ctx = el.__qgoback

package/src/directives/Ripple.js

@@ -1,6 +1,6 @@
 import { css } from '../utils/dom.js'
 import { position, stop, addEvt, cleanEvt } from '../utils/event.js'
-import { isKeyCode } from '../utils/key-composition.js'
+import { isKeyCode } from '../utils/private/key-composition.js'
 import { client } from '../plugins/Platform.js'
 import throttle from '../utils/throttle.js'
 import { $q } from '../install.js'

package/src/directives/TouchHold.js

@@ -1,6 +1,6 @@
 import { client } from '../plugins/Platform.js'
 import { addEvt, cleanEvt, position, leftClick, stopAndPrevent, noop } from '../utils/event.js'
-import { clearSelection } from '../utils/selection.js'
+import { clearSelection } from '../utils/private/selection.js'
 
 function destroy (el) {
   const ctx = el.__qtouchhold
@@ -145,7 +145,7 @@ export default {
 
     client.has.touch === true && addEvt(ctx, 'main', [
       [ el, 'touchstart', 'touchStart', `passive${modifiers.capture === true ? 'Capture' : ''}` ],
-      [ el, 'touchend', 'noop', 'notPassiveCapture' ]
+      [ el, 'touchend', 'noop', 'passiveCapture' ]
     ])
   },
 

package/src/directives/TouchPan.js

@@ -1,7 +1,7 @@
 import { client } from '../plugins/Platform.js'
-import { getModifierDirections, shouldStart } from '../utils/touch.js'
+import { getModifierDirections, shouldStart } from '../utils/private/touch.js'
 import { addEvt, cleanEvt, position, leftClick, prevent, stop, stopAndPrevent, preventDraggable, noop } from '../utils/event.js'
-import { clearSelection } from '../utils/selection.js'
+import { clearSelection } from '../utils/private/selection.js'
 
 function getChanges (evt, ctx, isFinal) {
   const pos = position(evt)
@@ -208,7 +208,7 @@ export default {
            */
           if (
             ctx.direction.all !== true &&
-            (mouseEvent !== true || ctx.direction.mouseAllDir !== true)
+            (mouseEvent !== true || ctx.modifiers.mouseAllDir !== true)
           ) {
             const clone = evt.type.indexOf('mouse') > -1
               ? new MouseEvent(evt.type, evt)
@@ -392,7 +392,7 @@ export default {
 
     client.has.touch === true && addEvt(ctx, 'main', [
       [ el, 'touchstart', 'touchStart', `passive${modifiers.capture === true ? 'Capture' : ''}` ],
-      [ el, 'touchmove', 'noop', 'notPassiveCapture' ]
+      [ el, 'touchmove', 'noop', 'notPassiveCapture' ] // cannot be passive (ex: iOS scroll)
     ])
   },
 

package/src/directives/TouchRepeat.js

@@ -1,7 +1,7 @@
 import { client } from '../plugins/Platform.js'
 import { addEvt, cleanEvt, position, leftClick, stopAndPrevent, noop } from '../utils/event.js'
-import { clearSelection } from '../utils/selection.js'
-import { isKeyCode } from '../utils/key-composition.js'
+import { clearSelection } from '../utils/private/selection.js'
+import { isKeyCode } from '../utils/private/key-composition.js'
 
 const
   keyCodes = {
@@ -223,7 +223,7 @@ export default {
 
     client.has.touch === true && addEvt(ctx, 'main', [
       [ el, 'touchstart', 'touchStart', `passive${modifiers.capture === true ? 'Capture' : ''}` ],
-      [ el, 'touchend', 'noop', 'notPassiveCapture' ]
+      [ el, 'touchend', 'noop', 'passiveCapture' ]
     ])
 
     keyboard.length > 0 && addEvt(ctx, 'main', [

package/src/directives/TouchSwipe.js

@@ -1,7 +1,7 @@
 import { client } from '../plugins/Platform.js'
-import { getModifierDirections, shouldStart } from '../utils/touch.js'
+import { getModifierDirections, shouldStart } from '../utils/private/touch.js'
 import { addEvt, cleanEvt, position, leftClick, stopAndPrevent, preventDraggable, noop } from '../utils/event.js'
-import { clearSelection } from '../utils/selection.js'
+import { clearSelection } from '../utils/private/selection.js'
 
 function parseArg (arg) {
   // delta (min velocity -- dist / time)
@@ -250,7 +250,7 @@ export default {
 
     client.has.touch === true && addEvt(ctx, 'main', [
       [ el, 'touchstart', 'touchStart', `passive${modifiers.capture === true ? 'Capture' : ''}` ],
-      [ el, 'touchmove', 'noop', 'notPassiveCapture' ]
+      [ el, 'touchmove', 'noop', 'notPassiveCapture' ] // cannot be passive (ex: iOS scroll)
     ])
   },
 

package/src/mixins/anchor.js

@@ -1,7 +1,7 @@
-import { clearSelection } from '../utils/selection.js'
+import { clearSelection } from '../utils/private/selection.js'
 import { addEvt, cleanEvt, prevent, listenOpts } from '../utils/event.js'
 import { getElement } from '../utils/dom.js'
-import { isKeyCode } from '../utils/key-composition.js'
+import { isKeyCode } from '../utils/private/key-composition.js'
 
 export default {
   props: {

package/src/mixins/attrs.js

@@ -1,4 +1,4 @@
-import { getPropCacheMixin } from '../utils/cache.js'
+import { getPropCacheMixin } from '../utils/private/cache.js'
 
 export const ariaHidden = { 'aria-hidden': 'true' }
 

package/src/mixins/btn.js

@@ -107,20 +107,21 @@ export default {
       const acc = { tabindex: this.computedTabIndex }
 
       if (this.hasLink === true) {
-        Object.assign(acc, this.linkProps.attrs)
+        Object.assign(acc, this.linkAttrs)
       }
       else if (formTypes.includes(this.type) === true) {
         acc.type = this.type
       }
 
-      if (this.hasLink === true || this.type === 'a') {
+      if (this.linkTag === 'a') {
         if (this.disable === true) {
           acc['aria-disabled'] = 'true'
         }
         else if (acc.href === void 0) {
           acc.role = 'button'
         }
-        if (mediaTypeRe.test(this.type) === true) {
+
+        if (this.hasRouterLink !== true && mediaTypeRe.test(this.type) === true) {
           acc.type = this.type
         }
       }

package/src/mixins/checkbox.js

@@ -5,8 +5,8 @@ import FormMixin from './form.js'
 import OptionSizeMixin from './option-size.js'
 import RefocusTargetMixin from './refocus-target.js'
 
-import { slot, mergeSlot } from '../utils/slot.js'
-import cache from '../utils/cache.js'
+import { slot, mergeSlot } from '../utils/private/slot.js'
+import cache from '../utils/private/cache.js'
 
 export default {
   mixins: [ DarkMixin, OptionSizeMixin, FormMixin, RefocusTargetMixin ],
@@ -194,7 +194,8 @@ export default {
       h('div', {
         staticClass: `q-${this.type}__inner relative-position non-selectable`,
         class: this.innerClass,
-        style: this.sizeStyle
+        style: this.sizeStyle,
+        attrs: { 'aria-hidden': 'true' }
       }, inner)
     ]
 

package/src/mixins/datetime.js

@@ -1,4 +1,4 @@
-import { toJalaali } from '../utils/date-persian.js'
+import { toJalaali } from '../utils/private/date-persian.js'
 
 import DarkMixin from './dark.js'
 import FormMixin from './form.js'

package/src/mixins/file.js

@@ -1,5 +1,5 @@
 import { stop, stopAndPrevent } from '../utils/event.js'
-import cache from '../utils/cache.js'
+import cache from '../utils/private/cache.js'
 
 function filterFiles (files, rejectedFiles, failedPropValidation, filterFn) {
   const acceptedFiles = []

package/src/mixins/listeners.js

@@ -1,2 +1,2 @@
-import { getPropCacheMixin } from '../utils/cache.js'
+import { getPropCacheMixin } from '../utils/private/cache.js'
 export default getPropCacheMixin('$listeners', 'qListeners')

package/src/mixins/mask.js

@@ -1,4 +1,4 @@
-import { shouldIgnoreKey } from '../utils/key-composition.js'
+import { shouldIgnoreKey } from '../utils/private/key-composition.js'
 
 // leave NAMED_MASKS at top of file (code referenced from docs)
 const NAMED_MASKS = {

package/src/mixins/model-toggle.js

@@ -1,10 +1,9 @@
 import { isSSR } from '../plugins/Platform.js'
 
-import TimeoutMixin from './timeout.js'
 import ListenersMixin from './listeners.js'
 
 export default {
-  mixins: [ TimeoutMixin, ListenersMixin ],
+  mixins: [ ListenersMixin ],
 
   props: {
     value: {
@@ -35,7 +34,10 @@ export default {
     },
 
     show (evt) {
-      if (this.disable === true || (this.__showCondition !== void 0 && this.__showCondition(evt) !== true)) {
+      if (
+        this.disable === true ||
+        (this.__showCondition !== void 0 && this.__showCondition(evt) !== true)
+      ) {
         return
       }
 
@@ -68,9 +70,7 @@ export default {
       this.$emit('before-show', evt)
 
       if (this.__show !== void 0) {
-        this.__clearTick()
         this.__show(evt)
-        this.__prepareTick()
       }
       else {
         this.$emit('show', evt)
@@ -106,9 +106,7 @@ export default {
       this.$emit('before-hide', evt)
 
       if (this.__hide !== void 0) {
-        this.__clearTick()
         this.__hide(evt)
-        this.__prepareTick()
       }
       else {
         this.$emit('hide', evt)

package/src/mixins/panel.js

@@ -5,8 +5,8 @@ import TouchSwipe from '../directives/TouchSwipe.js'
 import ListenersMixin from './listeners.js'
 
 import { stop } from '../utils/event.js'
-import { slot } from '../utils/slot.js'
-import cache, { cacheWithFn } from '../utils/cache.js'
+import { slot } from '../utils/private/slot.js'
+import cache, { cacheWithFn } from '../utils/private/cache.js'
 
 function getPanelWrapper (h) {
   return h('div', {

package/src/mixins/portal.js

@@ -2,7 +2,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 { addFocusWaitFlag, removeFocusWaitFlag } from '../utils/private/focus-manager.js'
 import debounce from '../utils/debounce.js'
 
 export function closePortalMenus (vm, evt) {