o HTMLX parece muito o Unpoly - você conhece? Basta algumas TAGS e o site MPA parece um SPA https://unpoly.com/
Se uma olhada de não conhece!
Me parece não sei que HTMLX é um pouco mais complicado que o Unpoly mas nunca mexi
com HTMLX pode ser que eu esteja totalmente errado!
Mas é legal para um PWA ou um webview ter um MPA que parece SPA.
Eu mesmo estou planejanto um projeto com unpoly para criar um PWA
Cara interessante não conhecia o Unlopy, tava dando uma olhada e achei bem dificil, mas é por que eu ainda não tentei né, mas o HTMX ele é bem simplificado, você precisa de poucos atributos para alcançar o que você precisa, como fazer um modal
<li
class="font-bold flex gap-2 justify-center items-center cursor-pointer rounded-md px-2 bg-teal-400 hover:bg-teal-600 border-2 border-teal-400 border-opacity-20 text-white"
hx-get="pages/documentacao/modals/entry.html"
hx-trigger="click"
hx-target="#modal"
hx-swap="outterHTML"
>
<i class="fa-solid fa-plus"></i>
<span>Adicionar</span>
</li>
<!-- MODAL -->
<div id="modal">
</div>
<div data-entry-modal="entry" class="fixed top-0 left-0 bottom-0 right-0">
<div class="flex flex-row justify-center items-center h-full w-full uppercase font-thin">
<form class="flex flex-col gap-4 bg-teal-800 p-4 relative rounded-md">
<span data-entry-close="close" class="absolute top-0 right-0 p-2 text-white hover:text-teal-400">
<i class="fa-solid fa-close"></i>
</span>
<div class="pt-5">
<label class="flex flex-col w-full" for="typification">
<p class="text-white">Tipificação</p>
<select class="text-thin" name="typification" id="typification">
<option value="fq">Liberação</option>
<option value="fq">Validação</option>
<option value="fq">Validação-liberação</option>
</select>
</label>
<label class="flex flex-col w-full" for="code">
<p class="text-white">Código</p>
<input type="text" name="code" id="code">
</label>
<label class="flex flex-col w-full" for="name">
<p class="text-white">Nome</p>
<input type="text" name="name" id="name">
</label>
<label class="flex flex-col w-full" for="entry_at">
<p class="text-white">Data da entrada</p>
<input type="date" name="entry_at" id="entry_at">
</label>
<label class="flex flex-col w-full" for="type">
<p class="text-white">Tipo</p>
<input type="text" name="type" id="type">
</label>
<label class="flex flex-col w-full" for="lab">
<p class="text-white">Laboratório</p>
<select class="text-thin" name="lab" id="lab">
<option value="fq">Físiquo-químico</option>
<option value="fq">Microbiólogico</option>
</select>
</label>
</div>
<input type="submit" value="Enviar" class="bg-teal-400 hover:bg-teal-600">
</form>
</div>
<script>
close_modal("data-entry-modal", "data-entry-close")
</script>
</div>
function close_modal(modal, close) {
const closeButton = document.querySelector(`[${close}]`)
const modalSelect = document.querySelector(`[${modal}]`)
closeButton.addEventListener('click', (e) => {
e.stopPropagation();
if (!modalSelect.classList.contains("hidden")) {
modalSelect.remove()
}
})
}
