@bagelink/vue 0.0.1218 → 0.0.1220

package/src/components/Calendar/components/header/Header.vue

@@ -0,0 +1,274 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type Time from '../../helpers/Time'
+import type { ConfigInterface } from '../../typings/config.interface'
+import type { PeriodInterface } from '../../typings/interfaces/period.interface'
+import type { modeType } from '../../typings/types'
+
+import { DatePick, Icon, TabsNav } from '@bagelink/vue'
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+	config: {
+		type: Object as PropType<ConfigInterface>,
+		default: () => ({}),
+	},
+	mode: {
+		type: String as PropType<modeType>,
+		default: 'week',
+	},
+	time: {
+		type: Object as PropType<Time>,
+		default: () => ({}),
+	},
+	period: {
+		type: Object as PropType<PeriodInterface>,
+		required: true,
+	},
+	isSmall: {
+		type: Boolean,
+		required: true,
+	},
+})
+
+const emit = defineEmits<{
+	(e: 'changeMode', mode: modeType): void
+	(e: 'updatedPeriod', value: PeriodInterface): void
+}>()
+
+const periodSelect = ref<InstanceType<typeof DatePick>>()
+const currentPeriod = ref(props.period)
+const modeOptions = ref<modeType[]>(['month', 'week', 'day', 'agenda'])
+
+const icons = {
+	chevronLeft: 'chevron_left',
+	chevronRight: 'chevron_right',
+}
+
+const periodName = computed(() => {
+	if (props.mode === 'week') {
+		const startMonth = props.time.getLocalizedNameOfMonth(
+			currentPeriod.value.start,
+			'short'
+		)
+		const endMonth = props.time.getLocalizedNameOfMonth(
+			currentPeriod.value.end,
+			'short'
+		)
+
+		return startMonth === endMonth
+			? startMonth
+			: `${startMonth} - ${endMonth}`
+	}
+
+	// day
+	return `${props.time.getLocalizedNameOfMonth(
+		currentPeriod.value.selectedDate,
+		'short'
+	)} ${currentPeriod.value.selectedDate.getFullYear()}`
+})
+
+const modeLocal = ref(props.mode)
+
+const onlyDayModeIsEnabled = computed(() => {
+	const weekIsDisabled = props.config.disableModes?.includes('week')
+	const monthIsDisabled = props.config.disableModes?.includes('month')
+
+	return props.config.disableModes && weekIsDisabled && monthIsDisabled
+})
+
+watch(() => props.isSmall, (value) => {
+	if (value) modeOptions.value = ['month', 'day']
+	else modeOptions.value = ['month', 'week', 'day', 'agenda']
+}, { immediate: true })
+
+function dateToPeriod(selectedDate: Date) {
+	const period: PeriodInterface = {
+		start: new Date(),
+		end: new Date(),
+		selectedDate
+	}
+	if (props.mode === 'week') {
+		period.start = props.time.getCalendarWeekDateObjects(selectedDate)[0]
+		period.end = props.time.getCalendarWeekDateObjects(selectedDate)[6]
+	} else if (props.mode === 'month') {
+		period.start = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1)
+		period.end = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1, 0)
+	} else {
+		period.start = selectedDate
+		period.end = selectedDate
+	}
+	return period
+}
+
+function handlePeriodChange() {
+	if (!currentPeriod.value) return
+	currentPeriod.value = dateToPeriod(currentPeriod.value.selectedDate)
+	emit('updatedPeriod', currentPeriod.value)
+}
+
+function goToPeriod(direction: 'previous' | 'next') {
+	const date = currentPeriod.value.selectedDate
+	if (props.mode === 'month') {
+		date.setMonth(direction === 'previous' ? date.getMonth() - 1 : date.getMonth() + 1)
+	} else if (props.mode === 'week') {
+		date.setDate(direction === 'previous' ? date.getDate() - 7 : date.getDate() + 7)
+	} else {
+		date.setDate(direction === 'previous' ? date.getDate() - 1 : date.getDate() + 1)
+	}
+	currentPeriod.value = dateToPeriod(date)
+	emit('updatedPeriod', currentPeriod.value)
+}
+</script>
+
+<template>
+	<div class="calendar-header">
+		<div
+			v-if="periodName"
+			class="calendar-header__period-name"
+		>
+			{{ periodName }}
+		</div>
+
+		<div class="flex gap-05">
+			<div class="calendar-header__chevron-arrows">
+				<Icon
+					class="calendar-header__chevron-arrow calendar-header__chevron-arrow-left"
+					:icon="icons.chevronLeft"
+					@click="goToPeriod('previous')"
+				/>
+
+				<Icon
+					class="calendar-header__chevron-arrow calendar-header__chevron-arrow-right"
+					:icon="icons.chevronRight"
+					@click="goToPeriod('next')"
+				/>
+			</div>
+			<DatePick
+				ref="periodSelect"
+				v-model="currentPeriod.selectedDate"
+				:mode="mode"
+				@update:modelValue="handlePeriodChange"
+			/>
+
+			<div
+				v-if="!onlyDayModeIsEnabled"
+				class="calendar-header__mode-picker"
+			>
+				<TabsNav v-model="modeLocal" :tabs="modeOptions" group="mode" @update:model-value="emit('changeMode', $event)" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.calendar-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--qalendar-spacing-half);
+  border-radius: var(--qalendar-border-radius);
+}
+
+@media (min-width: 768px) {
+  .calendar-header {
+    justify-content: space-between;
+    gap: var(--qalendar-spacing);
+  }
+}
+
+:global(.dark) .calendar-header {
+  color: var(--qalendar-dark-mode-text-hint);
+}
+
+
+.calendar-header__period-name {
+  font-size: var(--qalendar-font-l);
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  .calendar-header__period-name {
+    margin-bottom: 0;
+    text-align: left;
+  }
+}
+
+.calendar-header__multiselects {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--qalendar-spacing);
+}
+
+.calendar-header__chevron-arrows {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.calendar-header__chevron-arrow {
+  cursor: pointer;
+  transition: color 0.2s ease;
+  font-size: var(--qalendar-font-m);
+}
+
+.calendar-header__chevron-arrow:hover {
+  color: var(--qalendar-gray-quite-dark);
+}
+
+.calendar-header__mode-picker {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  height: 36px;
+  border-radius: 4px;
+  font-size: var(--qalendar-font-m);
+  cursor: pointer;
+  border: var(--qalendar-border-gray-thin);
+}
+
+:global(.dark) .calendar-header__mode-picker {
+  border-color: transparent;
+}
+
+.calendar-header__mode-value {
+  padding: 0 var(--qalendar-spacing);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  border-radius: 4px;
+}
+
+:global(.dark) .calendar-header__mode-value {
+  background-color: var(--qalendar-dark-mode-lightly-elevated-surface);
+}
+
+.calendar-header__mode-options {
+  position: absolute;
+  z-index: 51;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: var(--qalendar-border-gray-thin);
+  background-color: #fff;
+}
+
+:global(.dark) .calendar-header__mode-options {
+  border-color: transparent;
+  background-color: var(--qalendar-dark-mode-elevated-surface);
+}
+
+.calendar-header__mode-option {
+  padding: var(--qalendar-spacing-half) var(--qalendar-spacing);
+}
+
+.calendar-header__mode-option:hover {
+  background-color: var(--qalendar-option-hover);
+}
+</style>

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

@@ -0,0 +1,137 @@
+<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 { Icon } from '@bagelink/vue'
+import { ref, computed, 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,
+	},
+})
+
+const emit = defineEmits(['eventWasClicked'])
+
+const icons = {
+	clock: 'clock',
+	user: 'user',
+	description: 'comment',
+	trash: 'delete',
+	edit: 'pen-to-square',
+	times: 'close',
+	topic: 'question-circle',
+	location: 'location_on',
+}
+
+const colors = EVENT_COLORS as { [key: string]: string }
+const eventBackgroundColor = ref('')
+const eventColor = ref('#fff')
+const eventIdPrefix = 'agenda__event-'
+
+const eventTime = computed(() => {
+	return DATE_TIME_STRING_PATTERN.test(props.calendarEvent.time.start)
+		? props.time.getLocalizedTimeRange(
+			props.calendarEvent.time.start,
+			props.calendarEvent.time.end
+		)
+		: null
+})
+
+const elementId = computed(() => {
+	return eventIdPrefix + props.calendarEvent.id
+})
+
+function setColors() {
+	if (
+		props.calendarEvent.colorScheme
+		&& props.config.style?.colorSchemes
+		&& props.config.style.colorSchemes[props.calendarEvent.colorScheme]
+	) {
+		eventColor.value = props.config.style.colorSchemes[props.calendarEvent.colorScheme].color
+		eventBackgroundColor.value = props.config.style.colorSchemes[props.calendarEvent.colorScheme].backgroundColor
+		return
+	}
+
+	if (props.calendarEvent.color) {
+		eventBackgroundColor.value = colors[props.calendarEvent.color]
+		return
+	}
+
+	eventBackgroundColor.value = colors.blue
+}
+
+function handleClickOnEvent() {
+	const eventElement = document.getElementById(elementId.value)
+	emit('eventWasClicked', {
+		clickedEvent: props.calendarEvent,
+		eventElement,
+	})
+}
+
+onMounted(() => {
+	setColors()
+})
+</script>
+
+<template>
+	<div
+		:id="elementId"
+		class="agenda__event is-event"
+		@click.prevent="handleClickOnEvent"
+	>
+		<span
+			v-if="eventTime && !calendarEvent.originalEvent"
+			class="agenda__event-time"
+		>
+			<Icon :icon="icons.clock" />
+			{{ eventTime }}
+		</span>
+
+		<span class="agenda__event-title">
+			{{ calendarEvent.title }}
+		</span>
+		<span
+			v-if="calendarEvent.with"
+			class="agenda__event-with"
+		>
+			<Icon :icon="icons.user" />
+			{{ calendarEvent.with }}
+		</span>
+
+		<span
+			v-if="calendarEvent.location"
+			class="agenda__event-location"
+		>
+			<Icon :icon="icons.location" />
+			{{ calendarEvent.location }}
+		</span>
+	</div>
+</template>
+
+<style scoped>
+.agenda__event {
+	background-color: v-bind(eventBackgroundColor);
+	color: v-bind(eventColor);
+	display: flex;
+	flex-flow: column;
+	justify-content: flex-start;
+	border-radius: 4px;
+	font-size: var(--qalendar-font-2xs);
+	margin-bottom: 4px;
+	padding: var(--qalendar-spacing);
+	cursor: pointer;
+	user-select: none;
+}
+</style>

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

