@bagelink/vue 1.4.153 → 1.4.159

package/src/components/form/inputs/Upload/UploadInput.vue

@@ -66,225 +66,108 @@ function fileName(pathKey: string) {
 </script>
 
 <template>
-	<div class="bagel-input">
-		<label v-if="label">{{ label }}</label>
-		<input v-if="required && !pathKeys.length" placeholder="required" type="text" required class="pixel">
-		<Card
-			v-if="theme === 'basic'"
-			outline
-			class="flex p-05 gap-1"
-			@dragover="(e) => handleDrag(e, true)"
-			@drop="handleDrop"
-		>
-			<Btn
-				v-if="!pathKeys.length && !fileQueue.length"
-				class="px-1-5"
-				icon="upload"
-				outline
-				:value="btnPlaceholder || 'Upload'"
-				@click="browse()"
-			/>
-
-			<template v-for="path_key in pathKeys" :key="path_key">
-				<div class="txt-gray txt-12 flex">
-					<div class="m-05 flex opacity-7 z-99">
-						<Btn
-							v-tooltip="'Delete'"
-							color="gray"
-							thin
-							icon="delete"
-							@click="removeFile(path_key)"
-						/>
-						<Btn
-							v-tooltip="'Replace'"
-							color="gray"
-							thin
-							icon="autorenew"
-							@click="browse()"
-						/>
-						<Btn
-							icon="download"
-							flat
-							thin
-							:href="pathKeyToURL(path_key)"
-							:download="fileName(path_key)"
-						/>
-						<div class="flex gap-025 rounded pe-1 ps-05 py-025 bg-gray-80 -my-1 ">
-							<Icon icon="draft" :size="1.5" />
-							<p
-								v-lightbox="{ src: pathKeyToURL(path_key), download: true }"
-								class="ellipsis-1 word-break-all h-20 m-0 color-black txt16"
-							>
-								{{ fileName(path_key) }}
-							</p>
-						</div>
-					</div>
-				</div>
-			</template>
-
-			<span
-				v-if="!pathKeys.length && !fileQueue.length"
-				class="txt-gray txt-12"
-			>
-				{{ noFilePlaceholder || 'No file selected' }}
+<div class="bagel-input">
+	<label v-if="label">{{ label }}</label>
+	<input v-if="required && !pathKeys.length" placeholder="required" type="text" required class="pixel">
+	<Card v-if="theme === 'basic'" outline class="flex p-05 gap-1" @dragover="(e) => handleDrag(e, true)" @drop="handleDrop">
+		<Btn v-if="!pathKeys.length && !fileQueue.length" class="px-1-5" icon="upload" outline :value="btnPlaceholder || 'Upload'" @click="browse()" />
+		<!-- Loading state during upload -->
+		<div v-if="fileQueue.length > 0" class="flex align-items-center gap-1 p-05">
+			<Loading size="20" />
+			<span class="txt-gray txt-12">
+				Uploading {{ fileQueue.length }} file{{ fileQueue.length > 1 ? 's' : '' }}...
 			</span>
-		</Card>
+		</div>
 
-		<div
-			v-else
-			class="fileUploadWrap"
-			:class="{
-				'fileDropZone': !pathKeys.length && !fileQueue.length,
-				'dragover': isDragOver,
-				'bgl_oval-upload': oval,
-			}"
-			:style="{ width, height }"
-			@click="browse()"
-			@dragover="(e) => handleDrag(e, true)"
-			@drop="handleDrop"
-			@dragleave="(e) => handleDrag(e)"
-		>
-			<slot name="files" :files="pathKeys" :fileQueue>
-				<div v-if="multiple" class="bgl-multi-preview">
-					<div
-						v-for="path_key in pathKeys"
-						:key="path_key"
-						v-lightbox="{ src: pathKeyToURL(path_key), download: true }"
-						class="multi-image-item-preview"
-						:class="{ 'bgl_fill-image': fill }"
-					>
-						<Image
-							v-if="isImage(path_key)"
-							:pathKey="path_key"
-							class="multi-preview"
-						/>
-						<Icon v-else icon="description" class="multi-preview" />
-						<p class="m-0">
+		<template v-for="path_key in pathKeys" :key="path_key">
+			<div class="txt-gray txt-12 flex">
+				<div class="m-05 flex opacity-8 z-99 gap-025">
+					<Btn v-tooltip="'Delete'" color="gray" thin icon="delete" @click="removeFile(path_key)" />
+					<Btn v-tooltip="'Replace'" color="gray" thin icon="autorenew" @click="browse()" />
+					<Btn icon="download" color="gray" thin :href="pathKeyToURL(path_key)" :download="fileName(path_key)" />
+					<div class="flex gap-025 rounded pe-1 ps-05 py-025 -my-1 ">
+						<Icon icon="draft" :size="1.5" />
+						<p v-lightbox="{ src: pathKeyToURL(path_key), download: true }" class="ellipsis-1 word-break-all h-20 m-0 color-black txt16">
 							{{ fileName(path_key) }}
 						</p>
