@bagelink/vue 1.4.141 → 1.4.147

package/src/components/form/inputs/RichText/utils/selection.ts

@@ -68,7 +68,7 @@ export function isStyleActive(style: string, doc: Document) {
 		// Text alignment
 		alignLeft: (el) => {
 			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
-			return (paragraph as HTMLElement)?.style.textAlign === 'left'
+			return (paragraph as HTMLElement)?.style.textAlign === 'start'
 		},
 		alignCenter: (el) => {
 			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
@@ -76,7 +76,7 @@ export function isStyleActive(style: string, doc: Document) {
 		},
 		alignRight: (el) => {
 			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
-			return (paragraph as HTMLElement)?.style.textAlign === 'right'
+			return (paragraph as HTMLElement)?.style.textAlign === 'end'
 		},
 		alignJustify: (el) => {
 			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
@@ -87,6 +87,14 @@ export function isStyleActive(style: string, doc: Document) {
 		textDirection: (el) => {
 			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
 			return (paragraph as HTMLElement)?.dir === 'rtl'
+		},
+		ltrDirection: (el) => {
+			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
+			return (paragraph as HTMLElement)?.dir === 'ltr'
+		},
+		rtlDirection: (el) => {
+			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
+			return (paragraph as HTMLElement)?.dir === 'rtl'
 		}
 	}
 

package/src/components/form/inputs/RichText/utils/table.ts

@@ -209,7 +209,7 @@ export function deleteColumn(range: Range) {
 	}
 }
 
-export function alignColumn(range: Range, alignment: 'left' | 'center' | 'right' | 'justify') {
+export function alignColumn(range: Range, alignment: 'start' | 'center' | 'end' | 'justify') {
 	const cell = range.startContainer.parentElement?.closest('td')
 	if (!cell) return
 

package/src/components/index.ts

@@ -2,6 +2,7 @@ export { default as Accordion } from './Accordion.vue'
 export { default as AccordionItem } from './AccordionItem.vue'
 export { default as AddressSearch } from './AddressSearch.vue'
 export { default as Alert } from './Alert.vue'
+export * from './analytics'
 export { default as Avatar } from './Avatar.vue'
 export { default as Badge } from './Badge.vue'
 export { default as BglVideo } from './BglVideo.vue'

package/src/components/layout/AppContent.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { inject } from 'vue'
+import { inject, computed, onMounted, ref } from 'vue'
 import { Btn, PageTitle } from '@bagelink/vue'
 
 interface Props {
@@ -25,22 +25,30 @@ const menuState = inject('menuState') as {
 }
 
 // Inject sidebar card style state
-const sidebarCardStyle = inject('sidebarCardStyle', { value: true })
+const sidebarCardStyle = inject('sidebarCardStyle', { value: false })
+
+// Computed property to check if sidebar has card style
+const hasSidebarCard = computed(() => {
+	// Check if there's an AppSidebar with card class in the DOM
+	const sidebar = document.querySelector('.app-sidebar .card')
+	return sidebar !== null || sidebarCardStyle?.value
+})
 </script>
 
 <template>
 	<div class="app-content h-100p flex column" :class="{
-	'paddingAppContent': sidebarCardStyle?.value,
+	'paddingAppContent': hasSidebarCard,
 	}">
 		<!-- Header -->
-		<header class="app-header flex align-items-center space-between py-1 min-h60px w-100p  m_flex-wrap" :class="{
+		<header class="app-header flex align-items-center space-between py-1 m_pt-025 m_pb-05 min-h60px w-100p  m_flex-wrap" :class="{
 			'border-bottom': border,
-			'px-1': !sidebarCardStyle?.value,
-																		}">
+	'px-1': !hasSidebarCard,
+	'm_px-1': hasSidebarCard
+}">
 			<!-- Left Side -->
-			<div class="flex align-items-center gap-col-075 m_flex-wrap">
+			<div class="flex align-items-center gap-col-075 m_flex-wrap m_pe-075">
 				<!-- Menu Toggle Button -->
-				<Btn v-if="showMenuButton" flat icon="dock_to_right" @click="menuState.toggleMenu" />
+				<Btn v-if="showMenuButton" flat icon="dock_to_right" class="menuToggleButton" @click="menuState.toggleMenu" />
 		
 				<!-- Back Button -->
 				<Btn v-if="showBackButton" flat icon="arrow_back" :to="backTo" class="back-btn" />
@@ -60,21 +68,21 @@ const sidebarCardStyle = inject('sidebarCardStyle', { value: true })
 			</div>
 		
 			<!-- Right Side -->
-			<div class="flex align-items-center gap-row-05 m_flex-grow-1">
+			<div class="flex align-items-center gap-row-05 m_flex-grow-1 endNavTools">
 				<slot name="header-right" />
 			</div>
 		</header>
 		
 		<!-- Page Content -->
-		<main class="pageContent flex-grow overflow py-1 w-100p m_p-05 m_scrollbar-gutter-stable-both m_vw100" :class="{
-			'px-1': !sidebarCardStyle?.value,
+		<main class="pageContent flex-grow overflow pt-1 pb-05 w-100p m_p-05 m_scrollbar-gutter-stable-both m_vw100" :class="{
+			'px-1': !hasSidebarCard,
 								}">
 			<slot name="content">
 				<!-- Default slot for content without explicit template -->
 				<slot />
 			</slot>
 		</main>
-	</div>
+		</div>
 </template>
 
 <style>
@@ -98,27 +106,19 @@ const sidebarCardStyle = inject('sidebarCardStyle', { value: true })
 </style>
 
 <style scoped>
-.paddingAppContent {
-	padding-inline-start: 0.5rem;
-	padding-inline-end: 1rem;
-}
-
-body:has(.sidebar-collapsed) .paddingAppContent {
-	padding-inline-start: 1.5rem;
-}
 .app-content {
-	height: 100vh;
+height: 100vh;
 }
-
+				
 .app-header {
-	flex-shrink: 0;
+flex-shrink: 0;
 }
-
+				
 main {
-	min-height: 0; /* חשוב לאפשר overflow נכון */
+min-height: 0;
 }
 @media screen and (max-width: 910px) {
-	.paddingAppContent {
+	.app-header {
 		padding-inline: 0.5rem;
 	}
 }

package/src/components/layout/AppLayout.vue

@@ -38,11 +38,11 @@ function closeOnMobile() {
 // Computed styles for main content margin
 const mainContentStyles = computed(() => {
 	if (isMobile.value) {
-		return { marginLeft: '0' }
+		return { marginInlineStart: '0' }
 	}
 	const collapsedWidth = props.sidebarCardStyle ? '82px' : '66px'
 	return {
-		marginLeft: isOpen.value ? props.sidebarWidth : collapsedWidth
+		marginInlineStart: isOpen.value ? props.sidebarWidth : collapsedWidth
 	}
 })
 
@@ -56,6 +56,9 @@ provide('menuState', {
 	sidebarCollapsedWidth: props.sidebarCardStyle ? '82px' : '66px'
 })
 
+// Provide sidebar card style based on prop
+provide('sidebarCardStyle', { value: props.sidebarCardStyle })
+
 // Initialize
 onMounted(() => {
 	checkMobile()
@@ -101,6 +104,14 @@ onUnmounted(() => {
 	height: 100vh;
 	overflow: hidden;
 }
+.app-layout:has(.cardWrapSide) {
+	padding-inline-start: 0.5rem;
+	padding-inline-end: 1rem;
+}
+
+.app-layout:has(.sidebar-collapsed .cardWrapSide) {
+	padding-inline-start: 1.5rem;
+}
 
 /* Overlay for mobile */
 .overlay {
@@ -114,11 +125,18 @@ onUnmounted(() => {
 .main-content {
 	flex: 1;
 	overflow: hidden;
-	transition: margin-left 400ms ease;
+	transition: margin-inline-start 400ms ease;
 		min-height: 100vh
 	}
 	
 	.page-content {
 		overflow: auto;
 	}
+@media screen and (max-width: 910px) {
+	.app-layout:has(.cardWrapSide),
+	.app-layout:has(.sidebar-collapsed .cardWrapSide) {
+		padding-inline-start: 0rem;
+		padding-inline-end: 0rem;
+	}
+}
 </style>

package/src/components/layout/AppSidebar.vue

@@ -65,7 +65,7 @@ const sidebarStyles = computed(() => {
 	let width = '280px'
 
 	if (!menuState.isMobile.value) {
-		const collapsedWidth = props.card ? '82px' : '76px'
+		const collapsedWidth = props.card ? '82px' : '68px'
 		width = menuState.isOpen.value ? menuState.sidebarWidth : collapsedWidth
 	}
 
@@ -100,7 +100,7 @@ function logout() {
 	...(props.card && { borderRadius: 'var(--card-border-radius)' }),
 }"
 			:class="{
-				card: props.card,
+	'card cardWrapSide': props.card,
 	'ps-05': !menuState.isOpen.value,
 				'scrollbar-gutter-both': menuState.isOpen.value,
 	aside_frame: props.frame,
@@ -267,5 +267,8 @@ function logout() {
 	.sidebar-mobile-closed {
 		transform: translateX(-100%);
 	}
+				[dir="rtl"] .sidebar-mobile-closed {
+					transform: translateX(100%);
+				}
 }
 </style>