@bagelink/vue 1.2.15 → 1.2.18

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

@@ -1,121 +0,0 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-import type { ConfigInterface } from '../../typings/config.interface'
-import type { EventInterface } from '../../typings/interfaces/event.interface'
-import type { ModeType } from '../../typings/types'
-import { computed, onMounted, ref } from 'vue'
-import { EVENT_COLORS } from '../../constants'
-
-interface extendedEventInterface extends EventInterface {
-	nDays: number
-}
-
-const props = defineProps({
-	scheduleEvent: {
-		type: Object as PropType<extendedEventInterface>,
-		default: null,
-	},
-	config: {
-		type: Object as PropType<ConfigInterface>,
-		required: true,
-	},
-	mode: {
-		type: String as PropType<ModeType>,
-		required: true,
-	},
-})
-
-const emit = defineEmits(['eventWasClicked'])
-
-const colors = EVENT_COLORS as { [key: string]: string }
-const eventColor = ref('#fff')
-const eventBackgroundColor = ref('')
-const eventElementIdPrefix = 'week-timeline__event-id-'
-
-const eventWidth = computed(() => {
-	if (props.mode !== 'day')
-		return `calc(${props.scheduleEvent.nDays * 100}%)`
-
-	return 'calc(100%)'
-})
-
-function setColors() {
-	if (
-		props.scheduleEvent.colorScheme
-		&& props.config.style?.colorSchemes
-		&& props.config.style.colorSchemes[props.scheduleEvent.colorScheme]
-	) {
-		eventColor.value = props.config.style.colorSchemes[props.scheduleEvent.colorScheme].color
-		eventBackgroundColor.value = props.config.style.colorSchemes[props.scheduleEvent.colorScheme].backgroundColor
-		return
-	}
-
-	if (props.scheduleEvent.color) {
-		eventColor.value = '#fff'
-		eventBackgroundColor.value = colors[props.scheduleEvent.color]
-		return
-	}
-
-	eventBackgroundColor.value = colors.blue
-}
-
-function handleClickOnEvent() {
-	const eventElement = document.getElementById(
-		eventElementIdPrefix + props.scheduleEvent.id
-	)
-
-	emit('eventWasClicked', {
-		clickedEvent: props.scheduleEvent,
-		eventElement,
-	})
-}
-
-onMounted(() => {
-	setColors()
-})
-</script>
-
-<template>
-	<div
-		v-if="scheduleEvent"
-		:id="`${eventElementIdPrefix}${scheduleEvent.id}`"
-		class="week-timeline__event is-event"
-		:style="{
-			width: eventWidth,
-			color: eventColor,
-			backgroundColor: eventBackgroundColor,
-			zIndex: 1,
-		}"
-		@click="handleClickOnEvent"
-	>
-		{{ scheduleEvent.title }}
-	</div>
-
-	<div
-		v-else
-		class="week-timeline__event"
-	/>
-</template>
-
-<style scoped>
-.week-timeline__event {
-  position: relative;
-  --event-padding: 3px;
-  display: flex;
-  align-items: center;
-  height: 0.9rem;
-  width: calc(100% - var(--event-padding));
-  font-size: var(--qalendar-font-2xs);
-  border-radius: 4px;
-  padding: var(--event-padding);
-  margin-bottom: 0.25em;
-  text-align: start;
-  cursor: pointer;
-  user-select: none;
-  overflow: hidden;
-}
-
-.week-timeline__event:active {
-  cursor: not-allowed;
-}
-</style>

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

