@bagelink/vue 1.4.161 → 1.4.165

package/package.json

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

package/src/components/Modal.vue

@@ -61,7 +61,6 @@ const maxWidth = $computed(() => {
 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'
@@ -75,7 +74,7 @@ function closeModal() {
 
 defineExpose({ closeModal })
 
-const escapeKeyClose = (e: KeyboardEvent) => {
+function escapeKeyClose(e: KeyboardEvent) {
 	if (props.dismissable && e.key === 'Escape') {
 		closeModal()
 	}
@@ -93,45 +92,80 @@ 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">
-	<!-- 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" @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" />
+	<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
+		>
+			<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
+				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'" :style="{ float: side ? '' : '' }" flat icon="close" thin icon-mobile-size="1.4" class="ms-auto" @click="closeModal" />
+				<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>
-			
+
 			<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" />
-			</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);
 }
+
 .modal .bgl_btn.bgl_btn_flat {
 	color: var(--bgl-popup-text) !important;
 }

package/src/components/analytics/BarChart.vue

@@ -210,7 +210,7 @@ function formatTooltip(item: any): string {
 				</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"
@@ -232,7 +232,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>

package/src/components/calendar/Index.vue

@@ -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/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>