heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update Modal component structure and improve minor UI and template consistency across components

Browse Source
This commit is contained in:
Mamalizz-dev
2026-05-13 13:14:50 +03:30
parent 5351942c3d
commit cc066eb0a2
1 changed files with 28 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/Modal.vue
+7 -13
View File
@@ -50,19 +50,16 @@ const isShow = computed({
class="bg-black/50 backdrop-blur-sm data-[state=open]:animate-overlay-show fixed inset-0 z-999"
/>
<div
class="fixed inset-0 w-full h-svh z-9999 flex-center"
v-if="isShow"
<DialogContent
class="fixed inset-0 z-9999 flex items-start justify-center overflow-y-auto overscroll-contain data-[state=open]:animate-content-show focus:outline-none"
style="touch-action: pan-y"
>
<div
:class="contectClass"
class="overflow-y-auto max-h-svh absolute left-[50%] py-10 w-fit max-w-[50rem] translate-x-[-50%]"
>
<DialogContent
class="data-[state=open]:animate-content-show text-black font-iran-yekan-x focus:outline-none z-[100]"
class="relative w-fit max-w-[50rem] my-auto py-10"
>
<div
class="rounded-2xl bg-white shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]"
class="rounded-2xl bg-white text-black font-iran-yekan-x shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]"
>
<div
class="w-full flex items-center px-6 justify-between py-[1.5rem] border-b border-slate-200"
@@ -76,9 +73,7 @@ const isShow = computed({
class="**:fill-black"
/>
</DialogClose>
<DialogTitle
class="typo-sub-h-md lg:typo-sub-h-xl font-semibold flex items-center gap-3"
>
<DialogTitle class="typo-sub-h-md lg:typo-sub-h-xl font-semibold flex items-center gap-3">
{{ title }}
<Icon
v-if="!!icon"
@@ -91,9 +86,8 @@ const isShow = computed({
<slot name="content" />
</div>
</div>
</div>
</DialogContent>
</div>
</div>
</DialogPortal>
</DialogRoot>
</template>