@@ -1,414 +0,0 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-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 { FullDayEventsWeek } from '../../typings/interfaces/full-day-events-week.type'
-import type { PeriodInterface } from '../../typings/interfaces/period.interface'
-import type { ModeType } from '../../typings/types'
-import { ref, computed, onMounted, watch, useSlots } from 'vue'
-import EventPosition from '../../helpers/EventPosition'
-import { EventsFilter } from '../../helpers/EventsFilter'
-import Helpers from '../../helpers/Helpers'
-import { WEEK_START_DAY } from '../../helpers/Time'
-import { WeekHelper } from '../../helpers/Week'
-import EventFlyout from '../partials/EventFlyout.vue'
-import Day from './Day.vue'
-import DayTimeline from './DayTimeline.vue'
-import WeekTimeline from './WeekTimeline.vue'
-
-const props = defineProps({
-	config: {
-		type: Object as PropType<ConfigInterface>,
-		required: true,
-	},
-	eventsProp: {
-		type: Array as PropType<EventInterface[]>,
-		default: () => [],
-	},
-	period: {
-		type: Object as PropType<PeriodInterface>,
-		required: true,
-	},
-	modeProp: {
-		type: String as PropType<ModeType>,
-		default: 'week',
-	},
-	time: {
-		type: Object as PropType<Time | any>,
-		required: true,
-	},
-})
-
-const emit = defineEmits([
-	'eventWasClicked',
-	'eventWasResized',
-	'eventWasDragged',
-	'editEvent',
-	'deleteEvent',
-	'intervalWasClicked',
-	'dayWasClicked',
-	'datetimeWasClicked',
-])
-
-const eventPosition = new EventPosition()
-
-const days = ref<DayInterface[]>([])
-const mode = ref<ModeType>(props.modeProp)
-const selectedEvent = ref<EventInterface | null>(null)
-const selectedEventElement = ref<any | null>(null)
-const events = ref<EventInterface[]>(props.eventsProp)
-const fullDayEvents = ref<FullDayEventsWeek>([])
-const weekVersion = ref(0)
-const dayIntervals = ref<DayIntervalsType | any>({
-	length: 60,
-	height: 66,
-})
-const weekHeight = ref('1584px')
-const currentTimePercentage = ref(0)
-const showCurrentTime = ref(!!props.config.showCurrentTime)
-
-const hasCustomCurrentTimeSlot = computed(() => {
-	return Helpers.hasSlotContent(useSlots().customCurrentTime)
-})
-
-const nDays = computed(() => {
-	return props.config.week?.nDays || 7
-})
-
-watch(() => props.period, () => {
-	setInitialEvents(mode.value)
-}, { deep: true })
-
-watch(() => props.modeProp, (value) => {
-	mode.value = value
-	setInitialEvents(value)
-}, { deep: true })
-
-onMounted(() => {
-	setDayIntervals()
-	separateFullDayEventsFromOtherEvents()
-	setInitialEvents(props.modeProp)
-	if (props.config.showCurrentTime || hasCustomCurrentTimeSlot.value) setCurrentTime()
-})
-
-function separateFullDayEventsFromOtherEvents() {
-	const {
-		singleDayTimedEvents,
-		fullDayAndMultipleDayEvents,
-	} = WeekHelper.eventSeparator(events.value, props.time)
-
-	events.value = singleDayTimedEvents
-	positionFullDayEvents(fullDayAndMultipleDayEvents)
-}
-
-function positionFullDayEvents(fullDayAndMultipleDayEvents: EventInterface[]) {
-	const weekEndDate = nDays.value === 5
-		? new Date(
-			props.period.end.getFullYear(),
-			props.period.end.getMonth(),
-			props.period.end.getDate() - 2
-		)
-		: props.period.end
-
-	fullDayEvents.value = fullDayAndMultipleDayEvents.length
-		? eventPosition.positionFullDayEventsInWeek(
-			props.period.start,
-			weekEndDate,
-			fullDayAndMultipleDayEvents
-		)
-		: []
-}
-
-function setDays() {
-	const daysArray = props.time
-		.getCalendarWeekDateObjects(props.period.start)
-		.map((day: Date) => {
-			const dayName = props.time.getLocalizedNameOfWeekday(day, 'long')
-			const dateTimeString = props.time.getDateTimeStringFromDate(
-				day,
-				'start'
-			)
-			const dayEvents = new EventsFilter(events.value).getEventsForDay(props.time, dateTimeString)
-
-			return { dayName, dateTimeString, events: dayEvents }
-		})
-
-	if (nDays.value === 5 && props.time.FIRST_DAY_OF_WEEK === WEEK_START_DAY.MONDAY) {
-		// Delete Saturday & Sunday
-		daysArray.splice(5, 2)
-		fullDayEvents.value.splice(5, 2)
-	} else if (nDays.value === 5 && props.time.FIRST_DAY_OF_WEEK === WEEK_START_DAY.SUNDAY) {
-		// First delete Saturday, then Sunday
-		daysArray.splice(6, 1)
-		fullDayEvents.value.splice(6, 1)
-		daysArray.splice(0, 1)
-		fullDayEvents.value.splice(0, 1)
-	}
-
-	days.value = daysArray
-}
-
-function mergeFullDayEventsIntoDays() {
-	for (const [dayIndex] of days.value.entries()) {
-		days.value[dayIndex].fullDayEvents = fullDayEvents.value[dayIndex]
-	}
-}
-
-function setDay() {
-	const dayDateTimeString = props.time.getDateTimeStringFromDate(
-		props.period.selectedDate
-	)
-	// 1. Set the timed events
-	days.value = [
-		{
-			dayName: new Date(props.period.selectedDate).toLocaleDateString(
-				props.time.CALENDAR_LOCALE,
-				{ weekday: 'long' }
-			),
-			dateTimeString: props.time.getDateTimeStringFromDate(
-				props.period.selectedDate,
-				'start'
-			),
-			events: new EventsFilter(events.value).getEventsForDay(props.time, dayDateTimeString),
-		},
-	]
-
-	if (!fullDayEvents.value.length) return
-
-	// 2. Set full day events
-	for (const day of fullDayEvents.value) {
-		const dayDateString = props.time.getDateTimeStringFromDate(day.date)
-		if (dayDateString.substring(0, 11) === dayDateTimeString.substring(0, 11)) {
-			fullDayEvents.value = [day]
-			return
-		}
-	}
-}
-
-function setInitialEvents(currentMode: ModeType) {
-	if (currentMode === 'day') setDay()
-	if (currentMode === 'week') setDays()
-
-	mergeFullDayEventsIntoDays()
-}
-
-function handleClickOnEvent(event: {
-	eventElement: HTMLDivElement
-	clickedEvent: EventInterface
-}) {
-	emit('eventWasClicked', event)
-
-	selectedEventElement.value = event.eventElement
-	selectedEvent.value = event.clickedEvent
-}
-
-function handleEventWasDragged(event: EventInterface) {
-	const cleanedUpEvent = event
-	// Reset all properties of the event, that need be calculated anew
-	delete cleanedUpEvent.totalConcurrentEvents
-	delete cleanedUpEvent.nOfPreviousConcurrentEvents
-
-	const filteredEvents = events.value.filter(e => e.id !== event.id)
-	events.value = [
-		cleanedUpEvent,
-		...filteredEvents.map((e) => {
-			// Reset all properties of each event, that need be calculated anew
-			delete e.nOfPreviousConcurrentEvents
-			delete e.totalConcurrentEvents
-
-			return e
-		}),
-	]
-	setInitialEvents(mode.value)
-	weekVersion.value = weekVersion.value + 1
-	emit('eventWasDragged', event)
-}
-
-function setDayIntervals() {
-	if (props.config.dayIntervals) {
-		for (const [key, value] of Object.entries(props.config.dayIntervals)) {
-			dayIntervals.value[key] = value
-		}
-	}
-
-	setWeekHeightBasedOnIntervals()
-}
-
-function setWeekHeightBasedOnIntervals() {
-	// 1. Catch faulty configurations
-	if (![15, 30, 60].includes(dayIntervals.value.length)) {
-		dayIntervals.value.length = 60
-		dayIntervals.value.height = 66
-		console.warn(
-			'The dayIntervals configuration is faulty. It has been reset to default values.'
-		)
-	}
-
-	// 2. Set a multiplier, for getting length of an hour based on the interval length
-	let intervalMultiplier = 1
-	if (dayIntervals.value.length === 15) intervalMultiplier = 4
-	if (dayIntervals.value.length === 30) intervalMultiplier = 2
-
-	// 3. Set height of the week based on the number and length of intervals
-	weekHeight.value = `${dayIntervals.value.height * intervalMultiplier * props.time.HOURS_PER_DAY}px`
-}
-
-function setCurrentTime() {
-	const setTime = () => {
-		const nowString = props.time.getDateTimeStringFromDate(new Date())
-		const currentTimePercentage = props.time.getPercentageOfDayFromDateTimeString(
-			nowString,
-			props.time.DAY_START,
-			props.time.DAY_END
-		)
-
-		if (currentTimePercentage < 0 || currentTimePercentage > 100) {
-			showCurrentTime.value = false
-			return
-		}
-
-		showCurrentTime.value = true
-		currentTimePercentage.value = currentTimePercentage
-	}
-	setTime()
-	setInterval(() => { setTime() }, 60000)
-}
-</script>
-
-<template>
-	<WeekTimeline
-		:days="days"
-		:time="time"
-		:full-day-events="fullDayEvents"
-		:config="config"
-		:mode="mode"
-		@event-was-clicked="handleClickOnEvent"
-		@day-was-clicked="$emit('dayWasClicked', $event)"
-	/>
-
-	<div class="calendar-week__wrapper relative ps-3-5">
-		<EventFlyout
-			v-if="!config.eventDialog || !config.eventDialog.isDisabled"
-			:calendar-event-prop="selectedEvent"
-			:event-element="selectedEventElement"
-			:time="time"
-			:config="config"
-			@hide="selectedEvent = null"
-			@edit-event="$emit('editEvent', $event)"
-			@delete-event="$emit('deleteEvent', $event)"
-		>
-			<template #default="p">
-				<slot
-					name="eventDialog"
-					:event-dialog-data="p.eventDialogData"
-					:close-event-dialog="p.closeEventDialog"
-				/>
-			</template>
-		</EventFlyout>
-
-		<section class="calendar-week">
-			<div
-				v-if="hasCustomCurrentTimeSlot && showCurrentTime"
-				class="custom-current-time"
-				:style="{ top: `${currentTimePercentage}%` }"
-			>
-				<slot name="customCurrentTime" />
-			</div>
-
-			<div
-				v-else-if="config && config.showCurrentTime && showCurrentTime"
-				class="current-time-line"
-				:style="{ top: `${currentTimePercentage}%` }"
-			>
-				<div class="current-time-line__circle" />
-			</div>
-
-			<DayTimeline
-				:key="period.start.getTime() + period.end.getTime() + mode"
-				:time="time"
-				:day-intervals="dayIntervals"
-				:week-height="weekHeight"
-			/>
-
-			<div class="calendar-week__events">
-				<Day
-					v-for="(day, dayIndex) in days"
-					:key="day.dateTimeString + mode + weekVersion"
-					:day="day"
-					:time="time"
-					:config="config"
-					:day-info="{ daysTotalN: days.length, thisDayIndex: dayIndex, dateTimeString: day.dateTimeString }"
-					:mode="mode"
-					:day-intervals="dayIntervals"
-					:week-height="+weekHeight.replace('px', '')"
-					@event-was-clicked="handleClickOnEvent"
-					@event-was-resized="$emit('eventWasResized', $event)"
-					@event-was-dragged="handleEventWasDragged"
-					@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>
-				</Day>
-			</div>
-		</section>
-	</div>
-</template>
-
-<style scoped>
-.calendar-week__wrapper {
-	position: relative;
-	padding-inline-start: var(--qalendar-week-padding-left);
-	overflow-y: auto;
-}
-
-.calendar-week {
-	position: relative;
-	width: 100%;
-	flex: 1 1 auto;
-}
-
-.calendar-week__events {
-	display: flex;
-	width: 100%;
-	height: v-bind(weekHeight);
-	overflow: hidden;
-}
-
-.calendar-week .current-time-line {
-	position: absolute;
-	inset-inline-start: 0;
-	width: 100%;
-	height: 2px;
-	z-index: 1;
-	background-color: red;
-}
-
-.calendar-week .current-time-line__circle {
-	position: relative;
-}
-
-.calendar-week .current-time-line__circle::before {
-	content: '';
-	position: absolute;
-	transform: translate(-45%, -45%);
-	width: 10px;
-	height: 10px;
-	border-radius: 50%;
-	background-color: red;
-}
-
-.calendar-week .custom-current-time {
-	position: absolute;
-	inset-inline-start: 0;
-	width: 100%;
-	z-index: 1;
-}
-</style>

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

