@bagelink/vue 1.2.126 → 1.2.132

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

@@ -1,724 +0,0 @@
-<script setup lang="ts">
-import type { StorageFile } from '@bagelink/vue'
-import {
-	Btn,
-	IMAGE_FORMATS_REGEXP,
-	Icon,
-
-	useBagel,
-	Card,
-	Image
-} from '@bagelink/vue'
-import { onMounted, watch } from 'vue'
-
-type StrKey = keyof StorageFile
-
-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[]
-	bindkey?: StrKey
-	modelValue?: string[] | string
-	width?: string
-	height?: string | 'auto'
-	topic?: string
-	fill?: boolean
-	oval?: boolean
-	theme?: 'dropzone' | 'basic'
-	accept?: string
-	required?: boolean
-	disabled?: boolean
-	dropPlaceholder?: string
-	noFilePlaceholder?: string
-	btnPlaceholder?: string
-}>()
-
-const emit = defineEmits(['update:modelValue', 'addFileStart'])
-
-const bindKey: StrKey = bindkey
-
-const bagel = useBagel()
-
-interface QueueFile {
-	file: File
-	progress: number
-	uploading?: boolean
-	name?: string
-	uploaded?: boolean
-}
-
-const isImage = (str: string) => IMAGE_FORMATS_REGEXP.test(str)
-
-const file_bindkeys = defineModel<string[] | string>('modelValue', {
-	default: () => [],
-})
-const storageFiles = $ref<StorageFile[]>([])
-
-async function fetchTopicFiles() {
-	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[]
-	if (!ids.length) {
-		storageFiles.splice(0, storageFiles.length)
-		return
-	}
-
-	const currentIds = storageFiles.map(file => file[bindKey])
-	const idsToAdd = ids.filter(id => !currentIds.includes(id))
-	const idsToRemove = currentIds.filter((id): id is string => (typeof id === 'string') && !ids.includes(id))
-
-	idsToRemove.forEach((id) => {
-		const index = storageFiles.findIndex(file => file[bindKey] === id)
-		if (index !== -1) storageFiles.splice(index, 1)
-	})
-
-	if (bindKey === 'url') {
-		idsToAdd.forEach((url) => {
-			storageFiles.push({ url } as StorageFile)
-		})
-		return
-	}
-
-	if (multiple) {
-		idsToAdd.forEach((id) => {
-			void bagel
-				.get<StorageFile>(`/files/${id}`)
-				.then((file) => {
-					storageFiles.push(file)
-				})
-				.catch(console.error)
-		})
-	} else {
-		void bagel
-			.get<StorageFile>(`/files/${idsToAdd[0]}`)
-			.then((file) => {
-				storageFiles.push(file)
-			})
-			.catch(console.error)
-	}
-}
-
-onMounted(() => {
-	if (topic) fetchTopicFiles()
-	if (!files && [file_bindkeys.value].flat().length > 0) {
-		loadFiles()
-	}
-})
-
-watch(() => topic, fetchTopicFiles)
-watch(() => modelValue, loadFiles)
-
-watch(
-	() => files,
-	(newFiles) => {
-		if (newFiles) {
-			const filesToAdd = [newFiles]
-				.flat()
-				.filter(f => !storageFiles.some(sf => sf[bindKey] === f[bindKey]))
-			for (const file of filesToAdd) {
-				storageFiles.push(file)
-			}
-		}
-	},
-	{ immediate: true }
-)
-
-function compareLists(a: any, b: any) {
-	return (
-		[a].flat().every((id: any) => [b].flat().includes(id))
-		&& [b].flat().every(id => [a].flat().includes(id))
-	)
-}
-
-function updateModelValue() {
-	let idValue: string | string[]
-	if (multiple) {
-		idValue = storageFiles.map(f => f[bindKey]) as string[]
-	} else {
-		idValue = (storageFiles[0][bindKey] as string) || ''
-	}
-	const isSame = compareLists(file_bindkeys.value, idValue)
-	if (!isSame) {
-		file_bindkeys.value = idValue
-	}
-}
-
-const fileQueue = $ref<QueueFile[]>([])
-let isDragOver = $ref(false)
-
-function preventDefault(e: Event) {
-	e.preventDefault()
-	e.stopPropagation()
-}
-
-const fileToUrl = (file: File) => URL.createObjectURL(file)
-function removeFile(file: StorageFile) {
-	const index = storageFiles.indexOf(file)
-	storageFiles.splice(index, 1)
-	void bagel.delete(`/static_files/${file.id}`)
-	updateModelValue()
-}
-
-async function flushQueue() {
-	emit('addFileStart')
-	for (const file of fileQueue) {
-		file.uploading = true
-		if (!multiple) storageFiles.splice(0, 1)
-		const serverFile = await bagel.uploadFile<StorageFile>(file.file, {
-			onUploadProgress: (e: any) => (file.progress = e.progress * 100 - 1),
-			topic,
-		})
-		storageFiles.push(serverFile)
-	}
-	fileQueue.splice(0, fileQueue.length)
-	updateModelValue()
-}
-
-function browse() {
-	if (disabled) return
-	const input = document.createElement('input')
-	input.type = 'file'
-	input.multiple = multiple
-	input.accept = accept
-	input.onchange = (e: Event) => {
-		const target = e.target as HTMLInputElement
-		if (target.files) {
-			const files = Array.from(target.files)
-			for (const file of files) {
-				fileQueue.push({ name: file.name, file, progress: 0 })
-			}
-		}
-		flushQueue()
-	}
-	console.log(fileQueue)
-	input.click()
-}
-
-function dragleave(e: DragEvent) {
-	preventDefault(e)
-	if (e.dataTransfer) isDragOver = false
-	else isDragOver = false
-}
-
-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 })
-		)
-	}
-	isDragOver = false
-	flushQueue()
-}
-</script>
-
-<template>
-	<div class="bagel-input">
-		<label>
-			{{ label }}
-		</label>
-		<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"
-			@drop="drop"
-		>
-			<Btn
-				v-if="!storageFiles.length && !fileQueue.length"
-				class="px-1-5"
-				icon="upload"
-				outline
-				:value="btnPlaceholder || 'Upload'"
-				@click="browse"
-			/>
-
-			<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"
-						@click="browse"
-					/>
-					<Btn
-						v-tooltip="'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 color-black"
-					>
-						{{ file.name }}
-					</p>
-
-					<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: file.url, download: true }"
-							class="ellipsis-1 word-break-all h-20 m-0 color-black txt16"
-						>
-							{{ file.name }}
-						</p>
-					</div>
-
-					<Btn
-						thin
-						flat
-						icon="delete"
-						color="red"
-						@click.stop="removeFile(file)"
-					/>
-				</div>
-			</div>
-			<span
-				v-if="!storageFiles.length && !fileQueue.length"
-				class="txt-gray txt-12"
-			>
-				{{ noFilePlaceholder || 'No file selected' }}
-			</span>
-		</Card>
-		<div
-			v-else
-			class="fileUploadWrap"
-			:class="{
-				'fileDropZone': !storageFiles.length && !fileQueue.length,
-				'dragover': isDragOver,
-				'bgl_oval-upload': oval,
-			}"
-			:style="{ width, height }"
-			@click="browse"
-			@dragover="dragover"
-			@drop="drop"
-			@dragleave="dragleave"
-		>
-			<slot name="files" :files="storageFiles" :fileQueue>
-				<div v-if="multiple" class="bgl-multi-preview">
-					<div
-						v-for="file in storageFiles"
-						:key="file.id"
-						v-lightbox="{ src: file.url, download: true }"
-						class="multi-image-item-preview"
-					>
-						<Image
-							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 }}
-						</p>
-						<Btn
-							thin
-							flat
-							icon="delete"
-							color="red"
-							@click.stop="removeFile(file)"
-						/>
-					</div>
-					<div
-						v-for="fileQ in fileQueue"
-						:key="fileQ.file.name"
-						class="multi-image-item-preview"
-					>
-						<template v-if="isImage(fileQ.file.type)">
-							<Image
-								v-if="multiple"
-								:width="width || '220'"
-								class="multi-preview"
-								:src="fileToUrl(fileQ.file)"
-								alt=""
-							/>
-						</template>
-
-						<Icon v-else icon="draft" class="multi-preview" />
-
-						<p class="no-margin multi-preview-txt">
-							{{ fileQ.name }}
-						</p>
-						<div
-							class="pie"
-							:style="`--p:${fileQ.progress}`"
-							style="--b: 2px"
-							:class="{ complete: fileQ.progress === 100 }"
-						>
-							<span v-if="fileQ.progress < 100" class="progress">
-								{{ `${fileQ.progress.toFixed(0)}` }}
-							</span>
-							<Icon class="success" icon="check" />
-						</div>
-					</div>
-				</div>
-
-				<div
-					v-if="!multiple && (storageFiles.length > 0 || fileQueue.length > 0)"
-					class="bgl-single-preview"
-				>
-					<div
-						v-for="file in storageFiles"
-						:key="file.id"
-						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.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"
-								target="_blank"
-								@click.stop
-							/>
-						</div>
-						<div v-if="isImage(file.extension || file.url)" class="h-100">
-							<Image
-								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"
-						/>
-					</div>
-
-					<div
-						v-for="fileQ in fileQueue"
-						:key="fileQ.file.name"
-						class="single-image-item-preview"
-						:class="{ 'bgl_fill-image': fill }"
-					>
-						<div
-							class="pie"
-							:style="`--p:${fileQ.progress}`"
-							style="--b: 2px"
-							:class="{ complete: fileQ.progress === 100 }"
-						>
-							<span v-if="fileQ.progress < 100" class="progress">
-								{{ `${fileQ.progress.toFixed(0)}` }}
-							</span>
-							<Icon class="success" icon="check" />
-						</div>
-						<Image
-							v-if="isImage(fileQ.file.type)"
-							v-lightbox="{ src: fileToUrl(fileQ.file), download: true }"
-							class="single-preview"
-							:src="fileToUrl(fileQ.file)"
-							alt=""
-						/>
-						<!-- <Icon v-else :size="8" weight="2" icon="draft" class="color-primary" /> -->
-					</div>
-				</div>
-			</slot>
-			<slot
-				v-if="(!storageFiles.length && !fileQueue.length) || multiple"
-				name="placeholder"
-				:files="storageFiles"
-				: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>
-
-<style scoped>
-.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;
-}
-.bagel-input .fileUploadWrap.fileDropZone {
-	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;
-}
-
-.fileUploadWrap[style*='height: auto;'] {
-	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: 0.75rem;
-	text-align: start;
-	color: var(--input-color);
-	display: grid;
-	grid-template-columns: auto 1fr 22px;
-	gap: 1rem;
-	align-items: center;
-}
-.multi-image-item-preview p {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-.multi-preview {
-	width: 40px;
-	height: 40px;
-	border-radius: var(--input-border-radius);
-	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;
-}
-.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;
-}
-.fileUploadWrap[style*='height: auto'] .single-image-item-preview {
-	min-height: 215px;
-}
-
-.fileUploadWrap[style*='height: auto'] .single-preview {
-	margin: 0rem !important;
-}
-.single-preview {
-	border-radius: var(--input-border-radius);
-	margin: 1rem;
-	padding: 0px;
-	min-height: calc(100% - 2rem);
-	height: calc(100% - 2rem);
-	object-fit: cover;
-	background: var(--bgl-gray-light);
-	width: calc(90% - 2rem);
-	min-width: 5rem;
-}
-.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;
-}
-.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 {
-	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;
-}
-
-.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;
-}
-
-.pie {
-	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))
-	);
-}
-
-.pie .success {
-	transform: scale(0);
-	opacity: 0;
-	transition: all 0.3s ease-in-out;
-}
-
-.pie .progress {
-	position: absolute;
-	font-size: 10px;
-}
-
-.pie.complete .progress {
-	display: none;
-}
-
-.pie.complete .success {
-	transform: scale(1.3);
-	opacity: 1;
-}
-
-.pie.complete:before {
-	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
-}
-
-.pie.complete {
-	color: var(--bgl-green);
-}
-</style>