misc: improves to optimize DX

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "none",
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "avoid"
+}

dist/vue-snap.css

@@ -16,7 +16,7 @@
     padding: 0;
 }
 
-.vs-carousel__wrapper::-webkit-scrollbar {
+.vs-carousel__wrapper.vs-carousel__wrapper--hide-scrollbar::-webkit-scrollbar {
     display: none;
 }
 

package.json

@@ -36,7 +36,7 @@
   },
   "homepage": "https://github.com/bartdominiak/vue-snap#README",
   "peerDependencies": {
-    "vue": "^2.6.12"
+    "vue": "^2.6.14"
   },
   "dependencies": {
     "core-js": "^3.8.0",
@@ -72,7 +72,7 @@
     "vue-lazy": "^0.3.0",
     "vue-loader": "^15.9.5",
     "vue-style-loader": "^4.1.2",
-    "vue-template-compiler": "^2.6.12",
+    "vue-template-compiler": "^2.6.14",
     "vuepress": "^1.7.1"
   },
   "husky": {

src/components/Carousel/Carousel.stories.js

@@ -105,6 +105,35 @@ export const MultipleCustomArrows = (_, { argTypes }) => ({
   `
 })
 
+export const MultipleCustomArrowsIcons = (_, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  data: () => ({ carouselMock }),
+  components: { Carousel, Slide },
+  methods: actions('pageEvent', 'boundLeftEvent', 'boundRightEvent', 'mountedEvent'),
+  template: `
+    <carousel
+      class="story-carousel story-carousel--colors story-carousel--multiple"
+      :hide-arrows="hideArrows"
+      :hide-arrows-on-bound="hideArrowsOnBound"
+      @page="pageEvent"
+      @bound-left="boundLeftEvent"
+      @bound-right="boundRightEvent"
+      @mounted="mountedEvent"
+    >
+      <slide
+        class="story-carousel__slide"
+        v-for="{ id, content } in carouselMock"
+        :key="id"
+      >
+        {{ content }}
+      </slide>
+
+      <template #arrowLeftIcon>L</template>
+      <template #arrowRightIcon>R</template>
+    </carousel>
+  `
+})
+
 export const NonRegular = (_, { argTypes }) => ({
   props: Object.keys(argTypes),
   data: () => ({ carouselMock }),
@@ -132,6 +161,36 @@ export const NonRegular = (_, { argTypes }) => ({
   `
 })
 
+export const WithScrollbar = (_, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  data: () => ({ carouselMock }),
+  components: { Carousel, Slide },
+  methods: actions('pageEvent', 'boundLeftEvent', 'boundRightEvent', 'mountedEvent'),
+  template: `
+    <carousel
+      class="story-carousel story-carousel--colors story-carousel--multiple"
+      :hide-arrows="hideArrows"
+      :hide-arrows-on-bound="hideArrowsOnBound"
+      :hide-scrollbar="hideScrollbar"
+      @page="pageEvent"
+      @bound-left="boundLeftEvent"
+      @bound-right="boundRightEvent"
+      @mounted="mountedEvent"
+    >
+      <slide
+        class="story-carousel__slide"
+        v-for="{ id, content } in carouselMock"
+        :key="id"
+      >
+        {{ content }}
+      </slide>
+    </carousel>
+  `
+})
+WithScrollbar.args = {
+  hideScrollbar: false
+}
+
 export const Images = (_, { argTypes }) => ({
   props: Object.keys(argTypes),
   data: () => ({ carouselMock }),

src/components/Carousel/Carousel.vue

@@ -4,6 +4,9 @@
       :is="tag"
       ref="vsWrapper"
       class="vs-carousel__wrapper"
+      :class="{
+        'vs-carousel__wrapper--hide-scrollbar': hideScrollbar
+      }"
     >
       <!-- @slot Slot for Slides -->
       <slot />
@@ -13,36 +16,34 @@
     <slot
       v-if="!hideArrows"
       name="arrows"
-      :change-slide="changeSlide"
-      :bound-left="boundLeft"
-      :bound-right="boundRight"
+      v-bind="{
+        hideArrowsOnBound,
+        changeSlide,
+        boundLeft,
+        boundRight,
+        i18n
+      }"
     >
       <button
         v-show="hideArrowsOnBound ? !boundLeft : true"
         type="button"
         :aria-label="i18n.slideLeft"
         :disabled="boundLeft"
-        class="
-          vs-carousel__arrows
-          vs-carousel__arrows--left
-        "
+        class="vs-carousel__arrows vs-carousel__arrows--left"
         @click="changeSlide(-1)"
       >
-        ←
+        <slot name="arrowLeftIcon"> ← </slot>
       </button>
 
       <button
         v-show="hideArrowsOnBound ? !boundRight : true"
         type="button"
         :aria-label="i18n.slideRight"
         :disabled="boundRight"
-        class="
-          vs-carousel__arrows
-          vs-carousel__arrows--right
-        "
+        class="vs-carousel__arrows vs-carousel__arrows--right"
         @click="changeSlide(1)"
       >
-        →
+        <slot name="arrowRightIcon"> → </slot>
       </button>
     </slot>
   </div>
@@ -88,6 +89,13 @@ export default {
         const translations = ['slideLeft', 'slideRight']
         return translations.every(key => key in config)
       }
+    },
+    /**
+     * Scrollbar
+     */
+    hideScrollbar: {
+      type: Boolean,
+      default: true
     }
   },
   data: () => ({
@@ -140,7 +148,7 @@ export default {
        * @type {Event}
        */
       this.$emit('bound-right', true)
-    },
+    }
   },
   mounted() {
     this.calcOnInit()
@@ -224,7 +232,7 @@ export default {
       this.wrapperVisibleWidth = this.$refs.vsWrapper.offsetWidth
     },
     calcSlidesWidth() {
-      const childNodes = [ ...this.$refs.vsWrapper.children ]
+      const childNodes = [...this.$refs.vsWrapper.children]
 
       this.slidesWidth = childNodes.map(node => ({
         offsetLeft: node.offsetLeft,
@@ -233,11 +241,13 @@ export default {
     },
     getCurrentPage() {
       // Last element if there is nothing left to scroll
-      if (approximatelyEqual(
-        this.currentPos + this.wrapperVisibleWidth,
-        this.wrapperScrollWidth,
-        5
-      )) {
+      if (
+        approximatelyEqual(
+          this.currentPos + this.wrapperVisibleWidth,
+          this.wrapperScrollWidth,
+          5
+        )
+      ) {
         return this.slidesWidth.length - 1
       }
 
@@ -264,10 +274,12 @@ export default {
         this.calcOnInit()
       })
 
-      this.observer.observe(
-        this.$refs.vsWrapper,
-        { attributes: true, childList: true, characterData: true, subtree: true }
-      )
+      this.observer.observe(this.$refs.vsWrapper, {
+        attributes: true,
+        childList: true,
+        characterData: true,
+        subtree: true
+      })
     },
     changeSlide(direction) {
       this.goToSlide(this.currentPage + direction)