@bagelink/vue 1.2.15 → 1.2.20

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

@@ -1,164 +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 { 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>

package/src/components/calendar/components/month/Month.vue

@@ -1,241 +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 { DayInterface } from '../../typings/interfaces/day.interface'
-import type { EventInterface } from '../../typings/interfaces/event.interface'
-import type { PeriodInterface } from '../../typings/interfaces/period.interface'
-import { ref, onMounted } from 'vue'
-import EDate from '../../helpers/EDate'
-import EventPosition from '../../helpers/EventPosition'
-import Helpers from '../../helpers/Helpers'
-import EventFlyout from '../partials/EventFlyout.vue'
-import AgendaEvents from './AgendaEvents.vue'
-import Day from './Day.vue'
-import WeekDay from './WeekDay.vue'
-
-const props = defineProps({
-	config: {
-		type: Object as PropType<ConfigInterface>,
-		required: true,
-	},
-	time: {
-		type: Object as PropType<Time>,
-		required: true,
-	},
-	period: {
-		type: Object as PropType<PeriodInterface>,
-		required: true,
-	},
-	eventsProp: {
-		type: Array as PropType<EventInterface[]>,
-		default: () => [],
-	},
-})
-
-const emit = defineEmits<{
-	(e: 'editEvent', event: any): void
-	(e: 'deleteEvent', event: any): void
-	(e: 'updatedPeriod', period: any): void
-	(e: 'eventWasClicked', event: any): void
-	(e: 'eventWasDragged', event: any): void
-	(e: 'dateWasClicked', date: any): void
-}>()
-
-const EventPositionHelper = new EventPosition()
-
-const month = ref<DayInterface[][]>([])
-const selectedEvent = ref<EventInterface | null>(null)
-const selectedEventElement = ref<any | null>(null)
-const events = ref(props.eventsProp)
-const fullDayEvents = ref<EventInterface[]>([])
-const selectedDay = ref<DayInterface | null>(null)
-
-function initMonth() {
-	month.value = []
-	sortOutFullDayEvents()
-	setMonth()
-	if (props.config.isSmall) setInitialSelectedDay()
-}
-
-function setMonth() {
-	const { month: currentMonth, fullYear } = new EDate(props.period.selectedDate)
-	const calendarMonth = props.time.getCalendarMonthSplitInWeeks(
-		fullYear,
-		currentMonth
-	)
-
-	const monthWithEvents = calendarMonth.map((week) => {
-		return week.map((day) => {
-			const dateTimeString = props.time.getDateTimeStringFromDate(day)
-			const dayEvents = events.value.filter((event) => {
-				return props.time.dateStringsHaveEqualDates(event.time.start, dateTimeString)
-			})
-
-			return {
-				isTrailingOrLeadingDate: props.time.isTrailingOrLeadingDate(day, currentMonth),
-				dayName: props.time.getLocalizedNameOfWeekday(day),
-				dateTimeString: props.time.getDateTimeStringFromDate(day),
-				events: dayEvents,
-			}
-		})
-	})
-
-	month.value = EventPositionHelper.positionFullDayEventsInMonth(
-		monthWithEvents,
-		fullDayEvents.value
-	)
-}
-
-function sortOutFullDayEvents() {
-	const timedEvents = []
-	const fullDayEventsArray = []
-
-	for (const calendarEvent of events.value) {
-		if (Helpers.getEventType(calendarEvent, props.time) === 'SINGLE_DAY_TIMED') {
-			timedEvents.push(calendarEvent)
-		} else {
-			fullDayEventsArray.push(calendarEvent)
-		}
-	}
-
-	events.value = timedEvents
-	fullDayEvents.value = fullDayEventsArray
-}
-
-function handleClickOnEvent(event: {
-	eventElement: HTMLDivElement
-	clickedEvent: EventInterface
-}) {
-	emit('eventWasClicked', event)
-	selectedEventElement.value = event.eventElement
-	selectedEvent.value = event.clickedEvent
-}
-
-function handleEventWasDragged(calendarEvent: EventInterface) {
-	emit('eventWasDragged', calendarEvent)
-	const newEvents = [...events.value, ...fullDayEvents.value].filter(
-		e => e.id !== calendarEvent.id
-	)
-	newEvents.push(calendarEvent)
-	events.value = []
-	fullDayEvents.value = []
-	events.value = newEvents
-	initMonth()
-}
-
-function setInitialSelectedDay() {
-	const selectedDayDateString = props.time.getDateStringFromDate(props.period.selectedDate)
-	selectedDay.value = month.value.flat().find((day) => {
-		return props.time.dateStringFrom(day.dateTimeString) === selectedDayDateString
-	}) || null
-}
-
-onMounted(() => {
-	initMonth()
-})
-</script>
-
-<template>
-	<div class="calendar-month relative column w-100p h-100p overflow-y flex flex-stretch">
-		<div
-			class="flex space-between"
-		>
-			<WeekDay
-				v-for="(day, dayIndex) in month[0]"
-				:key="dayIndex"
-				class=" txt-center flex-shrink flex-grow"
-				:config="config"
-				:day="day"
-				:time="time"
-			/>
-		</div>
-		<div class="calendar-month__weeks h-100p flex-grow flex flex-stretch column space-between">
-			<div
-				v-for="(week, weekIndex) in month"
-				:key="weekIndex"
-				class="calendar-month__week"
-			>
-				<Day
-					v-for="(day, dayIndex) in week"
-					:key="dayIndex"
-					:config="config"
-					:day="day"
-					:time="time"
-					:is-selected="selectedDay?.dateTimeString === day.dateTimeString"
-					@eventWasDragged="handleEventWasDragged"
-					@dateWasClicked="emit('dateWasClicked', $event)"
-					@dayWasSelected="selectedDay = $event"
-					@updatedPeriod="emit('updatedPeriod', $event)"
-				>
-					<!-- @eventWasClicked="handleClickOnEvent" -->
-					<template #monthEvent="{ eventData }">
-						<slot
-							:event-data="eventData"
-							name="monthEvent"
-						/>
-					</template>
-
-					<template #dayCell="{ dayData }">
-						<slot
-							:day-data="dayData"
-							name="dayCell"
-						/>
-					</template>
-				</Day>
-			</div>
-		</div>
-
-		<div
-			v-if="!(config.month?.showEventsOnMobileView === false)"
-			class="calendar-month__day_events w-100p pt-1 m_pb-1"
-		>
-			<AgendaEvents
-				v-if="selectedDay"
-				:config="config"
-				:time="time"
-				:day="selectedDay"
-				@eventWasClicked="handleClickOnEvent"
-			/>
-		</div>
-
-		<EventFlyout
-			v-if="!config.eventDialog || !config.eventDialog.isDisabled"
-			:calendar-event-prop="selectedEvent"
-			:event-element="selectedEventElement"
-			:time="time"
-			:config="config"
-			@hide="selectedEvent = null"
-			@editEvent="emit('editEvent', $event)"
-			@deleteEvent="emit('deleteEvent', $event)"
-		>
-			<template #default="p">
-				<slot
-					name="eventDialog"
-					:event-dialog-data="p.eventDialogData"
-					:close-event-dialog="p.closeEventDialog"
-				/>
-			</template>
-		</EventFlyout>
-	</div>
-</template>
-
-<style>
-	.calendar-month__week {
-		display: flex;
-		flex: 1;
-	}
-	.calendar-month__week:first-child {
-		border-top: var(--qalendar-border-gray-thin);
-	}
-	.calendar-root.mode-is-month.qalendar-is-small .calendar-month.h-100p{
-		height: auto !important;
-	}
-	.calendar-root.mode-is-month.qalendar-is-small .calendar-month__weeks{
-		display: block !important;
-		height: auto !important;
-	}
-	.calendar-root.mode-is-month.qalendar-is-small .calendar-month__weekday{
-		height: 40px !important;
-	}
-</style>

package/src/components/calendar/components/month/WeekDay.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { DayInterface } from '../../typings/interfaces/day.interface'
-
-defineProps<{
-	day: DayInterface
-}>()
-</script>
-
-<template>
-	<span
-		class="txt12 normal block color-black pb-025"
-	>
-		{{ day.dayName }}
-	</span>
-</template>