New Changes with Model fixxed bugges
This commit is contained in:
+28
-28
@@ -9,6 +9,7 @@ interface Props {
|
||||
closedby?: "none" | "closerequest" | "any";
|
||||
onClose?: () => void;
|
||||
dialogClass?: string;
|
||||
triggerClass?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
@@ -19,38 +20,37 @@ const {
|
||||
onClose,
|
||||
closedby = "none",
|
||||
dialogClass = "",
|
||||
triggerClass = "",
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<div>
|
||||
<div id={`trigger-${id}`} class="wr:w-fit">
|
||||
<slot name="trigger" />
|
||||
</div>
|
||||
<dialog
|
||||
open={open}
|
||||
id={`modal-${id}`}
|
||||
closedby={closedby}
|
||||
class={cn(
|
||||
"wr:absolute wr:rounded-md wr:shadow-lg wr:p-4 wr:bg-white wr:dark:bg-neutral-800 wr:m-0 wr:border-0",
|
||||
size === "sm" && "wr:w-[300px]",
|
||||
size === "md" && "wr:w-[500px]",
|
||||
size === "lg" && "wr:w-[700px]",
|
||||
size === "xl" && "wr:w-[900px]",
|
||||
size === "full" &&
|
||||
"wr:w-full wr:h-screen wr:max-w-none wr:rounded-none wr:inset-0",
|
||||
position == "center" &&
|
||||
size !== "full" &&
|
||||
"wr:top-1/2 wr:left-1/2 wr:-translate-x-1/2 wr:-translate-y-1/2",
|
||||
position == "top" && size !== "full" && "wr:top-[30px] wr:mx-auto",
|
||||
position == "bottom" &&
|
||||
size !== "full" &&
|
||||
"wr:bottom-0 wr:top-[95%] wr:mx-auto wr:-translate-y-full",
|
||||
dialogClass,
|
||||
)}
|
||||
>
|
||||
<slot name="content" />
|
||||
</dialog>
|
||||
<div id={`trigger-${id}`} class={triggerClass}>
|
||||
<slot name="trigger" />
|
||||
</div>
|
||||
<dialog
|
||||
open={open}
|
||||
id={`modal-${id}`}
|
||||
closedby={closedby}
|
||||
class={cn(
|
||||
"wr:absolute wr:rounded-md wr:shadow-lg wr:p-4 wr:bg-white wr:dark:bg-neutral-800 wr:m-0 wr:border-0",
|
||||
size === "sm" && "wr:w-[300px]",
|
||||
size === "md" && "wr:w-[500px]",
|
||||
size === "lg" && "wr:w-[700px]",
|
||||
size === "xl" && "wr:w-[900px]",
|
||||
size === "full" &&
|
||||
"wr:w-full wr:h-screen wr:max-w-none wr:rounded-none wr:inset-0",
|
||||
position == "center" &&
|
||||
size !== "full" &&
|
||||
"wr:top-1/2 wr:left-1/2 wr:-translate-x-1/2 wr:-translate-y-1/2",
|
||||
position == "top" && size !== "full" && "wr:top-[30px] wr:mx-auto",
|
||||
position == "bottom" &&
|
||||
size !== "full" &&
|
||||
"wr:bottom-0 wr:top-[95%] wr:mx-auto wr:-translate-y-full",
|
||||
dialogClass,
|
||||
)}
|
||||
>
|
||||
<slot name="content" />
|
||||
</dialog>
|
||||
|
||||
<style>
|
||||
dialog::backdrop {
|
||||
|
||||
+157
-143
@@ -5,160 +5,174 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
|
||||
---
|
||||
|
||||
<ComponentLayout class="wr:p-4">
|
||||
<!-- Small Center Modal -->
|
||||
<Modal id="sm-center" size="sm" position="center" closedby="closerequest">
|
||||
<span slot="trigger">
|
||||
<div class="wr:flex wr:gap-2">
|
||||
<!-- Small Center Modal -->
|
||||
<Modal
|
||||
id="sm-center"
|
||||
size="sm"
|
||||
position="center"
|
||||
closedby="closerequest"
|
||||
triggerClass="wr:w-1/2"
|
||||
>
|
||||
<button
|
||||
class="wr:px-4 wr:py-2 wr:rounded wr:bg-blue-600 wr:text-white"
|
||||
slot="trigger"
|
||||
class="wr:w-full wr:px-4 wr:py-2 wr:rounded wr:bg-blue-600 wr:text-white"
|
||||
>
|
||||
Small Center
|
||||
</button>
|
||||
</span>
|
||||
<div slot="content" class="wr:max-h-[400px] wr:overflow-y-auto">
|
||||
<h2 class="wr:text-lg wr:font-semibold">Small Center Modal</h2>
|
||||
<p class="wr:mt-2">
|
||||
This is a small modal centered on the screen with limited
|
||||
height.
|
||||
</p>
|
||||
<ul class="wr:space-y-2 wr:mt-4">
|
||||
<div slot="content" class="wr:max-h-[400px] wr:overflow-y-auto">
|
||||
<h2 class="wr:text-lg wr:font-semibold">Small Center Modal</h2>
|
||||
<p class="wr:mt-2">
|
||||
This is a small modal centered on the screen with limited
|
||||
height.
|
||||
</p>
|
||||
<ul class="wr:space-y-2 wr:mt-4">
|
||||
{
|
||||
Array.from({ length: 20 }).map((_, i) => (
|
||||
<li class="wr:p-2 wr:bg-gray-100 wr:rounded">
|
||||
Item {i + 1}
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<button
|
||||
id="close-sm-center"
|
||||
class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<!-- Medium Top Modal -->
|
||||
<Modal id="md-top" size="md" position="top" closedby="any">
|
||||
<span slot="trigger">
|
||||
<button
|
||||
class="wr:px-4 wr:py-2 wr:rounded wr:bg-green-600 wr:text-white"
|
||||
>
|
||||
Medium Top
|
||||
</button>
|
||||
</span>
|
||||
<div slot="content" class="wr:max-h-[500px] wr:overflow-y-auto">
|
||||
<h2 class="wr:text-lg wr:font-semibold">Medium Top Modal</h2>
|
||||
<p class="wr:mt-2">
|
||||
This modal appears at the top of the page with scrollable
|
||||
content.
|
||||
</p>
|
||||
{
|
||||
Array.from({ length: 20 }).map((_, i) => (
|
||||
<li class="wr:p-2 wr:bg-gray-100 wr:rounded">
|
||||
Item {i + 1}
|
||||
</li>
|
||||
Array.from({ length: 40 }).map((_, i) => (
|
||||
<p class="wr:mt-2">
|
||||
Paragraph {i + 1}: Lorem ipsum dolor sit amet,
|
||||
consectetur adipiscing elit.
|
||||
</p>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<button
|
||||
id="close-sm-center"
|
||||
class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
<button
|
||||
id="close-md-top"
|
||||
class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<!-- Medium Top Modal -->
|
||||
<Modal id="md-top" size="md" position="top" closedby="any">
|
||||
<span slot="trigger">
|
||||
<button
|
||||
class="wr:px-4 wr:py-2 wr:rounded wr:bg-green-600 wr:text-white"
|
||||
>
|
||||
Medium Top
|
||||
</button>
|
||||
</span>
|
||||
<div slot="content" class="wr:max-h-[500px] wr:overflow-y-auto">
|
||||
<h2 class="wr:text-lg wr:font-semibold">Medium Top Modal</h2>
|
||||
<p class="wr:mt-2">
|
||||
This modal appears at the top of the page with scrollable
|
||||
content.
|
||||
</p>
|
||||
{
|
||||
Array.from({ length: 40 }).map((_, i) => (
|
||||
<p class="wr:mt-2">
|
||||
Paragraph {i + 1}: Lorem ipsum dolor sit amet,
|
||||
consectetur adipiscing elit.
|
||||
</p>
|
||||
))
|
||||
}
|
||||
<button
|
||||
id="close-md-top"
|
||||
class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
<!-- Large Bottom Modal -->
|
||||
<Modal
|
||||
id="lg-bottom"
|
||||
size="lg"
|
||||
position="bottom"
|
||||
closedby="closerequest"
|
||||
>
|
||||
<span slot="trigger">
|
||||
<button
|
||||
class="wr:px-4 wr:py-2 wr:rounded wr:bg-purple-600 wr:text-white"
|
||||
>
|
||||
Large Bottom
|
||||
</button>
|
||||
</span>
|
||||
<div slot="content" class="wr:max-h-[600px] wr:overflow-y-auto">
|
||||
<h2 class="wr:text-lg wr:font-semibold">Large Bottom Modal</h2>
|
||||
<p class="wr:mt-2">
|
||||
This modal appears at the bottom of the screen.
|
||||
</p>
|
||||
<ul class="wr:space-y-2 wr:mt-4">
|
||||
{
|
||||
Array.from({ length: 50 }).map((_, i) => (
|
||||
<li class="wr:p-2 wr:bg-gray-100 wr:rounded">
|
||||
Bottom Item {i + 1}
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<button
|
||||
id="close-lg-bottom"
|
||||
class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<!-- Large Bottom Modal -->
|
||||
<Modal id="lg-bottom" size="lg" position="bottom" closedby="closerequest">
|
||||
<span slot="trigger">
|
||||
<button
|
||||
class="wr:px-4 wr:py-2 wr:rounded wr:bg-purple-600 wr:text-white"
|
||||
>
|
||||
Large Bottom
|
||||
</button>
|
||||
</span>
|
||||
<div slot="content" class="wr:max-h-[600px] wr:overflow-y-auto">
|
||||
<h2 class="wr:text-lg wr:font-semibold">Large Bottom Modal</h2>
|
||||
<p class="wr:mt-2">
|
||||
This modal appears at the bottom of the screen.
|
||||
</p>
|
||||
<ul class="wr:space-y-2 wr:mt-4">
|
||||
<!-- Extra Large Center Modal -->
|
||||
<Modal id="xl-center" size="xl" position="center">
|
||||
<span slot="trigger">
|
||||
<button
|
||||
class="wr:px-4 wr:py-2 wr:rounded wr:bg-orange-600 wr:text-white"
|
||||
>
|
||||
XL Center
|
||||
</button>
|
||||
</span>
|
||||
<div slot="content" class="wr:max-h-[700px] wr:overflow-y-auto">
|
||||
<h2 class="wr:text-lg wr:font-semibold">XL Center Modal</h2>
|
||||
<p class="wr:mt-2">
|
||||
Extra large modal in the middle with scroll test.
|
||||
</p>
|
||||
{
|
||||
Array.from({ length: 50 }).map((_, i) => (
|
||||
<li class="wr:p-2 wr:bg-gray-100 wr:rounded">
|
||||
Bottom Item {i + 1}
|
||||
</li>
|
||||
Array.from({ length: 60 }).map((_, i) => (
|
||||
<p class="wr:mt-2">
|
||||
Line {i + 1}: Scroll inside modal without moving
|
||||
page.
|
||||
</p>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<button
|
||||
id="close-lg-bottom"
|
||||
class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
<button
|
||||
id="close-xl-center"
|
||||
class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<!-- Extra Large Center Modal -->
|
||||
<Modal id="xl-center" size="xl" position="center">
|
||||
<span slot="trigger">
|
||||
<button
|
||||
class="wr:px-4 wr:py-2 wr:rounded wr:bg-orange-600 wr:text-white"
|
||||
>
|
||||
XL Center
|
||||
</button>
|
||||
</span>
|
||||
<div slot="content" class="wr:max-h-[700px] wr:overflow-y-auto">
|
||||
<h2 class="wr:text-lg wr:font-semibold">XL Center Modal</h2>
|
||||
<p class="wr:mt-2">
|
||||
Extra large modal in the middle with scroll test.
|
||||
</p>
|
||||
{
|
||||
Array.from({ length: 60 }).map((_, i) => (
|
||||
<p class="wr:mt-2">
|
||||
Line {i + 1}: Scroll inside modal without moving page.
|
||||
</p>
|
||||
))
|
||||
}
|
||||
<button
|
||||
id="close-xl-center"
|
||||
class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<!-- Full Screen Modal -->
|
||||
<Modal id="full-screen" size="full" position="center">
|
||||
<span slot="trigger">
|
||||
<button
|
||||
class="wr:px-4 wr:py-2 wr:rounded wr:bg-red-600 wr:text-white"
|
||||
>
|
||||
Full Screen
|
||||
</button>
|
||||
</span>
|
||||
<div slot="content" class="wr:h-full wr:overflow-y-auto wr:p-6">
|
||||
<h2 class="wr:text-2xl wr:font-bold">Full Screen Modal</h2>
|
||||
<p class="wr:mt-4 wr:text-lg">
|
||||
This modal covers the entire screen and scrolls vertically.
|
||||
</p>
|
||||
{
|
||||
Array.from({ length: 100 }).map((_, i) => (
|
||||
<p class="wr:mt-2">
|
||||
Block {i + 1}: Testing long content inside full modal.
|
||||
</p>
|
||||
))
|
||||
}
|
||||
<button
|
||||
id="close-full-screen"
|
||||
class="wr:mt-6 wr:px-6 wr:py-3 wr:bg-white wr:rounded wr:text-red-600 wr:border"
|
||||
>
|
||||
Close Full
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
<!-- Full Screen Modal -->
|
||||
<Modal id="full-screen" size="full" position="center">
|
||||
<span slot="trigger">
|
||||
<button
|
||||
class="wr:px-4 wr:py-2 wr:rounded wr:bg-red-600 wr:text-white"
|
||||
>
|
||||
Full Screen
|
||||
</button>
|
||||
</span>
|
||||
<div slot="content" class="wr:h-full wr:overflow-y-auto wr:p-6">
|
||||
<h2 class="wr:text-2xl wr:font-bold">Full Screen Modal</h2>
|
||||
<p class="wr:mt-4 wr:text-lg">
|
||||
This modal covers the entire screen and scrolls vertically.
|
||||
</p>
|
||||
{
|
||||
Array.from({ length: 100 }).map((_, i) => (
|
||||
<p class="wr:mt-2">
|
||||
Block {i + 1}: Testing long content inside full
|
||||
modal.
|
||||
</p>
|
||||
))
|
||||
}
|
||||
<button
|
||||
id="close-full-screen"
|
||||
class="wr:mt-6 wr:px-6 wr:py-3 wr:bg-white wr:rounded wr:text-red-600 wr:border"
|
||||
>
|
||||
Close Full
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</ComponentLayout>
|
||||
|
||||
Reference in New Issue
Block a user