Documentación de Componentes

SysLogin

Componente para el manejo de la sesión de usuario

  props: {
      endpoint: {
          type: String,
          default: "http://localhost:3001",
      },
      data: {
          type: String,
          default: ''
      },
      showLogin: {
          type: Boolean,
          default: false,
      },
        showNav: {
        type: Boolean,
        default: true,
      },
  }

• Para el desarrollo no es necesario pasar endpoint, para producción hay que pasar por parámetros una variable de entorno que apunte al servidor.

• data será la variable del componente padre donde podrá recibir la información de logeo (la respuesta del axios)

• showLogin es un booleano que si se desea, puede mostrar el cartel de inicio de sesión, de lo contrario solo mostrara un "loading"

• showNav: por defecto este componente muestra la navbar, si no se desea mostrar se puede pasar :showNav="false"

Modo de uso

Importar en el App del proyecto de Vue, esto provocará que toda la aplicación esté protegida por el inicio de sesión.

El App quedaría así:

<template>
  <SysLogin :data="data" @update:data="data = $event" />    
  <router-view />
</template>

<script>
import { onMounted, ref, watch } from "vue";
import { SysLogin } from 'reparorepo';

export default {
  name: "App",
  components: {
    SysLogin,
  },
  setup() {
    const data = ref(null);
   
    onMounted(() => {
      try {
        console.log("data iniciada:", JSON.parse(localStorage.userData));
      } catch (err) {
        console.log("data iniciada:", "Sin userData");
      }
    })

    watch(data, (newData) => {
      console.log("data actualizada:", newData);
    });

    return {
      data,
    };
  },
};
</script>

El onMounted es para cuando la sesión está guardada en el localStorage del navegador

El watch es para cuando el usuario tiene que iniciar sesión.

En cualquier caso, en data, quedaría un objeto con los datos que se reciben del backend.

Button

Props y formatos

props: {
        color: {
            type: String,
            default: "success",
        },
        size: {
            type: String,
            default: "md",
        },
        variant: {
            type: String,
            default: "fill",
        },
        fullWidth: {
            type: Boolean,
            default: false,
        },
        active: {
            type: Boolean,
            default: false,
        },
        onClick: {
            type: Function,
            default: () => { },
        },
    },

Pueden pasarse colores como success, danger, warning...

Pasar como prop en onClick la función con la acción que desee que realice el botón.

CurrencyInput

Este componente sirve para mostrar los valores en formato de moneda Se usa igual que el Input pero para actualizar los datos se necesita usar el v-model.

Modo de uso

  <CurrencyInput
    class="form-control px-2"
    v-model="alicuota.gravado"
    :name="'gravado'"
    :onChange="(e) => alicuotasChange(e, ix)"
    :value="alicuota.gravado"
  />

Props y formatos

props: {
        color: {
            type: String,
            default: "success",
        },
        size: {
            type: String,
            default: "md",
        },
        variant: {
            type: String,
            default: "fill",
        },
        fullWidth: {
            type: Boolean,
            default: false,
        },
        active: {
            type: Boolean,
            default: false,
        },
        onClick: {
            type: Function,
            default: () => { },
        },
    },

AsyncSelect

Props y formatos

props: {
    label: { type: String },
    name: { type: String },
    placeholder: { type: String },
    className: { type: String },
    asyncFetch: { type: Function },
    minimun: { type: Number, default: 3 },
  }

Modo de uso

Usar el componente como uno más, pasando por props, la función de fetching (llamado), ésta recibirá el resultado de la llamada:

    const handleFetching = (result) => {
      console.log(result);
      return result;
    };

El select termina devolviendo un objeto, que dentro esta el value, es para tener la posibilidad de en el mismo llamado devolver mas informacion que se necesite y evitar otro llamado.

    <AsyncSelect
        label="Entidad cta/cte"
        name="proveedor"
        className="w-50"
        @update:selectedResult="handleSelectedProveedor"
        :asyncFetch="asyncFetch"
        placeholder="Escribe 3 caracteres mínimo para realizar la búsqueda.."
        :minimun="3"
    />

*La propiedad minimun permite establecer el minimo de caracteres necesarios para hacer el primer llamado.

