natxocc
e842ed8041
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
61 lines
1.8 KiB
Markdown
61 lines
1.8 KiB
Markdown
# Autocomplete
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="app-demo" class="bg-base-100 rounded-xl border border-base-300"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```js
|
|
const paises = [
|
|
"España",
|
|
"México",
|
|
"Argentina",
|
|
"Colombia",
|
|
"Chile",
|
|
"Perú",
|
|
"Venezuela",
|
|
{ label: "Estados Unidos", value: "US" },
|
|
{ label: "Canadá", value: "CA" },
|
|
{ label: "Reino Unido", value: "UK" },
|
|
];
|
|
|
|
const App = () => {
|
|
const password = $("");
|
|
|
|
// Lógica de validación sencilla
|
|
const requirements = [
|
|
{ label: "Mínimo 8 caracteres", check: () => password().length >= 8 },
|
|
{ label: "Incluye un número", check: () => /\d/.test(password()) },
|
|
{ label: "Símbolo especial", check: () => /[^A-Za-z0-9]/.test(password()) }
|
|
];
|
|
|
|
return div({ class: "p-10 max-w-md" }, [
|
|
Input({
|
|
type: "password",
|
|
value: password,
|
|
class: "input-warning",
|
|
oninput: (e) => password(e.target.value),
|
|
label: "Pass",
|
|
float: true,
|
|
left: span({ class: "icon-[lucide--lock] mr-2" }),
|
|
// El contenido que se animará con fx() dentro del Input
|
|
content: div({ class: "mt-2 p-4 bg-base-200 rounded-lg shadow-xl border border-base-300" }, [
|
|
span({ class: "text-xs font-bold uppercase opacity-50" }, "Seguridad:"),
|
|
ul({ class: "mt-2 space-y-1" },
|
|
requirements.map(req => h('li', {
|
|
class: () => `flex items-center text-sm ${req.check() ? 'text-success' : 'text-error opacity-50'}`
|
|
}, [
|
|
span({ class: () => `mr-2 ${req.check() ? 'icon-[lucide--check]' : 'icon-[lucide--x]'}` }),
|
|
req.label
|
|
]))
|
|
)
|
|
])
|
|
})
|
|
]);
|
|
};
|
|
|
|
mount(App, "#app-demo");
|
|
```
|