@bagelink/vue 1.2.18 → 1.2.20

package/dist/style.css

@@ -395,109 +395,68 @@ display: block;
 }
 }
 
-.day-view[data-v-fdbceae7] {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-.day-header[data-v-fdbceae7] {
-  display: flex;
-  border-bottom: 1px solid var(--border-color);
-  flex-shrink: 0;
+.dayGrid[data-v-8aa8e541]{
+	display: grid;
+	grid-template-columns: 5rem 1fr;
 }
-.time-column[data-v-fdbceae7] {
+.time-column[data-v-8aa8e541] {
   width: 80px;
   flex-shrink: 0;
 }
-.events-column[data-v-fdbceae7] {
+.events-column[data-v-8aa8e541] {
   flex-grow: 1;
   position: relative;
   border-inline-start: 1px solid var(--border-color);
 }
-.date-header[data-v-fdbceae7] {
+.date-header[data-v-8aa8e541] {
   padding: 0.5rem;
   text-align: center;
 }
-.day-header .events-column[data-v-fdbceae7] {
+.day-header .events-column[data-v-8aa8e541] {
   border-inline-start: 1px solid transparent;
 }
-.time-slot[data-v-fdbceae7] {
+.time-slot[data-v-8aa8e541] {
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.8rem;
 }
-.time-slots[data-v-fdbceae7] {
+.time-slots[data-v-8aa8e541] {
   flex-grow: 1;
   display: flex;
   overflow: auto;
   position: relative;
 }
-.event[data-v-fdbceae7] {
-  position: absolute;
+.event[data-v-8aa8e541] {
   left: 10px;
   right: 10px;
-  border-radius: 4px;
-  overflow: hidden;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  z-index: 1;
 }
-.event[data-v-fdbceae7]:hover {
+.event[data-v-8aa8e541]:hover {
   z-index: 2;
   transform: scale(1.02);
 }
-.event-content[data-v-fdbceae7] {
+.event-content[data-v-8aa8e541] {
   padding: 0.5rem;
   color: white;
   font-size: 0.9rem;
   height: 100%;
   overflow: hidden;
 }
-.event-title[data-v-fdbceae7] {
-  font-weight: 500;
+.event-title[data-v-8aa8e541] {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.event-time[data-v-fdbceae7] {
+.event-time[data-v-8aa8e541] {
   font-size: 0.8rem;
-  opacity: 0.8;
 }
-.drag-preview[data-v-fdbceae7] {
-  position: absolute;
-  left: 80px;
-  right: 0;
-  background-color: rgba(var(--bgl-primary-rgb), 0.1);
-  border: 2px solid var(--bgl-primary);
-  pointer-events: none;
-  z-index: 1000;
+.drag-preview[data-v-8aa8e541] {
+	background-color: rgba(var(--bgl-primary-rgb), 0.1);
 }
-.current-time-indicator[data-v-fdbceae7] {
-  position: absolute;
-  width: 100%;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  pointer-events: none;
-}
-.current-time-dot[data-v-fdbceae7] {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background-color: var(--bgl-primary, red);
-  position: absolute;
-  left: -6px;
-  transform: translateX(-50%);
-}
-.current-time-line[data-v-fdbceae7] {
+.current-time-line[data-v-8aa8e541] {
   height: 2px;
-  background-color: var(--bgl-primary, red);
-  width: 100%;
 }
-.custom-popover[data-v-fdbceae7] {
+.custom-popover[data-v-8aa8e541] {
   position: fixed;
   z-index: 1000;
   min-width: 250px;
@@ -505,10 +464,10 @@ display: block;
   background-color: white;
   border-radius: 4px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  animation: fadeIn-fdbceae7 0.2s ease;
+  animation: fadeIn-8aa8e541 0.2s ease;
   transform-origin: center left;
 }
-@keyframes fadeIn-fdbceae7 {
+@keyframes fadeIn-8aa8e541 {
 from {
     opacity: 0;
     transform: scale(0.95);
@@ -630,50 +589,49 @@ to {
 }
 }
 
-.weekGrid[data-v-b31e0d33]{
+.weekGrid[data-v-f774fc40]{
 	display: grid;
 	grid-template-columns: 5rem repeat(7, 1fr);
 }
-.days-column[data-v-b31e0d33] {
+.days-column[data-v-f774fc40] {
   flex-grow: 1;
   display: flex;
 }
-.time-slot[data-v-b31e0d33] {
+.time-slot[data-v-f774fc40] {
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.8rem;
   color: var(--text-muted);
 }
-.time-slots[data-v-b31e0d33] {
+.time-slots[data-v-f774fc40] {
   flex-grow: 1;
   display: flex;
   overflow: auto;
   position: relative;
 }
-.day-column[data-v-b31e0d33] {
+.day-column[data-v-f774fc40] {
   flex: 1;
 }
-.event[data-v-b31e0d33] {
+.event[data-v-f774fc40] {
   margin-right: 2px;
 }
-.event[data-v-b31e0d33]:hover {
+.event[data-v-f774fc40]:hover {
   z-index: 1;
 }
-.drag-preview[data-v-b31e0d33] {
+.drag-preview[data-v-f774fc40] {
   border: 2px solid var(--bgl-primary);
 }
-.current-time-line[data-v-b31e0d33] {
+.current-time-line[data-v-f774fc40] {
   height: 2px;
 }
-.custom-popover[data-v-b31e0d33] {
+.custom-popover[data-v-f774fc40] {
   min-width: 250px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  animation: fadeIn-b31e0d33 0.2s ease;
+  animation: fadeIn-f774fc40 0.2s ease;
   transform-origin: center left;
 }
-@keyframes fadeIn-b31e0d33 {
+@keyframes fadeIn-f774fc40 {
 from {
     opacity: 0;
     transform: scale(0.95);
@@ -1150,7 +1108,7 @@ fieldset[data-v-f7e758e5] {
 .fi[data-v-f99f1900]:before{ content:" "
 }
 
-.bgl-multi-step-form[data-v-f90b1af3] {
+.bgl-multi-step-form[data-v-4ead8342] {
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
@@ -1162,19 +1120,19 @@ fieldset[data-v-f7e758e5] {
 	/* --ease-in: cubic-bezier(0.42, 0, 0.58, 1); */
 	/* --ease-out: cubic-bezier(0.5, 0, 0.75, 0); */
 }
-.bgl-steps-indicator[data-v-f90b1af3] {
+.bgl-steps-indicator[data-v-4ead8342] {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	margin-bottom: 1rem;
 }
-.bgl-step-indicator[data-v-f90b1af3] {
+.bgl-step-indicator[data-v-4ead8342] {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	position: relative;
 }
-.bgl-step-indicator[data-v-f90b1af3]::before {
+.bgl-step-indicator[data-v-4ead8342]::before {
 	content: '';
 	position: absolute;
 	top: 50%;
@@ -1184,10 +1142,10 @@ fieldset[data-v-f7e758e5] {
 	background: #e0e0e0;
 	z-index: -1;
 }
-.bgl-step-indicator[data-v-f90b1af3]:first-child::before {
+.bgl-step-indicator[data-v-4ead8342]:first-child::before {
 	display: none;
 }
-.bgl-step-indicator > span[data-v-f90b1af3]:first-child {
+.bgl-step-indicator > span[data-v-4ead8342]:first-child {
 	width: 30px;
 	height: 30px;
 	border-radius: 50%;
@@ -1198,23 +1156,23 @@ fieldset[data-v-f7e758e5] {
 	justify-content: center;
 	margin-bottom: 0.5rem;
 }
-.bgl-step-indicator.active > span[data-v-f90b1af3]:first-child {
+.bgl-step-indicator.active > span[data-v-4ead8342]:first-child {
 	background: var(--primary-color, #4CAF50);
 	color: white;
 }
-.bgl-step-indicator.completed > span[data-v-f90b1af3]:first-child {
+.bgl-step-indicator.completed > span[data-v-4ead8342]:first-child {
 	background: var(--success-color, #8BC34A);
 	color: white;
 }
-.bgl-step-indicator.clickable[data-v-f90b1af3] {
+.bgl-step-indicator.clickable[data-v-4ead8342] {
 	cursor: pointer;
 }
-.bgl-step-label[data-v-f90b1af3] {
+.bgl-step-label[data-v-4ead8342] {
 	font-size: 0.8rem;
 	max-width: 100px;
 	text-align: center;
 }
-.bgl-form-wrapper[data-v-f90b1af3] {
+.bgl-form-wrapper[data-v-4ead8342] {
 	display: grid;
 	overflow: clip;
 	height: auto;
@@ -1222,15 +1180,15 @@ fieldset[data-v-f7e758e5] {
 	transition: height var(--transition-duration) ease;
 	interpolate-size: allow-keywords;
 }
-.bgl-form-wrapper > div[data-v-f90b1af3] {
+.bgl-form-wrapper > div[data-v-4ead8342] {
 	grid-area: 1 / 1;
 }
-.bgl-form-container[data-v-f90b1af3] {
+.bgl-form-container[data-v-4ead8342] {
 	width: 100%;
 	display: flex;
 	flex-direction: column;
 }
-.bgl-step-controls[data-v-f90b1af3] {
+.bgl-step-controls[data-v-4ead8342] {
 	display: flex;
 	justify-content: center;
 	gap: 1rem;
@@ -1238,34 +1196,34 @@ fieldset[data-v-f7e758e5] {
 }
 
 /* Slide Left Animation (going forward) */
-.slide-left-enter-active[data-v-f90b1af3] {
+.slide-left-enter-active[data-v-4ead8342] {
 	transition: opacity, transform calc(var(--transition-duration) * 1.2) var(--ease-in);
 }
-.slide-left-leave-active[data-v-f90b1af3] {
+.slide-left-leave-active[data-v-4ead8342] {
 	transition: opacity, transform var(--transition-duration) var(--ease-out);
 }
-.slide-left-enter-from[data-v-f90b1af3] {
+.slide-left-enter-from[data-v-4ead8342] {
 	opacity: 0;
 	transform: translateX(var(--move-distance));
 }
-.slide-left-leave-to[data-v-f90b1af3] {
+.slide-left-leave-to[data-v-4ead8342] {
 	opacity: 0;
 	transform: translateX(-30%);
 }
 
 /* Slide Right Animation (going back) */
-.slide-right-enter-active[data-v-f90b1af3] {
+.slide-right-enter-active[data-v-4ead8342] {
 	transition: all calc(var(--transition-duration) * 1.2) var(--ease-in);
 }
-.slide-right-leave-active[data-v-f90b1af3] {
+.slide-right-leave-active[data-v-4ead8342] {
 	transition: all var(--transition-duration) var(--ease-out);
 	transition-property: opacity, transform;
 }
-.slide-right-enter-from[data-v-f90b1af3] {
+.slide-right-enter-from[data-v-4ead8342] {
 	opacity: 0;
 	transform: translateX(-30%);
 }
-.slide-right-leave-to[data-v-f90b1af3] {
+.slide-right-leave-to[data-v-4ead8342] {
 	opacity: 0;
 	transform: translateX(var(--move-distance));
 }
@@ -1438,69 +1396,69 @@ pre code.hljs{
 	outline-color: var(--input-bg);
 }
 
-.calendar-container[data-v-d1e1ff1f] {
+.calendar-container[data-v-9c8816c6] {
 	max-width: 90vw;
 }
-.calendar-section[data-v-d1e1ff1f] {
+.calendar-section[data-v-9c8816c6] {
 	min-width: 280px;
 }
-.calendar-grid[data-v-d1e1ff1f] {
+.calendar-grid[data-v-9c8816c6] {
 	grid-template-columns: repeat(7, 1fr);
 }
-.month-grid[data-v-d1e1ff1f] {
+.month-grid[data-v-9c8816c6] {
 	grid-template-columns: repeat(3, 1fr);
 	grid-template-rows: repeat(4, 1fr);
 }
-.year-grid[data-v-d1e1ff1f] {
+.year-grid[data-v-9c8816c6] {
 	grid-template-columns: repeat(3, 1fr);
 	grid-template-rows: repeat(7, 1fr);
 }
-.month-item[data-v-d1e1ff1f],
-.year-item[data-v-d1e1ff1f] {
+.month-item[data-v-9c8816c6],
+.year-item[data-v-9c8816c6] {
 	background: none;
 	color: var(--bgl-text-color);
 }
-.month-item[data-v-d1e1ff1f]:hover:not(.disabled),
-.year-item[data-v-d1e1ff1f]:hover:not(.disabled) {
+.month-item[data-v-9c8816c6]:hover:not(.disabled),
+.year-item[data-v-9c8816c6]:hover:not(.disabled) {
 	background: var(--bgl-box-bg);
 	filter: var(--bgl-hover-filter);
 }
-.month-item[data-v-d1e1ff1f]:active:not(.disabled),
-.year-item[data-v-d1e1ff1f]:active:not(.disabled) {
+.month-item[data-v-9c8816c6]:active:not(.disabled),
+.year-item[data-v-9c8816c6]:active:not(.disabled) {
 	background: var(--bgl-box-bg);
 	filter: var(--bgl-active-filter);
 }
-.month-item.selected[data-v-d1e1ff1f],
-.year-item.selected[data-v-d1e1ff1f] {
+.month-item.selected[data-v-9c8816c6],
+.year-item.selected[data-v-9c8816c6] {
 	background-color: var(--bgl-primary);
 	color: white;
 }
-.month-item.disabled[data-v-d1e1ff1f],
-.year-item.disabled[data-v-d1e1ff1f] {
+.month-item.disabled[data-v-9c8816c6],
+.year-item.disabled[data-v-9c8816c6] {
 	opacity: 0.6;
 	filter: grayscale(0.3);
 }
-.day[data-v-d1e1ff1f] {
+.day[data-v-9c8816c6] {
 	border: none;
 	background: none;
 	color: var(--bgl-text-color);
 }
-.day[data-v-d1e1ff1f]:hover:not(.disabled) {
+.day[data-v-9c8816c6]:hover:not(.disabled) {
 	background-color: var(--input-bg);
 }
-.day.selected[data-v-d1e1ff1f] {
+.day.selected[data-v-9c8816c6] {
 	background-color: var(--bgl-primary);
 	color: var(--bgl-white);
 }
-.day.today[data-v-d1e1ff1f]:not(.selected) {
+.day.today[data-v-9c8816c6]:not(.selected) {
 	border: 1px solid var(--bgl-primary);
 }
-.day.disabled[data-v-d1e1ff1f] {
+.day.disabled[data-v-9c8816c6] {
 	opacity: 0.6;
 	filter: grayscale(0.3);
 	cursor: not-allowed;
 }
-.day.not-in-month[data-v-d1e1ff1f] {
+.day.not-in-month[data-v-9c8816c6] {
 	opacity: 0.4;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.2.18",
+  "version": "1.2.20",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

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

@@ -196,64 +196,63 @@ onUnmounted(() => {
 </script>
 
 <template>
-	<div class="day-view">
-		<div class="day-header">
-			<div class="time-column">
-				<div class="time-slot" />
-			</div>
-			<div class="events-column">
-				<div class="date-header">
-					{{ formatDate(startDate) }}
-				</div>
+	<div class="w-100p overflow-hidden m_overflow h-100p grid">
+		<div class="border-bottom me-1 txt-center p-05 dayGrid">
+			<div />
+			<div>
+				{{ formatDate(startDate) }}
 			</div>
 		</div>
-		<div class="time-slots" @mousedown="handleMouseDown">
-			<div class="time-column">
-				<div
-					v-for="slot in timeSlots" :key="slot.time"
-					class="time-slot txt-light txt-12 color-gray"
-					:style="{ height: `${slotHeight}px` }"
-				>
-					{{ slot.time }}
+
+		<div class="overflow h-100p pe-05">
+			<div class="time-slots dayGrid border-end relative" @mousedown="handleMouseDown">
+				<div class="time-column">
+					<div
+						v-for="slot in timeSlots" :key="slot.time"
+						class="time-slot txt-light txt-12 color-gray bg-gray-light border-start"
+						:style="{ height: `${slotHeight}px` }"
+					>
+						{{ slot.time }}
+					</div>
 				</div>
-			</div>
-			<div class="events-column">
-				<!-- Current time indicator -->
-				<div v-if="isToday" class="current-time-indicator" :style="{ top: `${currentTimeTop}px` }">
-					<div class="current-time-dot" />
-					<div class="current-time-line" />
+				<div class="events-column">
+					<!-- Current time indicator -->
+					<div v-if="isToday" class=" absolute end w-100p z-2 flex pointer-events-none" :style="{ top: `${currentTimeTop}px` }">
+						<div class="current-time-dot h-10px aspect-ratio-1 round bg-primary" />
+						<div class="current-time-line w-100p bg-primary" />
+					</div>
+
+					<div
+						v-for="event in processedEvents" :key="event.id"
+						class="event absolute radius-05 overflow-hidden pointer transition z-1"
+						:style="{
+							top: `${event.top}px`,
+							height: `${event.height}px`,
+							backgroundColor: event.color || 'var(--bgl-primary)',
+						}"
+						@click.stop="slots.eventContent ? openPopover(event, $event) : emit('eventClick', event)"
+					>
+						<div class="event-content">
+							<div class=" white-space ellipsis-1">
+								{{ event.title }}
+							</div>
+							<div class="event-time opacity-8">
+								{{ formatDate(new Date(event.start_time)) }}
+							</div>
+						</div>
+					</div>
 				</div>
 
+				<!-- Drag selection preview -->
 				<div
-					v-for="event in processedEvents" :key="event.id"
-					class="event"
+					v-if="dragState.isDragging && dragState.start && dragState.end"
+					class="drag-preview absolute bg-primary pointer-events-none"
 					:style="{
-						top: `${event.top}px`,
-						height: `${event.height}px`,
-						backgroundColor: event.color || 'var(--bgl-primary)',
+						top: `${Math.min(dragState.start.y, dragState.end.y)}px`,
+						height: `${Math.abs(dragState.end.y - dragState.start.y)}px`,
 					}"
-					@click.stop="slots.eventContent ? openPopover(event, $event) : emit('eventClick', event)"
-				>
-					<div class="event-content">
-						<div class="event-title">
-							{{ event.title }}
-						</div>
-						<div class="event-time">
-							{{ formatDate(new Date(event.start_time)) }}
-						</div>
-					</div>
-				</div>
+				/>
 			</div>
-
-			<!-- Drag selection preview -->
-			<div
-				v-if="dragState.isDragging && dragState.start && dragState.end"
-				class="drag-preview"
-				:style="{
-					top: `${Math.min(dragState.start.y, dragState.end.y)}px`,
-					height: `${Math.abs(dragState.end.y - dragState.start.y)}px`,
-				}"
-			/>
 		</div>
 
 		<!-- Custom Popover -->
@@ -270,21 +269,14 @@ onUnmounted(() => {
 		>
 			<slot name="eventContent" :event="activeEvent" />
 		</div>
+		<div class="border-bottom me-1" />
 	</div>
 </template>
 
 <style scoped>
-.day-view {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.day-header {
-  display: flex;
-  border-bottom: 1px solid var(--border-color);
-  flex-shrink: 0;
+.dayGrid{
+	display: grid;
+	grid-template-columns: 5rem 1fr;
 }
 
 .time-column {
@@ -311,7 +303,6 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.8rem;
 }
 
 .time-slots {
@@ -322,14 +313,8 @@ onUnmounted(() => {
 }
 
 .event {
-  position: absolute;
   left: 10px;
   right: 10px;
-  border-radius: 4px;
-  overflow: hidden;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  z-index: 1;
 }
 
 .event:hover {
@@ -346,7 +331,6 @@ onUnmounted(() => {
 }
 
 .event-title {
-  font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -354,42 +338,14 @@ onUnmounted(() => {
 
 .event-time {
   font-size: 0.8rem;
-  opacity: 0.8;
 }
 
 .drag-preview {
-  position: absolute;
-  left: 80px;
-  right: 0;
-  background-color: rgba(var(--bgl-primary-rgb), 0.1);
-  border: 2px solid var(--bgl-primary);
-  pointer-events: none;
-  z-index: 1000;
-}
-
-.current-time-indicator {
-  position: absolute;
-  width: 100%;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  pointer-events: none;
-}
-
-.current-time-dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background-color: var(--bgl-primary, red);
-  position: absolute;
-  left: -6px;
-  transform: translateX(-50%);
+	background-color: rgba(var(--bgl-primary-rgb), 0.1);
 }
 
 .current-time-line {
   height: 2px;
-  background-color: var(--bgl-primary, red);
-  width: 100%;
 }
 
 .custom-popover {

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

@@ -289,7 +289,7 @@ onUnmounted(() => {
 		<div class="overflow h-100p pe-05">
 			<div class="weekGrid border-end relative" @mousedown="handleMouseDown">
 				<div>
-					<div v-for="slot in timeSlots" :key="slot.time" class="txt-light txt-12 color-gray flex justify-content-center" :style="{ height: `${slotHeight}px` }">
+					<div v-for="slot in timeSlots" :key="slot.time" class="txt-light txt-12 color-gray flex justify-content-center bg-gray-light border-start" :style="{ height: `${slotHeight}px` }">
 						{{ slot.time }}
 					</div>
 				</div>
@@ -378,7 +378,6 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.8rem;
   color: var(--text-muted);
 }