@bagelink/vue 1.4.163 → 1.4.167

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.4.163",
+  "version": "1.4.167",
   "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 ltr overflow justify-content-start">
+		<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',
@@ -232,7 +224,8 @@ function formatTooltip(item: any): string {
 				/>
 				<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 rtl"
+					class="txt-9 block line-height-1 -bottom-075 white-space color-gray absolute"
+					:class="rtl ? 'rtl' : 'ltr'"
 				>
 					{{ bar.displayLabel }}
 				</span>
@@ -249,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/form/inputs/SelectBtn.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { Btn, Icon } from '@bagelink/vue'
+
+interface Option {
+	label: string
+	value: string | number
+	icon?: string
+}
+
+interface Props {
+	options: Option[]
+	thin?: boolean
+	outline?: boolean
+	multiselect?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), { multiselect: false })
+
+// When multiselect is true: array, when false: single value or null
+const selected = defineModel<string | number | (string | number)[] | null>('modelValue', { default: null })
+
+function toggleOption(value: string | number) {
+	if (props.multiselect) {
+		// Multiselect mode - work with arrays
+		const currentValue = Array.isArray(selected.value) ? selected.value : []
+		const index = currentValue.indexOf(value)
+		if (index > -1) {
+			selected.value = currentValue.filter(v => v !== value)
+		} else {
+			selected.value = [...currentValue, value]
+		}
+	} else {
+		// Single select mode - work with single values
+		if (selected.value === value) {
+			selected.value = null
+		} else {
+			selected.value = value
+		}
+	}
+}
+
+function isSelected(value: string | number) {
+	if (Array.isArray(selected.value)) {
+		return selected.value.includes(value)
+	}
+	return selected.value === value
+}
+</script>
+
+<template>
+	<div class="flex flex-wrap gap-05 SelectBtn">
+		<Btn
+			v-for="option in options"
+			:key="option.value"
+			:thin="thin"
+			:outline="outline"
+			:class="isSelected(option.value) ? 'primary' : 'bg-transparent color-black'"
+			type="button"
+			class="border px-075 radius-2"
+			@click="toggleOption(option.value)"
+		>
+			<Icon v-if="option.icon" :name="option.icon" weight="300" />
+			<p>{{ option.label }}</p>
+		</Btn>
+	</div>
+</template>
+
+<style scoped>
+.SelectBtn {
+	--btn-height: 30px;
+}
+</style>

package/src/components/form/inputs/Upload/UploadInput.vue

@@ -5,10 +5,12 @@ import { watch, ref } from 'vue'
 
 import { useFileUpload } from './useFileUpload'
 
