fix(calendar): make nested block zoom smooth in both directions

This commit is contained in:
Ruslan Bakiev
2026-02-23 14:33:24 +07:00
parent 6ad53e64c5
commit db49c4a830
2 changed files with 120 additions and 121 deletions

View File

@@ -169,14 +169,16 @@ defineProps<{
:style="calendarSceneTransformStyle"
@mouseleave="onCalendarSceneMouseLeave"
>
<div class="grid gap-2" :class="calendarView === 'year' ? 'sm:grid-cols-2 xl:grid-cols-3' : 'grid-cols-1'">
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-3">
<article
v-for="item in yearMonths"
:key="`year-month-${item.monthIndex}`"
v-show="calendarView === 'year' || item.monthIndex === calendarCursorMonth"
class="group relative rounded-xl border border-base-300 p-3 text-left transition calendar-hover-targetable"
:class="[
calendarView === 'year' ? 'hover:border-primary/50 hover:bg-primary/5 cursor-zoom-in' : 'cursor-default min-h-[26rem] bg-base-100',
calendarView === 'year'
? 'hover:border-primary/50 hover:bg-primary/5 cursor-zoom-in'
: 'cursor-default min-h-[26rem] bg-base-100 sm:col-span-2 xl:col-span-3',
calendarHoveredMonthIndex === item.monthIndex ? 'calendar-hover-target' : '',
calendarZoomPrimeToken === calendarPrimeMonthToken(item.monthIndex) ? 'calendar-zoom-prime-active' : '',
]"