@bagelink/vue 1.2.15 → 1.2.20

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

@@ -1,584 +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 type { DayInfo, ModeType } from '../../typings/types'
-import { Icon } from '@bagelink/vue'
-
-import { ref, computed, onMounted, watch } from 'vue'
-import { EVENT_COLORS } from '../../constants'
-import { EventChange } from '../../helpers/EventChange'
-import Helpers from '../../helpers/Helpers'
-import { DRAG_N_RESIZE_DIRECTION } from '../../typings/types'
-
-const props = defineProps({
-	eventProp: {
-		type: Object as PropType<EventInterface>,
-		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,
-	},
-})
-
-const emit = defineEmits<{
-	(e: 'eventWasClicked', data: { clickedEvent: EventInterface, eventElement: HTMLElement }): void
-	(e: 'eventWasResized', event: EventInterface): void
-	(e: 'eventWasDragged', event: EventInterface): void
-	(e: 'dragStart'): void
-	(e: 'dragEnd'): void
-}>()
-
-const event = ref(props.eventProp)
-const icons = ref({
-	clock: 'clock',
-	user: 'user',
-	description: 'description',
-	location: 'location_on',
-	topic: 'topic',
-})
-
-const showResizeElements = ref(false)
-const eventTransformValue = ref('initial')
-const eventZIndexValue = ref<'initial' | number>('initial')
-const dayElement = ref<Element | null>(null)
-
-// Resizing events
-const resizingStartingPoint = ref<undefined | number>(undefined)
-const resizingStartingPointEndOfTime = ref(props.eventProp.time.end)
-const resizingStartingPointStartOfTime = ref(props.eventProp.time.start)
-const resizingDirection = ref('')
-const changeInQuarterHoursEventStart = ref(0)
-const changeInQuarterHoursEventEnd = ref(0)
-const isEditable = ref(props.eventProp.isEditable || false)
-const colors = ref(EVENT_COLORS as { [key: string]: string })
-const eventColor = ref('#fff')
-const eventBackgroundColor = ref('')
-const isResizing = ref(false)
-
-// Dragging events
-const canDrag = ref(false)
-const clientYDragStart = ref<null | number>(null)
-const clientXDragStart = ref<null | number>(null)
-const changeInQuartersOnDrag = ref(0)
-const changeInDaysOnDrag = ref(0)
-const timeStartDragStart = ref(props.eventProp.time.start)
-const timeEndDragStart = ref(props.eventProp.time.end)
-
-const dragMoveListenerNameAndCallbacks = [
-	['mousemove', handleDrag],
-	['touchmove', handleDrag],
-	['mouseup', onMouseUpWhenDragging],
-	['touchend', onMouseUpWhenDragging],
-] as const
-
-const eventChangeHelper = computed(() => {
-	const eventCurrentDay = props.time.addDaysToDateTimeString(changeInDaysOnDrag.value, props.dayInfo.dateTimeString)
-	return new EventChange(props.time, props.time.dateStringFrom(eventCurrentDay))
-})
-
-const isCustomEvent = computed(() => {
-	if (Array.isArray(props.eventProp.isCustom)) {
-		return props.eventProp.isCustom.includes(props.mode)
-	}
-	return props.eventProp.isCustom || false
-})
-
-const getEventTime = computed(() => {
-	return `${props.time.getLocalizedTime(event.value.time.start)} - ${props.time.getLocalizedTime(event.value.time.end)}`
-})
-
-const timePointsInDay = computed(() => props.time.HOURS_PER_DAY * 100)
-const timePointsInOneMinute = computed(() => 100 / 60)
-
-const getLeftRule = computed(() => {
-	if (!event.value.totalConcurrentEvents || !event.value.nOfPreviousConcurrentEvents) {
-		return 0
-	}
-	return (event.value.nOfPreviousConcurrentEvents / event.value.totalConcurrentEvents) * 100
-})
-
-const getWidthRule = computed(() => 100 - getLeftRule.value)
-const getBorderRule = computed(() => !event.value.nOfPreviousConcurrentEvents ? 'none' : '1px solid #fff')
-
-const eventIsLongerThan30Minutes = computed(() => {
-	const { hour: startHour, minutes: startMinutes } = props.time.getAllVariablesFromDateTimeString(event.value.time.start)
-	const { hour: endHour, minutes: endMinutes } = props.time.getAllVariablesFromDateTimeString(event.value.time.end)
-	const startDateMS = new Date(0, 0, 0, startHour, startMinutes).getTime()
-	const endDateMS = new Date(0, 0, 0, endHour, endMinutes).getTime()
-	return endDateMS - startDateMS >= 1800000
-})
-
-const hasDisabledDragAndDrop = computed(() => {
-	return !!(props.eventProp.disableDnD && props.eventProp.disableDnD.includes(props.mode))
-})
-
-const hasDisabledResize = computed(() => {
-	return !!(props.eventProp.disableResize && props.eventProp.disableResize.includes(props.mode))
-})
-
-const requiredStyles = computed(() => ({
-	top: getPositionInDay(event.value.time.start),
-	height: getLengthOfEvent(event.value.time.start, event.value.time.end),
-	// 'inset-inline-start': `${getInlineStartRule.value}%`,
-	width: `${getWidthRule.value}%`,
-	transform: eventTransformValue.value,
-	zIndex: eventZIndexValue.value,
-}))
-
-// Methods
-function getPositionInDay(dateTimeString: string) {
-	return `${props.time.getPercentageOfDayFromDateTimeString(dateTimeString, props.time.DAY_START, props.time.DAY_END).toString()}%`
-}
-
-function getLengthOfEvent(start: string, end: string) {
-	const startOfEvent = props.time.getPercentageOfDayFromDateTimeString(start, props.time.DAY_START, props.time.DAY_END)
-	const endOfEvent = props.time.getPercentageOfDayFromDateTimeString(end, props.time.DAY_START, props.time.DAY_END)
-	const length = Math.abs(endOfEvent - startOfEvent)
-	return `${length}%`
-}
-
-function handleClickOnEvent(event: any) {
-	const eventElement = getEventElementFromChildElement(event)
-	if (!eventElement) return
-	emit('eventWasClicked', {
-		clickedEvent: props.eventProp,
-		eventElement,
-	})
-}
-
-function getEventElementFromChildElement(event: any) {
-	const eventTarget = event.target
-	if (!eventTarget || typeof eventTarget.className.includes !== 'function') return null
-	if (eventTarget.className.includes('.calendar-week__event')) return event.target
-	return eventTarget.closest('.calendar-week__event')
-}
-
-function onMouseMoveResize(event: MouseEvent) {
-	const eventsContainer = document.querySelector('.calendar-week__events')
-	if (!eventsContainer) return
-
-	if (typeof resizingStartingPoint.value === 'undefined') {
-		resizingStartingPoint.value = event.clientY
-	}
-
-	const cursorPositionY = event.clientY
-	const nOfPixelsDistance = cursorPositionY - resizingStartingPoint.value
-	const eventsContainerHeight = eventsContainer.clientHeight
-	const percentageOfDayChanged = (nOfPixelsDistance / eventsContainerHeight) * 100
-	const changeInTimePoints = (timePointsInDay.value / 100) * percentageOfDayChanged
-	const changeInMinutes = getMinutesFromTimePoints(changeInTimePoints)
-
-	if (resizingDirection.value === 'down') {
-		changeInQuarterHoursEventEnd.value = Math.floor(changeInMinutes / 15)
-	} else {
-		changeInQuarterHoursEventStart.value = Math.floor(changeInMinutes / 15)
-	}
-}
-
-function onMouseUpWhenResizing() {
-	stopResizing()
-}
-
-function resizeEvent(direction: 'down' | 'up') {
-	isResizing.value = true
-	resizingDirection.value = direction
-	document.addEventListener('mousemove', onMouseMoveResize)
-	document.addEventListener('mouseup', onMouseUpWhenResizing)
-}
-
-function stopResizing() {
-	document.removeEventListener('mousemove', onMouseMoveResize)
-	document.removeEventListener('mouseup', onMouseUpWhenResizing)
-	resetResizingValues()
-	emit('eventWasResized', event.value)
-	isResizing.value = false
-}
-
-function resetResizingValues() {
-	resizingStartingPoint.value = undefined
-	resizingStartingPointStartOfTime.value = props.eventProp.time.start
-	resizingStartingPointEndOfTime.value = props.eventProp.time.end
-	changeInQuarterHoursEventEnd.value = 0
-}
-
-function getMinutesFromTimePoints(timePoints: number) {
-	return timePoints / timePointsInOneMinute.value
-}
-
-function setColors() {
-	if (
-		event.value.colorScheme
-		&& props.config.style?.colorSchemes
-		&& props.config.style.colorSchemes[event.value.colorScheme]
-	) {
-		eventColor.value = props.config.style.colorSchemes[event.value.colorScheme].color
-		eventBackgroundColor.value = props.config.style.colorSchemes[event.value.colorScheme].backgroundColor
-		return
-	}
-
-	if (event.value.color) {
-		eventColor.value = '#fff'
-		eventBackgroundColor.value = colors.value[event.value.color]
-		return
-	}
-
-	eventBackgroundColor.value = colors.value.blue
-}
-
-function initDrag(domEvent: UIEvent) {
-	if (!event.value.isEditable || hasDisabledDragAndDrop.value) return
-
-	emit('dragStart')
-
-	dragMoveListenerNameAndCallbacks.forEach(([name, callback]) => {
-		document.addEventListener(name, callback)
-	})
-
-	if (Helpers.isUIEventTouchEvent(domEvent)) {
-		setInitialDragValues(
-			(domEvent as TouchEvent).touches[0].clientX,
-			(domEvent as TouchEvent).touches[0].clientY
-		)
-	} else {
-		setInitialDragValues((domEvent as MouseEvent).clientX, (domEvent as MouseEvent).clientY)
-	}
-}
-
-function setInitialDragValues(clientX: number, clientY: number) {
-	canDrag.value = true
-	eventZIndexValue.value = 10
-	clientYDragStart.value = clientY
-	clientXDragStart.value = clientX
-	timeStartDragStart.value = event.value.time.start
-	timeEndDragStart.value = event.value.time.end
-}
-
-function onMouseUpWhenDragging() {
-	emit('dragEnd')
-	handleDragEnd()
-}
-
-function handleDragEnd() {
-	canDrag.value = false
-	eventZIndexValue.value = 'initial'
-	dragMoveListenerNameAndCallbacks.forEach(([name, callback]) => {
-		document.removeEventListener(name, callback)
-	})
-	const dayChanged = changeInDaysOnDrag.value <= -1 || changeInDaysOnDrag.value > 0
-	const timeChanged = changeInQuartersOnDrag.value <= -1 || changeInQuartersOnDrag.value > 0
-	if (dayChanged || timeChanged) emit('eventWasDragged', event.value)
-}
-
-function handleDrag(mouseEvent: UIEvent) {
-	if (isResizing.value || !canDrag.value || !clientYDragStart.value) return
-
-	if (Helpers.isUIEventTouchEvent(mouseEvent)) {
-		handleVerticalDrag((mouseEvent as TouchEvent).touches[0].clientY)
-		handleHorizontalDrag((mouseEvent as TouchEvent).touches[0].clientX)
-	} else {
-		handleVerticalDrag((mouseEvent as MouseEvent).clientY)
-		handleHorizontalDrag((mouseEvent as MouseEvent).clientX)
-	}
-}
-
-function handleVerticalDrag(clientY: number) {
-	const eventsContainer = document.querySelector('.calendar-week__events')
-	if (!eventsContainer || !clientYDragStart.value) return
-
-	const nOfPixelsDistance = clientY - clientYDragStart.value
-	const eventsContainerHeight = eventsContainer.clientHeight
-	const percentageOfDayChanged = (nOfPixelsDistance / eventsContainerHeight) * 100
-	const changeInTimePoints = (timePointsInDay.value / 100) * percentageOfDayChanged
-	const changeInMinutes = getMinutesFromTimePoints(changeInTimePoints)
-	changeInQuartersOnDrag.value = changeInMinutes < 0
-		? Math.ceil(changeInMinutes / 15)
-		: Math.floor(changeInMinutes / 15)
-}
-
-function handleHorizontalDrag(clientX: number) {
-	if (!dayElement.value || !clientXDragStart.value) return
-
-	const dayWidth = dayElement.value.clientWidth
-	const changeInPixelsX = clientX - clientXDragStart.value
-	changeInDaysOnDrag.value = changeInPixelsX < 0
-		? Math.ceil(changeInPixelsX / dayWidth)
-		: Math.floor(changeInPixelsX / dayWidth)
-}
-
-function updatePositionOnDrag() {
-	const minutesChangedVertically = changeInQuartersOnDrag.value * 15
-	const minutesChangedHorizontally = changeInDaysOnDrag.value * 1440
-
-	event.value.time.start = props.time.addMinutesToDateTimeString(
-		minutesChangedVertically + minutesChangedHorizontally,
-		timeStartDragStart.value
-	)
-
-	event.value.time.end = props.time.addMinutesToDateTimeString(
-		minutesChangedVertically + minutesChangedHorizontally,
-		timeEndDragStart.value
-	)
-}
-
-// Watch effects
-watch(changeInQuarterHoursEventStart, (newValue: number, oldValue: number) => {
-	const newStartOfTimeDateTimeString = props.time.addMinutesToDateTimeString(
-		15 * newValue,
-		resizingStartingPointStartOfTime.value
-	)
-	const direction = newValue > oldValue ? DRAG_N_RESIZE_DIRECTION.FORWARDS : DRAG_N_RESIZE_DIRECTION.BACKWARDS
-	const eventCanBeResizedFurther = eventChangeHelper.value.canEventBeMoved(event.value, direction)
-
-	if (newStartOfTimeDateTimeString < event.value.time.end && eventCanBeResizedFurther) {
-		event.value.time.start = newStartOfTimeDateTimeString
-	}
-})
-
-watch(changeInQuarterHoursEventEnd, (newValue: number, oldValue: number) => {
-	const newEndOfTimeDateTimeString = props.time.addMinutesToDateTimeString(
-		15 * newValue,
-		resizingStartingPointEndOfTime.value
-	)
-	const direction = newValue > oldValue ? DRAG_N_RESIZE_DIRECTION.FORWARDS : DRAG_N_RESIZE_DIRECTION.BACKWARDS
-	const eventCanBeResizedFurther = eventChangeHelper.value.canEventBeMoved(event.value, direction)
-
-	if (newEndOfTimeDateTimeString > event.value.time.start && eventCanBeResizedFurther) {
-		event.value.time.end = newEndOfTimeDateTimeString
-	}
-})
-
-watch(changeInQuartersOnDrag, (newValue: number, oldValue: number) => {
-	const direction = newValue > oldValue ? DRAG_N_RESIZE_DIRECTION.FORWARDS : DRAG_N_RESIZE_DIRECTION.BACKWARDS
-	const eventCanBeDraggedFurther = eventChangeHelper.value.canEventBeMoved(event.value, direction)
-	if (!eventCanBeDraggedFurther) return
-	updatePositionOnDrag()
-})
-
-watch(changeInDaysOnDrag, (newValue: number) => {
-	if (!dayElement.value) return
-	const upcomingDaysInWeek = props.dayInfo.daysTotalN - (props.dayInfo.thisDayIndex + 1)
-	const previousDaysInWeek = 0 - props.dayInfo.thisDayIndex
-	if (newValue > upcomingDaysInWeek || newValue < previousDaysInWeek) return
-
-	const pixelsToTransform = newValue * dayElement.value.clientWidth
-	eventTransformValue.value = `translateX(${pixelsToTransform}px)`
-	updatePositionOnDrag()
-})
-
-onMounted(() => {
-	dayElement.value = document.querySelector('.calendar-week__day')
-	setColors()
-})
-
-// Accessibility handlers
-function handleFocus() {
-	if (isEditable.value && !hasDisabledResize.value) {
-		showResizeElements.value = true
-	}
-}
-
-function handleBlur() {
-	showResizeElements.value = false
-}
-</script>
-
-<template>
-	<div
-		class="calendar-week__event is-event"
-		:class="{
-			'is-editable': isEditable,
-			'has-disabled-dnd': hasDisabledDragAndDrop,
-		}"
-		:style="{
-			...requiredStyles,
-			border: getBorderRule,
-		}"
-		:data-ref="`event-${event.id}`"
-		tabindex="0"
-		@click="handleClickOnEvent"
-		@mouseenter="handleFocus"
-		@mouseleave="handleBlur"
-		@focus="handleFocus"
-		@blur="handleBlur"
-		@mousedown="initDrag"
-		@touchstart="initDrag"
-	>
-		<div
-			v-if="!isCustomEvent"
-			class="calendar-week__event-info-wrapper p-05"
-			:style="{
-				color: eventColor,
-				width: '100%',
-				height: '100%',
-				backgroundColor: eventBackgroundColor,
-			}"
-		>
-			<div class="calendar-week__event-row is-title">
-				{{ event.title }}
-			</div>
-
-			<div class="calendar-week__event-row is-time flex">
-				<Icon
-					:icon="icons.clock"
-					class="calendar-week__event-icon"
-				/>
-				<span>{{ getEventTime }}</span>
-			</div>
-
-			<div
-				v-if="event.location"
-				class="calendar-week__event-row is-location"
-			>
-				<Icon
-					:icon="icons.location"
-					class="calendar-week__event-icon"
-				/>
-				<span>{{ event.location }}</span>
-			</div>
-
-			<div
-				v-if="event.with"
-				class="calendar-week__event-row is-with"
-			>
-				<Icon
-					:icon="icons.user"
-					class="calendar-week__event-icon"
-				/>
-				<span>{{ event.with }}</span>
-			</div>
-
-			<div
-				v-if="event.topic"
-				class="calendar-week__event-row is-topic"
-			>
-				<Icon
-					:icon="icons.topic"
-					class="calendar-week__event-icon"
-				/>
-				<span>{{ event.topic }}</span>
-			</div>
-
-			<div
-				v-if="event.description"
-				class="calendar-week__event-row is-description"
-			>
-				<Icon
-					:icon="icons.description"
-					class="calendar-week__event-icon"
-				/>
-				<!-- eslint-disable vue/no-v-html -->
-				<p v-html="event.description" />
-				<!-- eslint-enable -->
-			</div>
-
-			<div
-				v-if="eventIsLongerThan30Minutes"
-				class="calendar-week__event-blend-out"
-				:style="{
-					backgroundImage: `linear-gradient(to bottom, transparent, ${eventBackgroundColor})`,
-				}"
-			/>
-		</div>
-
-		<slot
-			v-else
-			name="weekDayEvent"
-			:event-data="event"
-		/>
-
-		<div
-			v-if="showResizeElements"
-			class="calendar-week__event-resize calendar-week__event-resize-up"
-			@mousedown="resizeEvent('up')"
-		/>
-
-		<div
-			v-if="showResizeElements"
-			class="calendar-week__event-resize calendar-week__event-resize-down"
-			@mousedown="resizeEvent('down')"
-		/>
-	</div>
-</template>
-
-<style scoped>
-.calendar-week__event {
-	position: absolute;
-	width: 100%;
-	border-radius: 4px;
-	cursor: pointer;
-	box-sizing: content-box;
-	user-select: none;
-	overflow: hidden;
-}
-
-.calendar-week__event.is-editable {
-	cursor: grab;
-}
-
-.calendar-week__event.has-disabled-dnd {
-	cursor: initial;
-}
-
-.calendar-week__event .calendar-week__event-row {
-	display: flex;
-	align-items: flex-start;
-	margin-bottom: 0.25em;
-}
-
-.calendar-week__event .calendar-week__event-row p {
-	margin: 0;
-	padding: 0;
-}
-
-.calendar-week__event .calendar-week__event-info-wrapper {
-	position: relative;
-	padding: var(--qalendar-spacing-half);
-	font-size: var(--qalendar-font-xs);
-	height: 100%;
-	box-sizing: border-box;
-	user-select: none;
-}
-
-.calendar-week__event .calendar-week__event-blend-out {
-	position: absolute;
-	bottom: 0;
-	height: 20px;
-	width: 100%;
-	transform: translateX(calc(var(--qalendar-spacing-half) * -1));
-}
-
-.calendar-week__event .calendar-week__event-icon {
-	margin: 2px 4px 0 0;
-	font-size: var(--qalendar-font-xs);
-}
-
-.calendar-week__event .calendar-week__event-resize {
-	position: absolute;
-	width: 100%;
-	cursor: ns-resize;
-	height: 5px;
-}
-
-.calendar-week__event .calendar-week__event-resize-up {
-	top: 0;
-}
-
-.calendar-week__event .calendar-week__event-resize-down {
-	bottom: 0;
-}
-</style>

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

