@bagelink/vue 1.2.15 → 1.2.20

package/src/components/calendar/components/partials/EventFlyout.vue

@@ -1,430 +0,0 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-import type Time from '../../helpers/Time'
-import type { ConfigInterface } from '../../typings/config.interface'
-import type { EventInterface } from '../../typings/interfaces/event.interface'
-import { Icon } from '@bagelink/vue'
-import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
-import { EVENT_COLORS } from '../../constants'
-import EventFlyoutPosition, { EVENT_FLYOUT_WIDTH } from '../../helpers/EventFlyoutPosition'
-import Helpers from '../../helpers/Helpers'
-
-const props = defineProps({
-	calendarEventProp: {
-		type: Object as PropType<EventInterface | null>,
-		default: () => ({}),
-	},
-	eventElement: {
-		type: Object as PropType<HTMLElement | any>,
-		default: null,
-	},
-	time: {
-		type: Object as PropType<Time>,
-		required: true,
-	},
-	config: {
-		type: Object as PropType<ConfigInterface>,
-		required: true,
-	},
-})
-
-const emit = defineEmits(['hide', 'editEvent', 'deleteEvent'])
-
-const eventFlyoutPositionHelper = new EventFlyoutPosition()
-
-const isVisible = ref(false)
-const top = ref<number | null>(0)
-const insetInlineEnd = ref<number | null>(0)
-const calendarEvent = ref(props.calendarEventProp)
-const flyoutWidth = `${EVENT_FLYOUT_WIDTH}px`
-const colors = EVENT_COLORS
-
-const icons = {
-	clock: 'clock',
-	user: 'user',
-	description: 'comment',
-	trash: 'delete',
-	edit: 'edit',
-	times: 'close',
-	topic: 'help',
-	location: 'location_on',
-}
-
-const getEventTime = computed(() => {
-	if (!calendarEvent.value || !calendarEvent.value.time) return null
-
-	const eventType = Helpers.getEventType(calendarEvent.value, props.time)
-
-	if (['MULTI_DAY_TIMED'].includes(eventType)) {
-		const startLocalizedString = `${getDateFromDateString(
-			calendarEvent.value.time.start
-		)} ${props.time.getLocalizedTime(calendarEvent.value.time.start)}`
-		const endLocalizedString = `${getDateFromDateString(
-			calendarEvent.value.time.end
-		)} ${props.time.getLocalizedTime(calendarEvent.value.time.end)}`
-
-		return `${startLocalizedString} - ${endLocalizedString}`
-	}
-
-	if (['SINGLE_DAY_FULL_DAY', 'MULTI_DAY_FULL_DAY'].includes(eventType)) {
-		const startDate = getDateFromDateString(calendarEvent.value.time.start)
-		const endDate = getDateFromDateString(calendarEvent.value.time.end)
-
-		if (startDate === endDate) return startDate
-
-		return `${startDate} - ${endDate}`
-	}
-
-	const dateString = getDateFromDateString(calendarEvent.value.time.start)
-	const timeString = props.time.getLocalizedTimeRange(
-		calendarEvent.value.time.start,
-		calendarEvent.value.time.end
-	)
-
-	return `${dateString} ⋅ ${timeString}`
-})
-
-const eventFlyoutInlineStyles = computed(() => {
-	if (typeof top.value === 'number' && !insetInlineEnd.value) {
-		return {
-			top: `${top.value}px`,
-			left: '50%',
-			position: 'fixed' as const,
-			transform: 'translateX(-50%)',
-		}
-	}
-
-	return {
-		top: `${top.value}px`,
-		insetInlineEnd: `${insetInlineEnd.value}px`,
-		position: 'fixed' as const,
-	}
-})
-
-const isEditable = computed(() => props.calendarEventProp?.isEditable || false)
-
-const eventBackgroundColor = computed(() => {
-	if (
-		calendarEvent.value?.colorScheme
-		&& props.config.style?.colorSchemes
-		&& props.config.style.colorSchemes[calendarEvent.value.colorScheme]
-	) {
-		return props.config.style.colorSchemes[calendarEvent.value.colorScheme]
-			.backgroundColor
-	}
-
-	return colors[calendarEvent.value?.color || 'blue']
-})
-
-function setFlyoutPosition() {
-	const calendar = props.eventElement?.closest('.calendar-root')
-	const flyout = document.querySelector('.event-flyout')
-
-	if (!props.eventElement) return
-
-	const flyoutPosition = eventFlyoutPositionHelper.calculateFlyoutPosition(
-		props.eventElement?.getBoundingClientRect(),
-		{
-			height: flyout?.clientHeight || 300,
-			width: flyout?.clientWidth || 0,
-		},
-		calendar ? calendar.getBoundingClientRect() : null
-	)
-
-	top.value = typeof flyoutPosition?.top === 'number' ? flyoutPosition.top : null
-	insetInlineEnd.value = typeof flyoutPosition?.left === 'number' ? flyoutPosition.left : null
-}
-
-function editEvent() {
-	emit('editEvent', calendarEvent.value?.id)
-	closeFlyout()
-}
-
-function deleteEvent() {
-	emit('deleteEvent', calendarEvent.value?.id)
-	closeFlyout()
-}
-
-function closeFlyout() {
-	isVisible.value = false
-
-	setTimeout(() => {
-		emit('hide')
-	}, 100)
-}
-
-function getDateFromDateString(dateString: string) {
-	const { year, month, date } = props.time.getAllVariablesFromDateTimeString(dateString)
-
-	return new Date(year, month, date).toLocaleDateString(
-		props.time.CALENDAR_LOCALE,
-		{
-			year: 'numeric',
-			month: 'long',
-			day: 'numeric',
-		}
-	)
-}
-
-function closeFlyoutOnClickOutside(e: any) {
-	const flyout = document.querySelector('.event-flyout')
-	if (!flyout || !isVisible.value) return
-
-	const isClickOutside = !flyout.contains(e.target)
-	const isClickOnEvent = !!e.target.closest('.is-event')
-	const closeOnClickOutside = props.config.eventDialog?.closeOnClickOutside ?? true
-
-	if (isVisible.value && isClickOutside && !isClickOnEvent && closeOnClickOutside) {
-		closeFlyout()
-	}
-}
-
-// Watch for changes
-watch(
-	() => props.calendarEventProp,
-	(value) => {
-		setTimeout(() => {
-			calendarEvent.value = value
-			isVisible.value = !!value
-			nextTick(() => { setFlyoutPosition() })
-		}, 10)
-	},
-	{ deep: true }
-)
-
-// Lifecycle hooks
-onMounted(() => {
-	document.addEventListener('click', closeFlyoutOnClickOutside)
-})
-
-onBeforeUnmount(() => {
-	document.removeEventListener('click', closeFlyoutOnClickOutside)
-})
-</script>
-
-<template>
-	<div
-		class="event-flyout p-05 bg-white"
-		:class="{ 'is-visible': isVisible, 'is-not-editable': !isEditable }"
-		:style="eventFlyoutInlineStyles"
-	>
-		<div
-			v-if="!config.eventDialog || !config.eventDialog.isCustom"
-			class="event-flyout__relative-wrapper"
-		>
-			<div class="event-flyout__menu">
-				<span
-					v-if="isEditable"
-					class="event-flyout__menu-editable"
-				>
-					<Icon
-						class="event-flyout__menu-item is-edit-icon"
-						:icon="icons.edit"
-						@click="editEvent"
-					/>
-
-					<Icon
-						class="event-flyout__menu-item is-trash-icon"
-						:icon="icons.trash"
-						@click="deleteEvent"
-					/>
-				</span>
-
-				<span class="event-flyout__menu-close">
-					<Icon
-						class="event-flyout__menu-item is-times-icon"
-						:icon="icons.times"
-						@click="closeFlyout"
-					/>
-				</span>
-			</div>
-
-			<div
-				v-if="calendarEvent"
-				class="event-flyout__info-wrapper"
-			>
-				<div
-					v-if="calendarEvent.title"
-					class="event-flyout__row is-title"
-				>
-					<div
-						class="event-flyout__color-icon"
-						:style="{ backgroundColor: eventBackgroundColor }"
-					/>
-					{{ calendarEvent.title }}
-				</div>
-
-				<div
-					v-if="calendarEvent.time"
-					class="event-flyout__row is-time"
-				>
-					{{ getEventTime }}
-				</div>
-
-				<div
-					v-if="calendarEvent.location"
-					class="event-flyout__row is-location"
-				>
-					<Icon :icon="icons.location" />
-					{{ calendarEvent.location }}
-				</div>
-
-				<div
-					v-if="calendarEvent.with"
-					class="event-flyout__row is-with"
-				>
-					<Icon :icon="icons.user" />
-					{{ calendarEvent.with }}
-				</div>
-
-				<div
-					v-if="calendarEvent.topic"
-					class="event-flyout__row is-topic"
-				>
-					<Icon :icon="icons.topic" />
-					{{ calendarEvent.topic }}
-				</div>
-
-				<div
-					v-if="calendarEvent.description"
-					class="event-flyout__row is-description"
-				>
-					<Icon :icon="icons.description" />
-					<p v-html="calendarEvent.description" />
-				</div>
-			</div>
-		</div>
-
-		<slot
-			v-else
-			:event-dialog-data="calendarEvent"
-			:close-event-dialog="closeFlyout"
-		/>
-	</div>
-</template>
-
-<style>
-.event-flyout {
-	position: fixed;
-	z-index: 50;
-	background-color: #fff;
-	max-height: 100%;
-	width: v-bind(flyoutWidth);
-	max-width: 98%;
-	border: var(--qalendar-border-gray-thin);
-	border-radius: 8px;
-	box-shadow: 0 12px 24px rgb(0 0 0 / 9%), 0 6px 12px rgb(0 0 0 / 18%);
-	overflow: hidden;
-	transition: all 0.2s ease;
-	transition-property: opacity, transform;
-	transform: translateY(-40px);
-	opacity: 0;
-	pointer-events: none;
-}
-
-@media (prefers-color-scheme: dark) {
-	.event-flyout {
-		background-color: var(--qalendar-dark-mode-elevated-surface);
-		border-color: transparent;
-	}
-}
-
-.event-flyout.is-visible {
-	opacity: 1;
-	transform: translateY(0);
-	pointer-events: initial;
-}
-
-.event-flyout__relative-wrapper {
-	position: relative;
-}
-
-.event-flyout__menu {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.event-flyout__menu-editable,
-.event-flyout__menu-close {
-	padding: var(--qalendar-spacing) var(--qalendar-spacing) 0 var(--qalendar-spacing);
-	display: flex;
-	gap: 20px;
-}
-
-.is-not-editable .event-flyout__menu-close {
-	position: absolute;
-	top: 0;
-	inset-inline-end: 0;
-}
-
-.event-flyout__menu-item {
-	font-size: var(--qalendar-font-l);
-	color: gray;
-}
-
-@media (prefers-color-scheme: dark) {
-	.event-flyout__menu-item {
-		color: var(--qalendar-dark-mode-text-hint);
-	}
-}
-
-.event-flyout__menu-item:hover {
-	color: var(--qalendar-theme-color);
-	cursor: pointer;
-}
-
-.is-trash-icon:hover {
-	color: red;
-}
-
-.event-flyout__info-wrapper {
-	padding: var(--qalendar-spacing);
-}
-
-.event-flyout__row {
-	display: flex;
-	gap: var(--qalendar-spacing);
-	margin-bottom: 0.25em;
-	font-weight: 400;
-}
-
-.event-flyout__row p {
-	margin: 0;
-	padding: 0;
-}
-
-.event-flyout__row svg {
-	margin-top: 0.1rem;
-	color: #5f6368;
-	width: 14px;
-}
-
-@media (prefers-color-scheme: dark) {
-	.event-flyout__row svg {
-		color: var(--qalendar-dark-mode-text-hint);
-	}
-}
-
-.event-flyout__color-icon {
-	--icon-height: 16px;
-	border-radius: 50%;
-	height: var(--icon-height);
-	width: var(--icon-height);
-}
-
-.is-title {
-	font-size: 18px;
-	line-height: 1.2;
-	align-items: center;
-}
-
-.is-not-editable .is-title {
-	max-width: 90%;
-}
-
-.is-time {
-	font-size: var(--qalendar-font-s);
-	margin-bottom: 0.75em;
-}
-</style>

package/src/components/calendar/components/week/Day.vue

@@ -1,198 +0,0 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-import type { Interval } from '../../helpers/DayIntervals'
-import type Time from '../../helpers/Time'
-import type { ConfigInterface, DayIntervalsType } from '../../typings/config.interface'
-import type { DayInterface } from '../../typings/interfaces/day.interface'
-import type { EventInterface } from '../../typings/interfaces/event.interface'
-import type { DayInfo, ModeType } from '../../typings/types'
-import { ref, computed, onMounted } from 'vue'
-import DayIntervals from '../../helpers/DayIntervals'
-import EventConcurrency from '../../helpers/EventConcurrency'
-import DayEvent from './DayEvent.vue'
-
-const props = defineProps({
-	day: {
-		type: Object as PropType<DayInterface>,
-		required: true,
-	},
-	time: {
-		type: Object as PropType<Time>,
-		required: true,
-	},
-	config: {
-		type: Object as PropType<ConfigInterface>,
-		required: true,
-	},
-	dayInfo: {
-		type: Object as PropType<DayInfo>,
-		required: true,
-	},
-	mode: {
-		type: String as PropType<ModeType>,
-		required: true,
-	},
-	dayIntervals: {
-		type: Object as PropType<DayIntervalsType>,
-		required: true,
-	},
-	weekHeight: {
-		type: Number,
-		required: true,
-	},
-})
-
-const emit = defineEmits([
-	'eventWasClicked',
-	'eventWasResized',
-	'eventWasDragged',
-	'intervalWasClicked',
-	'dayWasClicked',
-	'datetimeWasClicked',
-	'dragStart',
-	'dragEnd',
-])
-
-const eventConcurrencyHelper = new EventConcurrency()
-
-const events = ref<EventInterface[]>([])
-const intervals = ref<Interval[]>([])
-
-const intervalStyles = computed(() => {
-	return props.config.dayIntervals?.intervalStyles
-		? props.config.dayIntervals.intervalStyles
-		: {}
-})
-
-function calculateEventConcurrency() {
-	events.value = eventConcurrencyHelper.calculateConcurrencyForEvents(
-		props.day.events
-	)
-}
-
-function handleEventWasResized(event: any) {
-	emit('eventWasResized', event)
-	calculateEventConcurrency()
-}
-
-function handleClickOnInterval(payload: Interval) {
-	const { intervalStart, intervalEnd } = payload
-	emit('intervalWasClicked', { intervalStart, intervalEnd })
-}
-
-function setClickableIntervals() {
-	let dayStartTimeString = props.day.dateTimeString
-	if (props.time.DAY_START !== 0) {
-		const { hour: startHour } = props.time.getHourAndMinutesFromTimePoints(props.time.DAY_START)
-		dayStartTimeString = props.time.setSegmentOfDateTimeString(dayStartTimeString, { hour: startHour })
-	}
-
-	intervals.value = new DayIntervals(
-		props.dayIntervals.length || 60,
-		dayStartTimeString,
-		props.time.HOURS_PER_DAY,
-	).getIntervals()
-}
-
-function getDateStringForFlexibleDayBoundaries(dateString: string, timeClickedHHMM: string) {
-	const hourTwoDigits = props.time.doubleDigit(props.time.DAY_START / 100)
-	const dayStartTimeHHMM = `${hourTwoDigits}:00`
-	const isClickOnNextDay = timeClickedHHMM < dayStartTimeHHMM
-
-	if (isClickOnNextDay) {
-		dateString = props.time.dateStringFrom(
-			props.time.addDaysToDateTimeString(1, dateString)
-		)
-	}
-
-	return dateString
-}
-
-function handleClickOnDay(event: MouseEvent) {
-	const timeClicked = props.time.getTimeFromClick(event.offsetY, props.weekHeight)
-	let dateString = props.time.dateStringFrom(props.day.dateTimeString)
-	const isFlexibleDay = props.time.DAY_END <= props.time.DAY_START
-	if (isFlexibleDay) dateString = getDateStringForFlexibleDayBoundaries(dateString, timeClicked)
-	const dateTimeString = `${dateString} ${timeClicked}`
-
-	emit('dayWasClicked', dateString)
-	emit('datetimeWasClicked', dateTimeString)
-}
-
-onMounted(() => {
-	calculateEventConcurrency()
-	if (props.dayIntervals.displayClickableInterval) setClickableIntervals()
-})
-</script>
-
-<template>
-	<div
-		class="calendar-week__day"
-		@click.self="handleClickOnDay"
-	>
-		<DayEvent
-			v-for="(event, eventIndex) in events"
-			:key="eventIndex"
-			data-test="day-event"
-			:event-prop="event"
-			:day="day"
-			:time="time"
-			:config="config"
-			:day-info="dayInfo"
-			:mode="mode"
-			@eventWasClicked="$emit('eventWasClicked', $event)"
-			@eventWasDragged="$emit('eventWasDragged', $event)"
-			@eventWasResized="handleEventWasResized"
-			@dragStart="$emit('dragStart')"
-			@dragEnd="$emit('dragEnd')"
-		>
-			<template #weekDayEvent="p">
-				<slot
-					:event-data="p.eventData"
-					name="weekDayEvent"
-				/>
-			</template>
-		</DayEvent>
-
-		<template v-if="dayIntervals && dayIntervals.displayClickableInterval">
-			<div
-				v-for="(interval, intervalIndex) in intervals"
-				:id="`interval-${intervalIndex}`"
-				:key="interval.intervalStart"
-				class="calendar-week__day-interval"
-				:class="{ 'has-border': interval.hasBorder }"
-				:style="intervalStyles"
-				@click="handleClickOnInterval(interval)"
-			>
-				{{ time.getLocalizedTime(interval.intervalStart) }}
-			</div>
-		</template>
-	</div>
-</template>
-
-<style scoped>
-.calendar-week__day {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-}
-
-.calendar-week__day .calendar-week__day-interval {
-	flex: 1;
-	font-size: var(--qalendar-font-xs);
-	color: var(--qalendar-gray);
-	padding: 2px;
-}
-
-.calendar-week__day:first-child {
-	border-inline-start: 1px solid var(--border-color);
-}
-
-.calendar-week__day {
-	border-inline-end: 1px solid var(--border-color);
-	border-bottom: 1px solid var(--border-color);
-
-}
-</style>