TsCarouselBuilder

<template>
  <TsCarouselV2
      :id="`carousel-${random_id}`"
      :append-class="twMerge('px-0')"
      :prev-button-class="twMerge('left-0')"
      :next-button-class="twMerge('right-0')"
      :navigation="props.navigation || !isMobile"
      :pagination="props.pagination"
      :direction="props.direction"
      :loop="props.loop"
      :drag-free="props.dragFree"
      :autoplay="props.autoplay"
      :autoscroll="props.autoscroll"
  >
    <TsCarouselSlide
        v-for="(slide, index) in props.slides"
        :key="`carousel-slide-${random_id}-${index}`"
        :append-class="twMerge(
            'p-0 lg:p-0',
            props.slidesWidth === 'full' && 'w-full p-0 flex-[0_0_calc(100%/1)]',
            props.slidesWidth === 'auto' && 'flex-[0_0_auto] min-w-[280px] max-w-max',
            props.slidesGap === '8px' && 'p-1 lg:p-1'
        )"
    >
      <Blocks
          class="w-full h-full"
          :parent="props.builderBlock?.id"
          :path="`component.options.slides.${index}.content`"
          :blocks="slide.content"
      />
    </TsCarouselSlide>
  </TsCarouselV2>
</template>

<script setup lang="ts">
import { Blocks } from '@builder.io/sdk-vue';
import { twMerge } from "tailwind-merge";

type Slide = {
  content: any[]
}

type Props = {
  builderBlock?: object;
  slides?: Slide[];
  slidesWidth?: "auto" | "full";
  slidesGap?: string;
  direction?: "ltr" | "rtl";
  navigation?: boolean;
  pagination?: boolean;
  loop?: boolean;
  dragFree?: boolean;
  autoplay?: boolean;
  autoscroll?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  slidesWidth: "full",
  direction: "ltr",
  pagination: true
});

const { isMobile } = useDevice();

const random_id = ref('')

onMounted(() => {
  random_id.value = useRandomUUID()
})
</script>