fix(pickerheader): Reorder prev/next buttons when rtl

Author: mst101

src/components/PickerHeader.vue

@@ -2,7 +2,7 @@
   <header>
     <span
       class="prev"
-      :class="{ disabled: isLeftNavDisabled }"
+      :class="{ disabled: isPreviousDisabled, rtl: isRtl }"
       @click="$emit('page-change', -1)"
     >
       <slot name="prevIntervalBtn">
@@ -12,7 +12,7 @@
     <slot />
     <span
       class="next"
-      :class="{ disabled: isRightNavDisabled }"
+      :class="{ disabled: isNextDisabled, rtl: isRtl }"
       @click="$emit('page-change', 1)"
     >
       <slot name="nextIntervalBtn">
@@ -39,23 +39,5 @@ export default {
       required: true,
     },
   },
-  computed: {
-    /**
-     * Is the left hand navigation button disabled?
-     * @return {Boolean}
-     */
-    /* istanbul ignore next */
-    isLeftNavDisabled() {
-      return this.isRtl ? this.isNextDisabled : this.isPreviousDisabled
-    },
-    /**
-     * Is the right hand navigation button disabled?
-     * @return {Boolean}
-     */
-    /* istanbul ignore next */
-    isRightNavDisabled() {
-      return this.isRtl ? this.isPreviousDisabled : this.isNextDisabled
-    },
-  },
 }
 </script>

src/styles/style.scss

@@ -32,19 +32,18 @@
   }
 
   header {
-    display: block;
+    display: flex;
+    justify-content: space-between;
     line-height: 40px;
 
     span {
       display: inline-block;
-      float: left;
       text-align: center;
       width: 71.42857142857143%;
     }
 
     .prev,
     .next {
-      float: left;
       max-height: 40px;
       position: relative;
       width: 14.285714285714286%;
@@ -61,6 +60,10 @@
           transform: translateX(-50%) translateY(-50%);
         }
       }
+
+      &.rtl {
+        transform: rotate(180deg);
+      }
     }
 
     .prev {