Improved year scroller, removed Numeric outline for simpler forms.

This commit is contained in:
Leo Vasanko 2025-08-22 19:33:39 -06:00
parent 26b2e983ed
commit 62f9097ac0
3 changed files with 44 additions and 26 deletions

View File

@ -24,9 +24,12 @@ const topVirtualWeek = computed(() => {
})
const currentYear = computed(() => {
const firstDay = new Date(baseDate)
firstDay.setDate(firstDay.getDate() + topVirtualWeek.value * 7)
return isoWeekInfo(firstDay).year
const weekStart = new Date(baseDate)
weekStart.setDate(weekStart.getDate() + topVirtualWeek.value * 7)
// ISO anchor: Thursday of current calendar week
const anchor = new Date(weekStart)
anchor.setDate(anchor.getDate() + ((4 - anchor.getDay() + 7) % 7))
return isoWeekInfo(anchor).year
})
function virtualWeekOf(d) {
@ -36,30 +39,41 @@ function virtualWeekOf(d) {
return Math.floor((fd - baseDate) / WEEK_MS)
}
function isoWeekMonday(isoYear, isoWeek) {
// Monday of ISO week 1
const jan4 = new Date(isoYear, 0, 4)
const week1Mon = new Date(jan4)
week1Mon.setDate(week1Mon.getDate() - ((week1Mon.getDay() + 6) % 7))
const target = new Date(week1Mon)
target.setDate(target.getDate() + (isoWeek - 1) * 7)
return target
}
function changeYear(y) {
if (y == null) return
y = Math.round(Math.max(calendarStore.minYear, Math.min(calendarStore.maxYear, y)))
if (y === currentYear.value) return
// Current ISO week + intra-week fraction
const vw = topVirtualWeek.value
// Fraction within current row for smooth vertical position preservation
const weekStartScroll = (vw - props.minVirtualWeek) * props.rowHeight
const frac = Math.max(0, Math.min(1, (props.scrollTop - weekStartScroll) / props.rowHeight))
const weekStart = new Date(baseDate)
weekStart.setDate(weekStart.getDate() + vw * 7)
let { week: isoW } = isoWeekInfo(weekStart)
// Build Monday of isoW in target year (Jan 4 trick)
const jan4 = new Date(y, 0, 4)
const jan4Mon = new Date(jan4)
jan4Mon.setDate(jan4.getDate() - ((jan4.getDay() || 7) - 1)) // Monday of week 1
let monday = new Date(jan4Mon)
monday.setDate(monday.getDate() + (isoW - 1) * 7)
// If overflow (week 53 not present) step back
if (isoWeekInfo(monday).year !== y) {
monday.setDate(monday.getDate() - 7)
// Derive current ISO week via anchor Thursday
const curCalWeekStart = new Date(baseDate)
curCalWeekStart.setDate(curCalWeekStart.getDate() + vw * 7)
const curAnchorThu = new Date(curCalWeekStart)
curAnchorThu.setDate(curAnchorThu.getDate() + ((4 - curAnchorThu.getDay() + 7) % 7))
let { week: isoW } = isoWeekInfo(curAnchorThu)
// Build Monday of that ISO week in target year; fallback if week absent (53)
let weekMon = isoWeekMonday(y, isoW)
if (isoWeekInfo(weekMon).year !== y) {
isoW--
weekMon = isoWeekMonday(y, isoW)
}
const shift = (monday.getDay() - calendarStore.config.first_day + 7) % 7
monday.setDate(monday.getDate() - shift)
const targetVW = virtualWeekOf(monday)
// Align to configured first day
const shift = (weekMon.getDay() - calendarStore.config.first_day + 7) % 7
const calWeekStart = new Date(weekMon)
calWeekStart.setDate(calWeekStart.getDate() - shift)
const targetVW = virtualWeekOf(calWeekStart)
let scrollTop = (targetVW - props.minVirtualWeek) * props.rowHeight + frac * props.rowHeight
if (Math.abs(scrollTop - props.scrollTop) < 0.5) scrollTop += 0.25 * props.rowHeight
emit('year-change', { year: y, scrollTop })

View File

@ -130,7 +130,10 @@ function getFirstDayForVirtualWeek(virtualWeek) {
function createWeek(virtualWeek) {
const firstDay = getFirstDayForVirtualWeek(virtualWeek)
const weekNumber = isoWeekInfo(firstDay).week
// ISO week number should be based on the Thursday of this week (anchor) to avoid off-by-one when week starts Sunday or other days
const isoAnchor = new Date(firstDay)
isoAnchor.setDate(isoAnchor.getDate() + ((4 - isoAnchor.getDay() + 7) % 7))
const weekNumber = isoWeekInfo(isoAnchor).week
const days = []
const cur = new Date(firstDay)
let hasFirst = false

View File

@ -246,16 +246,17 @@ function onWheel(e) {
justify-content: center;
padding: 0 0.4rem;
gap: 0.25rem;
border: 1px solid var(--input-border, var(--muted));
background: var(--panel-alt);
border: 1px solid transparent;
background: transparent;
border-radius: 0.4rem;
min-height: 1.8rem;
font-variant-numeric: tabular-nums;
touch-action: none; /* allow custom drag without scrolling */
touch-action: none;
}
.mini-stepper.drag-mode:focus-visible {
outline: 2px solid var(--input-focus, #2563eb);
outline-offset: 2px;
border-color: var(--input-border, var(--muted));
box-shadow: 0 0 0 2px var(--input-focus, #2563eb);
outline: none;
}
.mini-stepper.drag-mode .value {
font-weight: 600;