@@ -1,101 +0,0 @@
-<script setup lang="ts">
-import type Time from '../../helpers/Time'
-import type { ConfigInterface } from '../../typings/config.interface'
-import type { DayInterface } from '../../typings/interfaces/day.interface'
-import type { DayWithFullDayEvents } from '../../typings/interfaces/full-day-events-week.type'
-import type { ModeType } from '../../typings/types'
-import { ref, defineEmits } from 'vue'
-import FullDayEvent from './FullDayEvent.vue'
-
-const props = defineProps<{
-	days: DayInterface[]
-	time: Time
-	fullDayEvents: DayWithFullDayEvents[]
-	config: ConfigInterface
-	mode: ModeType
-}>()
-
-const emit = defineEmits<{
-	(e: 'eventWasClicked', event: any): void
-	(e: 'dayWasClicked', date: string): void
-}>()
-
-const now = ref(new Date())
-
-function getDaysDate(day: DayInterface) {
-	const { date } = props.time.getAllVariablesFromDateTimeString(
-		day.dateTimeString
-	)
-	return date
-}
-</script>
-
-<template>
-	<div class="week-timeline flex space-between border-bottom  ms-3-5" style="margin-inline-end:  0.5em;">
-		<div
-			v-for="(day, dayIndex) in days"
-			:key="dayIndex"
-			class="week-timeline__day"
-			:class="{
-				'is-today':
-					time.getDateTimeStringFromDate(now, 'start') === day.dateTimeString,
-			}"
-			@click="emit('dayWasClicked', time.dateStringFrom(day.dateTimeString))"
-		>
-			<div class="flex justify-content-center gap-025 txt12 pb-025">
-				<div class="">
-					{{ day.dayName.charAt(0).toUpperCase() + day.dayName.slice(1, 3).toLowerCase() }}
-				</div>
-
-				<div class="week-timeline__date txt14 round inline-flex justify-content-center">
-					{{ getDaysDate(day) }}
-				</div>
-			</div>
-
-			<div class="week-timeline__events">
-				<template
-					v-for="(event, key) in day.fullDayEvents"
-					:key="key"
-				>
-					<FullDayEvent
-						v-if="key !== 'date'"
-						:schedule-event="typeof event === 'object' ? event : null"
-						:config="config"
-						:mode="mode"
-						@event-was-clicked="emit('eventWasClicked', $event)"
-					/>
-				</template>
-			</div>
-		</div>
-	</div>
-</template>
-
-<style scoped>
-.week-timeline {
-	height: fit-content;
-	display: flex;
-	justify-content: space-evenly;
-}
-
-.mode-is-day .week-timeline {
-	/* width: calc(100% - 3.5em); */
-}
-
-.week-timeline__day {
-	width: 100%;
-}
-
-.week-timeline__date {
-	height: 1.5rem;
-	width: 1.5rem;
-}
-
-.is-today .week-timeline__date {
-	background: var(--bgl-primary);
-	color: var(--bgl-white);
-}
-
-.week-timeline__events {
-
-}
-</style>

