WorkRoot/Astro-Component
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New Changes with Model fixxed bugges

Browse Source
This commit is contained in:
Clintchiz
2025-09-30 17:58:07 +05:30
parent b494f6c7fc
commit df9bc67220
2 changed files with 185 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Modal.astro
+28 -28
View File
@@ -9,6 +9,7 @@ interface Props {
closedby?: "none" | "closerequest" | "any"; closedby?: "none" | "closerequest" | "any";
onClose?: () => void; onClose?: () => void;
dialogClass?: string; dialogClass?: string;
triggerClass?: string;
} }
const { const {
@@ -19,38 +20,37 @@ const {
onClose, onClose,
closedby = "none", closedby = "none",
dialogClass = "", dialogClass = "",
triggerClass = "",
} = Astro.props; } = Astro.props;
--- ---
<div> <div id={`trigger-${id}`} class={triggerClass}>
<div id={`trigger-${id}`} class="wr:w-fit"> <slot name="trigger" />
<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> </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> <style>
dialog::backdrop { dialog::backdrop {
src/pages/modal.astro
+157 -143
View File
@@ -5,160 +5,174 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
--- ---
<ComponentLayout class="wr:p-4"> <ComponentLayout class="wr:p-4">
<!-- Small Center Modal --> <div class="wr:flex wr:gap-2">
<Modal id="sm-center" size="sm" position="center" closedby="closerequest"> <!-- Small Center Modal -->
<span slot="trigger"> <Modal
id="sm-center"
size="sm"
position="center"
closedby="closerequest"
triggerClass="wr:w-1/2"
>
<button <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 Small Center
</button> </button>
</span> <div slot="content" class="wr:max-h-[400px] wr:overflow-y-auto">
<div slot="content" class="wr:max-h-[400px] wr:overflow-y-auto"> <h2 class="wr:text-lg wr:font-semibold">Small Center Modal</h2>
<h2 class="wr:text-lg wr:font-semibold">Small Center Modal</h2> <p class="wr:mt-2">
<p class="wr:mt-2"> This is a small modal centered on the screen with limited
This is a small modal centered on the screen with limited height.
height. </p>
</p> <ul class="wr:space-y-2 wr:mt-4">
<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) => ( Array.from({ length: 40 }).map((_, i) => (
<li class="wr:p-2 wr:bg-gray-100 wr:rounded"> <p class="wr:mt-2">
Item {i + 1} Paragraph {i + 1}: Lorem ipsum dolor sit amet,
</li> consectetur adipiscing elit.
</p>
)) ))
} }
</ul> <button
<button id="close-md-top"
id="close-sm-center" class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded" >
> Close
Close </button>
</button> </div>
</div> </Modal>
</Modal>
<!-- Medium Top Modal --> <!-- Large Bottom Modal -->
<Modal id="md-top" size="md" position="top" closedby="any"> <Modal
<span slot="trigger"> id="lg-bottom"
<button size="lg"
class="wr:px-4 wr:py-2 wr:rounded wr:bg-green-600 wr:text-white" position="bottom"
> closedby="closerequest"
Medium Top >
</button> <span slot="trigger">
</span> <button
<div slot="content" class="wr:max-h-[500px] wr:overflow-y-auto"> class="wr:px-4 wr:py-2 wr:rounded wr:bg-purple-600 wr:text-white"
<h2 class="wr:text-lg wr:font-semibold">Medium Top Modal</h2> >
<p class="wr:mt-2"> Large Bottom
This modal appears at the top of the page with scrollable </button>
content. </span>
</p> <div slot="content" class="wr:max-h-[600px] wr:overflow-y-auto">
{ <h2 class="wr:text-lg wr:font-semibold">Large Bottom Modal</h2>
Array.from({ length: 40 }).map((_, i) => ( <p class="wr:mt-2">
<p class="wr:mt-2"> This modal appears at the bottom of the screen.
Paragraph {i + 1}: Lorem ipsum dolor sit amet, </p>
consectetur adipiscing elit. <ul class="wr:space-y-2 wr:mt-4">
</p> {
)) Array.from({ length: 50 }).map((_, i) => (
} <li class="wr:p-2 wr:bg-gray-100 wr:rounded">
<button Bottom Item {i + 1}
id="close-md-top" </li>
class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded" ))
> }
Close </ul>
</button> <button
</div> id="close-lg-bottom"
</Modal> class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
>
Close
</button>
</div>
</Modal>
<!-- Large Bottom Modal --> <!-- Extra Large Center Modal -->
<Modal id="lg-bottom" size="lg" position="bottom" closedby="closerequest"> <Modal id="xl-center" size="xl" position="center">
<span slot="trigger"> <span slot="trigger">
<button <button
class="wr:px-4 wr:py-2 wr:rounded wr:bg-purple-600 wr:text-white" class="wr:px-4 wr:py-2 wr:rounded wr:bg-orange-600 wr:text-white"
> >
Large Bottom XL Center
</button> </button>
</span> </span>
<div slot="content" class="wr:max-h-[600px] wr:overflow-y-auto"> <div slot="content" class="wr:max-h-[700px] wr:overflow-y-auto">
<h2 class="wr:text-lg wr:font-semibold">Large Bottom Modal</h2> <h2 class="wr:text-lg wr:font-semibold">XL Center Modal</h2>
<p class="wr:mt-2"> <p class="wr:mt-2">
This modal appears at the bottom of the screen. Extra large modal in the middle with scroll test.
</p> </p>
<ul class="wr:space-y-2 wr:mt-4">
{ {
Array.from({ length: 50 }).map((_, i) => ( Array.from({ length: 60 }).map((_, i) => (
<li class="wr:p-2 wr:bg-gray-100 wr:rounded"> <p class="wr:mt-2">
Bottom Item {i + 1} Line {i + 1}: Scroll inside modal without moving
</li> page.
</p>
)) ))
} }
</ul> <button
<button id="close-xl-center"
id="close-lg-bottom" class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded" >
> Close
Close </button>
</button> </div>
</div> </Modal>
</Modal>
<!-- Extra Large Center Modal --> <!-- Full Screen Modal -->
<Modal id="xl-center" size="xl" position="center"> <Modal id="full-screen" size="full" position="center">
<span slot="trigger"> <span slot="trigger">
<button <button
class="wr:px-4 wr:py-2 wr:rounded wr:bg-orange-600 wr:text-white" class="wr:px-4 wr:py-2 wr:rounded wr:bg-red-600 wr:text-white"
> >
XL Center Full Screen
</button> </button>
</span> </span>
<div slot="content" class="wr:max-h-[700px] wr:overflow-y-auto"> <div slot="content" class="wr:h-full wr:overflow-y-auto wr:p-6">
<h2 class="wr:text-lg wr:font-semibold">XL Center Modal</h2> <h2 class="wr:text-2xl wr:font-bold">Full Screen Modal</h2>
<p class="wr:mt-2"> <p class="wr:mt-4 wr:text-lg">
Extra large modal in the middle with scroll test. This modal covers the entire screen and scrolls vertically.
</p> </p>
{ {
Array.from({ length: 60 }).map((_, i) => ( Array.from({ length: 100 }).map((_, i) => (
<p class="wr:mt-2"> <p class="wr:mt-2">
Line {i + 1}: Scroll inside modal without moving page. Block {i + 1}: Testing long content inside full
</p> modal.
)) </p>
} ))
<button }
id="close-xl-center" <button
class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded" 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 >
</button> Close Full
</div> </button>
</Modal> </div>
</Modal>
<!-- Full Screen Modal --> </div>
<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>
</ComponentLayout> </ComponentLayout>