@bagelink/vue 0.0.1216 → 0.0.1220

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1216",
+  "version": "0.0.1220",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -81,6 +81,7 @@
     "access": "public"
   },
   "dependencies": {
+    "date-fns": "^4.1.0",
     "@vueuse/core": "^12.5.0",
     "axios": "^1.7.9",
     "floating-vue": "^5.2.2",

package/src/components/Calendar/Index.vue

@@ -0,0 +1,420 @@
+<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 { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
+import AppHeader from './components/header/Header.vue'
+import Month from './components/month/Month.vue'
+import Week from './components/week/Week.vue'
+import Errors from './helpers/Errors'
+import Time from './helpers/Time'
+import AgendaEvents from './components/month/AgendaEvents.vue'
+import type { DayInterface } from './typings/interfaces/day.interface'
+import type { PeriodInterface } from './typings/interfaces/period.interface'
+
+const props = defineProps({
+	config: {
+		type: Object as PropType<ConfigInterface>,
+		default: () => ({}),
+	},
+	events: {
+		type: Array as PropType<EventInterface[]>,
+		default: () => [],
+	},
+	selectedDate: {
+		type: Date,
+		default: new Date(),
+	},
+	isLoading: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+const emit = defineEmits([
+	'eventWasClicked',
+	'eventWasResized',
+	'eventWasDragged',
+	'updatedPeriod',
+	'updatedMode',
+	'editEvent',
+	'deleteEvent',
+	'intervalWasClicked',
+	'dayWasClicked', // TODO: remove with v4. day-was-clicked is deprecated
+	'dateWasClicked',
+	'datetimeWasClicked',
+] as const)
+
+const wasInitialized = ref(0)
+const period = ref({
+	start: new Date(),
+	end: new Date(),
+	selectedDate: props.selectedDate,
+})
+const mode = ref(props.config.defaultMode || ('week' as modeType))
+const time = ref(new Time(props.config.week?.startsOn, props.config.locale || null, {
+	start: setTimePointsFromDayBoundary(props.config.dayBoundaries?.start || 0),
+	end: setTimePointsFromDayBoundary(props.config.dayBoundaries?.end || 24),
+}) as Time | any)
+const fontFamily = computed(() => props.config.style?.fontFamily || '\'Verdana\', \'Open Sans\', serif')
+const eventRenderingKey = ref(0)
+const eventsDataProperty = ref(props.events)
+const isSmall = ref(false)
+const ErrorsHelper = Errors
+const appHeaderRef = ref()
+
+const enhancedConfig = computed((): ConfigInterface => {
+	return { ...props.config, isSmall: isSmall.value }
+})
+
+watch(() => props.events, (newVal, oldVal) => {
+	if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+		eventsDataProperty.value = newVal
+		eventRenderingKey.value = eventRenderingKey.value + 1
+	}
+	if (props.config.isSilent) return
+
+	props.events.forEach((e) => { ErrorsHelper.checkEventProperties(e) })
+}, { deep: true, immediate: true })
+
+watch(() => props.config, (value: ConfigInterface) => {
+	ErrorsHelper.checkConfig(value)
+}, { deep: true, immediate: true })
+
+onMounted(() => {
+	setConfigOnMount()
+	onCalendarResize()
+	setPeriodOnMount()
+	window.addEventListener('resize', onCalendarResize)
+})
+
+onBeforeUnmount(() => {
+	window.removeEventListener('resize', onCalendarResize)
+})
+
+function setConfigOnMount() {
+	wasInitialized.value = 1
+}
+
+function handleUpdatedPeriod(
+	value: PeriodInterface,
+	leaveMonthMode = false
+) {
+	emit('updatedPeriod', { start: value.start, end: value.end })
+	period.value = value
+
+	if (leaveMonthMode) mode.value = 'day'
+}
+
+function handleChangeMode(payload: modeType) {
+	if (payload === 'day') {
+		period.value.start = period.value.selectedDate
+		period.value.end = time.value.setDateToEndOfDay(period.value.selectedDate)
+	}
+
+	if (payload === 'week') {
+		const week = time.value.getCalendarWeekDateObjects(period.value.selectedDate)
+		period.value.start = week[0]
+		period.value.end = time.value.setDateToEndOfDay(week[6])
+	}
+
+	if (payload === 'month') {
+		const month = time.value.getCalendarMonthSplitInWeeks(
+			period.value.selectedDate.getFullYear(),
+			period.value.selectedDate.getMonth()
+		)
+
+		period.value.start = month[0][0]
+		const lastWeek = month[month.length - 1]
+		period.value.end = time.value.setDateToEndOfDay(lastWeek[lastWeek.length - 1])
+	}
+
+	mode.value = payload
+	emit('updatedMode', { mode: payload, period: period.value })
+}
+
+const calendarRoot = ref<HTMLElement>()
+
+function onCalendarResize() {
+	const documentRoot = document.documentElement
+	const documentFontSize = +window
+		.getComputedStyle(documentRoot)
+		.fontSize
+		.split('p')[0]
+	const breakPointFor1RemEquals16px = 700
+	const multiplier = 16 / documentFontSize
+	const smallCalendarBreakpoint = breakPointFor1RemEquals16px / multiplier // For 16px root font-size, break point is at 43.75rem
+
+	if (!calendarRoot.value) return
+
+	isSmall.value = calendarRoot.value.clientWidth < smallCalendarBreakpoint
+
+	if (isSmall.value && !['day', 'month'].includes(mode.value)) {
+		mode.value = 'day'
+	}
+}
+
+function setPeriodOnMount() {
+	if (mode.value === 'week') {
+		const currentWeek = time.value.getCalendarWeekDateObjects(period.value.selectedDate)
+		period.value.start = currentWeek[0]
+		period.value.end = currentWeek[6]
+	} else if (mode.value === 'month') {
+		const month = time.value.getCalendarMonthSplitInWeeks(
+			period.value.selectedDate.getFullYear(),
+			period.value.selectedDate.getMonth()
+		)
+		period.value.start = month[0][0]
+		const lastWeek = month[month.length - 1]
+		period.value.end = lastWeek[lastWeek.length - 1]
+	}
+}
+
+function handleEventWasUpdated(
+	calendarEvent: EventInterface,
+	eventType: 'dragged' | 'resized'
+) {
+	const newEvents = eventsDataProperty.value.filter(
+		e => e.id !== calendarEvent.id
+	)
+	eventsDataProperty.value = [calendarEvent, ...newEvents]
+	emit(eventType === 'dragged' ? 'eventWasDragged' : 'eventWasResized', calendarEvent)
+}
+
+function setTimePointsFromDayBoundary(boundary: number) {
+	return Time.getTimePointsFromHour(boundary)
+}
+
+const day = $computed(() => {
+	return {
+		dayName: time.value.getLocalizedNameOfWeekday(period.value.selectedDate, 'long'),
+		dateTimeString: period.value.selectedDate.toLocaleDateString('en-US', {
+			day: '2-digit',
+			month: '2-digit',
+			year: 'numeric',
+		}),
+		events: eventsDataProperty.value.filter(e => {
+			const eventDate = new Date(e.time.start)
+			return eventDate >= period.value.start && eventDate <= period.value.end
+		}),
+		fullDayEvents: {
+			date: period.value.selectedDate,
+			events: eventsDataProperty.value.filter(e => {
+				const eventDate = new Date(e.time.start)
+				return eventDate >= period.value.start && eventDate <= period.value.end
+			}),
+		}
+	} as DayInterface
+})
+
+function handleDateWasClicked(payload: string) {
+	emit('dayWasClicked', payload)
+	emit('dateWasClicked', payload)
+}
+</script>
+
+<template>
+	<div class="calendar-root-wrapper">
+		<div
+			ref="calendarRoot"
+			class="calendar-root"
+			:class="{
+				'mode-is-day': mode === 'day',
+				'mode-is-week': mode === 'week',
+				'mode-is-month': mode === 'month',
+				'qalendar-is-small': isSmall,
+			}"
+			:data-lang="config?.locale?.substring(0, 2) || 'en'"
+		>
+			<Transition name="loading">
+				<div
+					v-if="isLoading"
+					class="top-bar-loader"
+				/>
+			</Transition>
+
+			<AppHeader
+				ref="appHeaderRef"
+				:key="wasInitialized + mode"
+				:config="config"
+				:mode="mode"
+				:time="time"
+				:period="period"
+				:is-small="isSmall"
+				@change-mode="handleChangeMode"
+				@updated-period="handleUpdatedPeriod"
+			/>
+			<AgendaEvents
+				v-if="mode === 'agenda'"
+				:events-prop="eventsDataProperty"
+				:period="period"
+				:config="config"
+				:time="time"
+				:day="day"
+			/>
+
+			<Week
+				v-if="['week', 'day'].includes(mode)"
+				:key="period.start.getTime() + period.end.getTime() + eventRenderingKey"
+				:events-prop="eventsDataProperty"
+				:period="period"
+				:config="config"
+				:mode-prop="mode"
+				:time="time"
+				@event-was-clicked="$emit('eventWasClicked', $event)"
+				@event-was-resized="handleEventWasUpdated($event, 'resized')"
+				@event-was-dragged="handleEventWasUpdated($event, 'dragged')"
+				@edit-event="$emit('editEvent', $event)"
+				@delete-event="$emit('deleteEvent', $event)"
+				@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>
+
+				<template #eventDialog="p">
+					<slot
+						name="eventDialog"
+						:event-dialog-data="p.eventDialogData"
+						:close-event-dialog="p.closeEventDialog"
+					/>
+				</template>
+
+				<template #customCurrentTime>
+					<slot name="customCurrentTime" />
+				</template>
+			</Week>
+
+			<Month
+				v-if="mode === 'month'"
+				:key="period.start.getTime() + period.end.getTime() + eventRenderingKey"
+				:events-prop="eventsDataProperty"
+				:time="time"
+				:config="enhancedConfig"
+				:period="period"
+				@event-was-clicked="$emit('eventWasClicked', $event)"
+				@date-was-clicked="handleDateWasClicked"
+				@event-was-dragged="handleEventWasUpdated($event, 'dragged')"
+				@updated-period="handleUpdatedPeriod($event, true)"
+				@edit-event="$emit('editEvent', $event)"
+				@delete-event="$emit('deleteEvent', $event)"
+			>
+				<template #eventDialog="p">
+					<slot
+						name="eventDialog"
+						:event-dialog-data="p.eventDialogData"
+						:close-event-dialog="p.closeEventDialog"
+					/>
+				</template>
+
+				<template #monthEvent="p">
+					<slot
+						:event-data="p.eventData"
+						name="monthEvent"
+					/>
+				</template>
+
+				<template #dayCell="{ dayData }">
+					<slot
+						:day-data="dayData"
+						name="dayCell"
+					/>
+				</template>
+			</Month>
+		</div>
+	</div>
+</template>
+
+<style>
+.calendar-root-wrapper {
+	width: 100%;
+	max-width: 100vw;
+	height: 100%;
+	display: flex;
+}
+
+.calendar-root-wrapper .calendar-root {
+	flex: 1;
+	border: var(--qalendar-border-gray-thin);
+	border-radius: var(--qalendar-border-radius);
+	position: relative;
+	width: 100%;
+	margin: 0 auto;
+	display: flex;
+	flex-flow: column;
+}
+/*
+@media (prefers-color-scheme: dark) {
+	.calendar-root-wrapper .calendar-root {
+		background: #121212;
+		color: #fff;
+		border-color: transparent;
+	}
+} */
+
+.calendar-root-wrapper .calendar-root .top-bar-loader {
+	position: absolute;
+	top: 1px;
+	left: 2px;
+	width: calc(100% - 4px);
+	height: 3px;
+	background: rgba(241, 241, 241, 0.2);
+	border-radius: 16px;
+	overflow: hidden;
+}
+
+.calendar-root-wrapper .calendar-root .top-bar-loader:before {
+	content: '';
+	height: 4px;
+	width: calc(100% - 4px);
+	position: absolute;
+	top: 1px;
+	left: 2px;
+	background: rgb(38, 132, 255);
+	background: linear-gradient(
+		90deg,
+		rgba(38, 132, 255, 1) 0%,
+		rgba(38, 132, 255, 0.5088410364145659) 48%,
+		rgba(38, 132, 255, 1) 100%
+	);
+	animation: load 1.8s infinite;
+	border-radius: 16px;
+}
+
+@media (prefers-color-scheme: dark) {
+	.calendar-root-wrapper .calendar-root .top-bar-loader:before {
+		background: rgb(229, 224, 245);
+	}
+}
+
+@keyframes load {
+	0% {
+		width: 0;
+		left: -100%;
+	}
+	50% {
+		left: 0;
+		width: 100%;
+	}
+	100% {
+		width: 0;
+		left: 100%;
+	}
+}
+
+.calendar-root-wrapper .calendar-root .loading-enter-active,
+.calendar-root-wrapper .calendar-root .loading-leave-active {
+	transition: background 0.5s ease;
+}
+
+.calendar-root-wrapper .calendar-root .loading-leave-to,
+.calendar-root-wrapper .calendar-root .loading-enter-from {
+	background-color: rgba(255, 255, 255, 0);
+}
+</style>

package/src/components/Calendar/assets/base.css

@@ -0,0 +1,60 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+	--vt-c-white: #ffffff;
+	--vt-c-white-soft: #f8f8f8;
+	--vt-c-white-mute: #f2f2f2;
+
+	--vt-c-black: #181818;
+	--vt-c-black-soft: #222222;
+	--vt-c-black-mute: #282828;
+
+	--vt-c-indigo: #2c3e50;
+
+	--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+	--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+	--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+	--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+	--vt-c-text-light-1: var(--vt-c-indigo);
+	--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+	--vt-c-text-dark-1: var(--vt-c-white);
+	--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+	--color-background: var(--vt-c-white);
+	--color-background-soft: var(--vt-c-white-soft);
+	--color-background-mute: var(--vt-c-white-mute);
+
+	--color-border: var(--vt-c-divider-light-2);
+	--color-border-hover: var(--vt-c-divider-light-1);
+
+	--color-heading: var(--vt-c-text-light-1);
+	--color-text: var(--vt-c-text-light-1);
+
+	--section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--color-background: var(--vt-c-black);
+		--color-background-soft: var(--vt-c-black-soft);
+		--color-background-mute: var(--vt-c-black-mute);
+
+		--color-border: var(--vt-c-divider-dark-2);
+		--color-border-hover: var(--vt-c-divider-dark-1);
+
+		--color-heading: var(--vt-c-text-dark-1);
+		--color-text: var(--vt-c-text-dark-2);
+	}
+}
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+	margin: 0;
+	position: relative;
+	font-weight: normal;
+}