quasar 1.16.3 → 1.17.0

package/src/components/tree/QTree.sass

@@ -39,7 +39,7 @@
     position: absolute
     top: -3px
     bottom: 50%
-    width: 35px
+    width: 31px
     left: -35px
     border-left: 1px solid currentColor
     border-bottom: 1px solid currentColor
@@ -84,27 +84,35 @@
   &__node--selected .q-tree__node-header-content
     color: $grey
 
-  &__icon, &__node-header-content .q-icon, &__spinner
+  &__icon,
+  &__node-header-content .q-icon
     font-size: 21px
 
   &__img
     height: 42px
+    border-radius: 2px
 
-  &__avatar, &__node-header-content .q-avatar
+  &__avatar,
+  &__node-header-content .q-avatar
     font-size: 28px
     border-radius: 50%
     width: 28px
     height: 28px
 
-  &__arrow, &__spinner
+  &__arrow,
+  &__spinner
     font-size: 16px
 
   &__arrow
     transition: transform .3s
+    margin-right: 4px
 
     &--rotate
       transform: rotate3d(0, 0, 1, 90deg)
 
+  &__tickbox
+    margin-right: 4px
+
   // remove connectors before root
   > .q-tree__node
     padding: 0
@@ -123,6 +131,52 @@
     .q-tree__node-body:after
       display: none !important
 
+  &--dense
+    > .q-tree__node--child > .q-tree__node-header
+      padding-left: 1px
+
+    .q-tree
+      &__arrow,
+      &__spinner
+        margin-right: 1px
+
+      &__img
+        height: 32px
+
+      &__tickbox
+        margin-right: 3px
+
+      &__node
+        padding: 0
+        &:after
+          top: 0
+          left: -8px
+
+      &__node-header
+        margin-top: 0
+        padding: 1px
+        &:before
+          top: 0
+          left: -8px
+          width: 8px
+
+      &__node--child
+        padding-left: 17px
+        > .q-tree__node-header:before
+          left: -25px
+          width: 21px
+
+      &__node-body
+        padding: 0 0 2px
+
+      &__node--parent > .q-tree__node-collapsible > .q-tree__node-body
+        padding: 0 0 2px 20px
+        &:after
+          left: 8px
+
+      &__children
+        padding-left: 16px
+
 [dir=rtl]
   .q-tree__arrow
     transform: rotate3d(0, 0, 1, 180deg) #{"/* rtl:ignore */"}

package/src/components/tree/QTree.styl

@@ -39,7 +39,7 @@
     position: absolute
     top: -3px
     bottom: 50%
-    width: 35px
+    width: 31px
     left: -35px
     border-left: 1px solid currentColor
     border-bottom: 1px solid currentColor
@@ -84,27 +84,35 @@
   &__node--selected .q-tree__node-header-content
     color: $grey
 
-  &__icon, &__node-header-content .q-icon, &__spinner
+  &__icon,
+  &__node-header-content .q-icon
     font-size: 21px
 
   &__img
     height: 42px
+    border-radius: 2px
 
-  &__avatar, &__node-header-content .q-avatar
+  &__avatar,
+  &__node-header-content .q-avatar
     font-size: 28px
     border-radius: 50%
     width: 28px
     height: 28px
 
-  &__arrow, &__spinner
+  &__arrow,
+  &__spinner
     font-size: 16px
 
   &__arrow
     transition: transform .3s
+    margin-right: 4px
 
     &--rotate
       transform: rotate3d(0, 0, 1, 90deg)
 
+  &__tickbox
+    margin-right: 4px
+
   // remove connectors before root
   > .q-tree__node
     padding: 0
@@ -123,6 +131,52 @@
     .q-tree__node-body:after
       display: none !important
 
