feat(QCarousel): RTL support

Author: rstoenescu

src/components/carousel/QCarousel.js

@@ -66,8 +66,17 @@ export default {
     }
   },
   computed: {
+    rtlDir () {
+      return this.$q.i18n.rtl ? -1 : 1
+    },
+    arrowIcon () {
+      const ico = [ this.$q.icon.carousel.left, this.$q.icon.carousel.right ]
+      return this.$q.i18n.rtl
+        ? ico.reverse()
+        : ico
+    },
     trackPosition () {
-      return cssTransform(`translateX(${this.position}%)`)
+      return cssTransform(`translateX(${this.rtlDir * this.position}%)`)
     },
     infiniteLeft () {
       return this.infinite && this.slidesNumber > 1 && this.positionSlide < 0
@@ -204,7 +213,7 @@ export default {
         this.__cleanup()
       }
 
-      let delta = (event.direction === 'left' ? -1 : 1) * event.distance.x
+      let delta = this.rtlDir * (event.direction === 'left' ? -1 : 1) * event.distance.x
 
       if (
         (this.infinite && this.slidesNumber < 2) ||
@@ -221,13 +230,14 @@ export default {
 
       const
         pos = this.initialPosition + delta / this.$refs.track.offsetWidth * 100,
-        slidePos = (event.direction === 'left' ? this.slide + 1 : this.slide - 1)
+        slidePos = this.slide + this.rtlDir * (event.direction === 'left' ? 1 : -1)
 
       if (this.position !== pos) {
         this.position = pos
       }
       if (this.positionSlide !== slidePos) {
         this.positionSlide = slidePos
+        console.log(slidePos)
       }
 
       if (event.isFinal) {
@@ -371,13 +381,13 @@ export default {
       ]),
       this.arrows ? h(QBtn, {
         staticClass: 'q-carousel-left-arrow absolute',
-        props: { color: this.color, icon: this.$q.icon.carousel.left, fabMini: true, flat: true },
+        props: { color: this.color, icon: this.arrowIcon[0], fabMini: true, flat: true },
         directives: [{ name: 'show', value: this.canGoToPrevious }],
         on: { click: this.previous }
       }) : null,
       this.arrows ? h(QBtn, {
         staticClass: 'q-carousel-right-arrow absolute',
-        props: { color: this.color, icon: this.$q.icon.carousel.right, fabMini: true, flat: true },
+        props: { color: this.color, icon: this.arrowIcon[1], fabMini: true, flat: true },
         directives: [{ name: 'show', value: this.canGoToNext }],
         on: { click: this.next }
       }) : null,