@bagelink/vue 0.0.963 → 0.0.965

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.963",
+  "version": "0.0.965",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/TableSchema.vue

@@ -196,7 +196,8 @@ async function registerLastItemObserver() {
 
 	useIntersectionObserver(lastItem, ([entry]) => {
 		if (entry.isIntersecting && computedData.value.length) {
-			void onLastItemVisible?.()
+			// void onLastItemVisible?.()
+			emit('lastItemVisible')
 		}
 	}, { threshold: 0.5 }) }
 

package/src/components/form/inputs/FileUpload.vue

@@ -1,12 +1,34 @@
 <script setup lang="ts">
-import { Btn, IMAGE_FORMATS_REGEXP, Icon, type StorageFile, useBagel, Card } from '@bagelink/vue'
+import {
+	Btn,
+	IMAGE_FORMATS_REGEXP,
+	Icon,
+	type StorageFile,
+	useBagel,
+	Card,
+} from '@bagelink/vue'
 import { onMounted, watch } from 'vue'
 
 type StrKey = keyof StorageFile
 
 type FSValue = string[] | string | number
 
-const props = defineProps<{
+const {
+	label,
+	multiple,
+	files,
+	bindkey = 'id',
+	modelValue,
+	width,
+	height = '215px',
+	topic,
+	fill,
+	oval,
+	theme = 'dropzone',
+	accept = '*',
+	required,
+	disabled,
+} = defineProps<{
 	label?: string
 	multiple?: boolean
 	files?: StorageFile | StorageFile[]
@@ -20,11 +42,12 @@ const props = defineProps<{
 	theme?: 'dropzone' | 'basic'
 	accept?: string
 	required?: boolean
+	disabled?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue', 'addFileStart'])
 
-const bindKey: StrKey = props.bindkey || 'id'
+const bindKey: StrKey = bindkey
 
 const bagel = useBagel()
 
@@ -38,16 +61,21 @@ interface QueueFile {
 
 const isImage = (str: string) => IMAGE_FORMATS_REGEXP.test(str)
 
-const file_bindkeys = defineModel('modelValue', { default: () => [] as FSValue })
+const file_bindkeys = defineModel('modelValue', {
+	default: () => [] as FSValue,
+})
 const storageFiles = $ref<StorageFile[]>([])
 
 async function fetchTopicFiles() {
-	const files = await bagel.get<StorageFile[]>(`/files?topic=${props.topic}`)
+	const files = await bagel.get<StorageFile[]>(`/files?topic=${topic}`)
 	storageFiles.push(...files)
 }
 
 function loadFiles() {
-	const ids = ([file_bindkeys.value].flat().filter(Boolean) as unknown) as (string | number)[]
+	const ids = [file_bindkeys.value].flat().filter(Boolean) as unknown as (
+		| string
+		| number
+	)[]
 	if (!ids.length) {
 		storageFiles.splice(0, storageFiles.length)
 		return
@@ -55,7 +83,9 @@ function loadFiles() {
 
 	const currentIds = storageFiles.map(file => file[bindKey])
 	const idsToAdd = ids.filter(id => !currentIds.includes(id))
-	const idsToRemove = currentIds.filter((id): id is string | number => (typeof id === 'string' || typeof id === 'number') && !ids.includes(id))
+	const idsToRemove = currentIds.filter(
+		(id): id is string | number => (typeof id === 'string' || typeof id === 'number') && !ids.includes(id)
+	)
 
 	idsToRemove.forEach((id) => {
 		const index = storageFiles.findIndex(file => file[bindKey] === id)
@@ -69,7 +99,7 @@ function loadFiles() {
 		return
 	}
 
-	if (props.multiple) {
+	if (multiple) {
 		idsToAdd.forEach((id) => {
 			void bagel
 				.get<StorageFile>(`/files/${id}`)
@@ -89,17 +119,17 @@ function loadFiles() {
 }
 
 onMounted(() => {
-	if (props.topic) fetchTopicFiles()
-	if (!props.files && [file_bindkeys.value].flat().length > 0) {
+	if (topic) fetchTopicFiles()
+	if (!files && [file_bindkeys.value].flat().length > 0) {
 		loadFiles()
 	}
 })
 
-watch(() => props.topic, fetchTopicFiles)
-watch(() => props.modelValue, loadFiles)
+watch(() => topic, fetchTopicFiles)
+watch(() => modelValue, loadFiles)
 
 watch(
-	() => props.files,
+	() => files,
 	(newFiles) => {
 		if (newFiles) {
 			const filesToAdd = [newFiles]
@@ -113,17 +143,16 @@ watch(
 	{ immediate: true }
 )
 
-const theme = props.theme || 'dropzone'
-
 function compareLists(a: any, b: any) {
-	return [a]
-		.flat()
-		.every((id: any) => [b].flat().includes(id)) && [b].flat().every(id => [a].flat().includes(id))
+	return (
+		[a].flat().every((id: any) => [b].flat().includes(id))
+		&& [b].flat().every(id => [a].flat().includes(id))
+	)
 }
 
 function updateModelValue() {
 	let idValue: FSValue
-	if (props.multiple) {
+	if (multiple) {
 		idValue = storageFiles.map(f => f[bindKey]) as FSValue
 	} else {
 		idValue = (storageFiles[0][bindKey] as string) || ''
@@ -154,10 +183,10 @@ async function flushQueue() {
 	emit('addFileStart')
 	for (const file of fileQueue) {
 		file.uploading = true
-		if (!props.multiple) storageFiles.splice(0, 1)
+		if (!multiple) storageFiles.splice(0, 1)
 		const serverFile = await bagel.uploadFile<StorageFile>(file.file, {
 			onUploadProgress: (e: any) => (file.progress = e.progress * 100 - 1),
-			topic: props.topic,
+			topic,
 		})
 		storageFiles.push(serverFile)
 	}
@@ -166,10 +195,11 @@ async function flushQueue() {
 }
 
 function browse() {
+	if (disabled) return
 	const input = document.createElement('input')
 	input.type = 'file'
-	input.multiple = props.multiple
-	input.accept = props.accept || '*'
+	input.multiple = multiple
+	input.accept = accept
 	input.onchange = (e: Event) => {
 		const target = e.target as HTMLInputElement
 		if (target.files) {
@@ -191,12 +221,14 @@ function dragleave(e: DragEvent) {
 }
 
 function dragover(e: DragEvent) {
+	if (disabled) return
 	preventDefault(e)
 	if (e.dataTransfer) isDragOver = true
 	else isDragOver = false
 }
 
 function drop(e: DragEvent) {
+	if (disabled) return
 	preventDefault(e)
 	if (e.dataTransfer) {
 		Array.from(e.dataTransfer.files).forEach((file: File) => fileQueue.push({ name: file.name, file, progress: 0 })
@@ -212,9 +244,18 @@ function drop(e: DragEvent) {
 		<label>
 			{{ label }}
 		</label>
-		<input v-if="required && !storageFiles.length" placeholder="required" type="text" required class="pixel">
+		<input
+			v-if="required && !storageFiles.length"
+			placeholder="required"
+			type="text"
+			required
+			class="pixel"
+		>
 		<Card
-			v-if="theme === 'basic'" outline class="flex p-05 gap-1" @dragover="dragover"
+			v-if="theme === 'basic'"
+			outline
+			class="flex p-05 gap-1"
+			@dragover="dragover"
 			@drop="drop"
 		>
 			<Btn
@@ -227,21 +268,40 @@ function drop(e: DragEvent) {
 				Upload
 			</Btn>
 
-			<div v-for="file in storageFiles" :key="file.id" class="txt-gray txt-12 flex">
+			<div
+				v-for="file in storageFiles"
+				:key="file.id"
+				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.stop="removeFile(file)" />
 					<Btn
-						v-tooltip="'Replace'" color="gray" thin icon="autorenew"
+						v-tooltip="'Delete'"
+						color="gray"
+						thin
+						icon="delete"
+						@click.stop="removeFile(file)"
+					/>
+					<Btn
+						v-tooltip="'Replace'"
+						color="gray"
+						thin
+						icon="autorenew"
 						@click="browse"
 					/>
 					<Btn
 						v-tooltip="'Download'"
-						:href="file.url" :download="file.name"
-						color="gray" thin icon="download"
+						:href="file.url"
+						:download="file.name"
+						color="gray"
+						thin
+						icon="download"
 						target="_blank"
 						@click.stop
 					/>
-					<p v-lightbox="{ src: file.url, download: true }" class="ellipsis-1 word-break-all h-20 m-0">
+					<p
+						v-lightbox="{ src: file.url, download: true }"
+						class="ellipsis-1 word-break-all h-20 m-0"
+					>
 						{{ file.name }}
 					</p>
 					<Btn
@@ -253,7 +313,10 @@ function drop(e: DragEvent) {
 					/>
 				</div>
 			</div>
-			<span v-if="!storageFiles.length && !fileQueue.length" class="txt-gray txt-12">
+			<span
+				v-if="!storageFiles.length && !fileQueue.length"
+				class="txt-gray txt-12"
+			>
 				No file selected
 			</span>
 		</Card>
@@ -265,7 +328,7 @@ function drop(e: DragEvent) {
 				'dragover': isDragOver,
 				'bgl_oval-upload': oval,
 			}"
-			:style="{ width: props.width, height: props.height || '215px' }"
+			:style="{ width, height }"
 			@click="browse"
 			@dragover="dragover"
 			@drop="drop"
@@ -279,7 +342,12 @@ function drop(e: DragEvent) {
 						v-lightbox="{ src: file.url, download: true }"
 						class="multi-image-item-preview"
 					>
-						<img v-if="isImage(file.extension || file.url)" class="multi-preview" :src="file.url" alt="">
+						<img
+							v-if="isImage(file.extension || file.url)"
+							class="multi-preview"
+							:src="file.url"
+							alt=""
+						>
 						<Icon v-else icon="draft" class="multi-preview" />
 						<p class="m-0">
 							{{ file.name }}
@@ -326,7 +394,10 @@ function drop(e: DragEvent) {
 					</div>
 				</div>
 
-				<div v-if="!multiple && (storageFiles.length > 0 || fileQueue.length > 0)" class="bgl-single-preview">
+				<div
+					v-if="!multiple && (storageFiles.length > 0 || fileQueue.length > 0)"
+					class="bgl-single-preview"
+				>
 					<div
 						v-for="file in storageFiles"
 						:key="file.id"
@@ -334,23 +405,47 @@ function drop(e: DragEvent) {
 						:class="{ 'bgl_fill-image': fill }"
 					>
 						<div class="position-start m-05 flex opacity-7 z-99">
-							<Btn v-tooltip="'Delete'" color="gray" thin icon="delete" @click.stop="removeFile(file)" />
 							<Btn
-								v-tooltip="'Replace'" color="gray" thin icon="autorenew"
+								v-tooltip="'Delete'"
+								color="gray"
+								thin
+								icon="delete"
+								@click.stop="removeFile(file)"
+							/>
+							<Btn
+								v-tooltip="'Replace'"
+								color="gray"
+								thin
+								icon="autorenew"
 								@click="browse"
 							/>
 							<Btn
 								v-tooltip="'Download'"
-								:href="file.url" :download="file.name"
-								color="gray" thin icon="download"
+								:href="file.url"
+								:download="file.name"
+								color="gray"
+								thin
+								icon="download"
 								target="_blank"
 								@click.stop
 							/>
 						</div>
 						<div v-if="isImage(file.extension || file.url)" class="h-100">
-							<img v-lightbox="{ src: file.url, download: true }" class="single-preview" :src="file.url" alt="">
+							<img
+								v-lightbox="{ src: file.url, download: true }"
+								class="single-preview"
+								:src="file.url"
+								alt=""
+							>
 						</div>
-						<Icon v-else v-lightbox="{ src: file.url, download: true }" :size="4" weight="2" icon="draft" class="color-primary w-100" />
+						<Icon
+							v-else
+							v-lightbox="{ src: file.url, download: true }"
+							:size="4"
+							weight="2"
+							icon="draft"
+							class="color-primary w-100"
+						/>
 					</div>
 
 					<div
@@ -370,7 +465,12 @@ function drop(e: DragEvent) {
 							</span>
 							<Icon class="success" icon="check" />
 						</div>
-						<img v-if="isImage(fileQ.file.type)" class="single-preview" :src="fileToUrl(fileQ.file)" alt="">
+						<img
+							v-if="isImage(fileQ.file.type)"
+							class="single-preview"
+							:src="fileToUrl(fileQ.file)"
+							alt=""
+						>
 						<!-- <Icon v-else :size="8" weight="2" icon="draft" class="color-primary" /> -->
 					</div>
 				</div>
@@ -382,7 +482,9 @@ function drop(e: DragEvent) {
 				:fileQueue
 				:browse
 			>
-				<p class="p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05">
+				<p
+					class="p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05"
+				>
 					<Icon icon="upload_2" />
 					Drop files here or click to upload
 				</p>
@@ -418,7 +520,7 @@ function drop(e: DragEvent) {
 	box-shadow: inset 0 0 10px #00000012;
 }
 
-.fileUploadWrap[style*="height: auto;"] {
+.fileUploadWrap[style*='height: auto;'] {
 	min-height: 215px;
 }
 
@@ -441,7 +543,7 @@ function drop(e: DragEvent) {
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.multi-preview{
+.multi-preview {
 	width: 40px;
 	height: 40px;
 	border-radius: var(--input-border-radius);
@@ -452,11 +554,11 @@ function drop(e: DragEvent) {
 	align-items: center;
 	display: flex;
 }
-.bgl-single-preview{
+.bgl-single-preview {
 	height: 100%;
 	position: relative;
 }
-.bgl-single-preview + .fileUploadPlaceHolder{
+.bgl-single-preview + .fileUploadPlaceHolder {
 	position: absolute;
 	inset: 0;
 	margin: auto;
@@ -470,15 +572,14 @@ function drop(e: DragEvent) {
 	align-items: center;
 	justify-content: center;
 }
-.fileUploadWrap[style*="height: auto"] .single-image-item-preview {
+.fileUploadWrap[style*='height: auto'] .single-image-item-preview {
 	min-height: 215px;
 }
 
-.fileUploadWrap[style*="height: auto"] .single-preview {
+.fileUploadWrap[style*='height: auto'] .single-preview {
 	margin: 0rem !important;
-
 }
-.single-preview{
+.single-preview {
 	border-radius: var(--input-border-radius);
 	margin: 1rem;
 	padding: 0px;
@@ -487,24 +588,24 @@ function drop(e: DragEvent) {
 	object-fit: cover;
 	background: var(--bgl-gray-light);
 }
-.single-image-item-preview:hover::after{
-	content: "zoom_in";
+.single-image-item-preview:hover::after {
+	content: 'zoom_in';
 	font-size: 32px;
-	font-family: "Material Symbols Outlined", serif;
+	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{
+.single-image-item-preview:hover img {
 	filter: brightness(70%);
 }
 
 .bgl_fill-image.single-image-item-preview {
 	height: 100%;
 }
-.bgl_fill-image.single-image-item-preview .single-preview{
+.bgl_fill-image.single-image-item-preview .single-preview {
 	border-radius: unset;
 	object-fit: cover;
 	box-shadow: unset;
@@ -530,27 +631,27 @@ function drop(e: DragEvent) {
 .bgl_oval-upload {
 	border-radius: 100% !important;
 	overflow: hidden;
-	}
+}
 .bgl_oval-upload p {
-		padding: 0.75rem !important;
-		font-size: 12px
-	}
-.bgl_oval-upload .fileUploadPlaceHolder{
-		top: 0;
-	}
-	.bgl_oval-upload .pie {
-		transform: scale(1);
-	}
-	.bgl_oval-upload span.bgl_icon-font.color-primary {
-		transform: scale(0.4) !important;
-	}
-	.bgl_oval-upload .single-image-item-preview{
-		height: 100%;
-	}
-	.bgl_oval-upload .single-preview {
-		margin: 0;
-		height: 100% !important;
-	}
+	padding: 0.75rem !important;
+	font-size: 12px;
+}
+.bgl_oval-upload .fileUploadPlaceHolder {
+	top: 0;
+}
+.bgl_oval-upload .pie {
+	transform: scale(1);
+}
+.bgl_oval-upload span.bgl_icon-font.color-primary {
+	transform: scale(0.4) !important;
+}
+.bgl_oval-upload .single-image-item-preview {
+	height: 100%;
+}
+.bgl_oval-upload .single-preview {
+	margin: 0;
+	height: 100% !important;
+}
 
 .pie {
 	width: 30px;