@bagelink/vue 1.4.141 → 1.4.147

package/package.json

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

package/src/components/Btn.vue

@@ -57,8 +57,6 @@ const emit = defineEmits<{
 	confirmed: [event: MouseEvent]
 }>()
 
-const { confirmModal } = useModal()
-
 const isMobileScreen = ref(false)
 
 function checkMobile() {
@@ -76,6 +74,7 @@ onUnmounted(() => {
 
 async function handleClick(event: MouseEvent) {
 	if (props.confirm) {
+		const { confirmModal } = useModal()
 		const message = typeof props.confirm === 'string' ? props.confirm : 'Are you sure?'
 		const confirmed = await confirmModal({
 			title: 'Confirm',
@@ -96,15 +95,15 @@ const iconSizeComputed = $computed(() => {
 
 	// Default icon sizes based on button size
 	const sizeMap = {
-		xs: 0.7,
+		'xs': 0.7,
 		'extra-small': 0.7,
-		s: 0.9,
-		small: 0.9,
-		m: 1,
-		medium: 1,
-		l: 1.3,
-		large: 1.3,
-		xl: 1.6,
+		's': 0.9,
+		'small': 0.9,
+		'm': 1,
+		'medium': 1,
+		'l': 1.3,
+		'large': 1.3,
+		'xl': 1.6,
 		'extra-large': 1.6
 	}
 
@@ -138,36 +137,44 @@ const slots: SetupContext['slots'] = useSlots()
 </script>
 
 <template>
-<component :is="isComponent" v-ripple="ripple" v-bind="bind" :disabled="disabled" class="bgl_btn" :class="{
-	'bgl_btn-icon': icon && !slots.default && !value,
-	thin,
-	'bgl_btn_xsSize': size === 'xs' || size === 'extra-small',
-	'bgl_btn_sSize': size === 's' || size === 'small',
-	'bgl_btn_mSize': size === 'm' || size === 'medium',
-	'bgl_btn_lSize': size === 'l' || size === 'large',
-	'bgl_btn_xlSize': size === 'xl' || size === 'extra-large',
-	'bgl_btn_fullWidth': fullWidth,
-	'bgl_btn_fullWidthMobile': fullWidthMobile,
-	'bgl_btn_alignStart': alignTxt === 'start',
-	'bgl_btn_alignEnd': alignTxt === 'end',
-	'bgl_btn_alignStartMobile': alignTxtMobile === 'start',
-	'bgl_btn_alignEndMobile': alignTxtMobile === 'end',
-	round,
-	'bgl_btn_flat': flat,
-	'bgl_btn-border': border || outline,
-	[`bgl_btn-${color}`]: color,
-	[`bgl_btn-${theme}`]: theme,
-}" :tabindex="disabled ? -1 : 0" @click.stop="handleClick" @keydown.enter="handleClick" @keydown.space="handleClick">
-	<Loading v-if="loading" class="h-100p" size="15" />
-	<div v-else class="bgl_btn-flex">
-		<Icon v-if="icon" :icon="icon" class="transition-400" :size="iconSizeComputed" :mobile-size="iconMobileSize" />
-		<slot />
-		<template v-if="!slots.default && value">
-			{{ value }}
-		</template>
-		<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400" :size="iconSizeComputed" :mobile-size="iconMobileSize" />
-	</div>
-</component>
+	<component
+		:is="isComponent" v-ripple="ripple" v-bind="bind" :disabled="disabled" class="bgl_btn" :class="{
+			'bgl_btn-icon': icon && !slots.default && !value,
+			thin,
+			'bgl_btn_xsSize': size === 'xs' || size === 'extra-small',
+			'bgl_btn_sSize': size === 's' || size === 'small',
+			'bgl_btn_mSize': size === 'm' || size === 'medium',
+			'bgl_btn_lSize': size === 'l' || size === 'large',
+			'bgl_btn_xlSize': size === 'xl' || size === 'extra-large',
+			'bgl_btn_fullWidth': fullWidth,
+			'bgl_btn_fullWidthMobile': fullWidthMobile,
+			'bgl_btn_alignStart': alignTxt === 'start',
+			'bgl_btn_alignEnd': alignTxt === 'end',
+			'bgl_btn_alignStartMobile': alignTxtMobile === 'start',
+			'bgl_btn_alignEndMobile': alignTxtMobile === 'end',
+			round,
+			'bgl_btn_flat': flat,
+			'bgl_btn-border': border || outline,
+			[`bgl_btn-${color}`]: color,
+			[`bgl_btn-${theme}`]: theme,
+		}" :tabindex="disabled ? -1 : 0" @click.stop="handleClick" @keydown.enter="handleClick" @keydown.space="handleClick"
+	>
+		<Loading v-if="loading" class="h-100p" size="15" />
+		<div v-else class="bgl_btn-flex">
+			<Icon
+				v-if="icon" :icon="icon" class="transition-400" :size="iconSizeComputed"
+				:mobile-size="iconMobileSize"
+			/>
+			<slot />
+			<template v-if="!slots.default && value">
+				{{ value }}
+			</template>
+			<Icon
+				v-if="iconEnd" :icon="iconEnd" class="transition-400" :size="iconSizeComputed"
+				:mobile-size="iconMobileSize"
+			/>
+		</div>
+	</component>
 </template>
 
 <style scoped>
@@ -232,6 +239,7 @@ a {
 .bgl_btn-icon.bgl_btn_flat:active:not(:disabled) {
 	background: var(--bgl-gray-tint-dark);
 }
+
 .bgl_btn.round {
 	border-radius: 1000px !important;
 }
@@ -265,6 +273,7 @@ a {
 	filter: grayscale(0.3);
 	cursor: not-allowed;
 }
+
 .bgl_btn-icon .bgl_btn-flex {
 	height: 100%;
 }
@@ -282,7 +291,6 @@ a {
 	line-height: normal;
 }
 
-
 .bgl_btn_xsSize {
 	height: calc(var(--btn-height) / 2);
 	line-height: calc(var(--btn-height) / 2);
@@ -350,6 +358,7 @@ a {
 	height: calc(var(--btn-height) * 1.5);
 	width: calc(var(--btn-height) * 1.5);
 }
+
 .bgl_btn_fullWidth {
 	width: 100%;
 }
@@ -358,7 +367,6 @@ a {
 	width: auto;
 }
 
-
 /* Content alignment styles */
 .bgl_btn_alignStart .bgl_btn-flex {
 	justify-content: flex-start;

package/src/components/Modal.vue

@@ -4,8 +4,7 @@ import type { SetupContext } from 'vue'
 import {
 	Btn,
 	Card,
-	Title,
-	useEscape
+	Title
 } from '@bagelink/vue'
 import {
 	onMounted,
@@ -24,6 +23,7 @@ interface ModalProps {
 	actions?: BtnOptions[]
 	visible?: boolean
 	zIndex?: number
+	closePlacement?: 'header' | 'header-end' | 'overlay' | 'overlay-end' | 'none' | 'footer'
 }
 const props = withDefaults(defineProps<ModalProps>(), {
 	thin: false,
@@ -31,6 +31,7 @@ const props = withDefaults(defineProps<ModalProps>(), {
 	dismissable: true,
 	visible: false,
 	zIndex: 99,
+	closePlacement: 'header'
 })
 
 const emit = defineEmits(['update:visible'])
@@ -56,6 +57,17 @@ const maxWidth = $computed(() => {
 	return { 'max-width': '720px' }
 })
 
+// Computed properties for close button placement
+const isOverlay = $computed(() => props.closePlacement === 'overlay' || props.closePlacement === 'overlay-end')
+const isHeader = $computed(() => props.closePlacement === 'header' || props.closePlacement === 'header-end')
+const isFooter = $computed(() => props.closePlacement === 'footer')
+const isNone = $computed(() => props.closePlacement === 'none')
+
+const overlayCloseClass = $computed(() => {
+	if (props.closePlacement === 'overlay-end') return 'top-1 end-1'
+	return 'top-1 start-1'
+})
+
 function closeModal() {
 	isVisible = false
 	setTimeout(() => { emit('update:visible', false) }, 200)
@@ -63,7 +75,11 @@ function closeModal() {
 
 defineExpose({ closeModal })
 
-const escapeKeyClose = (e: KeyboardEvent) => props.dismissable && useEscape(e, () => { closeModal() })
+const escapeKeyClose = (e: KeyboardEvent) => {
+	if (props.dismissable && e.key === 'Escape') {
+		closeModal()
+	}
+}
 
 function openModal() {
 	setTimeout(() => (isVisible = true), 1)
@@ -77,64 +93,43 @@ 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"
-	>
-		<Card class="modal" :style="{ ...maxWidth }" :thin="thin" @click.stop>
-			<header v-if="slots.toolbar || title" class="tool-bar">
+<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 }" :thin="thin" @click.stop :class="{ 'pt-0': thin, 'pt-1': !thin, 'm_mt-5': isOverlay, 'display-flex column': side }">
+		<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" />
+			<slot name="toolbar" />
+			<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' }" />
+			<!-- Header-end close button -->
+			<Btn v-if="dismissable && isHeader && closePlacement === 'header-end'" :style="{ float: side ? '' : '' }" flat icon="close" thin icon-mobile-size="1.4" @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 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" />
 				<slot name="toolbar" />
-				<Btn
-					v-if="dismissable" :style="{ float: side ? '' : '' }" flat icon="close" thin icon-mobile-size="1.4"
-					@click="closeModal"
-				/>
-				<Title v-if="title" class="modal-title" tag="h3" :label="title" />
+				<!-- Header-end close button (no title) -->
+				<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" />
 			</header>
-
-			<div v-else class="sticky z-index-999 -mt-1 -ms-1 px-025 h-30px pt-025 modal-no-title">
-				<Btn
-					v-if="dismissable" class="position-start" icon="close" thin round color="white"
-					icon-mobile-size="1.4" @click="closeModal"
-				/>
-			</div>
+			
 			<slot />
-			<footer v-if="slots.footer || actions?.length" class="modal-footer mt-1">
+			<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>
-		</Card>
-	</div>
+			<Btn v-if="dismissable && isFooter" icon="close" label="Close" class="mx-auto absolute start-0 end-0 modalFooterBtn" @click="closeModal" />
+			</Card>
+			</div>
 </template>
 
 <style>
 .modal {
 	color: var(--bgl-popup-text);
-	/* display: flex;
-	flex-direction: column; */
-}
-
-.modal-title {
-	text-align: center;
-	font-weight: 600;
-	font-size: 20px;
-	margin-inline-end: 2rem;
-	margin-top: 0.5rem;
-	margin-bottom: 0 !important;
-	width: 100%;
-	line-height: 2;
-	display: -webkit-box;
-	max-width: 100%;
-	-webkit-line-clamp: 1;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.modal-footer {
-	gap: 1rem;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
 }
 
 .modal-footer>div {
@@ -147,6 +142,10 @@ onUnmounted(() => {
 .modal-no-title {
 	width: calc(100% + 2rem);
 	border-radius: var(--card-border-radius);
+}
+
+.modalFooterBtn {
+	bottom: calc(var(--btn-height) / 2 * -1);
 
 }
 </style>

package/src/components/analytics/BarChart.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Icon, Loading } from '@bagelink/vue'
-import { computed } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 
 interface SecondaryValue {
 	label: string
@@ -29,6 +29,9 @@ interface Props {
 	maxBars?: number
 	loading?: boolean
 	rtl?: boolean
+	animated?: boolean
+	animationDuration?: number
+	animationStartDelay?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -41,8 +44,18 @@ const props = withDefaults(defineProps<Props>(), {
 	maxBars: 30,
 	loading: false,
 	rtl: false,
+	animated: true,
+	animationDuration: 1500,
+	animationStartDelay: 0,
 })
 
+// Animation state
+const animatedProgress = ref(0)
+const isAnimating = ref(false)
+const isInView = ref(false)
+const observer = ref<IntersectionObserver | null>(null)
+const chartRef = ref<HTMLElement | null>(null)
+
 const chartData = computed(() => {
 	if (!props.data || props.data.length === 0) return []
 
@@ -56,6 +69,94 @@ const chartData = computed(() => {
 	}))
 })
 
+// Animation computed properties
+const getBarOpacity = computed(() => {
+	return (index: number) => {
+		if (!props.animated) return 1
+		if (!isInView.value) return 0
+
+		const totalBars = chartData.value.length
+
+		// Each bar appears with a delay based on its index
+		const barDelay = index / totalBars
+		const progress = Math.max(0, Math.min(1, (animatedProgress.value - barDelay) * totalBars))
+
+		return progress
+	}
+})
+
+// Animation functions
+function easeOutCubic(t: number): number {
+	return 1 - Math.pow(1 - t, 3)
+}
+
+function startAnimation() {
+	if (isAnimating.value || !props.animated) return
+
+	console.log(`🎯 TrendChart: Starting animation with ${props.animationDuration}ms duration`)
+	isAnimating.value = true
+	animatedProgress.value = 0
+
+	const startTime = performance.now()
+
+	function animate(currentTime: number) {
+		const elapsed = currentTime - startTime
+		const progress = Math.min(elapsed / props.animationDuration, 1)
+		const easedProgress = easeOutCubic(progress)
+
+		animatedProgress.value = easedProgress
+
+		if (progress < 1) {
+			requestAnimationFrame(animate)
+		} else {
+			isAnimating.value = false
+			console.log(`✅ TrendChart: Animation completed`)
+		}
+	}
+
+	requestAnimationFrame(animate)
+}
+
+function setupIntersectionObserver() {
+	if (!chartRef.value || observer.value) return
+
+	observer.value = new IntersectionObserver(
+		(entries) => {
+			entries.forEach(entry => {
+				if (entry.isIntersecting && !isInView.value) {
+					console.log(`👀 TrendChart: Entered viewport, starting animation in ${props.animationStartDelay}ms`)
+					isInView.value = true
+					setTimeout(() => {
+						startAnimation()
+					}, props.animationStartDelay)
+				}
+			})
+		},
+		{
+			threshold: 0.3,
+			rootMargin: '50px'
+		}
+	)
+
+	observer.value.observe(chartRef.value)
+}
+
+onMounted(() => {
+	if (props.animated) {
+		setupIntersectionObserver()
+	} else {
+		// If not animated, show all bars immediately
+		isInView.value = true
+		animatedProgress.value = 1
+	}
+})
+
+onUnmounted(() => {
+	if (observer.value) {
+		observer.value.disconnect()
+	}
+})
+
 function formatDate(dateStr: string): string {
 	const date = new Date(dateStr)
 	return date.toLocaleDateString('he-IL', {
@@ -79,7 +180,7 @@ 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>`]
+	let tooltipLines = [`${item.displayLabel}`, `<b>${primaryText}</b>`]
 
 	if (item.secondaryValues && Array.isArray(item.secondaryValues)) {
 		item.secondaryValues.forEach((secondary: SecondaryValue) => {
@@ -94,14 +195,20 @@ function formatTooltip(item: any): string {
 </script>
 
 <template>
-	<div class="h-100p flex column flex-stretch">
-		<div class="flex space-between">
-			<div class="flex align-center gap-05 pb-1">
-				<Icon :name="icon" size="1.2" :color="color" class="line-height-08" />
+	<div ref="chartRef" class="h-100p flex column flex-stretch">
+		<div class="flex space-between  pb-1">
+			<div class="flex align-center gap-05">
+				<Icon :name="icon" size="1.2" :color="color" class="line-height-0" />
 				<p class="white-space light m_txt14">
 					{{ title }}
 				</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'" />
+				<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 ltr overflow justify-content-start">
 			<div
@@ -109,7 +216,11 @@ function formatTooltip(item: any): string {
 				: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}%)` }"
+				:style="{
+					width: `max(2rem, ${100 / chartData.length}%)`,
+					opacity: getBarOpacity(index),
+					transition: animated ? 'opacity 0.3s ease-out' : 'none'
+				}"
 			>
 				<div
 					class="bar radius-05 transition-400 "

package/src/components/analytics/KpiCard.vue

@@ -50,8 +50,8 @@ const trendColor = computed(() => isIncreasing.value ? 'var(--bgl-green)' : 'var
 <template>
 	<Card class=" flex column space-between align-items-start py-1 px-1-5 m_p-1 relative ">
 		<div class="mb-1 flex space-between align-items-start m_mb-05 w-100p">
-			<div class="flex gap-025 align-items-start">
-				<Icon :name="icon" size="1" :color="color" class="line-height-08" weight="300" />
+			<div class="flex gap-025">
+				<Icon :name="icon" size="1" :color="color" class="line-height-0" weight="300" />
 				<div>
 					<h3 class="txt14 m-0 line-height-12 light opacity-6">
 						{{ title }}