Componentes

En esta sección encontraremos la descripción de todos los componentes creados en el dashboard-sivtcr que son reutilizados dentro del proyecto. Algunos elementos asociados a las gráficas no son descritos ya que pertencen a la documentación de DIT-Components

CardSimple

Este componente cumple con uno de los roles más importantes en lo que respecta a la estructura del sistema, ya que todas las gráficas de cada una de las vistas se encuentran contenidas dentro de este componente.

Esta card contiene un slot descrito de manera detallada en la sección de implementación.

Props

props: {
    small: {
      type: Number,
      default: 12,
    },
    medium: {
      type: Number,
      default: 12,
    },
    large: {
      type: Number,
      default: 12,
    },
  }

small, medium & large tiene la función de asignar el espacio que utilizará la card en página, el ancho de la página es divido en 12 partes, por lo tanto el default: 12 representa el ancho total de la página. El valor puede ir desde 0 hasta el máximo 12.

Los siguientes tamaños corresponde al ancho del monitor o la pantalla en la que se esté cargando la página:

• small: Cualquier pantalla
• medium: Cualquier pantalla de 640px o más.
• large: Cualquier pantall de 1024px o más.

Estos valores de la card son tomados de Foundation media-queries (opens new window).

Implementación

El componente lo encontraremos en la siguiente carpeta:

• 📂 src
  • 📂 components
    • 📂 Global
      • CardSimple.vue

Para implementar dicho componente en nuestro archivo basta con hacer:

export default {
  components: {
    CardSimple: () => import("../components/Global/CardSimple"),
  }
}

Es importante tomar en cuenta en la vista que nos encontramos para agregar de manera correcta la ruta. Para crear la instancia del archivo dentro de nuestras etiquetas html haremos lo siguiente:

<template>
    <div>
        <card-simple :medium="6">
            Soy un párrafo dentro del slot
        </card-simple>
    </div>
</template>

CardSimple contiene un slot. En dicho slot se agregará todo el contido que querramos dentro de la card.

Resultado

Una vez realizdo lo anterior, tendremos como resultado lo siguiente:

CardHeader

El contenido de este componente funciona para agregar títulos y subtítulos además de un ícono que al pasar el puntero sobre él rebela información detallada. En el proyecto es utilizado en conjunto con la CardSimple.

Props

props: {
    title: {
      type: Text,
      default: "",
    },
    subtitle: {
      type: Text,
      default: "",
    },
    detail: {
      type: Text,
      default: "",
    },
}

title, subtitle & deatil sirven para agregar texto ordenado en una vista o componente.

• title: Título con tamaño de un "H1" y color gris que va en la parte superior del componente.
• subtitle: Subtítulo con tamaño de un "H2" y color gris en tonalidad más tenue que el título. Se encuentra por debajo del título.
• detail: Ícono posicionado el parte superior derecha. Al pasar el puntero sobre él se despliega un tooltip con información detallada.

Implementación

El componente lo encontraremos en la siguiente carpeta:

• 📂 src
  • 📂 components
    • 📂 Global
      • CardHeader.vue

Para implementar dicho componente en nuestro archivo basta con hacer:

export default {
  components: {
    CardHeader: () => import("../components/Global/CardHeader"),
  }
}

Es importante tomar en cuenta en la vista que nos encontramos para agregar de manera correcta la ruta. Para crear la instancia del archivo dentro de nuestras etiquetas html haremos lo siguiente:

<template>
    <div>
        <card-header
          :title="Card header desde título"
          :subtitle="Soy un subtítulo"
          :detail="El detalle es que no hay detalle."
        />
    </div>
</template>

Resultado

Una vez realizdo lo anterior, tendremos como resultado lo siguiente:

CardItem

Este componente tiene la función de crear selects. Estos los encontramos en los buscadores principales en el dashboard.

Props

props: [
    "optionsData",
    "counter",
    "label",
    "imageCard",
    "loader",
  ],

En este componente los props no tienen valores por defecto ni tienen asociado un tipo de valor, por lo que es importante describir qué hace cada uno de ellos. A continuación se enlistan los props mostrados en la parte superior:

• optionsData. Es un objeto que agrega todos los elementos del select al componente multiselect.
• counter. Muestra el total de elementos que incluye el select.
• label. El título que lleva la card contenedora del select.
• imageCard. La imagen que lleva la card contenedora del select. Si no se carga una imagen se carga por defecto el logo de "Te creemos".
• loader. Bandera para mostrar o no el loader en lugar del counter.

Métodos

methods: {
    pushChange() {
      this.$emit("getChange", this.key.name);
    },
}

• pushChange(). Este método devuelve el elemento seleccionado al cambiar la opción.

Implementación

El componente lo encontraremos en la siguiente carpeta:

• 📂 src
  • 📂 components
    • 📂 Global
      • CardItem.vue

Para implementar dicho componente en nuestro archivo basta con hacer:

export default {
  components: {
    CardItem: () => import("../components/Global/CardItem"),
  }
}

Es importante tomar en cuenta en la vista que nos encontramos para agregar de manera correcta la ruta. Para crear la instancia del archivo dentro de nuestras etiquetas html haremos lo siguiente:

<template>
    <div>
        <CardItem
          label="Ejemplo"
          @getChange="getChange"
          loader="false"
        ></CardItem>
    </div>
</template>

Resultado

Una vez realizdo lo anterior, tendremos como resultado lo siguiente:

CardFilterSelected

Este componente se encarga de mostrar los filtros seleccionados y una vez dado clic en el botón 'Buscar' se cambiará a filtros aplicados.

Props

Este componente no cuenta con props, toma los elementos del store del módulo filter.js

Métodos

methods: {
    clicClose: function (key, value) {
      this.closePhill({ key: key, value: value });
    },
    ...mapActions("filters", ["closePhill"]),
}

• clicClose(). Cierra cada uno de los phills al seleccionar filtros.

Implementación

El componente lo encontraremos en la siguiente carpeta:

• 📂 src
  • 📂 components
    • 📂 Global
      • CardFilterSelected.vue

Para implementar dicho componente en nuestro archivo basta con hacer:

export default {
  components: {
    CardFilterSelected: () => import("../components/Global/CardFilterSelected"),
  }
}

Es importante tomar en cuenta en la vista que nos encontramos para agregar de manera correcta la ruta. Para crear la instancia del archivo dentro de nuestras etiquetas html haremos lo siguiente:

<template>
    <div>
        <card-filter-selected />
    </div>
</template>

Resultado

Una vez realizdo lo anterior, tendremos como resultado lo siguiente: