consumocuidado/components/ItemsRow.vue

<template>
  <div class="row">
    <ClientOnly placerholder="Loading...">
      <!-- <div class="arrow-left-wrapper col-2 col-sm-1">
        <img
          class="arrow"
          src="@/assets/img/categories-row-arrow-left.svg"
          alt=""
          @click="slideCarousel('prev')"
        />
      </div> -->

      <Carousel
        ref="productDetails"
        class="col-8 col-sm-10"
        :items-to-show="3"
        :gap="5"
        :pagination-enabled="false"
        :wrap-around="false"
        :mouse-wheel="true"
        :breakpoints-enabled="true"
      >
        <Slide v-for="item in items" :key="item.id">
          <NuxtLink :to="formattedItem(item).url" class="slide">
            <div class="image-container">
              <img class="image" :src="formattedItem(item).image" alt="" />
            </div>
            <span>{{ formattedItem(item).name }}</span>
          </NuxtLink>
        </Slide>
        <template #addons>
          <Navigation />
        </template>
      </Carousel>

      <!-- <div class="arrow-right-wrapper col-2 col-sm-1">
        <img
          class="arrow"
          src="@/assets/img/categories-row-arrow-right.svg"
          alt=""
          @click="slideCarousel('next')"
        />
      </div> -->
    </ClientOnly>
  </div>
</template>

<script>
import { Carousel, Slide, Navigation } from 'vue3-carousel'
import 'vue3-carousel/dist/carousel.css'
import defaultImage from '@/assets/img/latienda-product-default.png'

export default {
  components: {
    Carousel,
    Slide,
    Navigation
  },
  props: {
    type: {
      type: String,
      required: true,
    },
    items: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      defaultImage,
      config: {
        height: 200,
        breakpointMode: 'carousel', // o 'viewport'
        breakpoints: {
          300: {
            itemsToShow: 2,
            snapAlign: 'center',
          },
          400: {
            itemsToShow: 3,
            snapAlign: 'start',
          },
          500: {
            itemsToShow: 4,
            snapAlign: 'start',
          },
        },
      }
    }
  },
  methods: {
    formattedItem(item) {
      if (this.type === 'product') {
        return {
          name: item.name,
          image:
            item.image || this.defaultImage,
          url: `/productos/${item.id}`,
        }
      }
      if (this.type === 'company') {
        return {
          name: item.company_name,
          image:
            item.logo || this.defaultImage,
          url: `/c/${item.id}`,
        }
      }
      if (this.type === 'category') {
        return {
          name: item.name,
          image:
            item.image || this.defaultImage,
          url: `/busqueda?category=${item.name}`,
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  padding: 0.3rem;
  span {
    text-align: center;
    display: -webkit-box;
    --webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 25vw;
    max-width: 110px;
    font-weight: $regular;
    font-size: $s;
  }
}

.image-container {
  width: 100%;
  height: 5rem;
  margin-bottom: 0.7rem;
  @include mobile {
    max-height: 10rem;
    max-width: 10rem;
  }
  .image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
</style>