@bagelink/vue 1.4.109 → 1.4.115

package/src/components/form/inputs/Upload/upload.css

@@ -1,235 +1,232 @@
 .fileUploadWrap {
-	outline: 1px solid var(--border-color);
-	border-radius: var(--input-border-radius);
-	text-align: center;
-	cursor: pointer;
-	transition: var(--bgl-transition);
-	position: relative;
-	font-size: var(--input-font-size);
-	overflow-y: auto;
-	background: var(--input-bg);
-	height: 215px;
+    outline: 1px solid var(--border-color);
+    border-radius: var(--input-border-radius);
+    text-align: center;
+    cursor: pointer;
+    transition: var(--bgl-transition);
+    position: relative;
+    font-size: var(--input-font-size);
+    overflow-y: auto;
+    background: var(--input-bg);
+    height: 215px;
+    outline-offset: -1px;
 }
 
 .bagel-input .fileUploadWrap.fileDropZone {
-	background: var(--input-bg);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: var(--bgl-gray);
-	flex-direction: column;
+    background: var(--input-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--bgl-gray);
+    flex-direction: column;
 }
 
 .fileUploadWrap.dragover,
 .fileUploadWrap:hover {
-	box-shadow: inset 0 0 10px #00000012;
+    box-shadow: inset 0 0 10px #00000012;
 }
 
 .fileUploadWrap[style*='height: auto;'] {
-	min-height: 215px;
+    min-height: 215px;
 }
 
 .multi-image-item-preview {
-	border: 1px solid var(--border-color) !important;
-	border-radius: var(--input-border-radius);
-	margin: 0.5rem !important;
-	background: var(--bgl-popup-bg);
-	padding: 0;
-	padding-inline-end: 1rem;
-	padding-inline-start: 0.25rem;
-	text-align: start;
-	color: var(--input-color);
-	display: grid;
-	grid-template-columns: auto 1fr 22px;
-	gap: 0.5rem;
-	align-items: center;
-	height: var(--btn-height);
-	font-size: var(--label-font-size);
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--input-border-radius);
+    margin: 0.5rem !important;
+    background: var(--bgl-popup-bg);
+    padding: 0;
+    padding-inline-end: 1rem;
+    padding-inline-start: 0.25rem;
+    text-align: start;
+    color: var(--input-color);
+    display: grid;
+    grid-template-columns: auto 1fr 22px;
+    gap: 0.5rem;
+    align-items: center;
+    height: var(--btn-height);
+    font-size: var(--label-font-size);
 }
 
 .multi-image-item-preview p {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .multi-preview {
-	/* width: 40px; */
-	height: calc(var(--btn-height) - 0.5rem);
-	max-width: calc(var(--btn-height) - 0.5rem);
-	border-radius: calc(var(--input-border-radius) / 2);
-	object-fit: cover;
-	background: var(--bgl-gray-light);
-	text-align: center !important;
-	justify-content: center;
-	align-items: center;
-	display: flex;
+    /* width: 40px; */
+    height: calc(var(--btn-height) - 0.5rem);
+    max-width: calc(var(--btn-height) - 0.5rem);
+    border-radius: calc(var(--input-border-radius) / 2);
+    object-fit: cover;
+    background: var(--bgl-gray-light);
+    text-align: center !important;
+    justify-content: center;
+    align-items: center;
+    display: flex;
 }
 
 .bgl-single-preview {
-	height: 100%;
-	position: relative;
+    height: 100%;
+    position: relative;
 }
 
-.bgl-single-preview + .fileUploadPlaceHolder {
-	position: absolute;
-	inset: 0;
-	margin: auto;
-	top: calc(50% - 2rem);
+.bgl-single-preview+.fileUploadPlaceHolder {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    top: calc(50% - 2rem);
 }
 
 .single-image-item-preview {
-	height: 100%;
-	min-height: 100%;
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+    height: 100%;
+    min-height: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .fileUploadWrap[style*='height: auto'] .single-image-item-preview {
-	min-height: 215px;
+    min-height: 215px;
 }
 
 .fileUploadWrap[style*='height: auto'] .single-preview {
-	margin: 0rem !important;
+    margin: 0rem !important;
 }
 
 .single-preview {
-	margin: 1rem;
-	padding: 0px;
-	height: calc(100% - 2rem);
-	max-height: calc(100% - 2rem);
-	background: var(--bgl-gray-light);
-	max-width: calc(100% - 2rem);
-	object-fit: contain;
+    margin: 1rem;
+    padding: 0px;
+    height: calc(100% - 2rem);
+    max-height: calc(100% - 2rem);
+    background: var(--bgl-gray-light);
+    max-width: calc(100% - 2rem);
+    object-fit: contain;
 }
 
 .single-image-item-preview:hover::after {
-	content: 'zoom_in';
-	font-size: 32px;
-	font-family: 'Material Symbols Outlined', serif;
-	position: absolute;
-	border-radius: 100%;
-	color: var(--bgl-white);
-	z-index: 9;
-	pointer-events: none;
+    content: 'zoom_in';
+    font-size: 32px;
+    font-family: 'Material Symbols Outlined', serif;
+    position: absolute;
+    border-radius: 100%;
+    color: var(--bgl-white);
+    z-index: 9;
+    pointer-events: none;
 }
 
 .single-image-item-preview:hover img {
-	filter: brightness(70%);
+    filter: brightness(70%);
 }
 
 .bgl_fill-image.single-image-item-preview {
-	height: 100%;
+    height: 100%;
 }
 
 .bgl_fill-image.single-image-item-preview .single-preview {
-	border-radius: unset;
-	object-fit: cover;
-	box-shadow: unset;
-	width: 100%;
-	height: auto;
+    border-radius: unset;
+    object-fit: cover;
+    box-shadow: unset;
+    width: 100%;
+    height: auto;
 }
 
 .single-image-item-preview .pie {
-	transform-origin: top;
-	transform: scale(1.4);
-	position: absolute;
-	text-align: center;
-	inset: 0;
-	margin: auto;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	background: transparent;
-	border: none !important;
-	padding: 0 !important;
+    transform-origin: top;
+    transform: scale(1.4);
+    position: absolute;
+    text-align: center;
+    inset: 0;
+    margin: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: transparent;
+    border: none !important;
+    padding: 0 !important;
 }
 
 .bgl_oval-upload {
-	border-radius: 100% !important;
-	overflow: hidden;
+    border-radius: 100% !important;
+    overflow: hidden;
 }
 
 .bgl_oval-upload p {
-	padding: 0.75rem !important;
-	font-size: 12px;
+    padding: 0.75rem !important;
+    font-size: 12px;
 }
 
 .bgl_oval-upload .fileUploadPlaceHolder {
-	top: 0;
+    top: 0;
 }
 
 .bgl_oval-upload .pie {
-	transform: scale(1);
+    transform: scale(1);
 }
 
 .bgl_oval-upload span.bgl_icon-font.color-primary {
-	transform: scale(0.4) !important;
+    transform: scale(0.4) !important;
 }
 
 .bgl_oval-upload .single-image-item-preview {
-	height: 100%;
+    height: 100%;
 }
 
 .bgl_oval-upload .single-preview {
-	margin: 0;
-	height: 100% !important;
+    margin: 0;
+    height: 100% !important;
 }
 
 .pie {
-	width: 30px;
-	height: 30px;
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+    width: 30px;
+    height: 30px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .pie:before {
-	content: '';
-	position: absolute;
-	border-radius: 50%;
-	inset: 0;
-	transition: all 0.2s ease-in-out;
-	background: conic-gradient(var(--bgl-primary) calc(var(--p) * 1%), #0000 0);
-	-webkit-mask: radial-gradient(
-		farthest-side,
-		#0000 calc(99% - var(--b)),
-		#000 calc(100% - var(--b))
-	);
-	mask: radial-gradient(
-		farthest-side,
-		#0000 calc(99% - var(--b)),
-		#000 calc(100% - var(--b))
-	);
+    content: '';
+    position: absolute;
+    border-radius: 50%;
+    inset: 0;
+    transition: all 0.2s ease-in-out;
+    background: conic-gradient(var(--bgl-primary) calc(var(--p) * 1%), #0000 0);
+    -webkit-mask: radial-gradient(farthest-side,
+            #0000 calc(99% - var(--b)),
+            #000 calc(100% - var(--b)));
+    mask: radial-gradient(farthest-side,
+            #0000 calc(99% - var(--b)),
+            #000 calc(100% - var(--b)));
 }
 
 .pie .success {
-	transform: scale(0);
-	opacity: 0;
-	transition: all 0.3s ease-in-out;
+    transform: scale(0);
+    opacity: 0;
+    transition: all 0.3s ease-in-out;
 }
 
 .pie .progress {
-	position: absolute;
-	font-size: 10px;
+    position: absolute;
+    font-size: 10px;
 }
 
 .pie.complete .progress {
-	display: none;
+    display: none;
 }
 
 .pie.complete .success {
-	transform: scale(1.3);
-	opacity: 1;
+    transform: scale(1.3);
+    opacity: 1;
 }
 
 .pie.complete:before {
-	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
+    background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
 
 .pie.complete {
-	color: var(--bgl-green);
-}
+    color: var(--bgl-green);
+}

package/src/components/layout/AppContent.vue

@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import { inject } from 'vue'
+import { Btn, PageTitle } from '@bagelink/vue'
+
+interface Props {
+	title?: string
+	showMenuButton?: boolean
+	showBackButton?: boolean
+	backTo?: string
+	border?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+	showMenuButton: true,
+	showBackButton: false,
+	backTo: '/',
+	border: true,
+})
+
+// Inject menu state from parent
+const menuState = inject('menuState') as {
+	isOpen: { value: boolean }
+	isMobile: { value: boolean }
+	toggleMenu: () => void
+}
+
+// Inject sidebar card style state
+const sidebarCardStyle = inject('sidebarCardStyle', { value: true })
+</script>
+
+<template>
+	<div class="app-content h-100p flex column" :class="{
+	'paddingAppContent': sidebarCardStyle?.value,
+	}">
+		<!-- Header -->
+		<header class="app-header flex align-items-center space-between py-1 min-h60px w-100p  m_flex-wrap" :class="{
+			'border-bottom': border,
+			'px-1': !sidebarCardStyle?.value,
+																		}">
+			<!-- Left Side -->
+			<div class="flex align-items-center gap-col-075 m_flex-wrap">
+				<!-- Menu Toggle Button -->
+				<Btn v-if="showMenuButton" flat icon="dock_to_right" @click="menuState.toggleMenu" />
+		
+				<!-- Back Button -->
+				<Btn v-if="showBackButton" flat icon="arrow_back" :to="backTo" class="back-btn" />
+		
+				<!-- Page Title -->
+				<PageTitle v-if="title">
+					{{ title }}
+				</PageTitle>
+		
+				<!-- Custom Left Content -->
+				<slot name="header-left" />
+			</div>
+		
+			<!-- Center Content -->
+			<div class="flex align-items-center">
+				<slot name="header-center" />
+			</div>
+		
+			<!-- Right Side -->
+			<div class="flex align-items-center gap-row-05 m_flex-grow-1">
+				<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,
+								}">
+			<slot name="content">
+				<!-- Default slot for content without explicit template -->
+				<slot />
+			</slot>
+		</main>
+	</div>
+</template>
+
+<style>
+.slide-fade-enter-from:has(.app-header),
+.slide-fade-leave-to:has(.app-header) {
+	transform: translateX(0) !important;
+	opacity: 1 !important;
+}
+
+.slide-fade-enter-from:has(.app-header) .pageContent,
+.slide-fade-leave-to:has(.app-header) .pageContent {
+	transform: translateX(-20px) !important;
+	opacity: 0 !important;
+}
+
+.slide-fade-enter-active:has(.app-header) .pageContent,
+.slide-fade-leave-active:has(.app-header) .pageContent {
+	transition: all 0.15s ease-in;
+	overflow: hidden;
+}
+</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;
+}
+
+.app-header {
+	flex-shrink: 0;
+}
+
+main {
+	min-height: 0; /* חשוב לאפשר overflow נכון */
+}
+@media screen and (max-width: 910px) {
+	.paddingAppContent {
+		padding-inline: 0.5rem;
+	}
+}
+</style>

package/src/components/layout/AppLayout.vue

@@ -0,0 +1,124 @@
+<script lang="ts" setup>
+import { ref, provide, onMounted, onUnmounted, computed } from 'vue'
+
+interface Props {
+	sidebarWidth?: string
+	sidebarCardStyle?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	sidebarWidth: '260px',
+	sidebarCardStyle: false
+})
+
+// Menu state
+const isOpen = ref(true)
+const isMobile = ref(false)
+
+// Check if mobile
+function checkMobile() {
+	isMobile.value = window.innerWidth < 768
+	if (isMobile.value) {
+		isOpen.value = false
+	}
+}
+
+// Toggle menu
+function toggleMenu() {
+	isOpen.value = !isOpen.value
+}
+
+// Close menu on mobile when clicking outside
+function closeOnMobile() {
+	if (isMobile.value) {
+		isOpen.value = false
+	}
+}
+
+// Computed styles for main content margin
+const mainContentStyles = computed(() => {
+	if (isMobile.value) {
+		return { marginLeft: '0' }
+	}
+	const collapsedWidth = props.sidebarCardStyle ? '82px' : '66px'
+	return {
+		marginLeft: isOpen.value ? props.sidebarWidth : collapsedWidth
+	}
+})
+
+// Provide state to child components
+provide('menuState', {
+	isOpen,
+	isMobile,
+	toggleMenu,
+	closeOnMobile,
+	sidebarWidth: props.sidebarWidth,
+	sidebarCollapsedWidth: props.sidebarCardStyle ? '82px' : '66px'
+})
+
+// Initialize
+onMounted(() => {
+	checkMobile()
+	window.addEventListener('resize', checkMobile)
+})
+
+onUnmounted(() => {
+	window.removeEventListener('resize', checkMobile)
+})
+</script>
+
+<template>
+	<div class="app-layout vh-100 relative">
+		<!-- Mobile Overlay -->
+		<div
+			v-if="isMobile && isOpen"
+			class="overlay"
+			@click="closeOnMobile"
+		/>
+
+		<!-- Sidebar Slot -->
+		<slot name="sidebar" />
+
+		<!-- Main Content Area -->
+		<main
+			class="main-content flex column ease-300"
+			:style="mainContentStyles"
+		>
+			<!-- Header Slot -->
+			<slot name="header" />
+
+			<!-- Page Content -->
+			<div class="page-content overflow w-100p h-100p">
+				<slot />
+			</div>
+		</main>
+	</div>
+</template>
+
+<style scoped>
+.app-layout {
+	display: flex;
+	height: 100vh;
+	overflow: hidden;
+}
+
+/* Overlay for mobile */
+.overlay {
+	position: fixed;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.5);
+	z-index: 40;
+}
+
+/* Main Content */
+.main-content {
+	flex: 1;
+	overflow: hidden;
+	transition: margin-left 400ms ease;
+		min-height: 100vh
+	}
+	
+	.page-content {
+		overflow: auto;
+	}
+</style>