@bagelink/vue 0.0.1218 → 0.0.1224

package/src/components/Calendar/components/month/AgendaEventTile.vue

@@ -0,0 +1,128 @@
+<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, onMounted } from 'vue'
+import { DATE_TIME_STRING_PATTERN, EVENT_COLORS } from '../../constants'
+
+const props = defineProps({
+	time: {
+		type: Object as PropType<Time>,
+		required: true,
+	},
+	calendarEvent: {
+		type: Object as PropType<EventInterface>,
+		required: true,
+	},
+	config: {
+		type: Object as PropType<ConfigInterface>,
+		required: true,
+	},
+})
+
+const emit = defineEmits(['eventWasClicked'])
+
+const icons = {
+	clock: 'clock',
+	user: 'user',
+	description: 'comment',
+	trash: 'delete',
+	edit: 'pen-to-square',
+	times: 'close',
+	topic: 'question-circle',
+	location: 'location_on',
+}
+
+const colors = EVENT_COLORS as { [key: string]: string }
+const eventBackgroundColor = ref('')
+const eventColor = ref('#fff')
+const eventIdPrefix = 'agenda__event-'
+
+const eventTime = computed(() => {
+	return DATE_TIME_STRING_PATTERN.test(props.calendarEvent.time.start)
+		? props.time.getLocalizedTimeRange(
+			props.calendarEvent.time.start,
+			props.calendarEvent.time.end
+		)
+		: null
+})
+
+const elementId = computed(() => {
+	return eventIdPrefix + props.calendarEvent.id
+})
+
+function setColors() {
+	if (
+		props.calendarEvent.colorScheme
+		&& props.config.style?.colorSchemes
+		&& props.config.style.colorSchemes[props.calendarEvent.colorScheme]
+	) {
+		eventColor.value = props.config.style.colorSchemes[props.calendarEvent.colorScheme].color
+		eventBackgroundColor.value = props.config.style.colorSchemes[props.calendarEvent.colorScheme].backgroundColor
+		return
+	}
+
+	if (props.calendarEvent.color) {
+		eventBackgroundColor.value = colors[props.calendarEvent.color]
+		return
+	}
+
+	eventBackgroundColor.value = colors.blue
+}
+
+function handleClickOnEvent() {
+	const eventElement = document.getElementById(elementId.value)
+	emit('eventWasClicked', {
+		clickedEvent: props.calendarEvent,
+		eventElement,
+	})
+}
+
+onMounted(() => {
+	setColors()
+})
+</script>
+
+<template>
+	<div
+		:id="elementId"
+		class="agenda__event is-event rounded mb-05 pointer user-select-none p-1 flex column align-items-start"
+		@click.prevent="handleClickOnEvent"
+	>
+		<span
+			v-if="eventTime && !calendarEvent.originalEvent"
+			class="agenda__event-time"
+		>
+			<Icon :icon="icons.clock" />
+			{{ eventTime }}
+		</span>
+
+		<span class="agenda__event-title">
+			{{ calendarEvent.title }}
+		</span>
+		<span
+			v-if="calendarEvent.with"
+			class="agenda__event-with"
+		>
+			<Icon :icon="icons.user" />
+			{{ calendarEvent.with }}
+		</span>
+
+		<span
+			v-if="calendarEvent.location"
+			class="agenda__event-location"
+		>
+			<Icon :icon="icons.location" />
+			{{ calendarEvent.location }}
+		</span>
+	</div>
+</template>
+
+<style scoped>
+.agenda__event {
+	background-color: v-bind(eventBackgroundColor);
+	color: v-bind(eventColor);
+}
+</style>

package/src/components/Calendar/components/month/AgendaEvents.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type Time from '../../helpers/Time'
+import type { ConfigInterface } from '../../typings/config.interface'
+import type { DayInterface } from '../../typings/interfaces/day.interface'
+import { getLanguage, languageKeys } from '../../language'
+import AgendaEventTile from './AgendaEventTile.vue'
+
+const props = defineProps({
+	config: {
+		type: Object as PropType<ConfigInterface>,
+		required: true,
+	},
+	time: {
+		type: Object as PropType<Time>,
+		required: true,
+	},
+	day: {
+		type: Object as PropType<DayInterface>,
+		required: true,
+	},
+})
+
+const emit = defineEmits(['eventWasClicked'])
+</script>
+
+<template>
+	<div class="agenda__wrapper flex align-items-start gap-1">
+		<header class="">
+			<div class="agenda__header-day-name txt-center">
+				{{ day.dayName }}
+			</div>
+			<div class="agenda__header-date flex justify-content-center rounded p-025 txt24 line-height-04">
+				<!--        Here we want to display leading zero for days 1-9, in order to prevent layout shifts -->
+				{{ day.dateTimeString.substring(8, 10) }}
+			</div>
+		</header>
+		<div class="agenda__content flex column w-100p h-100p min-h-100px pt-05">
+			<div
+				v-if="day.events.length === 0"
+				class="align-items-center flex justify-content-center h-100p"
+			>
+				{{ getLanguage(languageKeys.noEvent, time.CALENDAR_LOCALE) }}
+			</div>
+			<div
+				v-else
+				class="w-100p"
+			>
+				<AgendaEventTile
+					v-for="dayEvent of day.events"
+					:key="`agenda_event_${dayEvent.id}`"
+					:day="day"
+					:config="config"
+					:calendar-event="dayEvent"
+					:time="time"
+					@event-was-clicked="emit('eventWasClicked', $event)"
+				/>
+			</div>
+		</div>
+	</div>
+</template>

