576 lines
13 KiB
Vue
576 lines
13 KiB
Vue
<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>
|