@bagelink/vue 1.15.261 → 1.15.265

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.261",
+  "version": "1.15.265",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/EmptyState.vue

@@ -41,9 +41,9 @@ const slots = useSlots()
 <template>
 	<div class="bgl-empty txt-center" :class="[{ 'bgl-empty--compact': compact }, className]">
 		<div v-if="slots.icon || icon !== 'none'" class="bgl-empty-icon flex-center">
-			<slot name="icon"><Icon :icon="icon" :size="compact ? 1.6 : 2.2" /></slot>
+			<slot name="icon"><Icon :icon="icon" :size="compact ? 1.9 : 2.4" weight="300" /></slot>
 		</div>
-		<p v-if="title" class="bgl-empty-title m-0">{{ title }}</p>
+		<p v-if="title" class="bgl-empty-title m-0 opacity-7">{{ title }}</p>
 		<p v-if="description || slots.default" class="bgl-empty-desc m-0">
 			<slot>{{ description }}</slot>
 		</p>
@@ -70,19 +70,19 @@ const slots = useSlots()
 	padding: 1.25rem 1rem;
 }
 .bgl-empty-icon {
-	width: 3.5rem;
-	height: 3.5rem;
+	width: 4rem;
+	height: 4rem;
 	border-radius: 50%;
-	background: var(--bgl-gray-tint, color-mix(in srgb, var(--bgl-gray) 14%, transparent));
-	color: var(--bgl-gray);
+	background: var(--bgl-gray-tint);
+	color: var(--bgl-gray-110);
 }
 .bgl-empty--compact .bgl-empty-icon {
-	width: 2.5rem;
-	height: 2.5rem;
+	width: 2.8rem;
+	height: 2.8rem;
 }
 .bgl-empty-title {
-	font-weight: 600;
-	font-size: 1rem;
+	font-weight: 400;
+	font-size: 0.875rem;
 	color: var(--bgl-text-color, inherit);
 }
 .bgl-empty-desc {

package/src/components/dataTable/useTableSelection.ts

@@ -43,6 +43,12 @@ export function useTableSelection<T extends { [key: string]: any }>(options: Use
 	function toggleSelectItem(item: T, event?: MouseEvent) {
 		const currentIndex = allItems.value.findIndex(i => i.id === item.id)
 
+		if (!options.selectable) {
+			options.onSelect(options.cleanData ? options.cleanData(item) : { ...item })
+			lastSelectedIndex.value = currentIndex
+			return
+		}
+
 		// Handle Shift+click for range selection
 		if (event?.shiftKey && lastSelectedIndex.value !== null && currentIndex !== -1) {
 			const startIndex = Math.min(lastSelectedIndex.value, currentIndex)

package/src/components/layout/AppSidebar.vue

@@ -213,7 +213,7 @@ const sidebarStyles = computed(() => {
 					:active-color="props.activeColor"
 				/>
 			</nav>
-			<div class="sidebar-footer flex column flex-stretch gap-025 px-05 mx-auto mt-auto">
+			<div class="sidebar-footer flex column flex-stretch gap-025 px-05 mx-auto mt-auto m_border-top">
 				<Btn
 					v-for="link in props.footerLinks" :key="link.to || link.label"
 					:title="!isOpen && !isMobile ? resolveI18n(link.label) : ''"
@@ -221,7 +221,7 @@ const sidebarStyles = computed(() => {
 						backgroundColor: isActiveRoute(link) ? props.activeColor : props.bgColor,
 						color: isActiveRoute(link) ? 'white' : props.textColor,
 					}"
-					fullWidth alignTxt="start" class="sidebar-link-btn flex-shrink-0 px-075" :class="{ 'nav-btn-active': isActiveRoute(link) }"
+					fullWidth alignTxt="start" class="sidebar-link-btn flex-shrink-0 px-075" :class="[link.class, { 'nav-btn-active': isActiveRoute(link) }]"
 					:to="link.to || undefined" @click="link.action"
 				>
 					<Icon :name="link.icon" size="1.2" />
@@ -384,6 +384,9 @@ margin:  0 !important;
 .rtl .sidebar-mobile-closed {
 	transform: translateX(100%);
 }
+.sidebar-nav{
+	mask: linear-gradient(to top, transparent, var(--bgl-box-bg) 5px);
+}
 }
 
 </style>

package/src/components/layout/SidebarNavItem.vue

@@ -108,7 +108,7 @@ function onParentClick() {
 					<Icon name="expand_more" size="1.1" class="nav-text sidebar-chevron line-height-1" :class="{ 'sidebar-chevron-open': expanded }" />
 				</Btn>
 			</template>
-			<div class="sidebar-flyout p-05 min-w-180px display-flex gap-025 column">
+			<div class="sidebar-flyout px-05 pb-05 pb-025 min-w-180px display-flex gap-025 column">
 				<p class="sidebar-flyout-label m-0 semi opacity-5 uppercase">{{ resolveI18n(link.label) }}</p>
 				<Btn
 					v-for="child in link.children" :key="child.to || child.label"

package/src/components/layout/TabsNav.vue

@@ -188,12 +188,12 @@ onBeforeUnmount(() => {
 --bgl-tab-hover-bg: rgba(255, 255, 255, .4);
 --bgl_tabs-indicator-color: var(--bgl-popup-bg);
 --bgl-tabs-flat-indicator-color: var(--bgl-primary);
+--bgl_tab-border-radius: var(--bgl_tabs-border-radius);
 }
 
 </style>
 
 <style scoped>
-
 .bgl_tabs_wrap {
 background: var(--bgl_tabs-background);
 border-radius: calc(var(--bgl_tabs-border-radius) * 1.4);
@@ -224,18 +224,18 @@ font-family: inherit;
 height: calc(var(--bgl-btn-height) - var(--bgl_tabs-block-padding) * 2);
 padding-inline: var(--bgl_tab-inline-padding);
 padding-block: 0;
-	border-radius: var(--bgl_tab-border-radius);
+border-radius: var(--bgl_tab-border-radius);
 transition: var(--bgl-transition);
 color: inherit;
 display: flex;
 align-items: center;
-	gap: var(--bgl_tab-gap);
+gap: var(--bgl_tab-gap);
 }
 
-.bgl_tab:hover {
+/* .bgl_tab:hover {
 background: var(--bgl-tab-hover-bg);
 border-radius: var(--bgl_tab-border-radius, 7px);
-}
+} */
 
 .bgl_tabs_wrap::before {
 content: '';