@bagelink/vue 1.15.61 → 1.15.65

package/src/styles/text.css

@@ -217,21 +217,38 @@
     font-size: 0.25rem;
 }
 
+.txt0375rem,
+.txt-0375rem {
+    font-size: 0.375rem;
+}
+
 .txt05rem,
 .txt-05rem {
     font-size: 0.5rem;
 }
 
+.txt0625rem,
+.txt-0625rem {
+    font-size: 0.625rem;
+}
+
 .txt075rem,
 .txt-075rem {
     font-size: 0.75rem;
 }
 
+.txt0875rem,
+.txt-0875rem {
+    font-size: 0.875rem;
+}
+
 .txt1rem,
 .txt-1rem {
     font-size: 1rem;
 }
 
+
+
 .txt1-25rem,
 .txt-1-25rem {
     font-size: 1.25rem;
@@ -1788,21 +1805,36 @@
         font-size: 9px;
     }
 
-    .m_txt025,
-    .m_txt-025 {
+    .m_txt025rem,
+    .m_txt-025rem {
         font-size: 0.25rem;
     }
 
-    .m_txt05,
-    .m_txt-05 {
+    .m_txt0375rem,
+    .m_txt-0375rem {
+        font-size: 0.375rem;
+    }
+
+    .m_txt05rem,
+    .m_txt-05rem {
         font-size: 0.5rem;
     }
 
-    .m_txt075,
-    .m_txt-075 {
+    .m_txt0625rem,
+    .m_txt-0625rem {
+        font-size: 0.625rem;
+    }
+
+    .m_txt075rem,
+    .m_txt-075rem {
         font-size: 0.75rem;
     }
 
+    .m_txt0875rem,
+    .m_txt-0875rem {
+        font-size: 0.875rem;
+    }
+
     .m_txt1rem,
     .m_txt-1rem {
         font-size: 1rem;

package/src/styles/theme.css

@@ -33,7 +33,7 @@
  */
 :root {
     --bgl-primary: var(--bgl-blue);
-    --bgl-primary-tint: #2e5bff80;
+    --bgl-primary-tint: color-mix(in srgb, var(--bgl-primary) 16%, transparent);
     --bgl-primary-light: #eef6ff;
     --bgl-black: #282929;
     --bgl-black-tint: #28292980;

package/dist/components/analytics/BarChart.vue.d.ts

@@ -1,47 +0,0 @@
-interface SecondaryValue {
-    label: string;
-    value: number;
-    currency?: boolean;
-    prefix?: string;
-    suffix?: string;
-}
-interface DataPoint {
-    date: string;
-    value: number;
-    secondaryValues?: SecondaryValue[];
-    label?: string;
-}
-interface Props {
-    title: string;
-    data: DataPoint[];
-    icon?: string;
-    color?: string;
-    percentageChange?: number;
-    prefix?: string;
-    suffix?: string;
-    currency?: boolean;
-    maxBars?: number;
-    loading?: boolean;
-    rtl?: boolean;
-    animated?: boolean;
-    animationDuration?: number;
-    animationStartDelay?: number;
-}
-declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
-    icon: string;
-    color: string;
-    loading: boolean;
-    percentageChange: number;
-    prefix: string;
-    suffix: string;
-    currency: boolean;
-    maxBars: number;
-    rtl: boolean;
-    animated: boolean;
-    animationDuration: number;
-    animationStartDelay: number;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    chartRef: HTMLDivElement;
-}, HTMLDivElement>;
-export default _default;
-//# sourceMappingURL=BarChart.vue.d.ts.map

package/dist/components/analytics/BarChart.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BarChart.vue.d.ts","sourceRoot":"","sources":["../../../src/components/analytics/BarChart.vue"],"names":[],"mappings":"AA2QA,UAAU,cAAc;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CACf;AAED,UAAU,SAAS;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,eAAe,CAAC,EAAE,cAAc,EAAE,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;CACd;AAED,UAAU,KAAK;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,SAAS,EAAE,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC5B;;UAZO,MAAM;WACL,MAAM;aAMJ,OAAO;sBALE,MAAM;YAChB,MAAM;YACN,MAAM;cACJ,OAAO;aACR,MAAM;SAEV,OAAO;cACF,OAAO;uBACE,MAAM;yBACJ,MAAM;;;;AAsT7B,wBASG"}

package/dist/components/analytics/KpiCard.vue.d.ts

@@ -1,24 +0,0 @@
-interface Props {
-    title: string;
-    value: number | string;
-    icon?: string;
-    color?: string;
-    percentageChange?: number;
-    prefix?: string;
-    suffix?: string;
-    currency?: Currency;
-    loading?: boolean;
-    subtitle?: string;
-}
-type Currency = 'ILS' | 'USD' | 'EUR';
-declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
-    icon: string;
-    color: string;
-    subtitle: string;
-    loading: boolean;
-    percentageChange: number;
-    prefix: string;
-    suffix: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;
-//# sourceMappingURL=KpiCard.vue.d.ts.map

package/dist/components/analytics/KpiCard.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"KpiCard.vue.d.ts","sourceRoot":"","sources":["../../../src/components/analytics/KpiCard.vue"],"names":[],"mappings":"AAyFA,UAAU,KAAK;IACd,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAA;;UAV7B,MAAM;WACL,MAAM;cAMH,MAAM;aADP,OAAO;sBAJE,MAAM;YAChB,MAAM;YACN,MAAM;;AAmLhB,wBAQG"}

package/dist/components/analytics/LineChart.vue.d.ts

@@ -1,35 +0,0 @@
-interface DataPoint {
-    date: string;
-    value: number;
-    label?: string;
-}
-interface Props {
-    data: DataPoint[];
-    title?: string;
-    icon?: string;
-    color?: string;
-    height?: number;
-    showPoints?: boolean;
-    currency?: boolean;
-    animated?: boolean;
-    animationDuration?: number;
-    animationStartDelay?: number;
-    percentageChange?: number;
-}
-declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
-    title: string;
-    icon: string;
-    color: string;
-    height: number;
-    percentageChange: number;
-    currency: boolean;
-    animated: boolean;
-    animationDuration: number;
-    animationStartDelay: number;
-    showPoints: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    chartRef: HTMLDivElement;
-    svgRef: SVGSVGElement;
-}, HTMLDivElement>;
-export default _default;
-//# sourceMappingURL=LineChart.vue.d.ts.map

package/dist/components/analytics/LineChart.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LineChart.vue.d.ts","sourceRoot":"","sources":["../../../src/components/analytics/LineChart.vue"],"names":[],"mappings":"AA0WA,UAAU,SAAS;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACd;AAED,UAAU,KAAK;IACd,IAAI,EAAE,SAAS,EAAE,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAA;CACzB;;WAVQ,MAAM;UACP,MAAM;WACL,MAAM;YACL,MAAM;sBAMI,MAAM;cAJd,OAAO;cACP,OAAO;uBACE,MAAM;yBACJ,MAAM;gBAJf,OAAO;;;;;AAobrB,wBASG"}

package/dist/components/analytics/PieChart.vue.d.ts

@@ -1,53 +0,0 @@
-interface PieData {
-    label: string;
-    value: number;
-    color?: string;
-}
-interface Props {
-    data: PieData[];
-    title?: string;
-    icon?: string;
-    color?: string;
-    colors?: string[];
-    size?: number;
-    showLegend?: boolean;
-    donut?: boolean;
-    thickness?: number;
-    centerLabel?: string;
-    animated?: boolean;
-    animationDuration?: number;
-    animationDelay?: number;
-    animationStartDelay?: number;
-    centerValue?: number;
-    showCenterTotal?: boolean;
-    percentageChange?: number;
-    showLabelsOnChart?: boolean;
-    showConnectorLines?: boolean;
-    labelColor?: string;
-}
-declare function restartAnimation(): void;
-declare const _default: import('vue').DefineComponent<Props, {
-    restartAnimation: typeof restartAnimation;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
-    title: string;
-    icon: string;
-    size: number;
-    color: string;
-    labelColor: string;
-    thickness: number;
-    percentageChange: number;
-    animated: boolean;
-    animationDuration: number;
-    animationStartDelay: number;
-    showLegend: boolean;
-    donut: boolean;
-    centerLabel: string;
-    animationDelay: number;
-    showCenterTotal: boolean;
-    showLabelsOnChart: boolean;
-    showConnectorLines: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    chartRef: HTMLDivElement;
-}, HTMLDivElement>;
-export default _default;
-//# sourceMappingURL=PieChart.vue.d.ts.map

package/dist/components/analytics/PieChart.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PieChart.vue.d.ts","sourceRoot":"","sources":["../../../src/components/analytics/PieChart.vue"],"names":[],"mappings":"AAqiBA,UAAU,OAAO;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACd;AAED,UAAU,KAAK;IACd,IAAI,EAAE,OAAO,EAAE,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAA;CACnB;AAoID,iBAAS,gBAAgB,SAIxB;;;;WA3JQ,MAAM;UACP,MAAM;UAGN,MAAM;WAFL,MAAM;gBAgBD,MAAM;eAXP,MAAM;sBAQC,MAAM;cANd,OAAO;uBACE,MAAM;yBAEJ,MAAM;gBAPf,OAAO;WACZ,OAAO;iBAED,MAAM;oBAGH,MAAM;qBAGL,OAAO;uBAEL,OAAO;wBACN,OAAO;;;;AAsnB7B,wBAUG"}

package/dist/components/analytics/index.d.ts

@@ -1,5 +0,0 @@
-export { default as BarChart } from './BarChart.vue';
-export { default as KpiCard } from './KpiCard.vue';
-export { default as LineChart } from './LineChart.vue';
-export { default as PieChart } from './PieChart.vue';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/analytics/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/analytics/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAA"}

package/src/components/analytics/BarChart.vue

@@ -1,262 +0,0 @@
-<script setup lang="ts">
-import { formatDate, Icon, Loading } from '@bagelink/vue'
-import { computed, ref, onMounted, onUnmounted } from 'vue'
-
-interface SecondaryValue {
-	label: string
-	value: number
-	currency?: boolean
-	prefix?: string
-	suffix?: string
-}
-
-interface DataPoint {
-	date: string
-	value: number
-	secondaryValues?: SecondaryValue[]
-	label?: string
-}
-
-interface Props {
-	title: string
-	data: DataPoint[]
-	icon?: string
-	color?: string
-	percentageChange?: number
-	prefix?: string
-	suffix?: string
-	currency?: boolean
-	maxBars?: number
-	loading?: boolean
-	rtl?: boolean
-	animated?: boolean
-	animationDuration?: number
-	animationStartDelay?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	icon: 'trending_up',
-	color: 'var(--bgl-primary)',
-	percentageChange: 0,
-	prefix: '',
-	suffix: '',
-	currency: false,
-	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 [] }
-
-	// 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, 'MMM')
-	}))
-})
-
-// 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 - (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 formatValue(value: number, isCurrency: boolean = false): string {
-	if (isCurrency) {
-		return new Intl.NumberFormat('he-IL', {
-			style: 'currency',
-			currency: 'ILS',
-			minimumFractionDigits: 0
-		}).format(value)
-	}
-	return value.toLocaleString()
-}
-
-function formatTooltip(item: any): string {
-	const primaryValue = formatValue(item.value, props.currency)
-	const primaryText = `${props.prefix}${primaryValue}${props.suffix}`
-	const tooltipLines = [`${item.displayLabel}`, `<b>${primaryText}</b>`]
-
-	if (item.secondaryValues && Array.isArray(item.secondaryValues)) {
-		item.secondaryValues.forEach((secondary: SecondaryValue) => {
-			const formattedSecondaryValue = formatValue(secondary.value, secondary.currency || false)
-			const secondaryText = `${secondary.prefix || ''}${formattedSecondaryValue}${secondary.suffix || ''}`
-			tooltipLines.push(`${secondary.label}: <b>${secondaryText}</b>`)
-		})
-	}
-
-	return `<div class="trendTooltip">${tooltipLines.join('<p>')}</div>`
-}
-</script>
-
-<template>
-	<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 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="{
-					width: `max(2rem, ${100 / chartData.length}%)`,
-					opacity: getBarOpacity(index),
-					transition: animated ? 'opacity 0.3s ease-out' : 'none',
-				}"
-			>
-				<div
-					class="bar radius-05 transition-400 " :style="{
-						height: `${bar.height * 1.8}px`,
-						background: `linear-gradient(180deg, ${color}60, ${color}30)`,
-						minHeight: '4px',
-					}"
-				/>
-				<span
-					v-if="chartData.length <= 15 || index % Math.ceil(chartData.length / 8) === 0"
-					class="txt-9 block line-height-1 -bottom-075 white-space color-gray absolute"
-					:class="rtl ? 'rtl' : 'ltr'"
-				>
-					{{ bar.displayLabel }}
-				</span>
-			</div>
-		</div>
-		<div v-if="loading" class="absolute inset flex justify-content-center rounded">
-			<Loading v-if="loading" />
-		</div>
-	</div>
-</template>
-
-<style>
-
-.trendTooltip p {
-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 {
-min-width: 2rem;
-}
-
-</style>

package/src/components/analytics/KpiCard.vue

@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import { Card, Icon } from '@bagelink/vue'
-import { computed } from 'vue'
-
-interface Props {
-	title: string
-	value: number | string
-	icon?: string
-	color?: string
-	percentageChange?: number
-	prefix?: string
-	suffix?: string
-	currency?: Currency
-	loading?: boolean
-	subtitle?: string
-}
-
-type Currency = 'ILS' | 'USD' | 'EUR'
-
-const props = withDefaults(defineProps<Props>(), {
-	icon: 'trending_up',
-	color: 'var(--bgl-primary)',
-	percentageChange: 0,
-	prefix: '',
-	suffix: '',
-	loading: false,
-	subtitle: ''
-})
-
-const isIncreasing = computed(() => props.percentageChange >= 0)
-
-const formattedValue = computed(() => {
-	if (typeof props.value === 'string') { return props.value }
-
-	if (props.currency) {
-		return new Intl.NumberFormat('he-IL', {
-			style: 'currency',
-			currency: props.currency,
-			minimumFractionDigits: 0
-		}).format(props.value)
-	}
-
-	return props.value.toLocaleString()
-})
-
-const trendColor = computed(() => isIncreasing.value ? 'var(--bgl-green)' : 'var(--bgl-red)'
-)
-</script>
-
-<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">
-				<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 }}
-					</h3>
-					<p v-if="subtitle" class="txt12 color-gray">
-						{{ subtitle }}
-					</p>
-				</div>
-			</div>
-			<div v-if="percentageChange !== 0" class="kpi-trend flex gap-025 txt12 bold ms-auto" :style="{ color: trendColor }">
-				<Icon :name="isIncreasing ? 'trending_up' : 'trending_down'" />
-				<span>{{ Math.abs(percentageChange).toFixed(1) }}%</span>
-			</div>
-		</div>
-
-		<div class="flex">
-			<div class="flex align-items-baseline gap-025 w100p" :class="{ loading }">
-				<span v-if="prefix" class="kpi-prefix txt16 semi color-gray">{{ prefix }}</span>
-				<span class="kpi-main-value bold txt28 m_txt24 line-height-1">{{ loading ? '...' : formattedValue }}</span>
-				<span v-if="suffix" class="kpi-suffix txt16 semi color-gray">{{ suffix }}</span>
-			</div>
-		</div>
-	</Card>
-</template>
-
-<style scoped>
-.loading .kpi-main-value {
-	color: var(--bgl-gray);
-}
-</style>