@bagelink/vue 1.4.163 → 1.4.165

package/package.json

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

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