Add activity detail, Jalali pickers, and customer/user profiles.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,196 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterLink } from 'vue-router';
|
||||
import type { RouteLocationRaw } from 'vue-router';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
title?: string;
|
||||
description?: string;
|
||||
primaryLabel: string;
|
||||
primaryTo: RouteLocationRaw;
|
||||
secondaryLabel?: string;
|
||||
secondaryTo?: RouteLocationRaw;
|
||||
secondaryIcon?: 'calendar' | 'calendar-plus' | 'user-plus';
|
||||
}>(),
|
||||
{
|
||||
title: 'هنوز اطلاعاتی ثبت نشده!',
|
||||
description:
|
||||
'برای شروع، اطلاعات اولیه مشتری را ثبت کنید یا اولین فعالیت خود را اضافه نمایید.',
|
||||
secondaryIcon: 'calendar-plus',
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="empty-state">
|
||||
<div class="art" aria-hidden="true">
|
||||
<span class="spark s1">✦</span>
|
||||
<span class="spark s2">✦</span>
|
||||
<span class="spark s3">✦</span>
|
||||
<svg viewBox="0 0 168 132" fill="none">
|
||||
<path
|
||||
d="M26 44c0-7.2 5.8-13 13-13h30l9 9h51c7.2 0 13 5.8 13 13v54c0 7.2-5.8 13-13 13H39c-7.2 0-13-5.8-13-13V44Z"
|
||||
fill="#D9E6E8"
|
||||
/>
|
||||
<path
|
||||
d="M26 50h116v47c0 7.2-5.8 13-13 13H39c-7.2 0-13-5.8-13-13V50Z"
|
||||
fill="#E8F1F2"
|
||||
/>
|
||||
<rect x="54" y="34" width="60" height="74" rx="11" fill="#fff" />
|
||||
<rect x="54" y="34" width="60" height="74" rx="11" stroke="#E2E8F0" />
|
||||
<circle cx="84" cy="60" r="12" fill="#C5D4DA" />
|
||||
<path
|
||||
d="M66 96c2.2-9.2 8.4-14 18-14s15.8 4.8 18 14"
|
||||
stroke="#C5D4DA"
|
||||
stroke-width="9"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<circle cx="122" cy="100" r="17" fill="#14b8a6" />
|
||||
<circle cx="122" cy="100" r="17" fill="#14b8a6" stroke="#fff" stroke-width="3" />
|
||||
<path d="M122 92.5v15M114.5 100h15" stroke="#fff" stroke-width="2.8" stroke-linecap="round" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3>{{ title }}</h3>
|
||||
<p>{{ description }}</p>
|
||||
|
||||
<div class="actions">
|
||||
<RouterLink class="btn-primary" :to="primaryTo">
|
||||
<span class="plus">+</span>
|
||||
{{ primaryLabel }}
|
||||
</RouterLink>
|
||||
<RouterLink v-if="secondaryLabel && secondaryTo" class="btn-secondary" :to="secondaryTo">
|
||||
<UiIcon :name="secondaryIcon" :size="18" />
|
||||
{{ secondaryLabel }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.empty-state {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: 1.4rem 0.8rem 0.6rem;
|
||||
}
|
||||
|
||||
.art {
|
||||
position: relative;
|
||||
width: 168px;
|
||||
margin-bottom: 1.05rem;
|
||||
}
|
||||
|
||||
.art svg {
|
||||
width: 168px;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.spark {
|
||||
position: absolute;
|
||||
color: #5eead4;
|
||||
font-size: 0.68rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.s1 {
|
||||
top: 6px;
|
||||
inset-inline-end: 8px;
|
||||
}
|
||||
|
||||
.s2 {
|
||||
top: 44px;
|
||||
inset-inline-start: 2px;
|
||||
font-size: 0.52rem;
|
||||
color: #99f6e4;
|
||||
}
|
||||
|
||||
.s3 {
|
||||
bottom: 20px;
|
||||
inset-inline-end: -2px;
|
||||
font-size: 0.46rem;
|
||||
color: #99f6e4;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 1.08rem;
|
||||
font-weight: 800;
|
||||
color: #1e2937;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.5rem 0 1.25rem;
|
||||
max-width: 21.5rem;
|
||||
color: #94a3b8;
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.85;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
width: min(100%, 304px);
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-secondary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
min-height: 48px;
|
||||
border-radius: 16px;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #14b8a6;
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 18px rgba(20, 184, 166, 0.26);
|
||||
}
|
||||
|
||||
.plus {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #fff;
|
||||
color: #0f766e;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.empty-state {
|
||||
padding: 1.2rem 0.2rem 0.4rem;
|
||||
}
|
||||
|
||||
.art,
|
||||
.art svg {
|
||||
width: 152px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.02rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 1.15rem;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-secondary {
|
||||
min-height: 46px;
|
||||
font-size: 0.86rem;
|
||||
border-radius: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,215 @@
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onBeforeUnmount, ref, watch } from 'vue';
|
||||
import { RouterLink } from 'vue-router';
|
||||
import type { RouteLocationRaw } from 'vue-router';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
|
||||
export type ProfileMoreItem = {
|
||||
key: string;
|
||||
label: string;
|
||||
to?: RouteLocationRaw;
|
||||
danger?: boolean;
|
||||
};
|
||||
|
||||
const open = defineModel<boolean>({ default: false });
|
||||
defineProps<{ items: ProfileMoreItem[] }>();
|
||||
const emit = defineEmits<{ select: [key: string] }>();
|
||||
|
||||
const triggerRef = ref<HTMLButtonElement | null>(null);
|
||||
const panelRef = ref<HTMLElement | null>(null);
|
||||
const top = ref(0);
|
||||
const left = ref(0);
|
||||
|
||||
function place() {
|
||||
const trigger = triggerRef.value;
|
||||
const panel = panelRef.value;
|
||||
if (!trigger) return;
|
||||
const rect = trigger.getBoundingClientRect();
|
||||
const width = panel?.offsetWidth || 220;
|
||||
const height = panel?.offsetHeight || 0;
|
||||
const rtl = getComputedStyle(document.documentElement).direction === 'rtl';
|
||||
let nextLeft = rtl ? rect.right - width : rect.left;
|
||||
nextLeft = Math.min(Math.max(8, nextLeft), window.innerWidth - width - 8);
|
||||
let nextTop = rect.bottom + 8;
|
||||
if (nextTop + height > window.innerHeight - 8) {
|
||||
nextTop = Math.max(8, rect.top - height - 8);
|
||||
}
|
||||
left.value = nextLeft;
|
||||
top.value = nextTop;
|
||||
}
|
||||
|
||||
function onWindowChange() {
|
||||
if (open.value) place();
|
||||
}
|
||||
|
||||
watch(open, async (value) => {
|
||||
if (!value) {
|
||||
window.removeEventListener('resize', onWindowChange);
|
||||
window.removeEventListener('scroll', onWindowChange, true);
|
||||
return;
|
||||
}
|
||||
await nextTick();
|
||||
place();
|
||||
await nextTick();
|
||||
place();
|
||||
window.addEventListener('resize', onWindowChange);
|
||||
window.addEventListener('scroll', onWindowChange, true);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', onWindowChange);
|
||||
window.removeEventListener('scroll', onWindowChange, true);
|
||||
});
|
||||
|
||||
function toggle() {
|
||||
open.value = !open.value;
|
||||
}
|
||||
|
||||
function close() {
|
||||
open.value = false;
|
||||
}
|
||||
|
||||
function onSelect(key: string) {
|
||||
emit('select', key);
|
||||
nextTick(() => {
|
||||
close();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wrap" @click.stop>
|
||||
<button
|
||||
ref="triggerRef"
|
||||
class="icon-btn"
|
||||
type="button"
|
||||
aria-label="منوی بیشتر"
|
||||
:aria-expanded="open"
|
||||
@click="toggle"
|
||||
>
|
||||
<UiIcon name="dots-v" :size="18" />
|
||||
</button>
|
||||
|
||||
<Teleport to="body">
|
||||
<div v-if="open" class="layer">
|
||||
<button class="backdrop" type="button" aria-label="بستن منو" @click="close" />
|
||||
<ul
|
||||
ref="panelRef"
|
||||
class="panel"
|
||||
role="menu"
|
||||
:style="{ top: `${top}px`, left: `${left}px` }"
|
||||
@click.stop
|
||||
>
|
||||
<li v-for="item in items" :key="item.key" role="none">
|
||||
<RouterLink
|
||||
v-if="item.to"
|
||||
class="item"
|
||||
:class="{ danger: item.danger }"
|
||||
role="menuitem"
|
||||
:to="item.to"
|
||||
@click.stop="close"
|
||||
>
|
||||
{{ item.label }}
|
||||
</RouterLink>
|
||||
<button
|
||||
v-else
|
||||
class="item"
|
||||
:class="{ danger: item.danger }"
|
||||
type="button"
|
||||
role="menuitem"
|
||||
@click.stop.prevent="onSelect(item.key)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.wrap {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border: 0;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #334155;
|
||||
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layer {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 80;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
padding: 0.4rem;
|
||||
list-style: none;
|
||||
width: 220px;
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.panel > li {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
color: #0f172a;
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
text-align: start;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
padding: 0.7rem 0.85rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
background: #f0fdfa;
|
||||
}
|
||||
|
||||
.item.danger {
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.item.danger:hover {
|
||||
background: #fef2f2;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user