@bagelink/vue 0.0.1216 → 0.0.1220

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

@@ -0,0 +1,271 @@
+<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,
+			'trailing-or-leading': 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"
+		>
+			<span
+				class="calendar-month__day-date"
+				@click="emitDayWasClicked"
+			>
+				{{ day.dateTimeString.substring(8, 10).startsWith('0') ? day.dateTimeString.substring(9, 10) : day.dateTimeString.substring(8, 10) }}
+			</span>
+
+			<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;
+}
+
+.qalendar-is-small .calendar-month__weekday.is-selected {
+  -webkit-box-shadow: inset 0 0 0 3px var(--qalendar-theme-color);
+  -moz-box-shadow: inset 0 0 0 3px var(--qalendar-theme-color);
+  box-shadow: inset 0 0 0 3px var(--qalendar-theme-color);
+  border-radius: 5px;
+}
+
+.qalendar-is-small .calendar-month__weekday {
+  height: 45px;
+  width: 45px;
+  display: flex;
+  flex-flow: column;
+  justify-content: space-around;
+}
+
+.calendar-month__day-date {
+  font-size: var(--qalendar-font-xs);
+  color: var(--qalendar-gray-quite-dark);
+}
+
+.calendar-month__day-date:first-child {
+  margin-top: 6px;
+}
+
+.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(--qalendar-theme-color);
+  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,221 @@
+<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="{ 'is-draggable': 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 is-event"
+			:class="{ 'is-draggable': elementDraggableAttribute }"
+			:draggable="elementDraggableAttribute"
+			@dragstart="handleDragStart"
+			@click="handleClickOnEvent"
+		>
+			<span class="calendar-month__event-color" />
+
+			<span
+				v-if="eventTimeStart && !calendarEvent.originalEvent"
+				class="calendar-month__event-time"
+			>
+				{{ eventTimeStart }}
+			</span>
+
+			<span class="calendar-month__event-title">
+				{{ calendarEvent.title }}
+			</span>
+		</div>
+	</template>
+</template>
+
+<style>
+.calendar-month__event {
+	--event-inline-padding: 4px;
+	display: flex;
+	align-items: center;
+	overflow: hidden;
+	border-radius: 4px;
+	font-size: var(--qalendar-font-2xs);
+	width: calc(100% - (var(--event-inline-padding) * 2));
+	margin-bottom: 4px;
+	padding: 0.25rem var(--event-inline-padding);
+	cursor: pointer;
+	user-select: none;
+}
+
+.calendar-month__event .calendar-month__event-time {
+	margin-right: 6px;
+}
+
+.calendar-month__event .calendar-month__event-time,
+.calendar-month__event .calendar-month__event-title,
+.calendar-month__event .calendar-month__event-color {
+	flex-shrink: 0;
+}
+
+.qalendar-is-small .calendar-month__event .calendar-month__event-time,
+.qalendar-is-small .calendar-month__event .calendar-month__event-title {
+	display: none;
+}
+
+.qalendar-is-small .calendar-month__event {
+	background-color: v-bind(eventBackgroundColor);
+	width: 4px;
+	height: 4px;
+	border-radius: 50%;
+	padding: 1px;
+	margin-right: 1px;
+}
+
+.calendar-month__event.is-draggable {
+	cursor: grab;
+}
+
+.calendar-month__event:active {
+	z-index: 100;
+}
+
+.calendar-month__event:not(.is-draggable):active {
+	cursor: not-allowed;
+}
+
+.calendar-month__event:hover {
+	background-color: var(--qalendar-light-gray);
+}
+
+.calendar-month__event:hover:hover {
+	background-color: var(--qalendar-option-hover);
+}
+
+.calendar-month__event .calendar-month__event-color {
+	background-color: v-bind(eventBackgroundColor);
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	margin-right: 4px;
+}
+</style>