-						<Btn
-							thin
-							flat
-							icon="delete"
-							color="red"
-							@click="removeFile(path_key)"
-						/>
-					</div>
-					<div
-						v-for="file in fileQueue"
-						:key="file.name"
-						class="multi-image-item-preview"
-						:class="{ 'bgl_fill-image': fill }"
-					>
-						<img
-							v-if="isImage(file.file.type)"
-							class="multi-preview"
-							:src="file.url"
-							alt=""
-						>
-						<Icon v-else icon="description" class="multi-preview" />
-						<p class="no-margin multi-preview-txt">
-							{{ file.name }}
-						</p>
-						<div
-							class="pie"
-							:style="{ '--p': file.progress }"
-							style="--b: 2px"
-							:class="{ complete: file.progress === 100 }"
-						>
-							<span v-if="file.progress < 100" class="progress">
-								{{ file.progress.toFixed(0) }}
-							</span>
-							<Icon class="success" icon="check_circle" />
 						</div>
-					</div>
-				</div>
-
-				<div
-					v-else-if="pathKeys.length > 0 || fileQueue.length > 0"
-					class="bgl-single-preview"
-				>
-					<div
-						v-for="path_key in pathKeys"
-						:key="path_key"
-						class="single-image-item-preview"
-						:class="{ 'bgl_fill-image': fill }"
-					>
-						<div class="position-start m-05 flex opacity-7 z-99 gap-025">
-							<Btn
-								v-tooltip="'Delete'"
-								color="gray"
-								thin
-								icon="delete"
-								@click="removeFile(path_key)"
-							/>
-							<Btn
-								v-tooltip="'Replace'"
-								color="gray"
-								thin
-								icon="autorenew"
-								@click="browse()"
-							/>
-							<Btn
-								v-tooltip="'Download'"
-								color="gray"
-								thin
-								icon="download"
-								:href="pathKeyToURL(path_key)"
-								:download="fileName(path_key)"
-							/>
 						</div>
-						<div v-if="isImage(path_key)" class="h-100">
-							<Image
-								v-lightbox="{ src: pathKeyToURL(path_key), download: true }"
-
-								class="single-preview"
-								:pathKey="path_key"
-								alt=""
-							/>
 						</div>