Este componente se renderizó con lo básico, pero pueden pasarse mas props

Select

Props y formatos

props: {
    label: {
      type: String,
      default: "Select de opciones",
    },
    options: {
      type: Array,
      required: true,
    },
    value: {
      type: [String, Number],
      default: "",
    },
    className: {
      type: String,
    },
    placeholder: {
      type: String,
      default: "Seleccione una opción",
    },
    isDisabled: {
      type: Boolean,
    },
}

El componente puede recibir estas 6 propiedades, siendo obligatoria unicamente "options". Dicha propiedad debe ser un array de objetos, donde cada uno de ellos debe ser de la forma { label: 'Texto de ejemplo', value: 'Valor de ejemplo', ...props }

Modo de uso

  <Select
  :options="[{ value: '2', label: 'Texto de ejemplo', ...props}]"
  :className="clase de bootstrap"
  :isDisabled="false"
  placeholder="Seleccionar / Buscar"
  @onChange="miFuncion" 
  :value="2" //(Si deseamos que se inicialice con un value determinado).
  />

Sidebar

Props y formatos

props: {
    textTitle: {
      type: String,
      default: "Primer título",
    },
    textSubtitle: {
      type: String,
      default: "Segundo Título",
    },
    className: {
      type: String,
    },
    first_items: {
      type: Array,
      default: [
        { name: "Dashboard", url: "login", icon: "fa-solid fa-chart-line" },
      ],
    },
    second_items: {
      type: Array,
      default: [
        { name: "Profile", url: "profile", icon: "fa-solid fa-id-card" },
      ],
    },
}

El componente puede recibir estas 5 propiedades, de las cuales "first_items" y "second_items" no son obligatorias, pero si son requeridas para renderizar contenido. Ambas son arrays de objetos de la forma especificada abajo. ("name, url de redirección e ícono"). Además, puede recibir un slot (hijo), que se ubicará como button.

 <Sidebar
    textTitle="Texto de ejemplo"
    textSubtitle="Texto de Ejemplo"
    first_items="[{ name: 'Dashboard', url: 'login', icon: 'fa-solid fa-chart-line' }]"
    second_items="[{ name: 'Profile', url: 'profile', icon: 'fa-solid fa-id-card' }]"
    className="clase de bootstrap"
    >
      <Button>Ejemplo</Button>
 </Sidebar>

Table

Props y formatos

props: {
    title: {
      type: String,
      default: "Tabla de Usuarios",
    },
    columns: {
      type: Array,
      required: true,
    },
    rows: {
      type: Array,
      required: true,
    },
    className: {
      type: String,
      default: "",
    },
};

El componente puede recibir estas 4 propiedades, de las cuales "columns" y "rows" son obligatorias pararenderizar contenido. Ambas son arrays de objetos de la forma:

const rows = ref([
      {
        name: "Usuario",
        codemp: 2,
        email: "[email protected]",
        state: "Activo",
      }]);

const columns = ref([
      { value: 1, label: "Nombre completo", key: "name" },
    ]);

Modo de uso

<Table
 :columns="columns"
 :rows="rows"
 className="clase de bootstrap"
 title="Tabla de Usuarios"
/> 

Card

Props y formatos

props: {
    icon: {
      type: [String, Object],
      component: {
        type: String,
      },
      background: {
        type: String,
      },
      default: () => ({
        background: "bg-white",
      }),
    },
    title: {
      type: String,
      required: true,
    },
    description: {
      type: String,
    },
    value: {
      type: [String, Number],
    },
    className: {
      type: String,
    },
    onClick: {
      type: Function,
    },
};

El componente puede recibir propiedades, de las cuales solo el titulo es obligatoria. Además, puede recibir un slot.

Modo de uso

<Card
  className="clase de bootstrap"
  title="Nombre de Usuario"
  icon="text-white fas fa-landmark"
  description="Masivos"
  value="Mutual"
  :onClick="miFuncion"
> 
  <div>
      <OtroComponente />
  </div>
</Card>

GroupOption

Props y formatos

  props: {
    options: {
      type: Array,
      required: true,
    },
    id: {
      type: String,
      required: false,
      default: 1,
    },
    onChange: {
      type: Function,
      required: false,
      default: (e) => console.log("onChange", e)
    },
    className: {
      type: String,
      required: false,
    }
  }