@@ -0,0 +1,107 @@
+<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 { getLanguage, languageKeys } from '../../language'
+import AgendaEventTile from './AgendaEventTile.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,
+	},
+})
+
+const emit = defineEmits(['eventWasClicked'])
+</script>
+
+<template>
+	<div class="agenda__wrapper">
+		<header class="agenda__header">
+			<div class="agenda__header-day-name">
+				{{ day.dayName }}
+			</div>
+			<div class="agenda__header-date">
+				<!--        Here we want to display leading zero for days 1-9, in order to prevent layout shifts -->
+				{{ day.dateTimeString.substring(8, 10) }}
+			</div>
+		</header>
+		<div class="agenda__content">
+			<div
+				v-if="day.events.length === 0"
+				class="is-empty"
+			>
+				{{ getLanguage(languageKeys.noEvent, time.CALENDAR_LOCALE) }}
+			</div>
+			<div
+				v-else
+				class="agenda__content-events-list"
+			>
+				<AgendaEventTile
+					v-for="dayEvent of day.events"
+					:key="`agenda_event_${dayEvent.id}`"
+					:day="day"
+					:config="config"
+					:calendar-event="dayEvent"
+					:time="time"
+					@event-was-clicked="emit('eventWasClicked', $event)"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.agenda__wrapper {
+  display: flex;
+  flex-flow: row;
+  padding: 10px 5px 0;
+}
+
+.agenda__header {
+  padding-right: 10px;
+}
+
+.agenda__header-day-name {
+  text-align: center;
+  color: var(--qalendar-theme-color);
+  font-size: var(--qalendar-font-xs);
+  font-weight: bold;
+}
+
+.agenda__header-date {
+  height: fit-content;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5px;
+  border-radius: 4px;
+  background-color: var(--qalendar-theme-color);
+  color: white;
+  font-weight: 600;
+  font-size: var(--qalendar-font-m);
+}
+
+.agenda__content {
+  display: flex;
+  flex-flow: column;
+  width: 100%;
+  height: auto;
+}
+
+.agenda__content .is-empty {
+  min-height: 70px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>