+  &--dense
+    > .q-tree__node--child > .q-tree__node-header
+      padding-left: 1px
+
+    .q-tree
+      &__arrow,
+      &__spinner
+        margin-right: 1px
+
+      &__img
+        height: 32px
+
+      &__tickbox
+        margin-right: 3px
+
+      &__node
+        padding: 0
+        &:after
+          top: 0
+          left: -8px
+
+      &__node-header
+        margin-top: 0
+        padding: 1px
+        &:before
+          top: 0
+          left: -8px
+          width: 8px
+
+      &__node--child
+        padding-left: 17px
+        > .q-tree__node-header:before
+          left: -25px
+          width: 21px
+
+      &__node-body
+        padding: 0 0 2px
+
+      &__node--parent > .q-tree__node-collapsible > .q-tree__node-body
+        padding: 0 0 2px 20px
+        &:after
+          left: 8px
+
+      &__children
+        padding-left: 16px
+
 [dir=rtl]
   .q-tree__arrow
     transform: rotate3d(0, 0, 1, 180deg) /* rtl:ignore */

package/src/components/uploader/QUploaderBase.js

@@ -166,7 +166,7 @@ export default Vue.extend({
         removed.size += f.size
         removed.files.push(f)
 
-        f._img !== void 0 && window.URL.revokeObjectURL(f._img.src)
+        f.__img !== void 0 && window.URL.revokeObjectURL(f.__img.src)
 
         return false
       })
