natxocc
910c6ab3c7
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
118 lines
3.3 KiB
Markdown
118 lines
3.3 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 App = () => {
|
|
// const selected = $('');
|
|
// const filterType = $('all');
|
|
|
|
// const allItems = {
|
|
// fruits: ['Apple', 'Banana', 'Orange', 'Mango'],
|
|
// vegetables: ['Carrot', 'Broccoli', 'Spinach', 'Potato'],
|
|
// all: ['Apple', 'Banana', 'Orange', 'Mango', 'Carrot', 'Broccoli', 'Spinach', 'Potato']
|
|
// };
|
|
|
|
// return div({ class: 'flex flex-col gap-4 w-full' }, [
|
|
// Select({
|
|
// items: [
|
|
// { value: 'all', label: 'All items' },
|
|
// { value: 'fruits', label: 'Fruits' },
|
|
// { value: 'vegetables', label: 'Vegetables' }
|
|
// ],
|
|
// value: filterType,
|
|
// onchange: (e) => filterType(e.target.value)
|
|
// },
|
|
// ),
|
|
// Autocomplete({
|
|
// items: () => allItems[filterType()],
|
|
// value: selected,
|
|
// onselect: (value) => selected(value)
|
|
// })
|
|
// ]);
|
|
// };
|
|
|
|
|
|
const App = () => {
|
|
const password = $("");
|
|
const selected = $('');
|
|
|
|
const countries = [
|
|
'España', 'México', 'Argentina', 'Colombia', 'Chile',
|
|
{ label: 'Estados Unidos', value: 'US' },
|
|
{ label: 'Canadá', value: 'CA' },
|
|
];
|
|
|
|
// 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()) },
|
|
];
|
|
const paisSelected = $("");
|
|
return div({ class: "p-10 max-w-md" }, [
|
|
Autocomplete({
|
|
label: 'País',
|
|
float: true,
|
|
placeholder: 'Escribe para buscar...',
|
|
items: countries,
|
|
value: selected,
|
|
onselect: (item) => console.log('Seleccionado:', item),
|
|
}),
|
|
|
|
h('p', { class: 'text-sm opacity-70' }, () =>
|
|
`Valor actual: ${selected() || 'ninguno'}`
|
|
),
|
|
Input({
|
|
type: "password",
|
|
value: password,
|
|
rule: "[0-9]*",
|
|
hint: "Debes escribir numeros del 0 al 9",
|
|
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");
|
|
```
|