-						<Icon
-							v-else
-							v-lightbox="{ src: pathKeyToURL(path_key), download: true }"
-							:size="4"
-							weight="2"
-							icon="description"
-							class="color-primary w-100"
-						/>
-					</div>
-					<div
-						v-for="file in fileQueue"
-						:key="file.name"
-						class="single-image-item-preview"
-						:class="{ 'bgl_fill-image': fill }"
-					>
-						<Loading type="bar" :progress="file.progress" class="absolute bottom-05 end start w-100px mx-auto" />
-						<img
-							v-if="isImage(file.file.type)"
-							class="single-preview opacity-5"
-							:src="file.url"
-							alt=""
-						>
-					</div>
-				</div>
-			</slot>
-
-			<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" />
-					<span class=" pretty balance">
-						{{ dropPlaceholder || 'Drag and Drop files here or click to upload' }}
-					</span>
-				</p>
-			</slot>
-		</div>
-	</div>
+						</template>
+						
+						<span v-if="!pathKeys.length && !fileQueue.length" class="txt-gray txt-12">
+							{{ noFilePlaceholder || 'No file selected' }}
+						</span>
+						</Card>
+						
+						<div v-else class="fileUploadWrap" :class="{
+							'fileDropZone': !pathKeys.length && !fileQueue.length,
+							'dragover': isDragOver,
+								'bgl_oval-upload': oval,
+							}" :style="{ width, height }" @click="browse()" @dragover="(e) => handleDrag(e, true)" @drop="handleDrop" @dragleave="(e) => handleDrag(e)">
+							<slot name="files" :files="pathKeys" :fileQueue>
+								<div v-if="multiple" class="bgl-multi-preview">
+									<!-- Show uploaded files only if showFileList is true (default) -->
+									<div v-if="showFileList !== false" v-for="path_key in pathKeys" :key="path_key" v-lightbox="{ src: pathKeyToURL(path_key), download: true }" class="multi-image-item-preview"
+										:class="{ 'bgl_fill-image': fill }">
+										<Image v-if="isImage(path_key)" :pathKey="path_key" class="multi-preview" />
+										<Icon v-else icon="description" class="multi-preview" />
+										<p class="m-0">
+											{{ fileName(path_key) }}
+										</p>
+										<Btn thin flat icon="delete" color="red" @click="removeFile(path_key)" />
+									</div>
+									<!-- File count indicator when showFileList is false and multiple files -->
+									<div v-if="showFileList === false && pathKeys.length > 0" class="flex column gap-05 pt-1">
+										<p class="color-primary">
+											{{ pathKeys.length }} file{{ pathKeys.length > 1 ? 's' : '' }} uploaded
+										</p>
+										<Btn color="primary" thin icon="autorenew" value="Replace files" @click="browse()" />
+									</div>
+									<div v-for="file in fileQueue" :key="file.name" class="multi-image-item-preview" :class="{ 'bgl_fill-image': fill }">
+										<img v-if="isImage(file.file.type)" class="multi-preview" :src="file.url" alt="">
+										<Icon v-else icon="description" class="multi-preview" />
+										<p class="no-margin multi-preview-txt">
+											{{ file.name }}
+										</p>
+										<div class="pie" :style="{ '--p': file.progress }" style="--b: 2px" :class="{ complete: file.progress === 100 }">
+											<span v-if="file.progress < 100" class="progress">
+												{{ file.progress.toFixed(0) }}
+											</span>
+											<Icon class="success" icon="check_circle" />
+										</div>
+									</div>
+								</div>
+						
+								<div v-else-if="pathKeys.length > 0 || fileQueue.length > 0" class="bgl-single-preview">
+									<div v-for="path_key in pathKeys" :key="path_key" class="single-image-item-preview" :class="{ 'bgl_fill-image': fill }">
+										<div class="flex opacity-8 z-99 gap-025 absolute top-0 start-0" :class="{ 'mx-auto end-0 mt-1 justify-content-center': oval, 'm-05': !oval }">
+											<Btn v-tooltip="'Delete'" color="white" frame thin icon="delete" @click="removeFile(path_key)" />
+											<Btn v-tooltip="'Replace'" color="white" frame thin icon="autorenew" @click="browse()" />
+											<Btn v-tooltip="'Download'" color="white" frame thin icon="download" :href="pathKeyToURL(path_key)" :download="fileName(path_key)" />
+										</div>
+										<div v-if="isImage(path_key)" class="h-100">
+											<Image v-lightbox="{ src: pathKeyToURL(path_key), download: true }" class="single-preview" :pathKey="path_key" alt="" />
+										</div>
+										<Icon v-else v-lightbox="{ src: pathKeyToURL(path_key), download: true }" :size="4" weight="2" icon="description" class="color-primary w-100" />
+									</div>
+									<div v-for="file in fileQueue" :key="file.name" class="single-image-item-preview" :class="{ 'bgl_fill-image': fill }">
+										<Loading type="bar" :progress="file.progress" class="absolute bottom-05 end start w-100px mx-auto rounded overflow-hidden" />
+										<img v-if="isImage(file.file.type)" class="single-preview opacity-5" :src="file.url" alt="">
+									</div>
+								</div>
+							</slot>
+						
+							<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" />
+									<span class=" pretty balance user-select-none ">
+										{{ dropPlaceholder || 'Drag and Drop files here or click to upload' }}
+									</span>
+								</p>
+							</slot>
+						</div>
+						</div>
 </template>
 
 <style src="./upload.css" scoped></style>

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

@@ -106,7 +106,7 @@
     object-fit: contain;
 }
 
