@bagelink/vue 0.0.1220 → 0.0.1224

package/package.json

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

package/src/components/Calendar/Index.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
 import type { ConfigInterface } from './typings/config.interface'
+import type { DayInterface } from './typings/interfaces/day.interface'
 import type { EventInterface } from './typings/interfaces/event.interface'
+import type { PeriodInterface } from './typings/interfaces/period.interface'
 import type { modeType } from './typings/types'
 import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
 import AppHeader from './components/header/Header.vue'
+import AgendaEvents from './components/month/AgendaEvents.vue'
 import Month from './components/month/Month.vue'
 import Week from './components/week/Week.vue'
 import Errors from './helpers/Errors'
 import Time from './helpers/Time'
-import AgendaEvents from './components/month/AgendaEvents.vue'
-import type { DayInterface } from './typings/interfaces/day.interface'
-import type { PeriodInterface } from './typings/interfaces/period.interface'
 
 const props = defineProps({
 	config: {
@@ -142,7 +142,7 @@ function onCalendarResize() {
 		.getComputedStyle(documentRoot)
 		.fontSize
 		.split('p')[0]
-	const breakPointFor1RemEquals16px = 700
+	const breakPointFor1RemEquals16px = 600
 	const multiplier = 16 / documentFontSize
 	const smallCalendarBreakpoint = breakPointFor1RemEquals16px / multiplier // For 16px root font-size, break point is at 43.75rem
 
@@ -194,13 +194,13 @@ const day = $computed(() => {
 			month: '2-digit',
 			year: 'numeric',
 		}),
-		events: eventsDataProperty.value.filter(e => {
+		events: eventsDataProperty.value.filter((e) => {
 			const eventDate = new Date(e.time.start)
 			return eventDate >= period.value.start && eventDate <= period.value.end
 		}),
 		fullDayEvents: {
 			date: period.value.selectedDate,
-			events: eventsDataProperty.value.filter(e => {
+			events: eventsDataProperty.value.filter((e) => {
 				const eventDate = new Date(e.time.start)
 				return eventDate >= period.value.start && eventDate <= period.value.end
 			}),
@@ -215,7 +215,7 @@ function handleDateWasClicked(payload: string) {
 </script>
 
 <template>
-	<div class="calendar-root-wrapper">
+	<div class="calendar-root-wrapper txt16">
 		<div
 			ref="calendarRoot"
 			class="calendar-root"
@@ -331,6 +331,9 @@ function handleDateWasClicked(payload: string) {
 	</div>
 </template>
 
+<!-- <style src="../../styles/_variables.css"></style> -->
+<style src="../Calendar/styles/_variables.css"></style>
+
 <style>
 .calendar-root-wrapper {
 	width: 100%;
@@ -341,7 +344,6 @@ function handleDateWasClicked(payload: string) {
 
 .calendar-root-wrapper .calendar-root {
 	flex: 1;
-	border: var(--qalendar-border-gray-thin);
 	border-radius: var(--qalendar-border-radius);
 	position: relative;
 	width: 100%;
@@ -349,14 +351,9 @@ function handleDateWasClicked(payload: string) {
 	display: flex;
 	flex-flow: column;
 }
-/*
-@media (prefers-color-scheme: dark) {
-	.calendar-root-wrapper .calendar-root {
-		background: #121212;
-		color: #fff;
-		border-color: transparent;
-	}
-} */
+.calendar-root-wrapper .calendar-root .calendar-month__weeks{
+	border-inline: var(--qalendar-border-gray-thin);
+}
 
 .calendar-root-wrapper .calendar-root .top-bar-loader {
 	position: absolute;

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

@@ -5,8 +5,9 @@ import type { ConfigInterface } from '../../typings/config.interface'
 import type { PeriodInterface } from '../../typings/interfaces/period.interface'
 import type { modeType } from '../../typings/types'
 
-import { DatePick, Icon, TabsNav } from '@bagelink/vue'
+import { DatePick, Icon, TabsNav, Btn } from '@bagelink/vue'
 import { ref, computed, watch } from 'vue'
+import { translate, getLanguage } from '../../language'
 
 const props = defineProps({
 	config: {
@@ -78,8 +79,8 @@ const onlyDayModeIsEnabled = computed(() => {
 })
 
 watch(() => props.isSmall, (value) => {
-	if (value) modeOptions.value = ['month', 'day']
-	else modeOptions.value = ['month', 'week', 'day', 'agenda']
+	if (value) modeOptions.value = ['day', 'month',]
+	else modeOptions.value = ['agenda', 'day', 'week', 'month']
 }, { immediate: true })
 
 function dateToPeriod(selectedDate: Date) {
@@ -122,153 +123,30 @@ function goToPeriod(direction: 'previous' | 'next') {
 </script>
 
 <template>
-	<div class="calendar-header">
-		<div
-			v-if="periodName"
-			class="calendar-header__period-name"
-		>
-			{{ periodName }}
-		</div>
-
-		<div class="flex gap-05">
-			<div class="calendar-header__chevron-arrows">
-				<Icon
-					class="calendar-header__chevron-arrow calendar-header__chevron-arrow-left"
-					:icon="icons.chevronLeft"
-					@click="goToPeriod('previous')"
-				/>
-
-				<Icon
-					class="calendar-header__chevron-arrow calendar-header__chevron-arrow-right"
-					:icon="icons.chevronRight"
-					@click="goToPeriod('next')"
-				/>
-			</div>
+	<div class="flex gap-05 space-between pb-1 datePick">
+		<div class="flex gap-1">
+			<Btn flat icon="chevron_left" @click="goToPeriod('previous')" />
 			<DatePick
 				ref="periodSelect"
 				v-model="currentPeriod.selectedDate"
+				class="m-0 bg-input-transparent m_w-max-90px txt10 p-0"
 				:mode="mode"
+				center
 				@update:modelValue="handlePeriodChange"
 			/>
-
-			<div
-				v-if="!onlyDayModeIsEnabled"
-				class="calendar-header__mode-picker"
-			>
-				<TabsNav v-model="modeLocal" :tabs="modeOptions" group="mode" @update:model-value="emit('changeMode', $event)" />
-			</div>
+			<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 scoped>
-.calendar-header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--qalendar-spacing-half);
-  border-radius: var(--qalendar-border-radius);
-}
-
-@media (min-width: 768px) {
-  .calendar-header {
-    justify-content: space-between;
-    gap: var(--qalendar-spacing);
-  }
-}
-
-:global(.dark) .calendar-header {
-  color: var(--qalendar-dark-mode-text-hint);
-}
-
-
-.calendar-header__period-name {
-  font-size: var(--qalendar-font-l);
-  text-align: center;
+<style>
+.datePick input{
+	min-width: 2px !important;
 }
-
-@media (min-width: 768px) {
-  .calendar-header__period-name {
-    margin-bottom: 0;
-    text-align: left;
-  }
-}
-
-.calendar-header__multiselects {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--qalendar-spacing);
-}
-
-.calendar-header__chevron-arrows {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-
-.calendar-header__chevron-arrow {
-  cursor: pointer;
-  transition: color 0.2s ease;
-  font-size: var(--qalendar-font-m);
+@media screen and (max-width: 910px) {
+	.datePick{
+	--input-font-size: 0.75rem;
 }
-
-.calendar-header__chevron-arrow:hover {
-  color: var(--qalendar-gray-quite-dark);
-}
-
-.calendar-header__mode-picker {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: fit-content;
-  height: 36px;
-  border-radius: 4px;
-  font-size: var(--qalendar-font-m);
-  cursor: pointer;
-  border: var(--qalendar-border-gray-thin);
-}
-
-:global(.dark) .calendar-header__mode-picker {
-  border-color: transparent;
-}
-
-.calendar-header__mode-value {
-  padding: 0 var(--qalendar-spacing);
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  user-select: none;
-  border-radius: 4px;
-}
-
-:global(.dark) .calendar-header__mode-value {
-  background-color: var(--qalendar-dark-mode-lightly-elevated-surface);
-}
-
-.calendar-header__mode-options {
-  position: absolute;
-  z-index: 51;
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border: var(--qalendar-border-gray-thin);
-  background-color: #fff;
-}
-
-:global(.dark) .calendar-header__mode-options {
-  border-color: transparent;
-  background-color: var(--qalendar-dark-mode-elevated-surface);
-}
-
-.calendar-header__mode-option {
-  padding: var(--qalendar-spacing-half) var(--qalendar-spacing);
-}
-
-.calendar-header__mode-option:hover {
-  background-color: var(--qalendar-option-hover);
 }
 </style>

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

@@ -88,7 +88,7 @@ onMounted(() => {
 <template>
 	<div
 		:id="elementId"
-		class="agenda__event is-event"
+		class="agenda__event is-event rounded mb-05 pointer user-select-none p-1 flex column align-items-start"
 		@click.prevent="handleClickOnEvent"
 	>
 		<span
@@ -124,14 +124,5 @@ onMounted(() => {
 .agenda__event {
 	background-color: v-bind(eventBackgroundColor);
 	color: v-bind(eventColor);
-	display: flex;
-	flex-flow: column;
-	justify-content: flex-start;
-	border-radius: 4px;
-	font-size: var(--qalendar-font-2xs);
-	margin-bottom: 4px;
-	padding: var(--qalendar-spacing);
-	cursor: pointer;
-	user-select: none;
 }
 </style>

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

@@ -25,26 +25,26 @@ const emit = defineEmits(['eventWasClicked'])
 </script>
 
 <template>
-	<div class="agenda__wrapper">
-		<header class="agenda__header">
-			<div class="agenda__header-day-name">
+	<div class="agenda__wrapper flex align-items-start gap-1">
+		<header class="">
+			<div class="agenda__header-day-name txt-center">
 				{{ day.dayName }}
 			</div>
-			<div class="agenda__header-date">
+			<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">
+		<div class="agenda__content flex column w-100p h-100p min-h-100px pt-05">
 			<div
 				v-if="day.events.length === 0"
-				class="is-empty"
+				class="align-items-center flex justify-content-center h-100p"
 			>
 				{{ getLanguage(languageKeys.noEvent, time.CALENDAR_LOCALE) }}
 			</div>
 			<div
 				v-else
-				class="agenda__content-events-list"
+				class="w-100p"
 			>
 				<AgendaEventTile
 					v-for="dayEvent of day.events"
@@ -59,49 +59,3 @@ const emit = defineEmits(['eventWasClicked'])
 		</div>
 	</div>
 </template>
-
-<style scoped>
-.agenda__wrapper {
-  display: flex;
-  flex-flow: row;
-  padding: 10px 5px 0;
-}
-
-.agenda__header {
-  padding-right: 10px;
-}
-
-.agenda__header-day-name {
-  text-align: center;
-  color: var(--qalendar-theme-color);
-  font-size: var(--qalendar-font-xs);
-  font-weight: bold;
-}
-
-.agenda__header-date {
-  height: fit-content;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 5px;
-  border-radius: 4px;
-  background-color: var(--qalendar-theme-color);
-  color: white;
-  font-weight: 600;
-  font-size: var(--qalendar-font-m);
-}
-
-.agenda__content {
-  display: flex;
-  flex-flow: column;
-  width: 100%;
-  height: auto;
-}
-
-.agenda__content .is-empty {
-  min-height: 70px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>

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

@@ -109,7 +109,7 @@ function emitDayWasClicked() {
 		class="calendar-month__weekday"
 		:class="{
 			'is-droppable': canBeDropped,
-			'trailing-or-leading': day.isTrailingOrLeadingDate,
+			'color-gray': day.isTrailingOrLeadingDate,
 			'is-selected': isSelected,
 			'is-today': isToday,
 		}"
@@ -123,12 +123,14 @@ function emitDayWasClicked() {
 			name="dayCell"
 			:day-data="day"
 		>
-			<span
-				class="calendar-month__day-date"
-				@click="emitDayWasClicked"
-			>
-				{{ day.dateTimeString.substring(8, 10).startsWith('0') ? day.dateTimeString.substring(9, 10) : day.dateTimeString.substring(8, 10) }}
-			</span>
+			<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
@@ -190,28 +192,8 @@ function emitDayWasClicked() {
   border-right: 0;
 }
 
-.qalendar-is-small .calendar-month__weekday.is-selected {
-  -webkit-box-shadow: inset 0 0 0 3px var(--qalendar-theme-color);
-  -moz-box-shadow: inset 0 0 0 3px var(--qalendar-theme-color);
-  box-shadow: inset 0 0 0 3px var(--qalendar-theme-color);
-  border-radius: 5px;
-}
-
-.qalendar-is-small .calendar-month__weekday {
-  height: 45px;
-  width: 45px;
-  display: flex;
-  flex-flow: column;
-  justify-content: space-around;
-}
-
-.calendar-month__day-date {
-  font-size: var(--qalendar-font-xs);
-  color: var(--qalendar-gray-quite-dark);
-}
-
-.calendar-month__day-date:first-child {
-  margin-top: 6px;
+.calendar-month__weekday.is-selected {
+  box-shadow: inset 0 0 0 1px var(--bgl-primary);
 }
 
 .calendar-month__weekday-more {
@@ -237,7 +219,7 @@ function emitDayWasClicked() {
 }
 
 .calendar-month__weekday.is-today .calendar-month__day-date {
-  background-color: var(--qalendar-theme-color);
+  background-color: var(--bgl-primary);
   color: #fff;
   border-radius: 50%;
   padding: 4px 6px;

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

@@ -115,7 +115,7 @@ onMounted(() => {
 			:id="elementId"
 			class="is-event"
 			data-ref="custom-event"
-			:class="{ 'is-draggable': elementDraggableAttribute }"
+			:class="{ grab: elementDraggableAttribute }"
 			:draggable="elementDraggableAttribute"
 			@dragstart="handleDragStart"
 			@click="handleClickOnEvent"
@@ -130,92 +130,35 @@ onMounted(() => {
 			v-else
 			:id="elementId"
 			data-ref="default-event"
-			class="calendar-month__event is-event"
+			class="calendar-month__event hover is-event flex align-items-center overflow-hidden radius-05 txt10 px-025 pointer user-select-none gap-025 bg-white"
 			:class="{ 'is-draggable': elementDraggableAttribute }"
 			:draggable="elementDraggableAttribute"
 			@dragstart="handleDragStart"
 			@click="handleClickOnEvent"
 		>
-			<span class="calendar-month__event-color" />
+			<span class="calendar-month__event-color round flex-shrink-0" />
 
 			<span
 				v-if="eventTimeStart && !calendarEvent.originalEvent"
-				class="calendar-month__event-time"
+				class="calendar-month__event-time opacity-6 flex-shrink-0"
 			>
 				{{ eventTimeStart }}
 			</span>
-
-			<span class="calendar-month__event-title">
+			<span class="calendar-month__event-title1  white-space ellipsis ">
 				{{ calendarEvent.title }}
 			</span>
 		</div>
 	</template>
 </template>
 
-<style>
-.calendar-month__event {
-	--event-inline-padding: 4px;
-	display: flex;
-	align-items: center;
-	overflow: hidden;
-	border-radius: 4px;
-	font-size: var(--qalendar-font-2xs);
-	width: calc(100% - (var(--event-inline-padding) * 2));
-	margin-bottom: 4px;
-	padding: 0.25rem var(--event-inline-padding);
-	cursor: pointer;
-	user-select: none;
-}
-
-.calendar-month__event .calendar-month__event-time {
-	margin-right: 6px;
-}
-
-.calendar-month__event .calendar-month__event-time,
-.calendar-month__event .calendar-month__event-title,
-.calendar-month__event .calendar-month__event-color {
-	flex-shrink: 0;
-}
-
-.qalendar-is-small .calendar-month__event .calendar-month__event-time,
-.qalendar-is-small .calendar-month__event .calendar-month__event-title {
-	display: none;
-}
-
-.qalendar-is-small .calendar-month__event {
-	background-color: v-bind(eventBackgroundColor);
-	width: 4px;
-	height: 4px;
-	border-radius: 50%;
-	padding: 1px;
-	margin-right: 1px;
-}
-
-.calendar-month__event.is-draggable {
-	cursor: grab;
-}
-
+<style scoped>
 .calendar-month__event:active {
-	z-index: 100;
-}
-
-.calendar-month__event:not(.is-draggable):active {
-	cursor: not-allowed;
-}
-
-.calendar-month__event:hover {
-	background-color: var(--qalendar-light-gray);
-}
-
-.calendar-month__event:hover:hover {
-	background-color: var(--qalendar-option-hover);
+    z-index: 100;
 }
 
 .calendar-month__event .calendar-month__event-color {
-	background-color: v-bind(eventBackgroundColor);
-	width: 6px;
-	height: 6px;
-	border-radius: 50%;
-	margin-right: 4px;
+    background-color: v-bind(eventBackgroundColor);
+    width: 6px;
+    height: 6px;
 }
 </style>

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>