@bagelink/vue 0.0.1220 → 0.0.1224

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;
+    }
+}