@nauticad/test-widgets NPM

TQ Widgets Component

Instalación

Angular

npm install --save @nauticad/test-widgets

Vanilla 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>

tslib

@infinitebrahmanuniverse/nolb-_nau @everything-registry/sub-chunk-635

1.0.1

3 years ago

1.0.0

3 years ago