@@ -1,80 +0,0 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-import type Time from '../../helpers/Time'
-import type { DAY_TIME_POINT } from '../../typings/config.interface'
-import { ref, onMounted } from 'vue'
-
-const props = defineProps({
-	time: {
-		type: Object as PropType<Time>,
-		required: true,
-	},
-	weekHeight: {
-		type: String,
-		required: true,
-	},
-})
-
-// const availableHours = [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000, 2100, 2200, 2300] as DAY_TIME_POINT[]
-const timelineHours = ref<DAY_TIME_POINT[]>([])
-
-onMounted(() => {
-	timelineHours.value = props.time.getTimelineHours()
-})
-
-function getLocaleTimeString(time: DAY_TIME_POINT): string {
-	const { hour } = props.time.getHourAndMinutesFromTimePoints(time)
-	return props.time.getLocalizedHour(new Date(2100, 1, 1, hour))
-}
-</script>
-
-<template>
-	<div class="day-timeline absolute top-0 start-0 space-evenly column display-flex">
-		<div
-			v-for="hour in timelineHours"
-			:key="hour"
-			class="day-timeline__hour display-flex column ustify-content-start h-100p ps-05"
-		>
-			<span class="day-timeline__hour-text line-height-0">
-				{{ getLocaleTimeString(hour) }}
-			</span>
-		</div>
-	</div>
-</template>
-
-<style scoped>
-.day-timeline {
-	width: calc(100% + 10px);
-	height: v-bind(weekHeight);
-	transform: translateX(-10px);
-}
-[dir="rtl"] .day-timeline {
-	transform: translateX(10px);
-}
-[dir="rtl"] .ltr .day-timeline {
-	transform: translateX(-10px);
-}
-
-.day-timeline__hour {
-	font-size: clamp(10px, 0.625rem, 14px);
-	color: var(--qalendar-gray-quite-dark);
-}
-
-.day-timeline__hour-text {
-	transform: translate(-40px, 0);
-}
-[dir="rtl"] .day-timeline__hour-text {
-	transform: translate(40px, 0);
-}
-[dir="rtl"] .ltr .day-timeline__hour-text {
-	transform: translate(-40px, 0);
-}
-
-.day-timeline__hour:first-child .day-timeline__hour-text {
-	display: none;
-}
-
-.day-timeline__hour:not(:last-child) {
-	border-bottom: var(--qalendar-border-gray-thin);
-}
-</style>