Mis componentes para vue

Instalación del paquete

yarn add @isdg/miscomponentesvue

Demo del paquete

Para ver en funcionamiento los componentes incorporados en el paquete, ejecutar:

yarn run serve

Uso del paquete

• Para importarlo, agregar la siguiente linea en el archivo principal del proyecto app.js:

  import '@isdg/miscomponentesvue'

• Para utlizar un componente en particular, solo de debe llamarlo en el lugar que se quiere mostrar, ej:

  <template>
      ...
      <TituloPagina :titulo="titulo" :descripcion="descripcion" />
      ...
  </template>
  ...

Lista de componentes:

Todos los componentes están registrados en Vue global y están disponibles para su uso. No es necesario volver a registrarlos.

Componente -Banner-

Muestra una barra con un texto predeterminado

Uso

<Banner position="bottom">Este es mi propio banner!</Banner>

Propiedades y/o parametros

position: En un String que indica la posición del banner. Puede tomar los valores: top o bottom. Por defecto es bottom.

styles: En un Objeto que contiene los estilos para personalizar el fondo, color, etc. de tu banner. Por defecto, el banner ocupará el 100% del ancho total de la página.

Componente -Boton volver-

Muestra un boton para volver a la pagina anterior.

Uso

<BtnVolver />

Componente -Migas de pan-

Muestra una fila con las migas de pan de la pagina

Uso

<MigasDePan :migas="arrMigas" />

Propiedades y/o parametros

migas: En un Array que contiene los valores de los diferentes niveles de las migas. El array tendra los siguientes valores:

[
    { text: 'Inicio', name: 'route-name', disabled: false },
    { text: 'Nivel1', name: 'route-name', disabled: false },
    { text: 'Nivel2', name: 'route-name', parametros: 'valor-parametro', disabled: false },
    { text: 'Nivel3', name: '', disabled: true },
]

Componente -Título de página-

Muestra una fila con el título y descripción de la página

Uso

<TituloPagina :titulo="titulo" :descripcion="descripcion" />

Propiedades y/o parametros

titulo: En un String que contiene el texto a mostrar como titulo.

descripcion: En un String que contiene el texto a mostrar como descripción de la página.

Componente -Botón personalizable-

Muestra un botón con el contenido deseado

Uso

<BtnCustom label="Mover a la derecha" @click="moverSeccion(seccion,'derecha',indice)">
    <span class="fa-stack fa-1x" style="color:#efefef;">
        <i class="fas fa-arrow-alt-circle-right"></i>
    </span>
</BtnCustom>

Propiedades y/o parametros

label: En un String que contiene el texto a mostrar en el tooltip del botón.

Componente -Dialogo de carga-

Muestra un recuadro en el centro de la pantalla, con una barra de progreso, acompañado del contenido deseado.

Uso

<MyLoadingDialog :loading="cargando">
    Un momento...
</MyLoadingDialog>

Propiedades y/o parametros

loading: En un Boolean que indica si se muestra el recuadro o no.

Componente -Cabecero-

Muestra el cabecero de la página, con un logo, un menu principal y un menu de usuario autenticado.

Uso

De preferencia en el componente principal App.vue, para que este presente en todas las paginas de la aplicación.

<template>
    <v-app>
        <cabecero-app :usuario="me" :logo="logo_cabecero" :itemsMenu="items_menu_cabecero"/>

        <div id="main">
            <router-view />
        </div>
        ...
    </v-app>
</template>

<script>
    export default {
        data: () => ({
            ...
            logo_cabecero: {
                grande: '/img/logo-rectangulo.png',
                peque: '/img/logo57x57.png'
            },
            items_menu_cabecero: [ 
                {
                    titulo: 'Item 1',
                    icono: 'business',
                    submenu: [
                        { title: "Sub item 1", nameRoute: 'RutaPagina1'},
                        { title: "Sub item 2", nameRoute: 'RutaPagina2'},
                    ],
                },
                {
                    titulo: 'Item 2',
                    icono: 'list_alt',
                    submenu: [
                        { title: "Sub item 1", nameRoute: 'RutaPagina3'},
                        { title: "Sub item 2", nameRoute: 'RutaPagina4'},
                    ],
                }
            ],
            me: {
                id: "1",
                name: "Usuario",
                email: "[email protected]"
            }
            ...
        }),
        ...
    }
</script>

Propiedades y/o parametros

usuario: Es un Objeto que almacena la información del usuario autenticado.

logo: Es un Objeto que almacena el nombre y ruta de la imagen grande y pequeña del logo de la pagina.

itemsMenu: En un Arreglo que almacena los item y subitems del menu principal.

Componente -Pie-

Muestra el pie de pagina, con un texto centrado, e iconos con enlaces externos.

Uso

De preferencia en el componente principal App.vue, para que este presente en todas las paginas de la aplicación.

<template>
    <v-app>
        ...
        <pie-app :botones="botones_pie" :texto="texto_pie"/>
    </v-app>
