@bagelink/vue 1.15.13 → 1.15.26

package/src/components/calendar/views/AgendaView.vue

@@ -229,37 +229,39 @@ onUnmounted(() => { containerRef.value?.removeEventListener('scroll', handleScro
 </template>
 
 <style scoped>
+
 .agenda-event-row {
-	grid-template-columns: 72px 1fr;
-	align-items: stretch;
+grid-template-columns: 72px 1fr;
+align-items: stretch;
 }
 
 .agenda-event-time::after {
-	content: '';
-	display: block;
-	width: 1px;
-	height: calc(100% - 2rem);
-	background: var(--bgl-border-color, #e6e8ec);
-	margin: 0.5rem auto 0;
+content: '';
+display: block;
+width: 1px;
+height: calc(100% - 2rem);
+background: var(--bgl-border-color, #e6e8ec);
+margin: 0.5rem auto 0;
 }
 
 /* .agenda-event-card {
-	border-inline-start: var(--event-color, var(--bgl-primary)) solid calc(var(--bgl-card-border-radius) + 0.25rem); 
+border-inline-start: var(--event-color, var(--bgl-primary)) solid calc(var(--bgl-card-border-radius) + 0.25rem); 
 } */
 
 .agenda-event-card h3::before {
-	content: '';
-	width: 10px;
-	height: 10px;
-	display: inline-block;
-	border-radius: 100%;
-	margin-inline-end: 0.35rem;
-	background: var(--event-color, var(--bgl-primary, #2563eb));
+content: '';
+width: 10px;
+height: 10px;
+display: inline-block;
+border-radius: 100%;
+margin-inline-end: 0.35rem;
+background: var(--event-color, var(--bgl-primary, #2563eb));
 }
 
 @media (max-width: 910px) {
 .agenda-event-row {
-	grid-template-columns: 50px 1fr;
+grid-template-columns: 50px 1fr;
 }
 }
+
 </style>

package/src/components/calendar/views/DayView.vue

@@ -264,90 +264,92 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
+
 .dayGrid {
-	display: grid;
-	grid-template-columns: 5rem 1fr;
+display: grid;
+grid-template-columns: 5rem 1fr;
 }
 
 .time-column {
-	width: 80px;
-	flex-shrink: 0;
+width: 80px;
+flex-shrink: 0;
 }
 
 .events-column {
-	flex-grow: 1;
-	position: relative;
-	border-inline-start: 1px solid var(--bgl-border-color);
-	min-height: 100%; /* Ensure the column fills the full height */
+flex-grow: 1;
+position: relative;
+border-inline-start: 1px solid var(--bgl-border-color);
+min-height: 100%; /* Ensure the column fills the full height */
 }
 
 .date-header {
-	padding: 0.5rem;
-	text-align: center;
+padding: 0.5rem;
+text-align: center;
 }
 
 .day-header .events-column {
-	border-inline-start: 1px solid transparent;
+border-inline-start: 1px solid transparent;
 }
 
 .time-slot {
-	height: 60px; /* Match this with the slotHeight variable */
-	display: flex;
-	align-items: flex-start; /* Align to top to match events */
-	justify-content: center;
-	padding: 0.5rem 0;
-	box-sizing: border-box;
+height: 60px; /* Match this with the slotHeight variable */
+display: flex;
+align-items: flex-start; /* Align to top to match events */
+justify-content: center;
+padding: 0.5rem 0;
+box-sizing: border-box;
 }
 
 .time-slots {
-	flex-grow: 1;
-	display: flex;
-	overflow: auto;
-	position: relative;
+flex-grow: 1;
+display: flex;
+overflow: auto;
+position: relative;
 }
 
 .event {
-	left: 10px;
-	right: 10px;
-	box-sizing: border-box;
+left: 10px;
+right: 10px;
+box-sizing: border-box;
 }
 
 .event:hover {
-	z-index: 2;
-	transform: scale(1.02);
+z-index: 2;
+transform: scale(1.02);
 }
 
 .event-content {
-	padding: 0.15rem 0.5rem;
-	color: white;
-	font-size: 0.9rem;
-	height: 100%;
-	overflow: hidden;
+padding: 0.15rem 0.5rem;
+color: white;
+font-size: 0.9rem;
+height: 100%;
+overflow: hidden;
 }
 
 .event-title {
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
+white-space: nowrap;
+overflow: hidden;
+text-overflow: ellipsis;
 }
 
 .event-time {
-	font-size: 0.8rem;
+font-size: 0.8rem;
 }
 
 .drag-preview {
-	border: 1px solid var(--bgl-primary);
-	background-color: rgba(var(--bgl-primary-rgb), 0.1);
-	box-sizing: border-box;
+border: 1px solid var(--bgl-primary);
+background-color: rgba(var(--bgl-primary-rgb), 0.1);
+box-sizing: border-box;
 }
 
 .current-time-line {
-	height: 2px;
-	background-color: var(--bgl-primary);
+height: 2px;
+background-color: var(--bgl-primary);
 }
 
 .current-time-dot {
-	background-color: var(--bgl-primary);
-	margin-right: -5px; /* Adjust dot position */
+background-color: var(--bgl-primary);
+margin-right: -5px; /* Adjust dot position */
 }
+
 </style>

package/src/components/calendar/views/MonthView.vue

@@ -156,142 +156,144 @@ function handleEventSelection(event: CalendarEvent, domEvent?: MouseEvent) {
 </template>
 
 <style scoped>
+
 .month-view {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	overflow: hidden;
+display: flex;
+flex-direction: column;
+height: 100%;
+overflow: hidden;
 }
 
 .month-header {
-	display: grid;
-	grid-template-columns: repeat(7, 1fr);
-	border-bottom: 1px solid var(--bgl-border-color);
+display: grid;
+grid-template-columns: repeat(7, 1fr);
+border-bottom: 1px solid var(--bgl-border-color);
 }
 
 .weekday {
-	padding: 0.5rem;
-	text-align: center;
-	color: var(--text-muted);
+padding: 0.5rem;
+text-align: center;
+color: var(--text-muted);
 }
 
 .month-grid {
-	display: grid;
-	grid-template-columns: repeat(7, 1fr);
-	grid-template-rows: repeat(6, 1fr);
-	flex-grow: 1;
-	overflow: auto;
-	border-inline-end: 1px solid var(--bgl-border-color);
+display: grid;
+grid-template-columns: repeat(7, 1fr);
+grid-template-rows: repeat(6, 1fr);
+flex-grow: 1;
+overflow: auto;
+border-inline-end: 1px solid var(--bgl-border-color);
 
 }
 
 .day-cell {
-	border-inline-start: 1px solid var(--bgl-border-color);
-	border-bottom: 1px solid var(--bgl-border-color);
-	padding: 0.5rem;
-	min-height: 100px;
-	display: flex;
-	flex-direction: column;
+border-inline-start: 1px solid var(--bgl-border-color);
+border-bottom: 1px solid var(--bgl-border-color);
+padding: 0.5rem;
+min-height: 100px;
+display: flex;
+flex-direction: column;
 }
 
 .day-number {
-	margin-bottom: 0.5rem;
+margin-bottom: 0.5rem;
 }
 
 .other-month {
-	background-color: var(--bgl-gray-light);
-	color: var(--bgl-gray);
+background-color: var(--bgl-gray-light);
+color: var(--bgl-gray);
 }
 
 .today {
-	background-color: var(--bgl-primary-light);
+background-color: var(--bgl-primary-light);
 }
 
 .today .day-number {
-	color: var(--bgl-primary);
+color: var(--bgl-primary);
 }
 
 .day-events {
-	flex-grow: 1;
-	overflow-y: auto;
+flex-grow: 1;
+overflow-y: auto;
 }
 
 .event-item {
-	margin-bottom: 0.25rem;
-	padding: 0.25rem;
-	border-radius: 4px;
-	color: white;
-	font-size: 0.8rem;
-	cursor: pointer;
-	transition: all 0.2s ease;
-	display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		min-width: 0;
-		justify-content: space-between;
-		/* Allow flex items to shrink */
+margin-bottom: 0.25rem;
+padding: 0.25rem;
+border-radius: 4px;
+color: white;
+font-size: 0.8rem;
+cursor: pointer;
+transition: all 0.2s ease;
+display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	min-width: 0;
+	justify-content: space-between;
+	/* Allow flex items to shrink */
 }
 
 .event-title {
-	font-weight: 500;
-	/* white-space: nowrap; */
-		height: 1lh;
-	overflow: hidden;
-	text-overflow: ellipsis;
+font-weight: 500;
+/* white-space: nowrap; */
+	height: 1lh;
+overflow: hidden;
+text-overflow: ellipsis;
 
 }
 
 .event-time {
-	font-size: 0.7rem;
-	opacity: 0.8;
+font-size: 0.7rem;
+opacity: 0.8;
 }
 
 .event-dot {
-	width: 6px;
-	height: 6px;
-	background-color: var(--bgl-primary);
-	border-radius: 50%;
-	margin: 0.25rem auto;
+width: 6px;
+height: 6px;
+background-color: var(--bgl-primary);
+border-radius: 50%;
+margin: 0.25rem auto;
 }
 
 .custom-popover {
-	position: fixed;
-	z-index: 1000;
-	min-width: 250px;
-	max-width: 350px;
-	background-color: white;
-	border-radius: var(--bgl-btn-border-radius);
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-	animation: fadeIn 0.2s ease;
-	transform-origin: center left;
+position: fixed;
+z-index: 1000;
+min-width: 250px;
+max-width: 350px;
+background-color: white;
+border-radius: var(--bgl-btn-border-radius);
+box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+animation: fadeIn 0.2s ease;
+transform-origin: center left;
 }
 
 @keyframes fadeIn {
-	from {
-		opacity: 0;
-		transform: scale(0.95);
-	}
+from {
+	opacity: 0;
+	transform: scale(0.95);
+}
 
-	to {
-		opacity: 1;
-		transform: scale(1);
-	}
+to {
+	opacity: 1;
+	transform: scale(1);
+}
 }
 
 @media (max-width: 768px) {
-	.day-cell {
-		min-height: 60px;
-		padding: 0.25rem;
-	}
+.day-cell {
+	min-height: 60px;
+	padding: 0.25rem;
+}
 
-	.day-number {
-		font-size: 0.8rem;
-		margin-bottom: 0.25rem;
-	}
+.day-number {
+	font-size: 0.8rem;
+	margin-bottom: 0.25rem;
+}
 
-	.weekday {
-		font-size: 0.8rem;
-		padding: 0.25rem;
-	}
+.weekday {
+	font-size: 0.8rem;
+	padding: 0.25rem;
 }
+}
+
 </style>

package/src/components/calendar/views/WeekView.vue

@@ -751,113 +751,115 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
+
 .weekGrid {
-	display: grid;
-	grid-template-columns: 5rem repeat(7, 1fr);
+display: grid;
+grid-template-columns: 5rem repeat(7, 1fr);
 }
 
 .days-column {
-	flex-grow: 1;
-	display: flex;
+flex-grow: 1;
+display: flex;
 }
 
 .day-column {
-	flex: 1;
-	position: relative;
-	/* Ensure absolute positioning works properly */
-	min-height: 100%;
-	/* Ensure column fills the full height */
+flex: 1;
+position: relative;
+/* Ensure absolute positioning works properly */
+min-height: 100%;
+/* Ensure column fills the full height */
 }
 
 /* Add consistent styling for the time slots */
 .txt-light {
-	padding: 0.5rem 0;
-	box-sizing: border-box;
-	display: flex;
-	align-items: flex-start;
-	justify-content: center;
+padding: 0.5rem 0;
+box-sizing: border-box;
+display: flex;
+align-items: flex-start;
+justify-content: center;
 }
 
 .event {
-	margin-right: 2px;
-	box-sizing: border-box;
+margin-right: 2px;
+box-sizing: border-box;
 }
 
 .event:hover {
-	z-index: 2;
+z-index: 2;
 }
 
 .drag-preview {
-	border: 1px solid var(--bgl-primary);
-	background-color: rgba(var(--bgl-primary-rgb), 0.1);
-	box-sizing: border-box;
-	/* Ensure consistent sizing */
+border: 1px solid var(--bgl-primary);
+background-color: rgba(var(--bgl-primary-rgb), 0.1);
+box-sizing: border-box;
+/* Ensure consistent sizing */
 }
 
 .current-time-line {
-	height: 2px;
-	background-color: var(--bgl-primary);
+height: 2px;
+background-color: var(--bgl-primary);
 }
 
 .current-time-dot {
-	background-color: var(--bgl-primary);
-	margin-right: -5px;
-	/* Adjust dot position */
+background-color: var(--bgl-primary);
+margin-right: -5px;
+/* Adjust dot position */
 }
 
 .hour-line {
-	border-top: 1px solid var(--bgl-gray-80);
-	z-index: 0;
-	height: 0;
+border-top: 1px solid var(--bgl-gray-80);
+z-index: 0;
+height: 0;
 }
 
 .sub-hour-line {
-	border-top: 1px dashed var(--bgl-gray-30, #e8e8e8);
-	z-index: 0;
-	height: 0;
+border-top: 1px dashed var(--bgl-gray-30, #e8e8e8);
+z-index: 0;
+height: 0;
 }
 
 /* This ensures all grid content aligns properly */
 .overflow {
-	position: relative;
+position: relative;
 }
 
 /* Time column headers should be aligned with their content */
 .day-header {
-	/* box-sizing: border-box;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: center; */
+/* box-sizing: border-box;
+height: 100%;
+display: flex;
+flex-direction: column;
+justify-content: center; */
 }
 
 .availability-block {
-	background-color: rgba(76, 175, 80, 0.18);
-	border-inline-start: 3px solid rgba(76, 175, 80, 0.5);
-	z-index: 0;
-	pointer-events: none;
+background-color: rgba(76, 175, 80, 0.18);
+border-inline-start: 3px solid rgba(76, 175, 80, 0.5);
+z-index: 0;
+pointer-events: none;
 }
 
 .availability-block.availability-editable {
-	background-color: rgba(33, 150, 243, 0.18);
-	border-inline-start: 3px solid rgba(33, 150, 243, 0.5);
+background-color: rgba(33, 150, 243, 0.18);
+border-inline-start: 3px solid rgba(33, 150, 243, 0.5);
 }
 
 .availability-preview {
-	background-color: rgba(76, 175, 80, 0.25);
-	border: 1px dashed rgba(76, 175, 80, 0.6);
-	z-index: 0;
+background-color: rgba(76, 175, 80, 0.25);
+border: 1px dashed rgba(76, 175, 80, 0.6);
+z-index: 0;
 }
 
 .availability-preview.avail-remove {
-	background-color: rgba(244, 67, 54, 0.15);
-	border-color: rgba(244, 67, 54, 0.5);
+background-color: rgba(244, 67, 54, 0.15);
+border-color: rgba(244, 67, 54, 0.5);
 }
 
 @media (max-width: 910px) {
-	.weekGrid {
-		display: grid;
-		grid-template-columns: 3rem repeat(7, 100px);
-	}
+.weekGrid {
+	display: grid;
+	grid-template-columns: 3rem repeat(7, 100px);
+}
 }
+
 </style>