quasar 1.22.0 → 1.22.2

package/dist/types/index.d.ts

@@ -2635,8 +2635,9 @@ export interface QDialog extends Vue {
     focus (selector? : string): void
     /**
      * Shakes dialog
+     * @param focusTarget Optional DOM Element to be focused after shake
      */
-    shake (): void
+    shake (focusTarget? : Element): void
 }
 
 export interface QDrawer extends Vue {
@@ -4375,6 +4376,10 @@ export interface QItemSection extends Vue {
 }
 
 export interface QList extends Vue {
+    /**
+     * HTML tag to render
+     */
+    tag? : string
     /**
      * Applies a default border to the component
      */

package/dist/vetur/quasar-attributes.json

@@ -2759,6 +2759,10 @@
     "type": "boolean",
     "description": "Do not wrap text (useful for item's main content)"
   },
+  "q-list/tag": {
+    "type": "string",
+    "description": "HTML tag to render"
+  },
   "q-list/bordered": {
     "type": "boolean",
     "description": "Applies a default border to the component"

package/dist/vetur/quasar-tags.json

@@ -906,6 +906,7 @@
   },
   "q-list": {
     "attributes": [
+      "tag",
       "bordered",
       "dense",
       "separator",

package/dist/web-types/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "1.22.0",
+  "version": "1.22.2",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -9180,6 +9180,16 @@
             "symbol": "QList"
           },
           "attributes": [
+            {
+              "name": "tag",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "description": "HTML tag to render\n\nExamples:\ndiv\nul\nol",
+              "doc-url": "https://v1.quasar.dev/vue-components/list-and-list-items",
+              "default": "\"div\""
+            },
             {
               "name": "bordered",
               "value": {

package/icon-set/mdi-v7.js

@@ -0,0 +1,141 @@
+export default {
+  name: 'mdi-v7',
+  type: {
+    positive: 'mdi-check-circle',
+    negative: 'mdi-alert',
+    info: 'mdi-information',
+    warning: 'mdi-exclamation'
+  },
+  arrow: {
+    up: 'mdi-arrow-up',
+    right: 'mdi-arrow-right',
+    down: 'mdi-arrow-down',
+    left: 'mdi-arrow-left',
+    dropdown: 'mdi-menu-down'
+  },
+  chevron: {
+    left: 'mdi-chevron-left',
+    right: 'mdi-chevron-right'
+  },
+  colorPicker: {
+    spectrum: 'mdi-gradient-vertical',
+    tune: 'mdi-tune',
+    palette: 'mdi-palette-swatch'
+  },
+  pullToRefresh: {
+    icon: 'mdi-refresh'
+  },
+  carousel: {
+    left: 'mdi-chevron-left',
+    right: 'mdi-chevron-right',
+    up: 'mdi-chevron-up',
+    down: 'mdi-chevron-down',
+    navigationIcon: 'mdi-circle'
+  },
+  chip: {
+    remove: 'mdi-close-circle',
+    selected: 'mdi-check'
+  },
+  datetime: {
+    arrowLeft: 'mdi-chevron-left',
+    arrowRight: 'mdi-chevron-right',
+    now: 'mdi-clock-outline',
+    today: 'mdi-calendar-today'
+  },
+  editor: {
+    bold: 'mdi-format-bold',
+    italic: 'mdi-format-italic',
+    strikethrough: 'mdi-format-strikethrough-variant',
+    underline: 'mdi-format-underline',
+    unorderedList: 'mdi-format-list-bulleted',
+    orderedList: 'mdi-format-list-numbered',
+    subscript: 'mdi-format-subscript',
+    superscript: 'mdi-format-superscript',
+    hyperlink: 'mdi-link',
+    toggleFullscreen: 'mdi-fullscreen',
+    quote: 'mdi-format-quote-close',
+    left: 'mdi-format-align-left',
+    center: 'mdi-format-align-center',
+    right: 'mdi-format-align-right',
+    justify: 'mdi-format-align-justify',
+    print: 'mdi-printer',
+    outdent: 'mdi-format-indent-decrease',
+    indent: 'mdi-format-indent-increase',
+    removeFormat: 'mdi-format-clear',
+    formatting: 'mdi-format-color-text',
+    fontSize: 'mdi-format-size',
+    align: 'mdi-format-align-left',
+    hr: 'mdi-minus',
+    undo: 'mdi-undo',
+    redo: 'mdi-redo',
+    heading: 'mdi-format-size',
+    heading1: 'mdi-format-header-1',
+    heading2: 'mdi-format-header-2',
+    heading3: 'mdi-format-header-3',
+    heading4: 'mdi-format-header-4',
+    heading5: 'mdi-format-header-5',
+    heading6: 'mdi-format-header-6',
+    code: 'mdi-code-tags',
+    size: 'mdi-format-size',
+    size1: 'mdi-numeric-1-box',
+    size2: 'mdi-numeric-2-box',
+    size3: 'mdi-numeric-3-box',
+    size4: 'mdi-numeric-4-box',
+    size5: 'mdi-numeric-5-box',
+    size6: 'mdi-numeric-6-box',
+    size7: 'mdi-numeric-7-box',
+    font: 'mdi-format-font',
+    viewSource: 'mdi-code-tags'
+  },
+  expansionItem: {
+    icon: 'mdi-chevron-down',
+    denseIcon: 'mdi-menu-down'
+  },
+  fab: {
+    icon: 'mdi-plus',
+    activeIcon: 'mdi-close'
+  },
+  field: {
+    clear: 'mdi-close-circle',
+    error: 'mdi-alert-circle'
+  },
+  pagination: {
+    first: 'mdi-chevron-double-left',
+    prev: 'mdi-chevron-left',
+    next: 'mdi-chevron-right',
+    last: 'mdi-chevron-double-right'
+  },
+  rating: {
+    icon: 'mdi-star'
+  },
+  stepper: {
+    done: 'mdi-check',
+    active: 'mdi-pencil',
+    error: 'mdi-alert'
+  },
+  tabs: {
+    left: 'mdi-chevron-left',
+    right: 'mdi-chevron-right',
+    up: 'mdi-chevron-up',
+    down: 'mdi-chevron-down'
+  },
+  table: {
+    arrowUp: 'mdi-arrow-up',
+    warning: 'mdi-alert',
+    firstPage: 'mdi-chevron-double-left',
+    prevPage: 'mdi-chevron-left',
+    nextPage: 'mdi-chevron-right',
+    lastPage: 'mdi-chevron-double-right'
+  },
+  tree: {
+    icon: 'mdi-play'
+  },
+  uploader: {
+    done: 'mdi-check',
+    clear: 'mdi-close',
+    add: 'mdi-plus-box',
+    upload: 'mdi-cloud-upload',
+    removeQueue: 'mdi-notification-clear-all',
+    removeUploaded: 'mdi-check-all'
+  }
+}

package/icon-set/svg-mdi-v7.js

@@ -0,0 +1,225 @@
+
+/*
+ * Do not edit this file. It is automatically generated
+ * from its webfont counterpart (same filename without "svg-" prefix).
+ * Edit that file instead (mdi-v7.js).
+ */
+
+
+import {
+  mdiCheckCircle,
+  mdiAlert,
+  mdiInformation,
+  mdiExclamation,
+  mdiArrowUp,
+  mdiArrowRight,
+  mdiArrowDown,
+  mdiArrowLeft,
+  mdiMenuDown,
+  mdiChevronLeft,
+  mdiChevronRight,
+  mdiGradientVertical,
+  mdiTune,
+  mdiPaletteSwatch,
+  mdiRefresh,
+  mdiChevronUp,
+  mdiChevronDown,
+  mdiCircle,
+  mdiCloseCircle,
+  mdiCheck,
+  mdiClockOutline,
+  mdiCalendarToday,
+  mdiFormatBold,
+  mdiFormatItalic,
+  mdiFormatStrikethroughVariant,
+  mdiFormatUnderline,
+  mdiFormatListBulleted,
+  mdiFormatListNumbered,
+  mdiFormatSubscript,
+  mdiFormatSuperscript,
+  mdiLink,
+  mdiFullscreen,
+  mdiFormatQuoteClose,
+  mdiFormatAlignLeft,
+  mdiFormatAlignCenter,
+  mdiFormatAlignRight,
+  mdiFormatAlignJustify,
+  mdiPrinter,
+  mdiFormatIndentDecrease,
+  mdiFormatIndentIncrease,
+  mdiFormatClear,
+  mdiFormatColorText,
+  mdiFormatSize,
+  mdiMinus,
+  mdiUndo,
+  mdiRedo,
+  mdiFormatHeader1,
+  mdiFormatHeader2,
+  mdiFormatHeader3,
+  mdiFormatHeader4,
+  mdiFormatHeader5,
+  mdiFormatHeader6,
+  mdiCodeTags,
+  mdiNumeric1Box,
+  mdiNumeric2Box,
+  mdiNumeric3Box,
+  mdiNumeric4Box,
+  mdiNumeric5Box,
+  mdiNumeric6Box,
+  mdiNumeric7Box,
+  mdiFormatFont,
+  mdiPlus,
+  mdiClose,
+  mdiAlertCircle,
+  mdiChevronDoubleLeft,
+  mdiChevronDoubleRight,
+  mdiStar,
+  mdiPencil,
+  mdiPlay,
+  mdiPlusBox,
+  mdiCloudUpload,
+  mdiNotificationClearAll,
+  mdiCheckAll
+} from '@quasar/extras/mdi-v7'
+
+export default {
+  name: 'svg-mdi-v7',
+  type: {
+    positive: mdiCheckCircle,
+    negative: mdiAlert,
+    info: mdiInformation,
+    warning: mdiExclamation
+  },
+  arrow: {
+    up: mdiArrowUp,
+    right: mdiArrowRight,
+    down: mdiArrowDown,
+    left: mdiArrowLeft,
+    dropdown: mdiMenuDown
+  },
+  chevron: {
+    left: mdiChevronLeft,
+    right: mdiChevronRight
+  },
+  colorPicker: {
+    spectrum: mdiGradientVertical,
+    tune: mdiTune,
+    palette: mdiPaletteSwatch
+  },
+  pullToRefresh: {
+    icon: mdiRefresh
+  },
+  carousel: {
+    left: mdiChevronLeft,
+    right: mdiChevronRight,
+    up: mdiChevronUp,
+    down: mdiChevronDown,
+    navigationIcon: mdiCircle
+  },
+  chip: {
+    remove: mdiCloseCircle,
+    selected: mdiCheck
+  },
+  datetime: {
+    arrowLeft: mdiChevronLeft,
+    arrowRight: mdiChevronRight,
+    now: mdiClockOutline,
+    today: mdiCalendarToday
+  },
+  editor: {
+    bold: mdiFormatBold,
+    italic: mdiFormatItalic,
+    strikethrough: mdiFormatStrikethroughVariant,
+    underline: mdiFormatUnderline,
+    unorderedList: mdiFormatListBulleted,
+    orderedList: mdiFormatListNumbered,
+    subscript: mdiFormatSubscript,
+    superscript: mdiFormatSuperscript,
+    hyperlink: mdiLink,
+    toggleFullscreen: mdiFullscreen,
+    quote: mdiFormatQuoteClose,
+    left: mdiFormatAlignLeft,
+    center: mdiFormatAlignCenter,
+    right: mdiFormatAlignRight,
+    justify: mdiFormatAlignJustify,
+    print: mdiPrinter,
+    outdent: mdiFormatIndentDecrease,
+    indent: mdiFormatIndentIncrease,
+    removeFormat: mdiFormatClear,
+    formatting: mdiFormatColorText,
+    fontSize: mdiFormatSize,
+    align: mdiFormatAlignLeft,
+    hr: mdiMinus,
+    undo: mdiUndo,
+    redo: mdiRedo,
+    heading: mdiFormatSize,
+    heading1: mdiFormatHeader1,
+    heading2: mdiFormatHeader2,
+    heading3: mdiFormatHeader3,
+    heading4: mdiFormatHeader4,
+    heading5: mdiFormatHeader5,
+    heading6: mdiFormatHeader6,
+    code: mdiCodeTags,
+    size: mdiFormatSize,
+    size1: mdiNumeric1Box,
+    size2: mdiNumeric2Box,
+    size3: mdiNumeric3Box,
+    size4: mdiNumeric4Box,
+    size5: mdiNumeric5Box,
+    size6: mdiNumeric6Box,
+    size7: mdiNumeric7Box,
+    font: mdiFormatFont,
+    viewSource: mdiCodeTags
+  },
+  expansionItem: {
+    icon: mdiChevronDown,
+    denseIcon: mdiMenuDown
+  },
+  fab: {
+    icon: mdiPlus,
+    activeIcon: mdiClose
+  },
+  field: {
+    clear: mdiCloseCircle,
+    error: mdiAlertCircle
+  },
+  pagination: {
+    first: mdiChevronDoubleLeft,
+    prev: mdiChevronLeft,
+    next: mdiChevronRight,
+    last: mdiChevronDoubleRight
+  },
+  rating: {
+    icon: mdiStar
+  },
+  stepper: {
+    done: mdiCheck,
+    active: mdiPencil,
+    error: mdiAlert
+  },
+  tabs: {
+    left: mdiChevronLeft,
+    right: mdiChevronRight,
+    up: mdiChevronUp,
+    down: mdiChevronDown
+  },
+  table: {
+    arrowUp: mdiArrowUp,
+    warning: mdiAlert,
+    firstPage: mdiChevronDoubleLeft,
+    prevPage: mdiChevronLeft,
+    nextPage: mdiChevronRight,
+    lastPage: mdiChevronDoubleRight
+  },
+  tree: {
+    icon: mdiPlay
+  },
+  uploader: {
+    done: mdiCheck,
+    clear: mdiClose,
+    add: mdiPlusBox,
+    upload: mdiCloudUpload,
+    removeQueue: mdiNotificationClearAll,
+    removeUploaded: mdiCheckAll
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "1.22.0",
+  "version": "1.22.2",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "module": "src/index.esm.js",
   "typings": "dist/types/index.d.ts",
@@ -60,7 +60,7 @@
   "homepage": "https://quasar.dev",
   "devDependencies": {
     "@quasar/app": "^2.0.6",
-    "@quasar/extras": "^1.11.0",
+    "@quasar/extras": "^1.15.5",
     "@rollup/plugin-buble": "^0.21.1",
     "@rollup/plugin-json": "^4.0.2",
     "@rollup/plugin-node-resolve": "^7.1.0",

package/src/components/btn-dropdown/QBtnDropdown.js

@@ -82,7 +82,6 @@ export default Vue.extend({
       'aria-expanded': this.showing === true ? 'true' : 'false',
       'aria-haspopup': 'true',
       'aria-controls': this.targetUid,
-      'aria-owns': this.targetUid,
       'aria-label': this.toggleAriaLabel || this.$q.lang.label[ this.showing === true ? 'collapse' : 'expand' ](this.label)
     }
 

package/src/components/date/QDate.js

@@ -102,7 +102,9 @@ export default Vue.extend({
     },
 
     view () {
-      this.$refs.blurTarget !== void 0 && this.$refs.blurTarget.focus()
+      if (this.$refs.blurTarget !== void 0 && this.$el.contains(document.activeElement) === true) {
+        this.$refs.blurTarget.focus()
+      }
     },
 
     'viewModel.year' (year) {

package/src/components/dialog/QDialog.js

@@ -6,6 +6,7 @@ import ModelToggleMixin from '../../mixins/model-toggle.js'
 import PortalMixin from '../../mixins/portal.js'
 import PreventScrollMixin from '../../mixins/prevent-scroll.js'
 import AttrsMixin, { ariaHidden } from '../../mixins/attrs.js'
+import TransitionMixin from '../../mixins/transition.js'
 
 import { childHasFocus } from '../../utils/dom.js'
 import EscapeKey from '../../utils/private/escape-key.js'
@@ -25,7 +26,7 @@ const positionClass = {
   left: 'fixed-left items-center'
 }
 
-const transitions = {
+const defaultTransitions = {
   standard: ['scale', 'scale'],
   top: ['slide-down', 'slide-up'],
   bottom: ['slide-up', 'slide-down'],
@@ -33,11 +34,17 @@ const transitions = {
   left: ['slide-right', 'slide-left']
 }
 
+const backdropAttrs = {
+  ...ariaHidden,
+  tabindex: -1
+}
+
 export default Vue.extend({
   name: 'QDialog',
 
   mixins: [
     AttrsMixin,
+    TransitionMixin,
     HistoryMixin,
     TimeoutMixin,
     ModelToggleMixin,
@@ -78,20 +85,11 @@ export default Vue.extend({
 
   data () {
     return {
-      transitionState: this.showing,
       animating: false
     }
   },
 
   watch: {
-    showing (val) {
-      if (this.transitionShowComputed !== this.transitionHideComputed) {
-        this.$nextTick(() => {
-          this.transitionState = val
-        })
-      }
-    },
-
     maximized (state) {
       this.showing === true && this.__updateMaximized(state)
     },
@@ -112,18 +110,12 @@ export default Vue.extend({
         (this.square === true ? ' q-dialog__inner--square' : '')
     },
 
-    transitionShowComputed () {
-      return 'q-transition--' + (this.transitionShow === void 0 ? transitions[this.position][0] : this.transitionShow)
+    defaultTransitionShow () {
+      return defaultTransitions[this.position][0]
     },
 
-    transitionHideComputed () {
-      return 'q-transition--' + (this.transitionHide === void 0 ? transitions[this.position][1] : this.transitionHide)
-    },
-
-    transition () {
-      return this.transitionState === true
-        ? this.transitionHideComputed
-        : this.transitionShowComputed
+    defaultTransitionHide () {
+      return defaultTransitions[this.position][1]
     },
 
     useBackdrop () {
@@ -170,13 +162,23 @@ export default Vue.extend({
           return
         }
 
-        node = node.querySelector(selector || '[autofocus], [data-autofocus]') || node
+        node = (selector !== '' ? node.querySelector(selector) : null) ||
+          node.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]') ||
+          node.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]') ||
+          node.querySelector('[autofocus], [data-autofocus]') ||
+          node
         node.focus({ preventScroll: true })
       })
     },
 
-    shake () {
-      this.focus()
+    shake (focusTarget) {
+      if (focusTarget && typeof focusTarget.focus === 'function') {
+        focusTarget.focus({ preventScroll: true })
+      }
+      else {
+        this.focus()
+      }
+
       this.$emit('shake')
 
       const node = this.__getInnerNode()
@@ -208,14 +210,14 @@ export default Vue.extend({
       this.$el.dispatchEvent(create('popup-show', { bubbles: true }))
       this.__updateMaximized(this.maximized)
 
-      EscapeKey.register(this, () => {
+      EscapeKey.register(this, escEvt => {
         if (this.seamless !== true) {
           if (this.persistent === true || this.noEscDismiss === true) {
             this.maximized !== true && this.noShake !== true && this.shake()
           }
           else {
             this.$emit('escape-key')
-            this.hide()
+            this.hide(escEvt)
           }
         }
       })
@@ -274,7 +276,10 @@ export default Vue.extend({
 
       // check null for IE
       if (this.__refocusTarget !== void 0 && this.__refocusTarget !== null) {
-        this.__refocusTarget.focus(evt)
+        ((evt && evt.type.indexOf('key') === 0
+          ? this.__refocusTarget.closest('[tabindex]:not([tabindex^="-"])')
+          : void 0
+        ) || this.__refocusTarget).focus()
         this.__refocusTarget = void 0
       }
 
@@ -338,7 +343,7 @@ export default Vue.extend({
         this.hide(e)
       }
       else if (this.noShake !== true) {
-        this.shake()
+        this.shake(e.relatedTarget)
       }
     },
 
@@ -365,15 +370,15 @@ export default Vue.extend({
         }, this.useBackdrop === true ? [
           h('div', {
             staticClass: 'q-dialog__backdrop fixed-full',
-            attrs: ariaHidden,
+            attrs: backdropAttrs,
             on: cache(this, 'bkdrop', {
-              click: this.__onBackdropClick
+              focusin: this.__onBackdropClick
             })
           })
         ] : null),
 
         h('transition', {
-          props: { name: this.transition }
+          props: { ...this.transitionProps }
         }, [
           this.showing === true ? h('div', {
             ref: 'inner',

package/src/components/dialog/QDialog.json

@@ -143,7 +143,15 @@
     },
 
     "shake": {
-      "desc": "Shakes dialog"
+      "desc": "Shakes dialog",
+      "params": {
+        "focusTarget": {
+          "type": "Element",
+          "desc": "Optional DOM Element to be focused after shake",
+          "examples": [ "document.getElementById('example')" ],
+          "addedIn": "v1.22.1"
+        }
+      }
     }
   },
 

package/src/components/dialog-bottom-sheet/BottomSheet.js

@@ -78,7 +78,9 @@ export default Vue.extend({
             class: action.classes,
             attrs: attrsGridItem,
             on: {
-              click: () => this.onOk(action),
+              click: () => {
+                this.onOk(action)
+              },
               keyup: e => {
                 e.keyCode === 13 && this.onOk(action)
               }
@@ -117,9 +119,8 @@ export default Vue.extend({
               dark: this.isDark
             },
             on: {
-              click: () => this.onOk(action),
-              keyup: e => {
-                e.keyCode === 13 && this.onOk(action)
+              click: () => {
+                this.onOk(action)
               }
             }
           }, [

package/src/components/expansion-item/QExpansionItem.js

@@ -145,7 +145,6 @@ export default Vue.extend({
       return {
         role: 'button',
         'aria-expanded': this.showing === true ? 'true' : 'false',
-        'aria-owns': this.targetUid,
         'aria-controls': this.targetUid,
         'aria-label': toggleAriaLabel
       }