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,575 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
|
||||
import {
|
||||
addJalaliMonths,
|
||||
dateToJalali,
|
||||
formatJalaliNumeric,
|
||||
formatLocalDateInput,
|
||||
formatLocalDateTimeInput,
|
||||
jalaliMonthLength,
|
||||
jalaliMonthName,
|
||||
jalaliToDate,
|
||||
parseLocalInput,
|
||||
toFaDigits,
|
||||
} from '@/lib/jalali';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
|
||||
const model = defineModel<string>({ default: '' });
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
mode?: 'date' | 'datetime' | 'time';
|
||||
id?: string;
|
||||
required?: boolean;
|
||||
disabled?: boolean;
|
||||
placeholder?: string;
|
||||
clearable?: boolean;
|
||||
icon?: 'calendar' | 'clock' | 'bell';
|
||||
}>(),
|
||||
{
|
||||
mode: 'date',
|
||||
required: false,
|
||||
disabled: false,
|
||||
clearable: true,
|
||||
icon: undefined,
|
||||
},
|
||||
);
|
||||
|
||||
const WEEKDAYS = ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج'] as const;
|
||||
|
||||
const open = ref(false);
|
||||
const triggerRef = ref<HTMLButtonElement | null>(null);
|
||||
const panelRef = ref<HTMLElement | null>(null);
|
||||
const top = ref(0);
|
||||
const left = ref(0);
|
||||
const cursor = ref(dateToJalali(new Date()));
|
||||
const draftHour = ref(9);
|
||||
const draftMinute = ref(0);
|
||||
|
||||
type Cell = {
|
||||
key: string;
|
||||
jy: number;
|
||||
jm: number;
|
||||
jd: number;
|
||||
inMonth: boolean;
|
||||
isToday: boolean;
|
||||
isSelected: boolean;
|
||||
};
|
||||
|
||||
const parsed = computed(() => (props.mode === 'time' ? null : parseLocalInput(model.value)));
|
||||
|
||||
const triggerIcon = computed(() => {
|
||||
if (props.icon) return props.icon;
|
||||
if (props.mode === 'time') return 'clock';
|
||||
if (props.icon === 'bell') return 'bell';
|
||||
return 'calendar';
|
||||
});
|
||||
|
||||
const display = computed(() => {
|
||||
if (props.mode === 'time') {
|
||||
const match = /^(\d{1,2}):(\d{2})$/.exec(model.value);
|
||||
if (!match) return '';
|
||||
return `${toFaDigits(match[1].padStart(2, '0'))}:${toFaDigits(match[2])}`;
|
||||
}
|
||||
if (!parsed.value) return '';
|
||||
const date = formatJalaliNumeric(parsed.value);
|
||||
if (props.mode === 'date') return date;
|
||||
const hh = String(parsed.value.getHours()).padStart(2, '0');
|
||||
const mm = String(parsed.value.getMinutes()).padStart(2, '0');
|
||||
return `${date} ${toFaDigits(hh)}:${toFaDigits(mm)}`;
|
||||
});
|
||||
|
||||
const emptyLabel = computed(
|
||||
() =>
|
||||
props.placeholder ||
|
||||
(props.mode === 'datetime'
|
||||
? 'انتخاب تاریخ و ساعت'
|
||||
: props.mode === 'time'
|
||||
? 'انتخاب ساعت'
|
||||
: 'انتخاب تاریخ'),
|
||||
);
|
||||
|
||||
const monthTitle = computed(
|
||||
() => `${jalaliMonthName(cursor.value.jm)} ${toFaDigits(cursor.value.jy)}`,
|
||||
);
|
||||
|
||||
const hours = Array.from({ length: 24 }, (_, i) => i);
|
||||
const minutes = computed(() => {
|
||||
const steps = Array.from({ length: 12 }, (_, i) => i * 5);
|
||||
if (!steps.includes(draftMinute.value)) {
|
||||
return [...steps, draftMinute.value].sort((a, b) => a - b);
|
||||
}
|
||||
return steps;
|
||||
});
|
||||
|
||||
const cells = computed<Cell[]>(() => {
|
||||
const { jy, jm } = cursor.value;
|
||||
const first = jalaliToDate(jy, jm, 1);
|
||||
const firstDow = (first.getDay() + 1) % 7;
|
||||
const today = dateToJalali(new Date());
|
||||
const selected = parsed.value ? dateToJalali(parsed.value) : null;
|
||||
const out: Cell[] = [];
|
||||
|
||||
const prev = addJalaliMonths(jy, jm, -1);
|
||||
const prevLen = jalaliMonthLength(prev.jy, prev.jm);
|
||||
for (let i = 0; i < firstDow; i += 1) {
|
||||
const jd = prevLen - firstDow + i + 1;
|
||||
out.push(makeCell(prev.jy, prev.jm, jd, false, today, selected));
|
||||
}
|
||||
|
||||
const len = jalaliMonthLength(jy, jm);
|
||||
for (let jd = 1; jd <= len; jd += 1) {
|
||||
out.push(makeCell(jy, jm, jd, true, today, selected));
|
||||
}
|
||||
|
||||
const next = addJalaliMonths(jy, jm, 1);
|
||||
let n = 1;
|
||||
while (out.length % 7 !== 0) {
|
||||
out.push(makeCell(next.jy, next.jm, n, false, today, selected));
|
||||
n += 1;
|
||||
}
|
||||
return out;
|
||||
});
|
||||
|
||||
function makeCell(
|
||||
jy: number,
|
||||
jm: number,
|
||||
jd: number,
|
||||
inMonth: boolean,
|
||||
today: { jy: number; jm: number; jd: number },
|
||||
selected: { jy: number; jm: number; jd: number } | null,
|
||||
): Cell {
|
||||
return {
|
||||
key: `${jy}-${jm}-${jd}`,
|
||||
jy,
|
||||
jm,
|
||||
jd,
|
||||
inMonth,
|
||||
isToday: today.jy === jy && today.jm === jm && today.jd === jd,
|
||||
isSelected: Boolean(selected && selected.jy === jy && selected.jm === jm && selected.jd === jd),
|
||||
};
|
||||
}
|
||||
|
||||
function emitDate(d: Date) {
|
||||
model.value = props.mode === 'datetime' ? formatLocalDateTimeInput(d) : formatLocalDateInput(d);
|
||||
}
|
||||
|
||||
function emitTime() {
|
||||
const pad = (n: number) => String(n).padStart(2, '0');
|
||||
model.value = `${pad(draftHour.value)}:${pad(draftMinute.value)}`;
|
||||
}
|
||||
|
||||
function syncDraftFrom(d: Date | null) {
|
||||
if (props.mode === 'time') {
|
||||
const match = /^(\d{1,2}):(\d{2})$/.exec(model.value);
|
||||
draftHour.value = match ? Number(match[1]) : 10;
|
||||
draftMinute.value = match ? Number(match[2]) : 30;
|
||||
return;
|
||||
}
|
||||
const source = d ?? new Date();
|
||||
const j = dateToJalali(source);
|
||||
cursor.value = { jy: j.jy, jm: j.jm };
|
||||
draftHour.value = props.mode === 'datetime' ? source.getHours() : 9;
|
||||
draftMinute.value = props.mode === 'datetime' ? source.getMinutes() : 0;
|
||||
}
|
||||
|
||||
function place() {
|
||||
const trigger = triggerRef.value;
|
||||
const panel = panelRef.value;
|
||||
if (!trigger) return;
|
||||
const rect = trigger.getBoundingClientRect();
|
||||
const width = panel?.offsetWidth || 320;
|
||||
const height = panel?.offsetHeight || 360;
|
||||
let nextLeft = rect.left;
|
||||
if (getComputedStyle(document.documentElement).direction === 'rtl') {
|
||||
nextLeft = rect.right - width;
|
||||
}
|
||||
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();
|
||||
}
|
||||
|
||||
async function show() {
|
||||
if (props.disabled) return;
|
||||
syncDraftFrom(parsed.value);
|
||||
open.value = true;
|
||||
await nextTick();
|
||||
place();
|
||||
await nextTick();
|
||||
place();
|
||||
}
|
||||
|
||||
function hide() {
|
||||
open.value = false;
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
if (open.value) hide();
|
||||
else void show();
|
||||
}
|
||||
|
||||
function goMonth(delta: number) {
|
||||
const next = addJalaliMonths(cursor.value.jy, cursor.value.jm, delta);
|
||||
cursor.value = next;
|
||||
void nextTick(place);
|
||||
}
|
||||
|
||||
function pickDay(cell: Cell) {
|
||||
if (!cell.inMonth) {
|
||||
cursor.value = { jy: cell.jy, jm: cell.jm };
|
||||
}
|
||||
const d = jalaliToDate(cell.jy, cell.jm, cell.jd);
|
||||
if (props.mode === 'datetime') {
|
||||
d.setHours(draftHour.value, draftMinute.value, 0, 0);
|
||||
emitDate(d);
|
||||
return;
|
||||
}
|
||||
emitDate(d);
|
||||
hide();
|
||||
}
|
||||
|
||||
function applyTime() {
|
||||
if (props.mode === 'time') {
|
||||
emitTime();
|
||||
return;
|
||||
}
|
||||
const source = parsed.value ?? jalaliToDate(cursor.value.jy, cursor.value.jm, 1);
|
||||
const j = dateToJalali(source);
|
||||
const d = jalaliToDate(j.jy, j.jm, j.jd);
|
||||
d.setHours(draftHour.value, draftMinute.value, 0, 0);
|
||||
emitDate(d);
|
||||
}
|
||||
|
||||
function pickToday() {
|
||||
const d = new Date();
|
||||
if (props.mode === 'time') {
|
||||
draftHour.value = d.getHours();
|
||||
draftMinute.value = d.getMinutes();
|
||||
emitTime();
|
||||
return;
|
||||
}
|
||||
if (props.mode === 'date') {
|
||||
d.setHours(0, 0, 0, 0);
|
||||
}
|
||||
syncDraftFrom(d);
|
||||
emitDate(d);
|
||||
if (props.mode === 'date') hide();
|
||||
}
|
||||
|
||||
function clear() {
|
||||
model.value = '';
|
||||
hide();
|
||||
}
|
||||
|
||||
function onDocPointer(ev: PointerEvent) {
|
||||
const target = ev.target as Node | null;
|
||||
if (!target) return;
|
||||
if (triggerRef.value?.contains(target) || panelRef.value?.contains(target)) return;
|
||||
hide();
|
||||
}
|
||||
|
||||
function onKeydown(ev: KeyboardEvent) {
|
||||
if (ev.key === 'Escape' && open.value) {
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
hide();
|
||||
}
|
||||
}
|
||||
|
||||
watch(open, (value) => {
|
||||
if (value) {
|
||||
window.addEventListener('resize', onWindowChange);
|
||||
window.addEventListener('scroll', onWindowChange, true);
|
||||
document.addEventListener('pointerdown', onDocPointer, true);
|
||||
window.addEventListener('keydown', onKeydown, true);
|
||||
return;
|
||||
}
|
||||
window.removeEventListener('resize', onWindowChange);
|
||||
window.removeEventListener('scroll', onWindowChange, true);
|
||||
document.removeEventListener('pointerdown', onDocPointer, true);
|
||||
window.removeEventListener('keydown', onKeydown, true);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', onWindowChange);
|
||||
window.removeEventListener('scroll', onWindowChange, true);
|
||||
document.removeEventListener('pointerdown', onDocPointer, true);
|
||||
window.removeEventListener('keydown', onKeydown, true);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wrap" :class="{ disabled }">
|
||||
<button
|
||||
:id="id"
|
||||
ref="triggerRef"
|
||||
class="trigger"
|
||||
type="button"
|
||||
:disabled="disabled"
|
||||
:aria-expanded="open"
|
||||
:aria-required="required || undefined"
|
||||
@click="toggle"
|
||||
>
|
||||
<span :class="{ empty: !display }">{{ display || emptyLabel }}</span>
|
||||
<UiIcon :name="triggerIcon" :size="18" />
|
||||
</button>
|
||||
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="open"
|
||||
id="jalali-picker"
|
||||
ref="panelRef"
|
||||
class="panel"
|
||||
role="dialog"
|
||||
:style="{ top: `${top}px`, left: `${left}px` }"
|
||||
>
|
||||
<header v-if="mode !== 'time'" class="nav">
|
||||
<button type="button" class="nav-btn" aria-label="ماه بعد" @click="goMonth(1)">
|
||||
<UiIcon name="chevron" :size="16" />
|
||||
</button>
|
||||
<strong>{{ monthTitle }}</strong>
|
||||
<button type="button" class="nav-btn next" aria-label="ماه قبل" @click="goMonth(-1)">
|
||||
<UiIcon name="chevron" :size="16" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<template v-if="mode !== 'time'">
|
||||
<div class="week">
|
||||
<span v-for="day in WEEKDAYS" :key="day">{{ day }}</span>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<button
|
||||
v-for="cell in cells"
|
||||
:key="cell.key"
|
||||
type="button"
|
||||
class="day"
|
||||
:class="{ mute: !cell.inMonth, today: cell.isToday, on: cell.isSelected }"
|
||||
@click="pickDay(cell)"
|
||||
>
|
||||
{{ toFaDigits(cell.jd) }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="mode === 'datetime' || mode === 'time'" class="time">
|
||||
<label>
|
||||
ساعت
|
||||
<select v-model.number="draftHour" @change="applyTime">
|
||||
<option v-for="h in hours" :key="h" :value="h">{{ toFaDigits(String(h).padStart(2, '0')) }}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
دقیقه
|
||||
<select v-model.number="draftMinute" @change="applyTime">
|
||||
<option v-for="m in minutes" :key="m" :value="m">{{ toFaDigits(String(m).padStart(2, '0')) }}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<footer class="foot">
|
||||
<button type="button" class="link" @click="pickToday">امروز</button>
|
||||
<button
|
||||
v-if="clearable && !required && model"
|
||||
type="button"
|
||||
class="link"
|
||||
@click="clear"
|
||||
>
|
||||
پاک کردن
|
||||
</button>
|
||||
<button type="button" class="done" @click="hide">تأیید</button>
|
||||
</footer>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
width: 100%;
|
||||
min-height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.6rem;
|
||||
border: 1px solid var(--line, #e2e8f0);
|
||||
border-radius: 12px;
|
||||
padding: 0.7rem 0.85rem;
|
||||
background: #fff;
|
||||
color: #0f172a;
|
||||
font: inherit;
|
||||
text-align: start;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.trigger:focus {
|
||||
outline: 2px solid var(--accent-soft, #ccfbf1);
|
||||
border-color: var(--accent, #0d9488);
|
||||
}
|
||||
|
||||
.trigger span {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.trigger .empty {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.trigger :deep(.ico) {
|
||||
color: #0d9488;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.disabled .trigger {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: fixed;
|
||||
z-index: 120;
|
||||
width: min(20.5rem, calc(100vw - 16px));
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
|
||||
padding: 0.75rem 0.8rem 0.7rem;
|
||||
font-family: IRANSans, Tahoma, sans-serif;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.55rem;
|
||||
}
|
||||
|
||||
.nav strong {
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: #f1f5f9;
|
||||
color: #0f766e;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-btn.next :deep(.ico) {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.week,
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.week span {
|
||||
text-align: center;
|
||||
color: #94a3b8;
|
||||
font-size: 0.72rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.day {
|
||||
height: 34px;
|
||||
border: 0;
|
||||
border-radius: 9px;
|
||||
background: none;
|
||||
color: #0f172a;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.day.mute {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.day.today {
|
||||
box-shadow: inset 0 0 0 1px #99f6e4;
|
||||
}
|
||||
|
||||
.day.on,
|
||||
.day:hover {
|
||||
background: #0d9488;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.day.mute:hover {
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.time {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.65rem;
|
||||
}
|
||||
|
||||
.time label {
|
||||
display: grid;
|
||||
gap: 0.28rem;
|
||||
color: #64748b;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.time select {
|
||||
width: 100%;
|
||||
min-height: 38px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
padding: 0.3rem 0.5rem;
|
||||
background: #fff;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
margin-top: 0.7rem;
|
||||
}
|
||||
|
||||
.link,
|
||||
.done {
|
||||
border: 0;
|
||||
background: none;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #0f766e;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.done {
|
||||
margin-inline-start: auto;
|
||||
background: #14b8a6;
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-weight: 800;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user