Skip to content
Alebat

Cards Component

1. Descripción General

Tenemos un conjunto de tarjetas modulares que representan diversos tipos de contenido, incluyendo transmisiones en directo, episodios, paquetes y videos. También integra un sistema de modal para mostrar información adicional. Los componentes están diseñados para ser reutilizables y funcionan en conjunto con mocks de datos para su visualización.

2. Estructura de Uso

Para utilizar los componentes en una vista puedes seguir el siguiente ejemplo, donde se importan los componentes de tarjetas y se usa un modal para mostrar información adicional:

<script setup lang="ts">
import DirectCard from "@/components/ui/cards/DirectCard.vue";
import EpisodeCard from "@/components/ui/cards/EpisodeCard.vue";
import PackCard from "@/components/ui/cards/PackCard.vue";
import VideoCard from "@/components/ui/cards/VideoCard.vue";
import TheModal from "@/components/ui/TheModal.vue";
import {
  directCardList,
  episodeCardList,
  packCardList,
  videoCardList,
} from "@/mocks";


const { dataModal, showModal, useCloseModal, useOpenModalWithData } =
  useModal();
</script>


<template>
  <section class="container">
    <h2>Slider Packs</h2>
    <div class="container__slider">
      <PackCard v-for="packCard in packCardList" :packLayout="packCard" />
    </div>
    <h2>Slider Video</h2>
    <div class="container__slider">
      <VideoCard
        v-for="videoCardItem in videoCardList"
        :key="videoCardItem.id"
        :video-card-item="videoCardItem"
        @click="useOpenModalWithData(videoCardItem)"
      />
    </div>
    <h2>Slider Direct</h2>
    <div class="container__slider">
      <DirectCard
        v-for="directCard in directCardList"
        :directList="directCard"
      />
    </div>
    <h2>Slider Episode</h2>
    <div class="container__slider">
      <EpisodeCard
        v-for="episodeCard in episodeCardList"
        :episodeList="episodeCard"
      />
    </div>
  </section>


  <TheModal :show-modal="showModal" @close="useCloseModal" background-color="">
    <video
      class="container__video-modal"
      controls
      controlslist="nodownload"
      src="https://media.alebat.com/media/2024/7/PROMO_PORTUGUES_VISITA_UNIMED_V4_36f64d03e3.webm"
    ></video>
    <h2>modal</h2>
    <p>Video Numero: {{ dataModal?.id }}</p>
  </TheModal>
</template>

3. Componentes

DirectCard.vue

  • Descripción: Tarjeta para contenido en directo, diseñado para mostrar información en tiempo real o en vivo.
  • Props:
    • directList (Object): Objeto que contiene la información de la transmisión en directo.
  • Ejemplo de Uso: 
    <DirectCard v-for="directCard in directCardList" :directList="directCard" />

EpisodeCard.vue

  • Descripción: Tarjeta que representa un episodio específico, útil para listas de episodios.
  • Props:
    • episodeList (Object): Objeto que contiene los detalles del episodio.
  • Ejemplo de Uso: 
    <EpisodeCard
      v-for="episodeCard in episodeCardList"
      :episodeList="episodeCard"
    />

PackCard.vue

  • Descripción: Tarjeta que muestra un conjunto de elementos como un paquete.
  • Props:
    • packLayout (Object): Objeto que define el contenido del paquete.
  • Ejemplo de Uso: 
    <PackCard v-for="packCard in packCardList" :packLayout="packCard" />

VideoCard.vue

  • Descripción: Tarjeta diseñada para reproducir o presentar un video con un modal adicional para detalles.
  • Props:
    • videoCardItem (Object): Objeto que contiene la información del video.
  • Eventos Emitidos:
    • click: Emite el video seleccionado al hacer clic.
  • Ejemplo de Uso: 
    <VideoCard
      v-for="videoCardItem in videoCardList"
      :key="videoCardItem.id"
      :video-card-item="videoCardItem"
      @click="useOpenModalWithData(videoCardItem)"
    />

