@bagelink/vue 1.2.15 → 1.2.20

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

@@ -1,60 +0,0 @@
-/* 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;
-}

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

@@ -1,153 +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 { PeriodInterface } from '../../typings/interfaces/period.interface'
-import type { ModeType } from '../../typings/types'
-
-import { DateInput, TabsNav, Btn } from '@bagelink/vue'
-import { ref, computed, watch } from 'vue'
-import { translate } from '../../language'
-
-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 DateInput>>()
-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 = ['day', 'month',]
-	else modeOptions.value = ['agenda', 'day', 'week', 'month']
-}, { 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="flex gap-05 space-between pb-1 datePick">
-		<div class="flex gap-1 m_gap-025">
-			<Btn flat icon="chevron_left" @click="goToPeriod('previous')" />
-			<DateInput
-				ref="periodSelect"
-				v-model="currentPeriod.selectedDate"
-				class="m-0 bg-input-transparent m_w-max-100px txt10 p-0"
-				:mode="mode"
-				center
-				@update:modelValue="handlePeriodChange"
-			/>
-			<Btn flat icon="chevron_right" @click="goToPeriod('next')" />
-		</div>
-		<TabsNav v-if="!onlyDayModeIsEnabled" v-model="modeLocal" :tabs="modeOptions.map(id => ({ id, label: translate(id) }))" group="mode" @update:model-value="emit('changeMode', $event)" />
-	</div>
-</template>
-
-<style>
-.datePick input{
-	min-width: 2px !important;
-}
-@media screen and (max-width: 910px) {
-	.datePick{
-	--input-font-size: 0.75rem;
-	--btn-padding: 20px;
-	}
-}
-</style>

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

@@ -1,135 +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 { 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>
-
-<!--  flex column align-items-start txt14 -->
-<template>
-	<div
-		:id="elementId"
-		class="agenda__event is-event rounded mb-05 pointer user-select-none p-1 grid gap-1"
-		@click.prevent="handleClickOnEvent"
-	>
-		<div class="flex txt14 flex column align-items-start gap-025 opacity-6">
-			<span
-				v-if="eventTime && !calendarEvent.originalEvent"
-				class="agenda__event-time flex gap-025"
-			>
-				<Icon :icon="icons.clock" :size="0.8" />
-				{{ eventTime }}
-			</span>
-
-			<span
-				v-if="calendarEvent.location"
-				class="agenda__event-location flex gap-025"
-			>
-				<Icon :icon="icons.location" :size="1" />
-				{{ calendarEvent.location }}
-			</span>
-		</div>
-		<div>
-			<div class="agenda__event-title">
-				{{ calendarEvent.title }}
-			</div>
-			<div
-				v-if="calendarEvent.with"
-				class="agenda__event-with txt14 opacity-6"
-			>
-				<Icon :icon="icons.user" />
-				{{ calendarEvent.with }}
-			</div>
-		</div>
-	</div>
-</template>
-
-<style scoped>
-.agenda__event {
-	border-inline-start: 0.75rem solid;
-	border-color: v-bind(eventBackgroundColor);
-	background: var(--input-bg);
-	grid-template-columns: 200px auto;
-	box-shadow: 0 0 0 1px var(--border-color);
-}
-</style>

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

@@ -1,72 +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 { getLanguage, languageKeys } from '../../language'
-import AgendaEventTile from './AgendaEventTile.vue'
-
-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 grid align-items-start gap-1 h-100p ">
-		<header class="m_sticky">
-			<div class="agenda__header-day-name txt-center ">
-				{{ day.dayName.slice(0, 3) }}
-			</div>
-			<div class="agenda__header-date flex justify-content-center rounded p-025 txt24 line-height-04 ">
-				<!--        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 flex column w-100p h-100p min-h-100px pt-05 border-start ps-1 m_pt-0 min-h-50px">
-			<div
-				v-if="day.events.length === 0"
-				class="align-items-center flex justify-content-center h-100p opacity-6"
-			>
-				{{ getLanguage(languageKeys.noEvent, time.CALENDAR_LOCALE) }}
-			</div>
-			<div
-				v-else
-				class="w-100p"
-			>
-				<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 {
-	grid-template-columns: 100px 1fr;
-}
-@media screen and (max-width: 910px) {
-	.agenda__wrapper {
-		grid-template-columns: 40px 1fr;
-	}
-}
-</style>

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

@@ -1,256 +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 { ref, computed } from 'vue'
-import { getLanguage } from '../../language'
-import { languageKeys } from '../../language/keys'
-import Event from './Event.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,
-	},
-	isSelected: {
-		type: Boolean,
-		default: false,
-	},
-})
-
-const emit = defineEmits<{
-	(e: 'eventWasClicked', event: EventInterface): void
-	(e: 'eventWasDragged', event: EventInterface): void
-	(e: 'updatedPeriod', period: { start: Date, end: Date, selectedDate: Date }): void
-	(e: 'dateWasClicked', date: string): void
-	(e: 'dayWasSelected', day: DayInterface): void
-}>()
-
-const isActiveDroppable = ref(false)
-
-const canBeDropped = computed(() => isActiveDroppable.value)
-
-const hideLeadingAndTrailingDate = computed(() => props.day.isTrailingOrLeadingDate === true && props.config.month?.showTrailingAndLeadingDates === false
-)
-
-const isToday = computed(() => {
-	const { year, month, date } = props.time.getAllVariablesFromDateTimeString(props.day.dateTimeString)
-	return props.time.dateIsToday(new Date(year, month, date))
-})
-
-function getMoreEvents() {
-	const { date, month, year } = props.time.getAllVariablesFromDateTimeString(props.day.dateTimeString)
-	const selectedDate = new Date(year, month, date)
-	const week = props.time.getCalendarWeekDateObjects(selectedDate)
-	const start = week[0]
-	const end = week[6]
-	emit('updatedPeriod', { start, end, selectedDate })
-}
-
-function handleDragLeave() {
-	isActiveDroppable.value = false
-}
-
-function handleDragEnd(mouseEvent: DragEvent) {
-	isActiveDroppable.value = false
-	mouseEvent.stopPropagation()
-}
-
-function handleDrop(dropEvent: DragEvent) {
-	isActiveDroppable.value = false
-	dropEvent.stopPropagation()
-
-	if (!dropEvent || !dropEvent.dataTransfer) return
-
-	const calendarEvent: EventInterface = JSON.parse(dropEvent.dataTransfer.getData('json'))
-	const eventDroppedOnSameDay = props.time.dateStringsHaveEqualDates(
-		calendarEvent.time.start,
-		props.time.dateStringFrom(props.day.dateTimeString),
-	)
-	if (eventDroppedOnSameDay) return
-
-	calendarEvent.time.start = calendarEvent.time.start.replace(
-		/^\d{4}-\d{2}-\d{2}/,
-		props.time.dateStringFrom(props.day.dateTimeString)
-	)
-	calendarEvent.time.end = calendarEvent.time.end.replace(
-		/^\d{4}-\d{2}-\d{2}/,
-		props.time.dateStringFrom(props.day.dateTimeString)
-	)
-	emit('eventWasDragged', calendarEvent)
-}
-
-function handleDragOver(e: DragEvent) {
-	isActiveDroppable.value = true
-	e.preventDefault()
-	return false
-}
-
-function emitDayWasClicked() {
-	emit('dateWasClicked', props.time.dateStringFrom(props.day.dateTimeString))
-	if (props.config.isSmall) emit('dayWasSelected', props.day)
-}
-</script>
-
-<template>
-	<div
-		v-if="!hideLeadingAndTrailingDate"
-		:id="`day-${time.dateStringFrom(day.dateTimeString)}`"
-		class="calendar-month__weekday"
-		:class="{
-			'is-droppable': canBeDropped,
-			'color-gray': day.isTrailingOrLeadingDate,
-			'is-selected': isSelected,
-			'is-today': isToday,
-		}"
-		@click.self="emitDayWasClicked"
-		@dragleave="handleDragLeave"
-		@dragover="handleDragOver"
-		@drop="handleDrop"
-		@dragend="handleDragEnd"
-	>
-		<slot
-			name="dayCell"
-			:day-data="day"
-		>
-			<div class="w-100p flex justify-content-end txt14 p-025 m_h-100p">
-				<p
-					class="calendar-month__day-date ms-auto flex aspect-ratio-1 w-30px h-30px justify-content-center m_mx-auto "
-					@click="emitDayWasClicked"
-				>
-					{{ day.dateTimeString.substring(8, 10).startsWith('0') ? day.dateTimeString.substring(9, 10) : day.dateTimeString.substring(8, 10) }}
-				</p>
-			</div>
-
-			<div class="calendar-month_events">
-				<template
-					v-for="(calendarEvent, index) in day.events"
-					:key="index"
-				>
-					<Event
-						v-if="index < 3"
-						:key="calendarEvent.id"
-						:calendar-event="calendarEvent"
-						:config="config"
-						:time="time"
-						:day="day"
-						@eventWasClicked="$event => emit('eventWasClicked', $event.clickedEvent)"
-					>
-						<template #monthEvent="p">
-							<slot
-								:event-data="p.eventData"
-								name="monthEvent"
-							/>
-						</template>
-					</Event>
-				</template>
-				<div
-					v-if="day.events.length >= 4"
-					class="calendar-month__weekday-more"
-					@click="getMoreEvents"
-				>
-					{{ getLanguage(languageKeys.moreEvents, time.CALENDAR_LOCALE) }}
-				</div>
-			</div>
-		</slot>
-	</div>
-
-	<div
-		v-else
-		class="space-reserver"
-	/>
-</template>
-
-<style scoped>
-.calendar-month__weekday {
-  height: 100%;
-  flex: 1;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  border-inline-end: var(--qalendar-border-gray-thin);
-  border-bottom: var(--qalendar-border-gray-thin);
-  overflow: hidden;
-  transition: background-color 0.2s ease-in-out;
-}
-.calendar-month__weekday:active {
-  background-color: var(--qalendar-light-gray);
-}
-
-.calendar-month__weekday.is-droppable {
-  background-color: var(--qalendar-light-gray);
-}
-
-.calendar-month__weekday:last-child {
-  border-inline-end: 0;
-}
-
-.calendar-month__weekday.is-selected {
-  box-shadow: inset 0 0 0 1px var(--bgl-primary);
-}
-
-.calendar-month__weekday-more {
-  font-size: var(--qalendar-font-2xs);
-  width: 100%;
-  padding-inline-start: 4px;
-  color: var(--qalendar-gray-quite-dark);
-  cursor: pointer;
-}
-
-.calendar-month_events {
-  width: 100%;
-}
-
-.qalendar-is-small .calendar-month_events {
-  display: flex;
-  flex-flow: row;
-  justify-content: center;
-}
-
-.qalendar-is-small .calendar-month_events .calendar-month__weekday-more {
-  display: none;
-}
-
-.calendar-month__weekday.is-today .calendar-month__day-date {
-  background-color: var(--bgl-primary);
-  color: #fff;
-  border-radius: 50%;
-  padding: 4px 6px;
-}
-
-.qalendar-is-small .calendar-month__weekday.is-today .calendar-month__day-date {
-  padding: 2px 4px;
-}
-
-.space-reserver {
-  height: 100%;
-  flex: 1;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  border-inline-end: var(--qalendar-border-gray-thin);
-  border-bottom: var(--qalendar-border-gray-thin);
-  border-inline-end-color: transparent;
-}
-
-.space-reserver + .calendar-month__weekday:not(.trailing-or-leading) {
-  border-inline-start: var(--qalendar-border-gray-thin);
-}
-
-@media (prefers-color-scheme: dark) {
-  .calendar-month__weekday,
-  .space-reserver {
-    border-color: var(--qalendar-dark-mode-line-color);
-  }
-}
-</style>