package/src/components/calendar/constants.ts

@@ -1,13 +0,0 @@
-export const EVENT_COLORS = {
-	yellow: 'var(--bgl-yellow)',
-	blue: 'var(--bgl-blue)',
-	green: 'var(--bgl-green)',
-	red: 'var(--bgl-red)',
-	pink: 'var(--bgl-pink)',
-	purple: 'var(--bgl-purple)',
-	turquoise: 'var(--bgl-turquoise)',
-	brown: 'var(--bgl-brown)',
-}
-
-export const DATE_TIME_STRING_PATTERN = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/
-export const DATE_TIME_STRING_FULL_DAY_PATTERN = /^\d{4}-\d{2}-\d{2}$/

package/src/components/calendar/helpers/DayIntervals.ts

@@ -1,48 +0,0 @@
-import Time from './Time'
-
-export interface Interval {
-	intervalStart: string
-	intervalEnd: string
-	hasBorder?: boolean
-}
-/**
- * Define the data for the clickable intervals to be viewed in a calendar day.
- */
-export default class DayIntervals extends Time {
-	private readonly INTERVAL_MINUTES: 15 | 30 | 60
-	private readonly DAY_START_DATE_TIME_STRING: string
-	HOURS_PER_DAY = 24
-
-	constructor(
-		intervalMinutes: 15 | 30 | 60,
-		dayStartDateTimeString: string,
-		hoursPerDay = 24,
-	) {
-		super()
-		this.INTERVAL_MINUTES = intervalMinutes
-		this.DAY_START_DATE_TIME_STRING = dayStartDateTimeString
-		this.HOURS_PER_DAY = hoursPerDay
-	}
-
-	getIntervals(): Interval[] {
-		const intervals = []
-		const numberOfIntervalsInDay = this.HOURS_PER_DAY * (60 / this.INTERVAL_MINUTES)
-		let iteratorDateTimeString = this.DAY_START_DATE_TIME_STRING
-
-		while (intervals.length < numberOfIntervalsInDay) {
-			const intervalEnd = this.addMinutesToDateTimeString(this.INTERVAL_MINUTES, iteratorDateTimeString)
-
-			intervals.push({
-				intervalStart: iteratorDateTimeString,
-				intervalEnd,
-				// Only show a border at the bottom of an interval, when the upcoming interval is not the start of a new hour.
-				// This prevents double borders
-				hasBorder: intervalEnd.substring(14, 16) !== '00'
-			})
-
-			iteratorDateTimeString = intervalEnd
-		}
-
-		return intervals
-	}
-}

package/src/components/calendar/helpers/EDate.ts

@@ -1,18 +0,0 @@
-/**
- * A little helper class (Extended-Date), for allowing destructuring of a date
- */
-class EDate extends Date {
-	get fullYear() {
-		return this.getFullYear()
-	}
-
-	get month() {
-		return this.getMonth()
-	}
-
-	get date() {
-		return this.getDate()
-	}
-}
-
-export default EDate