@bagelink/vue 0.0.1220 → 0.0.1227

package/dist/types/BagelForm.d.ts

@@ -1,4 +1,5 @@
 import { SelectInput, TextInput } from '..';
+import { VNode } from 'vue';
 export type AttributeValue = string | number | boolean | undefined | undefined | {
     [key: string]: any;
 };
@@ -24,7 +25,7 @@ export interface BaseBagelField<T = {
     'id'?: keyof T extends string ? keyof T : string;
     'label'?: string;
     'placeholder'?: string;
-    'children'?: (Field<T> | string)[];
+    'children'?: (Field<T> | string | VNode)[];
     'class'?: AttributeValue | AttributeFn<T>;
     'attrs'?: Attributes<T>;
     'required'?: boolean;

package/dist/types/BagelForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"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"}

package/dist/utils/BagelFormUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"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"}

package/package.json

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

package/src/components/Btn.vue

@@ -239,6 +239,9 @@ a {
 [dir="rtl"] .bgl_btn-icon{
   transform: rotateY(180deg);
 }
+[dir="rtl"] .ltr .bgl_btn-icon{
+  transform: rotateY(0deg);
+}
 
 .bgl_btn-border, .bgl_btn-icon.bgl_btn_flat.bgl_btn-border {
 	  border: 1px solid var(--btn-flat-color);

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>