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" class="bg-black/50 backdrop-blur-sm data-[state=open]:animate-overlay-show fixed inset-0 z-999"
/> />
<div <DialogContent
class="fixed inset-0 w-full h-svh z-9999 flex-center" 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"
v-if="isShow" style="touch-action: pan-y"
> >
<div <div
:class="contectClass" :class="contectClass"
class="overflow-y-auto max-h-svh absolute left-[50%] py-10 w-fit max-w-[50rem] translate-x-[-50%]" class="relative w-fit max-w-[50rem] my-auto py-10"
>
<DialogContent
class="data-[state=open]:animate-content-show text-black font-iran-yekan-x focus:outline-none z-[100]"
> >
<div <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 <div
class="w-full flex items-center px-6 justify-between py-[1.5rem] border-b border-slate-200" 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" class="**:fill-black"
/> />
</DialogClose> </DialogClose>
<DialogTitle <DialogTitle class="typo-sub-h-md lg:typo-sub-h-xl font-semibold flex items-center gap-3">
class="typo-sub-h-md lg:typo-sub-h-xl font-semibold flex items-center gap-3"
>
{{ title }} {{ title }}
<Icon <Icon
v-if="!!icon" v-if="!!icon"
@@ -91,9 +86,8 @@ const isShow = computed({
<slot name="content" /> <slot name="content" />
</div> </div>
</div> </div>
</div>
</DialogContent> </DialogContent>
</div>
</div>
</DialogPortal> </DialogPortal>
</DialogRoot> </DialogRoot>
</template> </template>