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
+7 -7
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,14 +20,14 @@ 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> </div>
<dialog <dialog
open={open} open={open}
id={`modal-${id}`} id={`modal-${id}`}
closedby={closedby} closedby={closedby}
@@ -47,10 +48,9 @@ const {
"wr:bottom-0 wr:top-[95%] wr:mx-auto wr:-translate-y-full", "wr:bottom-0 wr:top-[95%] wr:mx-auto wr:-translate-y-full",
dialogClass, dialogClass,
)} )}
> >
<slot name="content" /> <slot name="content" />
</dialog> </dialog>
</div>
<style> <style>
dialog::backdrop { dialog::backdrop {
src/pages/modal.astro
+21 -7
View File
@@ -5,15 +5,21 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
--- ---
<ComponentLayout class="wr:p-4"> <ComponentLayout class="wr:p-4">
<div class="wr:flex wr:gap-2">
<!-- Small Center Modal --> <!-- Small Center Modal -->
<Modal id="sm-center" size="sm" position="center" closedby="closerequest"> <Modal
<span slot="trigger"> 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">
@@ -71,7 +77,12 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
</Modal> </Modal>
<!-- Large Bottom Modal --> <!-- Large Bottom Modal -->
<Modal id="lg-bottom" size="lg" position="bottom" closedby="closerequest"> <Modal
id="lg-bottom"
size="lg"
position="bottom"
closedby="closerequest"
>
<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-purple-600 wr:text-white"
@@ -119,7 +130,8 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
{ {
Array.from({ length: 60 }).map((_, i) => ( Array.from({ length: 60 }).map((_, i) => (
<p class="wr:mt-2"> <p class="wr:mt-2">
Line {i + 1}: Scroll inside modal without moving page. Line {i + 1}: Scroll inside modal without moving
page.
</p> </p>
)) ))
} }
@@ -149,7 +161,8 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
{ {
Array.from({ length: 100 }).map((_, i) => ( Array.from({ length: 100 }).map((_, i) => (
<p class="wr:mt-2"> <p class="wr:mt-2">
Block {i + 1}: Testing long content inside full modal. Block {i + 1}: Testing long content inside full
modal.
</p> </p>
)) ))
} }
@@ -161,4 +174,5 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
</button> </button>
</div> </div>
</Modal> </Modal>
</div>
</ComponentLayout> </ComponentLayout>