@designcrowd/fe-shared-lib 1.5.26-pre-gt-0007 → 1.5.26

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

@@ -1,215 +0,0 @@
-<template>
-  <div :class="['carousel tw-flex tw-flex-col tw-box-content', ...normalizedClasses]">
-    <!-- SSR Skeleton: rendered server-side and before client mount -->
-    <div v-if="!isMounted" class="tw-flex tw-items-center tw-relative">
-      <div class="swiper tw-w-full tw-overflow-hidden">
-        <div class="swiper-wrapper tw-flex tw-flex-row" :style="skeletonWrapperStyle">
-          <div
-            v-for="(slide, i) in visibleCards"
-            :key="i"
-            class="swiper-slide tw-h-auto tw-flex-shrink-0"
-            :style="slideStyle(slide)"
-          >
-            <div class="tw-h-full">
-              <slot name="slide" :slide="slide" :index="i"></slot>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Actual Carousel: only rendered after client-side mount -->
-    <Carousel
-      v-else
-      :ref="swiperRef"
-      :swiper-ref="swiperRef"
-      :classes="classes"
-      :cards="cards"
-      :options="options"
-      :disable-right-click="disableRightClick"
-      :nav-carousel="navCarousel"
-      :show-controls="showControls"
-      :show-bullets="showBullets"
-      :hide-bullets-on-mobile="hideBulletsOnMobile"
-      :hide-bullets-element="hideBulletsElement"
-      :navigation-unique-indexer="navigationUniqueIndexer"
-      :slide-index="slideIndex"
-      @on-carousel-load="onCarouselLoad"
-    >
-      <template #slide="{ slide, index }">
-        <slot name="slide" :slide="slide" :index="index"></slot>
-      </template>
-      <template #arrow-left>
-        <slot name="arrow-left"></slot>
-      </template>
-      <template #arrow-right>
-        <slot name="arrow-right"></slot>
-      </template>
-    </Carousel>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue';
-import Carousel from './Carousel.vue';
-
-const props = defineProps({
-  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,
-  },
-  skeletonSlideCount: {
-    type: Number,
-    required: false,
-    default: 6,
-  },
-});
-
-const emit = defineEmits(['on-carousel-load']);
-
-const isMounted = ref(false);
-
-onMounted(() => {
-  isMounted.value = true;
-});
-
-const normalizedClasses = computed(() => {
-  if (Array.isArray(props.classes)) {
-    return props.classes;
-  }
-  if (typeof props.classes === 'string') {
-    return [props.classes];
-  }
-  return [props.classes];
-});
-
-const visibleCards = computed(() => {
-  return props.cards.slice(0, props.skeletonSlideCount);
-});
-
-const spaceBetween = computed(() => {
-  return props.options?.spaceBetween ?? 10;
-});
-
-const skeletonWrapperStyle = computed(() => {
-  return {
-    gap: `${spaceBetween.value}px`,
-  };
-});
-
-const slideStyle = (slide) => {
-  if (slide.width) {
-    const width = typeof slide.width === 'number' ? `${slide.width}px` : slide.width;
-    return { width, minWidth: width };
-  }
-  return {};
-};
-
-const onCarouselLoad = () => {
-  emit('on-carousel-load');
-};
-</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;
-}
-</style>