feat(calendar): replace CSS-transform zoom with GSAP flying-rect animation and scope data to year

- Add CalendarDateRange input to GraphQL schema; server resolver now accepts from/to params
- Frontend query sends year-scoped date range variables reactively
- Rewrite zoom-in/zoom-out animations using GSAP flying-rect overlay (650ms vs 2400ms)
- Add flying-rect element to CrmCalendarPanel with proper CSS
- Remove old calendarSceneTransformStyle CSS-transition approach
- Add calendarKillTweens cleanup in onBeforeUnmount

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ruslan Bakiev
2026-02-24 11:41:35 +07:00
parent 638652b4d8
commit 227030b9ae
6 changed files with 217 additions and 181 deletions

View File

@@ -54,7 +54,6 @@ defineProps<{
setCalendarSceneRef: (element: HTMLDivElement | null) => void;
calendarViewportHeight: number;
normalizedCalendarView: string;
calendarSceneTransformStyle: Record<string, string>;
onCalendarSceneMouseLeave: () => void;
calendarView: string;
yearMonths: YearMonthItem[];
@@ -80,6 +79,8 @@ defineProps<{
weekDays: WeekDay[];
calendarPrimeDayToken: (dayKey: string) => string;
selectedDayEvents: CalendarEvent[];
calendarFlyVisible: boolean;
setCalendarFlyRectRef: (element: HTMLDivElement | null) => void;
}>();
</script>
@@ -156,6 +157,14 @@ defineProps<{
>
<span></span>
</button>
<!-- GSAP flying rect (zoom transition overlay) -->
<div
v-show="calendarFlyVisible"
:ref="setCalendarFlyRectRef"
class="calendar-fly-rect"
/>
<div
:ref="setCalendarContentScrollRef"
class="calendar-content-scroll min-h-0 h-full overflow-y-auto pr-1"
@@ -167,7 +176,6 @@ defineProps<{
'calendar-scene',
normalizedCalendarView === 'day' ? 'cursor-zoom-out' : 'cursor-zoom-in',
]"
:style="calendarSceneTransformStyle"
@mouseleave="onCalendarSceneMouseLeave"
>
<div
@@ -441,6 +449,16 @@ defineProps<{
z-index: 2;
}
.calendar-fly-rect {
position: absolute;
border-radius: 12px;
border: 2px solid color-mix(in oklab, var(--color-primary) 70%, transparent);
background: color-mix(in oklab, var(--color-base-200) 60%, transparent);
z-index: 20;
pointer-events: none;
will-change: left, top, width, height;
}
.calendar-zoom-inline {
position: relative;
display: flex;