-.single-image-item-preview:hover::after {
+.single-image-item-preview::after {
     content: 'zoom_in';
     font-size: 32px;
     font-family: 'Material Symbols Outlined', serif;
@@ -115,6 +115,16 @@
     color: var(--bgl-white);
     z-index: 9;
     pointer-events: none;
+    opacity: 0;
+    transition: all 0.4s ease;
+}
+
+.single-image-item-preview:hover::after {
+    opacity: 1;
+}
+
+.single-image-item-preview img {
+    transition: all 0.2s ease;
 }
 
 .single-image-item-preview:hover img {
@@ -125,7 +135,13 @@
     height: 100%;
 }
 
-.bgl_fill-image.single-image-item-preview .single-preview {
+.bgl_fill-image.single-image-item-preview img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+}
+
+.bgl_fill-image.single-image-item-preview div:has(img) {
     border-radius: unset;
     object-fit: cover;
     box-shadow: unset;
@@ -133,6 +149,15 @@
     height: auto;
 }
 
+.fileUploadWrap:not(.bgl_oval-upload) .bgl_fill-image .single-preview {
+    margin: 0rem !important;
+    height: 100% !important;
+    max-height: 100% !important;
+    max-width: 100% !important;
+    width: 100% !important;
+    object-fit: cover !important;
+}
+
 .single-image-item-preview .pie {
     transform-origin: top;
     transform: scale(1.4);
@@ -151,6 +176,8 @@
 .bgl_oval-upload {
     border-radius: 100% !important;
     overflow: hidden;
+    aspect-ratio: 1 !important;
+    margin-inline: auto !important;
 }
 
 .bgl_oval-upload p {
@@ -177,8 +204,15 @@
 .bgl_oval-upload .single-preview {
     margin: 0;
     height: 100% !important;
+    max-width: unset;
+    max-height: unset;
 }
 
+.bgl_oval-upload .bgl_fill-image .single-preview {
+    height: auto !important;
+}
+
+
 .pie {
     width: 30px;
     height: 30px;

package/src/components/layout/AppSidebar.vue

@@ -112,7 +112,7 @@ function logout() {
 				to="/"
 				class="decoration-none flex px-05"
 				:class="{
-					'gap-025': menuState.isOpen.value,
+	'gap-05': menuState.isOpen.value,
 					'gap-0': !menuState.isOpen.value,
 				}"
 			>

package/src/components/layout/TabsNav.vue

@@ -35,9 +35,15 @@ function updateIndicator() {
 		if (!tabsWrap.value) return
 		const activeTab = tabs.value.find(tab => tab.classList.contains('active'))
 		if (activeTab) {
-			const { offsetLeft, offsetWidth } = activeTab
-			tabsWrap.value.style.setProperty('--indicator-left', `${offsetLeft}px`)
-			tabsWrap.value.style.setProperty('--indicator-width', `${offsetWidth}px`)
+			// Wait a bit more to ensure CSS is fully loaded and elements are properly sized
+			setTimeout(() => {
+				const { offsetLeft, offsetWidth } = activeTab
+				if (offsetLeft >= 0 && offsetWidth > 0) { // Ensure valid measurements
+					tabsWrap.value?.style.setProperty('--indicator-left', `${offsetLeft}px`)
+					tabsWrap.value?.style.setProperty('--indicator-width', `${offsetWidth}px`)
+					tabsWrap.value?.style.setProperty('--indicator-opacity', '1')
+				}
+			}, 10)
 		}
 	})
 }
@@ -69,7 +75,12 @@ watch(
 
 onMounted(() => {
 	tabs.value = Array.from(tabsWrap.value?.querySelectorAll('.bgl_tab') || [])
-	updateIndicator()
+
+	// Wait for the next frame to ensure all CSS and layout calculations are done
+	requestAnimationFrame(() => {
+		updateIndicator()
+	})
+
 	window.addEventListener('resize', updateIndicator)
 })
 
@@ -86,24 +97,14 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-	<div
-		ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden"
-		:class="{ 'bgl_flat-tabs': flat, 'bgl_vertical-tabs': vertical }"
-	>
-		<slot name="tabs" v-bind="{ selectTab, isActive, tabLabel, tabs }">
-			<button
-				v-for="(tab, i) in props.tabs"
-				:key="i"
-				type="button"
-				:class="{ active: isActive(tab) }"
-				class="bgl_tab relative z-1"
-				@click="selectTab(tab)"
-			>
-				<Icon v-if="typeof tab !== 'string' && tab.icon" :icon="tab.icon" />
-				{{ tabLabel(tab) }}
-			</button>
+<div ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden" :class="{ 'bgl_flat-tabs': flat, 'bgl_vertical-tabs': vertical }">
+	<slot name="tabs" v-bind="{ selectTab, isActive, tabLabel, tabs }">
+		<button v-for="(tab, i) in props.tabs" :key="i" type="button" :class="{ active: isActive(tab) }" class="bgl_tab relative z-1" @click="selectTab(tab)">
+			<Icon v-if="typeof tab !== 'string' && tab.icon" :icon="tab.icon" />
+			{{ tabLabel(tab) }}
+		</button>
 		</slot>
-	</div>
+		</div>
 </template>
 
 <style scoped>
@@ -127,7 +128,6 @@ onBeforeUnmount(() => {
 	border-radius: var(--input-border-radius);
 	transition: var(--bgl-transition);
 	color: inherit
-
 }
 
 .bgl_tab:hover {
@@ -145,6 +145,8 @@ onBeforeUnmount(() => {
 	border-radius: var(--input-border-radius);
 	transition: var(--bgl-transition);
 	z-index: 0;
+	/* Hide indicator initially until position is calculated */
+	opacity: var(--indicator-opacity, 0);
 }
 .bgl_flat-tabs.bgl_tabs_wrap {
 	background: transparent;

package/src/components/lightbox/Lightbox.vue

@@ -210,6 +210,7 @@ defineExpose({ open, close })
 }
 .lightbox-image{
 	object-fit: contain;
+	width: fit-content;
 }
 
 .bgl-lightbox-overlay {