New Changes with Model
This commit is contained in:
@@ -7,8 +7,6 @@ interface Props {
|
|||||||
size?: "sm" | "md" | "lg" | "xl" | "full";
|
size?: "sm" | "md" | "lg" | "xl" | "full";
|
||||||
position?: "center" | "top" | "bottom";
|
position?: "center" | "top" | "bottom";
|
||||||
closedby?: "none" | "closerequest" | "any";
|
closedby?: "none" | "closerequest" | "any";
|
||||||
onOpen?: () => void;
|
|
||||||
onClose?: () => void;
|
|
||||||
dialogClass?: string;
|
dialogClass?: string;
|
||||||
triggerClass?: string;
|
triggerClass?: string;
|
||||||
}
|
}
|
||||||
@@ -18,8 +16,6 @@ const {
|
|||||||
size = "md",
|
size = "md",
|
||||||
position = "center",
|
position = "center",
|
||||||
open,
|
open,
|
||||||
onOpen,
|
|
||||||
onClose,
|
|
||||||
closedby = "none",
|
closedby = "none",
|
||||||
dialogClass = "",
|
dialogClass = "",
|
||||||
triggerClass = "",
|
triggerClass = "",
|
||||||
@@ -77,26 +73,17 @@ const {
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script type="module" is:inline define:vars={{ id, onOpen, onClose }}>
|
<script type="module" is:inline define:vars={{ id }}>
|
||||||
const trigger = document.getElementById(`trigger-${id}`);
|
const trigger = document.getElementById(`trigger-${id}`);
|
||||||
const modal = document.getElementById(`modal-${id}`);
|
const modal = document.getElementById(`modal-${id}`);
|
||||||
const close = document.getElementById(`close-${id}`);
|
const close = document.getElementById(`close-${id}`);
|
||||||
|
|
||||||
trigger?.addEventListener("click", () => {
|
trigger?.addEventListener("click", () => {
|
||||||
if (!modal.open) {
|
if (!modal.open) {
|
||||||
if (onOpen) {
|
|
||||||
onOpen(modal);
|
|
||||||
}
|
|
||||||
modal?.showModal();
|
modal?.showModal();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
modal?.addEventListener("close", () => {
|
|
||||||
if (onClose) {
|
|
||||||
onClose(modal);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
close?.addEventListener("click", () => {
|
close?.addEventListener("click", () => {
|
||||||
modal?.close();
|
modal?.close();
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
---
|
---
|
||||||
import Button from "../components/Button.astro";
|
|
||||||
import Modal from "../components/Modal.astro";
|
import Modal from "../components/Modal.astro";
|
||||||
import ComponentLayout from "../layouts/ComponentLayout.astro";
|
import ComponentLayout from "../layouts/ComponentLayout.astro";
|
||||||
---
|
---
|
||||||
@@ -12,7 +11,6 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
|
|||||||
size="sm"
|
size="sm"
|
||||||
position="center"
|
position="center"
|
||||||
closedby="closerequest"
|
closedby="closerequest"
|
||||||
triggerClass="wr:w-1/2"
|
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
slot="trigger"
|
slot="trigger"
|
||||||
|
|||||||
Reference in New Issue
Block a user