package/src/components/Calendar/components/month/Day.vue

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type Time from '../../helpers/Time'
+import type { ConfigInterface } from '../../typings/config.interface'
+import type { DayInterface } from '../../typings/interfaces/day.interface'
+import type { EventInterface } from '../../typings/interfaces/event.interface'
+import { ref, computed } from 'vue'
+import { getLanguage } from '../../language'
+import { languageKeys } from '../../language/keys'
+import Event from './Event.vue'
+
+const props = defineProps({
+	config: {
+		type: Object as PropType<ConfigInterface>,
+		required: true,
+	},
+	time: {
+		type: Object as PropType<Time>,
+		required: true,
+	},
+	day: {
+		type: Object as PropType<DayInterface>,
+		required: true,
+	},
+	isSelected: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+const emit = defineEmits<{
+	(e: 'eventWasClicked', event: EventInterface): void
+	(e: 'eventWasDragged', event: EventInterface): void
+	(e: 'updatedPeriod', period: { start: Date, end: Date, selectedDate: Date }): void
+	(e: 'dateWasClicked', date: string): void
+	(e: 'dayWasSelected', day: DayInterface): void
+}>()
+
+const isActiveDroppable = ref(false)
+
+const canBeDropped = computed(() => isActiveDroppable.value)
+
+const hideLeadingAndTrailingDate = computed(() => props.day.isTrailingOrLeadingDate === true && props.config.month?.showTrailingAndLeadingDates === false
+)
+
+const isToday = computed(() => {
+	const { year, month, date } = props.time.getAllVariablesFromDateTimeString(props.day.dateTimeString)
+	return props.time.dateIsToday(new Date(year, month, date))
+})
+
+function getMoreEvents() {
+	const { date, month, year } = props.time.getAllVariablesFromDateTimeString(props.day.dateTimeString)
+	const selectedDate = new Date(year, month, date)
+	const week = props.time.getCalendarWeekDateObjects(selectedDate)
+	const start = week[0]
+	const end = week[6]
+	emit('updatedPeriod', { start, end, selectedDate })
+}
+
+function handleDragLeave() {
+	isActiveDroppable.value = false
+}
+
+function handleDragEnd(mouseEvent: DragEvent) {
+	isActiveDroppable.value = false
+	mouseEvent.stopPropagation()
+}
+
+function handleDrop(dropEvent: DragEvent) {
+	isActiveDroppable.value = false
+	dropEvent.stopPropagation()
+
+	if (!dropEvent || !dropEvent.dataTransfer) return
+
+	const calendarEvent: EventInterface = JSON.parse(dropEvent.dataTransfer.getData('json'))
+	const eventDroppedOnSameDay = props.time.dateStringsHaveEqualDates(
+		calendarEvent.time.start,
+		props.time.dateStringFrom(props.day.dateTimeString),
+	)
+	if (eventDroppedOnSameDay) return
+
+	calendarEvent.time.start = calendarEvent.time.start.replace(
+		/^\d{4}-\d{2}-\d{2}/,
+		props.time.dateStringFrom(props.day.dateTimeString)
+	)
+	calendarEvent.time.end = calendarEvent.time.end.replace(
+		/^\d{4}-\d{2}-\d{2}/,
+		props.time.dateStringFrom(props.day.dateTimeString)
+	)
+	emit('eventWasDragged', calendarEvent)
+}
+
+function handleDragOver(e: DragEvent) {
+	isActiveDroppable.value = true
+	e.preventDefault()
+	return false
+}
+
+function emitDayWasClicked() {
+	emit('dateWasClicked', props.time.dateStringFrom(props.day.dateTimeString))
+	if (props.config.isSmall) emit('dayWasSelected', props.day)
+}
+</script>
+
+<template>
+	<div
+		v-if="!hideLeadingAndTrailingDate"
+		:id="`day-${time.dateStringFrom(day.dateTimeString)}`"
+		class="calendar-month__weekday"
+		:class="{
+			'is-droppable': canBeDropped,
+			'color-gray': day.isTrailingOrLeadingDate,
+			'is-selected': isSelected,
+			'is-today': isToday,
+		}"
+		@click.self="emitDayWasClicked"
+		@dragleave="handleDragLeave"
+		@dragover="handleDragOver"
+		@drop="handleDrop"
+		@dragend="handleDragEnd"
+	>
+		<slot
+			name="dayCell"
+			:day-data="day"
+		>
+			<div class="w-100p flex justify-content-end txt14 p-025 m_h-100p">
+				<p
+					class="calendar-month__day-date ms-auto flex aspect-ratio-1 w-30px h-30px justify-content-center m_mx-auto "
+					@click="emitDayWasClicked"
+				>
+					{{ day.dateTimeString.substring(8, 10).startsWith('0') ? day.dateTimeString.substring(9, 10) : day.dateTimeString.substring(8, 10) }}
+				</p>
+			</div>
+
+			<div class="calendar-month_events">
+				<template
+					v-for="(calendarEvent, index) in day.events"
+					:key="index"
+				>
+					<Event
+						v-if="index < 3"
+						:key="calendarEvent.id"
+						:calendar-event="calendarEvent"
+						:config="config"
+						:time="time"
+						:day="day"
+						@eventWasClicked="$event => emit('eventWasClicked', $event.clickedEvent)"
+					>
+						<template #monthEvent="p">
+							<slot
+								:event-data="p.eventData"
+								name="monthEvent"
+							/>
+						</template>
+					</Event>
+				</template>
+				<div
+					v-if="day.events.length >= 4"
+					class="calendar-month__weekday-more"
+					@click="getMoreEvents"
+				>
+					{{ getLanguage(languageKeys.moreEvents, time.CALENDAR_LOCALE) }}
+				</div>
+			</div>
+		</slot>
+	</div>
+
+	<div
+		v-else
+		class="space-reserver"
+	/>
+</template>
+
+<style scoped>
+.calendar-month__weekday {
+  height: 100%;
+  flex: 1;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  border-right: var(--qalendar-border-gray-thin);
+  border-bottom: var(--qalendar-border-gray-thin);
+  overflow: hidden;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.calendar-month__weekday.is-droppable {
+  background-color: var(--qalendar-light-gray);
+}
+
+.calendar-month__weekday:last-child {
+  border-right: 0;
+}
+
+.calendar-month__weekday.is-selected {
+  box-shadow: inset 0 0 0 1px var(--bgl-primary);
+}
+
+.calendar-month__weekday-more {
+  font-size: var(--qalendar-font-2xs);
+  width: 100%;
+  padding-left: 4px;
+  color: var(--qalendar-gray-quite-dark);
+  cursor: pointer;
+}
+
+.calendar-month_events {
+  width: 100%;
+}
+
+.qalendar-is-small .calendar-month_events {
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
+}
+
+.qalendar-is-small .calendar-month_events .calendar-month__weekday-more {
+  display: none;
+}
+
+.calendar-month__weekday.is-today .calendar-month__day-date {
+  background-color: var(--bgl-primary);
+  color: #fff;
+  border-radius: 50%;
+  padding: 4px 6px;
+}
+
+.qalendar-is-small .calendar-month__weekday.is-today .calendar-month__day-date {
+  padding: 2px 4px;
+}
+
+.space-reserver {
+  height: 100%;
+  flex: 1;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  border-right: var(--qalendar-border-gray-thin);
+  border-bottom: var(--qalendar-border-gray-thin);
+  border-right-color: transparent;
+}
+
+.space-reserver + .calendar-month__weekday:not(.trailing-or-leading) {
+  border-left: var(--qalendar-border-gray-thin);
+}
+
+@media (prefers-color-scheme: dark) {
+  .calendar-month__weekday,
+  .space-reserver {
+    border-color: var(--qalendar-dark-mode-line-color);
+  }
+}
+</style>

package/src/components/Calendar/components/month/Event.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type Time from '../../helpers/Time'
+import type { ConfigInterface } from '../../typings/config.interface'
+import type { DayInterface } from '../../typings/interfaces/day.interface'
+import type { EventInterface } from '../../typings/interfaces/event.interface'
+import { computed, ref, onMounted } from 'vue'
+import { DATE_TIME_STRING_PATTERN, EVENT_COLORS } from '../../constants'
+
+const props = defineProps({
+	time: {
+		type: Object as PropType<Time>,
+		required: true,
+	},
+	calendarEvent: {
+		type: Object as PropType<EventInterface>,
+		required: true,
+	},
+	config: {
+		type: Object as PropType<ConfigInterface>,
+		required: true,
+	},
+	day: {
+		type: Object as PropType<DayInterface>,
+		required: true,
+	},
+})
+
+const emit = defineEmits<{
+	(e: 'eventWasClicked', payload: { clickedEvent: EventInterface, eventElement: HTMLElement | null }): void
+}>()
+
+const colors = ref(EVENT_COLORS as { [key: string]: string })
+const eventBackgroundColor = ref('')
+const eventIdPrefix = 'calendar-month__event-'
+
+const isCustomEvent = computed(() => {
+	if (Array.isArray(props.calendarEvent.isCustom)) {
+		return props.calendarEvent.isCustom.includes('month')
+	}
+	return props.calendarEvent.isCustom || false
+})
+
+const eventTimeStart = computed(() => {
+	return DATE_TIME_STRING_PATTERN.test(props.calendarEvent.time.start)
+		? props.time.getLocalizedTime(props.calendarEvent.time.start)
+		: null
+})
+
+const elementId = computed(() => eventIdPrefix + props.calendarEvent.id + props.time.dateStringFrom(props.day.dateTimeString))
+
+const elementDraggableAttribute = computed(() => {
+	const {
+		year: startYear,
+		month: startMonth,
+		date: startDate,
+	} = props.time.getAllVariablesFromDateTimeString(props.calendarEvent.time.start)
+
+	const {
+		year: endYear,
+		month: endMonth,
+		date: endDate,
+	} = props.time.getAllVariablesFromDateTimeString(props.calendarEvent.time.end)
+
+	const eventIsSingleDay = startYear === endYear && startMonth === endMonth && startDate === endDate
+	const dragAndDropIsDisabled = props.calendarEvent.disableDnD && props.calendarEvent.disableDnD.includes('month')
+
+	return props.calendarEvent.isEditable && eventIsSingleDay && !dragAndDropIsDisabled ? true : undefined
+})
+
+function setColors() {
+	if (
+		props.calendarEvent.colorScheme
+		&& props.config.style?.colorSchemes
+		&& props.config.style.colorSchemes[props.calendarEvent.colorScheme]
+	) {
+		return (eventBackgroundColor.value = props.config.style.colorSchemes[props.calendarEvent.colorScheme].backgroundColor)
+	}
+
+	if (props.calendarEvent.color) {
+		return (eventBackgroundColor.value = colors.value[props.calendarEvent.color])
+	}
+
+	return (eventBackgroundColor.value = colors.value.blue)
+}
+
+function handleClickOnEvent() {
+	const eventElement = document.getElementById(elementId.value)
+	emit('eventWasClicked', {
+		clickedEvent: props.calendarEvent,
+		eventElement,
+	})
+}
+
+function handleDragStart(dragEvent: DragEvent) {
+	if (!dragEvent || !dragEvent.dataTransfer) return
+	dragEvent.dataTransfer.effectAllowed = 'move'
+	dragEvent.dataTransfer.setData('json', JSON.stringify(props.calendarEvent))
+}
+
+onMounted(() => {
+	setColors()
+})
+</script>
+
+<template>
+	<div
+		v-if="config.isSmall"
+		class="calendar-month__event"
+	/>
+
+	<template v-else>
+		<div
+			v-if="isCustomEvent"
+			:id="elementId"
+			class="is-event"
+			data-ref="custom-event"
+			:class="{ grab: elementDraggableAttribute }"
+			:draggable="elementDraggableAttribute"
+			@dragstart="handleDragStart"
+			@click="handleClickOnEvent"
+		>
+			<slot
+				name="monthEvent"
+				:event-data="calendarEvent"
+			/>
+		</div>
+
+		<div
+			v-else
+			:id="elementId"
+			data-ref="default-event"
+			class="calendar-month__event hover is-event flex align-items-center overflow-hidden radius-05 txt10 px-025 pointer user-select-none gap-025 bg-white"
+			:class="{ 'is-draggable': elementDraggableAttribute }"
+			:draggable="elementDraggableAttribute"
+			@dragstart="handleDragStart"
+			@click="handleClickOnEvent"
+		>
+			<span class="calendar-month__event-color round flex-shrink-0" />
+
+			<span
+				v-if="eventTimeStart && !calendarEvent.originalEvent"
+				class="calendar-month__event-time opacity-6 flex-shrink-0"
+			>
+				{{ eventTimeStart }}
+			</span>
+			<span class="calendar-month__event-title1  white-space ellipsis ">
+				{{ calendarEvent.title }}
+			</span>
+		</div>
+	</template>
+</template>
+
+<style scoped>
+.calendar-month__event:active {
+    z-index: 100;
+}
+
+.calendar-month__event .calendar-month__event-color {
+    background-color: v-bind(eventBackgroundColor);
+    width: 6px;
+    height: 6px;
+}
+</style>