Replace time selects with circular dial pickers in JalaliDateInput.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -94,14 +94,51 @@ const monthTitle = computed(
|
||||
);
|
||||
|
||||
const hours = Array.from({ length: 24 }, (_, i) => i);
|
||||
const minuteMarks = Array.from({ length: 12 }, (_, i) => i * 5);
|
||||
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);
|
||||
if (!minuteMarks.includes(draftMinute.value)) {
|
||||
return [...minuteMarks, draftMinute.value].sort((a, b) => a - b);
|
||||
}
|
||||
return steps;
|
||||
return minuteMarks;
|
||||
});
|
||||
|
||||
const draftTimeLabel = computed(
|
||||
() =>
|
||||
`${toFaDigits(String(draftHour.value).padStart(2, '0'))}:${toFaDigits(String(draftMinute.value).padStart(2, '0'))}`,
|
||||
);
|
||||
|
||||
function dialPoint(index: number, total: number, radius: number) {
|
||||
const angle = (index / total) * 2 * Math.PI - Math.PI / 2;
|
||||
return {
|
||||
left: `calc(50% + ${Math.cos(angle) * radius}px)`,
|
||||
top: `calc(50% + ${Math.sin(angle) * radius}px)`,
|
||||
};
|
||||
}
|
||||
|
||||
function hourDialStyle(hour: number) {
|
||||
// حلقه داخلی ۰–۱۱، حلقه بیرونی ۱۲–۲۳
|
||||
const ring = hour < 12 ? 46 : 72;
|
||||
const index = hour % 12;
|
||||
return dialPoint(index, 12, ring);
|
||||
}
|
||||
|
||||
function minuteDialStyle(minute: number) {
|
||||
const index = minuteMarks.includes(minute)
|
||||
? minuteMarks.indexOf(minute)
|
||||
: Math.round(minute / 5) % 12;
|
||||
return dialPoint(index, 12, 64);
|
||||
}
|
||||
|
||||
function setHour(hour: number) {
|
||||
draftHour.value = hour;
|
||||
applyTime();
|
||||
}
|
||||
|
||||
function setMinute(minute: number) {
|
||||
draftMinute.value = minute;
|
||||
applyTime();
|
||||
}
|
||||
|
||||
const cells = computed<Cell[]>(() => {
|
||||
const { jy, jm } = cursor.value;
|
||||
const first = jalaliToDate(jy, jm, 1);
|
||||
@@ -178,8 +215,8 @@ function place() {
|
||||
const panel = panelRef.value;
|
||||
if (!trigger) return;
|
||||
const rect = trigger.getBoundingClientRect();
|
||||
const width = panel?.offsetWidth || 320;
|
||||
const height = panel?.offsetHeight || 360;
|
||||
const width = panel?.offsetWidth || (props.mode === 'time' ? 340 : 320);
|
||||
const height = panel?.offsetHeight || (props.mode === 'time' ? 420 : 360);
|
||||
let nextLeft = rect.left;
|
||||
if (getComputedStyle(document.documentElement).direction === 'rtl') {
|
||||
nextLeft = rect.right - width;
|
||||
@@ -298,6 +335,14 @@ watch(open, (value) => {
|
||||
window.removeEventListener('keydown', onKeydown, true);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => model.value,
|
||||
() => {
|
||||
if (props.mode === 'time') syncDraftFrom(null);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', onWindowChange);
|
||||
window.removeEventListener('scroll', onWindowChange, true);
|
||||
@@ -307,19 +352,40 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wrap" :class="{ disabled }">
|
||||
<div class="wrap" :class="{ disabled, 'time-only': mode === 'time' }">
|
||||
<button
|
||||
:id="id"
|
||||
ref="triggerRef"
|
||||
class="trigger"
|
||||
:class="{ 'clock-trigger': mode === 'time' }"
|
||||
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" />
|
||||
<template v-if="mode === 'time'">
|
||||
<span class="clock-face" aria-hidden="true">
|
||||
<i
|
||||
class="hand hour-hand"
|
||||
:style="{
|
||||
transform: `rotate(${(draftHour % 12) * 30 + draftMinute * 0.5}deg)`,
|
||||
}"
|
||||
/>
|
||||
<i
|
||||
class="hand minute-hand"
|
||||
:style="{ transform: `rotate(${draftMinute * 6}deg)` }"
|
||||
/>
|
||||
<i class="hub" />
|
||||
</span>
|
||||
<span class="clock-text" :class="{ empty: !display }">
|
||||
{{ display || emptyLabel }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span :class="{ empty: !display }">{{ display || emptyLabel }}</span>
|
||||
<UiIcon :name="triggerIcon" :size="18" />
|
||||
</template>
|
||||
</button>
|
||||
|
||||
<Teleport to="body">
|
||||
@@ -328,6 +394,7 @@ onBeforeUnmount(() => {
|
||||
id="jalali-picker"
|
||||
ref="panelRef"
|
||||
class="panel"
|
||||
:class="{ 'panel-time': mode === 'time' }"
|
||||
role="dialog"
|
||||
:style="{ top: `${top}px`, left: `${left}px` }"
|
||||
>
|
||||
@@ -359,23 +426,50 @@ onBeforeUnmount(() => {
|
||||
</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 v-if="mode === 'datetime' || mode === 'time'" class="time-dials">
|
||||
<p v-if="mode === 'time'" class="time-title">{{ draftTimeLabel }}</p>
|
||||
<div class="dials">
|
||||
<div class="dial-block">
|
||||
<span class="dial-label">ساعت</span>
|
||||
<div class="dial" role="listbox" aria-label="ساعت">
|
||||
<span class="dial-center">{{ toFaDigits(String(draftHour).padStart(2, '0')) }}</span>
|
||||
<button
|
||||
v-for="h in hours"
|
||||
:key="`h-${h}`"
|
||||
type="button"
|
||||
class="tick"
|
||||
:class="{ on: draftHour === h, outer: h >= 12 }"
|
||||
:style="hourDialStyle(h)"
|
||||
@click="setHour(h)"
|
||||
>
|
||||
{{ toFaDigits(h) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dial-block">
|
||||
<span class="dial-label">دقیقه</span>
|
||||
<div class="dial" role="listbox" aria-label="دقیقه">
|
||||
<span class="dial-center">{{ toFaDigits(String(draftMinute).padStart(2, '0')) }}</span>
|
||||
<button
|
||||
v-for="m in minutes"
|
||||
:key="`m-${m}`"
|
||||
type="button"
|
||||
class="tick"
|
||||
:class="{ on: draftMinute === m }"
|
||||
:style="minuteDialStyle(m)"
|
||||
@click="setMinute(m)"
|
||||
>
|
||||
{{ toFaDigits(String(m).padStart(2, '0')) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="foot">
|
||||
<button type="button" class="link" @click="pickToday">امروز</button>
|
||||
<button type="button" class="link" @click="pickToday">
|
||||
{{ mode === 'time' ? 'الان' : 'امروز' }}
|
||||
</button>
|
||||
<button
|
||||
v-if="clearable && !required && model"
|
||||
type="button"
|
||||
@@ -415,6 +509,68 @@ onBeforeUnmount(() => {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.clock-trigger {
|
||||
justify-content: flex-start;
|
||||
gap: 0.8rem;
|
||||
min-height: 52px;
|
||||
border-radius: 16px;
|
||||
padding: 0.45rem 0.85rem 0.45rem 0.45rem;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f8fffd 100%);
|
||||
}
|
||||
|
||||
.clock-face {
|
||||
position: relative;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background:
|
||||
radial-gradient(circle at center, #fff 0 38%, transparent 39%),
|
||||
conic-gradient(from 0deg, #ecfdf5, #ccfbf1, #ecfdf5);
|
||||
border: 2px solid #99f6e4;
|
||||
box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.08);
|
||||
}
|
||||
|
||||
.hand {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 50%;
|
||||
transform-origin: center bottom;
|
||||
border-radius: 99px;
|
||||
background: #0f766e;
|
||||
}
|
||||
|
||||
.hour-hand {
|
||||
width: 2.5px;
|
||||
height: 11px;
|
||||
margin-inline-start: -1.25px;
|
||||
}
|
||||
|
||||
.minute-hand {
|
||||
width: 2px;
|
||||
height: 15px;
|
||||
margin-inline-start: -1px;
|
||||
background: #14b8a6;
|
||||
}
|
||||
|
||||
.hub {
|
||||
position: absolute;
|
||||
inset: 50% auto auto 50%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
margin: -2.5px;
|
||||
border-radius: 50%;
|
||||
background: #0f766e;
|
||||
}
|
||||
|
||||
.clock-text {
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 0.02em;
|
||||
font-size: 1.05rem;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.trigger:focus {
|
||||
outline: 2px solid var(--accent-soft, #ccfbf1);
|
||||
border-color: var(--accent, #0d9488);
|
||||
@@ -426,6 +582,8 @@ onBeforeUnmount(() => {
|
||||
|
||||
.trigger .empty {
|
||||
color: #94a3b8;
|
||||
font-weight: 600;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.trigger :deep(.ico) {
|
||||
@@ -449,6 +607,10 @@ onBeforeUnmount(() => {
|
||||
font-family: IRANSans, Tahoma, sans-serif;
|
||||
}
|
||||
|
||||
.panel-time {
|
||||
width: min(22.5rem, calc(100vw - 16px));
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -519,28 +681,102 @@ onBeforeUnmount(() => {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.time {
|
||||
.time-dials {
|
||||
margin-top: 0.55rem;
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.time-title {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 800;
|
||||
color: #0f766e;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.dials {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.65rem;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.time label {
|
||||
.dial-block {
|
||||
display: grid;
|
||||
gap: 0.28rem;
|
||||
color: #64748b;
|
||||
font-size: 0.75rem;
|
||||
gap: 0.4rem;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.time select {
|
||||
width: 100%;
|
||||
min-height: 38px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
padding: 0.3rem 0.5rem;
|
||||
background: #fff;
|
||||
.dial-label {
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.dial {
|
||||
position: relative;
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(circle at center, #ffffff 0 28%, transparent 29%),
|
||||
radial-gradient(circle at center, #f0fdfa 0 70%, #ecfeff 100%);
|
||||
border: 2px solid #99f6e4;
|
||||
box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.06);
|
||||
}
|
||||
|
||||
.dial-center {
|
||||
position: absolute;
|
||||
inset: 50% auto auto 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #0d9488;
|
||||
color: #fff;
|
||||
font-weight: 800;
|
||||
font-size: 0.95rem;
|
||||
z-index: 2;
|
||||
box-shadow: 0 6px 14px rgba(13, 148, 136, 0.28);
|
||||
}
|
||||
|
||||
.tick {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
color: #475569;
|
||||
font: inherit;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transform: translate(-50%, -50%);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tick.outer {
|
||||
font-size: 0.68rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.tick:hover {
|
||||
background: #ccfbf1;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.tick.on {
|
||||
background: #14b8a6;
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 10px rgba(20, 184, 166, 0.35);
|
||||
}
|
||||
|
||||
.foot {
|
||||
@@ -573,4 +809,15 @@ onBeforeUnmount(() => {
|
||||
font-weight: 800;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.dials {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.dial {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user