-const props = withDefaults(defineProps<UploadInputProps>(), {
+const props = withDefaults(defineProps<UploadInputProps & { showIcon?: boolean; icon?: string }>(), {
 	height: '215px',
 	theme: 'dropzone',
 	accept: '*',
+	showIcon: true,
+	icon: 'upload_2',
 })
 
 const emit = defineEmits(['update:modelValue', 'addFileStart'])
@@ -160,7 +162,7 @@ function fileName(pathKey: string) {
 						
 							<slot v-if="(!pathKeys.length && !fileQueue.length) || multiple" name="placeholder" :files="pathKeys" :fileQueue :browse>
 								<p class="p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05 ">
-									<Icon icon="upload_2" class="user-select-none" />
+									<Icon v-if="showIcon" :name="icon" class="user-select-none" />
 									<span class=" pretty balance user-select-none ">
 										{{ dropPlaceholder || 'Drag and Drop files here or click to upload' }}
 									</span>

package/src/components/form/inputs/index.ts

@@ -13,6 +13,7 @@ export { default as RadioGroup } from './RadioGroup.vue'
 export { default as RadioPillsInput } from './RadioPillsInput.vue'
 export { default as RangeInput } from './RangeInput.vue'
 export { default as RichText } from './RichText/index.vue'
+export { default as SelectBtn } from './SelectBtn.vue'
 export { default as SelectInput } from './SelectInput.vue'
 export { default as SignaturePad } from './SignaturePad.vue'
 export { default as TableField } from './TableField.vue'

package/src/components/layout/AppSidebar.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import type { NavLink } from '@bagelink/vue'
+import { Btn, Icon } from '@bagelink/vue'
 import { inject, computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { Btn, Icon } from '@bagelink/vue'
-import type { NavLink } from '@bagelink/vue'
 
 // Extended interface for footer links that can have actions
 interface FooterLink extends NavLink {
@@ -82,47 +82,38 @@ function logout() {
 
 <template>
 	<aside
-		class="app-sidebar transition-400 fixed inset h-100vh z-99"
-		:class="{
+		class="app-sidebar transition-400 fixed start top bottom h-100vh z-99" :class="{
 			'sidebar-mobile-open': menuState.isMobile.value && menuState.isOpen.value,
-	'sidebar-mobile-closed':
-		menuState.isMobile.value && !menuState.isOpen.value,
-	transitioning: isTransitioning,
-	'p-05': props.card,
-	'sidebar-collapsed': !menuState.isMobile.value && !menuState.isOpen.value,
-}"
-		:style="sidebarStyles"
+			'sidebar-mobile-closed':
+				menuState.isMobile.value && !menuState.isOpen.value,
+			'transitioning': isTransitioning,
+			'p-05': props.card,
+			'sidebar-collapsed': !menuState.isMobile.value && !menuState.isOpen.value,
+		}" :style="sidebarStyles"
 	>
 		<div
 			:style="{
 				backgroundColor: props.bgColor,
 				color: props.textColor,
-	...(props.card && { borderRadius: 'var(--card-border-radius)' }),
-}"
-			:class="{
-	'card cardWrapSide': props.card,
-	'ps-05': !menuState.isOpen.value,
+				...(props.card && { borderRadius: 'var(--card-border-radius)' }),
+			}" :class="{
+				'card cardWrapSide': props.card,
+				'ps-05': !menuState.isOpen.value,
 				'scrollbar-gutter-both': menuState.isOpen.value,
-	aside_frame: props.frame,
-}"
-			class="overflow-hidden flex column flex-stretch gap-1 w100p pt-1 pb-05 h-100p"
+				'aside_frame': props.frame,
+			}" class="overflow-hidden flex column flex-stretch gap-1 w100p pt-1 pb-05 h-100p"
 		>
 			<!-- Logo/Brand -->
 			<router-link
-				to="/"
-				class="decoration-none flex px-05"
-				:class="{
-	'gap-05': menuState.isOpen.value,
+				to="/" class="decoration-none flex px-05" :class="{
+					'gap-05': menuState.isOpen.value,
 					'gap-0': !menuState.isOpen.value,
 				}"
 			>
 				<img
-					v-if="props.logo"
-					:src="props.logo"
-					:alt="props.logoAlt"
-					class="contain"
+					v-if="props.logo" :src="props.logo" :alt="props.logoAlt" class="contain"
 					:style="{ height: props.logoHeight }"
-				/>
+				>
 				<span class="nav-text">
 					{{ props.name }}
 				</span>
