feat(calendar): add nested zoom lab page with four persistent levels

This commit is contained in:
Ruslan Bakiev
2026-02-23 15:57:12 +07:00
parent 6bc0bfa156
commit 2eb2f3109c
6 changed files with 779 additions and 0 deletions

View File

@@ -0,0 +1,34 @@
<script setup lang="ts">
defineProps<{
isActive: boolean;
isLoading: boolean;
isLoaded: boolean;
pulseScale: number;
}>();
</script>
<template>
<section
class="calendar-lab-rect calendar-lab-week"
:class="isActive ? 'calendar-lab-rect-active' : ''"
:style="{ transform: `scale(${pulseScale})` }"
>
<header class="calendar-lab-header">
<p class="calendar-lab-title">Week</p>
<p class="calendar-lab-subtitle">7 day columns</p>
</header>
<p v-if="isLoading" class="calendar-lab-loading">Loading GraphQL week payload</p>
<p v-else-if="isLoaded" class="calendar-lab-meta">Data ready</p>
<div class="calendar-lab-grid-week">
<span
v-for="day in 7"
:key="`lab-week-day-${day}`"
class="calendar-lab-day"
>
D{{ day }}
</span>
</div>
</section>
</template>