Date selector with dialog

<!--
  IconPlaceholder (иконка "calendar" в триггере) заменена инлайновым
  `<svg>`. Dialog закрыт по умолчанию — `DialogContent` (и `DateSelector`
  внутри него) не монтируется, известное расхождение сетки календаря сюда
  не попадает.
-->
<script setup lang="ts">
import { ref, watch } from "vue"
import { DateSelector } from "@/components/reui/date-selector"
import { Button } from "@/components/ui/button"
import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { DateSelectorValue } from "@/components/reui/date-selector"

const value = ref<DateSelectorValue | undefined>(undefined)
const open = ref(false)
const internalValue = ref<DateSelectorValue | undefined>(value.value)

watch(open, (isOpen) => {
  if (isOpen) {
    internalValue.value = value.value
  }
})

const displayText = "Select a date"
</script>

<template>
  <Dialog v-model:open="open">
    <DialogTrigger as-child>
      <Button variant="outline" class="w-56 justify-start">
        <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"
        ><path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" /></svg>
        {{ displayText }}
      </Button>
    </DialogTrigger>
    <DialogContent class="sm:max-w-lg" :show-close-button="false">
      <DialogHeader>
        <DialogTitle>Select Due Date</DialogTitle>
      </DialogHeader>

      <DateSelector :value="internalValue" @change="internalValue = $event" :show-input="true" />

      <DialogFooter>
        <DialogClose as-child>
          <Button variant="outline">Cancel</Button>
        </DialogClose>
        <Button>Apply</Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>