@nauticad/test-widgets
v1.0.1
Published
### Angular ```shell npm install --save @nauticad/test-widgets ```
Readme
TQ Widgets Component
Instalación
Angular
npm install --save @nauticad/test-widgetsVanilla Javascript
<!doctype html>
<html lang="en">
<head>
...
<!--Cargar los estilos compilados-->
<link rel="stylesheet" href="https://tq-components.s3.amazonaws.com/styles.css">
</head>
<body>
...
<!--Cargar los componentes publicados-->
<script src="https://tq-components.s3.amazonaws.com/tq-components.js"></script>
</body>Componentes
Buscador
Componente para capturar texto que agrega un delay para no saturar el servicio de busqueda
Entradas:
- placeholder: Texto de ayuda que aparece en la barra de busqueda
Salidas:
- search: Evento que emite el texto que el usuario ha ingresado en la barra de busqueda
Angular
<tq-searcher placeholder="Test"
(search)="showTerm(event)">
</tq-searcher>function showTerm(term): void {
console.log(term)
}Ejemplo Vanilla JS
<tq-searcher id="buscador" placeholder="Ejemplo">
</tq-searcher>
<script type="text/javascript">
(function (){
document.getElementById('buscador').addEventListener('search', (term) => {
console.log(`Termino a buscar: ${term.detail}`);
})
})()
</script>###Firma
Componente para capturar firmas, el formato de retorno es base64
Salidas:
- signature: Evento que emite en base64 la firma recolectada
Angular
<tq-signature (sign)="showSign(event)">
</tq-signature>function showSign(term): void {
console.log(term)
}Ejemplo Vanilla JS
<tq-signature id="signature">
</tq-signature>
<script type="text/javascript">
(function () {
document.getElementById('signature').addEventListener('sign', (evt) => {
console.log(`Firma`, evt.detail);
});
)()
</script>Ordenamiento
Componente para ordenar un conjunto de elementos
Los Elementos de entrada deben cumplir con la interfaz ISortOption
interface ISortOption {
text:string;
}Entradas
- sentence: Enunciado de la pregunta
- helperText: Texto de ayuda
- items: Arreglo de tipo
ISortOption
Salidas
- answer: Arreglo de elementos ordenados de tipo
ISortOption
Ejemplo Angular
<tq-sort sentence="Pregunta de prueba"
helperText="Un mensaje de ayuda"
[items]="items"
(answer)="showAsnwer($event)">
</tq-sort>const items = [
{
text: 'Option 1'
},
{
text: 'Option 2'
}
]
function showAnswer(answer): void {
console.log(answer)
}Ejemplo Vanilla JS
<tq-sort id="sort"
sentence="Pregunta de prueba"
helper-text="Un mensaje de ayuda">
</tq-sort>
<script type="text/javascript">
(function (){
let items = [
{
text: 'Item 1'
},
{
text: 'Item 2'
}
];
let sortCmpt = document.getElementById('sort');
sortCmpt.items = items;
sortCmpt.addEventListener('answer', (evt) => {
console.log('Elementos organizados', evt.detail);
});
})();
</script>