aiolabs/webapp
8
0
Fork 0
Code Issues 65 Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: aiolabs:628f85a074e95433f3b5b4e5d41a4ed21e4d10b9
Branches Tags
aiolabs:main
aiolabs:dev
..
compare: aiolabs:8f85a5819b2f8cca9c8021f2b0e473dad0e4487a
Branches Tags
aiolabs:dev
aiolabs:main

No commits in common. "628f85a074e95433f3b5b4e5d41a4ed21e4d10b9" and "8f85a5819b2f8cca9c8021f2b0e473dad0e4487a" have entirely different histories.
628f85a074 ... 8f85a5819b

1 changed files with 12 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/modules/events/components/EventCalendarPopup.vue
View file

@ -1,26 +1,18 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue' import { computed } from 'vue'
import { import {
DialogRoot, Dialog,
DialogPortal,
DialogOverlay,
DialogContent, DialogContent,
DialogHeader,
DialogTitle, DialogTitle,
DialogDescription, DialogDescription,
DialogClose, } from '@/components/ui/dialog'
} from 'reka-ui'
import { X } from 'lucide-vue-next'
import EventCalendarView from './EventCalendarView.vue' import EventCalendarView from './EventCalendarView.vue'
import type { Event } from '../types/event' import type { Event } from '../types/event'
// A date-picker popup: the month grid (with per-day event dots) in a // A date-picker popup: the month grid (with per-day event dots) in a
// dialog. Picking a day emits selectDate and closes. Reused by the feed // dialog. Picking a day emits selectDate and closes. Reused by the feed
// (filter to a day) and My Tickets (visualise the user's event dates). // (filter to a day) and My Tickets (visualise the user's event dates).
//
// Built on the reka-ui dialog primitives (rather than the shared
// DialogContent) so it can use a light, blurred overlay instead of the
// usual opaque dark dim — the feed stays visible, softly blurred, behind
// the frosted-glass panel.
const props = defineProps<{ const props = defineProps<{
open: boolean open: boolean
events: Event[] events: Event[]
@ -45,31 +37,13 @@ function onSelectDate(date: Date) {
</script> </script>
<template> <template>
<DialogRoot v-model:open="isOpen"> <Dialog v-model:open="isOpen">
<DialogPortal> <DialogContent class="max-w-sm">
<!-- Frosted backdrop: a light tint + blur so the feed shows <DialogHeader>
through (softly blurred) rather than being hidden behind an <DialogTitle>{{ title }}</DialogTitle>
opaque dark overlay. --> <DialogDescription>{{ description }}</DialogDescription>
<DialogOverlay class="fixed inset-0 z-50 bg-background/20 backdrop-blur-md" /> </DialogHeader>
<DialogContent <EventCalendarView :events="events" picker-mode @select-date="onSelectDate" />
class="fixed left-1/2 top-1/2 z-50 grid w-full max-w-sm -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border bg-background/70 p-6 shadow-lg backdrop-blur-xl" </DialogContent>
> </Dialog>
<div class="flex flex-col gap-1.5 text-center sm:text-left">
<DialogTitle class="text-lg font-semibold leading-none tracking-tight">
{{ title }}
</DialogTitle>
<DialogDescription class="text-sm text-muted-foreground">
{{ description }}
</DialogDescription>
</div>
<EventCalendarView :events="events" picker-mode @select-date="onSelectDate" />
<DialogClose
class="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none"
aria-label="Close"
>
<X class="w-4 h-4" />
</DialogClose>
</DialogContent>
</DialogPortal>
</DialogRoot>
</template> </template>