@@ -182,7 +182,7 @@ export default Vue.extend({
       if (this.disable) { return }
 
       if (file.__status === 'uploaded') {
-        this.uploadedFiles = this.uploadedFiles.filter(f => f.name !== file.name)
+        this.uploadedFiles = this.uploadedFiles.filter(f => f.__key !== file.__key)
       }
       else if (file.__status === 'uploading') {
         file.__abort()
@@ -192,21 +192,21 @@ export default Vue.extend({
       }
 
       this.files = this.files.filter(f => {
-        if (f.name !== file.name) {
+        if (f.__key !== file.__key) {
           return true
         }
 
-        f._img !== void 0 && window.URL.revokeObjectURL(f._img.src)
+        f.__img !== void 0 && window.URL.revokeObjectURL(f.__img.src)
 
         return false
       })
-      this.queuedFiles = this.queuedFiles.filter(f => f.name !== file.name)
+      this.queuedFiles = this.queuedFiles.filter(f => f.__key !== file.__key)
       this.$emit('removed', [ file ])
     },
 
     __revokeImgURLs () {
       this.files.forEach(f => {
-        f._img !== void 0 && window.URL.revokeObjectURL(f._img.src)
+        f.__img !== void 0 && window.URL.revokeObjectURL(f.__img.src)
       })
     },
 
@@ -247,21 +247,16 @@ export default Vue.extend({
     },
 
     __addFiles (e, fileList) {
-      const processedFiles = this.__processFiles(e, fileList, this.files, true)
+      const localFiles = this.__processFiles(e, fileList, this.files, true)
 
-      if (processedFiles === void 0) { return }
-
-      const files = processedFiles
-        .filter(file => this.files.findIndex(f => file.name === f.name) === -1)
-
-      if (files === void 0) { return }
+      if (localFiles === void 0) { return }
 
       const fileInput = this.__getFileInput()
       if (fileInput !== void 0) {
         fileInput.value = ''
       }
 
-      files.forEach(file => {
+      localFiles.forEach(file => {
         this.__updateFile(file, 'idle')
         this.uploadSize += file.size
 
@@ -272,9 +267,9 @@ export default Vue.extend({
         }
       })
 
-      this.files = this.files.concat(files)
-      this.queuedFiles = this.queuedFiles.concat(files)
-      this.$emit('added', files)
+      this.files = this.files.concat(localFiles)
+      this.queuedFiles = this.queuedFiles.concat(localFiles)
+      this.$emit('added', localFiles)
       this.autoUpload === true && this.upload()
     },
 
@@ -287,7 +282,7 @@ export default Vue.extend({
             flat: true,
             dense: true
           },
-          on: icon === 'add' ? null : { click: fn }
+          on: { click: icon === 'add' ? this.pickFiles : fn }
         }, icon === 'add' ? this.__getInputControl(h) : null)
       }
     },
@@ -307,6 +302,7 @@ export default Vue.extend({
           },
           on: cache(this, 'input', {
             mousedown: stop, // need to stop refocus from QBtn
+            click: this.pickFiles,
             change: this.__addFiles
           })
         })
@@ -352,7 +348,7 @@ export default Vue.extend({
       }
 
       return this.files.map(file => h('div', {
-        key: file.name,
+        key: file.__key,
         staticClass: 'q-uploader__file relative-position',
         class: {
           'q-uploader__file--img': this.noThumbnails !== true && file.__img !== void 0,

package/src/components/video/QVideo.js

@@ -12,7 +12,9 @@ export default Vue.extend({
     src: {
       type: String,
       required: true
-    }
+    },
+
+    title: String
   },
 
   computed: {
@@ -21,6 +23,7 @@ export default Vue.extend({
         attrs: {
           src: this.src,
           frameborder: '0',
+          title: this.title,
           allowfullscreen: true
         }
       }

package/src/components/video/QVideo.json

@@ -22,6 +22,17 @@
 
     "ratio": {
       "addedIn": "v1.7.0"
+    },
+
+    "title": {
+      "type": "String",
+      "desc": "(Accessibility) Set the native 'title' attribute value of the inner iframe being used",
+      "required": false,
+      "examples": [
+        "My Daily Marathon"
+      ],
+      "category": "accessibility",
+      "addedIn": "v1.17.0"
     }
   }
 }

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

@@ -4,6 +4,7 @@
 
   &__content
     outline: none
+    contain: content
 
     *
       overflow-anchor: none

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

@@ -4,6 +4,7 @@
 
   &__content
     outline: none
+    contain: content
 
     *
       overflow-anchor: none

package/src/css/core/helpers.sass

@@ -47,6 +47,9 @@
   outline: 0
   text-decoration: none
 
+  &--focusable:focus-visible
+    text-decoration: underline dashed currentColor 1px
+
 body.electron
   .q-electron-drag
     -webkit-user-select: none

package/src/css/core/helpers.styl

@@ -47,6 +47,9 @@
   outline: 0
   text-decoration: none
 
+  &--focusable:focus-visible
+    text-decoration: underline dashed currentColor 1px
+
 body.electron
   .q-electron-drag
     -webkit-user-select: none

package/src/css/core/positioning.sass

@@ -69,6 +69,11 @@
   max-width: 100vw
   max-height: 100vh
 
+body.q-ios-padding .fullscreen
+  padding-top: $ios-statusbar-height !important
+  padding-top: env(safe-area-inset-top) !important
+  padding-bottom: env(safe-area-inset-bottom) !important
+
 .absolute-full, .fullscreen, .fixed-full
   top: 0
   right: 0

package/src/css/core/positioning.styl

@@ -69,6 +69,11 @@
   max-width: 100vw
   max-height: 100vh
 
+body.q-ios-padding .fullscreen
+  padding-top: $ios-statusbar-height !important
+  padding-top: env(safe-area-inset-top) !important
+  padding-bottom: env(safe-area-inset-bottom) !important
+
 .absolute-full, .fullscreen, .fixed-full
   top: 0
   right: 0

package/src/css/variables.sass

@@ -39,20 +39,18 @@ $flex-gutter: ('none': 0, 'xs': $flex-gutter-xs, 'sm': $flex-gutter-sm, 'md': $f
 // sorry for long line; we need .sass and it doesn't support multi-line list
 $sizes: ('xs': 0, 'sm': ($breakpoint-xs + 1), 'md': ($breakpoint-sm + 1), 'lg': ($breakpoint-md + 1), 'xl': ($breakpoint-lg + 1)) !default
 
-$breakpoint-xs-min: 0 !default
-$breakpoint-xs-max: $breakpoint-xs !default
+$breakpoint-xs-max: (map-get($sizes, "sm") - 0.02) !default
 
 $breakpoint-sm-min: map-get($sizes, "sm") !default
-$breakpoint-sm-max: $breakpoint-sm !default
+$breakpoint-sm-max: (map-get($sizes, "md") - 0.02) !default
 
 $breakpoint-md-min: map-get($sizes, "md") !default
-$breakpoint-md-max: $breakpoint-md !default
+$breakpoint-md-max: (map-get($sizes, "lg") - 0.02) !default
 
 $breakpoint-lg-min: map-get($sizes, "lg") !default
-$breakpoint-lg-max: $breakpoint-lg !default
+$breakpoint-lg-max: (map-get($sizes, "xl") - 0.02) !default
 
 $breakpoint-xl-min: map-get($sizes, "xl") !default
-$breakpoint-xl-max: 9999px !default
 
 $h1:        (size: 6rem,     line-height: 6rem,     letter-spacing: -.01562em, weight: 300) !default
 $h2:        (size: 3.75rem,  line-height: 3.75rem,  letter-spacing: -.00833em, weight: 300) !default

package/src/css/variables.styl

@@ -55,20 +55,18 @@ $sizes ?= {
   xl: $breakpoint-lg + 1  // Extra large screen
 }
 
-$breakpoint-xs-min ?= 0
-$breakpoint-xs-max ?= $breakpoint-xs
+$breakpoint-xs-max ?= ($sizes.sm - 0.02)
 
 $breakpoint-sm-min ?= $sizes.sm
-$breakpoint-sm-max ?= $breakpoint-sm
+$breakpoint-sm-max ?= ($sizes.md - 0.02)
 
 $breakpoint-md-min ?= $sizes.md
-$breakpoint-md-max ?= $breakpoint-md
+$breakpoint-md-max ?= ($sizes.lg - 0.02)
 
 $breakpoint-lg-min ?= $sizes.lg
-$breakpoint-lg-max ?= $breakpoint-lg
+$breakpoint-lg-max ?= ($sizes.xl - 0.02)
 
 $breakpoint-xl-min ?= $sizes.xl
-$breakpoint-xl-max ?= 9999px
 
 $headings ?= {
   h1: {

package/src/directives/Scroll.js

@@ -1,4 +1,4 @@
-import { getScrollPosition, getScrollTarget, getHorizontalScrollPosition } from '../utils/scroll.js'
+import { getScrollTarget, getVerticalScrollPosition, getHorizontalScrollPosition } from '../utils/scroll.js'
 import { listenOpts } from '../utils/event.js'
 
 function update (ctx, { value, oldValue }) {
@@ -34,7 +34,7 @@ export default {
       scrollTarget: getScrollTarget(el),
       scroll () {
         ctx.handler(
-          getScrollPosition(ctx.scrollTarget),
+          getVerticalScrollPosition(ctx.scrollTarget),
           getHorizontalScrollPosition(ctx.scrollTarget)
         )
       }

package/src/directives/ScrollFire.js

@@ -20,6 +20,7 @@ function destroy (el) {
   const ctx = el.__qscrollfire
   if (ctx !== void 0) {
     ctx.scrollTarget.removeEventListener('scroll', ctx.scroll, listenOpts.passive)
+    ctx.scroll.cancel()
     delete el.__qscrollfire
   }
 }

package/src/ie-compat/ie.js

@@ -59,7 +59,7 @@ typeof window !== 'undefined' && (function (window) {
     Object.defineProperty(Object, 'assign', {
       value: function assign (target, varArgs) { // .length of function is 2
         'use strict'
-        if (target === null || target === undefined) {
+        if (target === null || target === void 0) {
           throw new TypeError('Cannot convert undefined or null to object')
         }
 
@@ -67,7 +67,7 @@ typeof window !== 'undefined' && (function (window) {
 
         for (var index = 1; index < arguments.length; index++) {
           var nextSource = arguments[index]
-          if (nextSource !== null && nextSource !== undefined) {
+          if (nextSource !== null && nextSource !== void 0) {
             for (var nextKey in nextSource) {
               // Avoid bugs when hasOwnProperty is shadowed
               if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
@@ -302,7 +302,7 @@ function setAsap(asapFn) {
   asap = asapFn;
 }
 
-var browserWindow = typeof window !== 'undefined' ? window : undefined;
+var browserWindow = typeof window !== 'undefined' ? window : void 0;
 var browserGlobal = browserWindow || {};
 var BrowserMutationObserver = browserGlobal.MutationObserver || browserGlobal.WebKitMutationObserver;
 var isNode = typeof self === 'undefined' && typeof process !== 'undefined' && {}.toString.call(process) === '[object process]';
@@ -367,8 +367,8 @@ function flush() {
 
     callback(arg);
 
-    queue[i] = undefined;
-    queue[i + 1] = undefined;
+    queue[i] = void 0;
+    queue[i + 1] = void 0;
   }
 
   len = 0;
@@ -392,7 +392,7 @@ if (isNode) {
   scheduleFlush = useMutationObserver();
 } else if (isWorker) {
   scheduleFlush = useMessageChannel();
-} else if (browserWindow === undefined && typeof require === 'function') {
+} else if (browserWindow === void 0 && typeof require === 'function') {
   scheduleFlush = attemptVertx();
 } else {
   scheduleFlush = useSetTimeout();
@@ -403,7 +403,7 @@ function then(onFulfillment, onRejection) {
 
   var child = new this.constructor(noop);
 
-  if (child[PROMISE_ID] === undefined) {
+  if (child[PROMISE_ID] === void 0) {
     makePromise(child);
   }
 
@@ -536,7 +536,7 @@ function handleOwnThenable(promise, thenable) {
   } else if (thenable._state === REJECTED) {
     reject(promise, thenable._result);
   } else {
-    subscribe(thenable, undefined, function (value) {
+    subscribe(thenable, void 0, function (value) {
       return resolve(promise, value);
     }, function (reason) {
       return reject(promise, reason);
@@ -551,7 +551,7 @@ function handleMaybeThenable(promise, maybeThenable, then$$1) {
     if (then$$1 === TRY_CATCH_ERROR) {
       reject(promise, TRY_CATCH_ERROR.error);
       TRY_CATCH_ERROR.error = null;
-    } else if (then$$1 === undefined) {
+    } else if (then$$1 === void 0) {
       fulfill(promise, maybeThenable);
     } else if (isFunction(then$$1)) {
       handleForeignThenable(promise, maybeThenable, then$$1);
@@ -712,8 +712,8 @@ function nextId() {
 
 function makePromise(promise) {
   promise[PROMISE_ID] = id++;
-  promise._state = undefined;
-  promise._result = undefined;
+  promise._state = void 0;
+  promise._result = void 0;
   promise._subscribers = [];
 }
 
@@ -805,7 +805,7 @@ var Enumerator = function () {
   Enumerator.prototype._willSettleAt = function _willSettleAt(promise, i) {
     var enumerator = this;
 
-    subscribe(promise, undefined, function (value) {
+    subscribe(promise, void 0, function (value) {
       return enumerator._settledAt(FULFILLED, i, value);
     }, function (reason) {
       return enumerator._settledAt(REJECTED, i, reason);
@@ -1106,7 +1106,7 @@ function needsNew() {
 var Promise$2 = function () {
   function Promise(resolver) {
     this[PROMISE_ID] = nextId();
-    this._result = this._state = undefined;
+    this._result = this._state = void 0;
     this._subscribers = [];
 
     if (noop !== resolver) {

package/src/install.js

@@ -56,7 +56,7 @@ export default function (Vue, opts = {}) {
 
   opts.directives && Object.keys(opts.directives).forEach(key => {
     const d = opts.directives[key]
-    if (d.name !== undefined && d.unbind !== void 0) {
+    if (d.name !== void 0 && d.unbind !== void 0) {
       Vue.directive(d.name, d)
     }
   })

package/src/lang.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 
-import langEn from '../lang/en-us.js'
+import defaultLang from '../lang/en-us.js'
 import { isSSR, fromSSR } from './plugins/Platform.js'
 
 function getLocale () {
@@ -18,13 +18,13 @@ function getLocale () {
   }
 }
 
-export default {
+const Plugin = {
   getLocale,
 
   install ($q, queues, lang) {
-    const initialLang = lang || langEn
+    const initialLang = lang || defaultLang
 
-    this.set = (langObject = langEn, ssrContext) => {
+    this.set = (langObject = defaultLang, ssrContext) => {
       const lang = {
         ...langObject,
         rtl: langObject.rtl === true,
@@ -83,3 +83,6 @@ export default {
     }
   }
 }
+
+export default Plugin
+export { defaultLang }

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