# vue-all-tools
> Tools for vue app.
Latest version **1.1.8** (published 2019-11-12) · ISC license · 0 weekly downloads
## Install
```sh
npm install vue-all-tools
pnpm add vue-all-tools
yarn add vue-all-tools
bun add vue-all-tools
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.8 |
| Published | 2019-11-12 |
| First published | 2019-07-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 203.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Franco Rosatto |
| Maintainers | francoe12012 |
## Links
- npm: https://www.npmjs.com/package/vue-all-tools
- Repository: https://github.com/francoe1/vue-all-tools
- Homepage: https://github.com/francoe1/vue-all-tools#readme
- Issues: https://github.com/francoe1/vue-all-tools/issues
- npm.io page: https://npm.io/package/vue-all-tools
## Recent versions
- 1.1.8 (latest) — 2019-11-12
- 1.1.7 — 2019-11-09
- 1.1.6 — 2019-11-09
- 1.1.5 — 2019-11-09
- 1.1.4 — 2019-11-09
- 1.1.3 — 2019-11-01
- 1.1.2 — 2019-08-09
- 1.1.1 — 2019-08-09
- 1.1.0 — 2019-08-09
- 1.0.38 — 2019-08-09
- 1.0.3-7.2 — 2019-08-09
- 1.0.3-7.1 — 2019-08-09
- 1.0.37 — 2019-08-06
- 1.0.36 — 2019-08-05
- 1.0.35 — 2019-08-02
- … 34 more at https://npm.io/package/vue-all-tools/versions
## README
#### Vue-all-tools Version 1.0.1 (02/07/19)
# Introducción
Para utilizar se debe incluir la libreria a main.js y configurar el HostUrl.
Los componentes datatable y paginator solo funcionan con Fraravel y compatibildad con laravel no segura.
require("./components/vue-all-tools");
let hostUrl = "https://deb.boutiquemanagement.com/api";
Request.setUrl(hostUrl, hostUrl);
#### Prop vue para DataTable -
name = requerido para identificar las tablas.
history = indica si la tabla genera un historial en la URL.
#### Configuración.
Se debe añadir el componente display-dialog y context-menu al inicio de la aplicación vue.
## Usar Display Dialog.
Para crear un instancia de un dialogo utilizar Dialog.open, esto retorna una promesa.
Dialog.open("Title", "Content", ["Button 1", "Button 2"]);
#### Configuraciónes
Dialog.open("Title", "Content", ["Cancel", "Button 2"])
.then(e => {
e.state.code // Cancel == 1
e.state.code // Button 2 == 2
e.state.text // Text of button
e.preventDefault() // Prevent close dialog
});
#### Usar un componente de manera dinamica dentro de un dialogo.
Dialog.open("Title", import("component/path/index.vue"), ["Accept"])
.onLoadComponent(component => {
component.getValueCustomMethod();
})
#### Desactivar un boton.
Dialog.open("Title", import("component/path/index.vue"), ["Accept"])
.setActiveButton(1, false);
#### Utilizar un estilo personalizado para todos los dialogos.
//Name of style
Dialog.setTheme("black/default");
//or Custom
//Class of stylesheet and path of stylesheet
Dialog.setTheme("class-stylesheet", "@/styles/dialog_theme.scss");
#### Cambiar el estilo de una instancia de dialogo.
Dialog.open("Title", "content", ["btn1"]).setTheme("black");
Dialog.open("Title", "content", ["btn1"]).setTheme("class-stylesheet", "@/styles/dialog_theme.scss");
#default
{
> section
{
border: 2px solid var(--color-1);
> .title
{
text-align: left;
background-color: var(--color-1);
color: var(--color-white);
padding-left: 5px;
}
> .content
{
margin: 10px 5px;
text-align: center;
padding: 2px;
}
> .actions
{
justify-content: flex-end;
}
}
}
#### Extras
Se puede manejar multiples mensajes a la vez, manejando la profundidad con sendFront();
Se puede cerrar un mensaje desde una referencia con la funcion close();
Se puede obtener el componente de un dialogo mediante getComponent();
## Datatable
Para utilizar la tabla se debe usar la etiqueta datatable.
Para hacer referencia a la tabla utilizar el atributo ref de vue.js.
#### Archivo de configuración.
export default {
config: {
path: "product_color",
path_update: "product_color_select" // si no se especifica, la funcion actualizar toma como URL la variable PATH.
},
header: [
{
text: "Id",
key: "id",
useFilter: true,
style: {
width: "50px",
"justify-content": "center"
}
},
{
text: "Name",
key: "name",
useFilter: true,
style: {
width: "100%",
}
}
]
}
#### Eventos.
//Se llama cuando se carga información.
dataloaded (lista de elementos)
//Se llama cuando se presiona boton derecho sobre una fila.
contextmenu (row_data, header_cell)
//Se llama cuando se hace click sobre una celda de la fila.
cellclick (row_data, header_cell, row_index, cell_index)
//Se llama cuando se hace doble click sobre una celda de la fila.
celldblclick (row_data, header_cell)
//Se llama cuando se selecciona una nueva fila.
select (row_data, row_index)
//Se llama cuando se hace doble click sobre una fila.
rowdblclick (row_data, row_index)
// Se utiliza para actualizar una fila desde la base de datos.
async updateRow(index)
## ContextMenu
Para utilizar context menu se debe llamar ContextMenu.show(optiones) y retornara una promesa, si se cumple recibe el indice de la opción seleccionada.
ContextMenu.show(["Ver", "Editar", "Eliminar"]).then(option => {
console.log(option);
})
## Paginator
Para utilizar paginator se debe crear una instancia utilzar \_\_class
let paginator = new __class.Paginator("http://miweb.com/api");
paginator.confi.perPage = 10; //Resultados por pág.
console.log(paginator.info); //Información del paginado de Fraravel.
console.log(paginator.getCurrentPage()) //Obtener pagina actual.
paginator.request(); //Obtener datos.
paginator.requestNext(); //Obtener datos de la siguiente pag.
paginator.requestBack(); //Obtener datos de la anterior pag.
paginator.requestMore(); //Obtener datos de la siguiente pag. y agregarlo a los datos actuales.
paginator.requestPage(); //Obtener datos de la pag. indicada.
paginator.availableData(); //Comprobar que existen datos.
paginator.isLoading(); //Comprobar si esta trabajando.
paginator.onReceiverData(r => console.log(r)); //Callback al recibir información.
console.log(paginator.data); //Obtener todos los datos del paginador.
readParametersOfUrl(id) // Leer la url.
moveParametersToUrl(id) // Escribir la url.
:triangular_flag_on_post: ¡Desde la versión 1.0.24^ ya no esta disponible paginator.query!
##### Parameters es el nuevo sistema de Querys para el Paginador.
paginator.getParameter(key); //Obtener objecto parametro.
paginator.setParameter(key, val); //crear o actualizar parametro.
paginator.setParameterRange(array); //crear o actualizar multiples parametros.
paginator.removeParameter(key); // eliminar parametro
paginator.clearParameter(); // eliminar todos los parametros
paginator.getParameterQuery(); // obtener query de los parametros.
## Request
Require AXIOS
Request.setUrl("productionUrl", "debUrl");
Request.getMetric() //Retorna el estado de consultas.
Request.onStart(callback); //Se llama cuando se inicia un conjunto de consultas.
Request.onEnd(callback); //Se llama cuando se finaliza un conjunto de consultas.
Request.isWorking(); //Retorna estado.
Request.appendHeader(key, value); //Añadir header para las consultas.
Request.send(query, method, data); //Envia la consulta mediante XHR usando AXIOS y retorna una promesa.
Data puede ser FormData o un objeto comun, que sera convertido automaticamente a FormData. Solo se admiten metodos GET y POST para Fraravel.
Request.toFormData(obj); // Convertir objeto a FormData.
Request.getBaseUrl(optionalAppend); //Obtiene la ruta según el contexto.
Request.isLocal(); //Verificar si se esta trabajando en ambito de desarrollo.
Request.currentHost(); //Retorna el host actual.
## Router (Opcional)
Router sirve para VUE router.
para utilizar se debe agregar lo siguiente en el inicio de la aplicación. main.js.
Router.init(router);
#### Configuración de handlers para la validación y seguridad de las rutas.
Router.handlerAvailablePath((to) => {
return new Promise(r => {
setTimeout(() => r(false), 4500);
});
});
Router.handlerAvailablePath((to) => { return false; });
//Se puede retornar un valor booleano o una promesa con resultado booleano.
#### Si se necesita cargar información antes de que se haga la validación de la ruta utilizar
Router.handlerBeforeEnterPath(callback)
Router.handlerBeforeEnterPath(() => {
return new Promise(r => {
setTimeout(() => {
r(true);
}, 1000);
});
});
##### Utilizar validaciones en las rutas con redirección.
path: '/control',
meta: {
validate: new Promise(r => setTimeout(() => r(false), 5000)),
redirect: "login"
},
component: () => import('@/views/control')
path: '/control',
meta: {
validate: () => DataStore.get("api_token") != undefined,
redirect: "login"
},
component: () => import('@/views/control')
#### Bloquear una ruta por permisos.
Si el usuarios no contiene los permisos la navegación no continua.
path: '/control',
meta: { permissions: [100, 105, 700] },
component: () => import('@/views/control')
#### Extras
Automaticamente se agregaran todas las rutas que esten especificadas en archivos .js dentro de src/rutes.
---
Las rutas tienen una barra de carga en la parte superior de la pagina.
#### Utilizar Querys
Las querys sirven para mantener estados de la aplicación en la URL.
Router.getQuery() //Obtiene objeto de la query
Router.setGroupQuery(name, querys) //Setear un grupo de querys
Router.getGroupQuery(querys) //Obtiene el grupo completo de querys.
Router.deleteGroupQuery(name, ?query_key) // Eliminar grupo de querys, si no se especifica el query_key se elimina el grupo completo, de lo contrario solo la llave indicada.
Router.setQuery(querys); // Setear objeto de query.
Router.deleteQuery(name); // Elimina Query
## DataStore (VUEX)
Para utilizar DataStore se require instalar VUEX, se cargaran todos los modulos que se encuentren dentro de @/datastore/modules. El nombre de los modulos se define con el nombre del archivos .js
Para configurar en el inicio de Vue utilizar DataStore.store.
new Vue({
router,
store: DataStore.store,
render: function (h) { return h(App); },
}).$mount('#app')
##### DataStore tambien sirve para manejar los localStorage.
Soporta todo tipo de formato que pueda ser serializado a JSON.stringfy -
DataStore.delete(key)
DataStore.save(key, data)
DataStore.get(key)
DataStore.clearAll()
## Task y TaskController
Task es una promesa, cuenta con un controlador para manejar multiples tareas a la vez.
var pc = new TaskController();
for (var i = 0; i < files.length; i++) pc.add(this.addFile(files[i]));
pc.then(() => this.eventAdd(files));
##### La tarea no inicia si no se utiliza then()
var t = new Task((success) => {success("resultado")});
//La tarea esta creada pero no inicia.
t.then() // INICIA la tarea.
Tambien se puede forzar un inicio mediante.
new Task((success) => {success("resultado")}).start();
# Inputs
Aqui se var a ir agregando todos los componentes de tipo entrada.
### Input-File
Input file sirve para trabajar con la carga de archivos, tiene vista preview en imagenes y otros archivos.
##### Configuraciónes
config: {
max_files: 3,
accept: ['.jpg', '.png', '.docx'],
}
##### Eventos
onadd(files[]) // Se llama cuando se agregan archivos.
ondelete(files[]); // Se llama cuando se eliminan archvios
#### input-textarea
Crear un componente de edición de texto (richt)
usar
El v-model funciona solo en una dirección, para modificar el contenido del textarea utilizar .setContent("TEXT")
---
_Source: https://npm.io/package/vue-all-tools · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._