@bagelink/vue 1.4.159 → 1.4.163

package/package.json

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

package/src/components/Modal.vue

@@ -92,49 +92,71 @@ onUnmounted(() => {
 </script>
 
 <template>
-	<div class="bg-dark" :style="{ zIndex }" :class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
-		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal">
+	<div
+		class="bg-dark" :style="{ zIndex }" :class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
+		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal"
+	>
 		<!-- Overlay close button -->
-		<Btn v-if="dismissable && isOverlay" icon="close" icon-mobile-size="1.4" class="fixed"
-			:class="overlayCloseClass" @click="closeModal" />
-
-		<Card class="modal m_pt-0" :style="{ ...maxWidth, '--bgl-box-bg': 'var(--bgl-popup-bg)' }" :thin="thin"
-			:class="{ 'pt-0': thin, 'pt-1': !thin, 'm_mt-5': isOverlay, 'display-flex column': side }" @click.stop>
+		<Btn
+			v-if="dismissable && isOverlay" icon="close" icon-mobile-size="1.4" class="fixed"
+			:class="overlayCloseClass" @click="closeModal"
+		/>
+
+		<Card
+			class="modal m_pt-0" :style="{ ...maxWidth, '--bgl-box-bg': 'var(--bgl-popup-bg)' }" :thin="thin"
+			:class="{ 'pt-0': thin, 'pt-1': !thin, 'm_mt-5': isOverlay, 'display-flex column': side }" @click.stop
+		>
 			<header v-if="slots.toolbar || title" class="tool-bar w-100p flex space-between sticky z-3 py-1">
 				<!-- Header close button -->
-				<Btn v-if="dismissable && isHeader && closePlacement === 'header'" :style="{ float: side ? '' : '' }"
-					flat icon="close" thin icon-mobile-size="1.4" @click="closeModal" />
+				<Btn
+					v-if="dismissable && isHeader && closePlacement === 'header'" :style="{ float: side ? '' : '' }"
+					flat icon="close" thin icon-mobile-size="1.4" @click="closeModal"
+				/>
 				<slot name="toolbar" />
-				<Title v-if="title" class="modal-title txt-center txt20 medium my-0 w-100p ellipsis-1" tag="h3"
+				<Title
+					v-if="title" class="modal-title txt-center txt20 medium my-0 w-100p ellipsis-1" tag="h3"
 					:label="title"
-					:class="{ 'me-1-5': isHeader && dismissable && closePlacement === 'header', 'ms-1-5': isHeader && dismissable && closePlacement === 'header-end' }" />
+					:class="{ 'me-1-5': isHeader && dismissable && closePlacement === 'header', 'ms-1-5': isHeader && dismissable && closePlacement === 'header-end' }"
+				/>
 				<!-- Header-end close button -->
-				<Btn v-if="dismissable && isHeader && closePlacement === 'header-end'"
+				<Btn
+					v-if="dismissable && isHeader && closePlacement === 'header-end'"
 					:style="{ float: side ? '' : '' }" flat icon="close" thin icon-mobile-size="1.4"
-					@click="closeModal" />
+					@click="closeModal"
+				/>
 			</header>
 
-			<header v-else class="tool-bar w-100p flex space-between sticky z-3"
-				:class="{ 'py-1': !isOverlay, 'pt-1': isOverlay }">
+			<header
+				v-else class="tool-bar w-100p flex space-between sticky z-3"
+				:class="{ 'py-1': !isOverlay, 'pt-1': isOverlay }"
+			>
 				<!-- Header close button (no title) -->
-				<Btn v-if="dismissable && isHeader && closePlacement === 'header'" :style="{ float: side ? '' : '' }"
-					flat icon="close" thin icon-mobile-size="1.4" @click="closeModal" />
+				<Btn
+					v-if="dismissable && isHeader && closePlacement === 'header'" :style="{ float: side ? '' : '' }"
+					flat icon="close" thin icon-mobile-size="1.4" @click="closeModal"
+				/>
 				<slot name="toolbar" />
 				<!-- Header-end close button (no title) -->
-				<Btn v-if="dismissable && isHeader && closePlacement === 'header-end'"
+				<Btn
+					v-if="dismissable && isHeader && closePlacement === 'header-end'"
 					:style="{ float: side ? '' : '' }" flat icon="close" thin icon-mobile-size="1.4" class="ms-auto"
-					@click="closeModal" />
+					@click="closeModal"
+				/>
 			</header>
 
 			<slot />
-			<footer v-if="slots.footer || actions?.length" class="modal-footer gap-1 flex space-between"
-				:class="{ 'mt-1': !side, 'mt-auto': side }">
+			<footer
+				v-if="slots.footer || actions?.length" class="modal-footer gap-1 flex space-between"
+				:class="{ 'mt-1': !side, 'mt-auto': side }"
+			>
 				<Btn v-for="(action, i) in actions" :key="i" color="gray" v-bind="action" @click="closeModal" />
 				<slot name="footer" />
 				<!-- Footer close button -->
 			</footer>
-			<Btn v-if="dismissable && isFooter" icon="close" label="Close"
-				class="mx-auto absolute start-0 end-0 modalFooterBtn" @click="closeModal" />
+			<Btn
+				v-if="dismissable && isFooter" icon="close" label="Close"
+				class="mx-auto absolute start-0 end-0 modalFooterBtn" @click="closeModal"
+			/>
 		</Card>
 	</div>
 </template>

package/src/components/calendar/CalendarPopover.vue

@@ -61,42 +61,38 @@ function closePopover() {
 
 <template>
 	<Card
-		v-if="show && event"
-		ref="popoverRef"
-		v-click-outside="closePopover"
-		thin
-		class="custom-popover"
-		:style="{
+		v-if="show && event" ref="popoverRef" v-click-outside="closePopover" thin class="custom-popover" :style="{
 			top: `${popoverPosition.top}px`,
 			left: `${popoverPosition.left}px`,
 			maxWidth: `${popoverPosition.width}px`,
 		}"
 	>
-		<slot name="eventContent" :event="event" />
+		<slot name="eventContent" :event="event" :close="closePopover" />
 	</Card>
 </template>
 
 <style scoped>
 .custom-popover {
-  position: fixed;
-  z-index: 1000;
-  min-width: 250px;
-  max-width: 350px;
-  background-color: white;
-  border-radius: var(--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(--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);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
+	from {
+		opacity: 0;
+		transform: scale(0.95);
+	}
+
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
 }
 </style>

package/src/components/calendar/CalendarTypes.ts

@@ -2,11 +2,13 @@ export interface CalendarEvent {
 	id: string
 	title: string
 	description?: string
+	reference?: string
 	start_time: Date
 	end_time: Date
 	color?: string
 	category?: string
 	allDay?: boolean
+	meta?: Record<string, any>
 }
 export type CalendarView = 'Week' | 'Month' | 'Day' | 'Agenda'
 

package/src/components/calendar/Index.vue

@@ -123,7 +123,7 @@ onMounted(() => { emit('ready', state.value) })
 <template>
 	<div class="calendar">
 		<div class="flex m_block m_pb-1">
-			<h3 class="txt-light my-0">
+			<h3 class="txt-light my-0 m_pb-1">
 				<b>{{ formatDate(currentDate, 'MMMM') }}</b>
 				{{ formatDate(currentDate, 'YYYY') }}
 			</h3>
@@ -147,8 +147,8 @@ onMounted(() => { emit('ready', state.value) })
 			@event-click="handleEventClick" @event-create="handleEventCreate" @event-update="handleEventUpdate"
 			@event-delete="handleEventDelete" @date-change="handleDateChange" @open-popover="openPopover"
 		>
-			<template #eventContent="{ event }">
-				<slot name="eventContent" :event="event" />
+			<template #eventContent="{ event, close }">
+				<slot name="eventContent" :event="event" :close="close" />
 			</template>
 		</component>
 
@@ -157,8 +157,8 @@ onMounted(() => { emit('ready', state.value) })
 			:event="activeEvent" :position="popoverPosition" :show="showPopover"
 			:has-event-content-slot="!!$slots.eventContent" @close="closePopover" @event-click="handleEventClick"
 		>
-			<template #eventContent="{ event }">
-				<slot name="eventContent" :event="event" />
+			<template #eventContent="{ event, close }">
+				<slot name="eventContent" :event="event" :close="close" />
 			</template>
 		</CalendarPopover>
 	</div>

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

@@ -421,7 +421,7 @@ onUnmounted(() => {
 	<div class="w-100p overflow-hidden m_overflow h-100p grid">
 		<div ref="calendarGrid" class="weekGrid border-bottom me-1">
 			<div />
-			<div v-for="day in weekDays" :key="day.toISOString()" class="day-header p-05 txt-center">
+			<div v-for="day in weekDays" :key="day.toISOString()" class="day-header p-05 txt-center m_txt12">
 				{{ formatDate(day, { fmt: 'DDD' }) }}
 				<span
 					class="txt-12 round p-025" :class="{
@@ -576,4 +576,10 @@ onUnmounted(() => {
 	flex-direction: column;
 	justify-content: center; */
 }
+@media (max-width: 910px) {
+	.weekGrid {
+		display: grid;
+		grid-template-columns: 3rem repeat(7, 100px);
+	}
+}
 </style>

package/src/components/form/inputs/RadioGroup.vue

@@ -27,6 +27,12 @@ const props = withDefaults(
 		flat?: boolean
 		invertedActive?: boolean
 		align?: 'start' | 'center' | 'end' | 'top' | 'bottom'
+		hideRadio?: boolean
+		bgColor?: string
+		activeBgColor?: string
+		borderColor?: string
+		textColor?: string
+		textAlign?: 'left' | 'center' | 'right'
 	}>(),
 	{
 		align: 'center'
@@ -89,7 +95,8 @@ function handleChange() {
 			v-for="(opt, index) in visibleOptions" :key="opt.id || `${name}-${index}`"
 			class="border rounded flex active-list-item hover"
 			:for="opt.id || `${name}-${index}`"
-			:class="{ 'p-05 gap-025': thin, 'ps-05 py-1 gap-075': !thin, 'bg-gray-light': !flat, 'align-items-start': align === 'start' || align === 'top', 'align-items-center': align === 'center', 'align-items-end': align === 'end' || align === 'bottom', invertedActive }"
+			:class="{ 'p-05 gap-025': thin, 'py-1 gap-075': !thin, 'ps-05': !hideRadio, 'bg-gray-light': !bgColor && !flat, 'align-items-start': align === 'start' || align === 'top', 'align-items-center': align === 'center', 'align-items-end': align === 'end' || align === 'bottom', invertedActive }"
+			:style="{ backgroundColor: bgColor, borderColor: borderColor }"
 		>
 			<input
 				:id="opt.id || `${name}-${index}`" v-model="selectedOption" :disabled class="radio-input-list"
@@ -97,16 +104,19 @@ function handleChange() {
 				@change="handleChange"
 				:class="{
 	'mt-025': align === 'start' || align === 'top',
-	'mb-025': align === 'end' || align === 'bottom'
+	'mb-025': align === 'end' || align === 'bottom',
+	'hideRadio': hideRadio
 				}"
 			>
-			<div class="flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025">
+			<div class="flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025"
+				:class="{ 'txt-center justify-content-center': textAlign === 'center', 'txt-end justify-content-end': textAlign === 'right', 'txt-start justify-content-start': textAlign === 'left' }"
+				:style="{ color: textColor }">
 				<img
 					v-if="opt.imgSrc" class="bg-popup shadow-light py-025 radius-05 m_w40" height="40" :src="opt.imgSrc"
 					:alt="opt.imgAlt"
 				>
 				<div class="">
-					<p v-if="opt.label" class="m-0 m_txt-14 line-height-14">{{ opt.label }}</p>
+					<div v-if="opt.label" class="m-0 m_txt-14 line-height-14" v-html="opt.label"></div>
 					<p v-if="opt.subLabel" class="txt-gray txt-12 m-0 pt-025">{{ opt.subLabel }}</p>
 				</div>
 				<slot name="radioItem" v-bind="opt" />
@@ -117,24 +127,30 @@ function handleChange() {
 </template>
 
 <style scoped>
+.hideRadio.radio-input-list {
+	display: none !important;
+}
 .radio-input-list {
 	width: auto;
 	transform: scale(1.4);
 	margin-inline-end: 0.6rem;
+}
 
+.radio-input-list.hidden {
+	display: none;
 }
 
 .active-list-item:has(:checked) {
-	background: var(--bgl-primary-light) !important;
+	background: v-bind('activeBgColor || "var(--bgl-primary-light)"') !important;
 	border-color: var(--bgl-primary) !important;
 	accent-color: var(--bgl-accent-color);
 }
+
 .invertedActive:has(:checked) {
 	background: var(--bgl-primary) !important;
 	border-color: var(--bgl-primary) !important;
 	color: var(--bgl-white);
 	accent-color: var(--bgl-white);
-
 }
 
 .has-error .active-list-item {