Modo de uso

Aquí hay un ejemplo de uso, tener en cuenta que en options el valor seleccionado por defecto se marca con un booleano selected:

    <GroupOption :id="'1'" :options="options" :onChange="handleOptionSelected" />
    const options = [
      { value: 1, label: "Texto 1", selected: false },
      { value: 2, label: "Texto 2", selected: false },
      { value: 3, label: "Texto 3", selected: true },
      { value: 4, label: "Texto 4", selected: false },
    ]
    const handleOptionSelected = (selectedValue) => {
      console.log(selectedValue)
      // Devuelveel objeto: { value: 4, label: "Texto 4", selected: true }
      // Puedes realizar las acciones necesarias con el valor seleccionado
    }

el 'id' es importante si se usan varios GroupOption en el programa

Switch

Props y formatos

  props: {
    name: {
        type: String,
        required: true,
    },
    id: {
        type: String,
        required: true,
    },
    checked: {
        type: Boolean,
        default: false,
    },
    className: {
        type: String,
        default: "",
    },
    label: {
        type: String,
        required: false,
        default: "",
    },
    onChange: {
        type: Function,
        default: (e) => console.log(e.target.value),
    },
    disabled: {
        type: Boolean,
        default: false
    }
    }

Modo de uso

Aquí hay un ejemplo de uso

    <Switch label="hola" id="1" name="test" :checked="true" :onChange="handleSwitch" />
    
    const handleSwitch = (e) => {
      console.log({ name: e.target.name, checked: e.target.checked })
    }

name es la propiedad name pasada, en el ejemplo sería 'test', y checked es un booleano indicando el estado del Switch

Upload

Props y formatos

props: {
    nameFile: {
      type: String,
    },
    path: {
      type: String,
    },
    fileExtension: {
      type: Array,
    },
    multiple: {
      type: Boolean,
    },
    endpoint: {
      type: String,
    },
  },

Modo de uso

Aquí hay un ejemplo de uso

<Upload :endopoint="'localhost:3002/upload'" :multiple="true" :fileExtension="['.jpg', '.png']" :path="'archivosExcel'" :nameFile="'comprobanteExcel'"/>

• endopoint: iria la url del servidor donde estaria el node levantado (porej servidor de vue), a /upload, ya que, el servidor podria usarse para otra cosa

• multiple: si queremos que se puedan subir varios archivos

• fileExtension: se le pasa un array con las extensiones que se quieren aceptar, sino acepta todo tipo de archivo

• path: en que carpeta del servidor al que apunta se quiere guardar, por ej, 'imagenes', te lo tiraria a una carpeta imagenes, que si no existe se crea

• nameFile: si se desea que los archivos tengan un nombre en particular se le pasa esta prop, sin extension. Le pone la extension del archivo original

Offcanvas

Props y formatos

props: {
    label:{
      type: String,
      default: 'Offcanvas'
    }
  },

Modo de uso

Aquí hay un ejemplo de uso

<Offcanvas :label="'Subir Excel'">
      <template v-slot:mostrar>
        <svg
          class="botonStyle"
          data-bs-toggle="offcanvas"
          data-bs-target="#offcanvasRight"
          aria-controls="offcanvasRight"
          xmlns="http://www.w3.org/2000/svg"
          height="16"
          width="16"
          fill="black"
          viewBox="0 0 512 512"
        >
          <path
            d="M288 109.3V352c0 17.7-14.3 32-32 32s-32-14.3-32-32V109.3l-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352H192c0 35.3 28.7 64 64 64s64-28.7 64-64H448c35.3 0 64 28.7 64 64v32c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V416c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"
          />
        </svg>
      </template>
      <template v-slot:contenido>
        <Upload />
      </template>
    </Offcanvas>

• el componente recibe dos slot:

  • el primera con el nombre de "mostrar" que va a ser lo que se visualice para abrir el offcanvas
  • y el segundo con el nombre contenido, el cual hace referencia a tood lo que se ve adentro del offcanvas

• y el label es para el titulo que tendra adentro el offcanvas