@bagelink/vue 0.0.1220 → 0.0.1227

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

@@ -137,20 +137,20 @@ onMounted(() => {
 </script>
 
 <template>
-	<div class="calendar-month">
+	<div class="calendar-month relative column w-100p h-100p overflow-y flex flex-stretch">
 		<div
-			class="calendar-month__week-day-names"
+			class="flex space-between"
 		>
 			<WeekDay
 				v-for="(day, dayIndex) in month[0]"
 				:key="dayIndex"
-				class="calendar-month__week-day-name"
+				class=" txt-center flex-shrink flex-grow"
 				:config="config"
 				:day="day"
 				:time="time"
 			/>
 		</div>
-		<div class="calendar-month__weeks">
+		<div class="calendar-month__weeks h-100p flex-grow flex flex-stretch column space-between">
 			<div
 				v-for="(week, weekIndex) in month"
 				:key="weekIndex"
@@ -188,7 +188,7 @@ onMounted(() => {
 
 		<div
 			v-if="!(config.month?.showEventsOnMobileView === false)"
-			class="calendar-month__day_events"
+			class="calendar-month__day_events w-100p pt-1"
 		>
 			<AgendaEvents
 				v-if="selectedDay"
@@ -221,58 +221,12 @@ onMounted(() => {
 </template>
 
 <style>
-.calendar-month {
-	position: relative;
-	display: flex;
-	flex-flow: column;
-	width: 100%;
-	height: 100%;
-	overflow-y: auto;
-}
-
-:global(.qalendar-is-small) .calendar-month {
-	height: initial;
-}
-
-.calendar-month__week-day-names {
-	display: flex;
-	justify-content: space-between;
-}
-
-.calendar-month__week-day-name {
-	flex: 1;
-	text-align: center;
-}
-
-.calendar-month__weeks {
-	height: 100%;
-	flex-grow: 1;
-	display: flex;
-	flex-flow: column;
-	justify-content: space-between;
-}
-
-.calendar-month__week {
-	display: flex;
-	flex: 1;
-}
-
-.calendar-month__week:first-child {
-	border-top: var(--qalendar-border-gray-thin);
-}
+	.calendar-month__week {
+		display: flex;
+		flex: 1;
+	}
 
-@media (prefers-color-scheme: dark) {
 	.calendar-month__week:first-child {
-		border-color: var(--qalendar-dark-mode-line-color);
+		border-top: var(--qalendar-border-gray-thin);
 	}
-}
-
-.calendar-month__day_events {
-	height: 100%;
-	display: none;
-}
-
-:global(.qalendar-is-small) .calendar-month__day_events {
-	display: block;
-}
 </style>

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

@@ -8,18 +8,8 @@ defineProps<{
 
 <template>
 	<span
-		class="calendar-month__day-name"
+		class="txt12 normal block color-black pb-025"
 	>
 		{{ day.dayName }}
 	</span>
 </template>
-
-<style scoped>
-.calendar-month__day-name {
-  display: block;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--qalendar-gray-quite-dark);
-  margin-bottom: var(--qalendar-spacing-half);
-}
-</style>

package/src/components/Calendar/components/partials/EventFlyout.vue

@@ -414,7 +414,8 @@ onBeforeUnmount(() => {
 }
 
 .is-title {
-	font-size: var(--qalendar-font-l);
+	font-size: 18px;
+	line-height: 1.2;
 	align-items: center;
 }
 

package/src/components/Calendar/components/week/Day.vue

@@ -186,27 +186,13 @@ onMounted(() => {
 	padding: 2px;
 }
 
-.calendar-week__day .calendar-week__day-interval.has-border {
-	border-bottom: var(--qalendar-border-dashed-gray-thin);
-}
-
 .calendar-week__day:first-child {
-	border-left: 1px dashed rgb(224 224 224);
-}
-
-@media (prefers-color-scheme: dark) {
-	.calendar-week__day:first-child {
-		border-color: var(--qalendar-dark-mode-line-color);
-	}
+	border-inline-start: 1px solid var(--border-color);
 }
 
-.calendar-week__day:not(:last-child) {
-	border-right: 1px dashed rgb(224 224 224);
-}
+.calendar-week__day {
+	border-inline-end: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--border-color);
 
-@media (prefers-color-scheme: dark) {
-	.calendar-week__day:not(:last-child) {
-		border-color: var(--qalendar-dark-mode-line-color);
-	}
 }
 </style>

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

@@ -433,7 +433,7 @@ function handleBlur() {
 				{{ event.title }}
 			</div>
 
-			<div class="calendar-week__event-row is-time">
+			<div class="calendar-week__event-row is-time flex">
 				<Icon
 					:icon="icons.clock"
 					class="calendar-week__event-icon"

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

@@ -34,9 +34,9 @@ const eventElementIdPrefix = 'week-timeline__event-id-'
 
 const eventWidth = computed(() => {
 	if (props.mode !== 'day')
-		return `calc(${props.scheduleEvent.nDays * 100}% - 6px)`
+		return `calc(${props.scheduleEvent.nDays * 100}%)`
 
-	return 'calc(100% - 6px)'
+	return 'calc(100%)'
 })
 
 function setColors() {

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

@@ -288,7 +288,7 @@ function setCurrentTime() {
 		@day-was-clicked="$emit('dayWasClicked', $event)"
 	/>
 
-	<div class="calendar-week__wrapper">
+	<div class="calendar-week__wrapper relative ps-3-5">
 		<EventFlyout
 			v-if="!config.eventDialog || !config.eventDialog.isDisabled"
 			:calendar-event-prop="selectedEvent"

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

@@ -31,7 +31,7 @@ function getDaysDate(day: DayInterface) {
 </script>
 
 <template>
-	<div class="week-timeline">
+	<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"
@@ -42,12 +42,14 @@ function getDaysDate(day: DayInterface) {
 			}"
 			@click="emit('dayWasClicked', time.dateStringFrom(day.dateTimeString))"
 		>
-			<div class="week-timeline__day-name">
-				{{ day.dayName.substring(0, 2).toUpperCase() }}
-			</div>
+			<div class="flex justify-content-center gap-025 txt12">
+				<div class="">
+					{{ day.dayName.charAt(0).toUpperCase() + day.dayName.slice(1, 3).toLowerCase() }}
+				</div>
 
-			<div class="week-timeline__date">
-				{{ getDaysDate(day) }}
+				<div class="week-timeline__date txt14 round inline-flex justify-content-center">
+					{{ getDaysDate(day) }}
+				</div>
 			</div>
 
 			<div class="week-timeline__events">
@@ -73,54 +75,27 @@ function getDaysDate(day: DayInterface) {
 	height: fit-content;
 	display: flex;
 	justify-content: space-evenly;
-	padding-bottom: var(--qalendar-spacing-half);
-	padding-left: var(--qalendar-week-padding-left);
-	border-bottom: var(--qalendar-border-gray-thin);
 }
 
 .mode-is-day .week-timeline {
-	width: 100%;
-	padding-left: 0;
+	width: calc(100% - 3.5em);
 }
 
 .week-timeline__day {
 	width: 100%;
-	display: flex;
-	flex-flow: column;
-	align-items: center;
-	justify-content: flex-start;
-}
-
-.week-timeline__day-name {
-	font-size: var(--qalendar-font-3xs);
-	font-weight: 400;
-	margin-bottom: 4px;
-	color: var(--qalendar-gray-quite-dark);
 }
 
 .week-timeline__date {
-	font-size: 1.2rem;
-	margin-bottom: 4px;
-	height: 2rem;
-	width: 2rem;
-	border-radius: 50%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+	height: 1rem;
+	width: 1rem;
 }
 
 .is-today .week-timeline__date {
-	background-color: var(--qalendar-blue);
-	color: #fff;
+	background: var(--bgl-primary);
+	color: var(--bgl-white);
 }
 
 .week-timeline__events {
-	width: 100%;
-	flex: 1;
-	border-right: 1px dashed rgb(224 224 224);
-}
 
-.week-timeline__day:first-child .week-timeline__events {
-	border-left: 1px dashed rgb(224 224 224);
 }
 </style>

package/src/components/Calendar/constants.ts

@@ -1,13 +1,13 @@
 export const EVENT_COLORS = {
-  yellow: "rgb(244, 180, 0)",
-  blue: "rgb(38, 132, 255)",
-  green: "rgb(51, 182, 121)",
-  red: "rgb(255, 84, 86)",
-  pink: "rgb(239, 139, 239)",
-  purple: "rgb(157, 114, 245)",
-  turquoise: "rgb(64, 190, 190)",
-  brown: "rgb(169, 99, 30)",
-};
+	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}$/;
+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/language/index.ts

@@ -26,12 +26,15 @@ export function overrideShortLocaleWithLongLocale(locale: string): string {
 	return locale
 }
 
-export function getLanguage(languageKeys: any, locale: string) {
+export function getLanguage(languageKeys: any, locale: string = 'en-US') {
 	locale = overrideShortLocaleWithLongLocale(locale)
 
 	return languageKeys[locale]
-		? languageKeys[locale]
-		: languageKeys['en-US']
+}
+export function translate(key: string, locale: string = 'en-US') {
+	const language: Record<string, any> = languageKeys[key as keyof typeof languageKeys] || {}
+
+	return language[locale] || key
 }
 
 export { languageKeys }

package/src/components/Calendar/language/keys.ts

@@ -1,90 +1,93 @@
 export const languageKeys = {
-  /** The following three keys, describe the calendar modes */
-  week: {
-    "it-IT": "Settimana",
-    "en-US": "Week",
-    "de-DE": "Woche",
-    "sv-SE": "Vecka",
-    "zh-CN": "周",
-    "pt-BR": "Semana",
-    "fr-FR": "Semaine",
-    "th-TH": "สัปดาห์",
-    "nl-NL": "Week",
-    "ru-RU": "Неделя",
-    "ar-YE": "إسبوع",
-    "es-ES": "Semana",
-    "ja-JP": "週",
-    "pl-PL": "Tydzień", 
-    "hu-HU": "Hét",
-  },
-  month: {
-    "it-IT": "Mese",
-    "en-US": "Month",
-    "de-DE": "Monat",
-    "sv-SE": "Månad",
-    "zh-CN": "月",
-    "pt-BR": "Mês",
-    "fr-FR": "Mois",
-    "th-TH": "เดือน",
-    "nl-NL": "Maand",
-    "ru-RU": "Месяц",
-    "ar-YE": "شهر",
-    "es-ES": "Mes",
-    "ja-JP": "月",
-    "pl-PL": "Miesiąc", 
-    "hu-HU": "Hónap",
-  },
-  day: {
-    "it-IT": "Giorno",
-    "en-US": "Day",
-    "de-DE": "Tag",
-    "sv-SE": "Dag",
-    "zh-CN": "日",
-    "pt-BR": "Dia",
-    "fr-FR": "Jour",
-    "th-TH": "วัน",
-    "nl-NL": "Dag",
-    "ru-RU": "День",
-    "ar-YE": "يوم",
-    "es-ES": "Día",
-    "ja-JP": "日",
-    "pl-PL": "Dzień",
-    "hu-HU": "Nap",
-  },
+	/** The following three keys, describe the calendar modes */
+	week: {
+		'it-IT': 'Settimana',
+		'en-US': 'Week',
+		'de-DE': 'Woche',
+		'sv-SE': 'Vecka',
+		'zh-CN': '周',
+		'pt-BR': 'Semana',
+		'fr-FR': 'Semaine',
+		'th-TH': 'สัปดาห์',
+		'nl-NL': 'Week',
+		'ru-RU': 'Неделя',
+		'ar-YE': 'إسبوع',
+		'es-ES': 'Semana',
+		'ja-JP': '週',
+		'pl-PL': 'Tydzień',
+		'hu-HU': 'Hét',
+	},
+	month: {
+		'it-IT': 'Mese',
+		'en-US': 'Month',
+		'de-DE': 'Monat',
+		'sv-SE': 'Månad',
+		'zh-CN': '月',
+		'pt-BR': 'Mês',
+		'fr-FR': 'Mois',
+		'th-TH': 'เดือน',
+		'nl-NL': 'Maand',
+		'ru-RU': 'Месяц',
+		'ar-YE': 'شهر',
+		'es-ES': 'Mes',
+		'ja-JP': '月',
+		'pl-PL': 'Miesiąc',
+		'hu-HU': 'Hónap',
+	},
+	day: {
+		'it-IT': 'Giorno',
+		'en-US': 'Day',
+		'de-DE': 'Tag',
+		'sv-SE': 'Dag',
+		'zh-CN': '日',
+		'pt-BR': 'Dia',
+		'fr-FR': 'Jour',
+		'th-TH': 'วัน',
+		'nl-NL': 'Dag',
+		'ru-RU': 'День',
+		'ar-YE': 'يوم',
+		'es-ES': 'Día',
+		'ja-JP': '日',
+		'pl-PL': 'Dzień',
+		'hu-HU': 'Nap',
+	},
+	agenda: {
+		'en-US': 'Agenda',
+	},
+	/** Other keys */
+	moreEvents: {
+		'it-IT': '+ altri eventi',
+		'en-US': '+ more events',
+		'de-DE': '+ weitere Ereignisse',
+		'sv-SE': '+ fler event',
+		'zh-CN': '列出其他结果',
+		'pt-BR': '+ mais eventos',
+		'fr-FR': '+ d\'autres événements',
+		'th-TH': '+ เหตุการณ์เพิ่มเติม',
+		'nl-NL': 'meer evenementen',
+		'ru-RU': '+ ещё события',
+		'ar-YE': '+ المزيد من الأحداث',
+		'es-ES': 'más eventos',
+		'ja-JP': 'その他イベント',
+		'pl-PL': '+ więcej wydarzeń',
+		'hu-HU': 'További események',
+	},
 
-  /** Other keys */
-  moreEvents: {
-    "it-IT": "+ altri eventi",
-    "en-US": "+ more events",
-    "de-DE": "+ weitere Ereignisse",
-    "sv-SE": "+ fler event",
-    "zh-CN": "列出其他结果",
-    "pt-BR": "+ mais eventos",
-    "fr-FR": "+ d'autres événements",
-    "th-TH": "+ เหตุการณ์เพิ่มเติม",
-    "nl-NL": "meer evenementen",
-    "ru-RU": "+ ещё события",
-    "ar-YE": "+ المزيد من الأحداث",
-    "es-ES": "más eventos",
-    "ja-JP": "その他イベント",
-    "pl-PL": "+ więcej wydarzeń",
-    "hu-HU": "További események",
-  },
-  noEvent: {
-    'it-IT': 'Nessun evento',
-    'en-US': 'No events',
-    'de-DE': 'Keine Ereignisse',
-    'sv-SE': 'Inga event',
-    'zh-CN': '沒有活動',
-    'pt-BR': 'Sem eventos',
-    'fr-FR': 'Aucun Evènement',
-    'th-TH': 'ไม่มีกิจกรรม',
-    'nl-NL': 'Geen evenementen',
-    'ru-RU': 'Нет событий',
-    'ar-YE': 'لا أحداث',
-    'es-ES': 'No hay eventos',
-    "ja-JP": "イベントなし",
-    "pl-PL": "Brak wydarzeń",
-    "hu-HU": "Nincs esemény",
-  },
-};
+	noEvent: {
+		'it-IT': 'Nessun evento',
+		'en-US': 'No events',
+		'de-DE': 'Keine Ereignisse',
+		'sv-SE': 'Inga event',
+		'zh-CN': '沒有活動',
+		'pt-BR': 'Sem eventos',
+		'fr-FR': 'Aucun Evènement',
+		'th-TH': 'ไม่มีกิจกรรม',
+		'nl-NL': 'Geen evenementen',
+		'ru-RU': 'Нет событий',
+		'ar-YE': 'لا أحداث',
+		'es-ES': 'No hay eventos',
+		'ja-JP': 'イベントなし',
+		'pl-PL': 'Brak wydarzeń',
+		'hu-HU': 'Nincs esemény',
+	},
+}

package/src/components/Calendar/styles/_variables.css

@@ -1,51 +1,47 @@
 :root {
-	/** Color */
-	--qalendar-blue: rgb(38 132 255);
-	--qalendar-blue-transparent: rgba(38 132 255 / 90%);
-	--qalendar-gray-quite-dark: rgb(110 110 110);
-	--qalendar-gray: rgb(180 180 180);
-	--qalendar-green: rgb(51 182 121);
-	--qalendar-theme-color: var(--qalendar-blue);
-	--qalendar-light-gray: rgba(240 236 236 / 76%);
-	--qalendar-option-hover: var(--qalendar-light-gray);
+    /** Color */
+    --qalendar-gray-quite-dark: rgb(110 110 110);
+    --qalendar-gray: rgb(180 180 180);
+    --qalendar-green: rgb(51 182 121);
+    --qalendar-theme-color: var(--qalendar-blue);
+    --qalendar-light-gray: rgba(240 236 236 / 76%);
+    --qalendar-option-hover: var(--qalendar-light-gray);
 
-	--qalendar-dark-mode-elevated-surface: #383838;
-	--qalendar-dark-mode-lightly-elevated-surface: #2e2e2e;
-	--qalendar-dark-mode-text-primary: rgba(255 255 255 1);
-	--qalendar-dark-mode-text-secondary: rgba(255 255 255 0.7);
-	--qalendar-dark-mode-text-hint: rgba(255 255 255 0.5);
-	--qalendar-dark-mode-line-color: var(--qalendar-gray);
+    --qalendar-dark-mode-elevated-surface: #383838;
+    --qalendar-dark-mode-lightly-elevated-surface: #2e2e2e;
+    --qalendar-dark-mode-text-primary: rgba(255 255 255 1);
+    --qalendar-dark-mode-text-secondary: rgba(255 255 255 0.7);
+    --qalendar-dark-mode-text-hint: rgba(255 255 255 0.5);
+    --qalendar-dark-mode-line-color: var(--qalendar-gray);
 
-	/** Borders */
-	--qalendar-border-gray-thin: 1px solid rgb(224 224 224);
-	--qalendar-border-dashed-gray-thin: 1px dashed rgb(224 224 224);
-	--qalendar-border-blue-thin: 1px solid var(--qalendar-theme-color);
-	--qalendar-border-radius: 8px;
+    /** Borders */
+    --qalendar-border-gray-thin: 1px solid rgb(224 224 224);
+    --qalendar-border-dashed-gray-thin: 1px dashed rgb(224 224 224);
+    --qalendar-border-blue-thin: 1px solid var(--qalendar-theme-color);
+    --qalendar-border-radius: 8px;
 
-	/** Spacing */
-	--qalendar-spacing: 10px;
-	--qalendar-spacing-half: 5px;
-	--qalendar-spacing-double: 20px;
+    /** Spacing */
+    --qalendar-spacing: 10px;
+    --qalendar-spacing-half: 5px;
+    --qalendar-spacing-double: 20px;
 
-	/** Miscellaneous */
-	--qalendar-box-shadow: 0 4px 4px rgba(0 0 0 / 6%), 0 1px 4px rgba(0 0 0 / 18%);
-	--qalendar-text-transition: color 0.2s ease;
-	--qalendar-week-padding-left: 56px;
+    /** Miscellaneous */
+    --qalendar-box-shadow: 0 4px 4px rgba(0 0 0 / 6%), 0 1px 4px rgba(0 0 0 / 18%);
+    --qalendar-text-transition: color 0.2s ease;
+    --qalendar-week-padding-left: 56px;
 
-	/** Font */
-	--qalendar-font-3xs: 0.625rem;
-	--qalendar-font-2xs: 0.688rem;
-	--qalendar-font-xs: 0.75rem;
-	--qalendar-font-s: 0.875rem;
-	--qalendar-font-m: 1rem;
-	--qalendar-font-l: 1.25rem;
-	--qalendar-font-xl: 1.5rem;
+    /** Font */
+    --qalendar-font-2xs: 10px;
+    --qalendar-font-xs: 12px;
+    --qalendar-font-s: 14px;
+    --qalendar-font-m: 16px;
+    --qalendar-font-l: 18px;
 }
 
 @media (min-width: 62rem) {
-	.calendar-root {
-		--qalendar-spacing: 20px;
-		--qalendar-spacing-half: 10px;
-		--qalendar-spacing-double: 40px;
-	}
-}
+    .calendar-root {
+        --qalendar-spacing: 20px;
+        --qalendar-spacing-half: 10px;
+        --qalendar-spacing-double: 40px;
+    }
+}