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
+28 -34
View File
@@ -50,50 +50,44 @@ 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 <div
class="data-[state=open]:animate-content-show text-black font-iran-yekan-x focus:outline-none z-[100]" 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="rounded-2xl bg-white shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]" class="w-full flex items-center px-6 justify-between py-[1.5rem] border-b border-slate-200"
> >
<div <DialogClose
class="w-full flex items-center px-6 justify-between py-[1.5rem] border-b border-slate-200" class="inline-flex size-8 items-center justify-center transition-all rounded-full bg-gray-50 border border-slate-200 hover:border-black focus:outline-none"
aria-label="Close"
> >
<DialogClose <Icon
class="inline-flex size-8 items-center justify-center transition-all rounded-full bg-gray-50 border border-slate-200 hover:border-black focus:outline-none" name="ci:bi-x-lg"
aria-label="Close" class="**:fill-black"
> />
<Icon </DialogClose>
name="ci:bi-x-lg" <DialogTitle class="typo-sub-h-md lg:typo-sub-h-xl font-semibold flex items-center gap-3">
class="**:fill-black" {{ title }}
/> <Icon
</DialogClose> v-if="!!icon"
<DialogTitle :name="icon"
class="typo-sub-h-md lg:typo-sub-h-xl font-semibold flex items-center gap-3" :size="iconSize"
> />
{{ title }} </DialogTitle>
<Icon
v-if="!!icon"
:name="icon"
:size="iconSize"
/>
</DialogTitle>
</div>
<div class="w-full px-6">
<slot name="content" />
</div>
</div> </div>
</DialogContent> <div class="w-full px-6">
<slot name="content" />
</div>
</div>
</div> </div>
</div> </DialogContent>
</DialogPortal> </DialogPortal>
</DialogRoot> </DialogRoot>
</template> </template>