@bagelink/vue 1.4.165 → 1.4.169

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AAI1E,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,IAAI,GAAE,MAAY,QAO1D;AAED,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,UAMlC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,EAC7C,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,EACxB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC;;EAwBP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,GAAI,YAAY,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,OAAO,CAAC,EAAE,MAAM,EAAE,GAChB,cAAc,CAAC,CAAC,CAAC,CAgBnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAKD,wBAAsB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CA2CxF;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAatD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAIvC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,aAAa,SAAO,GAAG,MAAM,GAAG,SAAS,CAG/G;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE1C,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAO5C,wBAAgB,YAAY,CAAC,OAAO,CAAC,EAAE,MAAM,sBAM5C;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,YAAY,GAAE,GAAe,GAAG,GAAG,CAa1F;AAID,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,CAAC,EAAE,MAAM,QAkBpE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AAI1E,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,IAAI,GAAE,MAAY,QAO1D;AAED,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,UAMlC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,EAC7C,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,EACxB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC;;EAwBP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,GAAI,YAAY,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,OAAO,CAAC,EAAE,MAAM,EAAE,GAChB,cAAc,CAAC,CAAC,CAAC,CAgBnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAKD,wBAAsB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CA2CxF;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAatD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAIvC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,aAAa,SAAO,GAAG,MAAM,GAAG,SAAS,CAG/G;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE1C,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAM5C,wBAAgB,YAAY,CAAC,OAAO,CAAC,EAAE,MAAM,sBAsB5C;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,YAAY,GAAE,GAAe,GAAG,GAAG,CAa1F;AAID,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,CAAC,EAAE,MAAM,QAkBpE"}

package/package.json

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