</template>
<script>
    export default {
        data: () => ({
            botones_pie:[
                { 
                    url: 'https://url1.es/',
                    icon: 'folder_open',
                    title: 'Titulo 1'
                },
                { 
                    url: 'https://url2.es/',
                    icon: 'account_balance',
                    title: 'Titulo 2'
                },
            ],
            texto_pie: '<strong>Titulo</strong> - Copyright &#9400; Ornanización 2019. Todos los derechos reservados.',
        }),
    }
</script>

Propiedades y/o parametros

texto: Es un String que contiene el texto a mostrar en el centro del pie de pagina. Acepta etiquetas HTML.

botones: Es un Arreglo que almacena objetos con la informacion de los botones a mostrar, tales como url, icono y titulo.

Componente -Form date picker-

Muestra un calendario.

Uso

...
<form-date-picker label="Fecha inicio" v-model="fechaInicio" readonly :disabled="loading" />
...

Propiedades y/o parametros

value: label: En un String que contiene el texto a mostrar en la etiqueta del input. errorMessages:

Componente -Form dialog-

Muestra un recuadro.

Uso

...
<form-dialog 
    width="450"
    @aceptar="aceptarBorrar()"
    @cancelar="cancelarBorrar()"
    button-text="Borrar"
    card-title="Eliminar el dato"
    card-text="Va a eliminar este dato. ¿Quiere continuar?"
    :disabled="loading"
/>
...

Propiedades y/o parametros

buttonText: cardTitle: cardText: okText: cancelText: width: disabled:

Componente -Form text-

Muestra un input de tipo text.

Uso

...
<form-text 
    label="Valor" 
    v-model="valorString" 
    :disabled="loading" 
    counter="50"
    :error-messages="valorStringErrores" 
    @input="$v.valorString.$touch()" 
    @blur="$v.valorString.$touch()"
/>
...

Propiedades y/o parametros

value: label: En un String que contiene el texto a mostrar en la etiqueta del input. errorMessages:

Componente -Form textarea-

Muestra un input de tipo area.

Uso

...
<form-textarea 
    label="Observaciones" 
    v-model="mdObservaciones" 
    rows="3" 
    :disabled="loading" 
    counter="200"
    :error-messages="mdObservacionesErrores" 
    @input="$v.mdObservaciones.$touch()" 
    @blur="$v.mdObservaciones.$touch()"
/> 
...

Propiedades y/o parametros

value: label: En un String que contiene el texto a mostrar en la etiqueta del input. errorMessages:

Creación del paquete/libreria:

Para la creacion de este paquete/libreria se siguieron los siguientes pasos:

• Si no se tiene, se instala el VUE-CLI 3.0 y se crea la aplicación:

  yarn global add @vue/cli
  vue create nombre-paquete

• En el directorio src/components/ se iran guardando los archivos de los componentes.
• En el archivo package.json tendremos que realizar algunas modificaciones para que nuestro paquete se configure correctamente:
  • Añadir el nombre del paquete/libreria:

  "name": "@organizacion/nombre-paquete",

  • Añadir el nombre del archivo donde estara compilado mi paquete :

  "main": "./dist/nombre-archivo.umd.js",

  • Añadir el script de compilación de mis componentes, y la ruta de origen de los mismos:

  "scripts": {
      ...
      "build-bundle": "vue-cli-service build --target lib --name nombre-archivo ./src/components/index.js",
      ...
  },

  • Agregar la ruta de la etructura de directorios de mi paquete:

  "files": [
      "dist/*",
      "src/*",
      "public/*",
      "*.json",
      "*.js"
  ],

  • Cambiar la linea que viene por defecto en true (para que se pueda publicar en un repositorio npm público):

  "private": false,

• Crear al archivo src/components/index.js con los componentes a publicar:

  import Vue from "vue";
  import Componente1 from "./Componente1.vue";
  import Componente2 from "./Componente2.vue";
  import Componente3 from "./Componente3.vue";
  
  const Components = { Componente1, Componente2, Componente3 };
  
  Object.keys(Components).forEach(name => {
      Vue.component(name, Components[name]);
  });
  
  export default Components;

• Crear al archivo vue.config.js, en la raiz del proyecto, con la configuración de la publicación del paquete:

  module.exports = {
  css: {
      extract: false,
  },
  };

  Esto es para que se compilen los estilos en el mismo archivo final, y no se tengan que importar por separado en el proyecto final. De lo contrario se compila en un archivo .css los estilos de los componentes.
• Instalar las dependencias necesarias, ejecutar:

  yarn install
  yarn upgrade

• Crear usuario en NODEJS o directamente por la consola con el comando:

  npm adduser

• Hacer login desde la consola con el comando:

  npm login

• Se puede verificar que estoy autenticado con el comando:

  npm whoami

• Para compilar el paquete ejecutar:

  npm run build-bundle

• Para publicar el paquete ejecutar:

  npm publish --access public

• Para publicar versión preliminar:

  npm publish --tag beta