Calendar with date range picker

<!--
  Кейс проверяет ЗАКРЫТОЕ состояние триггера (см. PORTING.md §5).
-->
<script setup lang="ts">
import { ref } from "vue"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Calendar as CCalendar } from "@/components/ui/calendar"
import { CalendarDateRange as CCalendarRange } from "@/components/ui/calendar"

const date = ref<CCalendarRange | undefined>(undefined)
</script>

<template>
  <Popover>
    <PopoverTrigger as-child>
      <Button class="group/pick-date w-60 justify-between" variant="outline">
        <span :class="['truncate', !date && 'text-muted-foreground']">Pick a date range</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="text-muted-foreground/80 group-hover:text-foreground shrink-0 transition-colors">
          <path d="M8 2v4" />
          <path d="M16 2v4" />
          <rect width="18" height="18" x="3" y="4" rx="2" />
          <path d="M3 10h18" />
        </svg>
      </Button>
    </PopoverTrigger>
    <PopoverContent align="start" class="w-auto p-0">
      <Card class="p-0">
        <CardContent class="p-0">
          <CCalendar mode="range" v-model="date" :number-of-months="2" />
        </CardContent>
      </Card>
    </PopoverContent>
  </Popover>
</template>