quasar 1.22.0 → 1.22.1

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.1",
   "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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "1.22.0",
+  "version": "1.22.1",
   "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",

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 (refocusTarget) {
+      if (refocusTarget && typeof refocusTarget.focus === 'function') {
+        refocusTarget.focus({ preventScroll: true })
+      }
+      else {
+        this.focus()
+      }
+
       this.$emit('shake')
 
       const node = this.__getInnerNode()
@@ -338,7 +340,7 @@ export default Vue.extend({
         this.hide(e)
       }
       else if (this.noShake !== true) {
-        this.shake()
+        this.shake(e.relatedTarget)
       }
     },
 
@@ -365,15 +367,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/form/QForm.js

@@ -156,7 +156,9 @@ export default Vue.extend({
       addFocusFn(() => {
         if (!this.$el) { return }
 
-        const target = this.$el.querySelector('[autofocus], [data-autofocus]') ||
+        const target = this.$el.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]') ||
+          this.$el.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]') ||
+          this.$el.querySelector('[autofocus], [data-autofocus]') ||
           Array.prototype.find.call(this.$el.querySelectorAll('[tabindex]'), el => el.tabIndex > -1)
 
         target !== null && target !== void 0 && target.focus({ preventScroll: true })

package/src/components/inner-loading/QInnerLoading.js

@@ -78,11 +78,6 @@ export default Vue.extend({
   },
 
   render (h) {
-    return h('transition', {
-      props: {
-        name: this.transition,
-        appear: true
-      }
-    }, this.__getContent(h))
+    return h('transition', { props: { ...this.transitionProps } }, this.__getContent(h))
   }
 })

package/src/components/item/QList.js

@@ -16,7 +16,12 @@ export default Vue.extend({
     bordered: Boolean,
     dense: Boolean,
     separator: Boolean,
-    padding: Boolean
+    padding: Boolean,
+
+    tag: {
+      type: String,
+      default: 'div'
+    }
   },
 
   computed: {
@@ -31,7 +36,7 @@ export default Vue.extend({
   },
 
   render (h) {
-    return h('div', {
+    return h(this.tag, {
       class: this.classes,
       attrs,
       on: { ...this.qListeners }

package/src/components/item/QList.json

@@ -1,4 +1,6 @@
 {
+  "mixins": [ "mixins/tag" ],
+
   "meta": {
     "docsUrl": "https://v1.quasar.dev/vue-components/list-and-list-items"
   },
@@ -30,6 +32,12 @@
       "type": "Boolean",
       "desc": "Applies a material design-like padding on top and bottom",
       "category": "content"
+    },
+
+    "tag": {
+      "default": "div",
+      "examples": [ "div", "ul", "ol" ],
+      "addedIn": "v1.22.1"
     }
   },
 

package/src/components/menu/QMenu.js

@@ -140,7 +140,10 @@ export default Vue.extend({
           : void 0
 
         if (node !== void 0 && node.contains(document.activeElement) !== true) {
-          node = node.querySelector('[autofocus], [data-autofocus]') || node
+          node = node.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]') ||
+            node.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]') ||
+            node.querySelector('[autofocus], [data-autofocus]') ||
+            node
           node.focus({ preventScroll: true })
         }
       })
@@ -321,7 +324,7 @@ export default Vue.extend({
 
     __renderPortal (h) {
       return h('transition', {
-        props: { name: this.transition }
+        props: { ...this.transitionProps }
       }, [
         this.showing === true ? h('div', {
           ref: 'inner',

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

@@ -101,7 +101,7 @@ export default Vue.extend({
     horizontalScrollPercentage () {
       const diff = this.scroll.horizontal.size - this.container.horizontal
       if (diff <= 0) { return 0 }
-      const p = between(this.scroll.horizontal.position / diff, 0, 1)
+      const p = between(Math.abs(this.scroll.horizontal.position) / diff, 0, 1)
       return Math.round(p * 10000) / 10000
     },
 
@@ -162,7 +162,7 @@ export default Vue.extend({
       return {
         ...this.thumbStyle,
         ...this.horizontalThumbStyle,
-        left: `${this.horizontalThumbStart}px`,
+        [ this.$q.lang.rtl === true ? 'right' : 'left' ]: `${this.horizontalThumbStart}px`,
         width: `${this.horizontalThumbSize}px`
       }
     },
@@ -251,6 +251,12 @@ export default Vue.extend({
     }
   },
 
+  watch: {
+    '$q.lang.rtl' (rtl) {
+      this.setScrollPosition('horizontal', Math.abs(this.scroll.horizontal.position) * (rtl === true ? -1 : 1))
+    }
+  },
+
   methods: {
     getScrollTarget () {
       return this.$refs.target
@@ -330,7 +336,7 @@ export default Vue.extend({
 
       this.setScrollPosition(
         axis,
-        percentage * (this.scroll[axis].size - this.container[axis]),
+        percentage * (this.scroll[axis].size - this.container[axis]) * (axis === 'horizontal' && this.$q.lang.rtl === true ? -1 : 1),
         duration
       )
     },

package/src/components/scroll-observer/QScrollObserver.js

@@ -32,6 +32,10 @@ export default Vue.extend({
     scrollTarget () {
       this.__unconfigureScrollTarget()
       this.__configureScrollTarget()
+    },
+
+    '$q.lang.rtl' () {
+      this.__emit()
     }
   },
 

package/src/components/select/QSelect.sass

@@ -17,8 +17,8 @@
   &__autocomplete-input
     position: absolute
     outline: 0 !important
-    width: 0
-    height: 0
+    width: 1px // Safari scrolls on top if 0
+    height: 1px // Safari scrolls on top if 0
     padding: 0
     border: 0
     opacity: 0

package/src/components/select/QSelect.styl

@@ -17,8 +17,8 @@
   &__autocomplete-input
     position: absolute
     outline: 0 !important
-    width: 0
-    height: 0
+    width: 1px // Safari scrolls on top if 0
+    height: 1px // Safari scrolls on top if 0
     padding: 0
     border: 0
     opacity: 0

package/src/components/tooltip/QTooltip.js

@@ -222,7 +222,7 @@ export default Vue.extend({
 
     __renderPortal (h) {
       return h('transition', {
-        props: { name: this.transition }
+        props: { ...this.transitionProps }
       }, [
         this.showing === true ? h('div', {
           staticClass: 'q-tooltip q-tooltip--style q-position-engine no-pointer-events',

package/src/mixins/mask.js

@@ -190,7 +190,7 @@ export default {
 
       this.computedMask = mask
       this.computedUnmask = val => {
-        const unmaskMatch = unmaskMatcher.exec(val)
+        const unmaskMatch = unmaskMatcher.exec(this.reverseFillMask === true ? val : val.slice(0, mask.length))
         if (unmaskMatch !== null) {
           val = unmaskMatch.slice(1).join('')
         }

package/src/mixins/transition.js

@@ -11,23 +11,22 @@ export default {
     }
   },
 
-  data () {
-    return {
-      transitionState: this.showing
-    }
-  },
+  computed: {
+    transitionProps () {
+      const show = `q-transition--${this.transitionShow || this.defaultTransitionShow}`
+      const hide = `q-transition--${this.transitionHide || this.defaultTransitionHide}`
 
-  watch: {
-    showing (val) {
-      this.transitionShow !== this.transitionHide && this.$nextTick(() => {
-        this.transitionState = val
-      })
-    }
-  },
+      return {
+        appear: true,
 
-  computed: {
-    transition () {
-      return 'q-transition--' + (this.transitionState === true ? this.transitionHide : this.transitionShow)
+        enterClass: `${show}-enter`,
+        enterActiveClass: `${show}-enter-active`,
+        enterToClass: `${show}-enter-to`,
+
+        leaveClass: `${hide}-leave`,
+        leaveActiveClass: `${hide}-leave-active`,
+        leaveToClass: `${hide}-leave-to`
+      }
     }
   }
 }