miniform-kl
v0.0.1
Published
Mini form con web components, autocomplete and dropdown
Maintainers
santiramosReadme
miniform-kl Component
El componente miniform-kl es un formulario mínimo que incluye un campo de entrada adicional y un campo de autocompletado. Este componente permite buscar opciones a través de una URL de autocompletado y guardar los datos en una URL de guardado.
Propiedades
inputName(string): Nombre del campo de entrada adicional.inputLabel(string): Etiqueta del campo de entrada adicional.buttonName(string): Texto del botón de guardar.inputPlaceholder(string): Placeholder del campo de entrada adicional. Valor por defecto: "Ingrese un valor".autocompleteUrl(string): URL para obtener las opciones del autocompletado.saveUrl(string): URL para guardar los datos.autocompleteFieldName(string): Nombre del campo para el valor del autocompletado.inputFieldName(string): Nombre del campo para el valor del input adicional.
Eventos
searchResults: Emitido cuando se realiza una búsqueda. Contiene los valores del autocompletado y del campo de entrada adicional.
Métodos
handleSearch(): Realiza la búsqueda y guarda los datos en la URL proporcionada.
Uso
<miniform-kl
inputName="searchInput"
inputLabel="Descripción"
buttonName="Guardar"
inputPlaceholder="Ingrese un valor"
autocompleteUrl="http://[::1]:3001/users"
saveUrl="https://api.example.com/save"
autocompleteFieldName="users"
inputFieldName="description"
></miniform-kl>Ejemplo
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Stencil Component Starter</title>
<script type="module" src="/build/miniform.esm.js"></script>
<script nomodule src="/build/miniform.js"></script>
</head>
<body>
<h1>Prueba del componente miniform</h1>
<miniform-kl
inputName="searchInput"
inputPlaceholder="Ingrese un valor"
></miniform-kl>
<script>
// Escuchar eventos personalizados del componente
const miniform = document.querySelector('miniform-kl');
miniform.addEventListener('searchResults', (event) => {
console.log('Cambios form', event.detail);
});
miniform.buttonName = 'Guardar';
miniform.inputLabel="Descripcion";
miniform.autocompleteUrl = 'http://[::1]:3001/users';
miniform.saveUrl="https://api.example.com/save";
miniform.autocompleteFieldName="users";
miniform.inputFieldName="description";
miniform.addEventListener('optionSelected', (event) => {
console.log('Opción seleccionada:', event.detail);
});
miniform.addEventListener('inputChange', (event) => {
console.log('Texto ingresado:', event.detail);
});
</script>
</body>
</html>