@bagelink/vue 1.2.89 → 1.2.97

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

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import type { BglFile, QueueFile, UploadInputProps } from './upload.types'
-import { Btn, IMAGE_FORMATS_REGEXP, Icon, useBagel, Card, Image, pathKeyToURL, bagelInjectionKey } from '@bagelink/vue'
-import { watch } from 'vue'
-import { files } from './upload'
+import type { UploadInputProps } from './upload.types'
+import { Btn, IMAGE_FORMATS_REGEXP, Icon, Card, Image, pathKeyToURL } from '@bagelink/vue'
+import { useFileUpload } from './useFileUpload'
 
 const props = withDefaults(defineProps<UploadInputProps>(), {
 	height: '215px',
@@ -11,122 +10,48 @@ const props = withDefaults(defineProps<UploadInputProps>(), {
 })
 
 const emit = defineEmits(['update:modelValue', 'addFileStart'])
-const bagel = useBagel(bagelInjectionKey)
 
-files.setBaseUrl(bagel.host)
-
-const fileQueue = $ref<QueueFile[]>([])
-let storageFiles = $ref<BglFile[]>([])
-const pk = $ref<string[]>([props.modelValue].flat().filter(Boolean) as string[])
-
-const pathKeys = $computed<string[]>(() => {
-	const sf = storageFiles.map(file => file.path_key)
-	return [...pk, ...sf]
+const {
+	fileQueue,
+	pathKeys,
+	removeFile,
+	flushQueue,
+	fileToUrl,
+	addFile,
+	browse,
+} = useFileUpload({
+	disabled: props.disabled,
+	dirPath: props.dirPath,
+	multiple: props.multiple,
+	accept: props.accept
 })
 
-watch(() => pk, (value) => {
-	if (props.multiple) emit('update:modelValue', value)
-	else emit('update:modelValue', value[0] || undefined)
-}, { deep: true })
-
 const isImage = (str: string) => IMAGE_FORMATS_REGEXP.test(str)
-const fileToUrl = (file: File) => URL.createObjectURL(file)
 
 let isDragOver = $ref(false)
 
-// File handling methods
-async function removeFile(path_key: string) {
-	storageFiles = storageFiles.filter(file => file.path_key !== path_key)
-	const pki = pk.indexOf(path_key)
-	if (pki !== -1) pk.splice(pki, 1)
-
-	try {
-		await files.delete(path_key)
-	} catch (error) {
-		console.error(error)
-	}
-}
-
-async function flushQueue() {
-	emit('addFileStart')
-	for (const file of fileQueue) {
-		file.uploading = true
-		if (!props.multiple) pk.splice(0, 1)
-		try {
-			const { data } = await files.upload(file.file, {
-				onUploadProgress: (e: ProgressEvent) => {
-					file.progress = (e.loaded / e.total) * 100 - 1
-				},
-				dirPath: props.dirPath,
-			})
-			pk.push(data.path_key)
-		} catch (error) {
-			console.error('error flushing queue', error)
-		}
-	}
-	fileQueue.splice(0, fileQueue.length)
-}
-
-// Event handlers
-function browse() {
-	if (props.disabled) return
-	const input = document.createElement('input')
-	input.type = 'file'
-	input.multiple = props.multiple
-	input.accept = props.accept
-	input.onchange = (e: Event) => {
-		const files = Array.from((e.target as HTMLInputElement).files || [])
-		fileQueue.push(...files.map(file => ({ name: file.name, file, progress: 0 })))
-		flushQueue()
-	}
-	input.click()
-}
-
 function handleDrag(e: DragEvent, isDragging = false) {
 	e.preventDefault()
 	e.stopPropagation()
 	if (!props.disabled) isDragOver = isDragging
 }
 
-function handleDrop(e: DragEvent) {
+async function handleDrop(e: DragEvent) {
 	if (props.disabled) return
 	e.preventDefault()
 	e.stopPropagation()
-
-	if (e.dataTransfer?.files) {
-		fileQueue.push(...Array.from(e.dataTransfer.files)
-			.map(file => ({ name: file.name, file, progress: 0 })))
-		flushQueue()
-	}
+	emit('addFileStart')
+	addFile(e.dataTransfer?.files)
+	await flushQueue()
+	emit('update:modelValue', pathKeys.value)
 	isDragOver = false
 }
-
-if (props.dirPath) {
-	files.list(props.dirPath)
-		.then(response => storageFiles.push(...([response.data].flat())))
-		.catch(console.error)
-}
-
-watch(() => props.dirPath, () => {
-	if (props.dirPath) {
-		files.list(props.dirPath)
-			.then(response => storageFiles.push(...([response.data].flat())))
-			.catch(console.error)
-	}
-})
 </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"
-		>
-
+		<input v-if="required && !pathKeys.length" placeholder="required" type="text" required class="pixel">
 		<Card
 			v-if="theme === 'basic'"
 			outline
@@ -140,7 +65,7 @@ watch(() => props.dirPath, () => {
 				icon="upload"
 				outline
 				:value="btnPlaceholder || 'Upload'"
-				@click="browse"
+				@click="browse(true)"
 			/>
 
 			<template v-for="path_key in pathKeys" :key="path_key">
@@ -158,7 +83,7 @@ watch(() => props.dirPath, () => {
 							color="gray"
 							thin
 							icon="autorenew"
-							@click="browse"
+							@click="browse(true)"
 						/>
 						<Btn
 							icon="download"
@@ -197,7 +122,7 @@ watch(() => props.dirPath, () => {
 				'bgl_oval-upload': oval,
 			}"
 			:style="{ width, height }"
-			@click="browse"
+			@click="browse(true)"
 			@dragover="(e) => handleDrag(e, true)"
 			@drop="handleDrop"
 			@dragleave="(e) => handleDrag(e)"
@@ -281,7 +206,7 @@ watch(() => props.dirPath, () => {
 								color="gray"
 								thin
 								icon="autorenew"
-								@click="browse"
+								@click="browse(true)"
 							/>
 							<Btn
 								v-tooltip="'Download'"

package/src/components/form/inputs/Upload/useFileUpload.ts

@@ -0,0 +1,144 @@
+import type { BglFile, QueueFile } from './upload.types'
+import { useBagel } from '@bagelink/vue'
+import { ref, computed, onMounted } from 'vue'
+import { files } from './upload'
+
+interface UseFileUploadProps {
+	multiple?: boolean
+	dirPath?: string
+	accept?: string
+	disabled?: boolean
+}
+
+export function useFileUpload(props: UseFileUploadProps = {}) {
+	files.setBaseUrl(useBagel().host)
+
+	const fileQueue = ref<QueueFile[]>([])
+	const storageFiles = ref<BglFile[]>([])
+	const pk = ref<string[]>([])
+
+	// Computed
+	const pathKeys = computed(() => {
+		const storagePathKeys = storageFiles.value.map(file => file.path_key)
+		return [...pk.value, ...storagePathKeys]
+	})
+
+	// File handling methods
+	const fileToUrl = (file: File) => URL.createObjectURL(file)
+
+	const addFile = (file?: File | File[] | FileList | null) => {
+		if (!file) return
+
+		let filesToAdd: File[] = []
+
+		if (file instanceof File) {
+			filesToAdd = [file]
+		} else if (file instanceof FileList) {
+			filesToAdd = Array.from(file)
+		} else if (Array.isArray(file)) {
+			filesToAdd = file
+		}
+
+		const newQueueFiles = filesToAdd.map(f => ({
+			name: f.name,
+			file: f,
+			progress: 0
+		}))
+
+		fileQueue.value.push(...newQueueFiles)
+	}
+
+	const removeFile = async (pathKeyOrFile: string | File) => {
+		if (typeof pathKeyOrFile === 'string') {
+			// Remove from both lists
+			storageFiles.value = storageFiles.value.filter(file => file.path_key !== pathKeyOrFile)
+
+			const pathKeyIndex = pk.value.indexOf(pathKeyOrFile)
+			if (pathKeyIndex !== -1) {
+				pk.value.splice(pathKeyIndex, 1)
+			}
+
+			try {
+				await files.delete(pathKeyOrFile)
+			} catch (error) {
+				console.error('Error deleting file:', error)
+			}
+		} else if (pathKeyOrFile) {
+			const index = fileQueue.value.findIndex(({ file }) => file.name === pathKeyOrFile.name)
+			if (index !== -1) {
+				fileQueue.value.splice(index, 1)
+			}
+		}
+	}
+
+	const flushQueue = async () => {
+		for (const file of fileQueue.value) {
+			file.uploading = true
+
+			// If not multiple, replace the existing file
+			if (!props.multiple) {
+				pk.value.splice(0, 1)
+			}
+
+			try {
+				const { data } = await files.upload(file.file, {
+					onUploadProgress: (e: ProgressEvent) => {
+						file.progress = (e.loaded / e.total) * 100 - 1
+					},
+					dirPath: props.dirPath,
+				})
+				pk.value.push(data.path_key)
+			} catch (error) {
+				console.error('Error uploading file:', error)
+			}
+		}
+
+		// Clear the queue after processing
+		fileQueue.value = []
+	}
+
+	// UI interaction
+	const browse = (upload = false) => {
+		if (props.disabled) return
+
+		const input = document.createElement('input')
+		input.type = 'file'
+		input.multiple = !!props.multiple
+		input.accept = props.accept || ''
+
+		input.onchange = (e: Event) => {
+			addFile((e.target as HTMLInputElement).files)
+			if (upload) {
+				flushQueue()
+			}
+		}
+
+		input.click()
+	}
+
+	// Load initial files
+	onMounted(() => {
+		if (props.dirPath) {
+			files.list(props.dirPath)
+				.then((response) => {
+					const responseData = Array.isArray(response.data)
+						? response.data
+						: [response.data]
+					storageFiles.value.push(...responseData)
+				})
+				.catch((error) => { console.error('Error loading files:', error) })
+		}
+	})
+
+	return {
+		fileQueue,
+		storageFiles,
+		pk,
+		pathKeys,
+		fileToUrl,
+		removeFile,
+		flushQueue,
+		addFile,
+		browse,
+	}
+}

package/src/components/form/inputs/index.ts

@@ -21,3 +21,5 @@ export { default as TelInput } from './TelInput.vue'
 export { default as TextInput } from './TextInput.vue'
 export { default as ToggleInput } from './ToggleInput.vue'
 export { default as UploadInput } from './Upload/UploadInput.vue'
+
+export { useFileUpload } from './Upload/useFileUpload'

package/src/components/index.ts

@@ -32,6 +32,7 @@ export { default as ModalConfirm } from './ModalConfirm.vue'
 export { default as ModalForm } from './ModalForm.vue'
 export { default as NavBar } from './NavBar.vue'
 export { default as PageTitle } from './PageTitle.vue'
+export { default as Pagination } from './Pagination.vue'
 export { default as Pill } from './Pill.vue'
 export { default as RouterWrapper } from './RouterWrapper.vue'
 export { default as Slider } from './Slider.vue'

package/src/components/lightbox/Lightbox.vue

@@ -63,6 +63,16 @@ function clickOutside() {
 
 const upgradeHeaders = (url: string) => url.replace(/http:\/\//, '//')
 
+function downloadFile() {
+	const link = document.createElement('a')
+	const src = currentItem.src || ''
+	link.target = '_blank'
+	link.href = upgradeHeaders(src)
+	link.download = src ? src.split('/').pop() || 'download' : 'download'
+	document.body.appendChild(link)
+	link.click()
+	document.body.removeChild(link)
+}
 defineExpose({ open, close })
 </script>
 
@@ -108,8 +118,7 @@ defineExpose({ open, close })
 					<Btn
 						v-if="currentItem?.download && currentItem?.src" class="color-white" round thin flat icon="download"
 						value="Download File"
-						:href="upgradeHeaders(currentItem?.src)"
-						download
+						@click="downloadFile"
 					/>
 					<div v-if="!currentItem?.openFile && !currentItem?.download" />
 				</div>
@@ -128,34 +137,40 @@ defineExpose({ open, close })
 							class="vw90"
 						/>
 
-						<embed
+						<div
 							v-else-if="item?.type === 'pdf' && item?.src"
-							:src="normalizeURL(item?.src)"
-							type="application/pdf"
-							width="100%"
-							height="1080"
-							:title="item?.name"
 							class="vw90"
 						>
-						<div v-else class="file-info txt-white flex m_block align-items-start gap-025">
-							<Icon class="m-0 m_none" icon="draft" :size="10" weight="12" />
-							<Icon class="m-0 none m_block m_-mb-1" icon="draft" :size="4" weight="2" />
+							<embed
+								:src="normalizeURL(item?.src)"
+								type="application/pdf"
+								width="100%"
+								height="1080"
+								:title="item?.name"
+								class="vw90"
+							>
+						</div>
+						<div v-else class="vw90">
+							<div class="file-info txt-white flex m_block align-items-start gap-025">
+								<Icon class="m-0 m_none" icon="draft" :size="10" weight="12" />
+								<Icon class="m-0 none m_block m_-mb-1" icon="draft" :size="4" weight="2" />
 
-							<div class="txt-start">
-								<p class="mx-0 light">
-									File:
-									<span class="semi word-break-all ">
-										{{ item?.name }}
-									</span>
-								</p>
-								<p class="mx-0 ">
-									Type:
-									<span class="semi">
-										{{ item?.type }}
-									</span>
-								</p>
-								<Btn :href="item?.src" target="_blank" round thin class="mt-1" value="Open file" />
-								<!-- <a :href="currentItem?.src" target="_blank">Open file</a> -->
+								<div class="txt-start">
+									<p class="mx-0 light">
+										File:
+										<span class="semi word-break-all ">
+											{{ item?.name }}
+										</span>
+									</p>
+									<p class="mx-0 ">
+										Type:
+										<span class="semi">
+											{{ item?.type }}
+										</span>
+									</p>
+									<Btn :href="item?.src" target="_blank" round thin class="mt-1" value="Open file" />
+									<!-- <a :href="currentItem?.src" target="_blank">Open file</a> -->
+								</div>
 							</div>
 						</div>
 					</template>