@bagelink/vue 1.12.23 → 1.12.25

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.12.23",
+  "version": "1.12.25",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",
@@ -90,7 +90,7 @@
     "signature_pad": "^5.0.9",
     "vue-i18n": "^11.2.8",
     "vue-toastification": "^2.0.0-rc.5",
-    "@bagelink/utils": "1.12.23"
+    "@bagelink/utils": "1.12.25"
   },
   "scripts": {
     "dev": "tsx watch src/index.ts",

package/src/components/dataTable/DataTable.vue

@@ -412,4 +412,14 @@ tbody tr {
 tbody tr:hover {
 	background: var(--bgl-gray-light);
 }
+
+@media (max-width: 910px) {
+	.col {
+		max-width: 60vw !important;
+	}
+	.max-col-width {
+	max-width: 60vw !important;
+}
+}
+
 </style>

package/src/components/layout/AppLayout.vue

@@ -4,15 +4,17 @@ import { ref, provide, onMounted, onUnmounted, computed } from 'vue'
 interface Props {
 	sidebarWidth?: string
 	sidebarCardStyle?: boolean
+	defaultOpen?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
 	sidebarWidth: '260px',
-	sidebarCardStyle: false
+	sidebarCardStyle: false,
+	defaultOpen: true,
 })
 
 // Menu state
-const isOpen = ref(true)
+const isOpen = ref(props.defaultOpen)
 const isMobile = ref(false)
 
 // Check if mobile

package/src/components/layout/AppSidebar.vue

@@ -7,7 +7,7 @@ import { resolveI18n } from '../../i18n'
 
 // Extended interface for links with active route tracking
 interface LinkWithAction extends NavLink {
-	activeRoutes?: string[] // נתיבים שצריכים להיות מסומנים כאקטיביים עבור הלינק הזה
+	activeRoutes?: string[] // Routes that should be marked as active for this link
 }
 
 interface Props {
@@ -23,10 +23,14 @@ interface Props {
 	name?: string
 	frame?: boolean
 	activeRoutes?: string[]
+	centerlinks?: boolean
+	defaultOpen?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
 	card: true,
+	centerlinks: false,
+	defaultOpen: true,
 	bgColor: 'var(--bgl-white)',
 	textColor: 'var(--bgl-black)',
 	activeColor: 'var(--bgl-black)',
@@ -40,9 +44,12 @@ const route = useRoute()
 const isTransitioning = ref(false)
 
 // Inject menu state from parent
+const _fallbackIsOpen = ref(props.defaultOpen)
+const _fallbackIsMobile = ref(false)
+
 const menuState = inject('menuState', {
-	isOpen: { value: true },
-	isMobile: { value: false },
+	isOpen: _fallbackIsOpen,
+	isMobile: _fallbackIsMobile,
 	closeOnMobile: () => void 0,
 	sidebarWidth: '260px',
 	sidebarCollapsedWidth: '66px',
@@ -160,7 +167,7 @@ const sidebarStyles = computed(() => {
 		>
 			<!-- Logo/Brand -->
 			<router-link
-				to="/" class="decoration-none flex px-05" :class="{
+				to="/" class="decoration-none flex siderbarLogoWrap" :class="{
 					'gap-05': menuState.isOpen.value,
 					'gap-0': !menuState.isOpen.value,
 				}"
@@ -175,7 +182,7 @@ const sidebarStyles = computed(() => {
 			</router-link>
 
 			<!-- Navigation Links -->
-			<nav class="sidebar-nav flex column flex-stretch gap-025 align-items-start scrollbar-gutter-stable">
+			<nav class="sidebar-nav flex column flex-stretch gap-025 align-items-start scrollbar-gutter-stable" :class="{ 'justify-content-center': props.centerlinks }">
 				<Btn
 					v-for="link in props.navLinks" :key="link.to"
 					:title="!menuState.isOpen.value && !menuState.isMobile.value ? resolveI18n(link.label) : ''" fullWidth
@@ -183,7 +190,8 @@ const sidebarStyles = computed(() => {
 					:style="{
 						backgroundColor: isActiveRoute(link) ? props.activeColor : props.bgColor,
 						color: isActiveRoute(link) ? 'white' : props.textColor,
-					}" :to="link.to || '/'" @click="link.action"
+					}"
+					:to="link.to || '/'" @click="link.action"
 				>
 					<Icon :name="link.icon" size="1.2" />
 					<span class="nav-text">
@@ -196,8 +204,13 @@ const sidebarStyles = computed(() => {
 				<!-- Footer Links -->
 				<Btn
 					v-for="link in props.footerLinks" :key="link.to || link.label"
-					:title="!menuState.isOpen.value && !menuState.isMobile.value ? resolveI18n(link.label) : ''" alignTxt="start"
-					fullWidth flat :icon="link.icon" class="flex-shrink-0 px-1" :to="link.to" @click="link.action"
+					:title="!menuState.isOpen.value && !menuState.isMobile.value ? resolveI18n(link.label) : ''"
+					:style="{
+						color: isActiveRoute(link) ? 'white' : props.textColor,
+					}"
+					fullWidth
+					alignTxt="start"
+					flat :icon="link.icon" class="flex-shrink-0 px-1" :to="link.to" @click="link.action"
 				>
 					<span class="nav-text">
 						{{ resolveI18n(link.label) }}

package/src/i18n/locales/en.json

@@ -243,6 +243,7 @@
     "reorderSaving": "Saving order..."
   },
   "datastores": {
+    "selectCollection": "Select a collection from the list",
     "fieldName": "Name",
     "fieldStore": "Store",
     "fieldStoreHint": "e.g.: default",

package/src/i18n/locales/he.json

@@ -264,6 +264,7 @@
     "reorderSaving": "שומר סדר..."
   },
   "datastores": {
+    "selectCollection": "בחרו קולקציה מהרשימה",
     "fieldName": "שם",
     "fieldStore": "Store",
     "fieldStoreHint": "לדוגמה: default",

package/src/styles/buttons.css

@@ -89,10 +89,6 @@
     border: 1px solid var(--border-color);
 }
 
-.border-primary {
-    border: 1px solid var(--bgl-primary);
-}
-
 .outline {
     outline: 1px solid var(--border-color);
 }

package/src/styles/layout.css

@@ -198,7 +198,8 @@
 }
 
 .justify-content,
-.justify-content-center {
+.justify-content-center,
+.justify-center {
     justify-content: center;
 }
 
@@ -226,7 +227,8 @@
     align-items: flex-start !important;
 }
 
-.align-items-center {
+.align-items-center,
+.align-center {
     align-items: center !important;
 }
 
@@ -3364,6 +3366,46 @@
     height: 10px !important;
 }
 
+.max-h-10p {
+    max-height: 10%;
+}
+
+.max-h-20p {
+    max-height: 20%;
+}
+
+.max-h-30p {
+    max-height: 30%;
+}
+
+.max-h-40p {
+    max-height: 40%;
+}
+
+.max-h-50p {
+    max-height: 50%;
+}
+
+.max-h-60p {
+    max-height: 60%;
+}
+
+.max-h-70p {
+    max-height: 70%;
+}
+
+.max-h-80p {
+    max-height: 80%;
+}
+
+.max-h-90p {
+    max-height: 90%;
+}
+
+.max-h-100p {
+    max-height: 100%;
+}
+
 .hm-10px,
 .max-h-10px,
 .h-max-10px,
@@ -3651,6 +3693,10 @@
     max-height: 100px;
 }
 
+.max-h-100p {
+    max-height: 100%;
+}
+
 .hm-100vh,
 .max-h-100vh,
 .h-max-100vh,

package/src/styles/mobilLayout.css

@@ -2609,6 +2609,47 @@
         height: 10vh !important;
     }
 
+
+    .m_max-h-10p {
+        max-height: 10%;
+    }
+
+    .m_max-h-20p {
+        max-height: 20%;
+    }
+
+    .m_max-h-30p {
+        max-height: 30%;
+    }
+
+    .m_max-h-40p {
+        max-height: 40%;
+    }
+
+    .m_max-h-50p {
+        max-height: 50%;
+    }
+
+    .m_max-h-60p {
+        max-height: 60%;
+    }
+
+    .m_max-h-70p {
+        max-height: 70%;
+    }
+
+    .m_max-h-80p {
+        max-height: 80%;
+    }
+
+    .m_max-h-90p {
+        max-height: 90%;
+    }
+
+    .m_max-h-100p {
+        max-height: 100%;
+    }
+
     .m_h-10px,
     .m_h10px {
         height: 10px !important;

package/src/utils/elementUtils.ts

@@ -530,7 +530,7 @@ export function column<T = any, P extends Path<T, PO> = any, PO extends PathsOpt
 	return {
 		$el: 'div',
 		id,
-		class: options?.class ?? 'column-class',
+		class: options?.class ?? 'column-class ellipsis-1 line-height-15',
 		vIf: options?.vIf,
 		style: options?.style,
 		transform: options?.transform,