@@ -130,43 +121,52 @@ function logout() {
 
 			<!-- Navigation Links -->
 			<nav class="sidebar-nav flex column flex-stretch gap-025 align-items-start scrollbar-gutter-stable">
-				<Btn v-for="link in props.navLinks" :key="link.to" :title="!menuState.isOpen.value && !menuState.isMobile.value
-					? link.label
-					: ''
-																	" fullWidth alignTxt="start" class="flex-shrink-0 px-1" :class="{ 'nav-btn-active': route.path === link.to }" :style="{
-																		backgroundColor:
-																			route.path === link.to ? props.activeColor : props.bgColor,
-																		color: route.path === link.to ? 'white' : props.textColor,
-																}" :to="link.to || '/'">
+				<Btn
+					v-for="link in props.navLinks" :key="link.to" :title="!menuState.isOpen.value && !menuState.isMobile.value
+						? link.label
+						: ''
+					" fullWidth alignTxt="start" class="flex-shrink-0 px-1" :class="{ 'nav-btn-active': route.path === link.to }"
+					:style="{
+						backgroundColor:
+							route.path === link.to ? props.activeColor : props.bgColor,
+						color: route.path === link.to ? 'white' : props.textColor,
+					}" :to="link.to || '/'"
+				>
 					<Icon :name="link.icon" size="1.2" />
 					<span class="nav-text">
 						{{ link.label }}
 					</span>
 				</Btn>
-				</nav>
-				<!-- Footer -->
-				<div class="sidebar-footer flex column flex-stretch gap-025 align-items-start mt-auto scrollbar-gutter-stable">
-					<!-- Footer Links -->
-					<Btn v-for="link in props.footerLinks" :key="link.to || link.label" :title="!menuState.isOpen.value && !menuState.isMobile.value
+			</nav>
+			<!-- Footer -->
+			<div
+				class="sidebar-footer flex column flex-stretch gap-025 align-items-start mt-auto scrollbar-gutter-stable"
+			>
+				<!-- Footer Links -->
+				<Btn
+					v-for="link in props.footerLinks" :key="link.to || link.label" :title="!menuState.isOpen.value && !menuState.isMobile.value
 						? link.label
 						: ''
-																	" alignTxt="start" fullWidth flat :icon="link.icon" class="flex-shrink-0 px-1" :to="link.to" @click="link.action">
-						<span class="nav-text">
-							{{ link.label }}
-						</span>
-					</Btn>
-				
-					<!-- Default Logout Button if no footer links provided -->
-					<Btn v-if="props.footerLinks.length === 0" :title="!menuState.isOpen.value && !menuState.isMobile.value ? 'Logout' : ''
-																	" alignTxt="start" fullWidth flat icon="logout" class="flex-shrink-0 px-1" @click="logout">
-						<span class="nav-text"> Logout </span>
-					</Btn>
-				
-					<!-- Custom Footer Content Slot -->
-					<slot name="footer" />
-				</div>
-				</div>
-				</aside>
+					" alignTxt="start" fullWidth flat :icon="link.icon" class="flex-shrink-0 px-1" :to="link.to" @click="link.action"
+				>
+					<span class="nav-text">
+						{{ link.label }}
+					</span>
+				</Btn>
+
+				<!-- Default Logout Button if no footer links provided -->
+				<Btn
+					v-if="props.footerLinks.length === 0" :title="!menuState.isOpen.value && !menuState.isMobile.value ? 'Logout' : ''
+					" alignTxt="start" fullWidth flat icon="logout" class="flex-shrink-0 px-1" @click="logout"
+				>
+					<span class="nav-text"> Logout </span>
+				</Btn>
+
+				<!-- Custom Footer Content Slot -->
+				<slot name="footer" />
+			</div>
+		</div>
+	</aside>
 </template>
 
 <style>
@@ -189,7 +189,6 @@ function logout() {
 	overflow-y: auto;
 	flex: 1;
 }
-
 /* הסתרת גלילה בזמן שינוי גודל */
 .app-sidebar.transitioning .sidebar-nav {
 	scrollbar-width: none;
@@ -267,8 +266,10 @@ function logout() {
 	.sidebar-mobile-closed {
 		transform: translateX(-100%);
 	}
-				[dir="rtl"] .sidebar-mobile-closed {
-					transform: translateX(100%);
-				}
+
+				[dir="rtl"] .sidebar-mobile-closed,
+				.rtl .sidebar-mobile-closed {
+		transform: translateX(100%);
+	}
 }
 </style>