@bagelink/vue 1.2.13 → 1.2.18

package/src/components/calendar/Index.vue

@@ -1,417 +1,152 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
-import type { ConfigInterface } from './typings/config.interface'
-import type { DayInterface } from './typings/interfaces/day.interface'
-import type { EventInterface } from './typings/interfaces/event.interface'
-import type { PeriodInterface } from './typings/interfaces/period.interface'
-import type { ModeType } from './typings/types'
-import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
-import AppHeader from './components/header/Header.vue'
-import AgendaEvents from './components/month/AgendaEvents.vue'
-import Month from './components/month/Month.vue'
-import Week from './components/week/Week.vue'
-import Errors from './helpers/Errors'
-import Time from './helpers/Time'
-
-const props = defineProps({
-	config: {
-		type: Object as PropType<ConfigInterface>,
-		default: () => ({}),
-	},
-	events: {
-		type: Array as PropType<EventInterface[]>,
-		default: () => [],
-	},
-	selectedDate: {
-		type: Date,
-		default: new Date(),
-	},
-	isLoading: {
-		type: Boolean,
-		default: false,
-	},
+import type { Component } from 'vue'
+import type { CalendarEvent, CalendarView, WeekStart } from './CalendarTypes'
+import { timeDelta, Btn, formatDate, ListItem, Dropdown } from '@bagelink/vue'
+import { ref, computed } from 'vue'
+import AgendaView from './views/AgendaView.vue'
+import DayView from './views/DayView.vue'
+import MonthView from './views/MonthView.vue'
+import WeekView from './views/WeekView.vue'
+
+interface CalendarProps {
+	events: CalendarEvent[]
+	startDate?: Date
+	view?: CalendarView
+	weekStart?: WeekStart
+}
+
+const props = withDefaults(defineProps<CalendarProps>(), {
+	startDate: () => new Date(),
+	view: 'Week',
+	weekStart: 'Sunday'
 })
 
-const emit = defineEmits([
-	'eventWasClicked',
-	'eventWasResized',
-	'eventWasDragged',
-	'updatedPeriod',
-	'updatedMode',
-	'editEvent',
-	'deleteEvent',
-	'intervalWasClicked',
-	'dayWasClicked', // TODO: remove with v4. day-was-clicked is deprecated
-	'dateWasClicked',
-	'datetimeWasClicked',
-] as const)
-
-const wasInitialized = ref(0)
-const period = ref({
-	start: new Date(),
-	end: new Date(),
-	selectedDate: props.selectedDate,
-})
-const mode = ref(props.config.defaultMode || ('week' as ModeType))
-const time = ref(new Time(props.config.week?.startsOn, props.config.locale || null, {
-	start: setTimePointsFromDayBoundary(props.config.dayBoundaries?.start || 0),
-	end: setTimePointsFromDayBoundary(props.config.dayBoundaries?.end || 24),
-}) as Time | any)
-// const UNUSED_fontFamily = computed(() => props.config.style?.fontFamily || '\'Verdana\', \'Open Sans\', serif')
-const eventRenderingKey = ref(0)
-const eventsDataProperty = ref(props.events)
-const isSmall = ref(false)
-const ErrorsHelper = Errors
-const appHeaderRef = ref()
-
-const enhancedConfig = computed((): ConfigInterface => {
-	return { ...props.config, isSmall: isSmall.value }
-})
-
-watch(() => props.events, (newVal, oldVal) => {
-	if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
-		eventsDataProperty.value = newVal
-		eventRenderingKey.value = eventRenderingKey.value + 1
+const emit = defineEmits<{
+	(e: 'eventClick', event: CalendarEvent): void
+	(e: 'eventCreate', event: { start_time: Date, end_time: Date }): void
+	(e: 'eventUpdate', event: CalendarEvent): void
+	(e: 'eventDelete', eventId: string): void
+	(e: 'dateChange', date: Date): void
+	(e: 'viewChange', view: CalendarView): void
+}>()
+
+// State
+const currentDate = ref(new Date(props.startDate))
+const currentView = ref(props.view)
+
+// Available view components
+const views: Record<CalendarView, Component> = {
+	Week: WeekView,
+	Month: MonthView,
+	Day: DayView,
+	Agenda: AgendaView
+}
+
+// Calculate visible date range based on current view
+const visibleDateRange = computed(() => {
+	const start = new Date(currentDate.value)
+	let end = new Date(currentDate.value)
+
+	if (currentView.value === 'Week') {
+		const dayOfWeek = start.getDay()
+		const weekStartOffset = props.weekStart === 'Sunday' ? 0 : 1
+		start.setDate(start.getDate() - dayOfWeek + weekStartOffset)
+		end = new Date(start)
+		end.setDate(end.getDate() + 6)
+	} else if (['Month', 'Agenda'].includes(currentView.value)) {
+		start.setDate(1)
+		start.setDate(start.getDate() - 7)
+		end = new Date(start.getFullYear(), start.getMonth() + 2, 7)
+	} else if (currentView.value === 'Day') {
+		end.setDate(end.getDate() + 1)
 	}
-	if (props.config.isSilent) return
-
-	props.events.forEach((e) => { ErrorsHelper.checkEventProperties(e) })
-}, { deep: true, immediate: true })
-
-watch(() => props.config, (value: ConfigInterface) => {
-	ErrorsHelper.checkConfig(value)
-}, { deep: true, immediate: true })
-
-onMounted(() => {
-	setConfigOnMount()
-	onCalendarResize()
-	setPeriodOnMount()
-	window.addEventListener('resize', onCalendarResize)
+	return { start, end }
 })
 
-onBeforeUnmount(() => {
-	window.removeEventListener('resize', onCalendarResize)
-})
-
-function setConfigOnMount() {
-	wasInitialized.value = 1
+// Event handlers
+function handleEventClick(event: CalendarEvent) {
+	emit('eventClick', event)
 }
 
-function handleUpdatedPeriod(
-	value: PeriodInterface,
-	leaveMonthMode = false
-) {
-	emit('updatedPeriod', { start: value.start, end: value.end })
-	period.value = value
-
-	if (leaveMonthMode) mode.value = 'day'
+function handleEventCreate(event: { start_time: Date, end_time: Date }) {
+	emit('eventCreate', event)
 }
 
-function handleChangeMode(payload: ModeType) {
-	if (payload === 'day') {
-		period.value.start = period.value.selectedDate
-		period.value.end = time.value.setDateToEndOfDay(period.value.selectedDate)
-	}
-
-	if (payload === 'week') {
-		const week = time.value.getCalendarWeekDateObjects(period.value.selectedDate)
-		period.value.start = week[0]
-		period.value.end = time.value.setDateToEndOfDay(week[6])
-	}
-
-	if (payload === 'month') {
-		const month = time.value.getCalendarMonthSplitInWeeks(
-			period.value.selectedDate.getFullYear(),
-			period.value.selectedDate.getMonth()
-		)
-
-		period.value.start = month[0][0]
-		const lastWeek = month[month.length - 1]
-		period.value.end = time.value.setDateToEndOfDay(lastWeek[lastWeek.length - 1])
-	}
-
-	mode.value = payload
-	emit('updatedMode', { mode: payload, period: period.value })
-}
-
-const calendarRoot = ref<HTMLElement>()
-
-function onCalendarResize() {
-	const documentRoot = document.documentElement
-	const documentFontSize = +window
-		.getComputedStyle(documentRoot)
-		.fontSize
-		.split('p')[0]
-	const breakPointFor1RemEquals16px = 600
-	const multiplier = 16 / documentFontSize
-	const smallCalendarBreakpoint = breakPointFor1RemEquals16px / multiplier // For 16px root font-size, break point is at 43.75rem
-
-	if (!calendarRoot.value) return
-
-	isSmall.value = calendarRoot.value.clientWidth < smallCalendarBreakpoint
-
-	if (isSmall.value && !['day', 'month'].includes(mode.value)) {
-		mode.value = 'day'
-	}
+function handleEventUpdate(event: CalendarEvent) {
+	emit('eventUpdate', event)
 }
 
-function setPeriodOnMount() {
-	if (mode.value === 'week') {
-		const currentWeek = time.value.getCalendarWeekDateObjects(period.value.selectedDate)
-		period.value.start = currentWeek[0]
-		period.value.end = currentWeek[6]
-	} else if (mode.value === 'month') {
-		const month = time.value.getCalendarMonthSplitInWeeks(
-			period.value.selectedDate.getFullYear(),
-			period.value.selectedDate.getMonth()
-		)
-		period.value.start = month[0][0]
-		const lastWeek = month[month.length - 1]
-		period.value.end = lastWeek[lastWeek.length - 1]
-	}
+function handleEventDelete(eventId: string) {
+	emit('eventDelete', eventId)
 }
 
-function handleEventWasUpdated(
-	calendarEvent: EventInterface,
-	eventType: 'dragged' | 'resized'
-) {
-	const newEvents = eventsDataProperty.value.filter(
-		e => e.id !== calendarEvent.id
-	)
-	eventsDataProperty.value = [calendarEvent, ...newEvents]
-	emit(eventType === 'dragged' ? 'eventWasDragged' : 'eventWasResized', calendarEvent)
+function handleDateChange(date: Date) {
+	currentDate.value = new Date(date)
+	emit('dateChange', currentDate.value)
 }
 
-function setTimePointsFromDayBoundary(boundary: number) {
-	return Time.getTimePointsFromHour(boundary)
+function handleViewChange(view: CalendarView) {
+	currentView.value = view
+	emit('viewChange', view)
 }
 
-const day = $computed(() => {
-	return {
-		dayName: time.value.getLocalizedNameOfWeekday(period.value.selectedDate, 'long'),
-		dateTimeString: period.value.selectedDate.toLocaleDateString('en-US', {
-			day: '2-digit',
-			month: '2-digit',
-			year: 'numeric',
-		}),
-		events: eventsDataProperty.value.filter((e) => {
-			const eventDate = new Date(e.time.start)
-			return eventDate >= period.value.start && eventDate <= period.value.end
-		}),
-		fullDayEvents: {
-			date: period.value.selectedDate,
-			events: eventsDataProperty.value.filter((e) => {
-				const eventDate = new Date(e.time.start)
-				return eventDate >= period.value.start && eventDate <= period.value.end
-			}),
-		}
-	} as DayInterface
-})
-
-function handleDateWasClicked(payload: string) {
-	emit('dayWasClicked', payload)
-	emit('dateWasClicked', payload)
-}
+defineExpose({ visibleDateRange })
 </script>
 
 <template>
-	<div class="calendar-root-wrapper txt16">
-		<div
-			ref="calendarRoot"
-			class="calendar-root"
-			:class="{
-				'mode-is-day': mode === 'day',
-				'mode-is-week': mode === 'week',
-				'mode-is-month': mode === 'month',
-				'qalendar-is-small': isSmall,
-			}"
-			:data-lang="config?.locale?.substring(0, 2) || 'en'"
-		>
-			<Transition name="loading">
-				<div
-					v-if="isLoading"
-					class="top-bar-loader"
-				/>
-			</Transition>
-
-			<AppHeader
-				ref="appHeaderRef"
-				:key="wasInitialized + mode"
-				:config="config"
-				:mode="mode"
-				:time="time"
-				:period="period"
-				:is-small="isSmall"
-				@change-mode="handleChangeMode"
-				@updated-period="handleUpdatedPeriod"
-			/>
-			<AgendaEvents
-				v-if="mode === 'agenda'"
-				:events-prop="eventsDataProperty"
-				:period="period"
-				:config="config"
-				:time="time"
-				:day="day"
-			/>
-
-			<Week
-				v-if="['week', 'day'].includes(mode)"
-				:key="period.start.getTime() + period.end.getTime() + eventRenderingKey"
-				:events-prop="eventsDataProperty"
-				:period="period"
-				:config="config"
-				:mode-prop="mode"
-				:time="time"
-				@event-was-clicked="$emit('eventWasClicked', $event)"
-				@event-was-resized="handleEventWasUpdated($event, 'resized')"
-				@event-was-dragged="handleEventWasUpdated($event, 'dragged')"
-				@edit-event="$emit('editEvent', $event)"
-				@delete-event="$emit('deleteEvent', $event)"
-				@interval-was-clicked="$emit('intervalWasClicked', $event)"
-				@day-was-clicked="$emit('dayWasClicked', $event)"
-				@datetime-was-clicked="$emit('datetimeWasClicked', $event)"
-			>
-				<template #weekDayEvent="p">
-					<slot
-						:event-data="p.eventData"
-						name="weekDayEvent"
-					/>
-				</template>
-
-				<template #eventDialog="p">
-					<slot
-						name="eventDialog"
-						:event-dialog-data="p.eventDialogData"
-						:close-event-dialog="p.closeEventDialog"
+	<div class="calendar">
+		<div class="flex m_block m_pb-1">
+			<h3 class="txt-light my-0">
+				<b>{{ formatDate(currentDate, 'MMMM') }}</b>
+				{{ formatDate(currentDate, 'YYYY') }}
+			</h3>
+			<div class="ms-auto flex gap-025">
+				<Dropdown thin :value="currentView" iconEnd="keyboard_arrow_down" color="gray">
+					<ListItem
+						v-for="(_, key) in views"
+						:key="key"
+						:title="key"
+						@click="handleViewChange(key)"
 					/>
-				</template>
-
-				<template #customCurrentTime>
-					<slot name="customCurrentTime" />
-				</template>
-			</Week>
-
-			<Month
-				v-if="mode === 'month'"
-				:key="period.start.getTime() + period.end.getTime() + eventRenderingKey"
-				:events-prop="eventsDataProperty"
-				:time="time"
-				:config="enhancedConfig"
-				:period="period"
-				@event-was-clicked="$emit('eventWasClicked', $event)"
-				@date-was-clicked="handleDateWasClicked"
-				@event-was-dragged="handleEventWasUpdated($event, 'dragged')"
-				@updated-period="handleUpdatedPeriod($event, true)"
-				@edit-event="$emit('editEvent', $event)"
-				@delete-event="$emit('deleteEvent', $event)"
-			>
-				<template #eventDialog="p">
-					<slot
-						name="eventDialog"
-						:event-dialog-data="p.eventDialogData"
-						:close-event-dialog="p.closeEventDialog"
-					/>
-				</template>
-
-				<template #monthEvent="p">
-					<slot
-						:event-data="p.eventData"
-						name="monthEvent"
-					/>
-				</template>
-
-				<template #dayCell="{ dayData }">
-					<slot
-						:day-data="dayData"
-						name="dayCell"
-					/>
-				</template>
-			</Month>
+				</Dropdown>
+				<Btn icon="calendar" thin color="gray" value="Today" @click="handleDateChange(new Date())" />
+				<Btn
+					icon="chevron_left"
+					color="gray"
+					thin
+					@click="handleDateChange(timeDelta(currentDate, { [currentView]: -1 }))"
+				/>
+				<Btn
+					icon="chevron_right"
+					color="gray"
+					thin
+					@click="handleDateChange(timeDelta(currentDate, { [currentView]: 1 }))"
+				/>
+			</div>
 		</div>
+		<component
+			:is="views[currentView]"
+			:events="events"
+			:start-date="currentDate"
+			:week-start="weekStart"
+			@event-click="handleEventClick"
+			@event-create="handleEventCreate"
+			@event-update="handleEventUpdate"
+			@event-delete="handleEventDelete"
+			@date-change="handleDateChange"
+		>
+			<template #eventContent="{ event }">
+				<slot name="eventContent" :event="event" />
+			</template>
+		</component>
 	</div>
 </template>
 
-<!-- <style src="../../styles/_variables.css"></style> -->
-<style src="../calendar/styles/_variables.css"></style>
-
-<style>
-.calendar-root-wrapper {
-	width: 100%;
-	max-width: 100vw;
-	height: 100%;
-	display: flex;
-}
-
-.calendar-root-wrapper .calendar-root {
-	flex: 1;
-	border-radius: var(--qalendar-border-radius);
-	position: relative;
-	width: 100%;
-	margin: 0 auto;
-	display: flex;
-	flex-flow: column;
-}
-.calendar-root-wrapper .calendar-root .calendar-month__weeks{
-	border-inline: var(--qalendar-border-gray-thin);
-}
-
-.calendar-root-wrapper .calendar-root .top-bar-loader {
-	position: absolute;
-	top: 1px;
-	left: 2px;
-	width: calc(100% - 4px);
-	height: 3px;
-	background: rgba(241, 241, 241, 0.2);
-	border-radius: 16px;
-	overflow: hidden;
-}
-
-.calendar-root-wrapper .calendar-root .top-bar-loader:before {
-	content: '';
-	height: 4px;
-	width: calc(100% - 4px);
-	position: absolute;
-	top: 1px;
-	left: 2px;
-	background: rgb(38, 132, 255);
-	background: linear-gradient(
-		90deg,
-		rgba(38, 132, 255, 1) 0%,
-		rgba(38, 132, 255, 0.5088410364145659) 48%,
-		rgba(38, 132, 255, 1) 100%
-	);
-	animation: load 1.8s infinite;
-	border-radius: 16px;
-}
-
-@media (prefers-color-scheme: dark) {
-	.calendar-root-wrapper .calendar-root .top-bar-loader:before {
-		background: rgb(229, 224, 245);
-	}
-}
-
-@keyframes load {
-	0% {
-		width: 0;
-		left: -100%;
-	}
-	50% {
-		left: 0;
-		width: 100%;
-	}
-	100% {
-		width: 0;
-		left: 100%;
-	}
-}
-
-.calendar-root-wrapper .calendar-root .loading-enter-active,
-.calendar-root-wrapper .calendar-root .loading-leave-active {
-	transition: background 0.5s ease;
-}
-
-.calendar-root-wrapper .calendar-root .loading-leave-to,
-.calendar-root-wrapper .calendar-root .loading-enter-from {
-	background-color: rgba(255, 255, 255, 0);
+<style scoped>
+.calendar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
 }
 </style>

package/src/components/calendar/utils.ts

@@ -0,0 +1,70 @@
+import type { Ref } from 'vue'
+import type { CalendarEvent } from './CalendarTypes'
+
+export interface PopoverState {
+	activeEvent: Ref<CalendarEvent | null>
+	showPopover: Ref<boolean>
+	popoverPosition: Ref<{ top: number, left: number, width: number, height: number }>
+	popoverRef: Ref<HTMLElement | null>
+}
+
+/**
+ * Positions the popover to be centered on the target element and ensures it stays within viewport
+ */
+export function calculatePopoverPosition(
+	target: HTMLElement,
+	popoverWidth = 300,
+	popoverHeight = 150,
+): { top: number, left: number, width: number, height: number } {
+	const rect = target.getBoundingClientRect()
+	const { scrollY, scrollX, innerHeight, innerWidth } = window
+
+	// Default position (centered to the left of the element)
+	let top = rect.top + scrollY + (rect.height / 2) - (popoverHeight / 2)
+	let left = rect.left + scrollX + rect.width + 10
+
+	// Keep popover within viewport bounds
+	top = Math.max(scrollY + 10, Math.min(top, innerHeight + scrollY - popoverHeight - 10))
+
+	// If it would go off right side, position to the left instead
+	if (left + popoverWidth > innerWidth + scrollX) {
+		left = rect.left + scrollX - popoverWidth - 10
+	}
+
+	// If it would go off left side, place it to the right
+	if (left < scrollX) {
+		left = rect.right + scrollX + 10
+	}
+
+	return { top, left, width: popoverWidth, height: popoverHeight }
+}
+
+/**
+ * Opens a popover for a calendar event
+ */
+export function openPopover(
+	event: CalendarEvent,
+	e: MouseEvent,
+	state: PopoverState,
+	hasEventContentSlot: boolean,
+	emitEventClick: (event: CalendarEvent) => void
+) {
+	// Don't open if no slot provided
+	if (!hasEventContentSlot) {
+		emitEventClick(event)
+		return
+	}
+
+	// Set active event and calculate position
+	state.activeEvent.value = event
+	state.popoverPosition.value = calculatePopoverPosition(e.currentTarget as HTMLElement)
+	state.showPopover.value = true
+}
+
+/**
+ * Closes the popover
+ */
+export function closePopover(state: PopoverState) {
+	state.showPopover.value = false
+	state.activeEvent.value = null
+}