@bagelink/vue 1.2.93 → 1.2.97

package/dist/style.css

@@ -2549,7 +2549,7 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 .bgl-toggle input:checked + label[data-v-c5e45931] {
     color: var(--bgl-primary) !important;
 }
-.fileUploadWrap[data-v-d8f3ff01] {
+.fileUploadWrap[data-v-38a4d4a9] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
@@ -2561,7 +2561,7 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	background: var(--input-bg);
 	height: 215px;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-d8f3ff01] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-38a4d4a9] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
@@ -2569,14 +2569,14 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	color: var(--bgl-gray);
 	flex-direction: column;
 }
-.fileUploadWrap.dragover[data-v-d8f3ff01],
-.fileUploadWrap[data-v-d8f3ff01]:hover {
+.fileUploadWrap.dragover[data-v-38a4d4a9],
+.fileUploadWrap[data-v-38a4d4a9]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.fileUploadWrap[style*='height: auto;'][data-v-d8f3ff01] {
+.fileUploadWrap[style*='height: auto;'][data-v-38a4d4a9] {
 	min-height: 215px;
 }
-.multi-image-item-preview[data-v-d8f3ff01] {
+.multi-image-item-preview[data-v-38a4d4a9] {
 	border: 1px solid var(--border-color) !important;
 	border-radius: var(--input-border-radius);
 	margin: 0.5rem !important;
@@ -2590,12 +2590,12 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	gap: 1rem;
 	align-items: center;
 }
-.multi-image-item-preview p[data-v-d8f3ff01] {
+.multi-image-item-preview p[data-v-38a4d4a9] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.multi-preview[data-v-d8f3ff01] {
+.multi-preview[data-v-38a4d4a9] {
 	width: 40px;
 	height: 40px;
 	border-radius: var(--input-border-radius);
@@ -2606,17 +2606,17 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	align-items: center;
 	display: flex;
 }
-.bgl-single-preview[data-v-d8f3ff01] {
+.bgl-single-preview[data-v-38a4d4a9] {
 	height: 100%;
 	position: relative;
 }
-.bgl-single-preview + .fileUploadPlaceHolder[data-v-d8f3ff01] {
+.bgl-single-preview + .fileUploadPlaceHolder[data-v-38a4d4a9] {
 	position: absolute;
 	inset: 0;
 	margin: auto;
 	top: calc(50% - 2rem);
 }
-.single-image-item-preview[data-v-d8f3ff01] {
+.single-image-item-preview[data-v-38a4d4a9] {
 	height: 100%;
 	min-height: 100%;
 	position: relative;
@@ -2624,13 +2624,13 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	align-items: center;
 	justify-content: center;
 }
-.fileUploadWrap[style*='height: auto'] .single-image-item-preview[data-v-d8f3ff01] {
+.fileUploadWrap[style*='height: auto'] .single-image-item-preview[data-v-38a4d4a9] {
 	min-height: 215px;
 }
-.fileUploadWrap[style*='height: auto'] .single-preview[data-v-d8f3ff01] {
+.fileUploadWrap[style*='height: auto'] .single-preview[data-v-38a4d4a9] {
 	margin: 0rem !important;
 }
-.single-preview[data-v-d8f3ff01] {
+.single-preview[data-v-38a4d4a9] {
 	border-radius: var(--input-border-radius);
 	margin: 1rem;
 	padding: 0px;
@@ -2640,7 +2640,7 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	background: var(--bgl-gray-light);
 	width: 90%;
 }
-.single-image-item-preview[data-v-d8f3ff01]:hover::after {
+.single-image-item-preview[data-v-38a4d4a9]:hover::after {
 	content: 'zoom_in';
 	font-size: 32px;
 	font-family: 'Material Symbols Outlined', serif;
@@ -2650,20 +2650,20 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	z-index: 9;
 	pointer-events: none;
 }
-.single-image-item-preview:hover img[data-v-d8f3ff01] {
+.single-image-item-preview:hover img[data-v-38a4d4a9] {
 	filter: brightness(70%);
 }
-.bgl_fill-image.single-image-item-preview[data-v-d8f3ff01] {
+.bgl_fill-image.single-image-item-preview[data-v-38a4d4a9] {
 	height: 100%;
 }
-.bgl_fill-image.single-image-item-preview .single-preview[data-v-d8f3ff01] {
+.bgl_fill-image.single-image-item-preview .single-preview[data-v-38a4d4a9] {
 	border-radius: unset;
 	object-fit: cover;
 	box-shadow: unset;
 	width: 100%;
 	height: auto;
 }
-.single-image-item-preview .pie[data-v-d8f3ff01] {
+.single-image-item-preview .pie[data-v-38a4d4a9] {
 	transform-origin: top;
 	transform: scale(1.4);
 	position: absolute;
@@ -2677,31 +2677,31 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	border: none !important;
 	padding: 0 !important;
 }
-.bgl_oval-upload[data-v-d8f3ff01] {
+.bgl_oval-upload[data-v-38a4d4a9] {
 	border-radius: 100% !important;
 	overflow: hidden;
 }
-.bgl_oval-upload p[data-v-d8f3ff01] {
+.bgl_oval-upload p[data-v-38a4d4a9] {
 	padding: 0.75rem !important;
 	font-size: 12px;
 }
-.bgl_oval-upload .fileUploadPlaceHolder[data-v-d8f3ff01] {
+.bgl_oval-upload .fileUploadPlaceHolder[data-v-38a4d4a9] {
 	top: 0;
 }
-.bgl_oval-upload .pie[data-v-d8f3ff01] {
+.bgl_oval-upload .pie[data-v-38a4d4a9] {
 	transform: scale(1);
 }
-.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-d8f3ff01] {
+.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-38a4d4a9] {
 	transform: scale(0.4) !important;
 }
-.bgl_oval-upload .single-image-item-preview[data-v-d8f3ff01] {
+.bgl_oval-upload .single-image-item-preview[data-v-38a4d4a9] {
 	height: 100%;
 }
-.bgl_oval-upload .single-preview[data-v-d8f3ff01] {
+.bgl_oval-upload .single-preview[data-v-38a4d4a9] {
 	margin: 0;
 	height: 100% !important;
 }
-.pie[data-v-d8f3ff01] {
+.pie[data-v-38a4d4a9] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -2709,7 +2709,7 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-d8f3ff01]:before {
+.pie[data-v-38a4d4a9]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -2727,26 +2727,26 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-d8f3ff01] {
+.pie .success[data-v-38a4d4a9] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-d8f3ff01] {
+.pie .progress[data-v-38a4d4a9] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-d8f3ff01] {
+.pie.complete .progress[data-v-38a4d4a9] {
 	display: none;
 }
-.pie.complete .success[data-v-d8f3ff01] {
+.pie.complete .success[data-v-38a4d4a9] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-d8f3ff01]:before {
+.pie.complete[data-v-38a4d4a9]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-d8f3ff01] {
+.pie.complete[data-v-38a4d4a9] {
 	color: var(--bgl-green);
 }
 
@@ -4389,25 +4389,25 @@ body:has(.bg-dark.is-active) {
 	padding: 0 4px;
 }
 
-.bgl_pill-btn[data-v-764b6b8b]{
+.bgl_pill-btn[data-v-ae730ec5]{
 	color: var(--pill-btn-color);
 	background: var(--pill-btn-bg);
 	width: calc(var(--pill-height) / 1.25)!important;
 	height: calc(var(--pill-height) / 1.25)!important;
 }
-.loading[data-v-764b6b8b] {
+.loading[data-v-ae730ec5] {
   border: 1px solid var(--bgl-light-text);
   border-bottom: 2px solid var(--bgl-light-text);
-  animation: spin-764b6b8b 1s linear infinite;
+  animation: spin-ae730ec5 1s linear infinite;
   border-radius: 100px;
   width: 1rem;
   height: 1rem;
   margin: auto;
 }
-.bgl_flatPill .loading[data-v-764b6b8b] {
+.bgl_flatPill .loading[data-v-ae730ec5] {
 	border-bottom: 2px solid var(--bgl-text-color);
 }
-@keyframes spin-764b6b8b {
+@keyframes spin-ae730ec5 {
 0% {
     transform: rotate(0deg);
 }
@@ -4415,11 +4415,11 @@ body:has(.bg-dark.is-active) {
     transform: rotate(360deg);
 }
 }
-.bgl_pill[data-v-764b6b8b] {
+.bgl_pill[data-v-ae730ec5] {
   padding-inline: 0.25rem;
   transition: var(--bgl-transition);
-  background-color: var(--dbb738e2);
-  color: var(--418961aa);
+  background-color: var(--09d70b6a);
+  color: var(--69df9534);
   display: inline-block;
   margin-inline-end: 0.25rem;
   border-radius: var(--pill-border-radius);
@@ -4427,26 +4427,26 @@ body:has(.bg-dark.is-active) {
   vertical-align: middle;
   margin-bottom: 0.25rem;
 }
-.bgl_pill[disabled="true"][data-v-764b6b8b] {
+.bgl_pill[disabled="true"][data-v-ae730ec5] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.bgl_pill-flex[data-v-764b6b8b] {
+.bgl_pill-flex[data-v-ae730ec5] {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   justify-content: center;
   height: 100%;
 }
-.bgl_pill.bgl_flatPill[data-v-764b6b8b] {
+.bgl_pill.bgl_flatPill[data-v-ae730ec5] {
   background: transparent;
 }
-.bgl_pill.round[data-v-764b6b8b] {
+.bgl_pill.round[data-v-ae730ec5] {
   border-radius: 1000px;
 }
-.bgl_pill-border[data-v-764b6b8b] {
-  outline: 1px solid var(--dbb738e2);
-  color: var(--dbb738e2);
+.bgl_pill-border[data-v-ae730ec5] {
+  outline: 1px solid var(--09d70b6a);
+  color: var(--09d70b6a);
   background: transparent;
 }
 
@@ -4641,22 +4641,22 @@ td[data-v-857ccb8b]:has(:checked){
   -moz-user-drag: none;
 }
 
-.bgl-lightbox[data-v-fb2d5763]:has(.bgl_vid) {
+.bgl-lightbox[data-v-4789af69]:has(.bgl_vid) {
 	width: 90vw;
 }
-.lightbox-image[data-v-fb2d5763]{
+.lightbox-image[data-v-4789af69]{
 	object-fit: contain;
 }
-.bgl-lightbox-overlay[data-v-fb2d5763] {
+.bgl-lightbox-overlay[data-v-4789af69] {
 	background: rgba(0, 0, 0, 0.8);
 }
-.bgl-lightbox[data-v-fb2d5763] {
+.bgl-lightbox[data-v-4789af69] {
 	max-height: 90%;
 }
-.bgl-lightbox-item[data-v-fb2d5763]{
-	animation: 500ms ease bgl-lightbox-load-fb2d5763;
+.bgl-lightbox-item[data-v-4789af69]{
+	animation: 500ms ease bgl-lightbox-load-4789af69;
 }
-@keyframes bgl-lightbox-load-fb2d5763 {
+@keyframes bgl-lightbox-load-4789af69 {
 from {
     scale:0.7;
 }
@@ -4664,44 +4664,44 @@ to {
 	scale:1;
 }
 }
-.bgl-lightbox-item[data-v-fb2d5763] * {
+.bgl-lightbox-item[data-v-4789af69] * {
 	max-height: calc(80vh - 90px);
 	border-radius: 3px;
 	margin: auto;
-	animation: 200ms ease bgl-lightbox-load-fb2d5763;
+	animation: 200ms ease bgl-lightbox-load-4789af69;
 	transition: max-height 200ms ease;
 }
-.bgl-lightbox-item.zoomed[data-v-fb2d5763] * {
+.bgl-lightbox-item.zoomed[data-v-4789af69] * {
 	max-height: calc(100vh - 90px);
 	height: calc(100vh - 90px);
 }
-.navigation[data-v-fb2d5763] {
+.navigation[data-v-4789af69] {
 	top: 50%;
 	transform: translateY(-50%);
 }
-.thumbnail[data-v-fb2d5763] {
+.thumbnail[data-v-4789af69] {
 	height: 50px;
 	width: 50px;
 }
-.thumbnail[data-v-fb2d5763]:hover {
+.thumbnail[data-v-4789af69]:hover {
 	opacity: 1;
 }
-.thumbnail[data-v-fb2d5763]:active {
+.thumbnail[data-v-4789af69]:active {
 	opacity: 0.8;
 }
-.thumbnail.active[data-v-fb2d5763] {
+.thumbnail.active[data-v-4789af69] {
 	opacity: 1;
 	outline: 2px solid white;
 }
-.file-info[data-v-fb2d5763]{
+.file-info[data-v-4789af69]{
 	max-width: 420px
 }
 @media screen and (max-width: 910px) {
-.file-info[data-v-fb2d5763]{
+.file-info[data-v-4789af69]{
 	max-width: 220px;
 	text-align: center !important;
 }
-.file-info[data-v-fb2d5763] *{
+.file-info[data-v-4789af69] *{
 	text-align: center !important;
 	margin-inline: 0 !important;
 	max-width: 100% !important;

package/package.json

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

package/src/components/Pill.vue

@@ -100,7 +100,7 @@ const computedBackgroundColor = $computed(
 			<div v-if="loading" class="loading" />
 			<div v-else>
 				<div v-if="btnEnd" class="flex h-100">
-					<Btn class="bgl_pill-btn" round thin v-bind="btnEnd" />
+					<Btn class="bgl_pill-btn" round thin flat v-bind="btnEnd" />
 				</div>
 			</div>
 		</div>

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'"