Merge remote-tracking branch 'origin/dev' into dev

Author: webnoob

docs/src/components/Codepen.vue

@@ -52,14 +52,39 @@ export default {
     },
 
     js () {
-      const imports = /(import*) ([^'\n]*) from ([^\n]*)/g
+      const importsQ = /import\s+{([^}'\n]+)}\s+from\s+'quasar'/g
+      const imports = /import ([^'\n]*) from ([^\n]*)/g
       let component = /export default {([\s\S]*)}/g.exec(this.parts.script || '')
       component = ((component && component[1]) || '').trim()
       if (component.length > 0) {
         component = ',\n  ' + component
       }
       let script = /<script>([\s\S]*)export default {/g.exec(this.parts.script || '')
       script = ((script && script[1]) || '')
+        .replace(importsQ, function (match, p1) {
+          const parts = p1
+            .split(',')
+            .map(p => p.trim())
+            .filter(p => p.length > 0)
+            .reduce((acc, p) => {
+              if (p[0] === 'Q') {
+                acc.c.push(p)
+              }
+              else {
+                acc.u.push(p)
+              }
+              return acc
+            }, { c: [], u: [] })
+
+          const text = []
+          if (parts.c.length > 0) {
+            text.push('const { ' + parts.c.join(', ') + ' } = Quasar.components')
+          }
+          if (parts.u.length > 0) {
+            text.push('const { ' + parts.u.join(', ') + ' } = Quasar')
+          }
+          return text.join('\n')
+        })
         .replace(imports, '')
         .trim()
       script += script ? '\n\n' : ''
@@ -76,7 +101,7 @@ export default {
         .replace(/([\w]+=")([^"]*?)(")/g, function (match, p1, p2, p3) {
           return p1 + p2.replace(/>/g, '___TEMP_REPLACEMENT___') + p3
         })
-        .replace(/<(q-[\w-]+|div)([^>]+?)\s*?([\r\n]+\s*)?\/>/g, '<$1$2$3></$1>')
+        .replace(/<(q-[\w-]+|div)([^>]*?)\s*?([\r\n][\t ]+)?\/>/g, '<$1$2$3></$1>')
         .replace(/<(thead|tbody)(.*?)[\n\r]?(\s*)<\/\1>/g, function (match, p1, p2, p3) {
           return '<template>\n' + p3 + '  <' + p1 + p2.split(/[\n\r]+/g).join('\n  ') + '\n' + p3 + '  </' + p1 + '>\n' + p3 + '</template>'
         })

docs/src/examples/Loading/Customized.vue

@@ -10,14 +10,8 @@ import { QSpinnerFacebook } from 'quasar'
 export default {
   methods: {
     showLoading () {
-      /* This is for Codepen (using UMD) to work */
-      const spinner = typeof QSpinnerFacebook !== 'undefined'
-        ? QSpinnerFacebook // Non-UMD, imported above
-        : Quasar.components.QSpinnerFacebook // eslint-disable-line
-      /* End of Codepen workaround */
-
       this.$q.loading.show({
-        spinner,
+        spinner: QSpinnerFacebook,
         spinnerColor: 'yellow',
         spinnerSize: 140,
         backgroundColor: 'purple',

docs/src/examples/Loading/ShowAndChange.vue

@@ -10,19 +10,13 @@ import { QSpinnerGears } from 'quasar'
 export default {
   methods: {
     showLoading () {
-      /* This is for Codepen (using UMD) to work */
-      const spinner = typeof QSpinnerGears !== 'undefined'
-        ? QSpinnerGears
-        : Quasar.components.QSpinnerGears // eslint-disable-line
-      /* End of Codepen workaround */
-
       this.$q.loading.show({
         message: 'First message. Gonna change it in 3 seconds...'
       })
 
       this.timer = setTimeout(() => {
         this.$q.loading.show({
-          spinner,
+          spinner: QSpinnerGears,
           spinnerColor: 'red',
           messageColor: 'black',
           backgroundColor: 'yellow',

docs/src/pages/vue-components/table.md

@@ -341,7 +341,7 @@ In the example below, steps have been taken to emulate an ajax call to a server.
 
 Below is an example of a naive csv encoding and then exporting table data by using the [exportFile](/quasar-utils/other-utils#Export-file) Quasar util. The browser should trigger a file download. For a more professional approach in regards to encoding we do recommend using [csv-parse](https://csv.js.org/parse/) and [csv-stringify](https://csv.js.org/stringify/) packages.
 
-<doc-example title="Export to csv" file="QTable/ExportCsv" no-edit />
+<doc-example title="Export to csv" file="QTable/ExportCsv" />
 
 ## Keyboard navigation
 

ui/src/components/ajax-bar/QAjaxBar.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 
 import { between } from '../../utils/format.js'
 import { isSSR } from '../../plugins/Platform.js'
+import { ariaHidden } from '../../mixins/attrs'
 
 const
   xhr = isSSR ? null : XMLHttpRequest,
@@ -145,9 +146,7 @@ export default Vue.extend({
           'aria-valuemax': 100,
           'aria-valuenow': this.progress
         }
-        : {
-          'aria-hidden': 'true'
-        }
+        : ariaHidden
     }
   },
 

ui/src/components/dialog/QDialog.js

@@ -4,7 +4,7 @@ import HistoryMixin from '../../mixins/history.js'
 import ModelToggleMixin from '../../mixins/model-toggle.js'
 import PortalMixin from '../../mixins/portal.js'
 import PreventScrollMixin from '../../mixins/prevent-scroll.js'
-import AttrsMixin from '../../mixins/attrs.js'
+import AttrsMixin, { ariaHidden } from '../../mixins/attrs.js'
 
 import { childHasFocus } from '../../utils/dom.js'
 import EscapeKey from '../../utils/escape-key.js'
@@ -344,6 +344,7 @@ export default Vue.extend({
         }, this.useBackdrop === true ? [
           h('div', {
             staticClass: 'q-dialog__backdrop fixed-full',
+            attrs: ariaHidden,
             on: cache(this, 'bkdrop', {
               click: this.__onBackdropClick
             })

ui/src/components/drawer/QDrawer.js

@@ -10,6 +10,7 @@ import TouchPan from '../../directives/TouchPan.js'
 import { between } from '../../utils/format.js'
 import { slot } from '../../utils/slot.js'
 import cache from '../../utils/cache.js'
+import { ariaHidden } from '../../mixins/attrs'
 
 const duration = 150
 
@@ -653,6 +654,7 @@ export default Vue.extend({
       this.noSwipeOpen !== true && child.push(
         h('div', {
           staticClass: `q-drawer__opener fixed-${this.side}`,
+          attrs: ariaHidden,
           directives: this.openDirective
         })
       )
@@ -662,6 +664,7 @@ export default Vue.extend({
           ref: 'backdrop',
           staticClass: 'fullscreen q-drawer__backdrop',
           class: this.backdropClass,
+          attrs: ariaHidden,
           style: this.lastBackdropBg !== void 0
             ? { backgroundColor: this.lastBackdropBg }
             : null,

ui/src/components/scroll-area/QScrollArea.js

@@ -10,6 +10,7 @@ import QResizeObserver from '../resize-observer/QResizeObserver.js'
 import QScrollObserver from '../scroll-observer/QScrollObserver.js'
 import TouchPan from '../../directives/TouchPan.js'
 import DarkMixin from '../../mixins/dark.js'
+import { ariaHidden } from '../../mixins/attrs'
 
 export default Vue.extend({
   name: 'QScrollArea',
@@ -272,6 +273,7 @@ export default Vue.extend({
         staticClass: 'q-scrollarea__bar',
         style: this.barStyle,
         class: this.barClass,
+        attrs: ariaHidden,
         on: cache(this, 'bar', {
           mousedown: this.__mouseDown
         })
@@ -282,6 +284,7 @@ export default Vue.extend({
         staticClass: 'q-scrollarea__thumb',
         style: this.style,
         class: this.thumbClass,
+        attrs: ariaHidden,
         directives: cache(this, 'thumb#' + this.horizontal, [{
           name: 'touch-pan',
           modifiers: {

ui/src/components/select/QSelect.js

@@ -24,6 +24,7 @@ import CompositionMixin from '../../mixins/composition.js'
 import ListenersMixin from '../../mixins/listeners.js'
 
 const validateNewValueMode = v => ['add', 'add-unique', 'toggle'].includes(v)
+const reEscapeList = '.*+?^${}()|[]\\'
 
 export default Vue.extend({
   name: 'QSelect',
@@ -680,7 +681,7 @@ export default Vue.extend({
           this.searchBuffer += char
         }
 
-        const searchRe = new RegExp('^\\' + this.searchBuffer.split('').join('.*\\'), 'i')
+        const searchRe = new RegExp('^' + this.searchBuffer.split('').map(l => reEscapeList.indexOf(l) > -1 ? '\\' + l : l).join('.*'), 'i')
 
         let index = this.optionIndex
 

ui/src/mixins/attrs.js

@@ -1,2 +1,5 @@
 import { getPropCacheMixin } from '../utils/cache.js'
+
+export const ariaHidden = { 'aria-hidden': 'true' }
+
 export default getPropCacheMixin('$attrs', 'qAttrs')