Merge branch 'main' of https://github.com/Byeto-Company/hossein_por_shop
This commit is contained in:
@@ -10,11 +10,14 @@ import { QUERY_KEYS } from "~/constants";
|
||||
type Props = {
|
||||
address?: Address;
|
||||
isSelected?: boolean;
|
||||
selectable?: boolean;
|
||||
};
|
||||
|
||||
// props
|
||||
|
||||
defineProps<Props>();
|
||||
withDefaults(defineProps<Props>(), {
|
||||
selectable: true,
|
||||
});
|
||||
|
||||
// emit
|
||||
|
||||
@@ -63,7 +66,9 @@ const handleDeleteAddress = (id: number) => {
|
||||
|
||||
<template>
|
||||
<button
|
||||
@click.prevent="!!address ? emit('select', address) : null"
|
||||
@click.prevent="
|
||||
!!address && selectable ? emit('select', address) : null
|
||||
"
|
||||
:class="
|
||||
isSelected
|
||||
? 'border-transparent ring-2 ring-offset-2 ring-blue-500'
|
||||
@@ -76,7 +81,7 @@ const handleDeleteAddress = (id: number) => {
|
||||
</div>
|
||||
<span class="flex items-center justify-between w-full gap-3">
|
||||
<div
|
||||
class="flex items-center gap-3 lg:text-[1.125rem] font-semibold text-slate-900"
|
||||
class="flex items-center gap-3 max-lg:text-sm font-semibold text-slate-900"
|
||||
>
|
||||
{{ !!address ? address.name : "آدرس" }}
|
||||
<span
|
||||
@@ -101,7 +106,7 @@ const handleDeleteAddress = (id: number) => {
|
||||
>
|
||||
<div class="w-full lg:w-9/12 overflow-hidden">
|
||||
<div
|
||||
class="w-full overflow-hidden overflow-ellipsis gap-5 text-start whitespace-pre text-sm text-slate-700"
|
||||
class="w-full overflow-hidden overflow-ellipsis gap-5 text-start whitespace-pre text-xs lg:text-sm text-slate-700"
|
||||
>
|
||||
{{
|
||||
!!address
|
||||
|
||||
@@ -138,7 +138,7 @@ watch(
|
||||
:variant="!!address ? 'ghost' : 'solid'"
|
||||
:class="!!address ? '!bg-transparent !underline' : ''"
|
||||
>
|
||||
<span class="whitespace-pre">
|
||||
<span class="whitespace-pre max-lg:text-xs">
|
||||
{{ !!address ? "ویرایش" : "افزودن آدرس" }}
|
||||
</span>
|
||||
</Button>
|
||||
|
||||
@@ -44,8 +44,7 @@ const { isLoading } = useImage({ src: src.value ?? "" });
|
||||
<div class="size-full rounded-full flex-center">
|
||||
<Icon
|
||||
name="ci:profile"
|
||||
size="16"
|
||||
class="**:stroke-black"
|
||||
class="**:stroke-black text-lg"
|
||||
:class="iconClass"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -77,7 +77,7 @@ const isShow = computed({
|
||||
/>
|
||||
</DialogClose>
|
||||
<DialogTitle
|
||||
class="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 }}
|
||||
<Icon
|
||||
|
||||
@@ -53,18 +53,20 @@ const handleSubmit = () => {
|
||||
|
||||
<template #content>
|
||||
<div class="w-full flex flex-col text-start gap-3 py-5" dir="rtl">
|
||||
<p class="leading-[175%]">
|
||||
<p class="leading-[175%] text-xs lg:text-sm">
|
||||
با خارج شدن از حساب کاربری، دسترسی شما به برخی از امکانات
|
||||
محدود خواهد شد. اگر قصد دارید دوباره وارد شوید، میتوانید از
|
||||
همان اطلاعات حساب خود استفاده کنید.
|
||||
</p>
|
||||
<p>ما همیشه منتظر بازگشت شما هستیم! 😊</p>
|
||||
<p class="text-xs lg:text-sm">
|
||||
ما همیشه منتظر بازگشت شما هستیم! 😊
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="py-6 border-t border-slate-200 flex gap-3">
|
||||
<Button
|
||||
@click="handleSubmit"
|
||||
class="rounded-full px-10"
|
||||
class="rounded-full px-5 lg:px-10"
|
||||
size="md"
|
||||
>
|
||||
<Icon
|
||||
@@ -76,7 +78,7 @@ const handleSubmit = () => {
|
||||
<DialogClose aria-label="Close">
|
||||
<Button
|
||||
variant="outlined"
|
||||
class="rounded-full px-10"
|
||||
class="rounded-full px-5 lg:px-10"
|
||||
size="md"
|
||||
>
|
||||
نه فعلا هستم
|
||||
|
||||
@@ -23,7 +23,7 @@ const toggleSidebar = inject("toggleSidebar");
|
||||
<button class="flex-center lg:hidden" @click="toggleSidebar">
|
||||
<Icon name="bi:chevron-right" size="18" class="**:fill-black" />
|
||||
</button>
|
||||
<p class="font-semibold lg:text-lg text-black">
|
||||
<p class="font-semibold text-sm lg:text-lg text-black">
|
||||
{{ title }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -22,9 +22,9 @@ withDefaults(defineProps<Props>(), {
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="w-full flex items-center justify-between h-[2rem] lg:h-[3rem] px-5"
|
||||
class="w-full flex items-center justify-between h-[2rem] lg:h-[3rem] lg:px-5"
|
||||
>
|
||||
<span class="typo-sub-h-md lg:typo-sub-h-lg">{{ title }}</span>
|
||||
<span class="text-sm lg:text-lg">{{ title }}</span>
|
||||
<slot name="button" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -116,14 +116,14 @@ const toggleSidebar = inject("toggleSidebar");
|
||||
? 'bg-black text-slate-100 **:fill-slate-100'
|
||||
: '**:fill-black hover:bg-gray-200'
|
||||
"
|
||||
class="flex items-center justify-between transition-all rounded-lg py-4 px-3"
|
||||
class="flex items-center justify-between transition-all rounded-lg py-3.5 lg:py-4 px-3"
|
||||
@click="toggleSidebar"
|
||||
>
|
||||
<span class="flex-center gap-3">
|
||||
<div class="size-5 flex-center">
|
||||
<Icon :name="link.icon" />
|
||||
</div>
|
||||
<span class="text-sm">{{ link.title }}</span>
|
||||
<span class="text-xs lg:text-sm">{{ link.title }}</span>
|
||||
</span>
|
||||
|
||||
<Icon name="bi:chevron-left" class="transition-all" />
|
||||
@@ -141,7 +141,9 @@ const toggleSidebar = inject("toggleSidebar");
|
||||
class="**:fill-danger-500"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-sm"> خروج از حساب </span>
|
||||
<span class="text-xs lg:text-sm">
|
||||
خروج از حساب
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<Icon
|
||||
|
||||
@@ -84,7 +84,13 @@ onFileDialogChange((files: any) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal v-model="visible" title="عکس پروفایل" icon="bi:image" iconSize="20">
|
||||
<Modal
|
||||
v-model="visible"
|
||||
title="عکس پروفایل"
|
||||
icon="bi:image"
|
||||
iconSize="20"
|
||||
contectClass="w-full max-lg:container lg:!w-[30vw]"
|
||||
>
|
||||
<template #trigger>
|
||||
<button
|
||||
class="bg-black text-slate-100 rounded-full p-2 flex-center absolute -bottom-0 -right-0"
|
||||
@@ -93,61 +99,62 @@ onFileDialogChange((files: any) => {
|
||||
</button>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="w-max">
|
||||
<div
|
||||
class="w-full flex flex-col-reverse items-center justify-between py-10 gap-10 px-4"
|
||||
>
|
||||
<div
|
||||
class="w-full flex flex-col-reverse items-center justify-between py-10 gap-10 px-4"
|
||||
class="flex items-center justify-center w-full flex-wrap gap-4 max-w-[500px]"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between w-full flex-wrap gap-4 max-w-[500px]"
|
||||
<button
|
||||
v-for="(avatar, index) in avatars"
|
||||
:key="index"
|
||||
class="size-16 lg:size-20 rounded-full focus:ring-2 focus:ring-offset-1 focus:ring-black transition-all"
|
||||
>
|
||||
<button
|
||||
v-for="(avatar, index) in avatars"
|
||||
:key="index"
|
||||
class="size-20 rounded-full focus:ring-2 focus:ring-offset-1 focus:ring-black transition-all"
|
||||
>
|
||||
<Avatar
|
||||
:src="avatar"
|
||||
:alt="`avatar-${index}`"
|
||||
class="size-full"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<Avatar
|
||||
:src="avatar"
|
||||
:alt="`avatar-${index}`"
|
||||
class="size-full"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full flex-center gap-4 max-w-[500px] flex-wrap"
|
||||
<div class="w-full flex-center gap-4 max-w-[500px] flex-wrap">
|
||||
<button
|
||||
class="size-6 lg:size-8 rounded-full bg-orange-100 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
|
||||
/>
|
||||
<button
|
||||
class="size-6 lg:size-8 rounded-full bg-orange-200 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
|
||||
/>
|
||||
<button
|
||||
class="size-6 lg:size-8 rounded-full bg-amber-600 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
|
||||
/>
|
||||
<button
|
||||
class="size-6 lg:size-8 rounded-full bg-amber-700 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
|
||||
/>
|
||||
<button
|
||||
class="size-6 lg:size-8 rounded-full bg-amber-800 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="w-full flex-col-center gap-5">
|
||||
<Avatar
|
||||
:src="currentProfile"
|
||||
alt=""
|
||||
class="!size-24 lg:!size-32"
|
||||
iconClass="!text-xl lg:!text-2xl"
|
||||
/>
|
||||
<Button
|
||||
class="rounded-full w-[8rem]"
|
||||
@click="openFileDialog"
|
||||
:loading="updateAccountIsPending"
|
||||
size="md"
|
||||
>
|
||||
<button
|
||||
class="size-8 rounded-full bg-orange-100 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
|
||||
<Icon
|
||||
v-if="updateAccountIsPending"
|
||||
name="svg-spinners:3-dots-bounce"
|
||||
/>
|
||||
<button
|
||||
class="size-8 rounded-full bg-orange-200 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
|
||||
/>
|
||||
<button
|
||||
class="size-8 rounded-full bg-amber-600 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
|
||||
/>
|
||||
<button
|
||||
class="size-8 rounded-full bg-amber-700 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
|
||||
/>
|
||||
<button
|
||||
class="size-8 rounded-full bg-amber-800 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="w-full flex-col-center gap-5">
|
||||
<Avatar :src="currentProfile" alt="" class="!size-32" />
|
||||
<Button
|
||||
class="rounded-full w-[8rem]"
|
||||
@click="openFileDialog"
|
||||
:loading="updateAccountIsPending"
|
||||
size="md"
|
||||
>
|
||||
<Icon
|
||||
v-if="updateAccountIsPending"
|
||||
name="svg-spinners:3-dots-bounce"
|
||||
/>
|
||||
<span v-else>آپلود عکس شما</span>
|
||||
</Button>
|
||||
</div>
|
||||
<span v-else>آپلود عکس شما</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -6,14 +6,16 @@
|
||||
>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<Icon name="bi:info-circle" size="20" />
|
||||
<h3 class="typo-sub-h-md font-semibold">تغییر وضعیت سفارش</h3>
|
||||
<Icon name="bi:info-circle" class="lg:text-lg" />
|
||||
<h3 class="max-lg:text-sm font-semibold">تغییر وضعیت سفارش</h3>
|
||||
|
|
||||
<span class="typo-p-xs text-cyan-500 font-semibold">
|
||||
<span class="text-xs text-cyan-500 font-semibold">
|
||||
۲۳ تیر
|
||||
</span>
|
||||
</div>
|
||||
<p class="typo-p-sm text-slate-700 text-justify">
|
||||
<p
|
||||
class="text-xs lg:text-sm leading-[175%] text-slate-700 text-justify"
|
||||
>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله
|
||||
در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد
|
||||
|
||||
@@ -26,21 +26,23 @@ const createdTimeAgo = usePersianTimeAgo(new Date(data.value.created_at));
|
||||
>
|
||||
<td
|
||||
scope="row"
|
||||
class="w-3/12 px-6 py-6 font-medium whitespace-nowrap"
|
||||
class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0"
|
||||
:class="data.order_id ? 'text-cyan-500' : 'text-black'"
|
||||
>
|
||||
{{ data.order_id ? `${data.order_id}#` : "--" }}
|
||||
</td>
|
||||
<td class="w-3/12 px-6 py-6">
|
||||
<td
|
||||
class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0"
|
||||
>
|
||||
{{ data.created_at ? createdTimeAgo : "--" }}
|
||||
</td>
|
||||
<td class="w-2/12 px-6 py-6">
|
||||
<td class="w-2/12 px-6 py-6 text-xs lg:text-sm whitespace-pre shrink-0">
|
||||
{{ data.count ? data.count : "--" }}
|
||||
</td>
|
||||
<td class="w-2/12 px-6 py-6">
|
||||
<td class="w-2/12 px-6 py-6 text-xs lg:text-sm whitespace-pre shrink-0">
|
||||
{{ data.final_price ? data.final_price : "--" }}
|
||||
</td>
|
||||
<td class="w-2/12 px-6 py-6">
|
||||
<td class="w-2/12 px-6 py-6 whitespace-pre shrink-0">
|
||||
<div
|
||||
class="w-max rounded-full py-1.5 px-3 text-xs border"
|
||||
:class="{
|
||||
@@ -61,7 +63,7 @@ const createdTimeAgo = usePersianTimeAgo(new Date(data.value.created_at));
|
||||
{{ data.verbose_status ? data.verbose_status : "--" }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="w-1/12 px-6 py-6">
|
||||
<td class="w-1/12 px-6 py-6 shrink-0">
|
||||
<NuxtLink
|
||||
:to="{
|
||||
name: 'profile-purchases-and-orders-id',
|
||||
@@ -69,7 +71,7 @@ const createdTimeAgo = usePersianTimeAgo(new Date(data.value.created_at));
|
||||
}"
|
||||
>
|
||||
<button
|
||||
class="size-10 flex-center border border-slate-200 rounded-md"
|
||||
class="size-9 lg:size-10 flex-center border border-slate-200 rounded-md"
|
||||
>
|
||||
<Icon
|
||||
name="ci:eye-open"
|
||||
|
||||
@@ -6,23 +6,23 @@
|
||||
>
|
||||
<td
|
||||
scope="row"
|
||||
class="w-3/12 px-6 py-6 font-medium whitespace-nowrap text-black"
|
||||
class="w-3/12 px-6 py-6 shrink-0 font-medium whitespace-nowrap text-black"
|
||||
>
|
||||
<Skeleton class="w-full !h-10 !rounded-sm" />
|
||||
</td>
|
||||
<td class="w-3/12 px-6 py-6">
|
||||
<td class="w-3/12 px-6 py-6 shrink-0">
|
||||
<Skeleton class="w-full !h-10 !rounded-sm" />
|
||||
</td>
|
||||
<td class="w-2/12 px-6 py-6">
|
||||
<td class="w-2/12 px-6 py-6 shrink-0">
|
||||
<Skeleton class="w-full !h-10 !rounded-sm" />
|
||||
</td>
|
||||
<td class="w-2/12 px-6 py-6">
|
||||
<td class="w-2/12 px-6 py-6 shrink-0">
|
||||
<Skeleton class="w-full !h-10 !rounded-sm" />
|
||||
</td>
|
||||
<td class="w-2/12 px-6 py-6">
|
||||
<td class="w-2/12 px-6 py-6 shrink-0">
|
||||
<Skeleton class="w-full !h-10 !rounded-sm" />
|
||||
</td>
|
||||
<td class="w-1/12 px-6 py-6">
|
||||
<td class="w-1/12 px-6 py-6 shrink-0">
|
||||
<Skeleton class="!size-10 !rounded-sm" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -27,14 +27,16 @@ const updatedTimeAgo = usePersianTimeAgo(new Date(data.value.updated_at));
|
||||
>
|
||||
<td
|
||||
scope="row"
|
||||
class="w-3/12 px-6 py-6 font-medium whitespace-nowrap text-black"
|
||||
class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0"
|
||||
>
|
||||
{{ data.ticket_category ? data.ticket_category : "--" }}
|
||||
</td>
|
||||
<td class="w-3/12 px-6 py-6">
|
||||
{{ data.subject ? data.subject : "--" }}
|
||||
</td>
|
||||
<td class="w-3/12 px-6 py-6 flex flex-col gap-3 text-sm">
|
||||
<td
|
||||
class="w-3/12 px-6 py-6 flex flex-col gap-3 text-xs lg:text-sm font-medium whitespace-pre shrink-0"
|
||||
>
|
||||
<span class="w-full whitespace-pre">
|
||||
ایجاد : {{ data.created_at ? createdTimeAgo : "--" }}
|
||||
</span>
|
||||
@@ -42,7 +44,7 @@ const updatedTimeAgo = usePersianTimeAgo(new Date(data.value.updated_at));
|
||||
بروزرسانی : {{ data.updated_at ? updatedTimeAgo : "--" }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="w-2/12 px-6 py-6">
|
||||
<td class="w-2/12 px-6 py-6 text-xs lg:text-sm whitespace-pre shrink-0">
|
||||
<div
|
||||
class="w-max rounded-full py-1.5 px-3 text-xs border"
|
||||
:class="{
|
||||
@@ -57,12 +59,12 @@ const updatedTimeAgo = usePersianTimeAgo(new Date(data.value.updated_at));
|
||||
{{ data.status ? data.status : "--" }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="w-1/12 px-6 py-6">
|
||||
<td class="w-1/12 px-6 py-6 shrink-0">
|
||||
<NuxtLink
|
||||
:to="{ name: 'profile-tickets-id', params: { id: data.id } }"
|
||||
>
|
||||
<button
|
||||
class="size-10 flex-center border border-slate-200 rounded-md"
|
||||
class="size-9 lg:size-10 flex-center border border-slate-200 rounded-md"
|
||||
>
|
||||
<Icon
|
||||
name="ci:eye-open"
|
||||
|
||||
Reference in New Issue
Block a user