Componente de Tabla General con Filtros para Equipos de Fútbol

Este es un componente Vue.js que permite mostrar una tabla general de equipos de fútbol, con filtros para seleccionar torneos y temporadas. El componente proporciona una vista atractiva y personalizable para mostrar datos de equipos de fútbol, con capacidad para cambiar entre diferentes temporadas y torneos.

Uso

Este componente se puede integrar en proyectos Vue.js para mostrar tablas generales de equipos de fútbol con filtros. A continuación, se describen los pasos para utilizarlo:

1. Copia el código del componente en un archivo .vue dentro de tu proyecto Vue.js.

2. Importa y registra el componente en el archivo principal de Vue.js (normalmente main.js).

import GeneralTable from './ruta/del/componente/GeneralTable.vue';

Vue.component('general-table', GeneralTable);

3. Luego, puedes utilizar el componente en tu plantilla Vue.js de la siguiente manera:

<template>
  <!-- Otras partes de tu plantilla -->
  <general-table :type="0" :season="1"></general-table>
  <!-- Otras partes de tu plantilla -->
</template>

Propiedades

El componente General Table admite las siguientes propiedades, con sus valores por defecto y opciones admitidas:

| Propiedad | Valor por Defecto | Descripción | Valores Admitidos | |-------------------|-------------------|-----------------------------------------------------|----------------------------------------| | season | 1 | Temporada seleccionada por defecto | Número (ID de temporada) | | awaitForSeason | true | Esperar a que se seleccione una temporada | true (esperar) o false (no esperar) | | type | 0 | Tipo de vista (0 para tabla, 1 para carrusel) | 0 (tabla) o 1 (carrusel) | | teamperpage | 5 | Cantidad de equipos por página en la tabla | Número (cantidad de equipos) | | background | '#0d1d29' | Color de fondo del componente | Cualquier valor de color válido en CSS | | borderRadius | '8px' | Radio de borde del componente | Cualquier valor de radio de borde válido en CSS | | borderWidth | 0 | Ancho del borde del componente | Cualquier valor numérico válido en CSS | | borderColor | '#0d1d29' | Color del borde del componente | Cualquier valor de color válido en CSS | | borderType | 'solid' | Tipo de borde del componente (solid, dashed, etc.) | Cualquier tipo de borde válido en CSS | | height | 'auto' | Altura del componente | Cualquier valor de altura válido en CSS | | colortitle | '#FFFFFF' | Color del título en la barra de herramientas | Cualquier valor de color válido en CSS |

Recuerda que puedes personalizar estos valores según tus necesidades en tu proyecto.

Dependencias

El componente hace uso de las siguientes dependencias, asegúrate de incluirlas en tu proyecto:

GSCFilterperteam: Proporciona la funcionalidad de filtros para los equipos. GSCTableperteam: Componente para mostrar la tabla de equipos. GSCDropdown: Componente desplegable para seleccionar torneos y temporadas. GSCCarousel: Componente de carrusel (solo en modo carrusel).

Fuentes

El componente utiliza fuentes personalizables. Las fuentes admitidas son:

'Poppins-Medium' Estas fuentes se aplican a diferentes elementos del componente para personalizar su apariencia.

Ejemplo de Uso

Aquí tienes un ejemplo de cómo utilizar el componente en tu proyecto:

<template>
  <!-- Otras partes de tu plantilla -->
  <general-table
    :type="0"
    :season="1"
    :background="'#f5f5f5'"
    :borderRadius="'10px'"
    :borderWidth="2"
    :borderColor="'#333333'"
    :height="'200px'"
    :colortitle="'#ff6600'"
  ></general-table>
  <!-- Otras partes de tu plantilla -->
</template>

Este ejemplo muestra cómo puedes invocar el componente con parámetros personalizados. Asegúrate de adaptar los valores a tus preferencias y necesidades específicas.

Este README proporciona información detallada sobre las propiedades del componente, sus valores por defecto y las fuentes admitidas para personalizar su apariencia. Asegúrate de usar las fuentes admitidas especificadas en la sección "Fuentes" para que se apliquen correctamente en el componente.