@designcrowd/fe-shared-lib 1.5.36 → 1.6.0-eng-4039

package/src/atoms/components/Carousel/Carousel.vue

@@ -1,352 +1,384 @@
-<template>
-  <div :class="['carousel tw-flex tw-flex-col tw-box-content', ...classes]" @contextmenu="onRightClick">
-    <div class="tw-flex tw-items-center tw-relative">
-      <slot v-if="showControls" name="arrow-left">
-        <div id="btn_carousel_prev" class="carousel__button-nav" :class="navigationPrevClass">
-          <div
-            class="tw-hidden sm:tw-block tw-cursor-pointer tw-absolute tw-z-10 tw--left-16 tw-top-1/2 tw-transform tw--translate-y-1/2 tw-h-10 tw-w-10 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
-            :class="{
-              'nav-carousel__button-prev-pointer': navCarousel,
-            }"
-          >
-            <Icon
-              classes="tw--mb-1 tw-absolute tw-left-0 tw-right-0 tw-m-auto tw-flex tw-justify-center tw-top-1/2 tw-transform tw--translate-y-1/2"
-              name="chevron-left"
-              size="sm"
-            />
-          </div>
-          <div
-            class="sm:tw-hidden tw-cursor-pointer tw-mr-2 tw-h-6 tw-w-6 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
-            :class="{
-              'nav-carousel__button-prev-pointer': navCarousel,
-            }"
-          >
-            <Icon
-              classes="tw--mb-1 tw-absolute tw-left-0 tw-right-2 tw-m-auto tw-flex tw-justify-center tw-top-1/2 tw-transform tw--translate-y-1/2"
-              name="chevron-left"
-              size="xs"
-            />
-          </div>
-        </div>
-      </slot>
-      <swiper
-        :ref="swiperRef"
-        :modules="modules"
-        :keyboard="swiperOptions.keyboard"
-        :navigation="swiperOptions.navigation"
-        :pagination="swiperOptions.pagination"
-        :space-between="swiperOptions.spaceBetween"
-        :slides-per-view="swiperOptions.slidesPerView"
-        :slides-per-group="swiperOptions.slidesPerGroup"
-        :loop="swiperOptions.loop"
-        :initial-slide="swiperOptions.initialSlide"
-        :breakpoints="swiperOptions.breakpoints"
-        :centered-slides="swiperOptions.centeredSlides"
-        :center-insufficient-slides="swiperOptions.centerInsufficientSlides"
-        :auto-height="swiperOptions.autoHeight"
-        :autoplay="swiperOptions.autoplay"
-        :free-mode="swiperOptions.freeMode"
-        @swiper="onSwiper"
-      >
-        <swiper-slide v-for="(slide, i) in cards" :key="i" :style="{ width: slide.width }">
-          <div class="tw-h-full">
-            <slot name="slide" :slide="slide" :index="i"></slot>
-          </div>
-        </swiper-slide>
-      </swiper>
-      <slot v-if="showControls" name="arrow-right">
-        <div id="btn_carousel_next" class="carousel__button-nav" :class="navigationNextClass">
-          <div
-            class="tw-hidden sm:tw-block tw-cursor-pointer tw-absolute tw-z-10 tw--right-16 tw-top-1/2 tw-transform tw--translate-y-1/2 tw-h-10 tw-w-10 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
-            :class="{
-              'nav-carousel__button-next-pointer': navCarousel,
-            }"
-          >
-            <Icon
-              classes="tw--mb-1 tw-absolute tw-left-0 tw-right-0 tw-m-auto tw-flex tw-justify-center tw-top-1/2 tw-transform tw--translate-y-1/2"
-              name="chevron-right"
-              size="sm"
-            />
-          </div>
-          <div
-            class="sm:tw-hidden tw-cursor-pointer tw-ml-2 tw-h-6 tw-w-6 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
-            :class="{
-              'nav-carousel__button-next-pointer': navCarousel,
-            }"
-          >
-            <Icon
-              classes="tw--mb-1 tw-absolute tw-left-2 tw-right-0 tw-m-auto tw-flex tw-justify-center tw-top-1/2 tw-transform tw--translate-y-1/2"
-              name="chevron-right"
-              size="xs"
-            />
-          </div>
-        </div>
-      </slot>
-    </div>
-    <div
-      v-if="!hideBulletsElement"
-      class="swiper-pagination"
-      :class="[
-        {
-          'pagination-hidden': navCarousel,
-          'swiper-pagination--desktop-only': hideBulletsOnMobile,
-        },
-        paginationClass,
-      ]"
-    ></div>
-  </div>
-</template>
-
-<script>
-/* eslint-disable import/no-unresolved */
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import 'swiper/css';
-import 'swiper/css/navigation';
-import 'swiper/css/free-mode';
-/* eslint-enable import/no-unresolved */
-import merge from 'deepmerge';
-import { Navigation, Pagination, Autoplay, Keyboard, FreeMode } from 'swiper/modules';
-import Icon from '../Icon/Icon.vue';
-
-export default {
-  components: {
-    Swiper,
-    SwiperSlide,
-    Icon,
-  },
-  props: {
-    classes: {
-      type: [String, Object, Array],
-      required: false,
-      default: () => [],
-    },
-    cards: {
-      type: Array,
-      required: true,
-    },
-    options: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    disableRightClick: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    navCarousel: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    showControls: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    showBullets: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    hideBulletsOnMobile: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    hideBulletsElement: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    swiperRef: {
-      type: String,
-      default: 'js-swiper',
-    },
-    navigationUniqueIndexer: {
-      type: String,
-      default: undefined,
-    },
-    slideIndex: {
-      type: Number,
-      required: false,
-      default: undefined,
-    },
-  },
-  setup() {
-    return {
-      modules: [Keyboard, Navigation, Pagination, Autoplay, FreeMode],
-    };
-  },
-  data() {
-    return {
-      swiper: null,
-      defaultOptions: {
-        navigation: {
-          prevEl: '.carousel__button-prev',
-          nextEl: '.carousel__button-next',
-        },
-        pagination: {
-          el: '.swiper-pagination',
-          clickable: true,
-        },
-        speed: 600,
-      },
-    };
-  },
-  computed: {
-    navigationPrevClass() {
-      if (this.navigationUniqueIndexer) {
-        return `carousel__button-prev--${this.navigationUniqueIndexer}`;
-      }
-      return 'carousel__button-prev';
-    },
-    navigationNextClass() {
-      if (this.navigationUniqueIndexer) {
-        return `carousel__button-next--${this.navigationUniqueIndexer}`;
-      }
-      return 'carousel__button-next';
-    },
-    paginationClass() {
-      if (this.navigationUniqueIndexer) {
-        return `pagination--${this.navigationUniqueIndexer}`;
-      }
-      return '';
-    },
-    swiperOptions() {
-      const defaultOptions = { ...this.defaultOptions };
-
-      if (!this.showControls) {
-        delete defaultOptions.navigation;
-        delete defaultOptions.pagination;
-      }
-
-      if (!this.showBullets || this.hideBulletsElement || !this.showControls) {
-        delete defaultOptions.pagination;
-      }
-
-      const options = merge(defaultOptions, this.options || {});
-
-      options.initialSlide = this.slideIndex || options.initialSlide;
-
-      options.keyboard = defaultOptions.keyboard || {
-        enabled: true,
-      };
-
-      return options;
-    },
-  },
-  watch: {
-    slideIndex(newIdx) {
-      if (!this.swiper || Number.isNaN(newIdx)) {
-        return;
-      }
-
-      this.swiper.update();
-      this.swiper.slideTo(newIdx, 0, false);
-    },
-  },
-  methods: {
-    onRightClick(e) {
-      if (this.disableRightClick) {
-        e.preventDefault();
-        return false;
-      }
-
-      return true;
-    },
-    onSwiper() {
-      this.swiper = this.$refs[this.swiperRef].$el.swiper;
-      this.swiper.update();
-
-      this.$emit('on-carousel-load');
-    },
-    onClickNextSlide() {
-      if (this.swiper) {
-        this.swiper.slideNext();
-      }
-    },
-    onClickPrevSlide() {
-      if (this.swiper) {
-        this.swiper.slidePrev();
-      }
-    },
-    update() {
-      this.swiper.update();
-    },
-  },
-};
-</script>
-
-<style scoped>
-.carousel :deep(.swiper-button-next, .swiper-button-prev) {
-  @apply tw-hidden;
-}
-
-.carousel :deep(.swiper-button-disabled) {
-  @apply tw-hidden;
-}
-
-.carousel :deep(.swiper-pagination) {
-  @apply tw-static tw-pt-6;
-}
-
-.carousel :deep(.swiper-pagination-bullets) {
-  @apply tw-text-center;
-}
-
-.carousel :deep(.swiper-pagination--desktop-only) {
-  @apply tw-hidden sm:tw-block;
-}
-
-.carousel :deep(.carousel__button-nav) {
-  @apply tw-relative;
-}
-
-.carousel :deep(.swiper-pagination-bullet) {
-  border-color: #595959;
-  @apply tw-border-2 tw-border-solid tw-opacity-100 tw-bg-transparent tw-w-2 tw-h-2 tw-inline-block tw-rounded tw-cursor-pointer;
-}
-
-.carousel :deep(.swiper-pagination-bullet.swiper-pagination-bullet-active) {
-  background-color: #595959;
-}
-
-.carousel :deep(.swiper-pagination-bullet:not(:last-child)) {
-  @apply tw-mr-2;
-}
-
-.carousel :deep(.swiper-pagination-bullet:only-child) {
-  @apply tw-hidden;
-}
-
-.carousel :deep(.swiper-container) {
-  @apply tw-w-full;
-}
-
-.carousel :deep(.swiper-slide) {
-  @apply tw-h-auto tw-w-auto;
-}
-
-.nav-carousel__button-next-pointer,
-.nav-carousel__button-prev-pointer {
-  background: none;
-  box-shadow: none;
-  border: none;
-  position: relative;
-  vertical-align: middle;
-  --tw-translate-y: 0;
-}
-
-.nav-carousel__button-next-pointer {
-  right: 0;
-}
-
-.nav-carousel__button-prev-pointer {
-  left: 0;
-}
-
-.pagination-hidden {
-  display: none !important;
-}
-</style>
+<template>
+  <div :class="['carousel tw-flex tw-flex-col tw-box-content', { 'carousel--hide-scrollbar': !shouldShowScrollbar }, ...classes]" @contextmenu="onRightClick">
+    <div class="tw-flex tw-items-center tw-relative">
+      <slot v-if="showControls" name="arrow-left">
+        <div id="btn_carousel_prev" class="carousel__button-nav" :class="navigationPrevClass">
+          <div
+            class="tw-hidden sm:tw-block tw-cursor-pointer tw-absolute tw-z-10 tw--left-16 tw-top-1/2 tw-transform tw--translate-y-1/2 tw-h-10 tw-w-10 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
+            :class="{
+              'nav-carousel__button-prev-pointer': navCarousel,
+            }"
+          >
+            <Icon
+              classes="tw--mb-1 tw-absolute tw-left-0 tw-right-0 tw-m-auto tw-flex tw-justify-center tw-top-1/2 tw-transform tw--translate-y-1/2"
+              name="chevron-left"
+              size="sm"
+            />
+          </div>
+          <div
+            class="sm:tw-hidden tw-cursor-pointer tw-mr-2 tw-h-6 tw-w-6 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
+            :class="{
+              'nav-carousel__button-prev-pointer': navCarousel,
+            }"
+          >
+            <Icon
+              classes="tw--mb-1 tw-absolute tw-left-0 tw-right-2 tw-m-auto tw-flex tw-justify-center tw-top-1/2 tw-transform tw--translate-y-1/2"
+              name="chevron-left"
+              size="xs"
+            />
+          </div>
+        </div>
+      </slot>
+      <swiper
+        :ref="swiperRef"
+        :modules="modules"
+        :keyboard="swiperOptions.keyboard"
+        :navigation="swiperOptions.navigation"
+        :pagination="swiperOptions.pagination"
+        :space-between="swiperOptions.spaceBetween"
+        :slides-per-view="swiperOptions.slidesPerView"
+        :slides-per-group="swiperOptions.slidesPerGroup"
+        :loop="swiperOptions.loop"
+        :initial-slide="swiperOptions.initialSlide"
+        :breakpoints="swiperOptions.breakpoints"
+        :centered-slides="swiperOptions.centeredSlides"
+        :center-insufficient-slides="swiperOptions.centerInsufficientSlides"
+        :auto-height="swiperOptions.autoHeight"
+        :autoplay="swiperOptions.autoplay"
+        :free-mode="swiperOptions.freeMode"
+        :mousewheel="mousewheelConfig"
+        @swiper="onSwiper"
+      >
+        <swiper-slide v-for="(slide, i) in cards" :key="i" :style="{ width: slide.width }">
+          <div class="tw-h-full">
+            <slot name="slide" :slide="slide" :index="i"></slot>
+          </div>
+        </swiper-slide>
+      </swiper>
+      <slot v-if="showControls" name="arrow-right">
+        <div id="btn_carousel_next" class="carousel__button-nav" :class="navigationNextClass">
+          <div
+            class="tw-hidden sm:tw-block tw-cursor-pointer tw-absolute tw-z-10 tw--right-16 tw-top-1/2 tw-transform tw--translate-y-1/2 tw-h-10 tw-w-10 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
+            :class="{
+              'nav-carousel__button-next-pointer': navCarousel,
+            }"
+          >
+            <Icon
+              classes="tw--mb-1 tw-absolute tw-left-0 tw-right-0 tw-m-auto tw-flex tw-justify-center tw-top-1/2 tw-transform tw--translate-y-1/2"
+              name="chevron-right"
+              size="sm"
+            />
+          </div>
+          <div
+            class="sm:tw-hidden tw-cursor-pointer tw-ml-2 tw-h-6 tw-w-6 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
+            :class="{
+              'nav-carousel__button-next-pointer': navCarousel,
+            }"
+          >
+            <Icon
+              classes="tw--mb-1 tw-absolute tw-left-2 tw-right-0 tw-m-auto tw-flex tw-justify-center tw-top-1/2 tw-transform tw--translate-y-1/2"
+              name="chevron-right"
+              size="xs"
+            />
+          </div>
+        </div>
+      </slot>
+    </div>
+    <div
+      v-if="!hideBulletsElement"
+      class="swiper-pagination"
+      :class="[
+        {
+          'pagination-hidden': navCarousel,
+          'swiper-pagination--desktop-only': hideBulletsOnMobile,
+        },
+        paginationClass,
+      ]"
+    ></div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable import/no-unresolved */
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/free-mode';
+/* eslint-enable import/no-unresolved */
+import merge from 'deepmerge';
+import { Navigation, Pagination, Autoplay, Keyboard, FreeMode, Mousewheel } from 'swiper/modules';
+import Icon from '../Icon/Icon.vue';
+
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+    Icon,
+  },
+  props: {
+    classes: {
+      type: [String, Object, Array],
+      required: false,
+      default: () => [],
+    },
+    cards: {
+      type: Array,
+      required: true,
+    },
+    options: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    disableRightClick: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    navCarousel: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    showControls: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    showBullets: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    hideBulletsOnMobile: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    hideBulletsElement: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    swiperRef: {
+      type: String,
+      default: 'js-swiper',
+    },
+    navigationUniqueIndexer: {
+      type: String,
+      default: undefined,
+    },
+    slideIndex: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+    isMousewheelScrollEnabled: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    shouldShowScrollbar: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  setup() {
+    return {
+      modules: [Keyboard, Navigation, Pagination, Autoplay, FreeMode, Mousewheel],
+    };
+  },
+  data() {
+    return {
+      swiper: null,
+      defaultOptions: {
+        navigation: {
+          prevEl: '.carousel__button-prev',
+          nextEl: '.carousel__button-next',
+        },
+        pagination: {
+          el: '.swiper-pagination',
+          clickable: true,
+        },
+        speed: 600,
+      },
+    };
+  },
+  computed: {
+    navigationPrevClass() {
+      if (this.navigationUniqueIndexer) {
+        return `carousel__button-prev--${this.navigationUniqueIndexer}`;
+      }
+      return 'carousel__button-prev';
+    },
+    navigationNextClass() {
+      if (this.navigationUniqueIndexer) {
+        return `carousel__button-next--${this.navigationUniqueIndexer}`;
+      }
+      return 'carousel__button-next';
+    },
+    paginationClass() {
+      if (this.navigationUniqueIndexer) {
+        return `pagination--${this.navigationUniqueIndexer}`;
+      }
+      return '';
+    },
+    mousewheelConfig() {
+      if (!this.isMousewheelScrollEnabled && !this.swiperOptions.mousewheel) {
+        return false;
+      }
+      if (this.swiperOptions.mousewheel && typeof this.swiperOptions.mousewheel === 'object') {
+        return this.swiperOptions.mousewheel;
+      }
+      return {
+        forceToAxis: false,
+        releaseOnEdges: true,
+      };
+    },
+    swiperOptions() {
+      const defaultOptions = { ...this.defaultOptions };
+
+      if (!this.showControls) {
+        delete defaultOptions.navigation;
+        delete defaultOptions.pagination;
+      }
+
+      if (!this.showBullets || this.hideBulletsElement || !this.showControls) {
+        delete defaultOptions.pagination;
+      }
+
+      const options = merge(defaultOptions, this.options || {});
+
+      options.initialSlide = this.slideIndex || options.initialSlide;
+
+      options.keyboard = defaultOptions.keyboard || {
+        enabled: true,
+      };
+
+      return options;
+    },
+  },
+  watch: {
+    slideIndex(newIdx) {
+      if (!this.swiper || Number.isNaN(newIdx)) {
+        return;
+      }
+
+      this.swiper.update();
+      this.swiper.slideTo(newIdx, 0, false);
+    },
+  },
+  methods: {
+    onRightClick(e) {
+      if (this.disableRightClick) {
+        e.preventDefault();
+        return false;
+      }
+
+      return true;
+    },
+    onSwiper() {
+      this.swiper = this.$refs[this.swiperRef].$el.swiper;
+      this.swiper.update();
+
+      this.$emit('on-carousel-load');
+    },
+    onClickNextSlide() {
+      if (this.swiper) {
+        this.swiper.slideNext();
+      }
+    },
+    onClickPrevSlide() {
+      if (this.swiper) {
+        this.swiper.slidePrev();
+      }
+    },
+    update() {
+      this.swiper.update();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.carousel :deep(.swiper-button-next, .swiper-button-prev) {
+  @apply tw-hidden;
+}
+
+.carousel :deep(.swiper-button-disabled) {
+  @apply tw-hidden;
+}
+
+.carousel :deep(.swiper-pagination) {
+  @apply tw-static tw-pt-6;
+}
+
+.carousel :deep(.swiper-pagination-bullets) {
+  @apply tw-text-center;
+}
+
+.carousel :deep(.swiper-pagination--desktop-only) {
+  @apply tw-hidden sm:tw-block;
+}
+
+.carousel :deep(.carousel__button-nav) {
+  @apply tw-relative;
+}
+
+.carousel :deep(.swiper-pagination-bullet) {
+  border-color: #595959;
+  @apply tw-border-2 tw-border-solid tw-opacity-100 tw-bg-transparent tw-w-2 tw-h-2 tw-inline-block tw-rounded tw-cursor-pointer;
+}
+
+.carousel :deep(.swiper-pagination-bullet.swiper-pagination-bullet-active) {
+  background-color: #595959;
+}
+
+.carousel :deep(.swiper-pagination-bullet:not(:last-child)) {
+  @apply tw-mr-2;
+}
+
+.carousel :deep(.swiper-pagination-bullet:only-child) {
+  @apply tw-hidden;
+}
+
+.carousel :deep(.swiper-container) {
+  @apply tw-w-full;
+}
+
+.carousel :deep(.swiper-slide) {
+  @apply tw-h-auto tw-w-auto;
+}
+
+.nav-carousel__button-next-pointer,
+.nav-carousel__button-prev-pointer {
+  background: none;
+  box-shadow: none;
+  border: none;
+  position: relative;
+  vertical-align: middle;
+  --tw-translate-y: 0;
+}
+
+.nav-carousel__button-next-pointer {
+  right: 0;
+}
+
+.nav-carousel__button-prev-pointer {
+  left: 0;
+}
+
+.pagination-hidden {
+  display: none !important;
+}
+
+.carousel--hide-scrollbar :deep(.swiper) {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.carousel--hide-scrollbar :deep(.swiper::-webkit-scrollbar) {
+  display: none;
+}
+</style>