new structure
This commit is contained in:
37
packages/sigproui/components/Dialog.js
Normal file
37
packages/sigproui/components/Dialog.js
Normal file
@@ -0,0 +1,37 @@
|
||||
import { $, html } from "sigpro";
|
||||
|
||||
$.component(
|
||||
"c-dialog",
|
||||
(props, { slot, emit }) => {
|
||||
return html`
|
||||
<dialog
|
||||
.class=${() => `modal ${props.open() ? "modal-open" : ""}`}
|
||||
.open=${() => props.open()}
|
||||
@close=${(e) => {
|
||||
if (typeof props.open === "function") props.open(false);
|
||||
emit("close", e);
|
||||
}}>
|
||||
<div class="modal-box">
|
||||
<div class="flex flex-col gap-4">${slot()}</div>
|
||||
|
||||
<div class="modal-action">
|
||||
<form method="dialog" @submit=${() => props.open(false)}>
|
||||
${slot("buttons")}
|
||||
${() =>
|
||||
!slot("buttons").length
|
||||
? html`
|
||||
<button class="btn">Cerrar</button>
|
||||
`
|
||||
: ""}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="dialog" class="modal-backdrop" @submit=${() => props.open(false)}>
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
`;
|
||||
},
|
||||
["open"],
|
||||
);
|
||||
Reference in New Issue
Block a user