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-year"
:class="isActive ? 'calendar-lab-rect-active' : ''"
:style="{ transform: `scale(${pulseScale})` }"
>
<header class="calendar-lab-header">
<p class="calendar-lab-title">Year</p>
<p class="calendar-lab-subtitle">12 months overview</p>
</header>
<p v-if="isLoading" class="calendar-lab-loading">Loading GraphQL year payload</p>
<p v-else-if="isLoaded" class="calendar-lab-meta">Data ready</p>
<div class="calendar-lab-grid-year">
<span
v-for="month in 12"
:key="`lab-year-month-${month}`"
class="calendar-lab-chip"
>
{{ month }}
</span>
</div>
</section>
</template>