4. Modal

  • Descripción: Componente de modal utilizado para mostrar contenido adicional, como el video seleccionado.
  • Props:
    • showModal (Boolean): Controla la visibilidad del modal.
    • dataModal (Object): Objeto con la información del contenido en el modal.
  • Eventos Emitidos:
    • close: Emite el evento de cierre cuando se cierra el modal.
  • Ejemplo de Uso: 
    <TheModal :show-modal="showModal" @close="useCloseModal" background-color="">
      <video
        class="container__video-modal"
        controls
        controlslist="nodownload"
        src="https://media.alebat.com/media/2024/7/PROMO_PORTUGUES_VISITA_UNIMED_V4_36f64d03e3.webm"
      ></video>
      <h2>modal</h2>
      <p>Video Numero: {{ dataModal?.id }}</p>
    </TheModal>

5. Estilos y Mixins

card-mixin.scss

  • Descripción: Mixin SCSS para estandarizar los estilos entre las tarjetas. Incluye variables y mixins que ayudan a mantener la consistencia en el diseño.

6. Composables

useTypeCard.ts

  • Descripción: Composable para gestionar y definir tipos de tarjetas específicas.
  • Funciones y Métodos:
    • getType: Retorna el tipo de tarjeta basado en condiciones internas.

useCountDown.ts

  • Descripción: Composable para crear un temporizador de cuenta regresiva, útil para eventos en directo o especiales.
  • Funciones y Métodos:
    • startCountdown: Inicia el contador.
    • resetCountdown: Reinicia el contador.

useModal.ts

  • Descripción: Composable que maneja la lógica del modal, incluyendo apertura y cierre.
  • Funciones y Métodos:
    • useOpenModalWithData: Abre el modal con datos específicos.
    • useCloseModal: Cierra el modal y limpia los datos.

7. Mocks de Datos

directCardList

  • Descripción: Lista de objetos de datos para DirectCard, que contiene información de transmisiones en directo.

episodeCardList

  • Descripción: Lista de objetos de datos para EpisodeCard, con información de episodios.

packCardList

  • Descripción: Lista de datos para PackCard, definiendo los elementos y características del paquete.

videoCardList

  • Descripción: Lista de objetos de datos para VideoCard, con información sobre cada video.

8. Uso del botón de acción

Tebenemos la siguiente estructura de composable para el uso de botones de acción en las tarjetas:

  • Directorycomposables
    • DirectoryuseCardButtonAction
      • index.ts // Exporta todos los composables
      • useCardConsultativeAction.ts
      • useCardDirectAction.ts
      • useCardDirectBuyAction.ts
      • useCardEpisodeAction.ts
      • useCardInternaPack.ts
      • useCardOndemandAction.ts
      • useCardPackAction.ts
      • useCardSerieAction.ts
  • index.ts // Exporta todos los composables de la carpeta useCardButtonAction

Dentro de cada archivo de composable se define la lógica específica para el tipo de tarjeta y la acción que se debe realizar al hacer clic en el botón de acción. Este es un ejemplo de cómo se puede implementar la lógica en uno de los archivos de composable:

  • Tienes que implementar el type concreto necesario y quitar el any
  • Si necesitas implementar lógica adicional, puedes hacerlo en una nueva función dentro del archivo, respetando los principios SOLID
useCardDirectAction.ts
// This is a test function. The only thing that needs to be modified is the content inside the function.
// The `data` object must have a predefined TypeScript type for proper handling and type safety.


export function useCardDirectAction(data: any) {
  console.log(data + " desde useCardDirectAction");
  // return { data }
}

Por otra parte, tenemos dos archivos index.ts que exportan todos los composables de botones de acción y un archivo useCardButtonAction.ts que importa todos los composables y los exporta para su uso en los componentes de tarjetas.

Ejemplo de implementación en el componente

<script setup lang="ts">
// Importar el composable useCardButtonAction
const { dataEpisodeCard } = useCardDirectAction({
  text: "hola directCard",
  typeButton: "direct",
});


// Definir los datos necesarios para el componente
const dataDirectCard = {
  typeButton: "direct",
  text: "hola directCard",
  functionButtonDirect: dataEpisodeCard,
};


// Proporcionar los datos al componente
provide("cardAction", dataDirectCard);
</script>

Ejemplo de uso en ButtonCard.vue

<script setup lang="ts">
// Usando inject para obtener los datos proporcionados por el componente padre, entre ellos la función del botón
const cardAction = inject("cardAction");
</script>