package/src/components/analytics/BarChart.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Icon, Loading } from '@bagelink/vue'
+import { formatDate, Icon, Loading } from '@bagelink/vue'
 import { computed, ref, onMounted, onUnmounted } from 'vue'
 
 interface SecondaryValue {
@@ -61,11 +61,10 @@ const chartData = computed(() => {
 
 	// Use all data without limiting to maxBars
 	const maxValue = Math.max(...props.data.map(d => d.value), 1)
-
 	return props.data.map(item => ({
 		...item,
 		height: Math.max((item.value / maxValue) * 100, 2), // Minimum height of 2%
-		displayLabel: formatDate(item.date)
+		displayLabel: formatDate(item.date, 'MMM')
 	}))
 })
 
@@ -87,7 +86,7 @@ const getBarOpacity = computed(() => {
 
 // Animation functions
 function easeOutCubic(t: number): number {
-	return 1 - Math.pow(1 - t, 3)
+	return 1 - (1 - t) ** 3
 }
 
 function startAnimation() {
@@ -122,7 +121,7 @@ function setupIntersectionObserver() {
 
 	observer.value = new IntersectionObserver(
 		(entries) => {
-			entries.forEach(entry => {
+			entries.forEach((entry) => {
 				if (entry.isIntersecting && !isInView.value) {
 					console.log(`👀 TrendChart: Entered viewport, starting animation in ${props.animationStartDelay}ms`)
 					isInView.value = true
@@ -157,14 +156,6 @@ onUnmounted(() => {
 	}
 })
 
-function formatDate(dateStr: string): string {
-	const date = new Date(dateStr)
-	return date.toLocaleDateString('he-IL', {
-		month: 'short',
-		day: 'numeric'
-	})
-}
-
 function formatValue(value: number, isCurrency: boolean = false): string {
 	if (isCurrency) {
 		return new Intl.NumberFormat('he-IL', {
@@ -179,8 +170,7 @@ function formatValue(value: number, isCurrency: boolean = false): string {
 function formatTooltip(item: any): string {
 	const primaryValue = formatValue(item.value, props.currency)
 	const primaryText = `${props.prefix}${primaryValue}${props.suffix}`
-
-	let tooltipLines = [`${item.displayLabel}`, `<b>${primaryText}</b>`]
+	const tooltipLines = [`${item.displayLabel}`, `<b>${primaryText}</b>`]
 
 	if (item.secondaryValues && Array.isArray(item.secondaryValues)) {
 		item.secondaryValues.forEach((secondary: SecondaryValue) => {
@@ -204,27 +194,29 @@ function formatTooltip(item: any): string {
 				</p>
 			</div>
 			<div v-if="percentageChange !== 0" class="flex align-center gap-025">
-				<Icon :name="percentageChange > 0 ? 'trending_up' : 'trending_down'" size="1" :class="percentageChange > 0 ? 'color-success' : 'color-danger'" />
+				<Icon
+					:name="percentageChange > 0 ? 'trending_up' : 'trending_down'" size="1"
+					:class="percentageChange > 0 ? 'color-success' : 'color-danger'"
+				/>
 				<span class="txt12 bold" :class="percentageChange > 0 ? 'color-success' : 'color-danger'">
 					{{ Math.abs(percentageChange) }}%
 				</span>
 			</div>
 		</div>
-		<div class="flex w-100p align-items-end mt-auto gap-075 overflow justify-content-start" :class="[rtl ? 'rtl' : 'ltr']">
+		<div
+			class="flex w-100p align-items-end mt-auto gap-075 overflow justify-content-start"
+			:class="[rtl ? 'rtl' : 'ltr']"
+		>
 			<div
-				v-for="(bar, index) in chartData"
-				:key="index"
-				v-tooltip="{ content: formatTooltip(bar), html: true }"
-				class="flex-grow txt-center hover transition-400 relative barWrap mb-1"
-				:style="{
+				v-for="(bar, index) in chartData" :key="index" v-tooltip="{ content: formatTooltip(bar), html: true }"
+				class="flex-grow txt-center hover transition-400 relative barWrap mb-1" :style="{
 					width: `max(2rem, ${100 / chartData.length}%)`,
 					opacity: getBarOpacity(index),
-					transition: animated ? 'opacity 0.3s ease-out' : 'none'
+					transition: animated ? 'opacity 0.3s ease-out' : 'none',
 				}"
 			>
 				<div
-					class="bar radius-05 transition-400 "
-					:style="{
+					class="bar radius-05 transition-400 " :style="{
 						height: `${bar.height * 1.8}px`,
 						background: `linear-gradient(180deg, ${color}60, ${color}30)`,
 						minHeight: '4px',
@@ -250,16 +242,19 @@ function formatTooltip(item: any): string {
 	font-weight: 300 !important;
 	font-size: 12px;
 }
+
 .trendTooltip {
 	font-weight: 700 !important;
 }
+
 .v-popper--theme-tooltip .v-popper__inner:has(.trendTooltip) {
 	background-color: var(--bgl-black) !important;
 	color: var(--bgl-white) !important;
 	border-radius: 0.5rem !important;
 	padding: 0.25rem 0.5rem !important;
 }
-.bar{
+
+.bar {
 	min-width: 2rem;
 }
 </style>

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

@@ -157,7 +157,7 @@ onUnmounted(() => {
 				:key="event.id"
 				class="event"
 				:style="{
-					height: `${event.height}px`,
+	// height: `${event.height}px`,
 					backgroundColor: event.color || 'var(--bgl-primary)',
 				}"
 				:data-date="event.start_time"
@@ -207,11 +207,11 @@ onUnmounted(() => {
 .agenda-content {
   flex-grow: 1;
   overflow-y: auto;
-  padding: 1rem;
+padding: 1rem 0;
 }
 
 .event {
-  margin-bottom: 1rem;
+margin-bottom: 0.5rem;
   border-radius: 4px;
   overflow: hidden;
   cursor: pointer;
@@ -219,7 +219,8 @@ onUnmounted(() => {
 }
 
 .event:hover {
-  transform: scale(1.01);
+/* transform: scale(1.01); */
+	filter: brightness(90%);
 }
 
 .event-content {

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

@@ -318,7 +318,7 @@ onUnmounted(() => {
 }
 
 .event-content {
-	padding: 0.5rem;
+	padding: 0.15rem 0.5rem;
 	color: white;
 	font-size: 0.9rem;
 	height: 100%;

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

@@ -217,13 +217,21 @@ function handleEventSelection(event: CalendarEvent, domEvent?: MouseEvent) {
 	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;
+	/* white-space: nowrap; */
+		height: 1lh;
 	overflow: hidden;
 	text-overflow: ellipsis;
+
 }
 
 .event-time {

package/src/composables/index.ts

@@ -4,6 +4,7 @@ import type { MaybeRefOrGetter, Ref, UnwrapRef } from 'vue'
 import { getFallbackSchema } from '@bagelink/vue'
 import { ref, toValue, watch } from 'vue'
 
+export { getBagelInstance, setBagelInstance, useBagel } from './useBagel'
 export { useDevice } from './useDevice'
 export { useExcel } from './useExcel'
 export { usePolling } from './usePolling'

package/src/composables/useBagel.ts

@@ -0,0 +1,21 @@
+import type { Bagel } from '@bagelink/sdk'
+import { shallowRef } from 'vue'
+
+// Global state for the Bagel instance (using shallowRef to avoid deep reactivity on class instance)
+const bagelInstance = shallowRef<Bagel | null>(null)
+
+export function useBagel(): Bagel {
+	const instance = bagelInstance.value
+	if (!instance) {
+		throw new Error('Bagel instance is not initialized. Please install BagelVue plugin first.')
+	}
+	return instance
+}
+
+export function setBagelInstance(instance: Bagel) {
+	bagelInstance.value = instance
+}
+
+export function getBagelInstance(): Bagel | null {
+	return bagelInstance.value
+}

package/src/index.ts

@@ -6,8 +6,7 @@ export {
 	type BagelOptions,
 	BagelVue,
 	i18nTInjectionKey,
-	useBagel,
-	useI18nT,
+	injectI18nT,
 } from './plugins/bagel'
 export { ModalPlugin, useModal } from './plugins/useModal'
 export * from './types'

package/src/plugins/bagel.ts

@@ -4,6 +4,7 @@ import FloatingVue from 'floating-vue'
 import { inject } from 'vue'
 
 import lightboxPlugin from '../components/lightbox/index'
+import { setBagelInstance } from '../composables/useBagel'
 import { ripple, pattern } from '../directives'
 import { useLang } from '../utils'
 import clickOutside from '../utils/clickOutside'
@@ -11,13 +12,7 @@ import clickOutside from '../utils/clickOutside'
 export const bagelInjectionKey = Symbol('bagel') as InjectionKey<Bagel>
 export const i18nTInjectionKey = Symbol('bagel') as InjectionKey<(key: string) => string>
 
-export function useBagel(injectionKey: InjectionKey<Bagel> = bagelInjectionKey): Bagel {
-	const bagel = inject(injectionKey)
-	if (!bagel) throw new Error('No bagel provided')
-	return bagel
-}
-
-export function useI18nT(injectionKey: typeof i18nTInjectionKey = i18nTInjectionKey) {
+export function injectI18nT(injectionKey: typeof i18nTInjectionKey = i18nTInjectionKey) {
 	const i18nT = inject(injectionKey)
 	if (!i18nT) throw new Error('No i18nT provided')
 	return i18nT
@@ -36,6 +31,10 @@ export interface BagelOptions {
 export const BagelVue: Plugin<BagelOptions> = {
 	install: (app, options) => {
 		const bagel = new Bagel({ host: options.host, fileBaseUrl: options.fileBaseUrl, onError: options.onError })
+
+		// Set global Bagel instance for the composable
+		setBagelInstance(bagel)
+
 		app.directive('click-outside', clickOutside)
 		app.directive('ripple', ripple)
 		app.directive('pattern', pattern)

package/src/styles/inputs.css

@@ -332,4 +332,5 @@ select {
     position: absolute !important;
     bottom: 0 !important;
     left: 50% !important;
+    min-width: 0 !important;
 }

package/src/utils/index.ts

@@ -206,17 +206,32 @@ export { useLang } from './lang'
 export { formatString } from './strings'
 export { useDebounceFn } from '@vueuse/core'
 
-const fileBaseUrl = (import.meta.env.VITE_FILE_BASE_URL || 'https://files.bagel.design').replace(/\/$/, '')
-const bagelBaseUrl = import.meta.env.VITE_BAGEL_BASE_URL
+import { getBagelInstance } from '../composables/useBagel'
 
 const URL_REGEX = /^https?:\/\/|^\/\//
 
 export function pathKeyToURL(pathKey?: string) {
-	if (!pathKey || URL_REGEX.test(pathKey)) return pathKey
+	if (pathKey === undefined || pathKey === '' || URL_REGEX.test(pathKey)) return pathKey
+
+	const bagel = getBagelInstance()
+	if (!bagel) {
+		console.warn('Bagel instance is not initialized. Please install BagelVue plugin.')
+		return pathKey
+	}
+
 	if (pathKey.startsWith('static/')) {
-		return `${bagelBaseUrl}/${pathKey}`
+		if (bagel.host === undefined || bagel.host === '') {
+			console.warn('Bagel host is not configured. Please set it in BagelVue options.')
+			return pathKey
+		}
+		return `${bagel.host}/${pathKey}`
+	}
+
+	if (bagel.fileBaseUrl === undefined || bagel.fileBaseUrl === '') {
+		console.warn('File base URL is not configured. Please set it in BagelVue options.')
+		return pathKey
 	}
-	return `${fileBaseUrl}/${pathKey}`
+	return `${bagel.fileBaseUrl}/${pathKey}`
 }
 
 export function getNestedValue(obj: any, path?: string, defaultValue: any = undefined): any {